/* ==========================================================================
   colors.css (HPA theme)
   - Include BEFORE site.css
   - Intent: strong brand identity WITHOUT eye-searing red
   - ADA/WCAG: high-contrast header/footer text + strong focus indicators
   ========================================================================== */

/*Ignore Spelling: rgba navbar toggler endregion Dropdown theming*/
/*#region root*/
:root {
    color-scheme: light;
    /*#region Primary surface colors */
    --hpa-brand-mark-color: #B10616; /* HPA Brand Red - #C8102D - BRAND RED MARK (thin bars/underlines only) */

    --hpa-page-background: #2f2c2c;
    --hpa-surface-background: #FFFFFF; /* Pure White - #FFFFFF - card/panel base */
    --hpa-surface-alt-background: #DDF3FF; /* Bright Mist - #DDF3FF - section/table header tint */
    --hpa-surface-card-footer-background: var(--hpa-ui-red-darker); /* Card footer cap */
    --hpa-surface-card-cap-text-color: #F9FAFB;
    --hpa-surface-card-cap-background: var(--hpa-ui-red-deep); /* Card header cap */
    --hpa-surface-card-background: #C2D6E6;
    --hpa-surface-raised-background: #EAF7FF; /* Bright Sky Wash - #EAF7FF - raised surface */
    --hpa-carousel-control-background: rgba(8, 27, 52, 0.86); /* Carousel control pill background */
    --hpa-carousel-control-shadow: rgba(0, 0, 0, 0.28); /* Control shadow */
    --hpa-carousel-indicator-color: rgba(255, 255, 255, 0.40); /* Indicator */
    --hpa-carousel-indicator-active-color: var(--hpa-brand-mark-color); /* Active indicator */
    --hpa-outer-border-color: var(--hpa-brand-mark-color);
    --hpa--inner-border-color: #112A46;
    --hpa-border-strong-color: var(--hpa-outer-border-color);
    --hpa-card-border-color: var(--hpa-outer-border-color);
    --hpa-card-divider-color: rgba(215, 222, 227, 0.70); /* Card Divider Teal - header/footer separators */
    /*#endregion */
    /*#region mat colors*/
    --hpa-mat-bg: #FFFCF7;
    --hpa-mat-border: rgba(255, 255, 255, 0.14);
    --hpa-mat-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
    --hpa-mat-color: #f5f9ff;
    --image-mat-color: #798797;
    /*#endregion*/
    /*#region text color */
    --hpa-text-color: #111827; /* Midnight Ink - #111827 - primary text */
    --hpa-text-muted-color: #4B5563; /* Muted Graphite - #4B5563 - muted text */
    --hpa-text-inverse-color: #F9FAFB; /* Snow White - #F9FAFB - inverse on dark backgrounds */
    /*#endregion */
    /*#region Brand / intent colors */

    --hpa-primary-color: #156082; /* HPA Trust Teal - #156082 - TRUST TEAL (primary actions/links) */
    --hpa-primary-hover-color: #0F516E; /* Deep Teal - #0F516E - primary hover */
    --hpa-primary-soft-color: #BDEEFF; /* Bright Aqua Tint - #BDEEFF - primary tint background */

    --hpa-secondary-color: #524064; /* HPA Analytics Plum - #524064 - ANALYTICS PLUM (secondary actions/links) */
    --hpa-secondary-hover-color: #413253; /* Deep Plum - #413253 - secondary hover */
    --hpa-secondary-soft-color: #E6D7FF; /* Bright Lavender Tint - #E6D7FF - secondary tint background */

    --hpa-accent-color: #A61B2A; /* Toned Crimson - #A61B2A - (alerts/emphasis only) */
    --hpa-accent-hover-color: #8F0F1F; /* Deep Burgundy - #8F0F1F - accent hover */
    --hpa-accent-soft-color: #FFCAE3; /* Bright Blush Tint - #FFCAE3 - accent tint background */

    --hpa-ui-red-deep: #B10616;
    --hpa-ui-red-mid: #C50718;
    --hpa-ui-red-darker: #8F0F1F;
    --hpa-logo-red: #E2081B;
    /*#endregion */
    /*#region Header / Footer Colors */

    --hpa-header-background: #0C1016; /* Charcoal Navy - #0C1016 - charcoal header base */
    --hpa-header-background-alt: #141B24; /* Slate Charcoal - #141B24 - charcoal header gradient end */
    --hpa-header-text-color: #F9FAFB; /* Snow White - #F9FAFB - header text (high contrast) */
    --hpa-header-text-muted-color: #E5E7EB; /* Light Gray - #E5E7EB - header muted */

    --hpa-footer-background: #0B0B0C; /* Near-Black - #070A0E - footer darkest anchor */
    --hpa-footer-text-color: #F9FAFB; /* Snow White - #F9FAFB - footer text (high contrast) */
    --hpa-footer-text-muted-color: #E5E7EB; /* Light Gray - #E5E7EB - footer muted */

    --hpa-header-link-color: #F9FAFB; /* white - navbar link text on dark header (AA compliant) */
    --hpa-header-link-hover-color: #BFE7F3; /* Ice Teal - #BFE7F3 - navbar hover/active text on dark header (AA compliant) */
    --hpa-nav-tab-color: rgba(177, 6, 22, 0.70); /* navbar tab indicator idle */
    --hpa-nav-tab-hover-color: rgba(177, 6, 22, 0.92); /* navbar tab indicator hover */
    --hpa-nav-tab-active-color: var(--hpa-brand-mark-color); /* navbar tab indicator active */
    /*#endregion */
    /*#region Links / focus colors */

    --hpa-link-color: var(--hpa-ui-red-deep); /* HPA Brand Red - default link */
    --hpa-link-hover-color: var(--hpa-ui-red-mid); /* Slightly brighter on hover/focus */
    --hpa-link-on-dark-color: #F9FAFB; /* Near-white (ADA/WCAG on dark backgrounds) */
    --hpa-link-on-dark-hover-color: #FFFFFF; /* Pure white on hover/focus */
    /*#endregion */
    /*#region Shadow colors */

    --hpa-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.08); /* Soft Shadow - rgba(16, 24, 40, 0.08) - subtle */
    --hpa-shadow-md: 0 10px 26px rgba(16, 24, 40, 0.12); /* Elevated Shadow - rgba(16, 24, 40, 0.12) - elevated */
    /*#endregion */
    /*#region Bootstrap variable overrides */

    --bs-body-color: var(--hpa-text-color);
    --bs-primary: var(--hpa-primary-color);
    --bs-secondary: var(--hpa-secondary-color);
    --bs-danger: var(--hpa-accent-color);
    --bs-link-color: var(--hpa-link-color);
    --bs-link-hover-color: var(--hpa-link-hover-color);
    --bs-border-color: var(--hpa-outer-border-color);
    --bs-tertiary-bg: var(--hpa-surface-alt-background);
    --bs-secondary-color: var(--hpa-text-muted-color);
    --bs-emphasis-color: var(--hpa-text-color);
    --hpa-carousel-indicator-track-bg: rgba(8, 27, 52, 0.52);
    --hpa-carousel-indicator-track-border: rgba(255, 255, 255, 0.18);
    --hpa-carousel-indicator-dot-border: rgba(255, 255, 255, 0.72);
    --hpa-carousel-indicator-dot-bg: rgba(255, 255, 255, 0.00);
    --hpa-cap-gradient: linear-gradient(180deg, var(--hpa-ui-red-mid) 0%, var(--hpa-ui-red-deep) 72%, var(--hpa-ui-red-deep) 100%);
    --hpa-cap-sheen: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.10) 28%, rgba(255,255,255,0.00) 62%);
    --hpa-cap-texture: repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.08) 2px, rgba(255,255,255,0.00) 2px, rgba(255,255,255,0.00) 9px);
    --hpa-cap-separator: rgba(255,255,255,0.20);
    --hpa-inset-highlight: rgba(255, 255, 255, 0.55);
    --hpa-footer-gradient: linear-gradient(180deg, #0B0B0C 0%, #0A0A0B 100%);
    --hpa-round-lg: 18px;
    --hpa-round-md: 14px;
    --simple-contact-background: var(--hpa-header-background);
    --simple-contact-text-color: var(--hpa-header-text-color);
    /*#endregion */

    --hero-subtitle-color: rgba(255, 255, 255, 0.76);
    --spinner-bg: rgba(54, 59, 66, 0.8);
}
/*#endregion */

/*#region  Base page color assignments */
body {
    background-color: var(--hpa-page-background);
    color: var(--hpa-text-color);
}

a {
    text-decoration-color: var(--hpa-link-color) !important;
}

    a:hover,
    a:focus,
    a:active,
    a:focus-visible {
        text-decoration-color: var(--hpa-link-hover-color) !important;
    }

@media (max-width: 1199.98px) {
    .navbar #navbarSupportedContent.show .nav-link:hover,
    .navbar #navbarSupportedContent.show .nav-link:focus,
    .navbar #navbarSupportedContent.show .nav-link:focus-visible,
    .navbar #navbarSupportedContent.collapsing .nav-link:hover,
    .navbar #navbarSupportedContent.collapsing .nav-link:focus,
    .navbar #navbarSupportedContent.collapsing .nav-link:focus-visible {
        text-decoration-color: var(--hpa-link-hover-color) !important; 
    }

    /* Optional: if by “highlighted” you also mean the current page (.active), give it an underline too */
    .navbar #navbarSupportedContent.show .nav-link.active,
    .navbar #navbarSupportedContent.collapsing .nav-link.active {
        text-decoration-color: var(--hpa-link-color) !important;
    }
}

a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item) {
    color: var(--hpa-link-color);
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: .25rem;
    text-decoration-skip-ink: auto;
}


a:not(.btn):not(.nav-link):not(.navbar-brand):visited {
    color: var(--hpa-link-color);
}

a:not(.btn):not(.nav-link):not(.navbar-brand):hover,
a:not(.btn):not(.nav-link):not(.navbar-brand):focus {
    color: var(--hpa-link-hover-color);
}

/* Link variant for dark backgrounds (apply this class to the <a>) */
.link-on-dark {
    color: var(--hpa-link-on-dark-color);
    text-decoration: underline;
    text-decoration-thickness: 1.75px;
    text-underline-offset: 0.18rem;
    text-decoration-skip-ink: auto;
    transition: color 140ms ease, text-decoration-thickness 140ms ease, text-decoration-color 140ms ease;
}


    .link-on-dark:visited {
        color: var(--hpa-link-on-dark-color);
    }

    .link-on-dark:hover,
    .link-on-dark:focus {
        color: var(--hpa-link-on-dark-hover-color);
        text-decoration-thickness: 3px;
    }
/*#endregion */

/*#region  Strong, visible keyboard focus (ADA/WCAG) */

:focus-visible {
    outline: 3px solid var(--hpa-focus-ring-color);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/*#endregion */

/*#region  High-level utility/concept classes (use in Razor views) */

.hpa-surface {
    background-color: var(--hpa-surface-background);
    color: var(--hpa-text-color);
}

.hpa-surface-alt {
    background-color: var(--hpa-surface-alt-background);
    color: var(--hpa-text-color);
}

.hpa-section-tint {
    background-color: var(--hpa-primary-soft-color);
    color: var(--hpa-text-color);
}

.hpa-band {
    background-color: var(--hpa-surface-raised-background);
    color: var(--hpa-text-inverse-color);
}

.hpa-title-inverse {
    color: var(--hpa-text-inverse-color);
    text-decoration: underline;
    text-decoration-color: var(--hpa-brand-mark-color)
}

.hpa-brand-bar {
    border-top: 6px solid var(--hpa-brand-mark-color);
}

.hpa-callout {
    background-color: var(--hpa-surface-background);
    border-left: 6px solid var(--hpa-accent-color);
    box-shadow: var(--hpa-shadow-sm);
}

.hpa-ai {
    background-color: var(--hpa-surface-raised-background);
    border: 1px solid var(--hpa-outer-border-color);
}

.hpa-title-mark {
    padding-bottom: 0;
    border-bottom: 0;
}
/*#endregion */

/*#region  Navbar High Contrast Colors */

.navbar {
    background: linear-gradient(90deg, var(--hpa-header-background), var(--hpa-header-background-alt)) !important;
    border-bottom: none !important;
}

    /* Thin brand red bar  */
    .navbar::before {
        content: "";
        display: block;
        height: 6px;
        background: var(--hpa-brand-mark-color);
    }

    /* Override Bootstrap navbar-light colors (split brand vs links) */
    .navbar .navbar-brand,
    .navbar.navbar-light .navbar-brand,
    .navbar-light .navbar-brand {
        color: var(--hpa-header-link-color) !important;
        opacity: 1 !important;
    }

    .navbar .navbar-nav .nav-link,
    .navbar.navbar-light .navbar-nav .nav-link,
    .navbar-light .navbar-nav .nav-link {
        color: var(--hpa-header-link-color) !important;
        opacity: 1 !important;
        box-shadow: inset 0 -2px 0 var(--hpa-link-color); /* CHANGED */
    }

    .navbar .navbar-text {
        color: var(--hpa-header-text-muted-color) !important;
    }

    /* Hover/focus for nav links */
    .navbar .navbar-nav .nav-link:hover,
    .navbar .navbar-nav .nav-link:focus {
        color: var(--hpa-header-link-hover-color) !important;
        text-decoration: underline;
        text-underline-offset: 0.25rem;
        text-decoration-color: var(--hpa-link-hover-color) !important; /* CHANGED */
        box-shadow: inset 0 -3px 0 var(--hpa-link-hover-color); /* CHANGED */
    }

    /* Active state: not color-only (underline border) */
    .navbar .navbar-nav .nav-link.active,
    .navbar .navbar-nav .show > .nav-link {
        color: var(--hpa-header-link-hover-color) !important;
        border-bottom: 2px solid var(--hpa-brand-mark-color);
        box-shadow: inset 0 -3px 0 var(--hpa-link-color); /* CHANGED */
    }

    /* Navbar hamburger (toggler) — HPA Brand Red (box + lines) */
    .navbar .navbar-toggler {
        border-color: var(--hpa-brand-mark-color) !important; /* box */
        color: var(--hpa-brand-mark-color) !important; /* drives currentColor for lines */
    }

    .navbar .navbar-toggler-icon {
        filter: none !important; /* overrides your invert/grayscale rule */
        background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor) !important;
        background-repeat: no-repeat;
        background-size: 100% 2px, 100% 2px, 100% 2px;
        background-position: 0 25%, 0 50%, 0 75%;
    }

    .navbar .navbar-toggler:hover {
        border-color: var(--hpa-ui-red-mid) !important;
        color: var(--hpa-ui-red-mid) !important;
    }

    /* Strong focus ring on dark header */
    .navbar a:focus-visible,
    .navbar button:focus-visible {
        outline: 3px solid var(--hpa-focus-ring-on-dark-color);
        outline-offset: 2px;
        border-radius: 0.25rem;
    }

    /* Dropdown menu theming (all navbar dropdowns, incl. login) */
    .navbar .dropdown-menu {
        background-color: var(--hpa-header-background-alt);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-top: 3px solid var(--hpa-brand-mark-color);
        box-shadow: var(--hpa-shadow-md);
    }


        /* Keep the login dropdown from hugging the right edge / going off-screen */
        .navbar .dropdown-menu.login-dropdown-menu,
        .navbar .dropdown-menu.login-dropdown-menu[data-bs-popper] {
            right: 0.5rem;
            left: auto;
            max-width: calc(100vw - 1rem);
        }
        /* Support BOTH normal Bootstrap dropdown items AND the login partial's nav-link anchors */
        .navbar .dropdown-menu .dropdown-item,
        .navbar .dropdown-menu .nav-link {
            color: var(--hpa-header-link-color) !important;
            background-color: transparent;
            box-shadow: none !important;
            border-bottom: 0 !important;
        }

        /* Make .nav-link inside dropdown behave like .dropdown-item (login partial) */
        .navbar .dropdown-menu .nav-link {
            display: block;
            width: 100%;
            padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
            /* Make login dropdown links look like Bootstrap dropdown-items */
            font-weight: 400;
            white-space: nowrap;
            clear: both;
        }

            .navbar .dropdown-menu .dropdown-item:hover,
            .navbar .dropdown-menu .dropdown-item:focus,
            .navbar .dropdown-menu .nav-link:hover,
            .navbar .dropdown-menu .nav-link:focus {
                color: var(--hpa-header-link-color) !important;
                background-color: rgba(21, 96, 130, 0.18);
                text-decoration: underline !important;
                text-underline-offset: 0.25rem;
                text-decoration-color: var(--hpa-link-hover-color) !important; /* CHANGED */
                /* Prevent navbar "tab" underline styles from leaking into dropdown items */
                box-shadow: none !important;
                border-bottom: 0 !important;
            }

            .navbar .dropdown-menu .dropdown-item.active,
            .navbar .dropdown-menu .dropdown-item:active,
            .navbar .dropdown-menu .nav-link.active,
            .navbar .dropdown-menu .nav-link:active {
                color: var(--hpa-header-link-hover-color) !important;
                background-color: rgba(200, 16, 45, 0.22);
                box-shadow: none !important;
                border-bottom: 0 !important;
                text-decoration: none !important;
            }

        .navbar .dropdown-menu .dropdown-divider {
            border-top-color: rgba(255, 255, 255, 0.14);
        }

    /* Dropdown caret color */
    .navbar .dropdown-toggle::after {
        border-top-color: var(--hpa-header-link-color);
    }

    .navbar .dropdown-toggle:hover::after,
    .navbar .dropdown-toggle:focus::after {
        border-top-color: var(--hpa-header-link-hover-color);
    }
/*#endregion */

/*#region NavBar Hamburger Menu*/


/* Anchor for the floating panel */

@media (max-width: 1199.98px) {
    /* The open hamburger panel should behave like a dropdown menu */
    .navbar #navbarSupportedContent.show,
    .navbar #navbarSupportedContent.collapsing {
        background-color: var(--hpa-header-background-alt);
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: var(--hpa-shadow-md);
    }

        .navbar #navbarSupportedContent.show .nav-link,
        .navbar #navbarSupportedContent.collapsing .nav-link {
            color: var(--hpa-header-link-color) !important;
        }

    /*undo the visual distinction of the login partial in hamburger menu when screen resizes and the hamburger is no longer used*/
    .navbar #navbarSupportedContent > *:last-child {
        border-top: 0;
        /* visually separate the login partial in the hamburger menu */
        .navbar #navbarSupportedContent.show > *:last-child,
        .navbar #navbarSupportedContent.collapsing > *:last-child {
            border-top: 1px solid rgba(255, 255, 255, 0.14);
        }
    }
}

/* Bigger tap targets; dropdown-item vibe */
.navbar #navbarSupportedContent.show .nav-link,
.navbar #navbarSupportedContent.collapsing .nav-link {
    color: var(--hpa-header-link-color) !important;
}


    .navbar #navbarSupportedContent.show .nav-link:hover,
    .navbar #navbarSupportedContent.show .nav-link:focus,
    .navbar #navbarSupportedContent.collapsing .nav-link:hover,
    .navbar #navbarSupportedContent.collapsing .nav-link:focus {
        color: var(--hpa-header-link-hover-color) !important;
        background-color: rgba(21, 96, 130, 0.18);
        text-decoration: underline !important;
        text-underline-offset: 0.25rem;
        text-decoration-color: var(--hpa-link-hover-color) !important; /* CHANGED */
    }

    .navbar #navbarSupportedContent.show .nav-link.active,
    .navbar #navbarSupportedContent.show .show > .nav-link,
    .navbar #navbarSupportedContent.collapsing .nav-link.active,
    .navbar #navbarSupportedContent.collapsing .show > .nav-link {
        color: var(--hpa-header-link-hover-color) !important;
        background-color: rgba(200, 16, 45, 0.22);
    }


    /*#endregion*/

    /*#region  Footer (high contrast + underlined links) */

    footer, .footer {
        background-color: var(--hpa-footer-background) !important;
        background-image: var(--hpa-footer-gradient);
        color: var(--hpa-footer-text-color) !important;
        border-top: none !important;
    }

        footer p, footer span, footer li,
        .footer p, .footer span, .footer li {
            color: var(--hpa-footer-text-color) !important;
        }

        footer small, .footer small {
            color: var(--hpa-footer-text-muted-color) !important;
        }

        /* Underline links in the footer (not color-only) */
        footer a, .footer a {
            color: var(--hpa-footer-text-color) !important;
            text-decoration: underline;
            text-underline-offset: 0.25rem;
        }

            footer a:hover, footer a:focus,
            .footer a:hover, .footer a:focus {
                color: #FFFFFF !important;
            }

            /* Strong focus ring on dark footer */
            footer a:focus-visible,
            .footer a:focus-visible {
                outline: 3px solid var(--hpa-focus-ring-on-dark-color);
                outline-offset: 2px;
                border-radius: 0.25rem;
            }

    /*#endregion */

    /*#region  Buttons (HPA: brand-red primary, dark secondary, textured + dramatic hover, ADA-safe) */

    /* Button-only palette (scoped to buttons) */
    :root {
        --hpa-btn-primary-bg: var(--hpa-brand-mark-color); /* #B10616 */
        --hpa-btn-primary-hover-bg: var(--hpa-ui-red-darker); /* #8F0F1F */
        --hpa-btn-primary-focus: rgba(177, 6, 22, 0.35);
        --hpa-btn-secondary-bg: var(--hpa-header-background-alt); /* #141B24 */
        --hpa-btn-secondary-hover-bg: var(--hpa-header-background); /* #0C1016 */
        --hpa-btn-secondary-focus: rgba(12, 16, 22, 0.26);
        --hpa-btn-success-bg: #0F7A4A;
        --hpa-btn-success-hover-bg: #0C673E;
        --hpa-btn-success-focus: rgba(15, 122, 74, 0.30);
        --hpa-btn-info-bg: var(--hpa-primary-color); /* Trust Teal */
        --hpa-btn-info-hover-bg: var(--hpa-primary-hover-color);
        --hpa-btn-info-focus: var(--hpa-focus-ring-color);
        --hpa-btn-warning-bg: #D18B1F;
        --hpa-btn-warning-hover-bg: #B87414;
        --hpa-btn-warning-focus: rgba(209, 139, 31, 0.35);
        --hpa-btn-danger-bg: var(--hpa-logo-red); /* brighter alert red */
        --hpa-btn-danger-hover-bg: var(--hpa-ui-red-mid);
        --hpa-btn-danger-focus: rgba(226, 8, 27, 0.35);
        --hpa-btn-dark-bg: var(--hpa-page-background); /* Deep Navy */
        --hpa-btn-dark-hover-bg: var(--hpa-header-background);
        --hpa-btn-dark-focus: rgba(8, 27, 52, 0.30);
        --hpa-btn-light-bg: #F9FAFB;
        --hpa-btn-light-hover-bg: #EAF7FF;
        --hpa-btn-light-border: var(--hpa-border-strong-color);
        --hpa-btn-light-focus: rgba(21, 96, 130, 0.22);
        /* ADA fix: outline-warning text on white needs to be darker than amber */
        --hpa-btn-outline-warning-text: #8A5400; /* AA on white */
    }

    /* ---------- Solid buttons (use .btn.btn-* to beat Bootstrap ordering) ---------- */

    .btn.btn-primary {
        background-color: var(--hpa-btn-primary-bg);
        border-color: var(--hpa-btn-primary-bg);
        color: var(--hpa-text-inverse-color);
    }

        .btn.btn-primary:hover,
        .btn.btn-primary:focus {
            background-color: var(--hpa-btn-primary-hover-bg);
            border-color: var(--hpa-btn-primary-hover-bg);
            color: var(--hpa-text-inverse-color);
        }

        .btn.btn-primary:focus-visible,
        .btn-check:focus + .btn.btn-primary {
            box-shadow: 0 0 0 0.25rem var(--hpa-btn-primary-focus);
        }

    .btn.btn-secondary {
        background-color: var(--hpa-btn-secondary-bg);
        border-color: var(--hpa-btn-secondary-bg);
        color: var(--hpa-text-inverse-color);
    }

        .btn.btn-secondary:hover,
        .btn.btn-secondary:focus {
            background-color: var(--hpa-btn-secondary-hover-bg);
            border-color: var(--hpa-btn-secondary-hover-bg);
            color: var(--hpa-text-inverse-color);
        }

        .btn.btn-secondary:focus-visible,
        .btn-check:focus + .btn.btn-secondary {
            box-shadow: 0 0 0 0.25rem var(--hpa-btn-secondary-focus);
        }

    .btn.btn-success {
        background-color: var(--hpa-btn-success-bg);
        border-color: var(--hpa-btn-success-bg);
        color: var(--hpa-text-inverse-color);
    }

        .btn.btn-success:hover,
        .btn.btn-success:focus {
            background-color: var(--hpa-btn-success-hover-bg);
            border-color: var(--hpa-btn-success-hover-bg);
            color: var(--hpa-text-inverse-color);
        }

        .btn.btn-success:focus-visible,
        .btn-check:focus + .btn.btn-success {
            box-shadow: 0 0 0 0.25rem var(--hpa-btn-success-focus);
        }

    .btn.btn-info {
        background-color: var(--hpa-btn-info-bg);
        border-color: var(--hpa-btn-info-bg);
        color: var(--hpa-text-inverse-color);
    }

        .btn.btn-info:hover,
        .btn.btn-info:focus {
            background-color: var(--hpa-btn-info-hover-bg);
            border-color: var(--hpa-btn-info-hover-bg);
            color: var(--hpa-text-inverse-color);
        }

        .btn.btn-info:focus-visible,
        .btn-check:focus + .btn.btn-info {
            box-shadow: 0 0 0 0.25rem var(--hpa-btn-info-focus);
        }

    /* Warning uses dark text for contrast (Bootstrap convention) */
    .btn.btn-warning {
        background-color: var(--hpa-btn-warning-bg);
        border-color: var(--hpa-btn-warning-bg);
        color: #0C1016;
    }

        .btn.btn-warning:hover,
        .btn.btn-warning:focus {
            background-color: var(--hpa-btn-warning-hover-bg);
            border-color: var(--hpa-btn-warning-hover-bg);
            color: #0C1016;
        }

        .btn.btn-warning:focus-visible,
        .btn-check:focus + .btn.btn-warning {
            box-shadow: 0 0 0 0.25rem var(--hpa-btn-warning-focus);
        }

    .btn.btn-danger {
        background-color: var(--hpa-btn-danger-bg);
        border-color: var(--hpa-btn-danger-bg);
        color: var(--hpa-text-inverse-color);
    }

        .btn.btn-danger:hover,
        .btn.btn-danger:focus {
            background-color: var(--hpa-btn-danger-hover-bg);
            border-color: var(--hpa-btn-danger-hover-bg);
            color: var(--hpa-text-inverse-color);
        }

        .btn.btn-danger:focus-visible,
        .btn-check:focus + .btn.btn-danger {
            box-shadow: 0 0 0 0.25rem var(--hpa-btn-danger-focus);
        }

    .btn.btn-dark {
        background-color: var(--hpa-btn-dark-bg);
        border-color: var(--hpa-btn-dark-bg);
        color: var(--hpa-text-inverse-color);
    }

        .btn.btn-dark:hover,
        .btn.btn-dark:focus {
            background-color: var(--hpa-btn-dark-hover-bg);
            border-color: var(--hpa-btn-dark-hover-bg);
            color: var(--hpa-text-inverse-color);
        }

        .btn.btn-dark:focus-visible,
        .btn-check:focus + .btn.btn-dark {
            box-shadow: 0 0 0 0.25rem var(--hpa-btn-dark-focus);
        }

    .btn.btn-light {
        background-color: var(--hpa-btn-light-bg);
        border-color: var(--hpa-btn-light-border);
        color: var(--hpa-text-color);
    }

        .btn.btn-light:hover,
        .btn.btn-light:focus {
            background-color: var(--hpa-btn-light-hover-bg);
            border-color: var(--hpa-btn-light-border);
            color: var(--hpa-text-color);
        }

        .btn.btn-light:focus-visible,
        .btn-check:focus + .btn.btn-light {
            box-shadow: 0 0 0 0.25rem var(--hpa-btn-light-focus);
        }

    /* Link button stays Trust Teal */
    .btn.btn-link {
        color: var(--hpa-link-color);
    }

        .btn.btn-link:hover,
        .btn.btn-link:focus {
            color: var(--hpa-link-hover-color);
        }

    /* ---------- Outline buttons ---------- */

    .btn.btn-outline-primary {
        color: var(--hpa-btn-primary-bg);
        border-color: var(--hpa-btn-primary-bg);
    }

        .btn.btn-outline-primary:hover,
        .btn.btn-outline-primary:focus {
            background-color: var(--hpa-btn-primary-bg);
            border-color: var(--hpa-btn-primary-bg);
            color: var(--hpa-text-inverse-color);
        }

        .btn.btn-outline-primary:focus-visible,
        .btn-check:focus + .btn.btn-outline-primary {
            box-shadow: 0 0 0 0.25rem var(--hpa-btn-primary-focus);
        }

    .btn.btn-outline-secondary {
        color: var(--hpa-btn-secondary-bg);
        border-color: var(--hpa-btn-secondary-bg);
    }

        .btn.btn-outline-secondary:hover,
        .btn.btn-outline-secondary:focus {
            background-color: var(--hpa-btn-secondary-bg);
            border-color: var(--hpa-btn-secondary-bg);
            color: var(--hpa-text-inverse-color);
        }

        .btn.btn-outline-secondary:focus-visible,
        .btn-check:focus + .btn.btn-outline-secondary {
            box-shadow: 0 0 0 0.25rem var(--hpa-btn-secondary-focus);
        }

    .btn.btn-outline-success {
        color: var(--hpa-btn-success-bg);
        border-color: var(--hpa-btn-success-bg);
    }

        .btn.btn-outline-success:hover,
        .btn.btn-outline-success:focus {
            background-color: var(--hpa-btn-success-bg);
            border-color: var(--hpa-btn-success-bg);
            color: var(--hpa-text-inverse-color);
        }

        .btn.btn-outline-success:focus-visible,
        .btn-check:focus + .btn.btn-outline-success {
            box-shadow: 0 0 0 0.25rem var(--hpa-btn-success-focus);
        }

    .btn.btn-outline-info {
        color: var(--hpa-btn-info-bg);
        border-color: var(--hpa-btn-info-bg);
    }

        .btn.btn-outline-info:hover,
        .btn.btn-outline-info:focus {
            background-color: var(--hpa-btn-info-bg);
            border-color: var(--hpa-btn-info-bg);
            color: var(--hpa-text-inverse-color);
        }

        .btn.btn-outline-info:focus-visible,
        .btn-check:focus + .btn.btn-outline-info {
            box-shadow: 0 0 0 0.25rem var(--hpa-btn-info-focus);
        }

    /* ADA FIX: darker outline-warning label on white */
    .btn.btn-outline-warning {
        color: var(--hpa-btn-outline-warning-text);
        border-color: var(--hpa-btn-outline-warning-text);
    }

        .btn.btn-outline-warning:hover,
        .btn.btn-outline-warning:focus {
            background-color: var(--hpa-btn-warning-bg);
            border-color: var(--hpa-btn-warning-bg);
            color: #0C1016;
        }

        .btn.btn-outline-warning:focus-visible,
        .btn-check:focus + .btn.btn-outline-warning {
            box-shadow: 0 0 0 0.25rem var(--hpa-btn-warning-focus);
        }

    .btn.btn-outline-danger {
        color: var(--hpa-btn-danger-bg);
        border-color: var(--hpa-btn-danger-bg);
    }

        .btn.btn-outline-danger:hover,
        .btn.btn-outline-danger:focus {
            background-color: var(--hpa-btn-danger-bg);
            border-color: var(--hpa-btn-danger-bg);
            color: var(--hpa-text-inverse-color);
        }

        .btn.btn-outline-danger:focus-visible,
        .btn-check:focus + .btn.btn-outline-danger {
            box-shadow: 0 0 0 0.25rem var(--hpa-btn-danger-focus);
        }

    .btn.btn-outline-dark {
        color: var(--hpa-btn-dark-bg);
        border-color: var(--hpa-btn-dark-bg);
    }

        .btn.btn-outline-dark:hover,
        .btn.btn-outline-dark:focus {
            background-color: var(--hpa-btn-dark-bg);
            border-color: var(--hpa-btn-dark-bg);
            color: var(--hpa-text-inverse-color);
        }

        .btn.btn-outline-dark:focus-visible,
        .btn-check:focus + .btn.btn-outline-dark {
            box-shadow: 0 0 0 0.25rem var(--hpa-btn-dark-focus);
        }

    /* ADA FIX: outline-light should be visible on light surfaces by default */
    .btn.btn-outline-light {
        color: var(--hpa-text-color);
        border-color: var(--hpa-border-strong-color);
    }

        .btn.btn-outline-light:hover,
        .btn.btn-outline-light:focus {
            background-color: rgba(17, 24, 39, 0.06);
            border-color: var(--hpa-border-strong-color);
            color: var(--hpa-text-color);
        }
    /* But in dark header/footer contexts, keep it “light” */
    .navbar .btn.btn-outline-light,
    footer .btn.btn-outline-light,
    .footer .btn.btn-outline-light {
        color: var(--hpa-text-inverse-color);
        border-color: rgba(255, 255, 255, 0.65);
    }

        .navbar .btn.btn-outline-light:hover,
        .navbar .btn.btn-outline-light:focus,
        footer .btn.btn-outline-light:hover,
        footer .btn.btn-outline-light:focus,
        .footer .btn.btn-outline-light:hover,
        .footer .btn.btn-outline-light:focus {
            background-color: rgba(255, 255, 255, 0.14);
            border-color: rgba(255, 255, 255, 0.75);
            color: var(--hpa-text-inverse-color);
        }

    /* ---------- Texture + dramatic hover (button-only) ---------- */

    :root {
        --hpa-btn-sheen: linear-gradient( 180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.10) 28%, rgba(255,255,255,0.00) 62%, rgba(0,0,0,0.18) 100% );
        --hpa-btn-texture: repeating-linear-gradient( 135deg, rgba(255,255,255,0.12) 0px, rgba(255,255,255,0.12) 2px, rgba(255,255,255,0.00) 2px, rgba(255,255,255,0.00) 9px ), repeating-linear-gradient( 45deg, rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 1px, rgba(0,0,0,0.00) 1px, rgba(0,0,0,0.00) 10px );
    }

    /* Glow color per type (ties hover glow to focus colors) */
    .btn-primary {
        --hpa-btn-glow: var(--hpa-btn-primary-focus);
    }

    .btn-secondary {
        --hpa-btn-glow: var(--hpa-btn-secondary-focus);
    }

    .btn-success {
        --hpa-btn-glow: var(--hpa-btn-success-focus);
    }

    .btn-info {
        --hpa-btn-glow: var(--hpa-btn-info-focus);
    }

    .btn-warning {
        --hpa-btn-glow: var(--hpa-btn-warning-focus);
    }

    .btn-danger {
        --hpa-btn-glow: var(--hpa-btn-danger-focus);
    }

    .btn-dark {
        --hpa-btn-glow: var(--hpa-btn-dark-focus);
    }

    .btn-light {
        --hpa-btn-glow: var(--hpa-btn-light-focus);
    }

    /* Base premium treatment (not btn-link) */
    .btn:not(.btn-link) {
        position: relative;
        overflow: hidden;
        background-image: var(--hpa-btn-sheen), var(--hpa-btn-texture);
        background-repeat: no-repeat, repeat;
        background-size: 140% 140%, 14px 14px;
        background-position: 0% 0%, 0 0;
        box-shadow: 0 10px 20px rgba(16, 24, 40, 0.22), inset 0 1px 0 rgba(255,255,255,0.22);
        transform: translateY(0) scale(1);
        transition: transform 170ms ease, box-shadow 220ms ease, filter 220ms ease, background-position 340ms ease, border-color 170ms ease;
    }

        /* Dramatic hover: lift + glow + sheen shift */
        .btn:not(.btn-link):hover {
            transform: translateY(-2px) scale(1.02);
            filter: saturate(1.10) contrast(1.06);
            background-position: 100% 0%, 0 0;
            box-shadow: 0 16px 34px rgba(16, 24, 40, 0.34), inset 0 1px 0 rgba(255,255,255,0.26), 0 0 0 0.22rem var(--hpa-btn-glow, rgba(21, 96, 130, 0.22));
        }

        /* Sweep highlight */
        .btn:not(.btn-link)::after {
            content: "";
            position: absolute;
            inset: -40% -70%;
            pointer-events: none;
            background: linear-gradient( 120deg, rgba(255,255,255,0.00) 42%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.00) 58% );
            transform: translateX(-60%) rotate(10deg);
            opacity: 0;
            transition: transform 420ms ease, opacity 240ms ease;
        }

        .btn:not(.btn-link):hover::after {
            opacity: 1;
            transform: translateX(60%) rotate(10deg);
        }

        /* Pressed */
        .btn:not(.btn-link):active {
            transform: translateY(0) scale(0.99);
            box-shadow: 0 10px 18px rgba(16, 24, 40, 0.26), inset 0 2px 10px rgba(0,0,0,0.22);
            filter: saturate(1.06) contrast(1.04);
        }

    /* Disabled */
.btn:disabled,
.btn.disabled {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    opacity: 0.55;
    cursor: not-allowed;
}

    /* Outline buttons: clean idle; texture shows once they fill (hover/focus) */
    .btn-outline-primary,
    .btn-outline-secondary,
    .btn-outline-success,
    .btn-outline-info,
    .btn-outline-warning,
    .btn-outline-danger,
    .btn-outline-dark,
    .btn-outline-light {
        background-image: none;
        box-shadow: 0 8px 16px rgba(16, 24, 40, 0.14);
    }

        .btn-outline-primary:hover,
        .btn-outline-secondary:hover,
        .btn-outline-success:hover,
        .btn-outline-info:hover,
        .btn-outline-warning:hover,
        .btn-outline-danger:hover,
        .btn-outline-dark:hover,
        .btn-outline-light:hover {
            background-image: var(--hpa-btn-sheen), var(--hpa-btn-texture);
            background-repeat: no-repeat, repeat;
            background-size: 140% 140%, 14px 14px;
        }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .btn,
        .btn::after {
            transition: none !important;
        }
    }

    /*#endregion */

    /*#region  Cards / tables / forms (ties the whole site to the theme) */
    .card {
        background-color: var(--hpa-surface-card-background);
        border: 0;
        box-shadow: var(--hpa-shadow-md), 0 0 0 3px var(--hpa-card-border-color);
        position: relative;
        overflow: hidden;
        border-radius: var(--hpa-round-lg);
    }

        /* Card top brand mark (clipped to rounded corners; avoids corner artifacts) */
        .card::before {
            content: none;
            display: none;
        }

        /* Keep card outline even when Bootstrap shadow utilities are present */
        .card.shadow-sm,
        .card.shadow,
        .card.shadow-lg {
            box-shadow: var(--hpa-shadow-md), 0 0 0 3px var(--hpa-card-border-color) !important;
        }

        /* Ensure header/content sit above the brand mark */
        .card > .card-header,
        .card > .card-body,
        .card > .card-footer {
            position: relative;
            z-index: 1;
        }

    .card-header {
        background-color: transparent;
        border-bottom: 0;
    }

    .card-footer {
        background-color: transparent;
        border-top: 0;
    }
    /* Table headers read as “designed,” not default */
    .table thead th {
        background-color: var(--hpa-surface-alt-background);
        color: var(--hpa-text-color);
        border-bottom-color: var(--hpa-border-strong-color);
    }

    /* Form focus is a major “brand feel” moment */
    .form-control,
    .form-select {
        background-color: var(--hpa-surface-background);
        color: var(--hpa-text-color);
        border-color: var(--hpa-outer-border-color);
    }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--hpa-primary-color);
            box-shadow: 0 0 0 0.25rem var(--hpa-focus-ring-color);
        }

    /*#endregion */

    /*#region  Alerts */

    .alert-primary {
        background-color: var(--hpa-primary-soft-color);
        border-color: var(--hpa-outer-border-color);
        color: var(--hpa-text-color);
    }

    .alert-secondary {
        background-color: var(--hpa-secondary-soft-color);
        border-color: var(--hpa-outer-border-color);
        color: var(--hpa-text-color);
    }

    .alert-danger {
        background-color: var(--hpa-accent-soft-color);
        border-color: var(--hpa-outer-border-color);
        color: var(--hpa-text-color);
    }
    /*#endregion */

    /*#region Accordion (HPA themed) */

    .accordion {
        --bs-accordion-bg: var(--hpa-surface-background);
        --bs-accordion-border-color: var(--hpa-outer-border-color);
        --bs-accordion-btn-color: var(--hpa-text-color);
        --bs-accordion-active-color: var(--hpa-text-color);
        --bs-accordion-btn-focus-border-color: var(--hpa-primary-color);
        --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--hpa-focus-ring-color);
    }

    /* Container look */
    .accordion-item {
        background-color: var(--hpa-surface-background);
        border-color: var(--hpa-outer-border-color);
        box-shadow: var(--hpa-shadow-sm);
        overflow: hidden;
        border-radius: var(--hpa-round-lg);
    }

    /* Header button: more color, still readable */
    .accordion-button {
        background-color: var(--hpa-surface-card-cap-background);
        color: var(--hpa-surface-card-cap-text-color);
        font-weight: 600;
        background-image: var(--hpa-cap-sheen), var(--hpa-cap-texture), var(--hpa-cap-gradient);
        background-repeat: no-repeat;
        background-size: cover;
        border: 0;
    }

        .accordion-button:not(.collapsed) {
            background-color: var(--hpa-surface-card-cap-background);
            color: var(--hpa-surface-card-cap-text-color);
            background-image: var(--hpa-cap-sheen), var(--hpa-cap-texture), var(--hpa-cap-gradient);
            box-shadow: none;
        }

        .accordion-button::after {
            filter: none;
        }

        /* make the open item feel “selected” with a thin top line */
        .accordion-button:not(.collapsed) {
            border-bottom: 3px solid var(--hpa-brand-mark-color);
        }

    /*#endregion */

    /*#region mats*/
    .simple-contact-mat {
        /* Distinct from page (#F6F3F2) and surfaces (#FFF / #F0F3F4) */
        background-color: var(--simple-contact-background); /* warm linen mat */
        color: var(--simple-contact-text-color);
        border: 3px solid var(--hpa-border-strong-color);
        border-radius: 2rem;
    }

.hpa-panel,
.hpa-mat {
    background-color: var(--hpa-mat-color); /*frost white*/
}

.image-mat {
    background-color: var(--image-mat-color); /*cloud gray*/
}

.hpa-panel,
.hpa-mat,
.image-mat {
    /* Distinct from page (#F6F3F2) and surfaces (#FFF / #F0F3F4) */
    border: 2px solid var(--hpa--inner-border-color);
    border-radius: 0.75rem;
    /* “Mounted” feel: soft outer lift + inner paper edge */
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.70);
}
        /* Optional: make the image itself feel seated on the mat */
        .image-mat img.image-viewer {
            border-radius: 0.5rem;
            box-shadow: 0 1px 2px rgba(16, 24, 40, 0.10);
        }
    /*#endregion*/

    /*#region Panels: Cards Accordions Modals Carousels */
    /* Cards */
    .card {
        background-color: var(--hpa-surface-card-background);
    }
        /* Make the card cap fully cover the card border (removes thin white lines on left/right) */
        .card > .card-header {
            background-color: var(--hpa-surface-card-cap-background);
            color: var(--hpa-surface-card-cap-text-color);
            background-repeat: no-repeat;
            background-size: cover;
            border: 0;
            border-bottom: 1px solid var(--hpa-cap-separator);
            border-top-left-radius: var(--hpa-round-lg);
            border-top-right-radius: var(--hpa-round-lg);
        }

    .card-header a:hover,
    .card-header a:focus-visible {
        color: #FFFFFF;
        text-decoration: none;
    }
    /* Brighter card body + subtle glossy highlight without gradients */
.card-body {
    background-color: var(--hpa-surface-card-background);
}
    /* Card footer needs darker offset to visually "cap" the bottom */
    .card > .card-footer {
        background-color: var(--hpa-surface-card-footer-background);
        border: 0;
        border-top: 1px solid var(--hpa-card-divider-color);
        box-shadow: inset 0 1px 0 var(--hpa-inset-highlight);
    }
    /* View-component content footers (Cards + Carousel slide cards)
   - Black background with a 5px brand-red top border (requested)
   - Keeps footer text/buttons readable on dark background
*/
    .card > .card-footer {
        background-color: var(--hpa-footer-background) !important;
        color: var(--hpa-footer-text-color) !important;
        border-top: 5px solid var(--hpa-brand-mark-color) !important;
        background-image: none !important;
        box-shadow: none !important;
    }

        .card > .card-footer a {
            color: var(--hpa-footer-text-color) !important;
            text-decoration: underline;
            text-underline-offset: 0.25rem;
        }
    /* Carousel slides use .bg-transparent on the footer; override that too */
    .hpa-carousel-slide-card .card-footer.bg-transparent {
        background-color: var(--hpa-footer-background) !important;
        color: var(--hpa-footer-text-color) !important;
        border-top: 5px solid var(--hpa-brand-mark-color) !important;
        background-image: none !important;
        box-shadow: none !important;
    }
    /* Accordions (match cards) */
    .accordion-item {
        background-color: var(--hpa-surface-card-background);
        border-color: var(--hpa-outer-border-color);
    }

    .accordion-button {
        background-color: var(--hpa-surface-card-cap-background);
        background-image: var(--hpa-cap-sheen), var(--hpa-cap-texture), var(--hpa-cap-gradient);
        background-repeat: no-repeat;
        background-size: cover;
        color: var(--hpa-surface-card-cap-text-color);
        box-shadow: none;
    }

        .accordion-button.collapsed {
            background-color: var(--hpa-surface-card-cap-background);
            color: var(--hpa-surface-card-cap-text-color);
        }

        .accordion-button:focus {
            border-color: transparent;
            box-shadow: 0 0 0 0.15rem var(--hpa-focus-ring-color);
        }

    .accordion-body {
        background-color: var(--hpa-surface-card-background);
        box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.90), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
    }
    /* Modals (match cards) */
    .modal-content {
        background-color: var(--hpa-surface-card-background);
        border-color: var(--hpa-outer-border-color);
        border-radius: var(--hpa-round-lg);
        overflow: hidden;
    }

    .modal-header {
        background-color: var(--hpa-surface-card-cap-background);
        background-image: var(--hpa-cap-sheen), var(--hpa-cap-texture), var(--hpa-cap-gradient);
        background-repeat: no-repeat;
        background-size: cover;
        color: var(--hpa-surface-card-cap-text-color);
        border-bottom-color: var(--hpa-outer-border-color);
    }

    .modal-body {
        background-color: var(--hpa-surface-card-background);
        box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.90), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
    }

    .modal-footer {
        background-color: var(--hpa-footer-background) !important;
        color: var(--hpa-footer-text-color) !important;
        border-top: 5px solid var(--hpa-brand-mark-color) !important;
        background-image: none !important;
        box-shadow: none !important;
    }
    /* Carousels (controls + indicators visible again) */
    /* Carousel slide buttons (indicators) must be visible */
    .hpa-carousel-card .carousel-indicators {
        gap: 0.65rem;
        margin: 0;
        padding: 0.45rem 0.85rem;
        background-color: var(--hpa-carousel-indicator-track-bg);
        border: 1px solid var(--hpa-carousel-indicator-track-border);
        border-radius: 999px;
        width: fit-content;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0.65rem;
        z-index: 6;
    }

        .hpa-carousel-card .carousel-indicators [data-bs-target] {
            width: 0.60rem;
            height: 0.60rem;
            border-radius: 999px;
            background-color: var(--hpa-carousel-indicator-dot-bg);
            border: 2px solid var(--hpa-carousel-indicator-dot-border);
            opacity: 1;
        }
            /* Selected indicator: fill and ring match the brand red */
            .hpa-carousel-card .carousel-indicators [data-bs-target].active,
            .hpa-carousel-card .carousel-indicators [data-bs-target][aria-current="true"],
            .carousel-indicators .active {
                background-color: var(--hpa-brand-mark-color);
                border-color: var(--hpa-brand-mark-color);
            }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 2.2rem;
        height: 2.2rem;
        background-color: var(--hpa-carousel-control-background);
        border-radius: 999px;
        box-shadow: 0 6px 16px var(--hpa-carousel-control-shadow);
        background-size: 1.1rem 1.1rem;
        background-repeat: no-repeat;
        background-position: center;
    }
    /* Force visible carousel control icons (dashboard + all carousels) */
    .hpa-carousel-card .carousel-control-prev-icon,
    .hpa-carousel-card .carousel-control-next-icon,
    .carousel .carousel-control-prev-icon,
    .carousel .carousel-control-next-icon {
        filter: none !important;
        background-color: var(--hpa-carousel-control-background) !important;
    }

    .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFFFFF' d='M11.5 1.5a1 1 0 0 1 0 1.4L6.4 8l5.1 5.1a1 1 0 0 1-1.4 1.4l-5.8-5.8a1 1 0 0 1 0-1.4l5.8-5.8a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") !important;
    }

    .carousel-control-next-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFFFFF' d='M4.5 14.5a1 1 0 0 1 0-1.4L9.6 8 4.5 2.9a1 1 0 1 1 1.4-1.4l5.8 5.8a1 1 0 0 1 0 1.4l-5.8 5.8a1 1 0 0 1-1.4 0z'/%3E%3C/svg%3E") !important;
    }
    /* Carousel slide cards should match the same card cap/body/footer scheme */
    .hpa-carousel-slide-card .card-header.bg-transparent {
        background-color: var(--hpa-surface-card-cap-background) !important;
        color: var(--hpa-surface-card-cap-text-color) !important;
        background-image: var(--hpa-cap-sheen), var(--hpa-cap-texture), var(--hpa-cap-gradient) !important;
        background-repeat: no-repeat;
        background-size: cover;
        border: 0;
        border-bottom: 1px solid var(--hpa-cap-separator);
    }

    .hpa-carousel-slide-card .card-footer.bg-transparent {
        background-color: var(--hpa-surface-card-footer-background) !important;
        color: var(--hpa-surface-card-cap-text-color) !important;
        background-image: linear-gradient(0deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.10) 55%, rgba(255,255,255,0.18) 100%), var(--hpa-footer-gradient) !important;
        background-repeat: no-repeat;
        background-size: cover;
        border: 0;
        border-top: 1px solid var(--hpa-cap-separator);
    }

    .carousel {
        --bs-carousel-indicator-active-bg: var(--hpa-surface-card-cap-background);
    }

        .carousel .carousel-control-prev,
        .carousel .carousel-control-next {
            opacity: 1;
        }

        .carousel .carousel-control-prev-icon,
        .carousel .carousel-control-next-icon {
            width: 2.75rem;
            height: 2.75rem;
            border-radius: 999px;
            background-color: var(--hpa-carousel-control-background);
            background-size: 1.25rem 1.25rem;
            filter: invert(1);
            box-shadow: 0 8px 22px var(--hpa-carousel-control-shadow);
        }

    .carousel
    /* Ensure carousel “partials” that use cards keep the same scheme */
    .carousel .card, .carousel .card-body, .carousel .card-footer {
            background-color: var(--hpa-surface-card-background);
        }

        /* Hover: make carousel arrow pills turn red for clear affordance */
        .hpa-carousel-card .carousel-control-prev:hover .carousel-control-prev-icon,
        .hpa-carousel-card .carousel-control-next:hover .carousel-control-next-icon,
        .carousel .carousel-control-prev:hover .carousel-control-prev-icon,
        .carousel .carousel-control-next:hover .carousel-control-next-icon {
            background-color: var(--hpa-brand-mark-color) !important;
        }

    /*#endregion Panels: Cards Accordions Modals Carousels */

.pipeline-arrow-down path {
    stroke: var(--hpa-text-inverse-color);
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.20));
}

.hero-sub-text-scale {
    color: rgba(255, 255, 255, 0.76);
}


#loadingSpinner.custom-color {
    background: var(--spinner-bg);
}

.spinner-color {
    color: var(--hpa-accent-color);
}