/* SLI-SS site effects v37 (scroll reveals, counters, hover lift, progress bar, back-to-top).
   Content stays fully visible if JavaScript is off: hiding only applies under html.sli-js. */

:root {
    --sli-primary: #3b55a8;
    --sli-accent: maroon;
    --sli-ease: cubic-bezier(.22, .9, .32, 1);
}

/* ---- Scroll reveal ---- */
.sli-js .sli-reveal {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(.985);
    transition: opacity .8s var(--sli-ease), transform .8s var(--sli-ease);
    transition-delay: var(--sli-delay, 0ms);
    will-change: opacity, transform;
}
.sli-js .sli-reveal.sli-from-left  { transform: translate3d(-44px, 0, 0); }
.sli-js .sli-reveal.sli-from-right { transform: translate3d(44px, 0, 0); }
.sli-js .sli-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Heading underline that draws itself in */
.sli-js .sli-underline { position: relative; }
.sli-js .sli-underline::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin-top: .45rem;
    background: var(--sli-primary);
    border-radius: 3px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .9s var(--sli-ease) .25s;
}
.sli-js .text-center .sli-underline::after,
.sli-js .sli-underline.text-center::after { margin-left: auto; margin-right: auto; transform-origin: center; }
.sli-js .sli-underline.is-visible::after { transform: scaleX(1); }

/* ---- Cards: gentle lift on hover ---- */
.sli-lift {
    transition: transform .35s var(--sli-ease), box-shadow .35s var(--sli-ease), border-color .35s;
}
@media (hover: hover) {
    .sli-lift:hover {
        transform: translateY(-6px);
        box-shadow: 0 1rem 2rem rgba(59, 85, 168, .16) !important;
        border-color: rgba(59, 85, 168, .35) !important;
    }
}

/* Image zoom inside cards on hover */
.sli-lift img { transition: transform .6s var(--sli-ease); }
@media (hover: hover) {
    .sli-lift:hover img { transform: scale(1.04); }
}
.sli-lift a.img-xoom, .sli-lift .img-xoom { overflow: hidden; display: block; }

/* ---- Stat tiles ---- */
.sli-stat { position: relative; overflow: hidden; }
.sli-stat::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    height: 3px; width: 100%;
    background: var(--sli-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.4s var(--sli-ease) .2s;
}
.sli-stat.is-visible::before, .sli-stat:not(.sli-reveal)::before { transform: scaleX(1); }
.sli-count { font-variant-numeric: tabular-nums; }

/* ---- Reading progress bar ---- */
#sli-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px; width: 100%;
    background: var(--sli-primary);
    transform: scaleX(0);
    transform-origin: left center;
    z-index: 2000;
    pointer-events: none;
}

/* ---- Back to top ---- */
#sli-top {
    position: fixed;
    right: 18px; bottom: 18px;
    width: 46px; height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--sli-primary);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s, transform .3s var(--sli-ease), visibility .3s, background .2s;
    z-index: 2000;
}
#sli-top.show { opacity: 1; visibility: visible; transform: none; }
#sli-top:hover, #sli-top:focus-visible { background: var(--sli-accent); outline: none; }

/* ---- Respect people who turn animations off ---- */
@media (prefers-reduced-motion: reduce) {
    .sli-js .sli-reveal, .sli-js .sli-reveal.sli-from-left, .sli-js .sli-reveal.sli-from-right {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
    .sli-underline::after, .sli-stat::before { transform: scaleX(1) !important; transition: none !important; }
    .sli-lift, .sli-lift img { transition: none !important; }
    .sli-lift:hover, .sli-lift:hover img { transform: none !important; }
    #sli-progress { display: none; }
}

/* ---- Programme cards (rescue.org "Get involved" style) ---- */
.sli-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: #212529;
    text-decoration: none;
}
.sli-card:hover, .sli-card:focus-visible { color: #212529; text-decoration: none; }
.sli-card-img { aspect-ratio: 4 / 3; overflow: hidden; background: #e9ecef; }
.sli-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sli-card-box {
    position: relative;
    flex: 1;
    margin: -64px 16px 0;            /* white panel overlaps the bottom of the photo */
    padding: 24px 32px;
    background: #fff;
    border-bottom: 6px solid var(--sli-primary);
    transition: background-color .2s ease, color .2s ease;
}
.sli-card-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 1rem;
    color: inherit;
}
.sli-card-title::after {               /* the › chevron */
    content: "";
    flex: 0 0 9px;
    height: 14px;
    margin-top: .45em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.53 13'%3E%3Cpath d='M2.03 0 0 2.03 4.47 6.5 0 10.97 2.03 13l6.5-6.5z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.53 13'%3E%3Cpath d='M2.03 0 0 2.03 4.47 6.5 0 10.97 2.03 13l6.5-6.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.sli-card-text { margin: 0; line-height: 1.65; color: inherit; }
.sli-card:hover .sli-card-box, .sli-card:focus-visible .sli-card-box {
    background: var(--sli-primary);
    color: #fff;
}

/* ---- Section headings with a side bar (rescue.org style) ---- */
.sli-hbar {
    border-left: 6px solid var(--sli-primary);
    padding: 8px 0 8px 24px;
    margin-bottom: 1.25rem;
    font-weight: 700;
    color: #212529;
    text-align: left;
}

/* ---- Donate button in the top bar (rounded pill; the only item in the blue bar) ---- */
#top { padding-top: .3rem !important; padding-bottom: .3rem !important; }
#top .row { justify-content: flex-end; }
.sli-donate {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .28rem .32rem .28rem 1.15rem;
    border-radius: 999px;
    background: #fff;
    color: var(--sli-primary) !important;
    font-weight: 700;
    font-size: .82rem;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.sli-donate i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    background: maroon;
    color: #fff;
    font-size: .74rem;
    transition: background-color .25s ease, color .25s ease;
}
.sli-donate:hover, .sli-donate:focus-visible {
    background: maroon;
    color: #fff !important;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}
.sli-donate:hover i, .sli-donate:focus-visible i { background: #fff; color: maroon; animation: sli-beat 1s ease-in-out infinite; }
.sli-donate:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes sli-beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } 60% { transform: scale(.95); } }

/* Phones and tablets: the opened menu drops down full width under the header */
#header > .container { position: relative; }
@media (max-width: 991.98px) {
    #header .sli-nav { padding: 0; }
    #header .sli-nav .navbar-collapse {
        position: absolute;
        left: 0; right: 0; top: 100%;
        background: #fff;
        padding: .5rem 1.5rem 1rem;
        box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .12);
        z-index: 1050;
    }
}

/* ---- Compact modern header (all pages): round badge logo, clean white bar, slim blue bar ---- */
#header { background-image: none !important; background-color: #fff !important; box-shadow: 0 2px 14px rgba(0, 0, 0, .07); }
#header .sli-logo-col { min-width: 0; }
#header .sli-logo-col .py-3 { padding-top: .55rem !important; padding-bottom: .55rem !important; }
#header .sli-logo { width: 64px; height: 64px; max-width: none; object-fit: contain; transition: transform .25s ease; }
#header .sli-logo-col a:hover .sli-logo { transform: scale(1.05); }
#header .sli-nav .nav-link { transition: color .2s ease; }
#header .sli-nav .nav-link:hover, #header .sli-nav .nav-link:focus-visible { color: var(--sli-primary); }

/* Phones: smaller logo and Donate button */
@media (max-width: 575.98px) {
    #header .sli-logo { width: 52px; height: 52px; }
    #top { padding-top: .28rem !important; padding-bottom: .28rem !important; }
    .sli-donate { padding: .26rem .3rem .26rem 1rem; font-size: .78rem; gap: .5rem; }
    .sli-donate i { width: 1.55rem; height: 1.55rem; font-size: .7rem; }
}

/* ---- Social icons in the footer ---- */
.sli-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin-right: .4rem;
    border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%;
    color: #fff; text-decoration: none; transition: background .2s, color .2s;
}
.sli-social a:hover, .sli-social a:focus-visible { background: #fff; color: var(--sli-primary); }

@media (prefers-reduced-motion: reduce) {
    .sli-card-box, .sli-donate, .sli-donate i { transition: none !important; }
    .sli-donate:hover, .sli-donate:hover i { transform: none !important; animation: none !important; }
}

/* ---- Who We Are page (rescue.org style) ---- */
.sli-about { --sli-line: #d1d1d1; }
.sli-about-intro { background: #fff; padding: 2rem 2.5rem; margin-bottom: 3rem; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.sli-about-eyebrow { font-size: .95rem; color: #6c757d; margin-bottom: .5rem; }
.sli-about-lead { font-size: 1.35rem; line-height: 1.55; font-weight: 500; margin: 0; color: #212529; }
.sli-about-textlink { display: inline-block; margin-top: .4rem; font-weight: 700; color: #212529; text-decoration: none; border-bottom: 2px solid var(--sli-primary); }
.sli-about-textlink:hover { color: var(--sli-primary); }
.sli-about-section { margin-bottom: 3.5rem; scroll-margin-top: 110px; }   /* clears the sticky header */
.sli-about-section p { line-height: 1.75; }
.sli-about-section p a { font-weight: 700; color: #212529; text-decoration: none; border-bottom: 2px solid var(--sli-primary); transition: background-color .2s; }
.sli-about-section p a:hover { background: rgba(59, 85, 168, .12); }
.sli-about-photo { aspect-ratio: 4 / 3; object-fit: cover; }

.sli-vm { background: #fff; border-left: 6px solid var(--sli-primary); padding: 1.5rem 1.75rem; box-shadow: 0 1px 4px rgba(0, 0, 0, .06); font-size: 1.1rem; line-height: 1.6; }
.sli-vm-label { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sli-primary); margin-bottom: .5rem; }
.sli-value { background: #fff; height: 100%; padding: 1.25rem 1.25rem 1rem; border-top: 4px solid var(--sli-primary); box-shadow: 0 1px 4px rgba(0, 0, 0, .06); }
.sli-value h6 { font-weight: 700; margin-bottom: .4rem; }
.sli-value p { font-size: .92rem; color: #5f6670; margin: 0; line-height: 1.55; }

.sli-glance { list-style: none; padding: 0; margin: 0; }
.sli-glance li { border-top: 1px solid var(--sli-line); }
.sli-glance li:last-child { border-bottom: 1px solid var(--sli-line); }
.sli-glance a { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; font-weight: 700; color: #212529; text-decoration: none; }
.sli-glance a::before { content: ""; flex: 0 0 14px; height: 14px; border: 3px solid var(--sli-primary); border-radius: 50%; }
.sli-glance a::after {
    content: ""; margin-left: auto; flex: 0 0 9px; height: 14px; background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.53 13'%3E%3Cpath d='M2.03 0 0 2.03 4.47 6.5 0 10.97 2.03 13l6.5-6.5z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.53 13'%3E%3Cpath d='M2.03 0 0 2.03 4.47 6.5 0 10.97 2.03 13l6.5-6.5z'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform .2s;
}
.sli-glance a:hover { color: var(--sli-primary); }
.sli-glance a:hover::after { transform: translateX(4px); }
@media (max-width: 991.98px) { .sli-glance + .sli-glance, .col-lg-6 + .col-lg-6 > .sli-glance li:first-child { border-top: 0; } }

.sli-offices { list-style: none; padding: 0; margin: 0; }
.sli-offices li { padding: .55rem 0; border-bottom: 1px solid var(--sli-line); }
.sli-offices i { color: var(--sli-primary); width: 1.2rem; }
.sli-priorities { padding-left: 1.4rem; margin: 0; }
.sli-priorities li { padding: .45rem 0; font-weight: 600; }
.sli-priorities li::marker { color: var(--sli-primary); font-weight: 800; }
.sli-why { display: flex; gap: 1rem; background: #fff; height: 100%; padding: 1.25rem 1.4rem; border-bottom: 4px solid var(--sli-primary); box-shadow: 0 1px 4px rgba(0, 0, 0, .06); }
.sli-why i { font-size: 1.4rem; color: var(--sli-primary); margin-top: .2rem; }
.sli-why h6 { font-weight: 700; margin-bottom: .35rem; }
.sli-why p { font-size: .95rem; color: #5f6670; margin: 0; }
.sli-about-cta { background: var(--sli-primary); color: #fff; padding: 2rem 2.5rem; }
.sli-about-cta h4 { font-weight: 700; color: #fff; }
@media (max-width: 575.98px) {
    .sli-about-intro, .sli-about-cta { padding: 1.5rem 1.25rem; }
    .sli-about-lead { font-size: 1.15rem; }
}

/* ---- About us hero (rescue.org style): clear full-width photo, white card floating over its lower edge ----
   Only switches on for a page whose body contains .sli-hero-card, and only in browsers that support :has().
   Older browsers keep the normal banner and title, so nothing breaks. */
.sli-about-title { display: none; }
@supports selector(:has(*)) {
    .sli-about-title { display: block; font-weight: 800; font-size: clamp(1.9rem, 3.2vw, 2.4rem); line-height: 1.15; letter-spacing: -.01em; color: #212529; margin: .3rem 0 1rem; }
    body:has(.sli-hero-card) .page-header { background-size: cover; background-position: center 30%; }
    body:has(.sli-hero-card) .page-header .bg-overlay { background: transparent !important; min-height: 540px; }
    body:has(.sli-hero-card) .page-header .row { display: none; }
    .sli-hero-card {
        position: relative; z-index: 2;
        margin-top: calc(-3rem - 210px);
        padding: 3rem 4rem 3.25rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
        animation: sli-hero-rise .9s var(--sli-ease) .15s both;
    }
    .sli-hero-card .sli-about-eyebrow { font-size: 1rem; color: #5f6670; margin-bottom: 0; }
    .sli-hero-card .sli-about-lead { font-size: 1rem; font-weight: 400; line-height: 1.75; }
    .sli-hero-card .btn {
        border-radius: 999px; font-weight: 700; font-size: 1rem; padding: .6rem 1.6rem !important; line-height: 1.3;
        box-shadow: 0 4px 12px rgba(59, 85, 168, .28);
        transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
    }
    .sli-hero-card .btn:hover, .sli-hero-card .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(59, 85, 168, .35); }
    .sli-hero-card .col-lg-4 { padding-top: .5rem; }
    @media (max-width: 991.98px) {
        body:has(.sli-hero-card) .page-header .bg-overlay { min-height: 380px; }
        .sli-hero-card { margin-top: calc(-3rem - 120px); padding: 2.25rem 2rem 2.5rem; }
        /* Button and link sit side by side under the text instead of stacking */
        .sli-hero-card .col-lg-4 { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding-top: 0; }
        .sli-hero-card .col-lg-4 .btn { margin-bottom: 0 !important; }
        .sli-hero-card .col-lg-4 .sli-about-textlink { margin-top: 0; }
    }
    /* Phones (rescue.org mobile style): taller photo, card overlaps only its bottom edge,
       compact title, button with the link underneath */
    @media (max-width: 575.98px) {
        body:has(.sli-hero-card) .page-header .bg-overlay { min-height: 380px; }
        body:has(.sli-hero-card) .page-header { background-position: center 30%; }
        .sli-hero-card { margin-top: calc(-3rem - 44px); padding: 1.75rem 1.5rem 2rem; }
        .sli-hero-card .sli-about-eyebrow { font-size: .95rem; color: #212529; }
        .sli-about-title { font-size: 1.6rem; margin: .5rem 0 .9rem; }
        .sli-hero-card .col-lg-4 { flex-direction: column; align-items: flex-start; gap: 1.25rem; padding-top: .25rem; }
        .sli-hero-card .btn { font-size: .95rem; padding: .65rem 1.75rem !important; }
    }
}
/* ---- About us: uses the same header as every other page (logo and menu on one line) ---- */

@keyframes sli-hero-rise { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sli-hero-card { animation: none; } }

/* ---- Governance and Leadership page ---- */
.sli-ed { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; }
.sli-ed-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.sli-ed-card {
    position: relative; background: #fff; margin: 3rem 0 0 -3rem; padding: 2.5rem 3rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08); border-bottom: 6px solid var(--sli-primary); line-height: 1.75;
}
.sli-ed-mark { font-family: Georgia, serif; font-size: 5rem; line-height: .6; height: 2.2rem; color: var(--sli-primary); }
.sli-ed-card p a { font-weight: 700; color: #212529; text-decoration: none; border-bottom: 2px solid var(--sli-primary); }
.sli-ed-name { font-weight: 800; font-size: 1.15rem; }
.sli-ed-role { color: #6c757d; font-size: .95rem; }
#executive-director { overflow-x: hidden; overflow-x: clip; padding-bottom: .5rem; }
@media (min-width: 768px) and (max-width: 991.98px) {
    .sli-ed { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }
    .sli-ed-card { margin: 2rem 0 0 -2.5rem; padding: 2rem 2rem 1.75rem; }
}
@media (max-width: 767.98px) {
    .sli-ed { grid-template-columns: 1fr; }
    .sli-ed-photo { width: 72%; max-width: 300px; }
    .sli-ed-card { margin: -4rem 0 0 14%; padding: 1.75rem 1.4rem 1.5rem; font-size: .98rem; line-height: 1.65; }
    .sli-ed-mark { font-size: 4rem; height: 1.7rem; }
}
@media (max-width: 399.98px) {
    .sli-ed-photo { width: 80%; }
    .sli-ed-card { margin-left: 7%; }
}

/* ED photo and card fly in: photo from the left, card slides in over it from the right */
@keyframes sli-ed-in-left  { from { opacity: 0; transform: translate3d(-48px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes sli-ed-in-right { from { opacity: 0; transform: translate3d(48px, 18px, 0); } to { opacity: 1; transform: none; } }
.sli-ed-photo { animation: sli-ed-in-left .9s var(--sli-ease) .1s both; }
.sli-ed-card  { animation: sli-ed-in-right .95s var(--sli-ease) .4s both; }
.sli-ed-card.sli-ed-defer { animation: none; } /* below the fold on load: JS reveals it on scroll instead */
@media (prefers-reduced-motion: reduce) { .sli-ed-photo, .sli-ed-card { animation: none; } }

.sli-roles { list-style: none; padding: 0; margin: 0; }
.sli-roles li { border-top: 1px solid #d1d1d1; padding: .9rem 0; }
.sli-roles li:last-child { border-bottom: 1px solid #d1d1d1; }
.sli-roles strong { display: block; margin-bottom: .2rem; }
.sli-roles span { color: #5f6670; font-size: .95rem; }
@media (max-width: 991.98px) { .col-lg-6 + .col-lg-6 > .sli-roles li:first-child { border-top: 0; } }

.sli-org { text-align: center; }
.sli-org-box { display: inline-block; min-width: min(100%, 320px); background: #fff; border: 2px solid var(--sli-primary); padding: .8rem 1.25rem; font-weight: 700; }
.sli-org-top { background: var(--sli-primary); color: #fff; }
.sli-org-light { font-weight: 500; font-size: .92rem; border-style: dashed; }
.sli-org-line { width: 2px; height: 1.5rem; background: var(--sli-primary); margin: 0 auto; }
.sli-org-dept { background: #fff; height: 100%; padding: 1rem; border-top: 4px solid var(--sli-primary); box-shadow: 0 1px 4px rgba(0, 0, 0, .06); text-align: left; }
.sli-org-dept strong { display: block; margin-bottom: .35rem; }
.sli-org-dept span { font-size: .88rem; color: #5f6670; }


/* =====================================================================
   v22: sticky compact header, About us dropdown, home hero slider
   ===================================================================== */

/* ---- One-line sticky header: logo, menu and a blue Donate button.
        Only the shadow changes on scroll, so the page never jumps. (sli-effects.js adds .sli-stuck.) ---- */
#header { position: sticky; top: 0; transition: box-shadow .3s ease; }
#header.sli-stuck { box-shadow: 0 6px 20px rgba(29, 43, 92, .12); }
#header .sli-donate-nav { background: var(--sli-primary); color: #fff !important; box-shadow: 0 4px 12px rgba(59, 85, 168, .3); }
#header .sli-donate-nav i { background: #fff; color: maroon; }
#header .sli-donate-nav:hover, #header .sli-donate-nav:focus-visible { background: maroon; color: #fff !important; box-shadow: 0 6px 16px rgba(128, 0, 0, .3); }
#header .sli-donate-nav:focus-visible { outline: 2px solid var(--sli-primary); outline-offset: 3px; }
@media (min-width: 992px) { #header .sli-donate-nav { order: 2; margin-left: 1rem; } }
@media (max-width: 991.98px) { #header .sli-donate-nav { margin-right: .6rem; } }
@media (max-width: 575.98px) {
    #header .sli-donate-nav { padding: .24rem .28rem .24rem .9rem; font-size: .74rem; gap: .45rem; }
    #header .sli-donate-nav i { width: 1.5rem; height: 1.5rem; font-size: .66rem; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---- About us dropdown with "SLI-SS at a glance" shortcuts ---- */
#header .dropdown-menu { border: 0; border-radius: 10px; padding: .5rem; min-width: 270px; box-shadow: 0 14px 34px rgba(29, 43, 92, .16); }
#header .dropdown-header { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sli-primary); padding: .7rem .9rem .3rem; }
#header .dropdown-item { border-radius: 6px; font-size: .92rem; white-space: normal; }
#header .dropdown-item:hover, #header .dropdown-item:focus { background: #f3f5fa; color: var(--sli-primary); }
#header .dropdown-divider { margin: .4rem .5rem; }
@media (max-width: 991.98px) { #header .dropdown-menu { box-shadow: none; padding: 0 0 .5rem .75rem; min-width: 0; } }

/* ---- Home hero slider (fade, slow zoom, text rising in, progress bars) ---- */
.sli-hero { position: relative; height: clamp(460px, 74vh, 640px); overflow: hidden; background: #1d2b5c; isolation: isolate; }
.sli-hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 0s linear 1.2s; }
.sli-hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity 1.2s ease, visibility 0s; }
.sli-hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform-origin: 60% 40%; }
.sli-hero-slide.is-active img { animation: sli-drift 9s ease-out both; }
@keyframes sli-drift { from { transform: scale(1); } to { transform: scale(1.08); } }
.sli-hero-slide::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(29, 43, 92, .88) 0%, rgba(29, 43, 92, .62) 38%, rgba(29, 43, 92, .12) 72%, rgba(29, 43, 92, 0) 100%),
                linear-gradient(0deg, rgba(29, 43, 92, .55) 0%, rgba(29, 43, 92, 0) 35%); }
.sli-hero-caption { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; }
.sli-hero .container { --bs-gutter-x: 1.5rem; }   /* the home wrapper row has no gutters; give the text its side margin back */
.sli-hero-caption .container { width: 100%; }
.sli-hero-text { max-width: 600px; color: #fff; }
/* Words rise in from the bottom one after another, and sink back down when the slide leaves (as on redcrossug.org) */
.sli-hero-in { opacity: 0; transform: translateY(70px); transition: opacity .5s ease, transform .6s cubic-bezier(.55, 0, .75, .2); }
.sli-hero-slide.is-active .sli-hero-in { opacity: 1; transform: none; transition: opacity .9s ease, transform 1s var(--sli-ease); transition-delay: var(--d, 0s); }
.sli-hero-eyebrow { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #dfe5f7; }
.sli-hero-text h1, .sli-hero-text h2 { margin: .7rem 0 .8rem; color: #fff; font-size: clamp(1.55rem, 2.8vw, 2.35rem); line-height: 1.18; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; hyphens: manual; }
.sli-hero-text p { margin: 0 0 1.4rem; color: #e8ecf8; font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.7; max-width: 50ch; hyphens: manual; }
.sli-hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.sli-hero-btn { display: inline-flex; align-items: center; gap: .6rem; padding: .78rem 1.6rem; border-radius: 999px; font-weight: 600; font-size: .95rem; line-height: 1;
    text-decoration: none; transition: transform .25s var(--sli-ease), background-color .25s, color .25s; }
.sli-hero-btn-solid { background: #fff; color: var(--sli-primary); box-shadow: 0 6px 18px rgba(0, 0, 0, .22); }
.sli-hero-btn-solid:hover, .sli-hero-btn-solid:focus-visible { background: var(--sli-primary); color: #fff; transform: translateY(-2px); }
.sli-hero-btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .7); }
.sli-hero-btn-ghost:hover, .sli-hero-btn-ghost:focus-visible { background: #fff; color: var(--sli-primary); }
.sli-hero-arrow { width: 16px; height: 16px; transition: transform .25s var(--sli-ease); }
.sli-hero-btn:hover .sli-hero-arrow { transform: translateX(4px); }
.sli-hero-controls { position: absolute; z-index: 4; left: 0; right: 0; bottom: 34px; }
.sli-hero-controls .container { display: flex; align-items: center; gap: 22px; }
.sli-hero-bars { display: flex; gap: 8px; }
.sli-hero-bar { position: relative; width: 46px; height: 4px; border: 0; padding: 0; border-radius: 2px; background: rgba(255, 255, 255, .35); cursor: pointer; overflow: hidden; }
.sli-hero-bar i { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.sli-hero-bar.done i { transform: scaleX(1); }
.sli-hero-bar.is-active i { animation: sli-fill 4s linear forwards; }   /* matches the 4-second slide change in sli-effects.js */
.sli-hero.paused .sli-hero-bar.is-active i { animation-play-state: paused; }
@keyframes sli-fill { to { transform: scaleX(1); } }
.sli-hero-arrows { margin-left: auto; display: flex; gap: 10px; }
.sli-hero-arrows button { width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); background: rgba(29, 43, 92, .25); color: #fff;
    cursor: pointer; display: grid; place-items: center; transition: background-color .25s, border-color .25s, color .25s; }
.sli-hero-arrows button:hover, .sli-hero-arrows button:focus-visible { background: #fff; color: var(--sli-primary); border-color: #fff; }
.sli-hero-arrows svg { width: 18px; height: 18px; }
@media (max-width: 575.98px) {
    .sli-hero { height: 560px; }
    .sli-hero-slide::after { background: linear-gradient(0deg, rgba(29, 43, 92, .92) 0%, rgba(29, 43, 92, .7) 45%, rgba(29, 43, 92, .2) 100%); }
    .sli-hero-caption { align-items: flex-end; padding-bottom: 92px; }
    .sli-hero-arrows { display: none; }
    .sli-hero-bar { width: 34px; }
    .sli-hero-btn { padding: .7rem 1.3rem; font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sli-hero-slide, .sli-hero-slide.is-active, .sli-hero-in, .sli-hero-slide.is-active .sli-hero-in { transition: none !important; }
    .sli-hero-slide.is-active img { animation: none !important; }
    .sli-hero-bar.is-active i { animation: none; transform: scaleX(1); }
    #header, #top, #header .sli-logo { transition: none; }
}

/* ---- v26: action cards under the slider (Donate / Volunteer / Partner), Join Us menu ---- */
.sli-actions { background: #fff; border-bottom: 1px solid #e2e6f0; box-shadow: 0 6px 16px rgba(29, 43, 92, .06); position: relative; z-index: 1; }
.sli-actions-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sli-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .65rem; padding: 1.35rem 1rem;
    text-align: center; color: #444; font-weight: 500; font-size: 1rem; line-height: 1.35; text-decoration: none;
    transition: background-color .25s ease, color .25s ease; }
.sli-action + .sli-action { border-left: 1px solid var(--sli-primary); }
.sli-action i { font-size: 2.1rem; color: var(--sli-primary); transition: color .25s ease, transform .25s ease; }
.sli-action:hover, .sli-action:focus-visible { background: var(--sli-primary); color: #fff; text-decoration: none; }
.sli-action:hover i, .sli-action:focus-visible i { color: #fff; transform: translateY(-2px); }
.sli-action:focus-visible { outline: 3px solid maroon; outline-offset: -3px; }
@media (max-width: 575.98px) {
    .sli-action { padding: 1rem .45rem; font-size: .78rem; gap: .45rem; }
    .sli-action i { font-size: 1.55rem; }
}
/* dropdowns open with a short fade and slide */
@media (min-width: 992px) {
    #header .dropdown-menu.show { animation: sli-dd .25s var(--sli-ease); }
}
@keyframes sli-dd { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .sli-action, .sli-action i { transition: none; }
    #header .dropdown-menu.show { animation: none; }
}

/* ---- v27: no progress lines on the hero slider (it still changes every 4 seconds) ---- */
.sli-hero .sli-hero-bars { display: none; }

/* ---- v28: clear hero photos (no blue tint), still images, blue corner banner that drops in ---- */
.sli-hero { background: #222; -webkit-tap-highlight-color: transparent; }
.sli-hero-slide.is-active img { animation: none; }
.sli-hero-slide::after { background: linear-gradient(90deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .18) 45%, rgba(0, 0, 0, .08) 75%); }
.sli-hero-eyebrow { color: #fff; }
.sli-hero-text p { color: #fff; }
.sli-hero-eyebrow, .sli-hero-text h1, .sli-hero-text h2, .sli-hero-text p { text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.sli-hero-arrows button { background: rgba(0, 0, 0, .25); }
.sli-hero-slide::before { content: ""; position: absolute; top: 0; right: 0; z-index: 1; width: 240px; height: 100px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100'%3E%3Cg stroke='%233b55a8' stroke-linecap='round'%3E%3Cline x1='160' y1='-50' x2='62' y2='48' stroke-width='70'/%3E%3Cline x1='242' y1='-40' x2='182' y2='20' stroke-width='26'/%3E%3C/g%3E%3C/svg%3E") no-repeat right top / contain;
    transform: translateY(-100%); transition: transform 1s ease; }
.sli-hero-slide.is-active::before { transform: none; transition: transform 2s var(--sli-ease) .8s; }
@media (max-width: 575.98px) {
    .sli-hero-slide::after { background: linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .12) 100%); }
    .sli-hero-slide::before { width: 150px; height: 62px; }
    .sli-hero-caption { padding-bottom: 56px; }   /* the progress lines are gone, so the text can sit lower */
}
@media (prefers-reduced-motion: reduce) {
    .sli-hero-slide::before, .sli-hero-slide.is-active::before { transition: none; }
}

/* ---- v29: a slide can put its words on the right (add sli-text-right to the slide), so faces on the left stay clear ---- */
@media (min-width: 576px) {
    .sli-hero-slide.sli-text-right .sli-hero-text { margin-left: auto; }
    .sli-hero-slide.sli-text-right::after { background: linear-gradient(270deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .18) 45%, rgba(0, 0, 0, .08) 75%); }
}

/* ---- v30: a slide can centre its words (add sli-text-center to the slide) ---- */
.sli-hero-slide.sli-text-center .sli-hero-text { margin: 0 auto; text-align: center; }
.sli-hero-slide.sli-text-center .sli-hero-text p { margin-left: auto; margin-right: auto; }
.sli-hero-slide.sli-text-center .sli-hero-cta { justify-content: center; }
@media (min-width: 576px) {
    .sli-hero-slide.sli-text-center::after { background: rgba(0, 0, 0, .32); }
}

/* ---- v31: when a phone bounces past the end of the page it shows the page background.
   Paint that background the same dark blue as the bottom footer bar, so no white strip appears below the footer.
   The page itself stays white. ---- */
html { background-color: #121a32; }
body { background-color: #fff; }

/* ---- v31: Contact us page - same type scale and colours as the home page ---- */
.sli-cu-title { font-size: clamp(2.125rem, 4vw, 3.375rem); font-weight: 800; letter-spacing: -.015em; margin: 0; }
.sli-cu-info { background: #f6f8fc; padding: 4.8rem 0; }
.sli-cu-reach { background: #fff; padding: 4.8rem 0 0; overflow: hidden; }
.sli-cu-pill { display: inline-flex; align-items: center; background: #fff; border-radius: 999px; padding: .45rem 1.1rem;
    box-shadow: 0 6px 18px rgba(23, 39, 71, .1); font-size: .75rem; font-weight: 700; letter-spacing: .12em; line-height: 1.5;
    text-transform: uppercase; color: #3b55a8; margin-bottom: .9rem; }
.sli-cu-heading { font-size: clamp(1.75rem, 3.2vw, 2.625rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.22; color: #172747;
    margin: 0 0 1rem; text-wrap: balance; }
.sli-cu-heading span { color: #3b55a8; }
.sli-cu-sub { color: #58647c; font-size: .9375rem; line-height: 1.8; max-width: 45rem; margin: 0 auto 2.5rem; }
.sli-cu-card { background: #fff; border: 1px solid #e5e9f2; border-radius: 18px; padding: 2rem 1.5rem; height: 100%; text-align: center;
    box-shadow: 0 18px 40px rgba(23, 39, 71, .08); transition: transform .3s var(--sli-ease), box-shadow .3s var(--sli-ease); }
.sli-cu-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(23, 39, 71, .14); }
.sli-cu-card > i { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; margin-bottom: 1rem;
    background: #f2f5ff; color: #3b55a8; font-size: 1.35rem; }
.sli-cu-card h4 { font-size: 1.25rem; font-weight: 700; line-height: 1.4; color: #172747; margin: 0 0 .5rem; }
.sli-cu-card p { margin: 0; font-size: .875rem; line-height: 1.8; color: #58647c; }
.sli-cu-card a { color: #58647c; text-decoration: none; word-break: break-word; }
.sli-cu-card a:hover { color: #3b55a8; }
/* photo sits on the bottom edge of the section; the chat card sits just left of her open hand */
.sli-cu-visual { display: flex; justify-content: flex-end; }
.sli-cu-figure { position: relative; width: min(460px, calc(100% - 236px)); }
.sli-cu-photo { display: block; width: 100%; height: auto; }
.sli-cu-chat { position: absolute; right: calc(100% + 14px); top: 41%; transform: translateY(-50%); z-index: 1; width: 222px;
    padding: 1.75rem 1.35rem; background: #3b55a8; color: #fff; text-align: center; border-radius: 18px;
    box-shadow: 0 18px 40px rgba(59, 85, 168, .32); }
.sli-cu-chat-icon { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #fff; color: #3b55a8;
    font-size: 1.4rem; margin-bottom: .9rem; }
.sli-cu-chat h5 { color: #fff; font-size: 1.125rem; font-weight: 700; margin-bottom: .5rem; }
.sli-cu-chat p { font-size: .8125rem; line-height: 1.7; color: rgba(255, 255, 255, .82); margin-bottom: 1.1rem; }
.sli-cu-chat-btn { display: inline-block; background: #fff; color: #172747; border-radius: 999px; padding: .6rem 1.45rem; font-size: .75rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; transition: transform .25s var(--sli-ease), color .25s; }
.sli-cu-chat-btn:hover, .sli-cu-chat-btn:focus-visible { transform: translateY(-2px); color: #3b55a8; }
.sli-cu-formcol { padding-bottom: 4.8rem; }
.sli-cu-form .form-control { background: #f6f8fc; border: 1px solid #e5e9f2; border-radius: 999px; padding: .85rem 1.3rem; font-size: .9375rem; color: #172747; }
.sli-cu-form textarea.form-control { border-radius: 18px; min-height: 150px; resize: vertical; }
.sli-cu-form .form-control::placeholder { color: #7b8496; }
.sli-cu-form .form-control:focus { background: #fff; border-color: #3b55a8; box-shadow: 0 0 0 3px rgba(59, 85, 168, .15); }
.sli-cu-send { display: inline-flex; align-items: center; gap: .6rem; border: 0; border-radius: 999px; background: #3b55a8; color: #fff;
    padding: .95rem 2.1rem; font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    box-shadow: 0 12px 24px rgba(59, 85, 168, .3); transition: transform .25s var(--sli-ease), background-color .25s; }
.sli-cu-send:hover, .sli-cu-send:focus-visible { background: #293f86; transform: translateY(-2px); }
@media (max-width: 991.98px) {
    .sli-cu-formcol { padding-bottom: 1rem; }
    .sli-cu-visual { justify-content: center; }
    .sli-cu-figure { width: min(420px, calc(100% - 240px)); margin-left: 240px; margin-right: 0; }
}
@media (max-width: 575.98px) {
    .sli-cu-info { padding: 3.5rem 0; }
    .sli-cu-reach { padding-top: 3.5rem; }
    .sli-cu-heading { font-size: clamp(1.6875rem, 7vw, 2.125rem); letter-spacing: -.01em; }
    .sli-cu-figure { width: 100%; margin: 0; display: flex; flex-direction: column-reverse; align-items: flex-end; }
    .sli-cu-photo { width: 84%; }
    .sli-cu-chat { position: static; transform: none; width: 100%; margin: 0 0 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sli-cu-card, .sli-cu-chat-btn, .sli-cu-send { transition: none; }
}

/* ---- Contact us: the map fills the whole "Where we work" section, edge to edge ---- */
.sli-cu-map { position: relative; border-top: 1px solid #e5e9f2; }
.sli-cu-map #sli-map { width: 100%; height: 560px; background: #e9eef7; z-index: 0; }
.sli-cu-map-card { position: absolute; z-index: 500; top: 50%; left: max(1.5rem, calc((100% - 1140px) / 2 + .75rem)); transform: translateY(-50%);
    width: 330px; padding: 1.75rem 1.6rem; background: #fff; border-radius: 18px; box-shadow: 0 18px 40px rgba(23, 39, 71, .16); }
.sli-cu-map-card h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.015em; color: #172747; margin: 0 0 .6rem; }
.sli-cu-map-card p { font-size: .875rem; line-height: 1.8; color: #58647c; margin: 0 0 1rem; }
.sli-cu-map-key { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .8125rem; color: #58647c; }
.sli-cu-map-key span { display: inline-flex; align-items: center; gap: .45rem; }
.sli-cu-map-key i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
@media (max-width: 767.98px) {
    .sli-cu-map #sli-map { height: 520px; }
    .sli-cu-map-card { top: 12px; left: 12px; right: 12px; transform: none; width: auto; padding: .9rem 1.1rem; border-radius: 14px; }
    .sli-cu-map-card h3 { font-size: 1.125rem; margin-bottom: .4rem; }
    .sli-cu-map-card p { display: none; }
}

/* ---- v36: Join Us page (same cards, labels and headings as Contact us) ---- */
.sli-ju-hero { padding: .5rem 0 4rem; }
.sli-ju-title { font-size: clamp(2.125rem, 4vw, 3.375rem); line-height: 1.12; margin-top: .25rem; }
.sli-ju-lead { font-size: 1rem; line-height: 1.8; color: #58647c; max-width: 30rem; margin: 0 0 2rem; }
.sli-ju-actions { display: flex; flex-wrap: wrap; gap: .85rem; }
.sli-ju a.sli-cu-send { color: #fff; text-decoration: none; }
.sli-ju a.sli-cu-send:hover, .sli-ju a.sli-cu-send:focus-visible { color: #fff; }
.sli-ju-ghost { display: inline-flex; align-items: center; border: 2px solid #dbe3fa; border-radius: 999px; padding: .85rem 1.9rem; color: #172747;
    font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: border-color .25s, color .25s; }
.sli-ju-ghost:hover, .sli-ju-ghost:focus-visible { border-color: #3b55a8; color: #3b55a8; }
.sli-ju-art { max-width: 440px; margin: 0 auto; aspect-ratio: 1 / 1; border-radius: 50%; background: #f6f8fc; display: flex; align-items: center; justify-content: center; }
.sli-ju-art img { display: block; width: 92%; height: auto; mix-blend-mode: multiply; }
.sli-ju-ways { background: #f6f8fc; border-radius: 24px; padding: 4rem 2rem; }
.sli-ju-ways .sli-cu-pill { background: #fff; }
.sli-cu-card a.sli-ju-link, .sli-ju-link { display: inline-block; margin-top: 1rem; font-size: .875rem; font-weight: 700; color: #3b55a8; text-decoration: none; }
.sli-cu-card a.sli-ju-link:hover, .sli-ju-link:hover { color: #293f86; text-decoration: underline; }
.sli-ju-cta { margin-top: 3rem; background: #3b55a8; border-radius: 24px; padding: 2.75rem; display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 1.5rem; box-shadow: 0 18px 40px rgba(59, 85, 168, .28); }
.sli-ju-cta h3 { color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -.01em; margin: 0 0 .4rem; }
.sli-ju-cta p { color: #e8ecf8; font-size: .9375rem; line-height: 1.8; margin: 0; }
.sli-ju-cta a { display: inline-flex; background: #fff; color: #172747; border-radius: 999px; padding: .95rem 2rem; font-size: .8125rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: transform .25s var(--sli-ease); }
.sli-ju-cta a:hover, .sli-ju-cta a:focus-visible { transform: translateY(-2px); color: #3b55a8; }
@media (max-width: 991.98px) {
    .sli-ju-hero { padding-bottom: 3rem; }
    .sli-ju-art { max-width: 340px; }
}
@media (max-width: 575.98px) {
    .sli-ju-ways { padding: 3rem 1.25rem; border-radius: 18px; }
    .sli-ju-cta { padding: 2rem 1.5rem; border-radius: 18px; }
    .sli-ju-art { max-width: 280px; }
}

/* ---- v37: Careers and Volunteer pages - simple heading, "nothing posted yet" card, openings list ---- */
.sli-op-head { text-align: center; padding: .5rem 0 2.5rem; }
.sli-op-head .sli-cu-sub { margin-bottom: 0; }
.sli-op-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; color: #172747; margin: 0 0 1.75rem; }
.sli-op-empty { max-width: 520px; margin: 0 auto; text-align: center; background: #fff; border: 1px solid #e5e9f2; border-radius: 18px;
    padding: 2.5rem 2rem; box-shadow: 0 18px 40px rgba(23, 39, 71, .08); }
.sli-op-empty > i { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #f2f5ff; color: #3b55a8;
    font-size: 1.5rem; margin-bottom: 1.1rem; }
.sli-op-empty h4 { font-size: 1.25rem; font-weight: 700; color: #172747; margin: 0 0 .5rem; }
.sli-op-empty p { font-size: .9375rem; line-height: 1.8; color: #58647c; margin: 0 0 1.25rem; }
.sli-op-tag { display: inline-block; background: #f2f5ff; color: #3b55a8; border-radius: 999px; padding: .4rem 1rem; font-size: .75rem;
    font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sli-op-note { text-align: center; font-size: .875rem; color: #58647c; margin: 2rem 0 0; }
.sli-op-note i { color: #3b55a8; margin-right: .35rem; }
.sli-op-steps-wrap { padding: 3.5rem 0 0; }
.sli-op-step { display: flex; align-items: center; gap: 1rem; height: 100%; background: #fff; border: 1px solid #e5e9f2; border-radius: 18px; padding: 1.25rem 1.4rem;
    box-shadow: 0 10px 28px rgba(23, 39, 71, .06); }
.sli-op-step span { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #3b55a8; color: #fff; font-weight: 700; }
.sli-op-step p { margin: 0; font-size: .9375rem; line-height: 1.6; color: #172747; font-weight: 600; }
.sli-op-step a { color: #3b55a8; text-decoration: none; word-break: break-word; }
/* when there are openings: one row per opening */
.sli-op-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.sli-op-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; background: #fff; border: 1px solid #e5e9f2;
    border-radius: 18px; padding: 1.4rem 1.6rem; box-shadow: 0 10px 28px rgba(23, 39, 71, .06); }
.sli-op-item h4 { font-size: 1.125rem; font-weight: 700; color: #172747; margin: 0 0 .25rem; }
.sli-op-item p { font-size: .875rem; color: #58647c; margin: 0; }
.sli-op-apply { display: inline-flex; background: #3b55a8; color: #fff; border-radius: 999px; padding: .75rem 1.5rem; font-size: .75rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.sli-op-apply:hover, .sli-op-apply:focus-visible { background: #293f86; color: #fff; }
@media (max-width: 575.98px) {
    .sli-op-empty { padding: 2rem 1.25rem; }
    .sli-op-item { padding: 1.25rem; }
}