/*
 * ABBEP design system.
 *
 * Loaded last, after bootstrap.min.css, style.css and abbep.css, so it wins
 * without any of those files being edited. It does three things:
 *
 *   1. Declares the ABBEP tokens (maroon / gold / cream) and remaps the
 *      Bootstrap CSS variables onto them.
 *   2. Re-colours the Bootstrap classes that ship hardcoded hex values, since
 *      the bundled Bootstrap 5.0 does not read --bs-primary in its utilities.
 *   3. Defines the components the ABBEP layouts use (topbar, nav, hero, bands,
 *      panels, footer). Everything here is prefixed `abbep-`.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
    --abbep-maroon-900: #db5700;
    --abbep-maroon-800: #ef6000;
    --abbep-maroon-700: #FF6600;
    --abbep-maroon-600: #E65C00;
    --abbep-maroon-500: #CC5200;

    /* Bhagwa shades. */
    --abbep-bhagwa: #FF6600;
    --abbep-bhagwa-dark: #E65C00;
    --abbep-bhagwa-deeper: #CC5200;
    --abbep-bhagwa-light: #FF8533;
    --abbep-bhagwa-pale: #FFF4EC;

    /* Gold: accents, icons, numerals. */
    --abbep-gold-600: #ffb42f;
    --abbep-gold-500: #ffbf48;
    --abbep-gold-400: #ffc760;
    --abbep-gold-300: #E8C77A;
    --abbep-gold-200: #F2E0B4;

    /* Copper and flame, sampled from the medallion logo. */
    --abbep-copper: #B87333;
    --abbep-copper-light: #D69A5C;
    --abbep-flame: #F5A623;
    --abbep-saffron: #FF6600;

    /* Cream: page and card tints. */
    --abbep-cream-50: #FFFBF5;
    --abbep-cream-100: #FFF4EC;
    --abbep-cream-200: #FFE4C8;

    /* Ink: text on light surfaces. */
    --abbep-ink: #111111;
    --abbep-ink-soft: #444444;
    --abbep-ink-faint: #777777;

    --abbep-line: rgba(255, 102, 0, .14);
    --abbep-line-gold: rgba(200, 145, 43, .35);

    --abbep-radius: 14px;
    --abbep-radius-sm: 10px;
    --abbep-radius-lg: 22px;

    --abbep-shadow-sm: 0 2px 10px rgba(0, 0, 0, .06);
    --abbep-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    --abbep-shadow-lg: 0 20px 60px rgba(0, 0, 0, .12);

    /* Feedback. */
    --abbep-ok: #1F6B4C;
    --abbep-ok-soft: #E8F3ED;
    --abbep-danger: #A32A2A;
    --abbep-danger-soft: #FAEBEA;

    --abbep-font-display: 'Marcellus', 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', Georgia, serif;
    --abbep-font-body: 'Plus Jakarta Sans', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Bootstrap remap. Anything reading var(--bs-*) picks the theme up free. */
    --bs-primary: #FF6600;
    --bs-primary-rgb: 255, 102, 0;
    --bs-secondary: #C8912B;
    --bs-secondary-rgb: 200, 145, 43;
    --bs-dark: #111111;
    --bs-dark-rgb: 17, 17, 17;
    --bs-light: #FFFBF5;
    --bs-light-rgb: 255, 251, 245;
    --bs-body-color: #111111;
    --bs-link-color: #FF6600;
    --bs-link-hover-color: #E65C00;
}

/* ==========================================================================
   2. Bootstrap re-colour
   --------------------------------------------------------------------------
   Bootstrap 5.0 writes literal hex into its utilities and button variants, so
   overriding the custom properties above is not enough on its own.
   ========================================================================== */

.bg-primary { background-color: var(--abbep-bhagwa) !important; }
.bg-secondary { background-color: var(--abbep-gold-500) !important; }
.bg-dark { background-color: var(--abbep-maroon-900) !important; }
.bg-light { background-color: var(--abbep-cream-50) !important; }

.text-primary { color: var(--abbep-bhagwa-dark) !important; }
.text-secondary { color: var(--abbep-gold-600) !important; }
.text-dark { color: var(--abbep-ink) !important; }
.text-muted { color: var(--abbep-ink-soft) !important; }

.border-primary { border-color: var(--abbep-bhagwa) !important; }
.border-secondary { border-color: var(--abbep-gold-500) !important; }

.btn-primary {
    color: #fff;
    background-color: var(--abbep-bhagwa);
    border-color: var(--abbep-bhagwa);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    color: #fff;
    background-color: var(--abbep-bhagwa-dark);
    border-color: var(--abbep-bhagwa-dark);
}

.btn-outline-primary {
    color: var(--abbep-bhagwa-dark);
    border-color: var(--abbep-bhagwa);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #fff;
    background-color: var(--abbep-bhagwa);
    border-color: var(--abbep-bhagwa);
}

.btn-secondary {
    color: var(--abbep-maroon-900);
    background-color: var(--abbep-gold-500);
    border-color: var(--abbep-gold-500);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    color: var(--abbep-maroon-900);
    background-color: var(--abbep-gold-400);
    border-color: var(--abbep-gold-400);
}

.btn-outline-secondary {
    color: var(--abbep-gold-600);
    border-color: var(--abbep-gold-500);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: var(--abbep-maroon-900);
    background-color: var(--abbep-gold-500);
    border-color: var(--abbep-gold-500);
}

.btn-light {
    color: var(--abbep-maroon-800);
    background-color: var(--abbep-cream-50);
    border-color: var(--abbep-cream-50);
}

.btn-light:hover,
.btn-light:focus {
    color: var(--abbep-maroon-900);
    background-color: #fff;
    border-color: #fff;
}

.btn-check:focus + .btn,
.btn:focus {
    box-shadow: 0 0 0 .25rem rgba(200, 145, 43, .35);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--abbep-gold-400);
    box-shadow: 0 0 0 .2rem rgba(200, 145, 43, .2);
}

a { color: var(--abbep-bhagwa-dark); }

a:hover,
a:focus { color: var(--abbep-gold-600); }

.spinner-border.text-primary { color: var(--abbep-bhagwa) !important; }

/* The template's back-to-top pill sits on gold so it reads on every section. */
.back-to-top.btn-primary {
    background-color: var(--abbep-bhagwa);
    border-color: var(--abbep-bhagwa);
    color: #fff;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

body {
    font-family: var(--abbep-font-body);
    color: var(--abbep-ink);
    background: #fff;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--abbep-font-display);
    color: var(--abbep-maroon-900);
    font-weight: 400;
    letter-spacing: .2px;
}

.abbep-display {
    font-family: var(--abbep-font-display);
    line-height: 1.15;
}

/* Section heading block: gold eyebrow, serif title, optional lead. */
.abbep-head { margin-bottom: 2.5rem; }

.abbep-head--center { text-align: center; }

.abbep-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--abbep-font-body);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--abbep-gold-600);
    margin-bottom: .75rem;
}

.abbep-head__eyebrow::before,
.abbep-head__eyebrow::after {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--abbep-gold-400);
}

.abbep-head--start .abbep-head__eyebrow::before { display: none; }

.abbep-head__title {
    font-size: clamp(1.75rem, 3.2vw, 2.6rem);
    margin-bottom: .6rem;
}

.abbep-head__lead {
    color: var(--abbep-ink-soft);
    max-width: 720px;
    margin: 0 auto;
}

.abbep-head--start .abbep-head__lead { margin-left: 0; }

/* On dark bands the same block flips to light ink. */
.abbep-head--light .abbep-head__title { color: #fff; }
.abbep-head--light .abbep-head__lead { color: rgba(255, 255, 255, .72); }
.abbep-head--light .abbep-head__eyebrow { color: var(--abbep-gold-300); }

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.btn-gold {
    background: var(--abbep-gold-500);
    border: 1px solid var(--abbep-gold-500);
    color: var(--abbep-maroon-900);
    font-weight: 600;
}

.btn-gold:hover,
.btn-gold:focus {
    background: var(--abbep-gold-400);
    border-color: var(--abbep-gold-400);
    color: var(--abbep-maroon-900);
}

.btn-outline-gold {
    background: transparent;
    border: 1px solid var(--abbep-gold-400);
    color: var(--abbep-gold-300);
    font-weight: 600;
}

.btn-outline-gold:hover,
.btn-outline-gold:focus {
    background: var(--abbep-gold-500);
    border-color: var(--abbep-gold-500);
    color: var(--abbep-maroon-900);
}

.btn-maroon {
    background: var(--abbep-maroon-700);
    border: 1px solid var(--abbep-maroon-700);
    color: #fff;
    font-weight: 600;
}

.btn-maroon:hover,
.btn-maroon:focus {
    background: var(--abbep-maroon-600);
    border-color: var(--abbep-maroon-600);
    color: #fff;
}

/* Text link with a trailing arrow that nudges on hover. */
.abbep-more {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--abbep-gold-600);
    text-decoration: none;
}

.abbep-more i { transition: transform .25s ease; }
.abbep-more:hover { color: var(--abbep-maroon-700); }
.abbep-more:hover i { transform: translateX(3px); }

/* ==========================================================================
   5. Sections and surfaces
   ========================================================================== */

.abbep-sec { padding: 4.5rem 0; }
.abbep-sec--tight { padding: 3rem 0; }
.abbep-sec--cream { background: var(--abbep-cream-50); }
.abbep-sec--cream-deep { background: var(--abbep-cream-100); }

.abbep-sec--dark {
    background: linear-gradient(135deg, var(--abbep-maroon-800), var(--abbep-maroon-900));
    color: rgba(255, 255, 255, .82);
}

.abbep-card {
    background: #fff;
    border: 1px solid var(--abbep-line);
    border-radius: var(--abbep-radius);
    box-shadow: var(--abbep-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.abbep-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--abbep-shadow);
    border-color: var(--abbep-line-gold);
}

/* Small square icon chip used across cards and lists. */
.abbep-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--abbep-cream-100);
    color: var(--abbep-gold-600);
    font-size: 1.15rem;
    flex: 0 0 auto;
}

.abbep-chip--gold {
    background: var(--abbep-gold-500);
    color: #fff;
}

.abbep-chip--maroon {
    background: var(--abbep-maroon-700);
    color: var(--abbep-gold-300);
}

.abbep-chip--lg { width: 60px; height: 60px; font-size: 1.5rem; }

/* Decorative divider: a gold rule with a diamond in the middle. */
.abbep-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin: 0 auto 1rem;
    max-width: 220px;
    color: var(--abbep-gold-400);
}

.abbep-rule::before,
.abbep-rule::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, var(--abbep-gold-400));
}

.abbep-rule::after { background: linear-gradient(90deg, var(--abbep-gold-400), transparent); }

/* ==========================================================================
   6. Topbar
   ========================================================================== */

.abbep-topbar {
    background: var(--abbep-maroon-900);
    color: rgba(255, 255, 255, .78);
    font-size: .82rem;
}

.abbep-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 40px;
    padding: .35rem 0;
    flex-wrap: wrap;
}

.abbep-topbar__shloka {
    font-family: var(--abbep-font-display);
    color: var(--abbep-gold-300);
    letter-spacing: .06em;
    margin: 0;
    font-size: .9rem;
}

.abbep-topbar__meta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.abbep-topbar__meta a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.abbep-topbar__meta a:hover { color: var(--abbep-gold-300); }

.abbep-topbar__social {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.abbep-topbar__social a {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .08);
    font-size: .72rem;
}

.abbep-topbar__social a:hover {
    background: var(--abbep-gold-500);
    color: var(--abbep-maroon-900);
}

.team-item.bg-light.rounded.text-center.h-100.p-4{
    justify-items: center;
}

/* ==========================================================================
   7. Navbar
   ========================================================================== */

.abbep-nav {
    background: #fff;
    border-bottom: 1px solid var(--abbep-line);
    padding: .5rem 0;
}

.abbep-nav.is-stuck {
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: var(--abbep-shadow-sm);
}

.abbep-nav .navbar-brand { display: flex; align-items: center; gap: .7rem; }

/*
 * The mark is a circular medallion, so it is sized as a square and never
 * cropped. A soft copper halo lifts it off both the white navbar and the
 * maroon footer without needing two different files.
 */
.abbep-mark {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 50%;
    flex: 0 0 auto;
    filter: drop-shadow(0 2px 6px rgba(184, 115, 51, .35));
}

.abbep-nav .navbar-brand .abbep-mark { width: 54px; height: 54px; }

.abbep-brand-text { line-height: 1.1; }

.abbep-brand-text strong {
    display: block;
    font-family: var(--abbep-font-display);
    font-size: 1.3rem;
    color: var(--abbep-maroon-800);
    letter-spacing: .04em;
}

.abbep-brand-text span {
    font-size: .68rem;
    color: var(--abbep-ink-soft);
    letter-spacing: .02em;
    display: block;
}

/* On phones the mark and the wordmark have to share the row with the toggler,
   so both step down rather than the wordmark being dropped. */
@media (max-width: 575.98px) {
    .abbep-nav .navbar-brand .abbep-mark { width: 42px; height: 42px; }

    .abbep-brand-text strong { font-size: 1.05rem; }

    .abbep-brand-text span {
        font-size: .58rem;
        max-width: 165px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Higher specificity than style.css's .navbar-light .navbar-nav .nav-link. */
.abbep-nav.navbar-light .navbar-nav .nav-link {
    font-family: var(--abbep-font-body);
    font-size: .88rem;
    font-weight: 600;
    color: var(--abbep-ink);
    padding: 1.25rem .8rem;
    position: relative;
    text-transform: none;
}

.abbep-nav.navbar-light .navbar-nav .nav-link:hover,
.abbep-nav.navbar-light .navbar-nav .nav-link.active {
    color: var(--abbep-maroon-700);
}

/*
 * Underline lives on ::before, not ::after.
 *
 * The dropdown caret needs ::after (it has to sit inline, after the label), and
 * an element only has one of each. While both wanted ::after, this rule was the
 * more specific of the two and its empty `content` won - which is why every
 * menu with a submenu lost its arrow.
 */
.abbep-nav.navbar-light .navbar-nav .nav-link::before {
    content: "";
    position: absolute;
    left: .8rem;
    right: .8rem;
    bottom: .85rem;
    height: 2px;
    background: var(--abbep-gold-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.abbep-nav.navbar-light .navbar-nav .nav-link:hover::before,
.abbep-nav.navbar-light .navbar-nav .nav-link.active::before {
    transform: scaleX(1);
}

/*
 * Dropdown caret.
 *
 * style.css already sets `content: "\f107"` for this, but with
 * `font-weight: 600`. In Font Awesome 5 Free, angle-down only exists in the
 * Solid face, which needs weight 900 - at 600 the browser picked the Regular
 * face, found no glyph, and drew nothing. So every menu with a submenu was
 * rendering without its arrow.
 */
.abbep-nav .navbar-nav .dropdown-toggle::after {
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    border: none;
    display: inline-block;
    margin-left: .35rem;
    font-size: .78rem;
    line-height: 1;
    vertical-align: middle;
    color: var(--abbep-gold-600);
    transition: transform .25s ease;
}

/* Point the caret up while the menu it opens is showing. */
.abbep-nav .navbar-nav .nav-item:hover > .dropdown-toggle::after,
.abbep-nav .navbar-nav .dropdown-toggle.show::after,
.abbep-nav .navbar-nav .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}


.abbep-nav .dropdown-menu {
    border: 1px solid var(--abbep-line);
    border-top: 2px solid var(--abbep-gold-500);
    border-radius: 0 0 var(--abbep-radius-sm) var(--abbep-radius-sm);
    box-shadow: var(--abbep-shadow);
    padding: .5rem;
    min-width: 230px;
}

.abbep-nav .dropdown-item {
    border-radius: 8px;
    padding: .55rem .75rem;
    font-size: .87rem;
    font-weight: 500;
    color: var(--abbep-ink);
}

.abbep-nav .dropdown-item:hover,
.abbep-nav .dropdown-item:focus {
    background: var(--abbep-cream-100);
    color: var(--abbep-maroon-700);
}

.abbep-nav__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.abbep-nav__btn {
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    padding: .5rem 1.15rem;
    white-space: nowrap;
}

/* Signed-in account menu. A name of any length used to set the header width,
   so it shows as an avatar instead - fixed size in every locale. */
.abbep-nav__avatar {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--abbep-maroon-700);
    transition: background .2s ease;
}

.abbep-nav__avatar:hover,
.abbep-nav__avatar:focus-visible,
.abbep-nav__avatar[aria-expanded="true"] {
    background: var(--abbep-cream-100);
    color: var(--abbep-maroon-700);
}

.abbep-nav__avatar i {
    font-size: .7rem;
    transition: transform .2s ease;
}

.abbep-nav__avatar[aria-expanded="true"] i { transform: rotate(180deg); }

/* --- Mega menu -------------------------------------------------------- */

.abbep-mega {
    padding: 1.5rem;
    min-width: min(760px, calc(100vw - 3rem));
}

.abbep-mega__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem 1.25rem;
}

.abbep-mega__item {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .65rem .7rem;
    border-radius: var(--abbep-radius-sm);
    text-decoration: none;
    color: var(--abbep-ink);
    transition: background .2s ease;
}

.abbep-mega__item:hover { background: var(--abbep-cream-50); }

.abbep-mega__item i {
    color: var(--abbep-gold-600);
    font-size: 1rem;
    margin-top: .2rem;
    width: 20px;
    flex: 0 0 auto;
    text-align: center;
}

.abbep-mega__item strong {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    color: var(--abbep-maroon-800);
}

.abbep-mega__item small {
    color: var(--abbep-ink-soft);
    font-size: .76rem;
    line-height: 1.35;
    display: block;
}

.abbep-mega__foot {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px dashed var(--abbep-line);
}

@media (max-width: 991.98px) {
    .abbep-nav.navbar-light .navbar-nav .nav-link { padding: .7rem .25rem; }

    .abbep-nav.navbar-light .navbar-nav .nav-link::before { display: none; }

    .abbep-nav .navbar-collapse {
        max-height: 75vh;
        overflow-y: auto;
        padding-bottom: 1rem;
    }

    .abbep-mega { min-width: 0; padding: .5rem; }

    .abbep-mega__grid { grid-template-columns: 1fr; }

    .abbep-nav .dropdown-menu {
        border: 0;
        box-shadow: none;
        background: var(--abbep-cream-50);
        border-radius: var(--abbep-radius-sm);
    }
}

/* ==========================================================================
   8. Quick-action rail (fixed, right edge)
   ========================================================================== */

.abbep-rail {
    position: fixed;
    right: 12px;
    top: 70%;
    transform: translateY(-50%);
    z-index: 1020;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--abbep-line);
    border-radius: var(--abbep-radius);
    box-shadow: var(--abbep-shadow);
}

.abbep-rail__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 58px;
    padding: .6rem .25rem;
    border-radius: var(--abbep-radius-sm);
    text-decoration: none;
    color: var(--abbep-ink-soft);
    font-size: .62rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    transition: background .2s ease, color .2s ease;
}

.abbep-rail__item i {
    font-size: 1rem;
    color: var(--abbep-gold-600);
    transition: color .2s ease;
}

.abbep-rail__item:hover {
    background: var(--abbep-maroon-700);
    color: #fff;
}

.abbep-rail__item:hover i { color: var(--abbep-gold-300); }

/*
 * The rail is fixed, so it only works while the page gutter is wide enough to
 * hold it. Bootstrap's container tops out at 1320px, so a 1440px window leaves
 * 60px a side - narrower than the rail, and it sat on top of the content (most
 * visibly over the search box on the temple map). It therefore appears only
 * from 1500px up, where the gutter clears it. Nothing is lost below that: every
 * destination in the rail is also in the main menu.
 */
@media (max-width: 1499.98px) {
    .abbep-rail { display: none; }
}

/* ==========================================================================
   9. Hero
   ========================================================================== */

.abbep-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(115deg, var(--abbep-maroon-900) 0%, var(--abbep-maroon-700) 45%, #7A3B1E 100%);
    color: #fff;
}

/* Faint radial wash so the artwork edge blends into the gradient. */
.abbep-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 22% 60%, rgba(0, 0, 0, .45), transparent 60%);
    pointer-events: none;
}

/* Each slide is its own stacking context so the artwork can sit behind the
   copy without escaping into the neighbouring slide. */
.abbep-hero__slide {
    position: relative;
    overflow: hidden;
}

.abbep-hero__inner {
    position: relative;
    z-index: 2;
    min-height: 560px;
    display: flex;
    align-items: center;
    padding: 3.5rem 0;
}

.abbep-hero__art {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
}

/* Portrait: a cut-out figure standing in the left column, grounded on the
   bottom edge so it reads as artwork rather than a cropped photo. */
.abbep-hero__slide--portrait .abbep-hero__art {
    right: auto;
    width: 46%;
    align-items: flex-end;
    justify-content: center;
    padding: 1.5rem 0 0;
}

.abbep-hero__slide--portrait .abbep-hero__art img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, .55));
}

/*
 * Cover: an admin-uploaded banner.
 *
 * The poster is fitted whole rather than cropped - these uploads are usually
 * artwork with text baked in, and `cover` was slicing the edges off. The gap
 * that leaves is filled by a blurred, scaled copy of the same file, so the
 * hero still reads as one image instead of a poster on flat colour.
 */
.abbep-hero__slide--cover .abbep-hero__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(28px) saturate(1.15);
    transform: scale(1.15);
    opacity: .55;
}

.abbep-hero__slide--cover .abbep-hero__image {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.abbep-hero__slide--cover .abbep-hero__art::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(90deg, rgba(43, 11, 14, .92) 0%, rgba(43, 11, 14, .6) 42%, rgba(43, 11, 14, .15) 100%);
}

/*
 * Bare: an uploaded banner shown on its own, with no copy over it.
 *
 * The scrim exists only to make overlaid text readable, so with no text it is
 * just a filter darkening the artwork - it goes. The slide also loses the
 * .abbep-hero__inner that gave it its height, so the height is set here.
 */
.abbep-hero__slide--bare .abbep-hero__art::after {
    display: none;
}

.abbep-hero__slide--bare {
    min-height: 560px;
}

/* Click target covering the whole banner, for banners that carry a link.
   Empty on purpose - the accessible name comes from its aria-label. */
.abbep-hero__link {
    position: absolute;
    inset: 0;
    z-index: 3;
}

@media (max-width: 991.98px) {
    .abbep-hero__slide--bare {
        min-height: 380px;
    }
}

@media (max-width: 575.98px) {
    .abbep-hero__slide--bare {
        min-height: 260px;
    }
}

.abbep-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-family: var(--abbep-font-display);
    color: var(--abbep-gold-300);
    letter-spacing: .22em;
    font-size: .85rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.abbep-hero__title {
    font-family: var(--abbep-font-display);
    color: #fff;
    font-size: clamp(2.1rem, 4.4vw, 3.6rem);
    line-height: 1.12;
    margin-bottom: 1.1rem;
}

.abbep-hero__lead {
    color: rgba(255, 255, 255, .78);
    font-size: 1.02rem;
    max-width: 560px;
    margin-bottom: 1.9rem;
}

.abbep-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.abbep-hero__cta .btn {
    border-radius: 999px;
    padding: .8rem 1.9rem;
}

/* Below lg the copy column drops its offset and the artwork becomes a band
   under the text instead of a left-hand backdrop. */
@media (max-width: 991.98px) {
    .abbep-hero__inner { min-height: 0; padding: 2.5rem 0 2rem; }

    .abbep-hero__lead { max-width: none; }

    /* Portrait drops the side-by-side split: artwork becomes a band above the
       copy. Cover already fills the slide, so it only loses some height. */
    .abbep-hero__slide--portrait { display: flex; flex-direction: column-reverse; }

    .abbep-hero__slide--portrait .abbep-hero__art {
        position: relative;
        width: 100%;
        height: 280px;
        padding: 1.5rem 0 0;
    }

    .abbep-hero__slide--cover .abbep-hero__inner { min-height: 380px; }

    .abbep-hero__slide--cover .abbep-hero__art::after {
        background: linear-gradient(180deg, rgba(43, 11, 14, .75) 0%, rgba(43, 11, 14, .9) 100%);
    }
}

/* --- Hero slider chrome ------------------------------------------------ */

/*
 * The template centres the arrows on the left and right edges, where they land
 * on top of the hero's own call to action and, on the right, under the
 * back-to-top button. Docking them as a pair in the bottom-right corner clears
 * both. `!important` because style.css sets these positions inline-specific.
 */
/*
 * Arrows sit on the left and right edges, vertically centred.
 *
 * They are inset into the page gutter rather than over the container, which is
 * what kept them off the hero's own call to action; the right one also clears
 * the fixed back-to-top button, which lives at the bottom of the viewport.
 */
.abbep-hero .owl-nav button.owl-prev,
.abbep-hero .owl-nav button.owl-next {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    /* 40px at a 12px inset spans 12-52px, which keeps the arrow inside the
       page gutter (60px at a 1440px window) and clear of the hero's own
       buttons, which start at the container edge. */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .38);
    backdrop-filter: blur(4px);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.abbep-hero .owl-nav button.owl-prev { left: 12px; }
.abbep-hero .owl-nav button.owl-next { right: 12px; }

.abbep-hero .owl-nav button:hover {
    background: var(--abbep-gold-500);
    border-color: var(--abbep-gold-500);
    color: var(--abbep-maroon-900);
}

.abbep-hero .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    display: flex;
    justify-content: center;
    gap: .4rem;
    z-index: 3;
}

.abbep-hero .owl-dots button.owl-dot span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
    display: block;
    margin: 0;
}

.abbep-hero .owl-dots button.owl-dot.active span {
    background: var(--abbep-gold-400);
    width: 24px;
    border-radius: 999px;
}

/* On phones there is no gutter left for the arrows to sit in, so they would
   land on the copy. Swiping and the dots both still work. */
@media (max-width: 575.98px) {
    .abbep-hero .owl-nav { display: none; }
}

/* ==========================================================================
   10. Values strip (dark band under the hero)
   ========================================================================== */

.abbep-values {
    background: var(--abbep-maroon-800);
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.abbep-values__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.abbep-values__item {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: 1.6rem 1.25rem;
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.abbep-values__item:last-child { border-right: 0; }

.abbep-values__item i {
    color: var(--abbep-gold-400);
    font-size: 1.35rem;
    margin-top: .15rem;
}

.abbep-values__item strong {
    display: block;
    font-family: var(--abbep-font-display);
    color: #fff;
    font-size: .98rem;
    margin-bottom: .2rem;
}

.abbep-values__item small {
    color: rgba(255, 255, 255, .6);
    font-size: .76rem;
    line-height: 1.4;
    display: block;
}

@media (max-width: 1199.98px) {
    .abbep-values__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .abbep-values__item:nth-child(3n) { border-right: 0; }
}

/*
 * Stays two-up all the way down rather than collapsing to a single column:
 * one column turned a compact strip into five full-height rows and pushed the
 * rest of the page a screen further away.
 */
@media (max-width: 767.98px) {
    .abbep-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .abbep-values__item {
        border-right: 1px solid rgba(255, 255, 255, .08);
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        padding: 1rem .85rem;
        gap: .55rem;
    }

    .abbep-values__item:nth-child(2n) { border-right: 0; }

    /* The fifth item is alone on the last row, so it spans both columns. */
    .abbep-values__item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        border-right: 0;
        border-bottom: 0;
    }

    .abbep-values__item i { font-size: 1.1rem; }
    .abbep-values__item strong { font-size: .88rem; }
    .abbep-values__item small { font-size: .7rem; }
}

/* ==========================================================================
   11. Parashuram attribute cards
   ========================================================================== */

.abbep-intro-card {
    background: linear-gradient(160deg, var(--abbep-cream-100), var(--abbep-cream-50));
    border: 1px solid var(--abbep-line-gold);
    border-radius: var(--abbep-radius);
    padding: 2rem 1.75rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.abbep-intro-card h2 {
    font-size: 1.65rem;
    margin-bottom: .9rem;
}

.abbep-intro-card p {
    color: var(--abbep-ink-soft);
    font-size: .92rem;
    margin-bottom: 1.5rem;
}

.abbep-intro-card .btn { align-self: flex-start; border-radius: 999px; }

.abbep-attr {
    background: #fff;
    border: 1px solid var(--abbep-line);
    border-radius: var(--abbep-radius);
    padding: 1.75rem 1.25rem;
    height: 100%;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.abbep-attr:hover {
    transform: translateY(-5px);
    box-shadow: var(--abbep-shadow);
    border-color: var(--abbep-line-gold);
}

.abbep-attr__icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--abbep-cream-100);
    color: var(--abbep-gold-600);
    font-size: 1.5rem;
    border: 1px solid var(--abbep-line-gold);
}

.abbep-attr h3 {
    font-size: 1.05rem;
    margin-bottom: .5rem;
}

.abbep-attr p {
    color: var(--abbep-ink-soft);
    font-size: .82rem;
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================================
   12. Initiative cards
   ========================================================================== */

.abbep-initiative {
    background: #fff;
    border: 1px solid var(--abbep-line);
    border-radius: var(--abbep-radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.abbep-initiative:hover {
    transform: translateY(-5px);
    box-shadow: var(--abbep-shadow);
    border-color: var(--abbep-line-gold);
}

.abbep-initiative__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--abbep-cream-100);
}

.abbep-initiative__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.abbep-initiative:hover .abbep-initiative__media img { transform: scale(1.06); }

.abbep-initiative__body {
    padding: 1.1rem 1rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 1;
}

.abbep-initiative__body i {
    color: var(--abbep-gold-600);
    font-size: 1.1rem;
}

.abbep-initiative__body h3 {
    font-size: 1rem;
    margin: 0;
}

.abbep-initiative__body p {
    color: var(--abbep-ink-soft);
    font-size: .78rem;
    line-height: 1.45;
    margin: 0;
}

/* ==========================================================================
   13. Counter band
   ========================================================================== */

.abbep-counters {
    background: linear-gradient(135deg, var(--abbep-maroon-800), var(--abbep-maroon-900));
    padding: 2.75rem 0;
}

.abbep-counters__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

.abbep-counters__item {
    text-align: center;
    padding: .5rem;
    border-right: 1px solid rgba(255, 255, 255, .1);
}

.abbep-counters__item:last-child { border-right: 0; }

.abbep-counters__value {
    font-family: var(--abbep-font-display);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    color: var(--abbep-gold-400);
    margin-bottom: .2rem;
    line-height: 1;
}

.abbep-counters__label {
    color: rgba(255, 255, 255, .7);
    font-size: .76rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0;
}

@media (max-width: 991.98px) {
    .abbep-counters__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .abbep-counters__item:nth-child(3n) { border-right: 0; }
}

@media (max-width: 575.98px) {
    .abbep-counters__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .abbep-counters__item { border-right: 0; }
}

/* ==========================================================================
   14. Panels (the four-column events / news / temples / links row)
   ========================================================================== */

.abbep-panel {
    background: #fff;
    border: 1px solid var(--abbep-line);
    border-radius: var(--abbep-radius);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.abbep-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--abbep-line);
}

.abbep-panel__head h2,
.abbep-panel__head h3 {
    font-size: 1rem;
    margin: 0;
}

.abbep-panel__body { padding: .5rem .35rem; flex: 1; }

.abbep-panel__foot {
    padding: .75rem 1.1rem;
    border-top: 1px solid var(--abbep-line);
    background: var(--abbep-cream-50);
}

/* A row inside a panel: date chip or thumbnail, then title and meta. */
.abbep-row {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: .7rem .75rem;
    border-radius: var(--abbep-radius-sm);
    text-decoration: none;
    color: inherit;
    transition: background .2s ease;
}

.abbep-row:hover { background: var(--abbep-cream-50); color: inherit; }

.abbep-row__date {
    flex: 0 0 auto;
    width: 46px;
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--abbep-line-gold);
}

.abbep-row__date b {
    display: block;
    background: var(--abbep-cream-100);
    color: var(--abbep-maroon-800);
    font-family: var(--abbep-font-display);
    font-size: 1.1rem;
    line-height: 1.4;
}

.abbep-row__date span {
    display: block;
    background: var(--abbep-maroon-700);
    color: var(--abbep-gold-300);
    font-size: .6rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .12rem 0;
}

.abbep-row__thumb {
    flex: 0 0 auto;
    width: 62px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--abbep-cream-100);
}

.abbep-row__body { min-width: 0; }

.abbep-row__title {
    font-family: var(--abbep-font-body);
    font-size: .84rem;
    font-weight: 600;
    color: var(--abbep-ink);
    margin: 0 0 .2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.abbep-row:hover .abbep-row__title { color: var(--abbep-maroon-700); }

.abbep-row__meta {
    font-size: .72rem;
    color: var(--abbep-ink-faint);
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin: 0;
}

/* Named `tag`, not `badge`: abbep.css already scopes `.abbep-card .abbep-badge`
   to the absolutely-positioned overlay on card media, and the two would fight. */
.abbep-tag {
    display: inline-block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .15rem .45rem;
    border-radius: 5px;
    background: var(--abbep-gold-200);
    color: var(--abbep-gold-600);
}

.abbep-tag--maroon {
    background: rgba(78, 22, 28, .1);
    color: var(--abbep-maroon-700);
}

/* Quick-links list: plain rows with a gold chevron. */
.abbep-links { display: flex; flex-direction: column; }

.abbep-links a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .62rem .75rem;
    border-radius: var(--abbep-radius-sm);
    font-size: .84rem;
    font-weight: 500;
    color: var(--abbep-ink);
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.abbep-links a i {
    color: var(--abbep-gold-600);
    font-size: .8rem;
    width: 16px;
    text-align: center;
}

.abbep-links a:hover {
    background: var(--abbep-cream-50);
    color: var(--abbep-maroon-700);
}

/* ==========================================================================
   15. Mission band
   ========================================================================== */

.abbep-mission {
    position: relative;
    overflow: hidden;
    border-radius: var(--abbep-radius-lg);
    background: linear-gradient(115deg, var(--abbep-maroon-900), var(--abbep-maroon-600) 70%, #8A3E1C);
    color: #fff;
    padding: 2.5rem;
}

.abbep-mission__art {
    position: absolute;
    right: -20px;
    bottom: 0;
    height: 115%;
    opacity: .28;
    pointer-events: none;
}

.abbep-mission__inner { position: relative; z-index: 2; }

.abbep-mission h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }

.abbep-mission p { color: rgba(255, 255, 255, .75); max-width: 620px; }

.abbep-mission__actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1.75rem;
}

.abbep-mission__action {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--abbep-radius-sm);
    padding: 1rem .9rem;
    text-decoration: none;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    transition: background .25s ease, transform .25s ease;
}

.abbep-mission__action:hover {
    background: rgba(255, 255, 255, .14);
    transform: translateY(-3px);
    color: #fff;
}

.abbep-mission__action i { color: var(--abbep-gold-300); font-size: 1.2rem; }

.abbep-mission__action strong { font-size: .88rem; font-weight: 600; }

.abbep-mission__action small { color: rgba(255, 255, 255, .6); font-size: .72rem; }

@media (max-width: 767.98px) {
    .abbep-mission { padding: 1.75rem 1.35rem; }
    .abbep-mission__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .abbep-mission__art { display: none; }
}

/* ==========================================================================
   16. Media row: gallery, video, magazine
   ========================================================================== */

.abbep-mosaic {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}

.abbep-mosaic a {
    display: block;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--abbep-cream-100);
}

.abbep-mosaic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.abbep-mosaic a:hover img { transform: scale(1.08); }

.abbep-video {
    position: relative;
    border-radius: var(--abbep-radius-sm);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--abbep-maroon-900);
}

.abbep-video iframe,
.abbep-video img {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.abbep-video__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(43, 11, 14, .35);
    color: #fff;
    text-decoration: none;
    transition: background .25s ease;
}

.abbep-video__play:hover { background: rgba(43, 11, 14, .5); color: #fff; }

.abbep-video__play span {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--abbep-gold-500);
    color: var(--abbep-maroon-900);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 0 0 10px rgba(200, 145, 43, .25);
}

.abbep-mag {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.abbep-mag__item {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.abbep-mag__cover {
    aspect-ratio: 3 / 4;
    border-radius: var(--abbep-radius-sm);
    overflow: hidden;
    border: 1px solid var(--abbep-line);
    background: var(--abbep-cream-100);
}

.abbep-mag__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.abbep-mag__item:hover .abbep-mag__cover img { transform: scale(1.05); }

.abbep-mag__item strong {
    font-size: .8rem;
    font-weight: 600;
    color: var(--abbep-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.abbep-mag__item small { font-size: .7rem; color: var(--abbep-ink-faint); }

/* ==========================================================================
   17. Testimonials
   ========================================================================== */

.abbep-quote {
    background: #fff;
    border: 1px solid var(--abbep-line);
    border-radius: var(--abbep-radius);
    padding: 1.6rem 1.4rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
}

.abbep-quote::before {
    content: "\201C";
    position: absolute;
    top: .35rem;
    right: 1.1rem;
    font-family: var(--abbep-font-display);
    font-size: 3.5rem;
    line-height: 1;
    color: var(--abbep-gold-200);
}

.abbep-quote p {
    color: var(--abbep-ink-soft);
    font-size: .88rem;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.abbep-quote__who {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding-top: .9rem;
    border-top: 1px dashed var(--abbep-line);
}

.abbep-quote__who img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--abbep-gold-200);
}

.abbep-quote__who strong { display: block; font-size: .85rem; color: var(--abbep-maroon-800); }

.abbep-quote__who small { font-size: .72rem; color: var(--abbep-ink-faint); }

/* ==========================================================================
   18. Newsletter
   ========================================================================== */

.abbep-newsletter {
    background: linear-gradient(100deg, var(--abbep-cream-100), var(--abbep-gold-200));
    border: 1px solid var(--abbep-line-gold);
    border-radius: var(--abbep-radius);
    padding: 1.5rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.abbep-newsletter__copy { display: flex; align-items: center; gap: 1rem; }

.abbep-newsletter__copy i { font-size: 1.6rem; color: var(--abbep-maroon-700); }

.abbep-newsletter__copy strong {
    display: block;
    font-family: var(--abbep-font-display);
    font-size: 1.1rem;
    color: var(--abbep-maroon-900);
}

.abbep-newsletter__copy small { color: var(--abbep-ink-soft); font-size: .8rem; }

.abbep-newsletter form {
    display: flex;
    gap: .5rem;
    flex: 1 1 340px;
    max-width: 460px;
}

.abbep-newsletter input {
    flex: 1;
    border: 1px solid var(--abbep-line-gold);
    border-radius: 999px;
    padding: .65rem 1.1rem;
    font-size: .85rem;
    background: #fff;
}

.abbep-newsletter button { border-radius: 999px; padding: .65rem 1.5rem; }

/* ==========================================================================
   19. Footer
   ========================================================================== */

.abbep-footer {
    background: var(--abbep-maroon-900);
    color: rgba(255, 255, 255, .68);
    padding: 3.5rem 0 0;
    position: relative;
}

/* Thin gold hairline across the very top of the footer. */
.abbep-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--abbep-gold-500), transparent);
}

.abbep-footer h2,
.abbep-footer h3,
.abbep-footer h4 {
    color: #fff;
    font-size: .95rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
    font-family: var(--abbep-font-body);
    font-weight: 700;
}

.abbep-footer__brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }

.abbep-footer__brand .abbep-mark {
    width: 64px;
    height: 64px;
    filter: drop-shadow(0 0 14px rgba(245, 166, 35, .3));
}

/* The footer mark, at the 200px the design calls for. Served from the 400px
   file so it stays crisp on a 2x display. */
.abbep-mark--xl {
    width: 200px;
    height: 200px;
}

.abbep-footer__brand .abbep-mark--xl {
    width: 300px;
    height: 300px;
    filter: drop-shadow(0 0 26px rgba(245, 166, 35, .28));
}

/* Second row: the navigation columns, separated from the brand block above. */
.abbep-footer__nav {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, .09);
}

@media (max-width: 575.98px) {
    /* 200px next to the wordmark leaves no room on a phone. */
    .abbep-footer__brand { flex-direction: column; align-items: flex-start; }

    .abbep-footer__brand .abbep-mark--xl { width: 140px; height: 140px; }
}

.abbep-footer__brand strong {
    display: block;
    font-family: var(--abbep-font-display);
    font-size: 3rem;
    color: #fff;
    letter-spacing: .05em;
}

.abbep-footer__brand span { font-size: 1.5rem; color: var(--abbep-gold-300); font-weight: 600; }
.abbep-footer__brand span p { font-size: 1rem; color: #fff5de; font-weight: 400; }

.abbep-footer p { font-size: .84rem; line-height: 1.65; }

.abbep-footer__links { display: flex; flex-direction: column; gap: .1rem; }

.abbep-footer__links a {
    color: rgba(255, 255, 255, .68);
    text-decoration: none;
    font-size: .84rem;
    padding: .25rem 0;
    transition: color .2s ease, padding-left .2s ease;
}

.abbep-footer__links a:hover {
    color: var(--abbep-gold-300);
    padding-left: .35rem;
}

.abbep-footer__contact { display: flex; gap: .7rem; margin-bottom: .85rem; font-size: .84rem; }

.abbep-footer__contact i { color: var(--abbep-gold-400); margin-top: .25rem; width: 16px; flex: 0 0 auto; }

.abbep-footer__contact a { color: rgba(255, 255, 255, .68); text-decoration: none; }

.abbep-footer__contact a:hover { color: var(--abbep-gold-300); }

.abbep-footer__social { display: flex; gap: .45rem; margin-top: 1rem; }

.abbep-footer__social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .8);
    font-size: .82rem;
    transition: background .2s ease, color .2s ease;
}

.abbep-footer__social a:hover { background: var(--abbep-gold-500); color: var(--abbep-maroon-900); }

.abbep-footer__bar {
    margin-top: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, .09);
    padding: 1.1rem 0;
    font-size: .78rem;
}

.abbep-footer__bar a { color: rgba(255, 255, 255, .68); text-decoration: none; }

.abbep-footer__bar a:hover { color: var(--abbep-gold-300); }

.abbep-footer__legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* ==========================================================================
   20. Inner page header (breadcrumb band)
   ========================================================================== */

.abbep-pagehead {
    position: relative;
    background: linear-gradient(115deg, var(--abbep-maroon-900), var(--abbep-maroon-700));
    color: #fff;
    padding: 3.25rem 0;
    text-align: center;
    overflow: hidden;
}

.abbep-pagehead::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 120%, rgba(200, 145, 43, .22), transparent 65%);
    pointer-events: none;
}

.abbep-pagehead__inner { position: relative; z-index: 2; }

.abbep-pagehead h1 {
    color: #fff;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    margin-bottom: .5rem;
}

.abbep-pagehead__lead {
    color: rgba(255, 255, 255, .72);
    max-width: 680px;
    margin: 0 auto 1rem;
    font-size: .95rem;
}

.abbep-pagehead .breadcrumb { justify-content: center; margin: 0; }

.abbep-pagehead .breadcrumb-item,
.abbep-pagehead .breadcrumb-item a { color: rgba(255, 255, 255, .7); font-size: .82rem; text-decoration: none; }

.abbep-pagehead .breadcrumb-item.active { color: var(--abbep-gold-300); }

.abbep-pagehead .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .35); }

/* ==========================================================================
   21. Parashuram portal: life timeline
   --------------------------------------------------------------------------
   A single rail with alternating cards on wide screens, collapsing to one
   column with the rail on the left below lg.
   ========================================================================== */

.abbep-timeline {
    position: relative;
    padding: 1rem 0;
}

.abbep-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(180deg, transparent, var(--abbep-gold-400) 8%, var(--abbep-gold-400) 92%, transparent);
}

.abbep-timeline__item {
    position: relative;
    width: 50%;
    padding: 0 2.75rem 2.25rem 0;
}

.abbep-timeline__item:nth-child(even) {
    margin-left: 50%;
    padding: 0 0 2.25rem 2.75rem;
}

/* The node sits on the rail, so it is anchored to the item's inner edge. */
.abbep-timeline__node {
    position: absolute;
    top: 0;
    right: -21px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--abbep-maroon-700);
    color: var(--abbep-gold-300);
    border: 3px solid var(--abbep-cream-50);
    box-shadow: 0 0 0 1px var(--abbep-line-gold);
    font-size: .9rem;
    z-index: 2;
}

.abbep-timeline__item:nth-child(even) .abbep-timeline__node {
    right: auto;
    left: -21px;
}

.abbep-timeline__card {
    background: #fff;
    border: 1px solid var(--abbep-line);
    border-radius: var(--abbep-radius);
    padding: 1.25rem 1.35rem;
    box-shadow: var(--abbep-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.abbep-timeline__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--abbep-shadow);
    border-color: var(--abbep-line-gold);
}

.abbep-timeline__step {
    display: inline-block;
    font-family: var(--abbep-font-display);
    font-size: .78rem;
    letter-spacing: .12em;
    color: var(--abbep-gold-600);
    margin-bottom: .3rem;
}

.abbep-timeline__card h3 { font-size: 1.05rem; margin-bottom: .4rem; }

.abbep-timeline__card p {
    color: var(--abbep-ink-soft);
    font-size: .85rem;
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 991.98px) {
    .abbep-timeline::before { left: 21px; }

    .abbep-timeline__item,
    .abbep-timeline__item:nth-child(even) {
        width: 100%;
        margin-left: 0;
        padding: 0 0 1.75rem 3.75rem;
    }

    .abbep-timeline__node,
    .abbep-timeline__item:nth-child(even) .abbep-timeline__node {
        left: 0;
        right: auto;
    }
}

/* ==========================================================================
   22. Knowledge base
   ========================================================================== */

/* Sidebar tree of categories and their articles. */
.abbep-tree { font-size: .86rem; }

.abbep-tree__group + .abbep-tree__group { margin-top: 1rem; }

.abbep-tree__heading {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--abbep-font-body);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--abbep-gold-600);
    margin: 0 0 .35rem;
}

.abbep-tree__heading i { font-size: .8rem; }

.abbep-tree__links {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--abbep-line);
    margin-left: .35rem;
    padding-left: .6rem;
}

.abbep-tree__links a {
    padding: .35rem .5rem;
    border-radius: 7px;
    color: var(--abbep-ink);
    text-decoration: none;
    line-height: 1.35;
    transition: background .2s ease, color .2s ease;
}

.abbep-tree__links a:hover {
    background: var(--abbep-cream-100);
    color: var(--abbep-maroon-700);
}

.abbep-tree__links a.is-current {
    background: var(--abbep-maroon-700);
    color: #fff;
    font-weight: 600;
}

/* Long-form article body. */
.abbep-article__lead {
    font-size: 1.02rem;
    color: var(--abbep-ink-soft);
    padding-bottom: 1.25rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--abbep-line);
}

.abbep-article section + section { margin-top: 2rem; }

.abbep-article h2 {
    font-size: 1.35rem;
    margin-bottom: .75rem;
    scroll-margin-top: 100px;
}

.abbep-article p {
    color: var(--abbep-ink);
    line-height: 1.75;
    margin-bottom: 1rem;
}

/* In-page table of contents, sticky beside the article. */
.abbep-toc {
    font-size: .84rem;
    border-left: 2px solid var(--abbep-line);
    padding-left: .9rem;
}

.abbep-toc a {
    display: block;
    padding: .3rem 0;
    color: var(--abbep-ink-soft);
    text-decoration: none;
}

.abbep-toc a:hover { color: var(--abbep-maroon-700); }

/* Card used in the related rail and the article grid. */
.abbep-kb-card {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: .85rem;
    border-radius: var(--abbep-radius-sm);
    border: 1px solid var(--abbep-line);
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.abbep-kb-card + .abbep-kb-card { margin-top: .6rem; }

.abbep-kb-card:hover {
    border-color: var(--abbep-line-gold);
    box-shadow: var(--abbep-shadow-sm);
    color: inherit;
}

.abbep-kb-card strong {
    display: block;
    font-size: .87rem;
    font-weight: 600;
    color: var(--abbep-maroon-800);
    margin-bottom: .15rem;
}

.abbep-kb-card small {
    color: var(--abbep-ink-soft);
    font-size: .76rem;
    line-height: 1.45;
    display: block;
}

/* ==========================================================================
   23. Our Work, membership, directories
   ========================================================================== */

/* Checklist used on the initiative detail pages. */
.abbep-ticks { list-style: none; padding: 0; margin: 0; }

.abbep-ticks li {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .5rem 0;
    font-size: .92rem;
}

.abbep-ticks li i {
    color: var(--abbep-gold-600);
    background: var(--abbep-cream-100);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    flex: 0 0 auto;
    margin-top: .15rem;
}

/* Numbered step card: how to become a member. */
.abbep-step {
    background: #fff;
    border: 1px solid var(--abbep-line);
    border-radius: var(--abbep-radius);
    padding: 1.5rem 1.35rem;
    position: relative;
    overflow: hidden;
}

.abbep-step__num {
    font-family: var(--abbep-font-display);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--abbep-gold-200);
    position: absolute;
    top: .6rem;
    right: 1rem;
}

.abbep-step h3 { font-size: 1rem; margin-bottom: .4rem; position: relative; }

.abbep-step p {
    color: var(--abbep-ink-soft);
    font-size: .84rem;
    line-height: 1.55;
    margin: 0;
    position: relative;
}

/* State group heading on the temple map. */
.abbep-state-group + .abbep-state-group { margin-top: 2.25rem; }

.abbep-state-group__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.1rem;
    padding-bottom: .6rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--abbep-line-gold);
}

.abbep-state-group__head i { color: var(--abbep-gold-600); font-size: .95rem; }

.abbep-state-group__head span {
    margin-left: auto;
    font-family: var(--abbep-font-body);
    font-size: .72rem;
    font-weight: 700;
    color: var(--abbep-gold-600);
    background: var(--abbep-cream-100);
    border-radius: 999px;
    padding: .15rem .6rem;
}

/* Inline filter box (temple map) and the full search bar (library). */
.abbep-filter,
.abbep-search__field {
    position: relative;
    display: flex;
    align-items: center;
}

.abbep-filter > i,
.abbep-search__field > i {
    position: absolute;
    left: 1rem;
    color: var(--abbep-gold-600);
    font-size: .85rem;
    pointer-events: none;
}

.abbep-filter input,
.abbep-search__field input {
    border: 1px solid var(--abbep-line-gold);
    border-radius: 999px;
    padding: .6rem 1.1rem .6rem 2.5rem;
    font-size: .88rem;
    background: #fff;
    width: 100%;
    min-width: 240px;
}

.abbep-filter input:focus,
.abbep-search__field input:focus {
    outline: none;
    border-color: var(--abbep-gold-400);
    box-shadow: 0 0 0 .2rem rgba(200, 145, 43, .18);
}

.abbep-search {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: center;
    background: var(--abbep-cream-50);
    border: 1px solid var(--abbep-line-gold);
    border-radius: var(--abbep-radius);
    padding: 1rem;
}

.abbep-search__field { flex: 1 1 260px; }

.abbep-search .form-select {
    width: auto;
    min-width: 170px;
    border-radius: 999px;
    border-color: var(--abbep-line-gold);
    font-size: .85rem;
    padding: .6rem 2rem .6rem 1rem;
}

@media (max-width: 575.98px) {
    .abbep-search { padding: .85rem; }
    .abbep-search .form-select,
    .abbep-search .btn { width: 100%; }
}

/* Library item, styled as a book with a coloured spine. */
.abbep-book {
    display: flex;
    background: #fff;
    border: 1px solid var(--abbep-line);
    border-radius: var(--abbep-radius);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.abbep-book:hover {
    transform: translateY(-4px);
    box-shadow: var(--abbep-shadow);
    border-color: var(--abbep-line-gold);
}

.abbep-book__spine {
    flex: 0 0 62px;
    background: linear-gradient(160deg, var(--abbep-maroon-700), var(--abbep-maroon-900));
    color: var(--abbep-gold-300);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1rem .35rem;
    text-align: center;
}

.abbep-book__spine i { font-size: 1.15rem; }

.abbep-book__spine span {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.2;
}

.abbep-book__body { padding: 1.1rem 1.2rem; flex: 1; min-width: 0; }

/* Attribution block under a page of Commons photographs. */
.abbep-credits {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--abbep-line);
    font-size: .82rem;
}

.abbep-credits summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: var(--abbep-gold-600);
    list-style: none;
}

.abbep-credits summary::-webkit-details-marker { display: none; }

.abbep-credits summary::after {
    content: "+";
    margin-left: .25rem;
    color: var(--abbep-ink-faint);
}

.abbep-credits details[open] summary::after { content: "\2212"; }

.abbep-credits__note {
    color: var(--abbep-ink-soft);
    margin: .75rem 0 .5rem;
    max-width: 720px;
}

.abbep-credits ul {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 2rem;
}

.abbep-credits li {
    break-inside: avoid;
    padding: .25rem 0;
    color: var(--abbep-ink-soft);
}

.abbep-credits li a { color: var(--abbep-maroon-700); text-decoration: none; }

.abbep-credits li a:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
    .abbep-credits ul { columns: 1; }
}

/* ==========================================================================
   24. Error pages and empty states
   ========================================================================== */

.abbep-errorpage {
    background:
        radial-gradient(ellipse at 15% 0%, rgba(200, 145, 43, .14), transparent 55%),
        var(--abbep-cream-50);
    min-height: 100vh;
}

.abbep-error {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 3rem 0;
}

/* With the header and footer present the error block no longer needs to fill
   the viewport - it sits between them like any other page section. */
.abbep-errorpage--chrome .abbep-error {
    min-height: 0;
    padding: 4rem 0 5rem;
}

.abbep-errorpage--chrome .abbep-error__card { margin: 0 auto; }

.abbep-error__brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    margin-bottom: 2rem;
}

.abbep-error__brand strong {
    display: block;
    font-family: var(--abbep-font-display);
    font-size: 1.3rem;
    color: var(--abbep-maroon-800);
    letter-spacing: .04em;
}

.abbep-error__brand > span > span {
    font-size: .68rem;
    color: var(--abbep-ink-soft);
}

.abbep-error__card {
    background: #fff;
    border: 1px solid var(--abbep-line-gold);
    border-radius: var(--abbep-radius-lg);
    box-shadow: var(--abbep-shadow);
    padding: 2.5rem;
    max-width: 900px;
}

.abbep-error__art {
    max-width: 100%;
    max-height: 300px;
    filter: drop-shadow(0 14px 30px rgba(43, 11, 14, .22));
}

.abbep-error__code {
    font-family: var(--abbep-font-display);
    font-size: clamp(3.5rem, 9vw, 6rem);
    line-height: 1;
    color: var(--abbep-maroon-700);
    margin: 0 0 .5rem;
    letter-spacing: -.02em;
}

.abbep-error__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--abbep-cream-100);
    border: 1px solid var(--abbep-line-gold);
    color: var(--abbep-gold-600);
    font-size: 1.9rem;
    margin-bottom: 1.1rem;
}

.abbep-error__title {
    font-size: clamp(1.35rem, 3vw, 1.9rem);
    margin-bottom: .6rem;
}

.abbep-error__text {
    color: var(--abbep-ink-soft);
    font-size: .95rem;
    margin-bottom: 1.5rem;
}

.abbep-error__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.text-center .abbep-error__actions,
.text-md-start.text-center .abbep-error__actions { justify-content: center; }

@media (min-width: 768px) {
    .text-md-start .abbep-error__actions { justify-content: flex-start; }
}

@media (max-width: 575.98px) {
    .abbep-error__card { padding: 1.5rem 1.25rem; }
}

/* --- Empty state, inside a normal page --------------------------------- */

.abbep-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--abbep-cream-50);
    border: 1px dashed var(--abbep-line-gold);
    border-radius: var(--abbep-radius);
}

.abbep-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--abbep-line-gold);
    color: var(--abbep-gold-600);
    font-size: 1.7rem;
    margin-bottom: 1rem;
}

.abbep-empty h2,
.abbep-empty h3 {
    font-size: 1.15rem;
    margin-bottom: .45rem;
}

.abbep-empty p {
    color: var(--abbep-ink-soft);
    font-size: .88rem;
    max-width: 460px;
    margin: 0 auto;
}

.abbep-empty__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.25rem;
}

/* ==========================================================================
   25. Utilities
   ========================================================================== */

.abbep-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.abbep-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.abbep-scroll-y {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--abbep-gold-300) transparent;
}

.abbep-scroll-y::-webkit-scrollbar { width: 6px; }
.abbep-scroll-y::-webkit-scrollbar-thumb { background: var(--abbep-gold-300); border-radius: 3px; }

/*
 * WOW.js hides every `.wow` element until it scrolls into view. A visitor who
 * has asked for reduced motion gets no animation to trigger the reveal, which
 * would leave most of the page blank. Force them visible instead.
 */
@media (prefers-reduced-motion: reduce) {
    .wow {
        visibility: visible !important;
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .abbep-card,
    .abbep-attr,
    .abbep-initiative,
    .abbep-mission__action,
    .abbep-initiative__media img,
    .abbep-mosaic img,
    .abbep-mag__cover img {
        transition: none;
    }

    .abbep-card:hover,
    .abbep-attr:hover,
    .abbep-initiative:hover,
    .abbep-mission__action:hover { transform: none; }
}

/* ==========================================================================
   Flash toasts
   --------------------------------------------------------------------------
   Feedback used to render as a Bootstrap alert at the top of <main>. The
   newsletter strip sits near the foot of the home page and redirects back to
   itself, so that alert landed far above the viewport and read as "nothing
   happened". Fixed positioning means the message is seen wherever the form was.
   ========================================================================== */

.abbep-toasts {
    position: fixed;
    top: 90px;
    right: 16px;
    z-index: 1080;
    width: min(390px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: .6rem;
    /* The strip itself must not swallow clicks meant for the page behind it. */
    pointer-events: none;
}

.abbep-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem 1rem;
    background: #fff;
    border: 1px solid var(--abbep-line);
    border-left: 4px solid var(--abbep-gold-500);
    border-radius: var(--abbep-radius-sm);
    box-shadow: var(--abbep-shadow-lg);
    font-family: var(--abbep-font-body);
    color: var(--abbep-ink);
    animation: abbep-toast-in .28s ease-out both;
}

.abbep-toast.is-leaving {
    animation: abbep-toast-out .22s ease-in both;
}

.abbep-toast__icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
}

.abbep-toast__body {
    flex: 1;
    min-width: 0;
    font-size: .9rem;
    line-height: 1.45;
}

.abbep-toast__title {
    display: block;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .01em;
    margin-bottom: .1rem;
}

.abbep-toast__list {
    margin: .25rem 0 0;
    padding-left: 1.1rem;
}

.abbep-toast__list li + li { margin-top: .15rem; }

.abbep-toast__close {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: var(--abbep-ink-faint);
    font-size: 1.1rem;
    line-height: 1;
    padding: .1rem .2rem;
    border-radius: 6px;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}

.abbep-toast__close:hover,
.abbep-toast__close:focus-visible {
    color: var(--abbep-maroon-700);
    background: var(--abbep-cream-100);
}

.abbep-toast--success { border-left-color: var(--abbep-ok); }

.abbep-toast--success .abbep-toast__icon {
    background: var(--abbep-ok-soft);
    color: var(--abbep-ok);
}

.abbep-toast--success .abbep-toast__title { color: var(--abbep-ok); }

.abbep-toast--error { border-left-color: var(--abbep-danger); }

.abbep-toast--error .abbep-toast__icon {
    background: var(--abbep-danger-soft);
    color: var(--abbep-danger);
}

.abbep-toast--error .abbep-toast__title { color: var(--abbep-danger); }

@keyframes abbep-toast-in {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: none; }
}

@keyframes abbep-toast-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateX(18px); }
}

/* Below lg the rail is gone and the header is shorter, so the toast can sit
   higher and span the width. */
@media (max-width: 991.98px) {
    .abbep-toasts {
        top: auto;
        bottom: 16px;
        left: 16px;
        right: 16px;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .abbep-toast,
    .abbep-toast.is-leaving { animation: none; }
}

/* Honeypot wrapper (components/form-guard.blade.php). Pushed off-screen rather
   than display:none or visibility:hidden, both of which bots know to skip. */
.abbep-form-guard {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ==========================================================================
   Animated icons (components/lord-icon.blade.php)
   --------------------------------------------------------------------------
   A fixed box holding a Lordicon animation stacked over a Font Awesome glyph.
   The glyph shows first; abbep.js swaps to the animation only once it has
   confirmed one actually drew. Without that both rendered at once, which is
   what made the icons overlap and spill out of their card.
   ========================================================================== */

.abbep-licon {
    --licon-size: 48px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Fixed both ways so nothing reflows when the animation takes over. */
    width: var(--licon-size);
    height: var(--licon-size);
    flex-shrink: 0;
    line-height: 1;
    vertical-align: middle;
}

.abbep-licon__anim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Hidden until proven to have rendered. */
    opacity: 0;
    pointer-events: none;
}

.abbep-licon__fa {
    font-size: calc(var(--licon-size) * .58);
    line-height: 1;
    color: inherit;
}

/* Set by abbep.js once the animation is confirmed. */
.abbep-licon.is-animated .abbep-licon__anim {
    opacity: 1;
    pointer-events: auto;
}

.abbep-licon.is-animated .abbep-licon__fa { display: none; }

/* The glyph is a real icon in its own right, not just a placeholder, so give it
   the same sense of life the animations have: it reacts when its card does. */
.abbep-licon__fa {
    transition: transform .25s ease, color .25s ease;
}

.abbep-attr:hover .abbep-licon__fa,
.abbep-kb-card:hover .abbep-licon__fa,
.abbep-timeline__item:hover .abbep-licon__fa,
.abbep-licon:hover .abbep-licon__fa {
    transform: scale(1.15) rotate(-6deg);
}

@media (prefers-reduced-motion: reduce) {
    .abbep-licon__fa,
    .abbep-attr:hover .abbep-licon__fa,
    .abbep-kb-card:hover .abbep-licon__fa,
    .abbep-timeline__item:hover .abbep-licon__fa,
    .abbep-licon:hover .abbep-licon__fa {
        transition: none;
        transform: none;
    }
}