/* =====================================================================
   City Practice Area Template (2026)
   Figma "City Practice Area Level 3 - Hi-Fi" (MLO Web Design 2026).
   All rules scoped to .cpa26-* to avoid bleeding into global styles.
   ===================================================================== */

:root {
    --cpa-bg: #e9f2f4;
    /* hero / calc card light blue-grey */
    --cpa-red: #e53c3c;
    /* CTA red (exact Figma value) */
    --cpa-red-hover: #c92625;
    --cpa-teal: #068288;
    /* 2026 band teal */
    --cpa-teal-ink: #007481;
    /* settlement amount / accents */
    --cpa-ink: #1d1e1f;
    /* near-black text */
    --cpa-muted: #6c6c6c;
    --cpa-radius: 15px;
}

/* Page background white; hero supplies its own light tint. */
body.page-template-city-practice-area-2026 {
    background: #ffffff;
}

/* Cover the admin-bar white band above the hero when logged in/preview. */
body.admin-bar .cpa26-hero {
    margin-top: -32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .cpa26-hero {
        margin-top: -46px;
    }
}

/* ============================= BUTTON ============================= */
/* Site CTA button (.custom-btn) — mirrored EXACTLY from the global form submit button
   (.frm_light .frm_submit button), the canonical, correctly-built button, so the hover
   (badge circle expands + rotates, arrow scales, label nudges) matches the whole site.
   DO NOT modify these rules. */
.custom-btn {
    background-color: #e53c3c !important;
    border-radius: 100px !important;
    padding: 17px 26px 17px 23px !important;
    width: fit-content !important;
    position: relative !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    border: 0 !important;
    display: inline-block;
    cursor: pointer;
}


.custom-btn a,
.custom-btn span {
    font-family: 'gilroy-semibold' !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: #fff !important;
    text-decoration: none !important;
    line-height: 1 !important;
    letter-spacing: -0.005em;
    display: block;
    transform: translateX(0px);
    transition: all 0.3s ease-in-out;
}

.custom-btn::before {
    content: "" !important;
    background: #e53c3c;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    border: 2px solid #fff;
    border-radius: 100px;
    box-sizing: border-box;
    transition: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    left: unset !important;
    bottom: unset !important;
    z-index: 1;
}

.custom-btn::after {
    content: "";
    background-image: url('data:image/svg+xml,<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.125528 5.87447C-0.0418396 5.70711 -0.0418396 5.43575 0.125528 5.26838L5.26838 0.125528C5.43575 -0.0418396 5.70711 -0.0418396 5.87447 0.125528C6.04184 0.292895 6.04184 0.564252 5.87447 0.731619L0.731619 5.87447C0.564252 6.04184 0.292895 6.04184 0.125528 5.87447Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.57143 5.14258C5.33474 5.14258 5.14286 4.9507 5.14286 4.71401L5.14286 0.856866L1.28572 0.856865C1.04902 0.856865 0.857146 0.664988 0.857146 0.428294C0.857146 0.191601 1.04902 -0.000277006 1.28572 -0.000276985L5.57143 -0.000276604C5.80812 -0.000276583 6 0.191601 6 0.428295L6 4.71401C6 4.9507 5.80812 5.14258 5.57143 5.14258Z" fill="white"/></svg>');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    right: 7px;
    top: 7px;
    width: 6px;
    height: 6px;
    transition: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-sizing: border-box;
    z-index: 1;
}

@media (min-width: 1025px) {
    .custom-btn:hover::before {
        transform: rotate(-136deg);
        width: 49px !important;
        height: 49px !important;
        right: -30px !important;
    }

    .custom-btn:hover::after {
        transform: rotate(-136deg);
        width: 12.73px !important;
        height: 12.73px !important;
        right: -12px !important;
        top: 18px;
    }

    .custom-btn:hover a,
    .custom-btn:hover span {
        transform: translateX(-3px);
    }
}

/* Mobile CTA vertical centering. The canonical button is `display:inline-block` with
   `line-height:1`, which positions the label by its text baseline — Chrome centres it, but
   iOS Safari renders the label high in the pill and can clip the bottom (reported across
   several buttons on the page). Flex-centring the label removes the baseline dependency and
   a slightly roomier line-height stops iOS clipping glyphs; padding is trimmed so the pill
   stays the same ~50px height. Desktop (which renders correctly) is untouched. */
@media (max-width: 1024px) {

    /* `.cf-btn .custom-btn` is included because the theme styles that variant (the resources
       "View more" button) at higher specificity with `line-height:1 !important; padding:17px
       !important` — without matching it here, that one button kept the baseline-positioned,
       iOS-clipped label while every other CTA was fixed. */
    .custom-btn,
    .cf-btn .custom-btn {
        display: inline-flex;
        /* NOT !important: still beats the base `display:inline-block` by
                                   cascade order, but lets the more-specific `display:none` hide
                                   toggles (.bs-header .bs-btn-desktop, .cpa26-why-head .custom-btn)
                                   win — an !important here un-hid those buttons. */
        align-items: center;
        justify-content: center;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        overflow: visible;
    }

    .custom-btn a,
    .cf-btn .custom-btn a {
        display: inline-flex;
        align-items: center;
    }

    .custom-btn a,
    .custom-btn span,
    .cf-btn .custom-btn a,
    .cf-btn .custom-btn span {
        line-height: 1.2 !important;
    }
}

/* ============================= HERO ============================= */
.cpa26-hero {
    position: relative;
    width: 100%;
    background: var(--cpa-bg);
    overflow: hidden;
}

.cpa26-hero-inner {
    padding-bottom: 40px;
}

.cpa26-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    min-height: 300px;
}

.cpa26-hero-text {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 760px;
}

.cpa26-hero-title {
    font-family: 'gilroy-extrabold', 'Gilroy-Extrabold', sans-serif;
    font-weight: normal;
    /* face is single-weight; avoid synthetic faux-bold */
    color: var(--cpa-ink);
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.12;
    letter-spacing: -0.5px;
    margin: 0 0 22px;
}

.cpa26-breadcrumb {
    font-family: 'gilroy-bold', sans-serif;
    font-weight: normal;
    font-size: 15px;
    line-height: 1.4;
    color: var(--cpa-ink);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.cpa26-breadcrumb a {
    color: var(--cpa-ink);
    text-decoration: none;
    transition: color .2s ease;
}

.cpa26-breadcrumb a:hover {
    color: var(--cpa-red);
}

.cpa26-bc-crumb {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.cpa26-bc-sep {
    display: inline-flex;
    align-items: center;
    color: var(--cpa-ink);
}

.cpa26-bc-sep svg {
    width: 8px;
    height: 16px;
    display: block;
}

.cpa26-bc-sep svg path {
    stroke-width: 2;
}

.cpa26-hero-illus {
    flex: none;
    /* size from width + intrinsic ratio, never stretch */
    width: 217px;
    /* design size: 217 x 154 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.cpa26-hero-illus img {
    width: 100%;
    height: auto;
    display: block;
}

/* Full-bleed divider — spans the whole viewport width, edge to edge. */
.cpa26-hero-divider {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
    width: 100vw;
    margin: 0 0 28px calc(50% - 50vw);
}

/* Tablet: keep the two-column row, just tighten the gap so the car never
   collides with the (wrapping) title. */
@media screen and (max-width: 1024px) {
    .cpa26-hero-top {
        gap: 28px;
    }

    .cpa26-hero-illus {
        width: clamp(150px, 18vw, 217px);
    }
}

/* Mobile (matches the Figma mobile frame, 390px): car small + left-aligned
   ABOVE the title, then title, breadcrumb, full-width divider, button.
   Spacing from the frame: car->title 50, title->breadcrumb 18. */
@media screen and (max-width: 767px) {
    .cpa26-hero-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 50px;
        /* car -> title */
        min-height: 0;
    }

    .cpa26-hero-illus {
        order: -1;
        /* car comes first (above the title) */
        width: 142px;
        align-self: flex-start;
    }

    .cpa26-hero-title {
        font-size: clamp(36px, 10.5vw, 46px);
        line-height: 1.12;
        margin-bottom: 18px;
        /* title -> breadcrumb */
    }

    /* Keep the breadcrumb on ONE line: 12px fits the full trail on typical phones
       (~330px wide), and nowrap + horizontal scroll is a safety net on very narrow
       devices so it never wraps to a second line with a dangling "/". */
    .cpa26-breadcrumb {
        font-size: 12px;
        gap: 4px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .cpa26-breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .cpa26-bc-sep svg {
        height: 14px;
    }

    .cpa26-hero-divider {
        margin-top: 36px;
        margin-bottom: 32px;
    }

    /* shown, full-bleed */
    .cpa26-hero-inner {
        padding-bottom: 48px;
    }
}

/* =====================================================================
   TWO-COLUMN BODY  (sticky TOC sidebar + long-form article)
   ===================================================================== */
/* Sticky sidebar needs no scroll-container ancestor. The theme sets overflow:hidden
   on #mainContent (and the mPS2id scroll-target classes), which makes them scroll
   containers and silently disables position:sticky. Use `visible` (NOT hidden/clip):
   `hidden` re-breaks sticky; `clip` triggers a Chrome bug that stops the fixed WP
   admin bar from painting. `visible` keeps sticky working AND the admin bar visible.
   (Verified no horizontal overflow on this template.) */
body.page-template-city-practice-area-2026,
body.page-template-city-practice-area-2026 #mainContent,
body.page-template-city-practice-area-2026 ._mPS2id-t,
body.page-template-city-practice-area-2026 .mPS2id-target {
    overflow: unset !important;
}

/* The theme's global .container is 1360px, but the site footer uses a narrower
   1255px container. Match the footer so the hero + article edges line up with it.
   (.container,.cpa26-* = specificity 0,2,0, beats the theme's .container at 0,1,0.) */
/* Match the footer's container exactly so the hero + article edges line up with the
   site header and footer: 1255px max-width WITH the theme .container's standard 30px
   side padding (theme global .container is 1360px; the footer narrows to 1255).
   NOTE: an earlier version zeroed this padding to widen the article column to ~828px
   (261px cards), but that pushed the page content ~30px past the header/footer on
   each side — per design review we align to the site margins instead, so the article
   column / FR cards sit slightly narrower. Padding is inherited from the theme rule. */
.cpa26-hero-inner.container,
.cpa26-body-grid.container {
    max-width: 1255px;
}

/* Divider line separating the article from the global footer (this template has no
   request-form section to bridge into the footer). Matches the footer's own hr —
   1px, faint, container width — and the 56px footer top-padding moves below it. */
body.page-template-city-practice-area-2026 #main_footer {
    padding-top: 0;
}

body.page-template-city-practice-area-2026 #main_footer .footer>.container {
    border-top: 1px solid rgba(0, 58, 85, 0.1);
    padding-top: 56px;
}

/* The theme's footer scroll-to-top is absolutely positioned at top:0 of the footer
   .container. Our added 56px top-padding pushes the footer content down but not this
   absolute button, leaving it stranded up on the divider. Drop it to the content top
   so it lines up with the phone-number row (as it does on other pages). */
body.page-template-city-practice-area-2026 #main_footer .footer_scroll-to-top {
    top: 56px;
}

.cpa26-body {
    padding: 120px 0 90px;
}

.cpa26-body-grid {
    display: grid;
    grid-template-columns: 296px minmax(0, 1fr);
    column-gap: 131px;
    align-items: start;
}

/* ---- Sidebar ---- */
.cpa26-sidebar {
    position: sticky;
    top: 127px;
    /* header bottom (92) + 35px gap */
    align-self: start;
    /* fit the viewport so the consult card + its button stay on-screen on short displays:
       the sidebar is a flex column, the TOC list shrinks/scrolls, the consult card is pinned. */
    max-height: calc(100vh - 147px);
    display: flex;
    flex-direction: column;
}

.cpa26-toc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
}

.cpa26-toc-ico {
    width: 25px;
    height: 18px;
    flex: 0 0 25px;
    display: block;
}

.cpa26-toc-ico svg {
    width: 100%;
    height: 100%;
    display: block;
}

.cpa26-toc-title {
    font-family: 'gilroy-extrabold', sans-serif;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -0.66px;
    color: #000;
}

.cpa26-toc-chev {
    display: none;
}

/* mobile-only expand/collapse affordance (see ≤1024 block) */
.cpa26-toc-sticky {
    display: none !important;
}

/* fixed clone of the TOC, shown when the in-flow TOC scrolls past (mobile) */
.cpa26-toc {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 0 1 auto;
}

.cpa26-toc-head {
    flex: 0 0 auto;
}

/* bottom fade — hints there's more of the list to scroll to */
.cpa26-toc::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: linear-gradient(to top, #fff 18%, rgba(255, 255, 255, 0));
    pointer-events: none;
    opacity: 1;
    transition: opacity .2s ease;
}

/* JS adds .is-scrolled-end when the list is scrolled to the bottom → hide the fade so the
   last item is fully visible/accessible (not covered by the gradient). */
.cpa26-toc.is-scrolled-end::after {
    opacity: 0;
}

.cpa26-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 1 auto;
    min-height: 0;
    /* allow the list to shrink (and scroll) on short viewports */
    max-height: 400px;
    /* but never taller than 400px */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    /* the list's own scroll never chains out to the page */
    padding-right: 14px;
}

/* thin custom scrollbar for the TOC list */
.cpa26-toc-list::-webkit-scrollbar {
    width: 3px;
}

.cpa26-toc-list::-webkit-scrollbar-track {
    background: #ececec;
    border-radius: 3px;
}

.cpa26-toc-list::-webkit-scrollbar-thumb {
    background: #b9b9b9;
    border-radius: 3px;
}

.cpa26-toc-item {
    margin: 0;
    padding: 0;
}

/* neutralize global <li> spacing so the 24px flex gap is exact */
.cpa26-toc-item a {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-decoration: none;
    font-family: 'gilroy-bold', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.6);
    transition: color .2s ease;
}

.cpa26-toc-num {
    flex: 0 0 auto;
}

.cpa26-toc-item a:hover {
    color: rgba(0, 0, 0, 0.85);
}

.cpa26-toc-item.is-active a {
    color: var(--cpa-red);
}

/* ---- Consult card ---- */
.cpa26-consult {
    border-top: 1px solid #ececec;
    margin-top: 35px;
    padding-top: 45px;
    padding-bottom: 10px;
    flex: 0 0 auto;
    /* pinned at the sidebar bottom — always visible incl. its button */
}

.cpa26-consult-head {
    font-family: 'gilroy-extrabold', sans-serif;
    font-size: 26px;
    line-height: 1.3;
    letter-spacing: -0.78px;
    color: #000;
    margin: 0 0 20px;
    max-width: 294px;
}

/* ---- Article column ---- */
.cpa26-content {
    min-width: 0;
}

.cpa26-h2 {
    font-family: 'gilroy-extrabold', sans-serif;
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: #000;
    margin: 75px 0 25px;
    scroll-margin-top: 110px;
}

.cpa26-content>.cpa26-h2:first-child {
    margin-top: 0;
}

.cpa26-intro {
    margin-bottom: 8px;
}

/* higher specificity than .cpa26-prose p so the lead keeps its 22px SemiBold look */
.cpa26-intro.cpa26-prose p,
.cpa26-intro p {
    font-family: 'gilroy-semibold', sans-serif;
    font-size: 22px;
    line-height: 1.4;
    letter-spacing: -0.44px;
    color: #000000;
    margin: 0 0 21px;
}

.cpa26-intro.cpa26-prose p:last-child {
    margin-bottom: 0;
}

/* ---- Award strip — monochrome badge marquee (content column) ---- */
.cpa26-awards {
    position: relative;
    margin: 36px 0 8px;
    overflow: hidden;
}

/* Edge fades as overlays (NOT a CSS mask — a mask forces the animated track onto a
   composited layer that Chrome downsamples mid-animation, blurring the raster badges). */
.cpa26-awards::before,
.cpa26-awards::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 64px;
    z-index: 2;
    pointer-events: none;
}

.cpa26-awards::before {
    left: 0;
    background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
}

.cpa26-awards::after {
    right: 0;
    background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0));
}

.cpa26-awards-track {
    display: flex;
    align-items: center;
    gap: 44px;
    width: max-content;
    animation: cpa26-marquee 28s linear infinite;
}

/* Pause on hover ONLY on hover-capable (desktop) devices. On touch, :hover sticks after a
   tap and would freeze the marquee permanently ("slider just stops"), so touch devices keep
   it auto-scrolling. */
@media (hover: hover) {
    .cpa26-awards:hover .cpa26-awards-track {
        animation-play-state: paused;
    }
}

.cpa26-award {
    flex: 0 0 auto;
}

.cpa26-award img {
    width: 98px;
    height: 98px;
    object-fit: contain;
    display: block;
}

@keyframes cpa26-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cpa26-awards-track {
        animation: none;
        flex-wrap: wrap;
    }
}

/* ---- Icon list ---- */
.cpa26-iconlist {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 30px 0;
}

.cpa26-iconlist-item {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 10px;
    /* exact title -> description distance */
}

.cpa26-iconlist-ico {
    grid-column: 1;
    grid-row: 1 / 3;
    /* span both rows so it doesn't dictate the title->desc gap */
    align-self: start;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--cpa-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 60px;
}

.cpa26-iconlist-ico img,
.cpa26-iconlist-ico svg {
    width: 60px;
    height: 60px;
    display: block;
}

.cpa26-iconlist-title {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    /* push the title down to the icon's vertical centre: (icon 60 - line 27) / 2 */
    margin: 16.5px 0 0;
    font-family: 'gilroy-bold', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.8);
}

.cpa26-iconlist-desc {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-family: 'gilroy-regular', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.8);
}

/* ---- Inline figure (e.g. timeline infographic) ---- */
.cpa26-figure {
    margin: 24px 0;
}

.cpa26-figure img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- Numbered list (light-teal circle bullet + bold lead) ---- */
/* Theme adds a global li::before counter(step-counter) that renders a stray "0";
   suppress it for all article-column lists. */
.cpa26-content li::before {
    content: none !important;
}

.cpa26-numlist {
    list-style: none;
    margin: 24px 0;
    padding: 0;
    counter-reset: cpanum;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.cpa26-numlist li {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    counter-increment: cpanum;
    margin: 0;
}

.cpa26-num {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--cpa-bg);
    color: var(--cpa-teal-ink);
    font-family: 'gilroy-bold', sans-serif;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cpa26-num::before {
    content: counter(cpanum);
}

.cpa26-num-text {
    font-family: 'gilroy-regular', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.8);
}

.cpa26-num-text strong,
.cpa26-num-text b {
    font-family: 'gilroy-bold', sans-serif;
    font-weight: normal;
}

/* ---- Bullet list (delayed-injury list, collision types) ---- */
/* 6px red dot + 16px text; bold teal lead (<strong>) and inline links match the
   page's teal/red link treatment. The ::before is re-enabled here (the global
   .cpa26-content li::before suppression above sets content:none). */
.cpa26-bullets {
    list-style: none;
    margin: 24px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cpa26-bullets li {
    position: relative;
    margin: 0;
    padding-left: 16px;
    font-family: 'gilroy-regular', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.8);
}

.cpa26-bullets li::before {
    content: '' !important;
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cpa-red);
}

.cpa26-bullets li strong,
.cpa26-bullets li b {
    font-family: 'gilroy-bold', sans-serif;
    font-weight: normal;
    color: var(--cpa-teal-ink);
}

.cpa26-bullets li a {
    color: var(--cpa-teal);
    font-family: 'gilroy-bold', sans-serif;
    text-decoration: none;
    transition: color .2s ease;
}

.cpa26-bullets li a:hover {
    color: var(--cpa-red);
    text-decoration: none;
}

/* ---- Calculator CTA block ---- */
.cpa26-calc {
    background: var(--cpa-bg);
    border-radius: 20px;
    padding: 53px 45px 49px;
    /* 45px left/right */
    margin: 65px 40px;
    /* 65px top/bottom, 40px inset left/right */
    height: 400px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 30px;
}

.cpa26-calc-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cpa26-calc-head {
    font-family: 'gilroy-bold', sans-serif;
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -0.36px;
    color: #000;
    margin: 0 0 14px;
    max-width: 480px;
}

.cpa26-calc-sub {
    font-family: 'gilroy-regular', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #000;
    margin: 0 0 auto;
    /* pushes the button to the bottom of the card */
}

.cpa26-calc .custom-btn {
    margin: 0;
}

/* Illustration: 198x191 frame, faint 177px circle pinned top-right, calculator 148x165 */
.cpa26-calc-illus {
    position: relative;
    flex: 0 0 198px;
    width: 198px;
    height: 191px;
    align-self: flex-end;
    /* bottom-aligned with the button */
}

.cpa26-calc-illus::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 177px;
    height: 177px;
    border-radius: 50%;
    background: rgba(0, 116, 129, 0.08);
}

.cpa26-calc-illus img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 148px;
    height: 165px;
    display: block;
}

/* The content column narrows sharply once the desktop sidebar reappears just
   above 1024px (296px sidebar + gap eats the column) and in the tablet range,
   which squeezes the row calc card until the heading wraps one word per line.
   A container query stacks the card whenever ITS column is too narrow for the
   row layout — independent of viewport width or whether the sidebar is showing.
   Row layout stays clean (2-line heading) down to ~740px of column width. */
.cpa26-content {
    container-type: inline-size;
    container-name: cpacontent;
}

@container cpacontent (max-width: 740px) {
    .cpa26-calc {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        height: auto;
    }

    .cpa26-calc-illus {
        order: -1;
        align-self: flex-start;
        margin: 0 0 24px;
    }

    .cpa26-calc-head {
        max-width: 100%;
    }

    .cpa26-calc-sub {
        margin: 0 0 20px;
    }
}

/* prose */
.cpa26-prose p {
    font-family: 'gilroy-regular', sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.8);
    margin: 0 0 18px;
}

.cpa26-prose p:last-child {
    margin-bottom: 0;
}

.cpa26-prose a {
    color: var(--cpa-teal);
    font-family: 'gilroy-bold', sans-serif;
    text-decoration: none;
    transition: color .2s ease;
}

.cpa26-prose a:hover {
    color: var(--cpa-red);
    text-decoration: none;
}

.cpa26-prose h3 {
    font-family: 'gilroy-bold', sans-serif;
    font-size: 22px;
    line-height: 1.3;
    color: #000;
    margin: 32px 0 14px;
}

.cpa26-prose ul,
.cpa26-prose ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.cpa26-prose li {
    font-family: 'gilroy-regular', sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 8px;
}

/* ---- FAQ accordion ---- */
/* Ported from the site's shared .custom-accordion component (Office template's
   css/our-office-2026.css, scoped there as .office26-faqs) so this FAQ matches the
   rest of the site. Scoped here under .cpa26-faqs. The slide open/close is driven
   by the template's inline JS (height animation); .is-open handles icon + border. */
.cpa26-faqs .custom-accordion {
    padding-top: 16px;
}

.cpa26-faqs .custom-accordion-item {
    border-top: 1px solid #d9dede;
    transition: background-color .25s, border-color .2s;
}

.cpa26-faqs .custom-accordion-item:last-child {
    border-bottom: 1px solid #d9dede;
}

.cpa26-faqs .custom-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    cursor: pointer;
    padding: 28px 0;
    -webkit-user-select: none;
    user-select: none;
}

/* Figma uses Gilroy SemiBold (not Bold) for the FAQ question; 20px desktop / 18px mobile. */
.cpa26-faqs .custom-accordion-title {
    font-family: 'gilroy-semibold', sans-serif;
    font-weight: normal;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: #1a1a1a;
    padding-left: 1px;
    transition: transform .25s;
}

.cpa26-faqs .custom-accordion-title::after {
    content: none !important;
}

/* kill theme's stray span red-dot */
.cpa26-faqs .custom-accordion-icon {
    flex: 0 0 18px;
    line-height: 0;
    color: #6c6c6c;
    transition: transform .3s;
}

.cpa26-faqs .custom-accordion-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* answer collapse via animated grid rows (0fr↔1fr) — smoother than a JS height
   tween; padding lives on the inner so the row collapses cleanly to zero. */
.cpa26-faqs .custom-accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease, transform .25s ease;
}

.cpa26-faqs .custom-accordion-item.is-open .custom-accordion-content {
    grid-template-rows: 1fr;
}

.cpa26-faqs .custom-accordion-content-clip {
    overflow: hidden;
    min-height: 0;
}

/* no padding here so the row collapses to 0 */
.cpa26-faqs .custom-accordion-content-inner {
    visibility: hidden;
    transition: visibility 0s linear .3s;
    padding: 0 28px 28px 1px;
    font-family: 'gilroy-regular', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.8);
}

.cpa26-faqs .custom-accordion-item.is-open .custom-accordion-content-inner {
    visibility: visible;
    transition: visibility 0s;
}

.cpa26-faqs .custom-accordion-content-inner> :first-child {
    margin-top: 0;
}

.cpa26-faqs .custom-accordion-content p {
    margin: 0 0 16px;
}

.cpa26-faqs .custom-accordion-content p:last-child {
    margin-bottom: 0;
}

.cpa26-faqs .custom-accordion-content a {
    color: #007481;
    font-family: 'gilroy-bold', sans-serif;
    text-decoration: none;
    transition: color .2s ease;
}

.cpa26-faqs .custom-accordion-content a:hover {
    color: #e53c3c;
}

.cpa26-faqs .custom-accordion-item.is-open {
    border-top-color: #333;
}

.cpa26-faqs .custom-accordion-item.is-open .custom-accordion-icon {
    transform: rotate(45deg);
    color: #000;
    opacity: 1;
}

/* HOVER (mouse only, like the Office page): light-teal bg; title + content ease right 20px,
   icon eases left 20px. Gated to real pointers so a mobile tap doesn't leave it stuck. */
@media (hover: hover) and (pointer: fine) {
    .cpa26-faqs .custom-accordion-item:hover {
        background: #e9f2f4;
    }

    .cpa26-faqs .custom-accordion-item:hover .custom-accordion-title,
    .cpa26-faqs .custom-accordion-item:hover .custom-accordion-content {
        transform: translateX(20px);
    }

    .cpa26-faqs .custom-accordion-item:hover .custom-accordion-icon {
        transform: translateX(-20px);
    }

    .cpa26-faqs .custom-accordion-item.is-open:hover .custom-accordion-icon {
        transform: translateX(-20px) rotate(45deg);
    }
}

/* keyboard FOCUS mirrors the same animation (headers are focusable; see template JS) */
.cpa26-faqs .custom-accordion-header:focus-visible {
    outline: none;
}

.cpa26-faqs .custom-accordion-item:has(.custom-accordion-header:focus-visible) {
    background: #e9f2f4;
}

.cpa26-faqs .custom-accordion-item:has(.custom-accordion-header:focus-visible) .custom-accordion-title,
.cpa26-faqs .custom-accordion-item:has(.custom-accordion-header:focus-visible) .custom-accordion-content {
    transform: translateX(20px);
}

.cpa26-faqs .custom-accordion-item:has(.custom-accordion-header:focus-visible) .custom-accordion-icon {
    transform: translateX(-20px);
}

.cpa26-faqs .custom-accordion-item.is-open:has(.custom-accordion-header:focus-visible) .custom-accordion-icon {
    transform: translateX(-20px) rotate(45deg);
}

/* ---- Further Reading (related-article card grid) ---- */
.cpa26-fr {
    margin: 60px 0 0;
}

.cpa26-fr-head {
    font-family: 'gilroy-extrabold', sans-serif;
    font-weight: normal;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: #000;
    margin: 0 0 28px;
}

/* Fluid reflow: cards keep a ~240px+ width and drop from 3→2→1 columns as the
   screen narrows (the 3rd card wraps to the next row) instead of squishing. */
.cpa26-fr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 23px;
}

.cpa26-fr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 305px;
    padding: 35px 24px 36px;
    /* sides 24 => ~213px text width (matches Figma); bottom 36 */
    background: var(--cpa-bg);
    border-radius: 11px 0 11px 11px;
    /* top-right sharp — that corner is the fold/cut (Figma r=11) */
    overflow: hidden;
    text-decoration: none;
    transition: background-color .6s ease;
}

/* hover: card fills teal, text turns white (no lift, no shadow) */
.cpa26-fr-card:hover {
    background: var(--cpa-teal);
}

.cpa26-fr-card:hover .cpa26-fr-num {
    color: rgba(255, 255, 255, 0.85);
}

.cpa26-fr-card:hover .cpa26-fr-title {
    color: #fff;
}

/* Folded top-right dog-ear drawn as an inline SVG (crisp at any DPR). The old
   gradient+mask approach left a faint diagonal seam on 3x mobile screens; an SVG
   with two solid paths — a white "cut" triangle (page bg, upper-right) painted
   first, then the fold-paper triangle (lower-left, rounded inner corner) on top —
   has no gradient transition to alias. Paper darkens on hover. 80x80 = Figma. */
.cpa26-fr-fold {
    position: absolute;
    top: 0;
    right: 0;
    width: 86px;
    height: 86px;
    z-index: 0;
    display: block;
    pointer-events: none;
}

.cpa26-fr-fold-paper {
    fill: #c6dee1;
    transition: fill .6s ease;
}

.cpa26-fr-card:hover .cpa26-fr-fold-paper {
    fill: #045d62;
}

.cpa26-fr-num {
    position: relative;
    z-index: 1;
    font-family: 'gilroy-bold', sans-serif;
    font-size: 14px;
    letter-spacing: 0.14px;
    color: rgba(6, 130, 136, 0.8);
    transition: color .6s ease;
}

/* the title wrapper sits at the bottom and slides up 48px on hover to reveal the arrow.
   line-height:1.4 here too — the title span's 1.4 alone is overridden by this block's
   inherited (~1.6) strut, which was rendering the lines at ~32px instead of 28px. */
.cpa26-fr-body {
    position: relative;
    z-index: 1;
    line-height: 1.4;
    transition: transform .6s ease;
}

.cpa26-fr-card:hover .cpa26-fr-body {
    transform: translateY(-48px);
}

.cpa26-fr-title {
    font-family: 'gilroy-semibold', sans-serif;
    font-weight: normal;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.4px;
    color: #000;
    margin: 0;
    transition: color .6s ease;
}

/* arrow pinned near the bottom-left; fades in AND rotates 45deg clockwise on hover */
.cpa26-fr-arrow {
    position: absolute;
    left: 24px;
    bottom: 36px;
    z-index: 1;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    color: var(--cpa-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: rotate(-45deg);
    transition: opacity .6s ease, transform .6s ease;
}

.cpa26-fr-card:hover .cpa26-fr-arrow {
    opacity: 1;
    transform: rotate(0deg);
}

.cpa26-fr-arrow svg {
    width: 9px;
    height: 9px;
    display: block;
}

/* prev/next carousel buttons (45px circle, grey border + dark arrow) — mobile only */
.cpa26-fr-nav {
    display: none;
}

.cpa26-fr-arrow-btn {
    width: 45px;
    height: 45px;
    padding: 0;
    background: none !important;
    border: 0;
    cursor: pointer;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.cpa26-fr-arrow-btn svg {
    width: 45px;
    height: 45px;
    display: block;
}

/* No hover/press/focus state at all — the buttons stay the static grey-border circle
   with a dark arrow (per Figma). The earlier teal-fill hover read as a stuck "pressed"
   state on hover-capable devices (the cursor rests on the button after clicking), so
   it was removed. Only the disabled (end-of-scroll) dim remains.
   Hard-lock every interactive state with !important so neither the theme's generic
   `button:hover` rule nor mobile sticky-hover-on-tap can recolour these buttons. */
/* THE actual culprit: the theme gives every <button> a ::before "badge" — a 49px
   teal (#196C73) circle that appears/scales on hover and covered the arrow with a
   teal disc. Kill the pseudo-elements on these arrow buttons entirely. */
.cpa26-fr-arrow-btn::before,
.cpa26-fr-arrow-btn::after {
    content: none !important;
    display: none !important;
}

.cpa26-fr-arrow-btn:hover,
.cpa26-fr-arrow-btn:active,
.cpa26-fr-arrow-btn:focus,
.cpa26-fr-arrow-btn:focus-visible {
    background: none !important;
    color: inherit !important;
}

.cpa26-fr-arrow-btn:hover svg circle,
.cpa26-fr-arrow-btn:active svg circle,
.cpa26-fr-arrow-btn:focus svg circle {
    fill: none !important;
    stroke: #d9d9d9 !important;
}

.cpa26-fr-arrow-btn:hover svg path,
.cpa26-fr-arrow-btn:active svg path,
.cpa26-fr-arrow-btn:focus svg path {
    stroke: #1d1e1f !important;
}

.cpa26-fr-arrow-btn:disabled {
    opacity: .35;
    cursor: default;
}

/* ===================== WHY MACGILLIVRAY — full-width teal band ===================== */
.cpa26-why {
    width: 100%;
    background: var(--cpa-teal);
    color: #fff;
    padding: 100px 0 0;
}

.cpa26-why-inner.container {
    max-width: 1255px;
}

/* align with body/footer */
/* PROGRESSIVE ENHANCEMENT: by default (no JS) the section is a plain stacked list of
   cards — guaranteed to work everywhere. The JS scrub adds `.is-anim` to `.cpa26-why`
   once it's running, which switches on the pinned-scroll stacking animation below. So if
   the JS ever fails to run (mobile cache, blocked inline script, etc.) the user still sees
   a clean readable list instead of a broken pile-up. */
.cpa26-why-pin-track {
    position: relative;
}

.cpa26-why-pin {
    display: block;
}

.cpa26-why.is-anim .cpa26-why-pin-track {
    height: calc(100vh + 360vh);
}

/* pin ONLY the cards: the title (head) scrolls away first, then the card pins on its own —
   fully visible — and stacks. The pin wrapper + its inner span the track so the sticky
   cards-container gets the full scroll runway. */
.cpa26-why.is-anim .cpa26-why-pin {
    position: static;
    display: block;
    height: 100%;
    overflow: visible;
}

.cpa26-why.is-anim .cpa26-why-pin .cpa26-why-inner {
    height: 100%;
}

.cpa26-why-pin .cpa26-why-inner {
    width: 100%;
}

/* Vertical-only padding: the horizontal `0` in the old shorthand was overriding the
   theme `.container`'s responsive side padding (30px <1400px, 20px <768px), leaving the
   closing block flush to the edges. Set only top/bottom so the sides align with the
   head/body/footer at every width. */
.cpa26-why-closing-wrap {
    padding-top: 90px;
    padding-bottom: 100px;
}

/* header: eyebrow + heading (left), button (right) */
.cpa26-why-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin: 0 0 90px;
}

.cpa26-why-head-text {
    flex: 1 1 auto;
}

.cpa26-why-eyebrow {
    display: block;
    font-family: 'gilroy-bold', sans-serif;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(233, 242, 244, 0.7);
    margin: 0 0 18px;
}

.cpa26-why-heading {
    font-family: 'gilroy-semibold', sans-serif;
    font-weight: normal;
    font-size: 45px;
    line-height: 1.1;
    letter-spacing: -0.675px;
    color: #fff;
    margin: 0;
    max-width: 760px;
}

.cpa26-why-head .custom-btn {
    flex: 0 0 auto;
    margin-top: 32px;
}

/* align button top with the h2 (clears the 32px eyebrow + margin above the h2) */
/* Sticky-stacking reason cards: all pin at the same top; as you scroll, the next card
   rises and stacks on top, and JS (below) shrinks + darkens the cards behind for depth.
   The large margin-bottom is the per-card scroll distance — bigger = slower stacking.
   Dark-teal cards, text-left + diagram-right. */
.cpa26-why-cards {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.cpa26-why-card {
    display: flex;
    gap: 40px;
    align-items: stretch;
    background: #004953;
    border-radius: 15px;
    padding: 56px;
    overflow: hidden;
    position: relative;
    transform-origin: center top;
    will-change: transform, filter;
    box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.20);
}

/* animated mode: cards become an absolutely-stacked pile the JS drives */
.cpa26-why.is-anim .cpa26-why-cards {
    display: block;
    position: sticky;
    top: max(40px, calc((100vh - 527px) / 2));
    height: 527px;
}

.cpa26-why.is-anim .cpa26-why-card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 527px;
}

/* SAFETY: when the animation isn't active (no JS, or a stale cached JS that applies
   transforms without adding .is-anim), strip any leftover inline transform/filter so the
   static fallback list always renders clean instead of shifted/piled. CSS busts reliably
   via ?ver= so this rule is always fresh even when the inline JS is cached stale. */
.cpa26-why:not(.is-anim) .cpa26-why-card {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
}

/* the cards-container unsticks at the track bottom, so the closing (next in flow) sits
   right below the last card — this padding-top is the 35px gap to the closing divider. */
.cpa26-why.is-anim .cpa26-why-closing-wrap {
    padding-top: 35px;
}

.cpa26-why.is-anim .cpa26-why-closing {
    margin-top: 0;
}

.cpa26-why-card-text {
    flex: 0 0 457px;
    max-width: 457px;
    display: flex;
    flex-direction: column;
}

.cpa26-why-card-eyebrow {
    display: block;
    font-family: 'gilroy-bold', sans-serif;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(233, 242, 244, 0.7);
    margin: 0 0 17px;
}

.cpa26-why-card-title {
    font-family: 'gilroy-semibold', sans-serif;
    font-weight: normal;
    font-size: 26px;
    line-height: 1.3;
    letter-spacing: -0.52px;
    color: #fff;
    margin: 0;
}

.cpa26-why-card-body {
    font-family: 'gilroy-regular', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: auto 0 0;
}

/* pinned to card bottom */
.cpa26-why-card-diagram {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.cpa26-why-card-diagram svg,
.cpa26-why-card-diagram img {
    width: 100%;
    height: auto;
    max-width: 580px;
    display: block;
}

/* closing: divider + paragraph (left) + button (right) */
.cpa26-why-closing {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    margin: 56px 0 0;
    padding: 40px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.cpa26-why-closing-text {
    font-family: 'gilroy-regular', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #fff;
    margin: 0;
    max-width: 900px;
    flex: 0 1 auto;
    min-width: 0;
}

/* Button must NEVER shrink (the actual element is .custom-btn, not .cpa26-btn — the old
   selector never matched, so the button was collapsing and clipping its arrow badge).
   With the button fixed, the text column absorbs the width change and wraps to more
   lines so "Consult Now" always stays on one line. */
.cpa26-why-closing .custom-btn {
    flex: 0 0 auto;
}

/* ===== OUR LAWYERS + REVIEWS — exact code reused from the Office 2026 template (.office26-*) ===== */
.office26-people,
.office26-reviews {
    --o26-ink: #1a1a1a;
}

/* cap these sections' head/foot containers to the CPA content width (1255), matching the page */
@media (min-width: 768px) {

    .office26-people>.container,
    .office26-reviews>.container {
        max-width: 1255px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* shared section H2 (Office: 60px Gilroy Bold, 120% line-height) */
.office26-people-head h2,
.office26-reviews-heading {
    font-family: 'gilroy-bold', sans-serif;
    font-weight: normal;
    font-size: 60px;
    line-height: 1.2;
    letter-spacing: -1px;
}

/* ---- PEOPLE (lawyers) ---- */
.office26-people {
    padding: 150px 0 80px;
}

.office26-people-head {
    margin-bottom: 55px;
}

.office26-people-head h2 {
    color: var(--o26-ink);
    margin: 0 0 20px;
    max-width: 660px;
}

.office26-people-sub {
    font-family: 'gilroy-regular', sans-serif;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--o26-ink);
    max-width: 1010px;
    margin: 0;
}

.office26-people-track {
    display: flex;
    gap: 13px;
    overflow-x: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
}

.office26-people-track::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
}

.office26-people-track {
    cursor: grab;
    touch-action: auto;
}

.office26-people-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

.office26-people-track.is-animating {
    scroll-snap-type: none;
}

.office26-person-thumb img {
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

.office26-person {
    flex: 0 0 305px;
    width: 305px;
    scroll-snap-align: start;
}

.office26-person-thumb {
    position: relative;
    display: block;
    width: 305px;
    height: 305px;
    border-radius: 15px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    -webkit-user-drag: none;
    user-select: none;
}

.office26-person-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.office26-person-grad {
    position: absolute;
    inset: 0;
    border-radius: 15px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8));
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

.office26-person-meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
}

.office26-person-name {
    font-family: 'gilroy-semibold', sans-serif;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.4px;
    color: #fff;
}

.office26-person-pos {
    font-family: 'gilroy-medium', sans-serif;
    font-size: 16px;
    line-height: 1.1;
    letter-spacing: -0.32px;
    color: rgba(255, 255, 255, 0.8);
}

.office26-person-name,
.office26-person-pos {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .35s ease, transform .35s ease;
}

.office26-person:hover .office26-person-grad {
    opacity: 1;
}

.office26-person:hover .office26-person-name,
.office26-person:hover .office26-person-pos {
    opacity: 1;
    transform: translateY(0);
}

.office26-person:hover .office26-person-pos {
    transition-delay: .12s;
}

.office26-people-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 35px;
}

.office26-people-nav {
    display: flex;
    gap: 16px;
}

/* ---- shared slider arrows (lawyers + reviews) ---- */
.office26-people-arrow {
    position: relative;
    width: 45px;
    height: 45px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.office26-people-arrow::before,
.office26-people-arrow::after,
.office26-people-arrow span::before,
.office26-people-arrow span::after {
    content: none !important;
    display: none !important;
}

.office26-people-arrow.is-disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
}

.office26-arrow-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid #D9D9D9;
    transform: translate(-50%, -50%) scale(1);
    transition: transform .3s ease;
    pointer-events: none;
}

.office26-arrow-fill {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #E9F2F4;
    transform: translate(-50%, -50%) scale(0);
    transition: transform .3s cubic-bezier(.34, 1.4, .64, 1);
}

/* Box matches the SVG viewBox aspect (14.95:12.7) and the mask fills it exactly (100% 100%).
   iOS Safari mis-sizes/mis-positions `mask-size: contain` on an SVG that has a viewBox but no
   intrinsic width/height, which pushed the arrow off-centre (high) on iPhone while Chrome
   rendered it centred. Filling the exact-aspect box removes that ambiguity everywhere. */
.office26-nav-prev,
.office26-nav-next {
    position: relative;
    z-index: 2;
    display: block;
    width: 14px;
    height: 11.9px;
    background-color: #000000;
    -webkit-mask: var(--o26arrow) center / 100% 100% no-repeat;
    mask: var(--o26arrow) center / 100% 100% no-repeat;
    transition: background-color .25s ease;
}

.office26-nav-prev {
    --o26arrow: url("data:image/svg+xml,%3Csvg viewBox='0 0 14.95 12.7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.9 0.5L0.5 6.35L5.9 12.2M0.5 6.35H14.45' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.office26-nav-next {
    --o26arrow: url("data:image/svg+xml,%3Csvg viewBox='0 0 14.95 12.7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.05 0.5L14.45 6.35L9.05 12.2M14.45 6.35H0.5' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (hover: hover) and (pointer: fine) {
    .office26-people-arrow:hover .office26-arrow-fill {
        transform: translate(-50%, -50%) scale(1);
    }

    .office26-people-arrow:hover .office26-arrow-ring {
        transform: translate(-50%, -50%) scale(0.88);
    }

    .office26-people-arrow:hover .office26-nav-prev,
    .office26-people-arrow:hover .office26-nav-next {
        background-color: #007481;
    }
}

/* ---- REVIEWS (global Google reviews) ---- */
.office26-reviews {
    padding: 0;
}

.office26-reviews-divider {
    height: 1px;
    background: #e3e3e3;
}

.office26-reviews-heading {
    text-align: center;
    max-width: 750px;
    margin: 110px auto 50px;
    color: #161616;
}

.office26-reviews-stack {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    transition: height .4s ease;
}

.office26-review-card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: #E3EFF1;
    border-radius: 25px;
    padding: 70px 75px 60px;
    display: grid;
    grid-template-columns: 33px 1fr;
    column-gap: 74px;
    row-gap: 25px;
    transform-origin: center;
    transition: transform .55s cubic-bezier(.34, 0, .2, 1), opacity .45s ease;
    will-change: transform, opacity;
}

.office26-review-card .office26-review-quote {
    grid-column: 1;
    grid-row: 1 / span 3;
}

.office26-review-card .office26-review-date {
    grid-column: 2;
    grid-row: 1;
}

.office26-review-card .office26-review-text {
    grid-column: 2;
    grid-row: 2;
}

.office26-review-card .office26-review-info {
    grid-column: 2;
    grid-row: 3;
}

.office26-review-card.is-front {
    transform: translateY(0) scale(1);
    opacity: 1;
    z-index: 3;
}

.office26-review-card.is-back {
    transform: translateY(var(--o26-back-ty, 48px)) scale(0.9);
    opacity: 0.65;
    z-index: 2;
}

.office26-review-card.is-leaving {
    transform: translateY(-130%) scale(1.22);
    opacity: 0;
    z-index: 4;
    transition: transform .6s cubic-bezier(.4, 0, .6, 1), opacity .14s ease-out .26s;
    pointer-events: none;
}

.office26-review-card.is-hidden {
    transform: translateY(var(--o26-back-ty, 48px)) scale(0.9);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.office26-review-quote {
    color: #007481;
    line-height: 0;
    align-self: start;
}

.office26-review-quote svg {
    width: 33px;
    height: 33px;
    display: block;
}

.office26-review-date {
    font-family: 'gilroy-semibold', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0;
    color: rgba(0, 0, 0, 0.8);
    margin: 0;
}

.office26-review-text {
    font-family: 'gilroy-semibold', sans-serif;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.4px;
    color: rgba(0, 0, 0, 0.8);
}

.office26-review-text p {
    margin: 0 0 12px;
}

.office26-review-text p:last-child {
    margin-bottom: 0;
}

.office26-review-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.office26-review-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.office26-review-name {
    font-family: 'gilroy-extrabold', 'gilroy-bold', sans-serif;
    font-size: 26px;
    line-height: 1;
    color: #000;
}

.office26-review-stars {
    background: rgba(255, 255, 255, 0.8);
    color: #007481;
    font-family: 'gilroy-bold', sans-serif;
    font-size: 14px;
    line-height: 1;
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
    position: relative;
    top: 1px;
}

.office26-review-google {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: block;
}

.office26-reviews-nav {
    margin-top: 40px;
    display: flex;
    gap: 16px;
    justify-content: center;
}

@media only screen and (max-width: 1023px) {

    .office26-people-head h2,
    .office26-reviews-heading {
        font-size: 44px;
    }
}

@media only screen and (max-width: 767px) {
    .office26-people {
        padding: 90px 0 0;
    }

    .office26-people-head {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 30px;
    }

    .office26-people-sub {
        font-size: 16px;
    }

    .office26-people-foot {
        flex-direction: row-reverse;
        margin-top: 27.5px;
    }

    .office26-people-head h2,
    .office26-reviews-heading {
        font-size: 38px;
        line-height: 1.1;
    }

    .office26-person {
        flex: 0 0 230px;
        width: 230px;
    }

    .office26-person-thumb {
        width: 230px;
        height: 230px;
    }

    .office26-reviews {
        padding: 85px 0 56px;
    }

    /* bottom gap before the settlement section on mobile (was 0 → arrows looked cut off against the teal band) */
    .office26-reviews-nav {
        margin-top: 26px;
    }

    .office26-reviews-heading {
        margin: 85px auto 35px;
        max-width: 100%;
        text-align: left;
    }

    .office26-reviews-stack {
        max-width: 100%;
    }

    .office26-review-card {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto 1fr auto;
        column-gap: 12px;
        row-gap: 30px;
        background: #e9f2f4;
        border-radius: 20px;
        padding: 45px 26px;
        min-height: 500px;
    }

    .office26-review-card .office26-review-quote {
        grid-column: 1;
        grid-row: 1;
    }

    .office26-review-quote svg {
        width: 28px;
        height: 28px;
    }

    .office26-review-card .office26-review-date {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: center;
        font-size: 12px;
    }

    .office26-review-card .office26-review-text {
        grid-column: 1 / -1;
        grid-row: 2;
        align-self: end;
        font-size: 16px;
    }

    .office26-review-card .office26-review-info {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .office26-review-name {
        font-size: 22px;
    }
}

/* responsive: collapse to a single column below the two-column breakpoint */
@media screen and (max-width: 1024px) {

    /* Stop the sideways page-drag on mobile. This template forces `overflow:visible !important`
       on body + #mainContent + the PS2ID scroll targets (see the desktop rule ~line 215) — that's
       required on DESKTOP so the theme's overflow:hidden doesn't trap the sticky sidebar. On mobile
       that same `visible` lets content pan sideways. Re-clip the X axis on those exact elements,
       but ONLY x with `clip` + keep y `visible` → they stay NON-scroll-containers, so the WHY
       pinned-scroll (position:sticky) and PS2ID window-scroll keep working. Matching selectors +
       !important so it beats the desktop rule; scoped to ≤1024 so desktop is untouched. */


    body.page-template-city-practice-area-2026,
    body.page-template-city-practice-area-2026 #mainContent,
    body.page-template-city-practice-area-2026 ._mPS2id-t,
    body.page-template-city-practice-area-2026 .mPS2id-target {
        overflow-x: hidden !important;
        
    }

    .cpa26-body-grid {
        grid-template-columns: 1fr;
        row-gap: 40px;
    }

    .cpa26-sidebar {
        position: static;
        top: auto;
        max-height: none;
        display: block;
    }

    /* Mobile/tablet: the TOC becomes a collapsible dropdown that turns into a sticky top bar once
       scrolled past (matching the site's car-accident v2 pages). Item styling is unchanged;
       JS owns .is-open (expand) and .is-stuck (fixed bar). */
    .cpa26-toc {
        display: block;
        background: #fff;
    }

    /* mobile bar: list icon + 18px title, grey divider lines above + below */
    .cpa26-toc-ico {
        display: block;
    }

    .cpa26-toc-title {
        font-size: 18px;
        letter-spacing: -0.54px;
        transform: translateY(1px);
    }

    .cpa26-toc-head {
        margin-bottom: 0;
        padding: 24px 0 22px;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        position: relative;
    }

    .cpa26-toc-item a {
        font-size: 14px;
    }

    /* Section divider lines go EDGE TO EDGE (full-bleed 100vw) while the content stays inset. */
    .cpa26-consult {
        position: relative;
        margin-top: 0;
        padding-top: 43px;
        padding-bottom: 44px;
        border-top: 0;
    }

    /* Override the base 294px cap (that's for the narrow desktop sidebar). On mobile the
       consult is full-width; 294px forced an awkward "Speak to Halifax Car / Accident
       Lawyers." break. 360px lets "Car Accident" stay on line 1 (needs ≥320px) while
       still wrapping "Lawyers." to line 2 (it's under the ~412px one-line width). */
    .cpa26-consult-head {
        font-size: 24px;
        letter-spacing: -0.72px;
        margin-bottom: 20px;
        max-width: 360px;
    }

    .cpa26-consult::before,
    .cpa26-toc:not(.cpa26-toc-sticky) .cpa26-toc-head::before {
        content: '';
        position: absolute;
        top: 0;
        left: calc(50% - 50vw);
        width: 100vw;
        height: 1px;
        background: #ececec;
    }

    .cpa26-toc:not(.cpa26-toc-sticky)::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        left: calc(50% - 50vw);
        right: auto;
        width: 100vw;
        height: 1px;
        background: #ececec;
        opacity: 1;
    }

    /* in-flow TOC (not the sticky clone): show all items full-height, never scroll INSIDE the list —
       the page scrolls instead. Only the sticky clone dropdown scrolls internally. */
    .cpa26-toc:not(.cpa26-toc-sticky) .cpa26-toc-list {
        overflow-y: hidden;
    }

    /* 40px below the award slider on mobile (was 8px). The marquee keeps auto-scrolling on
       mobile (see the hover-gated pause rule above) with its edge fades intact. */
    .cpa26-awards {
        margin-bottom: 40px;
    }

    /* shake fix: disable scroll-anchoring so expanding the dropdown doesn't jerk the page on iOS */
    .cpa26-content,
    .cpa26-toc-list {
        overflow-anchor: none;
    }

    /* exact v4 dropdown icon: a plus inside a grey circle that rotates into an × when open */
    .cpa26-toc-chev {
        display: block;
        margin-left: auto;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        transition: transform .35s ease;
    }

    .cpa26-toc-chev svg {
        display: block;
        width: 100%;
        height: 100%;
    }

    .cpa26-toc.is-open .cpa26-toc-chev {
        transform: rotate(135deg);
    }

    .cpa26-toc-list {
        max-height: 0;
        overflow-y: hidden;
        /* stays hidden during the max-height animation (avoids iOS scroll-area jitter); JS flips to auto once open */
        flex: none;
        gap: 18px;
        padding-right: 0;
        transition: max-height .4s ease;
    }

    .cpa26-toc.is-open .cpa26-toc-list {
        padding-bottom: 40px;
    }

    /* 4× the old 10px — breathing room below the last item */
    .cpa26-toc::after {
        display: none;
    }

    /* no scroll-fade on mobile — the list is collapsible */
    /* sticky bar once the TOC scrolls under the site header */
    .cpa26-toc.is-stuck {
        position: fixed;
        top: var(--cpa-toc-stick-top, 80px);
        left: 0;
        right: 0;
        z-index: 9990;
        margin: 0;
        padding: 0 20px;
        background: #fff;
        box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.08);
    }

    .cpa26-toc.is-stuck .cpa26-toc-head {
        height: 65px;
        padding-top: 0;
        padding-bottom: 0;
        box-sizing: border-box;
    }

    /* sticky bar = 65px */
    /* Sticky "back to On This Page" bar — fixed at the top once the in-flow TOC scrolls past.
       Separate element (the in-flow TOC scrolls away untouched → no jump). 65px, tap = scroll back. */
    /* Sticky closed TOC — a fixed clone shown once the in-flow TOC scrolls past. (The in-flow TOC
       scrolls away untouched → no scroll jump.) Same design as the collapsed TOC: list-icon +
       "On This Page" + the plus-circle; tap the head to drop the list down. */
    .cpa26-toc.cpa26-toc-sticky {
        position: fixed;
        top: var(--cpa-toc-stick-top, 80px);
        left: 0;
        right: 0;
        z-index: 9990;
        margin: 0;
        padding: 0 20px;
        background: #fff;
        box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.08);
        border-top: 0;
        border-bottom: 0;
    }

    .cpa26-toc-sticky.is-visible {
        display: block !important;
    }

    .cpa26-toc-sticky .cpa26-toc-head {
        height: 65px;
        padding-top: 0;
        padding-bottom: 0;
        border-top: 0;
        box-sizing: border-box;
    }

    /* WHY MACGILLIVRAY band — phones AND iPad portrait: the desktop two-column card squeezes
       the diagram to nothing on narrow widths, so use the single-column card and pin ONLY the
       cards (heading scrolls away) so a full 560px card fits. The diagram is capped so it
       doesn't balloon at the wider tablet width. */
    .cpa26-why {
        padding: 60px 0;
    }

    .cpa26-why.is-anim .cpa26-why-pin-track {
        height: calc(100vh + 300vh);
    }

    .cpa26-why.is-anim .cpa26-why-pin {
        position: static;
        display: block;
        height: 100%;
        overflow: visible;
        padding: 0;
        align-items: stretch;
    }

    .cpa26-why.is-anim .cpa26-why-pin .cpa26-why-inner {
        height: 100%;
    }

    .cpa26-why.is-anim .cpa26-why-cards {
        position: sticky;
        top: max(70px, calc((100vh - 560px) / 2));
        height: 560px;
        display: block;
    }

    /* center the card vertically so a tall iPad viewport doesn't leave a big gap below it */
    .cpa26-why.is-anim .cpa26-why-card {
        height: 560px;
    }

    .cpa26-why.is-anim .cpa26-why-closing-wrap {
        margin-top: 0 !important;
        padding-top: 56px;
        padding-bottom: 24px;
    }

    .cpa26-why-closing-wrap {
        padding-top: 56px;
        padding-bottom: 24px;
    }

    .cpa26-why-head {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 45px;
    }

    /* 45px title→card gap */
    .cpa26-why-head .custom-btn {
        display: none !important;
    }

    /* hide the header CTA (the closing repeats it). !important needed to beat the mobile `.custom-btn{display:inline-flex !important}` centering rule. */
    .cpa26-why-heading {
        font-size: 26px;
        letter-spacing: -0.4px;
    }

    .cpa26-why-card {
        flex-direction: column;
        gap: 22px;
        padding: 45px 28px 40px;
        border-radius: 15px;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
    }

    .cpa26-why-card-text {
        flex: none;
        max-width: none;
    }

    .cpa26-why-card-eyebrow {
        font-size: 12px;
        letter-spacing: 4.32px;
        margin: 0 0 12px;
    }

    .cpa26-why-card-title {
        font-size: 24px;
        letter-spacing: -0.48px;
    }

    .cpa26-why-card-body {
        margin: 18px 0 0;
        font-size: 16px;
        line-height: 1.62;
    }

    .cpa26-why-card-diagram {
        justify-content: center;
    }

    .cpa26-why-card-diagram svg,
    .cpa26-why-card-diagram img {
        width: 100%;
        max-width: 360px;
    }

    .cpa26-why-closing {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        margin-top: 32px;
    }

    .cpa26-why-closing-text {
        font-size: 16px;
    }
}

@media screen and (max-width: 767px) {
    .cpa26-body {
        padding: 85px 0 60px;
    }

    /* Figma mobile: 85px between the banner and the first paragraph */
    /* (WHY MACGILLIVRAY band mobile/tablet rules live in the max-width:1024px block above.) */
    /* Mobile typography (from the Figma mobile frame) */
    .cpa26-h2 {
        font-size: 27px;
        line-height: 1;
        letter-spacing: 0;
    }

    .cpa26-intro.cpa26-prose p,
    .cpa26-intro p {
        font-size: 20px;
        line-height: 1.4;
        letter-spacing: -0.4px;
    }

    .cpa26-prose p,
    .cpa26-prose li {
        font-size: 16px;
        line-height: 1.62;
    }

    .cpa26-prose h3 {
        font-family: 'gilroy-semibold', sans-serif;
        font-size: 20px;
        line-height: 1.4;
        letter-spacing: -0.4px;
    }

    .cpa26-num-text {
        font-size: 16px;
        line-height: 1.62;
    }

    .cpa26-fr-head {
        font-size: 24px;
    }

    /* Mobile: the card grid becomes a horizontal swipe carousel (218px cards).
       It breaks out of the body container's 20px side padding (negative margins) so
       cards scroll edge to edge; the 20px inner padding + scroll-padding keep the
       first card aligned with the heading and let cards snap to that line. The
       heading and the prev/next nav stay inside the 20px content gutter. */
    .cpa26-fr-grid {
        display: flex;
        gap: 15px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
        scroll-padding-left: 20px;
    }

    .cpa26-fr-grid::-webkit-scrollbar {
        display: none;
    }

    /* mobile card: 218x284, padding 30/24 and title 18px (Figma "Mobile/Heading 6") —
       both differ from the desktop card (35/36 padding, 20px title) */
    .cpa26-fr-card {
        flex: 0 0 218px;
        min-height: 284px;
        scroll-snap-align: start;
        padding: 30px 24px;
    }

    .cpa26-fr-title {
        font-size: 18px;
        letter-spacing: -0.09px;
    }

    .cpa26-fr-fold {
        width: 80px;
        height: 80px;
    }

    /* Figma mobile fold = 80px */
    .cpa26-fr-nav {
        display: flex;
        gap: 16px;
        margin-top: 22px;
    }

    .cpa26-fr {
        padding-bottom: 40px;
    }

    /* clear space below the ← → arrows so they aren't cut by the teal WHY band */
    /* (FAQ mobile title size set in the later mobile block — Figma SemiBold 18px) */
    /* Footer divider full-bleed on mobile: move the 1px rule off the padded
       .container onto the full-width .footer so it runs edge to edge. */
    body.page-template-city-practice-area-2026 #main_footer .footer>.container {
        border-top: 0;
    }

    body.page-template-city-practice-area-2026 #main_footer .footer {
        border-top: 1px solid rgba(0, 58, 85, 0.1);
    }

    /* Icon list: 45px circles on mobile (matches the Figma mobile frame) */
    .cpa26-iconlist-item {
        grid-template-columns: 45px minmax(0, 1fr);
        column-gap: 11px;
    }

    .cpa26-iconlist-ico {
        width: 45px;
        height: 45px;
        flex: 0 0 45px;
    }

    .cpa26-iconlist-ico img,
    .cpa26-iconlist-ico svg {
        width: 45px;
        height: 45px;
    }

    .cpa26-iconlist-title {
        font-size: 16px;
        line-height: 1.62;
        margin-top: 9.5px;
    }

    /* (45 - 16*1.62)/2 */
    .cpa26-iconlist-desc {
        font-size: 16px;
        line-height: 1.62;
    }

    /* Calculator CTA: stack, illustration on top */
    .cpa26-calc {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        height: auto;
        padding: 25px 23px 41px;
        margin-left: 0;
        margin-right: 0;
        background: rgba(233, 242, 244, 0.8);
        border-radius: 10px;
    }

    .cpa26-calc-illus {
        order: -1;
        align-self: flex-start;
        flex: 0 0 auto;
        width: 135px;
        height: 129px;
        margin: 0 0 21px;
    }

    .cpa26-calc-illus::before {
        width: 115px;
        height: 115px;
    }

    /* circle top-right */
    .cpa26-calc-illus img {
        width: 103px;
        height: 114px;
    }

    /* calculator bottom-left */
    .cpa26-calc-head {
        font-size: 27px;
        line-height: 1.3;
        letter-spacing: -0.405px;
        margin: 0 0 11px;
        max-width: 302px;
    }

    .cpa26-calc-sub {
        font-size: 16px;
        line-height: 1.62;
        margin: 0 0 16px;
    }

    .cpa26-calc .custom-btn {
        margin: 0;
    }

    /* FAQ: tighter on mobile */
    .cpa26-faqs .custom-accordion-header {
        gap: 18px;
        padding: 22px 0;
    }

    .cpa26-faqs .custom-accordion-title {
        font-size: 18px;
    }

    /* Figma "Mobile/Heading 6" = SemiBold 18px */
    .cpa26-faqs .custom-accordion-content-inner {
        font-size: 16px;
        line-height: 1.62;
        padding: 0 0 22px 1px;
    }
}

/* ============ SETTLEMENT WINS — exact code reused from home-big-settlement ============ */
.big-settlement-section {
    background: #007481;
    padding: 90.14px 0 102.08px;
}

.bs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 62.85px;
}

.bs-heading-container {
    display: flex;
    flex-direction: column;
    gap: 9.5px;
}

.bs-heading-container h3 {
    font-family: 'gilroy-bold';
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 0.36em;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
}

.bs-heading-container h2 {
    font-family: 'gilroy-bold';
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.01em;
    margin: 0;
    color: #fff;
}

.bs-btn-mobile {
    display: none;
}

.bs-cards-wrapper {
    display: flex;
    gap: 25px;
}

.bs-cards-wrapper .owl-stage-outer {
    overflow: visible !important;
}

.bs-card {
    max-width: 403px !important;
    min-width: 403px !important;
    width: 100%;
    border-radius: 5px;
    background-color: #fff;
    padding-top: 32.37px;
    padding-bottom: 28px;
    flex-direction: column !important;
    height: unset !important;
    cursor: pointer;
}

.bs-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;
}

.bs-card-number h2 {
    font-family: 'gilroy-bold';
    font-size: 40px;
    line-height: 49px;
    letter-spacing: -0.01em;
    margin: 0;
    color: #007481;
    transition: all 0.4s;
}

.bs-card-arrow-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #007481;
    width: 41px;
    height: 40px;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.4s;
}

.bs-card-divider {
    border-bottom: 1px solid #D9D9D9;
    margin: 30.37px 0 30px;
}

.bs-card-content {
    display: flex;
    flex-direction: column;
    gap: 20.37px;
    padding: 0 25.29px 0 25px;
}

.bs-card-content p {
    font-family: 'gilroy-bold';
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.002em;
    min-height: 145px;
    color: rgba(0, 0, 0, 0.8);
    margin: 0;
}

.bs-icon-container {
    display: flex;
    gap: 5px;
    align-items: center;
}

.bs-icon-wrapper {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #007481;
    border-radius: 100%;
}

.bs-icon-wrapper img {
    width: 17px !important;
    height: 17px !important;
}

.bs-icon-container h2 {
    font-family: 'gilroy-medium';
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: rgba(0, 0, 0, 0.8);
    margin: 0;
}

.bs-icon-hidden {
    position: absolute;
    transform: translate(-25px, 25px);
    transition: all 0.4s;
}

.bs-icon-visible {
    position: absolute;
    transition: all 0.4s;
}

@media (hover:hover) {
    .bs-card:hover .bs-icon-visible {
        transform: translate(25px, -25px);
    }

    .bs-card:hover .bs-icon-hidden {
        transform: translate(0, 0);
    }

    .bs-card:hover .bs-card-number h2 {
        color: #E53C3C;
    }

    .bs-card:hover .bs-card-arrow-wrapper {
        background-color: #E53C3C;
    }
}

@media (max-width: 767px) {
    .big-settlement-section {
        padding: 64.85px 0 69.52px;
    }

    .bs-heading-container h2 {
        font-size: 27px;
        line-height: 33px;
    }

    .bs-header {
        margin-bottom: 32px;
    }

    .bs-header .bs-btn-desktop {
        display: none;
    }

    .bs-btn-mobile {
        display: block;
        margin-top: 30px;
    }

    .bs-card {
        min-width: 296px !important;
        max-width: 296px !important;
        padding-top: 26px;
        padding-bottom: 30px;
    }

    .bs-cards-wrapper {
        gap: 22.39px;
    }

    .bs-card-header,
    .bs-card-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .bs-card-divider {
        margin-top: 26px;
    }

    .bs-card-number h2 {
        font-size: 34px;
        line-height: 42px;
    }

    .bs-card-content p {
        min-height: 110px;
        font-size: 20px;
        line-height: 26px;
    }

    .bs-icon-container {
        gap: 8px;
    }

    .bs-icon-container h2 {
        font-size: 14px;
        line-height: 17px;
    }
}

/* ============ RESOURCES — exact code reused from the single article page (.resource-grid / .all-resource-grid) ============ */
.resource-grid-section {
    background: #fff;
    padding: 90px 0;
}

.resource-main-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 41px;
}

.resource-main-grid-header h3 {
    color: #000;
    font-family: 'gilroy-bold';
    font-size: 36px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.36px;
    margin: 0;
}

.resource-grid-wrapper {
    display: flex;
    gap: 25px;
}

.resource-btn-mobile {
    display: none;
}

.all-resource-grid-box {
    min-height: 470px;
    width: 100%;
    border-radius: 15px;
    outline: 1px solid #D9D9D9;
    border: 1px solid transparent;
    padding: 28px 30px 30px;
    background: #FFF;
    transition: 0.5s;
    cursor: pointer;
}

.all-resource-grid-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
}

.all-resource-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 26px;
}

.all-resource-category-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 15px;
    box-sizing: border-box;
    border-radius: 6px;
    background: rgba(0, 116, 129, 0.80);
}

.all-resource-category-tag h3 {
    color: #FFF;
    text-align: center;
    font-family: 'gilroy-semibold';
    font-size: 14px;
    font-weight: 400;
    line-height: 108%;
    margin: 0;
    letter-spacing: -0.28px;
}

.all-resource-grid-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    min-width: 45px;
    height: 45px;
    background: #E9F2F4;
    border-radius: 100px;
    position: relative;
    overflow: hidden;
    transition: 0.5s;
}

.all-resource-grid-arrow svg {
    position: absolute;
    transition: 0.5s;
}

.all-grid-arrow-visible {
    transform: translate(0px, 0px);
}

.all-grid-arrow-hidden {
    transform: translate(-25px, 25px);
}

.all-grid-arrow-hidden path {
    transition: 0.5s;
}

.all-arrow-mobile {
    display: none;
}

.all-resource-grid-title h2 {
    color: #000;
    font-family: 'gilroy-bold';
    font-size: 26px;
    font-weight: 400;
    line-height: 125%;
    margin-top: 0;
    letter-spacing: -0.52px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 26px;
}

.all-resource-grid-meta {
    margin-bottom: 26px;
    display: flex;
    gap: 6px;
    align-items: center;
}

.all-resource-grid-meta h3 {
    color: rgba(0, 0, 0, 0.80);
    font-family: 'gilroy-medium';
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 108%;
    letter-spacing: -0.32px;
}

.all-resource-grid-meta h4 {
    color: #909090;
    font-family: 'gilroy-medium';
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 108%;
    letter-spacing: -0.32px;
}

.all-featured-content-divider {
    width: 5px;
    min-width: 5px;
    height: 5px;
    display: flex;
    align-items: center;
    background: #007481;
    border-radius: 100px;
}

.all-resource-grid-img {
    height: 213px;
    overflow: hidden;
    border-radius: 11px;
    max-width: 100%;
    margin-top: auto;
}

.all-resource-grid-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 11px;
    transition: 0.5s;
}

@media (min-width: 1025px) {
    .all-resource-grid-box:hover {
        outline: 1px solid #007481;
        border: 1px solid #007481;
        box-shadow: 0 5px 20px 0 rgba(0, 116, 129, 0.15);
    }

    .all-resource-grid-box:hover .all-grid-arrow-hidden {
        transform: translate(0px, 0px);
    }

    .all-resource-grid-box:hover .all-grid-arrow-visible {
        transform: translate(25px, -25px);
    }

    .all-resource-grid-box:hover .all-grid-arrow-hidden path {
        fill: white;
    }

    .all-resource-grid-box:hover .all-resource-grid-arrow {
        background: rgba(0, 116, 129, 0.80);
    }

    .all-resource-grid-box:hover .all-resource-grid-img img {
        scale: 1.13;
    }
}

@media (max-width: 1024px) {
    .all-resource-category-tag h3 {
        font-size: 12px;
        letter-spacing: -0.24px;
    }

    .all-grid-arrow-visible,
    .all-grid-arrow-hidden {
        display: none;
    }

    .all-arrow-mobile {
        display: flex;
    }

    .all-resource-grid-arrow {
        width: 40px;
        min-width: 40px;
        height: 40px;
        background: rgba(0, 116, 129, 0.80);
    }

    .all-resource-grid-box {
        padding: 28px 25px 30px 25px;
        max-width: 100%;
        min-height: unset !important;
    }

    .all-resource-grid-header {
        margin-bottom: 28.5px;
    }

    .all-resource-grid-title h2 {
        font-size: 26px;
        margin-bottom: 23.02px;
    }

    .all-resource-grid-meta h3,
    .all-resource-grid-meta h4 {
        font-size: 14px;
        letter-spacing: -0.28px;
    }

    .all-resource-grid-img {
        width: 100%;
        height: auto;
    }

    .all-resource-grid-img img {
        max-height: 177px;
    }

    .resource-grid-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .resource-main-grid-header .cf-btn {
        display: none;
    }

    .resource-main-grid-header h3 {
        font-size: 27px;
    }

    .resource-main-grid-header {
        margin-bottom: 25.37px;
    }

    .resource-btn-mobile {
        display: block;
        margin-top: 35px;
    }

    .resource-grid-section {
        padding: 60px 0;
    }
}

@media (min-width: 768px) and (max-width:1023px) {
    .resource-grid-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) and (max-width: 1200px) {
    .resource-grid-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Settlement "View All" = white pill + teal text + white circle (teal border) + teal arrow
   (reuses the .btn-white variant from home-big-settlement, which isn't loaded on this page) */
.big-settlement-section .custom-btn {
    background: #fff !important;
}

.big-settlement-section .custom-btn a {
    color: #007481 !important;
    font-family: 'gilroy-bold' !important;
}

.big-settlement-section .custom-btn::before {
    background: #fff !important;
    border: 2px solid #007481;
}

.big-settlement-section .custom-btn::after {
    background-image: url('data:image/svg+xml,<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.125528 5.87496C-0.0418396 5.70759 -0.0418396 5.43624 0.125528 5.26887L5.26838 0.126017C5.43575 -0.0413514 5.70711 -0.0413513 5.87447 0.126017C6.04184 0.293384 6.04184 0.56474 5.87447 0.732108L0.731619 5.87496C0.564252 6.04233 0.292895 6.04233 0.125528 5.87496Z" fill="%23007481"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.57143 5.14307C5.33474 5.14307 5.14286 4.95119 5.14286 4.7145L5.14286 0.857354L1.28572 0.857354C1.04902 0.857354 0.857146 0.665476 0.857146 0.428782C0.857146 0.192089 1.04902 0.000211276 1.28572 0.000211297L5.57143 0.000211678C5.80812 0.000211699 6 0.19209 6 0.428783L6 4.7145C6 4.95119 5.80812 5.14307 5.57143 5.14307Z" fill="%23007481"/></svg>') !important;
}

/* align Settlement + Resources content with the rest of the page (cap the container to 1255) */
@media (min-width: 768px) {

    .big-settlement-section>.container,
    .resource-grid-section>.container {
        max-width: 1255px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* 90px below the reviews nav arrows before the next section (desktop) */
@media (min-width: 768px) {
    .office26-reviews {
        padding-bottom: 90px;
    }
}

/* contain the full-bleed lawyers track + the bleeding settlement owl carousel so they don't
   cause horizontal page scroll (clip, not hidden — no scroll container, sticky unaffected) */
.office26-people {
    overflow-x: clip;
}

.big-settlement-section {
    overflow-x: clip;
}





.cpa26-bullets a strong {
    transition: color .2s ease;
}


@media(min-width:1025px) {
    .cpa26-bullets a strong:hover {
        color: var(--cpa-red);
    }
}