* { box-sizing: border-box; }

:root {
    /* TalentRise design system */
    --navy: #003366;
    --orange: #FBB03A;
    --white: #FFFFFF;
    --cream: #FFF8ED;
    --soft-blue: #EAF2F8;
    --charcoal: #263238;
    --muted-gray: #667085;
    --border: #E5E7EB;
    --pale-orange: #FFF0D2;

    --text-dark: var(--navy);
    --text-muted: var(--muted-gray);

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 22px;

    --shadow: 0 10px 30px rgba(0, 51, 102, 0.08);
}

html { height: 100%; }

body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    margin: 0;
    font-family: 'Inter', Arial, sans-serif;
    background: var(--white);
    color: var(--charcoal);
    line-height: 1.5;
}

/* Homepage intro splash: full-page logo on first load in a session, then
   fades out to reveal the page underneath (see index.php). Pure CSS
   animation with `forwards` so the page always reveals itself even if the
   small inline script never runs — the script only adds the "skip on
   repeat visit" behavior on top. */
.intro-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy);
    animation: intro-splash-out 0.9s ease forwards;
    animation-delay: 2.1s;
}
.intro-splash img {
    width: clamp(180px, 32vw, 340px);
    height: auto;
    opacity: 0;
    transform: scale(0.85);
    animation: intro-logo-in 1s ease forwards;
}
@keyframes intro-logo-in {
    to { opacity: 1; transform: scale(1); }
}
@keyframes intro-splash-out {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}
.intro-splash.is-skip { display: none; }
@media (prefers-reduced-motion: reduce) {
    .intro-splash { animation: none; opacity: 0; visibility: hidden; pointer-events: none; }
    .intro-splash img { animation: none; opacity: 1; transform: none; }
}

h1, h2, h3 {
    font-family: 'Poppins', 'Inter', Arial, sans-serif;
    color: var(--text-dark);
    margin: 0 0 16px;
    line-height: 1.15;
    font-weight: 700;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.1rem; }
h3 { font-size: 1.15rem; }

p { color: var(--text-muted); margin: 0 0 16px; }

a { color: inherit; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--orange);
    margin-bottom: 14px;
}
.eyebrow-lg { font-size: 0.92rem; }

/* Buttons — Primary: Navy + White | Secondary: Orange + Navy | Outline: transparent + Navy border | Text: Navy/Orange */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}

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

.btn-primary {
    background: var(--navy);
    color: var(--white);
}
.btn-primary:hover { filter: brightness(1.15); }

.btn-secondary {
    background: var(--orange);
    color: var(--navy);
}
.btn-secondary:hover { filter: brightness(0.94); }

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

.btn-outline-light {
    background: transparent;
    border-color: rgba(255,255,255,0.6);
    color: var(--white);
}
.btn-outline-light:hover { background: var(--white); color: var(--navy); }

.btn-text {
    color: var(--navy);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-text:hover { color: var(--orange); }

/* Header / Nav */
.site-header {
    background: var(--navy);
    position: sticky;
    top: 0;
    z-index: 20;
}

.nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--white);
}

.brand-logo { height: 60px; width: auto; display: block; }

/* Header nav: plain icon + label links on the navy header. */
.puzzle-nav {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
    align-items: center;
    gap: 2px;
}

.puzzle-item { position: relative; }

.puzzle-piece {
    position: relative;
    display: block;
    text-decoration: none;
    color: var(--white);
    border-radius: var(--radius-sm);
}

.puzzle-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: inherit;
}

.puzzle-icon { display: flex; }
.puzzle-icon svg { width: 24px; height: 24px; }

.puzzle-piece:not(.is-active):hover { background: #0a4a85; }

.puzzle-piece.is-active { color: var(--navy); background: var(--orange); }

.puzzle-item:hover .dropdown,
.puzzle-item:focus-within .dropdown { display: block; }

.dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    min-width: 220px;
    padding: 10px 0;
    display: none;
    z-index: 10;
}

/* Bridges the gap above the dropdown so moving the mouse from the
   nav link down into the list doesn't cross a dead zone and close it. */
.dropdown::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

.dropdown a {
    display: block;
    padding: 10px 18px;
    text-decoration: none;
    color: var(--charcoal);
    font-size: 0.92rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}

.dropdown a:hover { background: var(--pale-orange); }

.nav-actions { display: flex; align-items: center; gap: 4px; }

/* Mobile menu toggle — hidden on desktop, shown in the max-width:900px block */
.nav-toggle { display: none; }

.puzzle-book-btn { text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; }
/* Header "Book Now" — sits at the old hover navy by default, goes yellow on hover */
.puzzle-book-btn.btn-primary { background: #033a75; }
.puzzle-book-btn.btn-primary:hover {
    background: var(--orange);
    color: var(--navy);
    filter: none;
}

/* Placeholder image blocks */
.img-placeholder {
    background: var(--cream);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--muted-gray);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    font-weight: 700;
    min-height: 260px;
    padding: 20px;
}

.img-placeholder.portrait { min-height: 180px; background: var(--pale-orange); }

/* A real photo dropped into a placeholder fills it and hides the label frame */
.img-placeholder { position: relative; overflow: hidden; }
.img-placeholder > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.img-placeholder:has(> img) { border-color: transparent; }
.img-placeholder:has(> img) > span { display: none; }

/* Image auto-slideshow (hero banner, retreat photo, ...) — stacked photos, cross-fade the active one */
.auto-slideshow > img { opacity: 0; transition: opacity 1s ease; }
.auto-slideshow > img.is-active { opacity: 1; }

/* Section base */
section { padding: 96px 0; }

.section-cream { background: var(--cream); }
/* Tighten the gap above the homepage "Come as you are" block */
.home .section-cream { padding-top: 48px; }
.section-blue { background: var(--soft-blue); }
.section-navy { background: var(--navy); color: var(--white); padding: 56px 0; }
.section-navy h2, .section-navy p { color: var(--white); }
.section-navy p { opacity: 0.85; }

/* Hero */
.hero { padding: 40px 0 96px; background: var(--cream); }
.about-hero { padding-bottom: 48px; }
#our-story { padding-top: 48px; padding-bottom: 56px; }
#about-talentrise { padding-top: 48px; padding-bottom: 40px; }
.hero.exp-redesign { padding-bottom: 48px; }
.exp-page-explore { padding-top: 48px; }
/* Offset for the sticky header so jumping to #coming-up lands right below it
   (scroll-margin-top matches the header's own height, ~92px desktop / ~68px
   mobile) with no sliver of the section above peeking through, and a bit of
   padding so the "Coming Up" title isn't glued to the header. */
#coming-up { background: var(--soft-blue); scroll-margin-top: 92px; padding-top: 56px; }
/* Jumping to a section lands it below the sticky header, title fully visible. */
#explore-experiences { scroll-margin-top: 110px; }
@media (max-width: 900px) {
    #coming-up { scroll-margin-top: 68px; }
    #explore-experiences { scroll-margin-top: 84px; }
}
.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
    align-items: center;
}
.hero h1 { max-width: 100%; }
.hero p.lead { max-width: 480px; font-size: 1.05rem; }
.hero-actions { display: flex; gap: 16px; margin: 24px 0 32px; flex-wrap: wrap; }
.hero-actions .btn { justify-content: center; width: 220px; }
.hero-tags {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--muted-gray);
}
.hero-image { min-height: 380px; }

/* Mobile-only: a single full-bleed background image behind the first section
   (toggled by admin — SiteSettings mobile_hero_bg_enabled; the image itself is
   the "mobile_bg" slide managed in admin/homepage.php).
   Hidden entirely on desktop; the markup is only emitted when the toggle is on. */
.hero-mobile-bg-slides { display: none; }

@media (max-width: 900px) {
    .home .hero.hero-mobile-bg {
        position: relative;
        overflow: hidden;
    }
    .home .hero.hero-mobile-bg > .container {
        position: relative;
        z-index: 2;
    }
    .home .hero.hero-mobile-bg .hero-mobile-bg-slides {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 0;
    }
    .home .hero.hero-mobile-bg .hero-mobile-bg-slides > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* readability scrim over the photos */
    .home .hero.hero-mobile-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(180deg, rgba(4, 26, 54, 0.55), rgba(4, 26, 54, 0.78));
    }
    .home .hero.hero-mobile-bg h1 { color: var(--white); }
    .home .hero.hero-mobile-bg .btn-secondary {
        background: transparent;
        border-color: var(--white);
        color: var(--white);
    }
    /* the inline hero photo card would just duplicate the background */
    .home .hero.hero-mobile-bg .hero-image { display: none; }
}

/* Two column feature (Story / Retreat) */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.split .img-placeholder { min-height: 320px; }

/* Steps grid */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 48px;
}
.step-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--orange);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 16px;
}
.step h3 { text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.04em; }
.step p { font-size: 0.92rem; margin: 0; }

/* Retreat card */
.retreat-card {
    background: var(--cream);
    border-radius: var(--radius-lg);
    padding: 48px;
}
.retreat-heading { margin-bottom: 0; }
.retreat-subtitle { margin: 0 0 16px; }
.retreat-body { color: var(--navy); }
.retreat-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.retreat-meta span {
    background: var(--pale-orange);
    color: var(--navy);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
}

/* Slider — shared by Collaborators and Testimonials: a swipeable/draggable row with arrow controls */
.slider { position: relative; margin-top: 48px; }
.slider-track {
    display: flex;
    gap: 32px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    margin-top: 0;
    padding-bottom: 4px;
}
.slider-track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.slider-track::-webkit-scrollbar { display: none; }
.slider-track > * { scroll-snap-align: start; flex: 0 0 auto; }
.slider-arrow {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #E0E7EF;
    background: var(--white);
    color: var(--navy);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    z-index: 2;
}
.slider-arrow:hover { background: var(--pale-orange); }
.slider-arrow[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }

/* Our Collaborators / People's Experience: the arrow starts in the color
   the other sliders only show on hover, and hovering goes navy instead. */
.section-collaborators .slider-arrow,
.section-blue .slider-arrow {
    background: var(--pale-orange);
    color: var(--navy);
}
.section-collaborators .slider-arrow:hover,
.section-blue .slider-arrow:hover {
    background: var(--navy);
    color: var(--white);
}
.slider-arrow-prev { left: -22px; }
.slider-arrow-next { right: -22px; }

/* Collaborators */
.collab-grid { padding: 4px 4px 4px 0; }
.collab-card { flex-basis: calc(25% - 24px); min-width: 220px; }
.collab-card h3 { margin: 16px 0 2px; font-size: 1rem; font-family: 'Inter', sans-serif; font-weight: 700; }
.collab-card .role { font-size: 0.85rem; color: var(--orange); font-weight: 600; margin-bottom: 2px; }
.collab-card .tag { font-size: 0.82rem; color: var(--muted-gray); }

/* Testimonials */
.testimonial-grid { padding: 4px 4px 4px 0; }
.testimonial-card {
    flex-basis: calc(33.333% - 22px);
    min-width: 260px;
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow);
}
.testimonial-card p.quote { color: var(--charcoal); font-size: 0.98rem; }
.testimonial-card .attribution {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Locations */
.locations-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.location-card {
    border-radius: var(--radius-md);
    padding: 28px;
    background: var(--pale-orange);
}
.location-card:nth-child(2n) { background: var(--cream); }
.location-card h3 { margin-bottom: 6px; }
.location-card .tag { font-size: 0.85rem; color: var(--muted-gray); font-weight: 600; }

/* CTA */
.cta-actions { display: flex; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.cta-actions .btn { justify-content: center; width: 250px; }

/* Footer */
.site-footer { background: var(--navy); color: var(--white); padding: 40px 0 28px; }

.footer-logo { display: flex; align-items: center; margin-bottom: 16px; }
.footer-logo-img { height: 60px; width: auto; display: block; }

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px;
    padding-bottom: 48px;
}
.footer-col h4 {
    font-family: 'League Spartan', 'Poppins', Arial, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--orange);
    margin: 0 0 10px;
}
.footer-col-underline { width: 44px; height: 3px; border-radius: 2px; background: #FB9714; margin-bottom: 18px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-grid a { text-decoration: none; color: rgba(255,255,255,0.85); font-size: 0.92rem; font-family: 'DM Sans', 'Inter', Arial, sans-serif; }
.footer-grid a:hover { color: var(--orange); }
.footer-brand p { color: rgba(255,255,255,0.7); max-width: 300px; font-family: 'DM Sans', 'Inter', Arial, sans-serif; }
.footer-divider { border-top: 1px solid #385778; }
.footer-bottom { padding-top: 20px; font-size: 0.82rem; color: #BFCCD9; font-family: 'DM Sans', 'Inter', Arial, sans-serif; }

.footer-community-item { display: flex; align-items: center; gap: 8px; }
.footer-community-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: rgba(255,255,255,0.85);
    transition: color 0.15s;
}
.footer-community-whatsapp svg { width: 16px; height: 16px; }
.footer-community-whatsapp:hover { color: var(--orange); }

.footer-social-icons { display: flex; gap: 12px; margin-top: 20px; }
.footer-social-icons--mobile { display: none; }
.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: var(--white);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.social-icon svg { width: 24px; height: 24px; }
.footer-social-icons a.social-icon:hover { background: rgba(255,255,255,0.22); color: var(--white); }

/* Top connector strip echoing the header's puzzle nav, bridging into the footer.
   On short pages this grows upward to fill the leftover space so the navy
   footer still reaches the bottom of the viewport, instead of leaving blank
   space above it — the wave graphic itself stays a fixed 32px, pinned to the
   bottom of the strip. */
.footer-top-strip {
    display: flex;
    align-items: flex-end;
    flex: 1 0 32px;
    min-height: 32px;
    background: var(--navy);
    overflow: hidden;
}
.footer-top-wave {
    display: block;
    width: 100%;
    height: 32px;
    flex-shrink: 0;
}

/* Experiences page */
.section-sub { font-size: 1.05rem; max-width: 640px; }

.img-placeholder-sm { min-height: 150px; margin-bottom: 16px; }

.text-accent { color: var(--orange); }

/* Section heading with a small decorative spark and an underlined word */
.heading-with-spark { position: relative; }
.heading-spark {
    position: absolute;
    top: -25px;
    left: -30px;
    width: 35px;
    height: 40px;
}
.underline-accent { position: relative; white-space: nowrap; }
.underline-accent::after {
    content: '';
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: -2px;
    height: 4px;
    background: var(--orange);
    border-radius: 2px;
}
.section-link-underline { border-bottom: 2px solid var(--orange); padding-bottom: 3px; }

/* Explore Our Experiences: wavy icon-panel cards */
.explore-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
}
.explore-card {
    display: flex;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    height: 190px;
}
.explore-visual {
    position: relative;
    flex: 0 0 125px;
}
.explore-side-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 125px;
    height: 190px;
    z-index: 0;
    pointer-events: none;
}
.explore-dotted-path {
    position: absolute;
    left: 0px;
    top: 105px;
    width: 128px;
    height: 74px;
    z-index: 1;
    pointer-events: none;
}
.explore-icon-wrap {
    position: absolute;
    top: 22px;
    left: 0;
    width: 125px;
    z-index: 1;
    display: flex;
    justify-content: center;
    color: var(--white);
}
.explore-visual--orange .explore-icon-wrap { color: var(--navy); }
.explore-icon-wrap svg { width: 32px; height: 32px; }
.explore-icon-wrap .explore-icon-img { width: 76px; height: 76px; object-fit: contain; }
.explore-body { flex: 1; padding: 20px 20px 20px 26px; }
.explore-body h3 { margin-bottom: 6px; font-size: 1.05rem; }
.explore-body p { font-size: 0.85rem; margin-bottom: 10px; line-height: 1.4; }
.explore-body .btn-text { color: var(--orange); }
.explore-body .btn-text:hover { color: var(--navy); }

.journey-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 64px;
    align-items: start;
}
.journey-intro {
    background: var(--navy);
    color: var(--orange);
    border-radius: var(--radius-lg);
    padding: 32px;
}
.journey-intro h2, .journey-intro p { color: var(--white); }
.journey-intro p { opacity: 0.85; margin-bottom: 32px; }
.journey-note { font-weight: 700; font-size: 0.85rem; color: var(--orange); }

.journey-steps { list-style: none; margin: 0; padding: 0; }
.journey-step { display: flex; gap: 24px; position: relative; padding-bottom: 48px; }
.journey-step:last-child { padding-bottom: 0; }
.journey-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 22px;
    top: 46px;
    bottom: -2px;
    width: 2px;
    background: var(--border);
}
.step-number {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--soft-blue);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.journey-step:nth-child(even) .step-number { background: var(--orange); }
.step-content h3 { margin-bottom: 6px; }
.step-content p { margin: 0; font-size: 0.95rem; }

.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}
.section-header-row h2 { margin-bottom: 8px; }
.section-header-row p { margin: 0; }

.events-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.event-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.event-card .img-placeholder {
    border-radius: 0;
    min-height: 140px;
    background: var(--soft-blue);
    border: none;
}
.event-card-gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    height: 140px;
    scrollbar-width: thin;
}
.event-card-gallery img {
    flex: 0 0 100%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: start;
}
.event-card-gallery::-webkit-scrollbar { height: 4px; }
.event-card-gallery::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 2px; }
.event-card:nth-child(2n) .img-placeholder {
    background: var(--pale-orange);
}
.event-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    color: var(--white);
}
.event-banner svg { width: 56px; height: 56px; }
.event-banner--navy { background: var(--navy); }
.event-banner--orange { background: var(--orange); color: var(--navy); }
.event-banner--blue { background: var(--soft-blue); color: var(--navy); }
.event-banner--gold { background: var(--pale-orange); color: var(--navy); }
.event-card-body { position: relative; padding: 28px 20px 20px; }
.event-badge {
    position: absolute;
    top: -22px;
    left: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    box-shadow: var(--shadow);
}
.event-badge svg { width: 20px; height: 20px; }
.event-badge--navy { background: var(--navy); }
.event-badge--orange { background: var(--orange); color: var(--navy); }
.event-badge--blue { background: var(--soft-blue); color: var(--navy); }
.event-badge--gold { background: var(--pale-orange); color: var(--navy); }
.event-card h3 { margin-bottom: 8px; font-size: 1.1rem; }
.event-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--muted-gray);
    font-size: 0.85rem;
    margin-bottom: 12px;
}
.event-meta svg { width: 14px; height: 14px; flex-shrink: 0; }
.event-card-body p { font-size: 0.92rem; margin-bottom: 16px; }

/* About page */
.about-illustration {
    position: relative;
    min-height: 380px;
    border-radius: var(--radius-lg);
    background: var(--soft-blue);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 24px 64px;
}
.about-illustration .sun {
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--pale-orange);
}
.figures { position: relative; display: flex; align-items: flex-end; gap: 10px; }
.figure { display: flex; flex-direction: column; align-items: center; }
.figure-head { width: 56px; height: 56px; border-radius: 50%; margin-bottom: -10px; }
.figure-body { width: 54px; height: 96px; border-radius: 30px 30px 6px 6px; }
.figure.navy .figure-head, .figure.navy .figure-body { background: var(--navy); }
.figure.orange .figure-head, .figure.orange .figure-body { background: var(--orange); }
.about-caption {
    position: absolute;
    bottom: 20px;
    left: 24px;
    right: 24px;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--navy);
}

.story-highlight {
    background: var(--soft-blue);
    border-radius: var(--radius-lg);
    padding: 40px 36px;
}
.mini-label { margin-bottom: 24px; }

/* About page: "About TalentRise Academy" intro copy — readable line length. */
.about-intro { max-width: 760px; }
.about-intro .about-closing { text-align: left; margin-top: 24px; }

/* About page: tighter "Our Purpose" section, slightly larger section kickers */
#our-purpose { padding: 40px 0; }
#our-network { padding-top: 40px; padding-bottom: 56px; }
#our-community { padding-top: 48px; }
#our-purpose .eyebrow,
#our-network .eyebrow,
#our-community .eyebrow { font-size: 0.95rem; }

/* Let this line run its full width instead of wrapping at the shared
   .section-sub 640px cap — it reads better as one line on desktop, and
   still wraps naturally on narrow viewports since there's no forced
   white-space here. */
#our-community .section-sub { max-width: none; }

.purpose-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
}
.purpose-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
}
.purpose-badge {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--navy);
    background: var(--soft-blue);
    margin-bottom: 20px;
}
.purpose-card:nth-child(2n) .purpose-badge { background: var(--orange); }
.purpose-card h3 { margin-bottom: 8px; }
.purpose-card p { font-size: 0.92rem; margin: 0; }
.closing-note {
    text-align: center;
    font-weight: 700;
    color: var(--navy);
    font-size: 1.05rem;
    margin: 40px 0 0;
}

.partner-note { font-size: 0.9rem; }
.community-flags-heading { margin-top: 40px; margin-bottom: 6px; font-size: 1.3rem; }
.partners-strip {
    background: var(--soft-blue);
    border-radius: var(--radius-lg);
    padding: 32px;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    margin-top: 32px;
}
.partner-logo {
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--navy);
    text-align: center;
}
.partner-logo img { width: 100%; height: 100%; object-fit: cover; }

.partners-strip--auto {
    display: flex;
    align-items: center;
    gap: 16px;
}
.partners-viewport {
    flex: 1 1 auto;
    min-width: 0;
    /* No-JS fallback: a manually swipeable/scrollable row. JS switches
       this to hidden only once it takes over with the auto-loop. */
    overflow-x: auto;
}
.partners-strip--auto .partners-track {
    display: flex;
    gap: 20px;
    width: max-content;
}

.partners-nav {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.partners-nav[hidden] { display: none; }
.partners-nav svg { width: 18px; height: 18px; }
.partners-nav:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--white);
}
@media (max-width: 640px) {
    .partners-nav { width: 34px; height: 34px; }
}

/* FAQ page */
.faq-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    max-width: 520px;
    margin: 28px 0 12px;
}
.faq-search-icon { color: var(--muted-gray); font-size: 1.1rem; }
.faq-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.95rem;
    color: var(--charcoal);
}
.faq-hero-note { font-size: 0.8rem; font-weight: 600; color: var(--muted-gray); }

.faq-intro-section { padding-bottom: 0; }

.faq-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 48px;
    align-items: start;
}
.faq-categories {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.faq-category-link {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border-left: 4px solid transparent;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--charcoal);
    text-decoration: none;
}
.faq-category-link:hover { background: var(--soft-blue); }
.faq-category-link.active {
    background: var(--soft-blue);
    border-left-color: var(--orange);
    color: var(--navy);
}

.faq-category { margin-bottom: 40px; scroll-margin-top: 96px; }
.faq-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--cream);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 16px;
}
.faq-category:nth-child(2n) .faq-category-header { background: var(--soft-blue); }
.faq-category-header h3 { margin: 0; font-size: 1.25rem; }
.faq-count { font-size: 0.78rem; font-weight: 700; color: var(--muted-gray); }

.faq-item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    margin-bottom: 12px;
}
.faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-weight: 600;
    color: var(--navy);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--orange);
    transition: transform 0.15s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 14px 0 0; font-size: 0.92rem; }

.faq-item.is-hidden, .faq-category.is-hidden { display: none; }
.faq-no-results {
    display: none;
    text-align: center;
    font-weight: 600;
    color: var(--muted-gray);
    padding: 40px 0;
}
.faq-no-results.is-visible { display: block; }

/* Contact page */
.contact-hero-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
}
.contact-hero-text { max-width: 600px; }
.hero-note-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    max-width: 330px;
    flex-shrink: 0;
}
.hero-note-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.hero-note-small { font-size: 0.85rem; color: var(--muted-gray); }

.connect-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.connect-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 28px;
    display: flex;
    flex-direction: column;
}
.connect-card.bg-cream { background: var(--cream); }
.connect-card.bg-blue { background: var(--soft-blue); }
.connect-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--orange);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 20px;
}
.connect-icon svg { width: 28px; height: 28px; }
.connect-card h3 { margin-bottom: 10px; font-size: 1.25rem; }
.connect-card p { font-size: 0.92rem; margin-bottom: 20px; }
/* Push the CTA to the card's base so all three line up across the row */
.connect-card .connect-cta { margin-top: auto; align-self: flex-start; }

.location-collage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.location-collage .img-placeholder { min-height: 220px; }
.location-collage .img-placeholder:nth-child(2) { background: var(--soft-blue); }

.btn-white { background: var(--white); color: var(--navy); }
.btn-white:hover { filter: brightness(0.95); }

/* Book page */
.book-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.book-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 28px;
}
.book-card:nth-child(odd) { background: var(--cream); }
.book-card:nth-child(even) { background: var(--soft-blue); }
.book-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--orange);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 16px;
}
.book-card h3 { margin-bottom: 8px; font-size: 1.3rem; }
.book-card p { font-size: 0.9rem; margin-bottom: 16px; }

.upcoming-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.upcoming-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 24px;
}
.upcoming-card:nth-child(odd) { background: var(--cream); }
.upcoming-card:nth-child(even) { background: var(--white); }
.upcoming-category {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 14px;
}
.upcoming-card h3 { font-size: 1.3rem; margin-bottom: 16px; }
.upcoming-meta { font-size: 0.92rem; color: var(--charcoal); margin-bottom: 4px; }
.upcoming-location { font-size: 0.92rem; color: var(--muted-gray); margin-bottom: 20px; }
.upcoming-divider { border: none; border-top: 1px solid var(--border); margin: 0 0 20px; }
.upcoming-card .btn { width: 100%; justify-content: center; margin-top: auto; }

.booking-form {
    width: 100%;
    position: relative;
    background-color: var(--soft-blue);
    padding: 64px 24px 96px;
    text-align: center;
    font-family: 'Inter', Arial, sans-serif;
    color: var(--muted-gray);
}
.your-spot-starts {
    display: block;
    max-width: 700px;
    margin: 0 auto 12px;
    font-family: 'Poppins', 'Inter', Arial, sans-serif;
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--navy);
}
.finding-space-to {
    display: block;
    max-width: 700px;
    margin: 0 auto 40px;
    font-size: 1rem;
    font-family: 'Inter', Arial, sans-serif;
    color: var(--muted-gray);
}
.booking-details-form {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
    text-align: left;
    font-size: 15px;
}
.full-name,
.email-address,
.phone-whatsapp,
.number-of-participants,
.anything-we-should {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}
.phone-whatsapp,
.number-of-participants,
.anything-we-should {
    margin-top: 16px;
}
.full-name { grid-column: 1; grid-row: 1; }
.frame { grid-column: 1; grid-row: 2; }
.email-address { grid-column: 2; grid-row: 1; }
.frame2 { grid-column: 2; grid-row: 2; }
.phone-whatsapp { grid-column: 1; grid-row: 3; }
.frame3 { grid-column: 1; grid-row: 4; }
.number-of-participants { grid-column: 2; grid-row: 3; }
.frame4 { grid-column: 2; grid-row: 4; }
.anything-we-should { grid-column: 1 / -1; grid-row: 5; }
.frame5 { grid-column: 1 / -1; grid-row: 6; }
.frame6 { grid-column: 1 / -1; grid-row: 7; }
.well-send-your { grid-column: 1 / -1; grid-row: 8; }

.frame,
.frame2,
.frame3,
.frame4 {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    background-color: var(--white);
    border: 1px solid var(--border);
    outline: none;
    color: var(--charcoal);
    font-size: 0.95rem;
    font-family: 'Inter', Arial, sans-serif;
}
.frame:focus,
.frame2:focus,
.frame3:focus,
.frame4:focus,
.frame5:focus {
    border-color: var(--navy);
}
.frame::placeholder,
.frame2::placeholder,
.frame3::placeholder,
.frame4::placeholder,
.frame5::placeholder {
    color: var(--muted-gray);
}
.frame5 {
    box-sizing: border-box;
    width: 100%;
    min-height: 140px;
    padding: 16px;
    border-radius: var(--radius-sm);
    background-color: var(--white);
    border: 1px solid var(--border);
    outline: none;
    resize: vertical;
    color: var(--charcoal);
    font-size: 0.95rem;
    font-family: 'Inter', Arial, sans-serif;
}
.frame6 {
    justify-self: start;
    margin-top: 12px;
    border: none;
    border-radius: var(--radius-md);
    background-color: var(--navy);
    padding: 14px 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font: inherit;
    transition: filter 0.15s;
}
.frame6:hover { filter: brightness(1.15); }
.confirm-booking {
    font-weight: 600;
    color: var(--white);
}
.well-send-your {
    margin-top: 8px;
    font-size: 0.85rem;
    font-family: 'Inter', Arial, sans-serif;
    color: var(--muted-gray);
}

/* Event booking form (booking-form.php) — InstaPay + upload + details */
.booking2-form {
    max-width: 640px;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: left;
    font-family: 'Inter', Arial, sans-serif;
    color: var(--charcoal);
}
.booking2-description {
    margin: 0 0 20px;
    color: var(--charcoal);
    font-size: 0.95rem;
}
.booking2-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    background: var(--soft-blue);
    margin-bottom: 20px;
}
.booking2-price-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--navy);
}
.booking2-price-value { font-size: 1.25rem; font-weight: 700; color: var(--navy); }

.booking2-instapay {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--orange);
    color: var(--navy);
    font-weight: 700;
    text-decoration: none;
    padding: 12px 22px;
    border-radius: var(--radius-md);
    transition: filter 0.15s;
}
.booking2-instapay:hover { filter: brightness(1.08); }
.booking2-instapay-logo { height: 22px; width: auto; display: block; }

.booking2-upload-heading {
    margin: 18px 0 8px;
    font-weight: 600;
    color: var(--navy);
}
.booking2-upload {
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 26px;
    text-align: center;
    cursor: pointer;
    color: var(--muted-gray);
    transition: background 0.15s, border-color 0.15s;
}
.booking2-upload:hover,
.booking2-upload.is-dragover { border-color: var(--orange); background-color: var(--soft-blue); }
.booking2-upload.has-file { border-style: solid; border-color: var(--navy); color: var(--navy); font-weight: 600; }
.booking2-upload-icon { width: 26px; height: 26px; display: block; margin: 0 auto 8px; }
.booking2-upload-text { margin: 0; word-break: break-all; }

.booking2-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    margin-top: 22px;
}
.booking2-form label {
    display: block;
    margin: 14px 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}
.booking2-grid label { margin-top: 0; }
.booking2-form input,
.booking2-form textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background-color: var(--white);
    border: 1px solid var(--border);
    outline: none;
    color: var(--charcoal);
    font: inherit;
}
.booking2-form textarea { min-height: 110px; resize: vertical; padding: 12px 14px; }
.booking2-form input:focus,
.booking2-form textarea:focus { border-color: var(--navy); }

.booking2-participants { margin: 18px 0 6px; }
.booking2-participants label { margin: 0 0 6px; }
.booking2-participants input {
    width: 100px !important;
    min-height: 46px;
}

.booking2-participant-block {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.booking2-participant-heading {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--navy);
}

.booking2-honeypot { position: absolute; left: -9999px; top: -9999px; }

.booking2-submit {
    margin-top: 20px;
    border: none;
    border-radius: var(--radius-md);
    background-color: var(--navy);
    color: var(--white);
    padding: 14px 32px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s;
}
.booking2-submit:hover { filter: brightness(1.15); }
.booking2-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.booking2-message { margin-top: 12px; font-size: 0.9rem; font-weight: 600; display: none; }
.booking2-message.is-success { color: #1a7f37; display: block; }
.booking2-message.is-error { color: #c0392b; display: block; }
.booking2-note { margin-top: 10px; font-size: 0.85rem; color: var(--muted-gray); }
.booking2-spots-hint { margin: 6px 0 0; font-size: 0.85rem; font-weight: 600; color: #c0392b; }
.booking2-sold-out { color: var(--charcoal); margin-bottom: 20px; }

@media (max-width: 600px) {
    .booking2-form { padding: 22px; }
    .booking2-grid { grid-template-columns: 1fr; }
}

/* Figma export duplicated the site header inside .booking-form; the real
   <header class="site-header"> already renders it, so hide the duplicate. */
.navigation-desktop-talentr { display: none; }

.view-booking {
    display: flex;
    justify-content: center;
    padding: 96px 24px 120px;
    background-color: var(--cream);
}
.view-booking-card {
    width: 100%;
    max-width: 560px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
}
.view-booking-card h1 {
    font-family: 'Poppins', 'Inter', Arial, sans-serif;
    font-size: 2rem;
    color: var(--navy);
    margin: 0 0 8px;
}
.view-booking-event {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 24px;
}
.view-booking-details { margin: 0 0 32px; }
.view-booking-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.view-booking-row:first-child { border-top: 1px solid var(--border); }
.view-booking-row dt {
    font-weight: 600;
    color: var(--muted-gray);
}
.view-booking-row dd {
    margin: 0;
    font-weight: 700;
    color: var(--charcoal);
    text-align: right;
}
.view-booking-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Responsive */
@media (max-width: 900px) {
    h1 { font-size: 2.3rem; }
    h2 { font-size: 1.7rem; }
    .hero-grid, .split, .locations-grid, .journey-grid { grid-template-columns: 1fr; }
    /* Homepage hero subtitle ("Meet people who get it...") — desktop only. */
    .home .hero .section-sub { display: none; }
    .steps-grid, .explore-grid, .events-grid, .purpose-grid, .book-grid, .upcoming-grid { grid-template-columns: repeat(2, 1fr); }
    .collab-card { flex-basis: calc(50% - 16px); }
    .testimonial-card { flex-basis: calc(70% - 21px); }
    .slider-arrow { width: 38px; height: 38px; font-size: 1.2rem; }
    .slider-arrow-prev { left: -10px; }
    .slider-arrow-next { right: -10px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    /* The "Explore" column shares row 1 with the brand block. Drop its heading
       down so it lines up with the tagline under the logo, not with the top of
       the logo. 76px = logo height (60px) + .footer-logo margin-bottom (16px). */
    .footer-grid > .footer-brand + .footer-col { margin-top: 76px; }
    .footer-social-icons--desktop { display: none; }
    .footer-social-icons--mobile { display: flex; }
    /* nav pieces are gone below this width — keep the logo from growing the header */
    .brand-logo { height: 44px; }

    /* --- Mobile menu --- */
    .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 10px;
        background: transparent;
        border: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .nav-toggle-bar {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--white);
        border-radius: 2px;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .nav-actions { gap: 10px; }

    .puzzle-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--navy);
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        padding: 6px 0 10px;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        display: none;
    }
    .puzzle-nav.is-open { display: flex; }

    .puzzle-item { width: 100%; }
    .puzzle-piece { border-radius: 0; }
    .puzzle-piece:not(.is-active):hover { background: transparent; }
    .puzzle-content {
        flex-direction: row;
        justify-content: flex-start;
        gap: 14px;
        padding: 14px 26px;
        font-size: 0.85rem;
    }

    .dropdown {
        position: static;
        transform: none;
        display: block;
        min-width: 0;
        margin: 0;
        padding: 0 0 6px;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        z-index: auto;
    }
    .dropdown::before { display: none; }
    .dropdown a {
        color: rgba(255, 255, 255, 0.75);
        padding: 9px 26px 9px 58px;
        font-size: 0.85rem;
    }
    .dropdown a:hover { background: #0a4a85; color: var(--white); }
    section { padding: 56px 0; }
    .quote-band { margin: -14px 0; }
    .retreat-card { padding: 32px; }
    .faq-layout { grid-template-columns: 1fr; }
    .faq-categories {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 8px;
    }
    .faq-category-link { flex-shrink: 0; }
    .connect-grid { grid-template-columns: 1fr; }
    .location-collage { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    /* remove the hero auto-slideshow image entirely on phones */
    .hero-image.hero-slideshow { display: none; }

    /* pull "Come as you are" up closer to the hero on phones */
    .home .hero { padding-bottom: 40px; }
    .home .section-cream { padding-top: 24px; }

    /* Mobile hero background (admin-toggled): grey scrim that runs left to
       right — darkest on the left, fading away to the right — copy pushed into
       the lower half of the image, compact side-by-side buttons. The section
       is only as tall as its content, so it ends just below the buttons. */
    .home .hero.hero-mobile-bg::before {
        background: linear-gradient(90deg, rgba(48, 48, 48, 0.62), rgba(48, 48, 48, 0));
    }
    .home .hero.hero-mobile-bg {
        padding-bottom: 28px;
        margin-bottom: 0;
    }
    /* No white gap after the hero: the cream section butts straight up against
       it and absorbs the old gap as extra top padding, so its content stays
       exactly where it was. */
    .home .hero.hero-mobile-bg + .section-cream { padding-top: 60px; }
    .home .hero.hero-mobile-bg > .container { padding-top: 40vh; }
    .home .hero.hero-mobile-bg .hero-actions {
        flex-wrap: nowrap;
        gap: 12px;
        margin: 20px 0 0;
    }
    .home .hero.hero-mobile-bg .hero-actions .btn {
        flex: 1;
        width: auto;
        min-width: 0;
        padding: 10px 12px;
        font-size: 0.8rem;
    }
    /* Admin-chosen colour for the "Explore Events" button only (SiteSettings
       mobile_hero_bg_button_style: "navy" or "orange"). "Join our Community"
       always keeps its white outline style from the rule above. */
    .home .hero.hero-mobile-bg--btn-navy .hero-actions .btn-primary {
        background: var(--navy);
        border-color: var(--navy);
        color: var(--white);
    }
    .home .hero.hero-mobile-bg--btn-orange .hero-actions .btn-primary {
        background: var(--orange);
        border-color: var(--orange);
        color: var(--navy);
    }

    /* Collaborators / testimonials sliders — one card at a time, with a peek of the next */
    .collab-card { flex-basis: 78%; min-width: 0; }
    .testimonial-card { flex-basis: 85%; min-width: 0; }
    .slider-arrow { width: 34px; height: 34px; font-size: 1.1rem; }
    .slider-arrow-prev { left: 0; }
    .slider-arrow-next { right: 0; }

    /* keep the logo, CTA and menu button on one row on small phones */
    .nav-wrap { padding: 12px 16px; gap: 10px; }
    .puzzle-book-btn { padding: 10px 14px; font-size: 0.78rem; }
    .events-grid, .purpose-grid, .book-grid, .upcoming-grid { grid-template-columns: 1fr; }
    /* No decorative spark on the "Explore Our Experiences" / "Coming Up" headings on phones */
    #explore-experiences .heading-spark,
    #coming-up .heading-spark { display: none; }

    .explore-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    /* Phone-only: swap the Meditation (3rd) and Workshops (4th) cards,
       whole box and all. Every card gets an explicit order so the two
       swapped ones don't jump ahead of the untouched cards. */
    .explore-grid > .explore-card:nth-child(1) { order: 1; }
    .explore-grid > .explore-card:nth-child(2) { order: 2; }
    .explore-grid > .explore-card:nth-child(3) { order: 4; }
    .explore-grid > .explore-card:nth-child(4) { order: 3; }
    .explore-grid > .explore-card:nth-child(5) { order: 5; }
    .explore-grid > .explore-card:nth-child(6) { order: 6; }
    .explore-card { flex-direction: column; height: auto; }
    .explore-visual { flex: 0 0 70px; width: 100%; }
    .explore-side-shape { width: 100%; height: 70px; }
    .explore-dotted-path { display: none; }
    /* Pull the icon to the left so it sits inside the solid part of the
       navy/orange curve rather than over the fade on the right. */
    .explore-icon-wrap { width: 100%; top: 14px; justify-content: flex-start; padding-left: 16px; }
    .explore-icon-wrap svg { width: 24px; height: 24px; }
    .explore-icon-wrap .explore-icon-img { width: 44px; height: 44px; }
    .explore-body { padding: 12px; }
    .explore-body h3 { font-size: 0.88rem; }
    .explore-body p { font-size: 0.72rem; margin-bottom: 8px; }
    .explore-body .btn-text { font-size: 0.72rem; }
    .figures { gap: 4px; }
    .figure-head { width: 44px; height: 44px; }
    .figure-body { width: 42px; height: 76px; }
    .booking-details-form { grid-template-columns: 1fr; padding: 24px; }
    .booking-details-form > * { grid-column: 1 / -1; }
}

/* Floating "Book Your Session" button — fixed bottom-right on every page */
.book-fab {
    position: fixed;
    right: clamp(16px, 4vw, 28px);
    bottom: clamp(16px, 4vw, 28px);
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 24px;
    border-radius: 999px;
    background-color: var(--orange);
    color: var(--navy);
    font-family: 'League Spartan', Arial, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.book-fab:hover { background-color: #f4a52a; transform: translateY(-2px); }
.book-fab-icon { width: 22px; height: 22px; flex-shrink: 0; }

@media (max-width: 600px) {
    .book-fab { padding: 16px; gap: 0; }
    .book-fab-icon { width: 24px; height: 24px; }
    .book-fab-text { display: none; }
}

/* ============================================================
   Home page — restyle to the redesign mockup.
   Scoped to <main class="home"> so other pages are untouched:
   League Spartan headings / DM Sans body, 12px button radius,
   numbered step cards, accent bars, quote band, flight path.
   ============================================================ */
.home { font-family: 'DM Sans', 'Inter', Arial, sans-serif; }
.home h1, .home h2, .home h3 {
    font-family: 'League Spartan', 'Poppins', Arial, sans-serif;
    letter-spacing: -0.01em;
}
.home h1 { font-size: clamp(1.45rem, 1.1rem + 2vw, 2.8rem); }
.home h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); }
.home p { font-family: 'DM Sans', 'Inter', Arial, sans-serif; }

/* Buttons — softer 12px radius from the mockup */
.home .btn { border-radius: var(--radius-md); padding: 15px 28px; }
.home .btn-light {
    background: var(--white);
    color: var(--navy);
    border-color: var(--white);
}
.home .btn-light:hover { filter: brightness(0.94); }

/* Orange accent bar shared by the hero image and the retreat image */
.home .accent-bar { position: relative; overflow: hidden; }
.home .accent-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 100%;
    background: var(--orange);
    z-index: 1;
}

/* Hero image card */
.home .hero-image {
    background: var(--soft-blue);
    border: none;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 24px;
}

/* Steps → white cards with numbered icon panels */
.home .steps-grid { gap: 24px; }
.home .step {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 24px;
}
.home .step-badge {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    font-family: 'League Spartan', 'Poppins', Arial, sans-serif;
    font-size: 1.1rem;
    margin-bottom: 20px;
}
.home .step:nth-child(2n) .step-badge { background: var(--navy); color: var(--white); }
.home .step h3 { font-size: 1.05rem; }
.home .step p { margin-bottom: 20px; }
.home .step::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--orange);
}

/* Quote band — jigsaw-piece graphic echoing "every piece".
   Laptop (default): a single graphic (assets/img/puzzle-pattern-laptop.svg), no text overlay —
   the artwork stands on its own. See the max-width:600px override for the phone layout, which
   uses the older graphic with the two quote lines overlaid in its corners. */
.quote-band {
    display: flex;
    justify-content: center;
    position: relative;
    padding: 0;
    margin: -24px 0;
    background: var(--cream);
    overflow-x: hidden;
}
.quote-graphic {
    position: relative;
    width: 92%;
    aspect-ratio: 75 / 20;
    background: url('/assets/img/puzzle-pattern-laptop.svg') no-repeat center / 100% 100%;
}
.quote-graphic-2,
.quote-band .quote-line {
    display: none;
}
.quote-band .quote-line {
    position: absolute;
    font-family: 'Baloo 2', 'League Spartan', 'Poppins', Arial, sans-serif;
    font-size: clamp(1.5rem, 5.2vw, 2.1rem);
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
}
.quote-line-navy {
    left: 30%;
    top: 45%;
    width: 20%;
    color: var(--navy);
    text-align: center;
}
.quote-line-orange {
    left: 52%;
    bottom: 60%;
    width: 21%;
    color: var(--orange);
    text-align: center;
}

/* Retreat — image sits flush with an orange accent, no wrapping card */
.home .retreat-card { background: transparent; padding: 0; }
.home .retreat-card .img-placeholder {
    min-height: 420px;
    background: var(--pale-orange);
    border: none;
}

/* Collaborators */
.section-collaborators { padding: 56px 0; }
.section-collaborators h2 { margin-bottom: 4px; }
.section-collaborators .slider { margin-top: 20px; }
.home .collab-card {
    border: 1px solid #E0E7EF;
    border-radius: 18px;
    padding: 16px;
}
.home .collab-card .img-placeholder.portrait {
    min-height: 190px;
    border: none;
    background: var(--white);
    color: rgba(255, 255, 255, 0.7);
    position: relative;
    overflow: hidden;
}
.home .collab-card .img-placeholder.portrait img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* These portraits are framed tight — align to the top so the head isn't cropped */
.home .collab-card .img-placeholder.portrait img[src*="coach-moataz"],
.home .collab-card .img-placeholder.portrait img[src*="ziad"],
.home .collab-card .img-placeholder.portrait img[src*="hagar"] {
    object-position: top;
}
/* Moataz's shot sits low — pull the image up a bit */
.home .collab-card .img-placeholder.portrait img[src*="coach-moataz"] {
    transform: scale(1.1) translateY(-6%);
}
.home .collab-card h3 {
    font-family: 'League Spartan', 'Poppins', Arial, sans-serif;
    font-size: 1.35rem;
    margin: 16px 0 4px;
}

/* Testimonials — bordered cards, alternating navy / orange */
.home .testimonial-card {
    box-shadow: none;
    border: 1.5px solid var(--navy);
    border-radius: 18px;
}
.home .testimonial-card:nth-child(2n) { border-color: var(--orange); }
.home .testimonial-card .attribution {
    color: var(--muted-gray);
    margin-top: 20px;
}
.home .testimonial-card::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--orange);
    margin-top: 16px;
}

/* Locations — alternating pale-orange / navy */
.home .location-card { background: var(--pale-orange); }
.home .location-card:nth-child(odd) { background: var(--navy); color: var(--white); }
.home .location-card:nth-child(odd) h3 { color: var(--white); }
.home .location-card:nth-child(odd) .tag { color: rgba(255, 255, 255, 0.75); }

@media (max-width: 900px) {
    .home .steps-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Phone: collapse the two side-by-side puzzle graphics back to one, text back in its own
   corners. Placed here (after the base .quote-band/.quote-line rules above) so it actually
   wins the cascade — an earlier attempt inside the first max-width:600px block above was
   being overridden by the later base rules despite the media query matching. */
@media (max-width: 600px) {
    .quote-graphic-2 { display: none; }
    /* Phone graphic (assets/img/puzzle-pattern.svg) has its own quote text baked
       in, same as the laptop graphic — the separate .quote-line HTML overlay
       stays hidden (base rule above) so the text doesn't render twice. */
    .quote-graphic {
        /* A couple of px wider than the viewport on each side — background-size:cover
           can leave a hairline gap at the exact edge from sub-pixel rounding; the
           overscan (clipped by .quote-band's overflow-x:hidden) guarantees full bleed. */
        width: calc(100% + 8px);
        margin-left: -4px;
        margin-right: -4px;
        aspect-ratio: auto;
        height: clamp(260px, 36vw, 480px);
        background: url('/assets/img/puzzle-pattern.svg') no-repeat center 68% / cover;
    }
}