/**
 * Brand-only styles — gradients, background images, filters.
 * Layout & spacing → Bootstrap 5 utilities in views.
 * Fonts & sizes → public-typography.css
 */

body {
    overflow-x: hidden !important;
}

/* Footer: gradient + background image + logo filter */
.public-footer {
    background: linear-gradient(180deg, #F7941E 0%, #B03718 100%);
    position: relative;
}

.public-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--footer-bg, url('/assets/public/images/bg-footer.webp'));
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    pointer-events: none;
}

.public-footer-content {
    position: relative;
    z-index: 1;
}

.public-footer__logo {
    max-width: 113px !important;
}

body.public-site h4.public-footer__title,
body.public-site .public-footer__title {
    font-family: var(--font-display);
    font-size: 28.42px;
    font-style: normal;
    font-weight: 400;
    line-height: 34.104px;
}

body.public-site .public-footer__desc {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 630px;
}

body.public-site .public-footer__link-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 20px;
}

body.public-site .public-footer__link-item {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0;
}

body.public-site .public-footer__bottom-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

.public-footer__legal {
    width: 100%;
}

.public-footer__legal-links {
    gap: 30px;
}

.public-footer__acnc {
    display: block;
    flex-shrink: 0;
}

.public-footer__acnc-frame {
    display: block;
    width: 80px;
    height: 80px;
    overflow: hidden;
}

.public-footer__acnc-logo {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.public-cms-section--about,
.public-cms-section--purpose,
.public-cms-section--gallery,
.public-cms-section--partner,
.public-cms-section--event {
    padding: 100px 0;
}

.section--gallery {
    padding-top: 50px;
}

.public-footer__logo {
    max-width: 113px !important;
}

/* CMS section: theme backgrounds & dynamic images */
.public-cms-section--hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 600px;
    padding: 300px 0 200px;
    background-color: #000;
}

.hero-banner {
    position: absolute;
    top: -100px;
    right: 0;
    bottom: 0;
    left: -100px;
    pointer-events: none;
}

.hero-banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
    display: block;
}

.hero-banner__overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(102, 102, 102, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
}

.hero-banner__inner {
    z-index: 1;
}

.hero-banner__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
    max-width: 733px;
}

body.public-site .public-cms-section--hero h1,
body.public-site .public-cms-section--hero h1.display-4,
body.public-site .hero-banner__heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--public-h1-size);
    font-weight: 400;
    line-height: 1.2;
    color: var(--jm-color-ivory, #fff9ef);
}

.hero-banner__description,
body.public-site .hero-banner__description,
body.public-site .hero-banner__description p {
    margin: 0;
    max-width: 725px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--jm-color-ivory, #fff9ef);
}

.hero-banner__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 170px;
    height: 49px;
    padding: 10px 20px;
    border: none;
    border-radius: 100px;
    background-color: var(--jm-color-accent, #bc4527);
    color: var(--jm-color-ivory, #fff9ef);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
}

.hero-banner__cta:hover,
.hero-banner__cta:focus {
    background-color: var(--jm-color-accent, #bc4527);
    color: var(--jm-color-ivory, #fff9ef);
    text-decoration: none;
}

.hero-banner__cta-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.public-cms-section--partner-cta .partner-cta-heading,
.public-cms-section--about-partner-cta .partner-cta-heading {
    max-width: 550px;
}

.hero-foundation-label {
    font-size: 21.32px !important;
}

.public-cms-section--about {
    background-color: #fff9ef;
}

.public-cms-section--purpose {
    background-color: var(--jm-color-white);
}

.public-cms-section--event {
    background-color: #f4f4f4;
}

.public-cms-section--register {
    background: linear-gradient(to bottom, #111111 0%, #1e1611 40%, #3a1f0b 100%);
}

.public-cms-section--gallery {
    background: #000000;
}

.public-cms-section--testimony {
    /* Gradient is the solid base layer; the photo sits on top at low opacity
       via ::before, matching Figma's exact hex stops (#545837 → #000). */
    background: linear-gradient(180deg, #545837 0%, #000000 100%);
    padding: 100px 0;
    position: relative;
}

.public-cms-section--testimony::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--testimony-bg);
    background-size: cover;
    background-position: center;
    opacity: 0.07;
    pointer-events: none;
}

.testimony-quote {
    font-size: 1.35rem;
    line-height: 1.5;
}

.testimony-avatar {
    width: 120px;
    height: 120px;
    background-color: #000000;
}

/* Specificity must beat `body.public-site p` (font-size: inherit) */
body.public-site .testimony-author-name {
    font-family: var(--font-title);
    font-size: 1.35rem;
    font-weight: 400;
}

body.public-site .testimony-author-title {
    font-size: 1rem;
    font-weight: 600;
}

body.public-site .testimony-author-program {
    font-size: 12px;
    opacity: 0.85;
}

/* CTA sits on the olive→black gradient, so its ivory pill uses olive text
   (not the site-wide coral accent) to match the section's own colour */
.testimony-cta {
    color: var(--jm-color-olive) !important;
}

.testimony-cta:hover,
.testimony-cta:focus {
    color: var(--jm-color-olive) !important;
}

.public-cms-section--content-banner {
    background: var(--public-cms-content-bg, none) center no-repeat;
    background-size: cover;
}

/* Card overlays: gradient scrims */
.public-cms-section__card-overlay--event {
    background: linear-gradient(
        to top,
        #000 0%,
        #000 25%,
        rgba(0, 0, 0, 0.6) 50%,
        transparent 100%
    );
}

.public-cms-section__card-overlay--gallery {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.4) 40%,
        transparent 70%
    );
}

/* Brand CTA button (orange not in Bootstrap palette) */
.btn-brand {
    background-color: var(--jm-color-orange);
    border-color: var(--jm-color-orange);
    color: var(--jm-color-white);
}

.btn-brand:hover,
.btn-brand:focus {
    background-color: var(--jm-color-orange-hover);
    border-color: var(--jm-color-orange-hover);
    color: var(--jm-color-white);
}

.btn-outline-brand {
    background-color: transparent;
    border: 1px solid var(--jm-color-accent);
    color: var(--jm-color-accent);
}

.btn-outline-brand:hover,
.btn-outline-brand:focus {
    background-color: var(--jm-color-accent);
    border-color: var(--jm-color-accent);
    color: var(--jm-color-white);
}

/* Solid ivory pill button w/ accent text — used on dark/coral section backgrounds */
.btn-ivory {
    background-color: var(--jm-color-ivory);
    border-color: var(--jm-color-ivory);
    color: var(--jm-color-accent);
}

.btn-ivory:hover,
.btn-ivory:focus {
    background-color: var(--jm-color-white);
    border-color: var(--jm-color-white);
    color: var(--jm-color-accent);
}

/* Solid coral/accent pill button w/ ivory text — used on light section backgrounds (hero, purpose) */
.btn-accent {
    background-color: var(--jm-color-accent) !important;
    border: 1px solid var(--jm-color-accent) !important;
    color: var(--jm-color-ivory) !important;
}

.btn-accent:hover,
.btn-accent:focus {
    background-color: var(--jm-color-white) !important;
    border-color: var(--jm-color-accent) !important;
    color: var(--jm-color-accent) !important;
}

.btn-outline-accent {
    background-color: transparent !important;
    border: 1px solid var(--jm-color-accent) !important;
    color: var(--jm-color-accent) !important;
}

.btn-outline-accent:hover,
.btn-outline-accent:focus {
    background-color: var(--jm-color-accent) !important;
    color: var(--jm-color-ivory) !important;
}

/* Body copy inside a CMS section (plain <p> from richtext) — keeps consistent
   line-height/spacing regardless of the global body.public-site p override.
   Applies both when .section-copy is the <p> itself and when it wraps richtext <p>s. */
body.public-site .section-copy,
body.public-site .section-copy p {
    font-size: 16px;
    line-height: 1.5625;
    margin-bottom: 1rem;
}

body.public-site .section-copy p:last-child {
    margin-bottom: 0;
}

.section-copy--constrained {
    max-width: 700px;
}

/* ─── Impact: stat cards over dark-to-coral gradient ─── */
.public-cms-section--impact {
    background: linear-gradient(to bottom, #202020 0%, var(--jm-color-accent) 100%);
    padding: 100px 0;
    position: relative;
}

.public-cms-section--impact::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--impact-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.05;
    pointer-events: none;
}

.impact-stat-card {
    min-height: 300px;
    border-radius: 20px;
    box-shadow: var(--jm-shadow-soft);
}

/* Specificity must beat `body.public-site p` (font-size: inherit; line-height: var(--public-body-leading)) */
body.public-site .impact-stat-card__number {
    font-family: var(--font-title);
    font-weight: 600;
    font-size: 3.15rem;
    line-height: 1.2;
    color: var(--jm-color-accent);
}

body.public-site .impact-stat-card__label {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--jm-color-text);
}

/* ─── Focus grid: 2-up colour cards ─── */
.public-cms-section--focus-grid {
    background: linear-gradient(180deg, var(--jm-color-ivory) 0%, var(--jm-color-white) 100%), var(--jm-color-ivory);
    padding: 100px 0;
}

.focus-grid-card {
    background-color: var(--jm-color-olive);
    --card-accent: var(--jm-color-olive);
    border-radius: 20px;
    min-height: 320px;
    padding: 2.5rem;
}

@media (min-width: 992px) {
    .focus-grid-card {
        padding: 71px 112px;
    }
}

.focus-grid-card__dot {
    width: 8px;
    height: 8px;
    background-color: var(--jm-color-ivory);
    display: inline-block;
}

.focus-grid-card__badge {
    color: var(--jm-color-ivory);
}

/* Specificity must beat `body.public-site p` (font-size: inherit) */
body.public-site .focus-grid-card__heading {
    color: var(--jm-color-ivory);
    font-size: 1.35rem;
    font-weight: 400;
}

body.public-site .focus-grid-card__desc {
    color: var(--jm-color-ivory);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5625;
    line-height: 1.5;
}

/* Default: white text/border, transparent bg. Hover: inverted — white bg,
   text becomes the card's own accent colour (via --card-accent). */
.focus-grid-card .btn-outline-light {
    background-color: transparent !important;
    font-size: 12px;
    padding: 0.5rem 1.25rem;
    border-color: var(--jm-color-white) !important;
    color: var(--jm-color-white) !important;
}

.focus-grid-card .btn-outline-light:hover,
.focus-grid-card .btn-outline-light:focus {
    background-color: var(--jm-color-white) !important;
    border-color: var(--jm-color-white) !important;
    color: var(--card-accent) !important;
}

/* Card colour order matches Figma's column-major layout: col-1 = mental
   health (olive) + employment (orange), col-2 = education (coral) + technology (black) */
.col-md-6:nth-of-type(2) .focus-grid-card {
    background-color: var(--jm-color-accent);
    --card-accent: var(--jm-color-accent);
}

.col-md-6:nth-of-type(3) .focus-grid-card {
    background-color: var(--jm-color-orange);
    --card-accent: var(--jm-color-orange);
}

.col-md-6:nth-of-type(4) .focus-grid-card {
    background-color: #000000;
    --card-accent: #000000;
}

/* ─── Campaign highlight: photo banner + copy ─── */
.public-cms-section--campaign-highlight {
    background-color: var(--jm-color-orange);
}

/* On mobile the col is in normal flow, so give the photo a fixed height.
   On lg+ the col is a flex-stretch child; we position the photo absolutely
   so the img can truly fill 100% of whatever height the sibling col dictates. */
.campaign-highlight-photo-col {
    min-height: 360px;
}

.campaign-highlight-photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.campaign-highlight-photo__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

@media (max-width: 991px) {
    .campaign-highlight-photo {
        position: relative;
        inset: auto;
        min-height: 360px;
    }
    .campaign-highlight-photo__img {
        min-height: 360px;
    }
}

.campaign-highlight-inner {
    max-width: 600px;
}

.campaign-highlight-content {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

@media (min-width: 992px) {
    .campaign-highlight-content {
        padding-top: 120px !important;
        padding-bottom: 120px !important;
    }
}

/* CTA sits on the orange bg, so its ivory pill uses orange text */
.campaign-highlight-cta {
    color: var(--jm-color-orange) !important;
}

.campaign-highlight-cta:hover,
.campaign-highlight-cta:focus {
    color: var(--jm-color-orange) !important;
    background-color: var(--jm-color-white) !important;
    border-color: var(--jm-color-white) !important;
}

/* ─── News & insights: dark card grid ─── */
.public-cms-section--news-insight {
    background: linear-gradient(180deg, #202020 0%, #000000 100%);
}

.news-insight-card {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(247, 148, 29, 0.2) 100%), #000000;
    padding: 10px;
    border-radius: 20px !important;
}

.news-insight-card__img-wrapper {
    height: 60px; /* As per Figma design */
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--jm-color-ivory);
}

body.public-site .news-insight-card__badge {
    color: var(--jm-color-ivory);
    font-size: 9px;
    letter-spacing: 0.05em;
}

body.public-site .news-insight-card__title {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

body.public-site .news-insight-card__excerpt {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

body.public-site .news-insight-card__date {
    font-size: 9px;
    font-weight: 400;
    text-underline-offset: 4px;
}

.btn-outline-ivory {
    background-color: transparent !important;
    border: 1px solid var(--jm-color-ivory) !important;
    color: var(--jm-color-ivory) !important;
    font-size: 12px;
    padding: 10px 20px;
}

.btn-outline-ivory:hover,
.btn-outline-ivory:focus {
    background-color: var(--jm-color-ivory) !important;
    color: #2b2b2b !important;
}

/* Legacy SiteSettings footer component */
.public-footer--legacy-dark {
    background: none;
}

.public-footer--legacy-dark .public-footer__inner {
    background-color: #2b2b2b;
}

/* Portrait ratio 4:5 (Bootstrap ratio only has 1x1, 4x3, 16x9, 21x9) */
.ratio-portrait {
    --bs-aspect-ratio: 125%;
}

.ratio-landscape {
    --bs-aspect-ratio: 80%;
}

.scrollToTop {
    background-color: var(--jm-color-orange);
    bottom: max(20px, calc(20px + env(safe-area-inset-bottom, 0px)));
}

/* Custom page scrollbar — target html (viewport scroll container) */
:root {
    scrollbar-width: thin;
    scrollbar-color: var(--jm-color-accent) var(--jm-color-cream);
}

html::-webkit-scrollbar {
    width: 8px;
}

html::-webkit-scrollbar-track {
    background: var(--jm-color-cream);
}

html::-webkit-scrollbar-thumb {
    background-color: var(--jm-color-accent);
    border-radius: 4px;
    border: 2px solid var(--jm-color-cream);
}

html::-webkit-scrollbar-thumb:hover {
    background-color: var(--jm-color-orange-hover);
}

/* ─── About page: hero ─── */
.public-cms-section--about-hero {
    padding: 160px 0 100px;
}

body.public-site .public-cms-section--about-hero h1,
body.public-site .public-cms-section--about-hero h1.display-4,
body.public-site .public-cms-section--pauline-story h2.display-4,
body.public-site .public-cms-section--our-founder h2.display-4,
body.public-site .public-cms-section--about-partner-cta h2.display-4 {
    font-family: var(--font-display);
    font-size: var(--public-h1-size);
    line-height: var(--public-h1-leading);
}

.public-cms-section--about-hero .about-hero-description {
    max-width: 449px;
}

.about-hero-photo {
    aspect-ratio: 8 / 5;
}

.about-hero-photo__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.public-cms-section--about-hero .about-hero-photo__img {
    object-position: top;
}

@media (min-width: 992px) {
    .about-hero-photo {
        aspect-ratio: auto;
        height: 500px;
    }
}

.about-scroll-link {
    color: var(--jm-color-accent) !important;
}

.about-scroll-link:hover,
.about-scroll-link:focus {
    color: var(--jm-color-accent-hover, var(--jm-color-accent)) !important;
}

.about-scroll-link__icon {
    transform: rotate(90deg);
    font-size: 14px;
}

/* ─── About page: pauline-story / our-founder (label + heading + copy bands) ─── */
.public-cms-section--pauline-story,
.public-cms-section--our-founder,
.public-cms-section--about-partner-cta {
    padding: 100px 0;
}

.public-cms-section--pauline-story h2,
.public-cms-section--our-founder h2 {
    line-height: var(--public-h1-leading);
}

.public-cms-section--our-founder h2 {
    max-width: 726px;
}

.public-cms-section--our-founder .section-copy {
    max-width: 677px;
}

.public-cms-section--pauline-story .section-copy {
    max-width: 822px;
}

/* ─── About page: her timeline ─── */
.public-cms-section--her-timeline {
    padding: 80px 0;
}

body.public-site .her-timeline__year {
    font-size: 2.35rem;
    font-weight: 400;
    line-height: 1.2;
}

body.public-site .her-timeline__title {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

body.public-site .her-timeline__desc {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    opacity: 0.75;
}

/* ─── About page: founder-work (dark gradient quote band) ─── */
.public-cms-section--founder-work {
    background: linear-gradient(0deg, #545837 0%, #000000 100%);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.public-cms-section--founder-work::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/assets/public/images/about/founder-work-bg.png');
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    pointer-events: none;
}

.public-cms-section--founder-work .container {
    position: relative;
    z-index: 1;
}

body.public-site .founder-work-quote {
    font-size: 1.775rem;
    font-weight: 400;
    line-height: 1.4;
    font-style: normal;
}

/* ─── Our work page: hero (layout lives in our-work.css) ─── */
.public-cms-section--our-work-hero h1 {
    font-size: var(--public-h1-size);
    line-height: var(--public-h1-leading);
}

/* Section label (uppercase accent span) — design spec is 600, fw-bold gives 700 */
.text-uppercase.text-color-nab.fs-12 {
    font-weight: 600 !important;
}

/* ─── Our work page: circular economy (3-step process) ─── */
.public-cms-section--circular-economy {
    padding: 100px 0;
}

body.public-site .circular-economy-step__number {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

body.public-site .circular-economy-step__title {
    font-size: 1.775rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--jm-color-black, #000);
}

body.public-site .circular-economy-step__desc {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

.circular-economy-step__chevron {
    font-size: 2.1rem;
    color: var(--jm-color-accent);
    align-self: center;
    margin-top: 40px;
}

body.public-site .circular-economy-quote {
    font-size: 2.35rem;
    font-weight: 400;
    line-height: 1.3;
    font-style: normal;
    color: #000;
}

/* ─── Our work page: focus detail bands (mental health / education / employment / technology) ─── */
.public-cms-section--focus-detail {
    padding: 100px 0;
}

.focus-detail-bullets__item {
    padding: 10px 0;
    border-top: 1px solid rgba(65, 64, 66, 0.15);
}

.focus-detail-bullets__item:last-child {
    border-bottom: 1px solid rgba(65, 64, 66, 0.15);
}

.focus-detail-bullets__dot {
    width: 10px;
    height: 10px;
    background-color: var(--jm-color-orange);
}

body.public-site .focus-detail-quote {
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.5;
    font-style: normal;
    padding-left: 20px;
    border-left: 2px solid var(--jm-color-accent);
}

/* ─── Our work page: work stats ("the work in numbers") ─── */
.public-cms-section--work-stats {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 55%), var(--jm-color-accent);
    padding: 100px 0;
}

body.public-site .work-stats__number {
    font-size: 2.35rem;
    font-weight: 400;
    line-height: 1.5;
}

body.public-site .work-stats__label {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 239px;
}

/* ─── Our work page: testimony (Ron's story) ─── */
.public-cms-section--work-testimony,
.public-cms-section--partnership-approach,
.public-cms-section--work-partner-cta {
    padding: 100px 0;
}

/* ─── Our work page: partnership approach tags ─── */
.partnership-approach-tag {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border: 1px solid var(--jm-color-accent);
    color: var(--jm-color-grey, #414042);
}

.partnership-approach-tag--solid {
    background-color: var(--jm-color-accent);
    color: var(--jm-color-ivory);
    border-color: var(--jm-color-accent);
}

/* ─── Partner page: hero ─── */
.public-cms-section--partner-hero {
    padding: 160px 0 100px;
}

.public-cms-section--partner-hero h1 {
    font-size: var(--public-h1-size);
    line-height: var(--public-h1-leading);
}

.public-cms-section--partner-hero .partner-hero-description {
    max-width: 447px;
}

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

/* ─── Partner page: why it matters (feature cards) ─── */
.public-cms-section--partner-why {
    padding: 100px 0;
}

.partner-why-card {
    border: 0.5px solid var(--jm-color-orange);
    border-radius: 20px;
    padding: 20px 40px;
}

body.public-site .partner-why-card__number {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

body.public-site .partner-why-card__title {
    font-size: 1.775rem;
    font-weight: 400;
    line-height: 1.2;
    color: #000;
}

body.public-site .partner-why-card__desc {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

/* ─── Partner page: ways to work together (2x2 cards) ─── */
.public-cms-section--partner-ways {
    padding: 100px 0;
}

.partner-way-card {
    border: 1px solid var(--jm-color-lightbrown, #c29d8b);
    border-radius: 20px;
    padding: 71px 100px;
    color: var(--jm-color-grey, #414042);
}

.partner-way-card--solid {
    background-color: var(--jm-color-lightbrown, #c29d8b);
    border-color: var(--jm-color-lightbrown, #c29d8b);
    color: var(--jm-color-ivory);
}

.partner-way-card__badge {
    color: var(--jm-color-accent);
}

.partner-way-card--solid .partner-way-card__badge {
    color: var(--jm-color-ivory);
}

body.public-site .partner-way-card__heading {
    font-size: 1.775rem;
    font-weight: 400;
    line-height: 1.2;
    color: #000;
}

body.public-site .partner-way-card--solid .partner-way-card__heading {
    color: var(--jm-color-white, #fff);
}

body.public-site .partner-way-card__desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

/* ─── Partner page: marquee logos ─── */
.public-cms-section--partner-marquee {
    padding: 100px 0;
}

.partner-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
}

.partner-marquee-track {
    display: flex;
    width: max-content;
}

.partner-marquee-content {
    display: flex;
    gap: 60px;
    padding-right: 60px;
}

.partner-marquee-track--left {
    animation: marquee-left 40s linear infinite;
}

.partner-marquee-track--right {
    /* To slide right, we start at -50% and go to 0 */
    animation: marquee-right 40s linear infinite;
    margin-bottom: 60px;
}

@keyframes marquee-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-25%); }
}

@keyframes marquee-right {
    0% { transform: translateX(-25%); }
    100% { transform: translateX(0); }
}

.partner-marquee-item {
    flex-shrink: 0;
    width: 200px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-marquee-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: all 0.3s ease;
}

/* ─── Partner page: direct donations banner ─── */
.public-cms-section--partner-donations {
    padding: 40px 0;
}

.btn-outline-orange {
    border: 1px solid var(--jm-color-orange) !important;
    color: var(--jm-color-orange) !important;
    background-color: transparent !important;
}

.btn-outline-orange:hover,
.btn-outline-orange:focus {
    background-color: var(--jm-color-orange) !important;
    color: var(--jm-color-ivory) !important;
}

/* ─── Partner page: partnership process (reuses circular-economy-step styles) ─── */
.public-cms-section--partner-process {
    padding: 100px 0;
}

/* ─── Partner page: invitation quote banner ─── */
.public-cms-section--partner-invitation {
    padding: 100px 0;
}

.bg-orange {
    background-color: var(--jm-color-orange) !important;
}

body.public-site .partner-invitation-quote {
    font-size: 2.35rem;
    font-weight: 400;
    line-height: 1.3;
    font-style: normal;
    max-width: 1016px;
    margin-left: auto;
    margin-right: auto;
}

/* ─── Partner page: CTA + inquiry form ─── */
.public-cms-section--partner-cta-form {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(247, 148, 29, 0.2) 100%), #000;
    padding: 100px 0;
}

.partner-inquiry-form__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--jm-color-ivory);
    text-transform: uppercase;
}

.partner-inquiry-form__input {
    border: none;
    border-radius: 5px;
    background-color: #fff;
    font-size: 14px;
    padding: 10px 16px;
}

.partner-inquiry-form__note {
    font-size: 11px;
    color: var(--jm-color-lightbrown, #c29d8b);
}

.btn-orange {
    background-color: var(--jm-color-orange) !important;
    color: var(--jm-color-ivory) !important;
    border: none;
}

.btn-orange:hover,
.btn-orange:focus {
    background-color: var(--jm-color-orange-hover) !important;
    color: var(--jm-color-ivory) !important;
}

/* ─── Blog page: hero ─── */
.public-cms-section--blog-hero {
    min-height: 800px;
    padding-top: 120px;
    padding-bottom: 120px;
}

/* ─── Blog page: featured post ─── */
body.public-site .blog-featured__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--jm-color-accent);
    letter-spacing: 0.5px;
}

.blog-featured__label--strong {
    font-weight: 800;
    text-decoration: underline;
}

body.public-site .blog-featured__title {
    font-family: var(--font-title);
    font-size: 2.75rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--jm-color-black, #000);
}

.blog-featured__img {
    height: 600px;
    object-fit: cover;
    display: block;
}

@media (max-width: 991.98px) {
    .blog-featured__img {
        height: 320px;
    }
}

/* ─── Blog page: post grid cards ─── */
.blog-post-card {
    border: 0.5px solid var(--jm-color-lightbrown, #c29d8b);
    padding: 20px;
}

.blog-post-card__img {
    height: 250px;
    object-fit: cover;
    display: block;
}

body.public-site .blog-post-card__category {
    font-size: 12px;
    font-weight: 600;
    color: var(--jm-color-accent);
    letter-spacing: 0.3px;
}

body.public-site .blog-post-card__title {
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--jm-color-black, #000);
}

body.public-site .blog-post-card__excerpt {
    font-size: 1rem;
    color: var(--jm-color-grey, #414042);
}

body.public-site .blog-post-card__meta {
    font-size: 12px;
    color: var(--jm-color-grey, #414042);
}

.blog-post-card__link {
    font-size: 1rem;
    font-weight: 700;
    color: var(--jm-color-accent);
}

.blog-post-card__link:hover {
    color: var(--jm-color-accent);
    text-decoration: underline !important;
}

/* ─── Contact page: hero ─── */
.public-cms-section--contact-hero {
    min-height: 350px;
    padding: 250px 0 150px;
    background-color: #000;
}

.public-cms-section--contact-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--contact-hero-bg);
    background-size: cover;
    background-position: 70% top;
    background-repeat: no-repeat;
    pointer-events: none;
}

.public-cms-section--contact-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgba(102, 102, 102, 0) 100%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.56) 0%, rgba(102, 102, 102, 0) 100%);
    pointer-events: none;
}

.contact-hero-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 680px;
}

.contact-hero-heading {
    font-size: var(--public-h1-size);
    line-height: var(--public-h1-leading);
    margin-bottom: 0;
}

.contact-hero-description {
    max-width: 636px;
}

/* ─── Contact page: channels + form ─── */
.public-cms-section--contact-channels {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(247, 148, 29, 0.2) 100%), #000;
    padding: 100px 0;
}

.contact-channel-card {
    border: 0.5px solid rgba(247, 148, 29, 0.2);
    border-radius: 20px;
    padding: 20px 24px;
}

.contact-channel-card--primary {
    border: 1px solid var(--jm-color-orange);
}

body.public-site .contact-channel-card__label {
    font-size: 9px;
    font-weight: 400;
    color: var(--jm-color-orange);
}

body.public-site .contact-channel-card__title {
    font-family: var(--font-title);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--jm-color-ivory);
}

body.public-site .contact-channel-card__description {
    font-size: 12px;
    color: var(--jm-color-ivory);
}

.contact-channel-card__email {
    font-size: 14px;
    color: var(--jm-color-ivory) !important;
}

/* ─── Contact page: on whose country acknowledgement ─── */
.public-cms-section--contact-acknowledgement {
    background-color: #000;
    padding: 100px 0;
}

body.public-site .contact-acknowledgement__quote {
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.5;
}