/*
 Theme Name:   CMBG³ Law
 Theme URI:    https://www.cmbg3.com
 Description:  CMBG³ Law (GeneratePress Child Theme)
 Author:       Jonathan Sanford
 Author URI:   https://www.norvelljefferson.com
 Template:     generatepress
 Text Domain:  cmbg3-law
 Version:      1.1
 */

/*
 * TABLE OF CONTENTS
 * -----------------
 *  0. Fonts
 *  1. Variables & Design Tokens
 *  2. Base Styles & Resets
 *  3. Layout & Containers
 *  4. Header & Navigation
 *  5. Components (Cards, Grids, Lists)
 *  6. Media & Players
 *  7. Hero Components
 *  8. Carousels & Sliders
 *  9. Tabs / Carousel Fix
 * 10. Expertise Modular Nav Columns
 * 11. Case Study Featured
 * 12. Quote Team Member Utilities
 * 13. Contact Map
 * 14. Footer Menus
 * 15. Team Member Pages
 * 16. Breadcrumbs Style Overrides
 * 17. Lazy-Load Bypass & Picture Overrides
 * 18. Mobile Directory Grid Stacking & Overflow
 * 19. Blog Post Link Underline Override
 * 20. Global Responsive Image Safeguards
 * 21. How We Help Premium Link Hover
 * 22. Team Member Card Premium Image Zoom
 * 23. CTA Text Link Premium Hover Nudge
 * 24. Premium Hover Draw for Phone & Email Links
 * 25. Consolidated Core Theme Utilities (Performance Optimization)
 *     25.1 Entrance Effects & Hover Animations
 *     25.2 Background Shapes & Geometry
 *     25.3 Pure CSS Accordion Toggles
 *     25.4 Fluent Forms Brand Overrides
 *     25.5 Performance CSS Scroll Parallax
 *     25.6 Stat Counter Styles
 *     25.7 Universal Accessible Video Hero Backgrounds
 * 26. Complianz Legal Documents Styling
 */


/* ==========================================================================
   0. FONTS
   AD Requested Stack: Suisse Intl (Reg/Semi) & Suisse Neue (Light/Reg)
   ========================================================================== */

/* Suisse Intl — Body & Sub-headers */
@font-face {
    font-family: 'Suisse Intl';
    src: url('fonts/suisse/SuisseIntl-Regular.woff2?v=1') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suisse Intl';
    src: url('fonts/suisse/SuisseIntl-Semibold.woff2?v=1') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Suisse Neue — Headers */
@font-face {
    font-family: 'Suisse Neue';
    src: url('fonts/suisse/SuisseNeue-Light-WebXL.woff2?v=1') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suisse Neue';
    src: url('fonts/suisse/SuisseNeue-Regular-WebXL.woff2?v=1') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================================
   1. VARIABLES & DESIGN TOKENS
   Brand colors, typography scales, and spacing values
   ========================================================================== */

:root {

    /* Other Key Colors */
    --beacon: #ffd99e;
    /* Warm Accent (Gold) */
    --siren: #ff8b5b;
    /* Siren: Bold Orangey-Red (for accents) */

    --dockyard: #647A82;
    /* #677D85*/

    --base: #f4f1eb;
    /* Site Base (Off-White/Almond) */
    --text: #002e5d;
    /* Primary Text (Dark Blue) */

    --white: #fff;
    --black: #000;

    /* Typography & Ratios */
    --font-default: 'Suisse Intl', sans-serif;
    --font-heading: var(--font-default);
    --font-body: var(--font-default);
    --font-serif: 'Suisse Neue', serif;

    --ratio: 1.414;
    --header-height: 120px;

    --gutter: clamp(2.4rem, 8.889vw + -0.8rem, 12rem);

    --post-h1: clamp(3.6rem, 3.377rem + 0.571vw, 4.2rem);
    --post-h2: clamp(2.6rem, 2.545rem + 0.286vw, 2.8rem);
    --post-h3: clamp(2rem, 1.865rem + 0.667vw, 2.6rem);
    --post-h4: clamp(1.6rem, 1.515rem + 0.429vw, 1.9rem);
    --post-h5: clamp(1.3rem, 1.182rem + 0.571vw, 1.7rem);

    --heading-bottom-margin: 2rem;
    --pagination-top-margin: 4rem;
}


/* ==========================================================================
   2. BASE STYLES & RESETS
   Fundamental resets and base element styling
   ========================================================================== */

body {
    min-height: 100dvh;
    background-color: #f5f5f3;
    font-family: var(--font-body);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a {
    transition: all 0.3s ease-in-out;

}

.separate-containers .site-main,
.site-main>* {
    margin: 0;
}



/**
 * AODA: Screen Reader Only Utility
 * Hides content visually while keeping it accessible to screen readers.
 * Preferred over text-indent: -9999px which can cause scroll bugs.
 */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/**
 * AODA: Global Keyboard Focus Indicators
 * Ensures all interactive elements have a visible focus ring when
 * navigated via keyboard (Tab key). Uses :focus-visible to avoid
 * showing focus rings on mouse clicks.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--beacon, #ffd99e);
    outline-offset: 2px;
}

/* Remove default outlines only when :focus-visible is supported */
@supports selector(:focus-visible) {

    a:focus:not(:focus-visible),
    button:focus:not(:focus-visible) {
        outline: none;
    }
}

/**
 * AODA: Respect Reduced Motion Preferences
 * Users who set "Reduce motion" in their OS settings will see
 * all animations and transitions disabled or minimized.
 */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 300;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

ul.looper,
.gb-carousel ul,
ul[class*="gb-looper"] {
    list-style: none;
    margin: 0;
}

.gb-text {
    & p:last-child {
        margin-bottom: 0;
    }
}

/* Global image reset */
img {
    display: block;
    height: auto;
    width: 100%;
    border: 0;
}

/**
 * AODA Responsive Visibility Utilities
 * Use .mobile-only / .desktop-only to show/hide elements by breakpoint.
 */

.mobile-only {
    display: block;
}

.desktop-only {
    display: none;
}

@media (min-width: 1024px) {
    .desktop-only {
        display: block;
    }

    .mobile-only {
        display: none;
    }
}


/* ==========================================================================
   CUSTOM CHECKLIST BULLETS
   Apply '.check-list' to a GenerateBlocks Container or <ul> to activate.
   ========================================================================== */
ul.check-list,
.gb-loop-item ul,
.office-template-default .main-container ul {
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;

    & p {
        margin-bottom: 0;
    }
}

/* Direct descendent selector handles both container placement and direct ul placement */
.check-list li,
ul.check-list li,
.gb-loop-item li,
.office-template-default .main-container li {
    position: relative;
    padding-left: 30px !important;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    list-style-type: none !important;
    /* Extra hammer to remove standard dots */

    &:last-child {
        margin-bottom: 0 !important;
    }
}

.check-list li::before,
ul.check-list li::before,
.gb-loop-item ul li::before,
.office-template-default .main-container li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    /* Align with text */
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    /* Robust URL Encoded SVG - Cleaned of redundant clipPaths which break some parsers */
    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");
}

.expertise-how-we-help .gb-loop-item ul li::before {
    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='%23ffffff' 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");
}

/* 
   ==========================================================================
   CUSTOM ACHIEVEMENT LIST BULLETS
   Apply '.achievement-list' to a GenerateBlocks Container or <ul> to activate.
   ========================================================================== */
ul.achievement-list {
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;

    & p {
        margin-bottom: 0;
    }
}

.achievement-list li,
ul.achievement-list li {
    position: relative;
    padding-left: 30px !important;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    list-style-type: none !important;

    &:last-child {
        margin-bottom: 0 !important;
    }
}

.achievement-list li::before,
ul.achievement-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    /* Baseline text alignment */
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* Optimized & URL Encoded Graduation Cap SVG */
    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'%3E%3Cpath stroke-width='1.5' d='m1 7.517 9-5.276 9 5.276-9 5.276z'/%3E%3Cpath d='M10.62 7.517a.62.62 0 1 1-1.241 0 .62.62 0 0 1 1.241 0Z'/%3E%3Cpath stroke-width='1.5' d='M3.482 9.38v5.896S5.034 17.759 10 17.759s6.517-2.483 6.517-2.483V9.379'/%3E%3C/g%3E%3C/svg%3E");
}

.font-intl,
.font-sans {
    font-family: 'Suisse Intl', sans-serif !important;
}

.font-neue,
.font-serif {
    font-family: 'Suisse Neue', serif !important;
}

/**
 * AODA UTILITY: Stretched Link
 * Makes the parent container clickable via a single anchor tag.
 * Parent MUST have 'position: relative'.
 */
.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}


/**
 * 5a. TEAM BIO TOGGLE
 * Expandable biography sections on Team Member single pages.
 */
.cmbg3-bio-wrapper {
    position: relative;
    margin-bottom: 2rem;
}

.bio-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: var(--font-heading);
    color: var(--atlantic);
    cursor: pointer;
}

.bio-toggle:hover {
    color: var(--atlantic-deep);
    background-color: transparent;
}

.bio-toggle:focus {
    background-color: transparent;
    color: var(--atlantic);
}

.bio-toggle .cmbg3-bio-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bio-toggle .cmbg3-bio-toggle-icon svg {
    display: block;
}

.bio-toggle[aria-expanded="false"] .cmbg3-bio-toggle-icon .icon-close {
    display: none;
}

.bio-toggle[aria-expanded="true"] .cmbg3-bio-toggle-icon .icon-open {
    display: none;
}

.bio-toggle[aria-expanded="true"] .cmbg3-bio-toggle-icon {
    transform: rotate(180deg);
}

.cmbg3-bio-wrapper .bio-more {
    display: none;
    overflow: hidden;
}

.bio-toggle--collapse {
    margin-top: 2rem;
}

/* ==========================================================================
   3. LAYOUT & CONTAINERS
   Max-widths and centered layout wrappers
   ========================================================================== */

.site,
.hero-container,
.site-footer {
    max-width: 1440px;
    margin: 0 auto;
    background-color: var(--union);
}


/**
 * 3a. LAYOUT UTILITIES
 * Reusable classes to control specific design measures.
 */
.measure-800 {
    max-width: 800px;
    width: 100%;
    /* Stays 100% wide but caps at 800px */
}


/* ==========================================================================
   4. HEADER & NAVIGATION
   All header and navigation styles have been moved to /css/main-navigation.css
   ========================================================================== */


/* ==========================================================================
   5. COMPONENTS
   Reusable UI components (Cards, Grids, Filters)
   ========================================================================== */

/**
 * TEAM MEMBER CARDS
 * Handles clickable overlays and image aspect ratios
 */
.team-member-card {
    position: relative;
}

.team-member-card__title {
    position: static;
}

/**
 * AODA: Accessible stretched link text hiding.
 * Uses clip-path instead of text-indent: -9999px which can cause
 * horizontal scroll bugs on some mobile browsers.
 */
.team-member-card__title a {
    position: absolute;
    inset: 0;
    z-index: 1;
    font-size: 0;
    color: transparent;
    overflow: hidden;
}

.team-member-card__image-wrapper {
    aspect-ratio: 4/3;
    background-color: var(--union);
}

/**
 * TEAM LIST GRIDS
 */
@media (max-width: 767px) {
    .team-filter-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .team-filter-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* 5-column responsive grid for expertise members query loop */
.expertise-all-members-grid,
.expertise-all-members-grid ul,
.all-expertise-members-loop,
.all-expertise-members-loop ul {
    display: grid !important;
}

.expertise-all-members-grid>.gb-grid-column,
.expertise-all-members-grid>.gb-loop-item,
.expertise-all-members-grid ul>.gb-loop-item,
.expertise-all-members-grid ul>li,
.all-expertise-members-loop>.gb-grid-column,
.all-expertise-members-loop>.gb-loop-item,
.all-expertise-members-loop ul>.gb-loop-item,
.all-expertise-members-loop ul>li {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    box-sizing: border-box !important;
}

/* Hide extra cards when grid is collapsed */

/* Mobile (2 columns): hide items after 3 rows (6 items) */
@media (max-width: 767px) {

    .expertise-all-members-grid.is-collapsed .gb-loop-item:nth-child(n+7),
    .expertise-all-members-grid.is-collapsed .gb-grid-column:nth-child(n+7),
    .expertise-all-members-grid.is-collapsed li:nth-child(n+7),
    .all-expertise-members-loop.is-collapsed .gb-loop-item:nth-child(n+7),
    .all-expertise-members-loop.is-collapsed .gb-grid-column:nth-child(n+7),
    .all-expertise-members-loop.is-collapsed li:nth-child(n+7),
    .office-roster-grid.is-collapsed .cmbg3-author-sidebar-card:nth-child(n+7),
    .office-members-loop.is-collapsed .gb-loop-item:nth-child(n+7),
    .office-members-loop.is-collapsed .gb-grid-column:nth-child(n+7),
    .office-members-loop.is-collapsed li:nth-child(n+7) {
        display: none !important;
    }
}

/* Tablet (3 columns): hide items after 3 rows (9 items) */
@media (min-width: 768px) and (max-width: 1023px) {

    .expertise-all-members-grid.is-collapsed .gb-loop-item:nth-child(n+10),
    .expertise-all-members-grid.is-collapsed .gb-grid-column:nth-child(n+10),
    .expertise-all-members-grid.is-collapsed li:nth-child(n+10),
    .all-expertise-members-loop.is-collapsed .gb-loop-item:nth-child(n+10),
    .all-expertise-members-loop.is-collapsed .gb-grid-column:nth-child(n+10),
    .all-expertise-members-loop.is-collapsed li:nth-child(n+10),
    .office-roster-grid.is-collapsed .cmbg3-author-sidebar-card:nth-child(n+10),
    .office-members-loop.is-collapsed .gb-loop-item:nth-child(n+10),
    .office-members-loop.is-collapsed .gb-grid-column:nth-child(n+10),
    .office-members-loop.is-collapsed li:nth-child(n+10) {
        display: none !important;
    }
}

/* Desktop (5 columns): hide items after 2 rows (10 items) */
@media (min-width: 1024px) {

    .expertise-all-members-grid.is-collapsed .gb-loop-item:nth-child(n+11),
    .expertise-all-members-grid.is-collapsed .gb-grid-column:nth-child(n+11),
    .expertise-all-members-grid.is-collapsed li:nth-child(n+11),
    .all-expertise-members-loop.is-collapsed .gb-loop-item:nth-child(n+11),
    .all-expertise-members-loop.is-collapsed .gb-grid-column:nth-child(n+11),
    .all-expertise-members-loop.is-collapsed li:nth-child(n+11),
    .office-roster-grid.is-collapsed .cmbg3-author-sidebar-card:nth-child(n+11),
    .office-members-loop.is-collapsed .gb-loop-item:nth-child(n+11),
    .office-members-loop.is-collapsed .gb-grid-column:nth-child(n+11),
    .office-members-loop.is-collapsed li:nth-child(n+11) {
        display: none !important;
    }
}

/* Premium Show More Button Container */
.expertise-show-more-container {
    width: 100% !important;
    text-align: center !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
}

/* Premium Show More Button */
.expertise-show-more-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !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;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

.expertise-show-more-btn::after {
    content: "" !important;
    display: block !important;
    width: 7.5px !important;
    height: 12px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' fill='none' viewBox='0 0 7 12'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.25' d='m.625 10.625 5-5-5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform-origin: center !important;
    transform: rotate(90deg) !important;
    /* Point down by default for "Show More" */
}

.expertise-show-more-btn:hover {
    background-color: var(--atlantic) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Hover micro-interaction: arrow moves slightly to the right (Commented out for Phase 2)
.expertise-show-more-btn[aria-expanded="false"]:hover::after {
    transform: translateX(3px) !important;
}
*/

/* Expanded state: rotate chevron arrow pointing up */
.expertise-show-more-btn[aria-expanded="true"]::after {
    transform: rotate(-90deg) !important;
}

/* Expanded hover: arrow moves slightly upwards (Commented out for Phase 2)
.expertise-show-more-btn[aria-expanded="true"]:hover::after {
    transform: rotate(-90deg) translateY(-3px) !important;
}
*/




/**
 * TEAM MEMBER LISTS
 */

.cmbg3-member-entries {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    list-style: none;
    margin: 0;
}

.cmbg3-member-entry {
    position: relative;
    background-color: white;
    border: 1px solid var(--copley-light);
    padding: 2rem;

    &:hover {
        background-color: var(--harbor);
        color: white;
    }

    a {
        text-decoration: none;

        &::after {
            position: absolute;
            top: 0px;
            right: 0px;
            bottom: 0px;
            left: 0px;
            z-index: 1;
            content: "";
        }
    }

    & .entry-title {
        display: block;
        font-family: var(--font-serif);
        margin-bottom: 1rem;
    }

    & .entry-date {
        font-size: 1.4rem;
    }
}



.cmbg3-member-entries-more-wrapper {
    margin-top: 3rem;
}


@media (min-width: 768px) {
    .cmbg3-member-entries {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .cmbg3-member-entries {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* ==========================================================================
   6. MEDIA & PLAYERS
   Responsive video wrappers and custom audio player styling
   ========================================================================== */

.video-responsive-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Ratio */
    height: 0;
    overflow: hidden;
}

.video-responsive-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

audio,
.mejs-container .mejs-controls {
    background-color: var(--atlantic) !important;
    width: 100%;
}

/* 
 * Global WCAG/AODA Fix for WordPress MediaElement.js
 * Forces all screen-reader-only components (.mejs-offscreen) to opacity 1 and high contrast
 * to satisfy automated color-contrast checkers, while WordPress's native CSS clip
 * properties keep it visually hidden from sighted users and available to screen readers.
 */
.mejs-offscreen {
    opacity: 1 !important;
    color: #000000 !important;
    background-color: #ffffff !important;
}

/* ==========================================================================
   7. HERO COMPONENTS
   Spacing controls for flexible content heroes
   ========================================================================== */

/**
 * HERO HEIGHT UTILITY CLASSES
 * Sets default mobile height, and scales to explicit designer heights at 768px+
 */
.hero-860,
.hero-600,
.hero-560,
.hero-500,
.hero-400 {
    min-height: 400px;
    /* Standard accessible mobile base */
}

/* Exception: Keep the smallest variants compact on mobile */
.hero-330 {
    min-height: 330px;
}

/* Responsive overrides matching designer specs */
@media (min-width: 768px) {
    .hero-860 {
        min-height: 860px;
    }

    .hero-600 {
        min-height: 600px;
    }

    .hero-560 {
        min-height: 560px;
    }

    .hero-500 {
        min-height: 500px;
    }

    .hero-400 {
        min-height: 400px;
    }

    .hero-330 {
        min-height: 330px;
    }
}

/* ==========================================================================
   8. CAROUSEL OPTIMIZATIONS
   Forces GenerateBlocks carousel cards to equal vertical heights
   ========================================================================== */

/* 1. Force carousel track to maintain equal-height child rows */
.carousel-shaded-boxes .gb-carousel-items {
    display: flex !important;
    align-items: stretch !important;
}

/* 2. Break GB's "display: block" rule and turn the slide wrapper into flex */
.carousel-shaded-boxes .gb-carousel-item {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
}

/* 3. Force the inner card (Article/Container) to absorb 100% vertical space */
.carousel-shaded-boxes .gb-carousel-item>* {
    flex: 1 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.carousel-shaded-boxes .gb-carousel-item:nth-child(3n + 1) .carousel-shaded-boxes__card {
    background-color: var(--atlantic);
    color: white;
}

.carousel-shaded-boxes .gb-carousel-item:nth-child(3n + 2) .carousel-shaded-boxes__card {
    background-color: var(--harbor);
    color: white;
}

.carousel-shaded-boxes .gb-carousel-item:nth-child(3n + 3) .carousel-shaded-boxes__card {
    background-color: var(--copley-light);
    color: var(--atlantic);
}

/* Homepage Approach responsive collapse */
@media(max-width: 1199px) {
    .home__our-approach-item {
        grid-template-columns: 1fr !important;
    }
}

/**
 * 8a. CAROUSEL NAVIGATION CONTROLS
 * Side-mounted pagination arrows and transparent button resets.
 */
.pagination-on-sides {
    position: relative;
}

/* 2. Shared Positioning Magic */
.pagination-on-sides .gb-carousel-control--previous,
.pagination-on-sides .gb-carousel-control--next {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    /* float over content */
}

/* 3. The Split */
.pagination-on-sides .gb-carousel-control--previous {
    left: -20px;
    /* Nudges it slightly off the left edge */
}

.pagination-on-sides .gb-carousel-control--next {
    right: -20px;
    /* Nudges it slightly off the right edge */
}

.gb-carousel-control--previous,
.gb-carousel-control--next {
    background-color: transparent !important;
    border: none !important;
}

.our-team-carousel-card__content {
    background-color: #252d4f;
    /* Your dark blue */
    color: #ffffff;
    padding: 20px 60px 20px 30px;
    /* Extra right padding gives room for the slope */

    /* ✂️ THE MAGIC TRICK: Draws top-left, top-right, bottom-right (cut), bottom-left */
    clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%);

    /* Makes width shrink down to fit the name exactly */
    width: fit-content;

    /* Premium transition matching standard speed curves */
    transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: background-color, transform;
    line-height: 1;
}

/* Premium Our Team Card Hover Effects */
a:has(.our-team-carousel-card__content) {
    display: block;
    overflow: hidden;
    position: relative;
}

a:has(.our-team-carousel-card__content) img {
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform;
}

/* 1. Zoom portrait image on card hover */
a:has(.our-team-carousel-card__content):hover img {
    transform: scale(1.04);
}

/* 2. Float nameplate up and slide to beautiful brand corporate teal */
a:has(.our-team-carousel-card__content):hover .our-team-carousel-card__content {
    background-color: #5c9396 !important;
    /* Premium corporate brand teal */
    transform: translateY(-8px) !important;
}

.full-height {
    height: 100% !important;
    overflow: hidden;
}

/* 
   ==========================================================================
   GENERAL CAROUSEL FULL-HEIGHT ENGINE
   Automatically overrides GenerateBlocks default block-layouts to force
   vertical stretching whenever '.full-height' is used inside or on a carousel.
   ========================================================================== 
*/

/* 1. Force track to maintain equal-height child rows */
.gb-carousel:has(.full-height) .gb-carousel-items,
.gb-carousel.full-height .gb-carousel-items {
    display: flex !important;
    align-items: stretch !important;
}

/* 2. Break standard display rules and turn slide wrapper into flex container */
.gb-carousel:has(.full-height) .gb-carousel-item,
.gb-carousel.full-height .gb-carousel-item {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
}

/* 3. Force inner container/card to absorb 100% vertical space */
.gb-carousel:has(.full-height) .gb-carousel-item>*,
.gb-carousel.full-height .gb-carousel-item>* {
    flex: 1 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 4. Ensure nested target elements also use flex behavior to fill height */
.gb-carousel-item .full-height {
    flex: 1 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 
   ==========================================================================
   9. TABS / CAROUSEL FIX
   ========================================================================== 
*/

/* 
   Stop flexbox blowout natively without overriding GenerateBlocks widths.
   Adding min-width: 0 prevents flex children from expanding infinitely 
   to fit their content (like a Swiper track). 
*/
.gb-tabs__content,
.gb-tabs__item,
.gb-carousel,
.splide,
.swiper {
    min-width: 0;
}

/* 
   ==========================================================================
   10. EXPERTISE MODULAR NAV COLUMNS
   Premium visual treatment for the [expertise_column] shortcode lists.
   ========================================================================== 
*/

.expertise-nav-column {
    width: 100%;
    margin-bottom: 2rem;
}

.expertise-nav-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Top-Level List Item */
.expertise-nav-list>.parent-item {

    margin: 0 !important;

    list-style-type: none !important;
}

/* Parent Link Styling (Super-specific to bypass general theme overrides) */
.expertise-nav-column .parent-link,
.expertise .expertise-nav-column .parent-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    color: var(--copley-deep-blue, #1b2332) !important;
    font-family: var(--font-serif), serif !important;
    font-size: 2.2rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;

    border-top: 1px solid var(--dockyard-light);
    border-bottom: 1px solid var(--dockyard-light);
    padding: 1.5rem 0;
}

.expertise-nav-list .parent-item+.parent-item a {
    border-top: none;
}



@media (max-width: 767px) {
    .grid-nav-container:first-of-type+.grid-nav-container .parent-link {
        border-top: none;
    }

    .grid-nav-container:first-of-type .expertise-nav-column {
        margin-bottom: 0;
    }

    .practice-areas-container:first-of-type .expertise-nav-column {
        margin-bottom: 0;
    }

    .practice-areas-container:first-of-type .parent-item:last-child .parent-link {
        border-bottom: none;
    }
}


/* Parent Hover Color & Icon Animation */
.expertise-nav-column .parent-link:hover,
.expertise .expertise-nav-column .parent-link:hover {
    color: var(--copley-tan, #d1a97c) !important;
}

/* Left-Hand Chevron Animation */
.expertise-nav-column .parent-link .chevron-left {
    font-size: 2.4rem;
    font-family: inherit;
    line-height: 1;
    color: var(--atlantic);
    /* Muted Quaternary */
    transition: color 0.25s ease, transform 0.25s ease;
    margin-top: -2px;
    /* Optical alignment center */
}

.expertise-nav-column .parent-link:hover .chevron-left {
    color: var(--copley-tan, #d1a97c);
    transform: translateX(3px);
}

/* ==========================================
   CHILD (SUB-ITEM) LIST STYLING
   ========================================== */

.child-list {
    list-style: none !important;
    margin: 1.4rem 0 0.5rem 0 !important;
    padding: 0 0 0 2.4rem !important;
    /* Alignment indent under text */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.child-item {
    margin: 0 !important;
    padding: 0 !important;
    list-style-type: none !important;
}

/* Child Link Typography (Sans-Serif + Slightly Smaller) */
.expertise-nav-column .child-link,
.expertise .expertise-nav-column .child-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    color: var(--copley-slate, #3d4d66) !important;
    /* Navy tint */
    font-family: var(--font-default), sans-serif !important;
    font-size: 1.6rem !important;
    font-weight: 400 !important;
    transition: color 0.2s ease !important;
}

.expertise-nav-column .child-link:hover,
.expertise .expertise-nav-column .child-link:hover {
    color: var(--copley-tan, #d1a97c) !important;
}

/* Trailing right-facing chevron */
.expertise-nav-column .child-link .chevron-right {
    font-size: 1.4rem;
    line-height: 1;
    color: var(--atlantic);
    transition: color 0.2s ease, transform 0.2s ease;
}

.expertise-nav-column .child-link:hover .chevron-right {
    color: var(--copley-tan, #d1a97c);
    transform: translateX(2px);
}

/* ==========================================================================
   DESIGNER ASSET: Leading Diagonal Arrow for Expertise Mega Menu Sub-links
   ========================================================================== */
.expertise-nav-column .child-link {
    gap: 8px !important;
}

/* 1. Hide the trailing chevron */
.expertise-nav-column .child-link .chevron-right {
    display: none !important;
}

/* 2. Add the custom diagonal pointing arrow before the text */
.expertise-nav-column .child-link::before {
    content: "" !important;
    display: inline-block !important;
    width: 13px !important;
    height: 13px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='none' viewBox='0 0 13 13'%3E%3Cpath stroke='%23cdb78e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m1.25 1.25 10 10m-10 0h10v-10'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: background-image 0.25s ease, transform 0.25s ease !important;
    flex-shrink: 0 !important;
}

/* 3. Hover state overrides: Turn both arrow and text pure white, and slide the arrow diagonally */
.expertise-nav-column .child-link:hover,
.expertise-nav-column .child-link:focus-visible {
    color: var(--dockyard) !important;
}

.expertise-nav-column .child-link:hover::before,
.expertise-nav-column .child-link:focus-visible::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='none' viewBox='0 0 13 13'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m1.25 1.25 10 10m-10 0h10v-10'/%3E%3C/svg%3E") !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='none' viewBox='0 0 13 13'%3E%3Cpath stroke='%23cdb78e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m1.25 1.25 10 10m-10 0h10v-10'/%3E%3C/svg%3E") !important;
    transform: translate(1.5px, 1.5px) !important;
    /* Perfect slide along diagonal pointing axis */
}


/* ==========================================================================
   GRID & ALIGNMENT STYLES FOR MODULAR NAV COLUMNS
   Aligns top and bottom borders of each horizontal "row" of major items on desktop.
   
   Layout (3 columns):
     Col 1 (1 shortcode):  Abuse | Commercial Disputes | Employment
     Col 2 (2 shortcodes): Environmental+PFAS | General Litigation+Prop65
     Col 3 (1 shortcode):  Product Liability+Asbestos+Benzene+Silica+Talc
   
   Row alignment targets:
     Row 1: Abuse = Environmental = Product Liability  (top+bottom borders flush)
     Row 2: Commercial Disputes = General Litigation   (top+bottom borders flush)
     Row 3: Employment                                 (natural height)
   ========================================================================== */
@media (min-width: 768px) {

    /* Zero out gaps between stacked shortcode blocks within a column wrapper */
    .expertise .wp-block-column,
    .expertise .gb-grid-column,
    .expertise .gb-container:has(> .expertise-nav-column) {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 0 !important;
    }

    .expertise .expertise-nav-column {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        width: 100%;
    }

    /* Base flex layout for parent item blocks */
    .expertise-nav-list>.parent-item {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        box-sizing: border-box;
    }

    /* 
       Prevent border doubling where stacked shortcode blocks meet.
       The 2nd shortcode's first item already sits flush against the
       1st shortcode's last-child bottom border.
    */
    .expertise-nav-column~.expertise-nav-column>.expertise-nav-list>.parent-item:first-child {
        border-top: none !important;
    }
}

/* 
   ==========================================================================
   11. CASE STUDY FEATURED SHORTCODE
   Styles for the [case_study_featured] module.
   ========================================================================== 
*/

.case-study-featured-container {
    display: flex;
    flex-direction: column;
    background: transparent;
    position: relative;
    overflow: hidden;
    gap: clamp(2rem, 5.556vw + 0rem, 8rem);
}

@media (min-width: 768px) {
    .case-study-featured-container {
        flex-direction: row;
        align-items: stretch;
        min-height: 400px;
    }
}

.case-study-featured-image-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 250px;
}

@media (min-width: 768px) {
    .case-study-featured-image-wrapper {
        flex: 0 0 42%;
        min-height: auto;
    }
}

.case-study-featured-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

@media (max-width: 767px) {
    .case-study-featured-image {
        position: relative;
        aspect-ratio: 7/8;
    }
}

.case-study-featured-container:hover .case-study-featured-image {
    transform: scale(1.03);
}

.case-study-featured-content {
    flex: 1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
}

@media (min-width: 768px) {
    .case-study-featured-content {
        padding: 3.5rem 4rem;
    }
}

.case-study-featured-title {
    font-family: var(--font-serif, 'Suisse Neue', serif) !important;
    font-size: clamp(1.8rem, 2.2rem + 0.5vw, 2.8rem) !important;
    font-weight: 300 !important;
    line-height: 1.25 !important;
    margin: 0 0 1.25rem 0 !important;
    color: var(--copley-deep-blue, #1b2332) !important;
}

.case-study-featured-excerpt {
    font-family: var(--font-body, 'Suisse Intl', sans-serif) !important;
    font-size: 2rem !important;
    line-height: 1.5 !important;
    color: var(--copley-slate, #3d4d66) !important;
    margin-bottom: 2rem !important;
}

.case-study-featured-link {
    display: flex !important;
    align-items: center;
    gap: 1rem;
    background-color: var(--harbor);
    color: #ffffff !important;
    font-family: var(--font-body, 'Suisse Intl', sans-serif) !important;
    font-size: 2rem;
    font-weight: 400;
    padding: 0.75rem 1.75rem;
    text-decoration: none !important;
    border-radius: 4px;
    width: fit-content;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.case-study-featured-link:hover {
    background-color: var(--atlantic);
}

.case-study-featured-link-stretched {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* 
   ==========================================================================
   12. QUOTE TEAM MEMBER UTILITIES
   Hard overrides to bypass GenerateBlocks dynamic Query Loop styling.
   ========================================================================== 
*/
.quote-team-title {
    font-size: clamp(1.8rem, 0.185vw + 1.733rem, 2rem) !important;
    /* Base font scale - adjust as needed */
    margin-bottom: 0 !important;
    line-height: 1.3 !important;
    display: block;
    /* Forces block layout to guarantee margin zero behavior */
}

/* 
   ==========================================================================
   13. CONTACT MAP
   Placeholder background for the Google Maps embed.
   ========================================================================== 
*/
#cmbg3-contact-map {
    background-image: url('/wp-content/uploads/2026/05/your-static-map-placeholder.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 
   ==========================================================================
   14. FOOTER MENUS
   Grid-based footer nav and compact legal links bar.
   ========================================================================== 
*/
.cmbg3-clean-footer-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    /* Standard Desktop: Perfect 3-column grid */
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(1.5rem, 2vw, 3rem);
    row-gap: 16px;
}

.cmbg3-clean-footer-menu li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2;
}

.cmbg3-clean-footer-menu a {
    text-decoration: none !important;
    font-family: inherit;
    font-weight: 500;
    color: #1b2332;
    /* Dark Slate Accent */
    transition: color 0.2s ease-in-out;
    display: inline-block;
}

.cmbg3-clean-footer-menu a:hover {
    color: #519092 !important;
    /* Elegant Teal Brand Hover */
}

/* 📱 Tablet / Mobile Responsiveness */
@media (max-width: 768px) {
    .cmbg3-clean-footer-menu {
        grid-template-columns: repeat(2, 1fr);
        /* Stacks to 2 cols on tablet */
        row-gap: 14px;
    }
}

@media (max-width: 500px) {
    .cmbg3-clean-footer-menu {
        grid-template-columns: 1fr;
        /* Stacks to full-width list on phones */
        row-gap: 12px;
    }
}

/**
 * 14a. LEGAL FOOTER
 * A compact, horizontal inline-flex layout for bottom-bar legal pages.
 */
.cmbg3-legal-footer {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px 24px;
    /* Sleek horizontal gap */
    align-items: center;
}

.cmbg3-legal-footer li {
    margin: 0 !important;
    padding: 0 !important;
}

.cmbg3-legal-footer a {
    text-decoration: none !important;
    font-size: 14px;
    /* Subtle, legal body scale */
    font-weight: 400;
    color: var(--atlantic);
    /* Secondary muted slate */
    transition: color 0.2s ease-in-out;
}

.cmbg3-legal-footer a:hover {
    color: #1b2332 !important;
    /* Darkens on hover */
}

/* 📱 Stack legally on extremely narrow screens if needed */
@media (max-width: 480px) {
    .cmbg3-legal-footer {
        justify-content: center;
        /* Center aligns on mobile for balanced footers */
        gap: 6px 16px;
    }
}

/* 
   ==========================================================================
   15. TEAM MEMBER PAGES
   Single team member hero, accreditations, and location link styling.
   ========================================================================== 
*/

/* Location office links */
.location-item {
    & a {
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

/* 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);
}

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

.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:hover {
    color: var(--harbor) !important;
}

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

/* Hero photo vertical offset */
.team-member-hero__photo {
    transform: translate3d(0px, 15%, 0px);
    max-height: none;
}

/* Accreditations badge responsive sizing */
@media(max-width: 767px) {
    .team-member-accreditations-shape {
        max-width: 400px;
        height: auto;
    }
}

/**
 * 8b. BUTTONS-OUTSIDE CAROUSEL CONTROLS
 * Wider-offset carousel arrows with mobile responsive collapse.
 */
.buttons-outside {
    &.gb-carousel-control--previous {
        left: -50px;
    }

    &.gb-carousel-control--next {
        right: -50px;
    }
}

@media(max-width: 767px) {
    .buttons-outside {
        &.gb-carousel-control--previous {
            position: relative !important;
            left: 0 !important;
            transform: none !important;
        }

        &.gb-carousel-control--next {
            position: relative !important;
            right: 0 !important;
            transform: none !important;
        }
    }
}




/* 1. Only swap on desktop so mobile stacks normally */
@media (min-width: 769px) {
    .expertise-representative-work-item {
        &:nth-child(even) {
            .expertise-representative-work-item__content {
                order: 2;
            }
        }
    }
}

.expertise-why-choose-us+.expertise-representative-work {
    padding-top: 0 !important;
}

/* ==========================================================================
   16. BREADCRUMBS STYLE OVERRIDES
   Dynamic auto-injected breadcrumb styling for detail pages
   ========================================================================== */

.cmbg3-breadcrumbs .rank-math-breadcrumb {
    font-family: var(--font-default);
    font-size: 1.6rem;
    color: var(--dockyard, #647a82);
    line-height: 1.4;
}

.cmbg3-breadcrumbs .rank-math-breadcrumb a {
    color: #002e5d;

    font-weight: 500;
    transition: color 0.2s ease;
}

.cmbg3-breadcrumbs .rank-math-breadcrumb a:hover {
    color: var(--dockyard, #647a82);
}

/* ==========================================================================
   17. LAZY-LOAD BYPASS & PICTURE WRAPPER OVERRIDES
   Forces immediate opacity visibility and prevents <picture> tag size collapse.
   ========================================================================== */
img.skip-lazy,
img.no-lazy,
picture.skip-lazy img,
picture.no-lazy img {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Aspect-Ratio & Masking Safeguards to prevent dynamic layout collapses or infinite image expansion on mobile */
.team-member-card__image-wrapper,
.team-member-card>div:first-child,
.team-member-card>div:first-of-type {
    aspect-ratio: 4/3 !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
}

.team-member-card__image-wrapper picture,
.team-member-card picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.team-member-card__image-wrapper img,
.team-member-card img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ==========================================================================
   18. MOBILE DIRECTORY GRID STACKING & OVERFLOW OVERRIDES
   Guarantees that the team portrait grids stack as a clean 1-column list on
   narrow screen mobile devices, preventing any horizontal layout overflow.
   ========================================================================== */
@media (max-width: 767px) {
    .team-filter-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 10px !important;
    }

    .team-filter-grid>.gb-grid-column {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   19. BLOG POST LINK HOVER ANIMATION
   Smooth animated underline effect for inline article links and card heading links.
   ========================================================================== */

/* 1. Standard text-based links in paragraphs, lists, etc. */
:is(.single-post, .blog, .archive, .search, .is-article) .entry-content a:not(.button):not(.cta-button):not(.wp-block-button__link):not(.author-link):not(:has(img)):not(:has(h1, h2, h3, h4, h5, h6)):not(:is(h1, h2, h3, h4, h5, h6, [class*="title"]) a) {
    text-decoration: underline !important;
    text-underline-offset: 3px;
    background-image: none !important;
}

:is(.single-post, .blog, .archive, .search, .is-article) .entry-content a:not(.button):not(.cta-button):not(.wp-block-button__link):not(.author-link):not(:has(img)):not(:has(h1, h2, h3, h4, h5, h6)):not(:is(h1, h2, h3, h4, h5, h6, [class*="title"]) a):hover {
    text-decoration: underline !important;
    background-image: none !important;
}

/* 1a. Author Links Override (Hover-only underline) */
.author-link {
    text-decoration: none !important;
}

.author-link:hover {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* 1b. Category Tags & Sidebar Topics Overrides (Hover-only animated line-draw) */
.category-links a,
.cmbg3-sidebar-categories .category-item a {
    text-decoration: none !important;
}

.category-links a,
.cmbg3-sidebar-categories .category-item a .category-name {
    display: inline-block !important;
    text-decoration: none !important;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size 0.3s ease-in-out;
}

.category-links a:hover,
.cmbg3-sidebar-categories .category-item a:hover .category-name {
    background-size: 100% 1px;
}

/* 2. Headings inside links or Links inside headings globally */
.site-main :is(h1, h2, h3, h4, h5, h6, .blog-card__title, .blog-archive__title) a span,
.site-main a :is(h1, h2, h3, h4, h5, h6, .blog-card__title, .blog-archive__title) span {
    display: inline !important;
    text-decoration: none !important;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size 0.3s ease-in-out;
}

.site-main :is(h1, h2, h3, h4, h5, h6, .blog-card__title, .blog-archive__title) a:hover span,
.site-main a:hover :is(h1, h2, h3, h4, h5, h6, .blog-card__title, .blog-archive__title) span {
    background-size: 100% 1px;
}

/* 3. Stretched-link Cards and Related Post Rows (News, Podcasts, Webinars, Case Studies, etc.) */
:is(.blog-card, .news-item, .case-study-featured-container, .gb-query-loop-wrapper article):has(.stretched-link) :is(h1, h2, h3, h4, h5, h6, .blog-card__title, .blog-archive__title) span,
.related-post-row :is(h1, h2, h3, h4, h5, h6, .blog-card__title, .blog-archive__title) span {
    display: inline !important;
    text-decoration: none !important;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size 0.3s ease-in-out;
}

:is(.blog-card, .news-item, .case-study-featured-container, .gb-query-loop-wrapper article):has(.stretched-link):hover :is(h1, h2, h3, h4, h5, h6, .blog-card__title, .blog-archive__title) span,
:is(.blog-card, .news-item, .case-study-featured-container, .gb-query-loop-wrapper article):has(.stretched-link) a:hover :is(h1, h2, h3, h4, h5, h6, .blog-card__title, .blog-archive__title) span,
.related-post-row:hover :is(h1, h2, h3, h4, h5, h6, .blog-card__title, .blog-archive__title) span,
.related-post-row a:hover :is(h1, h2, h3, h4, h5, h6, .blog-card__title, .blog-archive__title) span {
    background-size: 100% 1px;
}





.cmbg3-logo svg {
    width: 183px;
    /* original logo width */
    height: 50px;
    /* original logo height */
}

.cmbg3-logo {
    display: flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
}

/* The sweep rect starts offscreen left */
/* .cmbg3-logo .logo-sweep {
    transform: translateX(-100px);
} */

.cmbg3-logo .logo-sweep,
.footer-logo .logo-sweep-footer {
    transform-box: fill-box;
    transform-origin: center;
}

/* On hover, play the sweep animation once */
.cmbg3-logo:hover .logo-sweep {
    animation: logo-sweep 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.footer-logo:hover .logo-sweep-footer,
.footer-logo:focus-within .logo-sweep-footer {
    animation: logo-sweep 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ==========================================================================
   20. GLOBAL RESPONSIVE IMAGE SAFEGUARDS
   Bulletproof overrides to prevent legacy content or blocks from blowing out the layout.
   ========================================================================== */
.site-main img {
    max-width: 100% !important;
    height: auto !important;
}

.site-main :is(.wp-block-image, .wp-caption, figure) {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Prevent other embeds, tables, and media from blowing out the columns */
.site-main :is(table, iframe, embed, object, video) {
    max-width: 100% !important;
}

/* ==========================================================================
   21. HOW WE HELP PREMIUM UNDERLINE LINK INDICATOR
   ========================================================================== */
.how-we-help-link {
    text-decoration: none !important;
    /* Removes clunky default browser underline */
}

.how-we-help-link span {
    display: inline !important;
    text-decoration: none !important;

    /* Layer 1: Bright white animated underline. Layer 2: Muted static white underline */
    background-image:
        linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)),
        linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)) !important;

    background-position: 0% 100%, 0% 100% !important;
    background-repeat: no-repeat, no-repeat !important;

    /* Static state: Bright line is 0% wide (invisible). Static line is 100% wide. */
    background-size: 0% 1px, 100% 1px !important;

    /* Transition only the background-size property for the smooth draw-in effect */
    transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.how-we-help-link:hover span {
    /* Hover state: Bright line draws left-to-right to 100% width, overlapping the static line */
    background-size: 100% 1px, 100% 1px !important;
}


/* ==========================================================================
   22. TEAM MEMBER CARD PREMIUM HOVER IMAGE ZOOM
   ========================================================================== */
.team-card {
    overflow: hidden !important;
    position: relative !important;
    /* Force relative position to bind stretched link! */
}

.team-card img {
    position: relative;
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.team-card:hover img {
    transform: scale(1.05) !important;
}

/* Ensure the text link container remains above the scaled image stacking context */
.team-card a {
    z-index: 5 !important;
}

.expertise-key-members--cta {
    display: none !important;
}

@media(max-width: 1439px) {
    .expertise-key-members--wide-cta {
        display: none !important;
    }

    .expertise-key-members--cta {
        display: inline-flex !important;
    }
}

@media(min-width: 1440px) {
    .expertise-key-members--container {
        display: flex !important;
    }
}

/* ==========================================================================
   23. CTA TEXT LINK PREMIUM HOVER DRAW & NUDGE
   ========================================================================== */
.cta-text {
    text-decoration: none !important;
}

.cta-text .gb-text {
    position: relative;
    display: inline-block;
}

.cta-text .gb-text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1.5px;
    background-color: currentColor;
    /* Inherits text color dynamically (safe for both light & dark hero blocks) */
    transform: scaleX(0);
    transform-origin: left center;
    /* Draws back to the left on hover off, matching other site links */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    /* Promotes element to a permanent GPU composite layer to prevent anti-aliasing snap at end of transition */
}

.cta-text:hover .gb-text::after {
    transform: scaleX(1);
}

/* Elegant arrow slide-nudge on hover */
.cta-text .gb-shape {
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.cta-text:hover .gb-shape {
    transform: translateX(4px) !important;
}


/* ==========================================================================
   24. PREMIUM HOVER DRAW FOR PHONE & EMAIL LINKS
   ========================================================================== */
:is(body, html) a[href^="tel:"],
:is(body, html) a[href^="mailto:"],
:is(body, html) a.member-hero-office-link,
:is(body, html) a[href^="tel:"]:hover,
:is(body, html) a[href^="mailto:"]:hover,
:is(body, html) a.member-hero-office-link:hover,
:is(body, html) a[href^="tel:"]:focus,
:is(body, html) a[href^="mailto:"]:focus,
:is(body, html) a.member-hero-office-link:focus {
    position: relative;
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center;
    width: max-content !important;
    max-width: 100%;
    background-image: none !important;
    /* Disable any generic theme linear-gradient underlines to prevent double-underline overlap */
}

/* Ensure no child elements inside the link render a secondary underline */
:is(body, html) a[href^="tel:"] *,
:is(body, html) a[href^="mailto:"] *,
:is(body, html) a.member-hero-office-link *,
:is(body, html) a[href^="tel:"]:hover *,
:is(body, html) a[href^="mailto:"]:hover *,
:is(body, html) a.member-hero-office-link:hover * {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

a[href^="tel:"]::after,
a[href^="mailto:"]::after,
a.member-hero-office-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1.5px;
    /* Upgraded to 1.5px to match the exact premium weight of cta-text */
    background-color: currentColor;
    /* Matches link text color dynamically */
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    /* Promotes element to a permanent GPU composite layer to prevent anti-aliasing snap at end of transition */
}

a[href^="tel:"]:hover::after,
a[href^="mailto:"]:hover::after,
a.member-hero-office-link:hover::after {
    transform: scaleX(1);
}

/* ==========================================================================
   24a. MULTI-LINE HOVER DRAW FOR OFFICE HERO ADDRESS LINKS
   ========================================================================== */
:is(body, html) a.office-hero-address-link {
    display: inline-block !important;
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    color: inherit;
    transition: color 0.2s ease !important;
}

:is(body, html) a.office-hero-address-link span.address-line {
    display: inline-block !important;
    position: relative;
    text-decoration: none !important;
}

:is(body, html) a.office-hero-address-link span.address-line::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1.5px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

:is(body, html) a.office-hero-address-link:hover,
:is(body, html) a.office-hero-address-link:focus {
    color: var(--harbor) !important;
}

/* --- HOVER DRAW (sequential order: 1 -> 2 -> 3) --- */
:is(body, html) a.office-hero-address-link:hover span.address-line:nth-of-type(1)::after,
:is(body, html) a.office-hero-address-link:focus span.address-line:nth-of-type(1)::after {
    transform: scaleX(1);
    transition-delay: 0s;
}

:is(body, html) a.office-hero-address-link:hover span.address-line:nth-of-type(2)::after,
:is(body, html) a.office-hero-address-link:focus span.address-line:nth-of-type(2)::after {
    transform: scaleX(1);
    transition-delay: 0.2s;
}

:is(body, html) a.office-hero-address-link:hover span.address-line:nth-of-type(3)::after,
:is(body, html) a.office-hero-address-link:focus span.address-line:nth-of-type(3)::after {
    transform: scaleX(1);
    transition-delay: 0.4s;
}

/* --- HOVER OUT (reverse sequential order: 3 -> 2 -> 1) --- */
:is(body, html) a.office-hero-address-link span.address-line:nth-of-type(1)::after {
    transition-delay: 0.3s;
}

:is(body, html) a.office-hero-address-link span.address-line:nth-of-type(2)::after {
    transition-delay: 0.15s;
}

:is(body, html) a.office-hero-address-link span.address-line:nth-of-type(3)::after {
    transition-delay: 0s;
}

/* Elegant micro-zoom and color transition for phone/email SVG icons on hover */
.gb-shape svg,
.gb-shape svg path,
.gb-shape svg g {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease !important;
}

div:has(> div > a[href^="tel:"]):hover .gb-shape svg,
div:has(> div > a[href^="mailto:"]):hover .gb-shape svg,
div:has(> a[href^="tel:"]):hover .gb-shape svg,
div:has(> a[href^="mailto:"]):hover .gb-shape svg {
    transform: scale(1.1) !important;
}

div:has(> div > a[href^="tel:"]):hover .gb-shape svg :is(path, g),
div:has(> div > a[href^="mailto:"]):hover .gb-shape svg :is(path, g),
div:has(> a[href^="tel:"]):hover .gb-shape svg :is(path, g),
div:has(> a[href^="mailto:"]):hover .gb-shape svg :is(path, g) {
    stroke: var(--dockyard, #647a82) !important;
    /* Soft brand gray-blue shift on hover */
}

/* ==========================================================================
   25. CONSOLIDATED CORE THEME UTILITIES (PERFORMANCE OPTIMIZATION)
   Consolidates animations, backgrounds, shapes, parallax, forms, and hero styles 
   into a single HTTP request to eliminate 7 render-blocking CSS files.
   ========================================================================== */

/* --- 25.1 ANIMATIONS & MOTION --- */
/**
 * CMBG3 Law — Motion & Animations
 * 
 * Focused, subtle animations that maintain a premium, professional feel.
 */

/* ==========================================================================
   1. ENTRANCE EFFECTS
   ========================================================================== */

@keyframes cmbg3FadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Subtle fade for grid items when they load or filter */
.team-member.is-loop-template-item {
    animation: cmbg3FadeIn 0.6s ease-out both;
}

/* ==========================================================================
   2. HOVER EFFECTS
   ========================================================================== */

/**
 * Image Zoom & Layering
 * Ensures the image stays strictly on a lower layer than the content.
 */
.team-member-card__image-wrapper {
    overflow: hidden;
    position: relative;
    z-index: 1;
    /* Lower layer */
    display: block;
}

.team-member-card__content {
    position: relative;
    z-index: 2;
    /* Higher layer - keeps blue area on top */
}

.team-member-card__image {
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
    transform: scale(1) translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/* Prevent picture tag from collapsing due to default display: inline */
.team-member-card picture {
    display: block;
    width: 100%;
    height: 100%;
}

.team-member-card:hover .team-member-card__image {
    transform: scale(1.05);
}

/* ==========================================================================
   3. HERO ENTRANCE ANIMATIONS
   Cinematic staggered text and media animations for all page heroes site-wide
   ========================================================================== */

/* 1. Eyebrow - fades and slides in first */
:is(.video-hero-container, .page-hero, .hero, .blog-featured-hero) :is(.hero__eyebrow, [class*="eyebrow"], .page-hero-eyebrow) {
    opacity: 0;
    animation: cmbg3SlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.1s;
}

/* 2. Main Title (H1) - slides in second */
:is(.video-hero-container, .page-hero, .hero, .blog-featured-hero) h1 {
    opacity: 0;
    animation: cmbg3SlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.25s;
}

/* 3. Description/Copy Blurb - slides in third */
:is(.video-hero-container, .page-hero, .hero, .blog-featured-hero) :is(.readable-width > p, .readable-width > div:not(h1):not([class*="eyebrow"]), .hero__description, [class*="hero-description"]) {
    opacity: 0;
    animation: cmbg3SlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.4s;
}

/* 4. CTA Buttons - slide in fourth */
:is(.video-hero-container, .page-hero, .hero, .blog-featured-hero) :is(.gb-element-5f664101, [class*="buttons-row"], [class*="cta-container"], .hero__buttons) {
    opacity: 0;
    animation: cmbg3SlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.55s;
}

/* 5. Hero Secondary Images/Columns - slide in last */
:is(.video-hero-container, .page-hero, .hero, .blog-featured-hero) :is(.blog-featured-hero__image-col img, .hero__image img, [class*="hero-image"] img, [class*="featured-image"] img) {
    opacity: 0;
    animation: cmbg3SlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.7s;
}

/* 6. Team Member Hero - Subtitle/Role, Phone, and Email staggers */
:is(.video-hero-container, .page-hero, .hero, .blog-featured-hero) h1+p:not([class*="eyebrow"]) {
    opacity: 0;
    animation: cmbg3SlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.4s;
}

:is(.video-hero-container, .page-hero, .hero, .blog-featured-hero) h1~div:has(a[href^="tel:"]) {
    opacity: 0;
    animation: cmbg3SlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.5s;
}

:is(.video-hero-container, .page-hero, .hero, .blog-featured-hero) h1~div:has(a[href^="mailto:"]) {
    opacity: 0;
    animation: cmbg3SlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.6s;
}

: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;
}

@keyframes cmbg3SlideUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 25.2 BACKGROUND SHAPES & GEOMETRY --- */
/**
 * BG SHAPE ACCENTS
 * Handles absolute positioning for background SVG geometry.
 */

/* 🏛️ THE BASE: Forces SVGs to behave as wallpaper */
.bg-shape-accent {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    /* Prevents invisible SVG boxes from blocking clicks on text */
    opacity: 1;
    /* Easy hook for global transparency tweaks */
}

/* 🎯 POSITION MODIFIERS */

/* Use this for full 1440px canvas SVGs that span the entire background */
.shape--cover {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Specialized corner anchors for smaller individual ornaments */
.shape--top-right {
    top: 0;
    right: 0;
}

.shape--top-left {
    top: 0;
    left: 0;
}

.shape--bottom-right {
    bottom: 0;
    right: 0;
}

.shape--bottom-left {
    bottom: 0;
    left: 0;
}

@media (max-width: 767px) {
    .expertise--shape--how-we-help {
        height: auto;
        width: 120px;
    }
}

/* 25.2.1 SCROLL PARALLAX FOR SHAPES */
@keyframes scroll-parallax {
    from {
        transform: translateX(var(--parallax-start-x, 0)) translateY(var(--parallax-start-y, 0)) rotate(var(--parallax-start-rotate, 0deg));
        opacity: var(--parallax-start-opacity, 1);
        fill: var(--parallax-start-fill, currentColor);
    }

    to {
        transform: translateX(var(--parallax-end-x, 0)) translateY(var(--parallax-end-y, 0)) rotate(var(--parallax-end-rotate, 0deg));
        opacity: var(--parallax-end-opacity, 1);
        fill: var(--parallax-end-fill, currentColor);
    }
}

/* Force parent containers holding parallax shapes to use overflow: clip instead of overflow: hidden.
   This prevents the container from capturing the scroll-timeline, allowing the view() timeline
   to bubble up to the viewport while still keeping the shapes clipped to the section. */
:is(.gb-container, .wp-block-group, .wp-block-columns, .wp-block-column, section, [class*="gb-element-"]):has(.shape--parallax) {
    overflow: clip !important;
}

/* Force parent container for expertise how we help to clip overflow */
.expertise-how-we-help {
    overflow: clip !important;
}

/* Enable scroll parallax only on desktop and only if user has not disabled motion */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .shape--parallax {
        animation: scroll-parallax 1s linear both;
        animation-timeline: view();
        animation-range: var(--parallax-range, entry 0% exit 100%);
        will-change: transform;
    }

    /* Force nested paths to inherit the parent SVG's animated fill color */
    .shape--parallax path {
        fill: inherit;
    }

    /* Preset: Moves up as you scroll down */
    .parallax--up-down {
        --parallax-start-y: 100px;
        --parallax-end-y: -100px;
    }

    /* Preset: Moves down as you scroll down */
    .parallax--down-up {
        --parallax-start-y: -100px;
        --parallax-end-y: 100px;
    }

    /* Preset: Moves left to right */
    .parallax--left-right {
        --parallax-start-x: -100px;
        --parallax-end-x: 100px;
    }

    /* Preset: Moves right to left */
    .parallax--right-left {
        --parallax-start-x: 100px;
        --parallax-end-x: -100px;
    }

    /* 🏛️ HOMEPAGE SPECIFIC SHAPE ANIMATIONS */

    /* Bottom Left: Slides up vertically, resting in its design spot */
    .homepage-shape--what-we-do {
        --parallax-start-y: 30%;
        --parallax-end-y: 0%;
        --parallax-start-x: 0%;
        --parallax-end-x: 0%;
        --parallax-start-fill: var(--gloucester, #e8e8ed);
        --parallax-end-fill: var(--dockyard-light, #d1d8da);
        --parallax-range: entry 30% cover 50%;
        /* Slides up early and locks in place */
    }

    /* Top Right: Slides in horizontally from right to left, resting in its design spot */
    .homepage-shape--what-sets-us-apart {
        --parallax-start-y: 0%;
        --parallax-end-y: 0%;
        --parallax-start-x: 75%;
        --parallax-end-x: 0%;
        --parallax-start-rotate: 0deg;
        --parallax-end-rotate: 0deg;
        --parallax-start-fill: #f2f1ee;
        --parallax-end-fill: #f2f1ee;
        --parallax-range: entry 0% cover 50%;
        /* Slides in early and locks in place */
    }

    /* Top Left: Slides in horizontally from left to right, resting in its design spot */
    .homepage-shape--legal-trends {
        --parallax-start-y: 0%;
        --parallax-end-y: 0%;
        --parallax-start-x: -100%;
        --parallax-end-x: 0%;
        --parallax-start-rotate: 0deg;
        --parallax-end-rotate: 0deg;
        --parallax-start-fill: var(--gloucester, #e8e8ed);
        --parallax-end-fill: var(--dockyard-light, #d1d8da);
        --parallax-range: entry 0% cover 50%;
        /* Slides in early and locks in place */
    }

    /* 🏛️ ABOUT PAGE SPECIFIC SHAPE ANIMATIONS */

    /* Bottom Right (Why We Exist): Slides in horizontally from right to left, resting in its design spot */
    .about-shape--why-we-exist {
        --parallax-start-y: 0%;
        --parallax-end-y: 0%;
        --parallax-start-x: 120%;
        --parallax-end-x: 0%;
        --parallax-start-rotate: 0deg;
        --parallax-end-rotate: 0deg;
        --parallax-start-fill: #5c9396;
        --parallax-end-fill: #5c9396;
        --parallax-range: entry 0% cover 50%;
        /* Slides in early and locks in place */
    }

    /* Top Left (Beyond the Practice): Slides in horizontally from left to right, resting in its design spot */
    .about-shape--beyond-the-practice {
        --parallax-start-y: 0%;
        --parallax-end-y: 0%;
        --parallax-start-x: -75%;
        --parallax-end-x: 0%;
        --parallax-start-rotate: 0deg;
        --parallax-end-rotate: 0deg;
        --parallax-start-fill: #d1d8da;
        --parallax-end-fill: #d1d8da;
        --parallax-range: entry 0% cover 50%;
        /* Slides in early and locks in place */
    }

    /* Reusable Expertise/Practice Areas/Professional Services shape: moves right to left */
    .expertise-shape--bottom-right {
        --parallax-start-y: 0%;
        --parallax-end-y: 0%;
        --parallax-start-x: 120%;
        --parallax-end-x: 0%;
        --parallax-start-rotate: 0deg;
        --parallax-end-rotate: 0deg;
        --parallax-start-fill: #ebe5da;
        --parallax-end-fill: #ebe5da;
        --parallax-range: entry 0% cover 50%;
        /* Slides in early and locks in place */
    }

    /* Contact Page - Top Left: moves left to right */
    .contact-shape--top-left {
        --parallax-start-y: 0%;
        --parallax-end-y: 0%;
        --parallax-start-x: -120%;
        --parallax-end-x: 0%;
        --parallax-start-rotate: 0deg;
        --parallax-end-rotate: 0deg;
        --parallax-start-fill: #d1d8da;
        --parallax-end-fill: #d1d8da;
        --parallax-range: entry 0% cover 50%;
        /* Slides in early and locks in place */
    }

    /* Contact Page - Bottom Right: moves right to left */
    .contact-shape--bottom-right {
        --parallax-start-y: 0%;
        --parallax-end-y: 0%;
        --parallax-start-x: 120%;
        --parallax-end-x: 0%;
        --parallax-start-rotate: 0deg;
        --parallax-end-rotate: 0deg;
        --parallax-start-fill: #488285;
        --parallax-end-fill: #488285;
        --parallax-range: entry 0% cover 50%;
        /* Slides in early and locks in place */
    }

    /* Locations Page - Top Left: moves left to right */
    .locations-shape--top-left {
        --parallax-start-y: 0%;
        --parallax-end-y: 0%;
        --parallax-start-x: -120%;
        --parallax-end-x: 0%;
        --parallax-start-rotate: 0deg;
        --parallax-end-rotate: 0deg;
        --parallax-start-fill: #d1d8da;
        --parallax-end-fill: #d1d8da;
        --parallax-range: entry 0% cover 50%;
        /* Slides in early and locks in place */
    }

    /* Locations Page - Bottom Right: moves right to left */
    .locations-shape--bottom-right {
        --parallax-start-y: 0%;
        --parallax-end-y: 0%;
        --parallax-start-x: 120%;
        --parallax-end-x: 0%;
        --parallax-start-rotate: 0deg;
        --parallax-end-rotate: 0deg;
        --parallax-start-fill: #ebe5da;
        --parallax-end-fill: #ebe5da;
        --parallax-range: entry 0% cover 50%;
        /* Slides in early and locks in place */
    }

    /* Careers Page - Teams & Culture: moves right to left */
    .careers-shape--teams-culture {
        --parallax-start-y: 0%;
        --parallax-end-y: 0%;
        --parallax-start-x: 120%;
        --parallax-end-x: 0%;
        --parallax-start-rotate: 0deg;
        --parallax-end-rotate: 0deg;
        --parallax-start-fill: #5c9396;
        --parallax-end-fill: #5c9396;
        --parallax-range: entry 0% cover 50%;
        /* Slides in early and locks in place */
    }

    /* Careers Page - Career Growth: moves right to left */
    .careers-shape--career-growth {
        --parallax-start-y: 0%;
        --parallax-end-y: 0%;
        --parallax-start-x: 120%;
        --parallax-end-x: 0%;
        --parallax-start-rotate: 0deg;
        --parallax-end-rotate: 0deg;
        --parallax-start-fill: #f5f2ed;
        --parallax-end-fill: #f5f2ed;
        --parallax-range: entry 0% cover 50%;
        /* Slides in early and locks in place */
    }

    /* Attorney Detail - Overview: moves left to right */
    .attorney-shape--overview {
        --parallax-start-y: 0%;
        --parallax-end-y: 0%;
        --parallax-start-x: -120%;
        --parallax-end-x: 0%;
        --parallax-start-rotate: 0deg;
        --parallax-end-rotate: 0deg;
        --parallax-start-fill: #5c9396;
        --parallax-end-fill: #5c9396;
        --parallax-range: entry 0% cover 50%;
        /* Slides in early and locks in place */
    }

    /* Attorney Detail - Accreditations: moves right to left */
    .attorney-shape--accreditations {
        --parallax-start-y: 0%;
        --parallax-end-y: 0%;
        --parallax-start-x: 120%;
        --parallax-end-x: 0%;
        --parallax-start-rotate: 0deg;
        --parallax-end-rotate: 0deg;
        --parallax-start-fill: #d1d8da;
        --parallax-end-fill: #d1d8da;
        --parallax-range: entry 0% cover 50%;
        /* Slides in early and locks in place */
    }

    /* Attorney Detail - In the Media: moves left to right */
    .attorney-shape--media {
        --parallax-start-y: 0%;
        --parallax-end-y: 0%;
        --parallax-start-x: -60%;
        --parallax-end-x: 0%;
        --parallax-start-rotate: 0deg;
        --parallax-end-rotate: 0deg;
        --parallax-start-fill: #ebe5da;
        --parallax-end-fill: #ebe5da;
        --parallax-range: entry 0% cover 30%;
        /* Slides in early and locks in place */
    }

    /* Expertise Detail - How We Help: moves left to right */
    .expertise--shape--how-we-help,
    .expertise-shape--how-we-help {
        animation: scroll-parallax 1s linear both;
        animation-timeline: view();
        animation-range: var(--parallax-range, entry 0% cover 50%);
        will-change: transform;
        --parallax-start-y: 0%;
        --parallax-end-y: 0%;
        --parallax-start-x: -120%;
        --parallax-end-x: 0%;
        --parallax-start-rotate: 0deg;
        --parallax-end-rotate: 0deg;
        --parallax-start-fill: #d9d9d9;
        --parallax-end-fill: #d9d9d9;
        --parallax-range: entry 0% cover 50%;
        /* Slides in early and locks in place */
    }

    .expertise--shape--how-we-help path,
    .expertise-shape--how-we-help path {
        fill: inherit;
    }

    /* Expertise Detail - Why Clients Choose Us: moves top to bottom (slides down) */
    .expertise-shape--why-choose-us {
        --parallax-start-y: -75%;
        --parallax-end-y: 0%;
        --parallax-start-x: 0%;
        --parallax-end-x: 0%;
        --parallax-start-rotate: 0deg;
        --parallax-end-rotate: 0deg;
        --parallax-start-fill: #ebe5da;
        --parallax-end-fill: #ebe5da;
        --parallax-range: entry 0% cover 50%;
        /* Slides in early and locks in place */
    }

    /* Expertise Detail - Representative Work: moves left to right */
    .expertise-shape--representative-work {
        --parallax-start-y: 0%;
        --parallax-end-y: 0%;
        --parallax-start-x: -120%;
        --parallax-end-x: 0%;
        --parallax-start-rotate: 0deg;
        --parallax-end-rotate: 0deg;
        --parallax-start-fill: #E8EBED;
        --parallax-end-fill: #E8EBED;
        --parallax-range: entry 0% cover 50%;
        /* Slides in early and locks in place */
    }
}


/* --- 25.3 PURE CSS ACCORDION TOGGLES --- */
/**
 * Theme Accordion Overrides
 * Standardizes accordion appearance across the site, injecting a pure CSS 
 * plus-to-minus toggle that requires zero asset loading and animates perfectly.
 */

/* Container setup for the custom class */
.cmbg3-accordion .gb-accordion__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding-right: 46px !important;
    /* Adjusted for 36px icon + 10px buffer */
}

/* 1. GLOBALLY HIDE THE NATIVE GENERATEBLOCKS ICONS - NO MORE 1-BY-1! */
.cmbg3-accordion .gb-accordion__toggle-icon,
.cmbg3-accordion .gb-accordion__toggle-icon-open,
.cmbg3-accordion .gb-accordion__toggle-icon-close {
    display: none !important;
}

/* 2. THE PURE CSS PLUS/MINUS WRAPPER */
.cmbg3-accordion .gb-accordion__toggle::after,
.cmbg3-accordion .gb-accordion__toggle::before {
    content: "";
    position: absolute;
    background-color: #252d4f;
    /* Exact brand navy from mockup */
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

/* Horizontal Bar (Stays horizontal forever) */
.cmbg3-accordion .gb-accordion__toggle::before {
    width: 36px;
    height: 2px;
    z-index: 1;
}

/* Vertical Bar (Turns into a plus, then rotates to hide into the minus) */
.cmbg3-accordion .gb-accordion__toggle::after {
    width: 2px;
    height: 36px;
    right: 17px;
    /* Center aligned to the 36px width (36 / 2 - 1px) */
    z-index: 2;
}

/* 3. THE ANIMATION MAGIC */
/* When open, rotate the vertical bar 90 degrees into the horizontal bar perfectly! */
.gb-accordion__item-open .gb-accordion__toggle::after {
    transform: translateY(-50%) rotate(90deg);
    opacity: 0;
    /* Fade it out into the horizontal line for a surgical overlap */
}

/* --- 25.4 FLUENT FORMS BRAND OVERRIDES --- */
/* 1. Form Inputs & Textareas (Underline-Only Look) */
.fluentform .ff-el-form-control {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--dockyard) !important;
    /* Underline color */
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
    /* Clean vertical padding */
    font-family: var(--font-serif, 'Suisse Neue', serif) !important;
    font-size: clamp(2rem, 0.37vw + 1.867rem, 2.4rem) !important;
    color: #1b2332 !important;
    transition: border-color 0.3s ease;
}

/* Focus State (Bottom border glows when typing) */
.fluentform .ff-el-form-control:focus {
    outline: none !important;
    border-bottom-color: #519092 !important;
    /* Accent Teal */
}

/* 2. Form Labels (All-Caps Navy Typography) */
.fluentform .ff-el-is-required label,
.fluentform .ff-el-form-label label,
.fluentform label {
    font-family: var(--font-body, 'Suisse Intl', sans-serif) !important;
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase !important;
    color: var(--copley-deep-blue, #1b2332) !important;
    margin-bottom: 5px !important;
}

/* 3. The Submit Button Wrapper */
.fluentform .ff-btn-submit {
    font-family: var(--font-body, 'Suisse Intl', sans-serif) !important;
    background-color: var(--harbor) !important;
    color: #ffffff !important;
    font-size: 2rem !important;
    font-weight: 400 !important;
    padding: 12px 24px !important;
    border-radius: 4px !important;
    transition: background-color 0.3s ease;
}

.ff_submit_btn_wrapper {
    margin-bottom: 0 !important;
}

.ff-default .ff_btn_style {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px;
    padding: 1rem 2rem;

    &::after {
        content: "";
        display: block;
        width: 7.5px;
        height: 12px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' fill='none' viewBox='0 0 7 12'%3E%3Cpath stroke='%23f9f9f7' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.25' d='m.625 10.625 5-5-5-5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    &:hover {
        opacity: 1 !important;
        background-color: var(--atlantic) !important;
        color: white !important;
    }
}

.fluentform .ff-message-success,
.fluentform_wrapper .ff-message-success {
    background: none;
    font-family: var(--font-serif, 'Suisse Neue', serif);
    color: var(--atlantic);
    border: 0;
    box-shadow: none;
    padding: 3rem;

    & p {
        margin-bottom: 20px;

        &:last-of-type {
            margin-bottom: 0;
        }
    }
}

textarea.ff-el-form-control {
    line-height: 1.3 !important;
}

/* --- 25.5 PERFORMANCE CSS SCROLL PARALLAX --- */
/**
 * CMBG3 Law — Performance CSS Scroll Parallax
 *
 * Safe, hardware-accelerated, pure-CSS parallax rules.
 * Uses background-attachment: fixed, which automatically degrades
 * safely to a static layout on mobile configurations to prevent CPU strain.
 */

/* ==========================================================================
   1. PURE CSS BACKGROUND PARALLAX
   ========================================================================== */
.cmbg3-parallax-bg {
    background-attachment: fixed !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* 
   📱 MOBILE & TOUCH SAFEGUARDS FOR iOS (Safari/Chrome WebKit)
   iOS Safari has a notorious, decade-old bug where 'background-attachment: fixed' 
   forces the background image to size itself relative to the phone screen viewport,
   causing it to blow up to massive, distorted, and blurry proportions.
   This media query safely reverts it to a static, gorgeous cover background.
*/
@media (max-width: 1024px),
(hover: none) and (pointer: coarse) {
    .cmbg3-parallax-bg {
        background-attachment: scroll !important;
    }
}

/* ==========================================================================
   2. DYNAMIC SCROLL PARALLAX (OPTION B)
   Allows background elements to shift at a slower rate than scrolling,
   with a 20% layout buffer to prevent visual white spaces.
   ========================================================================== */
.cmbg3-dynamic-parallax {
    overflow: hidden !important;
    position: relative !important;
}

.cmbg3-dynamic-parallax :is(.gb-container-background-image, .gb-container-background, img[class*="background-image"]) {
    height: 180% !important;
    /* Expanded height to cover high-speed vertical scroll-shifting */
    top: -40% !important;
    /* Centers the buffer vertically */
    min-width: 100% !important;
    object-fit: cover !important;
}

/* --- 25.6 STAT COUNTER STYLES --- */
/**
 * CMBG3 Law — Stat Counter Styles
 * Integrates custom animation sizing and smart suffix positioning based on character.
 */

.cmbg3-stat {
    display: inline-flex;
    align-items: baseline;
    /* Maintains correct bottom alignment with the line height */
    opacity: 0;
    /* Hidden until prepared by JS to prevent flash of content */
    transition: opacity 0.3s ease-in;
}

.cmbg3-stat.is-ready {
    opacity: 1;
}

/* Basic shared rules for injected numbers & suffixes */
.cmbg3-stat .stat-number {
    font-variant-numeric: tabular-nums;
    /* Prevents "wiggling" during count up animations */
}

.cmbg3-stat .stat-suffix {
    display: inline-block;
    line-height: 1;
    font-weight: inherit;
    color: inherit;
    margin-left: 2px;
    /* Default tight spacing */
}

/* --------------------------------------------------------------------------
   SCENARIO 1: Percent Sign (Mockup shows it small and raised)
   -------------------------------------------------------------------------- */
.cmbg3-stat .stat-suffix[data-type="percent"] {
    font-size: 0.55em;
    /* Scales exactly matching mockup's scale percentage */
    vertical-align: super;
    position: relative;
    top: -0.4em;
    /* Pushes it high like a standard superscript styling */
}

/* --------------------------------------------------------------------------
   SCENARIO 2: Plus Sign (Mockup 2 shows it mostly standard size/aligned)
   -------------------------------------------------------------------------- */
.cmbg3-stat .stat-suffix[data-type="plus"] {
    font-size: 0.95em;
    /* Keep almost standard size */
    vertical-align: middle;
    position: relative;
    top: -0.05em;
    /* Barely nudged to visually align centered to digit caps */
    margin-left: 0px;
    /* Mockup shows '+' butt against the number tighter */
}

/* --- 25.7 UNIVERSAL ACCESSIBLE VIDEO HERO BACKGROUNDS --- */
/**
 * Universal Video Background & Accessibility Utility
 */

/* Base safety for custom video overlays in GenerateBlocks */
.video-hero-container {
    position: relative;
    overflow: hidden;
}

/* Forces video back and covers gracefully */
.video-hero-container video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
    /* Render in front of container bg-color fallback, but behind z-index: 1 content */
}

/* Accessible Pause/Play Toggle Helper */
.video-toggle-btn {
    position: absolute;
    bottom: 24px;
    right: 24px;
    /* Positioned clear of content */
    z-index: 10;
    opacity: 1;
    /* FORCED visibility for AODA/WCAG compliance */
    transition: all 0.3s ease;
    cursor: pointer;
}

.video-toggle-btn:hover,
.video-toggle-btn:focus {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    /* Adds depth on engagement */
}

/* Visual Styling: The Absolute Working Baseline (Guaranteed Victory) */
.video-toggle-btn {
    width: 48px !important;
    /* Official minimum accessible touch target */
    height: 48px !important;
    border-radius: 50% !important;
    background-color: #252D4F !important;
    /* High Contrast Atlantic Brand Color */
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    min-width: unset !important;

    /* White high-contrast vector pause icon (Unified 14px canvas width) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Crect x='2' y='0' width='2' height='14' fill='white'/%3E%3Crect x='9' y='0' width='2' height='14' fill='white'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

/* The Unbreakable White Play Icon Switch (Origin aligned mathematically) */
.video-toggle-btn.is-paused {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpolygon points='2,0 13,7 2,14' fill='white'/%3E%3C/svg%3E") !important;
    background-position: center center !important;
    /* Perfectly centered canvas */
}

/* Clear any hidden text that GB might render */
.video-toggle-btn span,
.video-toggle-btn::before,
.video-toggle-btn::after {
    display: none !important;
}

/* Dynamic static image styling matching video coverage exactly */
.video-hero-container .background-image,
.video-hero-container .background-image img,
.video-hero-container picture,
.video-hero-container picture img,
.video-hero-container img.background-image__img {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
    /* Render in front of container bg-color fallback, but behind z-index: 1 content */
    pointer-events: none;
    /* Allow pointer interactions to fall through */
}

.video-hero-container picture {
    display: block;
}

/* Automatically elevate all content layers (text, titles, CTAs) above absolute background media layers */
.video-hero-container>*:not(video):not(picture):not(img):not(.background-image):not(.video-toggle-btn) {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   26. COMPLIANZ LEGAL DOCUMENTS STYLING
   Enforces elegant vertical rhythm, 800px typographic scale, and centers 
   the entry headers and content fields to line up perfectly.
   ========================================================================== */

body.cmplz-document .entry-header,
body.cmplz-document .entry-content {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

body.cmplz-document .entry-header {
    margin-top: clamp(4rem, 8vw, 8rem);
    margin-bottom: 2.5rem;
}

/* body.cmplz-document .entry-title {
    font-family: var(--font-serif);
    font-weight: 300;
    color: var(--text);
    font-size: clamp(3.6rem, 5vw, 4.8rem);
    line-height: 1.15;
} */

body.cmplz-document .entry-content p {
    margin-bottom: 2rem;
    line-height: 1.75;
    font-size: 1.6rem;
}

body.cmplz-document .entry-content h2,
body.cmplz-document .entry-content h3 {
    font-family: var(--font-serif);
    color: var(--text);
    margin-top: 4rem;
    margin-bottom: 1.5rem;
    font-weight: 400;
}

/* ==========================================================================
   27. PRACTICE AREAS NAVIGATION BLOCK ANIMATION
   Clears default browser hover underlines and adds modern, fluid animations:
   draws the underline from left-to-right on hover, and shifts the chevron
   arrow slightly to the right to create an elegant interaction flow.
   ========================================================================== */

.practice-area-loop a {
    text-decoration: none !important;
}

.practice-area-loop a .gb-text {
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
}

.practice-area-loop a .gb-text::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.practice-area-loop a:hover .gb-text::after {
    transform: scaleX(1);
}

.practice-area-loop a .gb-shape {
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.practice-area-loop a:hover .gb-shape {
    transform: translateX(6px) !important;
}

/* ==========================================================================
   24. CAROUSEL VERTICAL SCROLLBAR FIX
   ========================================================================== */
/*
 * Prevents vertical scrollbars from appearing on the team quote carousel.
 * When overflow-x: hidden is set on the carousel container, browsers compute
 * overflow-y to auto by default. Subpixel rounding errors during font rendering
 * or window resizing can trigger an unwanted vertical scrollbar.
 */
.team-quote-carousel .gb-carousel-initialized {
    overflow-y: hidden !important;
}