/* ==========================================================================
   SPPL brand layer
   --------------------------------------------------------------------------
   Loaded AFTER main.css / shop.css so it layers on top of the vendored theme.

   The palette is sampled directly from the company logo
   (public/images/SPPL-logo-1608397573-super_power_pharma_logo.jpg):
     - the oval runs #289628 -> #50aa1e -> #8cc814 (green to lime)
     - the "Super Power Pharmaceuticals Ltd." wordmark is #00298f (navy)

   Everything below is driven by the custom properties in :root, so the whole
   site can be re-skinned by editing that one block.
   ========================================================================== */

:root {
    /* Brand greens — sampled from the logo oval */
    --sppl-green-900: #1b6b1b;
    --sppl-green-700: #25801f;
    --sppl-green-600: #2f9e2f;   /* primary — buttons, links, accents */
    --sppl-green-500: #3ca028;
    --sppl-green-400: #50aa1e;
    --sppl-lime-500: #8cc814;    /* logo oval, light end */
    --sppl-lime-400: #a5d81a;

    /* Brand navy — the wordmark */
    --sppl-navy-900: #001c5e;
    --sppl-navy-800: #00298f;    /* primary dark — headings, topline bar */
    --sppl-navy-600: #1a4bb5;

    /* Neutrals */
    --sppl-ink: #1f232b;
    --sppl-body: #4a5366;
    --sppl-muted: #7b8494;
    --sppl-line: #e7eaeb;
    --sppl-line-soft: #f0f2f3;
    --sppl-surface: #ffffff;
    --sppl-surface-soft: #f6f8f7;

    /* Semantic */
    --sppl-success: #2f9e2f;
    --sppl-warning: #f4b803;
    --sppl-danger: #e5484d;

    /* Shape */
    --sppl-radius-sm: 6px;
    --sppl-radius: 12px;
    --sppl-radius-lg: 18px;
    --sppl-radius-pill: 999px;

    /* Elevation — soft, low-contrast, one light source */
    --sppl-shadow-xs: 0 1px 2px rgba(31, 35, 43, .06);
    --sppl-shadow-sm: 0 2px 8px rgba(31, 35, 43, .07);
    --sppl-shadow: 0 8px 24px rgba(31, 35, 43, .09);
    --sppl-shadow-lg: 0 18px 44px rgba(31, 35, 43, .13);
    --sppl-shadow-brand: 0 10px 26px rgba(47, 158, 47, .28);

    /* Motion */
    --sppl-ease: cubic-bezier(.22, .61, .36, 1);
    --sppl-ease-out: cubic-bezier(.16, 1, .3, 1);
    --sppl-t-fast: .18s;
    --sppl-t: .32s;
    --sppl-t-slow: .6s;

    /* Layout. Must match the inline height on <header class="page_header">. */
    --sppl-header-h: 68px;
    --sppl-grad-brand: linear-gradient(135deg, var(--sppl-green-700) 0%, var(--sppl-green-500) 45%, var(--sppl-lime-500) 100%);
    --sppl-grad-navy: linear-gradient(135deg, var(--sppl-navy-900) 0%, var(--sppl-navy-800) 55%, var(--sppl-navy-600) 100%);
}

/* ==========================================================================
   1. Base + typography
   ========================================================================== */

body {
    color: var(--sppl-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--sppl-ink);
    letter-spacing: -.01em;
}

a { transition: color var(--sppl-t-fast) var(--sppl-ease); }

a:hover, a:focus { color: var(--sppl-green-600); }

::selection { background: var(--sppl-green-600); color: #fff; }

/* Accessible focus ring, brand coloured. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--sppl-green-600);
    outline-offset: 2px;
}

/* The theme's own section header gets a brand underline.
   Both default margins are reset: Bootstrap puts 20px above every h1/h2, and
   the theme adds `margin-bottom: 35px` to .section_header. Together that is
   55px of dead space around each heading before the underline is even counted,
   which is what made every section title feel like it floated. */
.section_header {
    margin-top: 0;
    margin-bottom: 13px;
    color: var(--sppl-ink);
    font-weight: 700;
}

.section_header::after {
    content: "";
    display: block;
    width: 52px;
    height: 3px;
    margin-top: 9px;
    border-radius: var(--sppl-radius-pill);
    background: var(--sppl-grad-brand);
}

.text-center .section_header::after { margin-inline: auto; }

/* ==========================================================================
   2. Buttons
   ========================================================================== */

.theme_button {
    border-radius: var(--sppl-radius-pill) !important;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 12px 28px;
    transition: transform var(--sppl-t-fast) var(--sppl-ease),
                box-shadow var(--sppl-t) var(--sppl-ease),
                background-color var(--sppl-t-fast) var(--sppl-ease),
                color var(--sppl-t-fast) var(--sppl-ease);
}

.theme_button.color1,
.theme_button.color2 {
    background-color: var(--sppl-green-600);
    border-color: var(--sppl-green-600);
    color: #fff;
    box-shadow: var(--sppl-shadow-xs);
}

.theme_button.color1:hover,
.theme_button.color2:hover,
.theme_button.color1:focus,
.theme_button.color2:focus {
    background-color: var(--sppl-green-700);
    border-color: var(--sppl-green-700);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--sppl-shadow-brand);
}

.theme_button.inverse {
    background-color: transparent;
    color: var(--sppl-green-600);
    border-color: currentColor;
}

.theme_button.inverse:hover {
    background-color: var(--sppl-green-600);
    border-color: var(--sppl-green-600);
    color: #fff;
}

/* The theme paints `.inverse` variants with hardcoded white text; on light
   sections that renders white-on-white. Re-assert the readable colour. */
.ls .theme_button.inverse,
.ls .theme_button.color2.inverse {
    color: var(--sppl-green-600);
}

.ls .theme_button.inverse:hover,
.ls .theme_button.color2.inverse:hover {
    color: #fff;
}

/* ==========================================================================
   3. Topline + header
   ========================================================================== */

/* The topline bar was an inline green; make it the wordmark navy instead so
   the green is reserved for interaction. */
.page_topline {
    background-color: var(--sppl-navy-800) !important;
}

.page_topline,
.page_topline a { color: rgba(255, 255, 255, .88); }

.page_topline .social-icon {
    transition: transform var(--sppl-t-fast) var(--sppl-ease), opacity var(--sppl-t-fast);
}

.page_topline .social-icon:hover { transform: translateY(-2px); }

.page_header {
    /* The frosted ground sits on a pseudo-element, not on the header itself.
       `backdrop-filter` makes an element the containing block for every
       `position: fixed` descendant, and the theme's mobile menu is exactly
       that — a fixed, full-height drawer. Applied to the header it trapped the
       drawer inside the 68px header bar, so opening the menu on a phone showed
       a thin strip containing only "Home". A pseudo-element has no descendants,
       so it frosts the same area without capturing anything. The header needs
       its own stacking context (z-index) for the pseudo's z-index: -1 to stay
       behind the content instead of dropping behind the page.

       The z-index has to clear the hero slider: its active slide carries
       z-index: 2, so anything at or below that leaves the open dropdown
       tucked behind the slide and its lower entries unclickable. */
    position: relative;
    z-index: 20;
    background: transparent;
    transition: height var(--sppl-t) var(--sppl-ease);
}

.page_header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    box-shadow: var(--sppl-shadow-xs);
    transition: box-shadow var(--sppl-t) var(--sppl-ease);
}

/* Sticky header, toggled by js/sppl.js on scroll. */
.page_header.is_stuck {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1040;
}

.page_header.is_stuck::before { box-shadow: var(--sppl-shadow); }

/* The theme sizes `.display_table` from its content, so the header's explicit
   height left the brand and menu pinned to the top with a dead band beneath
   them. Stretching the chain to the header's height lets the theme's own
   `vertical-align: middle` centre the row. */
.page_header > .container-fluid,
.page_header > .container-fluid > .row,
.page_header .display_table {
    height: 100%;
}

.page_header.is_stuck + * { padding-top: var(--sppl-header-h); }

/* Compact header logo: oval mark above the Super Power wordmark. */
.sppl_brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;   /* it is inline-level, so it otherwise sits on the baseline */
    gap: 1px;
    text-decoration: none;
    white-space: nowrap;
}

.sppl_brand img {
    /* Keep the source mark's 113:92 ratio and give it a fixed width so the
       theme's global max-width rule cannot collapse it inside the link. */
    height: 30px;
    width: 37px;
    max-width: none;
    flex: 0 0 auto;
    display: block;
}

.sppl_brand_text {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--sppl-green-600);
}

.sppl_brand:hover .sppl_brand_text { color: var(--sppl-green-700); }

@media (max-width: 1199px) {
    .sppl_brand img { height: 27px; width: 33px; }
}

/* ==========================================================================
   4. Cards — categories and products share one visual language
   ========================================================================== */

/* Bootstrap 3 columns float, so a card's `height: 100%` had nothing to resolve
   against and every card ended wherever its copy did — one line of description
   meant one short card and an uneven row. Making the row a flex container
   turns the columns into stretched flex items, which is what gives the cards a
   common height and lets `.sppl_card_footer { margin-top: auto }` line the
   "Browse products" links up across the row. */
.sppl_card_row {
    display: flex;
    flex-wrap: wrap;
}

.sppl_card_row > [class*="col-"] { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   A-Z initials filter
   Sits under the subcategory chips and filters the same grid. Every product is
   already on the page, so a letter is instant. Letters with nothing behind
   them stay in the row, disabled, so the alphabet does not reflow as the
   catalogue changes.
   -------------------------------------------------------------------------- */
.sppl_az {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 14px;
}

.sppl_az_label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--sppl-muted);
}

.sppl_az_row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sppl_az_letter {
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    border: 1px solid var(--sppl-line);
    border-radius: var(--sppl-radius-sm);
    background: var(--sppl-surface);
    color: var(--sppl-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--sppl-t-fast) var(--sppl-ease),
                color var(--sppl-t-fast) var(--sppl-ease),
                border-color var(--sppl-t-fast) var(--sppl-ease);
}

.sppl_az_letter--all { padding: 0 12px; }

.sppl_az_letter:hover:not(:disabled) {
    border-color: var(--sppl-green-600);
    color: var(--sppl-green-700);
}

.sppl_az_letter.is_active {
    background: var(--sppl-green-600);
    border-color: var(--sppl-green-600);
    color: #fff;
}

.sppl_az_letter:disabled {
    opacity: .3;
    cursor: not-allowed;
}

.sppl_card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--sppl-surface);
    border: 1px solid var(--sppl-line);
    border-radius: var(--sppl-radius);
    overflow: hidden;
    transition: transform var(--sppl-t) var(--sppl-ease-out),
                box-shadow var(--sppl-t) var(--sppl-ease-out),
                border-color var(--sppl-t) var(--sppl-ease);
    will-change: transform;
}

.sppl_card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sppl-shadow-lg);
    border-color: transparent;
}

.sppl_card_media {
    position: relative;
    /* 2:1, which is what every product thumbnail actually is (`posts/thumbs/`
       is uniformly 300x150). The box was 4:3, so `cover` was cutting a third
       off the width of every card image — enough to slice the wording off the
       placeholder artwork. */
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background: var(--sppl-surface-soft);
}

.sppl_card_media img {
    width: 100%;
    height: 100%;
    /* `contain`, so nothing is cropped whatever ratio an upload arrives with;
       at 2:1 the product thumbnails fill the box exactly. */
    object-fit: contain;
    display: block;
    transition: transform var(--sppl-t-slow) var(--sppl-ease-out);
}

.sppl_card:hover .sppl_card_media img { transform: scale(1.06); }

/* Scrim so the badge stays legible over any photo. */
.sppl_card_media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to top, rgba(0, 28, 94, .55), transparent);
    opacity: 0;
    transition: opacity var(--sppl-t) var(--sppl-ease);
    pointer-events: none;
}

.sppl_card:hover .sppl_card_media::after { opacity: 1; }

.sppl_card_body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 22px 22px 24px;
}

.sppl_card_title {
    margin: 0 0 10px;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;
}

.sppl_card_title a { color: var(--sppl-ink); }

.sppl_card:hover .sppl_card_title a { color: var(--sppl-green-600); }

.sppl_card_text {
    color: var(--sppl-muted);
    font-size: 14.5px;
    line-height: 1.65;
    margin: 0 0 18px;
}

.sppl_card_footer { margin-top: auto; }

/* Branded stand-in when a category has no usable image — the alternative is a
   browser broken-image icon, since `categories.category_image` is 'default.jpg'
   for every row and public/images/category/ is empty. */
.sppl_card_placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--sppl-grad-brand);
    color: rgba(255, 255, 255, .92);
    font-size: 46px;
}

.sppl_badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--sppl-radius-pill);
    background: rgba(255, 255, 255, .94);
    color: var(--sppl-green-700);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    box-shadow: var(--sppl-shadow-xs);
}

/* Text link with an animated arrow. */
.sppl_link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--sppl-green-600);
}

.sppl_link i,
.sppl_link svg { transition: transform var(--sppl-t) var(--sppl-ease-out); }

.sppl_link:hover i,
.sppl_link:hover svg { transform: translateX(5px); }

/* Card meta line — which subcategory a product sits in. */
.sppl_card_meta {
    margin: -4px 0 16px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--sppl-lime-500);
}

/* ==========================================================================
   4b. Subcategory filter chips
   --------------------------------------------------------------------------
   Client-side filter: the category page loads its products in one request and
   these chips show/hide them, so switching subcategory costs no round trip.
   ========================================================================== */

.sppl_filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 10px;
}

.sppl_chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid var(--sppl-line);
    border-radius: var(--sppl-radius-pill);
    background: var(--sppl-surface);
    color: var(--sppl-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color var(--sppl-t-fast) var(--sppl-ease),
                color var(--sppl-t-fast) var(--sppl-ease),
                border-color var(--sppl-t-fast) var(--sppl-ease),
                box-shadow var(--sppl-t) var(--sppl-ease);
}

.sppl_chip:hover {
    border-color: var(--sppl-green-600);
    color: var(--sppl-green-700);
}

.sppl_chip.is_active {
    background: var(--sppl-green-600);
    border-color: var(--sppl-green-600);
    color: #fff;
    box-shadow: var(--sppl-shadow-brand);
}

.sppl_chip_count {
    padding: 1px 8px;
    border-radius: var(--sppl-radius-pill);
    background: var(--sppl-surface-soft);
    color: var(--sppl-muted);
    font-size: 11.5px;
    font-weight: 700;
}

.sppl_chip.is_active .sppl_chip_count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* Hidden by the filter; kept out of the layout entirely. */
.sppl_product_item[hidden] { display: none !important; }

/* ==========================================================================
   5. Sections
   ========================================================================== */

.sppl_section { padding: 46px 0; }

/* The theme's margin utilities are sized for a far airier layout. Inside these
   sections they opened a lot of dead space under every heading, so they are
   rescaled here rather than at each of the ~37 places the markup uses them.
   Scoped to .sppl_section on purpose — the footer and header keep the theme's
   original values. */
.sppl_section .bottommargin_40 { margin-bottom: 20px; }
.sppl_section .bottommargin_30 { margin-bottom: 16px; }
.sppl_section .bottommargin_20 { margin-bottom: 12px; }
.sppl_section .topmargin_40 { margin-top: 20px; }
.sppl_section .topmargin_30 { margin-top: 16px; }
.sppl_section .topmargin_20 { margin-top: 10px; }
.sppl_section .topmargin_10 { margin-top: 6px; }

.sppl_section--soft { background: var(--sppl-surface-soft); }

.sppl_section--navy {
    background: var(--sppl-grad-navy);
    color: rgba(255, 255, 255, .82);
}

.sppl_section--navy h1,
.sppl_section--navy h2,
.sppl_section--navy h3,
.sppl_section--navy h4 { color: #fff; }

.sppl_section--navy .section_header::after { background: var(--sppl-lime-500); }

.sppl_eyebrow {
    /* Block, not inline-block: as an inline-block it sat on a line box whose
       leading and descender space added ~28px below the text before the
       heading's own margin even began. Centring still comes from the
       `text-align: center` on its column. */
    display: block;
    margin-bottom: 2px;
    line-height: 1;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sppl-green-600);
}

.sppl_section--navy .sppl_eyebrow { color: var(--sppl-lime-400); }

.sppl_lead {
    max-width: 660px;
    margin-inline: auto;
    font-size: 16px;
    line-height: 1.75;
    color: var(--sppl-muted);
}

/* The theme pulls a paragraph up under a centred section header by 20px. It
   was written against its own `.section_header`, which carried a 35px bottom
   margin; this design reset that to 13px, so the pull dragged the paragraph
   over the header's underline — a 7px overlap on every page that pairs the
   two. The views ask for `topmargin_20` here and the theme's rule outranks
   that utility class, so the value is restated with the selector it used.
   Sibling margins collapse, so the visible gap is a clean 20px. */
.text-center .section_header + p {
    margin-top: 20px;
}

/* ==========================================================================
   6. Stats
   ========================================================================== */

.sppl_stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 26px;
    text-align: center;
}

.sppl_stat_value {
    margin: 0;
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    letter-spacing: -.02em;
}

.sppl_stat_label {
    margin: 10px 0 0;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .78);
}

.sppl_stat + .sppl_stat { border-left: 1px solid rgba(255, 255, 255, .14); }

/* ==========================================================================
   7. Scroll reveal
   --------------------------------------------------------------------------
   Elements start hidden and are revealed by js/sppl.js adding `.is_visible`
   via IntersectionObserver. `.no-js` and reduced-motion users get them shown
   immediately — the CSS never hides content that cannot be revealed.
   ========================================================================== */

.js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s var(--sppl-ease-out), transform .7s var(--sppl-ease-out);
}

.js .reveal.is_visible {
    opacity: 1;
    transform: none;
}

/* Stagger children of a revealed group. */
.js .reveal[data-delay="1"] { transition-delay: .08s; }
.js .reveal[data-delay="2"] { transition-delay: .16s; }
.js .reveal[data-delay="3"] { transition-delay: .24s; }
.js .reveal[data-delay="4"] { transition-delay: .32s; }
.js .reveal[data-delay="5"] { transition-delay: .40s; }
.js .reveal[data-delay="6"] { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
    .js .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   8. Footer
   ========================================================================== */

.page_footer {
    background-color: var(--sppl-surface) !important;
    border-top: 1px solid var(--sppl-line);
}

.page_footer .widget-title { color: var(--sppl-ink); }

.page_copyright {
    background-color: var(--sppl-navy-900) !important;
    color: rgba(255, 255, 255, .7);
}

.page_copyright p { color: rgba(255, 255, 255, .7); margin: 0; }

/* ==========================================================================
   9. Breadcrumbs + page hero
   ========================================================================== */

.page_breadcrumbs {
    background: var(--sppl-grad-navy) !important;
    padding: 26px 0 !important;
}

.page_breadcrumbs .breadcrumb { background: transparent; margin: 0; }

.page_breadcrumbs a,
.page_breadcrumbs .breadcrumb > li { color: rgba(255, 255, 255, .8); }

.page_breadcrumbs a:hover { color: #fff; }

.page_breadcrumbs .breadcrumb > .active { color: #fff; }

/* ==========================================================================
   10. Product detail
   ========================================================================== */

.sppl_product_media {
    border: 1px solid var(--sppl-line);
    border-radius: var(--sppl-radius);
    overflow: hidden;
    background: var(--sppl-surface);
}

.sppl_product_media img { width: 100%; height: auto; display: block; }

.sppl_product_body {
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--sppl-body);
}

.sppl_product_body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sppl-radius-sm);
}

.sppl_product_title {
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 6px;
}

.sppl_sidebar_card {
    background: var(--sppl-surface);
    border: 1px solid var(--sppl-line);
    border-radius: var(--sppl-radius);
    padding: 20px;
}

.sppl_sidebar_title {
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sppl-line);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sppl-ink);
}

/* Group heading on the "all categories" index, with its product count. */
.sppl_group_heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 22px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--sppl-line);
    font-size: 24px;
    font-weight: 700;
}

.sppl_group_count {
    font-size: 13px;
    font-weight: 600;
    color: var(--sppl-muted);
}

.sppl_sidebar_item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--sppl-line-soft);
}

.sppl_sidebar_item:last-child { border-bottom: 0; }

.sppl_sidebar_item img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: var(--sppl-radius-sm);
    flex: 0 0 auto;
    background: var(--sppl-surface-soft);
}

.sppl_sidebar_item h4 {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 600;
}

/* ==========================================================================
   11. Empty states
   ========================================================================== */

.sppl_empty {
    padding: 64px 24px;
    text-align: center;
    border: 1px dashed var(--sppl-line);
    border-radius: var(--sppl-radius);
    background: var(--sppl-surface-soft);
}

.sppl_empty i,
.sppl_empty svg { font-size: 40px; color: var(--sppl-muted); margin-bottom: 14px; }

.sppl_empty h3 { font-size: 20px; margin: 0 0 8px; }

.sppl_empty p { color: var(--sppl-muted); margin: 0; }

/* ==========================================================================
   12. Legacy theme cleanup
   --------------------------------------------------------------------------
   The vendored theme hardcodes several dated effects. Neutralise the ones
   that fight the new design.
   ========================================================================== */

/* Parallax background images make text unreadable and cost a repaint on
   scroll; the brand gradients replace them. */
.parallax { background-image: none !important; }

.page_gallery,
.page_testimonials { background: var(--sppl-surface-soft) !important; }

/* The theme's animated gradient band. */
.cs.gradient { background: var(--sppl-grad-navy) !important; }

/* -------------------------------------------------------------- page loader
   The theme's loader is a GIF spinner on a blank white screen — a white flash
   with a small grey wheel in it, held for however long the page takes.

   This is drawn instead, and deliberately not a spinner: the company's initials
   in the logo's own gradient with the colour drifting through them, over a bar
   that sweeps. Two motions that read as one object, and nothing that depends on
   an image file.

   `main.js` fades `.preloader` out on window load and removes it, so the names
   the theme's script reaches for are kept.
   ------------------------------------------------------------------------- */

.preloader {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sppl-surface-soft);
    /* `fadeOut` writes an inline opacity, so this is what turns the removal
       into a fade rather than a cut. */
    transition: opacity .4s var(--sppl-ease);
}

.sppl_loader {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* A brand glow behind the mark, so the monogram sits in light rather than on
   a flat grey field. */
.sppl_loader::before {
    content: "";
    position: absolute;
    top: -46px;
    left: 50%;
    width: 280px;
    height: 170px;
    margin-left: -140px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(47, 158, 47, .18) 0%,
        rgba(140, 200, 20, .10) 45%,
        transparent 72%);
    pointer-events: none;
    animation: sppl_loader_breathe 3.2s var(--sppl-ease) infinite;
}

/* The initials, filled with the brand gradient rather than given a colour.
   `background-clip: text` paints the gradient inside the letterforms; the
   gradient is sized wider than the text and its position drifts, so the colour
   moves through the letters instead of sitting still on them. */
.sppl_loader_mono {
    position: relative;
    padding-left: .15em;   /* letter-spacing adds a trailing gap; this balances it */
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .15em;
    background-image: linear-gradient(100deg,
        var(--sppl-navy-800) 0%,
        var(--sppl-green-600) 30%,
        var(--sppl-lime-500) 50%,
        var(--sppl-green-600) 70%,
        var(--sppl-navy-800) 100%);
    background-size: 240% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: sppl_loader_drift 3.6s var(--sppl-ease) infinite alternate;
}

/* ------------------------------------------------------------------ the bar
   Indeterminate: a band travelling along a track. Written as a `transform` on
   the band rather than an animated `left`, so it stays on the compositor. */

.sppl_loader_track {
    position: relative;
    width: 190px;
    height: 4px;
    border-radius: var(--sppl-radius-pill);
    background: rgba(0, 41, 143, .1);
    overflow: hidden;
}

.sppl_loader_track i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    border-radius: inherit;
    background: var(--sppl-grad-brand);
    animation: sppl_loader_slide 1.3s var(--sppl-ease) infinite;
}

@keyframes sppl_loader_drift {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}

@keyframes sppl_loader_breathe {
    0%, 100% { opacity: .65; transform: scale(.94); }
    50%      { opacity: 1;   transform: scale(1.04); }
}

/* The band is 45% of the track, so its own width is 45% of the travel. From
   -105% (clear of the left edge) to 228% (clear of the right). */
@keyframes sppl_loader_slide {
    from { transform: translateX(-105%); }
    to   { transform: translateX(228%); }
}

/* Slowed rather than stopped: a loader that does not move says nothing at all.
   The scale change is dropped, since that is the part that bothers people who
   ask for less motion. */
@media (prefers-reduced-motion: reduce) {
    .sppl_loader_mono { animation-duration: 9s; }

    .sppl_loader_track i { animation-duration: 2.6s; }

    .sppl_loader::before {
        animation: none;
        opacity: .8;
    }
}

/* The old masonry isotope container reserved a fixed pixel height inline;
   the new grid flows naturally. */
.isotope_container { height: auto !important; }

/* ==========================================================================
   13. Responsive
   ========================================================================== */

@media (max-width: 1199px) {
    .sppl_stat_value { font-size: 36px; }
}

@media (max-width: 991px) {
    .sppl_section { padding: 42px 0; }

    .sppl_stats { grid-template-columns: repeat(3, 1fr); gap: 22px; }

    .sppl_stat:nth-child(4) { border-left: 0; }

    .page_header.is_stuck + * { padding-top: 0; }
}

@media (max-width: 767px) {
    .sppl_section { padding: 34px 0; }

    .sppl_stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }

    .sppl_stat { border-left: 0 !important; }

    .sppl_stat_value { font-size: 32px; }

    .sppl_card_body { padding: 18px; }

    .sppl_card_title { font-size: 17px; }

    .theme_button { padding: 11px 22px; }
}

@media (max-width: 479px) {
    .sppl_stats { grid-template-columns: 1fr; }
}

/* ==========================================================================
   14. Header navigation — compact
   --------------------------------------------------------------------------
   The vendored theme gives top-level items `padding: 28px 0` and separates
   them with a full-height 1px rule, which makes the bar tall and the items
   cramped against each other. This tightens the row and swaps the divider for
   a hover pill. Positioning and the dropdown's show/hide are left entirely to
   the theme's Superfish rules — only appearance is touched here.
   ========================================================================== */

.header_mainmenu .sf-menu > li > a {
    /* The theme spaces top-level items with side *margins* — 2px, then
       15/20/25/30px in its own media queries — and gives them no side padding
       at all. The redesign added the padding the hover pill needs, so every
       gap became margin + padding and roughly doubled; that both read as loose
       and pushed the last items out of the row, at which point the theme's
       overflow handler swallowed them into a "..." menu.

       Spacing is owned here now, so the two can never stack. The resets must
       apply at every width, so they sit outside any media query: a media query
       adds no specificity, and this selector already outranks the theme's
       (0,2,2 against 0,1,2), so it wins inside the theme's queries too. */
    margin-left: 0;
    margin-right: 0;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .005em;
    color: var(--sppl-ink);
    border-radius: var(--sppl-radius-pill);
    transition: background-color var(--sppl-t-fast) var(--sppl-ease),
                color var(--sppl-t-fast) var(--sppl-ease);
}

/* The cells either side of the nav only ever hold a logo now, so the theme's
   50px gutters at >=1600px buy nothing but dead width. */
.page_header .header_left_logo,
.page_header .header_right_buttons {
    padding: 0 18px;
}

/* The theme's vertical separator is no longer needed. */
.header_mainmenu .sf-menu > li + li::before { display: none; }

.header_mainmenu .sf-menu > li > a:hover,
.header_mainmenu .sf-menu > li.active > a,
.header_mainmenu .sf-menu > li.sfHover > a {
    background-color: rgba(47, 158, 47, .1);
    color: var(--sppl-green-700);
}

/* Dropdown panel. */
.header_mainmenu .sf-menu li > ul {
    min-width: 244px;
    margin-top: 8px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--sppl-line);
    border-radius: var(--sppl-radius);
    box-shadow: var(--sppl-shadow-lg);
    /* `visible`, NOT `hidden`. This rule matches at every depth, and a third
       level is positioned `left: 100%` from a containing block *inside* its
       parent `ul` — so with `hidden` the parent clipped its own children out of
       existence. Invisible while the menu was two levels deep; it would have
       silently eaten every third-level flyout the moment nesting shipped. Safe
       to open up because the panel has 8px of padding, so an inner link's
       background never reaches the rounded corner this was clipping. */
    overflow: visible;
}

.header_mainmenu .sf-menu li > ul > li > a {
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--sppl-body);
    border-radius: var(--sppl-radius-sm);
    /* Long labels like "Dr. Md. Habibur Rahman, Founder of SPPL" must wrap. */
    white-space: normal;
}

.header_mainmenu .sf-menu li > ul > li > a:hover {
    background-color: var(--sppl-surface-soft);
    color: var(--sppl-green-700);
}

.header_mainmenu .sf-menu li > ul > li + li { margin-top: 2px; }

/* --------------------------------------------------------------------------
   Mega panel.
   The markup uses the theme's own `.mega-menu` vocabulary on purpose: main.js
   overrides Superfish's popUpSelector to 'ul:not(.mega-menu ul), .mega-menu',
   so `.mega-menu` is a popup Superfish opens and closes for us, and
   `initMegaMenu()` centres it on desktop. `.sf-mega` appears in the theme's
   defaults but matches nothing here, and a panel it cannot see would render
   permanently open.
   -------------------------------------------------------------------------- */
.header_mainmenu .sf-menu .mega-menu {
    /* Stand down the theme's fixed mega widths and flat grey skin. */
    width: auto;
    min-width: 244px;
    margin-top: 8px;
    padding: 14px;
    background: var(--sppl-surface);
    border: 1px solid var(--sppl-line);
    border-radius: var(--sppl-radius);
    box-shadow: var(--sppl-shadow-lg);
}

.header_mainmenu .sf-menu .mega-menu-row {
    /* Was a table/table-cell in the theme; grid lets a column count drive it. */
    display: grid;
    grid-template-columns: repeat(var(--sppl-mega-cols, 2), minmax(190px, 1fr));
    gap: 4px 18px;
}

.header_mainmenu .sf-menu .mega-menu-col {
    display: block;
    width: auto;
    padding: 0;
    border-left: 0;
}

/* A plain link in a mega column. */
.header_mainmenu .sf-menu .mega-menu-col > a {
    display: block;
    padding: 8px 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sppl-body);
    border-radius: var(--sppl-radius-sm);
}

/* A group title: an entry that has children of its own beneath it. */
.header_mainmenu .sf-menu .mega-menu-col > a.sppl_mega_group {
    padding: 6px 12px 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sppl-muted);
}

.header_mainmenu .sf-menu .mega-menu-col > a.sppl_mega_group:hover {
    background: transparent;
    color: var(--sppl-green-700);
}

.header_mainmenu .sf-menu .mega-menu-col ul {
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.header_mainmenu .sf-menu .mega-menu-col ul a {
    display: block;
    padding: 8px 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sppl-body);
    border-radius: var(--sppl-radius-sm);
    white-space: normal;
}

.header_mainmenu .sf-menu .mega-menu-col ul a:hover {
    background-color: var(--sppl-surface-soft);
    color: var(--sppl-green-700);
}

/* --------------------------------------------------------------------------
   Search, opposite the logo.
   The theme's own search submit is an icon-only pill: `font-size: 0` hides the
   label and a FontAwesome magnifier is drawn in `:before`. Its selectors reach
   three classes deep, so these match that depth and win on source order.
   -------------------------------------------------------------------------- */
.sppl_header_search .form-group-wrap {
    display: flex;
    position: relative;
}

.sppl_header_search .form-group { flex: 0 0 auto; }

.sppl_header_search .form-inline .form-group .form-control {
    width: 280px;
    min-width: 0;
    height: 38px;
    padding: 6px 14px;
    background-color: var(--sppl-surface-soft);
    border: 1.5px solid var(--sppl-line);
    border-radius: var(--sppl-radius-pill) 0 0 var(--sppl-radius-pill);
    color: var(--sppl-ink);
    font-size: 13.5px;
    box-shadow: none;
    transition: background-color var(--sppl-t-fast) var(--sppl-ease),
                border-color var(--sppl-t-fast) var(--sppl-ease);
}

.sppl_header_search .form-control::placeholder { color: var(--sppl-muted); }

.sppl_header_search .form-control:focus {
    background-color: #fff;
    border-color: var(--sppl-green-600);
}

/* The theme's `.page_header .widget_search .form-group + .theme_button` pins a
   flat 40x40 at (0,4,0), and its :hover/:focus/:active state paints the button
   #071c1f — near-black, which fights the brand palette. These match that depth
   so the size and the pressed colour stay on-brand. */
.page_header .sppl_header_search .form-group + .theme_button {
    width: 46px;
    height: 38px;
    padding: 0;
    font-size: 0;
    border-radius: 0 var(--sppl-radius-pill) var(--sppl-radius-pill) 0 !important;
}

.page_header .sppl_header_search .form-group + .theme_button:hover,
.page_header .sppl_header_search .form-group + .theme_button:focus,
.page_header .sppl_header_search .form-group + .theme_button:active {
    background-color: var(--sppl-green-700);
    border-color: var(--sppl-green-700);
    color: #fff;
}

/* Below 1500px the field collapses to its icon: the row cannot spare ~326px
   without the theme's overflow handler starting to hide menu items. js/sppl.js
   opens it on tap, and Enter submits. The field grew from 208px to 280px, which
   pushed this breakpoint up from 1400px — the 1500 figure is the measured point
   where the nav still has slack with the field open; it is re-checked by the
   992-1920 width sweep. */
@media (max-width: 1499px) {
    .sppl_header_search .form-group-wrap {
        position: relative;
        width: 46px;
    }

    .sppl_header_search .form-inline .form-group {
        position: absolute;
        right: 46px;
        top: 0;
        width: 0;
        overflow: hidden;
        transition: width var(--sppl-t) var(--sppl-ease-out);
    }

    .sppl_header_search .form-inline .form-group .form-control {
        width: 280px;
        border-radius: var(--sppl-radius-pill) 0 0 var(--sppl-radius-pill);
        box-shadow: var(--sppl-shadow);
    }

    .sppl_header_search.is_open .form-inline .form-group { width: 280px; }

    /* Collapsed, the button stands alone, so it becomes a full pill rather
       than the flat-lefted half of the input+button pair. */
    .page_header .sppl_header_search .form-group + .theme_button {
        width: 40px;
        height: 40px;
        border-radius: var(--sppl-radius-pill) !important;
    }
}

/* --------------------------------------------------------------------------
   Live search suggestions. Anchored to the widget rather than to the field,
   because below 1500px the field itself is an absolutely-positioned box with
   `overflow: hidden` (that is what animates it open) and would clip the list.
   The min-width is the expanded field+button, so when the box is collapsed to
   its icon the list still opens at full width, extending leftwards.
   -------------------------------------------------------------------------- */
.sppl_header_search { position: relative; }

.sppl_search_suggest {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    width: 100%;
    min-width: 326px;
    max-height: 62vh;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--sppl-surface);
    border: 1px solid var(--sppl-line);
    border-radius: var(--sppl-radius);
    box-shadow: var(--sppl-shadow-lg);
}

.sppl_search_suggest.is_open { display: block; }

.sppl_search_suggest_item a {
    display: block;
    padding: 9px 12px;
    border-radius: var(--sppl-radius-sm);
    text-decoration: none;
    /* The widget sits in a `.text-right` header cell, so without this every
       row inherits right alignment and the list reads as ragged. */
    text-align: left;
    transition: background-color var(--sppl-t-fast) var(--sppl-ease);
}

.sppl_search_suggest_item a:hover,
.sppl_search_suggest_item.is_active a {
    background: var(--sppl-surface-soft);
}

.sppl_search_suggest_title {
    display: block;
    color: var(--sppl-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.sppl_search_suggest_cat {
    display: block;
    margin-top: 2px;
    color: var(--sppl-muted);
    font-size: 12px;
    line-height: 1.3;
}

@media (max-width: 479px) {
    /* On a phone the list cannot extend left past the viewport edge. */
    .sppl_search_suggest { min-width: 0; width: 78vw; }
}

.page_header .header_left_logo img { max-height: 46px; }

/* The row now carries the brand, seven items and the search, so the gutters
   either side of the nav tighten in step with the search collapsing. */
@media (max-width: 1399px) {
    /* 13px/8px rather than 13.5px/9px: the theme's overflow handler has no
       hysteresis, and a 16px-wide band around 1008-1024px sat close enough to
       the limit that it swallowed two items there while leaving narrower and
       wider screens alone. This buys ~35px of headroom past that band. */
    .header_mainmenu .sf-menu > li > a { padding: 9px 8px; font-size: 13px; }

    .page_header .header_left_logo { padding: 0 12px; }
    .page_header .header_right_buttons { padding: 0 10px; }
}

/* Below the collapse point the menu becomes the theme's slide-out drawer and
   the hamburger takes the right-hand corner, absolutely positioned over it.
   The search cell has to stop short of that or the two stack on top of each
   other — measured overlapping by 50px before this gutter was added. */
@media (max-width: 991px) {
    .page_header .header_right_buttons { padding: 0 66px 0 10px; }
}

@media (max-width: 991px) {
    /* The theme collapses the menu into a slide-out panel here, and that panel
       is dark (#1f232b). The desktop rules above outrank the theme's
       light-on-dark ones, so their near-black ink won inside the drawer and
       every item vanished into the background — the panel looked empty except
       for the current page. Colours have to be restated for the dark ground. */
    .header_mainmenu .sf-menu > li > a {
        padding: 12px 16px;
        border-radius: var(--sppl-radius-sm);
        color: #fff;
    }

    .header_mainmenu .sf-menu > li > a:hover,
    .header_mainmenu .sf-menu > li.active > a,
    .header_mainmenu .sf-menu > li.sfHover > a {
        background-color: rgba(255, 255, 255, .09);
        color: var(--sppl-lime-500);
    }

    .header_mainmenu .sf-menu li > ul {
        margin-top: 4px;
        border: 0;
        box-shadow: none;
        background: transparent;
        padding-left: 12px;
    }

    .header_mainmenu .sf-menu li > ul > li > a { color: rgba(255, 255, 255, .78); }

    .header_mainmenu .sf-menu li > ul > li > a:hover {
        background-color: rgba(255, 255, 255, .09);
        color: var(--sppl-lime-500);
    }

    /* Mega panels inside the drawer.
       Superfish hides every popup with an INLINE display:none, and the drawer
       has no :hover to bring one back — on a touch device that leaves the links
       unreachable. A stylesheet `!important` outranks an inline non-important
       declaration, so this is what reopens them. It is the one `!important` in
       the menu, and it is scoped to one selector at one breakpoint.

       The panel is also flattened to a plain list: the theme's column layout
       only applies above 992px anyway, and a white slab on the drawer's dark
       ground would read as a hole in the menu. */
    .header_mainmenu .sf-menu li.menu-item-has-mega-menu > .mega-menu {
        display: block !important;
        position: static;
        margin: 4px 0 8px;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .header_mainmenu .sf-menu .mega-menu-row { display: block; }

    .header_mainmenu .sf-menu .mega-menu-col { padding: 0; }

    .header_mainmenu .sf-menu .mega-menu-col > a {
        padding: 10px 16px 4px;
        color: var(--sppl-lime-500);
    }

    .header_mainmenu .sf-menu .mega-menu-col ul a {
        padding: 8px 16px 8px 28px;
        color: rgba(255, 255, 255, .78);
    }

    .header_mainmenu .sf-menu .mega-menu-col ul a:hover {
        background-color: rgba(255, 255, 255, .09);
        color: var(--sppl-lime-500);
    }

    /* The theme marks depth with a dash: one for level 2, two for level 3+.
       A fourth level was indistinguishable from a third. */
    .header_mainmenu .sf-menu ul ul ul ul li > a::before { content: '--- '; }
}

/* ==========================================================================
   15. Hero slider
   --------------------------------------------------------------------------
   Splide, configured from the admin panel (/superadmin/slider). Every visual
   decision the FlexSlider version carried is preserved: inset to 80% of the
   viewport on a neutral ground, the whole image visible with a blurred
   continuation behind it, and a light caption panel bottom-left.
   ========================================================================== */

.intro_section.page_mainslider {
    background: var(--sppl-surface-soft);
    padding: 22px 0;
}

.sppl_hero {
    /* 80% of the viewport, centred. Full-bleed stretched the artwork across the
       whole screen, and the inset gives the rounded panel something to sit on. */
    width: 80%;
    max-width: 1500px;
    margin: 0 auto;
    border-radius: var(--sppl-radius-lg);
    /* Clips the artwork to the rounded corners. */
    overflow: hidden;
}

/* Splide hides its root until it has initialised (`visibility: hidden`). If the
   script never loads the hero would be a blank band, so the fallback shows the
   first slide as a plain image instead. */
.sppl_hero--static { visibility: visible; }

@media (max-width: 991px) {
    .sppl_hero { width: 92%; }
}

@media (max-width: 767px) {
    .sppl_hero { width: 100%; border-radius: 0; }
    .intro_section.page_mainslider { padding: 0; }
}

/* The height lives on the TRACK, not the slide. Splide's fade type takes the
   slides out of flow, and a height on the slide alone would collapse the hero
   to nothing. Roughly 3:1 across the desktop range, which is the ratio the
   admin asks for on upload. */
/* The floor is 360px, not 340px: the caption is a fixed 344px tall on desktop,
   and below about 1400px the 28vw track was shorter than the caption itself, so
   `align-items: flex-end` pushed its top out of the frame and the heading lost
   its first line. */
.sppl_hero .splide__track {
    height: clamp(360px, 28vw, 540px);
}

.sppl_hero .splide__slide {
    height: 100%;
    overflow: hidden;
    /* Neutral, not navy: the overlays and the letterbox behind the artwork were
       all blue, which tinted every slide regardless of the photograph. */
    background: #14171a;
}

/* A blurred, oversized copy of the slide's own artwork fills the letterbox
   area, so an image whose aspect ratio does not match the slide's sits in a
   soft continuation of itself instead of in hard bars. */
.sppl_hero .splide__slide::before {
    content: "";
    position: absolute;
    inset: -8%;
    z-index: 0;
    background-image: var(--sppl-slide-img);
    background-size: cover;
    background-position: center;
    filter: blur(30px) saturate(1.15);
    opacity: .75;
}

/* `contain` by default: cover filled the row by cropping the artwork, which cut
   the edges off every slide that was not already the row's aspect ratio. Editable
   in the admin; at 3:1 the two are identical and the blur behind never shows. */
.sppl_hero .splide__slide img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    /* The theme dims every image inside a `.ds` section to 30%, which read as a
       grey film over the artwork. Full opacity. */
    opacity: 1;
}

.sppl_hero[data-fit="cover"] .splide__slide img { object-fit: cover; }

.sppl_hero .splide__slide > .container {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    /* Bottom-anchored: several slide images carry their own headline in the
       upper area, so a top or centre caption collided with it. */
    align-items: flex-end;
    padding-bottom: 46px;
}

/* The caption fades in with its slide rather than being present from the start. */
.sppl_hero_caption {
    display: block;
    width: fit-content;
    max-width: 620px;
    margin-right: auto;
    padding: 26px 30px;
    /* Light frosted glass, not the charcoal panel this used to be: a dark panel
       over the artwork is a black rectangle on the photograph, and below 767px
       it spans the full slide. Dark ink on a light panel stays legible over any
       photograph, which is what the old scrim bought at the cost of dimming
       every slide. */
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: var(--sppl-radius-lg);
    box-shadow: 0 10px 30px rgba(15, 25, 20, .16);
    text-align: left;

    opacity: 0;
    /* The reveal direction follows the caption's placement — see the placement
       block below, which flips this to a negative value for a caption at the
       top of the slide. */
    transform: translateY(var(--sppl-caption-shift, 14px));
    transition: opacity var(--sppl-t) var(--sppl-ease-out),
                transform var(--sppl-t) var(--sppl-ease-out);
}

.sppl_hero .splide__slide.is_caption_shown .sppl_hero_caption {
    opacity: 1;
    transform: none;
}

/* 34px, not the 46px an earlier rule asked for: at 46px the longest title
   wraps to three lines and the caption grows taller than the slide, so
   `align-items: flex-end` pushes its first line out of the frame. 34px is the
   size that was actually rendering before this was rewritten. */
.sppl_hero_caption h2 {
    font-size: 34px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--sppl-ink);
    margin: 0 0 12px;
}

.sppl_hero_caption p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--sppl-body);
    margin: 0 0 22px;
}

.sppl_hero_caption .theme_button {
    background-color: var(--sppl-green-600);
    border-color: var(--sppl-green-600);
    color: #fff;
    box-shadow: none;
}

.sppl_hero_caption .theme_button:hover {
    background-color: var(--sppl-green-700);
    border-color: var(--sppl-green-700);
    color: #fff;
}

/* Pagination dots, on a frosted pill.
   They used to be white, which only read because a dark scrim covered the
   bottom of every slide. The scrim is gone and the artwork now shows at full
   strength, so white dots vanish on a bright photograph. The pill gives them a
   surface to sit on whatever the image underneath. */
.sppl_hero .splide__pagination {
    bottom: 18px;
    gap: 6px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--sppl-radius-pill);
    box-shadow: 0 4px 14px rgba(15, 25, 20, .12);
    /* Splide disables pointer events on the list and re-enables them per dot. */
    z-index: 4;
}

.sppl_hero .splide__pagination__page {
    width: 9px;
    height: 9px;
    margin: 0;
    padding: 0;
    background: rgba(31, 35, 43, .28);
    border: 0;
    border-radius: 50%;
    opacity: 1;
    transition: width var(--sppl-t) var(--sppl-ease), background-color var(--sppl-t-fast);
}

.sppl_hero .splide__pagination__page:hover { background: rgba(31, 35, 43, .45); }

.sppl_hero .splide__pagination__page.is-active {
    width: 28px;
    border-radius: var(--sppl-radius-pill);
    background: var(--sppl-green-600);
    transform: none;
}

/* Arrows are only rendered when the admin switches them on.
   Splide positions these in its *theme* stylesheet; this site loads only the
   core file, so the placement is done here rather than pulling in a second
   stylesheet to override. */
.sppl_hero .splide__arrows {
    position: absolute;
    inset: 0;
    z-index: 4;
    /* Clicks fall through to the slides, except on the buttons themselves. */
    pointer-events: none;
}

.sppl_hero .splide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    width: 44px;
    height: 44px;
    /* The theme pads every `button` at 16/25px. With `box-sizing: border-box`
       the box cannot shrink below its own padding, so the arrow was rendering
       52px wide rather than the 44px asked for above — and the caption gutter
       is measured off this. */
    padding: 0;
    background: rgba(255, 255, 255, .88);
    border: 1px solid var(--sppl-line);
    box-shadow: var(--sppl-shadow-sm);
    opacity: 1;
}

.sppl_hero .splide__arrow--prev { left: 18px; }
.sppl_hero .splide__arrow--next { right: 18px; }

.sppl_hero .splide__arrow:hover { background: #fff; }

.sppl_hero .splide__arrow svg {
    width: 18px;
    height: 18px;
    fill: var(--sppl-ink);
}

@media (max-width: 767px) {
    /* Smaller and tighter, so they do not sit on top of the caption. */
    .sppl_hero .splide__arrow { width: 36px; height: 36px; }
    .sppl_hero .splide__arrow--prev { left: 8px; }
    .sppl_hero .splide__arrow--next { right: 8px; }
}

@media (max-width: 991px) {
    .sppl_hero .splide__track { height: 440px; }
    .sppl_hero_caption h2 { font-size: 34px; }
    .sppl_hero_caption p { font-size: 15.5px; }
}

/* Below this width the slide is shorter than the caption needs, so the copy is
   capped at three lines and the paragraph is allowed to breathe to six above it.
   The full text stays in the markup for search engines and screen readers — this
   only limits how much is painted. */
@media (max-width: 1499px) {
    .sppl_hero_caption p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (max-width: 767px) {
    .sppl_hero .splide__track { height: 400px; }
    .sppl_hero_caption { max-width: 100%; padding: 20px 22px; }
    .sppl_hero_caption h2 { font-size: 27px; }
    .sppl_hero_caption p { font-size: 15px; margin-bottom: 20px; }
    .sppl_hero_caption .theme_button { padding: 11px 22px; }

    /* On a phone the whole caption has to come back inside the slide. */
    .sppl_hero .splide__slide > .container { padding-bottom: 22px; }
}

@media (max-width: 479px) {
    .sppl_hero .splide__track { height: 360px; }
    .sppl_hero_caption h2 { font-size: 23px; }
}

/* Reduced motion: the caption slide-in is decorative. Splide's own autoplay is
   switched off in js/sppl.js for anyone who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
    .sppl_hero_caption { transition: none; transform: none; opacity: 1; }
    .sppl_hero_caption,
    .sppl_hero .splide__pagination__page { transition: none !important; }
}

/* --------------------------------------------------------- caption placement
   Where the caption sits is chosen per slide in the admin panel. The nine
   positions are written onto the slide as `data-caption="{row}-{column}"`,
   and these rules read it in halves: the vertical half from the prefix, the
   horizontal half from the suffix.

   Two different mechanisms, because the markup gives each axis a different
   handle. The slide's `.container` is a flex row whose only item is the
   caption, so vertical placement is `align-items` on the container; the
   caption itself is `width: fit-content`, so horizontal placement is its own
   auto margins.
   ------------------------------------------------------------------------- */

/* The container is a flex row and `.row` is its only item, so the row was
   sizing itself to the caption instead of to the slide — a 650px box inside a
   1170px one. Left, centre and right then all rendered identically, because
   the caption already filled the box it was being placed in. Full width gives
   the caption the slide to move around in.

   The `+ 30px` cancels Bootstrap's `-15px` side margins on `.row`, which
   otherwise leave the row 30px short on the right and put a centred caption
   15px off-centre. With them cancelled, the row spans the container's padding
   box and the columns' own 15px padding brings the text back to where it has
   always sat — a left-placed caption does not move. */
.sppl_hero .splide__slide > .container > .row {
    width: calc(100% + 30px);
}

/* `bottom-` is the container's existing default (align-items: flex-end with a
   46px inset) and needs no rule of its own. */
.sppl_hero .splide__slide[data-caption^="top-"] > .container {
    align-items: flex-start;
    padding-top: 46px;
    padding-bottom: 0;
}

.sppl_hero .splide__slide[data-caption^="middle-"] > .container {
    align-items: center;
    padding-bottom: 0;
}

.sppl_hero .splide__slide[data-caption$="-center"] .sppl_hero_caption {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.sppl_hero .splide__slide[data-caption$="-right"] .sppl_hero_caption {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}

/* A caption at the top of the slide drops in from above. The transform itself
   is declared once on `.sppl_hero_caption`; only the direction changes here. */
.sppl_hero .splide__slide[data-caption^="top-"] .sppl_hero_caption {
    --sppl-caption-shift: -14px;
}

/* When the arrows are switched on, the caption has to keep out of their way.
   A 620px panel starting at the slide's own edge runs straight underneath the
   prev/next buttons, which sit 18px in and are 44px wide.

   Nothing here applies while the arrows are off, which is the default — the
   container keeps Bootstrap's own 15px of padding and the caption sits exactly
   where it has always sat.

   On a wide slide the panel can only reach the button on its own side, so only
   that side is reserved and a left-placed caption keeps its full width. */
@media (min-width: 992px) {
    .sppl_hero[data-arrows="1"] .splide__slide[data-caption$="-left"] > .container { padding-left: 76px; }
    .sppl_hero[data-arrows="1"] .splide__slide[data-caption$="-right"] > .container { padding-right: 76px; }
    .sppl_hero[data-arrows="1"] .splide__slide[data-caption$="-center"] > .container {
        padding-left: 76px;
        padding-right: 76px;
    }
}

/* Below that the panel is wider than the space left between the two buttons,
   so both sides are reserved whatever the placement — otherwise a left-placed
   caption runs under the *next* button, which is the one nobody looks at. */
@media (max-width: 991px) {
    .sppl_hero[data-arrows="1"] .splide__slide > .container {
        padding-left: 76px;
        padding-right: 76px;
    }
}

/* The slide is 400px tall here, so the top inset matches the bottom one. */
@media (max-width: 767px) {
    .sppl_hero .splide__slide[data-caption^="top-"] > .container { padding-top: 22px; }

    /* Smaller buttons, set closer to the edge — so a smaller gutter. */
    .sppl_hero[data-arrows="1"] .splide__slide > .container {
        padding-left: 52px;
        padding-right: 52px;
    }
}



/* ==========================================================================
   16. "Why Choose Us"
   --------------------------------------------------------------------------
   These points have wildly uneven copy — one is a single line, another is a
   full paragraph — so the old left-icon/right-text teaser left them ragged.
   A grid with `align-items: stretch` makes every card in a row the same
   height regardless, which reads as deliberate rather than misaligned.
   ========================================================================== */

.sppl_why_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sppl_why_card {
    display: flex;
    flex-direction: column;
    padding: 18px 20px;
    background: var(--sppl-surface);
    border: 1px solid var(--sppl-line);
    border-radius: var(--sppl-radius);
    transition: transform var(--sppl-t) var(--sppl-ease-out),
                box-shadow var(--sppl-t) var(--sppl-ease-out),
                border-color var(--sppl-t) var(--sppl-ease);
}

.sppl_why_card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sppl-shadow);
    border-color: transparent;
}

/* Icon and heading share one row: stacking them cost 70px of height per card
   for no extra legibility. */
.sppl_why_head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 7px;
}

.sppl_why_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--sppl-grad-brand);
    color: #fff;
    font-size: 14px;
    box-shadow: var(--sppl-shadow-brand);
}

.sppl_why_card h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.sppl_why_card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.62;
    color: var(--sppl-muted);
}

/* A card with a lot of copy spans the full width so it reads as prose rather
   than a cramped column. */
.sppl_why_card--wide { grid-column: 1 / -1; }

@media (max-width: 767px) {
    .sppl_why_grid { grid-template-columns: 1fr; gap: 10px; }
    .sppl_why_card { padding: 16px 16px; }
    .sppl_why_card--wide { grid-column: auto; }
}

/* ==========================================================================
   17. Founder page
   ========================================================================== */

.sppl_founder_hero {
    padding: 64px 0;
    background: var(--sppl-surface-soft);
}

.sppl_founder_hero_row { display: flex; align-items: center; flex-wrap: wrap; }

.sppl_founder_portrait {
    position: relative;
    border-radius: var(--sppl-radius-lg);
    overflow: hidden;
    background: var(--sppl-grad-brand);
    box-shadow: var(--sppl-shadow-lg);
    aspect-ratio: 3 / 4;
}

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

/* A brand rule down the left of the intro, echoing the logo's green. */
.sppl_founder_intro { padding-left: 34px; border-left: 3px solid var(--sppl-green-600); }

.sppl_founder_name {
    margin: 0 0 10px;
    font-size: 42px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.02em;
}

.sppl_founder_designation {
    margin: 0 0 24px;
    font-size: 17px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--sppl-green-700);
}

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

.sppl_founder_roles li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 11px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--sppl-body);
}

.sppl_founder_roles i { margin-top: 4px; color: var(--sppl-green-600); flex: 0 0 auto; }

/* Quote band. */
.sppl_quote_band { text-align: center; }

.sppl_quote_mark {
    display: block;
    margin-bottom: 20px;
    font-size: 30px;
    color: var(--sppl-lime-400);
    opacity: .8;
}

.sppl_quote {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    font-size: 30px;
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #fff;
}

.sppl_quote_author { font-size: 15px; font-style: normal; color: rgba(255, 255, 255, .72); }

/* Biography — comfortable measure, clear paragraph rhythm. */
.sppl_founder_bio {
    font-size: 16px;
    line-height: 1.85;
    color: var(--sppl-body);
}

.sppl_founder_bio p { margin: 0 0 22px; }

.sppl_founder_bio p:first-child::first-letter {
    float: left;
    margin: 6px 12px 0 0;
    font-size: 58px;
    line-height: .82;
    font-weight: 800;
    color: var(--sppl-green-600);
}

.sppl_founder_bio img { max-width: 100%; height: auto; border-radius: var(--sppl-radius-sm); }

.sppl_founder_bio blockquote {
    margin: 26px 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--sppl-green-600);
    font-size: 17.5px;
    font-style: italic;
    color: var(--sppl-ink);
}

/* Principles. */
.sppl_principle {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
    margin-bottom: 24px;
    padding: 20px 22px;
    background: var(--sppl-surface);
    border: 1px solid var(--sppl-line);
    border-radius: var(--sppl-radius);
    transition: box-shadow var(--sppl-t) var(--sppl-ease), transform var(--sppl-t) var(--sppl-ease-out);
}

.sppl_principle:hover { transform: translateY(-3px); box-shadow: var(--sppl-shadow-sm); }

.sppl_principle_num {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.6;
    color: var(--sppl-lime-500);
}

.sppl_principle p {
    margin: 0;
    font-size: 15.2px;
    line-height: 1.7;
    color: var(--sppl-body);
}

/* Gallery. */
.sppl_gallery_item {
    margin: 0 0 30px;
    border-radius: var(--sppl-radius);
    overflow: hidden;
    background: var(--sppl-surface);
    border: 1px solid var(--sppl-line);
    box-shadow: var(--sppl-shadow-sm);
    transition: box-shadow var(--sppl-t) var(--sppl-ease), transform var(--sppl-t) var(--sppl-ease-out);
}

.sppl_gallery_item:hover { transform: translateY(-4px); box-shadow: var(--sppl-shadow-lg); }

.sppl_gallery_item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.sppl_gallery_item figcaption {
    padding: 16px 20px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--sppl-ink);
}

@media (max-width: 991px) {
    .sppl_founder_intro { padding-left: 0; border-left: 0; margin-top: 34px; }
    .sppl_founder_name { font-size: 33px; }
    .sppl_quote { font-size: 23px; }
    .sppl_founder_portrait { max-width: 340px; margin-inline: auto; }
}

@media (max-width: 767px) {
    .sppl_founder_hero { padding: 44px 0; }
    .sppl_founder_name { font-size: 27px; }
    .sppl_quote { font-size: 20px; }
    .sppl_founder_bio { font-size: 15.5px; }
}

/* ==========================================================================
   18. About page
   ========================================================================== */

.sppl_about_lead {
    font-size: 17px;
    line-height: 1.8;
    color: var(--sppl-body);
}

/* Mission / Vision pair. */
.sppl_mv_card {
    height: 100%;
    padding: 34px;
    background: var(--sppl-surface);
    border: 1px solid var(--sppl-line);
    border-top: 4px solid var(--sppl-green-600);
    border-radius: var(--sppl-radius);
    transition: transform var(--sppl-t) var(--sppl-ease-out), box-shadow var(--sppl-t) var(--sppl-ease);
}

.sppl_mv_card:hover { transform: translateY(-4px); box-shadow: var(--sppl-shadow); }

.sppl_mv_card h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 700;
}

.sppl_mv_card h3 i { color: var(--sppl-green-600); font-size: 20px; }

.sppl_mv_card ul { margin: 0; padding: 0; list-style: none; }

.sppl_mv_card li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 26px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--sppl-body);
}

.sppl_mv_card li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sppl-lime-500);
}

.sppl_mv_card p { margin: 0; font-size: 15.5px; line-height: 1.8; color: var(--sppl-body); }

/* Founder teaser card on the about page. */
.sppl_founder_teaser {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 30px;
    background: var(--sppl-surface);
    border: 1px solid var(--sppl-line);
    border-radius: var(--sppl-radius-lg);
    box-shadow: var(--sppl-shadow-sm);
}

.sppl_founder_teaser img {
    flex: 0 0 auto;
    width: 132px;
    height: 132px;
    object-fit: cover;
    object-position: top center;
    border-radius: 50%;
    border: 4px solid var(--sppl-surface-soft);
}

.sppl_founder_teaser h3 { margin: 0 0 6px; font-size: 21px; font-weight: 700; }
.sppl_founder_teaser p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; color: var(--sppl-muted); }

@media (max-width: 767px) {
    .sppl_mv_card { padding: 24px; }
    .sppl_founder_teaser { flex-direction: column; text-align: center; gap: 18px; padding: 24px; }
}

/* ==========================================================================
   19. Contact page + maps
   --------------------------------------------------------------------------
   The map frames never loaded because the config held `/maps/place/...` URLs
   from the browser address bar, and Google refuses to render those inside an
   iframe. Config::mapEmbedUrl() converts them to embeddable form.
   ========================================================================== */

.sppl_contact_card {
    height: 100%;
    background: var(--sppl-surface);
    border: 1px solid var(--sppl-line);
    border-radius: var(--sppl-radius);
    overflow: hidden;
    transition: box-shadow var(--sppl-t) var(--sppl-ease), transform var(--sppl-t) var(--sppl-ease-out);
}

.sppl_contact_card:hover { transform: translateY(-4px); box-shadow: var(--sppl-shadow); }

.sppl_contact_head { padding: 22px 24px 16px; }

.sppl_contact_head h3 {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
}

.sppl_contact_head h3 i { color: var(--sppl-green-600); }

.sppl_contact_head p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--sppl-muted); }

/* The wrapper keeps a fixed ratio so the frame never collapses while the
   third-party document is still loading. */
.sppl_map {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--sppl-surface-soft);
    border-top: 1px solid var(--sppl-line);
}

.sppl_map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.sppl_contact_methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.sppl_contact_method {
    height: 100%;
    padding: 30px 24px;
    text-align: center;
    background: var(--sppl-surface);
    border: 1px solid var(--sppl-line);
    border-radius: var(--sppl-radius);
    transition: transform var(--sppl-t) var(--sppl-ease-out), box-shadow var(--sppl-t) var(--sppl-ease);
}

.sppl_contact_method:hover { transform: translateY(-4px); box-shadow: var(--sppl-shadow); }

.sppl_contact_method .sppl_why_icon { margin-inline: auto; }

.sppl_contact_method h4 { margin: 0 0 10px; font-size: 16px; font-weight: 700; }

.sppl_contact_method p { margin: 0; font-size: 14.8px; line-height: 1.7; color: var(--sppl-muted); }

.sppl_contact_method a { color: var(--sppl-body); }

.sppl_contact_method a:hover { color: var(--sppl-green-600); }

@media (max-width: 991px) {
    .sppl_contact_methods { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .sppl_map { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   20. Long-form prose
   --------------------------------------------------------------------------
   Wraps admin-authored rich text (Mission & Vision, page bodies) so headings,
   lists and images inside it inherit the brand typography instead of the
   vendored theme's defaults.
   ========================================================================== */

.sppl_prose {
    max-width: 820px;
    margin-inline: auto;
    font-size: 16px;
    line-height: 1.85;
    color: var(--sppl-body);
}

.sppl_prose h2,
.sppl_prose h3 {
    margin: 34px 0 16px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--sppl-ink);
}

.sppl_prose h3:first-child { margin-top: 0; }

/* Brand rule under each sub-heading, matching .section_header. */
.sppl_prose h3::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 10px;
    border-radius: var(--sppl-radius-pill);
    background: var(--sppl-grad-brand);
}

.sppl_prose p { margin: 0 0 20px; }

.sppl_prose ul,
.sppl_prose ol { margin: 0 0 24px; padding: 0; list-style: none; }

.sppl_prose li {
    position: relative;
    margin-bottom: 13px;
    padding-left: 30px;
    line-height: 1.75;
}

.sppl_prose li::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sppl-lime-500);
}

.sppl_prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sppl-radius);
    box-shadow: var(--sppl-shadow-sm);
}

/* The original slide artwork, kept below the transcribed text. */
.sppl_mv_figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 34px;
}

.sppl_mv_figures p { margin: 0; }

@media (max-width: 767px) {
    .sppl_mv_figures { grid-template-columns: 1fr; }
}

/* ==========================================================================
   21. Compact navy band (stats strip on inner pages)
   ========================================================================== */

.sppl_section--compact { padding: 46px 0; }

@media (max-width: 767px) {
    .sppl_section--compact { padding: 36px 0; }
}


/* ==========================================================================
   22. Careers page
   --------------------------------------------------------------------------
   One block per open position. The description is rich text written in the
   admin panel, so it is rendered as prose — the page it replaces printed the
   markup itself, which for a pasted screenshot meant a wall of base64 text.
   `sppl:extract-inline-images` moves those payloads out into real files.
   ========================================================================== */

.sppl_position {
    padding: 30px 32px;
    background: var(--sppl-surface);
    border: 1px solid var(--sppl-line);
    border-left: 4px solid var(--sppl-green-600);
    border-radius: var(--sppl-radius);
    box-shadow: var(--sppl-shadow-xs);
    transition: box-shadow var(--sppl-t) var(--sppl-ease);
}

.sppl_position:hover { box-shadow: var(--sppl-shadow); }

.sppl_position + .sppl_position { margin-top: 24px; }

.sppl_position_title {
    font-size: 24px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--sppl-ink);
    margin: 0 0 14px;
}

.sppl_position_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 20px;
}

.sppl_position_chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--sppl-body);
    background: var(--sppl-surface-soft);
    border: 1px solid var(--sppl-line);
    border-radius: var(--sppl-radius-pill);
}

.sppl_position_chip i,
.sppl_position_chip svg { color: var(--sppl-green-600); font-size: 14px; }

/* The deadline is the one figure a candidate scans for, so it is the one chip
   that carries colour rather than matching the others. */
.sppl_position_chip--deadline {
    color: var(--sppl-ink);
    background: #fdf3e6;
    border-color: #f2ddc0;
}

.sppl_position_chip--deadline i,
.sppl_position_chip--deadline svg { color: #b4700f; }

.sppl_position_body {
    padding-top: 22px;
    border-top: 1px solid var(--sppl-line-soft);
}

/* The prose block's own bottom margin would double up with the footer's. */
.sppl_position_body > :last-child { margin-bottom: 0; }

.sppl_position_footer { margin-top: 22px; }

/* --- The "no openings" state ------------------------------------------- */

.sppl_career_empty {
    padding: 56px 32px;
    text-align: center;
    background: var(--sppl-surface);
    border: 1px dashed var(--sppl-line);
    border-radius: var(--sppl-radius);
}

.sppl_career_empty_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 20px;
    background: var(--sppl-surface-soft);
    border-radius: 50%;
}

.sppl_career_empty_icon i,
.sppl_career_empty_icon svg { font-size: 28px; color: var(--sppl-green-600); }

.sppl_career_empty h3 {
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--sppl-ink);
    margin: 0 0 12px;
}

.sppl_career_empty p {
    max-width: 620px;
    margin: 0 auto 10px;
    color: var(--sppl-body);
    line-height: 1.75;
}

.sppl_career_empty_actions { margin-top: 26px; }

.sppl_career_empty_actions .theme_button + .theme_button { margin-left: 10px; }

@media (max-width: 767px) {
    .sppl_position { padding: 24px 22px; }
    .sppl_position_title { font-size: 21px; }
    .sppl_career_empty { padding: 40px 22px; }

    /* Stacked, so the second button cannot sit beside the first. */
    .sppl_career_empty_actions .theme_button { margin: 0 0 10px; }
}

/* ==========================================================================
   23. Brand accents
   --------------------------------------------------------------------------
   Six colours, every one taken from the logo: the navy of the "Super Power
   Pharmaceuticals Ltd." wordmark, and the five stops of the oval running from
   its dark green through to the lime.

   A `.sppl_accent_N` element sets `--sppl-accent` for everything inside it, so
   a card carries its colour without any of its own rules knowing what the
   colour is. Cards, sidebar panels and headings all read the same variable.

   `--sppl-accent-tint` is the same colour at low opacity, for grounds, and
   `--sppl-accent-ink` is a darkened version guaranteed to pass contrast as
   text — the lime in particular is far too light to write with.
   ========================================================================== */

/* The order matters as much as the colours. Cards cycle through these by
   index, so consecutive entries have to differ visibly and the last has to
   differ from the first — the two navies next to each other in the first
   attempt made every wrap-around pair of cards look like one colour. */
.sppl_accent_0 { --sppl-accent: #00298f; --sppl-accent-tint: rgba(0, 41, 143, .09);  --sppl-accent-ink: #00205f; }
.sppl_accent_1 { --sppl-accent: #25801f; --sppl-accent-tint: rgba(37, 128, 31, .10); --sppl-accent-ink: #1b6b1b; }
.sppl_accent_2 { --sppl-accent: #8cc814; --sppl-accent-tint: rgba(140, 200, 20, .16); --sppl-accent-ink: #557a0d; }
.sppl_accent_3 { --sppl-accent: #1a4bb5; --sppl-accent-tint: rgba(26, 75, 181, .10); --sppl-accent-ink: #143a8c; }
.sppl_accent_4 { --sppl-accent: #2f9e2f; --sppl-accent-tint: rgba(47, 158, 47, .11); --sppl-accent-ink: #25801f; }
.sppl_accent_5 { --sppl-accent: #50aa1e; --sppl-accent-tint: rgba(80, 170, 30, .13); --sppl-accent-ink: #3d7f17; }

/* ==========================================================================
   24. Category listing — the coloured cards
   ========================================================================== */

/* The category's heading, with a rule in its own colour over the grey one the
   section already draws. Everything else about it is left alone. */
.sppl_group_heading { position: relative; }

/* The accent bar, drawn over the bottom border so the rule under the heading
   is the category's colour rather than every group's grey. */
.sppl_group_heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 84px;
    height: 2px;
    border-radius: var(--sppl-radius-pill);
    background: var(--sppl-accent, var(--sppl-green-600));
}

.sppl_group_heading a { color: var(--sppl-ink); }

.sppl_group_heading a:hover { color: var(--sppl-accent-ink, var(--sppl-green-700)); }

/* The count, as a pill in the tint of the same colour. */
.sppl_group_count {
    padding: 3px 11px;
    border-radius: var(--sppl-radius-pill);
    background: var(--sppl-accent-tint, var(--sppl-surface-soft));
    color: var(--sppl-accent-ink, var(--sppl-muted));
}

/* --------------------------------------------------------------- the card
   Colour arrives in three places and nowhere else: a 5px ribbon across the top,
   a tint behind the artwork, and the link at the foot. The body stays white and
   the text stays dark, which is what keeps a grid of six different colours
   reading as a catalogue rather than as a paint chart. */

.sppl_card--accent {
    border-top-left-radius: var(--sppl-radius);
    border-top-right-radius: var(--sppl-radius);
}

.sppl_card_ribbon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--sppl-accent, var(--sppl-green-600));
    z-index: 3;
}

/* The ribbon is positioned against the card, which is not itself positioned. */
.sppl_card--accent { position: relative; }

.sppl_card--accent .sppl_card_media { background: var(--sppl-accent-tint, var(--sppl-surface-soft)); }

/* The stand-in tile: the accent as a soft wash with the icon on it, rather than
   the same green gradient on every card. */
.sppl_card--accent .sppl_card_placeholder {
    background: linear-gradient(150deg,
        var(--sppl-accent-tint, rgba(47, 158, 47, .12)),
        rgba(255, 255, 255, .5));
    color: var(--sppl-accent, var(--sppl-green-600));
}

.sppl_card--accent:hover {
    box-shadow: 0 18px 40px -12px var(--sppl-accent, rgba(47, 158, 47, .4));
    border-color: var(--sppl-accent, var(--sppl-green-600));
}

.sppl_card--accent:hover .sppl_card_title a { color: var(--sppl-accent-ink, var(--sppl-green-700)); }

/* The link at the foot, in the card's own colour, with the arrow stepping
   forward on hover. */
.sppl_link--accent {
    color: var(--sppl-accent-ink, var(--sppl-green-700));
    font-weight: 600;
}

.sppl_link--accent i { transition: transform var(--sppl-t) var(--sppl-ease-out); }

.sppl_card:hover .sppl_link--accent i { transform: translateX(5px); }

/* ==========================================================================
   25. Product detail page
   ========================================================================== */

/* The hero: artwork on a tinted panel with the name and the facts beside it,
   under a ribbon in the product's category colour. */
.sppl_product_hero {
    position: relative;
    overflow: hidden;
    padding: 34px 30px 30px;
    background: var(--sppl-surface);
    border: 1px solid var(--sppl-line);
    border-radius: var(--sppl-radius-lg);
    box-shadow: var(--sppl-shadow-sm);
}

.sppl_product_hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 130px;
    background: linear-gradient(to bottom, var(--sppl-accent-tint, var(--sppl-surface-soft)), transparent);
    pointer-events: none;
}

.sppl_product_hero > * { position: relative; }

.sppl_product_ribbon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--sppl-accent, var(--sppl-green-600));
}

.sppl_product_media {
    background: var(--sppl-surface);
    border: 1px solid var(--sppl-line);
    border-radius: var(--sppl-radius);
    padding: 10px;
    box-shadow: var(--sppl-shadow-xs);
}

.sppl_product_media img { border-radius: var(--sppl-radius-sm); }

.sppl_product_title {
    margin: 8px 0 18px;
    font-size: 32px;
    line-height: 1.22;
    font-weight: 700;
}

/* Category and group, as labelled rows rather than a breadcrumb repeat. */
.sppl_product_facts {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: grid;
    gap: 8px;
}

.sppl_product_facts li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 14.5px;
}

.sppl_product_facts span {
    flex: 0 0 76px;
    color: var(--sppl-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sppl_product_facts a {
    color: var(--sppl-accent-ink, var(--sppl-green-700));
    font-weight: 600;
}

.sppl_product_actions { margin: 0; }

/* The description, in its own panel with a heading, rather than prose loose on
   the page under the artwork. */
.sppl_product_body {
    margin-top: 30px;
    padding: 30px;
    background: var(--sppl-surface);
    border: 1px solid var(--sppl-line);
    border-radius: var(--sppl-radius-lg);
    box-shadow: var(--sppl-shadow-xs);
}

.sppl_product_body_title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-size: 20px;
}

.sppl_product_body_title::before {
    content: "";
    width: 4px;
    height: 20px;
    border-radius: var(--sppl-radius-pill);
    background: var(--sppl-accent, var(--sppl-green-600));
}

/* ==========================================================================
   26. Sidebar panels + the article hero
   ========================================================================== */

.sppl_sidebar_card {
    position: relative;
    overflow: hidden;
    padding: 24px 22px;
    background: var(--sppl-surface);
    border: 1px solid var(--sppl-line);
    border-radius: var(--sppl-radius);
    box-shadow: var(--sppl-shadow-xs);
}

.sppl_sidebar_card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--sppl-accent, var(--sppl-green-600));
}

.sppl_sidebar_title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sppl-line-soft);
    font-size: 17px;
}

.sppl_sidebar_item img { border: 1px solid var(--sppl-line); }

/* A tile for an item with no picture, where the old markup simply left a gap
   and the title jumped left to fill it. */
.sppl_sidebar_thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border-radius: var(--sppl-radius-sm);
    background: var(--sppl-accent-tint, var(--sppl-surface-soft));
    color: var(--sppl-accent, var(--sppl-green-600));
    font-size: 20px;
}

.sppl_sidebar_item h3 {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 600;
}

.sppl_sidebar_item h3 a { color: var(--sppl-ink); }

.sppl_sidebar_item:hover h3 a { color: var(--sppl-accent-ink, var(--sppl-green-700)); }

.sppl_sidebar_item:hover img { border-color: var(--sppl-accent, var(--sppl-green-600)); }

.sppl_side_more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: var(--sppl-accent-ink, var(--sppl-green-700));
    font-size: 14px;
    font-weight: 600;
}

.sppl_side_more i { transition: transform var(--sppl-t) var(--sppl-ease-out); }

.sppl_side_more:hover i { transform: translateX(5px); }

/* The product categories, listed as pills with their counts. Each row carries
   its own accent, so the panel itself is the colour chart. */
.sppl_side_cats {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.sppl_side_cats a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--sppl-radius-sm);
    background: var(--sppl-accent-tint, var(--sppl-surface-soft));
    border-left: 3px solid var(--sppl-accent, var(--sppl-green-600));
    color: var(--sppl-accent-ink, var(--sppl-ink));
    font-size: 14px;
    font-weight: 600;
    transition: transform var(--sppl-t-fast) var(--sppl-ease-out),
                box-shadow var(--sppl-t-fast) var(--sppl-ease-out);
}

.sppl_side_cats a:hover {
    transform: translateX(3px);
    box-shadow: var(--sppl-shadow-xs);
}

.sppl_side_cat_count {
    flex: 0 0 auto;
    min-width: 26px;
    padding: 2px 8px;
    border-radius: var(--sppl-radius-pill);
    background: rgba(255, 255, 255, .75);
    color: var(--sppl-accent-ink, var(--sppl-muted));
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

/* The lead image on a blog post. */
.sppl_article_hero {
    width: 100%;
    height: auto;
    border-radius: var(--sppl-radius-lg);
    box-shadow: var(--sppl-shadow);
}

@media (max-width: 767px) {
    .sppl_product_hero { padding: 24px 18px 22px; }
    .sppl_product_title { font-size: 25px; margin-bottom: 14px; }
    .sppl_product_body { padding: 22px 18px; }
    .sppl_product_facts span { flex-basis: 66px; }

    /* The sidebar sits under the article on a phone, so the first panel needs
       the gap the column boundary used to provide. Only the first: the panels
       already space themselves apart. */
    .sppl_sidebar_card:first-child { margin-top: 30px; }
}

/* ------------------------------------------------------------- the founder
   A centred portrait inside a brand ring, the name and role beneath it, then
   the note. The ring is the wrapper's own background, so the frame and the
   photograph are always the same shape whatever ratio the upload arrives in. */

.sppl_founder_body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6px 0 2px;
}

.sppl_founder_photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    padding: 3px;
    border-radius: 50%;
    background: var(--sppl-grad-brand);
    box-shadow: var(--sppl-shadow-sm);
}

.sppl_founder_photo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    /* Portraits are around 3:4; a centred crop takes the top of the head off. */
    object-position: center 18%;
    background: var(--sppl-surface-soft);
}

.sppl_founder_photo i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--sppl-surface-soft);
    color: var(--sppl-muted);
    font-size: 34px;
}

.sppl_founder_name {
    margin: 14px 0 3px;
    font-size: 16px;
    font-weight: 700;
    color: var(--sppl-ink);
}

.sppl_founder_role {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--sppl-muted);
}

.sppl_founder_note {
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--sppl-line-soft);
    font-size: 14px;
    line-height: 1.7;
    color: var(--sppl-body);
}

/* The link back up to the parent category, on a group listing. */
.sppl_accent_back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sppl-accent-ink, var(--sppl-green-700));
    font-size: 13.5px;
    font-weight: 600;
}

.sppl_accent_back i { transition: transform var(--sppl-t) var(--sppl-ease-out); }

.sppl_accent_back:hover i { transform: translateX(-4px); }