/* System-default lighting engine (2026-07-12). The hardcoded dark default
   is retired: :root now declares the light palette, the
   prefers-color-scheme media block follows the operating system natively,
   and a manual campus theme choice (the shared ode_theme_preference key,
   stamped as data-theme on the root element by the pre-paint script in
   each page head) overrides the OS base in both directions:
   - no data-theme attribute: the OS decides via the media block;
   - data-theme="light": the :not() guard keeps the media block away;
   - data-theme="dark": the explicit block applies dark regardless of OS. */
:root {
    /* Color Palette (light) */
    --color-bg: #ffffff;
    --color-surface: #f5f5f8;
    --color-surface-hover: #ebebf1;
    --color-primary: #7a00e6; /* Deep vibrant royal purple */
    --color-primary-hover: #6300ba;
    --color-text-main: #3d4451; /* Dark slate */
    --color-text-heading: #14141a;
    --color-border: #dfdfe6;
    --color-nav-glass: rgba(255, 255, 255, 0.85);
    --color-shadow-strong: rgba(20, 20, 40, 0.14);

    /* State feedback tokens (shared success/error language; mirrors the
       token-driven approach of the SPA's dual-theme framework) */
    --color-success: #1b7a43;
    --color-success-soft: rgba(27, 122, 67, 0.10);
    --color-error: #b3261e;
    --color-error-soft: rgba(179, 38, 30, 0.10);

    /* Typography */
    --font-sans: 'Inter', sans-serif;
    --font-math: 'Noto Serif', serif; /* Standard serif for Sigma symbol */

    /* Spacing & Layout */
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 2.5rem;

    /* Transitions */
    --transition-fast: 0.2s ease;
}

/* System default: no manual choice stamped, so dark follows the OS. The
   values are identical to the manual dark block below and MUST stay in
   sync (no preprocessor in a zero-dependency tree). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #121212; /* Matte black / dark charcoal */
        --color-surface: #1e1e1e;
        --color-surface-hover: #2a2a2a;
        --color-primary: #7a00e6;
        --color-primary-hover: #9b30ff;
        --color-text-main: #b0b8c1; /* Light slate gray */
        --color-text-heading: #ffffff;
        --color-border: #333333;
        --color-nav-glass: rgba(18, 18, 18, 0.85);
        --color-shadow-strong: rgba(0, 0, 0, 0.5);
        --color-success: #34c27b;
        --color-success-soft: rgba(52, 194, 123, 0.12);
        --color-error: #e05260;
        --color-error-soft: rgba(224, 82, 96, 0.12);
    }
}

/* Manual dark override from the campus theme toggle. */
:root[data-theme="dark"] {
    --color-bg: #121212;
    --color-surface: #1e1e1e;
    --color-surface-hover: #2a2a2a;
    --color-primary: #7a00e6;
    --color-primary-hover: #9b30ff;
    --color-text-main: #b0b8c1;
    --color-text-heading: #ffffff;
    --color-border: #333333;
    --color-nav-glass: rgba(18, 18, 18, 0.85);
    --color-shadow-strong: rgba(0, 0, 0, 0.5);
    --color-success: #34c27b;
    --color-success-soft: rgba(52, 194, 123, 0.12);
    --color-error: #e05260;
    --color-error-soft: rgba(224, 82, 96, 0.12);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text-main);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4 {
    color: var(--color-text-heading);
    font-weight: 700;
    line-height: 1.2;
}

/* Premium "Breathe" metrics (storefront refinement sprint, 2026-07-12):
   paragraphs open up to 1.7 leading site-wide for a calmer read. */
p {
    line-height: 1.7;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

/* Typography & Symbols */
.sigma {
    font-family: var(--font-math);
    font-size: 1.5rem;
    font-weight: normal;
    font-style: italic;
    color: var(--color-primary);
    margin-right: 0.25rem;
}

.sigma-large {
    font-family: var(--font-math);
    font-size: 22rem;
    font-weight: normal;
    font-style: italic;
    color: rgba(122, 0, 230, 0.1); /* Subtle large background sigma */
    background: linear-gradient(135deg, var(--color-primary) 0%, rgba(122, 0, 230, 0.05) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    user-select: none;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 5%;
    background-color: var(--color-nav-glass);
    backdrop-filter: blur(12px);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    border-bottom: 1px solid var(--color-border);
}

.logo {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-heading);
    letter-spacing: -0.5px;
}

.navbar nav {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
}

.navbar nav a:not(.btn-secondary):not(.btn-primary):hover {
    color: var(--color-text-heading);
}

/* Campus bar topography (2026-07-12): brand and Explore left, identity
   cluster right, standardized with the portal and ode shells. */
.campus-left {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
    flex-wrap: wrap;
}

.campus-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.campus-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.campus-logo {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: block;
    flex-shrink: 0;
}

.campus-brand-name {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.25px;
    color: var(--color-text-heading);
    white-space: nowrap;
}

.campus-brand:hover .campus-brand-name {
    color: var(--color-primary-hover);
}

/* Zero-dependency Explore dropdown, CSS-only via :hover and :focus-within,
   mirroring the ode shell's nav-dropdown component. */
.explore-dropdown {
    position: relative;
    display: inline-block;
}

.explore-trigger {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-surface);
    color: var(--color-text-heading);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.explore-dropdown:hover .explore-trigger,
.explore-dropdown:focus-within .explore-trigger {
    background: var(--color-surface-hover);
    border-color: var(--color-primary);
}

.explore-arrow {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform var(--transition-fast);
}

.explore-dropdown:hover .explore-arrow,
.explore-dropdown:focus-within .explore-arrow {
    transform: rotate(180deg);
}

.explore-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 1100;
    min-width: 15rem;
    max-width: calc(100vw - 2rem);
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px var(--color-shadow-strong);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

/* Transparent hover bridge spanning the trigger-to-panel gap. */
.explore-menu::before {
    content: "";
    position: absolute;
    top: -0.4rem;
    left: 0;
    right: 0;
    height: 0.4rem;
}

.explore-dropdown:hover .explore-menu,
.explore-dropdown:focus-within .explore-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

.explore-menu li {
    margin: 0;
}

.explore-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--color-text-main);
    white-space: nowrap;
}

a.explore-item:hover,
a.explore-item:focus-visible {
    background: var(--color-surface-hover);
    color: var(--color-text-heading);
    outline: none;
}

.explore-item.explore-active {
    color: var(--color-primary-hover);
    font-weight: 600;
}

.explore-item.explore-locked {
    opacity: 0.55;
    cursor: default;
}

.explore-badge {
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* Identity cluster: the Log in link is the static logged-out default; the
   inline campus-identity script unhides the signed-in cluster. The hidden
   guards must beat the display rules the components carry. */
.nav-login {
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
}

.nav-login[hidden] {
    display: none !important;
}

.nav-identity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-identity[hidden] {
    display: none !important;
}

.auth-portal-link {
    color: var(--color-primary-hover);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    white-space: nowrap;
}

.auth-portal-link:hover,
.auth-portal-link:focus-visible {
    background: rgba(122, 0, 230, 0.1);
}

/* The avatar image is masked to a circle by its clipping wrapper and its
   own radius, so any square Google photo renders as a clean disc. */
.nav-avatar-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    overflow: hidden;
    flex-shrink: 0;
}

.nav-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.nav-avatar[hidden] {
    display: none;
}

.nav-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(122, 0, 230, 0.12);
    color: var(--color-primary-hover);
    font-size: 0.9rem;
    font-weight: 700;
}

.nav-avatar-fallback[hidden] {
    display: none;
}

.auth-gear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--color-text-main);
    transition: color var(--transition-fast), background-color var(--transition-fast), transform 0.3s ease;
}

.auth-gear:hover,
.auth-gear:focus-visible {
    color: var(--color-primary-hover);
    background: rgba(122, 0, 230, 0.1);
    transform: rotate(30deg);
    outline: none;
}

/* Buttons */
.btn-primary {
    display: inline-block;
    background-color: var(--color-primary);
    color: #ffffff;
    padding: 0.875rem 1.75rem;
    border-radius: 4px;
    font-weight: 600;
    transition: all var(--transition-fast);
    border: 1px solid var(--color-primary);
    box-shadow: 0 2px 10px rgba(122, 0, 230, 0.2);
}

/* Hover-lift micro-interaction: every primary CTA rises 2px on a soft
   purple halo (storefront refinement sprint spec values). */
.btn-primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(128, 0, 128, 0.3);
    color: #ffffff;
}

.btn-secondary {
    display: inline-block;
    color: var(--color-text-heading);
    font-weight: 600;
}

.btn-secondary:hover {
    color: var(--color-primary-hover);
}

.btn-outline {
    display: inline-block;
    background-color: transparent;
    color: var(--color-text-heading);
    padding: 0.875rem 1.75rem;
    border-radius: 4px;
    font-weight: 600;
    transition: all var(--transition-fast);
    border: 1px solid var(--color-border);
}

.btn-outline:hover {
    border-color: var(--color-text-main);
    background-color: var(--color-surface-hover);
}

/* Hero Section */
.hero {
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 4rem 2rem;
    padding-top: 6rem; /* Account for fixed nav */
    position: relative;
}

.hero-content {
    flex: 1;
    max-width: 600px;
    z-index: 2;
}

.hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.badge {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    background-color: rgba(122, 0, 230, 0.15);
    color: var(--color-primary-hover);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    border: 1px solid rgba(122, 0, 230, 0.3);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: var(--spacing-md);
    letter-spacing: -1px;
}

.highlight {
    color: var(--color-primary-hover);
}

.hero p {
    font-size: 1.125rem;
    margin-bottom: var(--spacing-lg);
    max-width: 500px;
}

.cta-group {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* Features Section — 4rem 2rem "breathe" padding shared by every body
   section (storefront refinement sprint, 2026-07-12). */
.features {
    padding: 4rem 2rem;
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.features h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: var(--spacing-xl);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
}

.card {
    background-color: var(--color-bg);
    padding: var(--spacing-lg);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.card:hover {
    transform: translateY(-8px);
    border-color: var(--color-primary);
    box-shadow: 0 10px 30px var(--color-shadow-strong);
}

.card-icon {
    width: 56px;
    height: 56px;
    background-color: rgba(122, 0, 230, 0.1);
    color: var(--color-primary-hover);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    border: 1px solid rgba(122, 0, 230, 0.2);
}

.card h3 {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-sm);
}

/* Booking Section — reuses the Pillar-4-style token palette and the same
   surface/purple-halo language as .card / .card-icon above. */
.booking {
    padding: 4rem 2rem;
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-border);
}

.booking h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
}

.booking-lede {
    text-align: center;
    max-width: 620px;
    margin: 0 auto var(--spacing-xl);
}

.booking-steps {
    list-style: none;
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.booking-step {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: var(--spacing-lg);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.booking-step:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: 0 10px 30px var(--color-shadow-strong);
}

.booking-step-number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background-color: rgba(122, 0, 230, 0.1);
    color: var(--color-primary-hover);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 700;
    border: 1px solid rgba(122, 0, 230, 0.2);
}

.booking-step-body h3 {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-sm);
}

.booking-cta {
    margin-top: var(--spacing-md);
}

/* Contact Section */
.contact-section {
    padding: 4rem 2rem;
    border-top: 1px solid var(--color-border);
}

.contact-section h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
}

.contact-lede {
    text-align: center;
    max-width: 560px;
    margin: 0 auto var(--spacing-lg);
}

.contact-form {
    max-width: 640px;
    margin: 0 auto;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-field label {
    color: var(--color-text-heading);
    font-weight: 600;
    font-size: 0.9rem;
}

.form-field input,
.form-field textarea {
    background-color: var(--color-bg);
    color: var(--color-text-heading);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition: border-color var(--transition-fast);
    resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
    border-color: var(--color-primary);
}

.contact-form .btn-primary {
    border: 1px solid var(--color-primary);
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    align-self: flex-start;
}

.contact-form .btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.form-status {
    display: none;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    font-size: 0.95rem;
    border: 1px solid var(--color-border);
}

.form-status.is-success,
.form-status.is-error,
.form-status:not(:empty) {
    display: block;
}

.form-status.is-success {
    color: var(--color-success);
    background-color: var(--color-success-soft);
    border-color: var(--color-success);
}

.form-status.is-error {
    color: var(--color-error);
    background-color: var(--color-error-soft);
    border-color: var(--color-error);
}

/* Compact horizontal footer (reverted from the 3-column grid, 2026-07-12
   evening pass): one tight flex block shared by every root page. The
   Purple Stapler brand anchors the left, the consolidated linear nav sits
   beside it, and a single muted bottom line carries the copyright plus
   the cancellation-policy note inline. The Brand Sandwich holds: stapler
   in the header and footer, Sigma anchoring the body center. */
footer {
    padding: var(--spacing-lg) 2rem;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg);
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 1200px;
    margin: 0 auto;
}

.footer-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md) var(--spacing-lg);
}

.footer-brand-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.footer-logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: block;
    flex-shrink: 0;
}

.footer-brand-name {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.25px;
    color: var(--color-text-heading);
}

.footer-brand-row:hover .footer-brand-name {
    color: var(--color-primary-hover);
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm) var(--spacing-lg);
    font-size: 0.95rem;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
    color: var(--color-primary-hover);
}

.footer-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-lg);
    font-size: 0.875rem;
}

.footer-policy-note {
    font-size: 0.8rem;
    opacity: 0.65;
}

/* In-Place Authentication Overlay (index.html): the Log in control opens
   this dialog in place of the old /portal/ redirect. GIS renders its
   Sign in with Google button into the slot and One Tap prompts alongside;
   Cancel, Escape, or a backdrop click dismisses it. */
.auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    background: rgba(10, 8, 18, 0.55);
    backdrop-filter: blur(4px);
}

.auth-overlay[hidden] {
    display: none !important;
}

.auth-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
    max-width: 400px;
    padding: var(--spacing-xl) var(--spacing-lg);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 18px 48px var(--color-shadow-strong);
    text-align: center;
}

.auth-modal-logo {
    width: 48px;
    height: 48px;
    border-radius: 10px;
}

.auth-modal h3 {
    font-size: 1.3rem;
}

.auth-modal p {
    font-size: 0.95rem;
}

.auth-gsi-slot {
    min-height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.auth-modal-fallback {
    font-size: 0.85rem;
}

.auth-modal-fallback a {
    color: var(--color-primary-hover);
    font-weight: 600;
}

.auth-modal-close {
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
}

/* Reviews Page Styles */
.reviews-section {
    padding: 4rem 2rem;
    padding-top: 8rem;
    max-width: 1000px;
    margin: 0 auto;
}

.reviews-header {
    margin-bottom: var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.filters {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.filter-btn {
    background-color: var(--color-surface);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
    padding: 0.5rem 1.2rem;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.filter-btn.active, .filter-btn:hover {
    background-color: rgba(122, 0, 230, 0.15);
    color: var(--color-text-heading);
    border-color: var(--color-primary);
}

.sort-select {
    background-color: var(--color-surface);
    color: var(--color-text-heading);
    border: 1px solid var(--color-border);
    padding: 0.6rem 1rem;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    outline: none;
}

.sort-select:focus {
    border-color: var(--color-primary);
}

.reviews-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.review-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: var(--spacing-lg);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    animation: fadeIn 0.4s ease-out forwards;
}

.review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--color-shadow-strong);
    border-color: var(--color-primary);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.review-title {
    font-size: 1.25rem;
    color: var(--color-text-heading);
    margin-bottom: 0.25rem;
}

.review-meta {
    font-size: 0.875rem;
    color: var(--color-text-main);
}

.review-meta strong {
    color: var(--color-text-heading);
}

.review-stars {
    color: #f59e0b; /* Golden yellow for stars */
    font-size: 1.1rem;
    letter-spacing: 2px;
}

.review-text {
    margin-bottom: var(--spacing-md);
    line-height: 1.7;
}

.tutor-response {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: rgba(122, 0, 230, 0.05);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 8px 8px 0;
}

.tutor-response-label {
    font-weight: 700;
    color: var(--color-primary-hover);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tutor-response-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text-main);
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Stack the fixed header: brand and Explore centered on top, the
       identity cluster centered beneath, everything wrap-ready so the
       dropdown panels can never force a horizontal scrollbar. */
    .navbar {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .campus-left {
        justify-content: center;
        gap: var(--spacing-sm) var(--spacing-md);
    }

    .navbar nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-sm) var(--spacing-md);
    }

    .navbar nav a {
        padding: 0.25rem var(--spacing-sm);
        text-align: center;
    }

    /* Narrow-viewport dropdown sheet: the Explore panel re-anchors from
       its trigger to the fixed navbar itself (the nearest positioned
       ancestor once the dropdown container goes static), spanning the bar
       edge to edge so no trigger position can push it, visible or hidden,
       past the viewport. */
    .explore-dropdown {
        position: static;
    }

    .explore-menu {
        left: 0.75rem;
        right: 0.75rem;
        min-width: 0;
        max-width: none;
    }

    .explore-item {
        white-space: normal;
    }

    .hero {
        flex-direction: column;
        text-align: center;
        padding-top: 11rem; /* Clear the taller stacked fixed nav */
    }

    .reviews-section {
        padding-top: 11rem; /* Clear the taller stacked fixed nav */
    }
    
    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .cta-group {
        justify-content: center;
    }
    
    .hero-visual {
        margin-top: var(--spacing-xl);
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }

    .sigma-large {
        font-size: 16rem;
    }

    /* Compact footer collapse: brand, nav, and the meta line stack
       centered on narrow viewports, still one tight block. */
    .footer-main,
    .footer-meta {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-nav {
        justify-content: center;
    }
}