/* ========================================
   CAMERON HUGHES - Premium Interactive Website
   Fonts: Roboto (sans) + Bitter (serif) + Oswald (condensed) — Cameron's brand faces
   Colors: Black, White, Red (#C8102E)
   ======================================== */

/* ---------- CSS Variables / Theming ---------- */
:root {
    --red: #C8102E;
    --red-dark: #A00D24;
    --red-light: #E8344E;
    --font-sans: 'Roboto', system-ui, -apple-system, sans-serif;
    --font-serif: 'Bitter', Georgia, serif;
    --font-condensed: 'Oswald', 'Roboto', sans-serif;
    --nav-height: 80px;
    --container: 1200px;
    --radius: 12px;
    --radius-lg: 24px;
}

[data-theme="dark"] {
    --bg: #0A0A0A;
    --bg-elevated: #111111;
    --bg-card: #161616;
    --bg-card-hover: #1E1E1E;
    --text: #FFFFFF;
    --text-secondary: #B0B0B0;
    --text-muted: #8A8A8A;
    --border: rgba(255,255,255,0.07);
    --border-hover: rgba(255,255,255,0.14);
    --shadow: 0 4px 60px rgba(0,0,0,0.5);
    --nav-bg: rgba(10,10,10,0.85);
    --glass: rgba(255,255,255,0.03);
    --glow-color: rgba(200,16,46,0.15);
}

[data-theme="light"] {
    --bg: #FAFAFA;
    --bg-elevated: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-card-hover: #F5F5F5;
    --text: #0A0A0A;
    --text-secondary: #555555;
    --text-muted: #666666;
    --border: rgba(0,0,0,0.07);
    --border-hover: rgba(0,0,0,0.14);
    --shadow: 0 4px 60px rgba(0,0,0,0.08);
    --nav-bg: rgba(250,250,250,0.9);
    --glass: rgba(0,0,0,0.02);
    --glow-color: rgba(200,16,46,0.08);
}

/* ---- Keyboard Focus ---- */
:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Custom Cursor ---------- */
.custom-cursor {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--red);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, border-color 0.3s, background 0.3s;
    mix-blend-mode: difference;
}
.custom-cursor.cursor-hover {
    width: 60px;
    height: 60px;
    background: rgba(200,16,46,0.1);
    border-color: var(--red-light);
}
.cursor-dot {
    position: fixed;
    width: 6px;
    height: 6px;
    background: var(--red);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
}
@media (max-width: 768px), (pointer: coarse) {
    .custom-cursor,
    .cursor-dot,
    .hero-particles,
    .scroll-progress,
    .grain-overlay,
    .page-loader { display: none !important; }
    body { cursor: auto; }
}

/* ---------- Typography ---------- */
.section-tag {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 16px;
    position: relative;
    padding-left: 32px;
}
.section-tag::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 20px;
    height: 2px;
    background: var(--red);
    transition: width 0.3s ease;
}
.section-tag:hover::before { width: 28px; }

.section-title {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 600px;
}

.text-accent {
    color: var(--red);
    position: relative;
}

/* Animated underline on hover for text-accent inside section titles */
.section-title .text-accent {
    display: inline-block;
    background-image: linear-gradient(var(--red), var(--red));
    background-size: 0% 2px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.section-header:hover .section-title .text-accent,
.book-content:hover .section-title .text-accent,
.contact-info:hover .section-title .text-accent {
    background-size: 100% 2px;
}

.text-muted { color: var(--text-muted); }

.section-header {
    text-align: center;
    margin-bottom: 64px;
}
.section-header .section-subtitle { margin: 0 auto; }

/* ---------- Split Text Animation ---------- */
.split-word { display: inline-block; }
.split-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px) rotateX(-40deg);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.split-visible .split-char {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}
/* Hover scatter for split text */
.split-text:hover .split-char {
    color: var(--red);
    transition: color 0.15s ease;
}

/* ---------- Text Scramble ---------- */
.text-scramble {
    cursor: pointer;
    transition: letter-spacing 0.3s ease;
}
.text-scramble:hover {
    letter-spacing: 0.04em;
}

/* ---------- Typewriter ---------- */
.typewriter {
    border-right: 2px solid var(--red);
    animation: blink 0.8s step-end infinite;
    display: inline;
}
@keyframes blink {
    50% { border-color: transparent; }
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 16px 36px;
    border-radius: 60px;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

/* Shine sweep on hover */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.35s ease;
}
.btn:hover::before { left: 100%; }

.btn-primary {
    background: var(--red);
    color: #fff;
    border: 2px solid var(--red);
}
.btn-primary:hover {
    background: var(--red-dark);
    border-color: var(--red-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(200, 16, 46, 0.35);
}

.btn-outline {
    background: transparent;
    color: var(--text);
    border: 2px solid var(--border-hover);
}
.btn-outline:hover {
    border-color: var(--red);
    color: var(--red);
    transform: translateY(-2px);
}

.btn-lg { padding: 20px 48px; font-size: 1rem; }
.btn-full { width: 100%; }

/* Ripple effect */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%) scale(0);
    animation: rippleAnim 0.6s ease-out;
    pointer-events: none;
}
@keyframes rippleAnim {
    to { transform: translate(-50%, -50%) scale(40); opacity: 0; }
}

/* Magnetic hover (JS sets transform) */
.magnetic {
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------- Reveal Animation ---------- */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.about-grid .reveal:nth-child(2) { transition-delay: 0.15s; }
.book-grid .reveal:nth-child(2) { transition-delay: 0.15s; }
.testimonials-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.testimonials-grid .reveal:nth-child(3) { transition-delay: 0.2s; }
.contact-grid .reveal:nth-child(2) { transition-delay: 0.15s; }

/* ---- CMS Content Stability ---- */
.hero-title, .hero-subtitle, .hero-badge {
    min-height: 1em;
}
.section-title, .section-body {
    min-height: 0.5em;
}

/* ---------- Navbar ---------- */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    transition: all 0.3s ease;
}
.navbar.scrolled {
    height: 64px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.nav-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo { display: flex; flex-direction: column; }
.logo-name {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: letter-spacing 0.3s ease;
}
.nav-logo:hover .logo-name { letter-spacing: 0.18em; }
.logo-tagline {
    font-family: var(--font-serif);
    font-size: 0.7rem;
    font-style: italic;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.nav-links { display: flex; gap: 36px; }
.nav-link {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    transition: color 0.3s;
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--red);
    transform: translateX(-50%) scale(0);
    transition: transform 0.3s ease;
}
.nav-link:hover, .nav-link.active { color: var(--text); }
.nav-link:hover::after, .nav-link.active::after { transform: translateX(-50%) scale(1); }

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

.theme-toggle {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    transition: all 0.3s;
    border: 1px solid var(--border);
}
.theme-toggle:hover {
    color: var(--text);
    border-color: var(--border-hover);
    background: var(--glass);
    transform: rotate(180deg);
}
[data-theme="dark"] .icon-moon { display: none; }
[data-theme="light"] .icon-sun { display: none; }

.nav-cta {
    font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 10px 24px; border-radius: 60px;
    background: var(--red); color: #fff;
    transition: all 0.3s;
    position: relative; overflow: hidden;
}
.nav-cta::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.35s ease;
}
.nav-cta:hover::before { left: 100%; }
.nav-cta:hover {
    background: var(--red-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(200,16,46,0.3);
}

/* ---------- Nav Dropdown ---------- */
.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}
.nav-dropdown-link {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    transition: color 0.3s;
    position: relative;
    font-family: var(--font-sans);
}
.nav-dropdown-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--red);
    transform: translateX(-50%) scale(0);
    transition: transform 0.3s ease;
}
.nav-dropdown-link:hover,
.nav-dropdown-link.active {
    color: var(--text);
}
.nav-dropdown-link:hover::after,
.nav-dropdown-link.active::after {
    transform: translateX(-50%) scale(1);
}
.nav-dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--text-secondary);
    transition: color 0.3s;
    display: flex;
    align-items: center;
}
.nav-dropdown-toggle:hover {
    color: var(--text);
}
.nav-dropdown-arrow {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.nav-dropdown.open .nav-dropdown-arrow {
    transform: rotate(180deg);
}
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 180px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1001;
}
.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -14px;
    left: -10px;
    width: calc(100% + 20px);
    height: 14px;
}
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.nav-dropdown-item {
    display: block;
    padding: 10px 24px;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    transition: color 0.3s, background 0.3s, padding-left 0.3s;
}
.nav-dropdown-item:hover {
    color: var(--red);
    background: rgba(200, 16, 46, 0.05);
    padding-left: 28px;
}
.nav-link-center {
    font-weight: 700;
    letter-spacing: 0.1em;
}

.menu-toggle {
    display: none; flex-direction: column; gap: 5px; width: 28px;
}
.menu-toggle span {
    display: block; height: 2px;
    background: var(--text); border-radius: 2px;
    transition: all 0.3s;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}

/* --- Hero Background Gradient --- */
.hero-bg-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(200, 16, 46, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(200, 16, 46, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(200, 16, 46, 0.05) 0%, transparent 40%);
    z-index: 0;
    animation: heroGradientShift 12s ease-in-out infinite alternate;
}
@keyframes heroGradientShift {
    0% { opacity: 0.7; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.05); }
}

/* Hero Particles */
.hero-particles {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none; overflow: hidden;
}
.particle {
    position: absolute;
    bottom: -10px;
    background: rgba(200,16,46,0.5);
    border-radius: 50%;
    animation: floatUp linear infinite;
    opacity: 0;
}
@keyframes floatUp {
    0% { transform: translateY(0) scale(0); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.3; }
    100% { transform: translateY(-100vh) scale(1); opacity: 0; }
}

.hero-content {
    position: relative; z-index: 2;
    text-align: center; padding: 0 24px; max-width: 900px;
}

.hero-badge {
    display: inline-flex; align-items: center;
    padding: 8px 24px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 60px; margin-bottom: 32px;
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.05);
    transition: border-color 0.3s;
}
.hero-badge:hover { border-color: rgba(255,255,255,0.4); }
.hero-badge span {
    font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: #fff;
}

.hero-title {
    font-family: var(--font-serif);
    color: #fff; margin-bottom: 24px;
    text-shadow: 0 4px 40px rgba(0,0,0,0.5);
}
.hero-title-line {
    display: block;
    font-size: clamp(3.5rem, 10vw, 8rem);
    font-weight: 900; line-height: 0.95;
    letter-spacing: -0.03em;
    transition: letter-spacing 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.hero-title:hover .hero-title-line {
    letter-spacing: 0.02em;
}
.hero-title-outline {
    -webkit-text-stroke: 2px #fff;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 2px 20px rgba(255,255,255,0.15));
    transition: filter 0.3s ease;
}
.hero-title:hover .hero-title-outline {
    filter: drop-shadow(0 4px 30px rgba(200,16,46,0.4));
    -webkit-text-stroke-color: var(--red-light);
}

.hero-subtitle {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.8);
    max-width: 600px;
    margin: 0 auto 24px;
    font-weight: 300; line-height: 1.7;
}

.hero-quote {
    font-family: var(--font-serif);
    font-size: 0.95rem; font-style: italic;
    color: rgba(255,255,255,0.6);
    max-width: 550px; margin: 0 auto 40px;
    line-height: 1.7;
}
.quote-mark {
    font-size: 2rem; color: var(--red);
    line-height: 0; vertical-align: -0.3em; margin-right: 4px;
}
.quote-attr {
    display: block; margin-top: 8px;
    font-family: var(--font-sans); font-style: normal;
    font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--red);
}

.hero-actions {
    display: flex; gap: 16px;
    justify-content: center; flex-wrap: wrap;
}
.hero-actions .btn-outline {
    color: #fff; border-color: rgba(255,255,255,0.3);
}
.hero-actions .btn-outline:hover {
    border-color: var(--red); color: #fff;
    background: rgba(200,16,46,0.1);
}

.hero-scroll {
    position: absolute; bottom: 40px;
    left: 50%; transform: translateX(-50%); z-index: 2;
}
.scroll-indicator {
    display: flex; flex-direction: column;
    align-items: center; gap: 8px;
}
.scroll-indicator span {
    font-size: 0.65rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}
.scroll-line {
    width: 1px; height: 48px;
    background: linear-gradient(180deg, rgba(255,255,255,0.4), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%, 100% { opacity: 0.4; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.2); }
}

/* --- Hero Stats --- */
.hero-stats {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid var(--border);
}
.hero-stat {
    text-align: center;
}
.hero-stat-number {
    display: block;
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 700;
    color: var(--red);
    line-height: 1;
}
.hero-stat-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-secondary);
    margin-top: 8px;
}

/* --- Video Showcase --- */
.video-showcase {
    padding: 100px 0;
    background: var(--bg-elevated);
}
.video-showcase-frame {
    max-width: 960px;
    margin: 40px auto 0;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16/9;
    border: 1px solid var(--border);
}
.video-showcase-frame iframe {
    border-radius: 16px;
}
.video-showcase-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}
/* Labeled "VIDEO TODO" placeholder (matches the photo-placeholder system) */
.video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 8px),
        var(--bg-card);
}
.video-placeholder-play { color: var(--red); opacity: 0.9; }
.video-placeholder-caption {
    font-family: var(--font-sans); font-weight: 600;
    font-size: 1.05rem; color: var(--text);
}
.video-placeholder-note {
    font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.42); max-width: 40ch; line-height: 1.5;
}

/* ---------- Logos ---------- */
.logos-section {
    padding: 48px 0;
    border-bottom: 1px solid var(--border);
}
.logos-label {
    text-align: center;
    font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 32px;
}

.logos-track {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.logos-slide {
    display: flex; gap: 60px;
    animation: logoScroll 25s linear infinite;
    width: max-content;
}
.logos-slide:hover { animation-play-state: paused; }
@keyframes logoScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.logo-item {
    font-family: var(--font-serif);
    font-size: 1.1rem; font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap; letter-spacing: 0.02em;
    transition: color 0.3s, transform 0.3s;
    flex-shrink: 0;
}
a.logo-item { cursor: pointer; }

/* ---------- Quote grid (homepage testimonials, photoless) ---------- */
.quote-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}
.quote-card {
    margin: 0;
    padding: 36px 32px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.quote-card:hover { border-color: rgba(200,16,46,0.4); transform: translateY(-4px); }
.quote-card-featured {
    background: linear-gradient(180deg, rgba(200,16,46,0.06), rgba(255,255,255,0.02));
    border-color: rgba(200,16,46,0.3);
}
.quote-stars { color: var(--red); letter-spacing: 0.2em; font-size: 0.95rem; }
.quote-text {
    font-family: var(--font-serif, 'Bitter', serif);
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--text);
    margin: 0;
}
.quote-author {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 16px;
}
.quote-author strong { font-family: var(--font-sans); font-weight: 700; font-size: 1rem; }
.quote-author span { font-size: 0.85rem; opacity: 0.6; letter-spacing: 0.02em; }
.testimonials-cta { text-align: center; padding: 24px 0 8px; }

/* ---------- Pull quote (single-card testimonial moment) ---------- */
.pull-quote {
    margin: 0 auto 32px;
    max-width: 820px;
    text-align: center;
    padding: 48px 32px;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.pull-quote-stars { color: var(--red); letter-spacing: 0.25em; font-size: 0.9rem; margin-bottom: 18px; }
.pull-quote p {
    font-family: var(--font-serif, 'Bitter', serif);
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    line-height: 1.45;
    margin: 0 0 24px;
}
.pull-quote footer { font-size: 0.95rem; opacity: 0.7; }
.pull-quote footer strong { color: var(--text); margin-right: 4px; }

/* ---------- Book details card (replaces dup book cover) ---------- */
.book-details-card {
    background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(200,16,46,0.04));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 36px;
    backdrop-filter: blur(8px);
}
.book-details-eyebrow {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 16px;
}
.book-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.book-details-list li {
    font-size: 1rem;
    line-height: 1.5;
    padding-left: 20px;
    position: relative;
    color: var(--text);
    opacity: 0.92;
}
.book-details-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
}
.book-details-list strong { color: var(--text); font-weight: 700; }
@media (max-width: 768px) {
    .book-details-card { padding: 28px 24px; }
}

/* ---------- Photo placeholder (used while real photos arrive) ---------- */
.photo-placeholder {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(200,16,46,0.15), transparent 60%),
        linear-gradient(160deg, #141414, #0a0a0a 60%);
    border: 1px solid rgba(255,255,255,0.08);
}
.photo-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 8px);
    pointer-events: none;
}
.photo-placeholder-mark {
    font-family: var(--font-serif, 'Bitter', serif);
    font-weight: 800;
    font-size: clamp(3.5rem, 9vw, 6rem);
    line-height: 1;
    color: var(--red, #C8102E);
    letter-spacing: -0.02em;
    z-index: 1;
}
.photo-placeholder-caption {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
    z-index: 1;
}
.photo-placeholder-note {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    z-index: 1;
}
.photo-placeholder-portrait { aspect-ratio: 4 / 5; }

/* When a real photo is set via the admin Photos panel, it fills the spot
   and the placeholder label/texture are hidden. */
.photo-placeholder .slot-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 2;
}
.photo-placeholder.is-filled { background: var(--bg-card); }
.photo-placeholder.is-filled::before { display: none; }
.photo-placeholder.is-filled > :not(.slot-img) { display: none; }

/* Fill modifier — drops the placeholder into a parent that already
   establishes its own aspect-ratio (gallery tiles, hero backgrounds). */
.photo-placeholder-fill {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
}
.photo-placeholder-fill .photo-placeholder-mark {
    font-size: clamp(2rem, 6vw, 4rem);
}
.photo-placeholder-fill .photo-placeholder-caption {
    font-size: 0.95rem;
    padding: 0 16px;
    text-align: center;
}
.photo-placeholder-fill .photo-placeholder-note {
    font-size: 0.65rem;
    padding: 0 16px;
    text-align: center;
}

/* ---------- 4 Phases of Impact (experience page) ---------- */
.impact-section { padding: 96px 0; }
.impact-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    counter-reset: impact;
    position: relative;
}
.impact-timeline::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,16,46,0.4), rgba(200,16,46,0.4), transparent);
    z-index: 0;
}
.impact-phase {
    position: relative;
    padding: 32px 24px;
    border-radius: 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    z-index: 1;
}
.impact-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg, #0a0a0a);
    border: 2px solid var(--red, #C8102E);
    font-family: var(--font-serif, 'Bitter', serif);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--red, #C8102E);
    margin-bottom: 18px;
}
.impact-phase h3 {
    font-family: var(--font-serif, 'Bitter', serif);
    font-size: 1.4rem;
    margin: 0 0 12px;
    color: var(--text);
}
.impact-phase p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    opacity: 0.78;
}
@media (max-width: 1024px) {
    .impact-timeline { grid-template-columns: 1fr 1fr; }
    .impact-timeline::before { display: none; }
}
@media (max-width: 640px) {
    .impact-timeline { grid-template-columns: 1fr; }
}

/* ---------- Case Studies page ---------- */
[data-page="case-studies"] .page-hero {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 160px 20px 64px;
    position: relative;
    overflow: hidden;
}
[data-page="case-studies"] .page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(200,16,46,0.15), transparent 70%);
    pointer-events: none;
}
[data-page="case-studies"] .page-hero-content { position: relative; z-index: 2; max-width: 720px; }
[data-page="case-studies"] .page-hero-title {
    font-family: var(--font-serif, 'Bitter', serif);
    font-size: clamp(2.75rem, 7vw, 5rem);
    font-weight: 800;
    line-height: 1.05;
    margin: 16px 0;
}
[data-page="case-studies"] .page-hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    opacity: 0.7;
    font-weight: 300;
}

.case-studies-list { padding: 32px 0 96px; }
.case-study-card-v2 {
    max-width: 880px;
    margin: 0 auto 56px;
    padding: 48px 48px 40px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.case-study-card-v2:hover {
    border-color: rgba(200,16,46,0.4);
    transform: translateY(-3px);
}
.case-study-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.case-study-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: rgba(200,16,46,0.12);
    border: 1px solid rgba(200,16,46,0.4);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--red, #C8102E);
}
.case-study-date {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.5;
}
.case-study-title {
    font-family: var(--font-serif, 'Bitter', serif);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.2;
    margin: 0 0 28px;
}
.case-study-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    margin-bottom: 28px;
}
.case-study-block h3 {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red, #C8102E);
    margin: 0 0 8px;
}
.case-study-block p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    opacity: 0.85;
}
.case-study-outcome {
    border-left: 2px solid var(--red, #C8102E);
    padding-left: 16px;
}
.case-study-outcome strong { color: var(--text); }
.case-study-quote {
    margin: 32px 0 0;
    padding: 24px 28px;
    background: rgba(200,16,46,0.04);
    border-radius: 12px;
    border-left: 3px solid var(--red, #C8102E);
}
.case-study-quote p {
    font-family: var(--font-serif, 'Bitter', serif);
    font-size: 1.1rem;
    line-height: 1.5;
    margin: 0 0 12px;
}
.case-study-quote footer {
    font-size: 0.85rem;
    opacity: 0.7;
}
.case-study-quote footer strong { color: var(--text); margin-right: 4px; }

.case-studies-cta {
    padding: 80px 0 120px;
    text-align: center;
}
.case-studies-cta-inner {
    max-width: 640px;
    margin: 0 auto;
}
.case-studies-cta h2 {
    font-family: var(--font-serif, 'Bitter', serif);
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0 0 16px;
}
.case-studies-cta p {
    font-size: 1.1rem;
    opacity: 0.7;
    margin: 0 0 32px;
}

@media (max-width: 768px) {
    .case-study-card-v2 { padding: 32px 24px; margin-bottom: 32px; }
    .case-study-body { grid-template-columns: 1fr; gap: 20px; }
    .case-study-outcome { border-left: none; border-top: 2px solid var(--red, #C8102E); padding-left: 0; padding-top: 12px; }
}

/* ---------- Merged Case Studies + Testimonials extras ---------- */
.featured-testimonial-band {
    padding: 32px 0 48px;
}
.cs-pull-quote {
    margin: 0 auto;
    max-width: 880px;
    text-align: center;
    padding: 48px 32px;
    background: linear-gradient(180deg, rgba(200,16,46,0.08), rgba(255,255,255,0.02));
    border: 1px solid rgba(200,16,46,0.25);
    border-radius: 20px;
}
.cs-pull-quote .pull-quote-stars {
    color: var(--red);
    letter-spacing: 0.25em;
    font-size: 0.95rem;
    margin-bottom: 18px;
}
.cs-pull-quote p {
    font-family: var(--font-serif, 'Bitter', serif);
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    line-height: 1.45;
    margin: 0 0 20px;
}
.cs-pull-quote footer {
    font-size: 0.9rem;
    opacity: 0.75;
}
.cs-pull-quote footer strong { color: var(--text); margin-right: 4px; }

.legends-rail {
    padding: 32px 0 64px;
}
.legends-rail-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
}
.legend-quote {
    padding: 24px 20px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.legend-quote:hover {
    border-color: rgba(200,16,46,0.5);
    transform: translateY(-3px);
}
.legend-quote-text {
    font-family: var(--font-serif, 'Bitter', serif);
    font-size: 1.05rem;
    line-height: 1.4;
    margin-bottom: 12px;
}
.legend-quote-author {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red, #C8102E);
}

.case-study-photo {
    position: relative;
    width: calc(100% + 96px);
    margin: -48px -48px 32px;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}
@media (max-width: 768px) {
    .case-study-photo {
        width: calc(100% + 48px);
        margin: -32px -24px 24px;
        border-radius: 20px 20px 0 0;
    }
    .legends-rail-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .legends-rail-inner { grid-template-columns: 1fr; }
}

/* ---------- Testimonials carousel (case-studies page) ---------- */
.testimonials-carousel {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 calc((100vw - min(1200px, 100vw - 40px)) / 2);
    padding: 12px 4px 32px;
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(200,16,46,0.5) rgba(255,255,255,0.04);
}
.testimonials-carousel::-webkit-scrollbar {
    height: 8px;
}
.testimonials-carousel::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04);
    border-radius: 999px;
}
.testimonials-carousel::-webkit-scrollbar-thumb {
    background: rgba(200,16,46,0.5);
    border-radius: 999px;
}
.testimonials-carousel::-webkit-scrollbar-thumb:hover {
    background: rgba(200,16,46,0.8);
}
.testimonials-carousel .testimonial-card {
    flex: 0 0 calc(33.333% - 16px);
    scroll-snap-align: start;
    min-width: 320px;
    margin: 0;
}
@media (max-width: 1024px) {
    .testimonials-carousel .testimonial-card { flex: 0 0 calc(50% - 12px); }
}
@media (max-width: 768px) {
    .testimonials-carousel .testimonial-card { flex: 0 0 calc(85% - 12px); min-width: 280px; }
}
.carousel-hint {
    text-align: center;
    margin-top: 8px;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}
.carousel-hint span { color: var(--red, #C8102E); margin: 0 8px; }

/* ---------- Home hero proof bar (replaces 4-up stats grid) ---------- */
.hero-proof-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 24px;
    margin-top: 40px;
    padding: 20px 28px;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(90deg, transparent, rgba(200,16,46,0.04), transparent);
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}
.hero-proof-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-sans);
    line-height: 1;
}
.hero-proof-item strong {
    font-family: var(--font-serif, 'Bitter', serif);
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    font-weight: 800;
    color: var(--text);
}
.hero-proof-item span {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}
.hero-proof-divider {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,0.12);
}
@media (max-width: 768px) {
    .hero-proof-bar {
        gap: 10px 16px;
        padding: 16px 20px;
        margin-top: 28px;
    }
    .hero-proof-divider { display: none; }
    .hero-proof-item { width: calc(50% - 8px); justify-content: center; }
}

/* ---------- Hero background image (B-roll, no autoplay video) ---------- */
.hero { position: relative; overflow: hidden; }
.hero-bg-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.85) 100%),
        url('/assets/cameron-hero-poster.jpg');
    background-size: cover;
    background-position: center;
    pointer-events: none;
}
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 35%, transparent 0%, rgba(10,10,10,0.45) 65%, rgba(10,10,10,0.92) 100%);
    z-index: 1;
    pointer-events: none;
}
.hero .hero-content { position: relative; z-index: 3; }
.hero .hero-bg-gradient,
.hero .hero-particles,
.hero .scroll-indicator { z-index: 2; }
@media (max-width: 1024px) { .quote-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .quote-grid { grid-template-columns: 1fr; gap: 16px; } .quote-card { padding: 28px 24px; } }
.logo-item:hover {
    color: var(--text);
    transform: scale(1.1);
}

/* ---------- About ---------- */
.about-section { padding: 120px 0; }
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px; align-items: start;
}
.about-text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.8;
}
.about-lead {
    font-size: 1.15rem;
    color: var(--text);
    margin-bottom: 24px;
    font-weight: 400;
}
.about-text p + p { margin-top: 16px; }

.about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Stat band used on keynote.html and sports.html */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

/* ---------- Interactive Stat Cards (tilt + glow) ---------- */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 24px;
    text-align: center;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform;
    opacity: 0;
    transform: perspective(800px) rotateX(15deg) rotateY(-8deg) translateY(20px) scale(0.92);
}
.stat-card.stat-visible {
    opacity: 1;
    transform: perspective(800px) rotateX(0deg) rotateY(0deg) translateY(0) scale(1);
}
.stat-card.stat-visible:nth-child(1) { transition-delay: 0s; }
.stat-card.stat-visible:nth-child(2) { transition-delay: 0.12s; }
.stat-card.stat-visible:nth-child(3) { transition-delay: 0.24s; }
.stat-card.stat-visible:nth-child(4) { transition-delay: 0.36s; }
/* Cursor glow on stat cards */
.stat-card::before {
    content: '';
    position: absolute;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--glow-color) 0%, transparent 70%);
    left: var(--glow-x, 50%);
    top: var(--glow-y, 50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.stat-card:hover::before { opacity: 1; }
.stat-card:hover {
    border-color: var(--red);
    box-shadow: 0 20px 60px rgba(200,16,46,0.1);
}

.stat-number {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: 2.5rem; font-weight: 800;
    color: var(--text); line-height: 1;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}
.stat-card:hover .stat-number {
    transform: scale(1.1);
}
.stat-plus, .stat-suffix {
    font-family: var(--font-sans);
    font-size: 1.5rem; font-weight: 700;
    color: var(--red);
}
.stat-label {
    display: block;
    font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-muted); margin-top: 8px;
}

/* ---------- Book ---------- */
.book-section {
    padding: 120px 0;
    background: var(--bg-elevated);
}
.book-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px; align-items: center;
}
.book-image-wrapper {
    position: relative;
    display: flex; justify-content: center;
    perspective: 1000px;
}
.book-cover {
    width: 320px; height: 460px;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: 0 30px 80px rgba(0,0,0,0.3);
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease;
}
.book-image-wrapper:hover .book-cover {
    transform: rotateY(-12deg) rotateX(5deg) scale(1.02);
    box-shadow: 30px 30px 80px rgba(0,0,0,0.3);
}
.book-glow {
    position: absolute; bottom: -20px;
    left: 50%; transform: translateX(-50%);
    width: 200px; height: 100px;
    background: var(--red);
    filter: blur(60px); opacity: 0.3;
    pointer-events: none;
    transition: opacity 0.3s;
}
.book-image-wrapper:hover .book-glow { opacity: 0.5; }
.book-description {
    font-size: 1rem; color: var(--text-secondary);
    line-height: 1.8; margin-bottom: 32px;
}
.book-actions {
    display: flex; gap: 16px; margin-bottom: 24px;
}
.book-badge {
    display: inline-flex;
    padding: 8px 20px;
    background: rgba(200,16,46,0.1);
    border: 1px solid rgba(200,16,46,0.2);
    border-radius: 60px;
    animation: badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200,16,46,0.2); }
    50% { box-shadow: 0 0 0 10px rgba(200,16,46,0); }
}
.book-badge span {
    font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--red);
}

/* ---------- Testimonials ---------- */
.testimonials-section { padding: 120px 0; }
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Tilt + Glow Testimonial Cards */
.testimonial-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    will-change: transform;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* 3D entrance for testimonial cards via reveal */
.testimonial-card.reveal {
    transform: perspective(800px) rotateX(10deg) rotateY(10deg) translateY(40px) scale(0.9);
}
.testimonial-card.reveal.visible {
    transform: perspective(800px) rotateX(0deg) rotateY(0deg) translateY(0) scale(1);
}
.testimonial-card::before {
    content: '';
    position: absolute;
    width: 250px; height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--glow-color) 0%, transparent 70%);
    left: var(--glow-x, 50%);
    top: var(--glow-y, 50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 3;
}
.testimonial-card:hover::before { opacity: 1; }
.testimonial-card:hover {
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
    border-color: var(--border-hover);
}
.testimonial-card.featured {
    border-color: var(--red);
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(200,16,46,0.05) 100%);
}

/* Large image area at top of card */
.testimonial-image-wrapper {
    width: 100%;
    height: 220px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--glass) 100%);
    border-bottom: 1px solid var(--border);
}
.testimonial-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.testimonial-card:hover .testimonial-image {
    transform: scale(1.05);
}
.testimonial-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(200,16,46,0.08) 0%, rgba(200,16,46,0.03) 100%);
    gap: 8px;
}
.placeholder-initials {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.placeholder-text {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
}

/* Card content below image */
.testimonial-content {
    padding: 28px 28px 32px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.testimonial-author {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.testimonial-name {
    font-family: var(--font-serif);
    font-size: 1.05rem; font-weight: 600;
}
.testimonial-role {
    font-size: 0.75rem;
    color: var(--text-muted); font-weight: 500;
    margin-top: 2px;
}
.testimonial-stars {
    color: var(--red);
    font-size: 0.9rem; margin-bottom: 16px;
    letter-spacing: 4px;
}
.testimonial-text {
    font-family: var(--font-serif);
    font-size: 0.95rem; line-height: 1.8;
    color: var(--text-secondary); font-style: italic;
}

/* ---------- Reasons CTA ---------- */
.reasons-section {
    position: relative; min-height: 500px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.reasons-bg { position: absolute; inset: 0; }
.reasons-img {
    width: 100%; height: 100%; object-fit: cover;
}
.reasons-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.8));
    z-index: 1;
}
.reasons-content {
    position: relative; z-index: 2;
    text-align: center; padding: 80px 24px;
}
.reasons-title {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800; color: #fff;
    margin-bottom: 16px; line-height: 1.2;
}
.reasons-subtitle {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 40px;
}

/* ---------- Experience ---------- */
.experience-section {
    padding: 120px 0;
    text-align: center;
    background: var(--bg-elevated);
}
.experience-content {
    max-width: 800px; margin: 0 auto 40px;
    font-size: 1.05rem;
    color: var(--text-secondary); line-height: 1.9;
}

/* ---------- Gallery ---------- */
.gallery-section { padding: 120px 0; }
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 16px;
}
.gallery-item {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden; cursor: pointer;
    aspect-ratio: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.gallery-item-lg {
    grid-column: span 2; grid-row: span 2;
    aspect-ratio: auto;
}
.gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), filter 0.3s ease;
}
.gallery-item:hover img {
    transform: scale(1.12);
}
.gallery-item:hover {
    transform: translateY(-4px) scale(1.02);
}
.gallery-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(200,16,46,0.8));
    display: flex; align-items: flex-end;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.3s;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay span {
    font-size: 0.85rem; font-weight: 600;
    letter-spacing: 0.05em; color: #fff;
    transform: translateY(10px);
    transition: transform 0.3s ease;
}
.gallery-item:hover .gallery-overlay span { transform: translateY(0); }

.gallery-quote {
    margin-top: 80px; padding: 60px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.gallery-quote blockquote {
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    line-height: 1.8; text-align: center;
    color: var(--text-secondary);
    max-width: 800px; margin: 0 auto;
    font-style: italic;
}
/* Hover highlight on quote text-accent */
.gallery-quote .text-accent {
    transition: text-shadow 0.3s ease;
}
.gallery-quote:hover .text-accent {
    text-shadow: 0 0 20px rgba(200,16,46,0.4);
}

/* ---------- Cheer Section ---------- */
.cheer-section {
    position: relative; min-height: 600px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.cheer-bg { position: absolute; inset: 0; }
.cheer-img { width: 100%; height: 100%; object-fit: cover; }
.cheer-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.85); z-index: 1;
}
.cheer-content {
    position: relative; z-index: 2;
    text-align: left; padding: 80px 24px;
}
.cheer-title {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 900; line-height: 0.95;
    color: #fff;
}
.cheer-line {
    display: block;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), letter-spacing 0.4s ease;
}
.cheer-line:hover {
    transform: translateX(20px);
    letter-spacing: 0.05em;
}

/* ---------- Contact ---------- */
.contact-section {
    padding: 120px 0;
    background: var(--bg-elevated);
}
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px; align-items: stretch;
}

/* --- Form Image Panel --- */
.form-image-panel {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 500px;
}
.form-image-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.form-image-panel:hover img {
    transform: scale(1.05);
}
.form-image-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Stronger scrim so the "Get in Touch / Let's Energize / body / email"
       intro stays legible over the bright red-jersey photo. The text block
       starts ~56% down the panel, so the ramp reaches meaningful darkness by
       55% (matches the experience.css CTA-over-photo scrim). */
    background: linear-gradient(180deg, transparent 22%, rgba(0,0,0,0.62) 55%, rgba(0,0,0,0.92) 100%);
    pointer-events: none;
    z-index: 1;
}
.form-image-panel-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px;
    z-index: 2;
}
.form-image-panel-content .section-tag {
    margin-bottom: 12px;
}
.form-image-panel-content h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 12px;
}
.form-image-panel-content p {
    color: rgba(255,255,255,0.8);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 16px;
}
.form-image-panel-content .contact-item {
    color: rgba(255,255,255,0.9);
}
.form-image-panel-content .contact-item svg {
    color: var(--red-light);
}

/* --- Contact Form Image Header (full-width form pages) --- */
.contact-form-image-header {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 48px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 2/1;
}
.contact-form-image-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.contact-form-image-header:hover img {
    transform: scale(1.05);
}
.contact-form-image-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.5) 100%);
    pointer-events: none;
}
.contact-info p {
    color: var(--text-secondary);
    margin-bottom: 32px; line-height: 1.8;
}
.contact-details { display: flex; flex-direction: column; gap: 16px; }
.contact-item {
    display: flex; align-items: center;
    gap: 12px; font-size: 0.9rem;
    color: var(--text-secondary);
    transition: transform 0.3s ease, color 0.3s ease;
}
.contact-item:hover {
    transform: translateX(8px);
    color: var(--text);
}
.contact-item svg { color: var(--red); flex-shrink: 0; }

.contact-form-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 48px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-form-wrapper:hover {
    border-color: var(--border-hover);
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.form-group { margin-bottom: 20px; }
.form-group label {
    display: block;
    font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-secondary); margin-bottom: 8px;
    transition: color 0.3s;
}
.form-group:focus-within label {
    color: var(--red);
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%; padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text); font-size: 0.9rem;
    transition: all 0.3s; outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(200,16,46,0.1);
    transform: translateY(-1px);
}
.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}
.form-group textarea { resize: vertical; min-height: 100px; }

/* ---------- Contact form field affordance ----------
   The home #contact and contact.html forms both sit inside a --bg-card panel,
   so the base var(--bg) field is DARKER than its container and the 7% border is
   invisible — the inputs read as flat black boxes with no fillable affordance.
   Follow the keynote form model: lift the field ABOVE the panel and give it a
   clearly visible border + real placeholder colour. Scoped to .contact-form so
   other forms are untouched. */
.contact-form .form-group input,
.contact-form .form-group select,
.contact-form .form-group textarea {
    background-color: var(--bg-card-hover);
    border-color: rgba(255,255,255,0.22);
}
[data-theme="light"] .contact-form .form-group input,
[data-theme="light"] .contact-form .form-group select,
[data-theme="light"] .contact-form .form-group textarea {
    background-color: #fff;
    border-color: rgba(0,0,0,0.22);
}
.contact-form .form-group input::placeholder,
.contact-form .form-group textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.85;
}

/* ---------- Newsletter ---------- */
.newsletter-section {
    padding: 80px 0;
    border-top: 1px solid var(--border);
}
.newsletter-inner {
    text-align: center; max-width: 560px; margin: 0 auto;
}
.newsletter-title {
    font-family: var(--font-serif);
    font-size: 1.8rem; font-weight: 700; margin-bottom: 12px;
}
.newsletter-inner p {
    color: var(--text-secondary);
    margin-bottom: 32px; font-size: 0.95rem;
}
.newsletter-form { display: flex; gap: 12px; }
.newsletter-form input {
    flex: 1; padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 60px;
    color: var(--text); font-size: 0.9rem;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.newsletter-form input:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(200,16,46,0.1), 0 0 30px rgba(200,16,46,0.05);
    transform: translateY(-1px);
}

/* ---------- Footer ---------- */
.footer {
    padding: 48px 0;
    border-top: 1px solid var(--border);
}
.footer-inner {
    display: flex; flex-direction: column;
    align-items: center; gap: 24px;
}
.footer-logo {
    font-family: var(--font-sans);
    font-size: 1rem; font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase;
}
.footer-tagline {
    display: block;
    font-family: var(--font-serif);
    font-size: 0.75rem; font-style: italic;
    color: var(--text-muted); text-align: center;
}
.footer-socials { display: flex; gap: 16px; }
.social-link {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}
.social-link::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--red);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.social-link:hover::before { transform: scale(1); }
.social-link:hover {
    border-color: var(--red);
    color: #fff;
    transform: translateY(-4px);
}
.social-link svg { position: relative; z-index: 1; }
.footer-copy p {
    font-size: 0.75rem; color: var(--text-muted);
}

/* ---------- Mobile Menu ---------- */
.nav-links.open { display: flex; }

/* ---------- Page Loader ---------- */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #0A0A0A;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1);
    transition: opacity 0.8s ease, visibility 0.8s ease, transform 0.8s ease;
}
.page-loader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.05);
}
.loader-inner {
    text-align: center;
}
.loader-text {
    font-family: var(--font-sans);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.25em;
    color: #fff;
    display: block;
    margin-bottom: 24px;
    animation: loaderPulse 1.5s ease-in-out infinite;
}
@keyframes loaderPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}
.loader-bar {
    width: 120px;
    height: 2px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
    margin: 0 auto;
}
.loader-fill {
    width: 0%;
    height: 100%;
    background: var(--red);
    border-radius: 2px;
    animation: loaderFill 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes loaderFill {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* ---------- Scroll Progress Bar ---------- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 0%;
    background: linear-gradient(90deg, var(--red), var(--red-light), var(--red));
    z-index: 10001;
    transition: width 0.05s linear;
    box-shadow: 0 0 10px rgba(200,16,46,0.5), 0 0 20px rgba(200,16,46,0.3), 0 0 40px rgba(200,16,46,0.1);
}

/* ---------- Film Grain Overlay ---------- */
.grain-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
    animation: grainShift 0.5s steps(4) infinite;
}
@keyframes grainShift {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-2px, 2px); }
    50% { transform: translate(2px, -2px); }
    75% { transform: translate(-1px, -1px); }
    100% { transform: translate(1px, 1px); }
}


/* ---------- Large Marquee Banner ---------- */
.marquee-banner {
    padding: 32px 0;
    overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 40px;
    animation: marqueeScroll 15s linear infinite;
    width: max-content;
}
.marquee-reverse .marquee-track {
    animation-direction: reverse;
}
@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.marquee-item {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    transition: color 0.3s;
    flex-shrink: 0;
}
.marquee-outline {
    -webkit-text-stroke: 1.5px var(--text-muted);
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.marquee-dot {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--red);
    flex-shrink: 0;
}
.marquee-banner:hover .marquee-track {
    animation-play-state: paused;
}
.marquee-banner:hover .marquee-item {
    color: var(--red);
}
.marquee-banner:hover .marquee-outline {
    -webkit-text-stroke-color: var(--red);
}

/* ---------- Clip Reveal for Section Titles ---------- */
.clip-reveal {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.clip-reveal.clip-visible {
    clip-path: inset(0 0% 0 0);
}

/* ---------- Animated Gradient Border ---------- */
.gradient-border-wrapper {
    position: relative;
    padding: 2px;
    border-radius: var(--radius-lg);
    background: conic-gradient(from var(--gradient-angle, 0deg),
        var(--red), var(--red-light), var(--red-dark),
        rgba(200,16,46,0.2), var(--red));
    animation: rotateBorder 4s linear infinite;
}
@property --gradient-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes rotateBorder {
    0% { --gradient-angle: 0deg; }
    100% { --gradient-angle: 360deg; }
}
.gradient-border-wrapper .contact-form-wrapper {
    border: none;
    border-radius: calc(var(--radius-lg) - 2px);
}

/* ---------- Gallery Spotlight ---------- */
.gallery-spotlight {
    position: relative;
}
.gallery-spotlight::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200,16,46,0.12) 0%, transparent 70%);
    pointer-events: none;
    left: var(--spot-x, -200px);
    top: var(--spot-y, -200px);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 5;
    mix-blend-mode: screen;
}
.gallery-spotlight:hover::after {
    opacity: 1;
}

/* ---------- Back to Top Button ---------- */
.back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
    color: var(--text);
}
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(200,16,46,0.3);
}
.btt-ring {
    position: absolute;
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    transform: rotate(-90deg);
}
.btt-ring-bg {
    stroke: var(--border);
}
.btt-ring-fill {
    stroke: var(--red);
    transition: stroke-dashoffset 0.1s linear;
}
.btt-arrow {
    position: relative;
    z-index: 1;
}

/* ---------- CTA Pulse Animation ---------- */
.hero-actions .btn-primary {
    animation: ctaPulse 2s ease-in-out infinite;
}
@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200,16,46,0.4); }
    50% { box-shadow: 0 0 0 12px rgba(200,16,46,0); }
}

/* ---------- Smooth Theme Transition for Cards ---------- */
.stat-card, .testimonial-card, .contact-form-wrapper, .newsletter-form input {
    transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

/* ---------- Dark Mode Hero Title Glow ---------- */
[data-theme="dark"] .hero-title {
    text-shadow: 0 0 60px rgba(255,255,255,0.1), 0 4px 40px rgba(0,0,0,0.5);
}

/* ---------- Book Badge Hover Wobble ---------- */
.book-badge:hover {
    animation: badgeWobble 0.4s ease;
}
@keyframes badgeWobble {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}

/* ---------- Footer Social Links Stagger ---------- */
.footer-socials .social-link:nth-child(1) { transition-delay: 0s; }
.footer-socials .social-link:nth-child(2) { transition-delay: 0.05s; }
.footer-socials .social-link:nth-child(3) { transition-delay: 0.1s; }
.footer-socials .social-link:nth-child(4) { transition-delay: 0.15s; }
.footer-socials .social-link:nth-child(5) { transition-delay: 0.2s; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .about-grid, .book-grid, .contact-grid { grid-template-columns: 1fr; gap: 48px; }
    .testimonials-grid { grid-template-columns: 1fr 1fr; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    /* Full-width featured tile has no row siblings to size it — give it its own ratio */
    .gallery-item-lg { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
}

@media (max-width: 768px) {
    /* Note: .navbar's backdrop-filter makes it the containing block for this
       fixed panel, so bottom: 0 would collapse it — use an explicit height. */
    .nav-links {
        display: none;
        position: fixed;
        top: 100%; left: 0; right: 0;
        height: calc(100vh - var(--nav-height));
        height: calc(100dvh - var(--nav-height));
        background: var(--bg);
        flex-direction: column;
        align-items: center; justify-content: center;
        gap: 32px; z-index: 999;
        overflow-y: auto;
    }
    .nav-links.open { display: flex; }
    .nav-link { font-size: 1.2rem; }
    .nav-dropdown {
        width: 100%;
        text-align: center;
        flex-wrap: wrap;
        justify-content: center;
    }
    .nav-dropdown-toggle {
        font-size: 1.2rem;
        justify-content: center;
        width: auto;
    }
    .nav-dropdown-menu {
        flex-basis: 100%;
    }
    .nav-dropdown-menu {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: center;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, padding 0.3s ease;
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        padding: 0;
        min-width: unset;
    }
    .nav-dropdown.open .nav-dropdown-menu {
        max-height: 200px;
        padding: 8px 0;
        transform: none;
    }
    .nav-dropdown-item {
        font-size: 1rem;
        padding: 10px 0;
    }
    .nav-dropdown-item:hover {
        padding-left: 0;
    }
    .nav-cta { display: none; }
    .menu-toggle { display: flex; }
    .hero-title-line { font-size: clamp(2.5rem, 12vw, 5rem); }
    .hero-stats {
        flex-wrap: wrap;
        gap: 24px;
    }
    .hero-stat-number {
        font-size: 1.5rem;
    }
    .testimonials-grid { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: 1fr 1fr; }
    .gallery-item-lg { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
    .form-row { grid-template-columns: 1fr; }
    .contact-form-wrapper { padding: 32px 24px; }
    .newsletter-form { flex-direction: column; }
    .about-section, .book-section, .testimonials-section,
    .experience-section, .gallery-section, .contact-section { padding: 80px 0; }
    .section-header { margin-bottom: 48px; }
    .cheer-title { font-size: clamp(2.5rem, 12vw, 5rem); }
    .marquee-item { font-size: clamp(2rem, 8vw, 3rem); }
    .back-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; }
    .grain-overlay { opacity: 0.02; }
}

@media (max-width: 480px) {
    .about-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
    .stat-card { padding: 24px 16px; }
    .stat-number { font-size: 2rem; }
}

/* ---------- Mobile-first refinements (2026-05-07 elevated rebuild) ---------- */
@media (max-width: 768px) {
    /* Tighter vertical rhythm on phones */
    .about-section, .book-section, .testimonials-section,
    .experience-section, .gallery-section, .contact-section,
    .video-showcase, .reasons-section, .cheer-section { padding: 64px 0; }
    .section-header { margin-bottom: 36px; }

    /* Hero density */
    .hero { min-height: 100vh; min-height: 100svh; padding: 96px 20px 48px; }
    .hero-subtitle { font-size: clamp(1rem, 4.2vw, 1.25rem); line-height: 1.45; max-width: 32ch; margin-left: auto; margin-right: auto; }
    .hero-quote { font-size: clamp(1.1rem, 4.5vw, 1.35rem); }
    .hero-actions { flex-direction: column; gap: 12px; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
    .hero-actions .btn { width: 100%; padding: 16px 24px; }
    .hero-stats { gap: 16px 24px; }
    .hero-stat-number { font-size: 1.75rem; }
    .hero-stat-label { font-size: 0.7rem; letter-spacing: 0.08em; }

    /* Tap-target safety net */
    .nav-link, .nav-dropdown-toggle, .nav-dropdown-item, .social-link, .footer-socials a { min-height: 44px; display: inline-flex; align-items: center; }

    /* Footer breathes */
    .footer { padding: 48px 0 32px; }
    .footer-inner { gap: 24px; }
}

@media (max-width: 480px) {
    .hero-stats { gap: 12px 20px; }
    .hero-stat { min-width: 64px; }
    .container { padding-left: 20px; padding-right: 20px; }
}

/* ========================================
   BOOK CAMERON HUGHES — Clipping Mask CTA
   ======================================== */
.book-cameron-cta {
    position: relative;
    padding: 100px 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
}
.book-cameron-cta-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg, #1a0000 0%, #8B0000 30%, #C8102E 50%, #8B0000 70%, #1a0000 100%);
    background-size: 300% 300%;
    animation: ctaGradientShift 8s ease infinite;
}
@keyframes ctaGradientShift {
    0% { background-position: 0% 50%; }
    25% { background-position: 50% 0%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 100%; }
    100% { background-position: 0% 50%; }
}
.book-cameron-cta-text {
    position: relative;
    z-index: 1;
    font-family: 'Roboto', sans-serif;
    font-size: clamp(4rem, 10vw, 9rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    text-align: center;
    color: transparent;
    background-image: url('book-cameron-mask.avif');
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    text-decoration: none;
    display: block;
}
.book-cameron-cta-text:hover {
    transform: scale(1.03);
    filter: brightness(1.3) contrast(1.1);
}
[data-theme="dark"] .book-cameron-cta-text {
    filter: brightness(1.2) contrast(1.15);
}
[data-theme="light"] .book-cameron-cta-text {
    filter: brightness(1.1) contrast(1.2);
}

/* ========================================
   PER-PAGE UNIQUE THEMING
   Each page gets a distinct accent & feel
   ======================================== */

/* --- Home: Classic red energy --- */
[data-page="home"] {
    --page-accent: #C8102E;
    --page-glow: rgba(200, 16, 46, 0.15);
    --page-gradient: linear-gradient(135deg, #C8102E 0%, #E8344E 100%);
}
[data-page="home"] .section-tag {
    color: #C8102E;
    border-color: rgba(200, 16, 46, 0.3);
}

/* --- About: Warm amber-red --- */
[data-page="about"] {
    --page-accent: #D4451A;
    --page-glow: rgba(212, 69, 26, 0.12);
    --page-gradient: linear-gradient(135deg, #D4451A 0%, #E8694A 100%);
}
[data-page="about"] .section-tag {
    color: #D4451A;
    border-color: rgba(212, 69, 26, 0.3);
}
[data-page="about"] .text-accent {
    color: #D4451A;
}
[data-page="about"] .btn-primary {
    background: linear-gradient(135deg, #D4451A, #E8694A);
}
[data-page="about"] .btn-primary:hover {
    background: linear-gradient(135deg, #B83B16, #D4451A);
}

/* --- Book: Deep crimson & gold --- */
[data-page="book"] {
    --page-accent: #8B1A2B;
    --page-glow: rgba(139, 26, 43, 0.15);
    --page-gradient: linear-gradient(135deg, #8B1A2B 0%, #C8102E 100%);
}
[data-page="book"] .section-tag {
    color: #C49A3C;
    border-color: rgba(196, 154, 60, 0.3);
}
[data-page="book"] .text-accent {
    color: #C49A3C;
}
[data-page="book"] .btn-primary {
    background: linear-gradient(135deg, #8B1A2B, #C8102E);
}
[data-page="book"] .btn-primary:hover {
    background: linear-gradient(135deg, #6E1522, #8B1A2B);
}

/* --- Testimonials: Warm rose glow --- */
[data-page="testimonials"] {
    --page-accent: #E03E5C;
    --page-glow: rgba(224, 62, 92, 0.12);
    --page-gradient: linear-gradient(135deg, #E03E5C 0%, #F06080 100%);
}
[data-page="testimonials"] .section-tag {
    color: #E03E5C;
    border-color: rgba(224, 62, 92, 0.3);
}
[data-page="testimonials"] .text-accent {
    color: #E03E5C;
}
[data-page="testimonials"] .testimonial-stars {
    color: #E03E5C;
}
[data-page="testimonials"] .btn-primary {
    background: linear-gradient(135deg, #E03E5C, #F06080);
}
[data-page="testimonials"] .btn-primary:hover {
    background: linear-gradient(135deg, #C8102E, #E03E5C);
}

/* --- Experience: Bold dark red --- */
[data-page="experience"] {
    --page-accent: #B80D2A;
    --page-glow: rgba(184, 13, 42, 0.18);
    --page-gradient: linear-gradient(135deg, #B80D2A 0%, #FF1744 100%);
}
[data-page="experience"] .section-tag {
    color: #FF1744;
    border-color: rgba(255, 23, 68, 0.3);
}
[data-page="experience"] .text-accent {
    color: #FF1744;
}
[data-page="experience"] .btn-primary {
    background: linear-gradient(135deg, #B80D2A, #FF1744);
}
[data-page="experience"] .btn-primary:hover {
    background: linear-gradient(135deg, #8E0A20, #B80D2A);
}

/* --- Gallery: Cool magenta-red --- */
[data-page="gallery"] {
    --page-accent: #D41458;
    --page-glow: rgba(212, 20, 88, 0.12);
    --page-gradient: linear-gradient(135deg, #D41458 0%, #FF4081 100%);
}
[data-page="gallery"] .section-tag {
    color: #D41458;
    border-color: rgba(212, 20, 88, 0.3);
}
[data-page="gallery"] .text-accent {
    color: #D41458;
}
[data-page="gallery"] .btn-primary {
    background: linear-gradient(135deg, #D41458, #FF4081);
}
[data-page="gallery"] .btn-primary:hover {
    background: linear-gradient(135deg, #A8104A, #D41458);
}

/* --- Contact: Warm inviting red --- */
[data-page="contact"] {
    --page-accent: #E8344E;
    --page-glow: rgba(232, 52, 78, 0.12);
    --page-gradient: linear-gradient(135deg, #E8344E 0%, #FF6B6B 100%);
}
[data-page="contact"] .section-tag {
    color: #E8344E;
    border-color: rgba(232, 52, 78, 0.3);
}
[data-page="contact"] .text-accent {
    color: #E8344E;
}
[data-page="contact"] .btn-primary {
    background: linear-gradient(135deg, #E8344E, #FF6B6B);
}
[data-page="contact"] .btn-primary:hover {
    background: linear-gradient(135deg, #C8102E, #E8344E);
}

/* --- Primary CTA unified to brand red site-wide ---
   Per-page accents stay on eyebrows, text-accents, scroll bars, and rings;
   only the primary "Book Cameron" button reads the same brand red everywhere.
   Placed last so it wins over the per-page .btn-primary overrides above. */
[data-page] .btn-primary {
    background: var(--red);
}
[data-page] .btn-primary:hover {
    background: var(--red-dark);
}

/* --- Page-specific glow card overrides --- */
[data-page] .glow-card::before {
    background: radial-gradient(600px circle at var(--glow-x, 50%) var(--glow-y, 50%), var(--page-glow, rgba(200,16,46,0.15)), transparent 40%);
}

/* --- Page-specific scroll progress bar --- */
[data-page="about"] .scroll-progress { background: linear-gradient(90deg, #D4451A, #E8694A); }
[data-page="book"] .scroll-progress { background: linear-gradient(90deg, #8B1A2B, #C49A3C); }
[data-page="testimonials"] .scroll-progress { background: linear-gradient(90deg, #E03E5C, #F06080); }
[data-page="experience"] .scroll-progress { background: linear-gradient(90deg, #B80D2A, #FF1744); }
[data-page="gallery"] .scroll-progress { background: linear-gradient(90deg, #D41458, #FF4081); }
[data-page="contact"] .scroll-progress { background: linear-gradient(90deg, #E8344E, #FF6B6B); }

/* --- Page-specific back-to-top ring --- */
[data-page="about"] .btt-ring-fill { stroke: #D4451A; }
[data-page="book"] .btt-ring-fill { stroke: #C49A3C; }
[data-page="testimonials"] .btt-ring-fill { stroke: #E03E5C; }
[data-page="experience"] .btt-ring-fill { stroke: #FF1744; }
[data-page="gallery"] .btt-ring-fill { stroke: #D41458; }
[data-page="contact"] .btt-ring-fill { stroke: #E8344E; }

/* --- Page-specific nav active link --- */
[data-page="about"] .nav-link.active { color: #D4451A; }
[data-page="book"] .nav-link.active { color: #C49A3C; }
[data-page="testimonials"] .nav-link.active { color: #E03E5C; }
[data-page="experience"] .nav-link.active { color: #FF1744; }
[data-page="gallery"] .nav-link.active { color: #D41458; }
[data-page="contact"] .nav-link.active { color: #E8344E; }

[data-page="keynote"] {
    --page-accent: #FF1744;
    --page-glow: rgba(255, 23, 68, 0.15);
}
[data-page="keynote"] .scroll-progress { background: linear-gradient(90deg, #C8102E, #FF1744); }
[data-page="keynote"] .btt-ring-fill { stroke: #FF1744; }

[data-page="sports"] {
    --page-accent: #C8102E;
    --page-glow: rgba(200, 16, 46, 0.18);
}
[data-page="sports"] .scroll-progress { background: linear-gradient(90deg, #8B0A1E, #C8102E); }
[data-page="sports"] .btt-ring-fill { stroke: #C8102E; }

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .custom-cursor, .cursor-dot {
        display: none !important;
    }
    .page-loader {
        display: none !important;
    }
}

/* Mobile: form controls must be >=16px or iOS zooms the viewport on focus */
@media (max-width: 768px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ---- CH Timeline engine (shared) ----
   Base primitives for the scroll-driven timeline used by the
   experience / keynote / sports rebuilds. Driven by window.CHTimeline
   in script.js. Pages skin these; the engine only supplies layout,
   the progress spine, beat reveal states, and 3 timing personalities. */

.ch-timeline {
    position: relative;
    padding-left: 3.5rem;
}

/* Spine: thin border-colored track with a red fill scaled by
   --ch-progress (0 -> 1, set by CHTimeline via rAF scroll scrubbing) */
.ch-timeline-spine {
    --ch-progress: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1rem;
    width: 2px;
    background: var(--border);
    pointer-events: none;
}

.ch-timeline-spine::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--red);
    transform: scaleY(var(--ch-progress));
    transform-origin: top center;
    will-change: transform;
}

/* Beats: hidden only once the engine has booted (.ch-timeline-init),
   so content is never lost if JS fails to run */
.ch-beat {
    position: relative;
    margin-bottom: 3rem;
    transition:
        opacity var(--ch-beat-dur, 600ms) var(--ch-beat-ease, ease),
        transform var(--ch-beat-dur, 600ms) var(--ch-beat-ease, ease);
}

.ch-timeline-init .ch-beat {
    opacity: 0;
    transform: translateY(28px);
}

.ch-timeline-init .ch-beat.ch-beat-active {
    opacity: 1;
    transform: translateY(0);
}

/* Past beats settle back slightly so the active beat reads loudest */
.ch-timeline-init .ch-beat.ch-beat-past {
    opacity: 0.72;
}

/* Timestamp chip */
.ch-stamp {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    margin-bottom: 0.75rem;
}

/* Speed personalities — set on the container by data-ch-mode.
   Pages can vary feel purely in CSS via these custom properties. */
.ch-mode-calm {
    --ch-beat-dur: 600ms;
    --ch-beat-ease: ease;
}

.ch-mode-clock {
    --ch-beat-dur: 400ms;
    --ch-beat-ease: cubic-bezier(0.55, 0.05, 0.15, 1.15); /* subtle tick overshoot */
}

.ch-mode-frenzy {
    --ch-beat-dur: 220ms;
    --ch-beat-ease: cubic-bezier(0.9, 0, 0.1, 1); /* sharp snap */
}

/* Reduced motion: fully static — everything visible, spine at 100%.
   (CHTimeline also skips all listeners; .ch-timeline-static is the
   class it applies in that case.) */
@media (prefers-reduced-motion: reduce) {
    .ch-beat,
    .ch-timeline-init .ch-beat {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .ch-timeline-spine::before {
        transform: scaleY(1) !important;
    }
}

.ch-timeline-static .ch-beat {
    opacity: 1;
    transform: none;
    transition: none;
}

.ch-timeline-static .ch-timeline-spine::before {
    transform: scaleY(1);
}