/*
 Theme Name:   Bootscore Child
 Description:  Bootscore Child Theme
 Author:       Bootscore
 Author URI:   https://bootscore.me
 Template:     bootscore
 Version:      6.0.0
 Requires at least: 5.0
 Tested up to: 6.6
 Requires PHP: 7.4
 License: MIT License
 License URI: https://github.com/bootscore/bootscore-child/blob/main/LICENSE
 Text Domain:  bootscore
*/

/* 
All style editing is done via /assets/scss/_bootscore_custom.scss
*/


:root {
    /* Brand palette */
    --ba-bg: #F6F6F6;
    --ba-surface-dark: #0b0b0b;
    --ba-card-dark: #101010;
    --ba-header-bg: #151716;
    --ba-accent: #e8963f;
    --ba-accent-strong: #f0a95a;

    /* Text */
    --ba-ink: #111111;
    --ba-ink-soft: #5f5f5b;
    --ba-on-dark: #f4f3f0;
    --ba-on-dark-soft: #9a9a97;

    /* Lines & shape */
    --ba-border: rgba(17, 17, 17, 0.15);
    --ba-border-dark: rgba(255, 255, 255, 0.16);
    --ba-radius: 4px;
    --ba-radius-lg: 10px;

    /* Layout */
    --ba-maxw: 1440px;
    --ba-gutter: clamp(1.25rem, 4vw, 5rem);
    --ba-section-y: clamp(4rem, 9vw, 8.5rem);

    /* Type */
    --ba-font-body: "early-sans-variable", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ba-font-display: "early-sans-variable", "Inter Tight", "Inter", system-ui, sans-serif;

    /* Bootstrap overrides so utilities inherit the theme */
    --bs-body-bg: var(--ba-bg);
    --bs-body-color: var(--ba-ink);
    --bs-body-font-family: var(--ba-font-body);
    --bs-primary: var(--ba-accent);
    --bs-border-radius: var(--ba-radius);
    --bs-link-color: var(--ba-ink);
    --bs-link-hover-color: var(--ba-accent);

    --ba-header-height: 96px;
}

/* --------------------------------------------------------------------------
   View transitions
   Cross-document transition (insights list -> article single) morphs the
   clicked thumbnail into the article hero via a shared, per-post
   view-transition-name set inline on both <img> tags (page-insights.php,
   single.php). Same pattern, static name, for the About page's Retailers
   audience card -> for-retailers hero (page-about.php, page-for-retailers.php).
   Unsupported browsers just ignore this block and navigate normally.
   -------------------------------------------------------------------------- */
/*
@view-transition {
    navigation: auto;
}
*/

::view-transition-group(*) {
    animation-duration: 0.45s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Going back to the grid, every OTHER thumbnail only exists in the new
   document, so the browser stacks it above the one hero image that's
   actually morphing (has both an old and new state) — without this, the
   shrinking hero visually slides behind the static grid thumbnails before
   snapping into place. Bump the true old->new pair above everything else. */
::view-transition-group(*):has(::view-transition-old(*)) {
    z-index: 1;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body {
    font-family: var(--ba-font-body);
    background-color: var(--ba-bg);
    color: var(--ba-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-wrap: balance;
    font-weight: 300;
}
.ba-shell {
    max-width: var(--ba-maxw);
    margin-inline: auto;
    padding-inline: var(--ba-gutter);
}
.no-balance {
    text-wrap: initial;
}

/* Below 1024px, pin the gutter to a flat 24px instead of letting --ba-gutter's
   clamp() shrink it. Bootstrap's widest row gutter in use (.row.g-5) carries
   a -24px negative margin (--bs-gutter-x: 3rem, margin: -0.5 * that per
   side); --ba-gutter dips under 24px below a ~500px viewport (clamp min is
   1.25rem = 20px), so a g-5 row there pokes ~4px past .ba-shell's own edge
   on each side — the actual source of the horizontal scroll. 24px flat
   (rather than a lower clamp bound) closes that gap at every width in this
   range, not just where the browser happens to land in the clamp's ramp. */
@media (max-width: 1023.98px) {
    .ba-shell {
        padding-inline: 24px;
    }
}

h1,
h2,
h3,
.ba-display {
    font-family: var(--ba-font-display);
    letter-spacing: -0.05em;
    line-height: 1.05;
    font-weight: 400;
    overflow-wrap: break-word;
}
.pb-section,
section.pb-section {
    padding-bottom: var(--ba-section-y);
}
.pt-section,
section.pt-section {
    padding-top: var(--ba-section-y);
}
.py-section,
section.py-section {
    padding-block: var(--ba-section-y);
}

/* Eyebrow / section kicker */
.ba-eyebrow {
    display: block;
    margin: 0 0 clamp(1rem, 2vw, 1.35rem);
    font-size: 0.95rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ba-accent);
}

.ba-eyebrow--muted {
    color: var(--ba-on-dark-soft);
}

.ba-eyebrow__sep {
    color: var(--ba-ink-soft);
    font-weight: 500;
}

/* Bordered tag pill */
.ba-pill {
    display: inline-block;
    padding: 0.4rem 0.75rem;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease;
}
span.ba-pill.dark {
    background: #151515;
    color: #ffffff;
    border-radius: 5px;
    font-weight: 300;
}

/* Arrow link */
.ba-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: inherit;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid currentColor;
    transition: gap 0.2s ease, opacity 0.2s ease;
}
.ba-arrow-link.no-underline {
    border-bottom: 0 none;
}
.ba-arrow-link.no-underline span {
    display: inline-block;
    border-bottom: 1px solid currentColor;
}
.ba-value-home .ba-value__lead {
    max-width: 25ch;
}
body .border-secondary-subtle {
    border-color: rgba(255, 255, 255, 0.25) !important;
}
.ba-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.ba-arrow-link:hover {
    gap: 0.95rem;
    color: inherit;
    opacity: 0.72;
}

.ba-arrow {
    width: 1.05em;
    height: 1.05em;
    flex: none;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.ba-header {
    /* Fixed, not sticky: `body { overflow-x: hidden }` in the compiled main.css
       breaks position: sticky on descendants (any ancestor with non-visible
       overflow disables it), so fixed is used to guarantee it stays pinned. */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
    background-color: rgba(21, 23, 22, 1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    height: var(--ba-header-height);
    /* Fast reveal when scrolling up — this transition applies when --hidden is removed. */
    transition: transform 0.15s ease-out, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}

.ba-header--scrolled {
    background-color: rgba(21, 23, 22, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.ba-header--hidden {
    transform: translateY(-100%);
    /* Slower hide when scrolling down — applies when --hidden is added. */
    transition: transform 0.35s ease-in;
}
.ba-header--light .ba-logo img {
    filter: brightness(0);
}

.ba-logo img {
    height: 52px;
    display: block;
    position: relative;
    top: 4px;
}

/* Compensates for .ba-header now being removed from flow (position: fixed) —
   keeps page content starting exactly where it did when the header was sticky.
   --ba-header-height is set from JS (custom.js) to the header's real rendered
   height; the fallback covers the instant before that JS runs. */
main {
    padding-top: var(--ba-header-height, 84px);
}

.ba-header .navbar {
    padding-block: 1.75rem;
    height: var(--ba-header-height);
}

.ba-logo {
    display: inline-flex;
    flex-direction: column;
    gap: 0.35rem;
    text-decoration: none;
    line-height: 1;
}

.ba-logo__mark {
    height: 1.5rem;
    width: auto;
    color: #ffffff;
}

.ba-logo__word {
    font-family: var(--ba-font-body);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #ffffff;
}

.ba-logo__word b {
    font-weight: 500;
    color: var(--ba-accent);
}

.ba-nav .nav-link {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.05rem;
    font-weight: 300;
    padding-inline: 1rem;
    transition: color 0.2s ease;
}

.ba-nav .nav-link:hover,
.ba-nav .nav-link:focus {
    color: var(--ba-accent);
}

.ba-btn-contact {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #f4f3f0;
    color: var(--ba-ink);
    border: 0;
    border-radius: 0;
    padding: 0.65rem 1.15rem;
    /* Match the "Company" nav-toggle text next to it (client ask: same
       size/weight) rather than a hardcoded value that can drift out of
       sync with it again. */
    font-size: inherit;
    font-weight: inherit;
    text-decoration: none;
    transition: background 0.2s ease;
}

.ba-btn-contact:hover {
    background: var(--ba-accent);
    color: var(--ba-ink);
}

.ba-btn-contact .ba-arrow {
    transition: transform 0.2s ease;
}

.ba-btn-contact:hover .ba-arrow {
    transform: translateX(3px);
}

.ba-header .navbar-toggler {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ba-accent);
    box-shadow: none;
}

/* display/sizing scoped to mobile only (see full-screen nav media query
   below) — an unconditional `display` here would beat Bootstrap's own
   `.navbar-expand-lg .navbar-toggler { display: none }` at desktop widths,
   since both selectors carry the same specificity and this stylesheet loads
   after main.css. */
@media (max-width: 991.98px) {
    .ba-header .navbar-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        position: relative;
        left: 12px;
    }
}

/* Bootstrap's default icon is a colour baked into an inline SVG background
   image — replaced here with a currentColor version built from the button's
   own box so it always tracks --ba-accent. */
.ba-header .navbar-toggler-icon {
    background-image: none;
    position: relative;
    width: 22px;
    height: 2px;
    background-color: currentColor;
}

.ba-header .navbar-toggler-icon::before,
.ba-header .navbar-toggler-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
}

.ba-header .navbar-toggler-icon::before {
    top: -7px;
}

.ba-header .navbar-toggler-icon::after {
    top: 7px;
}

/* --------------------------------------------------------------------------
   Header — full-screen mobile nav (top bar: logo + close, see header.php)
   -------------------------------------------------------------------------- */
.ba-mobile-nav__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 var(--ba-header-height);
    height: var(--ba-header-height);
}

.ba-mobile-nav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ba-accent);
    cursor: pointer;
    position: relative;
    left: 14px;
}

.ba-mobile-nav__close-icon {
    position: relative;
    width: 18px;
    height: 18px;
}

.ba-mobile-nav__close-icon::before,
.ba-mobile-nav__close-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
}

.ba-mobile-nav__close-icon::before {
    transform: rotate(45deg);
}

.ba-mobile-nav__close-icon::after {
    transform: rotate(-45deg);
}

@media (max-width: 991.98px) {

    /* Gated on .show/.collapsing (not the bare #ba-primary-nav id) so Bootstrap's
       own `.collapse:not(.show) { display: none }` still wins when closed —
       an id selector here would otherwise always outrank it. Height itself is
       left to Bootstrap's collapse JS (0 -> scrollHeight) rather than forced,
       so the open/close animation keeps working; scrollHeight naturally comes
       out to 100dvh because .ba-mobile-nav__panel below carries that as a
       min-height. */
    #ba-primary-nav.show,
    #ba-primary-nav.collapsing {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1040;
        background-color: var(--ba-header-bg);
    }

    #ba-primary-nav.show {
        overflow-y: auto;
    }

    .ba-mobile-nav__panel {
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
    }

    .ba-mobile-nav__top {
        padding-inline: 24px;
    }

    .ba-mobile-nav__body {
        flex: 1 1 auto;
        padding-inline: var(--ba-gutter);
        overscroll-behavior: contain;
    }
}

/* Set on <html> by custom.js while the full-screen mobile nav is open. */
html.ba-nav-open {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Header — mega menu
   -------------------------------------------------------------------------- */
.ba-nav-item {
    position: relative;
}

.ba-nav-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: none;
    border: 0;
    cursor: pointer;
}

.ba-nav-toggle__icon {
    position: relative;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.ba-nav-toggle__icon::before,
.ba-nav-toggle__icon::after {
    content: "";
    position: absolute;
    background: currentColor;
}

.ba-nav-toggle__icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    transform: translateY(-50%);
}

.ba-nav-toggle__icon::after {
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    transform: translateX(-50%);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.ba-nav .ba-nav-toggle[aria-expanded="true"] {
    color: var(--ba-accent);
}

/* Own underline instead of text-decoration: the toggle is a flex container
   (label text + icon span as separate flex items), and text-decoration on a
   flex container doesn't paint under its flex-item children in browsers — it
   would only underline the label text, not the icon. An absolutely positioned
   line spans the whole button instead, icon included, per the prototype. */
.ba-nav .ba-nav-toggle[aria-expanded="true"]::after {
    content: "";
    position: absolute;
    left: var(--bs-navbar-nav-link-padding-x);
    right: var(--bs-navbar-nav-link-padding-x);
    bottom: var(--bs-nav-link-padding-y);
    height: 1px;
    background: currentColor;
}

.ba-nav-toggle[aria-expanded="true"] .ba-nav-toggle__icon::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}

/* Positioned here (rather than on .ba-nav-item) so the panel breaks out to
   the full header width no matter how deep it's nested under the toggle —
   .navbar already spans 100% of the fixed, full-width .ba-header. */
.ba-header .navbar {
    position: relative;
}

.ba-mega {
    position: fixed;
    top: var(--ba-header-height);
    left: 0;
    width: 100%;
    background-color: var(--ba-bg);
    box-shadow: 0 24px 24px rgba(0, 0, 0, 0.05);
}

.ba-mega__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem 4rem;
    padding-block: clamp(2.5rem, 5vw, 4rem);
    justify-content: flex-end;
}

/* With 4+ columns (e.g. the Approach menu), spread them to fill the full
   menu width edge-to-edge instead of clumping at the left. With fewer
   columns (e.g. the 2-item Work menu), flex-start above keeps them aligned
   under the main nav items instead of floating detached at the right. */
.ba-mega__inner:has(.ba-mega__col:nth-child(4)) {
    justify-content: space-between;
    gap: 2rem 2.5rem;
}

.ba-mega__col {
    flex: 0 1 17.8rem;
}

.ba-mega__link {
    display: block;
    text-decoration: none;
    color: var(--ba-ink);
}

.ba-mega__link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    font-family: var(--ba-font-display);
    font-size: 1.15rem;
    font-weight: 300;
    margin-bottom: 0.65rem;
}

.ba-mega__arrow {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.ba-mega__link:hover,
.ba-mega__link:hover .ba-mega__desc {
    color: var(--ba-accent);
}

.ba-mega__link:hover .ba-mega__arrow {
    transform: translateX(4px);
}

.ba-mega__desc {
    display: block;
    color: var(--ba-ink-soft);
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.5;
}
.ba-form__note {
    text-wrap: initial;
}

@media (max-width: 991.98px) {
    .ba-mega {
        position: static;
        width: auto;
        /* Sits inside the dark full-screen mobile nav (#ba-primary-nav), not
           the light desktop header, so it drops the light card look entirely
           rather than floating a light panel over a dark background. */
        background-color: transparent;
        box-shadow: none;
        border-radius: var(--ba-radius-lg);
        margin-top: 0.5rem;
    }

    .ba-mega__inner {
        padding-block: 1.5rem;
        justify-content: flex-start !important;
        padding-inline: 0;
        gap: 2rem;
    }

    .ba-mega__link {
        color: var(--ba-on-dark);
    }

    .ba-mega__desc {
        color: var(--ba-on-dark-soft);
    }

    .ba-header--light .ba-logo img {
        filter: none;
    }
    .ba-nav .ba-nav-toggle[aria-expanded="true"]::after {
        display: none;
    }
}

/* Light theme — toggled via .ba-header--light (custom.js) while a mega panel
   is open. Desktop only: on mobile the mega panel opens inline inside the
   dark full-screen nav (see .ba-mega above) rather than swapping the header
   to a light background, so this never applies there. [aria-expanded="false"]
   scoping on the toggle keeps this from ever competing with the active-item
   accent color above, regardless of cascade order. */
@media (min-width: 992px) {
    .ba-header--light {
        background-color: var(--ba-bg);
    }

    .ba-header--light .ba-logo__mark,
    .ba-header--light .ba-logo__word {
        color: var(--ba-ink);
    }

    .ba-header--light .ba-nav .nav-link {
        color: var(--ba-ink);
    }

    .ba-header--light .ba-nav .nav-link:hover,
    .ba-header--light .ba-nav .nav-link:focus {
        color: var(--ba-accent);
    }

    .ba-header--light .ba-nav-toggle[aria-expanded="false"] {
        color: var(--ba-ink);
    }

    /* Must come after the .ba-nav .nav-link color rule above: same (0,3,0)
       specificity, so without this the open toggle's own accent color (set
       higher up, unscoped to --light) loses the cascade tie to that rule
       and gets overwritten back to --ba-ink the moment the header goes
       light — the active item should stay orange, not flip to black. */
    .ba-header--light .ba-nav-toggle[aria-expanded="true"] {
        color: var(--ba-accent);
    }

    .ba-header--light .ba-btn-contact {
        background: var(--ba-accent);
        color: var(--ba-ink);
    }

    .ba-header--light .ba-btn-contact:hover {
        background: var(--ba-accent-strong);
    }
}

.common-page-vertical-padding {
    padding-block: 140px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.ba-hero {
    padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 7vw, 6rem);
}

.ba-hero__title {
    font-size: clamp(2.1rem, 6.2vw, 5.5rem);
    max-width: min(26ch, 100%);
    margin: 0;
}
h1.ba-hero__title.ba-hero__title2 {
    font-size: clamp(2.1rem, 6.2vw, 4.6rem);
    max-width: min(23ch, 100%);
    font-weight: 400;
    text-wrap: initial;
    margin-bottom: 1.5rem;
}

/* Resources hero title reads too large at this specific copy length —
   scoped so every other page's hero is untouched. */
.ba-hero__title--resources {
    font-size: clamp(2rem, 5vw, 4.4rem);
}

/* Full-bleed media band that blends into the dark value section */
.ba-hero-media {
    position: relative;
    background-color: var(--ba-surface-dark);
    overflow: hidden;
}

.ba-hero-media img {
    display: block;
    width: 100%;
    height: clamp(240px, 42vw, 620px);
    object-fit: cover;
    object-position: center 42%;
}
section.ba-hero.ba-hero-single {
    padding-block: min(12%, 10rem);
}

/* --------------------------------------------------------------------------
   Dark sections shared
   -------------------------------------------------------------------------- */
.ba-dark {
    background-color: var(--ba-surface-dark);
    color: var(--ba-on-dark);
}

.ba-eyebrow__parent {
    font-weight: 500;
    color: inherit;
    text-decoration: none;
}
.ba-dark .ba-eyebrow__sep {
    color: var(--ba-on-dark-soft);
}

/* --------------------------------------------------------------------------
   Value section
   -------------------------------------------------------------------------- */
.ba-value {
    padding-block: clamp(1rem, 2vw, 2rem) var(--ba-section-y);
}
.ba-value__lead {
    font-family: var(--ba-font-display);
    font-size: clamp(1.8rem, 3.6vw, 3.5rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    max-width: min(32ch, 100%);
    margin: 1.5rem 0 clamp(3rem, 6vw, 3rem);
    color: var(--ba-on-dark);
}

/* This section's shell runs wider than body copy so the stat row below
   has room to keep each value on one line (client ask: "wider to
   accommodate the extra width needed for all data to be on one line"). */
.ba-value .ba-shell,
.ba-large-shell {
    max-width: calc(var(--ba-maxw) + 170px);
}

.ba-stat {
    padding-top: 1.5rem;
}

.ba-stat__index {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    color: var(--ba-on-dark-soft);
    margin-bottom: 0.85rem;
}
.d-flex.flex-column.g-4.g-lg-5 {
    gap: 2.5rem;
}

.ba-stat__value {
    font-family: var(--ba-font-display);
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ba-accent);
    margin-bottom: 0.6rem;
}

.ba-stat__label {
    font-size: 1.05rem;
    color: var(--ba-on-dark);
    margin: 0;
}

.single-article-section .ba-shell {
    max-width: 1200px;
    padding-inline: 20px;
}

/* --------------------------------------------------------------------------
   Selected work
   -------------------------------------------------------------------------- */
.ba-work {
    padding-block: var(--ba-section-y);
}

.ba-section-head {
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.ba-section-head__title {
    font-size: clamp(2rem, 4.4vw, 3.6rem);
    max-width: min(18ch, 100%);
    margin: 0;
}

.ba-case {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--ba-radius);
    overflow: hidden;
    background: var(--ba-card-dark);
    color: var(--ba-on-dark);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ba-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* No shadow/lift on the card itself — only the image inside should move
   (.ba-case:hover .ba-case__media img below) per client feedback. */
.ba-case .ba-pill, .ba-arrow-link {
    transition: 0.4s ease;
}
.ba-case:hover .ba-pill {
    background: #fff;
    color: var(--ba-card-dark);
}

.ba-case--light:hover .ba-pill {
    color: #ffffff;
    background: var(--ba-card-dark);
}

.ba-case__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #101010;
}

.ba-case__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.8s ease;
    opacity: 0.7;
}

.ba-case:hover .ba-case__media img {
    transform: scale(1.08);
    opacity: 1;
}

.ba-case:hover .ba-arrow-link {
    color: var(--ba-accent);
    gap: 1.1rem;
}

.ba-case__body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: clamp(1.5rem, 2.5vw, 2rem);
    flex: 1;
}

.ba-case__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: inherit;
}

.ba-case__title {
    font-size: clamp(1.35rem, 2vw, 1.6rem);
    margin: 0;
    flex: 1;
}

.ba-case__foot {
    margin-top: auto;
}

/* Featured / light card variant */
.ba-case--light {
    background: #ffffff;
    color: var(--ba-ink);
}

/* Card grids should run wider than body copy, per design — scoped with
   :has() to shells that actually wrap a card grid, since .ba-shell alone
   is the generic page-width container used everywhere. */
.ba-shell:has(.ba-case) {
    max-width: calc(var(--ba-maxw) + 170px);
}

/* --------------------------------------------------------------------------
   Sector resources
   -------------------------------------------------------------------------- */
.ba-resources {
    padding-block: var(--ba-section-y);
}

.ba-resource {
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
    padding-block: clamp(2rem, 4vw, 3.25rem);
    border-top: 1px solid var(--ba-border);
}

.ba-resource:last-child {
    border-bottom: 1px solid var(--ba-border);
}

.ba-resource__media {
    aspect-ratio: 1 / 1;
    border-radius: var(--ba-radius);
    overflow: hidden;
    background: #101010;
}

.ba-resource__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s ease;
    opacity: 0.7;
}

.ba-resource:hover .ba-resource__media img {
    transform: scale(1.04);
    opacity: 1;
}

.ba-resource__title {
    transition: color 0.2s ease;
}

.ba-resource:hover .ba-resource__title {
    color: var(--ba-accent);
}


.ba-related-inline__media {
    overflow: hidden;
}
.ba-related-inline .ba-pill,
.ba-related-inline__media img {
    transition: 0.5s ease;
}
.ba-related-inline:hover .ba-pill {
    background: var(--ba-ink);
    color: #fff;
}
.ba-related-inline:hover .ba-related-inline__media img {
    transform: scale(1.08);
}
.ba-related-inline:hover .ba-arrow-link {
    color: var(--ba-accent);
}

.ba-resource__body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 60ch;
}

.ba-resource__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--ba-ink);
}
.ba-resource .ba-arrow-link,
.ba-resource .ba-pill  {
    transition: 0.4s;
}
.ba-resource:hover .ba-pill  {
    background-color: var(--ba-ink);
    color: #fff;
}
.ba-resource:hover .ba-arrow-link  {
    color: var(--ba-accent);
    gap: 1.1rem;
}

.ba-resource__cat {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ba-ink);
}

.ba-resource__title {
    font-size: clamp(1.5rem, 2.6vw, 2.15rem);
    margin: 0;
}

.ba-resource__byline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ba-ink-soft);
}
.section-cards > div {
    margin-bottom: 2rem;
}
.article-cards > div {
    margin-bottom: 3rem;
}

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
.ba-cta {
    padding-block: var(--ba-section-y);
    text-align: center;
}

.ba-cta .ba-eyebrow {
    color: var(--ba-on-dark-soft);
}

.ba-cta__title {
    font-size: clamp(2rem, 4.8vw, 3.7rem);
    max-width: min(42ch, 100%);
    margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
    color: var(--ba-on-dark);
}

.ba-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    /* min-width: 260px; */
    background: #f4f3f0;
    color: var(--ba-ink);
    text-decoration: none;
    border-radius: 0;
    padding: 0.95rem 1.4rem;
    font-size: 1rem;
    font-weight: 400;
    transition: background 0.2s ease, transform 0.2s ease;
}

.ba-cta__btn:hover {
    background: var(--ba-accent);
    color: var(--ba-ink);
    transform: translateY(-2px);
}
.ba-cta__btn .ba-arrow {
    position: relative;
    left: 0.2rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.ba-footer {
    padding-block: clamp(3.5rem, 7vw, 6rem) 2.5rem;
    overflow: hidden;
}
.ba-footer .ba-logo img {
    height: 34px;
    top: -2px;
}

.ba-footer .ba-logo__word {
    font-size: 1.25rem;
}
img.ba-footer__agency-logo {
    height: 1.66em;
    margin-right: 6px;
    position: relative;
    top: -2px;
    filter: brightness(0) invert(1);
}
a:hover img.ba-footer__agency-logo {
    filter: brightness(1) invert(0);
}

.ba-footer__tagline {
    max-width: 26ch;
    margin: 0.25rem 0 0;
    color: var(--ba-on-dark);
    font-size: 1rem;
}

.ba-footer__label {
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ba-on-dark-soft);
    margin-bottom: 1.5rem;
}

.ba-footer address {
    font-style: normal;
    color: var(--ba-on-dark);
    line-height: 1.9;
    margin: 0;
}

.ba-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ba-footer__links a {
    color: var(--ba-on-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ba-footer__links a:hover {
    color: var(--ba-accent);
}

.ba-footer__connect a {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--ba-on-dark);
    text-decoration: none;
}
.ba-footer__connect a[href*="mail"] {
    border-bottom: 1px solid;
    white-space: nowrap;
}

.ba-footer__connect a:hover {
    color: var(--ba-accent);
}

.ba-footer__connect svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
}

.ba-footer__bar {
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-top: 1.75rem;
    border-top: 1px solid var(--ba-border-dark);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ba-on-dark-soft);
}

.ba-footer__bar a {
    color: var(--ba-on-dark-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ba-footer__bar a:hover {
    color: var(--ba-on-dark);
}

.ba-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.25rem;
}
.home-case-study-section .ba-feature__media img {
    aspect-ratio: 1/1.4;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .ba-resource {
        grid-template-columns: 1fr;
    }

    .ba-resource__media {
        max-width: 320px;
    }

    .ba-cta__btn {
        width: 100%;
    }
}

@media (max-width: 991.98px) {
    .ba-nav {
        padding-top: 1rem;
        gap: 0.25rem;
    }

    .ba-nav .nav-link {
        padding-inline: 0;
    }

    .ba-nav-toggle {
        width: 100%;
        justify-content: space-between;
    }

    .ba-header .ba-btn-contact {
        margin-top: 0.75rem;
    }
}

h1.common-page-title {
    font-size: 68px;
    font-weight: 400;
    margin-bottom: 0.6em;
}

h2.wp-block-heading {
    font-weight: 400;
    font-size: 35px;
}

.common-page-vertical-padding p+h2 {
    margin-top: 50px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.ba-btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.2rem;
    background: var(--ba-accent);
    color: var(--ba-ink);
    border: 1px solid var(--ba-accent);
    border-radius: 0;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.ba-btn:hover {
    background: var(--ba-accent-strong);
    color: var(--ba-ink);
}

.ba-btn .ba-arrow {
    transition: transform 0.2s ease;
    margin-left: 0.5rem;
    position: relative;
    left: 0.25rem;
}

.ba-btn:hover .ba-arrow {
    transform: translateX(0.3rem);
}

.ba-btn--outline {
    background: transparent;
    color: var(--ba-accent);
}

.ba-btn--outline:hover {
    background: var(--ba-accent);
    color: var(--ba-ink);
}

.ba-btn--light {
    background: #f4f3f0;
    border-color: #f4f3f0;
    color: var(--ba-ink);
}

.ba-btn--light:hover {
    background: #ffffff;
    border-color: #ffffff;
}

/* --------------------------------------------------------------------------
   Shared gradient overlay for full-bleed background-image sections.
   Add alongside any section that stacks an absolutely-positioned background
   image behind a `position: relative` content wrapper — sits between the two
   (z-index: 1) so it darkens the photo without covering the text.
   -------------------------------------------------------------------------- */
.ba-media-overlay {
    position: relative;
}

.ba-media-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(22, 22, 22, 1) 0%, rgba(11, 11, 11, 0.05) 45%, rgba(11, 11, 11, 0.05) 70%, rgba(22, 22, 22, 1) 100%);
    pointer-events: none;
}
.link-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    text-indent: -999em;
    width: 100%;
    height: 100%;
    display: block;
}

/* --------------------------------------------------------------------------
   Hero with background image (home, 404)
   -------------------------------------------------------------------------- */
.ba-hero-bg {
    position: relative;
    background-color: var(--ba-surface-dark);
    color: var(--ba-on-dark);
    overflow: hidden;
}

.ba-hero-bg__img, .ba-hero-bg__img video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* opacity: 0.32; */
}

.ba-hero-bg__inner {
    position: relative;
    z-index: 2;
    padding-block: clamp(5rem, 12vw, 11rem) clamp(8rem, 22vw, 11rem);
}

.ba-hero-bg__title {
    font-size: clamp(2.3rem, 5.8vw, 4.4rem);
    max-width: min(21ch, 100%);
    margin: 0 0 1.75rem;
    color: #ffffff;
}

.ba-hero-bg__sub {
    max-width: 62ch;
    margin: 0 0 2.5rem;
    color: var(--ba-on-dark);
    font-size: 1.2rem;
    font-weight: 300;
}

.ba-hero-bg__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Dark statement panel with faded background image (THE PROBLEM) */
.ba-panel {
    position: relative;
    background-color: #0d1117;
    color: var(--ba-on-dark);
    overflow: hidden;
}

.ba-panel__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.28;
}

.ba-panel__inner {
    position: relative;
    z-index: 2;
    padding-block: clamp(6rem, 14vw, 12rem);
    max-width: 62rem;
}

.ba-panel__title {
    font-size: clamp(2.2rem, 5vw, 4.3rem);
    color: #ffffff;
    margin: 0 0 1.75rem;
}

.ba-panel__title .muted {
    color: var(--ba-on-dark-soft);
}

.ba-panel__text {
    max-width: 52ch;
    margin: 0 0 2.5rem;
    font-weight: 300;
}

.section-problem .ba-panel__inner {
    max-width: 45rem;
    margin-inline: auto;
}

.section-problem .ba-panel__inner p:empty {
    display: none;
}

.section-problem .ba-panel__inner > .ba-panel__text {
    font-size: 1.1rem;
    margin-bottom: 2.4rem;
    text-wrap: auto;
    max-width: none;
}

.ba-strategy-first {
    padding-block: var(--ba-section-y);
}
.ba-strategy-first-images {
    padding-top: 5rem;
    align-items: center;
}
.ba-strategy-first-images div:first-child, .ba-strategy-first-images div:last-child {
    width: 270px;
    flex-shrink: 0;
    position: relative;
}
.ba-strategy-first-images div:nth-child(2) {
    margin-inline: 110px;
    position: relative;
}
.ba-strategy-first-images div:first-child:after,
.ba-strategy-first-images div:nth-child(2):after {
    content: '';
    display: inline-flex;
    width: 100px;
    height: 20px;
    background: url('./assets/img/icon-arrow-yellow.png') no-repeat;
    top: 50%;
    position: absolute;
    margin-top: -10px;
    background-size: contain;
}


/* --------------------------------------------------------------------------
   Split heading section (title left, copy right)
   -------------------------------------------------------------------------- */
.ba-split-head {
    padding-block: var(--ba-section-y);
}

.ba-split-head__title {
    font-size: clamp(2.2rem, 4.6vw, 4rem);
    margin: 0;
    max-width: 25ch;
    text-wrap: balance;
}
h2.ba-cta__title.ba-cta__title-2 {
    max-width: 26ch;
}

section.ba-dark.ba-model h3.ba-title {
    color: var(--ba-accent);
    font-size: 2.5rem;
    margin-bottom: 2rem;
}
section.ba-dark.ba-model h3.ba-title + ul {
    padding-left: 18px;
}
.ba-model-wwd .ba-problems__title {
    max-width: 71rem;
}

.ba-split-head__text {
    margin: 0.8rem 0 0;
    color: #0E0E0E;
    line-height: 1.6;
    font-size: 1.17rem;
    font-weight: 300;
    text-wrap: balance;
}

.ba-split-head--solution .accent {
    color: var(--ba-accent);
    display: block;
}

/* Inset media image inside a light section */
.ba-inset-media {
    padding-block: 0 var(--ba-section-y);
}

.ba-inset-media img {
    width: 100%;
    height: auto;
    border-radius: var(--ba-radius);
    display: block;
}

@media only screen and (min-width: 1600px) {
    .ba-strategy-first .ba-shell {
        padding-inline: 0;
    }
}
@media only screen and (min-width: 1440px) {
    .ba-model-wwd .ba-problems__title {
        max-width: 71rem;
    }
    .ba-model-wwd .row.g-5 > div {
        margin-inline: -4rem;
        padding-inline: 6rem;
        flex-grow: 1;
    }
    .ba-model-wwd .row.g-5 > div h3.ba-title {
        max-width: 18ch;
    }
    .ba-model-wwd li {
        max-width: 45ch;
    }
}

/* --------------------------------------------------------------------------
   Burnsall model (numbered outcome grid)
   -------------------------------------------------------------------------- */
.ba-model {
    padding-block: var(--ba-section-y);
}

.ba-model__title {
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    max-width: 16ch;
    margin: 0;
}

.ba-model__item {
    padding-top: 1.25rem;
    border-top: 1px solid var(--ba-border-dark);
}

.ba-model__index {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    color: var(--ba-on-dark-soft);
    margin-bottom: 0.85rem;
}

.ba-model__label {
    font-family: var(--ba-font-display);
    font-size: 1.25rem;
    color: var(--ba-accent);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Home / The Solution
   One light band running from the section head, through the clean-room
   diagram, down to the paired "what changes" lists. Replaces the old
   split-head + inset-media + dark model trio on the homepage; those classes
   are still used by page-about.php and page-for-retailers.php, so their rules
   above stay put.
   -------------------------------------------------------------------------- */
.ba-solution {
    padding-block: var(--ba-section-y);
}

.ba-solution__title {
    font-size: clamp(2.2rem, 4.6vw, 4rem);
    max-width: 20ch;
    margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
    text-wrap: balance;
}

.ba-solution__title .accent {
    color: var(--ba-accent);
    display: block;
}

.ba-solution__lead {
    font-family: var(--ba-font-display);
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    color: var(--ba-ink-soft);
    max-width: 46ch;
    margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
}

.ba-solution__row {
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* Title and supporting copy sit in one row so their boxes start on the same
   line. The title's own top margin would push it below the copy column, so it
   moves onto the row and the title zeroes it out inside this block. */
.ba-solution__head {
    margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.ba-solution__head .ba-solution__title {
    margin-top: 0;
}

.ba-solution__text {
    color: var(--ba-ink-soft);
    line-height: 1.65;
    font-size: 1.02rem;
    margin: 0;
}

/* Each supporting paragraph carries its own number above it. */
.ba-solution__para + .ba-solution__para {
    margin-top: 1.75rem;
}

.ba-solution__num {
    display: block;
    font-family: var(--ba-font-display);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: var(--ba-accent);
    margin-bottom: 0.5rem;
}

/* Homepage three-panel diagram is the What We Do diagram, unchanged — same
   markup, same .ba-strategy-first-images sizing and arrow connectors. The only
   difference is the top spacing, since it follows the copy row rather than a
   section heading. */
.ba-solution__panels {
    /* .ba-strategy-first-images adds 5rem of its own top padding under a section
       heading; here .ba-solution__row already supplies the gap above. */
    padding-top: 0;
}

.ba-solution__sectors {
    margin-top: clamp(2rem, 4vw, 3rem);
}

/* Clean-room diagram. The artwork is a wide landscape composition, so it gets
   its own white plate rather than sitting directly on --ba-bg. */
.ba-cleanroom {
    margin: 0;
    background: #ffffff;
    border-radius: var(--ba-radius-lg);
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(17, 17, 17, 0.08);
}

.ba-cleanroom img {
    display: block;
    width: 100%;
    height: auto;
}

/* The diagram carries a lot of small type. Scaled to a phone viewport its
   labels stop being readable, so below the lg breakpoint it keeps a legible
   minimum width and the plate scrolls sideways instead. Contained here, not
   on the page: .ba-shell would otherwise inherit the overflow. */
@media (max-width: 991.98px) {
    .ba-cleanroom {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .ba-cleanroom img {
        min-width: 800px;
    }
}

/* --------------------------------------------------------------------------
   When to use Burnsall (inside .ba-solution)
   -------------------------------------------------------------------------- */
.ba-when {
    margin-top: clamp(4rem, 8vw, 7rem);
}

.ba-when__title {
    font-size: clamp(1.9rem, 3.4vw, 2.75rem);
    margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
}

.ba-when__card {
    height: 100%;
    padding: clamp(1.5rem, 2.6vw, 2.25rem);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius);
    background: #ffffff;
}

/* The "you don't need us" column is deliberately the quieter of the pair. */
.ba-when__card--off {
    background: transparent;
    color: var(--ba-ink-soft);
}

.ba-when__card--on {
    border-color: transparent;
    box-shadow: 0 12px 34px rgba(17, 17, 17, 0.06);
}

.ba-when__card-title {
    font-size: 2;
    margin: 0 0 1.25rem;
    color: var(--ba-ink);
}

.ba-when__card--off .ba-when__card-title {
    color: var(--ba-ink-soft);
}

.ba-when__card-title em {
    font-style: normal;
    color: var(--ba-accent);
}

/* .ba-when__list-rich wraps the raw wysiwyg output of the ACF field, so the
   list it emits has no class of its own — match it on the nested ul/li. */
.ba-when__list,
.ba-when__list-rich ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}

.ba-when__list li,
.ba-when__list-rich li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.98rem;
    line-height: 1.5;
}

.ba-when__list li::before,
.ba-when__list-rich li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
}

.ba-when__copy {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.6;
    /* color: var(--ba-ink-soft); */
}

.ba-when__conditions-lead {
    margin: 5rem 0 0.8rem;
    font-size: 1.2rem;
    font-weight: 400;
}

/* Three conditions — light-mode sibling of .ba-model__item */
.ba-condition {
    height: 100%;
    padding-top: 1.25rem;
}

.ba-condition__index {
    display: block;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    color: var(--ba-accent);
    margin-bottom: 0.85rem;
}

/* h4 by default renders bold in every browser; this is the site's only
   heading tag not covered by the global h1,h2,h3 { font-weight: 400 } rule
   above, so it needs its own explicit override (client ask: "both regular"). */
.ba-condition__title {
    font-family: var(--ba-font-display);
    font-size: clamp(1.1rem, 1.7vw, 1.2rem);
    font-weight: 400;
    color: var(--ba-accent);
    margin: 0 0 0.75rem;
}

.ba-condition__text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    /* color: var(--ba-ink-soft); */
}

/* --------------------------------------------------------------------------
   What changes for the retailer / supplier
   -------------------------------------------------------------------------- */
.ba-changes {
    margin-top: clamp(3rem, 6vw, 10rem);
}

.ba-changes__title {
    font-size: 2rem;
    margin: 0 0 1.75rem;
}

.ba-changes__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
}

.ba-change {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-top: 1.25rem;
}

.ba-change__icon {
    width: 2rem;
    height: 2rem;
    flex: none;
    margin-top: 0;
}

.ba-change__head {
    display: block;
    font-family: var(--ba-font-display);
    font-size: 1.75rem;
    line-height: 1.3;
    color: var(--ba-accent);
    margin-bottom: 0.3rem;
    letter-spacing: -0.04em;
}

.ba-change__text {
    display: block;
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Audience cards
   -------------------------------------------------------------------------- */
.ba-audience {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ba-card-dark);
    color: var(--ba-on-dark);
    border-radius: var(--ba-radius);
    overflow: hidden;
}

/* Same card-hover language as .ba-case: no shadow/lift on the card itself,
   only the image zooms and the pill inverts — this card type never had it. */
.ba-audience__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #101010;
}
.ba-audience__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.8s ease;
    opacity: 0.7;
}
.ba-audience .ba-pill,
.ba-audience__text,
.ba-audience .ba-arrow-link {
    transition: 0.8s ease;
}
.ba-audience:hover .ba-audience__media img {
    transform: scale(1.08);
    opacity: 1;
}
.ba-audience:hover .ba-audience__text {
    color: #fff;
}
.ba-audience:hover .ba-arrow-link {
    color: var(--ba-accent);
    gap: 1.2rem;
}
.ba-audience:hover .ba-pill {
    background: #fff;
    color: var(--ba-card-dark);
}

.ba-audience__body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: clamp(1.5rem, 2.5vw, 2rem);
    flex: 1;
}

.ba-audience__title {
    font-size: clamp(1.3rem, 1.9vw, 1.55rem);
    margin: 0;
}

.ba-audience__text {
    font-size: 0.92rem;
    color: var(--ba-on-dark-soft);
    margin: 0;
    flex: 1;
}

/* Row variant: image left, copy right, one card per row. The base .ba-audience
   stacks image over copy, so this flips the axis and splits it; below the
   Bootstrap md breakpoint it falls back to the stacked card, where the split
   leaves both halves too narrow to read. Opt-in via the modifier class so the
   homepage and About audience grids keep the stacked card. */
@media (min-width: 768px) {
    .ba-audience--row {
        flex-direction: row;
        align-items: stretch;
    }

    /* The inherited 4/3 ratio stays: against a definite 42% width it gives the
       media a real height, so the row never collapses to a sliver of image when
       the copy is short. A longer card just stretches the image past it. */
    .ba-audience--row .ba-audience__media {
        flex: 0 0 42%;
        max-width: 42%;
    }
    .ba-audience--row .ba-audience__body {
        flex: 1;
        justify-content: center;
        gap: 0.85rem;
    }

    /* The base card lets the copy grow (flex: 1) so the arrow link is pushed to
       the card foot. In the row variant that strands the button away from the
       tag/title/copy it belongs to, so the copy sizes to its content and the
       whole group centres against the image instead. */
    .ba-audience--row .ba-audience__text {
        flex: 0 0 auto;
    }

    .ba-audience--row .ba-arrow-link {
        margin-top: 0.15rem;
    }
}

/* Trusted by strip */
.ba-logos {
    padding-block: var(--ba-section-y);
}

.ba-logos__title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    margin: 0 0 2.5rem;
}

.ba-logos__box {
    background: #ffffff;
    border-radius: var(--ba-radius);
    height: 100%;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 20px;
}
.ba-logos .col {
    flex-grow: 1;
    height: auto;
}
.ba-logos__box img {
    max-width: 90%;
    max-height: 150px;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   Feature case study (home)
   -------------------------------------------------------------------------- */
.ba-feature {
    padding-block: var(--ba-section-y);
}

.ba-feature__media {
    position: relative;
    border-radius: var(--ba-radius);
    overflow: hidden;
}

.ba-feature__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ba-feature__flag {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    background: #ffffff;
    color: var(--ba-ink);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.45rem 0.8rem;
    border-radius: 3px;
}

.ba-feature__title {
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    color: var(--ba-on-dark);
    margin: 0 0 1.5rem;
}

.ba-feature__text {
    color: #F3F5F7;
    max-width: 48ch;
    margin: 0 0 2.5rem;
}
.home-case-study-section dl ~ p {
    color: #F3F5F7;
}

.ba-feature__text .accent {
    color: var(--ba-accent);
}

.ba-feature__table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    border-top: 1px solid var(--ba-border-dark);
    padding-top: 1.5rem;
    margin-bottom: 2.5rem;
}

.ba-feature__table dt {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ba-on-dark-soft);
    margin-bottom: 0.5rem;
}

.ba-feature__table dd {
    margin: 0;
    color: #F3F5F7;
}

/* --------------------------------------------------------------------------
   6-8 week model steps
   -------------------------------------------------------------------------- */
.ba-steps {
    background: #000000;
    color: var(--ba-on-dark);
    padding-block: var(--ba-section-y);
}

.ba-steps__title {
    font-size: clamp(2rem, 4vw, 3.2rem);
    color: #ffffff;
    margin: 0 0 clamp(2.5rem, 5vw, 4.5rem);
}

.ba-steps__track {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.ba-step {
    flex: 1 1 140px;
    min-width: 140px;
}

.ba-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: #ffffff;
    color: var(--ba-accent);
    font-family: var(--ba-font-display);
    font-size: 1.35rem;
    font-weight: 500;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

.ba-step__name {
    color: var(--ba-accent);
    font-weight: 500;
    margin: 0 0 0.4rem;
}

.ba-step__text {
    font-size: 0.88rem;
    color: var(--ba-on-dark);
    margin: 0;
}

.ba-steps__arrow {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 18px;
    width: 56px;
    height: 28px;
    color: #ffffff;
}

@media (max-width: 991.98px) {
    .ba-steps__arrow {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Three areas of focus
   -------------------------------------------------------------------------- */
.ba-focus {
    padding-block: var(--ba-section-y);
}

.ba-focus__heading {
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}

.ba-focus__index {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    color: var(--ba-ink-soft);
    margin-bottom: 0.85rem;
}

.ba-focus__title {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    color: var(--ba-accent);
    margin: 0 0 1rem;
}

.ba-focus__sub {
    font-weight: 500;
    margin: 0 0 1.25rem;
}

.ba-focus__list {
    padding-left: 1.1rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.92rem;
    color: var(--ba-ink-soft);
}

/* --------------------------------------------------------------------------
   Problems (dark 3-col)
   -------------------------------------------------------------------------- */
.ba-problems {
    background: var(--ba-surface-dark);
    color: var(--ba-on-dark);
    padding-block: var(--ba-section-y);
}

.ba-problems__title {
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    color: #ffffff;
    max-width: 18ch;
    margin: 0 0 clamp(2.5rem, 5vw, 4.5rem);
}

.ba-problems__item-title {
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--ba-accent);
    margin: 0 0 1rem;
    max-width: 24ch;
}

.ba-problems__item-text {
    font-size: 1.05rem;
    color: var(--ba-on-dark-soft);
    margin: 0;
    max-width: 38ch;
    text-wrap: initial;
}

/* What we deliver (light split with outcome list) */
.ba-deliver {
    padding-block: var(--ba-section-y);
}

.ba-deliver__item+.ba-deliver__item {
    margin-top: 2.5rem;
}

.ba-deliver__item-title {
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--ba-accent);
    margin: 0 0 0.75rem;
}

.ba-deliver__item-text {
    font-size: 1.05rem;
    margin: 0;
    font-weight: 300;
    color: #000;
    text-wrap: initial;
}

/* --------------------------------------------------------------------------
   Case study detail
   -------------------------------------------------------------------------- */
.ba-meta {
    display: flex;
    flex-wrap: nowrap;
    gap: 9vw;
    margin-top: clamp(2rem, 4vw, 4rem);
    max-width: max(80%, 1100px);
}

.ba-meta>div {
    flex: 1 1 0;
    min-width: 0;
}

.ba-meta__label {
    display: block;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--ba-ink);
    font-size: 1.1rem;
    margin-bottom: 0.85rem;
}

.ba-meta__value {
    font-family: var(--ba-font-display);
    font-size: 1.6rem;
    margin: 0;
}

.ba-quote {
    border-left: 2px solid var(--ba-accent);
    padding-left: 1.5rem;
    margin: clamp(2.5rem, 5vw, 4.5rem) 0 0;
    max-width: 42rem;
    text-wrap: initial;
    font-size: 1.05rem;
}

.ba-quote p {
    font-style: italic;
    font-weight: 400;
    margin: 0 0 0.85rem;
}

.ba-quote cite {
    font-style: normal;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ba-accent);
}

.ba-statement {
    background: #000000;
    color: var(--ba-on-dark);
    padding-block: var(--ba-section-y);
}

.ba-statement__text {
    font-family: var(--ba-font-display);
    font-size: clamp(1.8rem, 3.6vw, 3rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    max-width: 34ch;
    margin: 0;
    color: #ffffff;
    text-wrap: initial;
}

.ba-textblock {
    padding-block: var(--ba-section-y);
}

.ba-textblock__title {
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    margin: 0 0 2rem;
}

.ba-textblock p {
    font-size: 0.95rem;
    max-width: 60ch;
}

/* Standalone dark value section (not following a media band) */
.ba-value--pad {
    padding-top: var(--ba-section-y);
}

/* Inset media that opens a section */
.ba-inset-media--pad {
    padding-top: var(--ba-section-y);
}

/* Results stats with sub-labels */
.ba-stat__sub {
    font-size: 0.9rem;
    color: var(--ba-on-dark-soft);
    margin: 0.35rem 0 0;
}

.ba-results .ba-stat__value {
    font-size: 3.2rem;
    white-space: nowrap;
    letter-spacing: -0.05em;
}

.ba-results .ba-value__lead {
    margin-bottom: 2rem;
    max-width: 25ch;
}

/* --------------------------------------------------------------------------
   Filters (listing pages)
   -------------------------------------------------------------------------- */
.ba-filter {
    margin-top: 2.5rem;
}

.ba-filter__label {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.ba-filter__row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.ba-filter select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    color: inherit;
    font-family: var(--ba-font-display);
    font-size: 1.15rem;
    padding: 0.4rem 2.5rem 0.6rem 0;
    /* Bootstrap's compiled forms CSS targets the bare `select` element
       (not just `.form-select`) with `width: 100%`, and nothing here was
       overriding it — each dropdown was claiming the full row width and
       wrapping onto its own line instead of sitting side by side. */
    width: auto;
    min-width: 190px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.25rem center;
    background-size: 1rem;
}

.ba-dark .ba-filter select,
.ba-hero--dark .ba-filter select {
    color: #ffffff;
}

/* Replaces the browser's default blue focus ring (visible as a stray box
   around the <select> once a filter is activated/clicked) with an on-brand
   indicator instead of removing focus styling outright. */
.ba-filter select:focus {
    outline: none;
    box-shadow: none;
    border-bottom-color: var(--ba-accent);
}

.ba-filter select:focus-visible {
    outline: 2px solid var(--ba-accent);
    outline-offset: 4px;
}

.ba-filter__col--clear {
    align-self: flex-end;
}

.ba-filter__clear {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 0;
    border: 1px solid currentColor;
    color: inherit;
    font-family: var(--ba-font-display);
    font-size: 0.9rem;
    padding: 0.5rem 1.4rem;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.ba-filter__clear:hover {
    color: var(--ba-accent);
}

.ba-dark .ba-filter__clear,
.ba-hero--dark .ba-filter__clear {
    color: #ffffff;
}
.main-resources .ba-case__media {
    height: 20rem;
}
.featrued-case-study:hover .ba-feature__media img {
    transform: scale(1.1);
}
.home-case-study-section .ba-feature__media img, .featrued-case-study .ba-arrow-link {
    transition: 0.4s;
    transition-delay: 0s !important;
}
.featrued-case-study:hover .ba-arrow-link {
    color: var(--ba-accent);
    gap: 1.2rem;
}

/* --------------------------------------------------------------------------
   Article cards (insights)
   -------------------------------------------------------------------------- */
.ba-hcard {
    position: relative;
    display: flex;
    background: #ffffff;
    border-radius: var(--ba-radius);
    overflow: hidden;
    height: 100%;
    color: var(--ba-ink);
}

.ba-hcard__media {
    overflow: hidden;
    width: 260px;
    flex-shrink: 0;
    background: #101010;
    aspect-ratio: 12 / 10;
}

.ba-hcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s ease;
    opacity: 0.7;
}

.ba-hcard:hover .ba-hcard__media img {
    transform: scale(1.04);
    opacity: 1;
}
.ba-hcard .ba-hcard__title,
.ba-hcard .ba-pill {
    transition: 0.4s;
}
.ba-hcard:hover .ba-hcard__title,
.ba-hcard:hover .ba-arrow-link {
    color: var(--ba-accent);
    gap: 1.1rem;
}
.ba-hcard:hover .ba-pill {
    background: var(--ba-card-dark);
    color: #fff;
}

.ba-hcard__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    flex-grow: 1;
}

.ba-hcard__title {
    font-size: 1.75rem;
    margin: 0;
    flex: 1;
}
.article-cards .ba-case__title {
    font-size: 1.75rem;
}

.ba-hcard__meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    align-items: center;
    /* color: var(--ba-ink-soft); */
}

/* The side-by-side grid never collapsed on narrow phones — the image
   column (min 140px) squeezed the text/meta column enough that the
   "Article" pill wrapped letter-by-letter (found via mobile QA). */
@media (max-width: 575.98px) {
    .ba-hcard {
        grid-template-columns: 1fr;
    }
    .ba-hcard__media {
        aspect-ratio: 16 / 9;
    }
}

.ba-acard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
}

.ba-acard__read {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Article detail
   -------------------------------------------------------------------------- */
.ba-article-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: var(--ba-section-y);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Weight/size inherited from .ba-article-top so this matches
   .ba-article-byline below instead of standing out as its own style. */
.ba-backlink {
    color: inherit;
    text-decoration: none;
    transition: 0.4s;
}

.ba-backlink:hover {
    color: var(--ba-accent);
}

.ba-article-head__title {
    font-size: clamp(2.2rem, 4.8vw, 4rem);
    max-width: 24ch;
    margin: 1.5rem 0 2.5rem;
}

.ba-article-byline {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ba-ink);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.ba-article-byline .role {
    display: block;
    color: var(--ba-ink-soft);
    margin-top: 0.35rem;
}

.ba-prose {
    max-width: 58rem;
}

.ba-prose p {
    margin-bottom: 1.5rem;
}

.ba-prose img {
    width: 100%;
    height: auto;
    border-radius: var(--ba-radius);
    display: block;
    margin-block: clamp(2rem, 4vw, 3rem);
}

.ba-fig-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 767.98px) {
    .ba-fig-grid {
        grid-template-columns: 1fr;
    }
}
.ba-single-article {
    text-wrap: initial;
}
.ba-single-article img + p,
.ba-single-article p + img {
    margin-top: 3rem;
    display: block;
}
label.ba-filter__label {
    font-size: 1.15rem;
}
.ba-filter select {
    font-size: 1.3rem;
}
.ba-stat__value + h3 {
    font-weight: 400;
    font-size: 1.3rem;
    max-width: 24ch;
}
.ba-work .ba-filter select {
    font-size: 1.15rem;
}
.ba-work label.ba-filter__label {
    font-size: 1rem;
}

/* Inline related card inside article */
.ba-related-inline {
    display: grid;
    grid-template-columns: 17rem 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
    margin-block: clamp(2.5rem, 5vw, 4rem);
    max-width: 57rem;
}

.ba-related-inline__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--ba-radius);
    display: block;
}

.ba-related-inline__topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.ba-related-inline__title {
    font-size: 2.4rem;
    margin: 0 0 1.5rem;
    max-width: 34rem;
}

@media (max-width: 767.98px) {
    .ba-related-inline {
        grid-template-columns: 1fr;
    }
}

/* Share */
.ba-share {
    border-top: 1px solid var(--ba-border);
    padding-top: 2rem;
    margin-block: var(--ba-section-y);
}

.ba-share__icons {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.ba-share__icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--ba-ink);
    color: #ffffff;
    transition: background 0.2s ease;
}

.ba-share__icons a:hover {
    background: var(--ba-accent);
    color: var(--ba-ink);
}

.ba-share__icons svg {
    width: 1.1rem;
    height: 1.1rem;
}

/* --------------------------------------------------------------------------
   Resource detail (playbook)
   -------------------------------------------------------------------------- */
.ba-resource-hero {
    padding-block: var(--ba-section-y) 0;
}

.ba-resource-hero__title {
    font-size: clamp(2.4rem, 5.4vw, 4.6rem);
    margin: 0 0 2rem;
}

.ba-resource-hero__mock img {
    width: 100%;
    max-width: 460px;
    height: auto;
}

.ba-resource-hero__rule {
    border-top: 1px solid var(--ba-ink);
    margin-block: clamp(3rem, 6vw, 5rem) 0;
}

.ba-included__lead {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    margin: 0;
}

.ba-included__title {
    font-size: 1.4rem;
    margin: 0 0 1.75rem;
}

.ba-included__item+.ba-included__item {
    margin-top: 2rem;
}

.ba-included__item h4 {
    font-size: 1.05rem;
    font-weight: 500;
    margin: 0 0 0.3rem;
}

.ba-included__item p {
    font-size: 0.9rem;
    color: var(--ba-ink-soft);
    margin: 0;
}

.ba-resource-overview h3.ba-included__lead {
    font-size: 3.2rem;
}

.ba-resource-overview h2.ba-included__title {
    font-size: 2rem;
}

@media (min-width: 993px) {
    .ba-resource-overview .row > div:last-child {
        padding-left: 120px;
    }
}

.ba-resource-overview .ba-included__item h4 {
    font-weight: 400;
    font-size: 1.3rem;
}
.ba-resource-overview .ba-included__item p {
    font-size: 1rem;
}
select {
    outline: 0 !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Forms (contact, download)
   -------------------------------------------------------------------------- */
.ba-form label {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.ba-form .ba-field {
    margin-bottom: 2.25rem;
}

.ba-form input,
.ba-form select,
.ba-form textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ba-border-dark);
    border-radius: 0;
    color: #ffffff;
    font-size: 1.05rem;
    padding: 0.5rem 0 0.85rem;
}

.ba-form input::placeholder,
.ba-form textarea::placeholder {
    color: var(--ba-on-dark-soft);
}

.ba-form input:focus,
.ba-form select:focus,
.ba-form textarea:focus {
    outline: none;
    border-bottom-color: var(--ba-accent);
}

.ba-form select {
    appearance: none;
    -webkit-appearance: none;
    color: var(--ba-on-dark-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.25rem center;
    background-size: 1.1rem;
}

.ba-form button[type="submit"] {
    cursor: pointer;
}

.ba-form__note {
    font-size: 1rem;
    color: var(--ba-on-dark-soft);
    margin: 0;
}

/* Fluent Forms plugin output — align with .ba-form design */
.ba-form .fluentform .ff-el-group {
    margin-bottom: 2.25rem;
}

.ba-form .fluentform .ff-el-input--label {
    margin-bottom: 0.75rem;
}

.ba-form .fluentform .ff-el-input--label label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
}

.ba-form .fluentform .ff-el-form-control {
    width: 100%;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ba-border-dark) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #ffffff;
    font-size: 1rem;
    padding: 0.5rem 0 0.85rem !important;
}

.ba-form .fluentform input.ff-el-form-control::placeholder,
.ba-form .fluentform textarea.ff-el-form-control::placeholder {
    color: var(--ba-on-dark-soft);
    opacity: 1;
}

.ba-form .fluentform .ff-el-form-control:focus {
    outline: none;
    box-shadow: none !important;
    border-bottom-color: var(--ba-accent) !important;
    color: #fff;
}

.ba-form .fluentform select.ff-el-form-control {
    appearance: none;
    -webkit-appearance: none;
    color: var(--ba-on-dark-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.25rem center;
    background-size: 1.1rem;
}

.ba-form .fluentform .ff_submit_btn_wrapper {
    margin-top: 0.5rem;
}

.ba-form .fluentform .ff-btn-submit {
    display: inline-flex !important;
    align-items: center;
    gap: 1.2rem;
    padding: 0.85rem 1.1rem 0.85rem 1.6rem !important;
    background: var(--ba-accent) !important;
    color: var(--ba-ink) !important;
    border: 0 !important;
    border-radius: 0;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: none !important;
    transition: background 0.2s ease, color 0.2s ease;
    text-align: center;
    min-width: 200px;
    justify-content: center;
}

.ba-form .fluentform .ff-btn-submit:hover {
    background: var(--ba-accent-strong) !important;
}

.ba-form .fluentform .ff-btn-submit::after {
    content: "";
    width: 1em;
    height: 1em;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.6'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.2s ease;
}

.ba-form .fluentform .ff-btn-submit:hover::after {
    transform: translateX(0.3rem);
}
.ba-model-about .ba-problems__title {
    max-width: none;
}

/* Contact page */
.ba-contact {
    background: var(--ba-surface-dark);
    color: var(--ba-on-dark);
    padding-block: var(--ba-section-y);
}

.ba-contact__title {
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    color: #ffffff;
    margin: 0 0 1.75rem;
}

.ba-contact__lead {
    max-width: 48ch;
    margin: 0 0 3rem;
}

.ba-contact__rule {
    border-top: 1px solid var(--ba-border-dark);
    max-width: 28rem;
    margin-bottom: 3rem;
}

.ba-contact__subtitle {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    color: #ffffff;
    margin: 0 0 2rem;
}

.ba-contact__hint+.ba-contact__hint {
    margin-top: 3rem;
}

.ba-contact__hint h3 {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ba-accent);
    margin: 0 0 0.75rem;
}

.ba-contact__hint p {
    font-size: 0.95rem;
    margin: 0;
    max-width: 52ch;
}

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */
.ba-views {
    padding-block: 0 var(--ba-section-y);
}

.ba-views__icon {
    width: 5rem;
    height: 5rem;
    margin-bottom: 1.25rem;
    color: var(--ba-ink);
    /* Uploaded icons aren't all square — `fill` was distorting them to hit
       the 5rem box exactly. `contain` keeps their native proportions. */
    object-fit: contain;
}

.ba-views__title {
    font-size: 1.25rem;
    margin: 0 0 0.85rem;
}

.ba-views__text {
    font-size: 0.92rem;
    font-weight: 300;
    color: var(--ba-ink-soft);
    margin: 0;
    max-width: 44ch;
}

.ba-person__media {
    aspect-ratio: 1 / 1.2;
    overflow: hidden;
    border-radius: var(--ba-radius);
    margin-bottom: 1.25rem;
}

.ba-person__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;
}

.ba-person:hover .link-overlay {
    background: rgba(60, 60, 60, 0.6);
    opacity: 1;
    backdrop-filter: blur(10px);
}
.ba-person .link-overlay {
    background: rgba(60, 60, 60, 0.6);
    opacity: 0;
    transition: 0.24s;
    backdrop-filter: blur(0px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-indent: 0;
}
.ba-person .link-overlay .ba-person__linkedin-label {
    color: var(--ba-accent);
    text-decoration: none;
    font-size: 1.1rem;
}

.ba-person__name {
    font-size: 1.05rem;
    font-weight: 400;
    margin: 0;
}

.ba-person__role {
    font-size: 0.9rem;
    color: var(--ba-ink-soft);
    margin: 0.2rem 0 0.85rem;
}

.ba-person__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.8rem;
}

.ba-person__tags span {
    border: 1px solid var(--ba-border);
    border-radius: 4px;
    padding: 0.3rem 0.55rem;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ba-ink-soft);
}
.ba-principles__icon img {
    width: 92%;
}

/* --------------------------------------------------------------------------
   About page principles
   -------------------------------------------------------------------------- */
.ba-principles {
    padding-block: var(--ba-section-y);
}

.ba-principles__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background: #ffffff;
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius);
    margin-bottom: 1.5rem;
}

.ba-principles__icon svg {
    width: 1.8rem;
    height: 1.8rem;
    color: var(--ba-ink);
}

.ba-principles__index {
    display: block;
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    color: var(--ba-ink-soft);
    margin-bottom: 0.75rem;
}

.ba-principles__title {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--ba-accent);
    margin: 0 0 0.85rem;
}

.ba-principles__text {
    font-size: 0.95rem;
    color: var(--ba-ink-soft);
    margin: 0;
}
.ba-gap img {
    max-width: 36rem;
    margin-left: auto;
}

/* Proof at scale (light stats with copy) */
.ba-proof {
    padding-block: var(--ba-section-y);
}

.ba-proof__value {
    font-family: var(--ba-font-display);
    font-size: clamp(2.6rem, 5vw, 3.8rem);
    font-weight: 400;
    color: var(--ba-accent);
    margin: 0;
}
/* "How the diagnostic runs" steps. The step number was an icon image until the
   icon subfield was dropped from the field group, so it now renders as text and
   the negative margins that pulled the 5em-tall artwork back into the line have
   gone with it. */
.ba-model-step {
    align-items: baseline;
    gap: 0.85rem;
    margin-bottom: 0.55rem;
}

.ba-model-step__num {
    color: var(--ba-accent);
    flex: 0 0 auto;
    font-size: 115%;
}

ul.ba-model-steps {
    margin-bottom: 2em;
}
.ba-strategy-first .ba-model-lead, .ba-strategy-first ul.ba-model-steps ~ p {
    letter-spacing: -0.5px;
    font-size: 1.3em;
}

.ba-model-lead {
    font-size: 20px;
    font-weight: 400;
}

.ba-proof__label {
    font-size: 1.05rem;
    margin: 0 0 0.85rem;
}

.ba-proof__text {
    font-size: 0.9rem;
    color: var(--ba-ink-soft);
    margin: 0;
}

/* Dark split (built to close the gap) */
.ba-gap {
    background: var(--ba-surface-dark);
    color: var(--ba-on-dark);
    padding-block: var(--ba-section-y);
}

.ba-gap__title {
    font-size: clamp(2rem, 3.8vw, 3.4rem);
    color: #ffffff;
    margin: 0 0 1.75rem;
}

.ba-gap__text {
    max-width: 48ch;
    margin: 0;
}

.ba-gap img {
    width: 100%;
    height: auto;
    border-radius: var(--ba-radius);
    display: block;
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.ba-error .ba-hero-bg__inner {
    padding-block: clamp(6rem, 14vw, 12rem);
    text-align: center;
}

.ba-error__title {
    font-size: clamp(2.4rem, 5.4vw, 4.2rem);
    color: #ffffff;
    margin: 0 0 1.75rem;
}

.ba-error__text {
    max-width: 52ch;
    margin: 0 auto 1.5rem;
}

/* --------------------------------------------------------------------------
   Bubble Animations
   -------------------------------------------------------------------------- */
.ba-person {
    animation: scale-up 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.col:nth-child(4n+1) .ba-person {
    animation-delay: 0s;
}

.col:nth-child(4n+2) .ba-person {
    animation-delay: 0.12s;
}

.col:nth-child(4n+3) .ba-person {
    animation-delay: 0.24s;
}

.col:nth-child(4n+4) .ba-person {
    animation-delay: 0.36s;
}

@keyframes scale-up {
    from {
        transform: scale(0.8);
        opacity: 0.66;
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.br-12 {
    width: 11ch;
    display: inline-block;
}

.stretched-link {
    position: absolute;
    inset: 0;
    opacity: 0;
    font-size: 0;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 1;
}
.site-main iframe {
    width: 100%;
    min-width: 600px;
    height: 520px;
}
section.ba-hero-bg.ba-error.ba-media-overlay:after {
    background: linear-gradient(180deg, rgba(22, 22, 22, 1) 0%, rgba(11, 11, 11, 0.70) 45%, rgba(11, 11, 11, 0.75) 70%, rgba(22, 22, 22, 1) 100%);
}

section.ba-deliver.pt-0 .col-lg-6 + .col-lg-6 {
    padding-top: 16px;
}
#work .ba-section-head__title {
    max-width: 60rem;
}

@media (hover: hover) {
    .ba-eyebrow__parent:hover {
        color: #151716;
    }
}

@media (min-width: 1400px) {
    /* Compensation constant scales with .ba-mega__inner's own horizontal gap
       (client feedback round 3 tightened that from 4rem to 2.5rem — see the
       min-width: 992px block below) so 4 equal columns still fill the row. */
    .ba-mega__inner:has(.ba-mega__col:nth-child(4)) > div {
        flex-basis: calc(25% - 4.5rem);
    }
    .ba-mega__inner:has(.ba-mega__col:nth-child(4)) .ba-mega__desc {
        font-size: 0.9rem;
        text-wrap: initial;
        margin-right: -0.5rem;
    }
}
@media (min-width: 1678px) {
    html {
        font-size: 17px;
    }

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 1460px;
    }

    .container.common-page-vertical-padding {
        max-width: 1100px;
    }

    :root {
        --ba-maxw: 1560px;
    }
    .col-12.col-md-4.col-xxl-5 {
        width: fit-content;
    }
    .col-6.col-md-4.col-xxl-3 {
        margin-left: auto;
    }
}

@media (max-width: 1080px) {
    .ba-strategy-first .ba-shell {
        padding-inline: 24px;
    }
    .ba-strategy-first-images {
        overflow: auto;
        margin: 0 -14px;
    }
    .ba-strategy-first-images div:first-child {
        width: 203.5px;
    }
    .ba-strategy-first-images div:last-child {
        width: 206px;
    }
    .ba-strategy-first-images div:nth-child(2) {
        width: 533.33px;
        flex-shrink: 0;
        margin-inline: 60px;
    }
    .ba-strategy-first-images div:first-child:after, .ba-strategy-first-images div:nth-child(2):after {
        width: 50px;
        height: 10px;
        margin-top: -5px;
    }
}
@media (max-width: 767px) {
    :root {
        --ba-header-height: 80px;
        --bs-gutter-y: 1.6rem;
    }
    html {
        font-size: 13px;
    }
    .ba-logo img {
        height: 38px;
    }
    .ba-header .navbar {
        padding-block: 1rem;
    }
    .ba-hero-bg__actions {
        flex-direction: column;
        gap: 1.5rem;
    }
    .ba-hero-bg__actions .ba-btn, .ba-btn {
        font-size: 1.1rem;
        justify-content: center;
        display: flex;
        width: 100%;
    }
    .ba-btn .ba-arrow {
        left: -0.05rem;
    }
    .ba-header .ba-btn-contact {
        font-size: 1.1rem;
        width: 100%;
        justify-content: center;
        margin-top: 1rem;
    }
    .ba-changes .col-12:nth-child(2) {
        margin-top: 3.5rem;
    }
    
    
    .ba-eyebrow {
        font-size: 0.85rem;
    }
    .home-case-study-section .ba-feature__media img {
        aspect-ratio: 10 / 8;
        max-height: 340px;
    }

    /* Normalize title */
    .ba-hero-bg__title,
    .ba-solution__title,
    .ba-panel__title,
    h1.ba-split-head__title.what-we-do-head__title {
        font-size: 2.2rem;
    }
    /* Normalize secondary title */
    .ba-changes__title,
    .ba-when__title {
        font-size: 1.7rem;
    }
    /* Normalize third title */
    .ba-change__head {
        font-size: 1.5rem;
    }
    .ba-when__conditions-lead,
    .ba-condition__title,
    .ba-changes__list .ba-change__head,
    .ba-when__card-title {
        font-size: 1.3rem;
    }
    /* Normalize content */
    .ba-nav .nav-link,
    .ba-mega__link-row,
    .ba-header .ba-btn-contact,
    .ba-hero-bg__actions .ba-btn, .ba-btn,
    .ba-solution__text,
    .ba-when__list li,
    .ba-when__list-rich li,
    .ba-condition__text,
    .ba-hero-bg__sub {
        font-size: 1.1rem;
    }
    /* Normalize small texts */
    .ba-mega__desc {
        font-size: 0.95rem;
    }
    

    .ba-when .col-lg-6:nth-child(2) {
        margin-top: 2.2rem;
    }
    .ba-change__icon {
        width: 2.5rem;
        height: 2.4rem;
    }
    .ba-change {
        gap: 0.6rem;
    }
    h3.ba-changes__title {
        margin-bottom: 0.4rem;
        margin-top: 1rem;
    }
    .ba-hcard {
        flex-direction: column;
    }
    
    .ba-hcard__media {
        width: 100%;
    }
    
    .article-cards > div {
        margin-bottom: 0;
    }
    .common-page-vertical-padding {
        padding-block: 50px;
    }
    
    h1.common-page-title {
        font-size: 3rem;
    }
}

/* --------------------------------------------------------------------------
   Client feedback round 3 (2026-08-26) — desktop nav, min-width: 992px
   Matches navbar-expand-lg's own breakpoint: the range where the horizontal
   desktop nav + floating mega panel are actually showing (below this, header.php
   renders the full-screen accordion nav instead, styled separately above).
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* Mega menu column titles (Sectors, Case Studies, etc.) should read at
       the same size as the top-level nav items next to them. */
    .ba-mega__link-row {
        font-size: 1.05rem;
    }

    .ba-mega__arrow {
        width: 22px;
        height: 22px;
    }

    /* Tighter column gap: also the fix for the same complaint raised
       against the narrower tablet-landscape range this block still covers. */
    .ba-mega__inner {
        gap: 2rem 3rem;
    }

    .ba-nav .nav-link {
        padding-inline: 1.35rem;
    }
}

/* --------------------------------------------------------------------------
   Client feedback round 3 (2026-08-26) — desktop only, min-width: 1081px
   -------------------------------------------------------------------------- */
@media (min-width: 1081px) {
    /* Homepage hero: narrower title column leaves the background video more
       room and pushes the wrap onto a third line. 19ch confirmed (via a
       static harness against the real stylesheet) to break as "Build the
       cost, resilience" / "and differentiation" / "you can't buy." */
    .ba-hero-bg__title {
        max-width: min(19ch, 100%);
    }

    /* "When to use Burnsall" two-up cards: list copy and paragraph copy read
       at two different sizes even though they're visually paired. */
    .ba-when__list li,
    .ba-when__list-rich li,
    .ba-when__copy {
        font-size: 1rem;
    }

    .ba-proof--pad .ba-stat__value {
        font-size: 2.8rem;
    }

    /* Three conditions: index + title size, per design (weight fix is global,
       see .ba-condition__index / .ba-condition__title above). */
    .ba-condition__title {
        font-size: 1.2rem;
    }

    /* Operator stats (homepage "who we are"): index labels were cleared via
       ACF but the now-empty span still reserved its own line-height, pushing
       the first stat value out of alignment with the heading beside it. */
    .d-flex.flex-column .ba-stat__index:empty {
        display: none;
    }

    .d-flex.flex-column.g-4.g-lg-5 {
        gap: 1.75rem;
    }

    .d-flex.flex-column .ba-stat__value {
        font-size: clamp(2rem, 3.6vw, 3.2rem);
    }

    .ba-feature__table dt {
        font-size: 0.74rem;
    }

    /* Sector parent hero: grey supporting copy reads too light against the designs. */
    .ba-split-head__text {
        color: #0E0E0E;
    }

    /* Team hero title + view captions, matched to Resources parent sizing. */
    body.page-template-page-team-php .ba-hero__title {
        font-size: clamp(2rem, 5vw, 4.4rem);
    }

    .ba-views__text {
        font-size: 1.125rem;
    }

    /* Resources parent: large thumbnail runs far taller than the two beside
       it, stretching the row and pushing their buttons down with it. */
    body.page-template-page-resources-php .col-lg-6 .ba-case__media {
        aspect-ratio: 16 / 9;
    }

    /* Resource child download panel: intro line reads too small next to the designs. */
    #download .ba-contact__lead {
        font-size: 1.15rem;
    }

    /* Articles parent + Sector child heroes, matched to Resources parent sizing. */
    body.page-template-page-insights-php .ba-hero__title,
    body.single-sector .ba-hero__title {
        font-size: clamp(2rem, 5vw, 4.4rem);
    }

    /* For Retailers "What we deliver": right column list should start level
       with the title on the left. */
    .ba-deliver .row.g-5 {
        align-items: flex-start;
    }

    /* Case study hero, matched to Resources parent sizing, plus smaller x3 callouts. */
    body.single-case-study .ba-hero__title {
        font-size: clamp(2rem, 5vw, 4.4rem);
    }

    .ba-meta__label {
        font-size: 0.85rem;
    }

    .ba-meta__value {
        font-size: 1.3rem;
    }

    /* Resource child "What's inside": chapters read too tight against each other. */
    .ba-included__item+.ba-included__item {
        margin-top: 2.75rem;
    }

    /* Paired with the global font-weight: 300 fix on these same selectors
       (see .ba-split-head__text / .ba-panel__text / .ba-views__text above) —
       client asked for slightly tighter line spacing to go with the lighter
       weight. Kept as a scoped size adjustment rather than folded into that
       global rule, since only the weight change was asked for everywhere. */
    .ba-split-head__text {
        line-height: 1.5;
    }

    .ba-panel__text,
    .ba-views__text {
        line-height: 1.45;
    }

    .ba-inset-media--about img {
        margin-inline: auto;
        max-width: 70%;
    }
}


@media (max-width: 1180px) {
    .ba-stat {
        container-type: inline-size;
        width: 100%;
    }
    .ba-results .ba-stat__value {
        font-size: clamp(2.2rem, 18cqw, 3.2rem);
        white-space: nowrap;
    }
}
@media (min-width: 600px) and (max-width: 1180px) {
    .single-article-section .ba-shell {
        padding-inline: var(--ba-gutter);
    }
}

/* --------------------------------------------------------------------------
   Client feedback round 3 (2026-08-26) — tablet, min-width: 600px and
   max-width: 1080px
   -------------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 1180px) {
    /* Article body copy runs edge-to-edge at this width — restore a proper
       side gutter and a readable line measure. */
    .single-article-section .ba-shell {
        padding-inline: 32px;
    }

    .ba-prose {
        max-width: 46rem;
    }

    /* Case study "Results in numbers": row-cols-lg-4 leaves each stat too
       narrow for its own value at this width, and white-space: nowrap was
       forcing it to overflow into the next column instead of wrapping —
       the actual cause of "01 overlaying 02", and not limited to that pair. */
    .ba-results .ba-stat__value {
        white-space: normal;
    }

    /* Resources parent (dark band): col-lg-3 cards are too narrow for the
       pill + category on one line, and the tall col-lg-6 card beside them
       was stretching their footer button away from the content above it. */
    body.page-template-page-resources-php .col-lg-3 .ba-case__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    body.page-template-page-resources-php .ba-case__foot {
        margin-top: 1.5rem;
    }

    /* Three-column blocks (About "what makes this possible", For Retailers
       "problems", Team "three views") only reflow to full-width columns
       below the lg breakpoint (992px) — their copy kept a desktop ch-based
       max-width, leaving dead space beside it once the column itself went
       full width in the tablet-portrait range. */
    .ba-problems__item-title,
    .ba-problems__item-text,
    .ba-views__text {
        max-width: none;
    }

    /* Resource child hero mockup image, too large at this width. */
    .ba-resource-hero__mock img {
        max-width: 280px;
    }

    /* Homepage feature case study image: the tall desktop crop (1/1.4) was
       never adjusted for this range, so at full column width it towers —
       already fixed below 767px, this closes the same gap for tablet. */
    .home-case-study-section .ba-feature__media img {
        aspect-ratio: 10 / 8;
        max-height: 340px;
    }
    .ba-case__media, .ba-case__media img {
        max-height: 350px;
        /* object-fit: contain; */
    }

    /* Homepage operator stats: a straight vertical stack once its column
       goes full width, leaving half the row empty beside it. */
    .d-flex.flex-column.g-4.g-lg-5 {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem 2rem;
    }

    /* "What changes for the retailer/supplier" icon rows read cramped. */
    .ba-changes__list {
        gap: 2.25rem;
    }

    .ba-change {
        padding-top: 1.75rem;
    }
}
@media (min-width: 600px) and (max-width: 991.98px) {
    .ba-textblock p, .ba-gap__text, .ba-split-head__title, .ba-gap img {
        max-width: none;
        text-wrap: auto;
    }    
    .ba-changes .col-lg-6 + .col-lg-6 {
        margin-top: 4rem;
    }
    .ba-changes__title {
        margin-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
   Client feedback round 3 (2026-08-26) — full-screen mobile nav, light mode
   Same max-width: 991.98px breakpoint as the mobile nav rules above (the
   collapse only exists below navbar-expand-lg's own 992px toggle) rather
   than the general mobile cutoff, so this can't fall out of sync with the
   nav's actual show/hide range.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    #ba-primary-nav.show,
    #ba-primary-nav.collapsing {
        background-color: var(--ba-bg);
    }

    #ba-primary-nav.show .ba-logo img,
    #ba-primary-nav.collapsing .ba-logo img {
        filter: brightness(0);
    }

    #ba-primary-nav.show .ba-nav .nav-link,
    #ba-primary-nav.collapsing .ba-nav .nav-link {
        color: var(--ba-ink);
    }

    #ba-primary-nav.show .ba-mega__link,
    #ba-primary-nav.collapsing .ba-mega__link {
        color: var(--ba-ink);
    }

    #ba-primary-nav.show .ba-mega__desc,
    #ba-primary-nav.collapsing .ba-mega__desc {
        color: var(--ba-ink-soft);
    }
    .ba-header .ba-btn-contact {
        background: var(--ba-accent);
    }
    #ba-primary-nav.show .ba-nav .nav-link[aria-expanded="true"] {
        color: var(--ba-accent);
    }
    #ba-primary-nav.show .ba-mega__desc {
        max-width: 20rem;
    }    
}
/*
.ba-cleanroom img,
.image-blocks img {
    image-rendering: crisp-edges;
    image-rendering: pixelated; 
    image-rendering: -webkit-optimize-contrast; 
}*/

/* --------------------------------------------------------------------------
   Client feedback round 3 (2026-08-26) — mobile, max-width: 767px
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Contact page form ships through Fluent Forms (see .ba-form .fluentform
       above) — its submit button wasn't included in the .ba-btn full-width
       rule further up this file, so it stayed content-width on mobile. */
    .ba-form .fluentform .ff-btn-submit {
        width: 100% !important;
        justify-content: center;
    }

    /* Articles child hero: byline packs author/role, read time and date
       into one crowded row — stack them instead. */
    .ba-article-byline {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .ba-article-byline span:last-child {
        display: block;
        width: 100%;
    }
    .ba-single-article > img {
        min-height: 200px;
        object-fit: cover;
    }

    section.ba-hero-bg.ba-media-overlay {
        display: flex;
        flex-direction: column;
    }
    
    section.ba-hero-bg.ba-media-overlay video {
        position: relative;
        order: 1;
        margin-top: -3rem;
        min-height: 220px;
    }

    /* CTA button already goes full-width here, but kept justify-content:
       space-between from its desktop layout, splitting the label and arrow
       to opposite edges instead of reading as one connected group. */
    .ba-cta__btn {
        justify-content: center;
        gap: 1rem;
    }

    /* Footer logo reads oversized (and any source-image softness is more
       visible) at the size tuned for larger screens. */
    .ba-footer .ba-logo img {
        height: 27px;
    }
    .ba-mega__col {
        flex-basis: 100%;
    }
    .ba-logos__box img {
        max-height: 60px;
    }
    .ba-meta__label {
        font-size: 0.75rem;
        white-space: nowrap;
        padding-bottom: 0.2rem;
    }
    .ba-meta {
        gap: 1.5rem;
    }
    .ba-meta__value {
        font-size: 1.05rem;
        letter-spacing: -0.03rem;
    }
    section.ba-dark.ba-model h3.ba-title {
        font-size: 1.6rem;
        margin-bottom: 1.25rem;
    }
    section.ba-dark.ba-model h3.ba-title + ul {
        font-size: 1.1rem;
    }
    .ba-resource-overview h3.ba-included__lead {
        font-size: 1.6rem;
    }
}
/* ---------------------------------------------------------------------------
   Client feedback round 4 (2026-09-10) — desktop only, min-width: 1081px
   --------------------------------------------------------------------------- */
@media (min-width: 1081px) {
    /* "How the diagnostic runs": the 7/5 split leaves too much air between the
       big left-hand title and the numbered steps. An even split pulls the steps
       back towards the title, as in the design. */
    .ba-strategy-first .ba-shell > .row > .col-lg-7,
    .ba-strategy-first .ba-shell > .row > .col-lg-5 {
        flex: 0 0 auto;
        width: 50%;
    }

}