/* Rajarshi Gurukul — custom additions on top of the base template.
   Kept separate from main.css so template updates don't clobber it. */

/* Homepage hero: below 1600px the theme drops the banner's inline
   padding to 0, so the subtitle/title text sits flush against the
   viewport edge while every section underneath it is indented to
   Bootstrap's centered .container edge. Re-create that same edge
   here (mirroring .container's own max-width + gutter at each
   breakpoint) so the hero text lines up with the content below it
   instead of looking flush/unmanaged against the browser edge. */
@media only screen and (max-width: 1600px) {
    .rs-banner-one .rs-banner-wrapper {
        padding-inline-start: max(12px, calc((100vw - 1320px) / 2 + 12px));
        padding-inline-end: max(12px, calc((100vw - 1320px) / 2 + 12px));
    }
}
@media only screen and (max-width: 1399px) {
    .rs-banner-one .rs-banner-wrapper {
        padding-inline-start: max(12px, calc((100vw - 1140px) / 2 + 12px));
        padding-inline-end: max(12px, calc((100vw - 1140px) / 2 + 12px));
    }
}
@media only screen and (max-width: 1199px) {
    .rs-banner-one .rs-banner-wrapper {
        padding-inline-start: max(12px, calc((100vw - 960px) / 2 + 12px));
        padding-inline-end: max(12px, calc((100vw - 960px) / 2 + 12px));
    }
}
@media only screen and (max-width: 991px) {
    .rs-banner-one .rs-banner-wrapper {
        padding-inline-start: max(12px, calc((100vw - 720px) / 2 + 12px));
        padding-inline-end: max(12px, calc((100vw - 720px) / 2 + 12px));
    }
}
@media only screen and (max-width: 767px) {
    .rs-banner-one .rs-banner-wrapper {
        padding-inline-start: 20px;
        padding-inline-end: 20px;
    }
}

.rs-program-more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 15px;
    color: var(--rs-theme-blue, #3A4A57);
    margin-top: 14px;
    text-decoration: none;
    transition: color .2s ease, gap .2s ease;
}
.rs-program-more-link:hover {
    color: var(--rs-theme-yellow, #FDB715);
    gap: 10px;
}

.rs-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 20px;
    text-align: center;
}
@media (max-width: 991px) {
    .rs-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
.rs-stat-grid .rs-stat-item .rs-stat-number {
    font-family: var(--rs-ff-title);
    font-size: 42px;
    font-weight: 700;
    color: var(--rs-theme-blue, #3A4A57);
    line-height: 1.2;
}
.rs-stat-grid .rs-stat-item .rs-stat-label {
    font-size: 15px;
    color: var(--rs-text-primary, #4C4C4C);
    margin-top: 4px;
}

.rs-icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}
@media (max-width: 991px) {
    .rs-icon-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .rs-icon-grid { grid-template-columns: 1fr; }
}
.rs-icon-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px 22px;
    box-shadow: 0 6px 24px rgba(0,0,0,.06);
    text-align: left;
    height: 100%;
    transition: box-shadow .25s ease, transform .25s ease;
}
.rs-icon-card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,.1);
    transform: translateY(-3px);
}
.rs-icon-card i {
    font-size: 34px;
    color: var(--rs-theme-yellow, #FDB715);
    margin-bottom: 14px;
    display: inline-block;
}
.rs-icon-card h5 {
    font-family: var(--rs-ff-title);
    margin-bottom: 8px;
    font-size: 19px;
}
.rs-icon-card p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    color: var(--rs-text-primary, #4C4C4C);
}

.rs-simple-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.rs-simple-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    line-height: 1.6;
}
.rs-simple-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--rs-theme-yellow, #FDB715);
    font-weight: 700;
}

.rs-quote-block {
    border-left: 4px solid var(--rs-theme-yellow, #FDB715);
    padding: 6px 0 6px 26px;
    margin: 24px 0;
}
.rs-quote-block p {
    font-style: italic;
    font-size: 18px;
    line-height: 1.7;
}

.rs-cta-btn-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Footer logo — no CSS cap existed for this in main.css (header logo is capped
   by its own wrapper width, footer logo wasn't), so it was rendering oversized. */
.rs-footer-widget-logo img {
    width: 130px;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

/* Skyline illustration band above the footer — full width, no cropping, with
   some depth: a warm glow behind it, a soft duotone wash, and a hover lift. */
.rs-footer-skyline {
    position: relative;
    width: 100%;
    overflow: visible;
    background: radial-gradient(60% 100% at 50% 100%, rgba(253, 183, 21, 0.28) 0%, rgba(253, 183, 21, 0.08) 45%, rgba(0, 25, 44, 0) 80%);
}
.rs-footer-skyline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(253, 183, 21, 0.7), transparent);
}
.rs-footer-skyline img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 -10px 22px rgba(0, 0, 0, 0.4)) brightness(1.25) saturate(1.4) contrast(1.05);
    transition: transform .4s ease, filter .4s ease;
}
.rs-footer-skyline:hover img {
    transform: translateY(-10px);
    filter: drop-shadow(0 -14px 30px rgba(0, 0, 0, 0.45)) brightness(1.35) saturate(1.5) contrast(1.08);
}

/* ---------------------------------------------------------------
   Vision / Mission — was two identical plain icon-cards side by
   side. Redesigned as a connected two-panel band (light "Vision"
   panel flowing into a dark "Mission" panel, joined by an arrow
   badge) so it reads as "where we're headed → how we get there"
   rather than two interchangeable boxes. */
.rs-mv-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(15, 30, 45, 0.12);
}
@media (max-width: 767px) {
    .rs-mv-grid {
        grid-template-columns: 1fr;
    }
}
.rs-mv-card {
    position: relative;
    padding: 50px 44px;
    overflow: hidden;
}
@media (max-width: 991px) {
    .rs-mv-card {
        padding: 40px 30px;
    }
}
.rs-mv-index {
    position: absolute;
    top: -6px;
    inset-inline-end: 22px;
    font-family: var(--rs-ff-title);
    font-size: 96px;
    font-weight: 700;
    line-height: 1;
    opacity: .07;
    pointer-events: none;
}
.rs-mv-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    margin-bottom: 20px;
}
.rs-mv-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.rs-mv-card h5 {
    font-family: var(--rs-ff-title);
    font-size: 26px;
    margin-bottom: 14px;
}
.rs-mv-card p {
    font-size: 15px;
    line-height: 1.75;
    margin: 0;
    position: relative;
}
.rs-mv-card.is-vision {
    background: #fff;
}
.rs-mv-card.is-vision .rs-mv-index,
.rs-mv-card.is-vision .rs-mv-label { color: var(--rs-theme-blue, #3A4A57); }
.rs-mv-card.is-vision .rs-mv-icon { background: rgba(58, 74, 87, .08); color: var(--rs-theme-blue, #3A4A57); }
.rs-mv-card.is-vision h5 { color: var(--rs-title-primary, #1F2A35); }
.rs-mv-card.is-vision p { color: var(--rs-text-primary, #4C4C4C); }

.rs-mv-card.is-mission {
    background: linear-gradient(155deg, var(--rs-theme-blue, #3A4A57), var(--rs-theme-blue-two, #2C3846));
}
.rs-mv-card.is-mission .rs-mv-index { color: #fff; }
.rs-mv-card.is-mission .rs-mv-label { color: var(--rs-theme-yellow, #FDB715); }
.rs-mv-card.is-mission .rs-mv-icon { background: rgba(253, 183, 21, .18); color: var(--rs-theme-yellow, #FDB715); }
.rs-mv-card.is-mission h5 { color: #fff; }
.rs-mv-card.is-mission p { color: rgba(255, 255, 255, .82); }

.rs-mv-connector {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--rs-theme-yellow, #FDB715);
    color: #1F2A35;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    z-index: 2;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
}
@media (max-width: 767px) {
    .rs-mv-connector {
        top: 0;
        inset-inline-start: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
    }
}

/* ---------------------------------------------------------------
   Chairman photo slot. Drop the real photo in as
   assets/images/about/chairman.webp (any image works — the frame
   below crops it to a portrait ratio) and it will replace this
   placeholder automatically; nothing else needs to change. */
.rs-chairman-block {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 30px;
    align-items: start;
    margin-bottom: 30px;
}
@media (max-width: 575px) {
    .rs-chairman-block {
        grid-template-columns: 1fr;
    }
}
.rs-chairman-photo-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(58, 74, 87, .09), rgba(58, 74, 87, .03));
    border: 1.5px dashed rgba(58, 74, 87, .3);
}
.rs-chairman-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rs-chairman-photo-fallback {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    color: rgba(58, 74, 87, .35);
}
.rs-chairman-photo-frame.rs-chairman-photo-empty .rs-chairman-photo-fallback {
    display: flex;
}
.rs-chairman-caption {
    margin-top: 12px;
    text-align: center;
}
.rs-chairman-caption strong {
    display: block;
    font-family: var(--rs-ff-title);
    font-size: 15px;
    color: var(--rs-title-primary, #1F2A35);
}
.rs-chairman-caption span {
    display: block;
    font-size: 12.5px;
    color: var(--rs-text-primary, #4C4C4C);
    margin-top: 2px;
}
.rs-chairman-quote {
    min-width: 0;
}
.rs-chairman-quote .rs-quote-block {
    margin-top: 0;
}

/* Back to top button */
#backtotop-wrap .arrowicon svg {
    display: block;
}

/* Fix low contrast on breadcrumb hero text: the theme's overlay gradient is
   nearly transparent at the top (right where the heading sits), so white
   text can wash out against a light background photo. Add a stronger,
   even overlay plus a text-shadow as a safety net. */
.rs-breadcrumb-one .rs-breadcrumb-bg-thumb::before {
    background-image: linear-gradient(180deg, rgba(0, 25, 44, 0.55) 0%, rgba(0, 25, 44, 0.72) 45%, #00192C 133.75%) !important;
}
.rs-breadcrumb-one .rs-breadcrumb-title,
.rs-breadcrumb-one .rs-breadcrumb-desc,
.rs-breadcrumb-one .rs-breadcrumb-menu ul li a,
.rs-breadcrumb-one .rs-breadcrumb-menu ul li:last-child {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* ---------------------------------------------------------------
   Header nav: with 10 top-level items ("Learning At RG", "Beyond
   Books", "News & Events", "Parents & Community", etc.) the menu
   was running out of horizontal room at normal desktop widths. The
   theme's flex row let each link shrink below its own text width,
   so the browser broke labels mid-word onto a second line instead
   of wrapping whole items — that's what made the nav look ragged
   and pushed everything below it (breadcrumb, hero) out of place.

   Fix: keep every label on one line, let the *whole* item wrap to
   a new row (never mid-word) if space really runs out, and tighten
   spacing a little on tighter desktop widths so it fits in one row
   more often. Also give the transparent second header (the one
   actually visible on page load / interior pages) the same
   responsive fallback the first header already has. */
.main-menu li a {
    white-space: nowrap;
}
.main-menu > ul {
    flex-wrap: wrap;
    row-gap: 8px;
}
.rs-header-one .header-menu {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
}
.rs-header-one .header-wrapper {
    row-gap: 6px;
}
@media only screen and (min-width: 1200px) and (max-width: 1800px) {
    .main-menu > ul {
        gap: 8px 22px;
    }
    .main-menu li a {
        font-size: 15px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1440px) {
    .main-menu > ul {
        gap: 8px 14px;
    }
    .main-menu li a {
        font-size: 14px;
    }
}

/* The second (transparent) header never had the meanmenu hamburger
   wired up like the first header does, so below the theme's own
   1199px breakpoint it kept showing the full desktop row with
   nowhere to put it. Hide that row and lean on the hamburger icon
   (already present, opens the off-canvas menu) instead, matching
   how the first header behaves once meanmenu kicks in. */
@media only screen and (max-width: 1199px) {
    .rs-header-one.header-transparent .header-menu {
        display: none;
    }
}

/* Breadcrumb trail: a little more breathing room under the header,
   and a clearer visual difference between the "Home" link and the
   current page so it reads as a trail rather than two equal blobs
   of text. */
.rs-breadcrumb-one .rs-breadcrumb-wrapper {
    padding-top: 24px;
}
@media only screen and (max-width: 767px) {
    .rs-breadcrumb-one .rs-breadcrumb-wrapper {
        padding-top: 12px;
    }
}
.rs-breadcrumb-one .rs-breadcrumb-menu ul {
    gap: 10px 10px;
}
.rs-breadcrumb-one .rs-breadcrumb-menu ul li {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.rs-breadcrumb-one .rs-breadcrumb-menu ul li a {
    font-weight: 600;
}
.rs-breadcrumb-one .rs-breadcrumb-menu ul li:last-child {
    font-weight: 700;
    color: var(--rs-theme-yellow, #FDB715);
}
.rs-breadcrumb-one .rs-breadcrumb-menu ul li .rs-breadcrumb-icon svg {
    width: 11px;
    height: 11px;
    opacity: .65;
}

/* ---------------------------------------------------------
   Admissions page — eligibility tiles + FAQ accordion
--------------------------------------------------------- */
.rs-lead-constrained {
    max-width: 760px;
}
.rs-eligibility-grid {
    margin-top: 6px;
}
.rs-eligibility-card {
    position: relative;
    height: 100%;
    background: #fff;
    border-radius: 14px;
    padding: 34px 26px 28px;
    box-shadow: 0 6px 22px rgba(31, 42, 53, .08);
    border-top: 4px solid var(--rs-theme-yellow, #FDB715);
    transition: transform .25s ease, box-shadow .25s ease;
}
.rs-eligibility-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(31, 42, 53, .14);
}
.rs-eligibility-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(253, 183, 21, .15);
    color: var(--rs-theme-blue, #3A4A57);
    font-size: 26px;
    margin-bottom: 18px;
}
.rs-eligibility-card h5 {
    font-family: var(--rs-ff-title);
    color: var(--rs-title-primary, #1F2A35);
    font-size: 20px;
    margin-bottom: 10px;
}
.rs-eligibility-card p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--rs-text-primary, #4C4C4C);
    margin: 0;
}
.rs-eligibility-tag {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--rs-theme-blue, #3A4A57);
    background: rgba(58, 74, 87, .08);
    border-radius: 999px;
    padding: 4px 10px;
}

.rs-faq-accordion {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.rs-faq-item {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(31, 42, 53, .06);
    padding: 4px 28px;
    border-left: 3px solid transparent;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.rs-faq-item[open] {
    border-left-color: var(--rs-theme-yellow, #FDB715);
    box-shadow: 0 12px 30px rgba(31, 42, 53, .12);
}
.rs-faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 0;
    font-family: var(--rs-ff-title);
    font-size: 17px;
    font-weight: 600;
    color: var(--rs-title-primary, #1F2A35);
}
.rs-faq-item summary::-webkit-details-marker {
    display: none;
}
.rs-faq-item summary::marker {
    content: "";
}
.rs-faq-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(253, 183, 21, .16);
    color: var(--rs-theme-blue, #3A4A57);
    font-size: 16px;
    transition: transform .25s ease, background .25s ease, color .25s ease;
}
.rs-faq-item[open] .rs-faq-toggle {
    background: var(--rs-theme-yellow, #FDB715);
    color: #fff;
    transform: rotate(45deg);
}
.rs-faq-a {
    padding: 0 0 22px;
    margin-top: -6px;
}
.rs-faq-a p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--rs-text-primary, #4C4C4C);
    margin: 0;
}
@media (max-width: 575px) {
    .rs-faq-item summary {
        font-size: 15.5px;
    }
    .rs-eligibility-card {
        padding: 28px 20px 24px;
    }
}

/* ---------------------------------------------------------
   Beyond Books page
--------------------------------------------------------- */

/* Smooth anchor jumps from the in-page nav, offset so the fixed
   header doesn't cover the section heading you just jumped to. */
html {
    scroll-behavior: smooth;
}
#ecosystem, #stem, #clubs, #podcast-rgmic, #global {
    scroll-margin-top: 120px;
}

/* Intro stat panel */
.rs-stat-panel {
    background: #fff;
    border-radius: 18px;
    padding: 36px 32px;
    box-shadow: 0 14px 34px rgba(31, 42, 53, .08);
}

/* Sticky in-page table of contents */
.rs-toc-nav {
    position: sticky;
    top: 140px;
}
.rs-toc-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rs-toc-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--rs-text-primary, #4C4C4C);
    text-decoration: none;
    transition: background .25s ease, color .25s ease;
}
.rs-toc-nav a .rs-toc-num {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(58, 74, 87, .08);
    color: var(--rs-theme-blue, #3A4A57);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 700;
    transition: background .25s ease, color .25s ease;
}
.rs-toc-nav a:hover {
    background: rgba(253, 183, 21, .12);
    color: var(--rs-title-primary, #1F2A35);
}
.rs-toc-nav a:hover .rs-toc-num {
    background: var(--rs-theme-yellow, #FDB715);
    color: #fff;
}
@media (max-width: 1199px) {
    .rs-toc-nav {
        position: static;
        margin-bottom: 34px;
    }
    .rs-toc-nav ul {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .rs-toc-nav a {
        padding: 9px 14px;
    }
}

/* 4.1 Ecosystem — bento-style grid: three larger feature tiles
   followed by the remaining spaces as standard icon cards. */
.rs-bento-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 22px;
}
.rs-bento-grid .rs-icon-card {
    grid-column: span 2;
    margin-bottom: 0;
}
.rs-bento-feature {
    position: relative;
    grid-column: span 2;
    grid-row: span 2;
    overflow: hidden;
    border-radius: 16px;
    padding: 32px 26px;
    min-height: 230px;
    color: #fff;
    background: linear-gradient(155deg, var(--rs-theme-blue, #3A4A57), var(--rs-theme-blue-two, #2C3846));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform .3s ease, box-shadow .3s ease;
}
.rs-bento-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .18);
}
.rs-bento-feature .rs-bento-index {
    position: absolute;
    top: -8px;
    inset-inline-end: 16px;
    font-family: var(--rs-ff-title);
    font-size: 76px;
    font-weight: 700;
    line-height: 1;
    opacity: .12;
    pointer-events: none;
}
.rs-bento-feature i {
    font-size: 36px;
    color: var(--rs-theme-yellow, #FDB715);
    margin-bottom: 14px;
}
.rs-bento-feature h5 {
    font-family: var(--rs-ff-title);
    font-size: 20px;
    margin-bottom: 8px;
    color: #fff;
}
.rs-bento-feature p {
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
    color: rgba(255, 255, 255, .82);
}
@media (max-width: 991px) {
    .rs-bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .rs-bento-feature {
        grid-row: auto;
        min-height: auto;
    }
    .rs-bento-grid .rs-icon-card {
        grid-column: span 1;
    }
}
@media (max-width: 575px) {
    .rs-bento-grid {
        grid-template-columns: 1fr;
    }
    .rs-bento-feature,
    .rs-bento-grid .rs-icon-card {
        grid-column: span 1;
    }
}

/* 4.2 STEM spotlight band */
.rs-stem-spotlight {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    padding: 46px 42px;
    color: #fff;
    background: linear-gradient(155deg, var(--rs-theme-blue, #3A4A57), var(--rs-theme-blue-two, #2C3846));
}
.rs-stem-spotlight-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
}
.rs-stem-spotlight .rs-stem-icon {
    font-size: 40px;
    color: var(--rs-theme-yellow, #FDB715);
    margin-bottom: 18px;
    display: inline-block;
}
.rs-stem-spotlight p {
    color: rgba(255, 255, 255, .85);
    font-size: 15.5px;
    line-height: 1.75;
}
.rs-stem-chip-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.rs-stem-chip {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    padding: 15px 18px;
}
.rs-stem-chip i {
    flex: 0 0 auto;
    font-size: 21px;
    color: var(--rs-theme-yellow, #FDB715);
}
.rs-stem-chip span {
    font-size: 14px;
    color: rgba(255, 255, 255, .92);
    line-height: 1.5;
}
@media (max-width: 991px) {
    .rs-stem-spotlight-grid {
        grid-template-columns: 1fr;
    }
    .rs-stem-spotlight {
        padding: 34px 26px;
    }
}

/* 4.3 Clubs — pill tabs + activity chip grid */
.rs-activity-tab-nav {
    display: inline-flex;
    background: #fff;
    border-radius: 999px;
    padding: 6px;
    gap: 6px;
    box-shadow: 0 6px 20px rgba(31, 42, 53, .08);
    margin-bottom: 28px;
}
.rs-activity-tab-nav .nav-link {
    border: 0;
    border-radius: 999px;
    padding: 10px 26px;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--rs-title-primary, #1F2A35);
    background: transparent;
    transition: background .25s ease, color .25s ease;
}
.rs-activity-tab-nav .nav-link.active {
    background: var(--rs-theme-blue, #3A4A57);
    color: #fff;
}
@media (max-width: 480px) {
    .rs-activity-tab-nav {
        display: flex;
    }
    .rs-activity-tab-nav .nav-link {
        padding: 10px 14px;
        font-size: 13px;
    }
}

.rs-activity-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.rs-activity-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 250px;
    background: #fff;
    border: 1px solid rgba(31, 42, 53, .08);
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 4px 14px rgba(31, 42, 53, .05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rs-activity-chip:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(31, 42, 53, .1);
    border-color: var(--rs-theme-yellow, #FDB715);
}
.rs-activity-chip-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(253, 183, 21, .15);
    color: var(--rs-theme-blue, #3A4A57);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
.rs-activity-chip strong {
    display: block;
    font-size: 14.5px;
    color: var(--rs-title-primary, #1F2A35);
}
.rs-activity-chip span span {
    display: block;
    font-size: 12.5px;
    color: var(--rs-text-primary, #4C4C4C);
    margin-top: 2px;
}

/* Reusable spotlight card + duo layout — used for the Digital
   Ambassadors highlight and the Podcast Studio / RGMIC pairing. */
.rs-spotlight-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
@media (max-width: 767px) {
    .rs-spotlight-duo {
        grid-template-columns: 1fr;
    }
}
.rs-spotlight-card {
    position: relative;
    border-radius: 18px;
    padding: 42px 36px;
    overflow: hidden;
}
.rs-spotlight-card.is-light {
    background: #fff;
    box-shadow: 0 10px 30px rgba(31, 42, 53, .08);
}
.rs-spotlight-card.is-dark {
    background: linear-gradient(155deg, var(--rs-theme-blue, #3A4A57), var(--rs-theme-blue-two, #2C3846));
    color: #fff;
}
.rs-spotlight-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}
.rs-spotlight-card.is-light .rs-spotlight-icon {
    background: rgba(58, 74, 87, .08);
    color: var(--rs-theme-blue, #3A4A57);
}
.rs-spotlight-card.is-dark .rs-spotlight-icon {
    background: rgba(253, 183, 21, .18);
    color: var(--rs-theme-yellow, #FDB715);
}
.rs-spotlight-card h5 {
    font-family: var(--rs-ff-title);
    font-size: 22px;
    margin-bottom: 14px;
}
.rs-spotlight-card.is-light h5 {
    color: var(--rs-title-primary, #1F2A35);
}
.rs-spotlight-card.is-dark h5 {
    color: #fff;
}
.rs-spotlight-card p {
    font-size: 14.5px;
    line-height: 1.75;
    margin: 0;
}
.rs-spotlight-card p + p {
    margin-top: 14px;
}
.rs-spotlight-card.is-light p {
    color: var(--rs-text-primary, #4C4C4C);
}
.rs-spotlight-card.is-dark p {
    color: rgba(255, 255, 255, .82);
}
.rs-spotlight-tag {
    position: absolute;
    top: 22px;
    inset-inline-end: 24px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
}
.rs-spotlight-card.is-light .rs-spotlight-tag {
    background: rgba(58, 74, 87, .08);
    color: var(--rs-theme-blue, #3A4A57);
}
.rs-spotlight-card.is-dark .rs-spotlight-tag {
    background: rgba(253, 183, 21, .18);
    color: var(--rs-theme-yellow, #FDB715);
}
@media (max-width: 575px) {
    .rs-spotlight-card {
        padding: 32px 24px;
    }
}

/* International partnerships — pill badges */
.rs-partner-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.rs-partner-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid rgba(31, 42, 53, .08);
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--rs-title-primary, #1F2A35);
    box-shadow: 0 4px 14px rgba(31, 42, 53, .05);
}
.rs-partner-badge i {
    color: var(--rs-theme-yellow, #FDB715);
    font-size: 15px;
}

/* International exchanges — horizontal journey timeline */
.rs-journey-track {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding: 8px 4px 22px;
    scroll-snap-type: x proximity;
}
.rs-journey-stop {
    scroll-snap-align: start;
    flex: 0 0 220px;
    position: relative;
    padding-inline-end: 22px;
}
.rs-journey-stop:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 19px;
    inset-inline-start: 40px;
    inset-inline-end: -2px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--rs-theme-yellow, #FDB715) 0 6px, transparent 6px 12px);
}
.rs-journey-year {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--rs-theme-blue, #3A4A57);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    position: relative;
    z-index: 1;
    margin-bottom: 14px;
}
.rs-journey-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 6px 18px rgba(31, 42, 53, .07);
}
.rs-journey-card strong {
    display: block;
    font-size: 14.5px;
    color: var(--rs-title-primary, #1F2A35);
    margin-bottom: 4px;
}
.rs-journey-card span {
    display: block;
    font-size: 12.5px;
    color: var(--rs-text-primary, #4C4C4C);
    line-height: 1.5;
}