/* ===================================================================
   Donation Tablet — landing page styles
   Palette taken from the original site's design tokens.
   =================================================================== */
:root {
    --navy: #001A6C;
    --navy-deep: #0D2674;
    --navy-2: #001152;
    --heading: #040F30;
    --pink: #E83155;
    --peach: #FFDFB9;
    --blue: #1A327B;
    --accent-blue: #0085F2;
    --green: #24AF29;
    --body-text: #5b6072;
    --muted-light: #c9d2f0;
    --page-bg: #ffffff;
    --gradient-pink: linear-gradient(95deg, #E83155 0%, #FF9A76 60%, #FFDFB9 100%);
    --shadow-card: 0 25px 60px rgba(4, 15, 48, 0.08);
    --radius: 18px;
    --container: 1440px;
    --font-head: 'Poppins', system-ui, sans-serif;
    --font-body: 'Poppins', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 16px; overflow-x: hidden; }

/* grid/flex items may shrink below their content's intrinsic size (prevents mobile overflow) */
.row > * { min-width: 0; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--body-text);
    background: var(--page-bg);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }

a { text-decoration: none; color: inherit; }

h1, h2, h3, h4 {
    font-family: var(--font-head);
    color: var(--heading);
    line-height: 1.15;
    margin: 0;
}

.container, .container-fluid {
    width: 100%;
    max-width: var(--container);
    margin-right: auto;
    margin-left: auto;
    padding-right: clamp(20px, 3.2vw, 46px);
    padding-left: clamp(20px, 3.2vw, 46px);
}

/* ---------- Bootstrap integration overrides ----------
   Bootstrap provides layout (grid/navbar/forms); these keep the brand look on top. */
.navbar { padding: 0; }
.main-nav .nav-link { padding: 0; }
.navbar-toggler:focus, .navbar-toggler:active { box-shadow: none; outline: none; }
.btn:focus, .btn:active { box-shadow: none; outline: none; }
.contact-form .form-control:focus { box-shadow: none; }

.section { padding: 90px 0; }

.section--navy {
    margin: 0 35px;
    border-radius: 26px;
    background: radial-gradient(circle at 15% 0%, var(--navy-deep), var(--navy) 45%, var(--navy-2) 100%);
}

/* ---------- shared bits ---------- */
.eyebrow {
    font-family: var(--font-head);
    font-weight: 600;
    letter-spacing: .03em;
    margin: 0 0 14px;
    font-size: 1rem;
    text-transform: capitalize;
}
.eyebrow--pink {
    color: var(--pink);                 /* fallback */
    background: var(--gradient-pink);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;              /* shrink to text, follow parent alignment */
}

.section-title { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; }
.section-head { margin-bottom: 55px; }
.section-head--center { text-align: center; max-width: 780px; margin-left: auto; margin-right: auto; }
.section-head__lead { margin-top: 20px; }

.body-text { color: var(--body-text); margin: 0 0 18px; font-size: 1rem; }

.text-white { color: #fff; }
.text-navy { color: var(--navy); }
.text-pinkish { color: var(--pink); }

/* ---------- buttons ---------- */
.btn {
    display: inline-block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .95rem;
    border: none;
    border-radius: 40px;
    padding: 15px 34px;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
    text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn--gradient { background: var(--gradient-pink); color: #fff; box-shadow: 0 12px 26px rgba(232, 49, 85, .35); }
.btn--blue { background: linear-gradient(95deg, #003a90 0%, #0085f2 100%); color: #fff; box-shadow: 0 12px 26px rgba(0, 90, 188, .35); }
.btn--lg { padding: 17px 44px; font-size: 1.05rem; }

/* ---- button hover states ---- */
/* Navbar "Get In Touch" → white on hover */
.nav-cta:hover { background: #fff; color: var(--pink); box-shadow: 0 10px 24px rgba(4, 15, 48, .14); }
/* Hero "Get In Touch" (blue) → peach-pink gradient on hover */
.btn--blue:hover { background: var(--gradient-pink); color: #fff; box-shadow: 0 12px 26px rgba(232, 49, 85, .35); }
/* CTA banner "Get Started Today" → white on hover */
.cta-banner .btn:hover { background: #fff; color: var(--pink); box-shadow: 0 12px 26px rgba(4, 15, 48, .18); }
/* Contact form "Send Us" → navy-blue gradient on hover */
.contact-form__submit:hover { background: linear-gradient(95deg, #003a90 0%, #0085f2 100%); color: #fff; box-shadow: 0 12px 26px rgba(0, 90, 188, .38); }

/* ===================================================================
   HEADER
   =================================================================== */
.site-header {
    position: static;          /* not sticky / not fixed — scrolls with the page */
    z-index: 100;
    margin-top: 34px;          /* white gap above the navbar */
    background: #f5f4fe;        /* same lavender as the hero top */
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 82px;
    gap: 24px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand__logo { height: 46px; width: auto; }
.brand__name { font-family: var(--font-head); line-height: 1; display: flex; flex-direction: column; color: var(--heading); }
.brand__name strong { font-weight: 700; font-size: 1.2rem; letter-spacing: .01em; }
.brand__name span { font-weight: 500; font-size: 1rem; letter-spacing: .14em; }

.main-nav { align-items: center; }
.main-nav .navbar-nav { gap: 40px; }
.main-nav .nav-link {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--navy);
    font-size: .98rem;
    transition: color .2s ease;
}
.main-nav .nav-link:hover { color: var(--pink); }
.main-nav .nav-link.is-active {
    background: var(--gradient-pink);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nav-cta { flex-shrink: 0; padding: 9px 24px; font-size: .86rem; }

.nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
}
.nav-toggle span { width: 26px; height: 3px; background: var(--navy); border-radius: 3px; transition: .3s; }

/* ===================================================================
   HERO
   =================================================================== */
.hero {
    padding: 55px 0 100px;
    background: linear-gradient(180deg, #f5f4fe 0%, #f7f6fe 42%, #fbfbff 68%, #ffffff 88%);
}
.hero__title { font-size: clamp(1.85rem, 4.7vw, 4.4rem); font-weight: 800; line-height: 1.1; margin-bottom: 24px; }
.hero__title span { font-weight: 400; font-size: 0.86em; display: block; }
.hero__lead { max-width: 460px; margin-bottom: 32px; }

.hero__gallery img { width: 100%; border-radius: 10px; }

/* ===================================================================
   HOW IT WORKS
   =================================================================== */
.step {
    text-align: center;
    max-width: 360px;
    padding: 22px 18px 30px;
    border-radius: 14px;
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.step:hover {
    background: linear-gradient(137deg, #E83155 0%, #FFDFB9 100%);
    transform: translateY(-6px);
    box-shadow: 0 30px 55px rgba(232, 49, 85, .28);
}
.step__phone { display: flex; justify-content: center; margin-bottom: 24px; }
.step__phone img { max-height: 490px; width: auto; border-radius: 10px; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .3)); }
.step__title { color: #fff; font-size: 1.5rem; font-weight: 700; margin-bottom: 12px; }
.step__desc { color: var(--muted-light); font-size: .95rem; max-width: 320px; margin: 0 auto; }
.step:hover .step__title { color: #fff; }
.step:hover .step__desc { color: #fff; }

/* ===================================================================
   ABOUT
   =================================================================== */
.about__media img { height: 600px; width: auto; max-width: 100%; margin: 0 auto; }
.about__copy .section-title { font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: 22px; }
.about__copy .section-title span { display: block; font-weight: 500; color: var(--heading); }
.about__copy .body-text { font-size: 1.05rem; }

/* ===================================================================
   PRICING
   =================================================================== */
.pricing .section-head .section-title { margin-bottom: 26px; font-weight: 600; }
.pricing .section-head__lead { color: var(--muted-light); }
.plan {
    background: var(--navy-deep);
    border-radius: var(--radius);
    padding: 34px 26px;
    color: #fff;
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}
.plan:hover { transform: translateY(-14px); box-shadow: 0 35px 70px rgba(0, 0, 0, .3); }
.plan:hover .plan__cta {
    background: linear-gradient(95deg, #003a90 0%, #0085f2 100%);
    box-shadow: 0 12px 26px rgba(0, 90, 188, .4);
}
.plan__label { font-family: var(--font-head); font-weight: 700; font-size: .74rem; letter-spacing: .07em; color: #fff; margin: 0 0 12px; }
.plan__title {
    color: #fff; margin-bottom: 6px; min-height: 96px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.plan__title-main { font-size: 1.35rem; font-weight: 700; line-height: 1.25; }
.plan__subtitle { font-size: .82rem; font-weight: 400; color: var(--muted-light); margin-top: 4px; }
.plan__title::after {
    content: ""; width: 72px; height: 2px; background: rgba(255, 255, 255, .22);
    border-radius: 2px; margin: 18px auto 0;
}
.plan__note { font-size: .8rem; font-weight: 500; color: var(--muted-light); }
.plan__features { list-style: none; padding: 20px 0 0; margin: 0 0 26px; text-align: left; flex-grow: 1; }
.plan__features li {
    position: relative; padding: 1px 0 13px 32px; margin-bottom: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    font-size: .86rem; color: #e7ecff; line-height: 1.5;
}
.plan__features li::before {
    content: "";
    position: absolute;
    left: 0; top: 1px;
    width: 21px; height: 21px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6b4dd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='M22 4L12 14.01l-3-3'/%3E%3C/svg%3E") no-repeat center / contain;
}
.plan__cta { align-self: center; }
.plan__trial { font-size: .8rem; color: var(--muted-light); margin: 14px 0 0; }
.pricing__guarantee { text-align: center; margin-top: 46px; font-family: var(--font-head); font-weight: 500; font-size: .95rem; color: #7b88b3; letter-spacing: .04em; }
.pricing__guarantee-num { color: #4affc7; font-weight: 700; }

/* ===================================================================
   WHY CHOOSE US
   =================================================================== */
.why__copy .section-title { font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: 22px; }
.why__copy .section-title span { display: block; font-weight: 400; color: var(--heading); }
.why__list { list-style: none; padding: 0; margin: 0 0 34px; }
.why__list li { position: relative; padding-left: 30px; margin-bottom: 16px; font-weight: 600; color: #6c7388; }
.why__list li::before { content: "✔"; position: absolute; left: 0; color: #6c7388; font-weight: 700; }
.why__copy .btn { padding: 13px 28px; font-size: .9rem; }
.why__media img { height: 600px; width: auto; max-width: 100%; margin: 0 auto; }

/* ===================================================================
   TESTIMONIALS
   =================================================================== */
.testimonials { margin-bottom: 46px; }
.testimonial {
    background: #0a2066;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
}
.testimonial__bubble {
    position: relative;
    background: #12357f;
    border-radius: 18px;
    padding: 30px 32px;
    margin-bottom: 42px;
    transition: background .3s ease;
}
.testimonial__bubble::after {
    content: "";
    position: absolute;
    left: 32px; bottom: -16px;
    width: 0; height: 0;
    border-top: 16px solid #12357f;
    border-right: 18px solid transparent;
    transition: border-color .3s ease;
}
.testimonial__quote { color: #e6ecff; font-size: 1rem; line-height: 1.65; margin: 0; transition: color .3s ease; }
.testimonial:hover .testimonial__bubble { background: linear-gradient(137deg, #E83155 0%, #FFDFB9 100%); }
.testimonial:hover .testimonial__bubble::after { border-top-color: #ee5266; }
.testimonial:hover .testimonial__quote { color: #fff; }
.testimonial__person { display: flex; align-items: center; gap: 14px; padding: 0 30px 30px; margin-top: auto; }
.testimonial__avatar { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; background: #fff; flex-shrink: 0; }
.testimonial__name { color: #fff; font-family: var(--font-head); font-weight: 700; margin: 0; font-size: 1.18rem; }
.testimonial__role { color: var(--muted-light); margin: 3px 0 0; font-size: .88rem; }

/* ===================================================================
   CTA BANNER
   =================================================================== */
.cta-banner {
    position: relative;
    overflow: hidden;
    margin: 0 35px;
    border-radius: 26px;
    background: radial-gradient(circle at 20% 0%, var(--navy-deep), var(--navy) 60%, var(--navy-2) 100%);
    padding: 72px 0;
}
.cta-banner::before {
    content: "";
    position: absolute;
    left: -70px; bottom: -180px;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: rgba(120, 140, 255, 0.08);
}
.cta-banner::after {
    content: "";
    position: absolute;
    right: -170px; top: 50%;
    width: 540px; height: 540px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: repeating-radial-gradient(circle at center, transparent 0 86px, rgba(255, 255, 255, .05) 86px 88px);
}
.cta-banner__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding-left: clamp(0px, 7vw, 100px); padding-right: clamp(0px, 3vw, 40px); }
.cta-banner .btn { padding: 12px 28px; font-size: .85rem; }
.cta-banner__title { color: #fff; font-size: clamp(1.7rem, 3.1vw, 2.5rem); font-weight: 700; }
.cta-banner__title span {
    display: block;
    width: fit-content;
    font-weight: 500;
    background: var(--gradient-pink);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer { background: #ffffff; color: #6c7388; padding-top: 72px; }
.brand--footer { margin-bottom: 4px; }
.brand--footer .brand__logo { height: 50px; }
.footer__grid { padding-bottom: 50px; }
.footer__text { margin-top: 22px; font-size: .95rem; max-width: 380px; color: #6c7388; line-height: 1.75; }
.footer__social { display: flex; gap: 14px; margin-top: 28px; }
.footer__social a {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid #d0d4e4; color: var(--navy);
    display: flex; align-items: center; justify-content: center;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.footer__social a:hover { background: var(--gradient-pink); border-color: transparent; color: #fff; }
.footer__social svg { width: 18px; height: 18px; }
.footer__links h4, .footer__contact h4 { color: var(--navy); font-family: var(--font-head); font-weight: 700; margin: 0 0 22px; font-size: 1.15rem; }
.footer__links ul, .footer__contact ul { list-style: none; padding: 0; margin: 0; }
.footer__links li { margin-bottom: 15px; font-size: .95rem; }
.footer__links a { color: #858ca0; }
.footer__links a:hover { color: var(--pink); }
.footer__contact li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; font-size: .95rem; color: #858ca0; }
.footer__contact svg { width: 18px; height: 18px; color: #9199ab; flex-shrink: 0; margin-top: 2px; }
.footer__contact a { color: #858ca0; }
.footer__contact a:hover { color: var(--pink); }
.footer__bar { background: #040f30; padding: 27px 0; }
.footer__bar-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: .88rem; color: #828798; }
.footer__bar-inner a { color: #828798; }
.footer__bar-inner a:hover { color: #fff; }

/* ===================================================================
   CONTACT PAGE
   =================================================================== */
.contact-hero { position: relative; overflow: hidden; padding: 70px 0 80px; }
.contact-hero .section-head { margin-bottom: 90px; }
.contact-hero__title { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 700; }
.contact-hero::before {
    content: ""; position: absolute; left: -50px; bottom: -140px;
    width: 360px; height: 360px; border-radius: 50%; background: rgba(255, 255, 255, .035);
}
.contact-hero::after {
    content: ""; position: absolute; right: -150px; top: -170px;
    width: 500px; height: 500px; border-radius: 50%; background: rgba(255, 255, 255, .035);
}
.contact-info { position: relative; z-index: 1; }
.contact-info__item {
    display: flex; align-items: center; gap: 18px; padding: 20px 22px;
    border-radius: 16px; transition: background .3s ease;
}
.contact-info__item:hover { background: linear-gradient(137deg, #E83155 0%, #FFDFB9 100%); }
.contact-info__icon {
    width: 66px; height: 66px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--pink); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
    transition: color .3s ease, background .3s ease, border-color .3s ease;
}
.contact-info__item:hover .contact-info__icon { color: #fff; background: rgba(255, 255, 255, .22); border-color: transparent; }
.contact-info__icon svg { width: 26px; height: 26px; }
.contact-info__item h4 { font-family: var(--font-head); font-weight: 700; color: #fff; font-size: 1.1rem; margin: 0 0 6px; }
.contact-info__item a { color: var(--muted-light); font-size: .92rem; line-height: 1.55; }
.contact-info__item a:hover { color: #fff; }
.contact-info__item:hover h4, .contact-info__item:hover a { color: #fff; }

/* lavender band that wraps the navy "Reach Out" hero on the contact page */
.contact-top { background: #f5f4fe; padding: 34px 0 56px; }

.contact-form-section { padding: 60px 0 90px; }
.contact-form__title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 700; margin-bottom: 34px; }
.contact-form__title span { display: block; font-weight: 400; color: #3d476a; }
.contact-form .field { margin-bottom: 20px; }
.contact-form input, .contact-form textarea {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 17px 20px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--heading);
    background: #eef0f6;
    transition: border-color .2s ease, background .2s ease;
}
.contact-form input:focus, .contact-form textarea:focus {
    outline: none; border-color: var(--pink); background: #fff;
}
.contact-form textarea { resize: vertical; min-height: 170px; }
.contact-form ::placeholder { color: #9aa0b3; }
.contact-form__actions { text-align: right; margin-top: 6px; }
.contact-form__submit { padding: 13px 36px; }
.field-error { display: block; color: var(--pink); font-size: .85rem; margin-top: 7px; }
.form-success {
    background: rgba(36, 175, 41, .1); color: #1a7d20; border: 1px solid rgba(36, 175, 41, .3);
    border-radius: 8px; padding: 15px 20px; margin-bottom: 26px; font-weight: 500;
}
.form-alert { color: var(--pink); font-weight: 500; margin-bottom: 20px; }
.form-alert ul { margin: 0; padding-left: 18px; }
.form-alert:empty { display: none; }
.contact-form__map {
    border-radius: 14px; overflow: hidden; min-height: 480px;
    box-shadow: var(--shadow-card); background: #eef0f6;
}
.contact-form__map iframe { width: 100%; height: 100%; min-height: 480px; border: 0; display: block; }

/* ---------- back to top ---------- */
.back-to-top {
    position: fixed;
    right: 24px; bottom: 24px;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #ffffff;
    color: #444444;
    border: 1px solid #d3d3dd;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .12);
    opacity: 0; visibility: hidden;
    transform: translateY(12px);
    transition: .3s ease;
    z-index: 90;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
/* Bootstrap handles the responsive grid (row/col); these are brand-specific tweaks only. */
@media (max-width: 991.98px) {
    .section { padding: 64px 0; }
    .contact-form__map { min-height: 340px; }
    .plan--featured { transform: none; }

    /* Collapsed Bootstrap navbar panel */
    .main-nav.navbar-collapse {
        background: #fff;
        padding: 18px 4px 24px;
        margin-top: 10px;
        border-radius: 12px;
        box-shadow: 0 20px 40px rgba(4, 15, 48, .12);
    }
    .main-nav .navbar-nav { gap: 4px; }
    .main-nav .nav-item { width: 100%; border-bottom: 1px solid #eef0f7; }
    .nav-cta { width: 100%; margin-top: 14px; }
}

@media (max-width: 660px) {
    /* 100vw-based cap guarantees equal side margins even if something forces a sub-page overflow. */
    .section--navy, .cta-banner {
        margin-left: 14px; margin-right: 14px;
        max-width: calc(100vw - 28px);
        border-radius: 18px;
    }
    .cta-banner { margin-top: 46px; }
    .cta-banner__inner { flex-direction: column; text-align: center; align-items: center; gap: 22px; padding-left: 0; padding-right: 0; }
    /* fit-content span (gradient text) must be centred explicitly on mobile */
    .cta-banner__title span { margin-left: auto; margin-right: auto; }
    .hero__lead { max-width: none; }
    .hero__title { font-size: clamp(1.7rem, 8vw, 2.4rem); }
    .step__phone img { max-height: 300px; }
}

/* ===================================================================
   DONATION HUB PAGE (donationhub.uk replica)
   Palette: navy #0d2d4d / #082440, orange #f25621, blue #378cd7, yellow #ffc400
   =================================================================== */
.page-hub { background: #17395b; color: #cfd8e6; }
/* transparent, not #17395b: the body already paints that exact navy, and an opaque
   header would cut a visible seam across page artwork that bleeds up behind it.
   z-index keeps the nav above any such artwork. */
.hub-header { background: transparent; padding: 10px 0; position: relative; z-index: 2; }
.hub-header__inner { min-height: 76px; }
.hub-logo { height: 60px; width: auto; }
.hub-nav .navbar-nav { gap: 36px; }
.hub-nav .nav-link {
    font-family: var(--font-head); font-weight: 400; font-size: 1.12rem;
    color: #ffffff; padding: 0; position: relative; transition: color .2s ease;
}
.hub-nav .nav-link:hover { color: #f25621; }
/* active item shows the orange chevrons (moves with whatever you click) */
.hub-nav .nav-link.is-active { font-weight: 700; color: #fff; padding-left: 42px; }
.hub-nav .nav-link.is-active::before {
    content: "\00bb\00bb"; position: absolute; left: 0; top: 50%; transform: translateY(-52%);
    color: #f25621; font-weight: 700; letter-spacing: -4px; font-size: 1.7rem;
}

.hub-btn { border-radius: 40px; font-family: var(--font-head); font-weight: 600; font-size: .92rem; padding: 12px 32px; border: none; color: #fff; }
.hub-btn--signup { background: linear-gradient(95deg, #378cd7 0%, #f25621 100%); padding: 13px 38px; font-size: 1rem; letter-spacing: .02em; }
.hub-btn--signup:hover { background: #fff; color: #f25621; }
.hub-btn--primary { background: linear-gradient(95deg, #378cd7 0%, #f25621 100%); letter-spacing: .05em; padding: 14px 34px; font-size: 1rem; }
.hub-btn--primary:hover { background: #fff; color: #f25621; }
.hub-btn--teal { background: #00c4cc; color: #000; font-weight: 700; font-size: 1.12rem; padding: 18px 46px; }
.hub-btn--teal:hover { background: #fff; color: #000; }

/* ---- hero ---- */
.hub-hero { background: #17395b; padding: 20px 0 60px; }
.hub-hero__title { font-family: var(--font-head); font-weight: 800; color: #fff; font-size: clamp(1.9rem, 3.3vw, 2.9rem); line-height: 1.45; letter-spacing: .01em; margin-bottom: 40px; }
.hub-accent { color: #f5a623; }
.hub-hero__lead { color: #d7dfea; font-size: 1.02rem; max-width: 470px; margin-bottom: 44px; line-height: 1.75; }
.hub-hero .carousel-indicators { display: none; }   /* no scroll dots */

/* Hero slides cross-fade instead of sliding, so the two product shots never
   overlap mid-flight. 2s on screen, 0.8s to fade. */
.hub-hero .carousel-item { transition-duration: .8s; transition-timing-function: ease-in-out; }
.hub-hero .active.carousel-item-start,
.hub-hero .active.carousel-item-end { transition: opacity 0s .8s; }
/* honour the OS "reduce motion" setting: swap instantly rather than animating */
@media (prefers-reduced-motion: reduce) {
    .hub-hero .carousel-item { transition-duration: 0s; }
    .hub-hero .active.carousel-item-start,
    .hub-hero .active.carousel-item-end { transition: none; }
}

/* ---- shared section bits ---- */
.hub-section { padding: 70px 0; }
.hub-eyebrow { display: flex; align-items: center; gap: 10px; color: #ffffff; font-weight: 700; font-size: .95rem; margin-bottom: 14px; }
/* three orange chevrons, as on the original (glyph-free so it can't shift with fonts) */
.hub-eyebrow__bars {
    display: inline-block; width: 24px; height: 14px; flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cg fill='none' stroke='%23f1561f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2.8 6.2 7 2 11.2'/%3E%3Cpath d='M9 2.8 13.2 7 9 11.2'/%3E%3Cpath d='M16 2.8 20.2 7 16 11.2'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
.hub-title { font-family: var(--font-head); font-weight: 700; color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.3; margin-bottom: 18px; }
.hub-title--sm { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.hub-text { color: #c2cddc; font-size: .97rem; line-height: 1.85; margin-bottom: 26px; }
.hub-text--center { max-width: 760px; margin-left: auto; margin-right: auto; }
.hub-why__img { max-width: 330px; }

/* ---- reviews ----
   Layer order matches the original: the gradient burst sits BEHIND the card, so
   only its left half shows; the avatar sits IN FRONT, straddling the card edge.
   Sizes/colours measured off the live site: burst 244px, avatar 162px (concentric),
   card edge at the burst's centre line. */
.hub-review { position: relative; padding-left: 122px; }
.hub-review__burst {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 244px; height: auto; z-index: 0; pointer-events: none;
}
.hub-review__avatar {
    position: absolute; left: 41px; top: 50%; transform: translateY(-50%);
    width: 162px; height: 162px; border-radius: 50%;
    object-fit: cover; object-position: center top; background: #dfe3e8; z-index: 2;
}
.hub-review__body {
    position: relative; z-index: 1; min-height: 292px;
    background: #082440; border-radius: 28px;
    padding: 34px 40px 34px 139px;
    display: flex; flex-direction: column; justify-content: center;
}
.hub-review__title { color: #fff; font-size: 1.35rem; font-weight: 700; margin-bottom: 12px; }
.hub-review__text { color: #fff; font-size: .97rem; line-height: 1.75; margin-bottom: 16px; }
.hub-review__name {
    display: flex; align-items: center; gap: 56px;
    color: #ffc400; font-weight: 700; font-size: 1.05rem; margin: 0;
}
.hub-review__stars { color: #ffc400; font-size: 1.5rem; line-height: 1; letter-spacing: 1px; }
.hub-review__nav { display: flex; gap: 13px; margin-top: 34px; }
/* both arrows share one vertical orange→blue gradient, as on the original */
.hub-review__arrow {
    width: 50px; height: 50px; border-radius: 50%; border: none; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: linear-gradient(180deg, #f04712 0%, #378cd7 100%);
    transition: filter .2s ease, transform .2s ease;
}
.hub-review__arrow svg { width: 16px; height: 16px; }
.hub-review__arrow:hover { filter: brightness(1.12); transform: translateY(-2px); }

/* ---- cards (benefits / features / use cases) ---- */
.hub-card {
    position: relative; overflow: hidden; isolation: isolate;
    background: #0a1f38; border-radius: 16px; padding: 34px 28px;
    text-align: left; display: flex; flex-direction: column;
    transition: transform .35s ease, box-shadow .35s ease;
}
/* real site blob image, fades in on hover */
.hub-card::before {
    content: ""; position: absolute; z-index: -1;
    left: -12%; bottom: -18%; width: 118%; height: 118%;
    background: url("../images/hub/card-blob.png") no-repeat center / contain;
    opacity: 0; transform: scale(.88); transition: opacity .45s ease, transform .55s ease;
}
.hub-card:hover::before { opacity: 1; transform: scale(1); }
.hub-card:hover { transform: translateY(-8px); box-shadow: 0 26px 55px rgba(0,0,0,.45); }
.hub-card__icon { width: 46px; height: auto; margin-bottom: 20px; }
.hub-card__title { color: #fff; font-size: 1.15rem; font-weight: 700; margin-bottom: 12px; }
.hub-card__text { color: #b6c3d4; font-size: .9rem; line-height: 1.75; flex-grow: 1; margin-bottom: 18px; }
.hub-card__link { margin-top: auto; color: #ffc400; font-weight: 600; font-size: .88rem; }
.hub-card__link:hover { color: #fff; }

/* ---- features page ----
   Card face + type scale measured off donationhub.uk/features/. The blob is the
   same .hub-card hover treatment, so the grid picks it up for free. */
.hub-card--feature { background: #082440; border-radius: 24px; padding: 38px 30px 32px; height: 100%; }
.hub-card--feature .hub-card__icon { width: 44px; margin-bottom: 28px; }
.hub-card--feature .hub-card__title { font-size: 1.4rem; font-weight: 500; line-height: 1.25; margin-bottom: 14px; }
.hub-card__sub { color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .01em; margin: 0 0 16px; }
.hub-card--feature .hub-card__text { color: #fff; font-size: .95rem; line-height: 1.6; margin-bottom: 22px; }
.hub-card--feature .hub-card__link { display: inline-flex; align-items: center; gap: 14px; font-size: .95rem; }
.hub-card--feature .hub-card__link svg { width: 26px; height: 12px; }

/* ---- fingertips ----
   Measured off the reference artwork (1366x768): no card, the section sits flush on
   the page navy, with a soft blue glow behind the handset. */
.hub-fingertips { overflow: hidden; }   /* the glow must never widen the page */
.hub-fingertips__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.hub-fingertips__brand img { height: 62px; width: auto; }
.hub-fingertips__brand span { color: #fff; font-weight: 700; letter-spacing: .17em; font-size: clamp(1rem, 1.6vw, 1.3rem); }
.hub-fingertips__title {
    font-family: var(--font-head); color: #fff; font-weight: 800;
    font-size: clamp(2rem, 4.6vw, 3.7rem); line-height: 1.18; margin: 0 0 26px;
}
.hub-fingertips__list { list-style: none; padding: 0; margin: 0 0 34px; }
.hub-fingertips__list li {
    color: #fff; font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.28rem);
    margin-bottom: 11px; padding-left: 27px; position: relative;
}
.hub-fingertips__list li::before {
    content: ""; position: absolute; left: 5px; top: .62em;
    width: 7px; height: 7px; border-radius: 50%; background: #fff;
}
/* the artwork is phone + store badges; the handset sits 62.5% across it, so the
   glow is centred on that point rather than on the image's own centre */
.hub-fingertips__stage { position: relative; width: min(408px, 100%); margin-inline: auto; }
.hub-fingertips__stage::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    left: 62.5%; top: 50%; transform: translate(-50%, -50%);
    width: 155%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle,
        rgba(30, 139, 207, .55) 0%, rgba(30, 139, 207, .30) 38%,
        rgba(30, 139, 207, .10) 58%, rgba(30, 139, 207, 0) 72%);
}
.hub-fingertips__phone { position: relative; z-index: 1; display: block; width: 100%; height: auto; }

/* ---- video / badges / next steps ---- */
.hub-video img { border-radius: 16px; }
.hub-badges { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hub-badges img { height: 48px; width: auto; }
.hub-next__logo { height: 74px; width: auto; margin-bottom: 22px; }
.hub-next__title {
    font-family: var(--font-head); color: #fff; font-weight: 800;
    font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.18; margin: 0 0 22px;
}
.hub-next__lead { font-size: .95rem; line-height: 1.7; margin-bottom: 30px; }
/* fill the column so the photo's right edge lines up with the footer rule below it */
.hub-next__img { width: 100%; height: auto; border-radius: 14px; }

/* ---- footer ---- */
/* ---- footer ---- (colours/rule measured off the live site) */
.hub-footer { background: #17395b; padding: 0 0 30px; color: #fff; }
.hub-footer__rule { height: 2px; background: #ff4100; margin-bottom: 46px; }
.hub-footer__main { align-items: flex-start; }
.hub-footer__line { display: flex; align-items: flex-start; gap: 12px; font-size: .95rem; line-height: 1.6; margin-bottom: 22px; max-width: 430px; }
.hub-footer__icon { width: 15px; height: 15px; flex-shrink: 0; margin-top: .35em; color: #ff4100; }
.hub-footer__line a:hover { color: #ff4100; }
.hub-footer__links li { margin-bottom: 18px; font-size: .86rem; letter-spacing: .06em; }
.hub-footer__links a:hover { color: #ff4100; }
.hub-footer__badges { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.hub-footer__badges img { width: 173px; height: auto; }

.hub-footer__meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin-top: 40px; }
.hub-footer__country { color: #ffc400; font-weight: 700; font-size: .95rem; margin: 0; }
.hub-footer__social { display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; }
.hub-footer__social svg { width: 18px; height: 18px; display: block; }
.hub-footer__social a { color: #fff; transition: color .2s ease; }
.hub-footer__social a:hover { color: #ff4100; }

.hub-footer__bar { margin-top: 34px; font-size: .84rem; }
.hub-footer__credit { color: #1bb0ce; }
.hub-footer__credit:hover { text-decoration: underline; }
.hub-footer__bar a:hover { color: #1bb0ce; }

@media (max-width: 991.98px) {
    .hub-nav.navbar-collapse { background: #12314f; padding: 16px; border-radius: 12px; margin-top: 12px; }
    .hub-nav .navbar-nav { gap: 8px; }
    .hub-btn--signup { width: 100%; margin-top: 14px; }
    .hub-hero__lead { max-width: none; }
    .hub-section { padding: 50px 0; }
    .hub-review__nav { margin-top: 26px; }
}

/* Tablets: shrink the burst/avatar so the card keeps a usable text column. */
@media (max-width: 767.98px) {
    .hub-review { padding-left: 84px; }
    .hub-review__burst { width: 168px; }
    .hub-review__avatar { left: 28px; width: 112px; height: 112px; }
    .hub-review__body { min-height: 0; padding: 28px 26px 28px 96px; border-radius: 22px; }
    .hub-review__name { gap: 20px; }
}

/* Phones: stack the burst above the card instead of straddling its edge. */
@media (max-width: 575.98px) {
    .hub-review { padding-left: 0; padding-top: 95px; }
    .hub-review__burst { left: 50%; top: 0; transform: translateX(-50%); width: 190px; }
    .hub-review__avatar { left: 50%; top: 32px; transform: translateX(-50%); width: 126px; height: 126px; }
    .hub-review__body { padding: 86px 22px 28px; text-align: center; }
    .hub-review__name { flex-direction: column; gap: 8px; }
}

/* ---- Why Choose: rounded panel + animated phone + star ---- */
.hub-why__panel { background: #12314f; border-radius: 22px; padding: 34px; display: flex; justify-content: center; }
/* app demo clip — same clip the pricing page uses. The clip has a wide margin around
   the handset, so it's scaled up and cropped back to the 250x500 footprint the
   hand-built mockup used, which puts the handset at its original size. */
.hub-why__phone {
    width: 250px; height: 500px; margin: 0 auto; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.hub-why__video { width: 517px; max-width: none; height: auto; flex: none; display: block; }

.hub-why__copy { position: relative; }
.hub-star { position: absolute; top: -104px; left: 45%; width: 78px; height: auto; }
.hub-why .hub-title { margin-bottom: 14px; }
.hub-why .hub-text { margin-bottom: 30px; }
@media (max-width: 991.98px) { .hub-star { top: -66px; left: 8px; width: 56px; } }

/* ---- Why-Choose animated phone (3 screens: amounts → payment → tap) ---- */
.hub-phone {
    position: relative; width: 250px; height: 500px; margin: 0 auto;
    background: #0b0b0b; border-radius: 34px; padding: 12px 10px;
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
.hub-phone__notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 78px; height: 7px; background: #2a2a2a; border-radius: 6px; }
.hub-phone__bar { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); width: 92px; height: 4px; background: #3a3a3a; border-radius: 4px; }
.hub-phone__screen { height: 100%; border-radius: 26px; overflow: hidden; }
.ps { height: 100%; display: flex; flex-direction: column; font-family: var(--font-head); }

/* screen 1 + 2 — yellow */
.ps--amounts, .ps--pay { background: linear-gradient(180deg,#fff9d9 0%,#ffd400 22%,#ffd400 100%); padding: 14px 12px 10px; }
.ps__top { display: flex; align-items: center; justify-content: space-between; }
.ps__menu { font-size: 1rem; color: #111; }
.ps__logo { width: 42px; height: auto; }
.ps__ready { font-size: .6rem; color: #1a9c34; }
.ps__org { text-align: center; font-size: .62rem; font-weight: 700; color: #111; margin: 2px 0 10px; }
.ps__label { font-size: .55rem; color: #111; margin: 0 0 3px; }
.ps__select { background: #111; color: #fff; font-size: .58rem; border-radius: 4px; padding: 5px 8px; display: flex; justify-content: space-between; margin-bottom: 12px; }
.ps__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.ps__grid span { background: #111; color: #fff; border-radius: 6px; padding: 12px 0; text-align: center; font-size: 1.05rem; font-weight: 700; }
.ps__grid i { display: block; font-size: .5rem; font-style: normal; font-weight: 400; text-align: left; margin-left: 8px; }
.ps__custom { margin-top: auto; background: #111; color: #fff; text-align: center; font-size: .6rem; border-radius: 5px; padding: 8px; }

/* screen 2 specifics */
.ps__cur { text-align: center; font-size: .7rem; color: #111; margin: 14px 0 2px; }
.ps__cur b { font-weight: 700; }
.ps__amt { text-align: center; font-size: 2.6rem; font-weight: 700; color: #111; margin: 0 0 14px; }
.ps__amt i { font-size: 1.1rem; font-style: normal; vertical-align: super; margin-right: 2px; }
.ps__keys { margin-top: auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }
.ps__keys span { background: #fff; color: #111; border-radius: 4px; padding: 8px 0; text-align: center; font-size: .72rem; }
.ps__keys .ok { color: #1a56d6; }

/* screen 3 — white tap-to-pay */
.ps--tap { background: #fff; align-items: center; padding: 26px 16px; position: relative; }
.ps__ttl { font-size: .6rem; color: #666; margin: 0; }
.ps__total { font-size: 1.9rem; font-weight: 700; color: #111; margin: 0 0 8px; }
.ps__cards { display: flex; gap: 6px; align-items: center; margin-bottom: 14px; }
.ps__cards b { font-size: .5rem; color: #1a1f71; font-weight: 800; }
.ps__cards em { width: 16px; height: 10px; background: linear-gradient(90deg,#eb001b 50%,#f79e1b 50%); border-radius: 2px; }
.ps__cards s { font-size: .45rem; color: #2e77bc; text-decoration: none; font-weight: 700; }
.ps__x { color: #111; font-size: 1rem; margin-bottom: 26px; }
.ps__nfc { width: 92px; height: 92px; border-radius: 50%; background: #5b4bd6; display: flex; align-items: center; justify-content: center; }
.ps__nfc svg { width: 42px; height: 42px; }
.ps__hold { font-size: .58rem; color: #444; margin-top: 14px; }

/* ---- staggered scroll reveal (cards appear one by one) ---- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- Fundraising banner (under Features) ---- */
.hub-banner { position: relative; display: block; margin: 0 auto; max-width: 1366px; }
.hub-banner__img { width: 100%; height: auto; display: block; border-radius: 16px; }
/* hotspot over the "Download the App" button painted into the artwork.
   Measured off fingertips.png (1366x768): x 77-416, y 596-659. */
.hub-banner__cta { position: absolute; left: 5.64%; top: 77.6%; width: 24.82%; height: 8.2%; border-radius: 40px; }
.hub-banner__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---- soft dark glow under the "SEE ALL USE CASES" button ---- */
#use-cases { position: relative; }
#use-cases::after {
    content: ""; position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%);
    width: min(1100px, 92%); height: 190px; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(3, 20, 40, .75) 0%, rgba(3, 20, 40, .38) 45%, transparent 72%);
    filter: blur(6px);
}

/* ---- How it works (video) ---- */
.hub-how__head { position: relative; padding-top: 26px; }
.hub-how__star { position: absolute; width: 46px; height: auto; opacity: .95; }
.hub-how__star--1 { top: -6px; right: 20%; width: 58px; }
.hub-how__star--2 { top: 54px; right: 34%; width: 34px; filter: grayscale(1) brightness(1.6); }
.hub-how__gear {
    position: absolute; top: 66px; right: 14%;
    width: 52px; height: 52px; border-radius: 50%; background: #ffc400;
    display: flex; align-items: center; justify-content: center;
}
.hub-how__gear svg { width: 26px; height: 26px; }
.hub-video { border-radius: 16px; overflow: hidden; box-shadow: 0 26px 60px rgba(0,0,0,.4); }
.hub-video iframe { border: 0; }

@media (max-width: 991.98px) {
    .hub-how__star--1 { right: 6%; width: 44px; }
    .hub-how__star--2 { right: 26%; width: 26px; }
    .hub-how__gear { right: 4%; width: 42px; height: 42px; }
}

/* ---- About dropdown (opens on hover, desktop) ---- */
.hub-drop { position: relative; }
.hub-drop__menu {
    background: #ffffff; border: none; border-radius: 4px; padding: 8px 0; min-width: 210px;
    box-shadow: 0 18px 40px rgba(0,0,0,.28); margin-top: 14px;
}
/* invisible bridge across the gap so the menu stays open while the pointer travels down */
.hub-drop::after {
    content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 20px;
    display: none;
}
@media (min-width: 992px) { .hub-drop:hover::after { display: block; } }
.hub-drop__menu .dropdown-item {
    color: #1d2b3a; font-size: .95rem; padding: 11px 22px; font-family: var(--font-head);
}
.hub-drop__menu .dropdown-item:hover { background: #f2f5f9; color: #f25621; }
.hub-drop .dropdown-toggle::after { display: none; }
@media (min-width: 992px) {
    /* keep it open on link hover, on the bridge, and on the menu itself */
    .hub-drop:hover > .dropdown-menu,
    .hub-drop__menu:hover,
    .hub-drop:focus-within > .dropdown-menu { display: block; }
}
/* orange chevrons on the hovered dropdown item (as on the live site) */
.hub-drop__menu .dropdown-item { position: relative; transition: color .2s ease, padding-left .2s ease; }
.hub-drop__menu .dropdown-item:hover { padding-left: 46px; }
.hub-drop__menu .dropdown-item::before {
    content: "\00bb\00bb"; position: absolute; left: 18px; top: 50%; transform: translateY(-52%);
    color: #f25621; font-weight: 700; font-size: 1.15rem; letter-spacing: -3px;
    opacity: 0; transition: opacity .2s ease;
}
.hub-drop__menu .dropdown-item:hover::before { opacity: 1; }

/* ---- FAQs page ---- */
.hub-faq-panel {
    background: #0e2b48; border-radius: 22px; padding: 34px;
    max-width: 900px; margin: 46px auto 0; text-align: left;
}
.hub-faq .accordion-item {
    background: transparent; border: 1px solid #2a5580; border-radius: 10px; margin-bottom: 14px; overflow: hidden;
}
.hub-faq .accordion-button {
    background: transparent; color: #dfe8f3; font-family: var(--font-head);
    font-size: .95rem; font-weight: 500; padding: 16px 20px; box-shadow: none;
}
.hub-faq .accordion-button:not(.collapsed) { background: transparent; color: #ffc400; font-weight: 600; box-shadow: none; }
.hub-faq .accordion-button::after {
    filter: invert(1) brightness(1.6); width: 14px; height: 14px; background-size: 14px;
}
.hub-faq .accordion-body { color: #a9bace; font-size: .88rem; line-height: 1.85; padding: 0 20px 18px; }
.hub-faq .accordion-collapse { border: none; }

/* ===================================================================
   PRICING PAGE
   =================================================================== */
.hub-pricing-intro { padding-bottom: 20px; }
.hub-pricing-intro .hub-text--center { max-width: 640px; }

.hub-package__img { width: 100%; max-width: 330px; border-radius: 6px; }
.hub-package .hub-text, .hub-solution .hub-text { font-size: .92rem; line-height: 1.8; margin-bottom: 16px; }

.hub-solution__panel { background: #12314f; border-radius: 18px; padding: 26px; display: flex; justify-content: center; }
.hub-solution__video { width: 100%; max-width: 300px; height: auto; border-radius: 14px; display: block; }

/* ---- plan table ----
   Four equal columns that stay side by side on desktop and stack on smaller screens. */
.hub-plans__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.hub-plan { display: flex; flex-direction: column; background: #12314f; border-radius: 4px; overflow: hidden; }
.hub-plan__label {
    background: #0d2843; color: #fff; font-weight: 700; font-size: .72rem; letter-spacing: .02em;
    line-height: 1.4; padding: 14px 14px; min-height: 58px; display: flex; align-items: center;
}
.hub-plan__head { padding: 22px 14px; min-height: 132px; border-bottom: 1px solid rgba(255,255,255,.12); }
.hub-plan__title { color: #fff; font-size: 1.05rem; line-height: 1.35; margin: 0; }
.hub-plan__note  { color: #c2cddc; font-size: .72rem; margin: 8px 0 0; }
.hub-plan__price { color: #fff; font-size: 1.6rem; font-weight: 600; margin: 0; }
.hub-plan__unit  { color: #c2cddc; font-size: .72rem; margin: 4px 0 0; }

.hub-plan__list { list-style: none; margin: 0; padding: 0; flex-grow: 1; }
.hub-plan__list li {
    display: flex; align-items: flex-start; gap: 9px;
    color: #fff; font-size: .72rem; line-height: 1.45;
    padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.hub-plan__list img { width: 14px; height: 14px; flex-shrink: 0; margin-top: .1em; }

.hub-plan__cta {
    margin: 16px 14px; border-radius: 4px; padding: 11px 10px;
    font-size: .78rem; letter-spacing: .04em;
    background: linear-gradient(95deg, #378cd7 0%, #f25621 100%); color: #fff;
}
.hub-plan__cta:hover { background: #fff; color: #f25621; }

@media (max-width: 991.98px) {
    .hub-plans__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .hub-plans__grid { grid-template-columns: 1fr; }
    .hub-plan__head { min-height: 0; }
}

/* ---- Blog listing ---- */
.hub-blog__head { position: relative; margin-bottom: 42px; }
.hub-blog__star { position: absolute; top: -18px; right: 8%; width: 58px; height: auto; }
.hub-post {
    background: #0e2b48; border-radius: 20px; padding: 0 0 16px;
    display: flex; flex-direction: column;
    transition: transform .35s ease, box-shadow .35s ease;
}
.hub-post:hover { transform: translateY(-8px); box-shadow: 0 26px 55px rgba(0,0,0,.45); }
.hub-post__media { display: block; overflow: hidden; border-radius: 20px; }
.hub-post__media img { width: 100%; height: 200px; object-fit: cover; border-radius: 20px; transition: transform .5s ease; }
.hub-post:hover .hub-post__media img { transform: scale(1.06); }
.hub-post__body { padding: 20px 24px 6px; display: flex; flex-direction: column; flex-grow: 1; }
.hub-post__date { color: #9db0c6; font-size: .8rem; margin: 0 0 10px; }
.hub-post__title { font-size: 1rem; font-weight: 600; line-height: 1.55; margin: 0 0 20px; }
.hub-post__title a { color: #fff; }
.hub-post__title a:hover { color: #ffc400; }
.hub-post__cta { align-self: flex-start; margin-top: auto; padding: 10px 22px; font-size: .78rem; }
@media (max-width: 991.98px) { .hub-blog__star { right: 4%; width: 44px; } }

/* ---- Blog article (detail) ---- */
.hub-article { padding-top: 70px; }
.hub-article__hero { position: relative; max-width: 100%; margin: 0 auto 10px; }
.hub-article__hero img { width: 100%; height: auto; border-radius: 22px; position: relative; z-index: 2; }
/* large ellipse: teal arc across the top, warm arc down the left */
.hub-article__ring {
    position: absolute; z-index: 1; left: -7%; top: -9%; width: 114%; height: 122%;
    border: 2px solid transparent;
    border-top-color: #46b9cf;
    border-left-color: #c98f63;
    border-radius: 50%;
    transform: rotate(-6deg);
    pointer-events: none;
}
/* small checkered blocks on the left */
.hub-article__blocks {
    position: absolute; z-index: 1; left: -5%; top: 46%; width: 130px; height: 44px;
    background-image:
        linear-gradient(45deg, rgba(255,255,255,.10) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.10) 75%),
        linear-gradient(45deg, rgba(255,255,255,.10) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.10) 75%);
    background-size: 20px 20px; background-position: 0 0, 10px 10px;
}
.hub-article__head { position: relative; max-width: 100%; margin: 40px 0 26px; }
.hub-article__star { position: absolute; top: -18px; right: 2%; width: 46px; height: auto; }
.hub-article__title { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 8px; }
.hub-article__meta { color: #9db0c6; font-size: .78rem; margin: 0; }

.hub-article__body { max-width: 100%; margin: 0; }
.hub-article__body h2 { color: #fff; font-size: 1.05rem; font-weight: 700; margin: 26px 0 10px; }
.hub-article__body h3 { color: #fff; font-size: .98rem; font-weight: 600; margin: 20px 0 8px; }
.hub-article__body p { color: #b9c7d8; font-size: .86rem; line-height: 1.85; margin: 0 0 12px; }
.hub-article__list { margin: 0 0 14px; padding-left: 20px; }
.hub-article__list li { color: #b9c7d8; font-size: .86rem; line-height: 1.8; margin-bottom: 8px; }

.hub-article__faqs { max-width: 100%; margin: 40px 0 0; }
.hub-article__faqs h2 { color: #fff; font-size: 1.05rem; font-weight: 700; margin-bottom: 14px; }
.hub-article__faqs li { color: #b9c7d8; font-size: .84rem; margin-bottom: 10px; }
.hub-article__q { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 1px solid #7f93aa; color: #7f93aa; font-size: .6rem; text-align: center; line-height: 13px; margin-right: 8px; }

.hub-comment { background: #12314f; border-radius: 12px; padding: 28px; max-width: 420px; margin: 60px auto 0; }
.hub-comment__title { color: #fff; font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; }
.hub-comment__note { color: #8fa3ba; font-size: .74rem; margin-bottom: 16px; }
.hub-comment__field { background: #17395b; border: 1px solid #2a5580; color: #dfe8f3; border-radius: 6px; margin-bottom: 12px; font-size: .82rem; padding: 10px 14px; }
.hub-comment__field::placeholder { color: #7f93aa; }
.hub-comment__field:focus { background: #17395b; color: #fff; border-color: #f25621; box-shadow: none; }
.hub-comment__submit { padding: 9px 26px; font-size: .76rem; }

@media (max-width: 991.98px) {
    .hub-article__ring, .hub-article__blocks { display: none; }
    .hub-article__star { right: 0; top: -34px; width: 36px; }
}

/* ===================================================================
   CONTACT PAGE (Donation Hub)
   =================================================================== */
/* no overflow clip here: the corner artwork has to bleed up behind the header,
   as it does on the real site. body{overflow-x:hidden} still kills side-scroll. */
.hub-contact { position: relative; padding-top: 96px; }
/* the artwork ships on a black background — screen blending drops the black */
.hub-contact__blob {
    position: absolute; top: -200px; left: -130px; width: 620px; height: auto;
    mix-blend-mode: screen; pointer-events: none; z-index: 0;
}
.hub-contact .container { position: relative; z-index: 1; }

.hub-contact__title { font-family: var(--font-head); color: #fff; font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.2rem); margin: 0 0 18px; }
.hub-contact__lead { color: #fff; font-weight: 700; font-size: .92rem; line-height: 1.7; margin: 0 0 30px; }

.hub-contact__card { background: #0d2843; border-radius: 22px; padding: 34px 32px 38px; max-width: 560px; }
.hub-contact__field { margin-bottom: 18px; }
.hub-contact__input {
    width: 100%; background: transparent; color: #fff;
    border: 1px solid #2f6fa8; border-radius: 30px;
    padding: 14px 22px; font-size: .82rem; font-weight: 700;
    font-family: var(--font-body); outline: none; transition: border-color .2s ease;
}
.hub-contact__input::placeholder { color: #fff; opacity: .95; font-weight: 700; }
.hub-contact__input:focus { border-color: #63a6dd; }
.hub-contact__textarea { border-radius: 18px; resize: vertical; min-height: 130px; font-weight: 700; }
.hub-contact__submit { padding: 12px 34px; font-size: .78rem; letter-spacing: .06em; }
.hub-contact__err { display: block; color: #ff8f7a; font-size: .74rem; margin: 6px 0 0 22px; }
.hub-contact__alert { color: #ff8f7a; font-size: .8rem; margin-bottom: 14px; }
.hub-contact__alert ul { margin: 0; padding-left: 18px; }
.hub-contact__ok { color: #4fd18b; font-size: .84rem; font-weight: 700; margin-bottom: 16px; }

/* hero artwork: waves + blob behind, photo in front, sparkle to its left */
.hub-contact__visual { position: relative; padding-left: 8%; }
.hub-contact__deco {
    position: absolute; top: -14%; left: 2%; width: 96%; height: auto;
    opacity: .9; pointer-events: none;
}
.hub-contact__photo { position: relative; width: 100%; height: auto; display: block; }
.hub-contact__star { position: absolute; top: 22%; left: -12%; width: 58px; height: auto; pointer-events: none; }

/* ---- contact details row ---- */
.hub-cinfo__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 58px; height: 58px; border-radius: 50%; margin-bottom: 22px;
    background: linear-gradient(150deg, #378cd7 0%, #f25621 100%); color: #0d2843;
}
.hub-cinfo__icon svg { width: 26px; height: 26px; }
.hub-cinfo__label { color: #fff; font-size: .82rem; font-weight: 700; margin: 0 0 14px; }
.hub-cinfo__value { color: #fff; font-size: .98rem; line-height: 1.75; margin: 0; }
.hub-cinfo__value a:hover { color: #f25621; }

@media (max-width: 991.98px) {
    .hub-contact__blob { width: 420px; top: -120px; left: -140px; }
    .hub-contact__visual { padding-left: 0; margin-top: 40px; }
    .hub-contact__star { left: 0; }
}

/* ---- Shop listing ---- */
.hub-shop__hero { margin-bottom: 40px; }
.hub-shop__title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
/* card metrics measured off the live shop page: bg #082440, ~38px radius,
   15px padding, a white rounded image box (~24px radius), white name, gold price. */
.hub-product {
    background: #082440; border-radius: 38px; padding: 15px 15px 26px;
    display: flex; flex-direction: column; text-align: center;
    transition: transform .35s ease, box-shadow .35s ease;
}
.hub-product:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0,0,0,.42); }
.hub-product__media {
    display: block; background: #fff; border-radius: 24px; overflow: hidden; margin-bottom: 22px;
}
.hub-product__media img {
    width: 100%; aspect-ratio: 1 / 0.9; height: auto;
    object-fit: contain; padding: 16px; transition: transform .5s ease;
}
.hub-product:hover .hub-product__media img { transform: scale(1.05); }
.hub-product__name {
    font-family: var(--font-head); font-size: 1rem; font-weight: 700;
    margin: 0 0 12px; line-height: 1.45; padding: 0 10px;
}
.hub-product__name a { color: #fff; }
.hub-product__name a:hover { color: #ffc400; }
.hub-product__price { font-family: var(--font-head); color: #ffc400; font-size: 1.05rem; font-weight: 700; margin: auto 0 0; }

/* ---- Product detail ---- */
.hub-product__hero { background: #fff; border-radius: 6px; padding: 18px; }
.hub-detail { background: #0e2b48; border-radius: 6px; padding: 30px 34px; }
.hub-detail__stock { color: #cfe0f0; font-size: .74rem; letter-spacing: .06em; margin: 0 0 14px; }
.hub-detail__title { color: #fff; font-size: clamp(1.2rem, 2.1vw, 1.7rem); font-weight: 700; margin: 0 0 10px; }
.hub-detail__price { color: #fff; font-size: 1.05rem; font-weight: 600; margin: 0 0 18px; }
.hub-detail__rule { border-color: rgba(255,255,255,.18); margin: 18px 0; }
.hub-detail__desc { color: #c2cddc; font-size: .84rem; line-height: 1.8; margin: 0 0 10px; }
.hub-detail__btn {
    background: #1c4570; color: #fff; border-radius: 4px; padding: 11px 34px;
    font-weight: 600; font-size: .86rem; margin: 12px 0 14px; font-family: var(--font-head);
}
.hub-detail__btn:hover { background: #f25621; color: #fff; }
.hub-detail__sku { color: #d8a24a; font-size: .72rem; line-height: 1.7; margin: 0; }

/* ===================================================================
   GALLERY PAGE
   =================================================================== */
/* Gallery / Instagram / TikTok all share this grid so they line up with each other
   and with the Next Steps block below: same width, same tile size. */
.hub-gallery__grid, .hub-feed__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
@media (max-width: 1199.98px) { .hub-gallery__grid, .hub-feed__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767.98px)  { .hub-gallery__grid, .hub-feed__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 479.98px)  { .hub-gallery__grid, .hub-feed__grid { grid-template-columns: repeat(2, 1fr); } }
.hub-gallery__item { margin: 0; background: #fff; aspect-ratio: 1; overflow: hidden; }
.hub-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- horizontal scroller (Youtube reviews) ----
   Arrows sit outside the cards at the container edges and the track is centred,
   matching the carousel on the live site. */
.hub-scroller { position: relative; padding: 0 78px; max-width: 900px; margin: 0 auto; }
.hub-scroller__track {
    display: flex; gap: 26px; justify-content: flex-start;
    overflow-x: auto; scroll-behavior: smooth;
    scroll-snap-type: x mandatory; padding: 6px 0;
    scrollbar-width: none;
}
.hub-scroller__track::-webkit-scrollbar { display: none; }
.hub-scroller__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 50%; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid rgba(255,255,255,.55); color: #fff;
    transition: background .2s ease, border-color .2s ease;
}
.hub-scroller__arrow--prev { left: 0; }
.hub-scroller__arrow--next { right: 0; }
.hub-scroller__arrow svg { width: 15px; height: 15px; }
.hub-scroller__arrow:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* pagination dots */
.hub-scroller__dots { display: flex; justify-content: center; gap: 9px; margin-top: 26px; }
.hub-scroller__dot {
    width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0;
    background: rgba(255,255,255,.35); transition: background .2s ease, transform .2s ease;
}
.hub-scroller__dot.is-active { background: #fff; transform: scale(1.25); }

.hub-yt__card {
    position: relative; flex: 0 0 auto; width: 235px; aspect-ratio: 9 / 16;
    border-radius: 26px; overflow: hidden; scroll-snap-align: center;
    background: #0d2843; display: block;
    transition: transform .35s ease;
}
.hub-yt__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-yt__play {
    position: absolute; inset: 0; margin: auto; width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #ff0033; color: #fff;
}
.hub-yt__play svg { width: 22px; height: 22px; }
.hub-yt__card:hover .hub-yt__play { transform: scale(1.08); }

/* ---- social feed panels ---- */
.hub-feed__panel { width: 100%; }
.hub-feed__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.hub-feed__account { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: .8rem; }
.hub-feed__avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.hub-feed__tile { display: block; aspect-ratio: 1; overflow: hidden; background: #0d2843; }
.hub-feed__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.hub-feed__tile:hover img { transform: scale(1.05); }
.hub-feed__foot { text-align: center; margin-top: 18px; }
.hub-feed__follow { font-size: .74rem; padding: 9px 20px; letter-spacing: .02em; }
.hub-feed__follow--ig { background: linear-gradient(95deg, #378cd7 0%, #f25621 100%); color: #fff; }
.hub-feed__follow--tt { background: #fe2c55; color: #fff; }
.hub-feed__follow:hover { filter: brightness(1.1); }

@media (max-width: 575.98px) {
    .hub-yt__card { width: 150px; }
    .hub-feed__head { flex-direction: column; align-items: flex-start; }
}

/* ---- Login dropdown items ---- */
.hub-drop__menu--login .dropdown-item { color: #2b6cb0; font-size: .92rem; padding: 12px 22px; }
.hub-drop__ico { margin-right: 8px; }
.hub-drop__menu--login .dropdown-item::before { content: none; }
.hub-drop__menu--login .dropdown-item:hover { padding-left: 22px; color: #f25621; }

/* ===================================================================
   DONATION HUB MANAGER — login screens
   =================================================================== */
.page-mgr { background: #ffffff; color: #333; }
.mgr-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 26px; flex-wrap: wrap; gap: 12px; }
.mgr-top__brand { display: flex; align-items: center; gap: 14px; }
.mgr-top__brand img { height: 76px; width: auto; }
.mgr-top__brand span { color: #3b6fd4; font-size: 1.28rem; font-family: var(--font-head); }
.mgr-top__nav { display: flex; background: #7b6bb5; border-radius: 2px; overflow: hidden; }
.mgr-top__nav a { color: #fff; font-size: .92rem; padding: 10px 16px; }
.mgr-top__nav a:hover, .mgr-top__nav a.is-active { background: #6a59a8; }

.mgr-stage { background: #f7f8fa; margin: 0 26px; padding: 110px 20px; display: flex; justify-content: center; }
.mgr-card { display: flex; flex-wrap: wrap; box-shadow: 0 10px 30px rgba(0,0,0,.08); max-width: 900px; width: 100%; }
.mgr-card__form { background: #fff; padding: 34px 38px; flex: 1 1 380px; }
.mgr-card__side { flex: 1 1 340px; padding: 40px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mgr-card__side--blue { background: #1a73e8; }
.mgr-card__side h1 { color: #2c2c2c; font-size: 2rem; font-weight: 400; margin: 12px 0 6px; }
.mgr-card__side p { color: #fff; font-size: 1.28rem; margin: 0; }

.mgr-idcard { position: relative; display: inline-block; width: 78px; height: 88px; }
.mgr-idcard svg { width: 78px; height: 88px; color: #fff; }
.mgr-idcard i { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 22px; height: 5px; background: #1a73e8; border-radius: 2px; }
.mgr-idcard b { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50% 50% 40% 40%; background: #1a73e8; }
.org-card__head .mgr-idcard i, .org-card__head .mgr-idcard b { background: #6b3fa0; }

.mgr-label { display: block; font-size: .85rem; color: #333; margin-bottom: 6px; }
.mgr-label span { color: #e5384f; }
.mgr-field { display: flex; margin-bottom: 18px; }
.mgr-field__ico { display: flex; align-items: center; justify-content: center; width: 42px; background: #eceff3; border: 1px solid #ccd2da; border-right: none; border-radius: 4px 0 0 4px; font-size: .9rem; }
.mgr-field .form-control { border: 1px solid #ccd2da; border-radius: 0 4px 4px 0; font-size: .95rem; padding: 9px 14px; color: #333; }
.mgr-field .form-control:focus { box-shadow: none; border-color: #7b6bb5; }
.mgr-check { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: #333; margin-bottom: 26px; }
.mgr-actions { text-align: right; }
.mgr-btn { background: #7b6bb5; color: #fff; border: none; border-radius: 4px; padding: 10px 22px; font-size: .95rem; }
.mgr-btn:hover { background: #6a59a8; }

.mgr-foot { background: #333; color: #fff; text-align: center; padding: 22px 16px; margin-top: 0; }
.mgr-foot p { margin: 0; font-size: .92rem; line-height: 1.6; }

/* organization login */
.page-org { background: #fff; color: #333; }
.org-stage { text-align: center; padding: 26px 20px 40px; }
.org-logo { height: 92px; width: auto; margin: 0 auto 34px; }
.org-card { max-width: 455px; margin: 0 auto; box-shadow: 0 8px 26px rgba(0,0,0,.10); text-align: left; }
.org-card__head { background: #6b3fa0; text-align: center; padding: 34px 20px 26px; }
.org-card__head h1 { color: #2c2c2c; font-size: 1.9rem; font-weight: 400; margin: 10px 0 6px; }
.org-card__head p { color: #fff; font-size: 1.12rem; margin: 0; }
.org-card__body { background: #fff; padding: 30px 34px 34px; }
.org-note { font-size: .88rem; color: #333; margin: 34px 0 40px; }
.org-note a { color: #2b6cb0; }
.org-copy { color: #6b3fa0; font-size: .88rem; text-align: left; margin: 0; padding-left: 6px; }

@media (max-width: 767.98px) {
    .mgr-stage { margin: 0; padding: 50px 14px; }
    .mgr-card__side h1 { font-size: 1.6rem; }
}

/* ===================================================================
   ABOUT PAGE (Donation Hub)
   =================================================================== */
.hub-abouthero { position: relative; padding-top: 70px; padding-bottom: 40px; overflow: hidden; }
.hub-abouthero .container { position: relative; }
/* thin gradient ellipse behind the intro copy; the fill matches the page navy */
.hub-abouthero__orbit {
    position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-11deg);
    width: 660px; height: 290px; border: 2px solid transparent; border-radius: 50%;
    background:
        linear-gradient(#17395b, #17395b) padding-box,
        linear-gradient(104deg, #f2622a 0%, #9a5fd0 48%, #2bb3c9 100%) border-box;
    pointer-events: none; z-index: 0;
}
.hub-abouthero__spark { position: absolute; right: 30%; top: 62%; width: 26px; height: auto; z-index: 1; }
.hub-abouthero__eyebrow,
.hub-abouthero__title,
.hub-abouthero__lead { position: relative; z-index: 1; }
.hub-abouthero__eyebrow { color: #fff; font-weight: 700; font-size: .84rem; margin: 0 0 14px; }
.hub-abouthero__title {
    font-family: var(--font-head); font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    margin: 0 0 18px; color: #f5a623;
    background: linear-gradient(92deg, #f5a623 0%, #f7b733 55%, #f5a623 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hub-abouthero__lead { color: #c8d4e2; font-size: .88rem; line-height: 1.85; max-width: 620px; margin: 0 auto; }

/* ---- Our Vision: nested rounded panels with checker/plus decorations ---- */
.hub-vision__outer { position: relative; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; padding: 46px 40px; }
.hub-vision__mid { border: 1px solid rgba(255,255,255,.10); border-radius: 18px; padding: 30px; }
.hub-vision__inner { background: #1b436b; border-radius: 16px; padding: 40px 46px; text-align: center; }
.hub-vision__title { font-family: var(--font-head); color: #fff; font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 16px; }
.hub-vision__text { color: #c8d4e2; font-size: .86rem; line-height: 1.9; margin: 0; }
.hub-vision .hub-eyebrow { justify-content: center; }
.hub-vision__sq { position: absolute; width: 150px; height: auto; pointer-events: none; }
.hub-vision__sq--tl { top: -18px; left: 26px; }
.hub-vision__sq--br { bottom: -18px; right: 26px; }
.hub-vision__plus { position: absolute; width: 22px; height: auto; opacity: .85; pointer-events: none; }
.hub-vision__plus--tl { top: 44px; left: 46px; }
.hub-vision__plus--br { bottom: 44px; right: 46px; }
.hub-vision__spark { position: absolute; top: 38px; left: 160px; width: 22px; height: auto; pointer-events: none; }

/* ---- shared About typography ---- */
.hub-about__title { font-family: var(--font-head); color: #fff; font-weight: 700; font-size: clamp(1.4rem, 2.3vw, 1.95rem); line-height: 1.3; margin: 0 0 18px; }
.hub-about__text { color: #c8d4e2; font-size: .86rem; line-height: 1.9; margin: 0; }
.hub-about__img { width: 100%; height: auto; border-radius: 10px; }

.hub-about__list { list-style: disc; padding-left: 18px; margin: 0; }
.hub-about__list li { color: #c8d4e2; font-size: .84rem; line-height: 1.75; margin-bottom: 14px; }
.hub-about__list strong { color: #fff; font-weight: 700; }

/* ---- illustration: blob behind, cut-out figure in front ---- */
.hub-about__stage { position: relative; display: flex; justify-content: center; }
.hub-about__blob {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%);
    width: 108%; max-width: none; height: auto; pointer-events: none; z-index: 0;
}
.hub-about__desk { position: relative; z-index: 1; width: 100%; height: auto; }

@media (max-width: 991.98px) {
    .hub-abouthero__orbit { width: 420px; height: 210px; }
    .hub-vision__sq { width: 110px; }
    .hub-vision__inner { padding: 28px 22px; }
}

/* The About page shows the same testimonial block but, like the live site, without
   the "Donation Hub Reviews" heading or the Give Review button. Scoped here so the
   shared _HubReviews partial stays untouched for the home and pricing pages. */
.page-about .hub-reviews > .container > .hub-title { display: none; }
.page-about .hub-reviews .hub-btn--primary { display: none; }
.page-about .hub-reviews .hub-review__nav { margin-top: 8px; }

/* ===================================================================
   BENEFIT / FEATURE / USE-CASE DETAIL PAGE
   =================================================================== */
.hub-detail-intro { padding-top: 60px; padding-bottom: 10px; }
.hub-detail__title { font-family: var(--font-head); color: #fff; font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 0 0 14px; }
.hub-detail__sub   { font-family: var(--font-head); color: #fff; font-weight: 700; font-size: clamp(1.05rem, 1.7vw, 1.3rem); margin: 0 0 18px; }
.hub-detail__rule  { display: block; width: 60px; height: 1px; background: rgba(255,255,255,.45); margin: 0 auto 22px; }
.hub-detail__lead  { color: #dbe4ee; font-size: .82rem; line-height: 1.8; max-width: 760px; margin: 0 auto; }

.hub-pas { padding: 40px 0; }
.hub-pas__img  { width: 100%; max-width: 380px; height: auto; display: block; margin: 0 auto; }
.hub-pas__head { font-family: var(--font-head); color: #fff; font-weight: 700; font-size: clamp(1.3rem, 2vw, 1.7rem); margin: 0 0 16px; }
.hub-pas__text { color: #dbe4ee; font-size: .84rem; line-height: 1.8; margin: 0; max-width: 460px; }

/* ---- blog "Load more" ---- */
.hub-post-cell--fade { transition: opacity .45s ease, transform .45s ease; opacity: 0; transform: translateY(14px); }
.hub-post-cell--fade.is-in { opacity: 1; transform: none; }
.hub-loadmore { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 190px; }
.hub-loadmore__spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: hub-spin .7s linear infinite; }
.hub-loadmore.is-loading .hub-loadmore__label { opacity: .55; }
.hub-loadmore.is-loading .hub-loadmore__spinner { display: inline-block; }
.hub-loadmore[disabled] { cursor: default; transform: none; }
@keyframes hub-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .hub-post-cell--fade { transition: none; opacity: 1; transform: none; }
    .hub-loadmore__spinner { animation-duration: 1.6s; }
}

/* ---- gallery lightbox ---- */
.hub-gallery__open {
    position: relative; display: block; width: 100%; height: 100%;
    padding: 0; border: none; background: none; cursor: pointer; overflow: hidden;
}
.hub-gallery__open img { transition: transform .4s ease; }
.hub-gallery__open:hover img, .hub-gallery__open:focus-visible img { transform: scale(1.05); }
/* the "+" badge the live site shows on hover */
.hub-gallery__plus {
    position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.9); background: rgba(0,0,0,.25);
    opacity: 0; transition: opacity .3s ease;
}
.hub-gallery__plus::before, .hub-gallery__plus::after {
    content: ""; position: absolute; inset: 0; margin: auto; background: #fff;
}
.hub-gallery__plus::before { width: 20px; height: 2px; }
.hub-gallery__plus::after  { width: 2px; height: 20px; }
.hub-gallery__open:hover .hub-gallery__plus,
.hub-gallery__open:focus-visible .hub-gallery__plus { opacity: 1; }

body.hub-lb-open { overflow: hidden; }
.hub-lb {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center; gap: 18px;
    background: rgba(4, 18, 33, .93); padding: 30px;
}
.hub-lb[hidden] { display: none; }
.hub-lb__stage { margin: 0; max-width: 90vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hub-lb__img { max-width: 90vw; max-height: 80vh; width: auto; height: auto; border-radius: 8px; display: block; background: #fff; }
.hub-lb__count { color: #c2cddc; font-size: .8rem; }
.hub-lb__close, .hub-lb__nav {
    flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.45); color: #fff;
    transition: background .2s ease;
}
.hub-lb__close:hover, .hub-lb__nav:hover { background: rgba(255,255,255,.24); }
.hub-lb__close { position: absolute; top: 22px; right: 22px; }
.hub-lb__close svg, .hub-lb__nav svg { width: 17px; height: 17px; }

@media (max-width: 575.98px) {
    .hub-lb { padding: 16px; gap: 8px; }
    .hub-lb__close, .hub-lb__nav { width: 38px; height: 38px; }
    .hub-lb__img { max-width: 78vw; }
}