/* ============================================================
   PROJECT THOMAS — GLOBAL STYLESHEET
   ✏️  Edit :root variables to change colors / fonts sitewide
   ============================================================ */
:root {
    --red:        #E60012;
    --blue:       #0099CC;
    --gold:       #D4AF37;
    --dark:       #0a0a0a;
    --dark-mid:   #141414;
    --card-bg:    #1a1a1a;
    --mid:        #2c2c2c;
    --border:     rgba(255,255,255,0.1);
    --light-text: #b8b8b8;
    --white:      #ffffff;
    --font-display: 'Barlow Condensed', sans-serif;
    --font-body:    'Barlow', sans-serif;
    --max-w: 1440px;
    --nav-h: 72px;
}

/* ===================== LIGHT MODE ===================== */
body.light-mode {
    --dark:       #f2f0eb;
    --dark-mid:   #e6e3dc;
    --card-bg:    #ffffff;
    --mid:        #d0cec8;
    --border:     rgba(0,0,0,0.1);
    --light-text: #444444;
    --white:      #111111;
    background: var(--dark);
    color: var(--white);
}

/* Nav */
body.light-mode nav {
    background: rgba(242,240,235,0.96) !important;
    border-bottom-color: rgba(0,0,0,0.12);
}
body.light-mode nav.scrolled { background: rgba(242,240,235,0.99) !important; }
body.light-mode .nav-links a { color: #555; }
body.light-mode .nav-links a:hover,
body.light-mode .nav-links a.active { color: #111; }
body.light-mode .hamburger span { background: #111; }
body.light-mode .nav-links { background: #f2f0eb; }

/* Hero */
body.light-mode .hero-overlay {
    background: linear-gradient(to top, rgba(242,240,235,0.97) 0%, rgba(242,240,235,0.55) 55%, rgba(242,240,235,0.1) 100%);
}
body.light-mode .hero-bg { background: #c8c4bc; }
body.light-mode .hero-title { color: #111; }
body.light-mode .hero-subtitle { color: rgba(0,0,0,0.65); }
body.light-mode .scroll-indicator { color: rgba(0,0,0,0.35); }
body.light-mode .scroll-indicator::after { background: rgba(0,0,0,0.2); }

/* Page hero */
body.light-mode .page-hero {
    background: linear-gradient(160deg, #e8e5de 0%, #f2f0eb 100%);
    border-bottom-color: rgba(0,0,0,0.1);
}
body.light-mode .page-hero-title { color: #111; }
body.light-mode .page-hero-sub { color: rgba(0,0,0,0.55); }

/* Sections */
body.light-mode .dark-section { background: var(--dark-mid); }
body.light-mode .section-intro { color: rgba(0,0,0,0.65); }
body.light-mode .body-text { color: #444; }
body.light-mode strong { color: #111; }

/* Buttons */
body.light-mode .btn-secondary { color: rgba(0,0,0,0.65); }
body.light-mode .btn-secondary:hover { color: #111; }
body.light-mode .btn-outline {
    color: #111;
    border-color: rgba(0,0,0,0.25);
}
body.light-mode .btn-outline:hover { border-color: #111; }

/* Cards */
body.light-mode .stat-block { background: #fff; border-color: rgba(0,0,0,0.09); box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
body.light-mode .stat-num { color: #111; }
body.light-mode .stat-lbl { color: #111; }
body.light-mode .stat-sub { color: #555; }

body.light-mode .tone-card { background: #fff; border-color: rgba(0,0,0,0.09); box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
body.light-mode .tone-cap strong { color: #111; }
body.light-mode .tone-cap span { color: #666; }
body.light-mode .tone-desc p { color: #555; }

body.light-mode .culture-card { background: #fff; border-color: rgba(0,0,0,0.09); }
body.light-mode .culture-card h3 { color: #111; }
body.light-mode .culture-card p { color: #444; }
body.light-mode .culture-num { color: rgba(0,0,0,0.04); }

body.light-mode .pull-quote-box { background: #fff; border-color: rgba(0,0,0,0.09); }
body.light-mode .pull-quote-box blockquote { color: var(--red); }
body.light-mode .quote-attr { color: #777; }

body.light-mode .info-item { background: #fff; border-color: rgba(0,0,0,0.09); }
body.light-mode .info-item strong { color: #111; }
body.light-mode .info-item p { color: #555; }

body.light-mode .eco-full-card { background: #fff; border-color: rgba(0,0,0,0.09); }
body.light-mode .eco-full-card h3 { color: #111; }
body.light-mode .eco-full-card p { color: #444; }

body.light-mode .eco-stat { background: #fff; border-color: rgba(0,0,0,0.09); }
body.light-mode .eco-stat-num { color: #111; }
body.light-mode .eco-stat-lbl { color: #666; }

body.light-mode .pos-card { background: #fff; border-color: rgba(0,0,0,0.09); }
body.light-mode .pos-card h3 { color: #111; }
body.light-mode .pos-card p { color: #444; }

body.light-mode .strategy-block { background: #fff; border-color: rgba(0,0,0,0.09); }
body.light-mode .strategy-block-num { color: rgba(0,0,0,0.04); }
body.light-mode .strategy-block-content h3 { color: #111; }
body.light-mode .strategy-block-content p { color: #444; }

body.light-mode .cred-item { background: #fff; border-color: rgba(0,0,0,0.09); }
body.light-mode .cred-item strong { color: #111; }
body.light-mode .cred-item p { color: #555; }

body.light-mode .comps-table { background: #fff; border-color: rgba(0,0,0,0.09); }
body.light-mode .comps-header { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.09); color: #666; }
body.light-mode .comps-row { border-color: rgba(0,0,0,0.07); }
body.light-mode .comps-row:hover { background: rgba(0,0,0,0.02); }
body.light-mode .comp-title { color: #111; }
body.light-mode .comps-row span { color: #555; }

body.light-mode .timeline-item { background: #fff; border-color: rgba(0,0,0,0.09); }
body.light-mode .timeline-content h3 { color: #111; }
body.light-mode .timeline-content p { color: #444; }
body.light-mode .timeline-tactics span { background: rgba(0,0,0,0.05); color: #666; }

body.light-mode .social-card { background: #fff; border-color: rgba(0,0,0,0.09); }
body.light-mode .social-num { color: #111; }
body.light-mode .social-lbl { color: #111; }
body.light-mode .social-card p { color: #555; }

body.light-mode .concept-card h3 { color: #111; }
body.light-mode .concept-num { color: rgba(0,0,0,0.04); }
body.light-mode .concept-card > p { color: #555; }
body.light-mode .ctag { background: rgba(0,0,0,0.06); color: #555; }

/* Contact */
body.light-mode .contact-form-wrap { background: #fff; border-color: rgba(0,0,0,0.09); }
body.light-mode .form-title { color: #111; }
body.light-mode .form-subtitle { color: #555; }
body.light-mode .form-group label { color: #555; }
body.light-mode .form-group input,
body.light-mode .form-group select,
body.light-mode .form-group textarea {
    background: #f5f3ee; border-color: rgba(0,0,0,0.15); color: #111;
}
body.light-mode .form-group select option { background: #fff; color: #111; }
body.light-mode .form-group input::placeholder,
body.light-mode .form-group textarea::placeholder { color: #aaa; }
body.light-mode .form-group input:focus,
body.light-mode .form-group select:focus,
body.light-mode .form-group textarea:focus { background: rgba(0,153,204,0.04); }
body.light-mode .contact-link { background: #fff; border-color: rgba(0,0,0,0.09); }
body.light-mode .contact-link strong { color: #111; }
body.light-mode .contact-link span { color: #666; }
body.light-mode .contact-ready-box { background: #fff; border-color: rgba(0,0,0,0.09); border-left-color: var(--blue); }
body.light-mode .contact-ready-box h3 { color: #111; }
body.light-mode .contact-ready-box li { color: #555; }
body.light-mode .contact-org { color: #666; }

/* Quote sections */
body.light-mode .quote-full-bleed { background: var(--dark-mid); border-color: rgba(0,0,0,0.1); }
body.light-mode .big-quote-text { color: var(--red); }
body.light-mode .big-quote-mark { color: rgba(230,0,18,0.12); }
body.light-mode .big-quote-attr { color: #666; }

/* Page nav strip */
body.light-mode .page-nav-strip { background: var(--dark-mid); border-top-color: rgba(0,0,0,0.1); }
body.light-mode .page-nav-link { color: #666; }
body.light-mode .page-nav-link:hover { color: #111; }

/* Footer — stays dark */
body.light-mode footer { background: #111; border-top-color: rgba(255,255,255,0.08); }
body.light-mode .footer-links a { color: #888; }
body.light-mode .footer-links a:hover { color: #fff; }
body.light-mode .footer-copy { color: #555; }
body.light-mode .footer-logo { color: #ccc; }

/* CTA banner — stays bold */
body.light-mode .cta-banner { background: var(--red); }
body.light-mode .cta-title { color: #fff; }
body.light-mode .cta-sub { color: rgba(255,255,255,0.85); }

/* Legacy banner — stays dark gold */
body.light-mode .legacy-banner {
    background: linear-gradient(135deg, #fdf6e3 0%, #f7edcc 100%);
    border-color: rgba(180,140,20,0.3);
}
body.light-mode .legacy-banner::before { color: rgba(180,140,20,0.07); }
body.light-mode .legacy-banner .section-label { color: #8a6800 !important; }
body.light-mode .legacy-banner .legacy-quote { color: #7a5800; }
body.light-mode .legacy-banner .legacy-quote span { color: rgba(122,88,0,0.4); }
body.light-mode .legacy-banner .body-text { color: #444; }
body.light-mode .legacy-stat { background: rgba(180,140,20,0.06); border-right-color: rgba(180,140,20,0.15); }
body.light-mode .legacy-stat:hover { background: rgba(180,140,20,0.12); }
body.light-mode .legacy-stat-num { color: #8a6400; }
body.light-mode .legacy-stat-lbl { color: rgba(100,74,0,0.65); }
body.light-mode .legacy-stat-sub { color: #555; }
body.light-mode .legacy-stats-row { border-color: rgba(180,140,20,0.2); }

body.light-mode .about-legacy-block {
    background: linear-gradient(135deg, #fdf6e3 0%, #f7edcc 100%);
    border-color: rgba(180,140,20,0.3);
}
body.light-mode .about-legacy-block::before { color: rgba(180,140,20,0.07); }
body.light-mode .about-legacy-title { color: #7a5800; }
body.light-mode .about-legacy-block .section-label { color: #8a6800 !important; }
body.light-mode .about-legacy-block .body-text { color: #444; }
body.light-mode .about-legacy-block .legacy-stats-row { border-color: rgba(180,140,20,0.2); }
body.light-mode .about-legacy-block .legacy-stat { background: rgba(180,140,20,0.06); border-right-color: rgba(180,140,20,0.15); }
body.light-mode .about-legacy-block .legacy-stat:hover { background: rgba(180,140,20,0.12); }
body.light-mode .about-legacy-block .legacy-stat-num { color: #8a6400; }
body.light-mode .about-legacy-block .legacy-stat-lbl { color: rgba(100,74,0,0.65); }
body.light-mode .about-legacy-block .legacy-stat-sub { color: #555; }

/* Vision page */
body.light-mode .vision-quote { color: #111; }
body.light-mode .split-image { border-color: rgba(0,0,0,0.09); }

/* About page specific */
body.light-mode .about-photo { border-color: rgba(0,0,0,0.09); background: #e8e5de; }
body.light-mode .about-photo-side { border-color: rgba(0,0,0,0.09); background: #e8e5de; }
body.light-mode .about-pullquote { background: rgba(0,153,204,0.04); }
body.light-mode .about-pullquote p { color: #111; }
body.light-mode .about-pullquote cite { color: #666; }
body.light-mode .value-pill { border-color: rgba(0,0,0,0.12); color: #444; background: rgba(0,0,0,0.04); }
body.light-mode .mission-card { background: #fff; border-color: rgba(0,0,0,0.09); }
body.light-mode .mission-card h4 { color: #111; }
body.light-mode .mission-card p { color: #555; }
body.light-mode .mission-card-num { color: rgba(0,0,0,0.04); }
body.light-mode .track-rail { background: rgba(0,0,0,0.12); }
body.light-mode .semaphore-post { background: #888; }
body.light-mode .about-yt-card { background: #fff; border-color: rgba(0,0,0,0.09); }
body.light-mode .about-yt-lbl { color: #111; }
body.light-mode .about-yt-sub { color: #555; }
body.light-mode .about-photo-caption { color: rgba(0,0,0,0.4); }
body.light-mode .about-photo-grid .photo-main,
body.light-mode .about-photo-grid .photo-small { border-color: rgba(0,0,0,0.09); background: #e8e5de; }

/* Hero badge */
body.light-mode .hero-badge { background: var(--red); color: #fff; }

/* Flywheel */
body.light-mode .flywheel-item p { color: #555; }
body.light-mode .flywheel-arrow { color: rgba(0,0,0,0.2); }

/* Overlay */
body.light-mode #pt-overlay { background: var(--dark); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--dark); color: var(--white); font-family: var(--font-body); font-size: 17px; line-height: 1.8; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
strong { color: var(--white); }

/* ===================== NAV ===================== */
nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 70px; height: var(--nav-h);
    background: rgba(10,10,10,0.92);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    transition: background 0.3s, border-color 0.3s;
}

nav.scrolled { background: rgba(10,10,10,0.98); border-color: rgba(255,255,255,0.12); }

.nav-logo {
    font-family: var(--font-display); font-weight: 900;
    font-size: 20px; letter-spacing: 3px; text-transform: uppercase;
    flex-shrink: 0;
    position: relative;
    z-index: 1001;
}
.nav-logo span { color: var(--red); }

.nav-links { display: flex; align-items: center; gap: 36px; }

.nav-links a {
    font-family: var(--font-display); font-weight: 600;
    font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--light-text);
    transition: color 0.2s;
    position: relative; padding-bottom: 2px;
}
.nav-links a::after {
    content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
    height: 2px; background: var(--red);
    transform: scaleX(0); transform-origin: left; transition: transform 0.25s;
}
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

.nav-cta {
    background: var(--red) !important;
    color: var(--white) !important;
    padding: 0 20px !important;
    height: 36px;
    border-radius: 50px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    transition: background 0.2s, transform 0.2s !important;
}
.nav-cta:hover { background: #c50010 !important; transform: translateY(-2px); }
.nav-cta::after { display: none !important; }
.nav-cta.active-cta { background: var(--red) !important; }

.hamburger {
    display: none; flex-direction: column; gap: 5px;
    cursor: pointer; background: none; border: none; padding: 5px; z-index: 1001;
}
.hamburger span { display: block; width: 26px; height: 2px; background: var(--white); transition: all 0.3s; }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ===================== HERO (HOME) ===================== */
#hero {
    position: relative; height: 100vh; min-height: 700px;
    display: flex; align-items: flex-end; overflow: hidden;
}
.hero-bar { position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--red); z-index: 10; }
.hero-bg { position: absolute; inset: 0; background: #0a0a12; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.65; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.97) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.1) 100%); }
.hero-content { position: relative; z-index: 2; padding: 0 90px 100px; max-width: var(--max-w); width: 100%; margin: 0 auto; animation: fadeUp 1s ease both; }
.hero-badge { display: inline-block; background: var(--red); color: var(--white); font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 4px; text-transform: uppercase; padding: 7px 18px; border-radius: 3px; margin-bottom: 22px; }
.hero-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(72px, 10vw, 130px); line-height: 0.9; text-transform: uppercase; color: var(--white); letter-spacing: -1px; margin-bottom: 20px; }
.hero-subtitle { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: 5px; text-transform: uppercase; color: rgba(255,255,255,0.72); margin-bottom: 44px; }
.hero-cta-row { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }

.scroll-indicator {
    position: absolute; bottom: 30px; right: 80px; z-index: 2;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: rgba(255,255,255,0.3); font-family: var(--font-display);
    font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
    animation: bounce 2.5s ease infinite;
}
.scroll-indicator::after { content: ''; display: block; width: 1px; height: 55px; background: rgba(255,255,255,0.15); }

/* ===================== PAGE HERO ===================== */
.page-hero {
    position: relative; padding-top: var(--nav-h);
    min-height: 360px; display: flex; align-items: flex-end;
    background: linear-gradient(160deg, #0a0a0a 0%, #111 100%);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
.page-hero::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 4px; background: linear-gradient(to right, var(--red), transparent);
}
.page-hero-content { position: relative; z-index: 2; padding: 70px 90px 80px; max-width: var(--max-w); width: 100%; margin: 0 auto; }
.page-hero-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(52px, 7vw, 100px); line-height: 0.9; text-transform: uppercase; color: var(--white); letter-spacing: -1px; margin: 12px 0 16px; }
.page-hero-sub { font-family: var(--font-display); font-size: 17px; letter-spacing: 4px; text-transform: uppercase; color: rgba(255,255,255,0.65); }

/* ===================== LAYOUT ===================== */
.inner { max-width: var(--max-w); margin: 0 auto; padding: 0 90px; }
.section-pad { padding: 120px 0; }
.dark-section { background: var(--dark-mid); }

.section-label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 4px; text-transform: uppercase; color: var(--blue); margin-bottom: 16px; }
.section-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 5vw, 62px); text-transform: uppercase; line-height: 0.95; letter-spacing: -0.5px; margin-bottom: 14px; position: relative; display: inline-block; }
.section-title::after { content: ''; display: block; width: 65px; height: 5px; background: var(--red); border-radius: 3px; margin-top: 16px; }
.section-title-center::after { margin: 16px auto 0; }
.section-intro { color: rgba(255,255,255,0.72); font-size: 23px; max-width: 720px; line-height: 1.78; }
.body-text { color: var(--light-text); line-height: 1.82; font-size: 21px; letter-spacing: 0.01em; }
.note { font-size: 14px; color: #666; font-style: italic; }
.center { text-align: center; }
.center-text { margin: 0 auto; }
.mt-10 { margin-top: 10px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-60 { margin-top: 60px; }
.inline-block { display: inline-block; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }

/* Grid helpers */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.two-col-wide { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: start; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* ===================== BUTTONS ===================== */
.btn-primary {
    display: inline-block; background: var(--red); color: var(--white);
    font-family: var(--font-display); font-weight: 700; font-size: 14px;
    letter-spacing: 2px; text-transform: uppercase; font-size: 15px;
    padding: 15px 40px; border-radius: 50px; border: none; cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.btn-primary:hover { background: #c50010; transform: translateY(-3px); }

.btn-secondary {
    display: inline-flex; align-items: center; gap: 10px;
    color: rgba(255,255,255,0.78); font-family: var(--font-display); font-weight: 600;
    font-size: 15px; letter-spacing: 2px; text-transform: uppercase;
    transition: color 0.2s; cursor: pointer;
}
.btn-secondary:hover { color: var(--white); }

.btn-outline {
    display: inline-block; background: transparent; color: var(--white);
    font-family: var(--font-display); font-weight: 700; font-size: 15px;
    letter-spacing: 2px; text-transform: uppercase;
    padding: 14px 38px; border-radius: 50px;
    border: 2px solid rgba(255,255,255,0.2);
    transition: border-color 0.2s, transform 0.2s, color 0.2s;
}
.btn-outline:hover { border-color: var(--white); transform: translateY(-2px); }

/* ===================== HOME: STATS ===================== */
.stat-block { text-align: center; padding: 40px 30px; background: var(--card-bg); border-radius: 16px; border: 1px solid var(--border); transition: transform 0.3s, border-color 0.3s; }
.stat-block:hover { transform: translateY(-5px); border-color: var(--blue); }
.stat-icon-circle { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 22px; }
.stat-icon-circle.blue { background: rgba(0,153,204,0.12); color: var(--blue); }
.stat-icon-circle.red { background: rgba(230,0,18,0.12); color: var(--red); }
.stat-icon-circle.gold { background: rgba(212,175,55,0.12); color: var(--gold); }
.stat-num { font-family: var(--font-display); font-weight: 900; font-size: 52px; line-height: 1; color: var(--white); display: block; margin-bottom: 6px; }
.stat-lbl { font-family: var(--font-display); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: 1px; color: var(--white); margin-bottom: 8px; display: block; }
.stat-sub { font-size: 17px; color: var(--light-text); }

/* ===================== HOME: CULTURE ===================== */
.culture-card { background: var(--card-bg); border-radius: 16px; padding: 50px 44px; border: 1px solid var(--border); position: relative; overflow: hidden; transition: border-color 0.3s, transform 0.3s; }
.culture-card:hover { transform: translateY(-4px); }
.culture-card.blue-border { border-left: 6px solid var(--blue); }
.culture-card.red-border { border-left: 6px solid var(--red); }
.culture-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 25px; text-transform: uppercase; margin-bottom: 16px; }
.culture-card p { color: rgba(255,255,255,0.72); line-height: 1.8; font-size: 19px; }
.culture-num { font-family: var(--font-display); font-weight: 900; font-size: 100px; color: rgba(255,255,255,0.03); position: absolute; top: 0; right: 20px; line-height: 1; }

/* ===================== PULL QUOTE BOX ===================== */
.pull-quote-box { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 60px 50px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.pull-quote-box blockquote { font-family: var(--font-display); font-weight: 900; font-size: 42px; color: var(--red); text-transform: uppercase; line-height: 1.05; quotes: none; }
.quote-attr { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--light-text); }

/* ===================== TONE CARDS ===================== */
.tone-card { border-radius: 16px; overflow: hidden; background: var(--card-bg); border: 1px solid var(--border); transition: transform 0.3s, box-shadow 0.3s; }
.tone-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.tone-img { height: 260px; overflow: hidden; }
.tone-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.tone-card:hover .tone-img img { transform: scale(1.06); }
.tone-cap { padding: 22px 26px; border-top: 4px solid var(--blue); }
.tone-cap strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 19px; text-transform: uppercase; color: var(--white); margin-bottom: 3px; }
.tone-cap span { font-size: 14px; color: var(--light-text); }
.tone-desc { padding: 0 26px 26px; }
.tone-desc p { font-size: 20px; color: var(--light-text); line-height: 1.8; }

/* ===================== CTA BANNER ===================== */
.cta-banner { background: var(--red); padding: 100px 0; }
.cta-title { font-family: var(--font-display); font-weight: 900; font-size: 60px; text-transform: uppercase; color: var(--white); line-height: 1; }
.cta-sub { font-size: 20px; color: rgba(255,255,255,0.8); margin-top: 16px; }
.cta-banner .btn-primary { background: var(--white); color: var(--red); }
.cta-banner .btn-primary:hover { background: rgba(255,255,255,0.9); }

/* ===================== FOOTER ===================== */
footer { background: #050505; border-top: 1px solid var(--border); padding: 50px 0; }
.footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 90px; display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 40px; }
.footer-logo { font-family: var(--font-display); font-weight: 900; font-size: 18px; letter-spacing: 3px; text-transform: uppercase; }
.footer-logo span { color: var(--red); }
.footer-links { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; }
.footer-links a { font-family: var(--font-display); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--light-text); transition: color 0.2s; }
.footer-links a:hover { color: var(--white); }
.footer-copy { font-size: 13px; color: #777; text-align: right; }

/* ===================== PAGE NAV STRIP ===================== */
.page-nav-strip { border-top: 1px solid var(--border); padding: 30px 0; background: var(--dark-mid); }
.page-nav-link { font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--light-text); transition: color 0.2s; display: flex; align-items: center; gap: 8px; }
.page-nav-link:hover { color: var(--white); }

/* ===================== VISION PAGE ===================== */
.split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.split-text {}
.split-image { border-radius: 16px; overflow: hidden; }
.split-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.vision-quote { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--white); border-left: 4px solid var(--blue); padding-left: 20px; }

.info-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.info-item { display: flex; gap: 20px; align-items: flex-start; background: var(--card-bg); border-radius: 12px; padding: 30px; border: 1px solid var(--border); }
.info-item i { font-size: 28px; flex-shrink: 0; margin-top: 4px; }
.info-item strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 18px; text-transform: uppercase; color: var(--white); margin-bottom: 6px; }
.info-item p { font-size: 19px; color: var(--light-text); line-height: 1.78; }

/* ===================== ECOSYSTEM PAGE ===================== */
.eco-intro-stats { display: flex; flex-direction: column; gap: 20px; }
.eco-stat { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 30px 36px; display: flex; flex-direction: column; gap: 6px; }
.eco-stat-num { font-family: var(--font-display); font-weight: 900; font-size: 38px; line-height: 1; }
.eco-stat-lbl { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--light-text); font-family: var(--font-display); font-weight: 600; }

.tier-section { position: relative; }
.tier-stripe { position: absolute; top: 0; left: 0; right: 0; height: 6px; }
.blue-stripe { background: var(--blue); }
.red-stripe { background: var(--red); }
.gold-stripe { background: var(--gold); }

.tier-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 0; }
.tier-badge { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 4px; text-transform: uppercase; padding: 7px 20px; border-radius: 3px; margin-bottom: 16px; }
.blue-badge { background: rgba(0,153,204,0.15); color: var(--blue); border: 1px solid rgba(0,153,204,0.3); }
.red-badge { background: rgba(230,0,18,0.15); color: var(--red); border: 1px solid rgba(230,0,18,0.3); }
.gold-badge { background: rgba(212,175,55,0.15); color: var(--gold); border: 1px solid rgba(212,175,55,0.3); }

.eco-full-card { background: var(--card-bg); border-radius: 16px; padding: 48px 40px; border: 1px solid var(--border); border-top: 5px solid; transition: transform 0.3s, box-shadow 0.3s; }
.eco-full-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
.blue-top { border-top-color: var(--blue); }
.red-top { border-top-color: var(--red); }
.gold-top { border-top-color: var(--gold); }
.eco-card-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(0,153,204,0.1); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 20px; }
.eco-full-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px; text-transform: uppercase; margin-bottom: 12px; }
.eco-full-card p { color: rgba(255,255,255,0.72); font-size: 20px; line-height: 1.72; }
.eco-tag { display: inline-block; margin-top: 20px; padding: 5px 14px; border-radius: 20px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; background: rgba(0,153,204,0.1); color: var(--blue); }
.eco-tag.red-tag { background: rgba(230,0,18,0.1); color: var(--red); }
.eco-tag.gold-tag { background: rgba(212,175,55,0.1); color: var(--gold); }

/* Flywheel */
.flywheel-diagram { display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap; }
.flywheel-item { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 200px; }
.flywheel-circle { width: 140px; height: 140px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; border: 2px solid; }
.flywheel-circle i { font-size: 32px; }
.blue-circle { background: rgba(0,153,204,0.12); border-color: var(--blue); color: var(--blue); }
.red-circle { background: rgba(230,0,18,0.12); border-color: var(--red); color: var(--red); }
.gold-circle { background: rgba(212,175,55,0.12); border-color: var(--gold); color: var(--gold); }
.flywheel-item p { font-size: 19px; color: var(--light-text); text-align: center; line-height: 1.5; }
.flywheel-arrow { font-size: 24px; color: var(--border); }

/* ===================== STRATEGY PAGE ===================== */
.strategy-blocks { display: flex; flex-direction: column; gap: 3px; }
.strategy-block { display: flex; gap: 50px; background: var(--card-bg); border: 1px solid var(--border); padding: 50px 50px; border-radius: 16px; align-items: flex-start; transition: border-color 0.3s; }
.strategy-block:hover { border-color: rgba(255,255,255,0.15); }
.strategy-block-num { font-family: var(--font-display); font-weight: 900; font-size: 72px; color: rgba(255,255,255,0.05); line-height: 1; flex-shrink: 0; width: 70px; }
.strategy-block-content h3 { font-family: var(--font-display); font-weight: 800; font-size: 24px; text-transform: uppercase; margin-bottom: 12px; color: var(--white); }
.strategy-block-content p { color: rgba(255,255,255,0.72); line-height: 1.8; font-size: 21px; }

/* Quote full bleed */
.quote-full-bleed { background: var(--dark-mid); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 120px 0; }
.big-quote-mark { font-family: var(--font-display); font-size: 160px; color: rgba(230,0,18,0.15); line-height: 0.5; margin-bottom: 20px; }
.big-quote-text { font-family: var(--font-display); font-weight: 900; font-size: clamp(36px, 5vw, 64px); text-transform: uppercase; color: var(--red); letter-spacing: -1px; line-height: 1.05; quotes: none; }
.big-quote-attr { font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: var(--light-text); margin-top: 20px; display: block; }

/* Positioning grid */
.positioning-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pos-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 44px; transition: border-color 0.3s, transform 0.3s; }
.pos-card:hover { border-color: rgba(255,255,255,0.15); transform: translateY(-4px); }
.pos-icon { font-size: 30px; color: var(--blue); margin-bottom: 18px; }
.pos-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px; text-transform: uppercase; margin-bottom: 12px; color: var(--white); }
.pos-card p { color: rgba(255,255,255,0.72); font-size: 20px; line-height: 1.8; }

/* Comps table */
.comps-table { background: var(--card-bg); border-radius: 16px; overflow: hidden; border: 1px solid var(--border); }
.comps-header { display: grid; grid-template-columns: 2fr 1fr 1.5fr 2fr; gap: 0; padding: 18px 36px; background: rgba(255,255,255,0.04); border-bottom: 1px solid var(--border); font-family: var(--font-display); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--light-text); font-weight: 700; }
.comps-row { display: grid; grid-template-columns: 2fr 1fr 1.5fr 2fr; padding: 22px 36px; border-bottom: 1px solid var(--border); align-items: center; transition: background 0.2s; }
.comps-row:last-child { border-bottom: none; }
.comps-row:hover { background: rgba(255,255,255,0.02); }
.comp-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--white); }
.comps-row span { color: var(--light-text); font-size: 18px; }
.comp-gross { color: var(--blue) !important; font-family: var(--font-display); font-weight: 700; font-size: 20px !important; }
.comp-note { font-size: 17px !important; }

/* Credentials */
.credentials-list { display: flex; flex-direction: column; gap: 3px; }
.cred-item { display: flex; gap: 24px; align-items: flex-start; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 32px 40px; transition: border-color 0.3s; }
.cred-item:hover { border-color: rgba(0,153,204,0.3); }
.cred-check { width: 44px; height: 44px; border-radius: 50%; background: rgba(0,153,204,0.1); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; margin-top: 4px; }
.cred-item strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 20px; text-transform: uppercase; color: var(--white); margin-bottom: 6px; }
.cred-item p { color: var(--light-text); font-size: 20px; }

/* ===================== CAMPAIGN PAGE ===================== */
.campaign-concept-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.concept-card { display: flex; flex-direction: column; gap: 20px; }
.concept-num { font-family: var(--font-display); font-weight: 900; font-size: 72px; color: rgba(255,255,255,0.04); line-height: 1; }
.concept-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 26px; text-transform: uppercase; color: var(--white); margin-top: -30px; }
.concept-img { position: relative; border-radius: 12px; overflow: hidden; height: 380px; background: var(--card-bg); }
.concept-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.concept-card:hover .concept-img img { transform: scale(1.04); }
.concept-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 24px; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%); font-family: var(--font-display); font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.9); text-shadow: 0 1px 6px rgba(0,0,0,0.8); }
.concept-card > p { color: var(--light-text); font-size: 20px; line-height: 1.72; }
.concept-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.ctag { font-family: var(--font-display); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; padding: 4px 12px; border-radius: 20px; background: rgba(255,255,255,0.06); color: var(--light-text); }

/* Timeline */
.timeline { display: flex; flex-direction: column; gap: 3px; }
.timeline-item { display: flex; gap: 40px; align-items: flex-start; background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 44px; transition: border-color 0.3s; }
.timeline-item:hover { border-color: rgba(255,255,255,0.12); }
.timeline-marker { width: 90px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 4px; }
.timeline-marker span { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.blue-marker { color: var(--blue); }
.red-marker { color: var(--red); }
.gold-marker { color: var(--gold); }
.timeline-marker::before { content: ''; display: block; width: 48px; height: 48px; border-radius: 50%; border: 2px solid currentColor; background: rgba(255,255,255,0.02); margin-bottom: 4px; }
.timeline-content h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px; text-transform: uppercase; margin-bottom: 10px; color: var(--white); }
.phase-time { font-size: 15px; color: var(--light-text); font-weight: 400; text-transform: none; letter-spacing: 0; }
.timeline-content p { color: rgba(255,255,255,0.72); font-size: 20px; line-height: 1.8; margin-bottom: 16px; }
.timeline-tactics { display: flex; gap: 8px; flex-wrap: wrap; }
.timeline-tactics span { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; font-family: var(--font-display); padding: 4px 12px; border-radius: 20px; background: rgba(255,255,255,0.05); color: var(--light-text); }

/* Social grid */
.social-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.social-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 50px 40px; text-align: center; transition: transform 0.3s, border-color 0.3s; }
.social-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.15); }
.social-icon { font-size: 44px; margin-bottom: 20px; }
.social-num { font-family: var(--font-display); font-weight: 900; font-size: 52px; color: var(--white); display: block; margin-bottom: 8px; }
.social-lbl { font-family: var(--font-display); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: 1px; color: var(--white); margin-bottom: 10px; display: block; }
.social-card p { font-size: 19px; color: var(--light-text); }

/* ===================== CONTACT PAGE ===================== */
.contact-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: start; }
.contact-org { font-family: var(--font-display); font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: var(--light-text); margin-bottom: 36px; }

.contact-links { display: flex; flex-direction: column; gap: 3px; margin-bottom: 40px; }
.contact-link { display: flex; gap: 20px; align-items: center; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 22px 28px; transition: border-color 0.2s, transform 0.2s; }
.contact-link:hover { border-color: var(--blue); transform: translateX(4px); }
.contact-link-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(0,153,204,0.1); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.contact-link strong { display: block; font-family: var(--font-display); font-size: 16px; text-transform: uppercase; letter-spacing: 1px; color: var(--white); margin-bottom: 2px; }
.contact-link span { font-size: 15px; color: var(--light-text); }

.contact-ready-box { background: var(--card-bg); border: 1px solid var(--border); border-left: 5px solid var(--blue); border-radius: 12px; padding: 36px; }
.contact-ready-box h3 { font-family: var(--font-display); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; color: var(--white); }
.contact-ready-box ul { display: flex; flex-direction: column; gap: 10px; }
.contact-ready-box li { display: flex; align-items: center; gap: 12px; font-size: 18px; color: var(--light-text); }
.contact-ready-box li i { color: var(--blue); font-size: 14px; }

/* Form */
.contact-form-wrap { background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; padding: 60px; }
.form-title { font-family: var(--font-display); font-weight: 800; font-size: 32px; text-transform: uppercase; margin-bottom: 8px; }
.form-subtitle { color: var(--light-text); font-size: 18px; margin-bottom: 40px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-group label { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--light-text); }
.form-group input,
.form-group select,
.form-group textarea {
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    border-radius: 10px; padding: 14px 18px; color: var(--white);
    font-family: var(--font-body); font-size: 18px;
    transition: border-color 0.2s, background 0.2s; outline: none;
    width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--blue); background: rgba(0,153,204,0.05); }
.form-group select option { background: #1a1a1a; }
.form-group input[type="checkbox"] { width: auto; }
.form-group label:has(input[type="checkbox"]) { flex-direction: row; align-items: flex-start; gap: 12px; cursor: pointer; color: var(--light-text); font-size: 15px; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 400; }
.form-submit { width: 100%; justify-content: center; padding: 18px; font-size: 16px; display: flex; align-items: center; gap: 10px; border: none; }

.form-success { flex-direction: column; align-items: center; text-align: center; padding: 80px 40px; gap: 16px; }
.success-icon { font-size: 60px; color: var(--blue); }
.form-success h3 { font-family: var(--font-display); font-weight: 800; font-size: 36px; text-transform: uppercase; }
.form-success p { color: var(--light-text); }

/* ===================== ANIMATIONS ===================== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ===================== MOBILE ===================== */
@media (max-width: 1024px) {
    nav { padding: 0 40px; }
    .inner { padding: 0 44px; }
    .hero-content { padding: 0 44px 80px; }
    .page-hero-content { padding: 60px 44px 70px; }
    .two-col, .split-layout { grid-template-columns: 1fr; gap: 40px; }
    .two-col-wide { grid-template-columns: 1fr; gap: 40px; }
    .three-col { grid-template-columns: 1fr 1fr; }
    .positioning-grid { grid-template-columns: 1fr; }
    .comps-header, .comps-row { grid-template-columns: 2fr 1fr 1.5fr; }
    .comps-row .comp-note, .comps-header span:last-child { display: none; }
    .contact-layout { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .footer-copy { text-align: left; grid-column: 1 / -1; }
    .social-grid { grid-template-columns: 1fr 1fr; }
    .campaign-concept-grid { grid-template-columns: 1fr 1fr; }
    .cta-title { font-size: 48px; }
    .body-text { font-size: 19px; }
    .section-intro { font-size: 20px; }
    .scroll-indicator { right: 40px; }

    /* ---- Hamburger menu activates at 1024px (tablets + phones) ---- */

    /* Remove backdrop-filter on mobile so it doesn't create a containing
       block (which traps position:fixed children) and doesn't cause
       compositing glitches that can hide the hamburger icon. */
    nav {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: #0a0a0a !important;
    }
    nav.scrolled { background: #0a0a0a !important; }
    body.light-mode nav { background: #f2f0eb !important; }
    body.light-mode nav.scrolled { background: #f2f0eb !important; }

    .nav-links {
        display: none;
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background: #0a0a0a;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 28px;
        z-index: 9990;
        padding: 0 24px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    body.light-mode .nav-links {
        background: #f2f0eb;
    }
    .nav-links.open { display: flex; }
    .nav-links a {
        font-size: 26px;
        letter-spacing: 3px;
        padding: 10px 0;
        color: var(--light-text);
    }
    .nav-links a.active { color: var(--white); }
    .nav-links a::after { display: none; }
    .nav-cta {
        margin-top: 12px;
        height: 48px !important;
        padding: 0 36px !important;
        font-size: 15px !important;
    }
    .hamburger {
        display: flex !important;
        z-index: 9991;
        position: relative;
    }
    .hamburger span {
        background: var(--white) !important;
    }
    body.light-mode .hamburger span {
        background: #111 !important;
    }
    .hamburger:focus { outline: none; }
    .hamburger:focus-visible {
        outline: 2px solid var(--red);
        outline-offset: 4px;
        border-radius: 4px;
    }
    .nav-logo {
        position: relative;
        z-index: 9991;
    }
}

@media (max-width: 768px) {
    nav { padding: 0 24px; }
    .nav-links a {
        font-size: 22px;
        gap: 24px;
    }
    .nav-cta {
        height: 44px !important;
        padding: 0 28px !important;
    }
    .hero-content { padding: 0 24px 60px; }
    .hero-title { margin-bottom: 14px; }
    .hero-subtitle { font-size: 14px; letter-spacing: 3px; margin-bottom: 30px; }
    .hero-cta-row { gap: 16px; }
    .btn-primary { padding: 14px 28px; font-size: 14px; }
    .btn-secondary { font-size: 13px; }
    .btn-outline { padding: 12px 28px; font-size: 14px; }
    .page-hero-content { padding: 50px 24px 60px; }
    .page-hero-sub { font-size: 14px; letter-spacing: 2px; }
    .section-pad { padding: 70px 0; }
    .inner { padding: 0 20px; }
    .section-label { font-size: 14px; letter-spacing: 3px; }
    .section-intro { font-size: 18px; }
    .body-text { font-size: 17px; }
    .three-col { grid-template-columns: 1fr; }
    .info-row { grid-template-columns: 1fr; }
    .campaign-concept-grid { grid-template-columns: 1fr; }
    .eco-intro-stats { flex-direction: row; }
    .form-row { grid-template-columns: 1fr; }
    .contact-form-wrap { padding: 36px 20px; }
    .form-title { font-size: 26px; }
    .strategy-block { flex-direction: column; gap: 16px; padding: 32px 28px; }
    .strategy-block-content h3 { font-size: 20px; }
    .strategy-block-content p { font-size: 17px; }
    .timeline-item { flex-direction: column; padding: 32px 24px; gap: 24px; }
    .timeline-content h3 { font-size: 19px; }
    .timeline-content p { font-size: 17px; }
    .flywheel-diagram { flex-direction: column; }
    .flywheel-arrow { transform: rotate(90deg); }
    .footer-inner { grid-template-columns: 1fr; text-align: center; gap: 20px; }
    .footer-copy { text-align: center; }
    .footer-links { justify-content: center; gap: 16px; }
    .footer-links a { font-size: 12px; }
    .comps-header, .comps-row { grid-template-columns: 2fr 1fr; padding: 16px 20px; }
    .comps-row span:nth-child(3), .comps-header span:nth-child(3) { display: none; }
    .page-nav-strip .inner { padding: 0 20px; }
    .page-nav-strip .flex-between { flex-direction: column; gap: 16px; align-items: center; }
    /* Stats & cards */
    .stat-block { padding: 30px 20px; }
    .stat-num { font-size: 40px; }
    .stat-icon-circle { width: 64px; height: 64px; font-size: 24px; margin-bottom: 16px; }
    .pull-quote-box { padding: 40px 28px; }
    .pull-quote-box blockquote { font-size: 28px; }
    .tone-img { height: 200px; }
    .culture-card { padding: 36px 28px; }
    .culture-card p { font-size: 16px; }
    .eco-full-card { padding: 36px 28px; }
    .eco-full-card p { font-size: 17px; }
    .pos-card { padding: 32px 24px; }
    .pos-card p { font-size: 17px; }
    .concept-img { height: 260px; }
    .concept-card > p { font-size: 17px; }
    /* CTA banner */
    .cta-banner { padding: 70px 0; }
    .cta-title { font-size: 36px; }
    .cta-sub { font-size: 17px; }
    /* Legacy banner */
    .legacy-banner { padding: 50px 0; }
    .legacy-banner .two-col { gap: 40px !important; }
    .legacy-quote { font-size: 22px; }
    .legacy-stat { padding: 28px 20px; }
    .legacy-stat-num { font-size: 40px; }
    /* Quote full bleed */
    .quote-full-bleed { padding: 70px 0; }
    .big-quote-mark { font-size: 100px; }
    /* Social grid */
    .social-grid { grid-template-columns: 1fr; }
    .social-card { padding: 36px 28px; }
    .social-num { font-size: 40px; }
    /* Positioning grid */
    .positioning-grid { grid-template-columns: 1fr; }
    /* Scroll indicator */
    .scroll-indicator { right: 24px; bottom: 20px; }
    /* Cred items */
    .cred-item { padding: 24px 20px; flex-direction: column; gap: 12px; }
    .cred-item p { font-size: 16px; }
    /* Two-col-wide */
    .two-col-wide { grid-template-columns: 1fr; gap: 40px; }
    /* Contact layout */
    .contact-layout { grid-template-columns: 1fr; gap: 40px; }
}

/* ===================== ABOUT LEGACY BLOCK (inline, no ::before overlay) ===================== */
.about-legacy-block {
    background: linear-gradient(135deg, #1a1408 0%, #0d0a04 100%);
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 16px;
    padding: 56px 52px;
    margin-top: 50px;
    position: relative;
    overflow: hidden;
}
.about-legacy-block::before {
    content: '80';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 280px;
    line-height: 1;
    color: rgba(212,175,55,0.04);
    pointer-events: none;
    letter-spacing: -10px;
}
.about-legacy-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(26px, 3.5vw, 46px);
    text-transform: uppercase;
    color: var(--gold);
    line-height: 1.05;
    margin-top: 8px;
    margin-bottom: 0;
}
.theme-toggle {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 1100;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--light-text);
    transition: background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    writing-mode: vertical-rl;
    text-orientation: mixed;
}
.theme-toggle:hover {
    border-color: var(--blue);
    color: var(--white);
    box-shadow: 0 4px 24px rgba(0,153,204,0.25);
}
.theme-toggle .toggle-icon {
    font-size: 16px;
    writing-mode: horizontal-tb;
    line-height: 1;
}
.theme-toggle .toggle-label {
    writing-mode: vertical-rl;
    font-size: 11px;
}
body.light-mode .theme-toggle {
    background: #fff;
    border-color: rgba(0,0,0,0.15);
    color: #555;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
@media (max-width: 768px) {
    .theme-toggle {
        top: auto;
        bottom: 24px;
        right: 16px;
        transform: none;
        writing-mode: horizontal-tb;
        padding: 10px 16px;
        border-radius: 50px;
        z-index: 998;
    }
    .theme-toggle .toggle-label { writing-mode: horizontal-tb; }
}

/* Small phones */
@media (max-width: 420px) {
    .inner { padding: 0 16px; }
    .hero-content { padding: 0 16px 50px; }
    .page-hero-content { padding: 40px 16px 50px; }
    .section-pad { padding: 56px 0; }
    .stat-num { font-size: 36px; }
    .cta-title { font-size: 30px; }
    .pull-quote-box blockquote { font-size: 24px; }
    .pull-quote-box { padding: 32px 20px; }
    .legacy-stat-num { font-size: 34px; }
    .nav-links a { font-size: 18px; }
    .nav-links { gap: 20px; }
    .hero-subtitle { font-size: 12px; letter-spacing: 2px; }
    .contact-form-wrap { padding: 28px 16px; }
    .eco-full-card { padding: 28px 20px; }
    .strategy-block { padding: 24px 20px; }
    .timeline-item { padding: 24px 20px; }
    .concept-img { height: 220px; }
}

/* ===================== 80 YEARS LEGACY BANNER ===================== */
.legacy-banner {
    background: linear-gradient(135deg, #1a1408 0%, #0d0a04 100%);
    border-top: 1px solid rgba(212,175,55,0.2);
    border-bottom: 1px solid rgba(212,175,55,0.2);
    padding: 70px 0;
    overflow: hidden;
    position: relative;
}
.legacy-banner::before {
    content: '80';
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 320px;
    line-height: 1;
    color: rgba(212,175,55,0.04);
    pointer-events: none;
    letter-spacing: -10px;
}
.legacy-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 16px;
    overflow: hidden;
    margin-top: 50px;
}
.legacy-stat {
    padding: 40px 32px;
    background: rgba(212,175,55,0.03);
    border-right: 1px solid rgba(212,175,55,0.12);
    text-align: center;
    transition: background 0.3s;
}
.legacy-stat:last-child { border-right: none; }
.legacy-stat:hover { background: rgba(212,175,55,0.07); }
.legacy-stat-num {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 58px;
    line-height: 1;
    color: var(--gold);
    display: block;
}
.legacy-stat-lbl {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(212,175,55,0.6);
    margin-top: 8px;
    display: block;
}
.legacy-stat-sub {
    font-size: 15px;
    color: var(--light-text);
    margin-top: 10px;
    line-height: 1.5;
}
.legacy-quote {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(22px, 3vw, 34px);
    text-transform: uppercase;
    color: var(--gold);
    line-height: 1.15;
    letter-spacing: -0.3px;
}
.legacy-quote span { color: rgba(212,175,55,0.45); }
@media (max-width: 1024px) {
    .legacy-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .legacy-stats-row { grid-template-columns: 1fr !important; }
    .legacy-stat { border-right: none; border-bottom: 1px solid rgba(212,175,55,0.12); }
    .about-legacy-block { padding: 36px 24px; }
    .about-legacy-title { font-size: 24px; }
}