body {
    font-size: 16px;
    color: #000000;   /* site-wide default text colour */
}

/* ==========================================================================
   Heading sizes (brand spec): H1 = 50px, H2 = 45px.
   Overrides the theme's responsive scale (h1 →48px, h2 →40px at ≥1440px).
   ========================================================================== */
/* Desktop (≥1024px): brand spec sizes. Weight 300 across all breakpoints. */
h1, .h1 {
    font-size: 50px;
    font-weight: 300;
}
h2, .h2 {
    font-size: 45px;
    font-weight: 300;
}

/* Tablet (below 1024px): step the display type down so long headings don't
   crowd the narrower column. */
@media only screen and (max-width: 1023.98px) {
    h1, .h1 {
        font-size: 38px;
    }
    h2, .h2 {
        font-size: 32px;
    }
}

/* Mobile (below 768px): smaller still, so headings wrap cleanly and never
   overflow on phones. */
@media only screen and (max-width: 767.98px) {
    h1, .h1 {
        font-size: 30px;
    }
    h2, .h2 {
        font-size: 26px;
    }
}

/* Subhead/intro text: 18px from 1024px up, 16px below. Replaces the theme's
   fluid 16→21px scale with these two fixed, consistent steps. */
.text-subhead {
    font-size: 18px;
}
@media only screen and (max-width: 1023.98px) {
    .text-subhead {
        font-size: 16px;
    }
}

/* "What We Do" intro: wrap naturally (fill the width greedily) instead of the
   block's inherited `text-wrap: balance`, which shortened the lines. */
.what-we-do .text-subhead {
    text-wrap: auto;
}

/* ==========================================================================
   Homepage hero (intro-full) — light black overlay
   --------------------------------------------------------------------------
   Lifts contrast behind the white heading/intro so the text stays readable,
   while keeping the photo clearly visible. A gentle left-weighted gradient:
   a touch darker behind the left-aligned text, fading lighter over the bridge.
   Added as a pseudo-element on the background layer (no markup overlay exists),
   so it sits above the image but below the content.
   ========================================================================== */
.intro-full .section-background::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), color-stop(50%, rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0.15)));
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none;
    z-index: 1;
}
/* On phones the text spans the full width, so even out the overlay a little */
@media only screen and (max-width: 767.98px) {
    .intro-full .section-background::after {
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.35) 100%);
    }
}

/* ==========================================================================
   Homepage "What We Do" service cards — hover interaction
   --------------------------------------------------------------------------
   Grid alignment was verified consistent (3 cols desktop / 2 tablet / 1 mobile;
   content is width-capped so it never breaks to an uneven 4-up row, and titles/
   descriptions use min-height:2lh so the buttons line up across a row). This
   block only adds the hover affordance. Scoped to .what-we-do so the other
   front-page loops are untouched; pointer-only so touch taps don't stick.
   ========================================================================== */
.what-we-do .loop-grid .single .inner {
    background-color: #f5f8fb;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fbfcfe), to(#eef3f8));
    background-image: linear-gradient(180deg, #fbfcfe 0%, #eef3f8 100%);
    border: 1px solid #e4eaf0;
    border-radius: var(--radius-lg);
    -webkit-box-shadow: var(--shadow-sm);
            box-shadow: var(--shadow-sm);
    -webkit-transition: -webkit-transform 0.28s ease, -webkit-box-shadow 0.28s ease, background-color 0.28s ease;
    transition: transform 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease;
}
.what-we-do .loop-grid .single .illustration svg {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transition: -webkit-transform 0.28s ease;
    transition: transform 0.28s ease;
}
.what-we-do .loop-grid .single .btn {
    -webkit-transition: background-color 0.2s ease, color 0.2s ease, -webkit-box-shadow 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    /* Lift onto a clean white surface with a gold brand-cap + soft navy shadow */
    .what-we-do .loop-grid .single:hover .inner {
        background-color: #ffffff;
        background-image: none;
        -webkit-transform: translateY(-6px);
                transform: translateY(-6px);
        -webkit-box-shadow: inset 0 3px 0 var(--color-secondary), 0 18px 36px rgba(0, 79, 113, 0.16);
                box-shadow: inset 0 3px 0 var(--color-secondary), 0 18px 36px rgba(0, 79, 113, 0.16);
    }
    /* Illustration gets a subtle zoom */
    .what-we-do .loop-grid .single:hover .illustration svg {
        -webkit-transform: scale(1.06);
                transform: scale(1.06);
    }
    /* "Learn more" fills gold (brand accent), navy label */
    .what-we-do .loop-grid .single:hover .btn {
        background-color: var(--color-secondary);
        color: var(--color-on-secondary);
    }
}

@media (prefers-reduced-motion: reduce) {
    .what-we-do .loop-grid .single .inner,
    .what-we-do .loop-grid .single .illustration svg {
        -webkit-transition: none;
        transition: none;
    }
    .what-we-do .loop-grid .single:hover .inner {
        -webkit-transform: none;
                transform: none;
    }
}

/* ==========================================================================
   "What We Do" service cards — centered, equal-height vertical layout
   --------------------------------------------------------------------------
   Each service block stacks icon → heading → content → button, centred, with
   the button pinned to the bottom and the content flexing to fill the space so
   the buttons line up across a row even when copy lengths differ. Replaces the
   grid-area template with a simple flex column and applies at every breakpoint.
   Layout/styling only — no content, link or behaviour changes. (The promo
   "Find the Right…" card keeps its own wide layout.)
   ========================================================================== */
body.home .what-we-do .loop-grid .single:not(.home-service-last) .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    gap: 0.85rem;
    height: 100%;
}
/* Icon first, centred. Give the SVG an explicit size — otherwise it collapses
   to 0 once the flex column shrinks the illustration box to its content. */
body.home .what-we-do .loop-grid .single:not(.home-service-last) .item-illustration {
    -ms-flex-item-align: center;
        align-self: center;
}
body.home .what-we-do .loop-grid .single:not(.home-service-last) .item-illustration svg {
    width: 80px;
    height: 80px;
}
/* Reserve a consistent 2-line title height so a 1-line vs 2-line heading doesn't
   shift the description start — this keeps the icon, heading, TEXT and button on
   the same horizontal lines across every card in a row. */
body.home .what-we-do .loop-grid .single:not(.home-service-last) .item-title {
    min-height: calc(2 * 1.3em);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
/* Let the description fill the remaining space so the button is pushed to a
   common baseline (bottom-aligned) across the row, regardless of copy length. */
body.home .what-we-do .loop-grid .single:not(.home-service-last) .item-description {
    min-height: 0;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
}
/* Button centred and pinned to the bottom so every card's button lines up. */
body.home .what-we-do .loop-grid .single:not(.home-service-last) .btn {
    margin-top: auto;
    -ms-flex-item-align: center;
        align-self: center;
}

/* --- Promo "Find the Right…" card: same centered vertical layout ----------
   Icon → heading → content → button, all centred, button pinned to the bottom
   (so it lines up with the service cards' buttons when they share a row). The
   content column is max-width-capped so it stays tidy in the wider cell. */
body.home .what-we-do .single.home-service-last .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    gap: 0.85rem;
    height: 100%;
}
body.home .what-we-do .single.home-service-last .item-illustration {
    -ms-flex-item-align: center;
        align-self: center;
    width: auto;
    max-width: none;
}
body.home .what-we-do .single.home-service-last .item-illustration svg {
    width: 80px;
    height: 80px;
}
body.home .what-we-do .single.home-service-last .home-service-last-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    gap: 0.85rem;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    width: 100%;
    max-width: none;
    margin-inline: auto;
}
/* Match the service cards row-for-row: reserve the same 2-line title height so
   the icon, heading, TEXT and button land on the same horizontal lines. */
body.home .what-we-do .single.home-service-last .item-title {
    min-height: calc(2 * 1.3em);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
/* Let the description fill the slack so the button is pushed to the same bottom
   baseline as the neighbouring cards' buttons (the promo copy has a trailing
   empty <div>, so without this the button floats ~14px high). */
body.home .what-we-do .single.home-service-last .item-description {
    min-height: 0;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
}
body.home .what-we-do .single.home-service-last .btn {
    margin-top: auto;   /* pin to the bottom so it lines up with the service cards' buttons */
    -ms-flex-item-align: center;
        align-self: center;
}
/* Drop the trailing empty <div> after the button — as the last flex child it
   (plus the column gap) was holding the button ~14px above the card bottom.
   It's the wrapper's only <div> child and holds nothing but whitespace, so
   `:empty` misses it — target the element directly. */
body.home .what-we-do .single.home-service-last .home-service-last-content > div {
    display: none;
}
/* Promo column span, column-count-aware so it never leaves an empty slot:
   • ≤3-column grids (≤1351px, incl. tablet/mobile): span the full width — the 6
     service cards fill complete rows, and the promo takes its own full row.
   • 4-column grid (≥1352px): the 6 cards fill row 1 (4) + row 2 (2), so the
     promo spans the trailing 2 columns to complete that row. */
@media (max-width: 1351.98px) {
    body.home .what-we-do .loop-grid .single.home-service-last {
        grid-column: 1 / -1;
    }
}
@media (min-width: 1352px) {
    body.home .what-we-do .loop-grid .single.home-service-last {
        grid-column: span 2;
    }
}

.site-header nav.primary,
.site-header nav.primary .sub-menu,
#mobile-menu nav.primary,
#mobile-menu nav.primary .sub-menu {
    font-size: 16px;
}

/* ==========================================================================
   Brand colors
   Primary:   #004F71 (deep blue)   — headings, links, primary actions
   Secondary: #FFB81C (gold)        — accents, hover, emphasis
   Tertiary:  #6AD1E3 (cyan)        — supporting accent
   ========================================================================== */
:root {
    --color-primary: #004F71;
    --color-primary-hover: #003a54;   /* darkened primary for hover/active */
    --color-secondary: #FFB81C;
    --color-secondary-hover: #e6a400;  /* darkened secondary for hover/active */
    --color-tertiary: #6AD1E3;
    --color-tertiary-hover: #45bfd4;   /* darkened tertiary for hover/active */
    --color-on-primary: #ffffff;       /* text on a primary fill */
    --color-on-secondary: #004F71;     /* text on a secondary fill */
    --color-on-tertiary: #004F71;      /* text on a tertiary fill */
    --font-size-h3: 1.25rem;           /* 20px — single, consistent H3 size */
}

/* ==========================================================================
   Consistent H3 size
   --------------------------------------------------------------------------
   H3 sizes had drifted across the design (legacy base 14→18px; card/listing
   overrides 16.8–20px; apply-now clamp up to 24px). Standardise every <h3> and
   .h3 to one token so headings read consistently site-wide. !important because
   many of the legacy/override rules carry higher-specificity contextual
   selectors; this is the single source of truth for H3 size.
   ========================================================================== */
h3,
.h3 {
    font-size: var(--font-size-h3) !important;
}

/* --- Brand utility classes ------------------------------------------------ */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }

.bg-primary {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}
.bg-secondary {
    background-color: var(--color-secondary);
    color: var(--color-on-secondary);
}

/* --- Headings use the primary brand color --------------------------------- */
:where(h1, .h1, h2, .h2, h3, .h3) {
    color: var(--color-primary);
}

/* --- Brand buttons -------------------------------------------------------- */
.btn-primary,
.btn.dark-blue,
.btn.dark.blue,
.btn-dark-blue {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn.dark-blue:hover,
.btn.dark-blue:focus,
.btn-dark-blue:hover,
.btn-dark-blue:focus {
    background-color: var(--color-primary-hover);
}

.btn-secondary,
.btn.yellow,
.btn-yellow {
    background-color: var(--color-secondary);
    color: var(--color-on-secondary);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn.yellow:hover,
.btn.yellow:focus,
.btn-yellow:hover,
.btn-yellow:focus {
    background-color: var(--color-secondary-hover);
}

/* --- Default .btn design: navy (#004F71), turning gold (#FFB81C) on hover -- */
.btn {
    background-color: #004F71;   /* primary — navy */
    color: #ffffff;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.btn:hover,
.btn:focus-visible {
    background-color: #FFB81C;   /* secondary — gold */
    color: #004F71;
}
/* Scroll-down arrow stays transparent on hover (no gold fill) */
.btn.btn-scroll:hover,
.btn.btn-scroll:focus-visible {
    background-color: transparent;
    color: #ffffff;
}

/* --- Content links: primary by default, secondary on hover ---------------- */
main a:not(.btn) {
    color: var(--color-primary);
}
main a:not(.btn):hover,
main a:not(.btn):focus {
    color: var(--color-secondary);
}
/* Keep links legible on brand / colored-background sections */
main .color-bg a:not(.btn) {
    color: inherit;
}

/* --- Brand-colored focus state for accessibility & cohesion --------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* ==========================================================================
   Header navigation — layout & readability improvements
   ========================================================================== */

/* Top-level items: stronger contrast + tighter tracking so the bar doesn't
   sprawl. Submenu text stays at the larger, readable 16px set above. */
.site-header nav.primary.desktop > ul > li > a {
    font-size: 14px;
    letter-spacing: 0.1em;
    color: #4d4d4f;            /* readable dark gray (was #929497) */
}

/* Tighten the spacing between top-level items (was ~2.7em) */
.site-header nav.primary.desktop > ul {
    grid-column-gap: 1.6rem;
    -webkit-column-gap: 1.6rem;
       -moz-column-gap: 1.6rem;
            column-gap: 1.6rem;
}

/* Hover / active / current section → brand navy */
.site-header nav.primary.desktop > ul > li:hover > a,
.site-header nav.primary.desktop > ul > li.active > a,
.site-header nav.primary.desktop > ul > li.current-menu-item > a,
.site-header nav.primary.desktop > ul > li.current-menu-ancestor > a,
.site-header nav.primary.desktop > ul > li.current-menu-parent > a,
.site-header nav.primary.desktop > ul > li.current_page_parent > a,
.site-header nav.primary.desktop > ul > li.current_page_ancestor > a {
    color: var(--color-primary);
}

/* Blue underline affordance on hover (primary brand accent) */
.site-header nav.primary.desktop > ul > li > a span {
    position: relative;
}
.site-header nav.primary.desktop > ul > li > a span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.5em;
    height: 2px;
    background-color: var(--color-primary);
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: left center;
            transform-origin: left center;
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
}
.site-header nav.primary.desktop > ul > li:hover > a span::after {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
}

/* Dropdown panels: navy background, gold brand-cap, elevated */
.site-header nav.primary.desktop .sub-menu {
    background-color: var(--color-primary);
}
.site-header nav.primary.desktop .sub-menu.level--0 {
    border-top: 3px solid var(--color-secondary);
    -webkit-box-shadow: 0 12px 28px rgba(0, 79, 113, 0.25);
            box-shadow: 0 12px 28px rgba(0, 79, 113, 0.25);
}
.site-header nav.primary.desktop .sub-menu:not(.level--0) {
    -webkit-box-shadow: 0 12px 28px rgba(0, 79, 113, 0.25);
            box-shadow: 0 12px 28px rgba(0, 79, 113, 0.25);
}
/* Nested (2nd-level) flyouts open to the RIGHT by default (left:100%). For a
   dropdown near the right edge (e.g. Company → Investor Relations) that runs off
   the viewport and clips. `.open-left` — added by JS only when a right-flyout
   would overflow — flips it to open leftward instead so it stays on screen. */
.site-header nav.primary.desktop .sub-menu:not(.level--0).open-left {
    left: auto;
    right: 100%;
}
/* Row dividers become subtle translucent-white hairlines on navy */
.site-header nav.primary.desktop .sub-menu > li + li {
    border-top-color: rgba(255, 255, 255, 0.12);
}
/* Remove the current-section connector triangle — the navy down-arrow that core
   draws above the active top-level menu item (via a :before). Hidden rather than
   recoloured per design request. */
.site-header nav.primary.desktop > ul > li.current-menu-ancestor:before,
.site-header nav.primary.desktop > ul > li.current-menu-parent:before,
.site-header nav.primary.desktop > ul > li.current-menu-item:before,
.site-header nav.primary.desktop > ul > li.current_page_parent:before,
.site-header nav.primary.desktop > ul > li.current_page_ancestor:before {
    display: none;
}

/* Top-level dropdown carets: brand blue on the white bar, flip on open */
.site-header nav.primary.desktop .menu-item-has-children > .link i {
    color: var(--color-primary);
    -webkit-transition: -webkit-transform 0.25s ease;
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
}
.site-header nav.primary.desktop > ul > li:hover > .link i,
.site-header nav.primary.desktop > ul > li.active > .link i {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
}
/* Nested carets sit on the navy panel → white */
.site-header nav.primary.desktop .sub-menu .menu-item-has-children > .link i,
.site-header nav.primary.desktop .sub-menu .menu-item-has-children.active > .link i {
    color: #ffffff;
}

/* Sub-menu typography: 15px, white text on the navy panel */
.site-header nav.primary.desktop .sub-menu {
    font-size: 15px;
}
.site-header nav.primary.desktop .sub-menu .link {
    color: #ffffff;
    -webkit-transition: color 0.15s, background-color 0.15s;
    transition: color 0.15s, background-color 0.15s;
}

/* Submenu rows: darker-navy hover with a gold left-accent */
.site-header nav.primary.desktop .sub-menu li {
    position: relative;
    -webkit-transition: background-color 0.15s, -webkit-box-shadow 0.15s;
    transition: background-color 0.15s, box-shadow 0.15s;
}
.site-header nav.primary.desktop .sub-menu li:hover,
.site-header nav.primary.desktop .menu-item-has-children:not(.level--0).active,
.site-header nav.primary.desktop .sub-menu li.current-menu-item,
.site-header nav.primary.desktop .sub-menu li.current-menu-ancestor,
.site-header nav.primary.desktop .sub-menu li.current_page_item,
.site-header nav.primary.desktop .sub-menu li.current_page_ancestor {
    background-color: var(--color-primary-hover);
    -webkit-box-shadow: inset 3px 0 0 var(--color-secondary);
            box-shadow: inset 3px 0 0 var(--color-secondary);
}
.site-header nav.primary.desktop .sub-menu li:hover > .link,
.site-header nav.primary.desktop .sub-menu li.current-menu-item > .link,
.site-header nav.primary.desktop .sub-menu li.current-menu-ancestor > .link,
.site-header nav.primary.desktop .sub-menu li.current_page_item > .link,
.site-header nav.primary.desktop .sub-menu li.current_page_ancestor > .link {
    color: #ffffff;
}

/* NOTE: the stale white-era override that forced mobile hover/current links to
   navy via an ID selector (`#mobile-menu nav.primary …`) was removed — its ID
   specificity was beating the navy-drawer's gold states, making the active and
   hovered labels dark and unreadable on the navy panel. */

/* Mobile menu chevron + back-caret: keep a smooth transition for the drill-in
   nudge. Colour is set to gold by the navy-drawer rules further down. */
.site-header nav.primary.mobile .fa-chevron-right,
.site-header nav.primary.mobile .back .fa-caret-left {
    -webkit-transition: -webkit-transform 0.25s ease;
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
}
.site-header nav.primary.mobile a:hover .fa-chevron-right,
.site-header nav.primary.mobile a:active .fa-chevron-right {
    -webkit-transform: translateX(0.35em);
            transform: translateX(0.35em);
}
/* Back caret nudges the other way (toward where it returns to) */
.site-header nav.primary.mobile .back a:hover .fa-caret-left,
.site-header nav.primary.mobile .back a:active .fa-caret-left {
    -webkit-transform: translateX(-0.35em);
            transform: translateX(-0.35em);
}

/* ==========================================================================
   Site footer — redesigned to match the header design system
   --------------------------------------------------------------------------
   Three bands, mirroring the header's language of navy + gold on light:
     • .top  — navy CTA band with a gold brand-cap and a gold action button
     • .mid  — clean white link area: logo + multi-column navigation
     • .btm  — subtle light bar: social icons + copyright

   Layout note: the legacy footer used an -ms-grid system with negative-margin
   calc() offsets and 8–10px type. We reset that below and rebuild with simple,
   responsive flexbox. Layout-critical rules are scoped with
   `#site-footer.site-footer` (ID + class) so they reliably win over the
   media-query rules in 1.0/core.css regardless of source order.
   ========================================================================== */

/* --- Shared container: one aligned content column, matching the header ----- */
#site-footer.site-footer .top > .inner,
#site-footer.site-footer .mid > .inner,
#site-footer.site-footer .btm > .inner {
    max-width: var(--container-inner);  /* unified .container-page content width */
    margin: 0 auto;
    -ms-grid-columns: none;
    grid-template-columns: none; /* unset the legacy -ms-grid track list */
}

/* Neutralize the legacy grid placement + negative-margin offsets on the
   left/right halves so our fl<ex layouts have a clean slate. */
#site-footer.site-footer .top .left,
#site-footer.site-footer .top .right,
#site-footer.site-footer .mid .left,
#site-footer.site-footer .mid .right,
#site-footer.site-footer .btm .left,
#site-footer.site-footer .btm .right {
    grid-column: auto;
    margin: 0;
    padding: 0;
    max-width: none;
    border: 0;
}
#site-footer.site-footer .top .left > .inner,
#site-footer.site-footer .top .right > .inner,
#site-footer.site-footer .mid .left > .inner,
#site-footer.site-footer .mid .right > .inner,
#site-footer.site-footer .btm .left > .inner,
#site-footer.site-footer .btm .right > .inner {
    max-width: none;
    margin: 0;
    padding: 0;
    -ms-grid-columns: none;
    grid-template-columns: none;
}

/* ==========================================================================
   TOP — navy call-to-action band
   ========================================================================== */
#site-footer .top,
#site-footer .top.color-bg.blue {
    background-color: var(--color-primary);
    background-image: -webkit-gradient(linear, left top, right bottom, from(#005a81), to(var(--color-primary-hover)));
    background-image: linear-gradient(135deg, #005a81 0%, var(--color-primary-hover) 100%);
    border-top: 3px solid var(--color-secondary);  /* gold brand-cap, echoes header dropdowns */
    color: var(--color-on-primary);
    padding: 0 var(--container-pad);   /* unified 20px page gutter */
}
#site-footer.site-footer .top > .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    padding: clamp(2.5rem, 5vw, 3.75rem) 0;
}
#site-footer .top .left {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 24rem;
            flex: 1 1 24rem;
}
#site-footer .top h2 {
    color: var(--color-on-primary);
    margin: 0;
    font-weight: 400;
    line-height: 1.25;
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    letter-spacing: 0.005em;
}
#site-footer .top .right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}
/* Gold action button — the secondary brand pop, as on the header */
#site-footer .top .btn {
    background-color: var(--color-secondary);
    color: var(--color-on-secondary);
    width: auto;                /* override legacy desktop `.top a { width:100% }` */
    font-size: 14px;
    font-weight: 400;           /* match the homepage pill (inner pages inherited bold 700) */
    border-radius: 999px;       /* normalise the em-based pill radius */
    line-height: 3.4;
    letter-spacing: 0.2em;
    white-space: nowrap;
    -webkit-transition: background-color 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
#site-footer .top .btn:hover,
#site-footer .top .btn:focus {
    background-color: #ffffff;              /* white fill on hover */
    color: var(--color-primary);           /* navy label stays legible on white */
}

/* ==========================================================================
   MID — white link area: logo + navigation columns
   ========================================================================== */
#site-footer .mid,
#site-footer .mid.color-bg.light-gray {
    background-color: #ffffff;
    font-size: 16px;            /* was 10px — restore readable base */
    letter-spacing: normal;
    padding: 0 var(--container-pad);   /* unified 20px page gutter */
}
#site-footer.site-footer .mid > .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: clamp(2rem, 5vw, 5rem);
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}
#site-footer.site-footer .mid .left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}
#site-footer.site-footer .mid .right {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    min-width: 0;               /* allow nav columns to wrap/shrink cleanly */
}
#site-footer .mid .site-logo {
    display: block;
}
#site-footer .mid .site-logo svg,
#site-footer .mid .site-logo img {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
}

/* --- Footer navigation: parent items become column headings --------------- */
#site-footer nav.primary {
    padding-top: 0;
}
#site-footer nav.primary > ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-grid-columns: none;
    grid-template-columns: none;
    gap: 1.75rem clamp(1.5rem, 3vw, 3rem);
    padding: 0;
    margin: 0;
}
#site-footer nav.primary > ul > li {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 10rem;
            flex: 1 1 10rem;
    min-width: 9rem;
    border-top: 0 !important;   /* drop the legacy hairline between columns */
}
/* Column heading — top-level item, rendered as an <h4> (see footer_heading_as_h4).
   The <a> selector is kept for backward-compatibility; both render identically.
   font-family/margin are reset so the global h4 rules can't alter the look. */
#site-footer nav.primary > ul > li > a,
#site-footer nav.primary > ul > li > h4.footer-col-heading {
    display: block;
    margin: 0;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-primary);
    padding: 0 0 0.9rem 0;
    /* No grey flash when the heading is tapped to toggle the accordion */
    -webkit-tap-highlight-color: transparent;
}
/* Belt-and-braces: kill the tap highlight on every footer nav control, and
   make the toggle heading's focus silent (JS handles the open/close, so there's
   no default affordance to preserve). */
#site-footer nav.primary a,
#site-footer nav.primary h4.footer-col-heading {
    -webkit-tap-highlight-color: transparent;
}
#site-footer nav.primary > ul > li > h4.footer-col-heading:focus {
    outline: none;
}
/* Hide the legacy +/- accordion marker — columns are always open */
#site-footer nav.primary > ul > li.menu-item-has-children > a:after {
    display: none;
}
/* Link lists under each heading */
#site-footer nav.primary .sub-menu {
    padding-bottom: 0;
    display: block;
}
#site-footer nav.primary .sub-menu a {
    display: inline-block;
    padding: 0.4rem 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #4d4d4f;
    text-transform: none;
    letter-spacing: normal;
    -webkit-transition: color 0.15s ease, -webkit-transform 0.15s ease;
    transition: color 0.15s ease, transform 0.15s ease;
}
#site-footer nav.primary .sub-menu a:hover,
#site-footer nav.primary .sub-menu a:focus {
    color: var(--color-primary);
    -webkit-transform: translateX(3px);
            transform: translateX(3px);
}

/* ==========================================================================
   BTM — subtle bar: social + copyright
   ========================================================================== */
#site-footer .btm,
#site-footer .btm.color-bg.dark-gray {
    background-color: #000000;              /* black social/copyright bar */
    color: #d7d8da;                        /* light text for strong contrast */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;            /* was 8px — restore readable base */
    font-weight: 400;
    padding: 0 var(--container-pad);   /* unified 20px page gutter */
}
#site-footer.site-footer .btm > .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding: 15px 0;         /* more compact top/bottom spacing */
}
#site-footer .btm .right {
    text-align: right;
}
#site-footer .btm .right p {
    margin: 0;
    line-height: 1.5;
    color: #d7d8da;                        /* light copyright text on black */
}
#site-footer .btm .right p br {
    display: none;              /* let the copyright flow on one line / wrap naturally */
}

/* --- Social icons: circular, navy-on-hover (matches header affordances) ---- */
#site-footer nav.social {
    color: inherit;
}
#site-footer nav.social ul {
    gap: 0.75rem;
    font-size: 1rem;
}
#site-footer nav.social ul li:not(:first-of-type) {
    margin-left: 0;             /* spacing handled by gap */
}
#site-footer nav.social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;                        /* white icons on black */
    font-size: 16px;
    line-height: 1;
    -webkit-transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, -webkit-transform 0.2s ease;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
#site-footer nav.social a:hover,
#site-footer nav.social a:focus {
    background-color: var(--color-secondary);   /* gold brand fill on hover */
    border-color: var(--color-secondary);
    color: var(--color-on-secondary);           /* navy icon on gold */
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
}
#site-footer nav.social a svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* ==========================================================================
   Footer — responsive behavior
   ========================================================================== */

/* Tablet (768px – 1024px): keep the top CTA and bottom bar as rows, but stack
   the logo above the navigation columns. The column must stretch its children
   and the nav side must span the full width, otherwise the nav collapses to its
   content width and leaves a large empty gap on the right. (Applies at ≤1024px,
   so the mobile accordion below also inherits the full-width nav.) */
@media only screen and (max-width: 1024px) {
    #site-footer.site-footer .mid > .inner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        gap: 2.5rem;
    }
    /* Nav fills the footer width so its columns spread across the full row */
    #site-footer.site-footer .mid .right {
        width: 100%;
        -webkit-box-flex: 1;
            -ms-flex: 1 1 100%;
                flex: 1 1 100%;
    }
    /* Center the logo horizontally below 1024px (tablet + mobile) */
    #site-footer.site-footer .mid .left {
        -ms-flex-item-align: center;
            align-self: center;
        text-align: center;
    }
    /* Center the nav columns as a group — balanced margins on both the left and
       right sides — so the columns line up with the centered logo. Columns size
       to their content instead of stretching edge-to-edge. */
    #site-footer nav.primary > ul {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        /* Wider breathing room between the centered columns */
        gap: 1.75rem clamp(2.5rem, 6vw, 5rem);
    }
    #site-footer nav.primary > ul > li {
        -webkit-box-flex: 0;
            -ms-flex: 0 1 auto;
                flex: 0 1 auto;
    }
}

/* Mobile (below 800px): stack every band and adjust alignment — the CTA and
   bottom bar center up, while the logo + navigation accordion stay left-aligned
   so they share a clean left edge. (Accordion breakpoint = 800px, matching the
   footer.php accordion script's matchMedia.) */
@media only screen and (max-width: 799.98px) {
    #site-footer.site-footer .top > .inner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        text-align: center;
        gap: 1.5rem;
    }
    #site-footer .top .left {
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
    }
    /* Logo + navigation share a clean left edge */
    #site-footer.site-footer .mid > .inner {
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        gap: 2rem;
    }
    /* --- Footer navigation becomes an accordion on mobile ----------------- */
    #site-footer nav.primary > ul {
        gap: 0;                       /* rows sit flush, divided by hairlines */
    }
    #site-footer nav.primary > ul > li {
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
        min-width: 100%;
        /* !important needed to beat the desktop base rule (`border-top:0
           !important`), otherwise only the last item's divider would show. */
        border-top: 1px solid #e3e4e6 !important;
    }
    #site-footer nav.primary > ul > li:last-child {
        border-bottom: 1px solid #e3e4e6;
    }
    /* Heading becomes the tappable accordion toggle (flex row + chevron) */
    #site-footer nav.primary > ul > li > h4.footer-col-heading {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        padding: 1.05rem 0;
        margin: 0;
        cursor: pointer;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
    }
    /* Chevron indicator (pure CSS, navy to match the desktop menu) */
    #site-footer nav.primary > ul > li > h4.footer-col-heading::after {
        content: "";
        -ms-flex-negative: 0;
            flex-shrink: 0;
        width: 9px;
        height: 9px;
        margin-left: 1rem;
        border-right: 2px solid var(--color-primary);
        border-bottom: 2px solid var(--color-primary);
        -webkit-transform: translateY(-2px) rotate(45deg);
                transform: translateY(-2px) rotate(45deg);
        -webkit-transition: -webkit-transform 0.25s ease;
                transition: transform 0.25s ease;
    }
    #site-footer nav.primary > ul > li.is-open > h4.footer-col-heading::after {
        -webkit-transform: translateY(2px) rotate(-135deg);
                transform: translateY(2px) rotate(-135deg);
    }
    /* Collapsible panel */
    #site-footer nav.primary .sub-menu {
        max-height: 0;
        overflow: hidden;
        -webkit-transition: max-height 0.3s ease, padding 0.3s ease;
        transition: max-height 0.3s ease, padding 0.3s ease;
        padding-bottom: 0;
    }
    #site-footer nav.primary > ul > li.is-open .sub-menu {
        max-height: 640px;
        padding-bottom: 0.85rem;
    }
    #site-footer.site-footer .btm > .inner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        text-align: center;
        gap: 1rem;
    }
    #site-footer .btm .right,
    #site-footer .btm .left {
        text-align: center;
        width: 100%;
    }
    #site-footer nav.social ul {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
}

/* ==========================================================================
   Footer — overflow safeguards (scoped to #site-footer only)
   Guarantees the footer can never introduce horizontal scrolling or text
   overflow on any screen size, without touching any other section of the
   site or the responsive rules above. These rules are intentionally
   layout-neutral (no flex-basis / min-width overrides that could fight the
   media queries) — they only cap widths and allow text to wrap.
   ========================================================================== */
#site-footer.site-footer {
    max-width: 100%;
    overflow-x: clip;           /* belt-and-braces: the footer can never scroll sideways */
}
#site-footer.site-footer > .inner {
    max-width: 100%;
}
/* Section rows stay within the viewport, padding included */
#site-footer.site-footer .top > .inner,
#site-footer.site-footer .mid > .inner,
#site-footer.site-footer .btm > .inner {
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
/* Long headings / copyright / links wrap instead of pushing the width out */
#site-footer.site-footer .top h2,
#site-footer.site-footer .btm .right p,
#site-footer.site-footer nav.primary a {
    overflow-wrap: break-word;
    word-wrap: break-word;
}
/* The navigation block never exceeds its container */
#site-footer.site-footer nav.primary,
#site-footer.site-footer nav.primary > ul {
    max-width: 100%;
}

/* ==========================================================================
   Mobile menu — align with the desktop menu's navy + gold design system
   ========================================================================== */

/* Hamburger + close (✕) icon → brand navy (was legacy cyan #6ad1e3) */
.toggle-menu .line,
.close .line,
body.menu-open .toggle-menu .line {
    background-color: var(--color-primary);
}

/* --- Breakpoint alignment -------------------------------------------------
   Legacy showed the desktop nav / hid the hamburger at ≥1000px, but the full
   horizontal nav only fits from ~1100px up — between 1000–1100px it crams (logo
   collides with the first item, "Industry Expertise" wraps, carets drop). The
   drawer is already available below 1100px (legacy hides #mobile-menu only at
   ≥1100px), so align the hamburger/desktop-nav switch to that same 1100px line:
   keep the hamburger + drawer until there is room for the horizontal nav. */
@media only screen and (max-width: 1099.98px) {
    .site-header nav.primary.desktop {
        display: none;
        pointer-events: none;
    }
    .site-header .toggle-menu {
        display: block;
        pointer-events: all;
    }
}

/* Panel: a premium navy gradient drawer (the footer-CTA / dropdown-cap brand
   language) with a gold brand-cap. The desktop dropdown stays white; the mobile
   drawer goes dark so it reads as a richer, more deliberate surface — and the
   navy fill removes the empty-white void the plain panel left at the bottom. */
#mobile-menu,
#mobile-menu.color-bg.faint-gray {
    background-color: var(--color-primary);
    background-image: -webkit-gradient(linear, left top, right bottom, from(#005a81), to(var(--color-primary-hover)));
    background-image: linear-gradient(165deg, #005a81 0%, var(--color-primary-hover) 100%);
    border-top: 3px solid var(--color-secondary);
}

/* Menu rows: generous tap targets, soft-white label on the navy */
.site-header nav.primary.mobile a {
    padding: 1.05em 0;
    color: #e6eef3;
    font-size: 1.0625rem;        /* 17px — a touch larger, easier to tap */
    letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;  /* no grey/blue flash on tap */
    -webkit-transition: color 0.2s ease, padding-left 0.2s ease, background-color 0.2s ease, -webkit-box-shadow 0.2s ease;
    transition: color 0.2s ease, padding-left 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
/* Top-level items read a little heavier so sections stand out from children */
.site-header nav.primary.mobile > ul > li > a {
    font-weight: 600;
}
/* Lay each row out as [ label …… chevron ] so the gold caret anchors right */
.site-header nav.primary.mobile > ul > li > a,
.site-header nav.primary.mobile .sub-menu a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 0.75rem;
}

/* ONE consistent accent for every interactive state — current page, press
   (:active), keyboard focus, and hover — so the colours never mismatch between
   them and there is no odd grey "temporary" box on tap. Gold label + gold
   left-bar + a faint tint. Hover is handled separately (pointer-only) below. */
.site-header nav.primary.mobile li.current-menu-item > a,
.site-header nav.primary.mobile li.current-menu-ancestor > a,
.site-header nav.primary.mobile li.current_page_item > a,
.site-header nav.primary.mobile li.current_page_ancestor > a,
.site-header nav.primary.mobile li > a:active,
.site-header nav.primary.mobile a:focus-visible {
    color: var(--color-secondary);
    padding-left: 0.85em;
    background-color: rgba(255, 255, 255, 0.05);
    -webkit-box-shadow: inset 3px 0 0 var(--color-secondary);
            box-shadow: inset 3px 0 0 var(--color-secondary);
}
/* Current page is the only PERSISTENT highlight — a touch stronger + bold so it
   reads as "you are here" rather than a transient press. */
.site-header nav.primary.mobile li.current-menu-item > a,
.site-header nav.primary.mobile li.current-menu-ancestor > a,
.site-header nav.primary.mobile li.current_page_item > a,
.site-header nav.primary.mobile li.current_page_ancestor > a {
    background-color: rgba(255, 255, 255, 0.07);
    font-weight: 700;
}

/* Hover accent — ONLY on devices that truly hover (pointer/mouse). Excluding
   touch here is what stops the sticky-hover click-flicker. Same gold accent as
   above so hover and press look identical. */
@media (hover: hover) and (pointer: fine) {
    .site-header nav.primary.mobile li > a:hover {
        color: var(--color-secondary);
        padding-left: 0.85em;
        background-color: rgba(255, 255, 255, 0.05);
        -webkit-box-shadow: inset 3px 0 0 var(--color-secondary);
                box-shadow: inset 3px 0 0 var(--color-secondary);
    }
    .site-header nav.primary.mobile li > a:hover .fa-chevron-right {
        -webkit-transform: translateX(4px);
                transform: translateX(4px);
    }
}

/* Focus handling: no boxed outline for mouse/touch focus (that was the stray
   box on tap); keyboard focus (:focus-visible) gets the gold accent above plus
   a crisp ring for clear affordance. */
.site-header nav.primary.mobile a:focus {
    outline: none;
}
.site-header nav.primary.mobile a:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: -2px;
}

/* Dividers → subtle translucent-white hairlines on the navy */
.site-header nav.primary.mobile li + li {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Chevron affordance → gold, nudges right on hover */
.site-header nav.primary.mobile .fa-chevron-right {
    color: var(--color-secondary);
    font-size: 0.8em;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -ms-flex-item-align: center;
        align-self: center;
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
}

/* Drill-down sub-menus share the navy surface so they fully cover the level
   beneath them as they slide in */
.site-header nav.primary.mobile .sub-menu {
    background-color: var(--color-primary);
    background-image: -webkit-gradient(linear, left top, right bottom, from(#005a81), to(var(--color-primary-hover)));
    background-image: linear-gradient(165deg, #005a81 0%, var(--color-primary-hover) 100%);
}

/* "Back" control → compact gold-accented eyebrow */
.site-header nav.primary.mobile .back a {
    color: #e6eef3;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    gap: 0.5rem;
}
.site-header nav.primary.mobile .back a:hover {
    color: var(--color-secondary);
}
.site-header nav.primary.mobile .back .fa-caret-left {
    color: var(--color-secondary);
}

/* ==========================================================================
   Mobile slide-out menu — drawer behavior
   --------------------------------------------------------------------------
   The panel slides in from the right over a dimmed, scroll-locked page. The
   legacy base (1.0/core.css) already provides the translateX slide and toggles
   `menu-open` + `no-scroll` on <body> via JS; we refine the panel here and add
   the backdrop. `body.no-scroll { overflow:hidden }` (legacy) locks the page.

   Layering (so the header + its toggle stay tappable above the backdrop):
     backdrop  z-index 900  (body::after)
     header    z-index 1000 (raised while open — paints its white bar over the
                             backdrop and keeps the ✕ toggle clickable)
     drawer    z-index 1000 (legacy; lives inside the header's context)
   ========================================================================== */

/* --- The drawer panel ----------------------------------------------------- */
#mobile-menu,
#mobile-menu.color-bg.faint-gray {
    /* Narrower than the viewport so the dimmed page peeks through on the left,
       reading clearly as an overlay drawer rather than a full page swap. */
    width: min(360px, 86vw);
    max-width: 360px;
    /* Dynamic-viewport height so mobile browser chrome doesn't clip the end of
       a long menu (falls back to the legacy calc on older browsers). */
    height: calc(100vh - 100%);
    height: calc(100dvh - 100%);
    overflow-x: hidden;
    overflow-y: auto;                     /* long menus scroll within the drawer */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;         /* scroll chaining stops at the drawer */
    /* A touch snappier than the legacy ease-in-out, with an ease-out finish. */
    -webkit-transition: -webkit-transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: -webkit-transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Panel is a full-height column; the nav area grows to fill it */
#mobile-menu > .inner {
    min-height: 100%;
}
#mobile-menu .top {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
}
/* Comfortable, consistent padding around the nav rows */
#mobile-menu section > .inner {
    padding: 1.25rem 1.5rem 2rem;
}

/* Nav items reveal with a staggered slide-in once the drawer is open */
.site-header nav.primary.mobile > ul > li {
    opacity: 0;
    -webkit-transform: translateX(18px);
            transform: translateX(18px);
    -webkit-transition: opacity 0.45s ease, -webkit-transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.menu-open .site-header nav.primary.mobile > ul > li {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
}
/* Cascade the reveal top-to-bottom */
body.menu-open .site-header nav.primary.mobile > ul > li:nth-child(1) { -webkit-transition-delay: 0.10s; transition-delay: 0.10s; }
body.menu-open .site-header nav.primary.mobile > ul > li:nth-child(2) { -webkit-transition-delay: 0.16s; transition-delay: 0.16s; }
body.menu-open .site-header nav.primary.mobile > ul > li:nth-child(3) { -webkit-transition-delay: 0.22s; transition-delay: 0.22s; }
body.menu-open .site-header nav.primary.mobile > ul > li:nth-child(4) { -webkit-transition-delay: 0.28s; transition-delay: 0.28s; }
body.menu-open .site-header nav.primary.mobile > ul > li:nth-child(5) { -webkit-transition-delay: 0.34s; transition-delay: 0.34s; }
body.menu-open .site-header nav.primary.mobile > ul > li:nth-child(6) { -webkit-transition-delay: 0.40s; transition-delay: 0.40s; }
body.menu-open .site-header nav.primary.mobile > ul > li:nth-child(7) { -webkit-transition-delay: 0.46s; transition-delay: 0.46s; }
body.menu-open .site-header nav.primary.mobile > ul > li:nth-child(8) { -webkit-transition-delay: 0.52s; transition-delay: 0.52s; }

/* --- Dimmed backdrop ------------------------------------------------------ */
/* Always present but inert; fades in with the drawer. Scoped to never block
   interaction unless the menu is actually open. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 900;
    /* delay the visibility flip to the end so the fade-out is visible */
    -webkit-transition: opacity 0.38s ease, visibility 0s linear 0.38s;
    transition: opacity 0.38s ease, visibility 0s linear 0.38s;
}
body.menu-open::after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    -webkit-transition: opacity 0.38s ease;
    transition: opacity 0.38s ease;
}

/* Keep the header (with the ✕ toggle and the drawer) above the backdrop.
   z-index on the already-sticky header creates the needed stacking context. */
body.menu-open .site-header {
    z-index: 1000;
}

/* Respect reduced-motion: no slide/fade, just show/hide */
@media (prefers-reduced-motion: reduce) {
    #mobile-menu,
    #mobile-menu.color-bg.faint-gray,
    #mobile-menu nav.primary,
    .site-header nav.primary.mobile > ul > li,
    body::after {
        -webkit-transition: none;
        transition: none;
    }
    .site-header nav.primary.mobile > ul > li {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
}

/* ==========================================================================
   Homepage "How We Help" — unify the link (anchor) colour
   --------------------------------------------------------------------------
   Each item link is [ title text + arrow icon ]. The title text was navy
   (#004F71) but the arrow carried `text-blue-1` (#6AD1E3 cyan), so the two
   halves of the same anchor didn't match. Make the icon inherit the anchor's
   text colour so text + icon are consistent; the description keeps its default.
   ========================================================================== */
.how-we-help .item-title a i {
    color: inherit;
}
/* Description uses the default body text colour. It was inheriting the navy
   that the `.single` (which carries an `h3` class) sets on the whole row; reset
   it to the default so only the anchor (title + icon) stays navy. */
.how-we-help .item-description {
    color: #000000;
}

/* ==========================================================================
   Homepage "How We Help" — row hover effect (mirrors "Who We Serve")
   --------------------------------------------------------------------------
   On pointer hover the whole row lights up to gold and the arrow slides
   right, matching the interaction already used in the Who We Serve list.
   ========================================================================== */
.how-we-help .loop-list .item-title a {
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}
.how-we-help .loop-list .item-title a i {
    -webkit-transition: color 0.2s ease, -webkit-transform 0.2s ease;
    transition: color 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
    .how-we-help .loop-list .single:hover .item-title a {
        color: var(--color-secondary);
    }
    .how-we-help .loop-list .single:hover .item-title a i {
        -webkit-transform: translateX(5px);
                transform: translateX(5px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .how-we-help .loop-list .item-title a i {
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }
}

/* ==========================================================================
   Homepage "How We Help" — keep the illustration visible on small screens
   --------------------------------------------------------------------------
   core.css hides the section illustration below 640px
   (`:has(.loop-list):has(.illustration) .section-illustration { display:none }`).
   Re-show it for this section and size the SVG to fit the column so it reads
   as an inline illustration beneath the list instead of disappearing.
   ========================================================================== */
@media only screen and (width < 640px) {
    .how-we-help.block-front-page:has(.loop-list):has(.illustration) .section-illustration {
            max-width: 250px;
            display: grid;
            width: 100%;
            margin: 0 auto;
    }
    .how-we-help.block-front-page:has(.loop-list):has(.illustration) .section-illustration svg {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        margin-inline: auto;
    }
}

/* ==========================================================================
   Homepage "How We Help" — desktop (≥1000px) eye illustration balance
   --------------------------------------------------------------------------
   At ≥1000px core.css drops the eye into the left column's second grid row but
   leaves it top-left-aligned and oversized, so it floats with dead space to its
   right and below. Centre it horizontally AND vertically within its cell and
   cap its size, so it reads as a balanced visual anchor sitting opposite the
   middle of the solutions list. (The stylised "eyelid" overlapping the iris is
   the intended brand artwork, so the SVG itself is left as-is.)
   ========================================================================== */
@media only screen and (min-width: 1000px) {
    body.home .how-we-help .section-illustration {
        /* Match the intro's half-width span. --grid--column-count is responsive
           (12 at wide desktop, 8 at ~1200px, …), so span HALF of it dynamically
           — a hardcoded value (e.g. span 6) overflows the narrower grids and
           bumps the eye onto its own row at the bottom. */
        grid-column: span calc(var(--grid--column-count) / 2);
        -ms-flex-item-align: start;
            align-self: start;      /* top-align (was center) to cut the gap above the eye */
        -ms-grid-column-align: center;
            justify-self: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width: 100%;
        padding-block: 0;
    }
    body.home .how-we-help .section-illustration svg {
        width: 100%;
        max-width: 320px;
        height: auto;
    }
}

/* ==========================================================================
   Homepage "How We Help" — fix the broken tablet (640–1000px) layout
   --------------------------------------------------------------------------
   core.css special-cases this section between 640–1000px: it forces
   `--grid--column-count:3`, spans the intro across 2 columns and pins the eye
   illustration into the 3rd column with `position:absolute; inset:0 0 0 auto`.
   The result is the eye floating top-right, overlapping the heading and
   clipping at the edge, with the list crammed full-width below.

   Fix: below 1000px, collapse this section to a single stacked column (like its
   own <640 layout and like "Who We Serve"), so it reads intro → list →
   centered illustration. The base grid is already 1 column under 1000px; we
   just undo the 3-column override and the absolute illustration placement.
   Selectors mirror core's (with `.how-we-help` added) to win on specificity.
   ========================================================================== */
@media only screen and (min-width: 640px) and (max-width: 999.98px) {
    .how-we-help.block-front-page:has(.loop-list):has(.illustration) {
        --grid--column-count: 1;
    }
    .how-we-help.block-front-page:has(.loop-list):has(.illustration) .section-intro,
    .how-we-help.block-front-page:has(.loop-list):has(.illustration) .section-content,
    .how-we-help.block-front-page:has(.loop-list):has(.illustration) .section-illustration {
        grid-column: content-start / content-end;
        grid-row: auto;
    }
    /* Eye: static, centered and capped — matches the <640 treatment */
    .how-we-help.block-front-page:has(.loop-list):has(.illustration) .section-illustration {
        position: relative;
        max-width: 250px;
        width: 100%;
        margin: 1.5rem auto 0;
    }
    .how-we-help.block-front-page:has(.loop-list):has(.illustration) .section-illustration svg {
        position: static;
        inset: auto;
        width: 100%;
        height: auto;
        max-width: 100%;
    }
    /* Keep the list a single column on tablet so it matches "Who We Serve"
       below 1000px (both stack one item per row). Overrides the block's
       `minmax(27.5rem,1fr)` auto-fill, which otherwise formed 2 columns around
       900px while Who We Serve stayed single — an inconsistency between the two
       sections. Each section keeps its own distinct desktop (≥1000px) layout. */
    .how-we-help.block-front-page:has(.loop-list) .loop-list {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Homepage "Who We Serve" — readability + polish on the dark photo band
   --------------------------------------------------------------------------
   The industry list was rendering in navy on a dark photo (barely legible).
   This makes the photo full-strength under a dark brand overlay, then sets the
   list type to light/gold so it reads cleanly — matching the navy+gold system.
   ========================================================================== */

/* Single-column grid + natural-wrapping subhead (per request) */
.who-we-serve {
    grid-template-columns: auto;
}
.who-we-serve .text-subhead {
    text-wrap: auto;
}

/* Full image, darkened by an overlay we control (was a flat 0.75 opacity that
   left the busy photo competing with the text). */
.block-who-we-serve .background,
.who-we-serve .background {
    opacity: 1;
}
.who-we-serve .section-background::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 27, 40, 0.92)), color-stop(45%, rgba(0, 27, 40, 0.58)), to(rgba(0, 27, 40, 0.84)));
    background-image: linear-gradient(115deg, rgba(0, 27, 40, 0.92) 0%, rgba(0, 27, 40, 0.58) 45%, rgba(0, 27, 40, 0.84) 100%);
}

/* Industry rows: airy spacing, light readable type */
.who-we-serve .loop-list .item-title {
    margin: 0;
}
.who-we-serve .loop-list .item-title a {
    color: #ffffff;
    font-weight: 600;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}
/* Gold arrow accent (anchored right), nudges on hover */
.who-we-serve .loop-list .item-title a i {
    color: var(--color-secondary);
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -webkit-transition: color 0.2s ease, -webkit-transform 0.2s ease;
    transition: color 0.2s ease, transform 0.2s ease;
}
.who-we-serve .loop-list .description {
    color: rgba(255, 255, 255, 0.78);
}
/* Dividers → subtle translucent-white hairlines (was navy currentColor) */
.who-we-serve .loop-list .single:before {
    border-color: rgba(255, 255, 255, 0.18);
}

/* Hover (pointer only): the whole row lights up to gold, arrow slides */
@media (hover: hover) and (pointer: fine) {
    .who-we-serve .loop-list .single:hover .item-title a {
        color: var(--color-secondary);
    }
    .who-we-serve .loop-list .single:hover .item-title a i {
        -webkit-transform: translateX(5px);
                transform: translateX(5px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .who-we-serve .loop-list .item-title a i {
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }
}

/* ==========================================================================
   Homepage "Who We Serve" + "How We Help" — item description size
   --------------------------------------------------------------------------
   The list descriptions carry no font-size of their own, so they inherited
   the `.h3` scale (fluid 14→18px) from their `.single` wrapper. Pin them to a
   fixed 16px for consistent, readable body copy.
   ========================================================================== */
.who-we-serve .loop-list .description,
.how-we-help .loop-list .description {
    font-size: 16px;
}

/* ==========================================================================
   Header top utility bar — right-side section (Search + EN / FR)
   --------------------------------------------------------------------------
   Goal: a friendly, obvious utility cluster that stays usable at every width.

   1. Responsive visibility — the legacy stylesheet (1.0/core.css) hides
      `.top .right` below 768px and forces `.top .center` full-width, so Search
      and the EN/FR switcher vanished on phones. Below 768px we lay the bar out
      as one tidy row and keep the cluster visible; on very small phones the
      promo line is dropped (not the utility controls) so nothing crowds.
   2. Affordance — Search gets a magnifier icon, a pointer cursor and a smooth
      brand-navy hover so it reads as a control, not static text. On small
      phones it collapses to the icon alone to save room.
   3. Language toggle — EN/FR become a clear pair: the active language keeps its
      filled cyan pill, the other gains a navy hover so it's obviously tappable.
   A hairline divider groups "Search" and the toggle as two distinct items.
   Everything here is scoped to `.site-header .top .right` — nothing else moves.
   ========================================================================== */

/* Nudge the whole top utility bar up from 10px for better legibility — the
   promo line, Search, EN/FR and the Apply Now pill all inherit this base. */
.site-header .top {
    font-size: 12px;
}

/* --- Search control ------------------------------------------------------- */
/* Brand-navy by default (was a muted grey), warming to cyan on hover for a
   clear, on-brand colour effect. */
.site-header .top nav.secondary #menu-item-search > a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.4em;
    cursor: pointer;
    color: #000000;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}
.site-header .top nav.secondary #menu-item-search > a:hover,
.site-header .top nav.secondary #menu-item-search > a:focus-visible {
    
    color: var(--color-primary);
}
/* The magnifier (an <i> that the FA kit swaps for an inline <svg>): inherit the
   link colour, drop the base trailing margin so the flex `gap` controls
   icon↔label spacing, and lift a touch on hover. */
.site-header .top nav.secondary #menu-item-search > a i,
.site-header .top nav.secondary #menu-item-search > a svg {
    margin: 0;
    font-size: 1.05em;
    color: inherit;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
}
.site-header .top nav.secondary #menu-item-search > a:hover i,
.site-header .top nav.secondary #menu-item-search > a:hover svg,
.site-header .top nav.secondary #menu-item-search > a:focus-visible i,
.site-header .top nav.secondary #menu-item-search > a:focus-visible svg {
    -webkit-transform: scale(1.12);
            transform: scale(1.12);
}

/* --- EN / FR language toggle --------------------------------------------- */
/* Pull the toggle closer to Search and group the two pills into a compact pair
   (smaller gap), so the right-side cluster reads as one tight unit. */
.site-header .top nav.language {
    position: relative;
    margin-left: 1.25rem;
}
.site-header .top nav.language > ul {
    grid-column-gap: 0.5em;
    gap: 0.5em;
}
/* Hairline divider in the gap before the toggle, grouping it apart from Search */
.site-header .top nav.language::before {
    content: "";
    position: absolute;
    left: -0.65rem;
    top: 50%;
    width: 1px;
    height: 1.4em;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.15);
}
.site-header .top nav.language .menu-item a {
    cursor: pointer;
    -webkit-transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
/* Inactive language: navy outline by default (was muted grey), filling solid
   navy with white text on hover — a clear colour effect that stays distinct
   from the active pill's filled cyan. */
.site-header .top nav.language .menu-item:not(.current-language) a {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.site-header .top nav.language .menu-item:not(.current-language) a:hover,
.site-header .top nav.language .menu-item:not(.current-language) a:focus-visible {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}
/* Active/current language pill → primary (navy) fill with white text.
   (Theme's primary colour variable is --color-primary.) */
.site-header nav.language .menu-item.current-language a {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

/* ---- Header bottom shadow: separate the sticky header from the page ---------
   Global (every page). The white bottom bar previously sat flush against white
   first sections with no visual break; this soft shadow lifts the header above
   the content. z-index:2000 on .site-header means it always paints over the
   section below. */
.site-header {
    -webkit-box-shadow: var(--shadow-header);
            box-shadow: var(--shadow-header);
}

/* ---- Keep the FULL header fixed while scrolling -----------------------------
   Core slid the sticky header up by the top-bar height on scroll
   (`body.scrolled .site-header:not(:hover) { top: -(--header--top-height) }`),
   hiding the promo / search / language bar until hover. Pin it at the top so the
   top bar stays visible alongside the main nav at all times. */
@media only screen and (min-width: 768px) {
    body.scrolled .site-header:not(:hover) {
        top: 0 !important;
    }
    /* The search dialog's top inset was shrunk to the main-nav height while the
       top bar was hidden; keep it at the full header height now that it stays. */
    :root body.scrolled:has(#site-header:not(:hover)) {
        --search--inset--top: var(--header--height);
    }
}

/* Top-bar "Apply Now" CTA: a little more padding for comfortable spacing
   (was `0 1.2em`). Pin the weight here (global, not `body.home`-scoped) so the
   shared header button reads identically on every page — the homepage's lighter
   weight comes from `body.home .btn` (font-weight: normal), which doesn't match
   on inner pages, leaving them with the legacy base `.btn` 600/bold. This rule
   (specificity 0,4,0) wins everywhere, making home and inner consistent. */
.site-header .top .center .btn {
    padding: 0.3em 1.6em;
    font-weight: normal;
    font-size: inherit;   /* follow the bumped top-bar size (12px) instead of the 10px base */
}

/* --- Responsive: stack the two sections, centered, below 768px ------------ */
@media only screen and (max-width: 767.98px) {
    /* Let the bar grow to hold two stacked rows instead of the fixed height */
    .site-header .top {
        height: auto;
    }
    /* Stack vertically and centre: promo CTA on top, Search + EN/FR beneath */
    .site-header .top > .inner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        height: auto;
        gap: 0.5rem;
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }
    /* CTA row: full width, contents centred */
    .site-header .top .center {
        width: 100%;
    }
    .site-header .top .center > .inner {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .site-header .top .center .btn {
        white-space: nowrap;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    }
    /* Utility row: revealed, full width, contents centred */
    .site-header .top .right {
        display: block;
        width: 100%;
    }
    .site-header .top .right > .inner {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .site-header .top nav.language {
        margin-left: 1.25rem;
    }
    .site-header .top nav.language::before {
        left: -0.65rem;
    }
}

/* ==========================================================================
   Unified page container — one aligned content column, header → footer
   --------------------------------------------------------------------------
   The page previously used three different content widths (header/footer at
   1306px, homepage .site-grid sections at 1188px). This standardises every
   band and section onto a single .container-page column:

       max-width: 1560px;  padding-inline: 20px;  margin: 0 auto;

   Because box-sizing is border-box site-wide, the band carries the 20px
   gutters and the inner content column is capped at 1520px (1520 + 2×20 =
   1560 total), so the visible content lines up pixel-for-pixel across the
   header, the hero, every homepage section, and the footer.
   ========================================================================== */
:root {
    --container-max: 1560px;
    --container-pad: 20px;
    --container-inner: calc(var(--container-max) - (var(--container-pad) * 2)); /* 1520px */
}

/* The reusable utility class, exactly as specified */
.container-page {
    margin: 0 auto;
    max-width: 1560px;
    padding-inline: 20px;
}

/* --- Header bands: 20px gutters on the band, 1520px centred content ------- */
.site-header .top,
.site-header .btm {
    padding-inline: var(--container-pad);
}
.site-header .top > .inner,
.site-header .btm > .inner {
    max-width: var(--container-inner);
    margin-inline: auto;
}

/* --- Homepage sections (modern CSS-grid layout system) ------------------- */
/* Retarget the grid's own width variables so content aligns to the shared
   column while full-bleed backgrounds still span edge-to-edge. */
.site-grid,
.site-grid-full {
    --grid--max-width: var(--container-inner);
    --grid--outer: clamp(
        var(--container-pad),
        50vw,
        (100% - var(--grid--max-width)) / 2
    );
}

/* --- Non-grid homepage blocks: use the same 20px page gutter instead of the
   theme's variable --space, and drop the narrower 1188px inner cap so the
   content column aligns with every other section. The contact block is excluded
   from the wide-inner rule — it is a centered 900px card (see the shared
   ".block-contact" component below) that must keep its own width. --------- */
body.home .block-acf:not(.block-contact) > .inner.w-max-1188px {
    max-width: var(--container-inner);
}

/* ==========================================================================
   Small-screen hardening — full responsiveness down to 320px
   --------------------------------------------------------------------------
   The front-page list sections (How We Help, Who We Serve) use
   `grid-template-columns: repeat(auto-fill, minmax(27.5rem, 1fr))`. 27.5rem is
   a fixed floor, so on viewports narrower than it the single column kept that
   width and overflowed the screen, clipping the right side of each row's text
   (first visible at ≤~480px, worst at 320px). Flooring the track at
   `min(27.5rem, 100%)` lets it collapse to one full-width column on small
   screens while preserving the original 2-column layout wherever there's room
   (≥27.5rem). This also lets longer French strings wrap instead of being cut.
   ========================================================================== */
.block-front-page .loop-list,
.how-we-help .loop-list,
.who-we-serve .loop-list {
    grid-template-columns: repeat(auto-fill, minmax(min(27.5rem, 100%), 1fr));
}

/* What We Do cards use minmax(18.75rem, 1fr); apply the same floor so the
   grid can never force a card wider than the viewport on small phones. */
.what-we-do .loop-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(18.75rem, 100%), 1fr));
}

/* ==========================================================================
   HOMEPAGE DESIGN SYSTEM  (responsive — applies at every viewport)
   --------------------------------------------------------------------------
   Consolidates the earlier desktop-only passes into ONE token-driven,
   fully-responsive layer so the page reads the same from 320px to 1920px with
   no hard jump at the old 1100px boundary. Tokens drive spacing, radius,
   shadow and motion; everything visual is scoped to body.home so other pages
   and shared components are untouched. The only part still gated at ≥1100px is
   genuine multi-column structure (the What We Do grid + hero-gutter align),
   which has no meaning once the grid collapses on tablet/mobile.
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------- */
:root {
    --hp-section-py: clamp(2.5rem, 5vw, 4rem);   /* 40 → 64px section rhythm   */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-xs: 0 1px 3px rgba(0, 27, 40, 0.07);
    --shadow-sm: 0 4px 14px rgba(0, 27, 40, 0.10);
    --shadow-md: 0 12px 28px rgba(0, 79, 113, 0.15);
    --shadow-lg: 0 18px 40px rgba(0, 79, 113, 0.18);
    /* Soft, mostly-downward shadow + crisp hairline to detach the sticky header
       from the (often white) section directly below it. */
    --shadow-header: 0 6px 16px -8px rgba(0, 27, 40, 0.14), 0 1px 0 rgba(0, 27, 40, 0.05);
    --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
    --t-fast: 0.15s var(--ease);
    --t: 0.25s var(--ease);
    --t-slow: 0.4s var(--ease);
}

/* --- 1. Unified, responsive section rhythm (all breakpoints) -------------
   (The contact block gets this same rhythm from the shared ".block-contact"
   component below, so it applies on every page — not just the homepage.) */
body.home .block-what-we-do,
body.home .block-how-we-help,
body.home .block-who-we-serve,
body.home .block-latest-news {
    padding-top: var(--hp-section-py) !important;
    padding-bottom: var(--hp-section-py) !important;
}
/* Hero: fluid internal padding; its ≈66vh min-height still governs height. */
body.home .intro-full > .section-content {
    padding-top: clamp(2rem, 4vw, 3rem) !important;
    padding-bottom: clamp(2rem, 4vw, 3rem) !important;
}
/* Tighten the gap beneath each section intro before its content. */
body.home .block-front-page .section-text.mt-5 {
    margin-top: 0.75rem;
}

/* --- 2. Fluid type scale & hierarchy (all breakpoints) ------------------- */
/* Hero <h1> leads; section <h2>s sit clearly below it. Fluid so there's no
   hard step at the old 1100px line. Scoped to home (other pages keep theirs). */
body.home .intro-full h1.section-title {
    font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.125rem);   /* ~30 → 50px */
    line-height: 1.1;
}
body.home h2.section-title {
    font-size: clamp(1.6rem, 1.05rem + 1.9vw, 2.5rem);    /* ~26 → 40px */
    line-height: 1.15;
}
body.home .section-intro .section-eyebrow {
    font-size: 12px;
}
/* Consistent list-link title weight across the two list sections. */
body.home .how-we-help .item-title a,
body.home .who-we-serve .item-title a {
    font-weight: 600;
}

/* What We Do card descriptions: use the default body size (16px / 1rem) instead
   of core's small 0.8125rem (13px), so they match the How We Help / Who We Serve
   descriptions and read consistently. Overrides
   `:where(.block-front-page) :where(.loop-grid) .single .description`. */
body.home .block-front-page .loop-grid .single .description {
    font-size: 1rem;
}

/* Latest News post excerpt: use the default body size (16px) instead of the
   small `.text-sm` so it matches the other card/description text. */
body.home .block-latest-news p.excerpt.text-sm {
    font-size: 1rem;
}

/* Clamp each card's heading and description to two lines so the cards stay
   uniform (overflow is trimmed with an ellipsis). */
body.home .block-latest-news .single-post .content h3.title,
body.home .block-latest-news .single-post .content p.excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
            line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Meta row — match the Latest Posts layout exactly: Read more (left) · date
   (centred, flex-grows to fill) · category icon (pushed to the right). On the
   Latest page the date `<p>` grows via `#listing .single p { flex-grow: 1 }`
   with `text-align: center`; replicate that here (drop the column gap so the
   grow provides the spacing). */
body.home .block-latest-news .single-post .meta {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
            column-gap: 0;
}
body.home .block-latest-news .single-post .meta .date {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    text-align: center;
}

/* --- 3. Cards: consistent radius + depth + hover (all breakpoints) ------- */
/* (What We Do card radius/base-shadow live on its own .inner rule above so the
   existing hover keeps winning; here we round + lift the Latest News posts.) */
body.home .block-latest-news .single-post .content-wrap-div {
    border-radius: var(--radius-md);
    overflow: hidden;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition: -webkit-transform var(--t);
    transition: transform var(--t);
}
body.home .block-latest-news .single-post .image {
    overflow: hidden;
}
body.home .block-latest-news .single-post .image img {
    height: 330px;      /* match the Latest page card image (was 250px) */
    -webkit-transition: -webkit-transform var(--t-slow);
    transition: transform var(--t-slow);
}
@media (hover: hover) and (pointer: fine) {
    body.home .block-latest-news .single-post:hover .content-wrap-div {
        -webkit-transform: translateY(-5px);
                transform: translateY(-5px);
        -webkit-box-shadow: none;
                box-shadow: none;
    }
    body.home .block-latest-news .single-post:hover .image img {
        -webkit-transform: scale(1.05);
                transform: scale(1.05);
    }
}
@media (prefers-reduced-motion: reduce) {
    body.home .block-latest-news .single-post .content-wrap-div,
    body.home .block-latest-news .single-post .image img {
        -webkit-transition: none;
        transition: none;
    }
    body.home .block-latest-news .single-post:hover .content-wrap-div,
    body.home .block-latest-news .single-post:hover .image img {
        -webkit-transform: none;
                transform: none;
    }
}

/* --- 4. Buttons: shared pill radius + larger label + pressed feedback ----- */
body.home .btn {
    border-radius: 999px;
    font-size: 14px;                 /* was 11px */
    font-weight: normal;             /* was 700 */
    -webkit-transition: background-color var(--t), color var(--t), -webkit-box-shadow var(--t), -webkit-transform var(--t-fast);
    transition: background-color var(--t), color var(--t), box-shadow var(--t), transform var(--t-fast);
}
body.home .btn:active {
    -webkit-transform: translateY(1px);
            transform: translateY(1px);
}
body.home .btn.btn-scroll:active {
    -webkit-transform: none;
            transform: none;
}

/* Smaller 12px label for the in-card buttons — Latest News "Read More" (inside
   each slide) and the What We Do cards ("Learn More" / "Get Started") — so the
   compact card CTAs read lighter than the primary page buttons (14px). */
body.home .block-latest-news .single-post .btn,
body.home .what-we-do .loop-grid .single .btn {
    font-size: 12px;
}

/* ==========================================================================
   SHARED CONTACT SECTION  —  ".block-contact"  ("How Can We Help You?")
   --------------------------------------------------------------------------
   One reusable component, keyed on the block's own `.block-contact` class, so
   the SAME design renders everywhere the acf/contact block is used — currently
   the Home, Contact, Asset-Based Lending and Equipment Financing pages. Edit
   here once and every page updates together (no per-page duplication). The
   "Let's Talk" partnership uses a different block (acf/contact-form) and is not
   affected. All visual only — the Gravity Form (id 6), its fields and handlers
   are untouched.
   ========================================================================== */

/* Section rhythm + page gutter (matches the homepage section cadence). */
.block-contact {
    padding-top: var(--hp-section-py) !important;
    padding-bottom: var(--hp-section-py) !important;
    padding-inline: var(--container-pad);
}

/* Contact-form Submit → brand primary button (navy → gold on hover), matching
   the site's other CTAs. GF/legacy CSS defaults `.gform_button` to pale cyan
   (`.gform_wrapper.gravity-theme .gform_button`, 0,3,0 + !important); this rule
   matches that specificity and, loading later, wins. */
.block-contact .gform_wrapper .gform_button {
    cursor: pointer;
    background-color: var(--color-primary) !important;   /* beats core's cyan !important */
    color: #ffffff !important;
    font-family: urbane, sans-serif; /* match the site's brand buttons (native
                                        <button> otherwise falls back to sans-serif) */
    border-radius: 999px;
    font-size: 14px;                 /* match the .btn label size; em-based padding &
                                        line-height scale the whole button up */
    font-weight: normal;             /* match .btn (was 700) */
    -webkit-transition: background-color var(--t), color var(--t), -webkit-box-shadow var(--t), -webkit-transform var(--t-fast);
    transition: background-color var(--t), color var(--t), box-shadow var(--t), transform var(--t-fast);
}
.block-contact .gform_wrapper .gform_button:hover,
.block-contact .gform_wrapper .gform_button:focus-visible {
    background-color: var(--color-secondary) !important;
    color: var(--color-on-secondary) !important;
}
.block-contact .gform_wrapper .gform_button:active {
    -webkit-transform: translateY(1px);
            transform: translateY(1px);
}

/* --- 5. Contact form inputs: consistent radius + visible focus -----------
   The fields were borderless white boxes that only read against the old gray
   band; now that the form sits on a white card they need a real border to stay
   visible. GF's gravity-theme zeroes the border, so it takes !important. */
.block-contact .gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input.large, select, textarea) {
    border: 1px solid #d7dde1 !important;
    border-radius: var(--radius-sm);
    background-color: #ffffff !important;
    -webkit-transition: border-color var(--t-fast), -webkit-box-shadow var(--t-fast);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
/* Message textarea: fixed 100px height. */
.block-contact #gform_fields_6 textarea {
    height: 100px;
}
/* Visible, branded keyboard focus on form controls. GF's gravity-theme strips
   the border/box-shadow on these inputs, so a plain box-shadow ring gets
   overridden; a real `outline` (which GF does not touch) reliably wins and is
   the most accessible indicator. Applied on :focus so it shows for mouse and
   keyboard alike on text controls. */
.block-contact .gform_wrapper :is(input, select, textarea):focus {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
    border-color: var(--color-primary);
}

/* Hide the Gravity Forms validation-error summary banner (the "There was a
   problem with your submission" box). Per-field inline messages still show. */
.block-contact .gform_wrapper .gform_validation_errors {
    display: none !important;
}
/* Validation messages: flat look — transparent background + red text (drops GF's
   boxed pink background/border). Applies to the inline per-field messages that
   still display (and the summary, were it shown). */
.block-contact .gform_wrapper .gfield_validation_message,
.block-contact .gform_wrapper .gform_validation_errors {
    background: transparent !important;
    color: #cc0000 !important;
    border: none !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
}
.block-contact .gform_wrapper .gfield_validation_message {
    padding-left: 0 !important;
}
/* Hide the "UTM Information" section field (form 6). */
.block-contact #field_6_111 {
    display: none !important;
}

/* --- 7. Disabled controls: consistent dimmed, non-interactive look -------- */
body.home :is(.btn, button, input, select, textarea):disabled,
body.home :is(.btn, button)[disabled],
body.home .btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transform: none;
            transform: none;
}

/* --- 8. "How Can We Help You?" — constrained, centered contact card --------
   A focused, modern contact block: the whole thing is capped at 900px and
   centred on the page; the heading and the submit button are centred while the
   form fields keep their normal left-aligned, two-up grid for readability.
   The wrapper around the heading + form is lifted into a white card (soft
   shadow, rounded corners, generous padding) so it reads as one tidy panel
   floating on the section's gray band. Fully responsive — on viewports below
   ~940px the 900px cap yields to the section's side padding. ---------------- */
.block-contact > .inner.w-max-1188px {
    max-width: 900px;
    margin-inline: auto;
    background-color: #ffffff;
    border-radius: var(--radius-lg);
    -webkit-box-shadow: var(--shadow-md);
            box-shadow: var(--shadow-md);
    padding: clamp(1.75rem, 1rem + 3vw, 3.25rem);
}
/* Centre the heading + the "indicates required fields" note as a tidy header. */
.block-contact .section-title {
    text-align: center;
    margin-bottom: 0.75rem;
}
.block-contact .gform_required_legend {
    text-align: center;
}
/* Centre the submit button beneath the form, with balanced spacing above it. */
.block-contact .gform_wrapper .gform_footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 2rem;
}

/* --- 6. Desktop structural layout (≥1100px: real multi-column only) ------ */
@media (min-width: 1100px) {
    /* (The promo + service-card inner layouts are the centered flex-column rules
       defined above; the promo's column span is column-count-aware — see the
       3-col vs 4-col rules above — so it never leaves an empty trailing slot.) */

    /* Align the hero text to the shared container gutter (matches every section). */
    body.home .intro-full > .section-content {
        grid-column: 1 / -1;
        max-width: var(--container-max);
        margin-inline: auto;
        padding-inline: var(--container-pad);
        width: 100%;
    }
}

/* ==========================================================================
   Site-wide: text-wrap: balance → text-wrap: auto
   --------------------------------------------------------------------------
   Overrides every `text-wrap: balance` declaration from core.css so headings,
   intros, descriptions and the like wrap naturally (greedily filling each line)
   instead of being balanced into short, ragged lines. Done here in the
   last-loaded override layer rather than editing core.css. Selectors mirror
   core's; the `:where()` wrappers are dropped so these win on specificity and
   source order. Applied site-wide (not homepage-scoped) per request, including
   the rules core sets only inside media queries (auto is the natural default
   outside those widths, so applying it unconditionally is harmless).
   ========================================================================== */
#pi_tracking_opt_in_div,
#pi_tracking_opt_in_div[style],
.intro-full .section-title,
.block-front-page .section-intro .text,
.block-front-page .loop-grid .single .description,
.block-front-page:has(.loop-list) .item-title,
.block-eligibility .single-item .text,
.block-testimonial p {
    text-wrap: auto;
}

/* ==========================================================================
   Tablet/mobile fixes (homepage)
   ========================================================================== */

/* Who We Serve: at <1000px the section's grid left a ~36px gap before the
   content (its content column sat after empty tracks/gaps), so the intro and
   list were pushed right of the 20px gutter while the right edge stayed put —
   an asymmetric indent. Span the section items across the full grid so they
   align to the same gutter as every other section. */
@media only screen and (max-width: 999.98px) {
    body.home .block-who-we-serve .section-intro,
    body.home .block-who-we-serve .section-content {
        grid-column: 1 / -1;
    }
}

/* Latest News: below the desktop header layout the slider's prev/next arrows
   (.swiper-navigation) were switched to position:absolute and dropped to the
   bottom of the section, overlapping (and getting clipped by) the card. Keep
   them in normal flow so they stay in the header's .actions row (which wraps if
   needed) next to "View All", instead of floating over the card. */
@media only screen and (max-width: 959.98px) {
    /* 768–960px: keep the prev/next arrows in the header flow instead of the
       absolute-positioned overlap over the card. */
    body.home .block-latest-news .swiper-navigation {
        position: static !important;
    }
    /* Keep button labels on one line (tighter header/cards would wrap them); the
       header flex-wraps the whole .actions group if it runs out of room. */
    body.home .block-latest-news .actions .btn,
    body.home .block-latest-news .single-post .meta .btn {
        white-space: nowrap;
    }
}
/* Below 768px: restack the Latest News block vertically so it reads
   title → slider → "View All" button (centered) → prev/next arrows (bottom).
   The section is a .site-grid whose `.inner` is display:contents, so its
   header/swiper are the grid items. We additionally flatten the <header> and
   its .actions with display:contents so the title, slider, View All and arrows
   all become orderable grid items in the content column, then reorder them.
   (We must NOT turn `.inner` into a flex box — that breaks the grid's
   display:contents and makes it overflow to the 1520px content width.) */
@media only screen and (max-width: 767.98px) {
    body.home .block-latest-news header,
    body.home .block-latest-news header .actions {
        display: contents;
    }
    /* Title at the very top, centered */
    body.home .block-latest-news .section-title {
        -webkit-box-ordinal-group: 1;
            -ms-flex-order: 0;
                order: 0;
        text-align: center;
    }
    /* Slider directly under the title */
    body.home .block-latest-news .swiper {
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
    }
    /* Prev/next arrows below the slider, centered */
    body.home .block-latest-news .swiper-navigation {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        position: static !important;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -ms-flex-item-align: center;
            align-self: center;
        -ms-grid-column-align: center;
            justify-self: center;
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
        margin-top: 1.5rem;
    }
    /* "View All" button at the very bottom, centered */
    body.home .block-latest-news .actions > .btn {
        -webkit-box-ordinal-group: 4;
            -ms-flex-order: 3;
                order: 3;
        -ms-flex-item-align: center;
            align-self: center;
        -ms-grid-column-align: center;
            justify-self: center;
        margin-top: 1rem;
    }
}

/* ==========================================================================
   Search overlay (#site-search) — modern, clean redesign (UI only)
   --------------------------------------------------------------------------
   Restyles the search dialog: a prominent rounded search field with an inline
   magnifying-glass icon, a soft focus ring, a refined circular close button,
   and a cleaner heading. Markup, logic and the search behaviour are unchanged.
   ========================================================================== */

/* Heading */
dialog#site-search header .title {
    font-weight: 300;
    letter-spacing: 0.01em;
}

/* Close button → clean circular control (soft gray → navy on hover) */
dialog#site-search header .close-dialog {
    width: 2.75rem;
    height: 2.75rem;
    background-color: #eef1f3 !important;
    color: var(--color-primary) !important;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease, -webkit-transform 0.25s ease;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s ease;
}
dialog#site-search header .close-dialog:hover,
dialog#site-search header .close-dialog:focus-visible {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
}

/* Search field → modern rounded field with inline icon + soft shadow */
dialog#site-search form.site-searchform .search-input-wrapper {
    background-color: #ffffff !important;
    border: 1px solid #dfe3e6;
    border-radius: 999px;
    -webkit-box-shadow: 0 6px 20px rgba(0, 27, 40, 0.07);
            box-shadow: 0 6px 20px rgba(0, 27, 40, 0.07);
    padding-left: 3.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23004f71' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 1.35rem center;
    background-size: 1.3rem 1.3rem;
    -webkit-transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}
dialog#site-search form.site-searchform .search-input-wrapper:focus-within {
    outline: none !important;
    border-color: var(--color-primary);
    -webkit-box-shadow: 0 0 0 4px rgba(0, 79, 113, 0.14);
            box-shadow: 0 0 0 4px rgba(0, 79, 113, 0.14);
}
dialog#site-search form.site-searchform .search-input {
    padding: 1.05rem 0.5rem;
    font-size: 1.125rem;
    font-weight: 400;
}
/* Clear (×) button: subtle, fades to navy on hover */
dialog#site-search form.site-searchform .search-input-button {
    color: #8a9499;
    margin-right: 0.75rem;
    border-radius: 999px;
    -webkit-transition: color 0.2s ease, background-color 0.2s ease;
    transition: color 0.2s ease, background-color 0.2s ease;
}
dialog#site-search form.site-searchform .search-input-button:hover {
    color: var(--color-primary);
}

/* ==========================================================================
   Search overlay (#site-search) — centered glassmorphism modal
   --------------------------------------------------------------------------
   Turns the top-anchored search panel into a centered modal card floating over
   a soft, blurred backdrop, with smooth open/close animations and the page
   behind locked from scrolling while it's open. Pure CSS over the existing
   <dialog> + showModal() markup — search input, suggestions, results, the clear
   and close controls and all handlers are unchanged.
   ========================================================================== */

/* Lock the background from scrolling while the modal is open (restored on close).
   scrollbar-gutter:stable keeps the scrollbar's space reserved while hidden, so the
   page width doesn't change on open/close — otherwise the page jumps ~15px behind
   the modal as it animates out. */
html:has(dialog#site-search[open]) {
    overflow: hidden;
    scrollbar-gutter: stable;
}

/* Full-viewport, transparent; centres the panel both axes. Fades in/out. */
dialog#site-search {
    inset: 0 !important;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: clamp(1rem, 4vh, 4rem) 1rem;
    background: transparent;
    border: 0;
    /* Centring lives on the base rule (not [open]) so it persists while the
       dialog animates out — otherwise the panel snaps to the top-left corner
       the instant `open` is removed and then fades from there. */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    opacity: 0;
    -webkit-transition: opacity 0.28s ease;
    transition: opacity 0.28s ease, overlay 0.28s ease allow-discrete, display 0.28s ease allow-discrete;
}
dialog#site-search[open] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    opacity: 1;
}
@starting-style {
    dialog#site-search[open] {
        opacity: 0;
    }
}

/* Soft, blurred glassmorphism backdrop. */
dialog#site-search::backdrop {
    background: rgba(13, 30, 45, 0.28);
    -webkit-backdrop-filter: blur(9px) saturate(1.05);
            backdrop-filter: blur(9px) saturate(1.05);
    opacity: 1;
    -webkit-transition: opacity 0.28s ease;
    transition: opacity 0.28s ease, overlay 0.28s ease allow-discrete, display 0.28s ease allow-discrete;
}
@starting-style {
    dialog#site-search[open]::backdrop {
        opacity: 0;
    }
}

/* The centred panel — rounded, soft-shadowed card that scales in. */
dialog#site-search > .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: min(640px, 100%);
    height: auto;
    max-height: 85vh;
    background: #ffffff;
    border-radius: 20px;
    -webkit-box-shadow: 0 30px 80px rgba(0, 27, 40, 0.35);
            box-shadow: 0 30px 80px rgba(0, 27, 40, 0.35);
    overflow: hidden;
    -webkit-transform: scale(0.96);
            transform: scale(0.96);
    -webkit-transition: -webkit-transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
dialog#site-search[open] > .inner {
    -webkit-transform: scale(1);
            transform: scale(1);
}
@starting-style {
    dialog#site-search[open] > .inner {
        -webkit-transform: scale(0.96);
                transform: scale(0.96);
    }
}

/* Panel header (heading + close + form) sits at the top, content-sized. */
dialog#site-search .header-container {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}
dialog#site-search header {
    padding: 1.75rem 1.75rem 1.25rem;
}
dialog#site-search header .title {
    font-size: 1.6rem;
    margin: 0;
}

/* Results scroll within the panel (not the whole viewport).
   No visible results yet → the container stays flush so the panel is compact. */
dialog#site-search .search-results {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    overflow-y: auto;
    max-height: none;
    padding: 0 1.75rem;
}
dialog#site-search .search-results:has(article),
dialog#site-search .search-results:has(li),
dialog#site-search .search-results:has(a) {
    padding: 0.25rem 1.75rem 1.5rem;
}

/* ==========================================================================
   INNER PAGES DESIGN SYSTEM   (body:not(.home))
   --------------------------------------------------------------------------
   Propagates the finalized homepage look — navy/gold palette, pill buttons,
   rounded cards with soft shadows, framed images, consistent heading colour
   and section rhythm — to every interior page: service / solution / industry
   singles and the Solutions / Services / Expertise / Company / About landings,
   via their shared template parts (#intro hero, .columns rows, .color-bg
   bands, .single-* cards, .new-tabs-service & .accordion-item accordions,
   #faqs, #listing). Desktop-first; visual only (no markup / logic changes).
   Reuses the global :root tokens (--color-*, --radius-*, --shadow-*, --t*).
   ========================================================================== */

/* ---- 1. Headings: brand-navy + urbane, consistent with the homepage ------ */
body:not(.home) main :is(h1, h2, h3, h4, h5, .hlo),
body:not(.home) #intro :is(h1, h2, h3, h4, h5, .hlo) {
    color: var(--color-primary);
    font-family: urbane, sans-serif;
}
/* Page hero headline → homepage H1 scale. */
body:not(.home) #intro h1,
body:not(.home) #intro .hlo,
body:not(.home) main > section:first-of-type .content h1 {
    font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.125rem);
    line-height: 1.12;
    font-weight: 300;
}
/* Keep headings legible on dark / brand-colour bands. */
body:not(.home) main :is(.color-bg.blue, .color-bg.dark-gray, .bg-blue-1, .bg-blue-2, .text-white) :is(h1, h2, h3, h4, h5) {
    color: inherit;
}

/* ---- 2. Buttons: kill the pale-cyan CTA, use the brand navy→gold pill ----
   `.bg-blue-1/.bg-blue-2` and the `.light.blue` variant all render #6ad1e3
   cyan buttons (apply CTAs, Load More, active filter pill, search). */
.btn.bg-blue-1,
.btn.bg-blue-2,
.btn.light.blue {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    border-radius: 999px;
    -webkit-transition: background-color var(--t), color var(--t);
            transition: background-color var(--t), color var(--t);
}
.btn.bg-blue-1:hover,
.btn.bg-blue-1:focus-visible,
.btn.bg-blue-2:hover,
.btn.bg-blue-2:focus-visible,
.btn.light.blue:hover,
.btn.light.blue:focus-visible {
    background-color: var(--color-secondary) !important;
    color: var(--color-on-secondary) !important;
}
/* The product-tab "Apply Now" link is a bare <a> — make it a real brand pill. */
body:not(.home) .new-service-apply a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: #ffffff !important;
    border-radius: 999px;
    padding: 0.7rem 2rem !important;
    font-weight: 600;
    text-decoration: none;
    -webkit-transition: background-color var(--t), color var(--t);
            transition: background-color var(--t), color var(--t);
}
body:not(.home) .new-service-apply a:hover,
body:not(.home) .new-service-apply a:focus-visible {
    background-color: var(--color-secondary);
    color: var(--color-on-secondary) !important;
}
body:not(.home) .new-service-apply {
    justify-content: center;
    margin-top: 1.5rem;
}

/* ---- 3. Listing / related cards (service|solution|industry|post|person) ---
   Match the homepage What-We-Do cards: white panel, rounded, soft shadow,
   lift on hover. (Card inner is `.inner.color-bg.light-gray` by default.) */
body:not(.home) :is(.single-service, .single-solution, .single-industry, .single-post, .single-person, .single-report) > .inner {
    background-color: #ffffff !important;
    border: 1px solid #e7ebee;
    border-radius: var(--radius-md);
    -webkit-box-shadow: var(--shadow-xs);
            box-shadow: var(--shadow-xs);
    overflow: hidden;
    height: 100%;
    -webkit-transition: -webkit-transform var(--t), -webkit-box-shadow var(--t);
            transition: transform var(--t), box-shadow var(--t);
}
@media (hover: hover) {
    body:not(.home) :is(.single-service, .single-solution, .single-industry, .single-post, .single-person, .single-report):hover > .inner {
        -webkit-transform: translateY(-4px);
                transform: translateY(-4px);
        -webkit-box-shadow: var(--shadow-md);
                box-shadow: var(--shadow-md);
    }
}
body:not(.home) :is(.single-service, .single-solution, .single-industry) .content h3 {
    font-size: 1.2rem;
    font-weight: 600;
}
body:not(.home) :is(.single-service, .single-solution, .single-industry) .content p {
    color: #000000;
    line-height: 1.65;
}
body:not(.home) :is(.single-service, .single-solution, .single-industry) .image svg {
    width: 100px;
    height: 100px;
}

/* ---- 4. Accordions ------------------------------------------------------- */
/* Modern product tabs (.new-tabs-service): round the stacked items + shadow. */
body:not(.home) .new-tabs-service .new-service-item {
    border-radius: var(--radius-md);
    -webkit-box-shadow: var(--shadow-xs);
            box-shadow: var(--shadow-xs);
    border: 1px solid #e7ebee;
}
body:not(.home) .new-tabs-service .new-service-btn {
    border-radius: var(--radius-md);
}
body:not(.home) .new-tabs-service .new-service-item:has(.new-service-panel.is-open) .new-service-btn {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
/* Legacy FAQ / accordion items (#faqs, .accordion-item). */
body:not(.home) #faqs .accordion-item,
body:not(.home) .accordion-item:not(.single) {
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* ---- 4b. Product tabs (.new-tabs-service) — BASE layout -----------------
   Migrated out of the inline <style> that used to live in
   parts/section/tabs.php (About / Careers / Culture share that part). Only the
   brand navy (#004f71) and the button text/icon white were swapped for the
   --color-primary / --color-on-primary tokens; every size, spacing and
   transition is byte-for-byte what the inline block emitted, so the accordion
   renders identically. The `body:not(.home)` refinements above and the
   `body.about-template` overrides further down still layer on top of these
   base rules exactly as they did over the inline block. */
.new-service-apply {
    display: flex;
    max-width: 1188px;
    margin: 0 auto;
    padding: 0 18px;
    align-items: center;
}
.new-service-apply a {
    font-size: 18px;
    width: fit-content;
    padding: 0.5rem 1rem;
}
.new-tabs-service {
    margin-top: 20px;
}
.new-tabs-service #tabs.tabs.large > .inner {
    max-width: 1188px;
    margin: 0 auto;
}
.new-tabs-service #tabs.tabs.large > .inner > .inner {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.new-tabs-service .new-service-item {
    overflow: hidden;
    background: #fff;
}
.new-tabs-service .new-service-item > .inner {
    display: flex;
    flex-direction: column;
}
.new-tabs-service .new-service-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
    padding: 1rem !important;
    background: var(--color-primary) !important;
    border: none;
    cursor: pointer;
    text-align: left;
}
.new-tabs-service .new-service-btn h3 {
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--color-on-primary);
    line-height: 1.4;
    flex: 1;
    transition: color 0.2s;
}
.new-tabs-service .new-service-btn[aria-expanded="true"] h3 {
    color: var(--color-on-primary);
}
.new-tabs-service .new-service-icon {
    color: var(--color-on-primary);
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.new-tabs-service .new-service-line {
    position: absolute;
    width: 12px;
    height: 1.5px;
    background: var(--color-on-primary);
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.new-tabs-service .new-service-line-02 {
    transform: rotate(90deg);
}
.new-tabs-service .new-service-btn[aria-expanded="true"] .new-service-line-02 {
    transform: rotate(0deg);
    opacity: 0;
}
.new-tabs-service .new-service-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #efeff0;
}
.new-tabs-service .new-service-panel.is-open {
    grid-template-rows: 1fr;
}
.new-tabs-service .new-service-panel > .inner {
    overflow: hidden;
    min-height: 0;
    padding: 0 1.5rem;
    transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.new-tabs-service .new-service-panel.is-open > .inner {
    padding: 0 1.5rem 1.5rem;
}
.new-tabs-service .new-service-intro {
    font-size: 1rem;
    font-weight: 500;
    color: #2c2c2a;
    margin-bottom: 0.875rem;
    line-height: 1.5;
    padding-top: 1.25rem;
}
.new-tabs-service .new-service-panel .content {
    font-size: 0.9375rem;
    color: #5f5e5a;
    line-height: 1.75;
}
.new-tabs-service .new-service-panel .content p {
    margin-bottom: 0.625rem;
}
.new-tabs-service .new-service-panel .new-service-intro,
.new-tabs-service .new-service-panel .content {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
}
.new-tabs-service .new-service-panel.is-open .new-service-intro,
.new-tabs-service .new-service-panel.is-open .content {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
}
@media (max-width: 600px) {
    .new-tabs-service .new-service-btn {
        padding: 1rem 1.125rem !important;
    }
    .new-tabs-service .new-service-panel > .inner {
        padding: 0 1.125rem;
    }
    .new-tabs-service .new-service-panel.is-open > .inner {
        padding: 0 1.125rem 1.125rem;
    }
}

/* ---- 5. Two-column rows (.columns) + heroes: frame the imagery ----------- */
body:not(.home) :is(main, #intro) .columns .image .inner img,
body:not(.home) :is(main, #intro) .columns .image .inner picture,
body:not(.home) #intro.columns .image .inner img,
body:not(.home) #intro.columns .image .inner picture {
    border-radius: var(--radius-lg);
    overflow: hidden;
}
body:not(.home) :is(main, #intro) .columns .image .inner img,
body:not(.home) #intro.columns .image .inner img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- 6. Quote block ------------------------------------------------------ */
body:not(.home) #quote blockquote {
    font-size: clamp(1.2rem, 0.9rem + 1vw, 1.6rem);
    line-height: 1.5;
    color: var(--color-primary);
}
body:not(.home) #quote blockquote footer {
    font-size: 1rem;
    color: #000000;
    margin-top: 1rem;
}

/* ---- 7. Section rhythm: even, homepage-like vertical cadence ------------- */
body:not(.home) main > section {
    padding-top: clamp(2.75rem, 5vw, 4.5rem);
    padding-bottom: clamp(2.75rem, 5vw, 4.5rem);
}

/* ---- 8. Archive grids (news / team / filtered listings) ------------------
   Card chrome is handled by section 3 (.single-post / .single-person). Here:
   even grid gaps, a sensible filter bar, and brand-navy filter pills. */
body:not(.home) #listing .wrap {
    gap: 1.5rem;
}
/* Card copy: a consistent default size (legacy drops it to 14px at breakpoints). */
#listing .single p {
    font-size: 1rem;
}
body:not(.home) #listing .single .content .inner {
    padding: 1.25rem 1.35rem 1.5rem;
}
body:not(.home) #listing .single-post .content h3,
body:not(.home) #listing .single-person .content h3 {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
}
body:not(.home) #listing .single-person .content h6 {
    color: #000000;
    font-weight: 500;
}
/* Person "Read More" overlay button: round to match the card. */
body:not(.home) #listing .single-person .btn {
    border-radius: var(--radius-md) !important;
}

/* ---- Team cards: equal padding + centred text; the name defaults to the body
   colour and turns brand navy when the card is hovered. */
body.archive-person #listing .single-person .content > .inner {
    padding: 1.5rem !important;
    text-align: center;
}
body.archive-person #listing .single-person .content h3 {
    color: #000000;
    -webkit-transition: color var(--t);
            transition: color var(--t);
}
@media (hover: hover) {
    body.archive-person #listing .single-person:hover .content h3 {
        color: var(--color-primary);
    }
}
/* Filter bar + pills (archive-filter): brand navy active state, pill shape. */
body:not(.home) .archive-filter .btn,
body:not(.home) .archive-filter label.btn {
    border-radius: 999px !important;
}
body:not(.home) .archive-filter .btn.light.blue,
body:not(.home) .archive-filter .item.active label.btn {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}

/* ---- 9. Article body (single post) — readable measure + tidy rhythm ------
   The Gutenberg body (`#content .wrap`) had no max-width and 100px margins. */
body:not(.home).single-post #content > .inner {
    max-width: var(--container-inner);
    margin-inline: auto;
}
body:not(.home).single-post #content .wrap {
    max-width: 760px;
    margin-inline: auto;
}
body:not(.home).single-post #content .wrap > :first-child {
    margin-block-start: 0 !important;
}
body:not(.home).single-post #content .wrap > :last-child {
    margin-block-end: 0 !important;
}
body:not(.home).single-post #content .wrap :is(p, ul, ol) {
    line-height: 1.75;
    margin-block: 0 1.25rem !important;
}
body:not(.home).single-post #content .wrap h2 {
    font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem) !important;
    line-height: 1.2;
    margin-block: 2.5rem 1rem !important;
}
body:not(.home).single-post #content .wrap h2 strong {
    color: inherit;   /* was pale cyan */
}
body:not(.home).single-post #content .wrap figure.wp-block-image {
    margin-block: 2rem !important;
}
body:not(.home).single-post #content .wrap figure.wp-block-image img {
    border-radius: var(--radius-md);
}
/* Lead paragraph band on the post. */
body:not(.home).single-post #overview .inner {
    max-width: 760px;
    margin-inline: auto;
}
body:not(.home).single-post #overview {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #334049;
}
/* Post hero meta/date: tone down the heading-sized date. */
body:not(.home) #intro .meta.h4 {
    font-size: 0.95rem;
    font-weight: 500;
    color: #5f6b73;
}

/* ---- 10. Team member single -------------------------------------------------
   The person detail page was rebuilt from scratch (premium profile masthead +
   two-column body with a sticky connect card). Its full, self-contained design
   lives in the "TEAM MEMBER DETAIL (single-person)" block at the end of this
   file. (Legacy `.bio` / `#contact` markup no longer exists on this template.) */
/* ---- 11. Shared "#overview" intro band (nearly every interior page) ------ */
body:not(.home) #overview.color-bg {
    background-color: #eef1f3 !important;
}
body:not(.home) #overview .inner {
    max-width: var(--container-inner);
    margin-inline: auto;
}
body:not(.home) #overview .content,
body:not(.home) #overview .section-text {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}
body:not(.home) #overview .section-eyebrow,
body:not(.home) #overview h4 {
    color: var(--color-primary);
}
/* Vertical rhythm inside the overview copy: space consecutive blocks, with a
   larger gap above sub-headings so they read as section breaks (fixes the
   cramped heading/paragraph stacking). */
body:not(.home) #overview .content > * {
    margin-top: 0;
    margin-bottom: 0;
}
body:not(.home) #overview .content > * + * {
    margin-top: 0.75rem;
}
body:not(.home) #overview .content > h2,
body:not(.home) #overview .content > h3,
body:not(.home) #overview .content > h4,
body:not(.home) #overview .content > h5 {
    margin-top: 1.75rem;
}
body:not(.home) #overview .content > :first-child {
    margin-top: 0;
}

/* ---- 12. Report rows + filters (Financial Reports, archives) ------------- */
body:not(.home) .single-report > .inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
}
body:not(.home) .single-report .content h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}
/* Icon-only download button → brand navy circle, gold on hover. */
body:not(.home) .single-report .content a.btn {
    border-radius: 999px !important;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}
/* Outlined filter pills: brand-navy outline, navy text. */
body:not(.home) .archive-filter .btn.outlined,
body:not(.home) .radio.field .btn.outlined {
    border-radius: 999px !important;
    border: 1px solid #c9d3d9 !important;
    background: transparent !important;
    color: var(--color-primary) !important;
}
body:not(.home) .radio.field .item.active label.btn,
body:not(.home) .radio.field label.btn.light.blue {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
}

/* ---- 13. Latest-news / latest-reports swipers on interior pages ----------
   Same cards as the homepage (which is body.home-scoped) — give interior-page
   instances the matching rounded, shadowed, lifting treatment. */
body:not(.home) .block-latest-news .content-wrap-div,
body:not(.home) .block-latest-reports .content-wrap-div {
    border-radius: var(--radius-md);
    overflow: hidden;
    -webkit-box-shadow: var(--shadow-sm);
            box-shadow: var(--shadow-sm);
    -webkit-transition: -webkit-transform var(--t), -webkit-box-shadow var(--t);
            transition: transform var(--t), box-shadow var(--t);
}
@media (hover: hover) {
    body:not(.home) .block-latest-news article:hover .content-wrap-div,
    body:not(.home) .block-latest-reports article:hover .content-wrap-div {
        -webkit-transform: translateY(-4px);
                transform: translateY(-4px);
        -webkit-box-shadow: var(--shadow-md);
                box-shadow: var(--shadow-md);
    }
}
body:not(.home) :is(.block-latest-news, .block-latest-reports) h2.section-title {
    font-size: clamp(1.6rem, 1.05rem + 1.9vw, 2.5rem);
    line-height: 1.15;
}
/* Latest-reports swiper actions row — migrated out of the per-slide inline
   <style> in blocks/posts/latest-reports/single-report.php (which re-emitted
   these two rules once for every report in the swiper). Unchanged. */
.latest-reports .actions {
    align-items: center;
    width: 100%;
    justify-content: end;
}
.latest-reports .actions .swiper-navigation {
    margin: 0px;
    margin-right: 17px;
}

/* ==========================================================================
   CONTACT PAGE polish  (body.page-id-51 / .contact-template)
   --------------------------------------------------------------------------
   The enquiry form already uses the shared ".block-contact" card component and
   the #intro hero inherits the interior-page system. This adds the two
   contact-specific pieces so the page fully matches the homepage: a FRAMED hero
   map (rounded, shadowed, height-balanced with the copy) and modern OFFICE
   CARDS (white, rounded, soft shadow, hover) with a proper "Canada" heading.
   Desktop-first + responsive. Visual only; the map, form and links are intact.
   ========================================================================== */

/* ---- Hero: two equal 50/50 blocks — copy on the left, a framed map filling
   the matching half on the right (both top-aligned). ------------------------- */
body.page-id-51 #intro > .inner {
    -ms-grid-columns: 1fr 1fr !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(1.5rem, 4vw, 4rem) !important;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;           /* match the other page heroes */
}
body.page-id-51 #intro > .inner > .content.left {
    grid-column: 1 / 2 !important;
}
body.page-id-51 #intro > .inner > .image.right {
    grid-column: 2 / 3 !important;
}
/* Map fills its half (drop the core 6/8 portrait aspect). */
body.page-id-51 #intro .image.right > .inner {
    aspect-ratio: auto !important;
}
body.page-id-51 #intro .image.right,
body.page-id-51 #intro .image.right > .inner,
body.page-id-51 #intro .image.right .google-map-container,
body.page-id-51 #intro .image.right .google-map {
    width: 100% !important;
    max-width: none !important;   /* core caps .image > .inner at 600px */
    margin: 0 !important;         /* drop the left offset so it fills the half */
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
}
/* Define the framed height on the column itself (top of the 100%-chain above) so
   the map matches the SAME clamp the other page heroes use — all five line up. */
body.page-id-51 #intro .image.right {
    height: clamp(320px, 26vw, 420px) !important;
}
/* Floor the whole hero row so the map never gets too short when the copy is brief. */
body.page-id-51 #intro > .inner > .content.left {
    min-height: clamp(280px, 22vw, 340px);
}
/* Core's `.columns` layout gives the copy column (and its .inner) intrinsic
   vertical padding (24–32px top & bottom). The map column has none, so that top
   padding pushed the H1 ~64px BELOW the map's top — making the hero's top space
   look twice its bottom space AND dropping the headline below the map edge. Zero
   it so the H1 aligns to the section's own (symmetric) padding and to the map top. */
body.page-id-51 #intro .content.left,
body.page-id-51 #intro .content.left > .inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body.page-id-51 #intro .image.right .google-map-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
    -webkit-box-shadow: var(--shadow-md);
            box-shadow: var(--shadow-md);
    position: relative !important;   /* clear any left/transform offset so the */
    inset: auto !important;          /* map aligns flush to the right gutter   */
    -webkit-transform: none !important;
            transform: none !important;
    margin: 0 !important;
}
body.page-id-51 #intro .image.right .google-map {
    border-radius: var(--radius-lg);
}

/* ---- Office locations ---------------------------------------------------- */
body.page-id-51 .block-locations {
    background-color: #f6f8f9 !important;
    row-gap: 1.5rem;
}
/* "Canada" section heading */
body.page-id-51 .block-locations .parent-location {
    background: transparent !important;
    padding-bottom: 0.25rem;
    text-align: center;
}
body.page-id-51 .block-locations .parent-location .location-title {
    font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem);
    font-weight: 300;
    color: var(--color-primary);
    margin: 0;
    text-align: center;
}
/* Office cards */
body.page-id-51 .single-location.child-location {
    background-color: #ffffff !important;
    border: 1px solid #e7ebee;
    border-radius: var(--radius-md);
    -webkit-box-shadow: var(--shadow-xs);
            box-shadow: var(--shadow-xs);
    padding: 1.75rem !important;
    -webkit-transition: -webkit-transform var(--t), -webkit-box-shadow var(--t);
            transition: transform var(--t), box-shadow var(--t);
}
@media (hover: hover) {
    body.page-id-51 .single-location.child-location:hover {
        -webkit-transform: translateY(-4px);
                transform: translateY(-4px);
        -webkit-box-shadow: var(--shadow-md);
                box-shadow: var(--shadow-md);
    }
}
body.page-id-51 .single-location.child-location h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
}
body.page-id-51 .single-location.child-location .phone {
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--color-primary);
    margin-top: 0;            /* drop the `mt-4` (1.25rem) that doubled the gap
                                under the description paragraph */
    -webkit-transition: color var(--t-fast);
            transition: color var(--t-fast);
}
body.page-id-51 .single-location.child-location .phone:hover,
body.page-id-51 .single-location.child-location .phone:focus-visible {
    color: var(--color-secondary-hover);
}
body.page-id-51 .single-location.child-location address {
    font-style: normal;
    line-height: 1.6;
}
body.page-id-51 .single-location.child-location .actions a {
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    -webkit-transition: color var(--t-fast);
            transition: color var(--t-fast);
}
body.page-id-51 .single-location.child-location .actions a:hover,
body.page-id-51 .single-location.child-location .actions a:focus-visible {
    color: var(--color-secondary-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Responsive: stack the hero (headline first, map second) -------------
   Force a flex column at the two-column breakpoint — core's `.columns` grid
   otherwise misplaces the map into the copy's cell (overlap) between ~768–900px. */
@media (max-width: 900px) {
    body.page-id-51 #intro > .inner {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
            -ms-flex-direction: column !important;
                flex-direction: column !important;
        gap: 1rem;                       /* tighter copy→map spacing when stacked */
    }
    body.page-id-51 #intro .content.left,
    body.page-id-51 #intro .image.right {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        grid-column: auto !important;
        margin: 0 !important;
    }
    /* Stacked: drop the desktop min-height floor (it left a tall empty gap under
       the copy before the map); the copy column's padding is already zeroed
       globally above. Remove the last element's bottom margin so the map sits
       directly below the text. */
    body.page-id-51 #intro .content.left {
        min-height: 0 !important;
    }
    body.page-id-51 #intro .content.left > .inner > :last-child,
    body.page-id-51 #intro .content.left p:last-child {
        margin-bottom: 0 !important;
    }
    body.page-id-51 #intro .content.left { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
    body.page-id-51 #intro .image.right  { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
    body.page-id-51 #intro .image.right,
    body.page-id-51 #intro .image.right > .inner,
    body.page-id-51 #intro .image.right .google-map-container,
    body.page-id-51 #intro .image.right .google-map {
        height: clamp(260px, 50vw, 380px) !important;
    }
}

/* ==========================================================================
   CONTACT PAGE — consistent type scale  (body.page-id-51)
   --------------------------------------------------------------------------
   One hierarchy across the whole page so sizes follow a predictable pattern:
     hero H1 50px  ·  section H2 40px  ·  card H3 20px  ·  body 16px
     eyebrow/section-label 13px caps  ·  field label 12px caps  ·  legend 12px
   Both section headings ("How Can We Help You?" and "Canada") now match the
   homepage H2 (they were 50px and 33.6px). Visual only.
   ========================================================================== */

/* Section headings → homepage H2 scale (one size, below the 50px hero H1). */
body.page-id-51 .block-contact .section-title,
body.page-id-51 .block-locations .parent-location .location-title {
    font-size: clamp(1.6rem, 1.05rem + 1.9vw, 2.5rem) !important;  /* ~26 → 40px */
    line-height: 1.15 !important;
    font-weight: 300;
    color: var(--color-primary);
}

/* Hero lead paragraph: default body size + weight (200); the "click here" link
   reads a touch stronger at 500. */
body.page-id-51 #intro .content.left p {
    font-size: 1rem;           /* default body size */
    line-height: 1.7;
}
/* Inline link ("click here"): navy → gold on hover, matching the site's inline
   links. The `#intro` hero renders OUTSIDE <main> (see header.php), so the global
   `main a:not(.btn):hover` gold rule never reaches it and the base `a { color:
   inherit }` left it with no hover state — hence the "no color change" report. */
body.page-id-51 #intro .content.left p a,
body.page-id-51 #intro .content.left a {
    font-weight: 500;
    color: var(--color-primary);
    -webkit-transition: color var(--t);
            transition: color var(--t);
}
body.page-id-51 #intro .content.left p a:hover,
body.page-id-51 #intro .content.left p a:focus-visible,
body.page-id-51 #intro .content.left a:hover,
body.page-id-51 #intro .content.left a:focus-visible {
    color: var(--color-secondary);
}

/* NOTE: the contact form's sub-section headers (.gsection_title), the section
   divider lines (.gsection border/spacing) and the field labels (.gfield_label)
   intentionally carry NO page-id-51 overrides — they inherit the shared
   ".block-contact" styling so the "How Can We Help You?" form renders IDENTICALLY
   to the Home page version (sub-headers 20px title-case, labels 10px caps, no
   dividers). Keeping them here would make Contact diverge from Home. */

/* Office cards: consistent card scale (H3 20 · phone 17 · body 16). */
body.page-id-51 .single-location.child-location h3 {
    font-size: 1.25rem;                /* 20px */
}
body.page-id-51 .single-location.child-location .phone {
    font-size: 1.0625rem;              /* 17px */
}
body.page-id-51 .single-location.child-location p,
body.page-id-51 .single-location.child-location address,
body.page-id-51 .single-location.child-location .actions a {
    font-size: 1rem !important;        /* 16px (were ~12.4px) */
    line-height: 1.6;
}
body.page-id-51 .single-location.child-location p {
    color: #000000;
}

/* ==========================================================================
   INNER-PAGE CONTAINER ALIGNMENT   (body:not(.home))
   --------------------------------------------------------------------------
   Match the homepage's single content column: 1520px (var(--container-inner))
   centred within a 20px (var(--container-pad)) gutter, so every inner-page
   section's content aligns with the shared header/footer. Core capped id'd
   sections at 1188px with a VARIABLE --space gutter (18–36px) — that left inner
   content ~166px narrower and mis-aligned vs the 1520 header/footer. The modern
   .site-grid sections already retarget to 1520 globally, so this covers the
   legacy id'd sections, the inline-styled product accordion, and the 1188
   utility inners on ACF blocks. Visual only.
   ========================================================================== */
body:not(.home) section:where([id]):not(.block-acf, .site-grid-full, .site-grid) {
    padding-inline: var(--container-pad);
}
body:not(.home) section:where([id]):not(.block-acf, .site-grid-full, .site-grid) > .inner {
    max-width: var(--container-inner) !important;
    margin-inline: auto;
}
/* Product-tab accordion (inline-styled to 1188px) + its "Apply Now" block. */
body:not(.home) .new-tabs-service #tabs.tabs.large > .inner,
body:not(.home) .new-service-apply {
    max-width: var(--container-inner) !important;
    padding: 0;
}
/* ACF blocks still carrying the .w-max-1188px utility (Latest News / Reports
   swipers on interior pages). The contact card stays its intentional 900px. */
body:not(.home) .block-acf:not(.block-contact) > .inner.w-max-1188px {
    max-width: var(--container-inner) !important;
}

/* ==========================================================================
   CONTACT PAGE — consistent section rhythm  (body.page-id-51)
   The #intro hero had zero vertical padding (headline touched the header, map
   touched the form band) and .block-locations used 71px; normalise every
   section to the homepage's --hp-section-py (≈64px) top & bottom.
   ========================================================================== */
body.page-id-51 #intro {
    padding-top: var(--hp-section-py) !important;
    padding-bottom: var(--hp-section-py) !important;
}
body.page-id-51 #intro > .inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body.page-id-51 .block-locations {
    padding-top: var(--hp-section-py) !important;
    padding-bottom: var(--hp-section-py) !important;
}

/* ==========================================================================
   CONTACT PAGE — responsive hardening  (body.page-id-51)  320px → desktop
   --------------------------------------------------------------------------
   1. OFFICE-CARD GRID — deterministic 1 → 2 → 3 columns.
      The cards are children of a `.site-grid` section whose column-count is 1
      below 1000px, and the legacy `.block-locations .child-location` spans key
      off an undefined `--columnCount` var in that context. Net result: cards
      stayed 1-up all the way to 960px (wasted tablet width) and then rendered a
      lop-sided "2 + orphan" between 1000–1100px. Define our own column track so
      the progression is clean and predictable at every width. The "Canada"
      heading (.parent-location) spans the full row; each card resets the legacy
      span. Specificity (0,2,1 / 0,4,0) wins over both the site-grid placement
      rule and the legacy location spans without !important on the template. */
body.page-id-51 .block-locations {
    display: grid;
    grid-template-columns: 1fr;                       /* <750px : 1-up */
    gap: 1.5rem;
    align-items: stretch;                             /* equal-height cards per row */
}
@media (min-width: 750px) {
    body.page-id-51 .block-locations {
        grid-template-columns: repeat(2, minmax(0, 1fr));   /* 750–999px : 2-up */
    }
}
@media (min-width: 1000px) {
    body.page-id-51 .block-locations {
        grid-template-columns: repeat(3, minmax(0, 1fr));   /* ≥1000px : 3-up */
    }
}
body.page-id-51 .block-locations > .parent-location,
body.page-id-51 .block-locations .single-location.parent-location {
    grid-column: 1 / -1 !important;                   /* heading always full width */
}
body.page-id-51 .block-locations .single-location.child-location {
    grid-column: auto !important;                     /* cancel legacy auto/span 4 */
    min-width: 0;                                     /* allow the card to shrink <content */
}
/* In the 2-up band an odd card count leaves a trailing "orphan" alone on the
   last row — centre it across the two columns (kept at single-card width) instead
   of leaving it stranded on the left. The `:last-child:nth-child(even)` guard
   only fires when the last card is genuinely the odd one out (3 cards → the 4th
   DOM child; with an even card count it no-ops and the grid stays full rows). */
@media (min-width: 750px) and (max-width: 999.98px) {
    body.page-id-51 .block-locations .single-location.child-location:last-child:nth-child(even) {
        grid-column: 1 / -1 !important;
        justify-self: center;
        width: calc((100% - 1.5rem) / 2);             /* match a 2-up column width */
        max-width: 100%;
    }
}

/* NOTE: the Gravity Forms sub-field containers (ginput_container_* / ginput_complex)
   intentionally keep their native negative `margin` gutter — the SAME as the Home
   page form — so the fields align identically on both (they extend into the card's
   generous padding, not past the card). Zeroing it here made Contact's fields sit
   ~16px inboard of Home's; left as-is for an exact match. */
/* Belt-and-braces: never let the form grid spill its wrapper. */
body.page-id-51 .block-contact .gform_wrapper,
body.page-id-51 .block-contact .gform_wrapper form,
body.page-id-51 .block-contact .gform_wrapper .gform_body,
body.page-id-51 .block-contact .gform_wrapper .gform_fields {
    max-width: 100%;
    min-width: 0;
}

/* ==========================================================================
   LATEST / NEWS + TEAM ARCHIVE PAGES  (body.blog, body.archive-person)
   --------------------------------------------------------------------------
   The posts index (#intro hero → #filter tab bar → #listing card grid → Load
   More). Brings it in line with the homepage: tightened section rhythm (the
   filter bar + listing each carried a full 72px section pad, stacking into huge
   gaps), interactive filter tabs (pointer + hover), and a responsive tab bar
   that wraps instead of overflowing on mobile. Card chrome is already handled by
   the inner-pages ".single-post" rules above.
   ========================================================================== */

/* ---- Hero: align the headline to symmetric section padding (the .columns copy
   column carries intrinsic 24–32px top/bottom padding that otherwise pushed the
   H1 down and inflated the gap to the tabs — same pattern as the contact hero). */
body:is(.blog, .archive-person) #intro .content.left,
body:is(.blog, .archive-person) #intro .content.left > .inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-align: center;          /* centre the headline above the grid */
}
body:is(.blog, .archive-person) #intro {
    padding-top: var(--hp-section-py) !important;
    padding-bottom: clamp(0.5rem, 1.2vw, 0.85rem) !important;  /* tight gap to tabs */
}
body:is(.blog, .archive-person) #intro > .inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* ---- Filter tab bar: compact + centred, responsive — wrap so the five pills
   never overflow on mobile. */
body:is(.blog, .archive-person) #filter.archive-filter {
    padding-top: 0 !important;
    padding-bottom: clamp(0.75rem, 1.8vw, 1.25rem) !important;  /* tight gap to cards */
}
body:is(.blog, .archive-person) #filter .radio.field {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0.6rem 0.75rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
/* Pills: real button affordance + smooth hover feedback. Inactive pills preview
   the active navy fill on hover; the active pill lifts to gold. */
body:is(.blog, .archive-person) #filter .archive-filter .btn,
body:is(.blog, .archive-person) #filter label.btn,
body:is(.blog, .archive-person) #filter .item {
    cursor: pointer;
}
body:is(.blog, .archive-person) #filter label.btn {
    /* Consistent with the card buttons' scale: larger (12px, was 11) and lighter
       (500, was a heavy 700) for a cleaner, more balanced filter bar. */
    font-size: 12px;
    font-weight: 500;
    -webkit-transition: background-color var(--t), color var(--t), border-color var(--t), -webkit-transform var(--t-fast);
            transition: background-color var(--t), color var(--t), border-color var(--t), transform var(--t-fast);
}
@media (hover: hover) {
    body:is(.blog, .archive-person) #filter .item:not(.active) label.btn:hover {
        background-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        color: #ffffff !important;
    }
    body:is(.blog, .archive-person) #filter .item.active label.btn:hover {
        background-color: var(--color-secondary) !important;
        border-color: var(--color-secondary) !important;
        color: var(--color-on-secondary) !important;
    }
}

/* ---- Listing: the filter bar already provides the gap above, so drop the
   listing's large top pad; keep a homepage-like bottom rhythm. */
body:is(.blog, .archive-person) #listing.archive-listing {
    padding-top: 0 !important;
    padding-bottom: var(--hp-section-py) !important;
}
/* Team archive only: zero the filter's bottom padding and give the listing a
   small 20px top so the two sections keep a consistent, tight gap. */
body.archive-person #filter.archive-filter {
    padding-bottom: 0 !important;
}
body.archive-person #listing.archive-listing {
    padding-top: 20px !important;
}
/* Drop the fixed 140% aspect-ratio box on the listing (core sets it ≥ a
   breakpoint) so card elements size to their content instead. */
body:is(.blog, .archive-person) #listing {
    --aspectRatio: auto;
}

/* ---- Load More: centred, with a clear pointer + hover (navy → gold pill). */
body:is(.blog, .archive-person) #listing .load-more {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: clamp(1rem, 2vw, 1.5rem);
}
body:is(.blog, .archive-person) #listing .load-more .inner {
    padding-top: 0;
}
body:is(.blog, .archive-person) #listing .load-more .btn {
    cursor: pointer;
    border-radius: 999px !important;
    /* Match the card "Read More" button: it's an <a> inheriting `urbane` at
       12px/400, but Load More is a native <button> that falls back to
       sans-serif 11px/700. Align the font so both buttons read identically
       (padding + letter-spacing are em-based and scale with the size). */
    font-family: urbane, sans-serif;
    font-size: 12px;
    font-weight: 400;
}
/* When there are no more pages the archive JS disables the button (e.g. filtering
   to a category with a single post). Hide the whole section so it never shows a
   dead "Load More". */
body:is(.blog, .archive-person) #listing .load-more:has(.btn[disabled]),
body:is(.blog, .archive-person) #listing .load-more .btn[disabled] {
    display: none;
}
/* Loading feedback: the archive JS toggles `.is-loading` on #listing during the
   fetch — dim the button and show a wait cursor so a click always reads as
   registered (the first request can be slow on a cold cache). */
body:is(.blog, .archive-person) #listing.is-loading .load-more .btn {
    opacity: 0.6;
    cursor: progress;
    pointer-events: none;
}
body:is(.blog, .archive-person) #listing.is-loading {
    position: relative;
}

/* ---- Card grid: steady gap + responsive columns (1 → 2 → 3). The core
   site-grid already handles column counts; this just guarantees an even gutter
   and that a card never overflows its track on the narrowest screens. */
body:is(.blog, .archive-person) #listing .wrap > .single {
    min-width: 0;
}
body:is(.blog, .archive-person) #listing .single-post .content h3 {
    overflow-wrap: anywhere;      /* long unbroken words/URLs never force overflow */
}
/* Clamp card text so every tile is uniform: heading → 2 lines, excerpt → 3 lines
   (core clamped the excerpt to 4). A plain heading clamps on the <h3>; a
   "long-title" heading carries its text in block-level .title spans (short =
   desktop, long = mobile / hover reveal), so each span is clamped directly —
   line-clamp on the h3 can't reach a block child.
   The card's `.content .inner` is a flex column, which blockifies the
   `-webkit-box` clamp elements to `flow-root` and silently breaks the clamp; the
   flex only stacks (meta uses a fixed top margin, no bottom-push), so switch it
   to block so `-webkit-line-clamp` works. */
body:is(.blog, .archive-person) #listing .single-post .content .inner {
    display: block;
}
body:is(.blog, .archive-person) #listing .single-post .content h3:not(.long-title),
body:is(.blog, .archive-person) #listing .single-post .content h3.long-title .title.long {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
            line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Long titles: the legacy short/long hover-swap is redundant now that we clamp
   to 2 lines (and it bled the hidden full title through on some cards). Show the
   full title, statically clamped to 2 lines, and drop the swap + excerpt-hide. */
body:is(.blog, .archive-person) #listing .single-post .content h3.long-title .title.short {
    display: none !important;
}
body:is(.blog, .archive-person) #listing .single-post .content h3.long-title .title.long {
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
body:is(.blog, .archive-person) #listing .single-post:hover .content h3.long-title .title.long {
    opacity: 1 !important;
}
body:is(.blog, .archive-person) #listing .single-post:hover .content h3.long-title + p,
body:is(.blog, .archive-person) #listing .single-post:hover .content .long-title ~ p {
    opacity: 1 !important;
}
body:is(.blog, .archive-person) #listing .single-post .content .inner > p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
            line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   LATEST PAGE — match the HOMEPAGE "Latest News" card exactly
   --------------------------------------------------------------------------
   The archive cards picked up the generic inner-pages card chrome (white panel,
   border, shadow). The homepage cards are instead a rounded, overflow-clipped
   wrapper with a light-gray content block and no border/shadow (they only lift
   on hover). Re-skin the archive cards to the same fonts, colours, spacing and
   hover so both pages read identically. (#listing's id keeps these above the
   inner-pages `!important`-free rules.)
   ========================================================================== */
/* Card wrapper: square corners (no radius), clipped, no panel/border/shadow. */
body:is(.blog, .archive-person) #listing .single-post > .inner {
    background-color: transparent !important;
    border: 0 !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    border-radius: 0;
    overflow: hidden;
}
/* Content block: homepage light-gray (#f7f7f8) with matching padding. */
body:is(.blog, .archive-person) #listing .single-post .content {
    background-color: #f7f7f8;
}
body:is(.blog, .archive-person) #listing .single-post .content > .inner {
    padding: 25px;   /* extra bottom reserves the pinned meta row */
    position: relative;                    /* positioning context for the meta */
}

/* Image: fixed 250px cover like the homepage, clipped for the hover zoom. */
body:is(.blog, .archive-person) #listing .single-post .image,
body:is(.blog, .archive-person) #listing .single-post .image > .inner {
    height: 330px;
    overflow: hidden;
}
body:is(.blog, .archive-person) #listing .single-post .image img,
body:is(.blog, .archive-person) #listing .single-post .image picture {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -webkit-transition: -webkit-transform var(--t-slow);
            transition: transform var(--t-slow);
}
/* Heading: homepage scale/weight/colour/rhythm (was 1.15rem / 600). */
body:is(.blog, .archive-person) #listing .single-post .content h3,
body:is(.blog, .archive-person) #listing .single-post .content h3 .title {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-primary);
    margin-bottom: 20px;
}
/* Excerpt: homepage 16px / light weight (was 14px). */
body:is(.blog, .archive-person) #listing .single-post .content .inner > p {
    font-size: 16px;
    font-weight: 200;
    line-height: 1.375;
    color: #000000;
    margin-top: 0;
}
/* Meta row + button + date → homepage sizes. */
body:is(.blog, .archive-person) #listing .single-post .content .meta {
    margin-top: 20px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
body:is(.blog, .archive-person) #listing .single-post .content .meta .btn {
    font-size: 12px;
    font-weight: 400;
    border-radius: 999px;      /* normalise the em-based pill to the standard button radius */
}
/* Hide the decorative ::after on the card "Read More" button. */
body:is(.blog, .archive-person) #listing .single-post .content .meta .btn::after {
    display: none;
}
body:is(.blog, .archive-person) #listing .single-post .content .meta .date {
    font-size: 16px;
}
/* Align heading / description / button across every card: reserve a fixed block
   for the (max-)2-line heading and 3-line excerpt so short cards don't ride up —
   the Read More row then lines up at the same height on every tile in a row. */
body:is(.blog, .archive-person) #listing .single-post .content h3 {
    min-height: 2.8em;         /* 2 lines @ line-height 1.4 */
}
body:is(.blog, .archive-person) #listing .single-post .content .inner > p {
    min-height: 4.125em;       /* 3 lines @ line-height 1.375 */
}
/* Category icon → match the homepage Latest News (navy, ~12px, not gray/17px). */
body:is(.blog, .archive-person) #listing .single-post .meta .category {
    color: var(--color-primary);
}
body:is(.blog, .archive-person) #listing .single-post .meta .category i {
    font-size: 1em;
}
/* Hover: lift the card + zoom the image, with a soft shadow for depth. */
@media (hover: hover) and (pointer: fine) {
    body:is(.blog, .archive-person) #listing .single-post:hover > .inner {
        -webkit-transform: translateY(-5px);
                transform: translateY(-5px);
        -webkit-box-shadow: 0 12px 30px rgba(0, 27, 40, 0.24) !important;
                box-shadow: 0 12px 30px rgba(0, 27, 40, 0.24) !important;
    }
    body:is(.blog, .archive-person) #listing .single-post:hover .image img,
    body:is(.blog, .archive-person) #listing .single-post:hover .image picture {
        -webkit-transform: scale(1.05);
                transform: scale(1.05);
    }
}

/* ==========================================================================
   LATEST PAGE — filter: tabs on desktop, native <select> on mobile/tablet
   --------------------------------------------------------------------------
   The five pills wrap awkwardly on small screens; below 992px swap them for a
   brand-styled dropdown (markup + sync script live in parts/archive/filter.php).
   ========================================================================== */
body:is(.blog, .archive-person) #filter .filter-select-wrap {
    display: none;                     /* desktop: pills only */
    text-align: center;                /* centre the dropdown under the heading */
}
body:is(.blog, .archive-person) #filter .filter-select {
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;               /* centre within the filter bar */
    font-family: urbane, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-primary);
    background-color: #ffffff;
    border: 1px solid #c9d3d9;
    border-radius: 999px;
    padding: 0.7rem 2.75rem 0.7rem 1.25rem;
    line-height: 1.2;
    cursor: pointer;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    /* navy chevron */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23004F71' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.1rem center;
    -webkit-transition: border-color var(--t), -webkit-box-shadow var(--t);
            transition: border-color var(--t), box-shadow var(--t);
}
body:is(.blog, .archive-person) #filter .filter-select:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
    border-color: var(--color-primary);
}
@media (max-width: 991.98px) {
    body:is(.blog, .archive-person) #filter .radio.field {
        display: none;                 /* mobile/tablet: hide pills */
    }
    body:is(.blog, .archive-person) #filter .filter-select-wrap {
        display: block;                /* show the dropdown */
    }
}

/* ==========================================================================
   SOLUTIONS ARCHIVE — "Our Solutions" cards: copy the "Our Services" design
   --------------------------------------------------------------------------
   The .single-solution cards carry the SAME elements as the Services cards —
   icon, title (get_the_title), excerpt (get_the_excerpt) and a "Learn More" link
   to the solution's page — but wrapped in the layered accordion (icon as an
   absolute background, title bar overlay, excerpt + hidden Learn More in a
   collapsible panel). Flatten that into the Services card: vertical stack of
   centred icon → title → copy → Learn More pill, with the same tinted-gradient
   chrome, radius, shadow and hover-lift. The existing Learn More link keeps its
   href (functionality preserved); the +/- toggle is dropped since the copy is
   now shown. Mirrors the SERVICES ARCHIVE block below; scoped to archive-solution.
   ========================================================================== */
body.archive-solution #listing {
    --aspectRatio: auto;
    padding-top: 4rem;
    padding-bottom: 4rem;
    row-gap: 2rem;
}
body.archive-solution #listing h2 {
    padding: 0;
    margin: 0;
    text-align: center;
}
/* Card surface + hover — identical to the Services cards. */
body.archive-solution #listing .single-solution > .inner {
    background-color: #f5f8fb !important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fbfcfe), to(#eef3f8));
    background-image: linear-gradient(180deg, #fbfcfe 0%, #eef3f8 100%);
    border: 1px solid #e4eaf0 !important;
    border-radius: var(--radius-lg) !important;
    -webkit-box-shadow: var(--shadow-sm) !important;
            box-shadow: var(--shadow-sm) !important;
    -webkit-transition: -webkit-transform var(--t), -webkit-box-shadow var(--t);
            transition: transform var(--t), box-shadow var(--t), background-color var(--t);
}
@media (hover: hover) {
    body.archive-solution #listing .single-solution:hover > .inner,
    body.archive-solution #listing .single-solution:focus-within > .inner {
        background-color: #ffffff !important;
        background-image: none;
        -webkit-transform: translateY(-6px);
                transform: translateY(-6px);
        -webkit-box-shadow: inset 0 3px 0 var(--color-secondary), var(--shadow-md) !important;
                box-shadow: inset 0 3px 0 var(--color-secondary), var(--shadow-md) !important;
    }
}
/* De-layer the accordion into a vertical stack (icon → title → copy → CTA). */
body.archive-solution #listing .single-solution > .inner > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
body.archive-solution #listing .single-solution .image,
body.archive-solution #listing .single-solution .image > .inner {
    position: static !important;
    height: auto !important;
}
body.archive-solution #listing .single-solution .image > .inner {
    padding: 1.5rem 1.5rem 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
body.archive-solution #listing .single-solution .image svg {
    position: static !important;
    width: 100px !important;
    height: 100px !important;
    -webkit-transform: none !important;
            transform: none !important;
}
/* Drop the aspect-ratio spacers; keep the icon visible if a card goes .active. */
body.archive-solution #listing .single-solution > .inner:before,
body.archive-solution #listing .single-solution .accordion-btn:after {
    display: none !important;
}
body.archive-solution #listing .single-solution.active .image svg {
    opacity: 1 !important;
}
/* Title bar → centred heading; hide the +/- toggle (static card now). */
body.archive-solution #listing .single-solution .accordion-btn {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
    padding: 1.5rem 1.5rem 0 !important;
    background: transparent !important;
}
body.archive-solution #listing .single-solution .accordion-btn .icon {
    display: none !important;
}
body.archive-solution #listing .single-solution .accordion-btn h3 {
    padding-right: 0;
}
/* Panel → show the excerpt + Learn More permanently, centred like a Services
   card. The panel fills the remaining card height and the copy flex-grows so the
   Learn More button pins to the SAME baseline across every card (equal-height
   grid). `overflow/height/display` are locked with !important so core.js's hover
   slideDown/slideUp (mouseenter on #listing .accordion-item) can't animate the
   panel — this removes the button flicker/fluctuation on hover. */
body.archive-solution #listing .single-solution .accordion-panel {
    -webkit-box-flex: 1 !important;
        -ms-flex-positive: 1 !important;
            flex-grow: 1 !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
body.archive-solution #listing .single-solution .accordion-panel > .inner {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    height: 100% !important;
    overflow: visible !important;   /* neutralise jQuery slideUp/Down (no flicker) */
    padding: 0 1.5rem 1.5rem !important;
    text-align: center;
}
/* Copy: 24px gap below the heading (match Services) and flex-grow so the CTA
   pins to the card's base, aligning all buttons. */
body.archive-solution #listing .single-solution .accordion-panel p {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin: 1.5rem 0 0;
}
body.archive-solution #listing .single-solution .accordion-panel .btn {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -ms-flex-item-align: center;
        align-self: center;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    margin-top: 2rem;
}
/* Drop the full-card ::after click overlay — the Learn More button is the link. */
body.archive-solution #listing .single-solution a::after {
    display: none;
}

/* ==========================================================================
   SERVICES ARCHIVE — "Our Services" cards: drop the forced aspect-ratio box
   --------------------------------------------------------------------------
   Core (css/1.0/core.css) sets `#listing { --aspectRatio: 140% }` at desktop
   and paints it onto every `.single-service > .inner:before` as a padding-top
   spacer, forcing each card to a fixed ≥140%-of-width height. The service
   cards hold short text + a "Learn More" pill, so that spacer left a large
   dead gap between the copy and the button and made the section read taller /
   sparser than the matching accordion listings on Solutions & Expertise.
   Clearing --aspectRatio (padding-top:auto → 0, same technique as the blog
   listing above) lets the cards size to their content and equal-height to the
   tallest in each grid row, matching the established listing spacing. Scoped
   to body.archive-service so no other listing is touched. The extra `#listing`
   keeps this above core's `#listing { --aspectRatio: … }` at every breakpoint.
   ========================================================================== */
body.archive-service #listing {
    --aspectRatio: auto;
}

/* ---- "Our Services" section rhythm -----------------------------------------
   Match the vertical spacing of the section above (#overview = 64px top/bottom)
   and fix the heading→content gap. #listing shipped 71px of section padding
   PLUS a 32px top/bottom padding baked into the <h2>, so the heading sat ~103px
   from the top edge and ~68px above the cards. Normalise the section to 64px
   (matching #overview) and replace the h2's padding with a single clean gap. */
body.archive-service #listing {
    padding-top: 4rem;
    padding-bottom: 4rem;
    row-gap: 2rem;
}
body.archive-service #listing h2 {
    padding: 0;
    margin: 0;
    text-align: center;
}

/* ---- "Our Services" grid: centre any number of cards ----------------------
   Core lays the cards out as a `repeat(var(--columnCount), 1fr)` grid, which
   left-aligns the final row whenever the card count doesn't fill it (1, 2, 5…).
   Switch the .wrap to flexbox with justify-content:center and give each card the
   exact width the grid produced — basis = (100% - (cols - 1) * gap) / cols —
   reusing the responsive --columnCount (3 desktop / 2 tablet / 1 mobile) and the
   --space gap that core already sets at each breakpoint. Full rows (3, 6) render
   identically; short rows (1, 2, 5) now centre. Fully responsive with no fixed
   breakpoints of its own; card internals, spacing and behaviour are untouched. */
body:is(.archive-service, .archive-solution, .single-solution, .single-industry) #listing .wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    /* #listing is itself a grid and would stretch this .wrap to a tall, DEFINITE
       row height; the cards carry height:100%, so against a definite height they
       inflated to fill it (huge gap above the button). align-self:start keeps
       .wrap content-sized so height:100% resolves to the card's own content, and
       align-content:flex-start packs the rows to the top. */
    -ms-grid-row-align: start;
        align-self: start;
    -ms-flex-line-pack: start;
        align-content: flex-start;
    gap: var(--space);
}
body:is(.archive-service, .archive-solution, .single-solution, .single-industry) #listing .wrap > .single {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 calc((100% - (var(--columnCount) - 1) * var(--space)) / var(--columnCount));
            flex: 0 1 calc((100% - (var(--columnCount) - 1) * var(--space)) / var(--columnCount));
    max-width: calc((100% - (var(--columnCount) - 1) * var(--space)) / var(--columnCount));
    /* Let flex stretch each card to its row's tallest (so the "Learn More"
       buttons align across a row). The card's own height:100% would otherwise
       count as an explicit size and defeat align-items:stretch; the inner keeps
       its height:100% and still pins the button to the bottom. */
    height: auto;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

/* ---- Cards: equal padding on every side + centred content ------------------
   The content inner shipped uneven padding (20/24 top/bottom, 21.6 sides) and
   the icon sat flush to the card's top edge. Give the icon area a matching top
   inset and a uniform 1.5rem inset on the copy, so the visible padding is equal
   all around. Then centre everything (icon, heading, copy, CTA). */
body:is(.archive-service, .single-solution, .single-industry) #listing .single-service .image > .inner {
    padding: 1.5rem 1.5rem 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
body:is(.archive-service, .single-solution, .single-industry) #listing .single-service .content > .inner {
    padding: 1.5rem;
    text-align: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
/* CTA pill sits centred (flex column no longer left-anchors it). */
body:is(.archive-service, .single-solution, .single-industry) #listing .single-service .btn {
    -ms-flex-item-align: center;
        align-self: center;
}

/* ---- Drop the ::after pseudo-element on the cards' anchors -----------------
   Core (css/1.0/core.css:5216) gives `#listing .single .btn:after` an absolute
   full-card overlay (width/height:100%) that makes the whole card a click
   target. Hide it so only the button itself is the link. The extra `.single-service`
   outranks that rule's specificity. */
body:is(.archive-service, .single-solution, .single-industry) #listing .single-service a::after {
    display: none;
}

/* ---- Inline links inside the card copy: distinct colour + weight -----------
   The description <p> can hold inline anchors (e.g. "Accord Small Business
   Finance"). Give them the brand navy and a semibold weight so they stand out
   clearly from the body copy, underlined for affordance, with the site's
   navy→gold hover for consistency. Scoped to `.content p a` so the "Learn More"
   pill (a direct .btn child) is untouched. */
body:is(.archive-service, .single-solution, .single-industry) #listing .single-service .content p a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    -webkit-transition: color var(--t);
            transition: color var(--t);
}
body:is(.archive-service, .single-solution, .single-industry) #listing .single-service .content p a:hover,
body:is(.archive-service, .single-solution, .single-industry) #listing .single-service .content p a:focus-visible {
    color: var(--color-secondary);
}

/* ---- Card surface: modern, subtly-tinted panels on the white section -------
   The cards were white on a white section, so they disappeared. Give them a
   subtle cool gradient tint, a larger radius, and a soft shadow so they read as
   distinct, modern panels. On hover they lift, brighten to white, and pick up a
   gold top accent + deeper shadow — the same interaction as the homepage
   "What We Do" cards, for consistency. Section 3 sets the surface colour with
   !important, so these override at higher specificity + !important. */
body:is(.archive-service, .single-solution, .single-industry) #listing .single-service > .inner {
    background-color: #f5f8fb !important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fbfcfe), to(#eef3f8));
    background-image: linear-gradient(180deg, #fbfcfe 0%, #eef3f8 100%);
    border: 1px solid #e4eaf0;
    border-radius: var(--radius-lg);
    -webkit-box-shadow: var(--shadow-sm);
            box-shadow: var(--shadow-sm);
    -webkit-transition: -webkit-transform var(--t), -webkit-box-shadow var(--t);
            transition: transform var(--t), box-shadow var(--t), background-color var(--t);
}
@media (hover: hover) {
    body:is(.archive-service, .single-solution, .single-industry) #listing .single-service:hover > .inner,
    body:is(.archive-service, .single-solution, .single-industry) #listing .single-service:focus-within > .inner {
        background-color: #ffffff !important;
        background-image: none;
        -webkit-transform: translateY(-6px);
                transform: translateY(-6px);
        -webkit-box-shadow: inset 0 3px 0 var(--color-secondary), var(--shadow-md);
                box-shadow: inset 0 3px 0 var(--color-secondary), var(--shadow-md);
    }
}

/* ==========================================================================
   APPLY NOW PAGE  (body.apply-now-template)
   --------------------------------------------------------------------------
   The template ships lots of inline styles with off-brand colours (#003b70,
   #16466f, #12304a, #0066a6…), square cards and a plain FormAssembly form. This
   layer re-skins every section to the shared design system — homepage card
   chrome, the H2 type scale, brand navy→gold pills, the contact-style form card
   — and normalises spacing + responsiveness. Reuses the :root tokens.
   ========================================================================== */

/* ---- Vertical rhythm + alignment -----------------------------------------
   `#apply-section` already gets the shared container (20px gutter + 1520 inner,
   centred) from the inner-page system; it also carried a full 72px top/bottom
   pad that DOUBLED with each inner section's own padding (hero → heading was
   136px). Zero the wrapper's block padding and let each inner section own the
   rhythm. The inner sections inherit the container, so no extra side padding —
   their content lines up with the header/footer at the 20px gutter. */
body.apply-now-template #apply-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body.apply-now-template #apply-section > .inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body.apply-now-template .apply-financing-section {
    margin-bottom: 0 !important;
    padding-top: var(--hp-section-py) !important;
    padding-bottom: var(--hp-section-py) !important;   /* homepage 64px rhythm */
}

/* ---- Section headings → homepage H2 scale (one consistent hierarchy) ------ */
body.apply-now-template .financing-container h3.business-title,
body.apply-now-template .apply-section-heading h2,
body.apply-now-template .wFormContainer .wForm .wFormTitle {
    font-size: clamp(1.6rem, 1.05rem + 1.9vw, 2.5rem) !important;
    line-height: 1.15 !important;
    font-weight: 300 !important;
    color: var(--color-primary) !important;
    text-align: center;
    font-family: urbane, sans-serif;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem) !important;
}

/* Hero eyebrow (the <h1> "Apply Now") — drop the uppercase transform. */
body.apply-now-template .intro-full h1.section-eyebrow {
    text-transform: none !important;
}
/* Hero: match the homepage hero's internal top/bottom padding (the template used
   pt-20/pb-24 utilities → ~100/120px; the homepage uses clamp(2rem,4vw,3rem)). */
body.apply-now-template .intro-full > .section-content {
    padding-top: clamp(2rem, 4vw, 3rem) !important;
    padding-bottom: clamp(2rem, 4vw, 3rem) !important;
}
/* Hero body link ("contact") — navy was unreadable on the dark image; make it a
   legible gold underline that turns white on hover. */
body.apply-now-template .intro-full .section-content p a {
    color: var(--color-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
body.apply-now-template .intro-full .section-content p a:hover,
body.apply-now-template .intro-full .section-content p a:focus-visible {
    color: #ffffff;
}

/* ---- Financing cards → homepage "What We Do" card chrome ------------------ */
body.apply-now-template .financing-cards {
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
    max-width: var(--container-inner, 1520px);
    margin-inline: auto;
}
body.apply-now-template .finance-card {
    background-color: #ffffff;
    border: 2px solid var(--color-primary) !important;   /* dark navy border */
    border-radius: var(--radius-md);
    -webkit-box-shadow: var(--shadow-xs);
            box-shadow: var(--shadow-xs);
    padding: clamp(1.75rem, 1rem + 2vw, 2.5rem);
    -webkit-transition: -webkit-transform var(--t), -webkit-box-shadow var(--t), border-color var(--t);
            transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
@media (hover: hover) {
    body.apply-now-template .finance-card:hover {
        border-color: var(--color-secondary) !important;   /* navy → gold on hover */
        -webkit-transform: translateY(-5px);
                transform: translateY(-5px);
        -webkit-box-shadow: var(--shadow-md) !important;
                box-shadow: var(--shadow-md) !important;
    }
}
body.apply-now-template .finance-card h3 {
    color: var(--color-primary);
    font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
    font-weight: 600;
    line-height: 1.2;
    font-family: urbane, sans-serif;
}
body.apply-now-template .finance-card p {
    color: #000000;
    font-size: 1rem;
    line-height: 1.65;
}
body.apply-now-template .finance-line {
    width: 56px;
    height: 3px;
    background: var(--color-secondary);   /* gold accent */
    border-radius: 999px;
}
/* Finance buttons → brand pill (navy → gold on hover). */
body.apply-now-template .finance-button {
    background: var(--color-primary);
    color: #ffffff;
    border-radius: 999px;
    padding: 0.85rem 2rem;
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition: background-color var(--t), color var(--t), -webkit-transform var(--t-fast);
            transition: background-color var(--t), color var(--t), transform var(--t-fast);
}
body.apply-now-template .finance-button:hover {
    background: var(--color-secondary);
    color: var(--color-on-secondary);
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
}
body.apply-now-template .finance-button .arrow {
    position: static;
    margin-left: 0.4rem;
}

/* ---- Form → contact-page card treatment ---------------------------------- */
body.apply-now-template .apply-form-section {
    padding-top: 0 !important;
    padding-bottom: var(--hp-section-py) !important;
}
body.apply-now-template .apply-form-blk {
    max-width: 900px;
    margin-inline: auto;
    background-color: #ffffff;
    border: 2px solid var(--color-primary);   /* same navy border as the finance cards */
    border-radius: var(--radius-lg);
    -webkit-box-shadow: var(--shadow-md);
            box-shadow: var(--shadow-md);
    padding: clamp(1.75rem, 1rem + 3vw, 3.25rem);
}
body.apply-now-template .apply-form-blk .wForm .wFormTitle {
    margin-top: 0 !important;
}
/* Intro info block inside the form. */
body.apply-now-template .apply-form-blk .htmlContent p,
body.apply-now-template .apply-form-blk .htmlContent span {
    color: #334049 !important;
    font-weight: 400 !important;
    line-height: 1.6;
}
/* Field labels. */
body.apply-now-template .wForm .label.preField b,
body.apply-now-template .wForm .label.preField {
    color: #334049;
    font-weight: 700;
    font-size: 0.8125rem;
}
/* Inputs & textareas → rounded, bordered, focus ring (beats external theme). */
body.apply-now-template .wForm .inputWrapper input[type="text"],
body.apply-now-template .wForm .inputWrapper input[type="email"],
body.apply-now-template .wForm .inputWrapper input[type="tel"],
body.apply-now-template .wForm .inputWrapper textarea,
body.apply-now-template .wForm .inputWrapper select {
    width: 100% !important;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border: 1px solid #c9d3d9 !important;
    border-radius: var(--radius-md) !important;
    padding: 0.7rem 0.9rem !important;
    font-size: 1rem !important;
    font-family: urbane, sans-serif;
    background-color: #ffffff !important;
    -webkit-transition: border-color var(--t), -webkit-box-shadow var(--t);
            transition: border-color var(--t), box-shadow var(--t);
}
body.apply-now-template .wForm .inputWrapper input:focus,
body.apply-now-template .wForm .inputWrapper textarea:focus,
body.apply-now-template .wForm .inputWrapper select:focus {
    outline: 0;
    border-color: var(--color-primary) !important;
    -webkit-box-shadow: 0 0 0 3px rgba(0, 79, 113, 0.12) !important;
            box-shadow: 0 0 0 3px rgba(0, 79, 113, 0.12) !important;
}
/* Submit → brand navy pill, gold on hover, centred. */
body.apply-now-template .wFormContainer .actions {
    text-align: center;
}
body.apply-now-template .wFormContainer .actions .primaryAction {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0.8rem 2.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: urbane, sans-serif;
    -webkit-transition: background-color var(--t), color var(--t);
            transition: background-color var(--t), color var(--t);
}
body.apply-now-template .wFormContainer .actions .primaryAction:hover {
    background-color: var(--color-secondary) !important;
    color: var(--color-on-secondary) !important;
}
/* Drop the external theme's gray fieldset boxes so the form reads as one card;
   keep a hairline divider above the intro block for light structure. */
body.apply-now-template .wForm fieldset {
    border: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.apply-now-template .wForm fieldset#tfa_1 {
    padding-top: 0 !important;
}
body.apply-now-template .wForm fieldset#tfa_5 {
    border-top: 1px solid #e7ebee !important;
    margin-top: 1.25rem;
    padding-top: 1.5rem !important;
}

/* ---- What to Expect → contained gray band with even internal padding ------ */
body.apply-now-template .what-to-expect-section {
    margin-top: 0 !important;
    background: rgb(239, 239, 240) !important;   /* match the homepage/form gray */
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 4vw, 3rem) !important;   /* equal padding on all sides */
}
body.apply-now-template .expect-grid {
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
body.apply-now-template .expect-card {
    background: #ffffff;
    border: 2px solid var(--color-primary) !important;   /* same navy border */
    border-radius: var(--radius-md);
    padding: clamp(1.75rem, 1rem + 2vw, 2.25rem);
    -webkit-box-shadow: var(--shadow-xs);
            box-shadow: var(--shadow-xs);
    -webkit-transition: -webkit-transform var(--t), -webkit-box-shadow var(--t), border-color var(--t);
            transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
@media (hover: hover) {
    body.apply-now-template .expect-card:hover {
        border-color: var(--color-secondary) !important;   /* navy → gold on hover */
        -webkit-transform: translateY(-5px);
                transform: translateY(-5px);
        -webkit-box-shadow: var(--shadow-md);
                box-shadow: var(--shadow-md);
    }
}
body.apply-now-template .step-icon {
    background: var(--color-primary);
}
body.apply-now-template .expect-card h3 {
    color: var(--color-primary);
    font-weight: 600;
    font-family: urbane, sans-serif;
}
body.apply-now-template .expect-card p {
    color: #000000;
}

/* ---- Security note ------------------------------------------------------- */
body.apply-now-template .apply-review {
    padding-top: 0;
    padding-bottom: var(--hp-section-py);   /* balanced space before the footer CTA */
}
body.apply-now-template .apply-review p {
    font-size: 0.95rem;
    margin: 0;
}

/* ---- Responsive: cards stack cleanly on tablet/mobile -------------------- */
@media (max-width: 767.98px) {
    body.apply-now-template .financing-cards {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   COMPANY PAGE  (body.company-template) — mirror the Contact-page hero layout
   --------------------------------------------------------------------------
   Same `#intro.columns` two-column hero as Contact. It had no section padding
   and the copy column carried 32+32px intrinsic padding that dropped the H1
   ~64px below the image top. Apply the same fix: symmetric section padding,
   zero the copy column's padding (H1 aligns to the top & the image), a balanced
   50/50 row, a framed image, and responsive stacking — identical to Contact.
   ========================================================================== */
body.company-template #intro > .inner {
    -ms-grid-columns: 1fr 1fr !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(1.5rem, 4vw, 4rem) !important;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}
body.company-template #intro > .inner > .content.left { grid-column: 1 / 2 !important; }
body.company-template #intro > .inner > .image.right  { grid-column: 2 / 3 !important; }
/* Zero the copy column's intrinsic padding so the H1 sits at the section top. */
body.company-template #intro .content.left,
body.company-template #intro .content.left > .inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Symmetric section padding (matches the homepage/contact rhythm). */
body.company-template #intro {
    padding-top: var(--hp-section-py) !important;
    padding-bottom: var(--hp-section-py) !important;
}
body.company-template #intro > .inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center;
}
/* Image column: a framed box with a DEFINITE height so the photo's intrinsic
   size never inflates the row; the <img> is absolutely-positioned cover so it
   fills the frame. The copy column stretches to match (align-items: stretch). */
body.company-template #intro .image.right,
body.company-template #intro .image.right > .inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
body.company-template #intro .image.right > .inner {
    position: relative;
    height: clamp(320px, 26vw, 420px);
    aspect-ratio: auto !important;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
body.company-template #intro .image.right img,
body.company-template #intro .image.right picture {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    -o-object-fit: cover;
       object-fit: cover;
}

/* Responsive: stack with the IMAGE above the text (the DOM order) below 768px —
   the original breakpoint (core's `section[id].columns` goes side-by-side at
   min-width: 768px, so it stacked below that). */
@media (max-width: 767.98px) {
    body.company-template #intro > .inner {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
            -ms-flex-direction: column !important;
                flex-direction: column !important;
        gap: 1.5rem;
    }
    body.company-template #intro .content.left,
    body.company-template #intro .image.right {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: auto !important;
        margin: 0 !important;
    }
    body.company-template #intro .image.right  { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
    body.company-template #intro .content.left { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; min-height: 0 !important; }
    body.company-template #intro .image.right,
    body.company-template #intro .image.right > .inner,
    body.company-template #intro .image.right img,
    body.company-template #intro .image.right picture {
        height: clamp(260px, 50vw, 380px) !important;
    }
}

/* ==========================================================================
   SOLUTIONS + SERVICES + INDUSTRY ARCHIVE hero (#intro) — match Company EXACTLY
   --------------------------------------------------------------------------
   Same `#intro.columns` two-column hero: 50/50 row, symmetric section padding,
   copy column flush to the top, a framed image box (rounded + soft shadow) at
   the hero's height, and the same < 768px stacked (image-above-text) behaviour.
   Solutions/Services use an SVG illustration, so they default to
   `object-fit: contain` (artwork isn't cropped); Industry uses a photo and is
   overridden to `cover` just below — everything else is identical to Company. */
body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .single-solution, .single-service, .single-industry) #intro > .inner {
    -ms-grid-columns: 1fr 1fr !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(1.5rem, 4vw, 4rem) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .single-solution, .single-service, .single-industry) #intro > .inner > .content.left { grid-column: 1 / 2 !important; }
body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .single-solution, .single-service, .single-industry) #intro > .inner > .image.right  { grid-column: 2 / 3 !important; }
body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .single-solution, .single-service, .single-industry) #intro .content.left,
body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .single-solution, .single-service, .single-industry) #intro .content.left > .inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .single-solution, .single-service, .single-industry) #intro {
    padding-top: var(--hp-section-py) !important;
    padding-bottom: var(--hp-section-py) !important;
}
body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .single-solution, .single-service, .single-industry) #intro .image.right,
body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .single-solution, .single-service, .single-industry) #intro .image.right > .inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .single-solution, .single-service, .single-industry) #intro .image.right > .inner {
    position: relative;
    height: clamp(320px, 26vw, 420px);
    aspect-ratio: auto !important;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .single-solution, .single-service, .single-industry) #intro .image.right img,
body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .single-solution, .single-service, .single-industry) #intro .image.right picture {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    -o-object-fit: contain;
       object-fit: contain;
}
/* Heroes that use a PHOTO (not an SVG illustration) fill the frame with `cover`
   — like the Company hero — instead of letterboxing. This covers the Industry +
   About heroes and the single Service / Industry pages (which use the post
   thumbnail). The single Solution hero keeps the base `contain` (SVG artwork). */
body.archive-industry #intro .image.right img,
body.archive-industry #intro .image.right picture,
body.about-template #intro .image.right img,
body.about-template #intro .image.right picture,
body.single-service #intro .image.right img,
body.single-service #intro .image.right picture,
body.single-industry #intro .image.right img,
body.single-industry #intro .image.right picture {
    -o-object-fit: cover;
       object-fit: cover;
}
@media (max-width: 767.98px) {
    body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .single-solution, .single-service, .single-industry) #intro > .inner {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
            -ms-flex-direction: column !important;
                flex-direction: column !important;
        gap: 1.5rem;
    }
    body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .single-solution, .single-service, .single-industry) #intro .content.left,
    body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .single-solution, .single-service, .single-industry) #intro .image.right {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: auto !important;
        margin: 0 !important;
    }
    body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .single-solution, .single-service, .single-industry) #intro .image.right  { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
    body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .single-solution, .single-service, .single-industry) #intro .content.left { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; min-height: 0 !important; }
    body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .single-solution, .single-service, .single-industry) #intro .image.right,
    body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .single-solution, .single-service, .single-industry) #intro .image.right > .inner,
    body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .single-solution, .single-service, .single-industry) #intro .image.right img,
    body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .single-solution, .single-service, .single-industry) #intro .image.right picture {
        height: clamp(260px, 50vw, 380px) !important;
    }
}

/* ---- Company inner .columns sections: follow the hero layout --------------
   Match the hero's rhythm (64px) and frame the PHOTO images the same way
   (contained — not full-bleed — rounded + soft shadow). `:has(img)` targets
   only photo columns, so the SVG illustration sections (advantage, about) and
   the text-only overview band are left untouched. */
body.company-template main > section.columns {
    padding-top: var(--hp-section-py) !important;
    padding-bottom: var(--hp-section-py) !important;
}
body.company-template main .columns .image.left:has(img),
body.company-template main .columns .image.right:has(img) {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.company-template main .columns .image:has(img) > .inner {
    border-radius: var(--radius-lg);
    overflow: hidden;
}
body.company-template main .columns .image:has(img) img {
    border-radius: var(--radius-lg);
}

/* ==========================================================================
   COMPANY inner sections — match the FIRST section's design consistently
   --------------------------------------------------------------------------
   Every two-column section uses the hero's balanced 50/50 grid with the copy
   top-aligned to the image; single-photo sections frame the image at the hero's
   height. The one exception is #overview (second section) — a single grid that
   is centred. Mobile keeps the core's stacked (one-column) layout (< 768px).
   ========================================================================== */

/* Consistent vertical rhythm, every section: the SECTION carries the spacing
   (same --hp-section-py as #intro) and its own > .inner padding is zeroed — so
   headings sit at the top and inter-section gaps match the hero throughout. */
body.company-template main > section {
    /* padding-top: var(--hp-section-py) !important;
    padding-bottom: var(--hp-section-py) !important; */
}
body.company-template main > section > .inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Reset core's full-bleed offsets on image columns (negative margins, inflated
   min-height) so the image section sizes to its framed inner — all orientations. */
body.company-template main .columns .image.left,
body.company-template main .columns .image.right {
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}
/* Neutralise core's `margin-left: auto` (≥1200px) on the left image inner — it
   shoves the photo to the right edge of its column; our 50/50 grid wants it
   flush-left so it lines up with the copy column opposite. */
@media only screen and (min-width: 1200px) {
    body.company-template main section[id].columns .image.left > .inner {
        margin-left: 0 !important;
    }
    body.company-template main section[id].columns .image.right > .inner {
        margin-right: 0 !important;
    }
    /* Let the framed image fill the full column width (drop core's max-width cap). */
    body.company-template main section[id].columns .image.left > .inner,
    body.company-template main section[id].columns .image.right > .inner {
        max-width: none !important;
    }
}
/* #about image inner: drop its intrinsic padding so the photo fills its frame. */
body.company-template #about .image > .inner {
    padding: 0 !important;
}
/* #team image inner: no drop-shadow on the photo frame. */
body.company-template #team .image:has(img) > .inner {
    box-shadow: none !important;
}
/* Copy column: zero the intrinsic padding so the heading sits at the top. */
body.company-template main .columns .content.left,
body.company-template main .columns .content.right,
body.company-template main .columns .content > .inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

@media (min-width: 768px) {
    /* Balanced 50/50 columns + top-aligned copy (like the hero). */
    body.company-template main section.columns:not(#overview) > .inner {
        -ms-grid-columns: 1fr 1fr !important;
        grid-template-columns: 1fr 1fr !important;
        gap: clamp(1.5rem, 4vw, 4rem) !important;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
    }
    body.company-template main .columns .content.left,
    body.company-template main .columns .image.left  { grid-column: 1 / 2 !important; }
    body.company-template main .columns .content.right,
    body.company-template main .columns .image.right { grid-column: 2 / 3 !important; }
    /* Both columns in row 1, top-aligned — so the heading lines up with the
       image top on every section (not vertically centred). */
    body.company-template main section.columns:not(#overview) .content,
    body.company-template main section.columns:not(#overview) .image {
        -ms-grid-row: 1;
        grid-row: 1 !important;
        /* -ms-flex-item-align: start !important;
            align-self: start !important; */
    }
}

/* Below 768px the two columns stack — give them the hero's vertical gap (1.5rem)
   between image and copy, instead of the core grid's zero row-gap. */
@media (max-width: 767.98px) {
    body.company-template main section.columns:not(#overview) > .inner {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
            -ms-flex-direction: column !important;
                flex-direction: column !important;
        gap: 1.5rem !important;
    }
    body.company-template main .columns .content,
    body.company-template main .columns .image {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: auto !important;
        margin: 0 !important;
    }
}

/* Single-photo sections (careers, investor relations): frame the image at the
   hero's height with an absolutely-positioned cover <img> (so the photo's
   intrinsic size can't inflate the row). */
body.company-template #careers .image > .inner,
body.company-template #investor-relations .image > .inner {
    position: relative;
    height: clamp(300px, 26vw, 420px);
}
body.company-template #careers .image img,
body.company-template #careers .image picture,
body.company-template #investor-relations .image img,
body.company-template #investor-relations .image picture {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    -o-object-fit: cover;
       object-fit: cover;
}

/* ---- Exception: #overview (second section) — single, centred grid. --------
   Collapse the site-grid to one centred column (max 920px) so the heading and
   copy stack and centre instead of sitting in partial left-hand columns.
   Shared by the Company page's second section, the About page's matching band,
   the Solutions + Services + Industry archives' #overview band, and the Legal
   Policy page (page-id-3474) so its 2nd section matches the Solutions one. */
body.company-template #overview,
body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .page-id-3474, .page-id-131, .single-solution, .single-service, .single-industry) #overview {
    padding-top: var(--hp-section-py) !important;
    padding-bottom: var(--hp-section-py) !important;
}
body.company-template #overview > .inner,
body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .page-id-3474, .page-id-131, .single-solution, .single-service, .single-industry) #overview > .inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    -ms-grid-columns: minmax(0, 1200px) !important;
    grid-template-columns: minmax(0, 1200px) !important;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
    text-align: center;
}
body.company-template #overview > .inner > *,
body:is(.archive-solution, .archive-service, .archive-industry, .about-template, .page-id-3474, .page-id-131, .single-solution, .single-service, .single-industry) #overview > .inner > * {
    grid-column: 1 / -1 !important;
    text-align: center;
    padding-bottom: 0;
}
/* About's overview heading is the "40 · 40" milestone icon (an <h4>, not an <h2>
   title). Drop its legacy top padding so it sits centred with the same rhythm as
   the siblings' heading. */
body.about-template #overview h4 {
    padding-top: 0 !important;
}

/* ==========================================================================
   ABOUT sections 3 & 4 — consistent rhythm; section 4 on the hero's 2-col grid
   --------------------------------------------------------------------------
   Section 3 is the "Who We Are" accordion (`.news-tab-layout` → `.new-tabs-service`
   + the Apply CTA); it shipped with no band padding (only a 20px top margin and a
   176px gap below). Section 4 (`#values`) used the legacy 12-col grid (5/6 split)
   and 71px padding. Give both the same 64px (`--hp-section-py`) top/bottom rhythm
   as the sections above, and rebuild #values on the hero's 2-col 1fr/1fr grid
   with a framed image. The band LAYOUT (width/padding below) stays scoped to
   body.about-template, but the accordion's visual STATE styling (white titles,
   hover, gold active tab) and the Apply CTA were rescoped from body.about-template
   to body:not(.home) so every page that uses this tabs accordion — Services,
   Industry, Careers, Culture — matches the About design. (#values is About-only.)

   The band LAYOUT below is now shared by About AND the Service/Industry single
   pages (`single-service`/`single-industry` use this same `#tabs` accordion as
   their body section): the singles shipped full-bleed (1385px, flush left, no
   vertical padding) while About was a centred 1200px column with 64px rhythm —
   the `body:is(.about-template, .single-service, .single-industry)` scope gives
   all three the same centred, breathing band. */

/* ---- Section 3: accordion band — even 64px rhythm + overview's 1200px measure.
   Match the #overview band above: cap the accordion + CTA to a centred 1200px
   column (they shipped full-bleed / mismatched at 1385px & 1188px), with 20px
   side gutters so content never touches the edge. Background left unchanged. */
body:is(.about-template, .single-service, .single-industry) .news-tab-layout {
    margin: 0 !important;
    padding-top: var(--hp-section-py) !important;
    padding-bottom: var(--hp-section-py) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
body:is(.about-template, .single-service, .single-industry) .news-tab-layout .new-tabs-service,
body:is(.about-template, .single-service, .single-industry) .news-tab-layout .new-service-apply {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
body:is(.about-template, .single-service, .single-industry) .news-tab-layout .new-tabs-service {
    margin-top: 0 !important;
}
/* The inner #tabs section carries core's `padding: 0 var(--space)` (20px), which
   double-insets the accordion inside the 1200px column. Zero it so the items sit
   flush to the band's measure. */
body:is(.about-template, .single-service, .single-industry) .news-tab-layout .new-tabs-service #tabs {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Accordion titles: keep white on the navy bar. The interior design system's
   blanket navy heading colour (`body:not(.home) main :is(h1,h2…)`) outranks the
   inline `color:#fff`, so COLLAPSED titles rendered navy-on-navy (invisible) —
   only the open one (its own `[aria-expanded=true]` rule) stayed white. */
body:not(.home) .new-tabs-service .new-service-btn h3 {
    color: #ffffff !important;
}
/* Tab state feedback. Collapsed = navy; hover = subtly darker navy; the OPEN tab
   gets the brand gold bar with navy title + icon — a clear, attractive, on-brand
   active state (instead of the muddy darker-navy). */
body:not(.home) .new-tabs-service .new-service-btn {
    -webkit-transition: background-color var(--t), color var(--t);
            transition: background-color var(--t), color var(--t);
}
body:not(.home) .new-tabs-service .new-service-btn:hover,
body:not(.home) .new-tabs-service .new-service-btn:focus-visible {
    background-color: var(--color-primary-hover) !important;
}
/* Open/active tab → gold bar. */
body:not(.home) .new-tabs-service .new-service-item:has(.new-service-panel.is-open) .new-service-btn {
    background-color: var(--color-secondary) !important;
}
body:not(.home) .new-tabs-service .new-service-item:has(.new-service-panel.is-open) .new-service-btn h3 {
    color: var(--color-on-secondary) !important;
}
body:not(.home) .new-tabs-service .new-service-item:has(.new-service-panel.is-open) .new-service-btn .new-service-line {
    background: var(--color-on-secondary) !important;
}

/* ---- Section 3 CTA: use the homepage "View All" (Latest News) button style,
   relabelled Apply Now. Overrides the inline tabs.php <style> and the interior
   `.new-service-apply a` pill with the exact View All treatment: navy pill,
   14px uppercase, 3.5px tracking, 45px tall, 2.1rem side padding. */
body:not(.home) .new-service-apply {
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
    margin-top: 2rem;
}
body:not(.home) .new-service-apply a {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: auto !important;
    min-height: 45px;
    padding: 0 2.1rem !important;
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    line-height: 1.2;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    -webkit-transition: background-color var(--t), color var(--t);
            transition: background-color var(--t), color var(--t);
}
body:not(.home) .new-service-apply a:hover,
body:not(.home) .new-service-apply a:focus-visible {
    background-color: var(--color-secondary) !important;
    color: var(--color-on-secondary) !important;
}

/* ---- Section 4: #values — 64px rhythm + hero-style two-column grid ---- */
body.about-template #values {
    margin: 0 !important;
    padding-top: var(--hp-section-py) !important;
    padding-bottom: var(--hp-section-py) !important;
}
body.about-template #values > .inner {
    -ms-grid-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(1.5rem, 4vw, 4rem) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    -webkit-box-align: stretch !important;
        -ms-flex-align: stretch !important;
            align-items: stretch !important;
}
body.about-template #values > .inner > .image.left  { grid-column: 1 / 2 !important; }
body.about-template #values > .inner > .content.right { grid-column: 2 / 3 !important; }
body.about-template #values .image.left,
body.about-template #values .image.left > .inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
/* Framed image box (rounded, clipped) that fills the column; the synced swiper
   and its slides stretch to fill, and the photos cover the frame. */
body.about-template #values .image.left > .inner {
    position: relative;
    height: 100% !important;
    min-height: clamp(360px, 32vw, 520px);
    padding: 0 !important;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
body.about-template #values .image.left .swiper-container,
body.about-template #values .image.left .swiper-wrapper,
body.about-template #values .image.left .swiper-slide,
body.about-template #values .image.left .swiper-slide > .inner {
    height: 100% !important;
    position: relative;
}
/* Image positioned absolute inside the frame (like the archive hero) so the
   portrait photo fills the column via cover without dictating the row height —
   keeps the two columns equal-height with no dead space beside the copy. */
body.about-template #values .image.left .swiper-slide img,
body.about-template #values .image.left .swiper-slide picture {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    border-radius: 0 !important;
}
/* Content column flush to the top so copy + CTA stack cleanly beside the image. */
body.about-template #values .content.right,
body.about-template #values .content.right > .inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ---- Value tabs → match the Latest page filter pills exactly: a wrapping row
   of uppercase pills — navy fill + white for the active one, transparent with a
   navy label + light outline for the rest. Pills (not a dropdown) at every
   breakpoint; they wrap to new rows on narrow screens. ---- */
body.about-template #values .content .swiper-pagination {
    position: static !important;
    padding: 1.25rem 0 0 !important;
    margin: 0 !important;
}
body.about-template #values .content .swiper-pagination ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.about-template #values .content .swiper-pagination li {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    min-height: 36px;
    margin: 0 !important;
    padding: 0 1.1rem !important;
    background-color: transparent !important;
    color: var(--color-primary) !important;
    border: 1px solid #c9d3d9;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    -webkit-transition: background-color var(--t), color var(--t), border-color var(--t);
            transition: background-color var(--t), color var(--t), border-color var(--t);
}
body.about-template #values .content .swiper-pagination li:hover,
body.about-template #values .content .swiper-pagination li:focus-visible,
body.about-template #values .content .swiper-pagination li.active {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    border-color: var(--color-primary) !important;
}

/* ---- Content rhythm: tighten the oversized gaps (tabs → copy, intro → body,
   body → arrows) into an even, consistent cadence. ---- */
body.about-template #values .content .slider {
    margin-top: 1.5rem !important;
}
body.about-template #values .content .slide .intro,
body.about-template #values .content .slide .new-service-intro {
    margin-bottom: 0.75rem !important;
}
body.about-template #values .content .swiper-navigation {
    margin-top: 1.5rem !important;
}

/* Stack to one column on small screens (image above copy), like the hero. */
@media (max-width: 767.98px) {
    body.about-template #values > .inner {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
            -ms-flex-direction: column !important;
                flex-direction: column !important;
        gap: 1.5rem !important;
    }
    body.about-template #values .image.left,
    body.about-template #values .content.right {
        width: 100% !important;
        grid-column: auto !important;
    }
    body.about-template #values .image.left > .inner {
        height: clamp(240px, 60vw, 360px) !important;
        min-height: 0;
    }
}

/* Decorative primary-color gradient bands fading in from the left and right
   edges of the overview band. Wide screens only ( > 1300px ) so the colour
   never crowds the centred copy on narrower layouts. */
@media (min-width: 1300.02px) {
    body:not(.home) #overview.color-bg,
    body:is(.single-solution, .single-service, .single-industry) #content.color-bg {
        position: relative;
        overflow: hidden;
    }
    body:not(.home) #overview.color-bg::before,
    body:not(.home) #overview.color-bg::after,
    body:is(.single-solution, .single-service, .single-industry) #content.color-bg::before,
    body:is(.single-solution, .single-service, .single-industry) #content.color-bg::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: clamp(90px, 12vw, 240px);
        pointer-events: none;
        z-index: 0;
    }
    body:not(.home) #overview.color-bg::before,
    body:is(.single-solution, .single-service, .single-industry) #content.color-bg::before {
        left: 0;
        background: -webkit-gradient(linear, left top, right top, from(rgba(0, 79, 113, 0.22)), to(transparent));
        background: -o-linear-gradient(left, rgba(0, 79, 113, 0.22), transparent);
        background: linear-gradient(to right, rgba(0, 79, 113, 0.22), transparent);
    }
    body:not(.home) #overview.color-bg::after,
    body:is(.single-solution, .single-service, .single-industry) #content.color-bg::after {
        right: 0;
        background: -webkit-gradient(linear, right top, left top, from(rgba(0, 79, 113, 0.22)), to(transparent));
        background: -o-linear-gradient(right, rgba(0, 79, 113, 0.22), transparent);
        background: linear-gradient(to left, rgba(0, 79, 113, 0.22), transparent);
    }
    /* Keep the content above the gradient bands. */
    body:not(.home) #overview.color-bg > .inner,
    body:is(.single-solution, .single-service, .single-industry) #content.color-bg > .inner {
        position: relative;
        z-index: 1;
    }
}

/* ==========================================================================
   TEAM MEMBER DETAIL  (body.single-person)  — premium redesign
   --------------------------------------------------------------------------
   A full, from-scratch rebuild of the team member profile page, consistent
   with the finalized site design (navy #004F71 / gold #FFB81C, urbane type,
   pill buttons, rounded cards + soft shadows, the unified content container).

   Structure (new markup in parts/person/intro.php + single-person.php):
     1. .person-hero   — navy brand masthead: framed portrait + name, role,
                         location/unit meta and quick contact actions.
                         (Rendered OUTSIDE <main>, before it, via header.php.)
     2. .person-body   — two-column body inside <main>: the bio ("About")
                         beside a sticky "Get in touch" connect card.

   Desktop-first; tablet (<1024px) and mobile (<768px) layers follow. Reuses
   the global :root tokens (--color-*, --radius-*, --shadow-*, --t, --ease,
   --container-*). Scoped to body.single-person so nothing else is affected.
   ========================================================================== */

/* ---- 1. MASTHEAD --------------------------------------------------------- */
body.single-person #intro.person-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--color-primary);
    background-image: linear-gradient(135deg, #005f88 0%, #004F71 45%, #003a54 100%);
    color: #ffffff;
    padding-block: clamp(2.75rem, 2rem + 5vw, 5.5rem);
}
/* Subtle brand texture + gold depth glow behind the content. */
body.single-person #intro.person-hero .person-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url(../img/team/background.jpg);
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    mix-blend-mode: luminosity;
    pointer-events: none;
}
body.single-person #intro.person-hero::after {
    content: "";
    position: absolute;
    top: -30%;
    right: -10%;
    width: 60%;
    height: 120%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(255, 184, 28, 0.16), rgba(255, 184, 28, 0) 70%);
    pointer-events: none;
}
body.single-person #intro.person-hero .person-hero__inner {
    max-width: var(--container-inner);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    display: grid;
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}

/* Portrait */
body.single-person .person-hero__media {
    position: relative;
}
body.single-person .person-hero__photo {
    position: relative;
    z-index: 1;
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(160deg, #0a6690, #003a54);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body.single-person .person-hero__photo picture,
body.single-person .person-hero__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
/* Offset gold frame behind the portrait — a quiet premium accent. */
body.single-person .person-hero__media::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 14px;
    right: -14px;
    bottom: -14px;
    border: 2px solid rgba(255, 184, 28, 0.55);
    border-radius: var(--radius-lg);
    z-index: 0;
    pointer-events: none;
}
/* Gold corner tab on the portrait. */
body.single-person .person-hero__photo-accent {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 6px;
    background: var(--color-secondary);
    z-index: 2;
}
/* Initials placeholder (no portrait set). */
body.single-person .person-hero__photo.is-placeholder {
    display: grid;
    place-items: center;
}
body.single-person .person-hero__initials {
    font-family: urbane, sans-serif;
    font-size: clamp(3rem, 2rem + 4vw, 5rem);
    font-weight: 300;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.92);
}

/* Content */
body.single-person .person-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--color-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 1.4rem;
    transition: color var(--t), gap var(--t);
}
body.single-person .person-hero__back i,
body.single-person .person-hero__back svg {
    transition: transform var(--t);
}
body.single-person .person-hero__back:hover,
body.single-person .person-hero__back:focus-visible {
    color: #ffd062;
}
body.single-person .person-hero__back:hover i,
body.single-person .person-hero__back:hover svg {
    transform: translateX(-4px);
}
body.single-person .person-hero__name {
    color: #ffffff;
    font-family: urbane, sans-serif;
    font-weight: 300;
    font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.4rem);
    line-height: 1.07;
    margin: 0;
}
body.single-person .person-hero__role {
    color: var(--color-secondary);
    font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.35rem);
    font-weight: 600;
    line-height: 1.35;
    margin: 0.75rem 0 0;
}
body.single-person .person-hero__meta {
    list-style: none;
    margin: 1.35rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.6rem;
}
body.single-person .person-hero__meta li {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.98rem;
}
body.single-person .person-hero__meta i,
body.single-person .person-hero__meta svg {
    color: var(--color-secondary);
    font-size: 0.9em;
    width: 1em;
}

/* Quick actions */
body.single-person .person-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    margin-top: 2.1rem;
}
/* Hero actions use the brand pill metrics (uppercase, 14px / weight 400 /
   0.2em tracking, pill) — identical to the footer's on-navy CTA — so every
   button on the site reads as one system. Primary = gold (→ white on hover,
   like the footer); secondary = white outline (→ white fill, navy label). */
body.single-person .person-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7em;
    min-height: 3.2em;
    padding: 0 1.9em;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
body.single-person .person-hero__btn--primary {
    background-color: var(--color-secondary);
    color: var(--color-on-secondary);
}
body.single-person .person-hero__btn--primary:hover,
body.single-person .person-hero__btn--primary:focus-visible {
    background-color: #ffffff;
    color: var(--color-primary);
}
body.single-person .person-hero__btn--ghost {
    background-color: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.55);
}
body.single-person .person-hero__btn--ghost:hover,
body.single-person .person-hero__btn--ghost:focus-visible {
    background-color: #ffffff;
    color: var(--color-primary);
    border-color: #ffffff;
}
body.single-person .person-hero__social {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
body.single-person .person-hero__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    font-size: 1.05rem;
    text-decoration: none;
    transition: background-color var(--t), color var(--t), border-color var(--t), transform var(--t);
}
body.single-person .person-hero__social a:hover,
body.single-person .person-hero__social a:focus-visible {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-on-secondary);
    transform: translateY(-2px);
}

/* Masthead layout — two columns from 1024px (content left, portrait right). */
@media only screen and (min-width: 1024px) {
    body.single-person #intro.person-hero .person-hero__inner {
        grid-template-columns: 1fr minmax(290px, 350px);
        align-items: center;
    }
    body.single-person .person-hero__content { order: 1; }
    body.single-person .person-hero__media   { order: 2; }
}
/* Tablet / mobile — stacked & centered, portrait on top. */
@media only screen and (max-width: 1023.98px) {
    body.single-person #intro.person-hero .person-hero__inner {
        justify-items: center;
        text-align: center;
    }
    body.single-person .person-hero__media {
        width: 100%;
        max-width: 300px;
    }
    body.single-person .person-hero__meta,
    body.single-person .person-hero__actions {
        justify-content: center;
    }
    body.single-person .person-hero__back {
        margin-bottom: 1rem;
    }
}

/* ---- 2. BODY: bio + sticky connect card ---------------------------------- */
body.single-person #person-body.person-body {
    background-color: #ffffff;
    padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}
body.single-person .person-body__inner {
    max-width: var(--container-inner);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    display: grid;
    gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
@media only screen and (min-width: 1024px) {
    body.single-person .person-body__inner {
        grid-template-columns: minmax(0, 1fr) 500px;
        align-items: start;
    }
}

/* Bio column */
body.single-person .person-body__head {
    margin-bottom: 1.6rem;
}
body.single-person .person-body__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-secondary-hover);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
body.single-person .person-body__eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--color-secondary);
    display: inline-block;
}
body.single-person .person-body__title {
    color: var(--color-primary);
    font-family: urbane, sans-serif;
    font-weight: 300;
    font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem);
    line-height: 1.15;
    margin: 0.6rem 0 0;
}
body.single-person .person-body__bio {
    color: #2b363d;
    font-size: 1.0625rem;
    line-height: 1.8;
}
body.single-person .person-body__bio > :first-child { margin-top: 0; }
body.single-person .person-body__bio > :last-child  { margin-bottom: 0; }
body.single-person .person-body__bio p {
    margin: 0 0 1.3rem;
}
body.single-person .person-body__bio :is(h2, h3, h4) {
    color: var(--color-primary);
    margin: 2rem 0 0.75rem;
}
body.single-person .person-body__bio a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--t);
}
body.single-person .person-body__bio a:hover,
body.single-person .person-body__bio a:focus-visible {
    color: var(--color-secondary-hover);
}

/* Connect card */
body.single-person .person-body__aside {
    position: relative;
}
body.single-person .person-connect {
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid #e5ebef;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: clamp(2rem, 1.4rem + 1.8vw, 2.9rem);
}
/* Stick alongside the bio on desktop (declared AFTER the base block so the
   sticky position wins over the base `relative`). */
@media only screen and (min-width: 1024px) {
    body.single-person .person-connect {
        position: -webkit-sticky;
        position: sticky;
        top: calc(var(--header--height, 110px) + 1.5rem);
    }
}
body.single-person .person-connect__cap {
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-secondary), #ffd062);
}
body.single-person .person-connect__title {
    color: var(--color-primary) !important;
    font-size: 1.4rem !important;
    font-weight: 600;
    margin: 0.4rem 0 0;
}
body.single-person .person-connect__intro {
    color: #5a6b75;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0.75rem 0 0;
}
body.single-person .person-connect__list {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}
body.single-person .person-connect__item {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}
body.single-person .person-connect__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    background-color: #eaf1f6;
    color: var(--color-primary);
    font-size: 1.2rem;
}
body.single-person .person-connect__detail {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
body.single-person .person-connect__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a97a0;
}
body.single-person .person-connect__detail a {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color var(--t);
}
body.single-person .person-connect__detail a:hover,
body.single-person .person-connect__detail a:focus-visible {
    color: var(--color-secondary-hover);
}
body.single-person .person-connect__detail a span { color: inherit; }
body.single-person .person-connect__social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.5rem;
}
body.single-person .person-connect__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #eaf1f6;
    color: var(--color-primary);
    font-size: 1.05rem;
    text-decoration: none;
    transition: background-color var(--t), color var(--t), transform var(--t);
}
body.single-person .person-connect__social a:hover,
body.single-person .person-connect__social a:focus-visible {
    background-color: var(--color-primary);
    color: #ffffff;
    transform: translateY(-2px);
}
/* Primary card CTA — brand navy pill on white → gold on hover (the site's
   default .btn behaviour). Same pill metrics as the hero buttons so every
   button matches. (!important beats core's legacy cyan .btn fill.) */
body.single-person .person-connect__cta.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 3.2em;
    margin-top: 1.75rem;
    padding: 0 2em;
    border-radius: 999px;
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    border: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}
body.single-person .person-connect__cta.btn:hover,
body.single-person .person-connect__cta.btn:focus-visible {
    background-color: var(--color-secondary) !important;
    color: var(--color-on-secondary) !important;
}
body.single-person .person-connect__back {
    display: flex;
    width: -webkit-fit-content;
    width: fit-content;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color var(--t), gap var(--t);
}
body.single-person .person-connect__back i,
body.single-person .person-connect__back svg {
    transition: transform var(--t);
}
body.single-person .person-connect__back:hover,
body.single-person .person-connect__back:focus-visible {
    color: var(--color-secondary-hover);
}
body.single-person .person-connect__back:hover i,
body.single-person .person-connect__back:hover svg {
    transform: translateX(-4px);
}

/* Tablet / mobile: aside is a normal full-width card under the bio. */
@media only screen and (max-width: 1023.98px) {
    body.single-person .person-connect {
        max-width: 640px;
    }
}

/* Reduced motion: disable the lift / slide affordances. */
@media (prefers-reduced-motion: reduce) {
    body.single-person [class*="person-"] * {
        transition: none !important;
    }
    body.single-person .person-hero__btn:hover,
    body.single-person .person-hero__social a:hover,
    body.single-person .person-connect__cta.btn:hover,
    body.single-person .person-connect__social a:hover {
        transform: none !important;
    }
}

/* ==========================================================================
   UTILITY & DOCUMENT PAGES
   Appended 2026-10-16. Brings the remaining plain-content & utility templates
   (legal/policy, plain default pages, Site Map, Thank-you, 404, Resources)
   in line with the finished site design system. Reuses the global :root tokens
   (--color-*, --radius-*, --shadow-*, --container-inner/pad, --t*). CSS-only
   except two tiny PHP guards (page.php #content id typo, footer null $parent).
   ========================================================================== */

:root {
    --doc-measure: 50rem;          /* ~800px readable text column           */
    --doc-pad-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

/* ---- A. Document / legal pages ------------------------------------------
   Pattern: #intro (title hero) -> #overview (lead band, optional) ->
   #content > .inner > .wrap (Gutenberg body, flat or in nested <section>s).
   Scope `body.page` so single posts / block-built pages are untouched; the
   `#content .wrap` selector simply doesn't exist on ACF-block pages.          */

/* Title hero: clean, generous, with a short gold accent rule under the H1. */
body.policy-template #intro.columns,
body.site-map-template #intro.columns,
body.page-id-3681 #intro.columns,
body.page-id-5024 #intro.columns,
body.page-id-128 #intro.columns,
body.page-id-11964 #intro.columns {
    background-color: #ffffff;
    padding-block: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem) 0;
    border-bottom: 1px solid #e7ebee;
}
body.policy-template #intro .content.left > .inner,
body.site-map-template #intro .content.left > .inner,
body.page-id-3681 #intro .content.left > .inner,
body.page-id-5024 #intro .content.left > .inner,
body.page-id-128 #intro .content.left > .inner,
body.page-id-11964 #intro .content.left > .inner {
    max-width: var(--container-inner);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    padding-bottom: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
}
body.policy-template #intro h1,
body.site-map-template #intro h1,
body.page-id-3681 #intro h1,
body.page-id-5024 #intro h1,
body.page-id-128 #intro h1,
body.page-id-11964 #intro h1 {
    position: relative;
    margin: 0;
    padding-bottom: 1.1rem;
}
body.policy-template #intro h1::after,
body.site-map-template #intro h1::after,
body.page-id-3681 #intro h1::after,
body.page-id-5024 #intro h1::after,
body.page-id-128 #intro h1::after,
body.page-id-11964 #intro h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 4px;
    border-radius: 999px;
    background-color: var(--color-secondary);
}
/* Any intro description paragraph under these headings. */
body.policy-template #intro .content.left p,
body.page-id-3681 #intro .content.left p,
body.page-id-5024 #intro .content.left p {
    margin-top: 1.1rem;
    max-width: var(--doc-measure);
    font-size: 1.05rem;
    line-height: 1.7;
    color: #334049;
}

/* #overview lead band -> compact, left gold rule, reads as an executive summary.
   (Kills the tall dead-space the .columns grid gave it on single-column pages.)
   Scoped to Corp-Gov (3681) + Majority (5024). Privacy (131) + Legal (3474) are
   EXCLUDED — their 2nd section uses the centred Solutions-match treatment instead. */
body.page-id-3681 #overview.columns,
body.page-id-5024 #overview.columns {
    display: block;
    padding-block: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
}
body.page-id-3681 #overview > .inner,
body.page-id-5024 #overview > .inner {
    max-width: var(--container-inner);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    display: block;
}
body.page-id-3681 #overview > .inner > :is(h4, .content),
body.page-id-5024 #overview > .inner > :is(h4, .content) {
    max-width: var(--doc-measure);
    margin-inline: auto;   /* centre the lead column so it aligns with the body */
}
body.page-id-3681 #overview h4,
body.page-id-5024 #overview h4 {
    margin: 0 0 0.6rem;
    padding: 0 0 0 1.25rem !important;   /* align with the lead text; base adds ~49px top + min-height */
    min-height: 0 !important;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
}
body.page-id-3681 #overview .content,
body.page-id-5024 #overview .content {
    position: relative;
    padding: 0 0 0 1.25rem;        /* base rule adds 32px top/bottom padding */
    border-left: 3px solid var(--color-secondary);
    font-size: 1.15rem;
    line-height: 1.7;
    color: #334049;
}
body.page-id-3681 #overview .content p,
body.page-id-5024 #overview .content p {
    margin: 0;
}

/* Document body — readable measure + tidy rhythm (generalises the single-post
   article rules to every plain-content page). */
body.page:not(.home):not(.single-post) #content > .inner {
    max-width: var(--container-inner);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}
body.page:not(.home):not(.single-post) #content {
    padding-block: var(--doc-pad-block);
}
body.page:not(.home):not(.single-post) #content .wrap {
    max-width: var(--doc-measure);
    margin-inline: auto;
    color: #000000;
}
/* The policy body nests each topic in its own <section><div class="inner">. */
body.page:not(.home):not(.single-post) #content .wrap > section {
    margin-block: 2.5rem 0;
}
body.page:not(.home):not(.single-post) #content .wrap > section:first-child {
    margin-top: 0;
}
body.page:not(.home):not(.single-post) #content .wrap :is(p, ul, ol) {
    line-height: 1.75;
    margin-block: 0 1.15rem;
}
body.page:not(.home):not(.single-post) #content .wrap :is(ul, ol) {
    padding-left: 1.35rem;
}
body.page:not(.home):not(.single-post) #content .wrap :is(ul, ol) li {
    margin-block: 0.35rem;
}
body.page:not(.home):not(.single-post) #content .wrap ul { list-style: disc; }
body.page:not(.home):not(.single-post) #content .wrap ol { list-style: decimal; }
body.page:not(.home):not(.single-post) #content .wrap h2 {
    font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem);
    line-height: 1.2;
    font-weight: 300;
    margin-block: 0 0.9rem;
    padding-top: 1.25rem;
    border-top: 1px solid #d1d1d1;
}
body.page:not(.home):not(.single-post) #content .wrap > section:first-child h2 {
    padding-top: 0;
    border-top: 0;
}
body.page:not(.home):not(.single-post) #content .wrap :is(h3, h4) {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.35;
    margin-block: 1.6rem 0.5rem;
    color: var(--color-primary);
}
body.page:not(.home):not(.single-post) #content .wrap :is(h3, h4) strong { color: inherit; }
body.page:not(.home):not(.single-post) #content .wrap a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    -webkit-transition: color var(--t);
            transition: color var(--t);
}
body.page:not(.home):not(.single-post) #content .wrap a:hover {
    color: var(--color-secondary-hover);
}
/* Drop empty paragraphs the editor leaves between blocks. */
body.page:not(.home):not(.single-post) #content .wrap p:empty { display: none; }

/* ---- B. Site Map --------------------------------------------------------
   Markup: section.site-map > ul.depth-0 > li ( > a  [+ ul.depth-1.ml-6 > li > a] ).
   Turn the flat single-column list into a masonry of grouped link cards.      */
body.site-map-template .site-map.site-grid {
    padding-block: var(--doc-pad-block) !important;
}
body.site-map-template .site-map > ul.depth-0 {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
    -webkit-column-gap: 1.5rem;
       -moz-column-gap: 1.5rem;
            column-gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (max-width: 1023.98px) {
    body.site-map-template .site-map > ul.depth-0 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
}
@media (max-width: 639.98px) {
    body.site-map-template .site-map > ul.depth-0 { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
}
/* Each top-level entry = a card. */
body.site-map-template .site-map > ul.depth-0 > li {
    -webkit-column-break-inside: avoid;
                 break-inside: avoid;
    -webkit-box-shadow: var(--shadow-xs);
            box-shadow: var(--shadow-xs);
    background-color: #ffffff;
    border: 1px solid #e7ebee;
    border-radius: var(--radius-md);
    padding: 1.4rem 1.5rem 1.5rem;
    margin: 0 0 1.5rem;
    list-style: none;
}
/* Card heading = the top-level page link. */
body.site-map-template .site-map > ul.depth-0 > li > a {
    display: block;
    font-family: urbane, sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    padding-bottom: 0.75rem;
    margin-bottom: 0.4rem;
    border-bottom: 2px solid var(--color-secondary);
    -webkit-transition: color var(--t);
            transition: color var(--t);
}
body.site-map-template .site-map > ul.depth-0 > li > a:hover {
    color: var(--color-secondary-hover);
}
/* Nested children. */
body.site-map-template .site-map ul.depth-1,
body.site-map-template .site-map ul[class*="depth-"]:not(.depth-0) {
    list-style: none;
    margin: 0.5rem 0 0 !important;
    padding: 0;
}
body.site-map-template .site-map ul.depth-1 li { list-style: none; margin: 0; }
body.site-map-template .site-map ul.depth-1 li a {
    display: block;
    position: relative;
    padding: 0.4rem 0 0.4rem 1rem;
    color: #334049;
    font-size: 0.97rem;
    line-height: 1.4;
    text-decoration: none;
    -webkit-transition: color var(--t), -webkit-transform var(--t);
            transition: color var(--t), transform var(--t);
}
body.site-map-template .site-map ul.depth-1 li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 999px;
    background-color: var(--color-secondary);
    -webkit-transition: -webkit-transform var(--t);
            transition: transform var(--t);
}
body.site-map-template .site-map ul.depth-1 li a:hover {
    color: var(--color-primary);
    -webkit-transform: translateX(3px);
            transform: translateX(3px);
}
/* Deeper nesting (3rd level) indents a touch more. */
body.site-map-template .site-map ul.depth-1 ul {
    margin-top: 0.1rem !important;
    padding-left: 1rem;
}

/* ---- C. Thank-you pages -------------------------------------------------- */
/* C1. Dedicated templates (.thank-you-section: generic / equipment / revolving).
   They ship inline <style> with off-brand colours + a capitalize transform.
   Overridden here (body/section-scoped selectors beat their 1-class inline rules
   regardless of source order) and framed as a centred brand card.             */
.thank-you-section {
    padding-block: var(--doc-pad-block) !important;
    padding-inline: var(--container-pad);
}
.thank-you-section .thank-you-content {
    max-width: 760px !important;
    background-color: #ffffff;
    border: 1px solid #e7ebee;
    border-top: 4px solid var(--color-secondary);
    border-radius: var(--radius-lg);
    -webkit-box-shadow: var(--shadow-md);
            box-shadow: var(--shadow-md);
    padding: clamp(2rem, 1.4rem + 3vw, 3.5rem) clamp(1.5rem, 1rem + 3vw, 3.5rem);
}
.thank-you-section .check-icon {
    width: 88px !important;
    margin-bottom: 0.5rem;
}
.thank-you-section .thank-you-heading {
    padding: 0 0 1.25rem !important;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #e7ebee !important;
}
.thank-you-section .thank-you-heading h1 {
    font-family: urbane, sans-serif;
    font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem) !important;
    line-height: 1.3 !important;
    font-weight: 300 !important;
    color: var(--color-primary) !important;
}
.thank-you-section .thank-you-message {
    font-size: 1rem !important;
    line-height: 1.75 !important;
    text-transform: none !important;   /* kill the odd Title-Case transform */
    color: #334049 !important;
}
.thank-you-section .equipment-thank-you { color: #334049; }
.thank-you-section .equipment-thank-you ul { color: inherit !important; }
.thank-you-section :is(.thank-you-message a, .equipment-thank-you a) {
    color: var(--color-primary) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.thank-you-section :is(.thank-you-message a, .equipment-thank-you a):hover {
    color: var(--color-secondary-hover) !important;
}

/* C2. Plain default /thank-you/ (page-id-11964): #intro title + one-line body.
   Recentre it as a confirmation with a CSS gold check badge (no FA/img needed). */
body.page-id-11964 #intro.columns {
    border-bottom: 0;
    padding-bottom: 0;
    text-align: center;
}
body.page-id-11964 #intro .content.left > .inner {
    text-align: center;
    padding-bottom: 0;
}
body.page-id-11964 #intro .content.left > .inner::before {
    content: "\2713";
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background-color: var(--color-secondary);
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    -webkit-box-shadow: 0 10px 24px rgba(255, 184, 28, 0.35);
            box-shadow: 0 10px 24px rgba(255, 184, 28, 0.35);
}
body.page-id-11964 #intro h1 { padding-bottom: 1rem; }
body.page-id-11964 #intro h1::after {
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}
body.page-id-11964 #content {
    padding-top: 1.25rem !important;
    text-align: center;
}
body.page-id-11964 #content .wrap {
    max-width: 620px;
}
body.page-id-11964 #content .wrap p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #334049;
}

/* ---- D. 404 error page --------------------------------------------------
   Markup: #content > .inner > #message > .inner > ( .error-code + h1 + p +
   .error-actions[.btn + .btn.btn-ghost] ). Centred brand error state.         */
body.error404 #content {
    /* Match the homepage section rhythm (top/bottom), not a custom min-height. */
    padding-top: var(--hp-section-py);
    padding-bottom: var(--hp-section-py);
    padding-inline: var(--container-pad);
}
body.error404 #message > .inner {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
}
body.error404 #message .error-code {
    display: block;
    font-family: urbane, sans-serif;
    font-size: clamp(4.5rem, 3rem + 8vw, 9rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-primary);
}
body.error404 #message .error-code::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin: 1rem auto 0;
    border-radius: 999px;
    background-color: var(--color-secondary);
}
body.error404 #message h1 {
    font-family: urbane, sans-serif;
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
    font-weight: 300;
    color: var(--color-primary);
    margin: 1.5rem 0 0.75rem;
}
body.error404 #message p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #334049;
    margin: 0 auto 2rem;
    max-width: 48ch;
}
body.error404 #message .error-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0.9rem;
}
/* Buttons match the homepage system: pill radius, 14px / normal weight label,
   navy -> gold on hover (base .btn already), with the same pressed feedback. */
body.error404 #message .btn {
    border-radius: 999px;
    border: 2px solid transparent;   /* match the ghost's box height */
    font-size: 14px;
    font-weight: normal;
    -webkit-transition: background-color var(--t), color var(--t), -webkit-transform var(--t-fast);
    transition: background-color var(--t), color var(--t), transform var(--t-fast);
}
body.error404 #message .btn:active {
    -webkit-transform: translateY(1px);
            transform: translateY(1px);
}
/* Ghost / secondary button variant used on the 404 (and reusable elsewhere) —
   same pill metrics as the primary, outline that fills navy on hover. */
.btn.btn-ghost {
    background-color: transparent !important;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary) !important;
    -webkit-transition: background-color var(--t), color var(--t), -webkit-transform var(--t-fast);
            transition: background-color var(--t), color var(--t), transform var(--t-fast);
}
.btn.btn-ghost:hover,
.btn.btn-ghost:focus-visible {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}

/* ---- E. Empty parent landing pages -> child-page card index -------------
   page.php now renders .child-cards for a page with no content but published
   children (e.g. Resources -> Privacy / Legal). Card grid matching the system. */
body.page:not(.home):not(.single-post) #content .child-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1.25rem;
    max-width: var(--container-inner);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}
body.page .child-cards .child-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem 1.6rem;
    background-color: #ffffff;
    border: 1px solid #e7ebee;
    border-radius: var(--radius-md);
    -webkit-box-shadow: var(--shadow-xs);
            box-shadow: var(--shadow-xs);
    text-decoration: none;
    color: var(--color-primary);
    -webkit-transition: -webkit-transform var(--t), -webkit-box-shadow var(--t), border-color var(--t);
            transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
body.page .child-cards .child-card__title {
    font-family: urbane, sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
}
body.page .child-cards .child-card :is(i, svg) {
    color: var(--color-secondary);
    -webkit-transition: -webkit-transform var(--t);
            transition: transform var(--t);
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
}
@media (hover: hover) {
    body.page .child-cards .child-card:hover {
        -webkit-transform: translateY(-4px);
                transform: translateY(-4px);
        -webkit-box-shadow: var(--shadow-md);
                box-shadow: var(--shadow-md);
        border-color: #d7dde1;
    }
    body.page .child-cards .child-card:hover :is(i, svg) {
        -webkit-transform: translateX(4px);
                transform: translateX(4px);
    }
}
body.page:not(.home):not(.single-post) #content:has(.child-cards) {
    padding-block: var(--doc-pad-block);
}

/* ---- C1b. Thank-you pages — premium polish (final touch) -----------------
   Refines spacing / alignment / type / shadow / hierarchy on the existing white
   .thank-you-section + white .thank-you-content card. No colour or structural
   changes; brand tokens only. Shared framing applies to all three thank-you
   templates; the message-emphasis is scoped to /thanks-you/ (thank-you-template). */

/* Section rhythm matches the homepage sections (as on the 404). */
.thank-you-section {
    padding-top: var(--hp-section-py) !important;
    padding-bottom: var(--hp-section-py) !important;
}

/* The white card: more balanced padding + a softer, layered premium shadow. */
.thank-you-section .thank-you-content {
    max-width: 720px !important;
    padding: clamp(2.25rem, 1.5rem + 3.5vw, 3.75rem) clamp(1.75rem, 1rem + 3.5vw, 3.75rem) !important;
    border-radius: var(--radius-lg);
    -webkit-box-shadow: 0 24px 60px -24px rgba(0, 27, 40, 0.22), 0 8px 22px -14px rgba(0, 27, 40, 0.12);
            box-shadow: 0 24px 60px -24px rgba(0, 27, 40, 0.22), 0 8px 22px -14px rgba(0, 27, 40, 0.12);
}

/* Heading: tidy type + swap the full-width divider for a short centred accent
   (the brand's 56x3 gold rule motif used across the site). */
.thank-you-section .thank-you-heading {
    position: relative;
    padding: 0 0 1.5rem !important;
    margin-bottom: 1.5rem;
    border-bottom: 0 !important;
}
.thank-you-section .thank-you-heading::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 56px;
    height: 3px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    border-radius: 999px;
    background-color: var(--color-secondary);
}
.thank-you-section .thank-you-heading h1 {
    letter-spacing: -0.01em;
    line-height: 1.25 !important;
}

/* Messages: tidy rhythm + a comfortable reading measure. */
.thank-you-section .thank-you-message {
    margin-top: 1rem !important;
}
.thank-you-section :is(.thank-you-message a, .equipment-thank-you a) {
    text-underline-offset: 3px;
    -webkit-text-decoration-thickness: 1px;
            text-decoration-thickness: 1px;
}

/* /thanks-you/ only (centred copy): readable measure + lead-paragraph emphasis. */
body.thank-you-template .thank-you-content .thank-you-message {
    max-width: 52ch;
    margin-inline: auto;
}
body.thank-you-template .thank-you-content .thank-you-message:first-of-type {
    font-size: 1.1rem !important;
    color: var(--color-primary) !important;
}

/* /thanks-you/ card: adopt the EXACT "What We Do" homepage card gradient
   (new-style.css:96-99), colours + direction unchanged. Nothing else touched. */
body.thank-you-template .thank-you-content {
    background-color: #f5f8fb;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fbfcfe), to(#eef3f8));
    background-image: linear-gradient(180deg, #fbfcfe 0%, #eef3f8 100%);
}

/* ---- Legal Policy (3474) + Privacy Policy (131) — shared polish -----------
   Both pages share this identical treatment (per user: Privacy matches Legal).
   - #intro hero: equal/balanced top+bottom padding on the section (the shared
     doc-hero rule split it section-top / inner-bottom = unequal); inners zeroed
     so the title sits flush with the left gutter.
   - #overview (2nd section): the centred Solutions-match band (see the :is() rule
     above) + .content padding zeroed.
   - #content (3rd section): same top/bottom spacing as #overview; inner flush;
     ordered-list markers hidden + li padding zeroed. */
body:is(.page-id-131, .page-id-3474) #intro.columns {
    padding-top: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
    padding-bottom: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
}
body:is(.page-id-131, .page-id-3474) #intro.columns > .inner {
    padding: 0;
}
body:is(.page-id-131, .page-id-3474) #intro.columns > .inner > .content.left {
    padding: 0;
}
body:is(.page-id-131, .page-id-3474) #intro .content.left > .inner {
    padding: 0;
}
body:is(.page-id-131, .page-id-3474) #overview .content {
    padding: 0;
}
/* Privacy's #overview has a "General Statement" <h4> that Legal doesn't; render
   it as a clean centred eyebrow (reset the base ~49px top padding + min-height). */
body.page-id-131 #overview h4 {
    margin: 0 0 0.75rem;
    padding: 0 !important;
    min-height: 0 !important;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
}
body:is(.page-id-131, .page-id-3474) #content .inner {
    padding: 0 !important;   /* beat the generic `#content > .inner` padding-inline */
}
/* Third section (#content) uses the same top/bottom spacing as the second
   section (#overview = var(--hp-section-py)); overrides the generic doc padding. */
body:is(.page-id-131, .page-id-3474) #content {
    padding-top: var(--hp-section-py) !important;
    padding-bottom: var(--hp-section-py) !important;
}
body:is(.page-id-131, .page-id-3474) #content ol li::before {
    display: none !important;
}
body:is(.page-id-131, .page-id-3474) #content ol li {
    padding: 0 !important;
}

/* ==========================================================================
   Gravity Forms / admin field hiding
   --------------------------------------------------------------------------
   Migrated out of the inline <style> that functions.php injected into every
   page's <head> (add_custom_styles_to_head). Moving it into the enqueued
   stylesheet keeps it out of the markup and makes it robust to TranslatePress's
   head re-serialisation. Behaviour is unchanged.
   ========================================================================== */
#field_6_104 {
    visibility: hidden;
}
#field_6_111 h3 {
    display: none;
}
.admin-hidden-markup {
    display: none;
}

/* ==========================================================================
   Thank-you pages  (Thank You / Equipment Thank You / Revolving Thank You)
   --------------------------------------------------------------------------
   Consolidated out of three near-identical inline <style> blocks that lived in
   templates/thank-you.php, equipment-thank-you.php and revolving-thank-you.php
   (they were almost byte-for-byte copies). Only #intro is body-scoped to the
   three template classes — it's a generic id used elsewhere; the bespoke
   .thank-you-* / .equipment-thank-you classes exist only on these pages so they
   stay unscoped, matching the rest of this stylesheet. The placeholder
   #003b5c / #c89b3c (whose own comments read "change to your primary/secondary
   color") were swapped for the brand --color-primary / --color-secondary tokens.
   ========================================================================== */
body:is(.thank-you-template, .equipment-thank-you-template, .revolving-thank-you-template) #intro {
    display: none;
}
.thank-you-section {
    padding: 96px 20px;
}
.thank-you-content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.check-icon {
    width: 112px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}
.thank-you-heading {
    padding: 20px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.thank-you-heading h1 {
    margin: 0;
    font-size: 35px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--color-primary);
}
/* The simple Thank You page uses a smaller headline than the two application
   confirmations (Equipment / Revolving). */
body.thank-you-template .thank-you-heading h1 {
    font-size: 25px;
}
.thank-you-heading p {
    margin: 12px 0 0;
    font-size: 18px;
    line-height: 1.5;
    text-transform: capitalize;
}
.thank-you-message {
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 1.7;
    text-transform: capitalize;
    color: #000;
}
.equipment-thank-you {
    text-align: left;
}
.equipment-thank-you ul {
    list-style: disc;
    margin-left: 30px;
    margin-top: 12px;
    color: #000;
}
.equipment-thank-you ul li a,
.thank-you-message a {
    font-weight: 700;
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}
.equipment-thank-you ul a:hover,
.thank-you-message a:hover {
    color: var(--color-secondary);
}
@media (max-width: 639px) {
    .thank-you-section {
        padding: 48px 20px;
    }
    .thank-you-heading h1 {
        font-size: 25px;
    }
    .thank-you-heading p,
    .thank-you-message {
        font-size: 16px;
    }
}

/* ==========================================================================
   Apply-Now page  (body.apply-now-template)
   --------------------------------------------------------------------------
   Migrated out of the three theme-authored inline <style> blocks in
   templates/apply-now.php (the two FormAssembly vendor blocks embedded inside
   the form markup were left in place). Brand colours tokenised: exact #004f71
   → --color-primary and #6ad1e3 → --color-tertiary, and the off-brand
   placeholder navy #003b70 → --color-primary (brand-navy alignment, approved).
   Other decorative colours (#45c3da, #f5a623, #16466f, #0066a6, #12304a …) are
   left exact. The generic FormAssembly selectors (.wFormContainer, .wForm,
   .supportInfo) are scoped to body.apply-now-template so the overrides stay on
   this page; the bespoke .finance-*/.apply-*/.expect-* classes are unique to
   this template and stay unscoped, matching the rest of this stylesheet.
   Empty comment-only rules from the inline blocks were dropped.
   ========================================================================== */

/* --- Financing section ---------------------------------------------------- */
.apply-financing-section {
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    margin-bottom: 50px;
}
.financing-container {
    margin: 0 auto;
}
.financing-container h3.business-title {
    margin: 0 0 25px;
    text-align: center;
    color: var(--color-primary);
    font-size: 25px;
    line-height: 1.3;
    font-weight: 700;
}
.financing-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
.finance-card {
    padding: 20px;
    box-sizing: border-box;
    border: 2px solid var(--color-primary);
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.4s ease;
    gap: 15px;
}
.finance-card:hover {
    border-color: var(--color-tertiary);
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25);
}
.finance-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3px;
}
.finance-icon svg {
    width: 100px;
}
.heart-icon {
    width: 58px;
    height: 60px;
    position: relative;
}
.heart {
    position: absolute;
    width: 29px;
    height: 43px;
    top: 7px;
    border-radius: 20px 20px 4px 4px;
}
.heart-left {
    left: 4px;
    background: #45c3da;
    transform: rotate(-42deg);
    transform-origin: bottom right;
}
.heart-right {
    right: 4px;
    background: #f5a623;
    transform: rotate(42deg);
    transform-origin: bottom left;
}
.finance-card h3 {
    color: var(--color-primary);
    font-size: 20px;
    line-height: 1.08;
    font-weight: 700;
}
.finance-line {
    width: 52px;
    height: 2px;
    background: #4bc7e5;
    margin-bottom: 13px;
}
.finance-card p {
    margin: 0;
    color: #16466f;
    font-weight: 400;
}
.finance-button {
    width: 100%;
    margin-top: auto;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
    transition: background 0.2s ease, transform 0.2s ease;
}
.finance-button:hover {
    background: var(--color-tertiary);
    transform: translateY(-1px);
}
.finance-button .arrow {
    position: absolute;
    right: 17px;
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
}
@media (max-width: 992px) {
    .financing-cards {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 770px;
        margin: 0 auto;
    }
    .finance-button .arrow { display: none; }
}
@media (max-width: 700px) {
    .apply-financing-section {
        padding: 25px 15px;
    }
    .financing-container h3 {
        margin-bottom: 20px;
    }
    .finance-card {
        min-height: 300px;
        padding: 20px;
    }
    .desktop-break {
        display: none;
    }
}
@media (max-width: 400px) {
    .finance-button {
        font-size: 9px;
    }
}

/* --- Application form section + "What to expect" -------------------------- */
.apply-form-blk .htmlContent p,
.apply-form-blk .htmlContent span {
    color: black !important;
    font-weight: 500 !important;
}
body.apply-now-template .wFormContainer .actions .primaryAction:hover {
    background-color: var(--color-tertiary);
}
body.apply-now-template .wFormContainer .wForm {
    margin-top: 0 !important;
}
.apply-form-section {
    display: grid;
    gap: 50px;
    justify-content: center;
}
.apply-form-text {
    position: sticky;
    top: 120px;
}
.apply-form-text h3 {
    font-size: 22px;
    color: var(--color-primary);
    margin-bottom: 20px;
    text-align: center;
    font-weight: 600;
}
.apply-form-btn {
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.apply-form-btn-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}
.apply-form-btn-inner a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 400;
    text-decoration: none;
    padding: 15px;
    border: 2px solid var(--color-primary);
    text-align: center;
    justify-content: center;
    transition: all 0.4s ease;
}
.apply-form-btn-inner a:hover {
    border-color: var(--color-tertiary);
    background: #f1f1f1;
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25);
}
.apply-form-btn-inner a svg {
    width: 50px;
}
body.apply-now-template .supportInfo {
    display: none;
}
.what-to-expect-section {
    margin-top: 30px;
    background: #f7f9fb;
    padding: 40px;
}
.apply-section-heading {
    text-align: center;
    margin-bottom: 25px;
}
.apply-section-heading h2 {
    font-size: 25px;
    color: var(--color-primary);
    text-align: center;
    font-weight: 600;
}
.expect-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.expect-card {
    background: #ffffff;
    padding: 35px 30px;
    border-radius: 12px;
    border: 1px solid #e5e9ef;
    text-align: left;
    transition: all 0.3s ease;
}
.expect-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.step-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #0066a6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}
.step-icon span {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}
.expect-card h3 {
    color: #12304a;
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 15px;
}
.expect-card p {
    color: #5c6773;
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}
.apply-review {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 30px;
}
@media (max-width: 1024px) {
    .apply-form-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .apply-form-text {
        max-width: 700px;
        margin: 0 auto;
    }
    body.apply-now-template .wFormContainer .wFormHeader {
        background-position: center;
    }
    body.apply-now-template .wFormContainer .wForm .wFormTitle {
        margin: 0 auto;
        text-align: center;
    }
    body.apply-now-template .wFormContainer {
        margin: 0 auto !important;
    }
    body.apply-now-template .wFormContainer .actions .primaryAction {
        display: flex;
        margin: 0 auto;
    }
}
@media (max-width: 992px) {
    .expect-grid {
        grid-template-columns: 1fr;
    }
}
@media only screen and (max-width: 768px) {
    body.apply-now-template .wForm .inline div.oneField {
        display: block;
    }
    body.apply-now-template .wForm .inputWrapper,
    body.apply-now-template #tfa_367,
    body.apply-now-template #tfa_10,
    body.apply-now-template #tfa_7, body.apply-now-template *[id^="tfa_7["],
    body.apply-now-template #tfa_9,
    body.apply-now-template #tfa_369,
    body.apply-now-template #tfa_12,
    body.apply-now-template #tfa_14, body.apply-now-template *[id^="tfa_14["],
    body.apply-now-template #tfa_382, body.apply-now-template *[id^="tfa_382["],
    body.apply-now-template #tfa_380, body.apply-now-template *[id^="tfa_380["],
    body.apply-now-template #tfa_4, body.apply-now-template *[id^="tfa_4["] {
        width: 100% !important;
    }
    .what-to-expect-section {
        padding: 30px 20px;
    }
}

/* ==========================================================================
   SOLUTIONS + INDUSTRY inner pages — service-listing 1:1 with the homepage
   (body:is(.single-solution, .single-service, .single-industry))
   --------------------------------------------------------------------------
   Rebuilds the #listing / #content / section rhythm of the Solution and
   Industry single pages to the finished homepage look: the "What We Do" card
   treatment on the service cards (soft gradient surface, 16px radius, soft navy
   shadow, a centred icon -> title -> text -> button column that lifts onto a
   clean white card with a gold top-cap + gold button + icon zoom on hover),
   consistent --hp-section-py band rhythm, and a centred content measure. The
   shared #intro hero and #faqs accordion come from the site-wide
   `body:not(.home)` rules, so they already match. (Note: most Industry pages
   currently leave the `is-services` field empty, so no #listing renders there
   yet — this keeps them consistent with Solutions whenever one is populated.)
   Reuses the global :root tokens.
   ========================================================================== */

/* --- Section rhythm: homepage band padding -------------------------------- */
body:is(.single-solution, .single-service, .single-industry) #listing,
body:is(.single-solution, .single-service, .single-industry) #content,
body:is(.single-solution, .single-service, .single-industry) #faqs {
    padding-top: var(--hp-section-py);
    padding-bottom: var(--hp-section-py);
}
/* FAQ band: give #faqs the same soft light-gray band as #overview / #content so
   the white accordion cards + framed image read as their own clean section and
   the page keeps one consistent band colour. faq.php only adds the band class on
   Service/Industry (Solution gets none), so set it on the element itself with the
   same token across all three CPTs. */
body:is(.single-solution, .single-service, .single-industry) #faqs {
    background-color: rgb(238, 241, 243) !important;
    background-image: none !important;
    margin-top: 0 !important;
}
body:is(.single-solution, .single-service, .single-industry) #intro {
    padding-bottom: var(--hp-section-py);
}
/* Core sets `#listing { --aspectRatio: 140% }` and paints it as a padding-top
   spacer on each card, which shoved the icon/content down and left a big empty
   gap at the TOP of every card. Clear it (same as the archive listings) so the
   cards size to their content. */
body:is(.single-solution, .single-service, .single-industry) #listing {
    --aspectRatio: auto;
}

/* --- #listing: centred section header ------------------------------------- */
body:is(.single-solution, .single-service, .single-industry) #listing > .inner {
    max-width: var(--container-inner);
    margin-inline: auto;
    /* Core gives this .inner 2rem top/bottom padding and the <h2> another
       2rem — stacked on top of the section's 64px padding that left ~96px of
       space above the heading and below the cards. Zero both so the section's
       top/bottom spacing is exactly the 64px band padding, like the Services
       "Our Services" section. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body:is(.single-solution, .single-service, .single-industry) #listing > .inner > h2 {
    text-align: center;
    padding: 0;
    /* 2rem gap below the heading (matches the Services section's 32px row-gap
       between its heading and content). */
    margin: 0 0 2rem;
}
body:is(.single-solution, .single-service, .single-industry) #listing > .inner > h2 + p {
    text-align: center;
    max-width: 60ch;
    margin-top: 0;
    margin-inline: auto;
    /* 2rem gap between the intro copy and the cards. */
    margin-bottom: 2rem;
}


/* --- Section 4 (#content) styled like Section 2 (#overview): a centred
   light-gray band. Match #overview's background, its centred 1200px measure and
   centred text (the #content band shipped faint-gray with left-aligned copy). */
body:is(.single-solution, .single-service, .single-industry) #content {
    background-color: rgb(238, 241, 243) !important;
}
body:is(.single-solution, .single-service, .single-industry) #content > .inner {
    -ms-grid-columns: minmax(0, 1200px);
    grid-template-columns: minmax(0, 1200px);
    max-width: var(--container-inner);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-inline: auto;
    text-align: center;
    /* Core adds 2rem top + a large bottom padding on this .inner on top of the
       section's 64px band padding; zero it so the section top/bottom is exactly
       64px, like #overview / #listing. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body:is(.single-solution, .single-service, .single-industry) #content > .inner > *,
body:is(.single-solution, .single-service, .single-industry) #content :is(h1, h2, h3, h4, h5, p, li) {
    text-align: center;
}
/* Match #overview's tighter 12px inter-paragraph rhythm (the #content copy
   shipped a looser ~23px gap between paragraphs — the "extra spacing"). */
body:is(.single-solution, .single-service, .single-industry) #content :is(p, ul, ol) + :is(p, ul, ol) {
    margin-top: 0.75rem !important;
}
/* The #content copy is nested in an extra `<section> > .inner` wrapper that core
   gives 32px top/bottom padding and full width; #overview centres its copy in a
   1200px column with no such padding. Cap the nested inner to a centred 1200px
   column and drop the extra padding so it matches #overview exactly. */
body:is(.single-solution, .single-service, .single-industry) #content > .inner > section,
body:is(.single-solution, .single-service, .single-industry) #content > .inner > section > .inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body:is(.single-solution, .single-service, .single-industry) #content > .inner > section > .inner {
    max-width: 1200px;
    margin-inline: auto;
}
/* The copy is centre-aligned (to match #overview), which left the <ul> bullets
   orphaned at the far-left of the column, detached from their centred text.
   Drop the default markers + indent so the list items read as clean centred
   lines, consistent with the paragraphs around them. */
body:is(.single-solution, .single-service, .single-industry) #content :is(ul, ol) {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}
body:is(.single-solution, .single-service, .single-industry) #content :is(ul, ol) li {
    text-align: center;
    margin-top: 0.4rem;
}
body:is(.single-solution, .single-service, .single-industry) #content :is(ul, ol) li::before {
    content: none;
}

/* --- Section 5 (#faqs) styled like Section 1 (#intro hero): an even 50/50
   two-column row with a framed, contained image that fills the column height
   next to the accordion. Image stays on the left, accordion on the right. --- */
body:is(.single-solution, .single-service, .single-industry) #faqs > .inner {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr clamp(1.5rem, 4vw, 4rem) 1fr;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 4rem);
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    /* Zero core's extra 2rem .inner padding so the section top/bottom is exactly
       the 64px band padding, like the other sections. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body:is(.single-solution, .single-service, .single-industry) #faqs > .inner > .image,
body:is(.single-solution, .single-service, .single-industry) #faqs > .inner > .content {
    -ms-grid-column: auto;
    grid-column: auto !important;
    margin: 0 !important;
    min-height: 0 !important;
}
body:is(.single-solution, .single-service, .single-industry) #faqs > .inner > .image {
    -ms-grid-column: 1;
    grid-column: 1 / 2 !important;
}
body:is(.single-solution, .single-service, .single-industry) #faqs > .inner > .content {
    -ms-grid-column: 3;
    grid-column: 2 / 3 !important;
}
/* Framed image box (rounded, clipped) that fills the full column width + height.
   Core caps this .inner at 600px and right-aligns it (margin-left:auto) inside
   the column, which left the image offset to the right — reset so it fills. */
body:is(.single-solution, .single-service, .single-industry) #faqs .image > .inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
body:is(.single-solution, .single-service, .single-industry) #faqs .image img,
body:is(.single-solution, .single-service, .single-industry) #faqs .image picture {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: var(--radius-lg);
    -o-object-fit: cover;
       object-fit: cover;
}
/* Below 768px the columns stack (image above the accordion) — same as the hero. */
@media (max-width: 767.98px) {
    body:is(.single-solution, .single-service, .single-industry) #faqs > .inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 1.5rem;
    }
    /* Stacked image spans the same width as the accordion column (core leaves a
       full-bleed width on .image.left that overflowed the right gutter). */
    body:is(.single-solution, .single-service, .single-industry) #faqs .image {
        width: 100% !important;
        max-width: 100% !important;
    }
    body:is(.single-solution, .single-service, .single-industry) #faqs .image > .inner {
        height: clamp(240px, 60vw, 360px) !important;
    }
}

/* ==========================================================================
   Left-right (.columns) sections — contain the image, matching the About hero
   --------------------------------------------------------------------------
   Core full-bleeds every .columns image off the viewport edge with a big
   negative margin (.image.left -> margin-left, .image.right -> margin-right,
   both calc(-100vw + ...)). The About hero reads as contained within the centred
   page container, but the service / solution / industry heroes and the
   #faqs / #quote / overview image rows inherited that full-bleed, so their
   photos ran off the screen edge — inconsistent with the About hero. Neutralise
   the offsets site-wide so every left-right section's image stays inside the
   centred grid column, exactly like the About hero. The contact page
   (page-id-51) is excluded: its #intro "image" column is a full-width Google map
   with its own sizing.
   ========================================================================== */
body:not(.home):not(.page-id-51) section[id].columns section.image.left {
    margin-left: 0 !important;
}
body:not(.home):not(.page-id-51) section[id].columns section.image.right {
    margin-right: 0 !important;
}

/* ==========================================================================
   FAQ accordion — modern card look   (body:not(.home) #faqs)
   --------------------------------------------------------------------------
   Each question is a rounded white card with a soft border + shadow and a gap
   between items (replacing the flat hairline-divided list). The +/- toggle is a
   circular light-navy chip whose plus turns to a minus and fills brand-navy when
   the item opens. Open/close is still jQuery slideToggle on
   `.accordion-panel > .inner` (core.js) — its height/display/padding are left to
   the JS; this is visual styling only. Applies to every interior page's FAQ so
   Services / Solutions / Industry stay consistent.
   ========================================================================== */
/* Section heading ("Frequently Asked Questions"): a readable section heading
   (was a tiny 0.8rem uppercase eyebrow). Larger, title-case, tighter tracking so
   it reads as a proper heading above the accordion. */
body:not(.home) #faqs .content > .inner > h4 {
    font-size: clamp(1.5rem, 1rem + 1.6vw, 1.875rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--color-primary);
    margin: 0 0 1.5rem;
}
/* Item card */
body:not(.home) #faqs .accordion-item {
    background: #ffffff;
    border: 1px solid #e7ebee !important;
    border-radius: var(--radius-md);
    -webkit-box-shadow: var(--shadow-xs);
            box-shadow: var(--shadow-xs);
    padding: 0 !important;
    margin-bottom: 0.75rem;
    overflow: hidden;
    -webkit-transition: box-shadow var(--t), border-color var(--t);
            transition: box-shadow var(--t), border-color var(--t);
}
body:not(.home) #faqs .accordion-item:last-child {
    margin-bottom: 0;
}
@media (hover: hover) {
    body:not(.home) #faqs .accordion-item:hover {
        border-color: #cfd8e0 !important;
        -webkit-box-shadow: var(--shadow-sm);
                box-shadow: var(--shadow-sm);
    }
}
/* Open card gets a subtle brand tint + stronger border */
body:not(.home) #faqs .accordion-item.active {
    border-color: var(--color-primary) !important;
    background: #fbfdff;
}
/* Question row */
body:not(.home) #faqs .accordion-item .accordion-btn {
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
    gap: 1rem;
    width: 100%;
    padding: 1.15rem 1.35rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
}
body:not(.home) #faqs .accordion-item .accordion-btn .txt {
    color: var(--color-primary);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.45 !important;
    padding-right: 0 !important;
    margin: 0;
}
/* Circular +/- chip */
body:not(.home) #faqs .accordion-item .accordion-btn .icon {
    width: 28px !important;
    height: 28px !important;
    top: 0 !important;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    border-radius: 50%;
    background: #eef3f8;
    -webkit-transition: background var(--t);
            transition: background var(--t);
}
body:not(.home) #faqs .accordion-item .accordion-btn .icon .line {
    background-color: var(--color-primary) !important;
    border-radius: 2px;
}
body:not(.home) #faqs .accordion-item .accordion-btn .icon .line.line-01 {
    width: 12px;
    height: 2px;
}
body:not(.home) #faqs .accordion-item .accordion-btn .icon .line.line-02 {
    width: 2px;
    height: 12px;
}
/* Open: chip fills navy, lines go white, the vertical bar collapses (plus -> minus) */
body:not(.home) #faqs .accordion-item.active .accordion-btn .icon {
    background: var(--color-primary);
}
body:not(.home) #faqs .accordion-item.active .accordion-btn .icon .line {
    background-color: #ffffff !important;
}
body:not(.home) #faqs .accordion-item.active .accordion-btn .icon .line.line-02 {
    height: 0 !important;
}
/* Answer panel */
body:not(.home) #faqs .accordion-item .accordion-panel > .inner {
    padding: 0 1.35rem 1.25rem !important;
    color: #333333;
    line-height: 1.7;
}
body:not(.home) #faqs .accordion-item .accordion-panel > .inner p {
    margin: 0 0 0.75rem;
}
body:not(.home) #faqs .accordion-item .accordion-panel > .inner :last-child {
    margin-bottom: 0;
}