/* ===== Variables ===== */
:root {
    --navy: #034D62;
    --navy-rgb: 3, 77, 98;
    --navy-dark: #023746;
    --navy-dark-rgb: 2, 55, 70;
    --green: #32CD32;
    --green-rgb: 50, 205, 50;
    --green-dark: #176B17;
    --green-dark-rgb: 23, 107, 23;
    --green-text: var(--green-dark);
    --green-light: #E8F8E8;
    --green-light-alt: #DDF2DD;
    --green-surface: #F2FAF2;
    --green-border: #CDECCB;
    --green-border-light: #D7EDD7;
    --green-btn: var(--navy);
    --green-btn-hover: var(--navy-dark);
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --text-muted: #5A6B7A;
    --text-on-dark: #C7D6E0;
    --text-muted-on-dark: #9FB3C4;
    --neutral-mid: #AAB7C2;
    --neutral-gray: #CCCCCC;
    --neutral-border: #D3DEE3;
    --neutral-border-light: #E3EAF1;
    --neutral-surface: #E9EDF0;
    --surface-soft: #F7FBF8;
    --white: #FFFFFF;
}

/* ===== Reset ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', Arial, sans-serif;
    color: var(--navy);
    line-height: 1.65;
    background: var(--white);
    background-image: radial-gradient(var(--green-light) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    background-attachment: fixed;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}


h1, h2, h3, h4 {
    font-family: 'Poppins', 'Inter', sans-serif;
}

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

ul {
    list-style: none;
}

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

/* ===== Header / Navbar ===== */
.site-header {
    border-bottom: 1px solid var(--green-light);
    position: sticky;
    top: 0;
    background: rgba(var(--white-rgb), 0.96);
    backdrop-filter: blur(6px);
    z-index: 100;
}

.navbar {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 32px;
}

.nav-collapse {
    display: flex;
    align-items: center;
    gap: 34px;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--navy);
    border-radius: 2px;
}

@media (max-width: 768px) {
    .logo img {
        height: 40px;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-collapse {
        display: none;
        flex-direction: column;
        width: 100%;
        padding: 20px 0 10px;
        gap: 20px;
    }

    .nav-collapse.open {
        display: flex;
    }

    .nav-links {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .navbar {
        flex-wrap: wrap;
    }

    .hero-content h1 {
        font-size: 30px;
    }

    section {
        padding: 64px 20px;
    }

    section h2 {
        font-size: 26px;
    }

    .join-pay {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .join-pay .btn {
        width: 100%;
        text-align: center;
    }

    .home-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .stats-row:not(.stats-row--inline) {
        margin-top: -30px;
        padding: 24px 16px;
    }

    .cta-banner-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-banner-actions .btn {
        width: 100%;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .steam-pathway-arrow .fa-arrow-right {
        transform: rotate(90deg);
        display: inline-block;
    }

    .trusted-logos {
        gap: 16px;
    }

    .trusted-logos .divider {
        display: none;
    }

    .about-hero h1 {
        font-size: 28px;
    }

    .founder-story {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .story-text h2 {
        text-align: center;
        font-size: 24px;
    }

    .avatar-large {
        width: 160px;
        height: 160px;
        font-size: 40px;
    }

    .home-duo-grid {
        grid-template-columns: 1fr;
    }
}

.logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
}

.logo img {
    height: 48px;
    width: auto;
    display: block;
}

.logo-accent {
    color: var(--green-dark);
}

.nav-links {
    display: flex;
    gap: 34px;
}

.nav-links a {
    font-size: 15px;
    font-weight: 500;
    color: var(--navy);
    transition: color 0.2s;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--green);
    transition: width 0.2s;
}

.nav-links a:hover {
    color: var(--green-dark);
}

.nav-links a:hover::after {
    width: 100%;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
}

.btn {
    border: 1.5px solid transparent;
}


.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--navy);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(var(--navy-rgb), 0.2);
}

.btn-primary:hover {
    background: var(--navy-dark);
}

.btn-outline {
    background: transparent;
    color: var(--navy);
    border: 1.5px solid var(--navy);
}

.btn-outline:hover {
    background: var(--navy);
    color: var(--white);
}

.btn:focus-visible,
.nav-links a:focus-visible,
.footer-socials a:focus-visible,
.see-all-link a:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}

.btn-outline-light {
    color: var(--white);
    border-color: rgba(var(--white-rgb), 0.85);
}

.btn-outline-light:hover {
    background: var(--white);
    color: var(--navy);
}

/* ===== Hero ===== */
.hero {
    max-width: 1240px;
    margin: 0 auto;
    padding: 80px 32px 100px;
    background: linear-gradient(180deg, var(--surface-soft) 0%, var(--white) 100%);
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 40px;
    position: relative;
}

.hero-content h1 {
    font-size: 46px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.hero-content p {
    font-size: 17px;
    color: var(--text-muted);
    max-width: 480px;
    margin-bottom: 32px;
}

.hero-actions {
    display: flex;
    gap: 14px;
}

/* ===== Badge ===== */
.badge {
    display: inline-block;
    background: var(--green-light);
    color: var(--green-text);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(var(--green-rgb), 0.2);
}

/* ===== Hero visual ===== */
.hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 340px;
}

.hero-steam {
    color: var(--green-dark);
}

.dot-grid {
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background-image: radial-gradient(var(--green) 2px, transparent 2px);
    background-size: 18px 18px;
    opacity: 0.35;
    z-index: 1;
}

/* ===== Stats row (floating) ===== */
.stats-row {
    max-width: 1000px;
    margin: -60px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    background: var(--white);
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 10px 40px rgba(var(--navy-rgb), 0.1);
    position: relative;
    z-index: 5;
}

.stat-card {
    text-align: center;
    min-width: 140px;
    padding: 0 12px;
}

.stat-number {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--navy);
}

.stat-label {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 6px;
}

.stats-row--inline {
    margin-top: 0;
    margin-bottom: 40px;
    max-width: 100%;
    width: 100%;
}

/* ===== Section shared styles ===== */
section {
    max-width: 1240px;
    margin: 0 auto;
    padding: 100px 32px;
}

section h2 {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.section-subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 48px;
    font-size: 16px;
}

/* ===== Programs grid ===== */
.programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 28px;
}

.program-card {
    background: var(--white);
    border: 1px solid var(--green-light);
    border-radius: 14px;
    padding: 36px 28px;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.program-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(var(--navy-rgb), 0.1);
    border-color: var(--green);
}

.program-card h3 {
    color: var(--navy);
    margin-bottom: 12px;
    font-size: 19px;
    font-weight: 600;
    padding-left: 14px;
    border-left: 3px solid var(--green);
}

.program-card p {
    color: var(--text-muted);
    font-size: 14.5px;
}

.program-detail-card {
    position: relative;
    padding: 2rem;
    border-radius: 20px;
}

.program-detail-card:nth-child(even) {
    background: var(--green-light);
}

.program-number {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 18px;
    z-index: 2;
}

.program-detail-card.reverse .program-number {
    left: auto;
    right: 1.5rem;
}

/* ===== CTA banner ===== */
.cta-banner {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
    color: var(--white);
    text-align: center;
    border-radius: 20px;
    padding: 72px 40px;
    margin: 40px auto 100px;
    position: relative;
    overflow: hidden;
}

.cta-banner h2 {
    color: var(--white);
    font-size: 30px;
}

.cta-banner p {
    color: var(--text-on-dark);
    max-width: 520px;
    margin: 0 auto 28px;
    font-size: 16px;
}

.cta-banner .btn-primary {
    background: var(--navy);
    box-shadow: 0 6px 20px rgba(var(--green-rgb), 0.35);
}

.cta-banner .btn-primary:hover {
    background: var(--navy-dark);
}

.cta-banner-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}

/* ===== Footer ===== */
.site-footer {
    background: var(--navy-dark);
    color: var(--white);
    padding: 40px 24px;
    text-align: center;
}

.footer-brand {
    margin-bottom: 10px;
}

.footer-brand img {
    display: block;
    width: 160px;
    height: 80px;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
}

.footer-copy {
    font-size: 13px;
    color: var(--text-muted-on-dark);
    margin-bottom: 18px;
}

.footer-socials {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.footer-socials a {
    color: var(--green);
    font-size: 18px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--green-rgb), 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

.footer-socials a:hover {
    background: var(--green);
    color: var(--navy-dark);
    transform: translateY(-3px);
    text-decoration: none;
}

.why-item.icon-style {
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    border-width: 1.5px;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.why-item.icon-style:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(var(--navy-rgb), 0.08);
    border-color: var(--green);
}

.why-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--green-light);
    border: 1.5px solid var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--green-dark);
}

/* ===== Mobile responsive ===== */
@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 56px 24px 90px;
    }

    .hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-visual {
        height: auto;
    }

    .wro-spotlight {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .wro-spotlight-content {
        text-align: center;
    }

    .wro-spotlight-logo {
        margin-left: auto;
        margin-right: auto;
    }

    .home-global .wro-spotlight-content h2 {
        text-align: center;
    }

    .section-split,
    .section-split--reverse {
        grid-template-columns: 1fr;
    }

    .section-split-text h2 {
        text-align: center;
    }

    .hero-visual-slot,
    .img-slot--hero {
        max-width: 280px;
        margin: 0 auto;
    }
}

/* ===== Scroll reveal ===== */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

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

    .reveal-delay-1,
    .reveal-delay-2,
    .reveal-delay-3,
    .reveal-delay-4,
    .reveal-delay-5 {
        transition-delay: 0s;
    }

    .btn:hover,
    .build-card:hover,
    .program-card:hover,
    .product-pill:hover {
        transform: none;
    }

    .cta-pulse {
        animation: none;
    }
}

.build-card :is(a, button):focus-visible,
.home-duo-card :is(a, button):focus-visible,
.program-card:focus-visible,
.ecosystem-category:focus-within,
.product-pill:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}

/* ===== WRO spotlight pulse ===== */
.cta-pulse {
    animation: pulseGlow 2.4s ease-in-out infinite;
}

/* ===== WRO Spotlight ===== */
.wro-spotlight-logo {
    width: 180px;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

.wro-spotlight {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
    border-radius: 20px;
    padding: 48px 40px;
    text-align: center;
    color: var(--white);
}

.badge-flagship {
    background: var(--green);
    color: var(--navy-dark);
    border: none;
}

.wro-spotlight h2,
.wro-spotlight h3 {
    font-size: 24px;
    margin-bottom: 12px;
    color: var(--white);
}

.wro-spotlight p {
    color: var(--text-on-dark);
    max-width: 500px;
    margin: 0 auto 24px;
    font-size: 15px;
}

/* ===== Trusted By ===== */
.trusted-by {
    background: var(--surface-soft);
    border: 1px solid var(--green-light);
    border-radius: 20px;
    text-align: center;
    padding: 48px 32px;
}

.trusted-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 24px;
    text-transform: uppercase;
}

.trusted-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.trusted-logos span:not(.divider) {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    opacity: 0.7;
}

.trusted-logos .divider {
    width: 1px;
    height: 18px;
    background: var(--neutral-border);
}

/* ===== See all link ===== */
.see-all-link {
    text-align: center;
    margin-top: 32px;
}

.see-all-link a {
    color: var(--green-text);
    font-weight: 600;
    font-size: 15px;
}

.see-all-link a:hover {
    text-decoration: underline;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--green-rgb), 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(var(--green-rgb), 0); }
}

/* ===== About Hero ===== */
.about-hero {
    text-align: center;
    max-width: 700px;
}

.about-hero h1 {
    font-size: 40px;
    margin-bottom: 16px;
    line-height: 1.25;
}

.about-hero p {
    font-size: 17px;
    color: var(--text-muted);
}

.join-thanks-hero {
    padding-bottom: 32px;
}

.join-thanks-hero p {
    margin-bottom: 12px;
}

.join-thanks-hero p:last-child {
    margin-bottom: 0;
}

.join-thanks-hero .join-thanks-fee {
    font-size: 19px;
    font-weight: 700;
}

.join-thanks-payment,
.join-thanks-actions {
    padding-top: 24px;
    padding-bottom: 48px;
}

.join-thanks-payment {
    max-width: 700px;
}

.join-pay {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.join-pay .btn {
    align-self: center;
}

.join-refund-link {
    margin-top: 0;
    text-align: center;
}

.join-pay-secondary {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
}

.join-cash-note {
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
}

.contact-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 4px;
    font-size: 16px;
}

/* ===== Mission / Vision ===== */
.mission-vision {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    padding-top: 0;
}

.mv-card {
    background: var(--green-light);
    border-radius: 16px;
    padding: 36px 32px;
}

.mv-label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--green-text);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.mv-card p {
    color: var(--navy);
    font-size: 16px;
    line-height: 1.7;
}

/* ===== Values ===== */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.value-card {
    border: 1px solid var(--green-light);
    border-radius: 14px;
    padding: 28px 24px;
    transition: transform 0.25s, box-shadow 0.25s;
}

.value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(var(--navy-rgb), 0.08);
}

.value-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: var(--navy);
}

.value-card p {
    font-size: 14px;
    color: var(--text-muted);
}

/* ===== Timeline ===== */
.timeline {
    background: var(--surface-soft);
    max-width: 100%;
    border-radius: 0;
}

.timeline-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.timeline-item {
    background: var(--white);
    border-radius: 14px;
    padding: 28px 24px;
    text-align: center;
    border-top: 4px solid var(--green);
    box-shadow: 0 6px 20px rgba(var(--navy-rgb), 0.06);
}

.timeline-year {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 10px;
}

.timeline-item p {
    font-size: 14px;
    color: var(--text-muted);
}

/* ===== Founder Story ===== */
.founder-story {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 48px;
    align-items: center;
}

.story-image {
    display: flex;
    justify-content: center;
}

.avatar-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--green-light);
    border: 2px dashed var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: var(--green-dark);
    margin: 0 auto 16px;
}

.avatar-large {
    width: 220px;
    height: 220px;
    font-size: 56px;
    margin: 0;
}

.story-text h2 {
    text-align: left;
    font-size: 28px;
    margin: 8px 0 20px;
}

.story-text p {
    color: var(--text-muted);
    font-size: 16px;
    margin-bottom: 16px;
    line-height: 1.75;
}

/* ===== Why Us checklist ===== */
.why-list {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.why-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--white);
    border: 1px solid var(--green-light);
    border-radius: 12px;
    padding: 18px 22px;
}

.why-check {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--green);
    color: var(--navy-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.why-item p {
    color: var(--navy);
    font-size: 15px;
    margin: 0;
}

/* ===== Approach ===== */
.approach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 28px;
}

.approach-card {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
    border-radius: 16px;
    padding: 32px 28px;
    color: var(--white);
}

.approach-number {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--green);
    margin-bottom: 12px;
}

.approach-card h3 {
    font-size: 19px;
    margin-bottom: 10px;
}

.approach-card p {
    color: var(--text-on-dark);
    font-size: 14.5px;
}

/* ===== Team ===== */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
    text-align: center;
}

.team-card {
    padding: 24px 16px;
    border: 1px solid var(--green-light);
    border-radius: 14px;
    transition: transform 0.25s, box-shadow 0.25s;
}

.team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(var(--navy-rgb), 0.08);
}

.team-card h3 {
    font-size: 16px;
    margin-bottom: 4px;
    color: var(--navy);
}

.team-role {
    font-size: 13px;
    color: var(--text-muted);
}

/* ===== Responsive image slots (home) ===== */
.img-slot {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(145deg, var(--green-light) 0%, var(--green-light-alt) 100%);
}

.img-slot__placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(var(--navy-rgb), 0.06) 0%, rgba(var(--green-rgb), 0.12) 100%);
}

.img-slot__placeholder--dark {
    background: linear-gradient(145deg, rgba(var(--navy-dark-rgb), 0.5) 0%, rgba(var(--green-rgb), 0.2) 100%);
}

.img-slot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.img-slot--hero {
    aspect-ratio: 5 / 4;
    max-width: 420px;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(var(--navy-rgb), 0.25);
    z-index: 2;
}

.img-slot--hero img {
    border-radius: 20px;
}

.img-slot--story {
    aspect-ratio: 16 / 10;
    margin-bottom: 16px;
}

/* Hero photo */
.hero-photo {
    width: 100%;
    max-width: 420px;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(var(--navy-rgb), 0.25);
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

.hero-visual-slot {
    width: 100%;
    max-width: 420px;
}

/* ===== Home page sections ===== */
.home-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.section-decor {
    position: relative;
    overflow: hidden;
}

.section-decor > :not(.dot-grid--section) {
    position: relative;
    z-index: 1;
}

.dot-grid--section {
    opacity: 0.18;
    width: 96px;
    height: 96px;
    z-index: 0;
    pointer-events: none;
}

.dot-grid--section-tr {
    top: 24px;
    right: 32px;
    left: auto;
    bottom: auto;
}

.dot-grid--section-bl {
    bottom: 32px;
    left: 24px;
    top: auto;
    right: auto;
}

.section-tint {
    background: var(--green-surface);
    max-width: 100%;
    border-radius: 0;
    border-top: 1px solid var(--green-light);
    border-bottom: 1px solid var(--green-light);
}


.section-tint,
.steam-pathway {
    padding-left: max(24px, calc((100% - 1176px) / 2));
    padding-right: max(24px, calc((100% - 1176px) / 2));
}

.section-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.section-split-text h2 {
    text-align: left;
    font-size: 28px;
    margin-bottom: 16px;
}

.section-split-text p {
    color: var(--text-muted);
    margin-bottom: 20px;
    font-size: 16px;
}

.section-split-text .btn {
    margin-top: 8px;
}

.section-cta-wrap {
    text-align: center;
    margin-top: 36px;
}

.build-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.build-card {
    background: var(--white);
    border: 1px solid var(--green-light);
    border-radius: 14px;
    padding: 28px 24px;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.build-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(var(--navy-rgb), 0.08);
    border-color: var(--green);
}

.build-card h3 {
    font-size: 18px;
    margin: 16px 0 10px;
    color: var(--navy);
}

.build-card p {
    font-size: 14.5px;
    color: var(--text-muted);
    margin: 0;
}

.steam-pathway {
    background: var(--green-light);
    max-width: 100%;
    border-radius: 0;
}

.steam-pathway-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    max-width: 720px;
    margin: 0 auto 32px;
}

.steam-pathway-step {
    text-align: center;
    max-width: 320px;
}

.steam-pathway-step h3 {
    font-size: 20px;
    margin: 12px 0 8px;
    color: var(--navy);
}

.steam-pathway-step p {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0;
}

.steam-pathway-icon {
    margin: 0 auto;
}

.steam-pathway-arrow {
    color: var(--green-dark);
    font-size: 22px;
    line-height: 1;
}

.steam-pathway-closing {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    font-size: 16px;
    color: var(--navy);
    line-height: 1.7;
}

.pricing-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.pricing-chip {
    display: inline-block;
    background: var(--white);
    color: var(--green-text);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid rgba(var(--green-rgb), 0.35);
}

.tick-list-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px 16px;
    margin-bottom: 24px;
}

.tick-list-compact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--navy);
}

.tick-list-compact li i {
    color: var(--green);
    margin-top: 3px;
    flex-shrink: 0;
}

.home-global.wro-spotlight {
    margin-left: auto;
    margin-right: auto;
    padding: 48px 40px;
}

.home-global .wro-spotlight-content h2 {
    text-align: left;
}

.action-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.action-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--green-light);
    color: var(--navy);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 24px;
    border: 1px solid rgba(var(--green-rgb), 0.25);
}

.action-chip i {
    color: var(--green-dark);
}

.home-duo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: stretch;
}

.home-duo-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0;
    overflow: hidden;
}

.home-duo-card-body {
    padding: 28px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.home-duo-card-body h2 {
    text-align: left;
    font-size: 22px;
    margin-bottom: 12px;
}

.home-duo-card-body p {
    color: var(--text-muted);
    font-size: 15px;
    margin-bottom: 16px;
    flex: 1;
}

.home-duo-card--university {
    background: var(--green-light);
}

.home-duo-card--university .home-duo-card-body {
    padding-top: 32px;
}

.home-duo-card-icon {
    margin-bottom: 16px;
}

.img-slot--innovators-card {
    aspect-ratio: 16 / 10;
    border-radius: 14px 14px 0 0;
}

.product-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 820px;
    margin: 0 auto;
}

.product-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border: 1px solid var(--green-light);
    border-radius: 999px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.product-pill i {
    color: var(--green-dark);
}

.product-pill:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(var(--navy-rgb), 0.08);
    border-color: var(--green);
}

.ecosystem-category-icon {
    margin-bottom: 12px;
}

.story-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.story-card {
    background: var(--white);
    border: 1px solid var(--green-light);
    border-radius: 14px;
    padding: 20px;
}

.story-card-placeholder {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    margin: 0;
}

.trusted-by--home {
    margin-bottom: 40px;
    padding: 36px 24px;
}

.ecosystem-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.ecosystem-category {
    flex: 1 1 220px;
    max-width: 360px;
}

.ecosystem-category h3 {
    font-size: 16px;
    margin-bottom: 8px;
    color: var(--navy);
}

.ecosystem-category p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}

@media (min-width: 769px) {
    .steam-pathway-steps {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        max-width: 1000px;
        gap: 16px;
    }

    .steam-pathway-step {
        flex: 1;
    }

    .steam-pathway-arrow {
        margin-top: 48px;
    }

    .section-split--reverse .section-split-text {
        order: 2;
    }

    .section-split--reverse .img-slot {
        order: 1;
    }
}

/* ===== WRO spotlight with photo ===== */
.wro-spotlight {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 32px;
    text-align: left;
}

.wro-spotlight-content {
    text-align: left;
}

.wro-spotlight-content p {
    margin: 0 0 24px;
}

.wro-spotlight-image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(var(--black-rgb), 0.3);
}
.wro-spotlight-image .photo-placeholder {
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(var(--black-rgb), 0.3);
    min-height: 260px;
}

.photo-placeholder {
    background: var(--green-light);
    border: 2px dashed var(--green);
    border-radius: 12px;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
}

.program-detail-card {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    margin-bottom: 3rem;
}

.program-detail-card.reverse {
    flex-direction: row-reverse;
}

.program-detail-card .photo-placeholder,
.program-detail-card .program-detail-text {
    flex: 1;
}

.contact-section {
    display: flex;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
    padding:0 1.5rem 4rem;
}
.contact-form-wrap {
    background: var(--white);
    border: 1px solid var(--green-light);
    border-radius: 16px;
    padding: 32px 28px;
    box-shadow: 0 6px 20px rgba(var(--navy-rgb), 0.06);
}


.contact-info {
    background: var(--green-light);
    border-radius: 16px;
    padding: 32px 28px;
    align-self: flex-start;
}

.contact-info h3 {
    margin-bottom: 20px;
    font-size: 20px;
}

.contact-info p {
    margin-bottom: 12px;
    color: var(--navy);
}

.contact-info .footer-socials {
    justify-content: flex-start;
    margin-top: 20px;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
    font-family: 'Inter', sans-serif;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.7rem;
    border: 1px solid var(--neutral-gray);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
}

.form-success {
    background: var(--green-light);
    color: var(--green-text, var(--green-dark));
    padding: 0.8rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-weight: 600;
}


.logo {
    flex-shrink: 0;
    margin-right: 32px;
}

.nav-links {
    gap: 24px;
}

.nav-links a {
    white-space: nowrap;
    font-size: 14.5px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
    margin-bottom: 18px;
}

.footer-links a {
    color: var(--text-on-dark);
    font-size: 14px;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--white);
}

.footer-links a:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
}

.footer-socials a:focus-visible {
    outline-color: var(--green);
}

@media (min-width: 769px) and (max-width: 1100px) {
    .nav-links {
        gap: 12px;
    }

    .nav-links a {
        font-size: 13px;
    }
}

.mindset-how {
    scroll-margin-top: 100px;
}

.mindset-level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.mindset-level-card {
    padding: 24px 16px;
    border: 1px solid var(--green-light);
    border-radius: 14px;
    background: var(--white);
    text-align: center;
}

.mindset-level-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--green-light);
    color: var(--green-text);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.mindset-level-card h3 {
    margin-bottom: 8px;
    color: var(--navy);
    font-size: 17px;
}

.mindset-level-card p {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0;
}

.mindset-level-note {
    margin: 24px auto 0;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.mindset-pricing {
    padding-top: 64px;
    padding-bottom: 64px;
}

.mindset-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    max-width: 900px;
    margin: 32px auto 0;
}

.mindset-pricing-card {
    padding: 32px 24px;
    border: 1px solid rgba(var(--green-rgb), 0.25);
    border-radius: 16px;
    background: var(--white);
    text-align: center;
}

.mindset-pricing-label {
    color: var(--green-text);
    font-size: 15px;
    font-weight: 600;
}

.mindset-pricing-amount {
    margin: 12px 0 4px;
    color: var(--navy);
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 700;
}

.mindset-pricing-detail {
    display: inline-block;
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 14px;
}

.why-steam > p {
    max-width: 780px;
    margin: 0 auto 24px;
    color: var(--text-muted);
    line-height: 1.75;
}

.why-steam-quote {
    max-width: 780px;
    margin: 0 auto;
    padding: 20px 24px;
    border-left: 4px solid var(--green);
    border-radius: 0 12px 12px 0;
    background: var(--green-light);
    color: var(--navy);
    font-weight: 600;
    line-height: 1.7;
}

.about-ecosystem .ecosystem-category {
    padding: 24px 20px;
    border: 1px solid var(--green-light);
    border-radius: 14px;
    background: var(--white);
    text-align: center;
}

.about-ecosystem .ecosystem-category-icon {
    margin-left: auto;
    margin-right: auto;
}

.team-card-feature {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 24px;
}

.team-card-tags {
    justify-content: center;
    margin: 20px 0 0;
}

/* ===== For schools: adopt grid (1 / 2 / 3 columns) ===== */
.build-cards-grid.adopt-grid {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .build-cards-grid.adopt-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 980px) {
    .build-cards-grid.adopt-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===== Global Opportunities page ===== */
#ways-to-take-part {
    scroll-margin-top: 100px;
}

.about-hero .hero-actions {
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 28px;
}

/* Nav spacing shortened so the longer nav stays on one line at about 1024px */
@media (min-width: 769px) and (max-width: 1100px) {
    .nav-collapse {
        gap: 20px;
    }

    .logo {
        margin-right: 16px;
    }
}

/* ===== Home page mobile layout =====
   These desktop grid rules are declared later in the file than the old
   mobile rules, so they were winning at every width. Reassert them here,
   at the end of the file, where the cascade finally lets them apply. */
@media (max-width: 768px) {
    .home-duo-grid,
    .home-mindset-learn .section-split,
    .home-for-schools .section-split,
    .home-global.wro-spotlight,
    .home-build .build-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Shared mobile stacking =====
   The desktop grid rules for these two sections are declared later in the
   file than their original mobile rules, so the desktop rules were winning
   at every width (horizontal scrolling on About and Mindset Learn at 375px,
   a crushed image column on For Schools). Restated here at the end of the
   file, where the cascade finally lets them apply. */
@media (max-width: 768px) {
    .founder-story,
    .section-split {
        grid-template-columns: 1fr;
    }
}

/* ===== Header nav below 1000px =====
   The two-row wrap band that used to cover 769px to 960px has been removed
   and replaced by a single break point: below 1000px the nav collapses into
   the hamburger, and from 1000px up the nav is one single row. Same
   declarations as the mobile block at the top of the file, just applied
   over the wider band. */
@media (max-width: 999px) {
    .nav-toggle {
        display: flex;
    }

    .nav-collapse {
        display: none;
        flex-direction: column;
        width: 100%;
        padding: 20px 0 10px;
        gap: 20px;
    }

    .nav-collapse.open {
        display: flex;
    }

    .nav-links {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .navbar {
        flex-wrap: wrap;
    }

}

/* ===== Colour contrast ===== */
.cta-banner .btn-primary {
    background: var(--navy);
}

.cta-banner .btn-primary:hover {
    background: var(--navy-dark);
}

.hero-steam {
    color: var(--green-dark);
}

.badge-flagship {
    color: var(--navy-dark);
}

/* ===== Header nav from 1101px to 1150px =====
   The tightened nav rules above stop at 1100px, but the default spacing
   only fits at about 1137px, so between 1101px and 1136px the single-row
   nav still pushed the page into horizontal scrolling. Carry the same
   tightening a little further; from 1151px up the default spacing fits. */
@media (min-width: 1101px) and (max-width: 1150px) {
    .nav-collapse {
        gap: 20px;
    }

    .nav-links {
        gap: 12px;
    }

    .nav-links a {
        font-size: 13px;
    }

    .logo {
        margin-right: 16px;
    }
}

/* ===== Older pages: mobile stacking =====
   These rows had no mobile rule (or their desktop rule was declared after
   the old mobile one), so at 375px they stayed side by side and overflowed
   the viewport. */
@media (max-width: 768px) {
    .program-detail-card,
    .program-detail-card.reverse {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }

    .contact-section {
        flex-direction: column;
        gap: 24px;
        padding: 0 20px 4rem;
    }

    .wro-spotlight {
        grid-template-columns: 1fr;
    }
}

/* ===== Innovators' Circle page ===== */

/* Anchor targets clear the sticky header */
#ways-to-support,
#featured-innovators {
    scroll-margin-top: 100px;
}

/* Support cards: one column on mobile, two on tablet, four on wide desktop */
.build-cards-grid.support-grid {
    grid-template-columns: 1fr;
    margin-top: 36px;
}

@media (min-width: 640px) {
    .build-cards-grid.support-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .build-cards-grid.support-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Small button used inside the support and profile cards */
.btn-sm {
    padding: 9px 18px;
    font-size: 13px;
}

.build-card .btn-sm {
    margin-top: 16px;
}

/* Soft centred empty state card */
.innovators-empty {
    max-width: 560px;
    margin: 0 auto;
}

.innovators-empty p {
    margin-top: 14px;
    color: var(--text-muted);
}

/* Labelled fields on the profile card (markup kept in a comment until
   real profiles are available) */
.innovator-field {
    margin-bottom: 14px;
}

/* ===== Six step pathway =====
   Below 769px the steps stack vertically with the arrows rotated, as on
   Home. Between 769px and 1099px six steps and their arrows do not fit on
   one line, so each item is sized to exactly one fifth of the row: the row
   then always breaks after the third step, the arrow that would start the
   second row is dropped, and a centred down arrow links the two rows.
   From 1100px the six steps sit on a single row. */
.steam-pathway-break {
    display: none;
}

@media (min-width: 769px) and (max-width: 1099px) {
    .steam-pathway-steps.circle-pathway {
        flex-wrap: wrap;
    }

    .circle-pathway .steam-pathway-step {
        flex: 0 0 calc((100% - 64px) / 5);
    }

    .circle-pathway .steam-pathway-arrow {
        flex: 0 0 calc((100% - 64px) / 5);
        text-align: center;
    }

    .circle-pathway .steam-pathway-arrow-mid {
        display: none;
    }

    .circle-pathway .steam-pathway-break {
        display: block;
        flex: 0 0 100%;
        margin-top: 0;
        text-align: center;
    }
}

/* ===== University Preparation page ===== */

/* Anchor target clears the sticky header */
#what-you-can-prepare-for {
    scroll-margin-top: 100px;
}

/* Use navy for buttons so white text remains high contrast. */
.btn-green {
    background: var(--green-btn);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(var(--navy-rgb), 0.3);
}

.btn-green:hover {
    background: var(--green-btn-hover);
}

/* Grey placeholder block until the Prep Genius logo asset arrives */
.logo-placeholder {
    background: var(--neutral-surface);
    border: 1px solid var(--neutral-border);
    border-radius: 16px;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 600;
}

/* Cards sit below the section heading */
.build-cards-grid.prep-grid {
    margin-top: 36px;
}

/* ===== Our Ecosystem page ===== */

/* Anchor target clears the sticky header */
#partner-categories {
    scroll-margin-top: 100px;
}

/* The whole card is the link, so give it the sitewide focus ring */
a.build-card:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
}

/* Existing partner named inside a category block */
.build-card .partner-name {
    margin-top: 12px;
    color: var(--navy);
    font-weight: 600;
}

/* Grey logo placeholder sits below the category text */
.build-card .logo-placeholder {
    margin-top: 16px;
}

/* ===== Contact and Get Started page ===== */

/* Anchor target from the route cards clears the sticky header */
#contact-form {
    scroll-margin-top: 100px;
}

/* ===== Shop page ===== */

/* Anchor target from the hero button clears the sticky header */
#products {
    scroll-margin-top: 100px;
}

/* The photo placeholder is the first block in each product tile */
#products .build-card .logo-placeholder {
    margin-top: 0;
}

/* ===== Impact and Stories page ===== */

/* Placeholder label sits below the story line */
.build-card .story-card-placeholder {
    margin-top: 14px;
}

/* ===== Contact save: error level message ===== */

/* Same message box as .form-success, in a palette colour so it cannot be
   mistaken for the success state. White on --navy is about 13:1 contrast. */
.form-success.form-error {
    background: var(--navy);
    color: var(--white);
}

/* ===== Round 2: old pages merged into the new sections ===== */

/* Anchor targets from the old page redirects clear the sticky header */
#programs,
#teacher-training,
#how-competitions-work {
    scroll-margin-top: 100px;
}

/* Cards sit below the section heading when there is no intro line */
#how-competitions-work .build-cards-grid {
    margin-top: 36px;
}

/* The see-all-link green is for light backgrounds and only reaches about
   2.4:1 on the navy gradient, so white is used instead (about 13:1). */
.cta-banner .see-all-link a {
    color: var(--white);
}

/* ===== For Schools: How It Works photo ===== */

/* The block this replaced had no aspect box, so the photo gets its own:
   width fills the column, height follows the 3 / 2 ratio, and cover crops
   the 900x600 file without distortion or a layout jump while loading. */
.story-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 16px;
}

/* ===== Standalone photo slot on inner pages ===== */

/* The default .img-slot box is 4 / 3; these slots hold 3 / 2 photos, so the
   box follows the photo shape (cover then crops nothing) and the top margin
   separates the photo from the card grid above, which has no bottom gap. */
.img-slot--wide {
    aspect-ratio: 3 / 2;
    margin-top: 32px;
}

/* ===== Share your story page ===== */

/* The form is the only column in its row, so it is capped and centred
   instead of stretching across the whole contact section */
.story-form-wrap {
    flex: 1;
    max-width: 720px;
    margin: 0 auto;
}

/* Spam trap: one pixel off screen, outside the tab order */
.honeypot-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Field problems use the same navy box as the form error message */
.errorlist {
    background: var(--navy);
    color: var(--white);
    border-radius: 8px;
    padding: 6px 12px 6px 30px;
    margin: 0 0 8px;
    font-size: 13.5px;
}

/* Small grey helper line under a field */
.field-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin: 6px 0 0;
}

/* Consent: the tick sits beside its long label instead of stretching to
   the full field width, which the shared input rule above would give it */
.form-group input[type="checkbox"] {
    width: auto;
}

.form-group .consent-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.consent-label input[type="checkbox"] {
    margin-top: 4px;
    flex-shrink: 0;
}

/* Story paragraphs keep a gap between them (the card rule sets paragraph
   margins to 0) and long unbroken words cannot push the page sideways */
.story-text {
    overflow-wrap: anywhere;
}

.story-text p {
    margin-bottom: 10px;
}

.story-text p:last-child {
    margin-bottom: 0;
}

/* Photos note above the submit button */
.photos-note {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}

/* Short reassurance line under the Share your story button */
.story-share-note {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 12px;
}

/* ===== Story review (team pages) ===== */

/* Head row: heading on the left, actions on the right, wrapping on phones */
.review-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.review-head h1 {
    margin-bottom: 0;
}

.review-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.review-head-actions form {
    margin-bottom: 0;
}

/* Status tabs with their counts */
.review-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.review-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    border: 1.5px solid var(--navy);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    transition: all 0.2s;
}

.review-tab:hover {
    transform: translateY(-2px);
}

.review-tab--active {
    background: var(--navy);
    color: var(--white);
}

.review-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    background: rgba(var(--white-rgb), 0.2);
    font-size: 13px;
}

.review-tab:not(.review-tab--active) .review-tab-count {
    background: var(--navy);
    color: var(--white);
}

/* Short reminder of what to check before approving a story */
.review-help {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 1.5rem;
}

/* One card per waiting story */
.review-card {
    background: var(--white);
    border: 1px solid var(--neutral-border-light);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.review-card-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}

.review-card-head .mv-label {
    margin-bottom: 0;
}

.review-card-meta {
    font-size: 14px;
    color: var(--text-muted);
}

/* Private details only this team page shows */
.review-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: 0 0 14px;
}

.review-facts dt {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.review-facts dd {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* The reply link sits on its own line before the form */
.review-mail-row {
    margin-bottom: 4px;
}

.review-mail {
    font-size: 14.5px;
    font-weight: 600;
}

/* Buttons wrap onto new lines on a phone and stay easy to tap */
.review-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.review-buttons .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===== STEAM Experience announcement strip (Home only) ===== */
/* Shown only while STEAM_EXPERIENCE_PUBLIC is True */
.steam-strip {
    background: var(--navy);
    color: var(--white);
    text-align: center;
    padding: 10px 20px;
    font-size: 15px;
    line-height: 1.5;
}

.steam-strip a {
    color: var(--white);
    font-weight: 700;
    text-decoration: underline;
    margin-left: 6px;
    /* Comfortable to tap on a phone */
    display: inline-block;
    padding: 10px 4px;
}

/* ===== STEAM Experience page ===== */
.steam-page {
    max-width: 1240px;
    margin: 0 auto;
    padding-bottom: 0;
}

.steam-page .btn:not(.btn-outline):not(.btn-outline-light) {
    min-height: 44px;
    border-color: var(--navy);
    background: var(--navy);
    color: var(--white);
}

.steam-page .btn:not(.btn-outline):not(.btn-outline-light):hover {
    background: var(--navy-dark);
    color: var(--white);
}

.steam-hero {
    max-width: none;
    padding: 64px 32px 76px;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
    color: var(--white);
    text-align: center;
}

.steam-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 40px;
    max-width: 1160px;
    margin: 0 auto;
}

.steam-hero-copy {
    min-width: 0;
}

.steam-hero h1 {
    color: var(--white);
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
}

.steam-hero p {
    max-width: 720px;
    margin-right: auto;
    margin-left: auto;
    color: var(--white);
    font-family: 'Inter', sans-serif;
    font-size: 17px;
}

.steam-hero-facts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 20px;
}

.steam-hero-facts span {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.steam-hero-facts i {
    flex: 0 0 auto;
    margin-top: 5px;
    color: var(--green);
}

.steam-hero-image {
    width: 100%;
    max-width: none;
    aspect-ratio: 3 / 2;
    border-radius: 20px;
}

.steam-hero-image img {
    border-radius: 20px;
}

.steam-hero-actions,
.steam-final-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.steam-hero .section-cta-wrap {
    margin-top: 24px;
}

.steam-hero .btn {
    min-height: 48px;
}

.steam-hero .btn-primary {
    border: 1.5px solid var(--navy);
    background: var(--navy);
    color: var(--white);
}

.steam-hero .btn-outline-light {
    border: 1.5px solid var(--white);
    background: transparent;
    color: var(--white);
}

.steam-hero .btn-primary:hover {
    background: var(--navy-dark);
}

.steam-experience-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.steam-experience-card {
    min-width: 0;
    overflow: hidden;
    padding: 0;
    text-align: left;
}

.steam-experience-image {
    aspect-ratio: 3 / 2;
    border-radius: 14px 14px 0 0;
}

.steam-experience-image img {
    border-radius: 14px 14px 0 0;
}

.steam-experience-card-copy {
    padding: 20px;
}

.steam-experience-card h3 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--navy);
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
}

.steam-experience-card h3 i {
    flex: 0 0 auto;
    margin-top: 4px;
    color: var(--green-text);
}

.steam-experience-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

.steam-page .home-section {
    padding: 48px 32px;
}

.steam-glance-title,
.steam-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.steam-page .steam-glance {
    position: relative;
    z-index: 2;
    margin-top: -32px;
    padding: 0 32px 8px;
}

.steam-glance-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.steam-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 54px;
    padding: 12px 14px;
    border: 1px solid var(--green-border);
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 3px 12px rgba(var(--navy-rgb), 0.07);
    color: var(--navy);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.steam-chip i {
    flex: 0 0 auto;
    color: var(--green);
}

.steam-page .steam-journey {
    padding-top: 32px;
}

.steam-stage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 16px;
}

.steam-stage-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
    height: 100%;
    padding: 24px;
    border-top: 0;
    text-align: left;
}

.steam-stage-register {
    width: 100%;
    margin-top: auto;
    text-align: center;
}

.steam-stage-head {
    display: flex;
    align-items: center;
    gap: 16px;
    width: calc(100% + 48px);
    min-height: 88px;
    margin: -24px -24px 6px;
    padding: 16px 24px;
    border-radius: 13px 13px 0 0;
    background: var(--green);
    color: var(--navy-dark);
}

.steam-stage-head h3 {
    margin: 0;
    color: var(--navy-dark);
    font-family: 'Poppins', sans-serif;
}

.steam-stage-card--2 .steam-stage-head {
    background: var(--green-dark);
    color: var(--white);
}

.steam-stage-card--2 .steam-stage-head h3,
.steam-stage-card--2 .steam-stage-number,
.steam-stage-card--3 .steam-stage-head h3,
.steam-stage-card--3 .steam-stage-number {
    color: var(--white);
}

.steam-stage-card--3 .steam-stage-head {
    background: var(--navy);
    color: var(--white);
}

.steam-stage-number {
    flex: 0 0 auto;
    color: var(--navy-dark);
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    user-select: none;
}

.steam-stage-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.steam-stage-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.steam-stage-meta i {
    color: var(--green);
}

.steam-stage-fee {
    margin: 2px 0;
    color: var(--navy);
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.steam-stage-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin: auto 0 0;
    padding: 12px;
    border-radius: 10px;
    background: var(--green-light);
    color: var(--navy);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.steam-stage-note i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--green);
}

.steam-stage-prerequisite {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

.steam-break {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
    color: var(--text-muted);
    text-align: center;
}

.steam-break::before,
.steam-break::after {
    flex: 1 1 0;
    border-top: 2px dashed var(--green);
    content: '';
}

.steam-break-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.steam-weeks {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid var(--green-border-light);
    border-radius: 14px;
    background: var(--white);
}

.steam-weeks-title {
    margin: 0 0 12px;
    color: var(--navy);
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
}

.steam-weeks-bar {
    display: flex;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    min-height: 18px;
}

.steam-week {
    flex: 1 1 0;
    min-width: 0;
    min-height: 18px;
    border-radius: 5px;
    background: var(--green);
}

.steam-week--discover {
    background: var(--green);
}

.steam-week--build {
    background: var(--green);
}

.steam-week--innovate {
    background: var(--navy);
}

.steam-week-gap {
    flex: 0 0 10px;
    min-height: 18px;
    border-left: 2px dashed var(--text-muted);
}

.steam-full-journey {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 24px;
    padding: 28px;
    border: 2px solid var(--green-border);
    border-left: 7px solid var(--green);
    border-radius: 18px;
    background: var(--green-light);
    box-shadow: 0 8px 24px rgba(var(--navy-rgb), 0.12);
}

.steam-full-journey-main {
    flex: 1 1 300px;
    min-width: 0;
}

.steam-full-journey h3,
.steam-included h3,
.steam-payment-options h3 {
    color: var(--navy);
    font-family: 'Poppins', sans-serif;
}

.steam-full-journey-main h3 {
    margin-bottom: 6px;
}

.steam-full-journey-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 0;
    color: var(--navy);
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.steam-full-journey-includes {
    margin: 8px 0 0;
    color: var(--navy);
    font-weight: 600;
}

.steam-full-journey-note {
    color: var(--text-muted);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.steam-saving-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--navy);
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.steam-discount-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 100%;
    margin: 0;
    color: var(--navy);
    font-size: 14px;
    line-height: 1.5;
}

.steam-journey > .steam-discount-note {
    margin-top: 20px;
}

.steam-full-register {
    flex: 0 0 auto;
    min-height: 52px;
    padding-right: 24px;
    padding-left: 24px;
    font-size: 16px;
    font-weight: 700;
}

.steam-discount-note i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--green);
}

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

.steam-payment-card,
.steam-included {
    min-width: 0;
    margin: 0;
    padding: 24px;
    border: 1px solid var(--green-border-light);
    border-radius: 14px;
    background: var(--white);
}

.steam-payment-card h3,
.steam-included h3 {
    margin-bottom: 12px;
    color: var(--navy);
    font-family: 'Poppins', sans-serif;
}

.steam-payment-options p {
    margin: 0;
    color: var(--navy);
    font-size: 15px;
    overflow-wrap: anywhere;
}

.steam-included {
    margin-top: 20px;
}

.steam-payment-card.steam-included {
    margin-top: 0;
}

.steam-contact {
    border: 1px solid var(--green-border);
    border-radius: 16px;
    background: var(--green-light);
}

.steam-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    max-width: 840px;
    margin: 24px auto 0;
}

.steam-contact-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.steam-contact-actions p {
    margin: 0;
}

.steam-contact-actions .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    width: 100%;
    border: 1.5px solid var(--navy);
    background: var(--navy);
    color: var(--white);
}

.steam-contact-actions .btn:hover {
    background: var(--navy-dark);
}

.steam-contact-details {
    color: var(--navy);
    font-size: 15px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.steam-contact-details p + p {
    margin-top: 12px;
}

.steam-contact-details a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--navy);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--green);
    text-underline-offset: 3px;
}

.steam-why {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 32px;
    background: var(--green-light);
}

.steam-why h2 {
    grid-column: 1 / -1;
}

.steam-why .section-subtitle {
    margin: 0;
    color: var(--navy);
    font-size: 15px;
    line-height: 1.65;
}

.steam-projects > h3 {
    margin: 24px 0 12px;
    color: var(--navy);
    font-family: 'Poppins', sans-serif;
    text-align: center;
}

.steam-project-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.steam-project-list li,
.steam-inclusion-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--green-border-light);
    border-radius: 12px;
    background: var(--white);
    color: var(--navy);
    line-height: 1.5;
}

.steam-project-list i,
.steam-inclusion-list i {
    flex: 0 0 auto;
    margin-top: 4px;
    color: var(--green-text);
}

.steam-passport {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    border: 1px solid var(--green-border-light);
    border-radius: 16px;
    background: var(--green-light);
}

.steam-passport-copy {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.steam-passport-copy p {
    margin-bottom: 12px;
    color: var(--navy);
}

.steam-passport-copy .btn {
    margin-top: 12px;
}

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

.steam-gallery-grid .img-slot--wide {
    margin-top: 0;
}

.steam-details > h2,
.steam-experiences > h2,
.steam-journey > h2,
.steam-inclusions > h2,
.steam-faq > h2 {
    margin-bottom: 24px;
}

.steam-age-groups {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--green-border-light);
    border-radius: 14px;
    background: var(--white);
}

.steam-age-groups h3 {
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
}

.steam-age-groups ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.steam-age-groups li {
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--green-light);
}

.steam-age-groups p {
    margin-top: 12px;
}

.steam-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.steam-registration-steps {
    color: var(--navy);
}

.steam-registration-steps h3 {
    margin-bottom: 12px;
    font-family: 'Poppins', sans-serif;
}

.steam-registration-steps p + p {
    margin-top: 12px;
}

.steam-registration-steps a {
    color: var(--navy);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--green);
    text-underline-offset: 3px;
}

.steam-details-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 24px;
    margin-top: 20px;
    text-align: center;
}

.steam-details-contact p {
    margin: 0;
}

.steam-inclusion-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.steam-included-note {
    margin: 20px 0 0;
    padding: 16px 18px;
    border: 1px solid var(--green-border);
    border-left: 5px solid var(--green);
    border-radius: 12px;
    background: var(--green-light);
    color: var(--navy);
    font-weight: 600;
    line-height: 1.5;
}

.steam-faq-list {
    max-width: 900px;
    margin: 0 auto;
}

.steam-faq-list details {
    padding: 16px 18px;
    border-bottom: 1px solid var(--green-border-light);
    background: var(--white);
}

.steam-faq-list details:first-child {
    border-radius: 12px 12px 0 0;
}

.steam-faq-list details:last-child {
    border-radius: 0 0 12px 12px;
}

.steam-faq-list summary {
    color: var(--navy);
    font-weight: 700;
    cursor: pointer;
}

.steam-faq-list details p {
    margin-top: 10px;
    color: var(--text-muted);
}

.steam-final-cta {
    text-align: center;
}

.steam-final-cta > h2 {
    margin-bottom: 14px;
}

.steam-spaces-note {
    margin-bottom: 12px;
    color: var(--text-muted);
}

.steam-final-facts {
    margin-top: 16px;
    color: var(--text-muted);
}

.steam-final-actions .btn {
    min-width: 200px;
    min-height: 48px;
}

.steam-final-journey-link {
    margin: 12px 0 0;
    font-size: 14px;
}

.steam-final-journey-link a {
    color: var(--navy);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.steam-sticky-bar {
    position: fixed;
    z-index: 1000;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--green-border-light);
    background: rgba(var(--white-rgb), 0.98);
    box-shadow: 0 -4px 18px rgba(var(--navy-rgb), 0.12);
}

.steam-sticky-bar .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 480px);
    min-height: 44px;
    border: 1.5px solid var(--navy);
    background: var(--navy);
    color: var(--white);
}

@media (min-width: 769px) {
    .steam-page .steam-glance {
        margin-top: -32px;
    }
}

@media (min-width: 1000px) {
    .steam-glance-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 769px) {
    .steam-stage-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .steam-experience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .steam-experience-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 769px) {
    .steam-sticky-bar {
        display: none;
    }
}

@media (max-width: 768px) {
    .steam-page {
        padding-bottom: 88px;
    }

    .steam-page .home-section {
        padding: 36px 20px;
    }

    .steam-hero {
        padding: 48px 20px 60px;
        border-radius: 0 0 14px 14px;
    }

    .steam-hero-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .steam-hero h1 {
        font-size: 28px;
    }

    .steam-hero p {
        font-size: 16px;
    }

    .steam-page .steam-glance {
        margin-top: 0;
        padding: 20px 20px 8px;
    }

    .steam-page .steam-journey {
        padding-top: 28px;
    }

    .steam-experience-grid,
    .steam-project-list,
    .steam-gallery-grid,
    .steam-details-grid,
    .steam-inclusion-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .steam-experience-grid {
        gap: 16px;
    }

    .steam-hero-actions,
    .steam-final-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .steam-hero-actions .btn,
    .steam-final-actions .btn {
        width: 100%;
    }

    .steam-stage-grid {
        gap: 14px;
    }

    .steam-stage-card {
        padding: 20px;
    }

    .steam-full-journey {
        align-items: stretch;
        flex-direction: column;
        padding: 20px;
    }

    .steam-full-journey-main {
        flex-basis: auto;
    }

    .steam-full-journey-price {
        font-size: 23px;
    }

    .steam-full-register {
        width: 100%;
        min-width: 0;
        white-space: normal;
        text-align: center;
    }

    .steam-stage-head {
        width: calc(100% + 40px);
        min-height: 76px;
        margin: -20px -20px 6px;
        padding: 14px 20px;
    }

    .steam-stage-number {
        font-size: 36px;
    }

    .steam-break {
        gap: 8px;
    }

    .steam-break-label {
        max-width: 85%;
        overflow-wrap: anywhere;
    }

    .steam-payment-grid,
    .steam-contact-grid,
    .steam-why {
        grid-template-columns: minmax(0, 1fr);
    }

    .steam-contact {
        text-align: center;
    }

    .steam-contact-details {
        text-align: center;
    }

    .steam-why h2 {
        grid-column: auto;
    }
}

/* ===== STEAM Experience pop up (Home only) ===== */
/* Rendered only while STEAM_EXPERIENCE_PUBLIC is True */
.steam-popup {
    width: min(440px, calc(100% - 40px));
    max-width: 440px;
    padding: 0;
    border: none;
    border-radius: 18px;
    background: var(--white);
    color: var(--navy);
    box-shadow: 0 18px 48px rgba(var(--navy-dark-rgb), 0.35);
    /* The site-wide * { margin: 0 } reset overrides the UA margin: auto
       that centers a modal dialog, so restore it here. */
    margin: auto;
}

.steam-popup::backdrop {
    background: rgba(var(--navy-dark-rgb), 0.55);
}

.steam-popup-body {
    position: relative;
    padding: 28px;
}

.steam-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--navy);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.steam-popup-close:hover {
    background: var(--green-light);
}

.steam-popup .badge {
    margin-bottom: 12px;
}

.steam-popup h2 {
    margin: 0 0 10px;
    /* Keep the heading clear of the close button */
    padding-right: 36px;
    color: var(--navy);
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    line-height: 1.3;
}

.steam-popup p {
    margin: 0 0 20px;
    color: var(--navy);
    font-size: 15px;
    line-height: 1.6;
}

.steam-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.steam-popup-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    border: 1.5px solid var(--navy);
    background: var(--navy);
    color: var(--white);
}

.steam-popup-primary:hover {
    background: var(--navy-dark);
    color: var(--white);
}

.steam-popup-secondary {
    width: 100%;
    min-height: 44px;
}

@keyframes steam-popup-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.steam-popup[open] {
    animation: steam-popup-rise 0.28s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .steam-popup[open] {
        animation: none;
    }
}

@media (max-width: 600px) {
    .steam-popup {
        width: 100%;
        max-width: none;
        /* Anchor the card to the bottom edge as a sheet */
        margin: auto 0 0;
        border-radius: 18px 18px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* ===== STEAM pop up stage pills and corner chip ===== */
/* Both render only while STEAM_EXPERIENCE_PUBLIC is True. The bare
   .steam-chip rules above belong to the STEAM page meta chips, so the
   corner reminder uses its own steam-chip-corner name. */

.steam-popup-steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}

.steam-popup-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--green-light);
    color: var(--green-dark);
    font-size: 13px;
    font-weight: 600;
}

.steam-popup-steps i {
    color: var(--green);
    font-size: 11px;
}

.steam-chip-corner {
    position: fixed;
    left: 16px;
    bottom: 16px;
    /* Above the page and its header, but modal dialogs always sit on
       the browser's top layer, so the pop up stays above the chip. */
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 320px;
    padding: 10px 12px 10px 14px;
    border-radius: 12px;
    background: var(--navy);
    color: var(--white);
    box-shadow: 0 12px 32px rgba(var(--navy-dark-rgb), 0.35);
    font-size: 14px;
    line-height: 1.4;
}

.steam-chip-dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green);
}

.steam-chip-link {
    color: var(--white);
}

/* The link stretches across the whole card, the close button sits
   above it through its own z-index. */
.steam-chip-link::after {
    content: '';
    position: absolute;
    inset: 0;
}

.steam-chip-link:hover {
    text-decoration: underline;
}

.steam-chip-close {
    position: relative;
    z-index: 2;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -8px -10px -8px 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--white);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.steam-chip-close:hover {
    background: rgba(var(--white-rgb), 0.14);
}

@keyframes steam-chip-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.steam-chip-in {
    animation: steam-chip-in 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .steam-chip-in {
        animation: none;
    }
}

@media (max-width: 600px) {
    .steam-chip-corner {
        /* Full width minus the 16px margins on each side */
        right: 16px;
        max-width: none;
        margin-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* ===== STEAM Experience popup refresh ===== */
.steam-popup[hidden],
.steam-chip-corner[hidden] {
    display: none !important;
}

.steam-popup {
    box-sizing: border-box;
    width: min(440px, calc(100vw - 32px));
    max-width: 440px;
    max-height: min(90vh, 760px);
    max-height: min(90dvh, 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
    border-radius: 18px;
    background: var(--white);
    color: var(--navy-dark);
}

.steam-popup-body {
    padding: 0;
}

.steam-popup-top {
    position: relative;
    padding: 28px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(135deg, var(--navy-dark), var(--navy));
    color: var(--white);
}

.steam-popup-close {
    z-index: 3;
    color: var(--white);
}

.steam-popup-close:hover,
.steam-popup-close:focus-visible {
    background: rgba(var(--white-rgb), 0.16);
}

.steam-popup-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-bottom: 12px;
    padding: 4px 12px;
    border: 1px solid rgba(var(--white-rgb), 0.5);
    border-radius: 999px;
    background: var(--green-light);
    color: var(--green-dark);
    font-size: 13px;
    font-weight: 600;
}

.steam-popup-countdown {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 10px;
    margin: 0 42px 10px 0;
    color: var(--white);
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    line-height: 1.08;
}

.steam-popup-countdown-value {
    color: var(--green);
    font-size: 56px;
    overflow-wrap: anywhere;
}

.steam-popup-countdown-label {
    color: var(--white);
    font-size: 20px;
    font-weight: 600;
}

.steam-popup-countdown-label[hidden] {
    display: none;
}

.steam-popup h2 {
    margin: 0;
    padding: 0;
    color: var(--white);
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.steam-popup-details {
    padding: 22px 28px 24px;
    background: var(--white);
    color: var(--navy-dark);
}

.steam-popup-weeks {
    margin-bottom: 18px;
}

.steam-popup-weeks-bar {
    display: flex;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    min-height: 18px;
}

.steam-popup-week {
    flex: 1 1 0;
    min-width: 0;
    min-height: 18px;
    border-radius: 4px;
    transform: scaleX(0);
    transform-origin: left center;
}

.steam-popup-week--discover {
    background: var(--green);
}

.steam-popup-week--build {
    background: var(--green);
}

.steam-popup-week--innovate {
    background: var(--navy);
}

.steam-popup-week-gap {
    flex: 0 0 10px;
    min-height: 18px;
    border: 1px solid var(--text-muted);
    border-radius: 3px;
    background: repeating-linear-gradient(135deg, var(--white) 0 3px, var(--neutral-mid) 3px 5px);
}

.steam-popup-stage-labels {
    display: flex;
    gap: 4px;
    margin-top: 7px;
    color: var(--navy);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.steam-popup-stage-labels span:nth-child(1) {
    flex: 2 1 0;
}

.steam-popup-stage-labels span:nth-child(2) {
    flex: 3 1 0;
}

.steam-popup-stage-labels span:nth-child(3) {
    flex: 4 1 0;
    margin-left: 10px;
}

.steam-popup-facts {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.steam-popup-facts li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--navy-dark);
    font-size: 14px;
    line-height: 1.45;
}

.steam-popup-facts i {
    flex: 0 0 18px;
    margin-top: 3px;
    color: var(--green-dark);
    text-align: center;
}

.steam-popup-price {
    margin: 16px 0 14px;
    color: var(--navy);
    font-size: 15px;
    font-weight: 700;
}

.steam-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.steam-popup-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--navy);
    border-radius: 8px;
    background: var(--navy);
    color: var(--white);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

.steam-popup-primary:hover,
.steam-popup-primary:focus-visible {
    background: var(--navy-dark);
    color: var(--white);
}

.steam-popup-primary i {
    font-size: 13px;
}

.steam-popup-secondary {
    width: 100%;
    min-height: 44px;
    padding: 8px;
    border: 0;
    background: transparent;
    color: var(--navy);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.steam-popup-secondary:hover,
.steam-popup-secondary:focus-visible {
    color: var(--navy);
    text-decoration: underline;
}

.steam-popup[open] .steam-popup-week {
    animation: steam-popup-week-fill 0.24s ease-out both;
}

.steam-popup[open] .steam-popup-week:nth-child(1) {
    animation-delay: 0s;
}

.steam-popup[open] .steam-popup-week:nth-child(2) {
    animation-delay: 0.07s;
}

.steam-popup[open] .steam-popup-week:nth-child(3) {
    animation-delay: 0.14s;
}

.steam-popup[open] .steam-popup-week:nth-child(4) {
    animation-delay: 0.21s;
}

.steam-popup[open] .steam-popup-week:nth-child(5) {
    animation-delay: 0.28s;
}

.steam-popup[open] .steam-popup-week:nth-child(7) {
    animation-delay: 0.35s;
}

.steam-popup[open] .steam-popup-week:nth-child(8) {
    animation-delay: 0.42s;
}

.steam-popup[open] .steam-popup-week:nth-child(9) {
    animation-delay: 0.49s;
}

.steam-popup[open] .steam-popup-week:nth-child(10) {
    animation-delay: 0.56s;
}

@keyframes steam-popup-week-fill {
    to {
        transform: scaleX(1);
    }
}

.steam-chip-corner {
    box-sizing: border-box;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    max-width: min(320px, calc(100vw - 32px));
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    overflow: auto;
    overflow-wrap: anywhere;
}

.steam-chip-corner .steam-chip-link {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.steam-chip-corner .steam-chip-link::after {
    z-index: 1;
}

.steam-chip-corner .steam-chip-link i {
    position: relative;
    z-index: 2;
    font-size: 10px;
}

.steam-chip-close {
    z-index: 3;
}

@media (max-width: 600px) {
    .steam-popup {
        width: 100%;
        max-width: none;
        max-height: 90vh;
        max-height: 90dvh;
        margin: auto 0 0;
        border-radius: 18px 18px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .steam-popup-top {
        padding: 22px 20px 20px;
    }

    .steam-popup-countdown-value {
        font-size: 44px;
    }

    .steam-popup-countdown-label {
        font-size: 16px;
    }

    .steam-popup h2 {
        font-size: 21px;
    }

    .steam-popup-details {
        padding: 18px 20px 22px;
    }

    .steam-chip-corner {
        right: 16px;
        max-width: none;
        margin-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .steam-popup[open] .steam-popup-week {
        animation: none;
        transform: none;
    }
}

.steam-popup-stage-labels {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) 10px repeat(4, minmax(0, 1fr));
    gap: 4px;
}

.steam-popup-stage-labels span {
    min-width: 0;
    white-space: nowrap;
}

.steam-popup-stage-labels span:nth-child(1) {
    grid-column: 1 / span 2;
}

.steam-popup-stage-labels span:nth-child(2) {
    grid-column: 3 / span 3;
}

.steam-popup-stage-labels span:nth-child(3) {
    grid-column: 7 / span 4;
    margin-left: 0;
}

.steam-popup-price {
    margin-top: 24px;
}

@media (max-width: 599px), (max-height: 699px) {
    .steam-popup {
        max-height: 85vh;
        max-height: 85dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .steam-popup-top {
        padding: 16px 18px 14px;
    }

    .steam-popup-countdown-value {
        font-size: 40px;
    }

    .steam-popup h2 {
        font-size: 20px;
    }

    .steam-popup-details {
        padding: 14px 16px 16px;
    }

    .steam-popup-extra {
        display: none !important;
    }
}