/* ==========================================================================
   SSBC – Student Startup Business Center, CUI Wah Campus
   "Launch" theme · Bootstrap 5.3.8 (dark colour mode) + custom layer
   Used by: _Layout, _InnerLayout, _Topbar, _Navbar, _Footer and the Ssbc views.
   ========================================================================== */

:root,
[data-bs-theme="dark"] {
    /* Palette */
    --night: #090a24;
    --night-2: #0e1033;
    --surface: #13153d;
    --surface-2: #1a1d4d;
    --brand: #27276d;
    --magenta: #f0287f;
    --magenta-rgb: 240, 40, 127;
    --gold: #e3c56e;
    --gold-rgb: 227, 197, 110;
    --violet: #8487ff;
    --violet-rgb: 132, 135, 255;
    --ink: #e8e9ff;
    --muted: #a6a9d6;
    --line: rgba(160, 165, 255, .14);
    --line-strong: rgba(160, 165, 255, .28);

    --font-display: "Unbounded", "Manrope", system-ui, sans-serif;
    --radius-lg: 1.5rem;
    --radius: 1rem;
    --radius-sm: .625rem;

    /* Bootstrap variables */
    --bs-body-bg: var(--night);
    --bs-body-bg-rgb: 9, 10, 36;
    --bs-body-color: var(--ink);
    --bs-body-color-rgb: 232, 233, 255;
    --bs-secondary-color: var(--muted);
    --bs-tertiary-bg: var(--surface);
    --bs-emphasis-color: #fff;
    --bs-heading-color: #fff;
    --bs-border-color: var(--line);
    --bs-primary: var(--violet);
    --bs-primary-rgb: var(--violet-rgb);
    --bs-primary-text-emphasis: #c3c5ff;
    --bs-primary-bg-subtle: rgba(var(--violet-rgb), .14);
    --bs-primary-border-subtle: rgba(var(--violet-rgb), .35);
    --bs-link-color: #b3b5ff;
    --bs-link-color-rgb: 179, 181, 255;
    --bs-link-hover-color: var(--gold);
    --bs-link-hover-color-rgb: var(--gold-rgb);
    --bs-body-font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-lg: var(--radius);
    --bs-focus-ring-color: rgba(var(--gold-rgb), .45);
    --bs-form-invalid-color: #ff7aa8;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    background: var(--night);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    display: flex; flex-direction: column; min-height: 100vh;
}
.site-main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
h1, h2, .section-title, .hero-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; }
a { text-decoration: none; transition: color .15s ease; }
img { max-width: 100%; height: auto; }
::selection { background: rgba(var(--magenta-rgb), .45); color: #fff; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.skip-link {
    position: absolute; left: 1rem; top: -3rem; z-index: 2000;
    background: var(--gold); color: var(--night);
    padding: .5rem 1rem; border-radius: .5rem; font-weight: 700;
}
.skip-link:focus { top: 1rem; }

/* ---------- Sky: star field + perspective grid (hero & page headers) ---------- */
.sky {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(60rem 30rem at 85% -10%, rgba(var(--magenta-rgb), .22), transparent 60%),
        radial-gradient(50rem 30rem at -10% 20%, rgba(var(--violet-rgb), .22), transparent 60%),
        radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.7), transparent 60%),
        radial-gradient(1px 1px at 140px 80px, rgba(255,255,255,.45), transparent 60%),
        radial-gradient(1.5px 1.5px at 260px 160px, rgba(255,255,255,.6), transparent 60%),
        radial-gradient(1px 1px at 330px 40px, rgba(255,255,255,.35), transparent 60%),
        linear-gradient(180deg, var(--night) 0%, #0c0e30 100%);
    background-size: auto, auto, 360px 220px, 360px 220px, 360px 220px, 360px 220px, auto;
}
.sky::after {
    /* perspective floor grid */
    content: ""; position: absolute; left: -50%; right: -50%; bottom: -1px; height: 55%;
    background-image:
        linear-gradient(rgba(var(--violet-rgb), .28) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--violet-rgb), .28) 1px, transparent 1px);
    background-size: 64px 64px;
    transform: perspective(520px) rotateX(62deg);
    transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%);
            mask-image: linear-gradient(to top, #000 0%, transparent 85%);
}

/* ---------- Buttons ---------- */
.btn {
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: 999px;
    --bs-btn-padding-x: 1.35rem;
    letter-spacing: .005em;
}
.btn-lg { --bs-btn-padding-x: 1.75rem; --bs-btn-padding-y: .8rem; --bs-btn-font-size: 1rem; }
.btn-gold {
    --bs-btn-color: #1b1430;
    --bs-btn-bg: var(--gold);
    --bs-btn-border-color: var(--gold);
    --bs-btn-hover-color: #1b1430;
    --bs-btn-hover-bg: #f0d68a;
    --bs-btn-hover-border-color: #f0d68a;
    --bs-btn-active-color: #1b1430;
    --bs-btn-active-bg: #cfae52;
    --bs-btn-active-border-color: #cfae52;
    --bs-btn-focus-shadow-rgb: var(--gold-rgb);
    box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .4), 0 .5rem 2rem -.5rem rgba(var(--gold-rgb), .55);
}
.btn-gold:hover { box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .6), 0 .75rem 2.5rem -.5rem rgba(var(--gold-rgb), .75); }
.btn-ghost, .btn-outline-primary {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: rgba(255, 255, 255, .03);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(var(--violet-rgb), .16);
    --bs-btn-hover-border-color: rgba(var(--violet-rgb), .7);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(var(--violet-rgb), .25);
    --bs-btn-active-border-color: var(--violet);
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--magenta);
    --bs-btn-border-color: var(--magenta);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ff4592;
    --bs-btn-hover-border-color: #ff4592;
    --bs-btn-active-bg: #d61b6c;
    --bs-btn-active-border-color: #d61b6c;
    --bs-btn-focus-shadow-rgb: var(--magenta-rgb);
    box-shadow: 0 .5rem 2rem -.6rem rgba(var(--magenta-rgb), .7);
}
.link-arrow { font-weight: 700; color: var(--gold); display: inline-flex; align-items: center; gap: .4rem; }
.link-arrow::after { content: ""; width: 1.4rem; height: 1px; background: currentColor; transition: width .2s ease; }
.link-arrow:hover { color: #f0d68a; }
.link-arrow:hover::after { width: 2.2rem; }

/* ---------- Top bar ---------- */
.topbar {
    background: #06071a;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: .8125rem;
}
.topbar a { color: var(--muted); }
.topbar a:hover { color: var(--gold); }
.topbar .bi { color: var(--magenta); }
.social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 50%;
    border: 1px solid var(--line); color: var(--ink) !important;
    transition: border-color .15s ease, background .15s ease;
}
.social-link .bi { color: inherit !important; }
.social-link:hover { border-color: var(--gold); background: rgba(var(--gold-rgb), .12); }

/* ---------- Navbar ---------- */
.site-navbar {
    background: rgba(9, 10, 36, .94);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .2s ease, background .2s ease;
}
.site-navbar.is-scrolled { background: rgba(9, 10, 36, .98); box-shadow: 0 1rem 2rem -1rem rgba(0, 0, 0, .6); }
.site-navbar .navbar-brand {
    background: #fff; border-radius: .75rem; padding: .3rem .55rem;
    box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 .5rem 1.5rem -.5rem rgba(var(--violet-rgb), .6);
}
.site-navbar .navbar-brand img { height: 44px; width: auto; display: block; }
@media (max-width: 575.98px) { .site-navbar .navbar-brand img { height: 34px; } }

.site-navbar .nav-link {
    --bs-nav-link-color: var(--ink);
    --bs-nav-link-hover-color: #fff;
    font-weight: 600; font-size: .9rem;
    position: relative;
}
.site-navbar .nav-link.active, .site-navbar .nav-link.show { color: var(--gold) !important; }
@media (min-width: 1200px) {
    .site-navbar .navbar-nav .nav-link { padding: 1.55rem .75rem; }
    .site-navbar .navbar-nav .nav-link::after {
        content: ""; position: absolute; left: .75rem; right: .75rem; bottom: 1.1rem;
        height: 2px; border-radius: 2px;
        background: linear-gradient(90deg, var(--magenta), var(--gold));
        transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
    }
    .site-navbar .navbar-nav .nav-link:hover::after,
    .site-navbar .navbar-nav .nav-link.active::after { transform: scaleX(1); }
}
.site-navbar .navbar-toggler { border: 1px solid var(--line-strong); border-radius: .75rem; padding: .45rem .6rem; }
.site-navbar .navbar-toggler-icon { filter: invert(1); }
.offcanvas { --bs-offcanvas-bg: var(--night-2); --bs-offcanvas-border-color: var(--line); }
.offcanvas-title { font-family: var(--font-display); }

/* ---------- Home hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7.5rem); isolation: isolate; }
.hero .sky { z-index: -1; }
.trajectory { display: none; position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.trajectory-path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.trajectory-glow { stroke-opacity: .22; }
@media (prefers-reduced-motion: no-preference) {
    .trajectory-path { stroke-dashoffset: 1; animation: launch 2.4s cubic-bezier(.6, .05, .3, 1) .2s forwards; }
    .hero-copy > * { opacity: 0; transform: translateY(14px); animation: rise .8s cubic-bezier(.2, .7, .2, 1) forwards; }
    .hero-copy > :nth-child(2) { animation-delay: .12s; }
    .hero-copy > :nth-child(3) { animation-delay: .24s; }
    .hero-copy > :nth-child(4) { animation-delay: .36s; }
}
@keyframes launch { to { stroke-dashoffset: 0; } }
@keyframes rise { to { opacity: 1; transform: none; } }

.hero-title {
    font-size: clamp(2.3rem, 5.6vw, 4.6rem);
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -.035em;
    margin-bottom: 1.5rem;
    max-width: 12ch;
    background: linear-gradient(100deg, #fff 30%, #d9d4ff 60%, var(--gold) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: #cfd1f5; max-width: 34rem; margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
.hero-backers { margin: 2.5rem 0 0; font-size: .85rem; color: var(--muted); max-width: 30rem; padding-left: 1rem; border-left: 2px solid rgba(var(--magenta-rgb), .6); }

.hero-frame {
    position: relative;
    border-radius: var(--radius-lg);
    padding: .5rem;
    background: linear-gradient(140deg, rgba(var(--magenta-rgb), .55), rgba(var(--violet-rgb), .25) 40%, rgba(var(--gold-rgb), .5));
    box-shadow: 0 2rem 5rem -1.5rem rgba(var(--magenta-rgb), .45), 0 0 6rem -2rem rgba(var(--violet-rgb), .6);
}
@media (min-width: 992px) { .trajectory { display: block; } .hero-frame { transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); } }
.hero-frame .carousel { border-radius: calc(var(--radius-lg) - .5rem); overflow: hidden; background: var(--night); }
.hero-frame .carousel-item { aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.slide-backdrop {
    position: absolute; inset: -40px;
    background-size: cover; background-position: center;
    filter: blur(26px) brightness(.45) saturate(1.2); transform: scale(1.1);
}
.slide-img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.hero-frame .carousel-caption {
    z-index: 2; left: 0; right: 0; bottom: 0; padding: 3rem 1.25rem 2.25rem; text-align: left;
    background: linear-gradient(to top, rgba(9, 10, 36, .92), rgba(9, 10, 36, 0));
}
.hero-frame .carousel-caption h2 { font-family: var(--bs-body-font-family); font-weight: 700; font-size: clamp(.95rem, 1.4vw, 1.15rem); color: #fff; margin: 0 0 .5rem; letter-spacing: 0; }
.hero-frame .carousel-caption.caption-cta { left: auto; right: 1rem; bottom: 2rem; width: auto; padding: 0; background: none; }
.hero-frame .carousel-indicators { z-index: 3; margin-bottom: .6rem; gap: .3rem; }
.hero-frame .carousel-indicators [data-bs-target] { width: 16px; height: 3px; border: 0; border-radius: 2px; margin: 0; opacity: .4; transition: width .3s ease, opacity .3s ease; }
.hero-frame .carousel-indicators .active { width: 28px; opacity: 1; background: var(--gold); }
.hero-frame .carousel-control-prev, .hero-frame .carousel-control-next { z-index: 3; width: 3.5rem; opacity: 0; transition: opacity .2s ease; }
.hero-frame .carousel:hover .carousel-control-prev, .hero-frame .carousel:hover .carousel-control-next,
.hero-frame .carousel-control-prev:focus-visible, .hero-frame .carousel-control-next:focus-visible { opacity: 1; }
.hero-frame .carousel-control-prev-icon, .hero-frame .carousel-control-next-icon {
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background-color: rgba(9, 10, 36, .7); background-size: 45%; border: 1px solid var(--line-strong);
}
@media (max-width: 575.98px) {
    .hero-frame .carousel-caption { padding: 2rem .9rem 1.6rem; }
    .hero-frame .carousel-caption .btn { --bs-btn-font-size: .78rem; --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .8rem; }
    .hero-frame .carousel-caption.caption-cta { right: .6rem; bottom: 1.4rem; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section-title { font-size: clamp(1.5rem, 2.8vw, 2.25rem); line-height: 1.15; margin-bottom: 1.25rem; color: #fff; }

.offers { border-top: 1px solid var(--line); background: linear-gradient(180deg, #0c0e30, var(--night)); }
.offers p { color: #c6c8ee; max-width: 34rem; }
.cta-block p { margin-inline: auto; }
.offer-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.offer-list li { display: flex; gap: 1rem; padding: 1.5rem 1.25rem 1.5rem 0; border-bottom: 1px solid var(--line); }
.offer-list li:nth-child(odd) { border-right: 1px solid var(--line); }
.offer-list li:nth-child(even) { padding-left: 1.5rem; }
.offer-list .bi {
    flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: .9rem;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem;
    color: var(--gold); background: rgba(var(--gold-rgb), .1); border: 1px solid rgba(var(--gold-rgb), .3);
}
.offer-list h3 { font-size: 1.05rem; margin: .2rem 0 .3rem; color: #fff; }
.offer-list p { margin: 0; font-size: .92rem; color: var(--muted); }
@media (max-width: 575.98px) {
    .offer-list { grid-template-columns: 1fr; }
    .offer-list li, .offer-list li:nth-child(even) { padding: 1.25rem 0; border-right: 0 !important; }
}

/* ---------- Panels (glass) ---------- */
.card, .panel {
    --bs-card-bg: transparent;
    --bs-card-border-color: var(--line);
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-color: var(--ink);
    position: relative;
    background: linear-gradient(180deg, rgba(26, 29, 77, .72), rgba(19, 21, 61, .72));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1.5rem 3rem -2rem rgba(0, 0, 0, .8);
}
.panel-foot { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--line); margin-top: auto; }
.card-header-ssbc {
    display: flex; align-items: center; gap: .7rem;
    padding: 1.15rem 1.25rem; border-bottom: 1px solid var(--line);
}
.card-header-ssbc h2, .card-header-ssbc h3 { font-size: 1rem; margin: 0; color: #fff; }
.card-header-ssbc .bi {
    width: 2.1rem; height: 2.1rem; border-radius: .65rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--magenta-rgb), .14); color: #ff7fb4; border: 1px solid rgba(var(--magenta-rgb), .3);
}

/* News & events */
.feed-item + .feed-item { border-top: 1px solid var(--line); }
.feed-item { display: flex; gap: .9rem; padding: .95rem 1.25rem; align-items: flex-start; transition: background .15s ease; }
.feed-item:hover { background: rgba(var(--violet-rgb), .07); }
.feed-title { display: block; font-weight: 700; font-size: .95rem; line-height: 1.4; color: #fff; margin-bottom: .2rem; }
.feed-title:hover { color: var(--gold); }
.feed-meta { font-size: .8rem; color: var(--muted); }
.feed-meta .bi { margin-right: .35rem; color: var(--violet); }
.date-badge {
    flex: 0 0 3.25rem; height: 3.5rem; border-radius: .8rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    line-height: 1.05; text-transform: uppercase;
    background: linear-gradient(160deg, rgba(var(--magenta-rgb), .3), rgba(var(--violet-rgb), .2));
    border: 1px solid rgba(var(--magenta-rgb), .4);
}
.date-badge .m { font-size: .65rem; letter-spacing: .06em; color: var(--gold); font-weight: 700; }
.date-badge .d { font-size: 1.25rem; font-weight: 700; color: #fff; font-family: var(--font-display); }
.feed-scroll { max-height: 36rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* Image framed in a panel */
.panel-img { padding: .5rem; }
.panel-img img { display: block; width: 100%; border-radius: calc(var(--radius-lg) - .5rem); }

/* Quick links */
.quick-links { background: transparent; }
.quick-links .list-group-item {
    display: flex; align-items: center; gap: .7rem;
    background: transparent; color: var(--ink);
    border: 0; border-radius: .7rem !important;
    padding: .55rem .75rem; font-weight: 600; font-size: .9rem;
}
.quick-links .list-group-item .bi-arrow-up-right { margin-left: auto; opacity: .35; font-size: .75rem; transition: transform .15s ease, opacity .15s ease; }
.quick-links .list-group-item:hover { background: rgba(var(--violet-rgb), .12); color: #fff; }
.quick-links .list-group-item:hover .bi-arrow-up-right { opacity: 1; color: var(--gold); transform: translate(2px, -2px); }
.quick-links .ql-icon {
    flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: .55rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--violet-rgb), .12); color: #b3b5ff; font-size: .95rem;
}

/* ---------- Inner pages ---------- */
.page-header {
    position: relative; overflow: hidden; isolation: isolate;
    padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 6vw, 5rem);
    border-bottom: 1px solid var(--line);
}
.page-header .sky { z-index: -1; }
.page-header .sky::after { height: 80%; }
.page-header h1 {
    font-size: clamp(1.75rem, 4.2vw, 3rem); margin: 0; letter-spacing: -.03em; max-width: 22ch;
    background: linear-gradient(100deg, #fff 40%, var(--gold));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-header .breadcrumb {
    --bs-breadcrumb-divider-color: var(--muted);
    --bs-breadcrumb-item-active-color: var(--muted);
    margin-bottom: .9rem; font-size: .85rem;
}
.page-header .breadcrumb a { color: var(--gold); }
.page-header .lead { margin: 1rem 0 0; max-width: 40rem; color: #cfd1f5; }

.content-card { padding: clamp(1.25rem, 3.2vw, 2.5rem); }
.prose { font-size: 1.02rem; color: #d3d5f6; }
.prose > :last-child { margin-bottom: 0; }
.prose p, .prose li { max-width: 72ch; }
.prose strong { color: #fff; }
.prose h1, .prose h2 { font-size: clamp(1.25rem, 2.3vw, 1.6rem); margin: 2rem 0 1rem; color: #fff; }
.prose h3 { font-size: 1.15rem; margin: 1.5rem 0 .6rem; color: #fff; }
.prose h4 { font-size: 1.02rem; margin: 1.25rem 0 .5rem; color: #fff; }
.prose > h1:first-child, .prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose .lead { color: #eef0ff; font-weight: 500; }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li { margin-bottom: .4rem; }
.prose li::marker { color: var(--magenta); font-weight: 700; }
.prose hr { margin: 2rem 0; border-color: var(--line-strong); opacity: 1; }
.prose a:not(.btn) { text-decoration: underline; text-decoration-color: rgba(var(--violet-rgb), .45); text-underline-offset: 3px; }
.prose a:not(.btn):hover { text-decoration-color: var(--gold); }
.prose img { border-radius: .75rem; }
.prose .figure-full { display: block; width: 100%; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }
.prose .alert { border-radius: var(--radius); }
.alert-primary { --bs-alert-bg: rgba(var(--violet-rgb), .12); --bs-alert-border-color: rgba(var(--violet-rgb), .35); --bs-alert-color: #dfe0ff; }

/* Team */
.team-card { text-align: center; height: 100%; padding: 1.75rem 1.4rem; }
.team-card img {
    width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem;
    padding: 3px; background: linear-gradient(135deg, var(--magenta), var(--gold));
}
.team-card h3 { font-size: 1.05rem; margin-bottom: .2rem; }
.team-card h3 a { color: #fff; text-decoration: none !important; }
.team-card h3 a:hover { color: var(--gold); }
.team-card .role { color: var(--gold); font-weight: 600; font-size: .85rem; margin-bottom: 1rem; }
.team-card ul { list-style: none; padding: 1rem 0 0; margin: 0; font-size: .85rem; text-align: left; border-top: 1px solid var(--line); }
.team-card li { display: flex; gap: .55rem; padding: .25rem 0; word-break: break-word; margin: 0; }
.team-card li::marker { content: none; }
.team-card li .bi { color: var(--violet); }

/* Contact tiles */
.contact-tile { display: flex; gap: 1rem; align-items: flex-start; height: 100%; padding: 1.35rem; }
.contact-tile > .bi {
    flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: .85rem;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem;
    color: var(--gold); background: rgba(var(--gold-rgb), .1); border: 1px solid rgba(var(--gold-rgb), .3);
}
.contact-tile h3 { font-family: var(--bs-body-font-family); font-size: .85rem; color: var(--muted); margin: 0 0 .25rem; font-weight: 600; }
.contact-tile p { margin: 0; font-weight: 700; color: #fff; }

/* Sidebar */
.sidebar { position: sticky; top: 6.5rem; }
.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.map-embed iframe { border: 0; filter: invert(.9) hue-rotate(200deg) saturate(.7) brightness(.95); }

/* ---------- Footer ---------- */
.site-footer {
    position: relative; overflow: hidden;
    background: #06071a; color: var(--muted); font-size: .9rem;
    border-top: 1px solid var(--line);
}
.site-footer::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--magenta), var(--gold), transparent);
}
.site-footer h2 { font-family: var(--bs-body-font-family); color: #fff; font-size: .95rem; font-weight: 700; margin-bottom: 1rem; letter-spacing: 0; }
.site-footer a { color: #c6c8ee; }
.site-footer a:hover { color: var(--gold); }
.site-footer .footer-links li { margin-bottom: .5rem; }
.site-footer address .bi { color: var(--magenta); width: 1.25rem; display: inline-block; }
.site-footer .footer-bottom { border-top: 1px solid var(--line); font-size: .8rem; color: rgba(166, 169, 214, .75); }
.footer-logo { background: #fff; border-radius: .75rem; padding: .45rem .7rem; display: inline-block; }
.footer-logo img { height: 40px; width: auto; display: block; }

/* Back to top */
.back-to-top {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030;
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-2); color: #fff; border: 1px solid var(--line-strong);
    box-shadow: 0 .75rem 2rem -.75rem rgba(var(--magenta-rgb), .7);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s, border-color .2s ease;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { border-color: var(--gold); color: var(--gold); }

@media (max-width: 575.98px) {
    .lead { font-size: 1.075rem; }
}

.site-footer .addr-indent { display: inline-block; padding-left: 1.25rem; }

/* ---------- Numbers readout (overlaps the hero's lower edge) ---------- */
.readout { position: relative; z-index: 2; margin-top: clamp(-4.5rem, -6vw, -2.5rem); }
.readout-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-strong);
    background: linear-gradient(180deg, rgba(26, 29, 77, .92), rgba(15, 17, 52, .92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2rem 4rem -2rem rgba(0, 0, 0, .9), 0 0 0 1px rgba(var(--magenta-rgb), .06);
    overflow: hidden;
}
.readout-item { position: relative; padding: 1.6rem 1.6rem 1.5rem; display: flex; flex-direction: column; }
.readout-item + .readout-item { border-left: 1px solid var(--line); }
.readout-item::before {
    content: ""; position: absolute; left: 1.6rem; top: 0; width: 2.25rem; height: 2px;
    background: linear-gradient(90deg, var(--magenta), var(--gold));
}
.readout dt { order: 2; font-weight: 700; color: #fff; font-size: .95rem; margin-top: .35rem; }
.readout-num {
    order: 1; margin: 0;
    font-family: var(--font-display); font-weight: 600; letter-spacing: -.04em;
    font-size: clamp(2.4rem, 4.2vw, 3.4rem); line-height: 1;
    background: linear-gradient(180deg, #fff 20%, var(--gold));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.readout-num span { font-size: .6em; vertical-align: .55em; margin-left: .05em; }
.readout-note { order: 3; margin: .2rem 0 0; font-size: .82rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 767.98px) {
    .readout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .readout-item { padding: 1.25rem 1.1rem; }
    .readout-item::before { left: 1.1rem; }
    .readout-item:nth-child(3) { border-left: 0; }
    .readout-item:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- Launch sequence ---------- */
.pathway-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 2rem; margin-bottom: 2.5rem; }
.pathway-head .section-title { margin: 0; }
.pathway-head p { margin: 0; color: var(--muted); max-width: 30rem; }
.pathway-steps {
    list-style: none; margin: 0; padding: 0; position: relative;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem;
}
.pathway-steps::before {
    /* the line connecting the stage markers */
    content: ""; position: absolute; left: 1.4rem; right: calc((100% - 5rem) / 5 - 1.4rem); top: 1.4rem; height: 2px;
    background: linear-gradient(90deg, rgba(var(--violet-rgb), .55), var(--magenta) 70%, var(--gold));
    box-shadow: 0 0 12px rgba(var(--magenta-rgb), .45);
}
.step { position: relative; margin: 0; padding: 0; }
.step::marker { content: none; }
.step-no {
    position: relative; z-index: 1;
    width: 2.8rem; height: 2.8rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: #fff;
    background: var(--night); border: 2px solid rgba(var(--violet-rgb), .7);
    box-shadow: 0 0 0 6px var(--night);
    margin-bottom: 1.25rem;
}
.step:nth-child(3) .step-no, .step:nth-child(4) .step-no { border-color: var(--magenta); }
.step-final .step-no {
    background: linear-gradient(135deg, var(--magenta), var(--gold)); border: 0; color: #1b1430;
    box-shadow: 0 0 0 6px var(--night), 0 0 2rem rgba(var(--gold-rgb), .55);
}
.step-when { margin: 0 0 .2rem; font-size: .8rem; font-weight: 700; color: var(--gold); }
.step h3 { font-size: 1.1rem; margin: 0 0 .5rem; color: #fff; }
.step p { font-size: .9rem; color: var(--muted); margin-bottom: .75rem; }
.step .step-out {
    display: inline-block; margin: 0; font-size: .82rem; font-weight: 700; color: #fff;
    padding: .45rem .75rem; border-radius: .6rem;
    background: rgba(var(--violet-rgb), .1); border: 1px solid rgba(var(--violet-rgb), .3);
}
.step .step-out span { display: block; font-weight: 600; color: var(--muted); font-size: .72rem; }
@media (max-width: 991.98px) {
    .pathway-steps { grid-template-columns: 1fr; gap: 0; }
    .pathway-steps::before { left: 1.4rem; right: auto; top: 1.4rem; bottom: 1.4rem; width: 2px; height: auto;
        background: linear-gradient(180deg, rgba(var(--violet-rgb), .55), var(--magenta) 70%, var(--gold)); }
    .step { padding: 0 0 2rem 4.25rem; }
    .step:last-child { padding-bottom: 0; }
    .step-no { position: absolute; left: 0; top: 0; margin: 0; }
}

/* Offers: last cell is a call to action */
.offer-list .offer-cta { align-items: center; }
.offer-list .offer-cta h3 { color: var(--gold); }
@media (max-width: 991.98px) {
    .pathway-steps::before { display: none; }
    .step:not(:last-child)::after {
        content: ""; position: absolute; left: calc(1.4rem - 1px); top: 2.8rem; bottom: 0; width: 2px;
        background: linear-gradient(180deg, rgba(var(--violet-rgb), .6), var(--magenta));
    }
    .step:nth-child(4)::after { background: linear-gradient(180deg, var(--magenta), var(--gold)); }
}

/* Vertical timeline (Roadmap, SSBC Model): same look as the mobile layout, at every width */
.pathway-steps.is-vertical { grid-template-columns: 1fr; gap: 0; }
.pathway-steps.is-vertical::before { display: none; }
.pathway-steps.is-vertical .step { padding: 0 0 2rem 4.25rem; }
.pathway-steps.is-vertical .step:last-child { padding-bottom: 0; }
.pathway-steps.is-vertical .step-no { position: absolute; left: 0; top: 0; margin: 0; }
.pathway-steps.is-vertical .step:not(:last-child)::after {
    content: ""; position: absolute; left: calc(1.4rem - 1px); top: 2.8rem; bottom: 0; width: 2px;
    background: linear-gradient(180deg, rgba(var(--violet-rgb), .6), var(--magenta));
}
.pathway-steps.is-vertical .step:nth-child(4)::after { background: linear-gradient(180deg, var(--magenta), var(--gold)); }
.pathway-steps.is-vertical .step p { max-width: 60ch; }

/* Person caption under a photo (Team) */
.person-caption { padding: 1rem .75rem .75rem; text-align: center; }
.person-caption h2 { font-size: 1.1rem; margin: 0 0 .25rem; color: #fff; }
.person-caption p { margin: 0; color: var(--gold); font-weight: 600; font-size: .9rem; }
.prose .note { font-size: .875rem; color: var(--muted); }