/* input(439,17): run-time error CSS1035: Expected colon, found '#navbarSupportedContent' */
/* input(438,17): run-time error CSS1035: Expected colon, found '#navbarSupportedContent' */
/* ==========================================================================
   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);
}


body {
    font-size: .85rem;
    line-height: 1.25;
}

.btn {
    font-size: 0.9rem
}

.service-line-category-overview-title-text {
    font-size: calc(1.1rem);
    font-weight: bold;
}

.service-line-category-detail-title-text {
    font-size: calc(.85rem);
    font-weight: bold;
}

.service-overview-title-text {
    font-size: calc(1rem + .3vw);
    font-weight: bold;
}

.hpa-contact-title {
    font-size: calc(1.3rem + .6vw);
}
.who-we-serve-title {
    font-size: calc(.75rem);
}

.hero-text-scale {
    font-size: calc(.75rem + .6vw);
    line-height: 1.15;
}

.hero-sub-text-scale {
    font-size: calc(.5rem + .5vw);
    font-style: italic;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

/* sm and up */
@media (min-width: 576px) {
    body {
        font-size: 1rem;
    }
    .who-we-serve-title {
        font-size: calc(1.25rem);
    }
    .hero-text-scale {
        font-size: calc(1.25rem + .6vw);
    }
    .hero-sub-text-scale {
        font-size: calc(.65rem + .55vw);
    }
    .service-overview-title-text {
        font-size: calc(1.4rem + .6vw);
    }
    .service-line-category-overview-title-text {
        font-size: calc(1.3rem);
    }
    .service-line-category-detail-title-text {
        font-size: calc(1.2rem);
    }
}

/* md and up */
@media (min-width: 768px) {
    body {
        font-size: 1rem;
    }
    .who-we-serve-title {
        font-size: calc(1.3rem + .6vw);
    }
    .hero-text-scale {
        font-size: calc(1rem + .6vw);
    }

    .hero-sub-text-scale {
        font-size: calc(.6rem + .5vw);
    }
    .service-overview-title-text {
        font-size: calc(1.7rem + .6vw);
    }
}
.service-line-category-overview-title-text {
    font-size: calc(1.3rem + .6vw);
}

.service-line-category-detail-title-text {
    font-size: calc(1.2rem + .3vw);
}

/* lg and up */
@media (min-width: 992px) {
    .who-we-serve-title {
        font-size: calc(.65rem + .6vw);
    }
    .hero-text-scale {
        font-size: calc(1.1rem + .6vw);
    }
    .hero-sub-text-scale {
        font-size: calc(.68rem + .48vw);
    }
    .service-overview-title-text {
        font-size: calc(1.2rem + .5vw);
    }
    .service-line-category-detail-title-text {
        font-size: calc(1rem + .3vw);
    }
}

/* xl and up */
@media (min-width: 1200px) {
    body {
        font-size: 1.15rem;
    }
    .hpa-contact-title {
        font-size: calc(1.35rem);
    }
    .who-we-serve-title {
        font-size: calc(.8rem + .6vw);
    }

    .hero-text-scale {
        font-size: calc(1.3rem + .5vw);
    }

    .hero-sub-text-scale {
        font-size: calc(.8rem + .4vw);
    }

    .service-overview-title-text {
        font-size: calc(1rem + .3vw);
    }
}

/* xxl and up */
@media (min-width: 1400px) {
    .who-we-serve-title {
        font-size: calc(1.3);
    }

    .hero-text-scale {
        font-size: calc(1.4rem + .5vw);
    }

    .hero-sub-text-scale {
        font-size: calc(.9rem + .4vw);
    }

    .service-overview-title-text {
        font-size: calc(1.1rem + .3vw);
    }
}

/* 1080p (assume 1.25 windows scaling and up) */
@media (min-width: 1536px) {
    .who-we-serve-title {
        font-size: calc(1.3);
    }

    .hero-text-scale {
        font-size: calc(1.5rem + .6vw);
    }
    .service-overview-title-text {
        font-size: calc(1rem + .2vw);
    }

}

/* 4k and up (assume 1.5 windows scaling and up)*/
@media (min-width: 2560px) {
    .who-we-serve-title {
        font-size: calc(1.3);
    }

    .hero-text-scale {
        font-size: calc(2.5rem + .6vw);
    }
    .hero-sub-text-scale {
        font-size: calc(1.1rem + .3vw);
    }
    .service-overview-title-text {
        font-size: calc(1rem + .2vw);
    }
}

.hero-home {
    --hero-fit-top: 0px;
    --hero-fit-height: 100%;
    --hero-fit-bottom-gap: 0px;
    --hero-nav-indent: 0px;
}

    .hero-home .hero-home-bg {
        top: var(--hero-fit-top) !important;
        height: var(--hero-fit-height) !important;
    }
        .hero-home .hero-home-bg > div {
            padding-left: var(--hero-nav-indent);
        }
    .hero-home .hero-home-foot {
        bottom: var(--hero-fit-bottom-gap) !important;
    }

.hero-home {
    position: relative;
    overflow: hidden;
    height: calc(100%);
    isolation: isolate; /* prevents z-index weirdness with outside elements */
    z-index: 999;
    background: #130E3C;
}

.hero-home-svg {
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    z-index: 999
}

.hero-home-foot-muted {
    color: rgba(255,255,255,.82);
    z-index: 999
}

/*xs and up*/
.hero-home-svg {
    transform: scale(2);
    object-position: left;
    z-index: 999
}

/* md and up */
@media (min-width: 768px) {
    .hero-home-svg {
        transform: scale(1.5);
        object-position: left;
    }
}

/* lg and up */
@media (min-width: 992px) {

    .hero-home-svg {
        transform: scale(1);
        object-position: center;
    }
}
@media screen {
    /*Ignore Spelling: Scrollable endregion*/
    :root {
        --header-height: 70px;
        --footer-height: 40px;
        --banner-area-height: 55px;
        --button-area-height: 45px;
        --contact-buttons-space: 10px;
        --contact-buttons-height: 10px;
    }

    html {
        position: relative;
        min-height: 100%;
    }

    body {
        margin-bottom: 60px;
    }


        body.hero-over-contact-panel .fixed-contact-panel {
            z-index: -1 !important;
            pointer-events: none;
        }

    .form {
        height: 100%
    }


    /*#region styles for fixed header and footer*/

    /* Style for the fixed header */
    .fixed-header {
        position: fixed;
        top: 0;
        width: 100%;
        height: var(--header-height);
        z-index: 1000;
        box-sizing: border-box;
        border-bottom: 5px solid var(--hpa-brand-mark-color);
        /*display: flex;*/
    }

    /* Fixed banner area inside the body */
    .fixed-banner-area {
        position: fixed;
        top: calc(var(--header-height));
        height: var(--banner-area-height);
        line-height: var(--banner-area-height);
        width: 100%; /* Ensure full width to allow proper alignment */
    }

    /* Fixed button area inside the body */
    .fixed-button-area {
        position: fixed;
        bottom: calc(var(--footer-height));
        height: calc(var(--button-area-height));
        line-height: calc(var(--button-area-height));
        width: 100%; /* Ensure full width to allow proper alignment */
    }

    /* Fixed footer */
    .fixed-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: var(--footer-height);
        line-height: calc(var(--footer-height) - 5px);
        box-sizing: border-box;
        border-top: 5px solid var(--hpa-brand-mark-color);
    }

    /* floating fixed contact panel (alignment wrapper) */
    .fixed-contact-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--footer-height) + var(--contact-buttons-space));
        z-index: 1 !important;
        /* CRITICAL:
       The wrapper spans the full width, so without this it blocks clicks/hover on underlying UI (carousel controls, etc.).
       We disable hit-testing on the wrapper and re-enable it only on the actual bubble. */
        pointer-events: none;
    }

        /* Re-enable pointer events only on the visible bubble */
        .fixed-contact-panel .contact-panel-shell,
        .fixed-contact-panel .contact-panel-shell * {
            pointer-events: auto;
        }

        /* scale only the actual panel */
        .fixed-contact-panel .contact-panel-shell {
            transform: scale(0.75);
            transform-origin: bottom right;
        }

        /* scale only the actual panel */
        .fixed-contact-panel .contact-panel-shell {
            transform: scale(0.75);
            transform-origin: bottom right;
        }

    /* justify-content-center (xs) and justify-content-md-end (>=md)
   but change the transform origin for small screens */
    @media (max-width: 767.98px) {
        .fixed-contact-panel .contact-panel-shell {
            transform-origin: bottom center;
        }
    }


        /* Scrollable body footer */
        .scrollable-body {
            position: fixed;
            top: var(--header-height);
            height: calc(100% - var(--header-height) - var(--footer-height));
            width: 100%;
            overflow-y: auto;
            scrollbar-gutter: stable;
        }

        .scrollable-body-with-buttons {
            position: fixed;
            top: var(--header-height);
            height: calc(100% - var(--header-height) - var(--footer-height) - var(--button-area-height));
            width: 100%;
            overflow-y: auto;
            scrollbar-gutter: stable;
        }

        .fixed-body-with-buttons-and-banner {
            position: fixed;
            top: calc(var(--header-height) + var(--banner-area-height));
            height: calc(100% - var(--header-height) - var(--footer-height) - var(--button-area-height) - var(--banner-area-height));
            width: 100%;
        }

        .fixed-background-image-layer {
            position: fixed;
            top: var(--header-height);
            height: calc(100% - var(--header-height) - var(--footer-height));
            overflow-y: hidden;
            width: 100%;
            z-index: -1;
        }

        /*#endregion*/

        /*#region background image*/
        .fixed-background-layer {
            position: fixed;
            inset: 0;
            z-index: -1;
        }

        .background-container {
            width: 100%;
            height: 100%;
        }

        /* A consistent “card width” that won’t scale with breakpoints */
        .contact-panel-shell {
            flex: 0 0 auto; /* don’t stretch like a Bootstrap column */
            width: 325px; /* pick your “one size” */
            max-width: calc(100vw - 2rem); /* mobile safety so it never goes off-screen */
        }

        /* Optional: make the inner layout behave better if space gets tight */
        .contact-panel-inner-xs {
            justify-content: space-between;
            gap: 0.75rem;
            flex-wrap: nowrap;
        }
        /*#endregion*/
    }

:root {
    --hpa-card-image-ratio: 4 / 5;
}


.btn {
    font-size: 0.9rem
}

.hpa-brand-text {
    font-size: 0.85rem;
}

body {
    /*font-size: 1.25rem;*/
    line-height: 1.5;
}

.plain {
    font-weight: normal;
}

/*ignore spelling: endregion*/

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--hpa-focus-ring-color);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.hpa-img-cover {
    object-fit: cover;
}

.hpa-img-contain-center {
    object-fit: contain;
    object-position: center;
}

.hpa-img-scale-down {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.hpa-blend-screen {
    mix-blend-mode: screen;
}

.image-viewer {
    width: 100%; /* Make the image take up the full width of the container */
    height: auto; /* Maintain the aspect ratio */
}

.image-mat {
    padding: 10px; /* This is colored (if there's a background) and is inside the border */
}

/*#region Cards: equal-height image slot (CSS-only)
  - Aligns content across card rows by forcing a consistent image-mat height.
  - Adjust --hpa-card-image-ratio (in :root) if you want a different crop (ex: 1 / 1 or 3 / 4).
  - Uses object-fit: cover (Option A) to keep the grid uniform.
  -------------------------------------------------------------------------- */
.row-uniform-image-size .image-mat {
    width: 100%;
    aspect-ratio: var(--hpa-card-image-ratio);
    overflow: hidden; /* clip the image to the mat (incl. rounded corners) */
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

    .row-uniform-image-size .image-mat > img.image-viewer {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
/*#endregion */

.hpa-section-desc {
    border: 1px solid var(--hpa-mat-border);
    border-radius: 1rem;
    box-shadow: var(--hpa-mat-shadow);
    padding: 1.1rem 1.15rem;
    margin: 0.75rem 0 1rem 0;
    font-weight: 650;
    line-height: 1.5;
    letter-spacing: 0.01em;
    flex: 1 1 auto;
}

.rounded-circle-email-confimration {
    width: 90px;
    height: 90px;
}

/* Disable Bootstrap carousel motion so only Animate.css runs */
.carousel-no-bs-transition .carousel-item {
    transition: none !important;
}

.carousel-no-bs-transition .carousel-item,
.carousel-no-bs-transition .carousel-item-next,
.carousel-no-bs-transition .carousel-item-prev,
.carousel-no-bs-transition .carousel-item-start,
.carousel-no-bs-transition .carousel-item-end {
    transform: none !important;
}

/* Prevent "flash" of the incoming slide before the IN animation is applied */
.hpa-carousel-prehide {
    opacity: 0 !important;
}
.h-p-v-required {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/*#region Leadership: full-width split cards (image + text side-by-side, alternating) */
@media (min-width: 768px) {
    #leadership-cards .image-mat {
        height: 100%;
        min-height: 280px;
        aspect-ratio: auto !important;
        margin: 0;
    }

    #leadership-cards img.image-viewer {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}
/*#endregion */

/*#region spinner*/
/* Full-page overlay styles */
#loadingSpinner {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999; /* Make sure the overlay is on top */
}

    /* Center the spinner, combining translation and rotation */
    #loadingSpinner .spinner-border {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
        animation: spinner-border 0.75s linear infinite;
    }

/* Custom key frames to ensure the translation remains in effect while rotating */
@keyframes spinner-border {
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.big-spinner {
    width: 5rem;
    height: 5rem;
    border-width: 0.5rem;
}

.rotate-90 {
    transform: rotate(90deg);
}

.button-spinner {
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #555;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/*#endregion */
/*ignore spelling: dropdown endregion*/

/*#region  nav bar */
.navbar .navbar-nav .nav-link,
.navbar.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link {
    position: relative;
    padding-bottom: 0.60rem; /* space for the tab mark */
    border-bottom: none; /* override active border-bottom */
    box-shadow: none; /* override previous underline box-shadow */
}

    /* The "tab" mark */
    .navbar .navbar-nav .nav-link::before {
        content: "";
        position: absolute;
        left: 0.55rem; /* inset so it looks like a tab under the text */
        right: 0.55rem;
        bottom: 0.18rem;
        height: 0.22rem;
        background-color: #C8102FB3; /* brand red, subtle by default */
        border-radius: 0.40rem 0.40rem 0 0; /* rounded top corners = tab feel */
        pointer-events: none;
    }

    /* Hover/focus = slightly stronger tab */
    .navbar .navbar-nav .nav-link:hover::before,
    .navbar .navbar-nav .nav-link:focus::before {
        background-color: #C8102FF2;
        height: 0.28rem;
    }

    /* Active/open dropdown = strongest tab */
    .navbar .navbar-nav .nav-link.active::before,
    .navbar .navbar-nav .show > .nav-link::before {
        background-color: var(--hpa-brand-mark-color);
        height: 0.32rem;
    }

    /* --- Nav bar tab indicator: disable all other underline mechanisms (leave ONLY ::before) --- */
    .navbar .navbar-nav .nav-link,
    .navbar .navbar-nav .nav-link:hover,
    .navbar .navbar-nav .nav-link:focus,
    .navbar .navbar-nav .nav-link.active,
    .navbar .navbar-nav .show > .nav-link {
        box-shadow: none !important;
        border-bottom: none !important;
        background-image: none !important;
    }

        /* The "tab" mark */
        .navbar .navbar-nav .nav-link::before {
            content: "";
            position: absolute;
            left: 0.55rem; /* inset so it looks like a tab under the text */
            right: 0.55rem;
            bottom: 0.18rem;
            height: 0.22rem;
            background-color: var(--hpa-nav-tab-color);
            border-radius: 0.40rem 0.40rem 0 0; /* rounded top corners = tab feel */
            pointer-events: none;
        }

        /* Hover/focus = slightly stronger tab */
        .navbar .navbar-nav .nav-link:hover::before,
        .navbar .navbar-nav .nav-link:focus::before {
            background-color: var(--hpa-nav-tab-hover-color);
            height: 0.28rem;
        }

        /* Active/open dropdown = strongest tab */
        .navbar .navbar-nav .nav-link.active::before,
        .navbar .navbar-nav .show > .nav-link::before {
            background-color: var(--hpa-nav-tab-active-color);
            height: 0.32rem;
        }

        /* --- Nav bar tab indicator --- */
        .navbar .navbar-nav .nav-link,
        .navbar .navbar-nav .nav-link:hover,
        .navbar .navbar-nav .nav-link:focus,
        .navbar .navbar-nav .nav-link.active,
        .navbar .navbar-nav .show > .nav-link {
            box-shadow: none !important;
            border-bottom: none !important;
            background-image: none !important;
        }


.navbar {
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
}

    .navbar .container-fluid {
        height: 100%;
        align-items: center;
    }

.hpa-navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 1rem;
}

.hpa-header-logo {
    height: calc(var(--header-height) - 16px);
    width: auto;
    object-fit: contain;
    display: block;
}

.hpa-brand-text {
    display: flex;
    flex-direction: column; /* one word per line */
    line-height: 1.05;
    font-weight: 700;
    white-space: nowrap; /* prevent breaking words */
}

/*#endregion */

/*#region hamburger panel*/


@media (max-width: 1199.98px) {

    /* Disable the "tab" indicator ONLY inside the open hamburger panel */
    .navbar #navbarSupportedContent.show .nav-link::before,
    .navbar #navbarSupportedContent.collapsing .nav-link::before {
        content: none !important;
    }

    /* Anchor for the floating panel */
    .navbar {
        position: relative;
        overflow: visible; /* ensure the panel can render outside the bar */
    }

        /* The open hamburger panel should behave like a dropdown menu */
        .navbar #navbarSupportedContent.show,
        .navbar #navbarSupportedContent.collapsing {
            max-height: calc(100dvh - var(--header-height) - 1rem);
            position: absolute;
            top: calc(100% + 0.35rem);
            /* nearly full width (small gutters) */
            left: 0.50rem;
            right: 0.50rem;
            width: auto;
            max-width: none;
            box-sizing: border-box;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            border: 1px solid rgba(255, 255, 255, 0.14);
            box-shadow: var(--hpa-shadow-md);
            border-radius: var(--bs-dropdown-border-radius);
            padding: 0.60rem;
            z-index: 1050;
            overscroll-behavior: contain;
        }

            /* Stack like dropdown items */
            .navbar #navbarSupportedContent.show .navbar-nav,
            .navbar #navbarSupportedContent.collapsing .navbar-nav {
                flex-direction: column;
                gap: 0.25rem;
                margin: 0;
                padding: 0.15rem;
            }


            /* Bigger tap targets; dropdown-item vibe */
            .navbar #navbarSupportedContent.show .nav-link,
            .navbar #navbarSupportedContent.collapsing .nav-link {
                display: flex;
                align-items: center;
                width: 100%;
                min-height: 56px; /* taller tap target */
                padding: 0.95rem 1.10rem;
                border-radius: 0.65rem;
                white-space: normal;
                word-break: break-word;
            }


            /* Keep Services submenu in-flow inside the panel (prevents overflow / width blowout) */
            .navbar #navbarSupportedContent.show .dropdown-menu,
            .navbar #navbarSupportedContent.collapsing .dropdown-menu {
                position: static !important;
                transform: none !important;
                width: 100%;
                margin: 0.25rem 0 0;
                padding: 0.25rem;
                border-radius: 0.65rem;
            }

            .navbar #navbarSupportedContent.show .dropdown-item,
            .navbar #navbarSupportedContent.collapsing .dropdown-item {
                min-height: 54px;
                padding: 0.85rem 1.10rem;
                display: flex;
                align-items: center;
                border-radius: 0.65rem;
                white-space: normal;
                word-break: break-word;
            }

            /* Optional: visually separate the login partial if it wraps under links */
            .navbar #navbarSupportedContent.show > *:last-child,
            .navbar #navbarSupportedContent.collapsing > *:last-child {
                margin-top: 0.40rem;
                padding-top: 0.40rem;
            }


            /* Optional: visually separate the login partial if it wraps under links */
            .navbar #navbarSupportedContent.show > *:last-child,
            .navbar #navbarSupportedContent.collapsing > *:last-child {
                border-top: 1px solid rgba(255, 255, 255, 0.14);
            }
}
/*#endregion */

/*#region  carousel next / previous*/
.carousel .carousel-control-prev,
.carousel .carousel-control-next {
    width: 4rem; /* easier to click */
    opacity: 1; /* visible on tinted cards */
}

.carousel .carousel-control-prev-icon,
.carousel .carousel-control-next-icon {
    background-color: var(--hpa-carousel-control-background); /* dark pill behind arrow */
    border-radius: 999px;
    padding: 1.25rem;
    background-size: 60% 60%;
}

.carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.carousel .carousel-control-next:hover .carousel-control-next-icon {
    background-color: var(--hpa-carousel-control-background-hover);
}

/*#endregion */

/*#region  carousel slide*/
/* Card look for each carousel slide */
.hpa-carousel-slide-card {
    background: var(--hpa-carousel-slide-card-background);
    border: 1px solid var(--hpa-outer-border-color);
    box-shadow: var(--hpa-shadow-md);
}

    /* Optional: tighten the title underline spacing in the carousel */
    .hpa-carousel-slide-card .hpa-title-mark {
        padding-bottom: 0.10rem;
    }

/* Your current theme.css sets carousel controls to opacity: .25; override for visibility */
.hpa-carousel-card .carousel-control-prev,
.hpa-carousel-card .carousel-control-next {
    opacity: 1;
}
/*#endregion */

/*#region cards*/
.card {
    height: 100%;
}

    .card > .card-body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto; 
        min-height: 0;
    }

.card-footer {
    margin-top: auto;
}

/* Normal card pattern */
.card-body > .row:last-child {
    flex: 1 1 auto;
    min-height: 0;
}

/* Leadership: make the wrapper participate in card-body flex */
.card > .card-body > .row-uniform-image-size {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

    .card-body > .row-uniform-image-size > .row:last-child {
        flex: 1 1 auto;
        min-height: 0;
    }

    .card-body > .row:last-child > [class*="col"] {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

/* Leadership wrapper pattern */
.card-body > .row-uniform-image-size {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

    .card-body > .row-uniform-image-size > .row:last-child {
        flex: 1 1 auto;
        align-items: stretch;
    }

        .card-body > .row-uniform-image-size > .row:last-child > [class*="col"] {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
/*#endregion*/

/*#region sub panel*/

/* Slightly stronger mat for “pop” areas (section descriptions) */


.simple-contact-panel {
    gap: 0.75rem;
    padding: 1rem 1rem;
    overflow: hidden;
}

.hpa-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1rem;
    overflow: hidden;
    flex: 1 1 auto;
}


.hpa-panel-form {
    margin: 0.75rem 0 1rem 0;
    font-weight: 650;
    line-height: 1.5;
    letter-spacing: 0.01em;
    margin: 0;
}

/* Simple bold title */
.hpa-panel-body-bold,
.hpa-panel-title {
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.01em;
    margin: 0;
}

/* Body grows */
.hpa-panel-body {
    flex: 1 1 auto;
    margin: 0;
}

/* Footer is an actions bar pinned visually at bottom */
.hpa-panel-footer {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    display: flex;
    justify-content: flex-end; /* <-- RIGHT ALIGN BUTTONS */
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Keyboard focus */
.hpa-panel:focus-within {
    outline: 2px solid rgba(255, 255, 255, 0.30);
    outline-offset: 2px;
}

/* Optional: subtle hover without “card lift” */
.hpa-panel:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

/*#endregion*/

/*#region pipelines*/
.pipeline-arrow-down {
    width: 38px;
    height: 50px;
}

    .pipeline-arrow-down path {
        fill: none;
        stroke: #F5F9FF; /* ice blue */
        stroke-width: 2.6;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: drop-shadow(0 1px 1px rgba(0,0,0,.20));
    }
/*#endregion*/


/*#region flywheel*/
.hpa-flywheel .card.is-selected {
    outline: 3px solid var(--hpa-brand-mark-color);
    outline-offset: 2px;
}

.hpa-flywheel .card[role="button"] {
    cursor: pointer;
}
/*#endregion*/