/* ═══════════════════════════════════════════════════════════════════
   HALO AUTHORITY THEME – Stylesheet
   Version: 1.0.0

   DESIGN PHILOSOPHY:
   - All colours, fonts, spacing are CSS custom properties
   - Swap the :root variables per project for instant rebrand
   - Standalone theme — no GeneratePress dependency
   - Minimal specificity, zero !important (almost)
   - Lean, performant, SEO-optimised
   ═══════════════════════════════════════════════════════════════════ */


/* ─── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Offset scroll targets so they don't hide behind sticky header */
    scroll-padding-top: 120px;
}

body {
    margin: 0;
    background-color: var(--halo-white, #ffffff);
    color: var(--halo-dark-grey, #333333);
    font-family: var(--halo-body-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: var(--halo-base-font-size, 16px);
    font-weight: var(--halo-body-weight, 400);
    line-height: var(--halo-body-line-height, 1.7);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--halo-primary, #1a7a3a);
    text-decoration: none;
}

a:hover, a:focus-visible {
    color: var(--halo-primary-dark, #145f2d);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--halo-heading-font, inherit);
    font-weight: var(--halo-heading-weight, 700);
    line-height: var(--halo-heading-line-height, 1.2);
    color: var(--halo-heading-colour, var(--halo-black, #1a1a1a));
    /* Even out heading line lengths so a single word never widows onto its
       own line. Matters most for headings we do not control — feed card
       titles come straight from the client's CRM and cannot be reworded.
       Progressive enhancement: unsupported browsers just wrap as before. */
    text-wrap: balance;
}
/* Hero titles are set large and are the most obvious place a widow shows.
   The eyebrow (small-title) and other hero types keep `balance`. The BIG title
   is alignment-aware: `balance` evens out every line length, which is right for
   a CENTRED hero but on a LEFT/RIGHT hero shrinks the heading so it never fills
   its Content Max Width — even though the body text does (it reads as "narrower
   than the measure I set"). So the big title defaults to `pretty` (fills the
   measure with a natural ragged edge, only tidying the last line to avoid a
   widow; unsupported browsers fall back to normal wrapping, which also fills
   the measure — the intent holds either way), and centred heroes switch back
   to `balance`. */
.halo-hero-banner__small-title,
.halo-hero__title {
    text-wrap: balance;
}
.halo-hero-banner__big-title {
    text-wrap: pretty;
}
.halo-hero-banner--center .halo-hero-banner__big-title {
    text-wrap: balance;
}

h1 { font-size: var(--halo-h1-size, 48px); }
h2 { font-size: var(--halo-h2-size, 36px); }
h3 { font-size: var(--halo-h3-size, 24px); }
h4 { font-size: var(--halo-h4-size, 20px); }

p, li {
    line-height: var(--halo-body-line-height, 1.7);
}

ul, ol {
    padding-left: 1.5em;
}

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

.screen-reader-text:focus,
.sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0.5em 1em;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: var(--halo-primary);
    color: var(--halo-white);
    z-index: 100000;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
}

.skip-link:focus {
    top: 5px;
    position: fixed;
}

/* ─── Layout ───────────────────────────────────────────────────── */
.site-content {
    background-color: var(--halo-white, #ffffff);
}

.site-main {
    margin: 0;
    padding: 0;
}

/* Home page: heroes now use their own section padding (set via brand
   "section_padding") so the white card has breathing room above and
   below it. To opt back into the legacy flush-to-header look, add the
   body class `halo-hero-flush` (handled in functions.php critical CSS). */

/* Breadcrumb wrapper: only render padding if it has content */
.halo-breadcrumbs-wrap:empty {
    display: none;
}

.site-content a {
    color: var(--halo-primary);
}

.site-content a:hover {
    color: var(--halo-primary-dark);
}

/* Entry content (standard WP pages) */
.entry-content {
    max-width: var(--halo-container, 1200px);
    margin: 0 auto;
}

/* Key Takeaways box — emitted by the AI at the top of every blog post.
   The wrapper class is `.halo-key-takeaways`. Brand-aware: uses primary
   colour for the left border + heading accent, off-white background, and
   the card radius. If the AI puts a plain <ul> with no wrapper, this
   doesn't fire — only the wrapper version gets the styled box. */
.halo-key-takeaways {
    background: var(--halo-off-white, #f8f9fa);
    border-left: 4px solid var(--halo-primary);
    border-radius: var(--halo-radius-sm, 8px);
    padding: 18px 24px;
    margin: 0 0 28px;
}
.halo-key-takeaways h3 {
    margin: 0 0 10px;
    font-size: var(--halo-h4-size, 20px);
    color: var(--halo-primary);
}
.halo-key-takeaways ul {
    margin: 0;
    padding-left: 20px;
}
.halo-key-takeaways li {
    margin: 4px 0;
    line-height: 1.55;
}

/* Brand-aware tables for blog post + page body content. WP's default
   table styling is bland; this gives every AI-emitted comparison table
   a consistent on-brand look with zebra rows + a coloured header. */
.entry-content table,
.halo-rich-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0 1.5em;
    font-size: 0.95rem;
    border: 1px solid var(--halo-light-grey, #e5e5e5);
    border-radius: var(--halo-radius-sm, 8px);
    overflow: hidden;
}
.entry-content table thead th,
.halo-rich-content table thead th {
    background: var(--halo-primary);
    color: var(--halo-white, #fff);
    text-align: left;
    padding: 10px 14px;
    font-weight: 600;
}
.entry-content table tbody td,
.halo-rich-content table tbody td {
    padding: 10px 14px;
    border-top: 1px solid var(--halo-light-grey, #e5e5e5);
    vertical-align: top;
}
.entry-content table tbody tr:nth-child(even),
.halo-rich-content table tbody tr:nth-child(even) {
    /* Adaptive zebra tint: a low-opacity shade of the TEXT colour (currentColor)
       so it works on light AND dark section backgrounds. A solid off-white made
       white text vanish on the striped rows when a table sits on a dark section. */
    background: rgba(128, 128, 128, 0.12); /* fallback where color-mix is unsupported */
    background: color-mix(in srgb, currentColor 8%, transparent);
}

/* ─── Long-form content spacing ─────────────────────────────────
   Tuned via Site Settings → Spacing & Layout:
   - paragraph_spacing      → --halo-paragraph-spacing
   - heading_spacing_above  → --halo-heading-spacing-above
   - heading_spacing_below  → --halo-heading-spacing-below
   Applies to any rich-content section and to standard WP entry-content. */
.halo-rich-content p,
.halo-rich-content li,
.entry-content p,
.entry-content li {
    margin-bottom: var(--halo-paragraph-spacing, 18px);
}

.halo-rich-content {
    font-size: var(--halo-text-content-body-size, var(--halo-base-font-size, 16px));
    font-weight: var(--halo-text-content-body-weight, var(--halo-body-weight, 400));
    line-height: var(--halo-text-content-body-line-height, var(--halo-body-line-height, 1.7));
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.halo-section--rich-content.halo-section--max-narrow .halo-rich-content,
.halo-section--rich-content.halo-section--max-narrow .halo-toc--top {
    max-width: 720px;
}

.halo-section--rich-content.halo-section--max-medium .halo-rich-content,
.halo-section--rich-content.halo-section--max-medium .halo-toc--top {
    max-width: 900px;
}

.halo-section--rich-content.halo-section--max-full .halo-rich-content,
.halo-section--rich-content.halo-section--max-full .halo-toc--top {
    max-width: none;
}

.halo-rich-content :is(p, li, ul, ol) {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.halo-rich-content h2,
.halo-rich-content h3,
.halo-rich-content h4,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin-top: var(--halo-heading-spacing-above, 40px);
    margin-bottom: var(--halo-heading-spacing-below, 14px);
}

/* First element in a content block shouldn't push down against the
   preceding section — the section-padding is already doing that. */
.halo-rich-content > :first-child,
.entry-content > :first-child {
    margin-top: 0;
}

/* ─── Inline content images (used by AI expansion + manual figures) ───
   The .halo-content-img class wraps <img> in <figure> for safe spacing
   inside long-form prose. Responsive width, rounded corners matching the
   brand, breathing room above and below so images don't collide with
   heading or paragraph margins. */
.halo-rich-content figure.halo-content-img,
.entry-content figure.halo-content-img,
figure.halo-content-img {
    margin: 28px 0;
    text-align: center;
}
.halo-rich-content figure.halo-content-img img,
.entry-content figure.halo-content-img img,
figure.halo-content-img img {
    width: 100%;
    height: auto;
    border-radius: var(--halo-radius-md, 10px);
    display: block;
}
.halo-rich-content figure.halo-content-img figcaption,
.entry-content figure.halo-content-img figcaption,
figure.halo-content-img figcaption {
    font-size: 0.88em;
    color: var(--halo-muted, #666);
    margin-top: 8px;
    font-style: italic;
}

/* ─── Tables — applied to any table inside a flex section or
       long-form content wrapper. Styling follows brand variables and
       pairs with the .halo-table-wrap auto-wrap in sections.js for
       horizontal scroll on narrow viewports. ───────────────────── */
.halo-rich-content table,
.entry-content table,
.halo-section table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.92em;
    line-height: 1.5;
    border: 1px solid var(--halo-light-grey, #e5e5e5);
    border-radius: var(--halo-radius-sm, 6px);
    overflow: hidden;
}

.halo-rich-content thead,
.entry-content thead,
.halo-section thead {
    background: var(--halo-primary, #1a7a3a);
    color: #fff;
}

.halo-rich-content th,
.entry-content th,
.halo-section th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 0.88em;
    letter-spacing: 0.02em;
}

.halo-rich-content td,
.entry-content td,
.halo-section td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--halo-light-grey, #e5e5e5);
}

/* Stop columns crushing to one-word-per-line in narrow containers (e.g. a table
   dropped into an image_text column). A per-cell minimum keeps each column
   readable, so the table grows past its container and the .halo-table-wrap
   scrolls horizontally instead of squashing. Auto-scales with column count:
   a 2-col table stays ~15em (fits most widths); a 5-col table needs ~37em and
   scrolls when its container is narrower. */
.halo-rich-content th, .halo-rich-content td,
.entry-content th, .entry-content td,
.halo-section th, .halo-section td {
    min-width: 7.5em;
}

.halo-rich-content tbody tr:nth-child(even),
.entry-content tbody tr:nth-child(even),
.halo-section tbody tr:nth-child(even) {
    /* Adaptive zebra tint (see note above) — readable on light + dark sections. */
    background: rgba(128, 128, 128, 0.12); /* fallback where color-mix is unsupported */
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.halo-rich-content tbody tr:hover,
.entry-content tbody tr:hover,
.halo-section tbody tr:hover {
    /* Hover = a slightly stronger currentColor tint so it reads on dark too
       (the old rgba(0,0,0,.03) was invisible on dark sections). */
    background: rgba(128, 128, 128, 0.18); /* fallback */
    background: color-mix(in srgb, currentColor 13%, transparent);
}

.halo-rich-content tbody tr:last-child td,
.entry-content tbody tr:last-child td,
.halo-section tbody tr:last-child td {
    border-bottom: none;
}

/* Responsive table wrapper — sections.js injects this around every
   content-area <table> so narrow viewports get a horizontal scroll
   rather than the table blowing out the layout. When wrapped, the
   table's own margin is zeroed (wrapper owns the vertical rhythm). */
.halo-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5em 0;
    border-radius: var(--halo-radius-sm, 6px);
}

.halo-table-wrap > table {
    margin: 0;
}

/* Responsive: horizontal scroll on small screens */
@media (max-width: 600px) {
    .entry-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .entry-content th,
    .entry-content td {
        white-space: nowrap;
        padding: 8px 10px;
        font-size: 0.85em;
    }
}


/* ─── Static Variables (not controlled by Brand Settings) ───────── */
:root {
    --halo-white: #ffffff;
    --halo-light-grey: #f0f0f0;
    --halo-mid-grey: #6c757d;
    --halo-black: #1a1a1a;
    --halo-transition: 0.3s ease;
    --halo-section-padding-sm: 50px;
    --halo-gap-sm: 20px;
}

/* Mobile heading sizes */
@media (max-width: 768px) {
    h1 { font-size: calc(var(--halo-h1-size, 48px) * 0.65); }
    h2 { font-size: calc(var(--halo-h2-size, 36px) * 0.75); }
    h3 { font-size: calc(var(--halo-h3-size, 24px) * 0.85); }
}


/* ─── Breadcrumbs ──────────────────────────────────────────────── */
.halo-breadcrumbs {
    padding: 12px 0;
    font-size: var(--halo-small-size, 14px);
    color: var(--halo-mid-grey, #6c757d);
}

.halo-breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.halo-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
}

.halo-breadcrumbs__item a {
    color: var(--halo-primary, #1a7a3a);
    text-decoration: none;
}

.halo-breadcrumbs__item a:hover {
    text-decoration: underline;
}

.halo-breadcrumbs__sep {
    margin: 0 8px;
    color: var(--halo-mid-grey, #6c757d);
}

.halo-breadcrumbs__item [aria-current="page"] {
    color: var(--halo-dark-grey, #333);
}

body.halo-header-dark .halo-breadcrumbs-wrap {
    max-width: none;
    background: var(--halo-secondary, #1a1a2e);
    background: color-mix(in srgb, var(--halo-secondary, #1a1a2e) 92%, #000 8%);
}

body.halo-header-dark .halo-breadcrumbs {
    max-width: var(--halo-container, 1200px);
    margin-left: auto;
    margin-right: auto;
    color: rgba(255,255,255,0.72);
}

body.halo-header-dark .halo-breadcrumbs__item a {
    color: var(--halo-primary-light, var(--halo-primary, #7bd88f));
}

body.halo-header-dark .halo-breadcrumbs__sep,
body.halo-header-dark .halo-breadcrumbs__item [aria-current="page"] {
    color: rgba(255,255,255,0.72);
}

/* ─── Sticky breadcrumbs (desktop only) ────────────────────────────
   Opt-in via the "Sticky Breadcrumbs" main-nav setting
   (body.halo-breadcrumbs-sticky). Pins the breadcrumb bar just below the
   sticky header stack using the same --halo-top-bar-h / --halo-header-h
   offsets sections.js maintains — so it lands flush under the nav
   whether or not the top bar is on. The wrap goes full-width with a
   background so page content doesn't show through the side margins once
   pinned; the crumbs themselves stay centred to the container, so the
   text does not move at first paint (no CLS). z-index sits just below the
   header (1000) so open dropdowns / the mega menu still overlay it.
   Desktop only (>1200px) per the setting: on tablet/mobile a pinned bar
   would eat scarce vertical space, and the mobile nav already collapses. */
@media (min-width: 1201px) {
    body.halo-breadcrumbs-sticky .halo-breadcrumbs-wrap {
        position: sticky;
        top: calc(var(--halo-top-bar-h, 0px) + var(--halo-header-h, 0px));
        z-index: 999;
        max-width: none;
        border-bottom: 1px solid var(--halo-light-grey, #f0f0f0);
    }
    body.halo-breadcrumbs-sticky:not(.halo-header-dark) .halo-breadcrumbs-wrap {
        background: var(--halo-white, #fff);
    }
    body.halo-breadcrumbs-sticky .halo-breadcrumbs {
        max-width: var(--halo-container, 1200px);
        margin-left: auto;
        margin-right: auto;
    }
    /* Dark header already paints the wrap dark and centres the crumbs
       (rules above) — just soften the pinned seam against dark. */
    body.halo-breadcrumbs-sticky.halo-header-dark .halo-breadcrumbs-wrap {
        border-bottom-color: rgba(255,255,255,0.12);
    }
}


/* ─── Header ────────────────────────────────────────────────────── */
.halo-header {
    background-color: var(--halo-white, #ffffff);
    border-bottom: 1px solid var(--halo-light-grey, #f0f0f0);
    z-index: 1000;
    position: relative;
}

/* Top bar and sticky header. These rules are also emitted as critical CSS
   in functions.php so the first paint is stable, but keeping them here
   makes the behaviour resilient if a cache/minifier changes inline CSS. */
.halo-top-bar {
    width: 100%;
    display: flex;
    align-items: center;
    min-height: var(--halo-top-bar-min-h, 36px);
    font-size: var(--halo-small-size, 14px);
    line-height: 1.4;
    position: relative;
    z-index: 1003;
}

.halo-top-bar--sticky {
    position: sticky;
    top: 0;
}

.halo-top-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    min-height: var(--halo-top-bar-min-h, 36px);
    padding: 0 20px;
    text-align: center;
}

.halo-top-bar p {
    margin: 0;
}

.halo-top-bar a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.halo-header--sticky {
    position: sticky;
    top: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.halo-top-bar--sticky ~ .halo-header--sticky {
    top: var(--halo-top-bar-h, 0px);
}

.admin-bar .halo-top-bar--sticky {
    top: 32px;
}

.admin-bar .halo-header--sticky {
    top: 32px;
}

.admin-bar .halo-top-bar--sticky ~ .halo-header--sticky {
    top: calc(32px + var(--halo-top-bar-h, 0px));
}

@media (max-width: 782px) {
    .admin-bar .halo-top-bar--sticky {
        top: 46px;
    }

    .admin-bar .halo-header--sticky {
        top: 46px;
    }

    .admin-bar .halo-top-bar--sticky ~ .halo-header--sticky {
        top: calc(46px + var(--halo-top-bar-h, 0px));
    }
}

/* Logo left, stacked right side */
.halo-header__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 8px 0;
    position: relative;
}

/* Logo — spans full header height */
.halo-header__logo {
    flex: 0 0 var(--halo-logo-max-w, 200px);
    width: var(--halo-logo-max-w, 200px);
    max-width: 30vw;
    min-width: 80px;
    margin-right: auto;
}

.halo-header__logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    width: 100%;
    min-width: 0;
}

.halo-header__logo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    max-width: var(--halo-logo-max-w, 200px);
    max-height: var(--halo-logo-max-h, 75px);
}

.halo-header__logo img[src$=".svg"] {
    width: 100%;
    max-width: 100%;
    max-height: var(--halo-logo-max-h, 75px);
    aspect-ratio: auto;
}

/* Logo sits inside the container's padding so its left edge aligns with
   the content below the header (.halo-container's inner-left edge — same
   gap as every contained section and the footer's logo column). The old
   negative-margin trick pulled the logo back out to the viewport edge,
   which looked off whenever the user compared it to a hero/footer in the
   contained content stream below. The image itself stays bounded by
   --halo-logo-max-w / --halo-logo-max-h from the brand settings. */
@media (min-width: 1201px) {
    .halo-header.halo-header--width-contained .halo-header__logo,
    .halo-header.halo-header--width-full .halo-header__logo {
        margin-left: 0;
    }
}

/* Right side — buttons top, nav bottom */
.halo-header__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
    overflow: visible;
}

/* Buttons row */
.halo-header__top {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* ─── Header layout variants ─────────────────────────────────────────
   Two independent axes combine to give 4 possible header layouts
   (plus dark/light on top for 8 total). Set via Brand Settings →
   Header → "Header Width" and "Header Nav Layout". Defaults match the
   original stacked+contained layout so untouched sites don't shift.

   Width axis:
     width-contained — logo + nav fit inside 1200px container (default)
     width-full      — header spans full viewport with wider side padding

   Nav axis:
     nav-stacked  — buttons row above menu row, both right-aligned (default)
     nav-inline   — one row: menu on the LEFT, buttons on the RIGHT
                    (both pushed to the right edge of the header)
     nav-centered — one row: logo left, menu CENTRED in the space between
                    logo and buttons, buttons on the right edge
---------------------------------------------------------------------- */

/* Width: full — break the header container out of the site's 1200px cap */
.halo-header.halo-header--width-full > .halo-container {
    max-width: 100% !important;
    padding-left: calc(var(--halo-gap, 30px) * 1.5) !important;
    padding-right: calc(var(--halo-gap, 30px) * 1.5) !important;
}

/* Nav: inline — collapse the stacked right-side column to a single row
   with menu on the left + buttons on the right. Both still hugged to
   the right edge of the header (the logo stays flush-left via
   margin-right: auto on .halo-header__logo). We use CSS `order` to
   flip the visual sequence — DOM order stays buttons→menu (for semantic
   reading order), but the inline layout renders menu→buttons. */
.halo-header--nav-inline .halo-header__right {
    flex-direction: row;
    align-items: center;
    gap: 30px;
}
.halo-header--nav-inline .halo-header__nav {
    order: 1;   /* menu sits to the LEFT of buttons */
}
.halo-header--nav-inline .halo-header__top {
    order: 2;   /* buttons sit to the RIGHT of menu */
}
/* In inline mode, the menu doesn't need the stacked layout's 8px gap —
   collapse the vertical spacing that the column flex was applying. */
.halo-header--nav-inline .halo-header__inner {
    padding: 12px 0; /* slightly more breathing room on the single-row layout */
}

/* Nav: centered — same single row as inline, but the right-side column
   grows to fill the header so the menu centres in the space between the
   logo and the buttons. The nav is the grow-AND-shrink member (menu wraps
   under pressure); the buttons stay unshrinkable on the right edge. */
.halo-header--nav-centered .halo-header__right {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    gap: 30px;
    min-width: 0;
}
.halo-header--nav-centered .halo-header__nav {
    order: 1;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}
.halo-header--nav-centered .halo-header__top {
    order: 2;
    flex-shrink: 0;
}
.halo-header--nav-centered .halo-header__inner {
    padding: 12px 0;
}

/* Mobile/tablet fallback: desktop nav layouts collapse to the hamburger
   panel before the full-size header buttons can crowd the nav. */
@media (max-width: 1200px) {
    .halo-header--nav-inline .halo-header__right,
    .halo-header--nav-centered .halo-header__right {
        flex-direction: row;
        gap: 8px;
    }
    .halo-header--nav-inline .halo-header__nav,
    .halo-header--nav-inline .halo-header__top,
    .halo-header--nav-centered .halo-header__nav,
    .halo-header--nav-centered .halo-header__top {
        order: initial;
    }
    /* The centered layout's grow rules are desktop-only — the compact
       hamburger header owns sizing below 1201px. */
    .halo-header--nav-centered .halo-header__right {
        flex: 0 0 auto;
    }
    .halo-header--nav-centered .halo-header__nav {
        flex: initial;
    }
}

/* Desktop overflow safety — many menu items must WRAP to a second line,
   never squeeze or clip the phone/CTA buttons. The buttons row is made
   unshrinkable and the nav/menu shrinkable+wrappable, so the menu gives
   way first. Scoped to desktop widths only: below 1201px the hamburger
   layout owns the header and the buttons intentionally shrink/ellipsis. */
@media (min-width: 1201px) {
    .halo-header__menu {
        flex-wrap: wrap;
    }
    .halo-header__nav {
        min-width: 0;
    }
    .halo-header__top {
        flex-shrink: 0;
    }
    /* Inline nav keeps its content-hugging width (flex-grow stays 0 so the
       resting layout is unchanged) but becomes the shrinkable member of the
       row, so the menu wraps before the buttons feel any squeeze. */
    .halo-header--nav-inline .halo-header__nav {
        flex: 0 1 auto;
        min-width: 0;
    }
}

/* Hamburger — hidden on desktop, visible on tablet + mobile */

/* SVG footer logos have no intrinsic pixel size, so they need an explicit
   width to render at all. Previously this also carried a hard max-height:50px
   which capped SVG logos at a third of the raster limit and made the
   "Footer logo width" setting look broken above ~200px. Height now derives
   from the width setting like every other footer logo (see .halo-footer__logo
   img further down). */
.halo-footer__logo img[src$=".svg"] {
    width: var(--halo-footer-logo-w, 200px);
    /* The box is always width x width/2 (max-height below), so a square or
       round SVG draws at half the width. Without these it sat centred in the
       box, looking indented, and no width setting could left-align it. */
    object-fit: contain;
    object-position: left center;
}

.halo-header__site-name {
    font-size: 1.4rem;
    font-weight: var(--halo-heading-weight, 700);
    color: var(--halo-dark-grey, #333);
}

/* Navigation */
.halo-header__nav {
    display: flex;
    overflow: visible;
}

.halo-header__nav--mobile {
    display: none;
}

.halo-header__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 5px;
}

.halo-header__menu li {
    position: relative;
}

.halo-header__menu > li > a {
    display: block;
    padding: 10px 16px;
    font-size: var(--halo-nav-font-size, 16px);
    font-weight: var(--halo-nav-font-weight, 500);
    text-transform: var(--halo-nav-transform, none);
    letter-spacing: var(--halo-nav-letter-spacing, 0px);
    color: var(--halo-dark-grey, #333);
    text-decoration: none;
    white-space: nowrap;
}

.halo-header__menu > li > a:hover,
.halo-header__menu > li > a:focus-visible,
.halo-header__menu > li.current-menu-item > a,
.halo-header__menu > li.current_page_item > a,
.halo-header__menu > li.current-menu-ancestor > a,
.halo-header__menu > li.current-page-ancestor > a,
.halo-header__menu > li.current-menu-parent > a,
.halo-header__menu > li.current_page_parent > a {
    color: var(--halo-primary);
}

/* Dropdown */
/* Dropdown arrow on parent items */
.halo-header__menu > li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 6px;
    margin-bottom: 2px;
    opacity: 0.6;
}

/* Dropdown menus */
/* Top corners flat so the dropdown reads as an extension of the parent
   menu item it hangs from. Bottom corners use --halo-dropdown-radius
   (set in the plugin's brand.php): the brand card radius capped at 10px,
   or squared off when the card radius is under 10. Applies to first- and
   second-level dropdowns equally — second-levels open to the left but
   still want a flat top edge aligned with the parent row. */
.halo-header__menu li > ul,
.halo-header__menu li > .sub-menu {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--halo-white, #fff);
    min-width: 220px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border-radius: 0 0 var(--halo-dropdown-radius, 0) var(--halo-dropdown-radius, 0);
    padding: 8px 0;
    list-style: none;
    z-index: 9999;
    margin: 0;
}

/* Show dropdown on hover and touch */
.halo-header__menu li:hover > ul,
.halo-header__menu li:hover > .sub-menu,
.halo-header__menu li:focus-within > ul,
.halo-header__menu li:focus-within > .sub-menu,
.halo-header__menu li.is-dropdown-open > ul,
.halo-header__menu li.is-dropdown-open > .sub-menu {
    display: block !important;
}

/* Second-level dropdown opens to the LEFT (keeps it on-screen) */
.halo-header__menu li ul li > ul,
.halo-header__menu li .sub-menu li > .sub-menu {
    top: 0;
    left: auto;
    right: 100%;
}

/* Arrow on second-level parent items points left */
.halo-header__menu ul li.menu-item-has-children > a::after {
    transform: rotate(135deg);
    margin-left: auto;
    float: left;
    margin-top: 6px;
    margin-right: 6px;
}

.halo-header__menu li ul a {
    display: block;
    /* Padding follows the brand "Element Gap" spacing setting (--halo-gap,
       default 30px): more spacing → more padding. gap/1.5 = 20px at default,
       so the horizontal stays put and only scales when the operator changes
       spacing. Square corners (no radius) are set on the dropdown box. */
    padding: calc(var(--halo-gap, 30px) / 3) calc(var(--halo-gap, 30px) / 1.5);
    font-size: var(--halo-nav-sub-font-size, 14px);
    font-weight: var(--halo-nav-font-weight, 500);
    text-transform: var(--halo-nav-transform, none);
    letter-spacing: var(--halo-nav-letter-spacing, 0px);
    color: var(--halo-dark-grey, #333);
    text-decoration: none;
}

/* Third-level dropdowns get the smaller "sub-sub" size — clearly distinct
   from second-level. Brand Settings → Typography → Header Nav Font lets
   the operator tune both. */
.halo-header__menu li ul ul a {
    font-size: var(--halo-nav-sub-sub-font-size, 13px);
}

.halo-header__menu li ul a:hover,
.halo-header__menu li ul a:focus-visible,
.halo-header__menu li ul li.current-menu-item > a,
.halo-header__menu li ul li.current_page_item > a,
.halo-header__menu li ul li.current-menu-ancestor > a,
.halo-header__menu li ul li.current-page-ancestor > a {
    background: var(--halo-off-white, #f8f9fa);
    color: var(--halo-primary);
}


/* ─── Mega Menu ─────────────────────────────────────────────────────
   Applied ONLY to top-level menu items that carry the `halo-mega-menu`
   CSS class in Appearance → Menus. Everything else keeps the normal
   dropdown behaviour above. Mobile/tablet (max-width:1200px) disables the mega
   panel and falls back to a simple stacked list — mega menus don't
   make sense on a phone.                                              */

/* NOTE: we intentionally DO NOT set position:relative on .halo-header here.
   The header already has position:relative in the main header block, and
   when it becomes .halo-header--sticky it switches to position:sticky.
   Overriding that here would break sticky scroll. The mega panel anchors
   to whichever value is active, both of which act as containing blocks
   for absolute children. */

/* Override the normal dropdown positioning for mega parents so the
   panel doesn't inherit the 220px min-width of the standard dropdown.
   Everything inside `.halo-mega-menu__parent` uses mega-specific rules. */
.halo-header__menu > li.halo-mega-menu__parent {
    position: static; /* panel positions relative to the header, not the li */
}

.halo-mega-menu__panel {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 50%;
    right: auto;
    width: 100vw;
    min-width: 0 !important; /* beat the generic .sub-menu 220px */
    max-width: 100vw;
    box-sizing: border-box;
    transform: translateX(-50%);
    background: var(--halo-white, #fff);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    border-radius: 0 !important; /* full-width panel stays square; beat the generic dropdown radius */
    padding: 32px max(var(--halo-gap, 30px), calc((100vw - var(--halo-container, 1200px)) / 2 + var(--halo-gap, 30px))) !important;
    margin: 0 !important;
    list-style: none;
    z-index: 9999;
}

/* Hover-gap forgiveness is handled in JS (sections.js — mega-menu hover
   grace). The old CSS `::before` bridge spanned the panel's full 100vw
   width — useful for catching the cursor between parent link and panel,
   but during the new 250ms close-grace window it would intercept clicks
   on adjacent header items. JS is the cleaner approach: parent and
   panel mouseenter/leave drive a timer, no extra hit-target needed. */

/* Show panel on hover/focus of the mega parent.
   Every property carries !important explicitly because some CSS minifiers
   (SG Optimizer's included) reorder or strip rules they consider redundant —
   a bare `grid-template-columns` sometimes gets beaten by generic `.sub-menu`
   rules after minification, which collapses the mega panel back to a normal
   220px dropdown. Belt-and-braces `!important` on every layout property
   keeps the grid intact post-minify. */
.halo-header__menu > li.halo-mega-menu__parent:hover > .halo-mega-menu__panel,
.halo-header__menu > li.halo-mega-menu__parent:focus-within > .halo-mega-menu__panel,
.halo-header__menu > li.halo-mega-menu__parent.is-dropdown-open > .halo-mega-menu__panel {
    display: grid !important;
    /* --mega-cols is set inline by JS (sections.js) to the hub-item count,
       capped at 6. Falls back to 6 if JS hasn't run yet — matches the
       original always-6 layout. */
    grid-template-columns: repeat(var(--mega-cols, 6), minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    right: auto !important;
    top: 100% !important;
    padding: 32px max(var(--halo-gap, 30px), calc((100vw - var(--halo-container, 1200px)) / 2 + var(--halo-gap, 30px))) !important;
    transform: translateX(-50%) !important;
    justify-content: center !important;
}

/* Individual hub card — image on top, title below, optional leaves list */
.halo-mega-menu__hub-item {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

/* Hub card: transparent background always — the `.halo-header__menu li ul a`
   rule earlier in this file adds an off-white background to sub-menu
   anchors on hover. That square rectangle clashes with the rounded image.
   Override to zero background + change only text colour on hover. */
.halo-mega-menu__hub {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--halo-dark-grey, #333);
    background: transparent !important;
    padding: 0 !important;
}

.halo-mega-menu__hub:hover,
.halo-mega-menu__hub:focus-visible {
    background: transparent !important; /* beat the generic sub-menu hover */
}

.halo-mega-menu__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--halo-img-radius, 8px);
    margin-bottom: 10px;
    display: block;
    transition: transform var(--halo-transition, .2s);
}

.halo-mega-menu__hub:hover .halo-mega-menu__image,
.halo-mega-menu__hub:focus-visible .halo-mega-menu__image {
    transform: scale(1.02);
}

/* ── Menu image greyscale (main nav dropdowns) ──────────────────────
   Optional desaturation of images inside the mega-menu / list-menu dropdown
   panels — hub cards + row icons. Emitted only when the operator sets a base or
   hover amount in Site Settings → Header (the --menu-img-gray class + the two
   vars on the <header>). filter:grayscale is GPU-accelerated and the panels are
   hidden until opened, so this has no page-speed cost. The hover amount applies
   when the item is hovered/focused, easing between the two states. */
.halo-header--menu-img-gray .halo-mega-menu__image,
.halo-header--menu-img-gray .halo-list-menu__icon,
.halo-header--menu-img-gray .halo-list-menu__leaves-icon {
    filter: grayscale(var(--halo-menu-img-gray, 0));
    transition: filter 0.3s ease, transform var(--halo-transition, .2s);
}
.halo-header--menu-img-gray .halo-mega-menu__hub:hover .halo-mega-menu__image,
.halo-header--menu-img-gray .halo-mega-menu__hub:focus-visible .halo-mega-menu__image,
.halo-header--menu-img-gray .halo-list-menu__hub:hover .halo-list-menu__icon,
.halo-header--menu-img-gray .halo-list-menu__hub:focus-visible .halo-list-menu__icon,
.halo-header--menu-img-gray .halo-list-menu__leaves-parent:hover .halo-list-menu__leaves-icon,
.halo-header--menu-img-gray .halo-list-menu__leaves-parent:focus-visible .halo-list-menu__leaves-icon {
    filter: grayscale(var(--halo-menu-img-gray-hover, 0));
}

/* Title: left-aligned so leaves line up underneath visually. Uses the
   sub-menu font size from Brand Settings so it scales with the rest of
   the second-level nav (hub titles ≡ sub-menu items in the hierarchy). */
.halo-mega-menu__title {
    font-size: var(--halo-nav-sub-font-size, 14px);
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    color: var(--halo-dark-grey, #222);
}

.halo-mega-menu__hub:hover .halo-mega-menu__title,
.halo-mega-menu__hub:focus-visible .halo-mega-menu__title {
    color: var(--halo-primary);
}

/* Current page = same treatment as hover. A hub highlights when it IS the
   current page or when one of its leaves is (ancestor). The hub keeps its
   transparent background (its hover does too); only the title colours.
   Leaves are .halo-header__menu li ul a — covered by the dropdown current
   rule above. */
.halo-mega-menu__hub-item.current-menu-item > .halo-mega-menu__hub .halo-mega-menu__title,
.halo-mega-menu__hub-item.current_page_item > .halo-mega-menu__hub .halo-mega-menu__title,
.halo-mega-menu__hub-item.current-menu-ancestor > .halo-mega-menu__hub .halo-mega-menu__title,
.halo-mega-menu__hub-item.current-page-ancestor > .halo-mega-menu__hub .halo-mega-menu__title {
    color: var(--halo-primary);
}

/* Leaves under a hub card — hidden by default, revealed on hover of the
   hub card. They appear inline below the title so the hover target
   stays within the hub's bounding box (moving the mouse down onto a
   leaf keeps `:hover` active on the hub-item). */
.halo-mega-menu__leaves {
    display: none !important;
    list-style: none;
    padding: 10px 0 0 !important;  /* 0 left so leaves sit flush with title edge */
    margin: 10px 0 0 !important;
    border-top: 1px solid var(--halo-light-grey, #e5e5e5);
    position: static !important; /* override .sub-menu absolute positioning */
    box-shadow: none !important;
    background: transparent !important;
    min-width: 0 !important;
    border-radius: 0 !important;
}

.halo-mega-menu__hub-item:hover > .halo-mega-menu__leaves,
.halo-mega-menu__hub-item:focus-within > .halo-mega-menu__leaves {
    display: block !important;
}

.halo-mega-menu__leaves li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Leaves: left-aligned flush with the hub title above. No background on
   hover (removed) — just change text colour so hover feedback doesn't
   paint a square box at odds with the rounded image. Zero left padding
   so the first character sits at the same x as the title above it. */
.halo-mega-menu__leaves a {
    display: block !important;
    padding: 4px 0 !important;
    /* Leaves under each hub card sit at the third level of the menu, so
       they read from --halo-nav-sub-sub-font-size — same setting that
       drives third-level dropdowns in normal menus. */
    font-size: var(--halo-nav-sub-sub-font-size, 13px) !important;
    color: var(--halo-dark-grey, #444) !important;
    text-decoration: none;
    background: transparent !important;
    border-radius: 0 !important;
}

.halo-mega-menu__leaves a:hover,
.halo-mega-menu__leaves a:focus-visible {
    background: transparent !important;
    color: var(--halo-primary) !important;
}

/* Mega menu parents keep the small dropdown arrow — it signals to users
   that there's a panel below to hover into, exactly like a standard
   sub-menu parent. The arrow styling is inherited from the
   `.halo-header__menu > li.menu-item-has-children > a::after` rule above
   (since mega menu parents also carry `menu-item-has-children`). */

/* Hover-extension pseudo on the parent link itself. Extends the hoverable
   area 60px below the visual link without affecting layout — the link's
   bounding box stays the same height, but CSS :hover and the parent's
   mouseenter event both fire when the cursor enters this pseudo too
   (because the pseudo is a descendant of the link which is a descendant
   of the parent <li>). Bridges any gap the header creates between the
   menu line and the panel's top edge (panels anchor to the header, not
   the link, so headers with tall logos/padding leave a vertical gap that
   was killing hover without this. */
.halo-header__menu > li.halo-mega-menu__parent > a {
    position: relative;
}
.halo-header__menu > li.halo-mega-menu__parent > a::before {
    content: '';
    position: absolute;
    top: 100%;
    left: -10px;
    right: -10px;
    height: 60px;
    background: transparent;
    pointer-events: auto;
    /* The pseudo is invisible but participates in hit-testing. Only present
       on desktop — the mobile breakpoint resets it below so taps on the
       link don't get intercepted by a phantom strip. */
}
@media (max-width: 1200px) {
    .halo-header__menu > li.halo-mega-menu__parent > a::before {
        display: none;
    }
}

/* Mobile fallback: mega menu becomes a standard stacked accordion.
   We strip the grid layout, kill the image (saves screen real estate),
   and let the mobile menu's native accordion handle open/close.
   Breakpoint matches the hamburger activation (1200px) so tablets
   don't show images inside the collapsed dropdown. */
@media (max-width: 1200px) {
    .halo-header__menu > li.halo-mega-menu__parent,
    .halo-mega-menu__panel,
    .halo-mega-menu__hub-item,
    .halo-mega-menu__leaves {
        position: static !important;
    }
    .halo-mega-menu__panel {
        display: block !important;
        grid-template-columns: none !important;
        box-shadow: none !important;
        /* Breathing room above the first hub card so it separates from
           the top-level parent link. Matches the non-mega submenu
           spacing — parent separate, children grouped tight beneath. */
        padding: 14px 0 4px !important;
        background: transparent !important;
    }
    .halo-mega-menu__panel,
    .halo-header__menu > li.halo-mega-menu__parent:hover > .halo-mega-menu__panel {
        /* Let the existing mobile-menu open/close JS control visibility
           rather than forcing the mega panel open. */
        display: block !important;
        grid-template-columns: none !important;
    }
    .halo-mega-menu__hubs {
        display: block !important;
    }
    .halo-mega-menu__image {
        display: none !important; /* no images on phone — save space */
    }
    .halo-mega-menu__hub {
        flex-direction: row !important;
        /* Extra margin-top on all but first hub so each hub reads as
           its own group (hub + its leaves below). First hub gets the
           panel's padding-top for separation from the parent link. */
        padding: 6px 20px !important;
    }
    .halo-mega-menu__hub-item + .halo-mega-menu__hub-item {
        margin-top: 10px;
    }
    .halo-mega-menu__title {
        text-align: left !important;
    }
    .halo-mega-menu__leaves {
        display: block !important;
        border-top: none !important;
        padding-left: 20px !important;
    }
}


/* ─── List Menu ─────────────────────────────────────────────────────
   Applied ONLY to top-level menu items that carry the `halo-list-menu`
   CSS class in Appearance → Menus. Two-pane dropdown: every silo in a
   list down the LEFT third with a small icon, and the hovered silo's
   children in the RIGHT two thirds.

   Why it exists: the mega menu lays hubs out as image cards up to 6
   across, which reads well for 4-8 silos but becomes an enormous
   full-bleed slab once a site has 15 of them. This layout's CONTENT
   (the two-pane card) stays capped to the site's container width no
   matter how many silos there are — but the panel it sits inside is
   full-bleed (100vw), same as the mega menu, so its background reads as
   one continuous bar under the header rather than a floating box.

   Two nested wrappers do this: `.halo-list-menu__panel` is the 100vw
   positioning layer AND the flat white full-bleed backdrop/shadow (so the
   BACKGROUND goes edge-to-edge, not just the invisible hit-area).
   `.halo-list-menu__inner` is the two-pane CONTENT — width-capped, centred,
   and `position:relative` so it (not the full-bleed panel) is the
   containing block the leaves pane anchors to. Its own two-tone background
   paints over the panel's flat white wherever it sits; the panel's white
   shows through unchanged in the margins either side, so there's no
   visible seam between the full-bleed backdrop and the contained content.

   The leaves <ul> is a DOM descendant of its hub <li>, so a plain CSS
   :hover keeps the right pane open while the cursor is inside it — the
   "hover across to the right and it stays" behaviour needs no JS.
   sections.js only mirrors the hovered hub onto `.is-active`, so the
   pane has a sensible default (the first silo) the moment it opens. */
.halo-header__menu > li.halo-list-menu__parent {
    /* Static so the panel positions against the HEADER (which is relative),
       not against this <li>. That lands its top edge flush with the bottom of
       the header instead of the bottom of the menu link, and lets it centre on
       the page rather than on the menu item. Same trick as the mega parent. */
    position: static;
}

/* Invisible hover bridge under the parent link — same trick as the mega
   menu (see the note above it). Without it the gap between the menu line
   and the panel's top edge drops :hover before the cursor arrives. */
.halo-header__menu > li.halo-list-menu__parent > a {
    position: relative;
}
.halo-header__menu > li.halo-list-menu__parent > a::before {
    content: '';
    position: absolute;
    top: 100%;
    left: -10px;
    right: -10px;
    height: 60px;
    background: transparent;
    pointer-events: auto;
}
@media (max-width: 1200px) {
    .halo-header__menu > li.halo-list-menu__parent > a::before {
        display: none;
    }
}

.halo-list-menu__panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    /* Full-bleed positioning layer AND the visible backdrop — same
       construct the mega menu panel uses: 100vw wide, centred via
       left:50%/translateX(-50%) so it reads as edge-to-edge regardless of
       where the menu item sits — no viewport edge-clamping needed (see
       sections.js). Flat white + edge-to-edge shadow, no radius, so the
       WHOLE bar reads as one continuous strip under the header (matches
       the mega menu look); `.halo-list-menu__inner` below only insets the
       CONTENT (the two-pane card), not the background. */
    transform: translateX(-50%);
    /* --list-split is the width of the LEFT silo column. sections.js widens
       it (and switches that column to two columns) once a site has enough
       silos that one column would run past the bottom of the window. Lives
       on the full-bleed layer (not __inner) purely so it's declared once
       and cascades down to every consumer of either wrapper's descendants. */
    --list-split: 36%;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    background: var(--halo-white, #fff);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    border-radius: 0;
    z-index: 9999;
}

.halo-list-menu__inner {
    /* The two-pane CONTENT — width-capped to the page's CONTENT box (not
       the panel's outer 100vw edge) and centred inside it via margin:auto.
       .halo-container is `max-width: --halo-container` with `--halo-gap`
       padding each side, so a section's box is 1140px on a 1200px site;
       matching that means anything below the header lines up with the card.
       `position:relative` makes this — not the full-bleed panel above — the
       containing block the leaves pane (position:absolute) anchors to, so
       its right:0/top:0 still line up with the CONTAINED content. Its own
       background is the two-tone hubs/leaves split; it paints over the
       panel's flat white everywhere it covers, and the panel's flat white
       shows through in the margins either side — so there's no visible
       seam between the full-bleed backdrop and the contained content. */
    position: relative;
    width: min(
        calc(var(--halo-container, 1200px) - (var(--halo-gap, 30px) * 2)),
        calc(100vw - (var(--halo-gap, 30px) * 2))
    );
    margin: 0 auto;
    /* 500px: the silo column is sized to fill it almost exactly (8 rows x 60px
       + padding on a 15-silo site), and it leaves the children pane room to
       breathe. Also the floor for sites with fewer silos, so a short list
       still gives the pane somewhere to live. */
    min-height: 500px;
    box-sizing: border-box;
    /* Two-tone backdrop so the 1/3 : 2/3 split reads even when the hovered
       silo has no children and the right pane is empty. */
    background: linear-gradient(
        to right,
        var(--halo-white, #fff) 0 var(--list-split),
        var(--halo-off-white, #f8f9fa) var(--list-split) 100%
    );
}

.halo-header__menu > li.halo-list-menu__parent:hover > .halo-list-menu__panel,
.halo-header__menu > li.halo-list-menu__parent:focus-within > .halo-list-menu__panel,
.halo-header__menu > li.halo-list-menu__parent.is-dropdown-open > .halo-list-menu__panel {
    display: block;
}

/* LEFT third — the silo list. Scrolls on its own once the list outgrows
   the panel. The leaves pane is anchored to the panel rather than to
   this <ul>, so it stays put while this column scrolls (and escapes this
   column's overflow, because its containing block sits outside it). */
.halo-header__menu .halo-list-menu__hubs {
    display: block !important;
    position: static !important;
    width: var(--list-split);
    /* The cap is a safety net, not the usual case. A hover panel taller than
       the window would leave the bottom silos unreachable, since you cannot
       scroll the page while keeping it open — so the two-column switch below
       exists to make the list FIT rather than to hide the overflow. */
    max-height: min(calc(100vh - var(--halo-header-h, 72px) - 48px), 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 !important;
    padding: 8px 0 !important;
    min-width: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    list-style: none;
}

/* Two-column silo list. sections.js adds `has-2col` (and sets --list-rows)
   when one column would be too tall, which is the whole point — 15 silos in
   one column is ~650px and forces a scrollbar, in two it is ~350px and does
   not. `grid-auto-flow: column` with an explicit row count fills DOWN the
   first column and then across, so the reading order still matches the menu
   order. Without JS this stays a plain single-column list. */
.halo-header__menu .halo-list-menu__panel.has-2col .halo-list-menu__hubs {
    display: grid !important;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--list-rows, 8), auto);
    align-content: start;
    column-gap: 4px;
}

.halo-header__menu .halo-list-menu__panel.has-2col {
    --list-split: 50%;
}

.halo-header__menu .halo-list-menu__hub-item {
    position: static !important;
}

.halo-list-menu__hub {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 16px !important;
    text-decoration: none;
    color: var(--halo-dark-grey, #333);
    font-size: var(--halo-nav-sub-font-size, 14px);
    font-weight: var(--halo-nav-font-weight, 500);
    line-height: 1.25;
}

.halo-list-menu__icon {
    width: 36px;
    height: 36px;
    flex: none;
    object-fit: contain;   /* icons are never cropped — see the SVG note above */
    border-radius: 6px;    /* only visible when the featured image is a photo */
}

/* "You are here" marker for the page currently being viewed. Deliberately NOT
   a filled row — the generic dropdown rule fills current-page items, and in
   this layout that competed with the silo actually driving the right-hand
   pane: on opening, the pane defaults to the FIRST silo while the filled row
   sat somewhere else entirely, so the eye read the children as belonging to
   the filled one. Colour at reduced opacity says "you are here" without
   claiming the pane. Declared BEFORE the pane-owner rule so that when the
   current page IS the silo being shown, the filled treatment wins on order. */
.halo-list-menu__hub-item.current-menu-item > .halo-list-menu__hub,
.halo-list-menu__hub-item.current_page_item > .halo-list-menu__hub,
.halo-list-menu__hub-item.current-menu-ancestor > .halo-list-menu__hub,
.halo-list-menu__hub-item.current-page-ancestor > .halo-list-menu__hub {
    background: transparent;
    color: var(--halo-primary);
    opacity: 0.55;
}

/* The silo whose children are showing — hovered, or defaulted to the first one
   when the panel opens — is the ONE filled row, so the pane always visibly
   belongs to it. */
.halo-list-menu__hub-item:hover > .halo-list-menu__hub,
.halo-list-menu__hub-item.is-active > .halo-list-menu__hub,
.halo-list-menu__hub-item:focus-within > .halo-list-menu__hub,
.halo-list-menu__hub:focus-visible {
    background: var(--halo-off-white, #f8f9fa);
    color: var(--halo-primary);
    opacity: 1;
}

/* RIGHT two thirds — the hovered silo's children. Anchored to the panel
   so it fills the full panel height however far the left column has
   scrolled. The explicit top/right/left/width and the !important on
   display are all beating the generic second-level dropdown rules,
   which would otherwise open this 220px wide to the LEFT of its parent.
   ⚠️ `.halo-list-menu__panel` is in the selector purely for specificity:
   the generic rule is `.halo-header__menu li .sub-menu li > .sub-menu`
   = (0,3,2), and the walker puts `sub-menu` on both these <ul>s, so a
   three-class selector loses to it and `right: 100%` wins. Don't
   "simplify" these selectors — the pane flies off to the left. */
.halo-header__menu .halo-list-menu__panel .halo-list-menu__hub-item > .halo-list-menu__leaves {
    display: none !important;
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: calc(100% - var(--list-split));
    height: 100%;
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 14px 10px !important;
    box-sizing: border-box;
    background: var(--halo-off-white, #f8f9fa);
    border-left: 1px solid var(--halo-light-grey, #e6e6e6);
    box-shadow: none;
    border-radius: 0;
    list-style: none;
}

/* Which pane shows is driven by `.is-active`, set by sections.js, NOT by a
   bare :hover. With two silo columns the cursor has to cross column two on its
   way to the pane, and :hover would swap the pane out from under it mid-travel.
   sections.js applies hover intent instead (a silo in another column has to be
   settled on before it takes over). The :hover rule below is kept purely as a
   no-JS fallback — sections.js adds `has-js`, which switches it off. */
.halo-header__menu .halo-list-menu__panel:not(.has-js) .halo-list-menu__hub-item:hover > .halo-list-menu__leaves,
.halo-header__menu .halo-list-menu__panel .halo-list-menu__hub-item:focus-within > .halo-list-menu__leaves,
.halo-header__menu .halo-list-menu__panel .halo-list-menu__hub-item.is-active > .halo-list-menu__leaves {
    display: block !important;
}

/* Tighter than the generic dropdown padding — the pane's height is set by the
   silo column beside it, so leaf rows have to earn their space. */
.halo-header__menu .halo-list-menu__leaves a {
    padding: 9px 16px;
    border-radius: 6px;
}

/* Pane heading — the parent silo repeated above its children with its image,
   so the pane always states what it belongs to and the silo's own page stays
   one click away from the right-hand side. */
.halo-header__menu .halo-list-menu__leaves-head {
    margin: 0;
}

.halo-header__menu .halo-list-menu__leaves-parent {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 2px 16px 12px !important;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--halo-light-grey, #e6e6e6);
    border-radius: 0 !important;
    color: var(--halo-secondary, #1a1a2e);
    font-size: var(--halo-nav-font-size, 15px);
    font-weight: 700;
    line-height: 1.25;
}

.halo-header__menu .halo-list-menu__leaves-parent:hover,
.halo-header__menu .halo-list-menu__leaves-parent:focus-visible {
    background: transparent;
    color: var(--halo-primary);
}

.halo-list-menu__leaves-icon {
    width: 48px;
    height: 48px;
    flex: none;
    object-fit: contain;
    border-radius: 6px;
}

/* 2.162.0 — a list-layout hub with no children: the pane shows the hub's own
   excerpt and a "View" link instead of sitting empty. */
.halo-header__menu .halo-list-menu__about p {
    margin: 2px 16px 10px;
    color: var(--halo-dark-grey, #333);
    font-size: var(--halo-nav-sub-font-size, 14px);
    font-weight: 400;
    line-height: 1.6;
    white-space: normal;
}
.halo-header__menu .halo-list-menu__about-more a {
    font-weight: 600;
    color: var(--halo-primary);
}
.halo-header--dropdown-dark .halo-header__menu .halo-list-menu__about p {
    color: rgba(255, 255, 255, 0.8);
}

/* 2.153.0 — `halo-icon-NAME` on a hub: an icon from the Halo icon library
   instead of the hub's image, in the row's own colour. */
.halo-list-menu__svg,
.halo-mega-menu__svg {
    width: 20px;
    height: 20px;
    flex: none;
}

/* 2.153.0 — `halo-list-menu--cards`: the pane's leaves as image cards in a
   grid (image above the title). The heading row repeats the hovered silo, so
   it is only shown when the silo has nothing else to list (then it is the
   way through to the silo's own page). */
.halo-header__menu .halo-list-menu__panel .halo-list-menu__hub-item > .halo-list-menu__leaves--cards {
    padding: 24px 20px !important;
}
.halo-header__menu .halo-list-menu__leaves--cards {
    grid-template-columns: repeat(var(--halo-menu-cards, 4), minmax(0, 1fr));
    align-content: start;
    gap: 18px 12px;
}
.halo-header__menu .halo-list-menu__panel:not(.has-js) .halo-list-menu__hub-item:hover > .halo-list-menu__leaves--cards,
.halo-header__menu .halo-list-menu__panel .halo-list-menu__hub-item:focus-within > .halo-list-menu__leaves--cards,
.halo-header__menu .halo-list-menu__panel .halo-list-menu__hub-item.is-active > .halo-list-menu__leaves--cards {
    display: grid !important;
}
.halo-header__menu .halo-list-menu__leaves--cards > .halo-list-menu__leaves-head:not(:only-child) {
    display: none;
}
.halo-header__menu .halo-list-menu__leaves--cards > .halo-list-menu__leaves-head:only-child {
    grid-column: 1 / -1;
}
.halo-header__menu .halo-list-menu__leaves--cards > li {
    margin: 0;
}
.halo-header__menu .halo-list-menu__leaves a.halo-list-menu__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 8px;
    text-align: center;
    font-weight: 700;
    line-height: 1.3;
}
.halo-list-menu__card-img {
    width: 100%;
    max-width: 140px;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
}

/* 2.154.0 — `halo-menu-html`: the menu item's Description as the panel (it
   (2.154.2: the dark-dropdown `li ul` rules skip lists inside this panel, via
   `:not(.halo-html-menu__inner ul)`, so they keep the panel's own colours)
   reuses the list layout's panel + parent classes for position and hover).
   A plain white card with ordinary text and link colours, not the two-tone
   silo backdrop. */
.halo-header__menu .halo-html-menu__inner {
    min-height: 0;
    padding: 24px 30px;
    background: var(--halo-white, #fff) !important;
    color: var(--halo-body-text, #4a4a4a);
    font-size: var(--halo-nav-sub-font-size, 14px);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
    line-height: 1.5;
}
.halo-header__menu .halo-html-menu__inner a {
    padding: 0;
    background: none;
    color: var(--halo-primary);
    font-size: inherit;
    font-weight: inherit;
    text-transform: none;
    letter-spacing: 0;
}
.halo-header__menu .halo-html-menu__inner a:hover,
.halo-header__menu .halo-html-menu__inner a:focus-visible {
    color: var(--halo-secondary, #1a1a2e);
    text-decoration: underline;
}
.halo-header__menu .halo-html-menu__inner ul {
    position: static;
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    list-style: none;
}
.halo-header__menu .halo-html-menu__inner li {
    position: static;
}

/* Dark dropdown variant — mirrors the mega menu's dark block. Applies only
   when header.php resolves Brand Settings → Main Nav → Dropdown Style to dark
   (either "Follow Main Nav" on a dark header, or forced dark). The panes stay
   two-tone: the left keeps the header's dark, the right lifts slightly. */
.halo-header--dropdown-dark .halo-list-menu__panel {
    /* Opaque base colour for the full-bleed backdrop — same solid colour
       shows through both in the inner card (under its translucent overlay
       below) and in the side margins either side of it. */
    background-color: var(--halo-secondary, #1a1a2e) !important;
}
.halo-header--dropdown-dark .halo-list-menu__inner {
    /* Translucent lift on the right pane only — no solid background-color
       of its own, so the panel's solid colour above shows through
       everywhere except this gradient's tint. Doing the whole thing as one
       rgba gradient with nothing solid underneath would leave the card
       see-through to the page behind the menu. */
    background-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0 var(--list-split),
        rgba(255, 255, 255, 0.06) var(--list-split) 100%
    ) !important;
}

.halo-header--dropdown-dark .halo-list-menu__hub,
.halo-header--dropdown-dark .halo-list-menu__title {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
}

/* Background belongs on the row (the <a>), colour on both — putting the
   background on the title span too painted a second band behind the text. */
/* Same split on dark. !important because the generic dark current-page rule
   is (0,5,4) and would otherwise re-fill the row. */
.halo-header--dropdown-dark .halo-list-menu__hub-item.current-menu-item > .halo-list-menu__hub,
.halo-header--dropdown-dark .halo-list-menu__hub-item.current_page_item > .halo-list-menu__hub,
.halo-header--dropdown-dark .halo-list-menu__hub-item.current-menu-ancestor > .halo-list-menu__hub,
.halo-header--dropdown-dark .halo-list-menu__hub-item.current-page-ancestor > .halo-list-menu__hub {
    background: transparent !important;
    color: var(--halo-primary) !important;
    opacity: 0.55;
}

.halo-header--dropdown-dark .halo-list-menu__hub-item:hover > .halo-list-menu__hub,
.halo-header--dropdown-dark .halo-list-menu__hub-item.is-active > .halo-list-menu__hub,
.halo-header--dropdown-dark .halo-list-menu__hub-item:focus-within > .halo-list-menu__hub {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--halo-primary) !important;
    opacity: 1;
}

.halo-header--dropdown-dark .halo-list-menu__hub-item:hover > .halo-list-menu__hub .halo-list-menu__title,
.halo-header--dropdown-dark .halo-list-menu__hub-item.is-active > .halo-list-menu__hub .halo-list-menu__title {
    color: var(--halo-primary) !important;
}

.halo-header--dropdown-dark .halo-header__menu .halo-list-menu__panel .halo-list-menu__hub-item > .halo-list-menu__leaves {
    background: transparent !important;
    border-left-color: rgba(255, 255, 255, 0.12) !important;
}

.halo-header--dropdown-dark .halo-header__menu .halo-list-menu__leaves-parent {
    color: var(--halo-white, #fff) !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

.halo-header--dropdown-dark .halo-header__menu .halo-list-menu__leaves-parent:hover,
.halo-header--dropdown-dark .halo-header__menu .halo-list-menu__leaves a:hover,
.halo-header--dropdown-dark .halo-header__menu .halo-list-menu__leaves a:focus-visible {
    color: var(--halo-primary) !important;
}

/* Mobile fallback: the list menu becomes a standard stacked accordion,
   exactly like the mega menu does. Defensive only — below 1200px the
   desktop nav is display:none and the mobile nav renders with the
   DEFAULT walker, so none of these panel classes exist there. These
   rules matter only if a header variant ever keeps the walker markup
   on-screen at this width. */
@media (max-width: 1200px) {
    .halo-header__menu > li.halo-list-menu__parent,
    .halo-list-menu__panel,
    .halo-list-menu__inner,
    .halo-header__menu .halo-list-menu__hubs,
    .halo-header__menu .halo-list-menu__hub-item,
    .halo-header__menu .halo-list-menu__panel .halo-list-menu__hub-item > .halo-list-menu__leaves {
        position: static !important;
    }
    .halo-list-menu__panel {
        display: block !important;
        width: auto !important;
        transform: none !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .halo-list-menu__inner {
        width: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        padding: 14px 0 4px !important;
    }
    .halo-header__menu .halo-list-menu__hubs {
        width: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    /* Drop the two-column grid — a stacked phone menu is always one column.
       Matches the grid rule's specificity and comes later, so it wins. */
    .halo-header__menu .halo-list-menu__panel.has-2col .halo-list-menu__hubs {
        display: block !important;
        grid-template-columns: none !important;
    }
    .halo-list-menu__icon {
        display: none !important; /* no images on phone — save space */
    }
    .halo-list-menu__hub {
        padding: 6px 20px !important;
    }
    .halo-list-menu__hub-item + .halo-list-menu__hub-item {
        margin-top: 10px;
    }
    /* Nothing is "hovered" in a stacked list, so drop the desktop active
       state — otherwise the first silo reads as pre-selected. Current-page
       highlighting is a separate rule and still applies. */
    .halo-list-menu__hub-item.is-active > .halo-list-menu__hub {
        background: transparent !important;
        color: inherit !important;
    }
    .halo-header__menu .halo-list-menu__panel .halo-list-menu__hub-item > .halo-list-menu__leaves {
        display: block !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        background: transparent !important;
        border-left: none !important;
        padding-left: 20px !important;
    }
}


/* Header buttons inherit the global brand button system. */
.halo-header .halo-header__phone-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    background: var(--halo-header-phone-colour, var(--halo-secondary, #1a1a2e)) !important;
    border: var(--halo-btn-border-width, 2px) solid var(--halo-header-phone-colour, var(--halo-secondary, #1a1a2e)) !important;
    color: var(--halo-header-phone-text, var(--halo-white, #ffffff)) !important;
}

.halo-header .halo-header__phone-btn,
.halo-header .halo-header__cta {
    --halo-header-action-height: 56px;
    box-sizing: border-box;
    /* Grid centering — flex + line-height: 1.1 made text sit optically
       high in some brand fonts. Grid place-items: center centers the
       glyph box independent of font baseline metrics, so the label
       reads vertically centered regardless of ascender/descender ratio. */
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
    justify-items: center;
    justify-content: center;
    column-gap: 8px;
    height: var(--halo-header-action-height);
    min-height: var(--halo-header-action-height);
    padding: 0 clamp(18px, 1.7vw, 28px) !important;
    font-size: clamp(14px, calc(var(--halo-base-font-size, 16px) * 0.95), 16px);
    line-height: 1;
}
.halo-header .halo-header__phone-btn > *,
.halo-header .halo-header__cta > * {
    align-self: center;
    line-height: 1;
}
.halo-header .halo-header__phone-btn:hover,
.halo-header .halo-header__phone-btn:focus-visible {
    background: color-mix(in srgb, var(--halo-header-phone-colour, var(--halo-secondary, #1a1a2e)) 88%, #000) !important;
    border-color: color-mix(in srgb, var(--halo-header-phone-colour, var(--halo-secondary, #1a1a2e)) 88%, #000) !important;
    color: var(--halo-header-phone-text, var(--halo-white, #ffffff)) !important;
}
.halo-header .halo-header__phone-btn--outline {
    background: transparent !important;
    color: var(--halo-header-phone-colour, var(--halo-secondary, #1a1a2e)) !important;
}
.halo-header .halo-header__phone-btn--outline:hover,
.halo-header .halo-header__phone-btn--outline:focus-visible {
    background: var(--halo-header-phone-colour, var(--halo-secondary, #1a1a2e)) !important;
    border-color: var(--halo-header-phone-colour, var(--halo-secondary, #1a1a2e)) !important;
    color: var(--halo-header-phone-text, var(--halo-white, #ffffff)) !important;
}
.halo-header__phone-btn svg {
    display: block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    min-width: 16px;
}

/* CTA button style + colour come from Site Settings → Main Nav, delivered as
   --halo-header-cta-colour / --halo-header-cta-text inline on the element
   (same mechanism as the phone button above). Fallbacks reproduce the old
   hard-coded halo-btn--primary look. */
.halo-header .halo-header__cta {
    background: var(--halo-header-cta-colour, var(--halo-primary)) !important;
    border: var(--halo-btn-border-width, 2px) solid var(--halo-header-cta-colour, var(--halo-primary)) !important;
    color: var(--halo-header-cta-text, var(--halo-white, #ffffff)) !important;
    white-space: nowrap;
}
.halo-header .halo-header__cta:hover,
.halo-header .halo-header__cta:focus-visible {
    background: color-mix(in srgb, var(--halo-header-cta-colour, var(--halo-primary)) 88%, #000) !important;
    border-color: color-mix(in srgb, var(--halo-header-cta-colour, var(--halo-primary)) 88%, #000) !important;
    color: var(--halo-header-cta-text, var(--halo-white, #ffffff)) !important;
}
.halo-header .halo-header__cta--outline {
    background: transparent !important;
    color: var(--halo-header-cta-colour, var(--halo-primary)) !important;
}
.halo-header .halo-header__cta--outline:hover,
.halo-header .halo-header__cta--outline:focus-visible {
    background: var(--halo-header-cta-colour, var(--halo-primary)) !important;
    border-color: var(--halo-header-cta-colour, var(--halo-primary)) !important;
    color: var(--halo-header-cta-text, var(--halo-white, #ffffff)) !important;
}

.halo-header .halo-header__cta-text--mobile {
    display: none;
}

/* Hamburger — hidden on desktop, visible on tablet + mobile */
.halo-header__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    width: 36px;
    height: 36px;
    margin-left: auto;
}

.halo-header__hamburger span {
    display: block;
    width: 100%;
    height: 2.5px;
    background: var(--halo-dark-grey, #333);
    border-radius: 2px;
    transition: transform var(--halo-transition), opacity var(--halo-transition);
}

.halo-header__hamburger.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.halo-header__hamburger.is-active span:nth-child(2) {
    opacity: 0;
}
.halo-header__hamburger.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ─── Tablet: collapse nav to hamburger (≤1200px) ──────────────── */
@media (max-width: 1200px) {
    .halo-header {
        --halo-header-mobile-action-size: clamp(38px, calc(var(--halo-btn-mobile-padding-v, 10px) + 30px), 44px);
    }

    .halo-header__inner {
        gap: 10px;
        min-height: 0;
        padding: 10px 0;
    }

    .halo-header__logo {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        min-width: 0;
    }

    .halo-header__logo a {
        justify-content: flex-start;
    }

    /* min(var,100%) — the logo takes up to its set mobile width when the
       row has room, but shrinks with its flex wrapper (min-width:0) when
       the CTA/phone/hamburger crowd a narrow screen.
       --halo-logo-h-mobile = the "Logo Height — Mobile (px)" site setting
       (emitted inline by header.php only when set): forces the logo to that
       height on phones — a MINIMUM size that beats the 52px compact-header
       squeeze (aspect preserved via width:auto + object-fit:contain; the
       max-width caps still guard a crowded row). Unset = auto = the
       long-standing behaviour. */
    .halo-header__logo img,
    .halo-header__logo img[src$=".svg"] {
        width: auto;
        height: var(--halo-logo-h-mobile, auto);
        max-width: min(var(--halo-logo-max-w-mobile, 170px), 100%);
        max-height: max(min(var(--halo-logo-max-h, 75px), 52px), var(--halo-logo-h-mobile, 0px));
    }

    .halo-header__hamburger {
        display: flex;
        flex: 0 0 var(--halo-header-mobile-action-size);
        width: var(--halo-header-mobile-action-size);
        height: var(--halo-header-mobile-action-size);
        min-width: var(--halo-header-mobile-action-size);
        min-height: var(--halo-header-mobile-action-size);
        margin-left: 0;
    }

    /* Inline mobile layout: logo · CTA · phone · hamburger */
    .halo-header__right {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .halo-header__top {
        flex: 0 1 auto;
        gap: 8px;
        min-width: 0;
    }

    /* Bumped specificity to .halo-header .halo-header__phone-btn (was just
       .halo-header__phone-btn) so this height/min-height beats the desktop
       combined rule (.halo-header .halo-header__phone-btn,.halo-header
       .halo-header__cta) which is also 0,2,0. Without this, the desktop
       56px squeezed through and the phone btn rendered taller than the
       CTA on mobile. */
    .halo-header .halo-header__phone-btn {
        flex: 0 0 var(--halo-header-mobile-action-size);
        width: var(--halo-header-mobile-action-size);
        min-width: var(--halo-header-mobile-action-size);
        height: var(--halo-header-mobile-action-size) !important;
        min-height: var(--halo-header-mobile-action-size) !important;
        padding: 0 !important;
    }

    .halo-header__phone-btn span {
        display: none;
    }

    .halo-header .halo-header__cta {
        display: inline-grid;
        grid-auto-flow: column;
        align-items: center;
        justify-items: center;
        justify-content: center;
        box-sizing: border-box;
        flex: 0 1 auto;
        height: var(--halo-header-mobile-action-size) !important;
        min-height: var(--halo-header-mobile-action-size) !important;
        max-width: min(124px, 32vw);
        padding: 0 clamp(12px, 4vw, 18px) !important;
        font-size: max(14px, calc(var(--halo-base-font-size, 16px) * 0.9));
        line-height: 1;
        overflow: hidden;
        text-align: center;
        white-space: nowrap;
    }

    .halo-header .halo-header__cta-text {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .halo-header .halo-header__cta-text--desktop {
        display: none;
    }

    .halo-header .halo-header__cta-text--mobile {
        display: block;
    }

    .halo-header .halo-header__cta {
        order: 1;
    }

    .halo-header__phone-btn {
        order: 2;
    }

    /* Stacked mobile layout: CTA + phone on the top row, logo + menu below.
       When JS adds `.is-mobile-scrolled`, this block no longer applies and
       the header compresses back to the inline mobile layout above. */
    .halo-header--mobile-stacked:not(.is-mobile-scrolled) .halo-header__inner {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .halo-header--mobile-stacked:not(.is-mobile-scrolled) .halo-header__right {
        display: contents;
    }

    .halo-header--mobile-stacked:not(.is-mobile-scrolled) .halo-header__top {
        order: 1;
        flex: 0 0 100%;
        justify-content: flex-end;
        width: 100%;
    }

    .halo-header--mobile-stacked:not(.is-mobile-scrolled) .halo-header__logo {
        order: 2;
    }

    .halo-header--mobile-stacked:not(.is-mobile-scrolled) .halo-header__hamburger {
        order: 3;
        margin-left: auto;
    }

    .halo-header--mobile-stacked:not(.is-mobile-scrolled) .halo-header__nav {
        order: 4;
    }

    /* Nav becomes mobile dropdown */
    .halo-header__nav--desktop {
        display: none !important;
    }

    .halo-header__nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--halo-white, #fff);
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        padding: 20px;
        z-index: 999;
        max-height: calc(100vh - var(--halo-header-h, 72px) - var(--halo-top-bar-h, 0px));
        max-height: calc(100dvh - var(--halo-header-h, 72px) - var(--halo-top-bar-h, 0px));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .admin-bar .halo-header__nav {
        max-height: calc(100vh - var(--halo-header-h, 72px) - var(--halo-top-bar-h, 0px) - 32px);
        max-height: calc(100dvh - var(--halo-header-h, 72px) - var(--halo-top-bar-h, 0px) - 32px);
    }

    @media (max-width: 782px) {
        .admin-bar .halo-header__nav {
            max-height: calc(100vh - var(--halo-header-h, 72px) - var(--halo-top-bar-h, 0px) - 46px);
            max-height: calc(100dvh - var(--halo-header-h, 72px) - var(--halo-top-bar-h, 0px) - 46px);
        }
    }

    .halo-header__nav--mobile.is-open {
        display: block;
    }

    .halo-header__nav--mobile img {
        display: none !important;
    }

    .halo-header__menu {
        flex-direction: column;
        gap: 0;
    }

    .halo-header__menu > li > a {
        padding: 12px 0;
        border-bottom: 1px solid var(--halo-light-grey);
    }

    .halo-header__menu li > ul,
    .halo-header__menu li > .sub-menu {
        display: block !important;
        position: static;
        box-shadow: none;
        /* Clear vertical break above each submenu so a parent link and
           its own children read as a grouped block — the parent sits
           above with breathing room, its children hug in close below.
           Reversed from the default which put a bigger gap BELOW each
           first-child (visually orphaning it from the parent above). */
        padding: 14px 0 4px 20px;
        min-width: 0;
    }

    /* Tighter vertical rhythm inside a submenu — sub-items should
       feel grouped, not spaced out like top-level items. Still follows the
       spacing setting (--halo-gap), just a tighter vertical divisor. */
    .halo-header__menu li ul a {
        padding: calc(var(--halo-gap, 30px) / 5) calc(var(--halo-gap, 30px) / 1.5);
    }

    /* Nested submenu (grandchildren under a mid-level parent) — even
       tighter top gap so grandchildren feel attached to their parent. */
    .halo-header__menu li ul li > ul,
    .halo-header__menu li ul li > .sub-menu {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    /* Hide dropdown arrows in mobile menu */
    .halo-header__menu li.menu-item-has-children > a::after {
        display: none;
    }
}

@media (max-width: 480px) {
    .halo-header {
        --halo-header-mobile-action-size: clamp(34px, calc(var(--halo-btn-mobile-padding-v, 10px) + 26px), 40px);
    }

    .halo-header__top,
    .halo-header__right {
        gap: 4px;
    }

    .halo-header__inner {
        gap: 8px;
    }

    .halo-header .halo-header__phone-btn,
    .halo-header__hamburger {
        flex-basis: var(--halo-header-mobile-action-size);
        width: var(--halo-header-mobile-action-size);
        height: var(--halo-header-mobile-action-size) !important;
        min-height: var(--halo-header-mobile-action-size) !important;
    }

    .halo-header .halo-header__cta {
        max-width: 92px;
    }

    /* Was clamp(78px, 26vw, 120px) — a hard cap that silently ignored the
       "Logo Width — Mobile" site setting on phones. Now honours the setting
       up to 60vw / the flex space available. */
    .halo-header__logo img,
    .halo-header__logo img[src$=".svg"] {
        max-width: min(var(--halo-logo-max-w-mobile, 170px), 60vw, 100%);
        max-height: max(min(var(--halo-logo-max-h, 75px), 52px), var(--halo-logo-h-mobile, 0px));
    }
}

@media (max-width: 360px) {
    .halo-header .halo-header__cta {
        max-width: 84px;
    }
}

/* Mobile/tablet (≤1200px) header layout also lives in the critical CSS in
   functions.php so first paint matches the saved mobile nav layout. */

/* ─── Dark Header Variant ──────────────────────────────────────── */
.halo-header--dark {
    background-color: var(--halo-secondary, #1a1a2e);
    border-bottom-color: rgba(255,255,255,0.1);
}
.halo-header--dark .halo-header__site-name,
.halo-header--dark .halo-header__menu > li > a {
    color: var(--halo-white, #fff);
}
.halo-header--dark .halo-header__menu > li > a:hover,
.halo-header--dark .halo-header__menu > li.current-menu-item > a,
.halo-header--dark .halo-header__menu > li.current-page-ancestor > a {
    color: var(--halo-primary);
}
/* Dropdown style is independent of the header dark-mode toggle. Brand
   Settings → Main Nav → Dropdown Style picks one of:
     - Follow Main Nav (default) → resolves to dropdown-dark when header
       is dark, dropdown-light when header is light
     - Light → forces dropdown-light regardless of header
     - Dark  → forces dropdown-dark regardless of header
   header.php emits either `.halo-header--dropdown-dark` or
   `.halo-header--dropdown-light` based on that resolution. Defaults
   (light) live on the base `.halo-mega-menu__*` and `.halo-header__menu
   li ul` rules earlier in this file. The dark overrides below
   override only when `dropdown-dark` is on. */

/* Dark regular dropdown: dark panel, light links. Applies to depth-2
   and depth-3 sub-menus (the mega menu is handled separately below). */
.halo-header--dropdown-dark .halo-header__menu li ul:not(.halo-mega-menu__panel):not(.halo-mega-menu__leaves):not(.halo-html-menu__inner ul) {
    background: var(--halo-secondary, #1a1a2e);
    border-color: rgba(255,255,255,0.1);
}
.halo-header--dropdown-dark .halo-header__menu li ul:not(.halo-mega-menu__panel):not(.halo-mega-menu__leaves):not(.halo-html-menu__inner ul) a {
    color: rgba(255,255,255,0.85);
}
.halo-header--dropdown-dark .halo-header__menu li ul:not(.halo-mega-menu__panel):not(.halo-mega-menu__leaves):not(.halo-html-menu__inner ul) a:hover,
.halo-header--dropdown-dark .halo-header__menu li ul:not(.halo-mega-menu__panel):not(.halo-mega-menu__leaves):not(.halo-html-menu__inner ul) a:focus-visible,
/* Current page on a dark dropdown: match the hover treatment (subtle white
   overlay), NOT the light-mode base rule's off-white background — that near-
   white box left the current item's light dropdown text invisible on dark. */
.halo-header--dropdown-dark .halo-header__menu li ul:not(.halo-mega-menu__panel):not(.halo-mega-menu__leaves):not(.halo-html-menu__inner ul) li.current-menu-item > a,
.halo-header--dropdown-dark .halo-header__menu li ul:not(.halo-mega-menu__panel):not(.halo-mega-menu__leaves):not(.halo-html-menu__inner ul) li.current_page_item > a,
.halo-header--dropdown-dark .halo-header__menu li ul:not(.halo-mega-menu__panel):not(.halo-mega-menu__leaves):not(.halo-html-menu__inner ul) li.current-menu-ancestor > a,
.halo-header--dropdown-dark .halo-header__menu li ul:not(.halo-mega-menu__panel):not(.halo-mega-menu__leaves):not(.halo-html-menu__inner ul) li.current-page-ancestor > a {
    background: rgba(255,255,255,0.08);
    color: var(--halo-primary);
}

/* Dark mega menu: dark panel, light hub titles + leaves. Hover lands
   on brand primary. !important needed because the generic mega-menu
   rules and the GF-style overrides above set explicit values. */
.halo-header--dropdown-dark .halo-mega-menu__panel {
    background: var(--halo-secondary, #1a1a2e) !important;
    border-color: rgba(255,255,255,0.1) !important;
}
.halo-header--dropdown-dark .halo-mega-menu__hub,
.halo-header--dropdown-dark .halo-mega-menu__title {
    color: var(--halo-white, #fff) !important;
}
.halo-header--dropdown-dark .halo-mega-menu__leaves a {
    color: rgba(255,255,255,0.78) !important;
}
.halo-header--dropdown-dark .halo-mega-menu__leaves {
    border-top-color: rgba(255,255,255,0.12) !important;
}
.halo-header--dropdown-dark .halo-mega-menu__hub:hover .halo-mega-menu__title,
.halo-header--dropdown-dark .halo-mega-menu__hub:focus-visible .halo-mega-menu__title,
.halo-header--dropdown-dark .halo-mega-menu__leaves a:hover,
.halo-header--dropdown-dark .halo-mega-menu__leaves a:focus-visible {
    color: var(--halo-primary) !important;
}
.halo-header--dark .halo-header__hamburger span {
    background: var(--halo-white, #fff);
}
.halo-header--dark .halo-btn--outline {
    border-color: var(--halo-white, #fff);
    color: var(--halo-white, #fff) !important;
}
.halo-header--dark .halo-btn--outline:hover {
    background: var(--halo-white, #fff);
    color: var(--halo-secondary, #1a1a2e) !important;
}
@media (max-width: 1200px) {
    .halo-header--dark .halo-header__nav {
        background: var(--halo-secondary, #1a1a2e);
    }
    .halo-header--dark .halo-header__menu > li > a {
        border-bottom-color: rgba(255,255,255,0.1);
    }
}


/* ─── Utility: Container ────────────────────────────────────────── */
.halo-container {
    max-width: var(--halo-container, 1200px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--halo-gap, 30px);
    padding-right: var(--halo-gap, 30px);
}


/* ─── Section Base ──────────────────────────────────────────────── */
.halo-section {
    padding-top: var(--halo-section-padding, 60px);
    padding-bottom: var(--halo-section-padding, 60px);
    position: relative;
    overflow: hidden;
}

/* Collapse the gap between author-box and the body content that follows.
   Default section-padding on both sides gives ~160px of air between them on
   a blog post — too loose. Quarter-padding on each side lands around 40px. */
.halo-section--author-box {
    padding-bottom: calc(var(--halo-section-padding, 80px) / 4);
}

.halo-section--author-box + .halo-section--rich-content {
    padding-top: calc(var(--halo-section-padding, 80px) / 4);
}

/* Background SVG overlay layer */
.halo-section__bg-svg {
    pointer-events: none;
    z-index: 0;
}
.halo-section > .halo-container {
    position: relative;
    z-index: 1;
}

.halo-section--white {
    background-color: var(--halo-white, #ffffff);
}

.halo-section--alt,
.halo-section--light {
    background-color: var(--halo-off-white, #f8f9fa);
}

.halo-section--dark {
    background-color: var(--halo-secondary, #1a1a2e);
    color: var(--halo-white, #ffffff);
}

.halo-section--primary {
    background-color: var(--halo-primary);
    color: var(--halo-white, #ffffff);
}
.halo-section--primary-dark {
    background-color: var(--halo-primary-dark);
    color: var(--halo-white, #ffffff);
}
.halo-section--primary-light {
    background-color: var(--halo-primary-light);
    color: var(--halo-dark-grey, #333);
}
.halo-section--secondary {
    background-color: var(--halo-secondary, #1a1a2e);
    color: var(--halo-white, #ffffff);
}
.halo-section--accent {
    background-color: var(--halo-accent);
    color: var(--halo-white, #ffffff);
}
/* Accent bg: button goes white, accent text inherits white */
.halo-section--accent .halo-btn--primary {
    background-color: var(--halo-white, #fff);
    color: var(--halo-accent) !important;
}
.halo-section--accent .halo-btn--primary:hover,
.halo-section--accent .halo-btn--primary:focus-visible {
    background-color: var(--halo-secondary, #1a1a2e);
    color: var(--halo-white, #fff) !important;
}
.halo-section--accent .halo-accent-text {
    color: var(--halo-white, #fff) !important;
}

/* Text colour inheritance for dark-background variants */
.halo-section--dark h1, .halo-section--dark h2, .halo-section--dark h3, .halo-section--dark h4, .halo-section--dark p, .halo-section--dark li,
.halo-section--primary h1, .halo-section--primary h2, .halo-section--primary h3, .halo-section--primary h4, .halo-section--primary p, .halo-section--primary li,
.halo-section--primary-dark h1, .halo-section--primary-dark h2, .halo-section--primary-dark h3, .halo-section--primary-dark h4, .halo-section--primary-dark p, .halo-section--primary-dark li,
.halo-section--secondary h1, .halo-section--secondary h2, .halo-section--secondary h3, .halo-section--secondary h4, .halo-section--secondary p, .halo-section--secondary li,
.halo-section--accent h1, .halo-section--accent h2, .halo-section--accent h3, .halo-section--accent h4, .halo-section--accent p, .halo-section--accent li {
    color: var(--halo-white, #fff);
}

/* Also apply to contained variants */
.halo-section--contained.halo-section--dark > .halo-container h1, .halo-section--contained.halo-section--dark > .halo-container h2, .halo-section--contained.halo-section--dark > .halo-container h3, .halo-section--contained.halo-section--dark > .halo-container p, .halo-section--contained.halo-section--dark > .halo-container li,
.halo-section--contained.halo-section--primary > .halo-container h1, .halo-section--contained.halo-section--primary > .halo-container h2, .halo-section--contained.halo-section--primary > .halo-container h3, .halo-section--contained.halo-section--primary > .halo-container p, .halo-section--contained.halo-section--primary > .halo-container li,
.halo-section--contained.halo-section--primary-dark > .halo-container h1, .halo-section--contained.halo-section--primary-dark > .halo-container h2, .halo-section--contained.halo-section--primary-dark > .halo-container h3, .halo-section--contained.halo-section--primary-dark > .halo-container p, .halo-section--contained.halo-section--primary-dark > .halo-container li,
.halo-section--contained.halo-section--secondary > .halo-container h1, .halo-section--contained.halo-section--secondary > .halo-container h2, .halo-section--contained.halo-section--secondary > .halo-container h3, .halo-section--contained.halo-section--secondary > .halo-container p, .halo-section--contained.halo-section--secondary > .halo-container li,
.halo-section--contained.halo-section--accent > .halo-container h1, .halo-section--contained.halo-section--accent > .halo-container h2, .halo-section--contained.halo-section--accent > .halo-container h3, .halo-section--contained.halo-section--accent > .halo-container p, .halo-section--contained.halo-section--accent > .halo-container li {
    color: var(--halo-white, #fff);
}

.halo-section__heading {
    margin-bottom: 0.5em;
}

/* A div-tagged section heading (the SEO tag choice on feed sections) must
   look identical to the default h2 — heading typography lives on the h1–h6
   element selectors, which a div never matches. */
div.halo-section__heading {
    font-family: var(--halo-heading-font, inherit);
    font-weight: var(--halo-heading-weight, 700);
    line-height: var(--halo-heading-line-height, 1.2);
    color: var(--halo-heading-colour, var(--halo-black, #1a1a1a));
    font-size: var(--halo-h2-size, 36px);
}

.halo-section--dark div.halo-section__heading,
.halo-section--primary div.halo-section__heading,
.halo-section--primary-dark div.halo-section__heading,
.halo-section--secondary div.halo-section__heading,
.halo-section--accent div.halo-section__heading {
    color: var(--halo-white, #fff);
}

@media (max-width: 768px) {
    div.halo-section__heading {
        font-size: calc(var(--halo-h2-size, 36px) * 0.75);
    }
}

/* Shared heading styling for post-feed + service-feed sections. Used by
   .halo-section--related-posts, .halo-section--related-services,
   .halo-section--case-studies.
   Bottom margin is intentionally separate from the brand
   "heading_spacing_below" var: that one tunes h2→paragraph rhythm inside
   body content (tight is good there), whereas section headings above a
   card grid need more breathing room. 1.5em ≈ 36px at a 24px heading,
   which lines up with the brand Element Gap feel. */
.halo-feed-heading {
    margin-bottom: 1.5em;
}

/* When body/intro text follows the feed heading, the heading→intro gap tracks
   the site's Spacing → "Heading spacing below" setting instead of the fixed
   1.5em above (which is ≈54px at a 36px heading — an oversized gap the client
   flagged). The intro keeps its own, larger space below before the card grid,
   so the rhythm is: heading —(tight, site setting)→ intro —(gap)→ grid. */
.halo-feed-heading:has(+ .halo-section__intro) {
    margin-bottom: var(--halo-heading-spacing-below, 14px);
}

.halo-feed-heading--left   { text-align: left; }
.halo-feed-heading--center { text-align: center; }
.halo-feed-heading--right  { text-align: right; }

.halo-section__intro {
    color: var(--halo-mid-grey);
    max-width: 700px;
    margin-bottom: 2em;
}


/* ─── Buttons ───────────────────────────────────────────────────── */
/* Note: !important used on color properties to override global link styles from CMS/theme.
   This ensures consistent button appearance across all contexts. */
.halo-btn {
    display: inline-block;
    padding: var(--halo-btn-padding, 14px 32px);
    border-radius: var(--halo-radius);
    font-weight: var(--halo-btn-weight, 600);
    text-decoration: none;
    cursor: pointer;
    border: none;
    font-size: var(--halo-btn-font-size, var(--halo-base-font-size, 16px));
    font-family: var(--halo-btn-font-family, inherit);
    letter-spacing: var(--halo-btn-letter-spacing, 0);
    line-height: 1.4;
    text-transform: var(--halo-btn-transform, none);
}

.halo-btn--primary {
    background-color: var(--halo-primary);
    color: var(--halo-white, #ffffff) !important;
}

.halo-btn--primary:hover,
.halo-btn--primary:focus-visible {
    background-color: var(--halo-primary-dark);
    color: var(--halo-white, #ffffff) !important;
}

.halo-btn--outline {
    background: transparent;
    border: 2px solid var(--halo-primary);
    color: var(--halo-primary);
}

.halo-btn--outline:hover,
.halo-btn--outline:focus-visible {
    background-color: var(--halo-primary);
    color: var(--halo-white, #ffffff) !important;
}

.halo-btn--phone {
    background-color: var(--halo-secondary);
    color: var(--halo-white, #ffffff) !important;
}

.halo-btn--phone:hover,
.halo-btn--phone:focus-visible {
    opacity: 0.9;
    color: var(--halo-white, #ffffff) !important;
}


/* ─── Global Outlined Button Style ──────────────────────────────────
   Activated by the body class `halo-buttons-outlined` (set via the
   Brand → Buttons → Button Style dropdown). Converts EVERY primary-style
   button on the site to an outlined treatment: transparent/white fill,
   brand-primary border using the brand's border-width setting, brand-
   primary text. Applies to:
     • .halo-btn--primary            — theme-native buttons
     • Gravity Form submit buttons   — matched below in the gform block
     • .halo-btn--phone              — kept solid-secondary (phone CTA
                                        always stands out, not affected)
   On dark section backgrounds the border + text auto-flip to white so
   the outlined style doesn't vanish against dark overlays.              */

.halo-buttons-outlined .halo-btn--primary,
.halo-buttons-outlined .gform_wrapper input[type="submit"],
.halo-buttons-outlined .gform_wrapper button[type="submit"],
.halo-buttons-outlined .gform_wrapper .gform_button,
.halo-buttons-outlined button[type="submit"].halo-btn--primary {
    background: var(--halo-white, #ffffff) !important;
    background-color: var(--halo-white, #ffffff) !important;
    color: var(--halo-primary) !important;
    border: var(--halo-btn-border-width, 2px) solid var(--halo-primary) !important;
    /* Pad-inset: subtract the border width from padding so outlined
       buttons keep the same total outer size as solid ones. */
    padding: calc(var(--halo-btn-padding-v-fallback, 14px) - var(--halo-btn-border-width, 2px))
             calc(var(--halo-btn-padding-h-fallback, 32px) - var(--halo-btn-border-width, 2px)) !important;
}

/* Hover: fill with brand primary, flip text to white for contrast */
.halo-buttons-outlined .halo-btn--primary:hover,
.halo-buttons-outlined .halo-btn--primary:focus-visible,
.halo-buttons-outlined .gform_wrapper input[type="submit"]:hover,
.halo-buttons-outlined .gform_wrapper input[type="submit"]:focus-visible,
.halo-buttons-outlined .gform_wrapper button[type="submit"]:hover,
.halo-buttons-outlined .gform_wrapper button[type="submit"]:focus-visible,
.halo-buttons-outlined .gform_wrapper .gform_button:hover,
.halo-buttons-outlined .gform_wrapper .gform_button:focus-visible {
    background: var(--halo-primary) !important;
    background-color: var(--halo-primary) !important;
    color: var(--halo-white, #ffffff) !important;
    border-color: var(--halo-primary) !important;
}

/* Per-section CTA style overrides — win over .halo-buttons-outlined
   brand-wide setting when a specific hero needs a different button
   treatment (e.g. white card + yellow-green primary outline reads as
   low-contrast; force-solid puts the primary-fill back so the CTA
   jumps off the card). Triple-class selector gives us higher
   specificity than the two-class `.halo-buttons-outlined .halo-btn--primary`. */
.halo-btn.halo-btn--primary.halo-btn--force-solid,
.halo-buttons-outlined .halo-btn.halo-btn--primary.halo-btn--force-solid {
    background: var(--halo-primary) !important;
    background-color: var(--halo-primary) !important;
    color: var(--halo-white, #ffffff) !important;
    border: none !important;
}
.halo-btn.halo-btn--primary.halo-btn--force-solid:hover,
.halo-btn.halo-btn--primary.halo-btn--force-solid:focus-visible {
    background: var(--halo-primary-dark) !important;
    background-color: var(--halo-primary-dark) !important;
    color: var(--halo-white, #fff) !important;
}
.halo-btn.halo-btn--primary.halo-btn--force-outline,
.halo-buttons-solid .halo-btn.halo-btn--primary.halo-btn--force-outline {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--halo-primary) !important;
    border: var(--halo-btn-border-width, 2px) solid var(--halo-primary) !important;
    /* Pad-inset: a forced-outline button carries a border a solid sibling
       doesn't, so subtract the border width from the padding and it keeps the
       SAME outer size as the Solid button next to it (e.g. two hero CTA
       buttons). Desktop only compensated inside the global outlined mode, so a
       Solid + Outline pair in the default solid mode came out mismatched; the
       mobile block below already does this. */
    padding: calc(var(--halo-btn-padding-v-fallback, 14px) - var(--halo-btn-border-width, 2px))
             calc(var(--halo-btn-padding-h-fallback, 32px) - var(--halo-btn-border-width, 2px)) !important;
}
.halo-btn.halo-btn--primary.halo-btn--force-outline:hover,
.halo-btn.halo-btn--primary.halo-btn--force-outline:focus-visible {
    background: var(--halo-primary) !important;
    color: var(--halo-white, #fff) !important;
}
.halo-btn.halo-btn--primary.halo-btn--force-dark,
.halo-buttons-outlined .halo-btn.halo-btn--primary.halo-btn--force-dark {
    background: var(--halo-secondary, #1a1a2e) !important;
    background-color: var(--halo-secondary, #1a1a2e) !important;
    color: var(--halo-white, #fff) !important;
    border: none !important;
}
.halo-btn.halo-btn--primary.halo-btn--force-dark:hover,
.halo-btn.halo-btn--primary.halo-btn--force-dark:focus-visible {
    background: #000 !important;
    color: var(--halo-white, #fff) !important;
}

/* Dark/brand-coloured sections AND hero sections with image/video backgrounds
   — flip the outlined button to transparent fill + white border + white text
   so it stays legible without painting a white card over the image.
   Hero classes (halo-hero, halo-hero-banner, halo-hero-fw) don't carry
   .halo-section--dark — they have their own image overlay — so they need
   explicit selectors here. */
.halo-buttons-outlined .halo-section--dark .halo-btn--primary,
.halo-buttons-outlined .halo-section--primary .halo-btn--primary,
.halo-buttons-outlined .halo-section--primary-dark .halo-btn--primary,
.halo-buttons-outlined .halo-section--secondary .halo-btn--primary,
.halo-buttons-outlined .halo-section--accent .halo-btn--primary,
.halo-buttons-outlined .halo-hero .halo-btn--primary,
.halo-buttons-outlined .halo-hero-banner .halo-btn--primary,
.halo-buttons-outlined .halo-hero-fw .halo-btn--primary,
.halo-buttons-outlined .halo-hero-standard .halo-btn--primary,
.halo-buttons-outlined .halo-hero-centered .halo-btn--primary {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--halo-white, #ffffff) !important;
    border-color: var(--halo-white, #ffffff) !important;
}

/* Hover on dark/hero backgrounds — fill with white, flip text to brand
   primary so the button becomes the strongest element on hover. */
.halo-buttons-outlined .halo-section--dark .halo-btn--primary:hover,
.halo-buttons-outlined .halo-section--dark .halo-btn--primary:focus-visible,
.halo-buttons-outlined .halo-section--primary .halo-btn--primary:hover,
.halo-buttons-outlined .halo-section--primary .halo-btn--primary:focus-visible,
.halo-buttons-outlined .halo-section--primary-dark .halo-btn--primary:hover,
.halo-buttons-outlined .halo-section--primary-dark .halo-btn--primary:focus-visible,
.halo-buttons-outlined .halo-section--secondary .halo-btn--primary:hover,
.halo-buttons-outlined .halo-section--secondary .halo-btn--primary:focus-visible,
.halo-buttons-outlined .halo-section--accent .halo-btn--primary:hover,
.halo-buttons-outlined .halo-section--accent .halo-btn--primary:focus-visible,
.halo-buttons-outlined .halo-hero .halo-btn--primary:hover,
.halo-buttons-outlined .halo-hero .halo-btn--primary:focus-visible,
.halo-buttons-outlined .halo-hero-banner .halo-btn--primary:hover,
.halo-buttons-outlined .halo-hero-banner .halo-btn--primary:focus-visible,
.halo-buttons-outlined .halo-hero-fw .halo-btn--primary:hover,
.halo-buttons-outlined .halo-hero-fw .halo-btn--primary:focus-visible,
.halo-buttons-outlined .halo-hero-standard .halo-btn--primary:hover,
.halo-buttons-outlined .halo-hero-standard .halo-btn--primary:focus-visible,
.halo-buttons-outlined .halo-hero-centered .halo-btn--primary:hover,
.halo-buttons-outlined .halo-hero-centered .halo-btn--primary:focus-visible {
    background: var(--halo-white, #ffffff) !important;
    background-color: var(--halo-white, #ffffff) !important;
    color: var(--halo-primary) !important;
    border-color: var(--halo-white, #ffffff) !important;
}

@media (max-width: 768px) {
    .halo-btn,
    .gform_wrapper input[type="submit"],
    .gform_wrapper button[type="submit"],
    .gform_wrapper .gform_button {
        padding: var(--halo-btn-mobile-padding, 10px 22px) !important;
        font-size: max(14px, calc(var(--halo-base-font-size, 16px) * 0.9));
        line-height: 1.2;
    }

    .halo-buttons-outlined .halo-btn--primary,
    .halo-buttons-outlined .gform_wrapper input[type="submit"],
    .halo-buttons-outlined .gform_wrapper button[type="submit"],
    .halo-buttons-outlined .gform_wrapper .gform_button,
    .halo-buttons-outlined button[type="submit"].halo-btn--primary,
    .halo-btn.halo-btn--primary.halo-btn--force-outline,
    .halo-buttons-solid .halo-btn.halo-btn--primary.halo-btn--force-outline {
        padding: calc(var(--halo-btn-mobile-padding-v, 10px) - var(--halo-btn-border-width, 2px))
                 calc(var(--halo-btn-mobile-padding-h, 22px) - var(--halo-btn-border-width, 2px)) !important;
    }
}


/* ─── Hero Section ──────────────────────────────────────────────── */
.halo-hero {
    position: relative;
    padding: var(--halo-section-padding) 0;
    min-height: 500px;
    contain: layout style;
}

.halo-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--halo-gap);
    align-items: center;
}

/* Reserve space for hero image to prevent CLS */
.halo-hero__image {
    aspect-ratio: 4 / 3;
    min-height: 300px;
    overflow: hidden;
    border-radius: var(--halo-img-radius, var(--halo-radius));
}

.halo-hero__headline {
    font-weight: var(--halo-heading-weight);
    line-height: 1.15;
    margin-bottom: 0.3em;
    overflow: visible;
}

.halo-hero__subheadline {
    color: var(--halo-mid-grey);
    margin-bottom: 0.5em;
    /* font-size set by brand.php via --halo-featured-size */
}

.halo-hero__intro {
    margin-bottom: 1.5em;
    line-height: 1.7;
}

.halo-hero__actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.halo-hero__image img {
    width: 100%;
    height: 100%;
    border-radius: var(--halo-img-radius, var(--halo-radius));
    object-fit: cover;
}

/* ─── Hero Gallery Slider ──────────────────────────────────────── */
.halo-hero__gallery {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1; /* Override the 4/3 from .halo-hero__image */
}

.halo-gallery-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--halo-img-radius, 8px);
    overflow: hidden;
}

.halo-gallery-slider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 1;
}

.halo-gallery-slider__slide.is-active {
    opacity: 1;
    z-index: 2;
}

.halo-gallery-slider__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Prev/Next arrows */
.halo-gallery-slider__prev,
.halo-gallery-slider__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--halo-dark-grey, #333);
    transition: background var(--halo-transition, 0.3s ease), opacity var(--halo-transition, 0.3s ease);
    opacity: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.halo-gallery-slider:hover .halo-gallery-slider__prev,
.halo-gallery-slider:hover .halo-gallery-slider__next,
.halo-gallery-slider__prev:focus-visible,
.halo-gallery-slider__next:focus-visible {
    opacity: 1;
}

.halo-gallery-slider__prev:hover,
.halo-gallery-slider__next:hover {
    background: rgba(255, 255, 255, 1);
}

.halo-gallery-slider__prev:focus-visible,
.halo-gallery-slider__next:focus-visible {
    outline: 2px solid var(--halo-primary, #1a7a3a);
    outline-offset: 2px;
    opacity: 1;
}

.halo-gallery-slider__prev { left: 12px; }
.halo-gallery-slider__next { right: 12px; }

/* Dots */
.halo-gallery-slider__dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
}

.halo-gallery-slider__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background var(--halo-transition, 0.3s ease);
}

.halo-gallery-slider__dot.is-active {
    background: var(--halo-white, #fff);
}

.halo-gallery-slider__dot:focus-visible {
    outline: 2px solid var(--halo-primary, #1a7a3a);
    outline-offset: 2px;
}

.halo-gallery__carousel {
    aspect-ratio: 4 / 3;
}

.halo-gallery__carousel--square {
    aspect-ratio: 1 / 1;
}

.halo-gallery__carousel--wide {
    aspect-ratio: 16 / 9;
}

.halo-gallery__carousel--portrait {
    aspect-ratio: 3 / 4;
}

.halo-gallery__carousel .halo-gallery__item,
.halo-gallery__carousel .halo-gallery__link {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

.halo-gallery__carousel .halo-gallery__link {
    color: inherit;
    text-decoration: none;
}

.halo-gallery__carousel .halo-gallery__item > img,
.halo-gallery__carousel .halo-gallery__link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.halo-gallery__carousel .halo-gallery__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    margin: 0;
    padding: 28px 18px 16px;
    color: var(--halo-white, #fff);
    font-size: 0.875em;
    line-height: 1.35;
    text-align: center;
    background: linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0));
}

.halo-gallery__carousel--has-captions .halo-gallery-slider__dots {
    bottom: 58px;
}

.halo-gallery-carousel {
    --halo-gallery-carousel-gap: var(--halo-gap, 16px);
    position: relative;
    width: 100%;
}

.halo-gallery-carousel__viewport {
    overflow: hidden;
    width: 100%;
}

.halo-gallery-carousel__track {
    display: flex;
    gap: var(--halo-gallery-carousel-gap);
    transition: transform 0.45s ease;
    will-change: transform;
}

.halo-gallery-carousel__item {
    position: relative;
    flex: 0 0 calc((100% - (var(--halo-gallery-carousel-items, 1) - 1) * var(--halo-gallery-carousel-gap)) / var(--halo-gallery-carousel-items, 1));
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border-radius: var(--halo-img-radius, var(--halo-radius, 8px));
}

.halo-gallery-carousel--square .halo-gallery-carousel__item {
    aspect-ratio: 1 / 1;
}

.halo-gallery-carousel--landscape .halo-gallery-carousel__item {
    aspect-ratio: 4 / 3;
}

.halo-gallery-carousel--wide .halo-gallery-carousel__item {
    aspect-ratio: 16 / 9;
}

.halo-gallery-carousel--portrait .halo-gallery-carousel__item {
    aspect-ratio: 3 / 4;
}

.halo-gallery-carousel .halo-gallery__link,
.halo-gallery-carousel .halo-gallery__item > img,
.halo-gallery-carousel .halo-gallery__link img {
    display: block;
    width: 100%;
    height: 100%;
}

.halo-gallery-carousel .halo-gallery__link {
    color: inherit;
    text-decoration: none;
}

.halo-gallery-carousel .halo-gallery__item > img,
.halo-gallery-carousel .halo-gallery__link img {
    object-fit: cover;
    border-radius: 0;
}

.halo-gallery-carousel .halo-gallery__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    margin: 0;
    padding: 28px 14px 14px;
    color: var(--halo-white, #fff);
    font-size: 0.875em;
    line-height: 1.35;
    text-align: center;
    background: linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0));
}

.halo-gallery-carousel__prev,
.halo-gallery-carousel__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    color: var(--halo-dark-grey, #333);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    cursor: pointer;
    font-size: 18px;
    opacity: 0;
    transition: background var(--halo-transition, 0.3s ease), opacity var(--halo-transition, 0.3s ease);
}

.halo-gallery-carousel:hover .halo-gallery-carousel__prev,
.halo-gallery-carousel:hover .halo-gallery-carousel__next,
.halo-gallery-carousel__prev:focus-visible,
.halo-gallery-carousel__next:focus-visible {
    opacity: 1;
}

.halo-gallery-carousel__prev:hover,
.halo-gallery-carousel__next:hover {
    background: var(--halo-white, #fff);
}

.halo-gallery-carousel__prev:disabled,
.halo-gallery-carousel__next:disabled {
    opacity: 0;
    cursor: default;
    pointer-events: none;
}

.halo-gallery-carousel__prev:focus-visible,
.halo-gallery-carousel__next:focus-visible {
    outline: 2px solid var(--halo-primary, #1a7a3a);
    outline-offset: 2px;
}

.halo-gallery-carousel__prev {
    left: 12px;
}

.halo-gallery-carousel__next {
    right: 12px;
}

.halo-gallery-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.halo-gallery-carousel__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 2px solid var(--halo-primary, #1a7a3a);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.halo-gallery-carousel__dot.is-active {
    background: var(--halo-primary, #1a7a3a);
}

.halo-gallery-carousel__dot:focus-visible {
    outline: 2px solid var(--halo-primary, #1a7a3a);
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .halo-gallery-carousel--items-3,
    .halo-gallery-carousel--items-4 {
        --halo-gallery-carousel-items: 2 !important;
    }
}

@media (max-width: 600px) {
    .halo-gallery-carousel {
        --halo-gallery-carousel-items: 1 !important;
    }

    .halo-gallery-carousel__prev,
    .halo-gallery-carousel__next {
        opacity: 1;
    }
}

/* ─── Decorative SVG Backgrounds ───────────────────────────────── */
.halo-section--has-svg {
    position: relative;
    overflow: hidden;
}

.halo-svg-bg {
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.halo-svg-bg img {
    width: 100%;
    height: auto;
    display: block;
}

/* Ensure section content sits above the SVG */
.halo-section--has-svg > .halo-container,
.halo-section--has-svg > .halo-hero__inner,
.halo-section--has-svg > *:not(.halo-svg-bg) {
    position: relative;
    z-index: 1;
}

/* Hide decorative SVGs on mobile for cleaner layout */
@media (max-width: 768px) {
    .halo-svg-bg {
        display: none;
    }
}


/* ─── Full-Width Hero ──────────────────────────────────────────── */
.halo-hero-fw {
    position: relative;
    min-height: 600px;
    /* No max-height: when the card is tall the section grows so the
       top/bottom padding (= brand "section_padding") stays intact.
       align-items:center only centres the card when min-height pushes
       the section taller than the card+padding combined. */
    display: flex;
    align-items: center;
    padding: var(--halo-section-padding) 0;
    overflow: hidden;
    contain: layout style;
}

.halo-hero-fw__bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* z-index 0 = bottom of the stack. The video (z-index 1) sits on
       top when loaded, the overlay (z-index 2) tints both, the
       container (z-index 3) holds the text card. Previously the image
       and video shared z-index 0, so whichever rendered last won by
       DOM order — with the image often winning because the video
       hadn't loaded yet. Explicit z-index fixes the stacking. */
    z-index: 0;
}

/* Overlap variant: card hangs over the next section.
   overflow visible so card extends below. bg/overlay clipped via clip-path. */
.halo-hero-fw--overlap {
    overflow: visible;
    padding-bottom: 0;
    margin-bottom: -100px;
    z-index: 2;
}
.halo-hero-fw--overlap .halo-hero-fw__bg,
.halo-hero-fw--overlap .halo-hero-fw__overlay,
.halo-hero-fw--overlap .halo-hero-fw__video {
    clip-path: inset(0);
}
.halo-hero-fw--overlap .halo-hero-fw__card {
    position: relative;
    z-index: 3;
    margin-bottom: -30px;
}
.halo-hero-fw--overlap + .halo-section,
.halo-hero-fw--overlap + section,
.halo-hero-fw--overlap + .halo-trust,
.halo-hero-fw--overlap + div {
    padding-top: calc(var(--halo-section-padding, 80px) + 70px);
}
@media (max-width: 768px) {
    .halo-hero-fw--overlap + .halo-section,
    .halo-hero-fw--overlap + section,
    .halo-hero-fw--overlap + .halo-trust,
    .halo-hero-fw--overlap + div {
        padding-top: calc(var(--halo-section-padding-sm, 50px) + 50px);
    }
}

.halo-hero-fw__overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--halo-black, #1a1a1a);
    pointer-events: none;
    /* z-index 2 — sits ABOVE both bg image (0) and video (1) so the
       tint is applied regardless of which media is showing. */
    z-index: 2;
}

/* Background video */
.halo-hero-fw__video {
    /* Full-bleed video bg. Previously used centered-transform + auto-
       dimensions + min-width/min-height; that combo failed to fill on
       some viewports, leaving the image showing around the video.
       Simpler 100%/100% + object-fit:cover always fills. z-index:1
       puts the video on TOP of the bg image so the image only shows
       while the video buffers / on mobile (where video is display:none). */
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
}

.halo-hero-fw__inner {
    position: relative;
    /* z-index 3 — sits ABOVE bg image (0), video (1) and overlay (2)
       so the card + text are always on top and readable. */
    z-index: 3;
    width: 100%;
}

.halo-hero-fw__content {
    width: 100%;
    display: flex;
}

/* Card alignment */
.halo-hero-fw--left .halo-hero-fw__content {
    justify-content: flex-start;
}
.halo-hero-fw--center .halo-hero-fw__content {
    justify-content: center;
}
.halo-hero-fw--right .halo-hero-fw__content {
    justify-content: flex-end;
}

/* Card stays within the standard container for all alignments */
.halo-hero-fw > .halo-container {
    width: 100%;
    max-width: var(--halo-container, 1200px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.halo-hero-fw__card {
    /* background set inline from ACF (card_bg_colour + card_bg_opacity
       resolved to rgba() in the template). Default is white solid,
       but editors can pick any hex + opacity per-section now. */
    background: var(--halo-white, #fff);
    border-radius: var(--halo-radius-sm, 4px);
    padding: 30px 35px;
    max-width: var(--halo-hero-fw-card-max-w, 600px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    border-top: 4px solid var(--halo-primary);
    min-height: 400px; /* Reserve space to prevent CLS while form loads */
    contain: layout style;
}

.halo-hero-fw--content-left .halo-hero-fw__small-title,
.halo-hero-fw--content-left .halo-hero-fw__headline,
.halo-hero-fw--content-left .halo-hero-fw__subheadline,
.halo-hero-fw--content-left .halo-hero-fw__intro,
.halo-hero-fw--content-left .halo-hero-fw__cta-wrap {
    text-align: left;
}

.halo-hero-fw--content-center .halo-hero-fw__small-title,
.halo-hero-fw--content-center .halo-hero-fw__headline,
.halo-hero-fw--content-center .halo-hero-fw__subheadline,
.halo-hero-fw--content-center .halo-hero-fw__intro,
.halo-hero-fw--content-center .halo-hero-fw__cta-wrap {
    text-align: center;
}

.halo-hero-fw--content-right .halo-hero-fw__small-title,
.halo-hero-fw--content-right .halo-hero-fw__headline,
.halo-hero-fw--content-right .halo-hero-fw__subheadline,
.halo-hero-fw--content-right .halo-hero-fw__intro,
.halo-hero-fw--content-right .halo-hero-fw__cta-wrap {
    text-align: right;
}

/* Multi-button CTA row (cta_buttons repeater) — flex so the buttons space
   evenly and wrap on small cards. Flex ignores text-align, so mirror the
   card's content alignment onto justify-content. */
.halo-hero-fw__cta-wrap--multi {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}
.halo-hero-fw--content-center .halo-hero-fw__cta-wrap--multi { justify-content: center; }
.halo-hero-fw--content-right  .halo-hero-fw__cta-wrap--multi { justify-content: flex-end; }

/* Push to corner: the card hugs the aligned side (left/right) and fills the
   full height of the hero image, top to bottom, at its Card Max Width. Content
   stays vertically centred. Desktop only — on mobile the card returns to normal
   flow (default rules apply, so the media query simply does not fire).
   The card is absolutely positioned; the container + inner are forced static so
   it anchors to the section (which has the min-height), not the collapsed
   container. Section vertical padding is zeroed so the card reaches the image
   edges. z-index 3 keeps it above the overlay. */
@media (min-width: 769px) {
    .halo-hero-fw--corner {
        padding-top: 0;
        padding-bottom: 0;
    }
    .halo-hero-fw--corner > .halo-container {
        max-width: none;
        padding: 0;
        position: static;
    }
    .halo-hero-fw--corner .halo-hero-fw__inner { position: static; }
    .halo-hero-fw--corner .halo-hero-fw__content { display: block; }
    .halo-hero-fw--corner .halo-hero-fw__card {
        position: absolute;
        top: 0;
        bottom: 0;
        width: var(--halo-hero-fw-card-max-w, 600px);
        max-width: 92%;
        margin: 0;
        border-radius: 0;
        border-top: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 3;
    }
    .halo-hero-fw--corner.halo-hero-fw--left  .halo-hero-fw__card,
    .halo-hero-fw--corner.halo-hero-fw--center .halo-hero-fw__card { left: 0; right: auto; }
    .halo-hero-fw--corner.halo-hero-fw--right .halo-hero-fw__card { right: 0; left: auto; }
}

.halo-hero-fw--content-center .halo-hero-fw__benefits--list {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

.halo-hero-fw--content-right .halo-hero-fw__benefits--list {
    margin-left: auto;
}
/* Modifier: hide the brand-primary accent stripe at the top. Set via the
   "Accent stripe at top" toggle in the section editor. */
.halo-hero-fw__card.halo-hero-fw__card--no-stripe {
    border-top: none;
}

/* Modifier: invisible card — no background, no shadow, no padding box,
   no min-height. Text floats directly on the hero with white default
   colour. Toggled via the "Show Card" switch in the section editor. */
.halo-hero-fw__card.halo-hero-fw__card--invisible {
    background: transparent !important;
    box-shadow: none !important;
    border-top: none !important;
    border-radius: 0 !important;
    padding: 0;
    min-height: 0;
    contain: none;
}
.halo-hero-fw__card--invisible,
.halo-hero-fw__card--invisible h1,
.halo-hero-fw__card--invisible h2,
.halo-hero-fw__card--invisible h3,
.halo-hero-fw__card--invisible h4,
.halo-hero-fw__card--invisible p,
.halo-hero-fw__card--invisible li,
.halo-hero-fw__card--invisible .halo-hero-fw__headline,
.halo-hero-fw__card--invisible .halo-hero-fw__small-title,
.halo-hero-fw__card--invisible .halo-hero-fw__intro {
    color: var(--halo-white, #fff);
}
/* Soft text shadow keeps headlines legible against busy bg images
   without re-introducing a card background. */
.halo-hero-fw__card--invisible h1,
.halo-hero-fw__card--invisible h2,
.halo-hero-fw__card--invisible .halo-hero-fw__headline,
.halo-hero-fw__card--invisible .halo-hero-fw__small-title {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.halo-hero-fw__headline {
    font-weight: var(--halo-heading-weight, 700);
    line-height: 1.1;
    margin-bottom: 0.4em;
    overflow: visible;
    /* font-size set by brand.php via --halo-h1-size */
}

/* Small Title (eyebrow) — follows Brand Settings > Preheading.
   `!important` wins when the outer element is rendered as an H1 (default)
   so the global h1 rule cannot overwhelm the eyebrow treatment. */
.halo-hero-fw__small-title,
h1.halo-hero-fw__small-title,
h2.halo-hero-fw__small-title,
h3.halo-hero-fw__small-title,
h4.halo-hero-fw__small-title,
h5.halo-hero-fw__small-title,
h6.halo-hero-fw__small-title {
    font-size: var(--halo-hero-fw-small-title-size, var(--halo-preheading-font-size, var(--halo-nav-font-size, 16px))) !important;
    font-weight: var(--halo-preheading-font-weight, var(--halo-nav-font-weight, 500)) !important;
    text-transform: var(--halo-preheading-transform, var(--halo-nav-transform, none)) !important;
    letter-spacing: var(--halo-preheading-letter-spacing, var(--halo-nav-letter-spacing, 0)) !important;
    line-height: 1.35 !important;
    margin: 0 0 0.6em !important;
    color: var(--halo-preheading-colour, inherit) !important;
    font-family: var(--halo-preheading-font, var(--halo-body-font, inherit)) !important;
    display: block;
}

.halo-hero-fw__card--invisible .halo-hero-fw__small-title {
    color: var(--halo-white, #fff) !important;
}
/* Benefits sit outside the headline/intro selectors above, and the benefit
   description carries its own mid-grey — so the invisible-card white override
   has to name them explicitly or they stay dark on the image. The card-scoped
   (0,2,x) selectors beat the grey (0,1,x) rules without !important. */
.halo-hero-fw__card--invisible .halo-hero-fw__benefit-desc,
.halo-hero-fw__card--invisible .halo-hero-fw__benefit-item span,
.halo-hero-fw__card--invisible .halo-hero-fw__benefit strong,
.halo-hero-fw__card--invisible .halo-hero-fw__benefit-item strong {
    color: var(--halo-white, #fff);
}

.halo-hero-fw__benefits {
    display: flex;
    gap: var(--halo-element-gap, 25px);
    margin-bottom: 1em;
}

.halo-hero-fw__benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    flex: 1;
}

.halo-hero-fw__benefit-icon {
    max-width: 300px;
    max-height: 140px;
    object-fit: contain;
    aspect-ratio: 1 / 1;
}

.halo-hero-fw__benefit strong {
    font-size: var(--halo-base-font-size, 16px);
}

/* Description text — scoped to .halo-hero-fw__benefit-desc so the bare
   `span` selector doesn't bleed into the icon wrapper (which is also a
   span and inherits its color via SVG currentColor — the cause of the
   previously-grey icons). */
.halo-hero-fw__benefit-desc {
    font-size: var(--halo-base-font-size, 16px);
    color: var(--halo-mid-grey);
}

/* Bullet list variant */
.halo-hero-fw__benefits--list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 1em;
}

.halo-hero-fw__benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.halo-hero-fw__benefit-bullet {
    width: 20px;
    height: 20px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    margin-top: 3px;
    object-fit: contain;
}
/* Icon-library SVG used as a list marker — keep it bullet-sized + centred,
   and let it inherit the benefit icon colour (or text colour) via currentColor. */
.halo-hero-fw__benefit-item .halo-hero-fw__benefit-bullet.halo-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Default marker when no per-benefit icon and no shared bullet image is set —
   a small dot in the current text colour, so a list item is never marker-less. */
.halo-hero-fw__benefit-item .halo-hero-fw__benefit-bullet--dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    margin-top: 9px;
    flex-shrink: 0;
    opacity: 0.85;
}

.halo-hero-fw__benefit-item strong {
    font-size: var(--halo-base-font-size, 16px);
}

.halo-hero-fw__benefit-item span {
    font-size: var(--halo-small-size, 14px);
    color: var(--halo-mid-grey);
    display: block;
}

.halo-hero-fw__intro {
    margin-bottom: 0.75em;
    font-size: var(--halo-base-font-size, 16px);
    line-height: var(--halo-body-line-height, 1.7);
    color: var(--halo-dark-grey, #333);
}
.halo-hero-fw__intro p {
    margin-bottom: 0.75em;
}
.halo-hero-fw__intro p:last-child {
    margin-bottom: 0;
}
.halo-hero-fw__intro h2,
.halo-hero-fw__intro h3,
.halo-hero-fw__intro h4 {
    margin-top: 0.75em;
    margin-bottom: 0.4em;
}
.halo-hero-fw__intro ul,
.halo-hero-fw__intro ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}
.halo-hero-fw__intro li {
    margin-bottom: 0.25em;
}

/* ─── Gravity Forms – Global Styles ────────────────────────────── */
/* Hide labels site-wide (placeholders are sufficient).
   Uses !important to override GF's own specificity. */
.gform_wrapper label,
.gform_wrapper .gfield_label,
.gform_wrapper .gfield_label_before_complex,
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_consent_label,
.gform_wrapper legend.gfield_label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ...but only where a placeholder stands in for the label (2.150.9). With no
   placeholder there is nothing else on screen saying what to type or tick:
   checkbox/radio option text, consent text, and the question of any field whose
   inputs carry no placeholder (choice lists, uploads, dates, a select with no
   placeholder option, text fields left without one). Those stay visible, with
   their required marker. Fields set to "Hidden" label placement stay hidden. */
.gform_wrapper .gchoice label,
.gform_wrapper .gfield_consent_label,
.gform_wrapper .gfield:not(.hidden_label):not(:has(input[placeholder]:not([placeholder=""]), textarea[placeholder]:not([placeholder=""]), option.gf_placeholder)) > :is(label.gfield_label, legend.gfield_label),
.gform_wrapper .gfield:not(.hidden_label):not(:has(input[placeholder]:not([placeholder=""]), textarea[placeholder]:not([placeholder=""]), option.gf_placeholder)) > :is(label.gfield_label, legend.gfield_label) .gfield_required,
.gform_wrapper .ginput_complex > span:not(:has(input[placeholder]:not([placeholder=""]), option.gf_placeholder)) > label {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}
.gform_wrapper .gfield:not(.hidden_label):not(:has(input[placeholder]:not([placeholder=""]), textarea[placeholder]:not([placeholder=""]), option.gf_placeholder)) > :is(label.gfield_label, legend.gfield_label) {
    display: block;
    margin: 0 0 6px !important;
    font-weight: 600;
}
.gform_wrapper .ginput_complex > span:not(:has(input[placeholder]:not([placeholder=""]), option.gf_placeholder)) > label {
    display: block;
    margin: 4px 0 0 !important;
    font-size: 13px !important;
}

.gform_wrapper .gfield {
    position: relative;
}

/* Consistent font across all form fields */
.gform_wrapper input,
.gform_wrapper textarea,
.gform_wrapper select,
.gform_wrapper .gfield_label,
.gform_wrapper ::placeholder {
    font-family: var(--halo-body-font, inherit) !important;
    font-size: var(--halo-base-font-size, 16px) !important;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="search"],
.gform_wrapper input[type="date"],
.gform_wrapper input[type="time"],
.gform_wrapper textarea,
.gform_wrapper select {
    /* All four "look" props drive off brand-emitted vars so the Brand
       Settings → Forms panel actually controls every Gravity Form on the
       site, including ones rendered inside image-text / hero-fullwidth /
       testimonials cards. !important is required to beat Gravity Forms'
       own "orbital" theme CSS. Fallbacks match the legacy hard-coded
       defaults so a site without the brand vars still renders correctly. */
    background-color: var(--halo-form-input-bg, #fff) !important;
    color: var(--halo-dark-grey, #222) !important;
    border: 1px solid var(--halo-form-input-border, var(--halo-light-grey, #e5e5e5)) !important;
    border-radius: var(--halo-form-input-radius, var(--halo-radius-sm, 8px)) !important;
    padding: var(--halo-form-input-padding, 12px 15px) !important;
    font-size: 0.95rem !important;
    width: 100%;
    box-shadow: none !important;
}

/* Field focus state — brand-primary ring, not GF's default blue */
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="password"]:focus,
.gform_wrapper input[type="search"]:focus,
.gform_wrapper input[type="date"]:focus,
.gform_wrapper input[type="time"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
    outline: none !important;
    border-color: var(--halo-primary) !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.04), 0 0 0 1px var(--halo-primary) !important;
}

/* Override Gravity Forms 2.5+ theme CSS custom properties so any field we
   didn't explicitly target (radios, checkboxes, file uploads) also inherits
   the brand palette instead of GF's defaults. Form-input vars flow from
   Brand Settings → Forms; legacy --halo-white / --halo-radius-sm fallbacks
   only kick in on installs that haven't set them. */
.gform_wrapper,
.halo-image-text__shortcode,
.halo-testimonials__form-card,
.halo-hero-fw__form,
.halo-hero-banner__form {
    --gf-ctrl-bg-color: var(--halo-form-input-bg, var(--halo-white, #fff));
    --gf-ctrl-bg-color-hover: var(--halo-off-white, #f8f9fa);
    --gf-ctrl-border-color: var(--halo-form-input-border, var(--halo-light-grey, #e5e5e5));
	    --gf-ctrl-border-color-hover: var(--halo-primary);
	    --gf-ctrl-border-color-focus: var(--halo-primary);
    --gform-theme-control-border-color: var(--halo-form-input-border, var(--halo-light-grey, #e5e5e5));
    --gf-ctrl-color: var(--halo-dark-grey, #222);
    --gf-ctrl-placeholder-color: var(--halo-mid-grey, #6c757d);
    --gf-ctrl-radius: var(--halo-form-input-radius, var(--halo-radius-sm, 8px));
}

/* Wrapper background respects Brand Settings → Forms → Form Background
   Colour. Inner GF containers stay transparent so the wrapper's colour
   shows through — clears GF 2.5+'s cream-tinted .gform_body / theme
   foundation defaults. */
.gform_wrapper {
    background: var(--halo-form-bg, transparent) !important;
    border: none !important;
    box-shadow: none !important;
    padding: var(--halo-form-padding, 0) !important;
    border-radius: var(--halo-radius-sm, 8px);
}
.gform_wrapper .gform_body,
.gform_wrapper .gform_fields,
.gform_wrapper .gform-body,
.gform-theme--foundation,
.gform-theme--orbital {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"],
.gform_wrapper .gform_button {
    background-color: var(--halo-primary) !important;
    color: var(--halo-white, #fff) !important;
    border: none !important;
    border-radius: var(--halo-radius) !important;
    padding: 14px 32px !important;
    font-weight: 600 !important;
    font-family: var(--halo-body-font, inherit) !important;
    /* Follow the global button font size (Brand → Buttons), falling back to the
       body base size. GF 2.5 renders the submit as a <button>, which the
       site-wide `.gform_wrapper input` font-size rule doesn't match, so without
       this it drops to the browser's tiny default form-control size. */
    font-size: var(--halo-btn-font-size, var(--halo-base-font-size, 16px)) !important;
    cursor: pointer;
    width: 100%;
    transition: background-color var(--halo-transition);
}

.gform_wrapper input[type="submit"]:hover,
.gform_wrapper input[type="submit"]:focus-visible,
.gform_wrapper button[type="submit"]:hover,
.gform_wrapper button[type="submit"]:focus-visible,
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button:focus-visible {
    background-color: var(--halo-primary-dark) !important;
}

/* Validation – keep error messages visible */
.gform_wrapper .validation_message {
    font-size: var(--halo-small-size, 14px) !important;
    color: #dc3545 !important;
}

/* Form CTA heading above form */
.halo-hero-fw__form-cta {
    font-size: var(--halo-h4-size, 20px);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.5em;
    color: var(--halo-body-text, #333);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

	/* Hero form specific overrides */
	body .halo-hero-fw__form :is([data-form-theme], .gform_wrapper) {
	    --gf-ctrl-border-color: var(--halo-form-input-border, var(--halo-light-grey, #e5e5e5)) !important;
	    --gform-theme-control-border-color: var(--halo-form-input-border, var(--halo-light-grey, #e5e5e5)) !important;
	}
	body .halo-hero-fw__form :is(
	    input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]),
	    textarea,
	    select
	) {
	    border-color: var(--halo-form-input-border, var(--halo-light-grey, #e5e5e5)) !important;
	}
	.halo-hero-fw__form .gform_wrapper {
	    margin: 0 !important;
	    padding-top: 0 !important;
	}
.halo-hero-fw__form .gform_body {
    padding-top: 0 !important;
}

/* ─── Hero — Banner: inline Gravity Form ─────────────────────────────
   Adapts to whatever the hero is set to:
   • Content Box = Card (dark Text Colour): the form sits on the card, the
     heading is dark (currentColor), inputs are white with a light border.
   • Content Box = None (white Text Colour): the form floats over the image,
     the heading is white (currentColor), the white inputs pop on the overlay.
   Field labels are hidden site-wide (placeholders do the work), so contrast
   only ever hinges on the heading + the inputs, both handled here. Layout
   (width / margin / heading) lives in the critical block in functions.php so
   it is stable at first paint; these are the GF-internal + no-card overrides. */
.halo-hero-banner__form .gform_wrapper {
    margin: 0 !important;
    padding-top: 0 !important;
}
.halo-hero-banner__form .gform_body,
.halo-hero-banner__form .gform-body {
    padding-top: 0 !important;
}
/* No Content Box: the form floats on the image. Any GF text that would
   otherwise inherit a dark body colour (the required-fields legend, field
   descriptions) follows the white hero Text Colour instead so it never
   disappears against the overlay. The inputs keep their own white bg. */
.halo-hero-banner__form--no-card .gform_required_legend,
.halo-hero-banner__form--no-card .gfield_description,
.halo-hero-banner__form--no-card .gform_description {
    color: inherit !important;
    opacity: .85;
}

/* Mobile: colour bg instead of image, hide video */
@media (max-width: 768px) {
    .halo-hero-fw {
        min-height: auto;
        max-height: none;
        padding: 20px 0 40px;
        background-image: none !important;
    }
    /* Video always hidden on mobile — the <picture> bg image (sized for
       phones via medium_large / large srcset) acts as the fallback for
       video heroes. Background image stays visible by default so the
       hero has its intended visual on phones too. */
    .halo-hero-fw__video {
        display: none;
    }
    .halo-hero-fw__card {
        padding: 20px;
        max-width: 100%;
    }
    .halo-hero-fw__benefits {
        flex-direction: column;
        gap: 15px;
    }
    .halo-hero-fw--overlap {
        margin-bottom: -80px;
    }
    /* headline font-size handled by brand.php mobile scaling */
}


/* ─── Hero Banner (full-width text over image, no card) ────────── */
.halo-hero-banner {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--halo-section-padding, 80px) 0;
    overflow: hidden;
}

/* Custom HTML section — padding modifiers let the editor/AI drop the
   default 80px top/bottom when their HTML already owns its spacing. */
.halo-section--custom-html.halo-section--padding-tight {
    padding-top: calc(var(--halo-section-padding, 80px) * 0.5);
    padding-bottom: calc(var(--halo-section-padding, 80px) * 0.5);
}
.halo-section--custom-html.halo-section--padding-none {
    padding-top: 0;
    padding-bottom: 0;
}

.halo-hero-banner__bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Mobile-only inline image (stacked above text). Hidden on desktop; shown
   under .halo-hero-banner--mobile-stacked in the mobile media query below. */
.halo-hero-banner__mobile-image { display: none; }

/* Background video */
.halo-hero-banner__video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}

.halo-hero-banner__overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 1;
    /* background colour/gradient set inline from ACF fields */
}

.halo-hero-banner > .halo-container {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* ── Per-slide caption boxes (slideshow) ───────────────────────────────
   Each captioned slide gets a full-cover flex layer that parks its box in
   one of nine spots. Only the active slide's caption is opaque — the inline
   slideshow script cross-fades them in step with the background images.
   pointer-events:none so a box never blocks the hero CTA buttons under it. */
.halo-hero-banner__slide-captions {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.halo-hero-banner__slide-caption {
    position: absolute;
    inset: 0;
    display: flex;
    padding: clamp(16px, 4vw, 48px);
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}
/* Slide 0's caption shows by default (matches the base image) so it's visible
   before the JS runs / if JS fails; the script's inline opacity takes over. */
.halo-hero-banner__slide-caption.is-active { opacity: 1; }
.halo-hero-banner__slide-caption-box {
    max-width: min(420px, 80%);
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1.4;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.halo-hero-banner__slide-caption-box > :first-child { margin-top: 0; }
.halo-hero-banner__slide-caption-box > :last-child  { margin-bottom: 0; }
/* Library icons dropped into caption text (picked icon or inline [icon:slug]).
   Scale to the text size and take the text colour (the SVG uses currentColor). */
.halo-hero-banner__slide-caption-box .halo-inline-icon {
    display: inline-block; /* beat the global img,svg{display:block} reset */
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    margin-right: 0.35em;
    flex: none;
}
.halo-hero-banner__slide-caption--top-left     { justify-content: flex-start; align-items: flex-start; }
.halo-hero-banner__slide-caption--top-center   { justify-content: center;     align-items: flex-start; }
.halo-hero-banner__slide-caption--top-right    { justify-content: flex-end;   align-items: flex-start; }
.halo-hero-banner__slide-caption--center-left  { justify-content: flex-start; align-items: center; }
.halo-hero-banner__slide-caption--center       { justify-content: center;     align-items: center; }
.halo-hero-banner__slide-caption--center-right { justify-content: flex-end;   align-items: center; }
.halo-hero-banner__slide-caption--bottom-left  { justify-content: flex-start; align-items: flex-end; }
.halo-hero-banner__slide-caption--bottom-center{ justify-content: center;     align-items: flex-end; }
.halo-hero-banner__slide-caption--bottom-right { justify-content: flex-end;   align-items: flex-end; }

.halo-hero-banner__content {
    max-width: 700px;
}

/* Content Box (Content Box = Card / Border): wrap the hero text + buttons in a
   panel. Fill/border-colour are set inline from the fields; padding, radius,
   shadow and border-width live here. Also mirrored in the critical-CSS block in
   functions.php — the hero is above the fold. */
.halo-hero-banner__content--card,
.halo-hero-banner__content--border {
    padding: clamp(24px, 3vw, 40px);
    border-radius: var(--halo-radius-sm, 8px);
}
.halo-hero-banner__content--card {
    box-shadow: var(--halo-shadow, 0 10px 30px rgba(0, 0, 0, 0.15));
}
.halo-hero-banner__content--border {
    border: 1px solid; /* border-color set inline from Box Colour */
}

/* Alignment variants */
.halo-hero-banner--left .halo-hero-banner__content {
    margin-right: auto;
}
.halo-hero-banner--center .halo-hero-banner__content {
    margin: 0 auto;
    text-align: center;
}
.halo-hero-banner--right .halo-hero-banner__content {
    margin-left: auto;
}

/* "Push text to edge" (full-width) — drop the 1200px container cap and the
   700px content cap so the text block reaches the banner edges. Horizontal
   breathing room comes from --halo-hb-edge-pad (set inline on the section by
   the Padding-from-edge field; falls back to the normal 30px gap). Mirrored
   in the critical-CSS block in functions.php — the hero is above the fold. */
.halo-hero-banner--full-bleed > .halo-container {
    max-width: none;
    padding-left: var(--halo-hb-edge-pad, 30px);
    padding-right: var(--halo-hb-edge-pad, 30px);
}
.halo-hero-banner--full-bleed .halo-hero-banner__content {
    max-width: none;
}

/* Push box into corner (Content Box on + "Push Box into Corner"). Desktop only:
   the container goes full-bleed, the box hugs the left/right section edge with
   no margin/radius, and the section height collapses to the box (min-height is
   dropped to 0 in the partial), so the box — and any form inside it — drives the
   height. The background image fills the space beside the box. Mobile keeps the
   normal stacked flow. Mirrored in the critical-CSS block in functions.php —
   the hero is above the fold. */
@media (min-width: 769px) {
    .halo-hero-banner--corner {
        padding-top: 0;
        padding-bottom: 0;
    }
    .halo-hero-banner--corner > .halo-container {
        max-width: none;
        padding: 0;
    }
    .halo-hero-banner--corner .halo-hero-banner__content {
        margin-top: 0;
        margin-bottom: 0;
        border-radius: 0;
    }
    .halo-hero-banner--corner.halo-hero-banner--left  .halo-hero-banner__content,
    .halo-hero-banner--corner.halo-hero-banner--center .halo-hero-banner__content {
        margin-left: 0;
        margin-right: auto;
    }
    .halo-hero-banner--corner.halo-hero-banner--right .halo-hero-banner__content {
        margin-right: 0;
        margin-left: auto;
    }
}

/* Vertical alignment variants — the section is the flex container
   (align-items:center by default). Duplicated in the critical-CSS block
   in functions.php: the hero paints above the fold. Doubled class beats
   the base rule regardless of stylesheet order, so a stale cached copy
   of this file can't re-centre a v-aligned hero. */
.halo-hero-banner.halo-hero-banner--v-bottom {
    align-items: flex-end;
}
.halo-hero-banner.halo-hero-banner--v-top {
    align-items: flex-start;
}

/* Small title (eyebrow) — follows Brand Settings > Preheading, matching the
   full-width hero. Each preheading var already falls back to its nav equivalent
   in brand.php when unset, so sites that only tuned Nav are unaffected; sites
   that set Preheading (font, weight, transform, letter-spacing) now get it.
   Colour stays `inherit` on purpose — the eyebrow sits over the hero image and
   must follow the section's text colour, not a fixed brand preheading colour. */
.halo-hero-banner .halo-hero-banner__small-title,
h1.halo-hero-banner__small-title,
h2.halo-hero-banner__small-title,
h3.halo-hero-banner__small-title,
h4.halo-hero-banner__small-title,
h5.halo-hero-banner__small-title,
h6.halo-hero-banner__small-title {
    font-family: var(--halo-preheading-font, var(--halo-body-font, inherit)) !important;
    font-size: var(--halo-preheading-font-size, var(--halo-nav-font-size, 16px)) !important;
    font-weight: var(--halo-preheading-font-weight, var(--halo-nav-font-weight, 500)) !important;
    text-transform: var(--halo-preheading-transform, var(--halo-nav-transform, none)) !important;
    letter-spacing: var(--halo-preheading-letter-spacing, var(--halo-nav-letter-spacing, 0)) !important;
    line-height: 1.4 !important;
    color: inherit !important;
    margin: 0 0 1em 0 !important;
    opacity: 0.9;
}

/* Big title: ALWAYS uses H1 size, colour from field (inherit) */
.halo-hero-banner .halo-hero-banner__big-title,
h1.halo-hero-banner__big-title,
h2.halo-hero-banner__big-title,
h3.halo-hero-banner__big-title,
h4.halo-hero-banner__big-title,
h5.halo-hero-banner__big-title,
h6.halo-hero-banner__big-title {
    font-family: var(--halo-heading-font, inherit) !important;
    font-weight: var(--halo-heading-weight, 700) !important;
    /* --halo-hb-big-size = the per-hero "Big Title (px)" override, emitted as
       an inline VAR by hero-banner.php (not an inline font-size — that would
       beat the mobile media query and the custom size would never shrink on
       phones). Blank falls through to the brand H1 size. */
    font-size: var(--halo-hb-big-size, var(--halo-h1-size, 48px)) !important;
    line-height: var(--halo-heading-line-height, 1.2) !important;
    color: inherit !important;
    margin: 0 0 0.5em 0 !important;
}

.halo-hero-banner__big-title em,
.halo-hero-banner__big-title i {
    font-style: italic;
    font-family: var(--halo-accent-font, serif);
}

/* Per-hero Accent Text Size override — emitted as an inline --halo-hb-accent-size
   var + a --custom-size modifier on the accent span (hero-banner.php). Wins over
   the brand accent size AND the inherited big-title size; !important beats
   brand.php's non-important accent rule. Mirrored in the critical block (accent is
   above the fold) so it applies at first paint. Scales 0.7 on mobile, matching the
   brand's own accent mobile ratio. */
.halo-hero-banner .halo-accent-text--custom-size {
    font-size: var(--halo-hb-accent-size) !important;
}
@media (max-width: 768px) {
    .halo-hero-banner .halo-accent-text--custom-size {
        font-size: calc(var(--halo-hb-accent-size) * 0.7) !important;
    }
}

/* Body: ALWAYS uses body text style, colour from field (inherit) */
.halo-hero-banner .halo-hero-banner__body,
h1.halo-hero-banner__body,
h2.halo-hero-banner__body,
h3.halo-hero-banner__body,
h4.halo-hero-banner__body,
h5.halo-hero-banner__body,
h6.halo-hero-banner__body {
    font-size: var(--halo-base-font-size, 16px) !important;
    font-weight: var(--halo-body-weight, 400) !important;
    line-height: var(--halo-body-line-height, 1.7) !important;
    font-family: var(--halo-body-font, inherit) !important;
    color: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin: 0 0 1.5em 0 !important;
    opacity: 0.9;
}

.halo-hero-banner__body em,
.halo-hero-banner__body i {
    font-style: italic;
}

/* Body is a WYSIWYG rendered in a <div>: strip the outer margins of its first
   and last block children so the editor's own <p> margins don't add a gap above
   (below the big title) or below (before the CTA) — the wrapper owns that spacing. */
.halo-hero-banner__body > :first-child {
    margin-top: 0 !important;
}
.halo-hero-banner__body > :last-child {
    margin-bottom: 0 !important;
}

.halo-hero-banner__cta {
    margin-top: 0.5em;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}
/* Flex ignores the content block's text-align, so mirror the section
   alignment onto the button row (multi-button heroes). */
.halo-hero-banner--center .halo-hero-banner__cta { justify-content: center; }
.halo-hero-banner--right  .halo-hero-banner__cta { justify-content: flex-end; }

/* Accreditation-logo feed — a wrapping row below the bottom element. Height +
   opacity come from inline vars (--halo-hb-logo-h / --halo-hb-logo-opacity);
   alignment mirrors the section like the CTA row does. Mirrored in the
   critical-CSS block in functions.php — the hero is above the fold, so the
   fixed logo height must apply pre-paint or the images snap-resize (CLS). */
.halo-hero-banner__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--halo-hb-logo-gap, 28px);
    margin-top: var(--halo-hb-logo-mt, 1.6em);
}
.halo-hero-banner--center .halo-hero-banner__logos { justify-content: center; }
.halo-hero-banner--right  .halo-hero-banner__logos { justify-content: flex-end; }
/* Per-section alignment override — 3-class selector so it out-specifies the
   section-driven rules above (and wins regardless of stylesheet order). */
.halo-hero-banner .halo-hero-banner__logos.halo-hero-banner__logos--align-left   { justify-content: flex-start; }
.halo-hero-banner .halo-hero-banner__logos.halo-hero-banner__logos--align-center { justify-content: center; }
.halo-hero-banner .halo-hero-banner__logos.halo-hero-banner__logos--align-right  { justify-content: flex-end; }
.halo-hero-banner__logo { display: inline-flex; }
.halo-hero-banner__logos img {
    height: var(--halo-hb-logo-h, 40px);
    width: auto;
    max-width: 200px;
    object-fit: contain;
    opacity: var(--halo-hb-logo-opacity, 1);
    display: block;
}
.halo-hero-banner__logos--greyscale img {
    filter: grayscale(100%);
    transition: filter .25s ease, opacity .25s ease;
}
.halo-hero-banner__logos--greyscale img:hover {
    filter: grayscale(0);
    opacity: 1;
}

/* Per-button colour variants (multi-button hero CTA row). Colour, contrast
   label colour, and hover shade arrive as inline custom properties from the
   template — see $halo_hb_btn_vars in hero-banner.php. Primary-coloured
   buttons don't use these classes; they stay on .halo-btn--primary so they
   follow the site-wide solid/outlined brand mode. */
.halo-hb-btn.halo-hb-btn--solid {
    background: var(--halo-hb-btn);
    color: var(--halo-hb-btn-text, #fff) !important;
    border: var(--halo-btn-border-width, 2px) solid var(--halo-hb-btn);
}
.halo-hb-btn.halo-hb-btn--solid:hover,
.halo-hb-btn.halo-hb-btn--solid:focus-visible {
    background: var(--halo-hb-btn-hover);
    border-color: var(--halo-hb-btn-hover);
    color: var(--halo-hb-btn-text, #fff) !important;
}
.halo-hb-btn.halo-hb-btn--outline {
    background: transparent;
    color: var(--halo-hb-btn) !important;
    border: var(--halo-btn-border-width, 2px) solid var(--halo-hb-btn);
}
.halo-hb-btn.halo-hb-btn--outline:hover,
.halo-hb-btn.halo-hb-btn--outline:focus-visible {
    background: var(--halo-hb-btn);
    color: var(--halo-hb-btn-text, #fff) !important;
}

/* Contained hero banner — background image constrained to container width.
   The section element IS the contained card here (no inner .halo-container
   card-style wrapper), so its max-width must match the CONTENT area of a
   normal .halo-container — i.e. minus the left+right padding. Without this
   subtraction the contained hero rendered ~60px wider than the header
   above and the feed below, breaking visual alignment. */
.halo-hero-banner.halo-section--contained {
    background: transparent !important;
    padding: 0 !important;
    margin-top: calc(var(--halo-section-padding, 60px) / 2);
    margin-bottom: calc(var(--halo-section-padding, 60px) / 2);
    max-width: calc(var(--halo-container, 1200px) - 2 * var(--halo-gap, 30px));
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--halo-radius-sm, 8px);
    overflow: hidden;
    box-shadow: var(--halo-shadow, 0 2px 15px rgba(0,0,0,0.08));
    /* Ensure container within uses reasonable padding */
}
.halo-hero-banner.halo-section--contained > .halo-container {
    padding: calc(var(--halo-section-padding, 60px) * 0.7) var(--halo-gap, 30px);
    /* The generic `.halo-section--contained > .halo-container` rule adds its
       own radius + background + box-shadow to create a contained card look
       on normal sections. For a contained hero-banner we've already applied
       that treatment at the section level (background image + shadow + radius),
       so the inner container must stay transparent — otherwise a faint
       rectangular shadow appears around the text at tall min-heights. */
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

@media (max-width: 768px) {
    .halo-hero-banner {
        /* Inline style sets min-height: ${min_height}px (default 600).
           Cap to 400 so phones don't end up with a screen-tall banner
           when the desktop min-height was picked for widescreen displays. */
        min-height: 400px !important;
        padding: 50px 0;
    }
    /* Compact page-title band (2.150.4): the typed Min Height, never above 400 on phones. Mirrored in the critical block. */
    .halo-hero-banner.halo-hero-banner--compact {
        min-height: min(var(--halo-hb-min-h, 0px), 400px) !important;
    }
    /* Video always hidden on mobile — the <picture> bg image (sized
       specifically for phones via medium_large / large srcset) acts
       as the fallback for video-based heroes. */
    .halo-hero-banner__video {
        display: none;
    }
    /* Background image stays VISIBLE on mobile by default — the <picture>
       element serves a smaller variant so it's not a perf hit. Hidden
       only when the user explicitly opts in via "Hide Image on Mobile". */
    .halo-hero-banner--no-mobile-image .halo-hero-banner__bg {
        display: none;
    }
    /* Mobile: image stacked ABOVE the text instead of behind it. The section
       drops to normal flow, the background image + overlay are hidden, and the
       inline mobile image shows full-width above the content (which sits on the
       Mobile Background Colour applied by sections.js). */
    .halo-hero-banner--mobile-stacked {
        min-height: 0 !important;
        display: block;
        padding: 0 0 40px;
    }
    .halo-hero-banner--mobile-stacked .halo-hero-banner__bg,
    .halo-hero-banner--mobile-stacked .halo-hero-banner__overlay {
        display: none !important;
    }
    .halo-hero-banner--mobile-stacked .halo-hero-banner__mobile-image {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 0 24px;
    }
    .halo-hero-banner--mobile-stacked > .halo-container {
        position: static;
    }
    /* Mobile Background Colour (2.149.2). hero-banner.php prints the resolved
       colour as --halo-hb-mobile-bg + this class, so it applies from CSS at
       first paint instead of waiting for sections.js. A blank colour on a
       stacked / hidden-image hero is derived from the text colour there (light
       text = dark brand panel). Mirrored in the critical block in functions.php. */
    .halo-hero-banner.halo-hero-banner--mobile-bg {
        background-color: var(--halo-hb-mobile-bg);
    }
    /* Mobile big title: an explicit "Big Title — Mobile (px)" wins outright;
       otherwise 60% of whichever desktop size applies (per-hero custom size
       or brand H1). Was a flat ×0.65 of the brand H1 only — custom-sized
       titles never shrank at all (inline !important) and the default shrink
       was too gentle. Mirrored in the critical-CSS block in functions.php —
       the hero is above the fold. */
    .halo-hero-banner .halo-hero-banner__big-title {
        font-size: var(--halo-hb-big-size-m, calc(var(--halo-hb-big-size, var(--halo-h1-size, 48px)) * 0.6)) !important;
    }
    .halo-hero-banner__content {
        max-width: 100%;
    }
    /* Logo feed scales to 75% height on phones (tighter gap) so an
       accreditation row doesn't dominate a small hero. Mirrored in the
       critical-CSS block in functions.php — the hero is above the fold. */
    .halo-hero-banner__logos {
        gap: calc(var(--halo-hb-logo-gap, 28px) * 0.65);
        /* ×0.65 mirrors the gap/height scaling. The 1.85em fallback is chosen so
           the unset default still lands at ~1.2em after scaling (1.85 × 0.65),
           while a custom px space-above scales down proportionally. */
        margin-top: calc(var(--halo-hb-logo-mt, 1.85em) * 0.65);
    }
    .halo-hero-banner__logos img {
        height: calc(var(--halo-hb-logo-h, 40px) * 0.75);
        max-width: 150px;
    }
}


/* ─── Testimonials Section ─────────────────────────────────────── */
.halo-testimonials {
    text-align: center;
}

/* Background variants */
.halo-testimonials--dark {
    background-color: var(--halo-secondary, #1a1a2e);
    color: var(--halo-white, #fff);
}
.halo-testimonials--primary {
    background-color: var(--halo-primary);
    color: var(--halo-white, #fff);
}
.halo-testimonials--primary-dark {
    background-color: var(--halo-primary-dark, var(--halo-primary));
    color: var(--halo-white, #fff);
}
.halo-testimonials--primary-light {
    background-color: var(--halo-primary-light, var(--halo-off-white, #f8f9fa));
    color: var(--halo-dark-grey, #333);
}
.halo-testimonials--secondary {
    background-color: var(--halo-secondary, #1a1a2e);
    color: var(--halo-white, #fff);
}
.halo-testimonials--accent {
    background-color: var(--halo-accent, #f39c12);
    color: var(--halo-white, #fff);
}
.halo-testimonials--light {
    background-color: var(--halo-off-white, #f8f9fa);
    color: var(--halo-dark-grey, #333);
}
.halo-testimonials--white {
    background-color: var(--halo-white, #ffffff);
    color: var(--halo-dark-grey, #333);
}

/* Light/white variants need dark text overrides */
.halo-testimonials--light .halo-testimonials__quote,
.halo-testimonials--light .halo-testimonials__author,
.halo-testimonials--white .halo-testimonials__quote,
.halo-testimonials--white .halo-testimonials__author,
.halo-testimonials--primary-light .halo-testimonials__quote,
.halo-testimonials--primary-light .halo-testimonials__author {
    color: var(--halo-dark-grey, #333);
}
.halo-testimonials--light .halo-testimonials__stars,
.halo-testimonials--white .halo-testimonials__stars,
.halo-testimonials--primary-light .halo-testimonials__stars {
    color: var(--halo-accent, #f39c12);
}
.halo-testimonials--light .halo-testimonials__prev,
.halo-testimonials--light .halo-testimonials__next,
.halo-testimonials--white .halo-testimonials__prev,
.halo-testimonials--white .halo-testimonials__next,
.halo-testimonials--primary-light .halo-testimonials__prev,
.halo-testimonials--primary-light .halo-testimonials__next {
    background: rgba(0,0,0,0.08);
    color: var(--halo-dark-grey, #333);
}
.halo-testimonials--light .halo-testimonials__prev:hover,
.halo-testimonials--light .halo-testimonials__next:hover,
.halo-testimonials--white .halo-testimonials__prev:hover,
.halo-testimonials--white .halo-testimonials__next:hover {
    background: rgba(0,0,0,0.15);
}

/* Inherit the section's own colour rather than hardcoding white. Every
   .halo-testimonials--{variant} above sets `color` correctly for its
   background, so the heading follows automatically and a new variant can
   never reintroduce white-on-light. Do NOT change this back to a fixed
   colour + a per-variant override list — that list is exactly what missed
   `light`/`white`/`primary-light` and rendered the heading invisible. */
.halo-testimonials__heading {
    color: inherit;
    margin-bottom: 1.5em;
}

.halo-testimonials__slide {
    display: none;
}

.halo-testimonials__slide.is-active {
    display: block;
}

.halo-testimonials__stars {
    color: var(--halo-accent, #f39c12);
    font-size: 1.5rem;
    margin-bottom: 1em;
    letter-spacing: 4px;
}

.halo-testimonials__quote {
    /* font-size set by brand.php via --halo-featured-size */
    font-style: italic;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 1.5em;
    border: none;
    padding: 0;
    color: var(--halo-white, #fff);
}

/* Quote Style field: default italic lives above. "Plain" and "Quotation" both
   drop the slant; "Quotation" adds a large decorative quote mark sitting behind
   the text. Sections without the field fall back to the italic default. */
.halo-testimonials--quote-plain .halo-testimonials__quote,
.halo-testimonials--quote-quotation .halo-testimonials__quote {
    font-style: normal;
}
.halo-testimonials--quote-quotation .halo-testimonials__quote {
    position: relative;
    z-index: 0;
    padding-top: 0.35em;
}
.halo-testimonials--quote-quotation .halo-testimonials__quote::before {
    content: "\201C"; /* left double quotation mark */
    position: absolute;
    top: -0.3em;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 6em;
    line-height: 1;
    color: currentColor;
    opacity: 0.12;
    pointer-events: none;
}

.halo-testimonials__author {
    font-weight: 600;
    margin-bottom: 0.25em;
}

.halo-testimonials__role {
    font-size: var(--halo-small-size, 14px);
    opacity: 0.7;
}

.halo-testimonials__photo {
    margin-bottom: 1em;
    display: flex;
    justify-content: center;
}

.halo-testimonials__photo img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.2);
}

.halo-testimonials__source {
    font-size: var(--halo-small-size, 14px);
    opacity: 0.6;
    font-style: italic;
}

.halo-testimonials__nav {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 2em;
}

.halo-testimonials__prev,
.halo-testimonials__next {
    background: rgba(255,255,255,0.15);
    border: none;
    color: var(--halo-white, #fff);
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    cursor: pointer;
    /* Arrows follow the brand BUTTON radius (pill buttons → round arrows),
       falling back to the small card radius for older brand settings. */
    border-radius: var(--halo-radius, var(--halo-radius-sm, 4px));
    transition: background var(--halo-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.halo-testimonials__prev:hover,
.halo-testimonials__prev:focus-visible,
.halo-testimonials__next:hover,
.halo-testimonials__next:focus-visible {
    background: rgba(255,255,255,0.3);
}

/* Arrows left & right of the quote — the slider wrap anchors them,
   vertically centred. Mobile falls back to the below-the-quote row so
   the arrows never overlap text on narrow screens. */
.halo-testimonials--arrows-sides .halo-testimonials__slider-wrap {
    position: relative;
}
@media (min-width: 769px) {
    .halo-testimonials--arrows-sides .halo-testimonials__nav {
        margin-top: 0;
    }
    .halo-testimonials--arrows-sides .halo-testimonials__prev,
    .halo-testimonials--arrows-sides .halo-testimonials__next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
    }
    .halo-testimonials--arrows-sides .halo-testimonials__prev { left: 0; }
    .halo-testimonials--arrows-sides .halo-testimonials__next { right: 0; }
    /* Keep the quote clear of the absolutely-positioned arrows. */
    .halo-testimonials--arrows-sides .halo-testimonials__slide {
        padding-left: 64px;
        padding-right: 64px;
    }
}

/* Testimonial dots — visible dot size is brand-configurable
   (--halo-slider-dot-size, default 14px). The clickable button is
   always at least 32×32px via padding so touch targets pass WCAG
   2.5.5 (Target Size) regardless of how small the visible dot is. */
.halo-testimonials__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 2em;
}
.halo-testimonials__dot {
    /* Outer hit area — at least 32×32px for accessibility */
    width: max(32px, calc(var(--halo-slider-dot-size, 14px) + 14px));
    height: max(32px, calc(var(--halo-slider-dot-size, 14px) + 14px));
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--halo-transition);
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
/* The visible dot is the button's ::before pseudo so we can grow the
   click target via padding without distorting the dot itself. */
.halo-testimonials__dot::before {
    content: '';
    display: block;
    width: var(--halo-slider-dot-size, 14px);
    height: var(--halo-slider-dot-size, 14px);
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    transition: background var(--halo-transition), transform var(--halo-transition);
}
.halo-testimonials__dot:hover::before,
.halo-testimonials__dot:focus-visible::before {
    background: rgba(255,255,255,0.7);
    transform: scale(1.1);
}
.halo-testimonials__dot:focus-visible {
    outline: 2px solid var(--halo-primary, #1a7a3a);
    outline-offset: 2px;
    border-radius: 50%;
}
.halo-testimonials__dot.is-active::before {
    background: rgba(255,255,255,0.95);
}
.halo-testimonials--light .halo-testimonials__dot::before,
.halo-testimonials--white .halo-testimonials__dot::before {
    background: rgba(0,0,0,0.2);
}
.halo-testimonials--light .halo-testimonials__dot:hover::before,
.halo-testimonials--light .halo-testimonials__dot:focus-visible::before,
.halo-testimonials--white .halo-testimonials__dot:hover::before,
.halo-testimonials--white .halo-testimonials__dot:focus-visible::before {
    background: rgba(0,0,0,0.45);
}
.halo-testimonials--light .halo-testimonials__dot.is-active::before,
.halo-testimonials--white .halo-testimonials__dot.is-active::before {
    background: var(--halo-primary, #1a7a3a);
}

/* ─── Testimonials + Form Layout ───────────────────────────────── */
/* Reserve vertical space so the form's progressive render doesn't shift
 * the slider's blockquote — prevents Lighthouse LCP from bouncing around
 * as Gravity Forms (or any embedded form) stabilises its own layout.
 * Tune the min-height if the form design changes significantly. */
.halo-testimonials__slider-wrap {
    min-height: 320px;
}
.halo-testimonials--with-form .halo-testimonials__layout {
    min-height: 480px;
    display: flex;
    gap: calc(var(--halo-gap, 30px) * 2);
    align-items: center;
}

.halo-testimonials--with-form .halo-testimonials__slider-wrap {
    flex: 1;
    min-width: 0;
}

.halo-testimonials--with-form .halo-testimonials__form-wrap {
    flex: 0 0 380px;
    scroll-margin-top: calc(var(--halo-header-height, 90px) + 24px);
}

/* Form on left: reverse order */
.halo-testimonials--form-left .halo-testimonials__layout {
    flex-direction: row-reverse;
}

/* Form card styling */
.halo-testimonials__form-card {
    background: var(--halo-white, #fff);
    border-radius: var(--halo-radius-sm, 8px);
    padding: var(--halo-gap, 30px);
    box-shadow: var(--halo-shadow, 0 2px 15px rgba(0,0,0,0.08));
}

.halo-testimonials--form-no-card .halo-testimonials__form-card {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.halo-testimonials--form-no-card .halo-testimonials__form-card .gform_wrapper,
.halo-testimonials--form-no-card .halo-testimonials__form-card form,
.halo-testimonials--form-no-card .halo-testimonials__form-card .gform_body,
.halo-testimonials--form-no-card .halo-testimonials__form-card .gform_fields,
.halo-testimonials--form-no-card .halo-testimonials__form-card .gfield,
.halo-testimonials--form-no-card .halo-testimonials__form-card input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.halo-testimonials--form-no-card .halo-testimonials__form-card textarea,
.halo-testimonials--form-no-card .halo-testimonials__form-card select {
    width: 100%;
    max-width: none;
}

.halo-testimonials__form-heading {
    color: var(--halo-dark-grey, #333);
    font-size: var(--halo-h3-size, 24px);
    font-weight: var(--halo-heading-weight, 700);
    line-height: var(--halo-heading-line-height, 1.2);
    margin-bottom: 0.5em;
    text-align: left;
}

.halo-testimonials__form-text {
    color: var(--halo-dark-grey, #333);
    font-size: var(--halo-base-font-size, 16px);
    margin-bottom: 1.5em;
    line-height: 1.5;
    text-align: left;
}

@media (max-width: 768px) {
    .halo-testimonials--with-form .halo-testimonials__layout {
        flex-direction: column;
    }
    .halo-testimonials--with-form .halo-testimonials__form-wrap {
        flex: none;
        width: 100%;
    }
    /* On mobile, form always goes below testimonials */
    .halo-testimonials--form-left .halo-testimonials__layout {
        flex-direction: column;
    }
}


/* ─── Trust Bar ─────────────────────────────────────────────────── */
.halo-trust {
    padding: 30px 0;
    text-align: center;
    border-bottom: 1px solid var(--halo-light-grey);
}

/* ── Logo bar section wrapper ───────────────────────────────────
   The trust strip gained a real <section> wrapper so the standard
   halo-section--* background classes apply to it. .halo-trust already
   carries its own 30px padding, so the wrapper contributes none —
   without this the strip would suddenly gain 60px top and bottom. */
.halo-logo-bar {
    padding-top: 0;
    padding-bottom: 0;
}
/* Overlap-hero spacing. The strip used to be a direct sibling of the hero, so
   `.halo-hero-fw--overlap + .halo-trust` applied the clearance to the strip
   itself. Now .halo-trust is nested, that selector no longer matches — but the
   generic `+ .halo-section` one does, and it would put the clearance on the
   wrapper ON TOP of .halo-trust's own 30px. Keep the wrapper flat and push the
   inner strip down instead, matching the old result. */
.halo-hero-fw--overlap + .halo-logo-bar {
    padding-top: 0;
}
.halo-hero-fw--overlap + .halo-logo-bar .halo-trust {
    padding-top: calc(var(--halo-section-padding, 80px) + 70px);
}
@media (max-width: 768px) {
    .halo-hero-fw--overlap + .halo-logo-bar .halo-trust {
        padding-top: calc(var(--halo-section-padding-sm, 50px) + 50px);
    }
}
/* Operator toggle: "Bottom border" off. */
.halo-logo-bar--no-border .halo-trust {
    border-bottom: none;
}
/* Operator toggle: "Vertical padding" = Tight / None. The 30px lives on
   .halo-trust, so these override it from the section wrapper. Deliberately
   NOT applied to the overlap-hero rule above, whose padding-top is structural
   clearance rather than decorative spacing. */
.halo-logo-bar--tight .halo-trust {
    padding-top: 12px;
    padding-bottom: 12px;
}
.halo-logo-bar--flush .halo-trust {
    padding-top: 0;
    padding-bottom: 0;
}
/* The label is explicitly mid-grey, which would survive the white text
   the dark/brand backgrounds set on their children — so it needs its own
   inherit for those. The logos themselves are images and unaffected. */
.halo-section--dark .halo-trust__label,
.halo-section--primary .halo-trust__label,
.halo-section--primary-dark .halo-trust__label,
.halo-section--secondary .halo-trust__label,
.halo-section--accent .halo-trust__label {
    color: inherit;
}
/* The divider line is near-invisible on a dark or brand background; give it
   a translucent white so it still reads as a division when kept on. */
.halo-section--dark .halo-trust,
.halo-section--primary .halo-trust,
.halo-section--primary-dark .halo-trust,
.halo-section--secondary .halo-trust,
.halo-section--accent .halo-trust {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.halo-trust__label {
    font-size: var(--halo-small-size, 14px);
    color: var(--halo-mid-grey);
    margin-bottom: 20px;
    /* Mixed-case by default — editors who want uppercase can type it that
       way in the WYSIWYG, or apply text-transform via Custom CSS. */
}
.halo-trust__label p {
    margin: 0;
}
.halo-trust__label p + p {
    margin-top: 0.4em;
}

.halo-trust__logos {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Both axes follow the per-section "Space Between Logos" field — the
       row-gap between wrapped lines was previously hardcoded (40px) and
       ignored the field, reading as a big odd gap between logo rows. */
    gap: var(--halo-trust-gap, 40px);
    flex-wrap: wrap;
}

/* Full-width ROW — break the wrapping grid out of the site container
   (the carousel variant has its own rule below). Side padding keeps the
   outermost logos off the viewport edge. */
.halo-trust--full .halo-trust__logos {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

.halo-trust__logos a {
    display: flex;
    align-items: center;
}

.halo-trust__logos img {
    max-width: var(--halo-trust-logo-maxw, 320px);
    min-width: min(130px, var(--halo-trust-logo-maxw, 320px));
    width: auto;
    height: auto;
    max-height: var(--halo-trust-logo-h, 80px);
    object-fit: contain;
    opacity: var(--halo-trust-logo-opacity, 0.7);
    transition: opacity var(--halo-transition);
    filter: grayscale(100%);
    padding: 8px;
}

/* Fixed-height mode — a per-section "Logo Height (px)" is set, so every
   logo renders at exactly that height (width follows the aspect ratio,
   still capped by the max-width var). Padding stays inside the height. */
.halo-trust--sized .halo-trust__logos img {
    height: var(--halo-trust-logo-h, 80px);
    max-height: none;
    min-width: 0;
    box-sizing: border-box;
}

/* Full-colour mode — per-section "Logo Colour" set to Full colour. No
   greyscale filter or dimming; badge/award logos stay legible. */
.halo-trust--colour .halo-trust__logos img {
    filter: none;
    opacity: var(--halo-trust-logo-opacity, 1);
}

.halo-trust__logos img:hover,
.halo-trust__logos img:focus-visible {
    opacity: 1;
    filter: grayscale(0%);
}

/* ── Carousel base ──────────────────────────────────────────────
   Track holds N copies of the logo set; the auto-scroll variant
   translates by exactly -100/N% so the loop seams invisibly. The
   static variant uses native horizontal scroll instead. */
.halo-trust--carousel .halo-trust__logos--carousel {
    overflow: hidden;
    position: relative;
    /* Soft edge fade so logos enter/exit smoothly. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}

.halo-trust--carousel .halo-trust__track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.halo-trust--carousel .halo-trust__group {
    display: flex;
    align-items: center;
    gap: var(--halo-trust-gap, 60px);
    padding-right: var(--halo-trust-gap, 60px); /* gap to next group on the seam */
    flex-shrink: 0;
}

/* ── Auto-scroll marquee ────────────────────────────────────────
   4 duplicate groups keep the track wider than 2× the viewport
   for typical logo counts → no trailing empty space at the loop
   seam. translate -25% lands group N+1 exactly where group N
   started, so the loop is seamless. */
.halo-trust--scroll .halo-trust__track {
    /* Duration is set per-section (--halo-trust-duration, computed from
       logo count × speed setting) so px/sec stays constant regardless of
       how many logos are in the strip. 35s = legacy fallback. */
    animation: halo-trust-scroll var(--halo-trust-duration, 35s) linear infinite;
}
.halo-trust--scroll .halo-trust__logos--carousel:hover .halo-trust__track,
.halo-trust--scroll .halo-trust__logos--carousel:focus-within .halo-trust__track {
    animation-play-state: paused;
}
@keyframes halo-trust-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-25%, 0, 0); }
}

/* ── Static (auto-scroll off) ───────────────────────────────────
   Native horizontal scroll. Touch-friendly on mobile, mouse-drag
   via scrollbar on desktop. Only one logo group is rendered. */
.halo-trust--static .halo-trust__logos--carousel {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.halo-trust--static .halo-trust__group > * {
    scroll-snap-align: start;
}

/* ── Full-width breakout ────────────────────────────────────────
   When the carousel is set to span the viewport, the wrapping
   .halo-container is omitted in PHP. Push the carousel hard
   against the viewport edges so the marquee uses the full width
   of the screen. The label above stays inside the container. */
.halo-trust--full .halo-trust__logos--carousel {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
}

/* ── Reduced-motion fallback ────────────────────────────────────
   Disable the marquee, drop the edge fade, fall back to native
   horizontal scroll so users can still see all logos. */
@media (prefers-reduced-motion: reduce) {
    .halo-trust--scroll .halo-trust__logos--carousel {
        -webkit-mask-image: none;
                mask-image: none;
        overflow-x: auto;
    }
    .halo-trust--scroll .halo-trust__track {
        animation: none;
    }
    .halo-trust--scroll .halo-trust__group[aria-hidden="true"] {
        display: none;
    }
}


/* ─── Content Block (text + image side by side) ─────────────────── */
.halo-content-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--halo-gap) * 2);
    align-items: start;
}

.halo-content-block--image-left .halo-content-block__image {
    order: -1;
}

.halo-content-block__image {
    align-self: start;
}

.halo-content-block__image img {
    width: 100%;
    height: auto;
    border-radius: var(--halo-radius);
    object-fit: cover;
}

.halo-content-block__content h2,
.halo-content-block__content h3 {
    margin-bottom: 0.5em;
}

.halo-content-block__content p {
    line-height: 1.7;
    margin-bottom: 1em;
}


/* ─── Benefits / Why Choose Us ──────────────────────────────────── */
.halo-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--halo-gap) * 2);
    align-items: start;
}

.halo-benefits__image img {
    width: 100%;
    height: auto;
    border-radius: var(--halo-radius);
    object-fit: cover;
}

.halo-benefits__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.halo-benefits__item {
    padding-bottom: 1.25em;
    margin-bottom: 1.25em;
    border-bottom: 1px solid var(--halo-light-grey);
}

.halo-benefits__item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.halo-benefits__item h3 {
    margin-bottom: 0.25em;
    /* font-size from brand.php --halo-h3-size */
}

.halo-benefits__item p {
    color: var(--halo-mid-grey);
    line-height: var(--halo-body-line-height, 1.7);
    margin: 0;
}

/* ─── WYSIWYG Content Blocks (universal paragraph/heading spacing) ── */
/* Applies to every section that renders ACF WYSIWYG or wp_kses_post() */
.halo-intro-content p,
.halo-image-text__body p,
.halo-simple-text__content p,
.halo-hero-banner__body p,
.halo-cta-band__text p,
.halo-faq__answer p {
    margin-bottom: 1.3em;
    line-height: var(--halo-body-line-height, 1.7);
}

.halo-intro-content h2,
.halo-image-text__body h2,
.halo-simple-text__content h2 {
    margin: 2em 0 0.6em;
}

.halo-intro-content h3,
.halo-image-text__body h3,
.halo-simple-text__content h3 {
    margin: 1.8em 0 0.5em;
}

.halo-intro-content h4,
.halo-image-text__body h4,
.halo-simple-text__content h4 {
    margin: 1.5em 0 0.4em;
}

.halo-intro-content ul,
.halo-intro-content ol,
.halo-image-text__body ul,
.halo-image-text__body ol,
.halo-simple-text__content ul,
.halo-simple-text__content ol {
    margin-bottom: 1.3em;
    padding-left: 1.5em;
    line-height: var(--halo-body-line-height, 1.7);
}

.halo-intro-content li,
.halo-image-text__body li,
.halo-simple-text__content li {
    margin-bottom: 0.4em;
}

.halo-intro-content a,
.halo-image-text__body a,
.halo-simple-text__content a {
    color: var(--halo-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.halo-intro-content a:hover,
.halo-intro-content a:focus-visible,
.halo-image-text__body a:hover,
.halo-image-text__body a:focus-visible,
.halo-simple-text__content a:hover,
.halo-simple-text__content a:focus-visible {
    color: var(--halo-primary-dark);
}


/* ─── Services Grid ─────────────────────────────────────────────── */
.halo-services-grid {
    display: grid;
    /* Desktop column count comes from the section field (3/4/5) via the
       inline --halo-cols custom property; falls back to 3. */
    grid-template-columns: repeat(var(--halo-cols, 3), 1fr);
    gap: var(--halo-gap);
}

.halo-service-card {
    background: var(--halo-white);
    /* Brand Settings → Cards → Card border radius (--halo-radius-sm).
       Was using --halo-radius (button radius). */
    border-radius: var(--halo-radius-sm, 8px);
    overflow: hidden;
    box-shadow: var(--halo-shadow);
    transition: transform var(--halo-transition);
    will-change: transform;
}

.halo-service-card:hover {
    box-shadow: var(--halo-shadow-hover);
    transform: translateY(-2px);
}

.halo-service-card__image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* An SVG featured image is an icon, not a photo. `cover` crops it AND sizes it
   off the card WIDTH (360px on desktop), while the mega menu sizes the same file
   off its ~170px column — so the identical icon rendered ~2x heavier in a card
   than in the menu. `contain` sizes it off the 200px band instead, which lands
   both at the same stroke weight. Photos are untouched: they keep `cover`.
   Same idiom as the `img[src$=".svg"]` logo rules in the header/footer. */
.halo-service-card__image img[src$=".svg"],
.halo-post-card__image img[src$=".svg"],
.halo-related-card__image img[src$=".svg"] {
    object-fit: contain;
    padding: 14px;
    box-sizing: border-box;
}

/* Same reasoning for the mega menu's hub image, which crops 4:3 by
   default. An SVG there is an icon and should never lose its edges —
   so SVG featured images are `contain` everywhere they render. */
.halo-mega-menu__image[src$=".svg"] {
    object-fit: contain;
    padding: 10px;
    box-sizing: border-box;
}

.halo-service-card__body {
    padding: 25px;
}

.halo-service-card__body h3 {
    /* Brand-driven gap — syncs with brand Heading Spacing Below. */
    margin-bottom: var(--halo-heading-spacing-below, 14px);
    /* font-size from brand.php --halo-h3-size */
}

.halo-service-card__body p {
    color: var(--halo-mid-grey);
    line-height: var(--halo-body-line-height, 1.7);
    /* Same brand setting controls service-card body→link gap. */
    margin-bottom: var(--halo-heading-spacing-below, 14px);
}

/* Operator Title / Text colour overrides (Related Services). Emitted only when
   the operator chooses a colour (the grid gains --title-colour / --text-colour
   and the matching CSS var), so the default and the section-background contrast
   rules are untouched otherwise. !important because an explicit colour choice
   must win over the auto-contrast rules on coloured/dark sections. */
.halo-services-grid--title-colour .halo-service-card__body h3 {
    color: var(--halo-svc-title) !important;
}
.halo-services-grid--text-colour .halo-service-card__body p {
    color: var(--halo-svc-text) !important;
}
/* Card background (2.157.0). !important for the same reason: the Border and
   Flat modes and their dark-section variants set the background at up to
   0,3,0. A filled Flat card gets side padding so its text isn't on the edge. */
.halo-services-grid--card-bg .halo-service-card {
    background: var(--halo-svc-card-bg) !important;
}
.halo-services-grid--card-bg .halo-service-card--plain .halo-service-card__body {
    padding: 15px 20px 20px;
}
/* Card link = title (2.158.0): the service name is the link (no button) and
   stretches over the whole card. Scoped under the grid to beat `.site-content a`
   (0,1,1); keeps the title colour (incl. the operator Title colour and the
   dark-section white) and underlines on hover instead of recolouring. */
.halo-service-card--title-link {
    position: relative;
}
.halo-services-grid .halo-service-card__title-link {
    color: inherit;
    text-decoration: none;
}
.halo-services-grid .halo-service-card__title-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.halo-services-grid .halo-service-card--title-link:hover .halo-service-card__title-link,
.halo-services-grid .halo-service-card__title-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.halo-services-grid .halo-service-card--title-link:has(.halo-service-card__title-link:focus-visible) {
    outline: 2px solid var(--halo-primary);
    outline-offset: 2px;
}

/* Button colour is themeable per section: --halo-svc-btn (colour),
   --halo-svc-btn-text (contrast label on fill) and --halo-svc-btn-hover
   (shaded fill for solid hover) are set inline on .halo-services-grid by the
   template when a non-default Button colour is chosen. Every chain falls back
   to the original primary-based values.
   Scoped under .halo-services-grid (0,2,0): the catch-all `.site-content a`
   (0,1,1) would otherwise beat a bare single-class rule and pin the label
   to --halo-primary, so the chosen button colour would move the border but
   never the text. */
.halo-services-grid .halo-service-card__link {
    display: inline-block;
    color: var(--halo-svc-btn, var(--halo-primary));
    font-weight: 600;
    text-decoration: none;
    font-size: var(--halo-small-size, 14px);
    border: 1px solid var(--halo-svc-btn, var(--halo-primary));
    padding: 8px 20px;
    border-radius: var(--halo-radius-sm);
}

/* Scoped under .halo-services-grid so this beats the catch-all
   `.site-content a:hover` (0,2,1), which would otherwise repaint the text
   primary-dark on hover — dark-on-dark against the filled background. */
.halo-services-grid .halo-service-card__link:hover,
.halo-services-grid .halo-service-card__link:focus-visible {
    background-color: var(--halo-svc-btn, var(--halo-primary));
    color: var(--halo-svc-btn-text, var(--halo-white));
}

.halo-section--related-services.halo-section--dark .halo-service-card,
.halo-section--related-services.halo-section--primary .halo-service-card,
.halo-section--related-services.halo-section--primary-dark .halo-service-card,
.halo-section--related-services.halo-section--secondary .halo-service-card,
.halo-section--related-services.halo-section--accent .halo-service-card {
    background: rgba(255, 255, 255, 0.1);
}

/* Card description on a dark section. The base `.halo-service-card__body p`
   (0,2,1) pins the excerpt to --halo-mid-grey and OUT-SPECIFIES the generic
   dark-section `p → white` rule (0,1,1), so the heading went white but the
   description stayed dark on the translucent card. (0,3,1) here wins for
   every display style — card, border and plain all sit on the dark backdrop. */
.halo-section--related-services.halo-section--dark .halo-service-card__body p,
.halo-section--related-services.halo-section--primary .halo-service-card__body p,
.halo-section--related-services.halo-section--primary-dark .halo-service-card__body p,
.halo-section--related-services.halo-section--secondary .halo-service-card__body p,
.halo-section--related-services.halo-section--accent .halo-service-card__body p {
    color: rgba(255, 255, 255, 0.78);
}

.halo-section--related-services.halo-section--dark .halo-service-card__link,
.halo-section--related-services.halo-section--primary .halo-service-card__link,
.halo-section--related-services.halo-section--primary-dark .halo-service-card__link,
.halo-section--related-services.halo-section--secondary .halo-service-card__link,
.halo-section--related-services.halo-section--accent .halo-service-card__link {
    background: var(--halo-svc-btn, var(--halo-primary, #1a7f37));
    border-color: var(--halo-svc-btn, var(--halo-primary, #1a7f37));
    color: var(--halo-svc-btn-text, var(--halo-white, #fff));
}

.halo-section--related-services.halo-section--dark .halo-service-card__link:hover,
.halo-section--related-services.halo-section--primary .halo-service-card__link:hover,
.halo-section--related-services.halo-section--primary-dark .halo-service-card__link:hover,
.halo-section--related-services.halo-section--secondary .halo-service-card__link:hover,
.halo-section--related-services.halo-section--accent .halo-service-card__link:hover,
.halo-section--related-services.halo-section--dark .halo-service-card__link:focus-visible,
.halo-section--related-services.halo-section--primary .halo-service-card__link:focus-visible,
.halo-section--related-services.halo-section--primary-dark .halo-service-card__link:focus-visible,
.halo-section--related-services.halo-section--secondary .halo-service-card__link:focus-visible,
.halo-section--related-services.halo-section--accent .halo-service-card__link:focus-visible {
    background: var(--halo-svc-btn-hover, var(--halo-primary-dark, var(--halo-primary, #1a7f37)));
    border-color: var(--halo-svc-btn-hover, var(--halo-primary-dark, var(--halo-primary, #1a7f37)));
    color: var(--halo-svc-btn-text, var(--halo-white, #fff));
}

/* On the BRAND-PRIMARY backgrounds the primary-filled button above is the same
   hue as the section and disappears. Invert it — white fill, primary text —
   the same convention the accent section uses for its CTA. Same (0,3,0)
   specificity as the rule above; later in source so it wins. An operator-chosen
   Button colour still applies: the --halo-svc-btn* vars are only set when a
   non-default colour is picked, so these fallbacks are the default look only. */
.halo-section--related-services.halo-section--primary .halo-service-card__link,
.halo-section--related-services.halo-section--primary-dark .halo-service-card__link {
    background: var(--halo-svc-btn, var(--halo-white, #fff));
    border-color: var(--halo-svc-btn, var(--halo-white, #fff));
    color: var(--halo-svc-btn-text, var(--halo-primary, #1a7f37));
}
.halo-section--related-services.halo-section--primary .halo-service-card__link:hover,
.halo-section--related-services.halo-section--primary-dark .halo-service-card__link:hover,
.halo-section--related-services.halo-section--primary .halo-service-card__link:focus-visible,
.halo-section--related-services.halo-section--primary-dark .halo-service-card__link:focus-visible {
    background: var(--halo-svc-btn-hover, rgba(255, 255, 255, 0.86));
    border-color: var(--halo-svc-btn-hover, rgba(255, 255, 255, 0.86));
    color: var(--halo-svc-btn-text, var(--halo-primary-dark, var(--halo-primary, #1a7f37)));
}

/* OUTLINE must stay an outline on dark sections. The shared dark rule above
   force-fills every card button — a legacy fallback from before the Button
   style / colour settings existed (a primary outline vanished on a dark
   backdrop). Now the operator picks Outline / Solid / Link explicitly, so the
   setting wins: transparent fill, border + label in the chosen colour (white
   when none is chosen, so the default still reads on dark). Hover fills with
   that colour and flips the label to its YIQ contrast (--halo-svc-btn-text;
   primary when no colour is chosen). (0,3,0) placed after every dark fill
   rule so it wins by source order; the hover is (0,4,0). Solid + Link keep
   their existing dark treatment. */
.halo-section--related-services.halo-section--dark .halo-service-card__link--outline,
.halo-section--related-services.halo-section--primary .halo-service-card__link--outline,
.halo-section--related-services.halo-section--primary-dark .halo-service-card__link--outline,
.halo-section--related-services.halo-section--secondary .halo-service-card__link--outline,
.halo-section--related-services.halo-section--accent .halo-service-card__link--outline {
    background: transparent;
    border-color: var(--halo-svc-btn, var(--halo-white, #fff));
    color: var(--halo-svc-btn, var(--halo-white, #fff));
}
.halo-section--related-services.halo-section--dark .halo-service-card__link--outline:hover,
.halo-section--related-services.halo-section--primary .halo-service-card__link--outline:hover,
.halo-section--related-services.halo-section--primary-dark .halo-service-card__link--outline:hover,
.halo-section--related-services.halo-section--secondary .halo-service-card__link--outline:hover,
.halo-section--related-services.halo-section--accent .halo-service-card__link--outline:hover,
.halo-section--related-services.halo-section--dark .halo-service-card__link--outline:focus-visible,
.halo-section--related-services.halo-section--primary .halo-service-card__link--outline:focus-visible,
.halo-section--related-services.halo-section--primary-dark .halo-service-card__link--outline:focus-visible,
.halo-section--related-services.halo-section--secondary .halo-service-card__link--outline:focus-visible,
.halo-section--related-services.halo-section--accent .halo-service-card__link--outline:focus-visible {
    background: var(--halo-svc-btn, var(--halo-white, #fff));
    border-color: var(--halo-svc-btn, var(--halo-white, #fff));
    color: var(--halo-svc-btn-text, var(--halo-primary, #1a7f37));
}

/* ─── Related-services button variants (Button style / alignment / width) ───
   The base .halo-service-card__link is the outline button. These modifiers
   are declared AFTER it (and after the base + dark hover rules) so equal-
   specificity single-class selectors win by source order. */

/* Solid: filled from first render (light sections — dark already fills).
   Label is the computed YIQ contrast colour: dark text on light fills,
   light text on dark fills. */
.halo-services-grid .halo-service-card__link--solid {
    background-color: var(--halo-svc-btn, var(--halo-primary));
    color: var(--halo-svc-btn-text, var(--halo-white));
}
.halo-services-grid .halo-service-card__link--solid:hover,
.halo-services-grid .halo-service-card__link--solid:focus-visible {
    background-color: var(--halo-svc-btn-hover, var(--halo-primary-dark, var(--halo-primary)));
    border-color: var(--halo-svc-btn-hover, var(--halo-primary-dark, var(--halo-primary)));
    color: var(--halo-svc-btn-text, var(--halo-white));
}

/* Link only: strip the box entirely, just underline-on-hover text. Overrides
   the base fill hover and the dark-section forced fill. Text takes the
   chosen button colour, same as the outline label. */
.halo-services-grid .halo-service-card__link--link {
    border: none;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--halo-svc-btn, var(--halo-primary));
}
.halo-services-grid .halo-service-card__link--link:hover,
.halo-services-grid .halo-service-card__link--link:focus-visible {
    background: transparent;
    color: var(--halo-svc-btn, var(--halo-primary));
    text-decoration: underline;
}
.halo-section--related-services.halo-section--dark .halo-service-card__link--link,
.halo-section--related-services.halo-section--primary .halo-service-card__link--link,
.halo-section--related-services.halo-section--primary-dark .halo-service-card__link--link,
.halo-section--related-services.halo-section--secondary .halo-service-card__link--link,
.halo-section--related-services.halo-section--accent .halo-service-card__link--link {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--halo-svc-btn, var(--halo-white, #fff));
}
.halo-section--related-services.halo-section--dark .halo-service-card__link--link:hover,
.halo-section--related-services.halo-section--primary .halo-service-card__link--link:hover,
.halo-section--related-services.halo-section--primary-dark .halo-service-card__link--link:hover,
.halo-section--related-services.halo-section--secondary .halo-service-card__link--link:hover,
.halo-section--related-services.halo-section--accent .halo-service-card__link--link:hover,
.halo-section--related-services.halo-section--dark .halo-service-card__link--link:focus-visible,
.halo-section--related-services.halo-section--primary .halo-service-card__link--link:focus-visible,
.halo-section--related-services.halo-section--primary-dark .halo-service-card__link--link:focus-visible,
.halo-section--related-services.halo-section--secondary .halo-service-card__link--link:focus-visible,
.halo-section--related-services.halo-section--accent .halo-service-card__link--link:focus-visible {
    background: transparent;
    color: var(--halo-svc-btn, var(--halo-white, #fff));
    text-decoration: underline;
}

/* ─── Related-services header extras (Eyebrow + Description) ───
   The eyebrow reuses the global .halo-preheading brand style plus the
   feed-heading alignment classes (pure text-align). The description is the
   standard .halo-section__intro (max-width 700px), so centre/right alignment
   also needs the box itself moved via auto margins. */
.halo-related-services__intro--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.halo-related-services__intro--right {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}
.halo-section--related-services.halo-section--dark .halo-section__intro,
.halo-section--related-services.halo-section--primary .halo-section__intro,
.halo-section--related-services.halo-section--primary-dark .halo-section__intro,
.halo-section--related-services.halo-section--secondary .halo-section__intro,
.halo-section--related-services.halo-section--accent .halo-section__intro {
    color: rgba(255, 255, 255, 0.78);
}

/* Alignment (ignored when full width is on — the template omits these then).
   Block + fit-content lets the auto margins position the button. Scoped to
   match the base rule's (0,2,0) so display:block still wins by source order. */
.halo-services-grid .halo-service-card__link--align-center {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.halo-services-grid .halo-service-card__link--align-right {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: 0;
}

/* Full width: stretch across the card, centre the label. Declared last so it
   beats the alignment width if both classes are ever present. */
.halo-services-grid .halo-service-card__link--block {
    display: block;
    width: 100%;
    text-align: center;
}

/* Boxless variant (Card box = off): drop the background, shadow, radius and
   body padding so heading, text and button sit flat on the section. Also
   neutralise the hover lift and the dark-section translucent panel. */
.halo-service-card--plain,
.halo-section--related-services.halo-section--dark .halo-service-card--plain,
.halo-section--related-services.halo-section--primary .halo-service-card--plain,
.halo-section--related-services.halo-section--primary-dark .halo-service-card--plain,
.halo-section--related-services.halo-section--secondary .halo-service-card--plain,
.halo-section--related-services.halo-section--accent .halo-service-card--plain {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

.halo-service-card--plain:hover {
    box-shadow: none;
    transform: none;
}

.halo-service-card--plain .halo-service-card__body {
    padding: 15px 0 0;
}

.halo-service-card--plain .halo-service-card__image {
    border-radius: var(--halo-radius-sm, 8px);
    overflow: hidden;
    display: block;
}

/* Border variant (Display mode = Border): outlined box, no shadow, no hover
   lift. The outline picks up the brand colour on hover instead — a lift plus a
   border reads as two competing affordances. */
.halo-service-card--border,
.halo-section--related-services.halo-section--dark .halo-service-card--border,
.halo-section--related-services.halo-section--primary .halo-service-card--border,
.halo-section--related-services.halo-section--primary-dark .halo-service-card--border,
.halo-section--related-services.halo-section--secondary .halo-service-card--border,
.halo-section--related-services.halo-section--accent .halo-service-card--border {
    background: transparent;
    box-shadow: none;
    border: 1px solid var(--halo-light-grey, #e6e6e6);
    border-radius: var(--halo-radius-sm, 8px);
    overflow: hidden;
}

.halo-service-card--border:hover {
    box-shadow: none;
    transform: none;
    border-color: var(--halo-primary);
}

.halo-section--related-services.halo-section--dark .halo-service-card--border,
.halo-section--related-services.halo-section--primary .halo-service-card--border,
.halo-section--related-services.halo-section--primary-dark .halo-service-card--border,
.halo-section--related-services.halo-section--secondary .halo-service-card--border,
.halo-section--related-services.halo-section--accent .halo-service-card--border {
    border-color: rgba(255, 255, 255, 0.18);
}

/* Image max width + alignment (Related Services). --halo-rs-img-max is set
   inline by the section only when the operator gives it a width; with no width
   the image stays full-bleed and the alignment classes are never emitted, so
   this whole block is inert on existing sections. */
.halo-services-grid .halo-service-card__image {
    display: block;
    max-width: var(--halo-rs-img-max, 100%);
}

/* Shrink the image BLOCK too, not just the picture inside it — otherwise a
   120px icon sits in the middle of an untouched 200px-tall hole. Only ever
   shrinks: a max width above 200px leaves the standard band height alone. */
.halo-services-grid .halo-service-card__image img {
    height: min(200px, var(--halo-rs-img-max, 200px));
}

/* Full-width photos (image above, Cover, no max width): the fixed 200px band
   turned wide 2-column cards (460-555px) into a thin strip that cropped
   people's heads off. Height now follows the card width at 9:5 with a 200px
   floor: 3/4/5 columns in the 1200px container stay exactly 200px, 2 columns
   grow to ~255-310px. SVG icons keep the 200px band so they render at the same
   size as in the mega menu. Phones keep their own sizing. Mirrored in the
   critical block in functions.php (same selector + values). */
@media (min-width: 769px) {
    .halo-services-grid--img-full .halo-service-card__image img:not([src$=".svg"]) {
        height: auto;
        aspect-ratio: 9 / 5;
        min-height: 200px;
    }
}

.halo-services-grid--img-center .halo-service-card__image {
    margin-left: auto;
    margin-right: auto;
}

.halo-services-grid--img-left .halo-service-card__image {
    margin-right: auto;
}

.halo-services-grid--img-right .halo-service-card__image {
    margin-left: auto;
}

/* A shrunk image inside a boxed card needs breathing room from the card edge —
   full-bleed only looks right when it spans the whole width. Left/right also
   get the body's own 25px inset, so the image lines up with the heading and
   button rather than sitting hard against the card edge. Flat cards have no
   horizontal body padding, so flush IS the correct alignment there. */
.halo-services-grid--img-center .halo-service-card:not(.halo-service-card--plain) .halo-service-card__image,
.halo-services-grid--img-left .halo-service-card:not(.halo-service-card--plain) .halo-service-card__image,
.halo-services-grid--img-right .halo-service-card:not(.halo-service-card--plain) .halo-service-card__image {
    margin-top: 25px;
}

.halo-services-grid--img-left .halo-service-card:not(.halo-service-card--plain) .halo-service-card__image {
    margin-left: 25px;
}

.halo-services-grid--img-right .halo-service-card:not(.halo-service-card--plain) .halo-service-card__image {
    margin-right: 25px;
}

/* ── Image Location: left of title (Related Services) ──────────────
   Each card becomes a horizontal row — the photo in the left column, the
   title + excerpt + button in the right column sharing one left edge. The
   image stretches to the card height (align-items:stretch) so the two
   columns line up top and bottom. The left column's width follows the
   Image max width when the operator set one, otherwise a sensible share of
   the card. Placed after the image align rules so it overrides them by
   source order. Stacks back to the default vertical card on phones, where a
   side-by-side photo would be too cramped. */
.halo-services-grid--img-beside .halo-service-card {
    display: flex;
    /* The critical CSS (functions.php) sets .halo-service-card to
       flex-direction:column for the stacked "above" layout, so the horizontal
       row must be set explicitly here or the beside layout silently collapses
       back to a stacked column. */
    flex-direction: row;
    align-items: stretch;
}
.halo-services-grid--img-beside .halo-service-card__image {
    flex: 0 0 auto;
    width: var(--halo-rs-img-max, 40%);
    max-width: 50%;
    margin: 0;
}
/* Fill the left column at the card's full height; object-fit (cover for
   photos, contain for SVG icons) is inherited from the base rules. */
.halo-services-grid--img-beside .halo-service-card__image img {
    width: 100%;
    height: 100%;
    min-height: 100%;
}
.halo-services-grid--img-beside .halo-service-card__body {
    flex: 1 1 auto;
    min-width: 0;
    /* The body is a narrow flex column beside the image; let a long service
       name wrap (and break as a last resort) instead of overflowing and being
       clipped by the card's overflow:hidden. */
    overflow-wrap: break-word;
    word-wrap: break-word;
}
/* Boxed cards get the gap to the image from the body's own 25px padding.
   Flat/plain cards have no horizontal body padding, so add a left gap. */
.halo-services-grid--img-beside .halo-service-card--plain .halo-service-card__body {
    padding: 0 0 0 16px;
}

/* ── Image fit: contain — show the whole image, never crop ──────────
   For icon / logo featured images (e.g. a dentist's service icons). The
   toggle is opt-in (default is cover), so photos and existing sections are
   untouched. object-fit:contain fits the whole image inside its frame;
   SVGs already contained via the base rules, this brings raster icons in
   line and makes it an explicit choice. */
.halo-services-grid--fit-contain .halo-service-card__image img {
    object-fit: contain;
}
/* Stacked ("above") layout: a contained image takes its natural height
   instead of the fixed 200px photo band, so an icon isn't marooned in a tall
   empty strip. */
.halo-services-grid--fit-contain:not(.halo-services-grid--img-beside) .halo-service-card__image img {
    height: auto;
    min-height: 0;
}
/* "Left of title" + contain: the image is an icon, so it sits complete at its
   natural size (capped by the Image max width) at the TOP next to the heading,
   rather than stretching to fill the card height. */
.halo-services-grid--img-beside.halo-services-grid--fit-contain .halo-service-card {
    align-items: flex-start;
}
.halo-services-grid--img-beside.halo-services-grid--fit-contain .halo-service-card__image img {
    height: auto;
    min-height: 0;
    /* Drop the built-in 14px SVG breathing room here: beside the heading the
       icon column is already small, so that padding just shrinks the icon and
       leaves it floating. The wrap's own margin provides the spacing instead. */
    padding: 0;
}
/* Inset the icon to line up with the heading top on boxed cards (the body's
   own 25px padding sets the heading top); flat/plain cards already align at
   the card top with the body's left gap, so they need no image margin. */
.halo-services-grid--img-beside.halo-services-grid--fit-contain .halo-service-card:not(.halo-service-card--plain) .halo-service-card__image {
    margin: 25px 0 25px 25px;
}

/* ── Image vertical alignment: Top / Center ("Left of content") ─────
   Opt-in (blank = Auto, the stretch/top behaviour above), so existing
   sections are untouched. The image keeps its own size instead of stretching
   to the card height, and sits at the top or middle of whatever the card
   shows beside it: title, description and/or just the button. Boxed cards
   inset it by the body's 25px so it never sits hard against the card edge
   (and a corner radius shows on all four corners); flat cards stay flush.
   Desktop/tablet only: on phones the card stacks exactly as before. */
@media (min-width: 769px) {
    .halo-services-grid--img-beside.halo-services-grid--img-valign-top .halo-service-card {
        align-items: flex-start;
    }
    .halo-services-grid--img-beside.halo-services-grid--img-valign-center .halo-service-card {
        align-items: center;
    }
    .halo-services-grid--img-beside.halo-services-grid--img-valign-top .halo-service-card__image img,
    .halo-services-grid--img-beside.halo-services-grid--img-valign-center .halo-service-card__image img {
        height: auto;
        min-height: 0;
    }
    .halo-services-grid--img-beside.halo-services-grid--img-valign-top .halo-service-card:not(.halo-service-card--plain) .halo-service-card__image,
    .halo-services-grid--img-beside.halo-services-grid--img-valign-center .halo-service-card:not(.halo-service-card--plain) .halo-service-card__image {
        margin: 25px 0 25px 25px;
    }
    /* Card padding already insets the outer edges, so drop the 25px margin. */
    .halo-services-grid--custom-pad.halo-services-grid--img-beside.halo-services-grid--img-valign-top .halo-service-card:not(.halo-service-card--plain) .halo-service-card__image,
    .halo-services-grid--custom-pad.halo-services-grid--img-beside.halo-services-grid--img-valign-center .halo-service-card:not(.halo-service-card--plain) .halo-service-card__image {
        margin: 0;
    }
}

@media (max-width: 768px) {
    .halo-services-grid--img-beside .halo-service-card {
        flex-direction: column;
    }
    /* Photos fill the width when stacked; contained icons keep their size. */
    .halo-services-grid--img-beside:not(.halo-services-grid--fit-contain) .halo-service-card__image {
        width: 100%;
        max-width: 100%;
    }
    .halo-services-grid--img-beside:not(.halo-services-grid--fit-contain) .halo-service-card__image img {
        height: 200px;
        min-height: 0;
    }
    .halo-services-grid--img-beside .halo-service-card--plain .halo-service-card__body {
        padding: 15px 0 0;
    }
    /* Stacked icon cards (contain): the body's own 25px top padding is the gap
       under the icon, so drop the image's 25px bottom margin. Both together left
       a ~50px hole between the icon and the title / link (2.160.2). */
    .halo-services-grid--img-beside.halo-services-grid--fit-contain .halo-service-card:not(.halo-service-card--plain) .halo-service-card__image {
        margin-bottom: 0;
    }
}

/* Related Services responsive columns. The desktop count (--halo-cols) applies
   only above 1250px; between the mobile breakpoint and 1250px (tablets and
   narrow laptops) the Tablet columns setting (--halo-cols-tablet, default 2)
   takes over so cards stay roomy — critical for the "Left of title" layout,
   where three columns leave the title too little width and it clips. Scoped to
   min-width:769px so it never overrides the ≤768 mobile-columns rule. */
@media (min-width: 769px) and (max-width: 1250px) {
    .halo-services-grid {
        grid-template-columns: repeat(var(--halo-cols-tablet, 2), 1fr);
    }
}

/* ── Image corner radius (Related Services) ─────────────────────────
   Rounds all four corners of each card image. Emitted only when the operator
   sets a radius (--img-radius class + --halo-rs-img-radius var), so existing
   sections keep the default (top corners from the card's own radius). Pairs
   with Card padding below, which insets the image so all four corners show. */
.halo-services-grid--img-radius .halo-service-card__image img {
    border-radius: var(--halo-rs-img-radius, 0);
}

/* ── Image greyscale (Related Services) ─────────────────────────────
   Optional desaturation of the card images. Emitted only when the operator sets
   a base or hover amount (--img-gray class + the two vars); filter:grayscale is
   GPU-accelerated, so this has no page-speed cost. The hover amount applies when
   the card is hovered, with a transition so it eases between the two states. */
.halo-services-grid--img-gray .halo-service-card__image img {
    filter: grayscale(var(--halo-rs-img-gray, 0));
    transition: filter 0.3s ease;
}
.halo-services-grid--img-gray .halo-service-card:hover .halo-service-card__image img {
    filter: grayscale(var(--halo-rs-img-gray-hover, 0));
}

/* ── Card image = Page icon (Related Services, 2.160.0 + plugin 6.103.0) ──
   The page's Card Icon, drawn inline from the plugin's icon library, so it
   follows the site's icon style (outline / filled) and stroke weight. The
   wrapper is the usual image slot (max width / left column width); the SVG
   fills it. Colour = the section's Icon colour, else brand primary (the same
   default as Benefits library icons). The colour sits on the SVG itself: the
   wrapper is a link, and `.site-content a` (0,1,1) would out-rank a wrapper
   rule. Layout rules mirrored in the critical block in functions.php. */
.halo-service-card__icon {
    line-height: 0;
}
.halo-service-card__icon .halo-icon {
    display: block;
    width: 100%;
    height: auto;
    color: var(--halo-rs-icon-colour, var(--halo-primary));
}
/* Cards on a primary or accent section are translucent, so a primary icon
   would vanish into the section; there the default is white like the card text. */
.halo-section--related-services.halo-section--primary .halo-services-grid:not(.halo-services-grid--card-bg) .halo-service-card__icon .halo-icon,
.halo-section--related-services.halo-section--accent .halo-services-grid:not(.halo-services-grid--card-bg) .halo-service-card__icon .halo-icon {
    color: var(--halo-rs-icon-colour, #fff);
}
.halo-services-grid--img-gray .halo-service-card__icon .halo-icon {
    filter: grayscale(var(--halo-rs-img-gray, 0));
    transition: filter 0.3s ease;
}
.halo-services-grid--img-gray .halo-service-card:hover .halo-service-card__icon .halo-icon {
    filter: grayscale(var(--halo-rs-img-gray-hover, 0));
}

/* ── Card padding (Related Services) ────────────────────────────────
   Space between each card edge and its image + text. Off by default (full-bleed
   image + 25px body). When the operator sets a value the whole card is inset by
   --halo-rs-card-pad: the card box gets the padding, and the body drops its own
   side/bottom padding so the inset stays uniform — the body's top padding
   becomes the image→text gap. Placed after every image-position rule so it
   overrides their 25px breathing-room margins by source order. */
.halo-services-grid--custom-pad .halo-service-card {
    padding: var(--halo-rs-card-pad, 0);
}
.halo-services-grid--custom-pad .halo-service-card__body {
    padding: var(--halo-rs-card-pad, 0) 0 0 0;
}
/* A shrunk image already gets its inset from the card padding — drop the default
   25px breathing-room margins so they don't double up. */
.halo-services-grid--custom-pad.halo-services-grid--img-center .halo-service-card:not(.halo-service-card--plain) .halo-service-card__image,
.halo-services-grid--custom-pad.halo-services-grid--img-left .halo-service-card:not(.halo-service-card--plain) .halo-service-card__image,
.halo-services-grid--custom-pad.halo-services-grid--img-right .halo-service-card:not(.halo-service-card--plain) .halo-service-card__image {
    margin-top: 0;
}
.halo-services-grid--custom-pad.halo-services-grid--img-left .halo-service-card:not(.halo-service-card--plain) .halo-service-card__image {
    margin-left: 0;
}
.halo-services-grid--custom-pad.halo-services-grid--img-right .halo-service-card:not(.halo-service-card--plain) .halo-service-card__image {
    margin-right: 0;
}
/* "Left of title" layout: keep a gap between the image column and the text by
   setting the body's left inset to the card-padding value (the card padding
   already insets the outer edges). */
.halo-services-grid--custom-pad.halo-services-grid--img-beside .halo-service-card__body {
    padding: 0 0 0 var(--halo-rs-card-pad, 0);
}
.halo-services-grid--custom-pad.halo-services-grid--img-beside.halo-services-grid--fit-contain .halo-service-card:not(.halo-service-card--plain) .halo-service-card__image {
    margin: 0;
}


/* ─── Post Grid (Case Studies / Articles feeds) ─────────────────── */
.halo-post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--halo-gap);
}

.halo-post-card {
    background: var(--halo-white, #ffffff);
    /* Brand Settings → Cards → Card border radius (--halo-radius-sm).
       Same value as .halo-service-card so every feed card across the
       site shares a consistent corner-radius + shadow. */
    border-radius: var(--halo-radius-sm, 8px);
    overflow: hidden;
    box-shadow: var(--halo-shadow);
    transition: transform var(--halo-transition);
    will-change: transform;
}

.halo-post-card:hover {
    box-shadow: var(--halo-shadow-hover);
    transform: translateY(-2px);
}

.halo-post-card__image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.halo-post-card__body {
    padding: 25px;
}

.halo-post-card__body h3 {
    font-family: var(--halo-heading-font, inherit);
    font-weight: var(--halo-heading-weight, 700);
    /* Use the brand H3 size so card titles read as real headings, not
       mini-labels. Was locked at H4 (20px) which looked undersized next
       to the body copy below it. */
    font-size: var(--halo-h3-size, 24px);
    line-height: var(--halo-heading-line-height, 1.2);
    /* Brand-driven gap between title and excerpt/date below. */
    margin-bottom: var(--halo-heading-spacing-below, 14px);
}

.halo-post-card__body h3 a {
    text-decoration: none;
    color: var(--halo-dark-grey, #333);
}

.halo-post-card__body h3 a:hover,
.halo-post-card__body h3 a:focus-visible {
    color: var(--halo-primary);
}

/* Date + excerpt use the brand base body size so every feed across the
   site reads as consistent body copy. Previously hardcoded at 14px which
   made feed cards look smaller than the post body they link to. */
.halo-post-card__date {
    color: var(--halo-mid-grey);
    font-size: var(--halo-base-font-size, 16px);
    margin: 0;
}

.halo-post-card__excerpt {
    color: var(--halo-mid-grey);
    font-size: var(--halo-base-font-size, 16px);
    line-height: var(--halo-body-line-height, 1.6);
    margin: 0;
}

/* ─── Post Card on dark-bg sections ─────────────────────────────────
   When a case-studies / post-feed section sits on any dark background
   variant (--dark, --primary, --primary-dark, --secondary, --accent),
   the default solid-white card looks like a heavy block against the
   surround. Switch to a low-opacity white surface + subtle border +
   lighter text so the cards harmonise. Mirrors the treatment that
   already exists on .halo-related-card (related-posts) and
   .halo-service-card (related-services) for visual consistency
   across all three feed types.
*/
.halo-section--dark .halo-post-card,
.halo-section--primary .halo-post-card,
.halo-section--primary-dark .halo-post-card,
.halo-section--secondary .halo-post-card,
.halo-section--accent .halo-post-card {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: none;
}

.halo-section--dark .halo-post-card:hover,
.halo-section--primary .halo-post-card:hover,
.halo-section--primary-dark .halo-post-card:hover,
.halo-section--secondary .halo-post-card:hover,
.halo-section--accent .halo-post-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.halo-section--dark .halo-post-card__body h3 a,
.halo-section--primary .halo-post-card__body h3 a,
.halo-section--primary-dark .halo-post-card__body h3 a,
.halo-section--secondary .halo-post-card__body h3 a,
.halo-section--accent .halo-post-card__body h3 a {
    color: var(--halo-white, #fff);
}

.halo-section--dark .halo-post-card__date,
.halo-section--dark .halo-post-card__excerpt,
.halo-section--primary .halo-post-card__date,
.halo-section--primary .halo-post-card__excerpt,
.halo-section--primary-dark .halo-post-card__date,
.halo-section--primary-dark .halo-post-card__excerpt,
.halo-section--secondary .halo-post-card__date,
.halo-section--secondary .halo-post-card__excerpt,
.halo-section--accent .halo-post-card__date,
.halo-section--accent .halo-post-card__excerpt {
    color: rgba(255, 255, 255, 0.72);
}

/* ─── Post-card display modes (Child Locations Feed) ─────────────────
   Mirror the related-services card modes. Only the child-locations feed
   emits these modifier classes today, so the base selectors are safe to
   leave unscoped; the dark-section overrides null out the translucent
   panel the same way the service-card variants do. */
.halo-post-card--flat,
.halo-section--dark .halo-post-card--flat,
.halo-section--primary .halo-post-card--flat,
.halo-section--primary-dark .halo-post-card--flat,
.halo-section--secondary .halo-post-card--flat,
.halo-section--accent .halo-post-card--flat {
    background: transparent;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.halo-post-card--flat:hover {
    box-shadow: none;
    transform: none;
}

.halo-post-card--flat .halo-post-card__body {
    padding: 15px 0 0;
}

.halo-post-card--flat .halo-post-card__image {
    border-radius: var(--halo-radius-sm, 8px);
    overflow: hidden;
    display: block;
}

.halo-post-card--border,
.halo-section--dark .halo-post-card--border,
.halo-section--primary .halo-post-card--border,
.halo-section--primary-dark .halo-post-card--border,
.halo-section--secondary .halo-post-card--border,
.halo-section--accent .halo-post-card--border {
    background: transparent;
    box-shadow: none;
    border: 1px solid var(--halo-light-grey, #e6e6e6);
    border-radius: var(--halo-radius-sm, 8px);
    overflow: hidden;
}

.halo-post-card--border:hover {
    box-shadow: none;
    transform: none;
    border-color: var(--halo-primary);
}

.halo-section--dark .halo-post-card--border,
.halo-section--primary .halo-post-card--border,
.halo-section--primary-dark .halo-post-card--border,
.halo-section--secondary .halo-post-card--border,
.halo-section--accent .halo-post-card--border {
    border-color: rgba(255, 255, 255, 0.18);
}


/* ─── CTA Band ──────────────────────────────────────────────────── */
.halo-cta-band {
    position: relative;
    overflow: hidden;
}

.halo-cta-band__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--halo-gap);
    align-items: center;
}

/* When there's no image, content goes full width centered */
.halo-cta-band__inner:only-child .halo-cta-band__content:first-child,
.halo-cta-band__content:only-child {
    grid-column: 1 / -1;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.halo-cta-band__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--halo-radius);
}

.halo-cta-band__content {
    padding: var(--halo-gap);
}

.halo-cta-band__content h2 {
    margin-bottom: 0.5em;
}

.halo-cta-band__content p {
    line-height: 1.7;
    margin-bottom: 1.5em;
}


/* ─── Testimonials ──────────────────────────────────────────────── */
.halo-testimonial-card {
    background: var(--halo-white);
    padding: 30px;
    border-radius: var(--halo-radius);
    box-shadow: var(--halo-shadow);
}

.halo-testimonial-card__stars {
    color: var(--halo-accent);
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.halo-testimonial-card__quote {
    font-style: italic;
    line-height: 1.7;
    margin-bottom: 20px;
}

.halo-testimonial-card__author {
    font-weight: 600;
}

.halo-testimonial-card__role {
    color: var(--halo-mid-grey);
    font-size: var(--halo-small-size, 14px);
}


/* ─── Case Study (single post) ──────────────────────────────────── */
.halo-case-study__meta {
    margin-bottom: 2em;
}

.halo-case-study__meta p {
    margin-bottom: 0.5em;
}

.halo-case-study__meta strong {
    min-width: 100px;
    display: inline-block;
}

.halo-case-study__gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: 2em 0;
}

.halo-case-study__gallery img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--halo-radius-sm);
    cursor: pointer;
    transition: transform var(--halo-transition);
    will-change: transform;
}

.halo-case-study__gallery img:hover {
    transform: scale(1.03);
}

.halo-case-study__related {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--halo-gap);
    margin-top: 2em;
}

.halo-case-study__related-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: var(--halo-radius-sm);
    margin-bottom: 10px;
}

.halo-case-study__related-card a {
    color: var(--halo-primary);
    text-decoration: none;
    font-weight: 600;
}

.halo-case-study__related-card .date {
    color: var(--halo-mid-grey);
    font-size: var(--halo-small-size, 14px);
}


/* ─── FAQ Layout (with optional image) ─────────────────────────── */
.halo-faq-wrapper {
    /* No image: single column */
}
.halo-faq-layout--image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--halo-gap, 30px);
    align-items: start;
}
.halo-faq-layout--image-left .halo-faq {
    order: 2;
}
.halo-faq-layout--image-left .halo-faq__image {
    order: 1;
}
.halo-faq__image {
    position: sticky;
    top: 100px;
}
.halo-faq__image img {
    width: 100%;
    height: auto;
    border-radius: var(--halo-img-radius, 8px);
    object-fit: cover;
}
@media (max-width: 768px) {
    .halo-faq-layout--image {
        grid-template-columns: 1fr;
    }
    .halo-faq__image {
        position: static;
        order: -1;
    }
    .halo-faq-layout--image-left .halo-faq {
        order: 0;
    }
}


/* ─── FAQ Accordion ─────────────────────────────────────────────── */
.halo-faq__item {
    border-bottom: 1px solid var(--halo-light-grey);
}

.halo-faq__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 15px;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--halo-base-font-size, 16px);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    color: inherit;
    font-family: inherit;
    border-radius: var(--halo-radius-sm, 4px);
    transition: background var(--halo-transition);
}

.halo-faq__question:hover,
.halo-faq__question:focus-visible {
    background: var(--halo-primary-light, #f0f0f0);
    color: var(--halo-dark-grey, #333);
}

/* Keyboard focus only. A plain :focus outline lingers after a mouse click,
   drawing a second box around the question inside the bordered/card item
   border — clicked questions must not keep an outline. */
.halo-faq__question:focus-visible {
    outline: 2px solid var(--halo-primary);
    outline-offset: -2px;
}

/* On a primary-light section background the brand-light hover would vanish —
   fall back to white there. */
.halo-section--primary-light .halo-faq__question:hover,
.halo-section--primary-light .halo-faq__question:focus-visible {
    background: var(--halo-white, #ffffff);
}

.halo-faq__question::after {
    content: '+';
    font-size: 1.4rem;
    font-weight: 300;
    transition: transform var(--halo-transition);
    flex-shrink: 0;
    margin-left: 15px;
}

.halo-faq__item.is-open .halo-faq__question::after {
    content: '−';
}

/* Note: max-height is a fixed value for CSS animation.
   If FAQ answers exceed 1000px, increase this value or implement grid-template-rows 0fr/1fr for true dynamic sizing. */
.halo-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    line-height: 1.7;
    padding-left: 15px;
    padding-right: 15px;
}

.halo-faq__item.is-open .halo-faq__answer {
    max-height: 1000px;
    padding-bottom: 20px;
}

/* ── FAQ item style variants: Flat (default, above) / Bordered / Card ──
   Mirrors the card_style options on benefits-cards / locations-grid.
   Bordered/Card swap the divider lines for spaced, rounded panels. */
.halo-faq--bordered,
.halo-faq--card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.halo-faq--bordered .halo-faq__item,
.halo-faq--card .halo-faq__item {
    border-bottom: 0;
    border-radius: var(--halo-radius-sm, 4px);
    overflow: hidden;
}
.halo-faq--bordered .halo-faq__item {
    border: 1px solid var(--halo-light-grey, #e0e0e0);
}
.halo-faq--bordered .halo-faq__item:hover,
.halo-faq--bordered .halo-faq__item.is-open {
    border-color: var(--halo-primary);
}

/* ── Question hover style (per-section option) ──────────────────────────────
   Default shows both a background wash on the question AND a border highlight
   on the item (bordered/card). These two variants suppress one half. */

/* Border only — drop the question background wash, keep the border highlight.
   Overrides the base + primary-light hover rules above (higher specificity,
   and appears later in source). */
.halo-faq--hover-border .halo-faq__question:hover,
.halo-faq--hover-border .halo-faq__question:focus-visible,
.halo-section--primary-light .halo-faq--hover-border .halo-faq__question:hover,
.halo-section--primary-light .halo-faq--hover-border .halo-faq__question:focus-visible {
    background: none;
    color: inherit;
}

/* Background only — keep the question background wash, drop the border
   highlight on hover. The open (.is-open) border highlight is kept, since that
   marks the active item rather than a hover state. */
.halo-faq--hover-bg.halo-faq--bordered .halo-faq__item:hover:not(.is-open) {
    border-color: var(--halo-light-grey, #e0e0e0);
}
:is(.halo-section--dark, .halo-section--primary, .halo-section--primary-dark, .halo-section--secondary, .halo-section--accent) .halo-faq--hover-bg.halo-faq--bordered .halo-faq__item:hover:not(.is-open) {
    border-color: rgba(255, 255, 255, 0.15);
}
.halo-faq--card .halo-faq__item {
    background: var(--halo-white, #fff);
    box-shadow: var(--halo-shadow);
}

/* Dark/coloured section overrides — same treatment as .halo-benefit-card--card:
   these section backgrounds force white text, so a solid-white Card item would
   swallow it. Cards become translucent panels that read on the dark backdrop;
   Bordered outlines and flat divider lines soften to translucent white.
   Hover/is-open keep their brand-primary border highlight. */
:is(.halo-section--dark, .halo-section--primary, .halo-section--primary-dark, .halo-section--secondary, .halo-section--accent) .halo-faq--card .halo-faq__item {
    background: rgba(255, 255, 255, 0.08);
}
:is(.halo-section--dark, .halo-section--primary, .halo-section--primary-dark, .halo-section--secondary, .halo-section--accent) .halo-faq--bordered .halo-faq__item:not(:hover):not(.is-open) {
    border-color: rgba(255, 255, 255, 0.15);
}
:is(.halo-section--dark, .halo-section--primary, .halo-section--primary-dark, .halo-section--secondary, .halo-section--accent) .halo-faq__item {
    border-bottom-color: rgba(255, 255, 255, 0.25);
}

/* Border-colour override (per-section Border Colour control). Recolours the
   Flat divider lines and the Bordered panel outline; hover / open keep the same
   custom colour so the choice holds through interaction. Card style has no
   border, so it's unaffected. !important beats the dark-section overrides. */
.halo-faq--border-colour .halo-faq__item {
    border-color: var(--halo-faq-border) !important;
}
.halo-faq--border-colour.halo-faq--bordered .halo-faq__item:hover,
.halo-faq--border-colour.halo-faq--bordered .halo-faq__item.is-open {
    border-color: var(--halo-faq-border) !important;
}


/* ─── Author Box ────────────────────────────────────────────────── */
.halo-author-box {
    display: flex;
    /* Keep flex items at their intrinsic size — without this, the default
       align-items: stretch caused the author photo to stretch vertically
       to match the body column's height when the bio was long. */
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    background: var(--halo-off-white, #f8f9fa);
    border-left: 3px solid var(--halo-primary);
    border-radius: var(--halo-radius, 6px);
    margin: 3em 0 2em;
    max-width: 780px;
}

.halo-author-box__image {
    flex-shrink: 0;
}

/* Both selectors target the same image element — `.halo-author-box__image img`
   is the wrapped-div legacy shape; `.halo-author-box__photo` is the current
   partial which puts the class directly on the <img>. Keeping both means CSS
   matches whichever markup the partial uses now or in the future. */
.halo-author-box__image img,
.halo-author-box__photo {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--halo-primary, #1a7a3a);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.halo-author-box__name {
    font-weight: 600;
    margin-bottom: 0.25em;
}

.halo-author-box__bio {
    color: var(--halo-mid-grey);
    font-size: var(--halo-small-size, 14px);
    line-height: 1.6;
}

.halo-author-box__role {
    color: var(--halo-primary);
    font-size: var(--halo-small-size, 14px);
    font-weight: 500;
    margin: -0.15em 0 0.5em;
}

.halo-author-socials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.halo-author-socials__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    color: var(--halo-primary);
    background: color-mix(in srgb, var(--halo-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--halo-primary) 22%, transparent);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.halo-author-socials__link:hover {
    color: var(--halo-white, #fff);
    background: var(--halo-primary);
    transform: translateY(-1px);
}

.halo-author-socials__link svg {
    width: 17px;
    height: 17px;
}


/* ─── Post meta strip (hero sections, cta_type = post_meta) ────
   Inline list of date · author · read-time · categories. The avatar is
   rendered inside its own <li> so the · separator sits correctly between
   every visible item. Colour inherits from the hero (text_colour) so it
   works on both dark and light hero backgrounds. */

.halo-post-meta {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    font-size: var(--halo-base-font-size, 16px);
    line-height: 1.4;
}

.halo-post-meta li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.halo-post-meta li + li::before {
    content: "·";
    margin-right: 6px;
    opacity: 0.6;
}

.halo-post-meta__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

/* Hero-specific wrappers — give the meta a bit of top margin matching the
   CTA's previous placement. */
.halo-hero-banner__meta,
.halo-hero__meta,
.halo-hero-fw__meta {
    margin-top: 1.5em;
}


/* ─── Inline Author (inside rich-content section) ────────────── */

.halo-inline-author {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: var(--halo-heading-spacing-above, 40px);
    padding-top: var(--halo-heading-spacing-above, 40px);
    border-top: 1px solid var(--halo-light-grey, #e5e5e5);
}

.halo-inline-author__photo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.halo-inline-author__name {
    font-weight: 600;
    margin: 0 0 0.15em;
    font-size: var(--halo-base-font-size, 16px);
}

.halo-inline-author__role {
    color: var(--halo-primary);
    font-size: var(--halo-small-size, 14px);
    font-weight: 500;
    margin: 0 0 0.5em;
}

.halo-inline-author__bio {
    color: var(--halo-mid-grey, #6c757d);
    font-size: var(--halo-small-size, 14px);
    line-height: 1.6;
}

@media (max-width: 480px) {
    .halo-inline-author {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}


/* ─── Team Member Page / author archive (/team/{username}/) ──── */

.halo-author-profile {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    max-width: 900px;
    margin: 0 auto;
}

.halo-author-profile__photo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.halo-author-profile__name {
    margin: 0 0 0.15em;
}

.halo-author-profile__role {
    color: var(--halo-primary);
    font-size: var(--halo-featured-size, 18px);
    font-weight: 500;
    margin: 0 0 1em;
}

.halo-author-profile__bio {
    line-height: var(--halo-body-line-height, 1.7);
}

/* Team page bio (2.161.1): wpautop paragraphs get the site's paragraph spacing
   (the reset zeroes p margins, so a multi-paragraph bio read as one block), and
   bold is a real weight: "bolder" on a 300 body only reaches 400. Spacing is
   mirrored in the critical block in functions.php. */
.halo-author-profile__bio p,
.halo-author-profile__bio li {
    margin-bottom: var(--halo-paragraph-spacing, 18px);
}
.halo-author-profile__bio p:last-child {
    margin-bottom: 0;
}
.halo-author-profile__bio strong,
.halo-author-profile__bio b {
    font-weight: 600;
}

.halo-author-profile__socials {
    display: flex;
    gap: 12px;
    margin-top: 1em;
}

@media (max-width: 768px) {
    .halo-author-profile {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .halo-author-profile__photo {
        width: 140px;
        height: 140px;
    }

    .halo-author-profile__socials {
        justify-content: center;
    }
}


/* ─── Before & After Comparison ───────────────────────────────── */
.halo-before-after__grid {
    display: grid;
    gap: var(--halo-gap, 30px);
}
.halo-before-after__grid--1 { grid-template-columns: 1fr; max-width: 800px; margin: 0 auto; }
.halo-before-after__grid--2 { grid-template-columns: 1fr 1fr; }
.halo-before-after__grid--3 { grid-template-columns: 1fr 1fr 1fr; }

.halo-compare__slider {
    position: relative;
    overflow: hidden;
    border-radius: var(--halo-img-radius, 8px);
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    aspect-ratio: 1 / 1;
}

.halo-compare__after {
    display: block;
    height: 100%;
}
.halo-compare__before {
    display: block;
}

.halo-compare__after img,
.halo-compare__before img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.halo-compare__before {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
}

.halo-compare__before img {
    width: 0;
    min-width: 0;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

.halo-compare__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);
    pointer-events: none;
}

.halo-compare__handle-line {
    flex: 1;
    width: 3px;
    background: #fff;
    box-shadow: 0 0 6px rgba(0,0,0,0.4);
}

.halo-compare__handle-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--halo-dark-grey, #333);
    flex-shrink: 0;
}

.halo-compare__label {
    position: absolute;
    bottom: 15px;
    z-index: 3;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 6px 16px;
    border-radius: var(--halo-radius-sm, 4px);
    font-size: var(--halo-small-size, 14px);
    transition: opacity 0.2s ease;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
}

.halo-compare__label--before {
    left: 15px;
}

.halo-compare__label--after {
    right: 15px;
}

.halo-compare__caption {
    text-align: center;
    margin-top: 0.75em;
    font-size: var(--halo-small-size, 14px);
    color: var(--halo-mid-grey);
}

/* Dark / brand-colour backgrounds: the intro and captions carry an explicit
   mid-grey that overrides the section's inherited white text, so lift them to
   a light colour for contrast (mirrors the services / post-feed dark-intro
   rules). primary-light stays a light background, so it's deliberately excluded. */
.halo-before-after.halo-section--dark .halo-section__intro,
.halo-before-after.halo-section--dark .halo-compare__caption,
.halo-before-after.halo-section--primary .halo-section__intro,
.halo-before-after.halo-section--primary .halo-compare__caption,
.halo-before-after.halo-section--primary-dark .halo-section__intro,
.halo-before-after.halo-section--primary-dark .halo-compare__caption,
.halo-before-after.halo-section--secondary .halo-section__intro,
.halo-before-after.halo-section--secondary .halo-compare__caption,
.halo-before-after.halo-section--accent .halo-section__intro,
.halo-before-after.halo-section--accent .halo-compare__caption {
    color: rgba(255, 255, 255, 0.82);
}


/* ─── Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --halo-section-padding: 50px;
        --halo-gap: 20px;
    }

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

    .halo-hero__image {
        min-height: 200px;
    }

    .halo-hero__inner,
    .halo-content-block,
    .halo-benefits,
    .halo-cta-band__inner {
        grid-template-columns: 1fr;
    }

    .halo-content-block--image-left .halo-content-block__image {
        order: 0;
    }

    .halo-content-block__image {
        position: static;
    }

    .halo-services-grid {
        /* Mobile column count from the section field (1/2); falls back to 1. */
        grid-template-columns: repeat(var(--halo-cols-mobile, 1), 1fr);
    }

    .halo-post-grid {
        grid-template-columns: 1fr;
    }

    .halo-case-study__gallery,
    .halo-case-study__related {
        grid-template-columns: repeat(2, 1fr);
    }

    .halo-trust__logos {
        gap: 25px;
    }

    .halo-trust__logos img {
        max-height: min(60px, var(--halo-trust-logo-h, 60px));
        min-width: min(100px, var(--halo-trust-logo-maxw, 200px));
        max-width: min(200px, var(--halo-trust-logo-maxw, 200px));
    }

    /* Fixed-height mode on mobile: honour the author height but cap it so
       oversized desktop values don't blow out small screens. */
    .halo-trust--sized .halo-trust__logos img {
        height: min(var(--halo-trust-logo-h, 60px), 100px);
        max-height: none;
        min-width: 0;
    }

    .halo-before-after__grid--2,
    .halo-before-after__grid--3 {
        grid-template-columns: 1fr;
    }

    .halo-author-box {
        flex-direction: column;
    }

    .halo-hero__actions {
        flex-direction: column;
    }

    .halo-btn {
        text-align: center;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .halo-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .halo-post-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .halo-case-study__gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ─── Footer ────────────────────────────────────────────────────── */
.halo-footer {
    /* Footer-scoped theming tokens. Defaults reproduce the standard dark
       footer. The footer_bg_color option sets --halo-footer-bg inline on the
       element; .halo-footer--light flips the text + accents for a light/white
       background (set automatically from the chosen colour's brightness). */
    --halo-footer-bg: var(--halo-secondary, #1a1a2e);
    --halo-footer-fg: var(--halo-white, #ffffff);
    --halo-footer-link: var(--halo-white, #ffffff);
    --halo-footer-menu-link: var(--halo-primary-light, #e8f5ec);
    --halo-footer-social-bg: rgba(255, 255, 255, 0.1);
    --halo-footer-bar-bg: rgba(0, 0, 0, 0.15);
    background-color: var(--halo-footer-bg);
    color: var(--halo-footer-fg);
    padding-top: var(--halo-section-padding, 60px);
    overflow: hidden;
    box-sizing: border-box;
}

/* Light footer background → dark text + subtle dark-on-light accents. */
.halo-footer--light {
    --halo-footer-fg: var(--halo-dark-grey, #333333);
    --halo-footer-link: var(--halo-dark-grey, #333333);
    --halo-footer-menu-link: var(--halo-primary, #1a7a3a);
    --halo-footer-social-bg: rgba(0, 0, 0, 0.06);
    --halo-footer-bar-bg: rgba(0, 0, 0, 0.04);
}

/* Optional thin top divider — matches the logo bar's bottom border. Useful
   when the footer background is white/light and needs separating from above. */
.halo-footer--top-border {
    border-top: 1px solid var(--halo-light-grey);
}

.halo-footer .halo-container {
    max-width: var(--halo-container, 1200px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--halo-gap, 30px);
    padding-right: var(--halo-gap, 30px);
    box-sizing: border-box;
}

.halo-footer a {
    color: var(--halo-footer-link, #ffffff);
    text-decoration: none;
    opacity: 0.85;
    transition: opacity var(--halo-transition);
}

.halo-footer a:hover,
.halo-footer a:focus-visible {
    opacity: 1;
    color: var(--halo-footer-link, #ffffff);
}

/* Top: Logo + Social */
.halo-footer__top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 40px;
}

/* Optional large display quote (Site Settings → Footer → Footer Quote) —
   sits to the right of the logo + social block. The top row only switches
   to this grid when a quote is set, so quote-less sites are untouched. */
.halo-footer__top--has-quote {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(30px, 6vw, 90px);
    row-gap: 20px;
    align-items: center;
}
.halo-footer__top--has-quote .halo-footer__brand  { grid-column: 1; grid-row: 1; }
.halo-footer__top--has-quote .halo-footer__social { grid-column: 1; grid-row: 2; }
/* Shared quote typography. Grid placement lives on the --top_right modifier
   only, because the same markup is also rendered inside the first footer
   column (Site Settings → Footer Quote Position), where grid-column: 2 would
   be meaningless. */
.halo-footer__quote {
    font-family: var(--halo-heading-font, inherit);
    font-size: clamp(20px, 2.2vw, 30px);
    font-weight: var(--halo-heading-weight, 600);
    line-height: 1.45;
}
.halo-footer__quote--top_right {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: center;
    max-width: 640px;
}
/* Column variant — a footer column is far narrower than the top row, so the
   display sizing steps down to something closer to body copy. */
.halo-footer__quote--left_column {
    margin-top: 20px;
    max-width: 100%;
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.5;
}
/* The quote is a WYSIWYG field, so its value can be a plain display quote OR
   richer content — a payment/partner badge image plus a line like "We accept
   easy payments". Reset the wrapping <p> outer margins so the block hugs its
   container. */
.halo-footer__quote-text > :first-child { margin-top: 0; }
.halo-footer__quote-text > :last-child { margin-bottom: 0; }
/* Badge/logo images normalise to a consistent, footer-appropriate HEIGHT
   (width follows the aspect ratio) — a full-res logo would otherwise render
   huge. Height-normalising also lines up multiple badges (Stripe, AfterPay …)
   neatly in a row. width:auto beats a stray width="" attribute; an operator who
   genuinely wants a different size can still override via an inline style. */
.halo-footer__quote-text img {
    max-width: 100%;
    max-height: 44px;
    width: auto;
    height: auto;
    vertical-align: middle;
}
/* When badges sit side by side, give them a little breathing room. */
.halo-footer__quote-text img + img { margin-left: 14px; }
/* The quote text inherits the display typography above; the caption
   (attribution) resets back to body text at a smaller size so it reads
   as a sub-line rather than part of the quote. */
.halo-footer__quote-caption {
    margin-top: 0.6em;
    font-family: var(--halo-body-font, inherit);
    font-size: clamp(13px, 1vw, 15px);
    font-weight: var(--halo-body-weight, 400);
    line-height: 1.4;
    opacity: 0.75;
}
@media (max-width: 900px) {
    .halo-footer__top--has-quote {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .halo-footer__quote--top_right {
        max-width: 100%;
        font-size: clamp(18px, 4.8vw, 24px);
    }
    .halo-footer__quote--left_column {
        font-size: 17px;
    }
    .halo-footer__quote-caption {
        font-size: 14px;
    }
}

/* The "Footer logo width" setting arrives as --halo-footer-logo-w (set inline
   on the .halo-footer__logo anchor by templates/global/footer.php).

   The height cap is DERIVED from it at half the width, rather than being the
   fixed 100px it used to be. That old fixed cap was the real limit: a 2:1 logo
   asked to render at 300px wide is 150px tall, got clamped to 100px, and so
   drew at 200px — which is why the width setting appeared to stop at 200.
   At the default 200px setting the derived cap is still exactly 100px, so
   existing sites render identically. */
.halo-footer__logo {
    display: inline-block;
    max-width: 100%;
}
.halo-footer__logo img {
    max-width: var(--halo-footer-logo-w, 200px);
    max-height: calc(var(--halo-footer-logo-w, 200px) * 0.5);
    width: auto;
    height: auto;
}

.halo-footer__site-name {
    font-size: 1.5rem;
    font-weight: var(--halo-heading-weight, 700);
    color: var(--halo-footer-fg, #ffffff);
    opacity: 1;
}

.halo-footer__social {
    display: flex;
    gap: 15px;
}

.halo-footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--halo-footer-social-bg, rgba(255,255,255,0.1));
    border-radius: 50%;
    opacity: 1;
    transition: background var(--halo-transition);
}

.halo-footer__social a:hover,
.halo-footer__social a:focus-visible {
    background: var(--halo-primary);
}

.halo-footer__social svg {
    width: 20px;
    height: 20px;
}

/* Simple footer layout (theme 2.149.0): one editor box replaces the top row
   and the columns. Keep it neutral so the operator's content (and the Footer
   CSS box) decides the look. */
.halo-footer__simple { padding-bottom: 10px; }
.halo-footer__simple > :first-child { margin-top: 0; }
.halo-footer__simple > :last-child { margin-bottom: 0; }
.halo-footer__simple p { margin: 0 0 14px; }
.halo-footer__simple img { max-width: 100%; height: auto; }
.halo-footer__simple a:not(.halo-btn) { color: var(--halo-footer-link); }
.halo-footer__simple .halo-logo-shortcode { display: inline-block; margin-bottom: 26px; }
.halo-footer__simple .halo-footer__social { margin: 22px 0 6px; }

/* Columns — default layout (4 columns). Specific layout variants below
   override grid-template-columns via parent class. */
.halo-footer__columns {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--halo-gap, 30px);
    padding-bottom: 40px;
    width: 100%;
    box-sizing: border-box;
}

/* Footer layout variants — set on .halo-footer via the footer_layout ACF
   option. Each value produces a different column grid on desktop; all
   fall back to the mobile stack below regardless of variant. */
.halo-footer--3col .halo-footer__columns {
    grid-template-columns: repeat(3, 1fr) !important;
}

.halo-footer--2col_map .halo-footer__columns {
    /* Two text columns on the left (auto-width) + map column on the right
       (flex-grow to fill). Using explicit 1fr/1fr/2fr so the map gets the
       biggest slice. */
    grid-template-columns: 1fr 1fr 2fr !important;
    align-items: stretch;
}

.halo-footer--4col_full .halo-container {
    /* Full-width variant: break out of the site container for an edge-to-
       edge columns row. Keeps a comfortable inner padding so text doesn't
       hit the viewport edge. */
    max-width: 100% !important;
    padding-left: calc(var(--halo-gap, 30px) * 2) !important;
    padding-right: calc(var(--halo-gap, 30px) * 2) !important;
}
.halo-footer--4col_full .halo-footer__columns {
    grid-template-columns: repeat(4, 1fr) !important;
    justify-items: start;
}

/* Map column in 2col_map layout — fills its grid cell, min height. */
.halo-footer__col--map {
    overflow: hidden;
    border-radius: var(--halo-radius-sm, 8px);
    min-height: 280px;
}

@media (max-width: 768px) {
    .halo-footer__columns,
    .halo-footer--3col .halo-footer__columns,
    .halo-footer--2col_map .halo-footer__columns,
    .halo-footer--4col_full .halo-footer__columns {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* On mobile, the inline map drops to a full-width row below the 2 cols */
    .halo-footer--2col_map .halo-footer__col--map {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .halo-footer__columns,
    .halo-footer--3col .halo-footer__columns,
    .halo-footer--2col_map .halo-footer__columns,
    .halo-footer--4col_full .halo-footer__columns {
        grid-template-columns: 1fr !important;
    }
}

.halo-footer__col-title {
    font-weight: 600;
    margin-bottom: 15px;
    /* Bump column title slightly above body so it reads as a heading */
    font-size: calc(var(--halo-base-font-size, 16px) * 1.05);
    opacity: 1;
}

/* Footer body text now matches site body font-size — was var(--halo-small-
   size) which defaulted to 14px, too tight against the 16px body type on
   the rest of the site. Match the main body size so footer feels consistent. */
.halo-footer__col p {
    font-size: var(--halo-base-font-size, 16px);
    line-height: var(--halo-body-line-height, 1.7);
    margin-bottom: 0.5em;
    opacity: 0.85;
}

.halo-footer__col a {
    font-size: var(--halo-base-font-size, 16px);
}

.halo-footer__abn {
    font-size: calc(var(--halo-small-size, 14px) * 0.85) !important;
    opacity: 0.6 !important;
    margin-top: 1em !important;
}

/* Opening hours in the footer's first column. Two-column grid: the day column
   sizes to its widest label and the times sit right beside it (small gap), so
   they group at the left instead of stretching to the next column. Text matches
   the footer body size/opacity — no bespoke size. Heading reuses .halo-footer__col-title. */
.halo-footer__hours {
    margin-top: 1em;
}
.halo-footer__hours-list {
    display: grid;
    grid-template-columns: max-content auto;
    column-gap: 1.5em;
    row-gap: 2px;
    margin: 0;
    font-size: var(--halo-base-font-size, 16px);
    line-height: var(--halo-body-line-height, 1.7);
    opacity: 0.85;
}
.halo-footer__hours-list dt,
.halo-footer__hours-list dd {
    margin: 0;
}

/* Compliance / licensing line in the footer's first column (under the tagline) */
.halo-footer__compliance {
    font-size: calc(var(--halo-small-size, 14px) * 0.82) !important;
    line-height: 1.5 !important;
    opacity: 0.6 !important;
    margin-top: 0.9em !important;
}

/* Full-width legal disclaimer band, above the copyright bar */
.halo-footer__disclaimer {
    border-top: 1px solid rgba(127, 127, 127, 0.18);
    padding: 18px 0;
}

.halo-footer__disclaimer p {
    font-size: calc(var(--halo-small-size, 14px) * 0.82);
    line-height: 1.6;
    opacity: 0.62;
    margin: 0;
    font-style: italic;
}

/* Full-width compliance / licensing band (when placed above the disclaimer) */
.halo-footer__legal-band {
    padding: 16px 0 0;
}

.halo-footer__legal-band p {
    font-size: calc(var(--halo-small-size, 14px) * 0.82);
    line-height: 1.5;
    opacity: 0.62;
    margin: 0;
}

/* Contained footer map — constrained to the site container instead of full-bleed */
.halo-footer__map--contained {
    padding: 8px 0;
}

.halo-footer__map--contained iframe {
    border-radius: 8px;
}

/* Footer menus */
.halo-footer__menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.halo-footer__menu li {
    margin-bottom: 8px;
}

.halo-footer__menu a {
    font-size: var(--halo-base-font-size, 16px);
    color: var(--halo-footer-menu-link, #e8f5ec);
}

.halo-footer__menu a:hover,
.halo-footer__menu a:focus-visible {
    color: var(--halo-footer-link, #ffffff);
    opacity: 1;
}

/* Map */
.halo-footer__map {
    width: 100%;
    line-height: 0;
}

.halo-footer__map iframe {
    width: 100%;
    display: block;
}

/* Footer map style (Site Settings → Footer → Map Style). The filter applies to
   the cross-origin iframe element from the parent, so it works on the Google
   Maps embed. Greyscale = simple desaturate; duotone references an inline SVG
   <filter> emitted in footer.php with the chosen brand colour's tone stops. */
.halo-footer__map.is-greyscale iframe,
.halo-footer__col--map.is-greyscale iframe {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.halo-footer__map.is-duotone iframe,
.halo-footer__col--map.is-duotone iframe {
    -webkit-filter: url(#halo-footer-map-duotone);
    filter: url(#halo-footer-map-duotone);
}

/* Copyright bar */
.halo-footer__copyright {
    background: var(--halo-footer-bar-bg, rgba(0,0,0,0.15));
    padding: 15px 0;
    font-size: calc(var(--halo-small-size, 14px) * 0.85);
}

.halo-footer__copyright .halo-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.halo-footer__copyright p {
    margin: 0;
    opacity: 0.7;
}

.halo-footer__legal {
    display: flex;
    gap: 20px;
}

.halo-footer__legal a {
    font-size: calc(var(--halo-small-size, 14px) * 0.85);
    opacity: 0.7;
}

.halo-footer__legal a:hover,
.halo-footer__legal a:focus-visible {
    opacity: 1;
}

/* Footer responsive */
@media (max-width: 768px) {
    .halo-footer__columns {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .halo-footer__copyright .halo-container {
        flex-direction: column;
        text-align: center;
    }

    .halo-footer__legal {
        justify-content: center;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .halo-footer__columns {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ═══════════════════════════════════════════════════════════════════
   POST/BLOG SPECIFIC STYLES
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Post Hero Section ─────────────────────────────────────────── */
.halo-post-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    color: var(--halo-white, #fff);
    padding: 0 var(--halo-gap, 30px) 50px;
    overflow: hidden;
}

.halo-post-hero--no-image {
    background: var(--halo-primary-light, #e8f5ec);
    min-height: 320px;
    color: var(--halo-dark-grey, #333);
}
.halo-post-hero--no-image h1,
.halo-post-hero--no-image .halo-badge {
    color: var(--halo-dark-grey, #333);
}
.halo-post-hero--no-image .halo-badge {
    background: var(--halo-white, #fff);
}

.halo-post-hero__bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}

.halo-post-hero__overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
}

.halo-post-hero--no-image .halo-post-hero__overlay {
    background: none;
}

.halo-post-hero__content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.halo-post-hero__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.halo-badge {
    display: inline-block;
    padding: 5px 14px;
    background: var(--halo-primary, #1a7a3a);
    border-radius: var(--halo-radius, 6px);
    font-size: var(--halo-small-size, 13px);
    font-weight: 600;
    color: var(--halo-white, #fff);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background var(--halo-transition);
}

.halo-badge:hover {
    background: var(--halo-primary-dark, #0d5a20);
    color: var(--halo-white, #fff);
}

.halo-post-hero .halo-badge {
    background: rgba(255, 255, 255, 0.95);
    color: var(--halo-dark-grey, #333);
}
.halo-post-hero .halo-badge:hover {
    background: #fff;
    color: var(--halo-primary);
}

.halo-post-hero h1 {
    margin: 0 0 16px;
    line-height: 1.15;
    color: var(--halo-white, #fff);
    font-size: clamp(28px, 4vw, var(--halo-h1-size, 48px));
}

.halo-post-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: var(--halo-small-size, 14px);
    opacity: 0.85;
}

.halo-post-hero__separator {
    opacity: 0.5;
}

@media (max-width: 768px) {
    .halo-post-hero {
        min-height: 280px;
        padding: 0 var(--halo-gap, 20px) 30px;
    }
}


/* ─── Two-Column Post Layout ─────────────────────────────────── */
.halo-post-layout {
    padding: var(--halo-section-padding, 80px) 0;
}

.halo-post-layout__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 780px;
    margin: 0 auto;
}

.halo-post-layout--has-toc .halo-post-layout__grid {
    max-width: 100%;
    grid-template-columns: 250px 1fr;
    gap: 50px;
}

.halo-post-layout__content {
    max-width: 780px;
    min-width: 0;
}

/* ─── Table of Contents (sidebar) ─────────────────────────────── */
.halo-post-layout__sidebar {
    position: relative;
}

/* White card with brand shadow + radius so the TOC sits as a clean
   elevated panel against the page. Previously used a light-grey fill
   with a green left accent; that worked but looked out of step with
   the rest of the card styling (service cards, post cards, etc.).
   The active-link indicator (border-left on .halo-toc__link.is-active)
   still provides the brand-coloured marker for the current heading. */
.halo-toc {
    background: var(--halo-white, #ffffff);
    box-shadow: var(--halo-shadow);
    border-radius: var(--halo-radius);
    padding: 24px 26px;
}

/* Sidebar TOC sticks to the viewport as the reader scrolls past.
   The parent section's overflow:hidden must be lifted for sticky to work
   (CSS sticky breaks when any ancestor clips overflow). */
.halo-section--rich-content.halo-section--toc-sidebar {
    overflow: visible;
}

.halo-toc--sidebar {
    position: sticky;
    top: 100px;
}

/* Top TOC sits above content and scrolls naturally. Constrained so it
   doesn't stretch the full page width on wide screens. */
.halo-toc--top {
    margin: 0 auto 40px;
    max-width: 900px;
}

/* Sidebar layout: fixed-width TOC column + flexible content column.
   NOTE: do NOT use `align-items: start` here. Grid items default to stretching
   to the full row height, which gives the <aside> enough vertical room for
   `position: sticky` inside it to actually stick through the whole scroll.
   With align-items:start the aside shrinks to its nav content (~200px) and
   sticky "runs out of room" almost immediately. */
.halo-section--rich-content.halo-section--toc-sidebar .halo-rich-content-grid {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 50px;
}

.halo-section--rich-content.halo-section--toc-sidebar .halo-rich-content {
    min-width: 0; /* allow long content to shrink inside the grid column */
}

.halo-toc__title {
    font-size: var(--halo-small-size, 14px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 14px;
    color: var(--halo-dark-grey, #333);
}

.halo-toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.halo-toc__item {
    margin-bottom: 0;
}

.halo-toc__item--h3 {
    margin-left: 14px;
}

.halo-toc__link {
    display: block;
    padding: 6px 0;
    color: var(--halo-mid-grey, #6c757d);
    text-decoration: none;
    font-size: var(--halo-base-font-size, 16px);
    line-height: 1.4;
    /* Links sit flush with the TOC's internal padding (26px) so the active
       indicator's 2px left border lines up with the card's inner gutter. */
    border-left: 2px solid transparent;
    padding-left: 12px;
    margin-left: -26px;
}

.halo-toc__link:hover,
.halo-toc__link:focus-visible {
    color: var(--halo-primary);
}

.halo-toc__link.is-active {
    color: var(--halo-primary);
    font-weight: 600;
    border-left-color: var(--halo-primary);
}

@media (max-width: 991px) {
    .halo-post-layout--has-toc .halo-post-layout__grid {
        grid-template-columns: 1fr;
    }

    /* Collapse sidebar TOC to a single stacked column on tablet/mobile and
       drop the sticky behaviour so it doesn't hover over content. */
    .halo-section--rich-content.halo-section--toc-sidebar .halo-rich-content-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .halo-toc--sidebar {
        position: static;
        max-width: 100%;
    }
}


/* ─── Post Content Typography ────────────────────────────────── */
.halo-post-layout__content .entry-content {
    max-width: 100%;
    margin: 0;
    font-size: var(--halo-base-font-size, 17px);
    line-height: var(--halo-body-line-height, 1.8);
    color: var(--halo-dark-grey, #333);
}

.halo-post-layout__content .entry-content h2 {
    margin: 2em 0 0.6em;
    padding-bottom: 0.3em;
    border-bottom: 2px solid var(--halo-light-grey, #eee);
    font-size: var(--halo-h2-size, 28px);
}

.halo-post-layout__content .entry-content h2:first-child {
    margin-top: 0;
}

.halo-post-layout__content .entry-content h3 {
    margin: 1.6em 0 0.5em;
    font-size: var(--halo-h3-size, 22px);
}

.halo-post-layout__content .entry-content p {
    margin-bottom: 1.2em;
}

.halo-post-layout__content .entry-content ul,
.halo-post-layout__content .entry-content ol {
    margin: 0 0 1.5em 1.2em;
    padding: 0;
}

.halo-post-layout__content .entry-content li {
    margin-bottom: 0.5em;
    padding-left: 0.3em;
}

.halo-post-layout__content .entry-content a {
    color: var(--halo-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.halo-post-layout__content .entry-content a:hover {
    color: var(--halo-primary-dark);
}

.halo-post-layout__content .entry-content blockquote {
    margin: 1.5em 0;
    padding: 20px 24px;
    border-left: 4px solid var(--halo-primary);
    background: var(--halo-off-white, #f8f9fa);
    border-radius: 0 var(--halo-radius, 6px) var(--halo-radius, 6px) 0;
    font-style: italic;
    color: var(--halo-dark-grey, #444);
}

.halo-post-layout__content .entry-content strong {
    font-weight: 700;
    color: var(--halo-black, #1a1a1a);
}


/* ─── Related Posts ──────────────────────────────────────────── */
.halo-related-posts {
    background: var(--halo-off-white, #f8f9fa);
}

.halo-related-posts__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.halo-related-posts__card {
    background: var(--halo-white, #fff);
    border-radius: var(--halo-radius-sm, 6px);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform var(--halo-transition);
    will-change: transform;
    display: flex;
    flex-direction: column;
}

.halo-related-posts__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    color: inherit;
}

.halo-related-posts__card-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--halo-light-grey, #eee);
}

.halo-related-posts__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--halo-transition);
}

.halo-related-posts__card:hover .halo-related-posts__card-image img {
    transform: scale(1.04);
}

.halo-related-posts__card-image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--halo-primary, #1a7a3a);
}

.halo-related-posts__card-image--placeholder span {
    font-size: 48px;
    font-weight: 700;
    color: rgba(255,255,255,0.3);
}

.halo-related-posts__card-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.halo-related-posts__card-cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--halo-primary);
    margin-bottom: 8px;
}

.halo-related-posts__card-body h3 {
    font-family: var(--halo-heading-font, inherit);
    font-weight: var(--halo-heading-weight, 700);
    font-size: var(--halo-h3-size, 24px);
    line-height: var(--halo-heading-line-height, 1.2);
    margin: 0 0 auto;
    color: var(--halo-dark-grey, #333);
}

.halo-related-posts__card-date {
    font-size: var(--halo-base-font-size, 16px);
    color: var(--halo-mid-grey, #999);
    margin-top: 12px;
}

.halo-section--related-posts.halo-section--dark .halo-related-posts__card,
.halo-section--related-posts.halo-section--primary .halo-related-posts__card,
.halo-section--related-posts.halo-section--primary-dark .halo-related-posts__card,
.halo-section--related-posts.halo-section--secondary .halo-related-posts__card,
.halo-section--related-posts.halo-section--accent .halo-related-posts__card {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: none;
}

.halo-section--related-posts.halo-section--dark .halo-related-posts__card:hover,
.halo-section--related-posts.halo-section--primary .halo-related-posts__card:hover,
.halo-section--related-posts.halo-section--primary-dark .halo-related-posts__card:hover,
.halo-section--related-posts.halo-section--secondary .halo-related-posts__card:hover,
.halo-section--related-posts.halo-section--accent .halo-related-posts__card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.halo-section--related-posts.halo-section--dark .halo-related-posts__card-body h3,
.halo-section--related-posts.halo-section--primary .halo-related-posts__card-body h3,
.halo-section--related-posts.halo-section--primary-dark .halo-related-posts__card-body h3,
.halo-section--related-posts.halo-section--secondary .halo-related-posts__card-body h3,
.halo-section--related-posts.halo-section--accent .halo-related-posts__card-body h3 {
    color: var(--halo-white, #fff);
}

.halo-section--related-posts.halo-section--dark .halo-related-posts__card-date,
.halo-section--related-posts.halo-section--primary .halo-related-posts__card-date,
.halo-section--related-posts.halo-section--primary-dark .halo-related-posts__card-date,
.halo-section--related-posts.halo-section--secondary .halo-related-posts__card-date,
.halo-section--related-posts.halo-section--accent .halo-related-posts__card-date {
    color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 991px) {
    .halo-related-posts__grid,
    .halo-related-grid {
        /* Tablet drops to 2 columns automatically (matches the services feed). */
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Stacked card layout on mobile — image on top, body below. Previous
       row (image-on-side, 140px wide) layout made hero photos feel like
       thumbnails; full-width image reads as a proper feed item on phones. */
    .halo-related-posts__card,
    .halo-related-card {
        flex-direction: column;
    }

    .halo-related-posts__card-image,
    .halo-related-card__image {
        width: 100%;
        min-width: 0;
        /* No aspect-ratio here — let the image dictate its own height via
           its own aspect-ratio below. Otherwise the container forces 16:9
           but the base rule's `height: 200px` on the <img> (later in source
           → wins on cascade) mismatches, leaving grey container bg showing
           below the image. */
    }

    .halo-related-posts__card-image img,
    .halo-related-card__image img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        display: block;
        min-height: 0;
    }

    .halo-related-posts__card-body,
    .halo-related-card__body {
        padding: 20px;
    }
}

/* Unified mobile-feed layout — force every content / blog feed to a
   single column from ≤991px down. Consolidates post-grid, related-grid,
   related-posts-grid, and case-study related into the same breakpoint
   as the rest of the "mobile view" (hamburger kicks in at ≤1200px) so
   the experience is consistent on phones + tablet-portrait.
   !important beats .halo-post-grid's 769-1024 2-col and .halo-case-study__related's
   ≤768 2-col rules elsewhere in the file. */
@media (max-width: 991px) {
    .halo-post-grid,
    .halo-related-posts__grid,
    .halo-case-study__related,
    .halo-case-study__overview {
        grid-template-columns: 1fr !important;
    }
}

/* Post Feed (.halo-related-grid) manages its own responsive columns via the
   section's Desktop/Mobile column fields — so it is deliberately NOT in the
   blanket 1-column rule above. Phones: see the rule after .halo-related-grid
   below. */

/* ─── Related Posts: shortcode class aliases ──────────────────────
   The [related_posts] shortcode + author.php template use
   halo-related-grid / halo-related-card naming. These alias the
   section-template styles above so both conventions render the same. */

.halo-related-grid {
    display: grid;
    /* Desktop column count from the Post Feed field (1-4) via the inline
       --halo-cols custom property; falls back to 3. */
    grid-template-columns: repeat(var(--halo-cols, 3), 1fr);
    gap: 28px;
}

/* Phones use the Mobile columns field (--halo-cols-mobile, 1 or 2; default 1).
   This MUST sit after the base rule above: same specificity, so the later one
   wins. Until 2.150.6 it sat above it and lost, and phones only ever showed one
   column (from an old !important rule in the critical block). The <=991px
   2-column rule higher up still loses to the base rule, so tablets show the
   desktop count. The critical block mirrors this order: change both. */
@media (max-width: 768px) {
    .halo-related-grid {
        grid-template-columns: repeat(var(--halo-cols-mobile, 1), 1fr);
    }
}

/* Match the visual treatment of .halo-service-card so every post-feed
   card on the site uses the same brand settings — radius, shadow, hover,
   image height, body padding. Source of truth is brand CSS variables:
   --halo-radius, --halo-shadow, --halo-shadow-hover, --halo-gap. */
.halo-related-card {
    background: var(--halo-white, #fff);
    border-radius: var(--halo-radius-sm, 6px);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--halo-shadow);
    transition: transform var(--halo-transition);
    will-change: transform;
    display: flex;
    flex-direction: column;
}

.halo-related-card:hover {
    box-shadow: var(--halo-shadow-hover);
    transform: translateY(-2px);
}

.halo-related-card__image {
    display: block;
    overflow: hidden;
    background: var(--halo-light-grey, #eee);
}

.halo-related-card__image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* Optional greyscale filter on Post Feed / Case Study card images. Emitted only
   when the operator sets a base or hover amount (--img-gray class + the two
   vars); filter:grayscale is GPU-accelerated, so this has no page-speed cost.
   The hover value applies while the whole card is hovered, so the colour reveal
   fires from anywhere on the card, not just the image. */
.halo-related-grid--img-gray .halo-related-card__image img {
    filter: grayscale(var(--halo-related-img-gray, 0));
    transition: filter var(--halo-transition, 0.3s ease);
}
.halo-related-grid--img-gray .halo-related-card:hover .halo-related-card__image img {
    filter: grayscale(var(--halo-related-img-gray-hover, 0));
}

.halo-related-card__body {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.halo-related-card__title {
    font-family: var(--halo-heading-font, inherit);
    font-weight: var(--halo-heading-weight, 700);
    font-size: var(--halo-h3-size, 24px);
    line-height: var(--halo-heading-line-height, 1.2);
    /* Bottom spacing follows the brand "Heading Spacing Below" setting so
       the card title→excerpt gap stays in sync with body heading rhythm. */
    margin: 0 0 var(--halo-heading-spacing-below, 14px);
    color: var(--halo-dark-grey, #333);
}

.halo-related-card__title a {
    color: inherit;
    text-decoration: none;
}

.halo-related-card__excerpt {
    color: var(--halo-mid-grey, #6c757d);
    font-size: var(--halo-base-font-size, 16px);
    line-height: var(--halo-body-line-height, 1.6);
    margin: 0;
    flex: 1;
}

.halo-related-card__date {
    font-size: var(--halo-base-font-size, 16px);
    color: var(--halo-mid-grey, #999);
    margin-top: var(--halo-heading-spacing-below, 14px);
    margin-bottom: 0;
}

/* Post Feed "Show author" (2.156.0): photo + name, with the date beside them
   as a span when Show date is also on. Copied into the critical block. */
.halo-related-card__author {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: var(--halo-heading-spacing-below, 14px) 0 0;
    font-size: var(--halo-small-font-size, 14px);
    line-height: 1.3;
}
.halo-related-card__author-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}
.halo-related-card__author-name {
    font-weight: 600;
}
.halo-related-card__author .halo-related-card__date {
    margin: 0;
    font-size: inherit;
}
.halo-related-card__author .halo-related-card__date::before {
    content: "\00B7";
    margin-right: 10px;
}

/* Post Feed "Full image" display (2.159.0): the photo fills the card, a
   bottom-up overlay (--halo-cs-fi-overlay, built from the section's Overlay
   colour + strength) sits on it, and the text goes on top in white. Card
   height = Image height (--halo-cs-fi-h, default 360px). The image link covers
   the card, so the whole card is clickable; the body ignores pointer events
   except its own links. Layout rules are copied into the critical block. */
.halo-related-grid--full_image .halo-related-card {
    position: relative;
    justify-content: flex-end;
    min-height: var(--halo-cs-fi-h, 360px);
    border: 0;
    box-shadow: none;
    background: var(--halo-secondary, #1a1a2e);
}
.halo-related-grid--full_image .halo-related-card__image {
    position: absolute;
    inset: 0;
    background: transparent;
}
.halo-related-grid--full_image .halo-related-card__image img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.halo-related-grid--full_image .halo-related-card:hover .halo-related-card__image img {
    transform: scale(1.04);
}
.halo-related-grid--full_image .halo-related-card__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--halo-cs-fi-overlay, linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.34) 45%, transparent 85%));
}
.halo-related-grid--full_image .halo-related-card__body {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    padding: 28px;
    background: transparent;
    pointer-events: none;
}
.halo-related-grid--full_image .halo-related-card__body a {
    pointer-events: auto;
}
.halo-related-grid--full_image .halo-related-card__title {
    margin-bottom: 0;
}
.halo-related-grid--full_image .halo-related-card__title + * {
    margin-top: 10px;
}
.halo-related-grid--full_image .halo-related-card__body,
.halo-related-grid--full_image .halo-related-card__title,
.halo-related-grid--full_image .halo-related-card__title a,
.halo-related-grid--full_image .halo-related-card__excerpt,
.halo-related-grid--full_image .halo-related-card__date,
.halo-related-grid--full_image .halo-related-card__author-name,
.halo-related-grid--full_image .halo-related-card__client,
.halo-related-grid--full_image .halo-related-card__testimonial {
    color: #fff !important;
}
.halo-related-grid--full_image .halo-related-card__excerpt,
.halo-related-grid--full_image .halo-related-card__date {
    opacity: 0.85;
}

/* ── Post Feed: shared header column ────────────────────────────────
   The eyebrow / heading / intro sit in ONE contained column so the heading
   can't stretch wider than the body text below it (they used to disagree:
   the heading was uncapped while the intro capped at 700px). --halo-feed-header-max
   defaults to that same 700px reading measure; the section's "Make text full
   width" option sets it to none, and "Text max width" sets it to a px value.
   Alignment moves the whole column via auto margins so left / centre / right
   keep the heading and intro perfectly in line. */
.halo-feed-header {
    max-width: var(--halo-feed-header-max, 700px);
}
.halo-feed-header--left   { margin-right: auto; }
.halo-feed-header--center { margin-left: auto; margin-right: auto; }
.halo-feed-header--right  { margin-left: auto; }
/* Inside the shared column both children fill it, so the single max-width above
   governs the heading and the intro together (the intro drops its own 700px cap
   and auto margins — the column now owns width + position). */
.halo-feed-header .halo-section__intro {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* ── Post Feed: header intro alignment (mirrors the services feed) ──
   The heading + eyebrow use the shared .halo-feed-heading--{align} classes;
   the intro keeps its text-align classes so centre/right read correctly inside
   the shared column above. */
.halo-related-posts__intro--center {
    text-align: center;
}
.halo-related-posts__intro--right {
    text-align: right;
}
.halo-section--related-posts.halo-section--dark .halo-section__intro,
.halo-section--related-posts.halo-section--primary .halo-section__intro,
.halo-section--related-posts.halo-section--primary-dark .halo-section__intro,
.halo-section--related-posts.halo-section--secondary .halo-section__intro,
.halo-section--related-posts.halo-section--accent .halo-section__intro {
    color: rgba(255, 255, 255, 0.78);
}

/* ── Post Feed: display styles ─────────────────────────────────────
   Card = the shadowed box (base .halo-related-card, no modifier needed).
   Border = outlined box, no shadow. Flat = no box/border/shadow. */
.halo-related-card--border {
    box-shadow: none;
    border: 1px solid var(--halo-border-color, rgba(0, 0, 0, 0.12));
}
.halo-related-card--border:hover {
    box-shadow: none;
    border-color: var(--halo-primary);
}
.halo-related-card--flat {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.halo-related-card--flat:hover {
    box-shadow: none;
    transform: none;
}
.halo-related-card--flat .halo-related-card__body {
    padding: 18px 0 0;
}
.halo-related-card--flat .halo-related-card__image {
    border-radius: var(--halo-img-radius, 6px);
}

/* ── Case Study feed: custom card image height (Image height field) ──
   Real <img> cropped to fill the card width — stays crawlable, not a CSS
   background. Applies in both grid and carousel (class sits on the wrapper). */
.halo-related-grid--img-h .halo-related-card__image img {
    height: var(--halo-cs-img-h, 200px);
}

/* ── Case Study feed: carousel display ──────────────────────────────
   Reuses the Image Gallery carousel shell + JS. Each card is wrapped in a
   .halo-gallery-carousel__item; that wrapper (not the card) takes the flex
   sizing, so we let it show overflow — otherwise the card's shadow/hover lift
   would be clipped by the gallery item's overflow:hidden (meant for photos). */
.halo-related-carousel .halo-gallery-carousel__item {
    overflow: visible;
    border-radius: 0;
    display: flex;
}
.halo-related-carousel .halo-gallery-carousel__item > .halo-related-card {
    width: 100%;
}

/* ── Case Study feed: testimonial block on the card ─────────────────
   Rating stars, the quote, and the client name, surfaced from each case
   study's own cs_* fields. Colours fall back to the card-bg text vars when a
   card background is set (see the card-bg block), and to white on dark
   sections (see the dark-section block below). */
.halo-related-card__rating {
    color: var(--halo-accent, #f5a623);
    letter-spacing: 2px;
    font-size: 1.05em;
    line-height: 1;
    margin: 0 0 var(--halo-heading-spacing-below, 14px);
}
.halo-related-card__testimonial {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    font-style: italic;
    color: var(--halo-cs-card-muted, var(--halo-mid-grey, #555));
    font-size: var(--halo-base-font-size, 16px);
    line-height: var(--halo-body-line-height, 1.6);
}
.halo-related-card__client {
    margin: 0 0 var(--halo-heading-spacing-below, 14px);
    font-weight: 600;
    color: var(--halo-cs-card-text, var(--halo-dark-grey, #333));
}
.halo-related-card__cta {
    margin: 16px 0 0;
}

/* Flat button — plain text link, no box (Solid = --primary, Border = --outline). */
.halo-btn--flat {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
    color: var(--halo-primary);
}
.halo-btn--flat:hover,
.halo-btn--flat:focus-visible {
    background: transparent;
    color: var(--halo-primary-dark, var(--halo-primary));
    text-decoration: underline;
}

.halo-section--related-posts.halo-section--dark .halo-related-card,
.halo-section--related-posts.halo-section--primary .halo-related-card,
.halo-section--related-posts.halo-section--primary-dark .halo-related-card,
.halo-section--related-posts.halo-section--secondary .halo-related-card,
.halo-section--related-posts.halo-section--accent .halo-related-card {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: none;
}

/* Dark-background flat/border overrides — placed AFTER the base dark card
   rule above so they win at equal (3-class) specificity. */
.halo-section--related-posts.halo-section--dark .halo-related-card--border,
.halo-section--related-posts.halo-section--primary .halo-related-card--border,
.halo-section--related-posts.halo-section--primary-dark .halo-related-card--border,
.halo-section--related-posts.halo-section--secondary .halo-related-card--border,
.halo-section--related-posts.halo-section--accent .halo-related-card--border {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: none;
}
.halo-section--related-posts.halo-section--dark .halo-related-card--flat,
.halo-section--related-posts.halo-section--primary .halo-related-card--flat,
.halo-section--related-posts.halo-section--primary-dark .halo-related-card--flat,
.halo-section--related-posts.halo-section--secondary .halo-related-card--flat,
.halo-section--related-posts.halo-section--accent .halo-related-card--flat {
    background: transparent;
    border: none;
    box-shadow: none;
}

.halo-section--related-posts.halo-section--dark .halo-related-card:hover,
.halo-section--related-posts.halo-section--primary .halo-related-card:hover,
.halo-section--related-posts.halo-section--primary-dark .halo-related-card:hover,
.halo-section--related-posts.halo-section--secondary .halo-related-card:hover,
.halo-section--related-posts.halo-section--accent .halo-related-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.halo-section--related-posts.halo-section--dark .halo-related-card__title,
.halo-section--related-posts.halo-section--primary .halo-related-card__title,
.halo-section--related-posts.halo-section--primary-dark .halo-related-card__title,
.halo-section--related-posts.halo-section--secondary .halo-related-card__title,
.halo-section--related-posts.halo-section--accent .halo-related-card__title,
.halo-section--related-posts.halo-section--dark .halo-related-card__title a,
.halo-section--related-posts.halo-section--primary .halo-related-card__title a,
.halo-section--related-posts.halo-section--primary-dark .halo-related-card__title a,
.halo-section--related-posts.halo-section--secondary .halo-related-card__title a,
.halo-section--related-posts.halo-section--accent .halo-related-card__title a {
    color: var(--halo-white, #fff);
}

.halo-section--related-posts.halo-section--dark .halo-related-card__excerpt,
.halo-section--related-posts.halo-section--primary .halo-related-card__excerpt,
.halo-section--related-posts.halo-section--primary-dark .halo-related-card__excerpt,
.halo-section--related-posts.halo-section--secondary .halo-related-card__excerpt,
.halo-section--related-posts.halo-section--accent .halo-related-card__excerpt,
.halo-section--related-posts.halo-section--dark .halo-related-card__date,
.halo-section--related-posts.halo-section--primary .halo-related-card__date,
.halo-section--related-posts.halo-section--primary-dark .halo-related-card__date,
.halo-section--related-posts.halo-section--secondary .halo-related-card__date,
.halo-section--related-posts.halo-section--accent .halo-related-card__date {
    color: rgba(255, 255, 255, 0.72);
}

/* Case-study testimonial + client name on dark section backgrounds. */
.halo-section--related-posts.halo-section--dark .halo-related-card__testimonial,
.halo-section--related-posts.halo-section--primary .halo-related-card__testimonial,
.halo-section--related-posts.halo-section--primary-dark .halo-related-card__testimonial,
.halo-section--related-posts.halo-section--secondary .halo-related-card__testimonial,
.halo-section--related-posts.halo-section--accent .halo-related-card__testimonial {
    color: rgba(255, 255, 255, 0.82);
}
.halo-section--related-posts.halo-section--dark .halo-related-card__client,
.halo-section--related-posts.halo-section--primary .halo-related-card__client,
.halo-section--related-posts.halo-section--primary-dark .halo-related-card__client,
.halo-section--related-posts.halo-section--secondary .halo-related-card__client,
.halo-section--related-posts.halo-section--accent .halo-related-card__client {
    color: var(--halo-white, #fff);
}
/* Border + flat buttons stay legible on dark section backgrounds. */
.halo-section--related-posts.halo-section--dark .halo-related-card .halo-btn--outline,
.halo-section--related-posts.halo-section--primary .halo-related-card .halo-btn--outline,
.halo-section--related-posts.halo-section--primary-dark .halo-related-card .halo-btn--outline,
.halo-section--related-posts.halo-section--secondary .halo-related-card .halo-btn--outline,
.halo-section--related-posts.halo-section--accent .halo-related-card .halo-btn--outline,
.halo-section--related-posts.halo-section--dark .halo-related-card .halo-btn--flat,
.halo-section--related-posts.halo-section--primary .halo-related-card .halo-btn--flat,
.halo-section--related-posts.halo-section--primary-dark .halo-related-card .halo-btn--flat,
.halo-section--related-posts.halo-section--secondary .halo-related-card .halo-btn--flat,
.halo-section--related-posts.halo-section--accent .halo-related-card .halo-btn--flat {
    color: var(--halo-white, #fff);
    border-color: rgba(255, 255, 255, 0.6);
}

.halo-section--related-posts.halo-section--dark .halo-related-card .halo-btn--primary,
.halo-section--related-posts.halo-section--primary .halo-related-card .halo-btn--primary,
.halo-section--related-posts.halo-section--primary-dark .halo-related-card .halo-btn--primary,
.halo-section--related-posts.halo-section--secondary .halo-related-card .halo-btn--primary,
.halo-section--related-posts.halo-section--accent .halo-related-card .halo-btn--primary,
.halo-section--related-posts.halo-section--dark .halo-related-card__link,
.halo-section--related-posts.halo-section--primary .halo-related-card__link,
.halo-section--related-posts.halo-section--primary-dark .halo-related-card__link,
.halo-section--related-posts.halo-section--secondary .halo-related-card__link,
.halo-section--related-posts.halo-section--accent .halo-related-card__link {
    background: var(--halo-primary, #1a7f37) !important;
    border-color: var(--halo-primary, #1a7f37) !important;
    color: var(--halo-white, #fff) !important;
}

.halo-section--related-posts.halo-section--dark .halo-related-card .halo-btn--primary:hover,
.halo-section--related-posts.halo-section--primary .halo-related-card .halo-btn--primary:hover,
.halo-section--related-posts.halo-section--primary-dark .halo-related-card .halo-btn--primary:hover,
.halo-section--related-posts.halo-section--secondary .halo-related-card .halo-btn--primary:hover,
.halo-section--related-posts.halo-section--accent .halo-related-card .halo-btn--primary:hover,
.halo-section--related-posts.halo-section--dark .halo-related-card .halo-btn--primary:focus-visible,
.halo-section--related-posts.halo-section--primary .halo-related-card .halo-btn--primary:focus-visible,
.halo-section--related-posts.halo-section--primary-dark .halo-related-card .halo-btn--primary:focus-visible,
.halo-section--related-posts.halo-section--secondary .halo-related-card .halo-btn--primary:focus-visible,
.halo-section--related-posts.halo-section--accent .halo-related-card .halo-btn--primary:focus-visible,
.halo-section--related-posts.halo-section--dark .halo-related-card__link:hover,
.halo-section--related-posts.halo-section--primary .halo-related-card__link:hover,
.halo-section--related-posts.halo-section--primary-dark .halo-related-card__link:hover,
.halo-section--related-posts.halo-section--secondary .halo-related-card__link:hover,
.halo-section--related-posts.halo-section--accent .halo-related-card__link:hover,
.halo-section--related-posts.halo-section--dark .halo-related-card__link:focus-visible,
.halo-section--related-posts.halo-section--primary .halo-related-card__link:focus-visible,
.halo-section--related-posts.halo-section--primary-dark .halo-related-card__link:focus-visible,
.halo-section--related-posts.halo-section--secondary .halo-related-card__link:focus-visible,
.halo-section--related-posts.halo-section--accent .halo-related-card__link:focus-visible {
    background: var(--halo-primary-dark, var(--halo-primary, #1a7f37)) !important;
    border-color: var(--halo-primary-dark, var(--halo-primary, #1a7f37)) !important;
    color: var(--halo-white, #fff) !important;
}


/* ─── Resource Feed ──────────────────────────────────────────────
   Reuses the Post Feed grid + card shell (.halo-related-grid /
   .halo-related-card) so it inherits columns, display styles, shadow and
   dark-mode. These rules only add the resource-specific bits: the type
   badge + period meta row, the key-stats table, and the download button. */

.halo-resource-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px;
}

.halo-resource-card__badge {
    display: inline-block;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: var(--halo-radius-sm, 6px);
    background: var(--halo-primary, #1a7f37);
    color: var(--halo-white, #fff);
    line-height: 1.4;
}

.halo-resource-card__period {
    font-size: 0.8em;
    font-weight: 600;
    color: var(--halo-mid-grey, #6c757d);
}

/* Key stats — compact rows of value / label (+ optional movement). */
.halo-resource-card__stats {
    list-style: none;
    margin: 0 0 var(--halo-heading-spacing-below, 14px);
    padding: 14px 0 0;
    border-top: 1px solid var(--halo-light-grey, #e6e6e6);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.halo-resource-stat {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: baseline;
    column-gap: 8px;
}

.halo-resource-stat__value {
    grid-row: 1;
    grid-column: 1;
    font-family: var(--halo-heading-font, inherit);
    font-weight: var(--halo-heading-weight, 700);
    font-size: 1.35em;
    line-height: 1.1;
    color: var(--halo-dark-grey, #333);
}

.halo-resource-stat__label {
    grid-row: 2;
    grid-column: 1 / -1;
    font-size: 0.85em;
    color: var(--halo-mid-grey, #6c757d);
}

/* Delta sits right beside its value (not flung to the card edge). A plain
   count like "5 sales" reads as a muted caption; +/- changes stay green/red. */
.halo-resource-stat__delta {
    grid-row: 1;
    grid-column: 2;
    font-size: 0.85em;
    font-weight: 700;
    color: var(--halo-mid-grey, #6c757d);
}

.halo-resource-stat__delta--up   { color: var(--halo-success, #1a7f37); }
.halo-resource-stat__delta--down { color: var(--halo-danger, #c0392b); }

/* Download button — sits at the foot of the card, pushed down by the
   flex body so cards in a row keep their buttons aligned. */
/* Selector doubled with the card class so the white text out-specifies the
   generic `.site-content a { color: primary }` link rule — otherwise the label
   renders primary-on-primary and the button looks empty. */
.halo-resource-card .halo-resource-card__download {
    align-self: flex-start;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--halo-radius-sm, 6px);
    background: var(--halo-primary, #1a7f37);
    color: var(--halo-white, #fff);
    font-weight: 600;
    font-size: var(--halo-base-font-size, 16px);
    text-decoration: none;
    transition: background var(--halo-transition);
}

.halo-resource-card .halo-resource-card__download:hover,
.halo-resource-card .halo-resource-card__download:focus-visible {
    background: var(--halo-primary-dark, var(--halo-primary, #1a7f37));
    color: var(--halo-white, #fff);
}

.halo-resource-card__filetype {
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

/* When stats are shown the summary shouldn't also stretch — let the stats
   block carry the visual weight. */
.halo-resource-card .halo-related-card__excerpt {
    flex: 0 1 auto;
}

/* A single resource shouldn't cling to the left column of a multi-col grid.
   Span every track, then cap the width and center it. */
.halo-resource-grid > .halo-resource-card:only-child {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
}

/* Dark-mode: match the Post Feed dark treatment for the resource extras. */
.halo-section--resource-feed.halo-section--dark .halo-related-card__title,
.halo-section--resource-feed.halo-section--primary .halo-related-card__title,
.halo-section--resource-feed.halo-section--primary-dark .halo-related-card__title,
.halo-section--resource-feed.halo-section--secondary .halo-related-card__title,
.halo-section--resource-feed.halo-section--accent .halo-related-card__title,
.halo-section--resource-feed.halo-section--dark .halo-resource-stat__value,
.halo-section--resource-feed.halo-section--primary .halo-resource-stat__value,
.halo-section--resource-feed.halo-section--primary-dark .halo-resource-stat__value,
.halo-section--resource-feed.halo-section--secondary .halo-resource-stat__value,
.halo-section--resource-feed.halo-section--accent .halo-resource-stat__value {
    color: var(--halo-white, #fff);
}

.halo-section--resource-feed.halo-section--dark .halo-related-card__excerpt,
.halo-section--resource-feed.halo-section--primary .halo-related-card__excerpt,
.halo-section--resource-feed.halo-section--primary-dark .halo-related-card__excerpt,
.halo-section--resource-feed.halo-section--secondary .halo-related-card__excerpt,
.halo-section--resource-feed.halo-section--accent .halo-related-card__excerpt,
.halo-section--resource-feed.halo-section--dark .halo-resource-card__period,
.halo-section--resource-feed.halo-section--primary .halo-resource-card__period,
.halo-section--resource-feed.halo-section--primary-dark .halo-resource-card__period,
.halo-section--resource-feed.halo-section--secondary .halo-resource-card__period,
.halo-section--resource-feed.halo-section--accent .halo-resource-card__period,
.halo-section--resource-feed.halo-section--dark .halo-resource-stat__label,
.halo-section--resource-feed.halo-section--primary .halo-resource-stat__label,
.halo-section--resource-feed.halo-section--primary-dark .halo-resource-stat__label,
.halo-section--resource-feed.halo-section--secondary .halo-resource-stat__label,
.halo-section--resource-feed.halo-section--accent .halo-resource-stat__label,
.halo-section--resource-feed.halo-section--dark .halo-related-card__date,
.halo-section--resource-feed.halo-section--primary .halo-related-card__date,
.halo-section--resource-feed.halo-section--primary-dark .halo-related-card__date,
.halo-section--resource-feed.halo-section--secondary .halo-related-card__date,
.halo-section--resource-feed.halo-section--accent .halo-related-card__date {
    color: rgba(255, 255, 255, 0.75);
}

.halo-section--resource-feed.halo-section--dark .halo-resource-card__stats,
.halo-section--resource-feed.halo-section--primary .halo-resource-card__stats,
.halo-section--resource-feed.halo-section--primary-dark .halo-resource-card__stats,
.halo-section--resource-feed.halo-section--secondary .halo-resource-card__stats,
.halo-section--resource-feed.halo-section--accent .halo-resource-card__stats {
    border-top-color: rgba(255, 255, 255, 0.18);
}

/* Card surface on dark backgrounds — the resource feed borrows the Post Feed
   card shell but its section class is --resource-feed, so the Post Feed's
   dark card rules never matched here: the card stayed SOLID WHITE while the
   text rules above went white — white-on-white. Mirror the Post Feed's
   translucent treatment for all dark background variants. */
.halo-section--resource-feed.halo-section--dark .halo-related-card,
.halo-section--resource-feed.halo-section--primary .halo-related-card,
.halo-section--resource-feed.halo-section--primary-dark .halo-related-card,
.halo-section--resource-feed.halo-section--secondary .halo-related-card,
.halo-section--resource-feed.halo-section--accent .halo-related-card {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: none;
}
.halo-section--resource-feed.halo-section--dark .halo-related-card--border,
.halo-section--resource-feed.halo-section--primary .halo-related-card--border,
.halo-section--resource-feed.halo-section--primary-dark .halo-related-card--border,
.halo-section--resource-feed.halo-section--secondary .halo-related-card--border,
.halo-section--resource-feed.halo-section--accent .halo-related-card--border {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: none;
}
.halo-section--resource-feed.halo-section--dark .halo-related-card--flat,
.halo-section--resource-feed.halo-section--primary .halo-related-card--flat,
.halo-section--resource-feed.halo-section--primary-dark .halo-related-card--flat,
.halo-section--resource-feed.halo-section--secondary .halo-related-card--flat,
.halo-section--resource-feed.halo-section--accent .halo-related-card--flat {
    background: transparent;
    border: none;
    box-shadow: none;
}
.halo-section--resource-feed.halo-section--dark .halo-related-card:hover,
.halo-section--resource-feed.halo-section--primary .halo-related-card:hover,
.halo-section--resource-feed.halo-section--primary-dark .halo-related-card:hover,
.halo-section--resource-feed.halo-section--secondary .halo-related-card:hover,
.halo-section--resource-feed.halo-section--accent .halo-related-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
/* Feed intro readability on dark — matches the Post Feed / services intro. */
.halo-section--resource-feed.halo-section--dark .halo-section__intro,
.halo-section--resource-feed.halo-section--primary .halo-section__intro,
.halo-section--resource-feed.halo-section--primary-dark .halo-section__intro,
.halo-section--resource-feed.halo-section--secondary .halo-section__intro,
.halo-section--resource-feed.halo-section--accent .halo-section__intro {
    color: rgba(255, 255, 255, 0.78);
}

/* ── Feed cards: operator-set Card Background Colour + auto-contrast text ──
   The template (case-studies.php / resource-feed.php) puts
   .halo-related-grid--card-bg on the grid plus inline vars: --halo-cs-card-bg
   (the chosen colour — a brand var() or custom hex), and the YIQ-derived
   --halo-cs-card-text / --halo-cs-card-muted / --halo-cs-card-border (dark
   ink on a light card, white on a dark card — computed via halo_readable_on).
   (0,3,0) selectors placed AFTER the base card, display-style and
   dark-section-variant rules, so the chosen colour wins every one of them by
   source order. Flat never gets the class (no box), so it keeps section-driven
   text. The resource download button stays brand-primary — solid fill with a
   white label reads on any card colour. */
.halo-section .halo-related-grid--card-bg .halo-related-card {
    background: var(--halo-cs-card-bg);
    border: none;
    box-shadow: var(--halo-shadow);
}
.halo-section .halo-related-grid--card-bg .halo-related-card--border {
    background: var(--halo-cs-card-bg);
    border: 1px solid var(--halo-cs-card-border);
    box-shadow: none;
}
.halo-section .halo-related-grid--card-bg .halo-related-card__title,
.halo-section .halo-related-grid--card-bg .halo-related-card__title a,
.halo-section .halo-related-grid--card-bg .halo-related-card__client,
.halo-section .halo-related-grid--card-bg .halo-resource-stat__value {
    color: var(--halo-cs-card-text);
}
.halo-section .halo-related-grid--card-bg .halo-related-card__excerpt,
.halo-section .halo-related-grid--card-bg .halo-related-card__date,
.halo-section .halo-related-grid--card-bg .halo-related-card__testimonial,
.halo-section .halo-related-grid--card-bg .halo-resource-card__period,
.halo-section .halo-related-grid--card-bg .halo-resource-stat__label {
    color: var(--halo-cs-card-muted);
}
.halo-section .halo-related-grid--card-bg .halo-resource-card__stats {
    border-top-color: var(--halo-cs-card-border);
}


/* ─── Locations Grid ─────────────────────────────────────────────
   Responsive grid of location-CPT cards (5 cols → 3 tablet → 2 mobile).
   Primary use: surface every suburb a service page covers for internal
   linking + topical clustering SEO. Card styling inherits brand CSS
   vars so radius / shadow / colour / font all match the rest of the site. */

.halo-locations-grid__intro {
    max-width: 780px;
    /* Bottom gap matches the heading's rhythm so the intro doesn't sit on
       top of the grid (was var(--halo-heading-spacing-below), ~14px). */
    margin: 0 auto 2.5em;
    color: var(--halo-mid-grey, #6c757d);
    font-size: var(--halo-base-font-size, 16px);
    line-height: var(--halo-body-line-height, 1.6);
}

.halo-locations-grid {
    display: grid;
    gap: var(--halo-gap, 20px);
    /* Column count per breakpoint is set by the --cols-N modifier class */
}

.halo-locations-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.halo-locations-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.halo-locations-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.halo-locations-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }

.halo-locations-grid__card {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    background: var(--halo-white, #ffffff);
    color: var(--halo-primary);
    border-radius: var(--halo-radius);
    box-shadow: var(--halo-shadow);
    padding: 22px 16px;
    min-height: 72px;
    font-family: var(--halo-heading-font, inherit);
    font-weight: 700;
    font-size: var(--halo-h4-size, 20px);
    line-height: 1.25;
    transition: transform var(--halo-transition);
    will-change: transform;
}

.halo-locations-grid__card:hover,
.halo-locations-grid__card:focus-visible {
    box-shadow: var(--halo-shadow-hover);
    transform: translateY(-2px);
    color: var(--halo-primary-dark, var(--halo-primary));
}

.halo-locations-grid__card-title {
    display: block;
}

/* Dark-bg variant: keep cards white, still readable */
.halo-section--dark .halo-locations-grid__card,
.halo-section--primary .halo-locations-grid__card,
.halo-section--primary-dark .halo-locations-grid__card,
.halo-section--secondary .halo-locations-grid__card,
.halo-section--accent .halo-locations-grid__card {
    background: var(--halo-white, #ffffff);
    color: var(--halo-primary);
}

/* ── Image cards: location photo background + dark overlay + white name ── */
.halo-locations-grid__card--img {
    position: relative;
    overflow: hidden;
    background-image: var(--halo-loc-img);
    background-size: cover;
    background-position: center;
    color: var(--halo-white, #fff);
    min-height: 170px;
}
.halo-locations-grid__card--img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .3);
    transition: background var(--halo-transition, .3s ease);
}
.halo-locations-grid__card--img:hover,
.halo-locations-grid__card--img:focus-visible {
    color: var(--halo-white, #fff);
}
.halo-locations-grid__card--img:hover::before {
    background: rgba(0, 0, 0, .45);
}
.halo-locations-grid__card--img .halo-locations-grid__card-title {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
/* `.site-content a` (0,1,1) out-ranks the single-class card rules above, so the
   photo-card name rendered in the brand link colour on the dark overlay.
   Scope through the section class (0,2,0) so the name stays white in the grid
   and the carousel, including on hover/focus. */
.halo-section--locations-grid .halo-locations-grid__card--img,
.halo-section--locations-grid .halo-locations-grid__card--img:hover,
.halo-section--locations-grid .halo-locations-grid__card--img:focus-visible {
    color: var(--halo-white, #fff);
}
.halo-section--dark .halo-locations-grid__card--img,
.halo-section--primary .halo-locations-grid__card--img,
.halo-section--primary-dark .halo-locations-grid__card--img,
.halo-section--secondary .halo-locations-grid__card--img,
.halo-section--accent .halo-locations-grid__card--img {
    background-color: transparent;
    color: var(--halo-white, #fff);
}

/* ── Card style variants: Card (default, above) / Bordered / Flat ──
   Mirrors the benefits-cards card_style options. background-color (not the
   shorthand) so image cards keep their background-image photo. */
.halo-locations-grid__card--bordered {
    background-color: transparent;
    box-shadow: none;
    border: 1px solid var(--halo-light-grey, #e0e0e0);
}
.halo-locations-grid__card--bordered:hover,
.halo-locations-grid__card--bordered:focus-visible {
    box-shadow: none;
    border-color: var(--halo-primary);
}
.halo-locations-grid__card--flat {
    background-color: transparent;
    box-shadow: none;
}
.halo-locations-grid__card--flat:hover,
.halo-locations-grid__card--flat:focus-visible {
    box-shadow: none;
}

/* Dark-bg: bordered/flat drop the white panel, so the name must go white
   (these outrank the .halo-section--dark white-card rule above). */
.halo-section--dark .halo-locations-grid__card--bordered,
.halo-section--primary .halo-locations-grid__card--bordered,
.halo-section--primary-dark .halo-locations-grid__card--bordered,
.halo-section--secondary .halo-locations-grid__card--bordered,
.halo-section--accent .halo-locations-grid__card--bordered,
.halo-section--dark .halo-locations-grid__card--flat,
.halo-section--primary .halo-locations-grid__card--flat,
.halo-section--primary-dark .halo-locations-grid__card--flat,
.halo-section--secondary .halo-locations-grid__card--flat,
.halo-section--accent .halo-locations-grid__card--flat {
    background-color: transparent;
    color: var(--halo-white, #fff);
}
.halo-section--dark .halo-locations-grid__card--bordered,
.halo-section--primary .halo-locations-grid__card--bordered,
.halo-section--primary-dark .halo-locations-grid__card--bordered,
.halo-section--secondary .halo-locations-grid__card--bordered,
.halo-section--accent .halo-locations-grid__card--bordered {
    border-color: rgba(255, 255, 255, 0.25);
}
.halo-section--dark .halo-locations-grid__card--bordered:hover,
.halo-section--primary .halo-locations-grid__card--bordered:hover,
.halo-section--primary-dark .halo-locations-grid__card--bordered:hover,
.halo-section--secondary .halo-locations-grid__card--bordered:hover,
.halo-section--accent .halo-locations-grid__card--bordered:hover,
.halo-section--dark .halo-locations-grid__card--bordered:focus-visible,
.halo-section--primary .halo-locations-grid__card--bordered:focus-visible,
.halo-section--primary-dark .halo-locations-grid__card--bordered:focus-visible,
.halo-section--secondary .halo-locations-grid__card--bordered:focus-visible,
.halo-section--accent .halo-locations-grid__card--bordered:focus-visible,
.halo-section--dark .halo-locations-grid__card--flat:hover,
.halo-section--primary .halo-locations-grid__card--flat:hover,
.halo-section--primary-dark .halo-locations-grid__card--flat:hover,
.halo-section--secondary .halo-locations-grid__card--flat:hover,
.halo-section--accent .halo-locations-grid__card--flat:hover,
.halo-section--dark .halo-locations-grid__card--flat:focus-visible,
.halo-section--primary .halo-locations-grid__card--flat:focus-visible,
.halo-section--primary-dark .halo-locations-grid__card--flat:focus-visible,
.halo-section--secondary .halo-locations-grid__card--flat:focus-visible,
.halo-section--accent .halo-locations-grid__card--flat:focus-visible {
    color: var(--halo-white, #fff);
}
.halo-section--dark .halo-locations-grid__card--bordered:hover,
.halo-section--primary .halo-locations-grid__card--bordered:hover,
.halo-section--primary-dark .halo-locations-grid__card--bordered:hover,
.halo-section--secondary .halo-locations-grid__card--bordered:hover,
.halo-section--accent .halo-locations-grid__card--bordered:hover,
.halo-section--dark .halo-locations-grid__card--bordered:focus-visible,
.halo-section--primary .halo-locations-grid__card--bordered:focus-visible,
.halo-section--primary-dark .halo-locations-grid__card--bordered:focus-visible,
.halo-section--secondary .halo-locations-grid__card--bordered:focus-visible,
.halo-section--accent .halo-locations-grid__card--bordered:focus-visible {
    border-color: var(--halo-white, #fff);
}

/* ── Mosaic: every 6th location becomes a double-size feature tile ── */
.halo-locations-grid--mosaic {
    grid-auto-flow: dense;
    grid-auto-rows: 130px;
}
.halo-locations-grid--mosaic .halo-locations-grid__card {
    min-height: 0;
    height: 100%;
}
.halo-locations-grid--mosaic .halo-locations-grid__card:nth-child(6n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}
@media (max-width: 640px) {
    .halo-locations-grid--mosaic { grid-auto-rows: 110px; }
}

/* ── Locations carousel: scroll-snap track + round nav buttons ── */
.halo-lg-carousel { position: relative; }
.halo-lg-carousel__track {
    display: flex;
    gap: var(--halo-gap, 20px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.halo-lg-carousel__track::-webkit-scrollbar { display: none; }
.halo-lg-carousel__track .halo-locations-grid__card {
    flex: 0 0 220px;
    scroll-snap-align: start;
}
.halo-lg-carousel__track--img .halo-locations-grid__card { min-height: 170px; }
.halo-lg-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--halo-primary, #1a1a1a);
    color: var(--halo-white, #fff);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--halo-shadow, 0 2px 10px rgba(0,0,0,.15));
}
.halo-lg-carousel__nav--prev { left: -8px; }
.halo-lg-carousel__nav--next { right: -8px; }

/* Tablet: 5 cols → 3, 6 cols → 3, anything smaller left alone */
@media (max-width: 1024px) {
    .halo-locations-grid--cols-5,
    .halo-locations-grid--cols-6 {
        grid-template-columns: repeat(3, 1fr);
    }
    .halo-locations-grid--cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile: everything collapses to 2 */
@media (max-width: 640px) {
    .halo-locations-grid--cols-3,
    .halo-locations-grid--cols-4,
    .halo-locations-grid--cols-5,
    .halo-locations-grid--cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }
    .halo-locations-grid__card {
        padding: 16px 10px;
        min-height: 60px;
        font-size: var(--halo-base-font-size, 16px);
    }
}


/* ─── Related Services Band (blog → service) ────────────────── */
.halo-related-services-band__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.halo-related-services-band__card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--halo-white, #fff);
    border-radius: var(--halo-radius, 6px);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform var(--halo-transition);
    will-change: transform;
}

.halo-related-services-band__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    color: inherit;
}

.halo-related-services-band__card-image {
    width: 120px;
    min-width: 120px;
    min-height: 100px;
    overflow: hidden;
}

.halo-related-services-band__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.halo-related-services-band__card-body {
    padding: 16px 16px 16px 0;
}

.halo-related-services-band__card-body h3 {
    font-size: 16px;
    margin: 0;
    color: var(--halo-dark-grey, #333);
}


/* ─── Case Study: Project Overview Cards ────────────────────────── */
.halo-case-study__overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
}

.halo-case-study__overview-card {
    background: var(--halo-white, #fff);
    border: 1px solid var(--halo-light-grey, #f0f0f0);
    border-radius: var(--halo-radius-sm, 4px);
    padding: 25px;
    text-align: center;
}

.halo-case-study__overview-card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border-color: var(--halo-primary);
}

.halo-case-study__overview-card h3 {
    font-size: var(--halo-small-size, 14px);
    color: var(--halo-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.75em;
    font-weight: 600;
}

.halo-case-study__overview-card p {
    margin: 0;
    line-height: 1.6;
    color: var(--halo-dark-grey, #333);
}


/* ─── Case Study: Testimonial Block ─────────────────────────────── */
.halo-case-study__testimonial-block {
    background: var(--halo-off-white, #f8f9fa);
    border-left: 4px solid var(--halo-primary);
    border-radius: var(--halo-radius-sm, 4px);
    padding: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.halo-case-study__testimonial-quote {
    font-size: var(--halo-featured-size, 20px);
    font-style: italic;
    line-height: 1.7;
    margin: 0 0 1.5em;
    color: var(--halo-dark-grey, #333);
    border: none;
    padding: 0;
}

.halo-case-study__testimonial-positive {
    margin: 0;
    font-size: var(--halo-base-font-size, 16px);
    color: var(--halo-dark-grey, #333);
    line-height: 1.6;
}


/* ─── Case Study: Project Gallery (Lightbox Grid) ──────────────── */
.halo-case-study__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.halo-case-study__gallery-item {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--halo-radius-sm, 4px);
    background: var(--halo-light-grey, #f0f0f0);
    aspect-ratio: 4/3;
}

.halo-case-study__gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--halo-transition);
    cursor: pointer;
}

.halo-case-study__gallery-item img:hover {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .halo-case-study__gallery {
        grid-template-columns: 1fr;
    }
}


/* ─── Case Study: Related Posts ─────────────────────────────────── */
.halo-case-study__related {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.halo-case-study__related-card {
    background: var(--halo-white, #fff);
    border: 1px solid var(--halo-light-grey, #f0f0f0);
    border-radius: var(--halo-radius-sm, 4px);
    overflow: hidden;
}

.halo-case-study__related-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-color: var(--halo-primary);
}

.halo-case-study__related-card-image {
    display: block;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--halo-light-grey, #f0f0f0);
}

.halo-case-study__related-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--halo-transition);
}

.halo-case-study__related-card:hover .halo-case-study__related-card-image img {
    transform: scale(1.08);
}

.halo-case-study__related-card-content {
    padding: 20px;
}

.halo-case-study__related-card h3 {
    margin: 0 0 0.5em;
    font-size: var(--halo-base-font-size, 16px);
    line-height: 1.4;
}

.halo-case-study__related-card a {
    text-decoration: none;
    color: var(--halo-dark-grey, #333);
}

.halo-case-study__related-card:hover a {
    color: var(--halo-primary);
}

.halo-case-study__related-card-date {
    margin: 0;
    font-size: var(--halo-small-size, 14px);
    color: var(--halo-mid-grey, #6c757d);
}


/* ─── Lightbox (Gallery Modal) ──────────────────────────────────── */
.halo-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
}

.halo-lightbox.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.halo-lightbox__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

.halo-lightbox__content {
    position: relative;
    z-index: 2001;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.halo-lightbox__image {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--halo-radius-sm, 4px);
}

.halo-lightbox__close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: var(--halo-white, #fff);
    font-size: 3rem;
    line-height: 1;
    cursor: pointer;
    padding: 10px;
    z-index: 2002;
}

.halo-lightbox__close:hover,
.halo-lightbox__close:focus-visible {
    color: var(--halo-primary);
}

.halo-lightbox__counter {
    position: absolute;
    bottom: -40px;
    right: 0;
    color: var(--halo-white, #fff);
    font-size: var(--halo-small-size, 14px);
    font-weight: 500;
}

@media (max-width: 768px) {
    .halo-lightbox__close {
        top: 10px;
    }

    .halo-lightbox__counter {
        bottom: 10px;
        font-size: 0.85rem;
    }

    .halo-lightbox__image {
        max-height: 70vh;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   FLEXIBLE CONTENT – Additional Section Styles
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Section Modifiers ────────────────────────────────────────── */
.halo-section--dark {
    background-color: var(--halo-secondary, #1a1a2e);
    color: var(--halo-white, #ffffff);
}
.halo-section--dark h2,
.halo-section--dark h3,
.halo-section--dark p,
.halo-section--dark li {
    color: var(--halo-white, #ffffff);
}
.halo-section--dark .halo-btn--primary {
    background-color: var(--halo-primary);
    color: var(--halo-white, #fff);
}
.halo-section--primary {
    background-color: var(--halo-primary);
    color: var(--halo-white, #ffffff);
}
.halo-section--primary h2,
.halo-section--primary h3,
.halo-section--primary p {
    color: var(--halo-white, #ffffff);
}
.halo-section--primary .halo-btn--primary {
    background-color: var(--halo-white, #fff);
    color: var(--halo-primary) !important;
}
.halo-section--primary .halo-btn--primary:hover,
.halo-section--primary .halo-btn--primary:focus-visible {
    background-color: var(--halo-secondary, #1a1a2e);
    color: var(--halo-white, #fff) !important;
}


/* ─── Image + Text ─────────────────────────────────────────────── */
.halo-image-text__inner {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--halo-gap, 30px) * 2);
}

.halo-image-text--content-center .halo-image-text__inner {
    align-items: center;
}

.halo-image-text__media {
    flex: 0 0 calc(50% - var(--halo-gap, 30px));
    position: relative;
}

.halo-image-text--reversed .halo-image-text__media {
    order: 2;
}

/* ── Stacked layout (Media Position = Above / Below text) ──────────────
   One column instead of two: the media spans full width and sits above the
   text (position=top) or below it (position=bottom, via --stacked-media-last).
   Mobile already stacks every image_text, so these only change desktop. */
.halo-image-text--stacked .halo-image-text__inner {
    flex-direction: column;
    align-items: stretch;
}
.halo-image-text--stacked .halo-image-text__media {
    flex: none;
    width: 100%;
}
.halo-image-text--stacked-media-last .halo-image-text__media {
    order: 2;
}

.halo-image-text__content {
    flex: 1;
    min-width: 0;
}

/* ── Section vertical padding modifiers (Regular / Tight / None) ───────
   Mirror the custom_html section: Tight halves the section padding, None
   removes it — for stacking image_text sections flush together. */
.halo-image-text.halo-section--padding-tight {
    padding-top: calc(var(--halo-section-padding, 80px) * 0.5);
    padding-bottom: calc(var(--halo-section-padding, 80px) * 0.5);
}
.halo-image-text.halo-section--padding-none {
    padding-top: 0;
    padding-bottom: 0;
}

/* ── Media Max Height ─────────────────────────────────────────────────
   Caps the standard image/gallery height; the image is cropped
   (object-fit:cover, centred) to the given height set inline as
   --halo-image-text-media-max-h, so a tall photo doesn't dominate. */
.halo-image-text__media--max-height img {
    max-height: var(--halo-image-text-media-max-h);
    object-fit: cover;
}
.halo-image-text__media--max-height .halo-gallery-slider,
.halo-image-text__media--max-height .halo-gallery-slider__slide {
    height: var(--halo-image-text-media-max-h);
    max-height: var(--halo-image-text-media-max-h);
}

/* ── Text block: horizontal alignment + optional max-width ─────────────
   Aligns the whole text column (preheading, heading, body, button) and can
   cap its width — mainly to centre a narrow text block in a stacked layout.
   The cap arrives inline as --halo-image-text-content-max-w. */
.halo-image-text__content {
    max-width: var(--halo-image-text-content-max-w, none);
}
.halo-image-text--text-center .halo-image-text__content {
    text-align: center;
}
.halo-image-text--text-right .halo-image-text__content {
    text-align: right;
}
/* When stacked, the text block fills to its max-width cap, then auto margins
   position it (centre / right) within the full-width column. width:100% makes
   the cap behave predictably regardless of the flex cross-axis stretch. */
.halo-image-text--stacked .halo-image-text__content {
    width: 100%;
}
.halo-image-text--stacked.halo-image-text--text-center .halo-image-text__content {
    margin-left: auto;
    margin-right: auto;
}
.halo-image-text--stacked.halo-image-text--text-right .halo-image-text__content {
    margin-left: auto;
}

/* ── Flush image to bottom ─────────────────────────────────────────────
   Zeroes ONLY the section's bottom padding so a stacked (below-text) image
   sits against the section's bottom edge. Doubled class beats the padding
   presets above at equal specificity via source order. */
.halo-image-text.halo-image-text--flush-bottom {
    padding-bottom: 0;
}

.halo-preheading {
    color: var(--halo-preheading-colour, inherit);
    display: block;
    font-family: var(--halo-preheading-font, var(--halo-body-font, inherit));
    font-size: var(--halo-preheading-font-size, var(--halo-nav-font-size, 16px)) !important;
    font-weight: var(--halo-preheading-font-weight, var(--halo-nav-font-weight, 500)) !important;
    letter-spacing: var(--halo-preheading-letter-spacing, var(--halo-nav-letter-spacing, 0));
    line-height: 1.35;
    margin: 0 0 0.75em;
    text-transform: var(--halo-preheading-transform, var(--halo-nav-transform, none));
}

.halo-image-text__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--halo-img-radius, 8px);
    object-fit: cover;
}

/* Gallery slider inside an image-text media column needs `height: 100%`
   so the image fills the square slide with object-fit:cover cropping.
   Without this the generic `.halo-image-text__media img` rule above wins
   (same specificity, later in source) and forces `height: auto`, which
   lets landscape/portrait images show gaps at top/bottom (or sides) of
   the square slide — the white-behind-image effect James flagged. */
.halo-image-text__media .halo-gallery-slider__slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;  /* parent slider already has radius + overflow:hidden */
}

.halo-image-text__media .halo-gallery-slider {
    border-radius: var(--halo-img-radius, 8px);
    overflow: hidden;
}

/* ── Image + Text gallery captions ──────────────────────────────────
   Opt-in per section (plugin: "Show gallery image captions"). Each image's
   media-library Caption (or Title) renders as a <figcaption>, either
   overlaid on the image (top/bottom) or in one line below the gallery that
   follows the active slide. Colour/alignment/background are operator knobs
   passed in as the --halo-gcap-* custom properties. */
.halo-image-text__gallery--figure,
.halo-image-text__gallery--single {
    margin: 0;
}
/* Per-slide overlay wrapper fills its absolutely-positioned slide so the
   caption anchors to the image edges. */
.halo-image-text__gallery-figure {
    position: absolute;
    inset: 0;
    margin: 0;
}
/* Single image (no slider) needs its own positioning context + clipping so
   an overlaid caption follows the rounded image corners. */
.halo-image-text__gallery--single.halo-image-text__gallery--cap-overlay {
    position: relative;
    border-radius: var(--halo-img-radius, 8px);
    overflow: hidden;
}

.halo-image-text__gallery-caption {
    margin: 0;
    font-size: 0.9em;
    line-height: 1.4;
    text-align: var(--halo-gcap-align, left);
}

/* [icon:slug] tokens inside a caption size to the text and inherit its colour
   (halo_get_icon renders currentColor + 24px attrs that this overrides). */
.halo-image-text__gallery-caption .halo-inline-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    margin-right: 0.35em;
    flex: none;
}

/* Overlay — sits over the image */
.halo-image-text__gallery-caption--overlay {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 6;
    padding: 14px 16px;
    color: var(--halo-gcap-color, #fff);
    background: var(--halo-gcap-bg, transparent);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.halo-image-text__gallery--cap-bottom .halo-image-text__gallery-caption--overlay {
    bottom: 0;
}
.halo-image-text__gallery--cap-top .halo-image-text__gallery-caption--overlay {
    top: 0;
}
/* When the caption sits in its own background bar, the bar already provides the
   contrast, so the drop shadow is redundant and reads as inconsistent with the
   design — drop it. Only the shadowless bar remains. */
.halo-image-text__gallery--cap-has-bg .halo-image-text__gallery-caption--overlay {
    text-shadow: none;
}
/* Keep the slider dots clear of a bottom overlay caption by moving them up top. */
.halo-image-text__gallery--cap-overlay.halo-image-text__gallery--cap-bottom .halo-gallery-slider__dots {
    top: 12px;
    bottom: auto;
}

/* Below — one line under the whole gallery */
.halo-image-text__gallery-caption--below {
    margin-top: 12px;
    color: var(--halo-gcap-color, inherit);
    background: var(--halo-gcap-bg, transparent);
}
.halo-image-text__gallery--cap-has-bg .halo-image-text__gallery-caption--below {
    padding: 10px 14px;
    border-radius: var(--halo-img-radius, 8px);
}

/* Wrapper that hosts below-the-gallery dots (and/or a below caption) so they can
   sit OUTSIDE the slider's aspect-locked, overflow-hidden box. */
.halo-image-text__gallery--wrap {
    margin: 0;
}
/* Navigation dots placed BELOW the gallery: normal flow, centred, and spaced
   under the image. Recoloured because the over-image dots are white (to read on
   a photo) and would vanish sitting on the section background. These rules come
   after the base .halo-gallery-slider__dots (equal specificity) so they win. */
.halo-gallery-slider__dots--below {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    justify-content: center;
    margin-top: 12px;
}
.halo-gallery-slider__dots--below .halo-gallery-slider__dot {
    border-color: var(--halo-primary, #1a7a3a);
}
.halo-gallery-slider__dots--below .halo-gallery-slider__dot.is-active {
    background: var(--halo-primary, #1a7a3a);
}
.halo-section--dark .halo-gallery-slider__dots--below .halo-gallery-slider__dot {
    border-color: rgba(255, 255, 255, 0.75);
}
.halo-section--dark .halo-gallery-slider__dots--below .halo-gallery-slider__dot.is-active {
    background: var(--halo-white, #fff);
}

/* Layered Image + Text media style — the background image fills one half of
   the section while the selected image crops square and bridges the centre. */
.halo-image-text--media-layered {
    overflow: visible;
}

.halo-image-text--media-layered .halo-image-text__inner {
    align-items: center;
}

.halo-image-text--media-layered:not(.halo-image-text--reversed) .halo-image-text__content {
    padding-left: clamp(42px, 5.5vw, 96px);
}

.halo-image-text--media-layered.halo-image-text--reversed .halo-image-text__content {
    padding-right: clamp(42px, 5.5vw, 96px);
}

.halo-image-text__media--layered {
    align-self: stretch;
    min-height: clamp(420px, 48vw, 640px);
    overflow: visible !important;
}

.halo-image-text__layered {
    position: relative;
    height: 100%;
    min-height: inherit;
    isolation: isolate;
}

.halo-image-text__layered-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    border-radius: var(--halo-img-radius, 8px);
}

.halo-image-text--reversed .halo-image-text__layered-bg {
    inset: 0;
}

.halo-image-text__layered-bg img,
.halo-image-text__layered-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}

/* SVG layered background = a repeating icon pattern (never a photo). Tile it at
   a FIXED size so the icons render at the same scale in every section, however
   tall the section is — a single cover-scaled copy would grow in tall sections
   and shrink in short ones. Softened via opacity so it reads as a subtle
   watermark behind the floating foreground card. Tile size + opacity are CSS
   vars so brand.php / a section can override them without touching this file. */
.halo-image-text__layered-bg--pattern {
    /* Repeat / display / position come from Site Settings → Section Defaults
       (--halo-layered-bg-repeat/-size/-position, emitted by image-text.php only
       when the operator sets them). Empty = the standard repeating fixed tile. */
    background-repeat: var(--halo-layered-bg-repeat, repeat);
    background-position: var(--halo-layered-bg-position, top left);
    background-size: var(--halo-layered-bg-size, var(--halo-layered-pattern-size, 300px) auto);
    /* Operator "Background Image Opacity" wins; else the soft pattern default. */
    opacity: var(--halo-layered-bg-opacity, var(--halo-layered-pattern-opacity, 0.22));
}

/* Operator "Background Image Opacity" for photo layered backgrounds (patterns
   are handled by the rule above). Default 1 = unchanged. */
.halo-image-text__layered-bg:not(.halo-image-text__layered-bg--pattern) {
    opacity: var(--halo-layered-bg-opacity, 1);
}

/* Optional tint laid over the layered background, beneath the floating card.
   Colour + opacity come inline from the section's Overlay Colour / Opacity. */
.halo-image-text__layered-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: var(--halo-img-radius, 8px);
}

.halo-image-text__layered-card {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 2;
    /* Operator "Foreground Image Width" drives the width, capped only at the media
       column width so it can never overflow. Default 320px = unchanged. Previously
       min(58%, …) meant the 58% column-relative cap (~330px) dominated, so any value
       above it did nothing — the image "wouldn't grow". */
    width: min(100%, var(--halo-layered-card-max, 320px));
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: calc(var(--halo-img-radius, 8px) * 1.5);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    transform: translate(calc(var(--halo-gap, 30px) * 2.2), -50%);
}

.halo-image-text--reversed .halo-image-text__layered-card {
    right: auto;
    left: 0;
    transform: translate(calc(var(--halo-gap, 30px) * -2.2), -50%);
}

/* Sticky media — keeps image/embed/form in view as long text scrolls past.
   Offset accounts for the WP admin bar, sticky top bar, and sticky main nav.
   The top/header variables are measured in sections.js and unset when those
   elements are not sticky, so non-sticky header setups still use a small
   viewport gap only. position: sticky only works when the parent is taller
   than the child, so this does nothing (and stays inert) on short sections.
   Note: position: sticky is broken by any ancestor with `overflow: hidden`
   (.halo-section has it by default), so the section-level override below is
   required. */
.halo-image-text__media--sticky {
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--halo-top-bar-h, 0px) + var(--halo-header-h, 0px) + 20px);
    align-self: flex-start;
    max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--halo-top-bar-h, 0px) - var(--halo-header-h, 0px) - 40px);
    overflow: auto;
}

/* Turn off overflow clipping on sections that hold a sticky media column.
   :has() is widely supported (Safari 15.4+, Chrome 105+, Firefox 121+);
   for older browsers the media simply scrolls with the text — no harm. */
.halo-section.halo-image-text:has(.halo-image-text__media--sticky) {
    overflow: visible;
}

/* Embed / shortcode wrappers. Responsive iframes use aspect-ratio when the
   embed specifies no dimensions; YouTube/Vimeo set their own width/height. */
.halo-image-text__embed {
    border-radius: var(--halo-img-radius, 8px);
    overflow: hidden;
    position: relative;
}
.halo-image-text__embed iframe,
.halo-image-text__embed video {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: var(--halo-img-radius, 8px);
}
/* Image-text shortcode forms now reuse .halo-testimonials__form-card 1:1
   (see templates/sections/image-text.php). Typography for WYSIWYG preamble
   h2/h3/h4/p direct children of the card — matches the form-heading /
   form-text classes the testimonials template applies explicitly. */
.halo-testimonials__form-card > h2,
.halo-testimonials__form-card > h3,
.halo-testimonials__form-card > h4 {
    color: var(--halo-dark-grey, #333);
    font-size: var(--halo-h3-size, 24px);
    font-weight: var(--halo-heading-weight, 700);
    line-height: var(--halo-heading-line-height, 1.2);
    margin: 0 0 0.5em;
    text-align: left;
}
.halo-testimonials__form-card > p {
    color: var(--halo-dark-grey, #333);
    font-size: var(--halo-base-font-size, 16px);
    line-height: 1.5;
    margin: 0 0 1.5em;
    text-align: left;
}
.halo-testimonials__form-card > p:last-of-type {
    margin-bottom: 1.25em;
}

/* ─── Nuke any yellow/cream/accent backgrounds inside the form card ───
   Gravity Forms' theme variants (`gform-theme--no-framework`, foundation,
   orbital, framework) each paint their own backgrounds on the wrapper,
   body, and individual field containers via CSS custom properties that
   cascade differently depending on which bundle loaded last. Plus the
   site's brand primary `#a9ce37` (yellow-green) and primary-light
   `#f5f5ec` (cream) can leak through if any rule reads
   `--gf-ctrl-bg-color` or similar off the brand palette.
   `body` prefix + !important on every level + attribute-selector
   fallback ensures white wins regardless of cascade order, minifier
   reordering, or which GF theme variant is active. */

/* Kill the brand-accent gradient overlay (brand.php applies it via
   .halo-image-text__media::after) when the media column holds a form,
   embed, or shortcode — the overlay is intended for tinting photos,
   but it was sitting ON TOP of the white form card and making it
   look yellow/cream. Added in template via halo-image-text__media--no-overlay.
   Also uses :has() as a belt-and-braces fallback for any markup the
   template hasn't been updated to stamp with the modifier class yet. */
.halo-image-text__media--no-overlay::after,
.halo-image-text__media:has(.halo-testimonials__form-card)::after,
.halo-image-text__media:has(.halo-image-text__embed)::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Also unclip the parent — brand.php sets overflow:hidden on
   .halo-image-text__media (so photos round correctly with a radius),
   but that clips the form-card's box-shadow, making it look flush
   instead of a floating card. Letting it overflow restores the shadow
   + radius visual treatment that matches the testimonials form card. */
.halo-image-text__media--no-overlay,
.halo-image-text__media:has(.halo-testimonials__form-card),
.halo-image-text__media:has(.halo-image-text__embed) {
    overflow: visible !important;
}

/* Also target the data-form-theme attribute directly — GF 2.8+ applies
   this at the wrapper level and its CSS reads from it. */
body .halo-testimonials__form-card [data-form-theme],
body .halo-testimonials__form-card [data-form-theme="gravity-theme"] {
    --gf-ctrl-bg-color: #ffffff !important;
    --gf-ctrl-bg-color-hover: #f8f9fa !important;
    --gf-ctrl-bg-color-focus: #ffffff !important;
    --gform-theme-control-background-color: #ffffff !important;
    --gf-color-ctrl-bg: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
}
body .halo-testimonials__form-card .gform_wrapper,
body .halo-testimonials__form-card .gform_wrapper.gform-theme--no-framework,
body .halo-testimonials__form-card .gform_wrapper.gform-theme--foundation,
body .halo-testimonials__form-card .gform_wrapper.gform-theme--framework,
body .halo-testimonials__form-card .gform_wrapper.gform-theme--orbital,
body .halo-testimonials__form-card .gform_wrapper.gravity-theme,
body .halo-testimonials__form-card .gform_body,
body .halo-testimonials__form-card .gform-body,
body .halo-testimonials__form-card .gform_fields,
body .halo-testimonials__form-card .gfield,
body .halo-testimonials__form-card .ginput_container,
body .halo-testimonials__form-card form {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    /* Override every GF custom property at this scope so any child element
       that consumes them inherits brand-white instead of theme defaults. */
    --gf-ctrl-bg-color: #ffffff;
    --gf-ctrl-bg-color-hover: #f8f9fa;
    --gf-ctrl-bg-color-focus: #ffffff;
    --gf-ctrl-border-color: #e5e5e5;
    --gf-ctrl-border-color-hover: var(--halo-primary);
    --gf-ctrl-border-color-focus: var(--halo-primary);
    --gf-ctrl-color: var(--halo-dark-grey, #222);
    --gf-ctrl-placeholder-color: var(--halo-mid-grey, #6c757d);
    --gf-color-ctrl-bg: #ffffff;
    --gform-theme-control-background-color: #ffffff;
    --gform-theme-control-border-color: #e5e5e5;
}

/* Input fields: white. Exclude submit/button/reset so the brand-primary
   submit keeps its fill. Duplicated without the .gform_wrapper intermediate
   so this wins over inline GF CSS and plugin-injected overrides. */
body .halo-testimonials__form-card input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]),
body .halo-testimonials__form-card textarea,
body .halo-testimonials__form-card select {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Chrome/Safari autofill paints an inset cream/yellow background via a
   pseudo-element that no normal `background` rule can override. The
   standard fix: stack a huge inset box-shadow of the colour you want
   on top of the autofill tint. */
body .halo-testimonials__form-card input:-webkit-autofill,
body .halo-testimonials__form-card input:-webkit-autofill:hover,
body .halo-testimonials__form-card input:-webkit-autofill:focus,
body .halo-testimonials__form-card input:-webkit-autofill:active,
body .halo-testimonials__form-card textarea:-webkit-autofill,
body .halo-testimonials__form-card textarea:-webkit-autofill:hover,
body .halo-testimonials__form-card textarea:-webkit-autofill:focus,
body .halo-testimonials__form-card select:-webkit-autofill,
body .halo-testimonials__form-card select:-webkit-autofill:hover,
body .halo-testimonials__form-card select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: var(--halo-dark-grey, #222) !important;
    caret-color: var(--halo-dark-grey, #222);
    transition: background-color 9999s ease-in-out 0s;
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Preserve the brand-primary submit button — after all the white override
   above, make damn sure the submit stays primary-coloured. */
body .halo-testimonials__form-card input[type="submit"],
body .halo-testimonials__form-card button[type="submit"],
body .halo-testimonials__form-card .gform_button {
    background: var(--halo-primary) !important;
    background-color: var(--halo-primary) !important;
    color: var(--halo-white, #fff) !important;
}
body .halo-testimonials__form-card input[type="submit"]:hover,
body .halo-testimonials__form-card button[type="submit"]:hover,
body .halo-testimonials__form-card .gform_button:hover {
    background: var(--halo-primary-dark) !important;
    background-color: var(--halo-primary-dark) !important;
}

/* Dark section form cards: Image + Text reuses .halo-testimonials__form-card,
   so these overrides cover both Image + Text forms and Testimonials forms. */
:is(
    .halo-image-text.halo-section--dark,
    .halo-image-text.halo-section--primary,
    .halo-image-text.halo-section--primary-dark,
    .halo-image-text.halo-section--secondary,
    .halo-image-text.halo-section--accent,
    .halo-testimonials--dark,
    .halo-testimonials--primary,
    .halo-testimonials--accent
) .halo-testimonials__form-card {
    /* Fallback + old default: a 10% white frost on dark sections. */
    background: rgba(255, 255, 255, 0.10) !important;
    /* Honour the image_text Card Opacity control when the operator sets it
       (var absent on testimonials / unset image_text → stays the 10% frost).
       Without this, the !important above locked dark-section cards at 10%
       and defeated the opacity field entirely. */
    background: color-mix(in srgb, var(--halo-fcard-bg, var(--halo-white, #fff)) var(--halo-image-text-form-card-opacity, 10%), transparent) !important;
    color: var(--halo-fcard-text, var(--halo-white, #fff));
}

:is(
    .halo-image-text.halo-section--dark,
    .halo-image-text.halo-section--primary,
    .halo-image-text.halo-section--primary-dark,
    .halo-image-text.halo-section--secondary,
    .halo-image-text.halo-section--accent,
    .halo-testimonials--dark,
    .halo-testimonials--primary,
    .halo-testimonials--accent
) .halo-testimonials__form-card :is(
    h2,
    h3,
    h4,
    p,
    .halo-testimonials__form-heading,
    .halo-testimonials__form-text,
    .gfield_description,
    .gfield_consent_label,
    .gform-field-label
) {
    color: var(--halo-fcard-text, var(--halo-white, #fff)) !important;
}

:is(
    .halo-image-text.halo-section--dark,
    .halo-image-text.halo-section--primary,
    .halo-image-text.halo-section--primary-dark,
    .halo-image-text.halo-section--secondary,
    .halo-image-text.halo-section--accent,
    .halo-testimonials--dark,
    .halo-testimonials--primary,
    .halo-testimonials--accent
) .halo-testimonials__form-card :is([data-form-theme], .gform_wrapper) {
    --gf-ctrl-bg-color: var(--halo-fcard-field-bg, rgba(255, 255, 255, 0.10)) !important;
    --gf-ctrl-bg-color-hover: var(--halo-fcard-field-bg-focus, rgba(255, 255, 255, 0.14)) !important;
    --gf-ctrl-bg-color-focus: var(--halo-fcard-field-bg-focus, rgba(255, 255, 255, 0.16)) !important;
    --gf-ctrl-border-color: var(--halo-fcard-field-border, rgba(255, 255, 255, 0.30)) !important;
    --gf-ctrl-border-color-hover: var(--halo-fcard-field-border, rgba(255, 255, 255, 0.55)) !important;
    --gf-ctrl-border-color-focus: var(--halo-fcard-text, var(--halo-white, #fff)) !important;
    --gf-ctrl-color: var(--halo-fcard-text, var(--halo-white, #fff)) !important;
    --gf-ctrl-placeholder-color: var(--halo-fcard-placeholder, rgba(255, 255, 255, 0.72)) !important;
    --gf-color-ctrl-bg: var(--halo-fcard-field-bg, rgba(255, 255, 255, 0.10)) !important;
    --gform-theme-control-background-color: var(--halo-fcard-field-bg, rgba(255, 255, 255, 0.10)) !important;
    --gform-theme-control-border-color: var(--halo-fcard-field-border, rgba(255, 255, 255, 0.30)) !important;
}

:is(
    .halo-image-text.halo-section--dark,
    .halo-image-text.halo-section--primary,
    .halo-image-text.halo-section--primary-dark,
    .halo-image-text.halo-section--secondary,
    .halo-image-text.halo-section--accent,
    .halo-testimonials--dark,
    .halo-testimonials--primary,
    .halo-testimonials--accent
) .halo-testimonials__form-card :is(
    input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
) {
    background: var(--halo-fcard-field-bg, rgba(255, 255, 255, 0.10)) !important;
    background-color: var(--halo-fcard-field-bg, rgba(255, 255, 255, 0.10)) !important;
    border-color: var(--halo-fcard-field-border, rgba(255, 255, 255, 0.30)) !important;
    color: var(--halo-fcard-text, var(--halo-white, #fff)) !important;
}

:is(
    .halo-image-text.halo-section--dark,
    .halo-image-text.halo-section--primary,
    .halo-image-text.halo-section--primary-dark,
    .halo-image-text.halo-section--secondary,
    .halo-image-text.halo-section--accent,
    .halo-testimonials--dark,
    .halo-testimonials--primary,
    .halo-testimonials--accent
) .halo-testimonials__form-card ::placeholder {
    color: var(--halo-fcard-placeholder, rgba(255, 255, 255, 0.72)) !important;
    opacity: 1 !important;
}

:is(
    .halo-image-text.halo-section--dark,
    .halo-image-text.halo-section--primary,
    .halo-image-text.halo-section--primary-dark,
    .halo-image-text.halo-section--secondary,
    .halo-image-text.halo-section--accent,
    .halo-testimonials--dark,
    .halo-testimonials--primary,
    .halo-testimonials--accent
) .halo-testimonials__form-card :is(input, textarea, select):focus {
    background: var(--halo-fcard-field-bg-focus, rgba(255, 255, 255, 0.16)) !important;
    background-color: var(--halo-fcard-field-bg-focus, rgba(255, 255, 255, 0.16)) !important;
    border-color: var(--halo-fcard-text, var(--halo-white, #fff)) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12) !important;
}

:is(
    .halo-image-text.halo-section--dark,
    .halo-image-text.halo-section--primary,
    .halo-image-text.halo-section--primary-dark,
    .halo-image-text.halo-section--secondary,
    .halo-image-text.halo-section--accent,
    .halo-testimonials--dark,
    .halo-testimonials--primary,
    .halo-testimonials--accent
) .halo-testimonials__form-card :is(input, textarea, select):-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.10) inset !important;
    box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.10) inset !important;
    -webkit-text-fill-color: var(--halo-white, #fff) !important;
    caret-color: var(--halo-white, #fff);
}

.halo-testimonials--form-no-card .halo-testimonials__form-card {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.halo-testimonials--form-no-card .halo-testimonials__form-heading,
.halo-testimonials--form-no-card .halo-testimonials__form-text {
    color: inherit !important;
}

/* No-card testimonial forms sit directly on the section background. Keep all
   wrappers transparent and let the fields flip contrast with the section. */
.halo-testimonials--form-no-card .halo-testimonials__form-card,
.halo-testimonials--form-no-card .halo-testimonials__form-card :is(
    [data-form-theme],
    .gform_wrapper,
    .gform_body,
    .gform-body,
    .gform_fields,
    .gfield,
    .ginput_container,
    .gform_footer,
    form
) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

body .halo-testimonials.halo-testimonials--form-no-card .halo-testimonials__form-card {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.halo-testimonials--form-no-card:is(.halo-testimonials--dark, .halo-testimonials--primary, .halo-testimonials--accent) .halo-testimonials__form-card :is([data-form-theme], .gform_wrapper) {
    --gf-ctrl-bg-color: transparent !important;
    --gf-ctrl-bg-color-hover: rgba(255, 255, 255, 0.08) !important;
    --gf-ctrl-bg-color-focus: rgba(255, 255, 255, 0.10) !important;
    --gf-ctrl-border-color: rgba(255, 255, 255, 0.58) !important;
    --gf-ctrl-border-color-hover: rgba(255, 255, 255, 0.78) !important;
    --gf-ctrl-border-color-focus: var(--halo-white, #fff) !important;
    --gf-ctrl-color: var(--halo-white, #fff) !important;
    --gf-ctrl-placeholder-color: rgba(255, 255, 255, 0.76) !important;
    --gf-color-ctrl-bg: transparent !important;
    --gform-theme-control-background-color: transparent !important;
    --gform-theme-control-border-color: rgba(255, 255, 255, 0.58) !important;
}

body .halo-testimonials--form-no-card:is(.halo-testimonials--dark, .halo-testimonials--primary, .halo-testimonials--accent) .halo-testimonials__form-card :is(
    input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
) {
    background: transparent !important;
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.58) !important;
    color: var(--halo-white, #fff) !important;
}

body .halo-testimonials--form-no-card:is(.halo-testimonials--dark, .halo-testimonials--primary, .halo-testimonials--accent) .halo-testimonials__form-card ::placeholder {
    color: rgba(255, 255, 255, 0.76) !important;
    opacity: 1 !important;
}

body .halo-testimonials--form-no-card:is(.halo-testimonials--dark, .halo-testimonials--primary, .halo-testimonials--accent) .halo-testimonials__form-card :is(input, textarea, select):focus {
    background: rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--halo-white, #fff) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14) !important;
}

.halo-testimonials--form-no-card:is(.halo-testimonials--light, .halo-testimonials--white) .halo-testimonials__form-card :is([data-form-theme], .gform_wrapper) {
    --gf-ctrl-bg-color: transparent !important;
    --gf-ctrl-bg-color-hover: rgba(0, 0, 0, 0.04) !important;
    --gf-ctrl-bg-color-focus: rgba(0, 0, 0, 0.05) !important;
    --gf-ctrl-border-color: rgba(0, 0, 0, 0.36) !important;
    --gf-ctrl-border-color-hover: rgba(0, 0, 0, 0.58) !important;
    --gf-ctrl-border-color-focus: var(--halo-primary) !important;
    --gf-ctrl-color: var(--halo-dark-grey, #222) !important;
    --gf-ctrl-placeholder-color: rgba(0, 0, 0, 0.58) !important;
    --gf-color-ctrl-bg: transparent !important;
    --gform-theme-control-background-color: transparent !important;
    --gform-theme-control-border-color: rgba(0, 0, 0, 0.36) !important;
}

body .halo-testimonials--form-no-card:is(.halo-testimonials--light, .halo-testimonials--white) .halo-testimonials__form-card :is(
    input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
) {
    background: transparent !important;
    background-color: transparent !important;
    border-color: rgba(0, 0, 0, 0.36) !important;
    color: var(--halo-dark-grey, #222) !important;
}

body .halo-testimonials--form-no-card:is(.halo-testimonials--light, .halo-testimonials--white) .halo-testimonials__form-card ::placeholder {
    color: rgba(0, 0, 0, 0.58) !important;
    opacity: 1 !important;
}

body .halo-testimonials--form-no-card:is(.halo-testimonials--light, .halo-testimonials--white) .halo-testimonials__form-card :is(input, textarea, select):focus {
    background: rgba(0, 0, 0, 0.04) !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
    border-color: var(--halo-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--halo-primary) !important;
}

.halo-image-text__form-card .halo-testimonials__form-heading,
.halo-image-text__form-card > h2,
.halo-image-text__form-card > h3,
.halo-image-text__form-card > h4 {
    font-size: var(--halo-image-text-form-heading-size, var(--halo-h3-size, 24px));
}

.halo-image-text__form-card .halo-testimonials__form-text,
.halo-image-text__form-card .halo-image-text__form-footer,
.halo-image-text__form-card > p {
    font-size: var(--halo-image-text-form-footer-size, var(--halo-base-font-size, 16px));
}

.halo-image-text__form-footer {
    margin: 1.25em 0 0;
    line-height: 1.5;
}

/* Form card background opacity (image-text card mode only). Independent of the
   section background overlay — lets a section background image show through the
   card itself. Default 100% = the solid brand-white card, identical to before.
   The --transparent variant forces full transparency and overrides this below.
   Browsers without color-mix() fall back to the opaque .halo-testimonials__form-card
   rule, so the card just stays solid — a safe degrade. */
.halo-image-text__form-card:not(.halo-image-text__form-card--transparent) {
    background: color-mix(in srgb, var(--halo-fcard-bg, var(--halo-white, #fff)) var(--halo-image-text-form-card-opacity, 100%), transparent);
}

/* Explicit Card Text Colour (image_text). On dark/primary/accent sections the
   var-driven block above already honours --halo-fcard-text; these modifier
   rules cover light/white sections (and any context with no !important text
   override), so "Dark text" / "Light text" work everywhere. Submit buttons are
   left alone so the brand CTA colour is never recoloured. */
.halo-image-text__form-card--text-dark,
.halo-image-text__form-card--text-dark :is(
    h1, h2, h3, h4, h5, h6, p, label,
    .halo-testimonials__form-heading, .halo-testimonials__form-text, .halo-image-text__form-footer,
    .gfield_label, .gfield_description, .gfield_consent_label, .gform-field-label
),
.halo-image-text__form-card--text-dark :is(
    input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
    textarea, select
) {
    color: var(--halo-fcard-text, #1a1a1a) !important;
}
.halo-image-text__form-card--text-dark ::placeholder {
    color: var(--halo-fcard-placeholder, rgba(0, 0, 0, 0.55)) !important;
    opacity: 1 !important;
}

.halo-image-text__form-card--text-light,
.halo-image-text__form-card--text-light :is(
    h1, h2, h3, h4, h5, h6, p, label,
    .halo-testimonials__form-heading, .halo-testimonials__form-text, .halo-image-text__form-footer,
    .gfield_label, .gfield_description, .gfield_consent_label, .gform-field-label
),
.halo-image-text__form-card--text-light :is(
    input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
    textarea, select
) {
    color: var(--halo-fcard-text, #ffffff) !important;
}
.halo-image-text__form-card--text-light ::placeholder {
    color: var(--halo-fcard-placeholder, rgba(255, 255, 255, 0.72)) !important;
    opacity: 1 !important;
}

.halo-image-text__form-card--transparent {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: 100%;
}

body .halo-image-text__form-card--transparent :is([data-form-theme], .gform_wrapper) {
    --gf-ctrl-bg-color: transparent !important;
    --gf-ctrl-bg-color-hover: transparent !important;
    --gf-ctrl-bg-color-focus: transparent !important;
    --gf-color-ctrl-bg: transparent !important;
    --gform-theme-control-background-color: transparent !important;
}

body .halo-image-text__form-card--transparent :is(
    .halo-testimonials__form,
    .gform_wrapper,
    .gform_body,
    .gform-body,
    .gform_fields,
    .gfield,
    .ginput_container,
    .gform_footer,
    form
) {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body .halo-image-text__form-card--transparent :is(
    input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

body .halo-image-text__form-card--transparent :is(input, textarea, select):focus {
    background: transparent !important;
    background-color: transparent !important;
}

body .halo-image-text__form-card--transparent :is(input, textarea, select):-webkit-autofill {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

body .halo-image-text:is(.halo-section--dark, .halo-section--primary, .halo-section--primary-dark, .halo-section--secondary, .halo-section--accent) .halo-image-text__form-card--transparent {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

body .halo-image-text:is(.halo-section--dark, .halo-section--primary, .halo-section--primary-dark, .halo-section--secondary, .halo-section--accent) .halo-image-text__form-card--transparent :is([data-form-theme], .gform_wrapper) {
    --gf-ctrl-bg-color: transparent !important;
    --gf-ctrl-bg-color-hover: transparent !important;
    --gf-ctrl-bg-color-focus: transparent !important;
    --gf-color-ctrl-bg: transparent !important;
    --gform-theme-control-background-color: transparent !important;
}

body .halo-image-text:is(.halo-section--dark, .halo-section--primary, .halo-section--primary-dark, .halo-section--secondary, .halo-section--accent) .halo-image-text__form-card--transparent :is(
    .halo-testimonials__form,
    .gform_wrapper,
    .gform_body,
    .gform-body,
    .gform_fields,
    .gfield,
    .ginput_container,
    .gform_footer,
    form
) {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body .halo-image-text:is(.halo-section--dark, .halo-section--primary, .halo-section--primary-dark, .halo-section--secondary, .halo-section--accent) .halo-image-text__form-card--transparent :is(
    input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

body .halo-image-text:is(.halo-section--dark, .halo-section--primary, .halo-section--primary-dark, .halo-section--secondary, .halo-section--accent) .halo-image-text__form-card--transparent :is(input, textarea, select):focus {
    background: transparent !important;
    background-color: transparent !important;
}

.halo-image-text__preheading-image {
    margin: 0 0 1rem;
    display: flex;
    justify-content: flex-start;
}

.halo-image-text__preheading-image--center {
    justify-content: center;
}

.halo-image-text__preheading-image--right {
    justify-content: flex-end;
}

.halo-image-text__preheading-image img {
    display: block;
    width: var(--halo-image-text-preheading-image-width, auto);
    max-width: 100%;
    object-fit: contain;
}

.halo-image-text__preheading {
    font-size: var(--halo-image-text-preheading-size, var(--halo-preheading-font-size, var(--halo-nav-font-size, 16px)));
}

.halo-image-text__heading,
.halo-image-text__content > h2:not(.halo-image-text__preheading) {
    font-family: var(--halo-heading-font, inherit);
    font-size: var(--halo-image-text-heading-size, var(--halo-h2-size, 36px));
    font-weight: var(--halo-heading-weight, 700);
    line-height: var(--halo-heading-line-height, 1.2);
    color: var(--halo-heading-colour, var(--halo-black, #1a1a1a));
    margin-top: 0;
    margin-bottom: 0.5em;
}

.halo-image-text:is(.halo-section--dark, .halo-section--primary, .halo-section--primary-dark, .halo-section--secondary, .halo-section--accent) .halo-image-text__heading,
.halo-image-text:is(.halo-section--dark, .halo-section--primary, .halo-section--primary-dark, .halo-section--secondary, .halo-section--accent) .halo-image-text__content > h2:not(.halo-image-text__preheading),
.halo-image-text:is(.halo-section--dark, .halo-section--primary, .halo-section--primary-dark, .halo-section--secondary, .halo-section--accent) .halo-image-text__preheading {
    color: var(--halo-white, #ffffff);
}

.halo-image-text:is(.halo-section--dark, .halo-section--primary, .halo-section--primary-dark, .halo-section--secondary) .halo-image-text__heading .halo-accent-text {
    color: var(--halo-accent-colour, var(--halo-accent)) !important;
}

.halo-image-text__content > *:first-child {
    margin-top: 0;
}

.halo-image-text__body {
    font-size: var(--halo-image-text-body-size, var(--halo-base-font-size, 16px));
    font-weight: var(--halo-image-text-body-weight, var(--halo-body-weight, 400));
    line-height: var(--halo-image-text-body-line-height, var(--halo-body-line-height, 1.7));
}

.halo-image-text__body :is(p, li, ul, ol) {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.halo-image-text__body p:last-child {
    margin-bottom: 0;
}

.halo-image-text__custom-code {
    width: 100%;
}

.halo-image-text--media-split-cover {
    position: relative;
    overflow: hidden;
}

.halo-image-text--media-split-cover > .halo-container {
    position: relative;
    z-index: 1;
}

.halo-image-text__split-cover-bg {
    position: absolute;
    inset: 0 50% 0 0;
    z-index: 0;
    pointer-events: none;
}

.halo-image-text--reversed .halo-image-text__split-cover-bg {
    inset: 0 0 0 50%;
}

.halo-image-text__split-cover-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Half background + layered ("split_layered") renders its background as a CSS
   background image (not an <img>) so the operator knobs — Background Repeat /
   Display / Position / Max Width, emitted inline by image-text.php as
   --halo-split-bg-* — can all apply. The defaults below reproduce the original
   full cover look, so a section with no knobs set is visually unchanged. A Max
   Width sets --halo-split-bg-size to "<n>px auto", capping the image width. */
.halo-image-text__split-cover-bg--css {
    background-repeat: var(--halo-split-bg-repeat, no-repeat);
    background-position: var(--halo-split-bg-position, center center);
    background-size: var(--halo-split-bg-size, cover);
}

/* Optional colour tint over the half-section background, behind the floating
   card. Colour + opacity are set inline from the section's Overlay Colour /
   Opacity fields. Sits above the background image (a child of the bg box) but
   below the container, so the floating card stays clear of it. */
.halo-image-text__split-cover-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Section-wide background image — independent of the media-column treatments
   above. Used for "text + form + bg image" layouts: text on one side, form
   on the other, image as the section backdrop. Triggered when image_text
   has a `section_background_image` set. */
.halo-image-text--has-section-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.halo-image-text__section-bg-overlay {
    position: absolute;
    inset: 0;
    background-color: #000;
    z-index: 0;
    pointer-events: none;
}

.halo-image-text--has-section-bg > .halo-container {
    position: relative;
    z-index: 1;
}

/* Benefits Cards — section-wide background image (same primitive as
   image_text above; the partial also stamps .halo-section--dark so the
   header text flips white). The overlay is a brand-secondary gradient
   (deep at the left, thinner at the right) rather than flat black, so
   photo backdrops read as branded dark sections. Overlay opacity comes
   from the section's section_background_overlay field (inline style). */
.halo-benefits-cards--has-section-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.halo-benefits-cards__section-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Overlay colour: per-section --halo-bc-overlay-colour (inline style from
       the section's Overlay Colour field) → brand secondary fallback. */
    background-color: var(--halo-bc-overlay-colour, var(--halo-secondary, #1a1a2e));
    background-image: linear-gradient(280deg, color-mix(in srgb, var(--halo-bc-overlay-colour, var(--halo-secondary, #1a1a2e)) 60%, transparent) 0%, var(--halo-bc-overlay-colour, var(--halo-secondary, #1a1a2e)) 100%);
}

.halo-benefits-cards--has-section-bg > .halo-container {
    position: relative;
    z-index: 1;
}

/* ─── Image & Text Grid (halo-itg) ─────────────────────────────────
   Mosaic of image tiles + coloured text tiles. Column counts and row
   height arrive as CSS vars stamped inline by the partial:
   --halo-itg-cols (3/4/5 desktop) · --halo-itg-cols-m (1/2 mobile) ·
   --halo-itg-row (row height px). Desktop spans via --span-N classes;
   mobile spans via --mspan-N (mspan-2 uses 1/-1 so it can never
   overflow a 1-column mobile grid with an implicit track). */
.halo-itg__header {
    margin-bottom: 34px;
}

.halo-itg__grid {
    display: grid;
    grid-template-columns: repeat(var(--halo-itg-cols, 4), 1fr);
    grid-auto-rows: var(--halo-itg-row, 340px);
    grid-auto-flow: row;
    gap: 14px;
}

.halo-itg__block {
    position: relative;
    overflow: hidden;
    border-radius: var(--halo-img-radius, 8px);
    background-size: cover;
    background-position: center;
    grid-column: span 1;
}

.halo-itg__block--span-2 {
    grid-column: span 2;
}

.halo-itg__block--span-full {
    grid-column: 1 / -1;
}

/* Mosaic style: seamless tiles bleeding to the viewport edges
   (replicates a full-bleed photo/word collage — the header above
   stays inside the container). */
.halo-itg--mosaic .halo-itg__grid {
    gap: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
}

.halo-itg--mosaic .halo-itg__block {
    border-radius: 0;
}

.halo-itg--mosaic .halo-itg__text {
    font-size: clamp(20px, 2vw, 33px);
    font-weight: 400;
}

.halo-itg__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Caption over an image tile + whole-tile link (2.149.6) */
.halo-itg__caption {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    color: #fff;
    font-family: var(--halo-heading-font, inherit);
    font-size: clamp(22px, 2.6vw, 36px);
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
    pointer-events: none;
}
.halo-itg__caption > :last-child { margin-bottom: 0; }
.halo-itg__caption p { margin: 0; }
/* The WYSIWYG wraps the caption in <p>: it takes the caption's size, not the body size. */
.halo-itg__caption :is(p, li) { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; font-family: inherit; }
.halo-itg__link {
    position: absolute;
    inset: 0;
    z-index: 2;
}
.halo-itg__link:focus-visible { outline: 3px solid var(--halo-accent, #fff); outline-offset: -3px; }

.halo-itg__block--text {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px;
}

.halo-itg__text {
    font-family: var(--halo-heading-font, inherit);
    font-weight: var(--halo-heading-weight, 700);
    font-size: clamp(18px, 1.6vw, 24px);
    line-height: 1.35;
}

@media (max-width: 768px) {
    .halo-itg__grid {
        grid-template-columns: repeat(var(--halo-itg-cols-m, 1), 1fr);
        grid-auto-rows: max(220px, calc(var(--halo-itg-row, 340px) * 0.7));
    }
    .halo-itg__block,
    .halo-itg__block--span-2,
    .halo-itg__block--span-full {
        grid-column: span 1;
    }
    .halo-itg__block--mspan-2 {
        grid-column: 1 / -1;
    }
}

/* Remove top/bottom spacing — collapse the section padding so the grid sits
   flush against its neighbours (no white gap). Doubled class out-specifies the
   .halo-section base padding. */
.halo-itg.halo-itg--flush {
    padding-top: 0;
    padding-bottom: 0;
}

/* Rich text tiles (WYSIWYG with headings / lists / multiple paragraphs) — relax
   the bold "statement" typography so body copy and lists read naturally. A bare
   phrase keeps the default heading-font statement look (no --rich class). A
   per-block Text Size override still wins via the inline style on the element. */
.halo-itg__text--rich {
    font-family: var(--halo-body-font, inherit);
    font-weight: 400;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: var(--halo-body-line-height, 1.6);
}
.halo-itg__text--rich h1,
.halo-itg__text--rich h2,
.halo-itg__text--rich h3,
.halo-itg__text--rich h4,
.halo-itg__text--rich h5,
.halo-itg__text--rich h6 {
    font-family: var(--halo-heading-font, inherit);
    color: inherit;
    margin: 0 0 0.4em;
}
.halo-itg__text--rich p { margin: 0 0 0.6em; }
.halo-itg__text--rich ul,
.halo-itg__text--rich ol {
    display: inline-block;
    text-align: left;
    margin: 0.2em 0;
    padding-left: 1.2em;
}
.halo-itg__text--rich > *:first-child { margin-top: 0; }
.halo-itg__text--rich > *:last-child  { margin-bottom: 0; }

/* Explicit per-tile font choice (Text Font field: Heading / Alternate heading /
   Body). Overrides the auto statement/body typography — !important + descendant
   selector beat both the base .halo-itg__text and the auto --rich rules,
   including rich heading descendants, so the whole tile reads in one font. */
.halo-itg__text--font-heading,
.halo-itg__text--font-heading :is(h1,h2,h3,h4,h5,h6,p,li,blockquote) {
    font-family: var(--halo-heading-font, inherit) !important;
}
.halo-itg__text--font-alt,
.halo-itg__text--font-alt :is(h1,h2,h3,h4,h5,h6,p,li,blockquote) {
    font-family: var(--halo-alt-heading-font, var(--halo-heading-font, inherit)) !important;
    font-weight: var(--halo-alt-heading-weight, var(--halo-heading-weight, 700)) !important;
    letter-spacing: var(--halo-alt-heading-letter-spacing, 0) !important;
}
.halo-itg__text--font-body,
.halo-itg__text--font-body :is(h1,h2,h3,h4,h5,h6,p,li,blockquote) {
    font-family: var(--halo-body-font, inherit) !important;
}

.halo-image-text--media-split-cover .halo-image-text__inner {
    min-height: clamp(560px, 72vh, 820px);
}

.halo-image-text--media-split-cover:not(.halo-image-text--reversed) .halo-image-text__content {
    padding-left: clamp(48px, 6vw, 110px);
}

.halo-image-text--media-split-cover.halo-image-text--reversed .halo-image-text__content {
    padding-right: clamp(48px, 6vw, 110px);
}

.halo-image-text--media-split-cover .halo-image-text__media {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: visible;
}

.halo-image-text__split-card {
    width: min(78%, 460px);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: calc(var(--halo-img-radius, 8px) * 2);
    box-shadow: var(--halo-shadow-hover, 0 8px 30px rgba(0,0,0,0.16));
    transform: translateX(22%);
    background: var(--halo-white, #ffffff);
}

.halo-image-text--media-split-layered .halo-image-text__split-card {
    /* Operator "Foreground Image Width" drives the width, capped only at the
       media-column width so it can never overflow. Default 380px = unchanged.
       Capping at min(100%, …) rather than min(62%, …) means a set value can
       actually grow the image (the old 62% column cap dominated and swallowed
       larger values — the same trap the plain layered card hit). */
    width: min(100%, var(--halo-split-card-max, 380px));
    aspect-ratio: 1;
    transform: translateX(28%);
}

.halo-image-text--media-split-cover.halo-image-text--reversed .halo-image-text__media {
    justify-content: flex-start;
}

.halo-image-text--reversed .halo-image-text__split-card {
    transform: translateX(-22%);
}

.halo-image-text--media-split-layered.halo-image-text--reversed .halo-image-text__split-card {
    transform: translateX(-28%);
}

.halo-image-text__split-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.halo-image-text__split-card--mobile-bg {
    display: none;
}

/* ── Half-overlay foreground controls (split_cover + split_layered) ──────────
   Operator knobs (image_text fields: layered_fg_max_width, fg_aspect,
   fg_position). Desktop-only: below 1001px both half styles stack to a single
   column (blocks below), where a bleed or a custom ratio is meaningless.
   Placed AFTER the split-card base + split_layered rules so equal-specificity
   ties resolve in favour of these overrides. */
@media (min-width: 1001px) {
    /* Width — opt-in for half-cover; half+layered already reads the var. */
    .halo-image-text__split-card--custom-width {
        width: min(100%, var(--halo-split-card-max, 460px));
    }
    /* Shape — Natural shows the whole image (no crop); Square is 1:1. Scoped to
       the split modes so it out-orders the half+layered 1:1 default above. */
    .halo-image-text--media-split-cover .halo-image-text__split-card--aspect-natural {
        aspect-ratio: auto;
    }
    .halo-image-text--media-split-cover .halo-image-text__split-card--aspect-natural img {
        height: auto;
        object-fit: contain;
    }
    .halo-image-text--media-split-cover .halo-image-text__split-card--aspect-square {
        aspect-ratio: 1;
    }
    /* "Up to centre" — the card no longer bleeds past the page centre, and the
       half background retreats off the centre line, so neither crosses into the
       text column. Reversed selectors match the (0,3,0) reversed translate rule
       above and, being later, win the tie. */
    .halo-image-text--split-fg-centre .halo-image-text__split-card,
    .halo-image-text--split-fg-centre.halo-image-text--reversed .halo-image-text__split-card {
        transform: none;
    }
    .halo-image-text--split-fg-centre .halo-image-text__split-cover-bg {
        inset: 0 54% 0 0;
    }
    .halo-image-text--split-fg-centre.halo-image-text--reversed .halo-image-text__split-cover-bg {
        inset: 0 0 0 54%;
    }
}

/* ── Floating-card modes stack to a single column EARLY (1000px) ─────────────
   The layered / split-cover / split-layered styles absolutely position their
   foreground image and translate it toward the section centre. On a narrow
   two-column tablet layout (768–1000px) that overhang lands on top of the text
   column. Stacking these modes at 1000px — sooner than the 768px used by the
   plain image/text layout — keeps the image clear of the copy. The plain
   image / gallery / embed / form modes are untouched and still stack at 768px.
   Below 768px the rules in the next block apply the same values, so this block
   only governs the extra 768–1000px band; it is intentionally additive. */
@media (max-width: 1000px) {
    .halo-image-text--media-layered .halo-image-text__inner,
    .halo-image-text--media-split-cover .halo-image-text__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 25px;
    }
    .halo-image-text--media-layered .halo-image-text__media,
    .halo-image-text--media-split-cover .halo-image-text__media {
        flex: none;
        width: 100%;
        order: -1;   /* media on top by default once stacked */
    }
    .halo-image-text--media-layered .halo-image-text__content,
    .halo-image-text--media-split-cover .halo-image-text__content {
        padding-left: 0;
        padding-right: 0;
    }
    .halo-image-text--media-layered.halo-image-text--reversed .halo-image-text__media,
    .halo-image-text--media-split-cover.halo-image-text--reversed .halo-image-text__media {
        order: -1;
    }

    /* "Text on top (mobile)" toggle — push the media BELOW the content once
       stacked. Specificity is bumped with the media-layered class so it beats
       the ≤768 `.halo-image-text--reversed .halo-image-text__media { order:-1 }`
       rule below regardless of source order (media queries add no specificity). */
    .halo-image-text--media-layered.halo-image-text--mobile-text-first .halo-image-text__media,
    .halo-image-text--media-layered.halo-image-text--mobile-text-first.halo-image-text--reversed .halo-image-text__media {
        order: 1;
    }

    /* ── split-cover specifics (mirror of the ≤768 block, applied earlier) ── */
    .halo-image-text--media-split-cover .halo-image-text__split-cover-bg {
        display: none;
    }
    .halo-image-text--media-split-cover .halo-image-text__inner {
        min-height: 0;
    }
    .halo-image-text--media-split-cover .halo-image-text__split-card,
    .halo-image-text--media-split-cover.halo-image-text--reversed .halo-image-text__split-card {
        width: 100%;
        aspect-ratio: 4 / 3;
        transform: none;
        border-radius: var(--halo-img-radius, 8px);
        box-shadow: none;
    }
    .halo-image-text--media-split-cover .halo-image-text__split-card--mobile-bg {
        display: block;
    }

    /* ── layered specifics (mirror of the ≤768 block, applied earlier) ── */
    .halo-image-text--media-layered .halo-image-text__media--layered {
        min-height: clamp(340px, 92vw, 520px);
    }
    .halo-image-text--media-layered .halo-image-text__media--has-layered-cover,
    .halo-image-text--media-layered .halo-image-text__layered--has-cover {
        min-height: 0;
    }
    .halo-image-text--media-layered .halo-image-text__layered--has-cover .halo-image-text__layered-bg {
        display: none;
    }
    .halo-image-text--media-layered .halo-image-text__layered--has-cover .halo-image-text__layered-card,
    .halo-image-text--media-layered.halo-image-text--reversed .halo-image-text__layered--has-cover .halo-image-text__layered-card {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        aspect-ratio: 4 / 3;
        transform: none;
        border-radius: var(--halo-img-radius, 8px);
        box-shadow: none;
    }
    .halo-image-text--media-layered .halo-image-text__layered-bg,
    .halo-image-text--media-layered.halo-image-text--reversed .halo-image-text__layered-bg {
        inset: 0;
        border-radius: var(--halo-img-radius, 8px);
        clip-path: none;
    }
    .halo-image-text--media-layered .halo-image-text__layered-card,
    .halo-image-text--media-layered.halo-image-text--reversed .halo-image-text__layered-card {
        left: 50%;
        right: auto;
        width: min(64%, 320px);
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 768px) {
    .halo-image-text__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 25px;
    }
    .halo-image-text__media {
        flex: none;
        width: 100%;
        order: -1;
    }

    .halo-image-text--media-layered:not(.halo-image-text--reversed) .halo-image-text__content,
    .halo-image-text--media-layered.halo-image-text--reversed .halo-image-text__content,
    .halo-image-text--media-split-cover:not(.halo-image-text--reversed) .halo-image-text__content,
    .halo-image-text--media-split-cover.halo-image-text--reversed .halo-image-text__content {
        padding-left: 0;
        padding-right: 0;
    }
    .halo-image-text--reversed .halo-image-text__media {
        order: -1;
    }

    /* "Text on top (mobile)" — general column-order switch for ANY media type
       (image, gravity form, embed, shortcode, code). Pushes the media BELOW the
       text once the columns stack. Placed after the media-order rules above so
       it wins the equal-specificity tie against the reversed rule; for the
       layered style (which stacks earlier, at 1000px) the higher-specificity
       rule in the ≤1000 block already covers the 768–1000px band. */
    .halo-image-text--mobile-text-first .halo-image-text__media,
    .halo-image-text--mobile-text-first.halo-image-text--reversed .halo-image-text__media {
        order: 1;
    }

    .halo-image-text__split-cover-bg {
        display: none;
    }

    .halo-image-text--media-split-cover .halo-image-text__inner {
        min-height: 0;
    }

    .halo-image-text__split-card,
    .halo-image-text--reversed .halo-image-text__split-card {
        width: 100%;
        aspect-ratio: 4 / 3;
        transform: none;
        border-radius: var(--halo-img-radius, 8px);
        box-shadow: none;
    }

    .halo-image-text__split-card--mobile-bg {
        display: block;
    }

    /* Sticky is pointless when columns stack — neutralise on mobile.
       Use `position: relative` (not static) so the ::after gold-gradient
       overlay on .halo-image-text__media stays scoped to the media column.
       `static` removes the positioning context, which lets the ::after
       escape up to the section/container and spreads the accent colour
       across the entire mobile section (it was reading as a cream/yellow
       section background). `relative` behaves identically for layout but
       keeps the ::after contained. */
    .halo-image-text__media--sticky {
        position: relative;
        top: auto;
        max-height: none;
        overflow: hidden;
    }

    .halo-image-text__media--layered {
        min-height: clamp(340px, 92vw, 520px);
    }

    .halo-image-text__media--has-layered-cover,
    .halo-image-text__layered--has-cover {
        min-height: 0;
    }

    .halo-image-text__layered--has-cover .halo-image-text__layered-bg {
        display: none;
    }

    .halo-image-text__layered--has-cover .halo-image-text__layered-card,
    .halo-image-text--reversed .halo-image-text__layered--has-cover .halo-image-text__layered-card {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        aspect-ratio: 4 / 3;
        transform: none;
        border-radius: var(--halo-img-radius, 8px);
        box-shadow: none;
    }

    .halo-image-text__layered-bg,
    .halo-image-text--reversed .halo-image-text__layered-bg {
        inset: 0;
        border-radius: var(--halo-img-radius, 8px);
        clip-path: none;
    }

    .halo-image-text__layered-card,
    .halo-image-text--reversed .halo-image-text__layered-card {
        left: 50%;
        right: auto;
        width: min(64%, 320px);
        transform: translate(-50%, -50%);
    }

    /* "Hide background image (mobile)" toggle — drop the FULL-SECTION background
       image (the backdrop behind both columns) on phones. `none !important`
       overrides the inline `background-image: url()` on the <section>; because
       the computed value is `none` at this breakpoint, the browser never
       downloads the image on mobile — a real load-time win. The section overlay
       (.halo-image-text__section-bg-overlay) is a separate element and stays
       visible, so the section still shows "just the overlay". */
    .halo-image-text--mobile-hide-section-bg {
        background-image: none !important;
    }
}


/* ─── Simple Text ──────────────────────────────────────────────── */
.halo-simple-text__inner {
    margin-left: auto;
    margin-right: auto;
}
.halo-text--narrow {
    max-width: 720px;
}
.halo-text--medium {
    max-width: 900px;
}
.halo-simple-text__content {
    font-size: var(--halo-text-content-body-size, var(--halo-base-font-size, 16px));
    font-weight: var(--halo-text-content-body-weight, var(--halo-body-weight, 400));
    line-height: var(--halo-text-content-body-line-height, var(--halo-body-line-height, 1.7));
}
.halo-simple-text__content :is(p, li, ul, ol) {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}
.halo-simple-text__content p:last-child {
    margin-bottom: 0;
}


/* ─── Featured Testimonial (Full Width Branded) ───────────────── */
.halo-featured-testimonial {
    color: var(--halo-white, #ffffff);
}
.halo-featured-testimonial--secondary {
    background-color: var(--halo-secondary, #1a1a2e);
}
.halo-featured-testimonial--primary {
    background-color: var(--halo-primary);
}
.halo-featured-testimonial--accent {
    background-color: var(--halo-accent, #f39c12);
}

.halo-featured-testimonial__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--halo-gap, 30px);
    max-width: 800px;
    margin: 0 auto;
}

.halo-featured-testimonial__photo {
    flex-shrink: 0;
    order: 1;
}
.halo-featured-testimonial__photo img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.halo-featured-testimonial__content {
    order: 0;
}

.halo-featured-testimonial__quote-icon {
    opacity: 0.3;
    margin-bottom: 0.5em;
}

.halo-featured-testimonial__quote {
    /* font-size set by brand.php via --halo-featured-size */
    line-height: 1.6;
    font-style: italic;
    margin: 0 0 1em;
    color: var(--halo-white, #fff);
    border: none;
    padding: 0;
}

.halo-featured-testimonial__name {
    font-weight: 700;
    margin: 0;
    color: var(--halo-white, #fff);
}

.halo-featured-testimonial__role {
    font-size: var(--halo-small-size, 14px);
    opacity: 0.8;
    margin: 0.25em 0 0;
    color: var(--halo-white, #fff);
}

@media (max-width: 768px) {
    .halo-featured-testimonial__inner {
        flex-direction: column;
        text-align: center;
    }
    .halo-featured-testimonial__quote {
        font-size: calc(var(--halo-featured-size, 20px) * 0.9);
    }
    .halo-featured-testimonial__photo img {
        width: 90px;
        height: 90px;
    }
}


/* ─── Testimonial with Image (cinematic quote over photo) ────── */
.halo-testimonial-image--fullwidth {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* SEO-friendly <img> replaces CSS background-image */
.halo-testimonial-image__bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}

.halo-testimonial-image__overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);
    z-index: 1;
}

.halo-testimonial-image--fullwidth > .halo-container {
    position: relative;
    z-index: 2;
}

.halo-testimonial-image__content {
    max-width: 600px;
    color: var(--halo-white, #fff);
    padding: var(--halo-section-padding, 60px) 0;
}

/* Alignment */
.halo-testimonial-image--align-right .halo-testimonial-image__content {
    margin-left: auto;
}
.halo-testimonial-image--align-center .halo-testimonial-image__content {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.halo-testimonial-image--align-left .halo-testimonial-image__content {
    margin-right: auto;
}

.halo-testimonial-image__quote {
    font-size: var(--halo-featured-size, 20px);
    font-weight: var(--halo-heading-weight, 700);
    line-height: 1.3;
    margin: 0 0 1em;
    border: none;
    padding: 0;
    color: var(--halo-white, #fff);
    font-family: var(--halo-heading-font, inherit);
}

.halo-testimonial-image__name {
    font-weight: 600;
    margin: 0;
    color: var(--halo-white, #fff);
}

.halo-testimonial-image__role {
    font-size: var(--halo-small-size, 14px);
    opacity: 0.8;
    margin: 0.25em 0 0;
    color: var(--halo-white, #fff);
}

.halo-testimonial-image__logo {
    margin-top: 1.5em;
}

.halo-testimonial-image__logo img {
    max-height: 60px;
    width: auto;
}

/* Contained variant */
.halo-testimonial-image--contained .halo-testimonial-image__wrap {
    position: relative;
    border-radius: var(--halo-radius, 8px);
    overflow: hidden;
    min-height: 450px;
    display: flex;
    align-items: center;
    padding: var(--halo-gap, 30px);
}

.halo-testimonial-image--contained .halo-testimonial-image__overlay {
    border-radius: var(--halo-radius, 8px);
}

.halo-testimonial-image--contained .halo-testimonial-image__content {
    position: relative;
    z-index: 2;
    padding: var(--halo-gap, 30px);
}

@media (max-width: 768px) {
    .halo-testimonial-image--fullwidth {
        min-height: 400px;
    }
    .halo-testimonial-image__content {
        max-width: 100%;
    }
    .halo-testimonial-image__quote {
        font-size: calc(var(--halo-featured-size, 20px) * 0.9);
    }
    .halo-testimonial-image--contained .halo-testimonial-image__wrap {
        min-height: 350px;
    }
}


/* ─── Benefits Cards ───────────────────────────────────────────── */
.halo-benefits-cards__header {
    text-align: center;
    /* Operator "Header Text Max Width" (Content tab) → --halo-benefits-header-max
       on the section; blank falls back to the long-standing 750px default. */
    max-width: var(--halo-benefits-header-max, 750px);
    margin: 0 auto 2em;
}

.halo-benefits-cards__preheading {
    margin-left: auto;
    margin-right: auto;
}

/* The section intro follows the Header Text Max Width and stays centred within
   the header. Without this it keeps the global .halo-section__intro 700px cap
   with NO auto-margins, so a wider Header Text Max Width leaves the intro pinned
   to the LEFT of the (now wider) header with empty space on the right. The
   heading fills the header, so the intro must too. Mirrors the .halo-feed-header
   intro treatment used by the case-studies / team feeds. (0,2,0) beats the base
   .halo-section__intro (0,1,0). */
.halo-benefits-cards__header .halo-section__intro {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.halo-benefits-cards__grid {
    display: grid;
    gap: var(--halo-gap, 30px);
}

.halo-benefits-cards--cols-2 { grid-template-columns: repeat(2, 1fr); }
.halo-benefits-cards--cols-3 { grid-template-columns: repeat(3, 1fr); }
.halo-benefits-cards--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Card base */
.halo-benefit-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform var(--halo-transition);
    will-change: transform;
}

a.halo-benefit-card:hover {
    color: inherit;
}

/* Card style: raised card with shadow */
.halo-benefit-card--card {
    background: var(--halo-white, #fff);
    border-radius: var(--halo-radius-sm, 4px);
    overflow: hidden;
    box-shadow: var(--halo-shadow);
}

a.halo-benefit-card--card:hover {
    box-shadow: var(--halo-shadow-hover);
    transform: translateY(-3px);
}

/* Card style: flat / minimal */
.halo-benefit-card--flat {
    background: transparent;
}

/* Card style: bordered */
.halo-benefit-card--bordered {
    border: 1px solid var(--halo-light-grey, #e0e0e0);
    border-radius: var(--halo-radius-sm, 4px);
    overflow: hidden;
}

a.halo-benefit-card--bordered:hover {
    border-color: var(--halo-primary);
}

/* Dark/coloured section overrides — any section background that forces white
   text (dark, primary, primary-dark, secondary, accent) must also adapt the
   cards, or a solid-white "card" style keeps its white background while the
   card text inherits the section's white = invisible. The white card becomes a
   translucent panel that reads on the dark backdrop (matching the inherited
   white text). Per-card custom backgrounds override this via !important below. */
:is(.halo-section--dark, .halo-section--primary, .halo-section--primary-dark, .halo-section--secondary, .halo-section--accent) .halo-benefit-card--card {
    background: rgba(255, 255, 255, 0.08);
}
:is(.halo-section--dark, .halo-section--primary, .halo-section--primary-dark, .halo-section--secondary, .halo-section--accent) .halo-benefit-card--bordered {
    border-color: rgba(255, 255, 255, 0.15);
}
:is(.halo-section--dark, .halo-section--primary, .halo-section--primary-dark, .halo-section--secondary, .halo-section--accent) .halo-benefit-card__desc {
    color: rgba(255, 255, 255, 0.75);
}

/* Image */
/* Benefit card images: always respect image_max_width, centered */
.halo-benefits-cards .halo-benefit-card__image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    overflow: hidden;
}
.halo-benefits-cards .halo-benefit-card__image img {
    width: auto !important;
    height: auto !important;
    max-width: var(--halo-benefit-img-max, 120px) !important;
    max-height: var(--halo-benefit-img-max, 120px) !important;
    object-fit: contain !important;
    display: block;
    transition: transform var(--halo-transition);
}
a.halo-benefit-card:hover .halo-benefit-card__image img {
    transform: scale(1.05);
}

/* Flat style: no extra padding around image */
.halo-benefit-card--flat .halo-benefit-card__image {
    margin-bottom: 1em;
    padding: 12px 0;
}

/* Icon from library — section/benefit Icon Colour override, else brand primary */
.halo-benefit-card__icon {
    color: var(--halo-benefit-icon-colour, var(--halo-primary));
}
.halo-benefit-card__icon .halo-icon {
    width: var(--halo-benefit-img-max, 120px);
    height: var(--halo-benefit-img-max, 120px);
}

/* Hero fullwidth library icon wrapper.
   Default colour = inherit (= the surrounding card body-text colour) so
   icons read consistently with their context. Per-section override via
   the "Benefit Icon Colour" picker (inline `color:` style on the wrapper)
   takes precedence. .halo-icon-wrap--brand keeps the legacy primary
   colour for callers (e.g. benefit cards) that want it. */
.halo-icon-wrap {
    display: inline-block;
    color: inherit;
}
.halo-icon-wrap--brand {
    color: var(--halo-primary);
}
.halo-icon-wrap .halo-icon {
    width: 100%;
    height: auto;
}

/* Icon/image alignment in benefit cards */
.halo-benefits-cards--align-center .halo-benefit-card__image {
    justify-content: center;
}
.halo-benefits-cards--align-left .halo-benefit-card__image {
    justify-content: flex-start;
}
.halo-benefits-cards--align-right .halo-benefit-card__image {
    justify-content: flex-end;
}
/* Flat cards: text follows icon alignment */
.halo-benefits-cards--align-left .halo-benefit-card--flat .halo-benefit-card__body {
    text-align: left;
}
.halo-benefits-cards--align-right .halo-benefit-card--flat .halo-benefit-card__body {
    text-align: right;
}
.halo-benefits-cards--align-center .halo-benefit-card--flat .halo-benefit-card__body {
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   CONTAINED SECTIONS — brand colour backgrounds constrained to 1200px

   Default: background fills full viewport width
   .halo-section--contained: moves background to container (1200px max)
   with brand radius/padding/shadow
   ═══════════════════════════════════════════════════════════════════ */

.halo-section--contained {
    background: transparent !important;
    /* Space for the contained container's drop shadow to appear on ALL 4 sides.
     * Earlier versions used margin here, but adjacent full-width section
     * backgrounds painted over the top/bottom shadow. Padding keeps the
     * shadow room INSIDE the section boundary where nothing else can cover it. */
    padding-top: calc(var(--halo-section-padding, 60px) / 2) !important;
    padding-bottom: calc(var(--halo-section-padding, 60px) / 2) !important;
    margin-top: 0;
    margin-bottom: 0;
}
.halo-section--contained > .halo-container,
.halo-section--contained > .halo-hero-banner-wrap > .halo-container {
    border-radius: var(--halo-radius-sm, 8px);
    padding: calc(var(--halo-section-padding, 60px) * 0.7) var(--halo-gap, 30px);
    /* Shadow uses a wider blur + slight spread so top/bottom edges are clearly visible */
    box-shadow: 0 6px 24px rgba(0,0,0,0.10), 0 -2px 12px rgba(0,0,0,0.04);
    position: relative;
    z-index: 1;  /* keep our shadow on top of adjacent section backgrounds */
    overflow: hidden;
}

/* Apply the section's background colour to the CONTAINER when contained */
.halo-section--contained.halo-section--white > .halo-container {
    background: var(--halo-white, #ffffff);
}
.halo-section--contained.halo-section--alt > .halo-container,
.halo-section--contained.halo-section--light > .halo-container {
    background: var(--halo-off-white, #f8f9fa);
}
.halo-section--contained.halo-section--dark > .halo-container {
    background: var(--halo-secondary, #1a1a2e);
    color: var(--halo-white, #fff);
}
.halo-section--contained.halo-section--primary > .halo-container {
    background: var(--halo-primary);
    color: var(--halo-white, #fff);
}
.halo-section--contained.halo-section--primary-dark > .halo-container {
    background: var(--halo-primary-dark);
    color: var(--halo-white, #fff);
}
.halo-section--contained.halo-section--primary-light > .halo-container {
    background: var(--halo-primary-light);
    color: var(--halo-dark-grey, #333);
}
.halo-section--contained.halo-section--secondary > .halo-container {
    background: var(--halo-secondary, #1a1a2e);
    color: var(--halo-white, #fff);
}
.halo-section--contained.halo-section--accent > .halo-container {
    background: var(--halo-accent);
    color: var(--halo-white, #fff);
}

/* Body */
.halo-benefit-card__body {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.halo-benefit-card--flat .halo-benefit-card__body {
    padding: 0;
}

/* Card Text Max Width (operator "Card Text Max Width", Cards & Icons tab).
   Active only when the grid carries --card-text-max (a value was set), so
   existing sections are untouched. Caps the text children, then positions the
   capped block on the flex-column body's cross axis to match the card's
   alignment: centre by default, flush left for Left-align / icon-left, flush
   right for Right-align. The var lives on the section and inherits down. */
.halo-benefits-cards--card-text-max .halo-benefit-card__preheading,
.halo-benefits-cards--card-text-max .halo-benefit-card__heading,
.halo-benefits-cards--card-text-max .halo-benefit-card__desc,
.halo-benefits-cards--card-text-max .halo-benefit-card__btn {
    max-width: var(--halo-benefit-card-text-max, none);
}
.halo-benefits-cards--card-text-max .halo-benefit-card__body {
    align-items: center;
}
.halo-benefits-cards--align-left.halo-benefits-cards--card-text-max .halo-benefit-card__body,
.halo-benefits-cards--card-text-max .halo-benefit-card--icon-left .halo-benefit-card__body {
    align-items: flex-start;
}
.halo-benefits-cards--align-right.halo-benefits-cards--card-text-max .halo-benefit-card__body {
    align-items: flex-end;
}

.halo-benefit-card__heading {
    font-family: var(--halo-heading-font, inherit);
    font-weight: var(--halo-heading-weight, 700);
    font-size: var(--halo-h4-size, 20px);
    line-height: var(--halo-heading-line-height, 1.2);
    margin: 0 0 0.4em;
}

.halo-benefit-card__preheading {
    color: var(--halo-preheading-colour, var(--halo-primary));
    font-family: var(--halo-preheading-font, var(--halo-body-font, inherit));
    font-size: calc(var(--halo-preheading-font-size, var(--halo-nav-font-size, 16px)) * 0.9);
    font-weight: var(--halo-preheading-font-weight, var(--halo-nav-font-weight, 500));
    letter-spacing: var(--halo-preheading-letter-spacing, var(--halo-nav-letter-spacing, 0));
    line-height: 1.35;
    margin: 0 0 0.55em;
    text-transform: var(--halo-preheading-transform, var(--halo-nav-transform, none));
}

.halo-benefit-card__desc {
    color: var(--halo-mid-grey, #6c757d);
    line-height: var(--halo-body-line-height, 1.7);
    margin: 0;
    flex: 1;
}

/* Description is now a WYSIWYG block — it can hold paragraphs and bullet /
   numbered lists. Reset the outer margins so the block still sits flush in the
   card, and give lists a sensible indent. */
.halo-benefit-card__desc > :first-child { margin-top: 0; }
.halo-benefit-card__desc > :last-child { margin-bottom: 0; }
.halo-benefit-card__desc p { margin: 0 0 0.75em; }
.halo-benefit-card__desc ul,
.halo-benefit-card__desc ol { margin: 0.5em 0; padding-left: 1.25em; }
.halo-benefit-card__desc li { margin: 0.25em 0; }

.halo-benefit-card__btn {
    display: inline-block;
    margin-top: 1em;
    color: var(--halo-primary);
    font-weight: 600;
    font-size: var(--halo-small-size, 14px);
}

a.halo-benefit-card:hover .halo-benefit-card__btn {
    color: var(--halo-primary-dark);
}

:is(.halo-section--dark, .halo-section--primary, .halo-section--primary-dark, .halo-section--secondary, .halo-section--accent) .halo-benefit-card__btn {
    color: var(--halo-primary-light, #a8d5ba);
}

.halo-benefit-card--custom-bg {
    background: var(--halo-benefit-card-bg) !important;
    border-color: var(--halo-benefit-card-border, transparent) !important;
    color: var(--halo-benefit-card-fg) !important;
}

.halo-benefit-card--flat.halo-benefit-card--custom-bg {
    border-radius: var(--halo-radius-sm, 4px);
    overflow: hidden;
}

.halo-benefit-card--flat.halo-benefit-card--custom-bg .halo-benefit-card__image {
    margin-bottom: 0;
    padding: 1em 1em 0;
}

.halo-benefit-card--flat.halo-benefit-card--custom-bg .halo-benefit-card__body {
    padding: 25px;
}

.halo-benefit-card--custom-bg .halo-benefit-card__heading,
.halo-benefit-card--custom-bg .halo-benefit-card__preheading {
    color: var(--halo-benefit-card-fg) !important;
}
/* On coloured cards the icon follows the contrast text colour — unless an
   explicit Icon Colour (section or per-benefit) is set, which wins. */
.halo-benefit-card--custom-bg .halo-benefit-card__icon {
    color: var(--halo-benefit-icon-colour, var(--halo-benefit-card-fg)) !important;
}

.halo-benefit-card--custom-bg .halo-benefit-card__desc {
    color: var(--halo-benefit-card-muted) !important;
}
/* The description is a WYSIWYG, so its text lives in inner <p>/<li>. On a dark
   section the generic `.halo-section--dark p / li → white` rule hits those
   children DIRECTLY, and a child's own declaration beats the colour inherited
   from the !important above — so a LIGHT custom card on a dark section kept
   white (invisible) description text. Re-assert the contrast colour on the
   children themselves. Headings/preheading already carry the class directly. */
.halo-benefit-card--custom-bg .halo-benefit-card__desc p,
.halo-benefit-card--custom-bg .halo-benefit-card__desc li {
    color: var(--halo-benefit-card-muted) !important;
}

/* ── Cover-image mode ─────────────────────────────────────────────
   Benefit images fill the top of the card edge-to-edge, cropped to a
   uniform per-section height (--halo-benefit-cover-h). The heavier
   selectors + !important beat the icon-mode img forcing above. */
.halo-benefit-card--cover-img .halo-benefit-card__image {
    padding: 0;
    width: 100%;
}
.halo-benefits-cards .halo-benefit-card--cover-img .halo-benefit-card__image img.halo-benefit-card__cover {
    width: 100% !important;
    max-width: none !important;
    height: var(--halo-benefit-cover-h, 220px) !important;
    max-height: none !important;
    object-fit: cover !important;
}
/* Library icons still render as icons in cover mode — keep them off the
   card edge since the image block lost its padding. */
.halo-benefit-card--cover-img .halo-benefit-card__icon {
    padding: 1em;
}

/* ── Heading band ─────────────────────────────────────────────────
   Colour strip behind the card heading; negative margins bleed it past
   the body's 25px padding to the card edges (flush under a cover image,
   or against the card top without one). Declared after the custom-bg
   contrast rules so the band's own fg wins on coloured cards. */
.halo-benefit-card--heading-band .halo-benefit-card__heading {
    background: var(--halo-benefit-heading-bg);
    color: var(--halo-benefit-heading-fg, #ffffff) !important;
    text-align: center;
    padding: 0.7em 25px;
    margin: 0 -25px 0.9em;
}
/* Flush to the card top / cover image only when nothing (e.g. a
   preheading) sits above the heading. */
.halo-benefit-card--heading-band .halo-benefit-card__heading:first-child {
    margin-top: -25px;
}
/* Flat cards have no contained edge to bleed to — render the band as a
   rounded padded strip instead. */
.halo-benefit-card--flat .halo-benefit-card__heading {
    border-radius: 0;
}
.halo-benefit-card--flat.halo-benefit-card--heading-band .halo-benefit-card__heading {
    margin: 0 0 0.9em;
    border-radius: var(--halo-radius-sm, 4px);
}

/* Explicit heading text colour — declared last so it beats both the
   coloured-card contrast rule and the heading-band contrast above. */
.halo-benefit-card--heading-colour .halo-benefit-card__heading {
    color: var(--halo-benefit-heading-colour) !important;
}

/* Explicit border colour (Bordered card style). Hover keeps the chosen
   colour rather than swapping to primary — an explicit choice wins. */
.halo-benefit-card--bordered.halo-benefit-card--border-colour {
    border-color: var(--halo-benefit-border);
}
a.halo-benefit-card--bordered.halo-benefit-card--border-colour:hover {
    border-color: var(--halo-benefit-border);
}

/* ── Centred final row ────────────────────────────────────────────
   Flex fallback replaces the grid so an incomplete last row (1–2 orphan
   cards) centres instead of hugging the left. Card widths mirror the
   grid's column maths, including the responsive column collapses. */
.halo-benefits-cards__grid--center-last {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.halo-benefits-cards__grid--center-last > .halo-benefit-card {
    width: 100%;
}
.halo-benefits-cards--cols-2.halo-benefits-cards__grid--center-last > .halo-benefit-card {
    width: calc((100% - var(--halo-gap, 30px)) / 2);
}
.halo-benefits-cards--cols-3.halo-benefits-cards__grid--center-last > .halo-benefit-card {
    width: calc((100% - 2 * var(--halo-gap, 30px)) / 3);
}
.halo-benefits-cards--cols-4.halo-benefits-cards__grid--center-last > .halo-benefit-card {
    width: calc((100% - 3 * var(--halo-gap, 30px)) / 4);
}
@media (min-width: 769px) and (max-width: 1024px) {
    .halo-benefits-cards--cols-3.halo-benefits-cards__grid--center-last > .halo-benefit-card,
    .halo-benefits-cards--cols-4.halo-benefits-cards__grid--center-last > .halo-benefit-card {
        width: calc((100% - var(--halo-gap, 30px)) / 2);
    }
}
@media (max-width: 768px) {
    .halo-benefits-cards__grid--center-last > .halo-benefit-card {
        width: 100% !important;
    }
}

.halo-benefit-card--custom-bg .halo-benefit-card__btn {
    color: var(--halo-benefit-card-accent) !important;
}

a.halo-benefit-card--custom-bg:hover .halo-benefit-card__btn {
    color: var(--halo-benefit-card-accent-hover) !important;
}

@media (max-width: 768px) {
    .halo-benefits-cards--cols-2,
    .halo-benefits-cards--cols-3,
    .halo-benefits-cards--cols-4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .halo-benefits-cards--cols-3,
    .halo-benefits-cards--cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Icon Position: left of heading ───────────────────────────────
   The card becomes a two-column row — the icon in column 1, the heading
   and everything below it (description, button) in column 2. Because the
   heading and description share that one body column, their left edges line
   up under each other, with the icon sitting to their left. Placed after all
   other benefit-card rules so it overrides their per-style padding by source
   order. Only added when NOT in cover-image mode (see the template). */
.halo-benefit-card--icon-left {
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
}
/* Card / Bordered (and a flat card given a background) own the inset via a
   card-level pad; flat with no background stays flush like every other flat
   card. The gap above owns the space between the icon and the text. */
.halo-benefit-card--card.halo-benefit-card--icon-left,
.halo-benefit-card--bordered.halo-benefit-card--icon-left,
.halo-benefit-card--flat.halo-benefit-card--custom-bg.halo-benefit-card--icon-left {
    padding: 25px;
}
/* Icon column: natural width, hugging the top-left. Zero its own padding so
   the card pad + gap are the only spacing, and force left (overriding the
   section Icon Alignment, which is meaningless beside the heading). */
.halo-benefits-cards .halo-benefit-card--icon-left .halo-benefit-card__image {
    flex: 0 0 auto;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
    margin: 0;
}
/* Text column: no padding (the card owns the inset), left-aligned even when
   the section default is centred, and min-width:0 so long words wrap inside
   the flex column instead of overflowing it. */
.halo-benefits-cards .halo-benefit-card--icon-left .halo-benefit-card__body {
    padding: 0;
    min-width: 0;
    text-align: left;
}

/* ─── Team Grid (Archive) ──────────────────────────────────────── */
.halo-team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--halo-gap);
    /* team_grid's "Grid Max Width (px)" sets --halo-team-grid-max inline.
       Unset = `none`, i.e. full container width (the archive's behaviour).
       The responsive rules below still override this at their breakpoints. */
    max-width: var(--halo-team-grid-max, none);
    margin-inline: auto;
}

.halo-team-card {
    background: var(--halo-white);
    border-radius: var(--halo-radius);
    overflow: hidden;
    box-shadow: var(--halo-shadow);
    transition: transform var(--halo-transition);
    text-align: center;
    will-change: transform;
}

.halo-team-card:hover {
    box-shadow: var(--halo-shadow-hover);
    transform: translateY(-2px);
}

/* Team card display modes (Card / Flat / Border), mirroring the service card
   variants. Card (default) keeps the white box + shadow above. Selectors carry
   the .halo-team-grid prefix so they out-specify the single-class base rule
   regardless of source order. Only the placeable team_grid section sets these
   classes; the author-page + archive grids stay on the default Card look. */
.halo-team-grid .halo-team-card--flat {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}
.halo-team-grid .halo-team-card--flat:hover {
    box-shadow: none;
    transform: none;
}
.halo-team-grid .halo-team-card--flat .halo-team-card__image-link {
    border-radius: var(--halo-radius-sm, 8px);
}
.halo-team-grid .halo-team-card--flat .halo-team-card__body {
    padding: 16px 0 0;
}
.halo-team-grid .halo-team-card--border {
    background: transparent;
    box-shadow: none;
    border: 1px solid var(--halo-light-grey, #e6e6e6);
    border-radius: var(--halo-radius);
    overflow: hidden;
}
.halo-team-grid .halo-team-card--border:hover {
    box-shadow: none;
    transform: none;
    border-color: var(--halo-primary);
}
.halo-section--team-grid.halo-section--dark .halo-team-card--border {
    border-color: rgba(255, 255, 255, 0.18);
}

.halo-team-card__image-link {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.halo-team-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--halo-transition);
}

.halo-team-card:hover .halo-team-card__image {
    transform: scale(1.03);
}

.halo-team-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--halo-light-grey, #f5f5f5);
}

.halo-team-card__body {
    padding: 20px;
}

.halo-team-card__body h3 {
    margin-bottom: 0.25em;
}

.halo-team-card__body h3 a {
    color: inherit;
    text-decoration: none;
}

.halo-team-card__body h3 a:hover {
    color: var(--halo-primary);
}

/* Per-section team name (card title) size override — inline --halo-team-name-size
   var + a --name-size modifier on the grid (team-grid.php). The card h3 has no
   base font-size (it uses the brand heading size), so this (0,3,1) rule wins
   without !important. Scales 0.85 on mobile to match the brand h3 mobile ratio. */
.halo-team-grid--name-size .halo-team-card__body h3 {
    font-size: var(--halo-team-name-size);
}
@media (max-width: 768px) {
    .halo-team-grid--name-size .halo-team-card__body h3 {
        font-size: calc(var(--halo-team-name-size) * 0.85);
    }
}

.halo-team-card__position {
    color: var(--halo-primary);
    font-weight: 600;
    font-size: var(--halo-small-size, 14px);
    margin-bottom: 0.75em;
}

/* ── team_grid Style tab overrides (all opt-in via a grid modifier class +
   an inline custom property set in team-grid.php; the rule only exists when
   the operator sets the control, so unset feeds render exactly as before) ── */

/* Name (card title) colour — targets the h3 and its author link so a linked
   name recolours too. The link rule ties the base h3 a:hover on specificity
   (both 0,2,2) and, placed later here, wins by source order — so the chosen
   colour also holds on hover instead of flipping to brand primary. */
.halo-team-grid--name-colour .halo-team-card__body h3,
.halo-team-grid--name-colour .halo-team-card__body h3 a {
    color: var(--halo-team-name-colour);
}

/* Title / position line colour + size. (0,2,0) beats the single-class base. */
.halo-team-grid--position-colour .halo-team-card__position {
    color: var(--halo-team-position-colour);
}
.halo-team-grid--position-size .halo-team-card__position {
    font-size: var(--halo-team-position-size);
}

/* Border colour + hover for the Border card display. The .halo-section--team-grid
   prefix lifts these to (0,3,0)/(0,4,0) so they out-specify the dark-section
   border rule and the base :hover rule regardless of source order. */
.halo-section--team-grid .halo-team-grid--border-colour .halo-team-card--border {
    border-color: var(--halo-team-border-colour);
}
.halo-section--team-grid .halo-team-grid--border-hover .halo-team-card--border:hover {
    border-color: var(--halo-team-border-hover-colour);
}

.halo-team-card__socials {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 0.5em;
}

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

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

@media (max-width: 480px) {
    .halo-team-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
}

/* ─── Meet-the-Team section (placeable team_grid) ──────────────────
   Reuses the archive's .halo-team-grid / .halo-team-card styling above.
   These add the optional qualifications / experience / bio lines and a
   desktop column override. The grid is never above-the-fold, so it lives
   here in async sections.css (no critical-CSS / CLS concern). */
.halo-team-grid__intro {
    max-width: 680px;
    /* Bottom gap matches the heading's rhythm (was 2em, read cramped). */
    margin: -0.5em auto 2.5em;
    opacity: 0.85;
}

.halo-team-card__quals {
    font-size: var(--halo-small-size, 14px);
    opacity: 0.8;
    margin-bottom: 0.35em;
}

.halo-team-card__experience {
    font-size: var(--halo-small-size, 14px);
    opacity: 0.7;
    margin-bottom: 0.5em;
}

.halo-team-card__bio {
    font-size: var(--halo-small-size, 14px);
    opacity: 0.9;
    margin: 0.25em 0 0.75em;
    text-align: left;
}

/* Desktop column override. The plain .halo-team-grid (archive) keeps its
   default repeat(4); below 1025px the responsive breakpoints above win. */
@media (min-width: 1025px) {
    .halo-team-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
    .halo-team-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
    .halo-team-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
    .halo-team-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
}

/* Centre the final row (team_grid "Centre final row" toggle).
   A flex fallback replaces the grid so an incomplete last row (orphan
   cards) centres instead of hugging the left. Card widths mirror the grid
   column maths + gap, and follow the same responsive collapses the grid
   uses above (desktop N-cols → tablet 3 → 2 → 1). Placed after the grid
   rules so its single-class display:flex out-orders the base display:grid. */
.halo-team-grid--center-last {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
/* Default width tracks the base grid's 4 columns; desktop --cols-N below overrides. */
.halo-team-grid--center-last > .halo-team-card {
    width: calc((100% - 3 * var(--halo-gap, 30px)) / 4);
}
@media (min-width: 1025px) {
    .halo-team-grid--cols-2.halo-team-grid--center-last > .halo-team-card {
        width: calc((100% - var(--halo-gap, 30px)) / 2);
    }
    .halo-team-grid--cols-3.halo-team-grid--center-last > .halo-team-card {
        width: calc((100% - 2 * var(--halo-gap, 30px)) / 3);
    }
    .halo-team-grid--cols-4.halo-team-grid--center-last > .halo-team-card {
        width: calc((100% - 3 * var(--halo-gap, 30px)) / 4);
    }
    .halo-team-grid--cols-5.halo-team-grid--center-last > .halo-team-card {
        width: calc((100% - 4 * var(--halo-gap, 30px)) / 5);
    }
}
/* Tablet: base grid drops to 3 columns. */
@media (min-width: 769px) and (max-width: 1024px) {
    .halo-team-grid--center-last > .halo-team-card {
        width: calc((100% - 2 * var(--halo-gap, 30px)) / 3);
    }
}
/* Small tablet / large phone: 2 columns. */
@media (min-width: 481px) and (max-width: 768px) {
    .halo-team-grid--center-last > .halo-team-card {
        width: calc((100% - var(--halo-gap, 30px)) / 2);
    }
}
/* Phone: single column (base grid also caps width at 360px and centres). */
@media (max-width: 480px) {
    .halo-team-grid--center-last > .halo-team-card {
        width: 100%;
    }
}

/* Author-box credentials (qualifications + experience under the role). */
.halo-author-box__quals {
    font-size: var(--halo-small-size, 14px);
    opacity: 0.8;
    margin: 0 0 0.25em;
}

.halo-author-box__experience {
    font-size: var(--halo-small-size, 14px);
    opacity: 0.7;
    margin: 0 0 0.5em;
}


/* ─── Team Single (Hero + Bio) ─────────────────────────────────── */
.halo-team-hero {
    padding: var(--halo-section-padding, 80px) 0;
    background: var(--halo-light-grey, #f9f9f9);
}

.halo-team-hero__inner {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--halo-gap, 40px);
    align-items: start;
}

.halo-team-hero__image img {
    width: 100%;
    border-radius: var(--halo-radius);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    box-shadow: var(--halo-shadow);
}

.halo-team-hero__info h1 {
    margin-bottom: 0.15em;
    line-height: 1.2;
}

.halo-team-hero__position {
    color: var(--halo-primary);
    font-size: 1.15em;
    font-weight: 600;
    margin-bottom: 1em;
}

.halo-team-hero__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 25px;
    margin-bottom: 1em;
}

.halo-team-hero__contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--halo-dark-grey);
    text-decoration: none;
    font-size: var(--halo-base-font-size, 16px);
}

.halo-team-hero__contact-link:hover {
    color: var(--halo-primary);
}

.halo-team-hero__socials {
    display: flex;
    gap: 12px;
}

.halo-team-bio {
    padding: var(--halo-section-padding, 80px) 0;
}

.halo-team-bio .entry-content {
    font-size: var(--halo-base-font-size, 16px);
    line-height: var(--halo-body-line-height, 1.7);
}

/* Social link icons (shared between archive + single) */
.halo-team-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--halo-light-grey, #f0f0f0);
    color: var(--halo-dark-grey);
}

.halo-team-social:hover {
    background: var(--halo-primary);
    color: var(--halo-white);
}

.halo-team-social svg {
    width: 18px;
    height: 18px;
}

/* Book button at the bottom of team cards (Team Feed toggle). The card and
   body go flex-column so buttons line up across cards of uneven content;
   the wrap's auto top margin does the pushing, its padding guarantees a
   minimum gap above the button even in the tallest card. */
.halo-team-card {
    display: flex;
    flex-direction: column;
}

.halo-team-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Per-member contact rows (phone / email, opt-in via the user's
   "Show … publicly" toggles). Scoped under .halo-team-card so the link
   colour beats .site-content a. */
.halo-team-card__contact {
    margin-top: 0.9em;
    padding-top: 0.9em;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45em;
}

.halo-team-card a.halo-team-card__contact-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--halo-small-size, 14px);
    color: inherit;
    text-decoration: none;
    opacity: 0.85;
    max-width: 100%;
}

.halo-team-card a.halo-team-card__contact-row:hover,
.halo-team-card a.halo-team-card__contact-row:focus-visible {
    color: var(--halo-primary);
    opacity: 1;
}

.halo-team-card__contact-row svg {
    flex-shrink: 0;
}

.halo-team-card__contact-row span {
    overflow-wrap: anywhere;
    min-width: 0;
}

.halo-team-card__book-wrap {
    margin-top: auto;
    padding-top: 14px;
}

@media (max-width: 768px) {
    .halo-team-hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .halo-team-hero__image {
        max-width: 250px;
    }

    .halo-team-hero__contact {
        justify-content: center;
    }

    .halo-team-hero__socials {
        justify-content: center;
    }
}


/* ─── Team Member (single) section ──────────────────────────────── */
.halo-team-single {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}

.halo-team-single--no-image {
    grid-template-columns: 1fr;
}

.halo-team-single__photo {
    width: 100%;
    display: block;
    border-radius: var(--halo-radius-sm, 8px);
    box-shadow: var(--halo-shadow);
    object-fit: cover;
}

.halo-team-single__name {
    margin-bottom: 4px;
}

.halo-team-single__position {
    color: var(--halo-primary);
    font-weight: 600;
    margin-bottom: var(--halo-heading-spacing-below, 14px);
}

.halo-team-single__bio {
    line-height: var(--halo-body-line-height, 1.7);
    margin-bottom: 1.5em;
}

/* Qualifications / Experience / Additional Sections as labelled boxes */
.halo-team-single__boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 1.5em;
}

.halo-team-single__box {
    background: var(--halo-off-white, #f8f9fa);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--halo-radius-sm, 8px);
    padding: 18px 20px;
}

.halo-team-single__box-title {
    font-size: var(--halo-small-size, 14px);
    margin-bottom: 8px;
}

.halo-team-single__box-content {
    color: var(--halo-mid-grey);
    line-height: var(--halo-body-line-height, 1.7);
    font-size: var(--halo-small-size, 14px);
}

.halo-team-single__box-content > :last-child {
    margin-bottom: 0;
}

.halo-team-single__socials,
.halo-team-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1.2em;
}

/* Dark / brand-colour section backgrounds: keep the boxes readable */
.halo-section--team-member-single:is(.halo-section--dark, .halo-section--primary, .halo-section--primary-dark, .halo-section--secondary, .halo-section--accent) .halo-team-single__box {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
}
.halo-section--team-member-single:is(.halo-section--dark, .halo-section--primary, .halo-section--primary-dark, .halo-section--secondary, .halo-section--accent) .halo-team-single__box-content {
    color: rgba(255, 255, 255, 0.82);
}
.halo-section--team-member-single:is(.halo-section--dark, .halo-section--primary, .halo-section--primary-dark, .halo-section--secondary, .halo-section--accent) .halo-team-single__position {
    color: inherit;
}

@media (max-width: 768px) {
    .halo-team-single {
        grid-template-columns: 1fr;
    }
    .halo-team-single__media {
        max-width: 280px;
    }
}


/* ─── Booking popup (team member Book button, embed mode) ───────── */
.halo-booking-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.halo-booking-modal[hidden] {
    display: none;
}

.halo-booking-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.halo-booking-modal__content {
    position: relative;
    background: var(--halo-white, #fff);
    border-radius: var(--halo-radius-sm, 8px);
    width: min(760px, 92vw);
    max-height: 88vh;
    overflow: auto;
    padding: 44px 20px 20px;
    box-shadow: var(--halo-shadow-hover, 0 12px 40px rgba(0, 0, 0, 0.3));
}

.halo-booking-modal__close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--halo-dark-grey, #333);
}

.halo-booking-modal__embed iframe {
    width: 100%;
    min-height: 60vh;
    border: 0;
}

body.halo-booking-open {
    overflow: hidden;
}


/* ─── Scrolling Text (marquee band) ─────────────────────────────
   One phrase repeated across a continuously scrolling track. The PHP
   partial (templates/sections/scrolling-text.php) computes the group
   count, the shift percentage (= exactly one group) and the duration
   (from a constant px/sec target), and passes them in as CSS vars.
   Nothing here needs to know how many repeats were rendered. */
.halo-scrolling-text {
    /* Tighter than the default section rhythm — this is a band, not a
       content section. min-height (desktop only) takes over when set. */
    padding-top: calc(var(--halo-section-padding, 60px) / 3);
    padding-bottom: calc(var(--halo-section-padding, 60px) / 3);
    display: flex;
    align-items: center;
}

.halo-scrolling-text__viewport {
    overflow: hidden;
    position: relative;
    width: 100%;
    /* Soft edge fade so the text enters/exits rather than being clipped. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}

.halo-scrolling-text__track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: halo-marquee-scroll var(--halo-marquee-duration, 20s) linear infinite;
}

/* Left-to-right — same keyframes, run backwards. */
.halo-scrolling-text--reverse .halo-scrolling-text__track {
    animation-direction: reverse;
}

.halo-scrolling-text__group {
    display: flex;
    align-items: center;
    gap: 0.55em;
    padding-right: 0.55em; /* matches the in-group gap across the loop seam */
    flex-shrink: 0;
    font-size: var(--halo-marquee-size, 48px);
    line-height: 1.15;
    color: var(--halo-marquee-colour, #ffffff);
    font-family: var(--halo-heading-font, inherit);
    font-weight: var(--halo-heading-weight, 700);
    white-space: nowrap;
}

.halo-scrolling-text__sep {
    opacity: 0.55;
}

@keyframes halo-marquee-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(var(--halo-marquee-shift, -12.5%), 0, 0); }
}

/* ── Width variants ─────────────────────────────────────────────
   "full" is the default (the section is already edge-to-edge, so the
   viewport just fills it). The other two constrain the scrolling band
   to the site container / a narrower measure. */
.halo-scrolling-text--container .halo-scrolling-text__viewport,
.halo-scrolling-text--narrow .halo-scrolling-text__viewport {
    margin-left: auto;
    margin-right: auto;
}
.halo-scrolling-text--container .halo-scrolling-text__viewport {
    max-width: var(--halo-container, 1200px);
}
.halo-scrolling-text--narrow .halo-scrolling-text__viewport {
    max-width: 720px;
}

/* ── Desktop min-height ─────────────────────────────────────────
   Operator-set, desktop only — an inline style couldn't be gated to a
   breakpoint, so the partial passes the value as a variable instead. */
@media (min-width: 992px) {
    .halo-scrolling-text {
        min-height: var(--halo-marquee-min-h, 0);
    }
}

/* ── Mobile scaling ─────────────────────────────────────────────
   The size field is a desktop value; large display text set at 72px+
   would otherwise dwarf a phone screen. */
@media (max-width: 991px) {
    .halo-scrolling-text__group {
        font-size: clamp(20px, calc(var(--halo-marquee-size, 48px) * 0.7), var(--halo-marquee-size, 48px));
    }
}
@media (max-width: 600px) {
    .halo-scrolling-text__group {
        font-size: clamp(18px, calc(var(--halo-marquee-size, 48px) * 0.5), var(--halo-marquee-size, 48px));
    }
    .halo-scrolling-text__viewport {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    }
}

/* ── Reduced motion ─────────────────────────────────────────────
   Stop the animation and drop every duplicate group so the phrase
   simply sits there once, centred. */
@media (prefers-reduced-motion: reduce) {
    .halo-scrolling-text__track {
        animation: none;
        width: 100%;
        justify-content: center;
    }
    .halo-scrolling-text__group[aria-hidden="true"] {
        display: none;
    }
    .halo-scrolling-text__viewport {
        -webkit-mask-image: none;
                mask-image: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   Alternate heading font
   Sections whose "Headline Font" field is set to Alternate get the
   .halo-use-alt-heading class on their <section> (added centrally by the
   theme's sections-renderer). ONLY the headline element switches to the
   Alternate Heading Font from Site Settings — eyebrow/preheading, body
   and paragraph text are deliberately left alone.

   Values come from the --halo-alt-heading-* custom properties emitted in
   <head> by the plugin's brand.php (only when an alternate font is set).
   Weight / line-height / letter-spacing fall back to the MAIN heading
   values when their alt field is blank, so "blank = same as main heading"
   holds without ever touching the shared --halo-heading-* vars.

   This rule lives here (async sections.css) rather than the inline <head>
   block on purpose: several base headline rules use !important, so the
   override has to come later in source order to win the cascade.
   ═══════════════════════════════════════════════════════════════════ */
.halo-use-alt-heading .halo-hero-banner__big-title,
.halo-use-alt-heading .halo-hero__headline,
.halo-use-alt-heading .halo-hero-fw__headline,
.halo-use-alt-heading .halo-scrolling-text__group,
.halo-use-alt-heading .halo-cta-band h2,
.halo-use-alt-heading .halo-section__heading {
    font-family: var(--halo-alt-heading-font, var(--halo-heading-font, inherit)) !important;
    font-weight: var(--halo-alt-heading-weight, var(--halo-heading-weight, 700)) !important;
    line-height: var(--halo-alt-heading-line-height, var(--halo-heading-line-height, 1.2)) !important;
    letter-spacing: var(--halo-alt-heading-letter-spacing, var(--halo-heading-letter-spacing, 0)) !important;
}