:root {
  --ri-ink: #0B0B0D;
  --ri-paper: #F5F3EE;
  --ri-hi-vis: #F5D000;
  --ri-red: #C8102E;
  --ri-steel: #2A2B2F;
  --ri-line: #3A3B40;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html, body {
  background: var(--ri-ink);
  color: var(--ri-paper);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-feature-settings: 'ss01', 'cv11';
}

.font-display {
  font-family: 'Oswald', 'Archivo Narrow', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.display-xl { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(3rem, 8vw, 6.5rem); line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; }
.display-lg { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(2rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.015em; text-transform: uppercase; }
.display-md { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; }

.eyebrow { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ri-hi-vis); }

.bg-ink { background: var(--ri-ink); }
.bg-steel { background: var(--ri-steel); }
.bg-paper { background: var(--ri-paper); color: var(--ri-ink); }
.text-hi-vis { color: var(--ri-hi-vis); }
.text-red { color: var(--ri-red); }
.text-paper { color: var(--ri-paper); }
.text-muted { color: rgba(245, 243, 238, 0.55); }
.text-faint { color: rgba(245, 243, 238, 0.35); }

.border-line { border-color: var(--ri-line); }

/* NAV */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(11, 11, 13, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(58, 59, 64, 0.5); }
.nav-inner { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav-wordmark { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.5rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ri-paper); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; }
.nav-wordmark .dot { width: 8px; height: 8px; background: var(--ri-hi-vis); border-radius: 2px; display: inline-block; }
.nav-links { display: none; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .nav-links { display: flex; } }
.nav-link { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.875rem; color: rgba(245, 243, 238, 0.7); text-decoration: none; transition: color 0.2s; padding: 0.5rem 0; position: relative; }
.nav-link:hover { color: var(--ri-paper); }
.nav-link.active { color: var(--ri-paper); }
.nav-link.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--ri-hi-vis); }
.nav-cta { background: var(--ri-red); color: var(--ri-paper); padding: 0.625rem 1.25rem; border-radius: 2px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; transition: background 0.15s; }
.nav-cta:hover { background: #a80d26; }

.mobile-toggle { display: inline-flex; background: transparent; border: 0; color: var(--ri-paper); padding: 0.5rem; cursor: pointer; }
@media (min-width: 900px) { .mobile-toggle { display: none; } }
.mobile-menu { display: none; background: rgba(11, 11, 13, 0.98); border-bottom: 1px solid var(--ri-line); }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 1rem 1.5rem; color: rgba(245, 243, 238, 0.8); text-decoration: none; font-weight: 500; border-top: 1px solid rgba(58, 59, 64, 0.4); }
.mobile-menu a:hover { color: var(--ri-hi-vis); }

/* HERO */
.hero { position: relative; min-height: 90vh; display: flex; align-items: flex-end; padding: 6rem 1.5rem 4rem; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; background-image: url('../img/hero.jpg'); background-size: cover; background-position: center 35%; background-color: var(--ri-ink); }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,13,0.55) 0%, rgba(11,11,13,0.4) 45%, rgba(11,11,13,0.94) 100%); }
.hero-placeholder-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Oswald', sans-serif; font-size: 0.75rem; letter-spacing: 0.2em; color: rgba(245,243,238,0.15); text-transform: uppercase; z-index: 1; text-align: center; line-height: 1.8; }
.hero-inner { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; width: 100%; }
.hero-flourish { display: inline-block; width: 48px; height: 4px; background: var(--ri-hi-vis); margin-bottom: 1.5rem; }
.hero-sub { font-size: clamp(1rem, 1.3vw, 1.125rem); color: rgba(245, 243, 238, 0.72); max-width: 42rem; margin-top: 1.5rem; line-height: 1.6; }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.875rem 1.5rem; border-radius: 2px; text-decoration: none; transition: all 0.2s; border: 0; cursor: pointer; }
.btn-primary { background: var(--ri-red); color: var(--ri-paper); }
.btn-primary:hover { background: #a80d26; transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--ri-paper); border: 1px solid rgba(245, 243, 238, 0.3); }
.btn-secondary:hover { border-color: var(--ri-hi-vis); color: var(--ri-hi-vis); }
.btn-yellow { background: var(--ri-hi-vis); color: var(--ri-ink); }
.btn-yellow:hover { background: #e2c000; }
.btn-group { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; }

/* SECTIONS */
.section { padding: 6rem 1.5rem; }
.section-inner { max-width: 1400px; margin: 0 auto; }
.section-tight { max-width: 960px; margin: 0 auto; }

.positioning { padding: 5rem 1.5rem; text-align: center; border-top: 1px solid var(--ri-line); border-bottom: 1px solid var(--ri-line); }
.positioning p { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: clamp(1.25rem, 2.5vw, 1.875rem); line-height: 1.3; max-width: 48rem; margin: 0 auto; color: var(--ri-paper); }
.positioning .accent { color: var(--ri-hi-vis); }

/* AUDIENCE SPLIT */
.audience-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 800px) { .audience-grid { grid-template-columns: 1fr 1fr; } }
.audience-card { position: relative; background: var(--ri-steel); min-height: 420px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 2.5rem; border-radius: 2px; text-decoration: none; color: var(--ri-paper); transition: transform 0.3s; }
.audience-card:hover { transform: translateY(-4px); }
.audience-card .card-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, transparent 30%, rgba(11,11,13,0.95) 100%), radial-gradient(ellipse at center, #1f2024 0%, #0f1014 100%); }
.audience-card .card-placeholder { position: absolute; top: 2rem; right: 2rem; font-family: 'Oswald', sans-serif; font-size: 0.625rem; letter-spacing: 0.2em; color: rgba(245,243,238,0.2); text-transform: uppercase; z-index: 1; }
.audience-card h3 { position: relative; z-index: 2; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 2rem; text-transform: uppercase; letter-spacing: -0.01em; }
.audience-card p { position: relative; z-index: 2; color: rgba(245, 243, 238, 0.7); margin-top: 0.75rem; line-height: 1.55; max-width: 24rem; }
.audience-card .arrow { position: relative; z-index: 2; margin-top: 1.5rem; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ri-hi-vis); display: inline-flex; align-items: center; gap: 0.5rem; }

/* FOUR PILLAR GRID */
.pillars { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 3rem; }
@media (min-width: 700px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar { padding: 2rem 0; border-top: 2px solid var(--ri-hi-vis); }
.pillar .icon { width: 32px; height: 32px; margin-bottom: 1.25rem; color: var(--ri-hi-vis); }
.pillar h4 { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.pillar p { color: rgba(245, 243, 238, 0.65); font-size: 0.9375rem; line-height: 1.55; }

/* RULEBOOK CALLOUT */
.rulebook { background: var(--ri-steel); padding: 4rem 1.5rem; border-top: 1px solid var(--ri-line); border-bottom: 1px solid var(--ri-line); }
.rulebook-inner { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem; align-items: flex-start; }
@media (min-width: 800px) { .rulebook-inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.rulebook-text h3 { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); text-transform: uppercase; line-height: 1.1; }
.rulebook-text p { color: rgba(245, 243, 238, 0.7); margin-top: 0.75rem; max-width: 30rem; }
.rulebook-meta { font-family: 'Oswald', sans-serif; font-size: 0.75rem; letter-spacing: 0.15em; color: var(--ri-hi-vis); text-transform: uppercase; margin-top: 1rem; }

/* PROOF STRIP */
.proof { padding: 4rem 1.5rem; border-top: 1px solid var(--ri-line); }
.proof-inner { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem; align-items: center; text-align: center; }
@media (min-width: 800px) { .proof-inner { flex-direction: row; justify-content: space-between; text-align: left; } }
.proof-label { font-family: 'Oswald', sans-serif; font-size: 0.75rem; letter-spacing: 0.2em; color: var(--ri-hi-vis); text-transform: uppercase; }
.proof h4 { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.75rem); text-transform: uppercase; margin-top: 0.5rem; }

/* FOOTER */
.footer { border-top: 1px solid var(--ri-line); padding: 3rem 1.5rem 2rem; }
.footer-inner { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 700px) { .footer-inner { grid-template-columns: 2fr 1fr 1fr; } }
.footer h5 { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ri-hi-vis); margin-bottom: 1rem; }
.footer a { display: block; color: rgba(245, 243, 238, 0.6); text-decoration: none; padding: 0.25rem 0; font-size: 0.875rem; }
.footer a:hover { color: var(--ri-paper); }
.footer-bottom { max-width: 1400px; margin: 3rem auto 0; padding-top: 2rem; border-top: 1px solid var(--ri-line); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer-bottom p { font-size: 0.8125rem; color: rgba(245, 243, 238, 0.4); }
.footer-wordmark { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.75rem; letter-spacing: 0.02em; text-transform: uppercase; }

/* PAGE HEADER (non-home pages) */
.page-header { padding: 8rem 1.5rem 4rem; border-bottom: 1px solid var(--ri-line); position: relative; overflow: hidden; }
.page-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 30%, #17171c 0%, var(--ri-ink) 70%); z-index: 0; }
.page-header-inner { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; }
.page-header h1 { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(2.5rem, 6vw, 5rem); text-transform: uppercase; line-height: 0.95; letter-spacing: -0.015em; }
.page-header .lede { margin-top: 1.5rem; max-width: 36rem; font-size: 1.125rem; line-height: 1.55; color: rgba(245, 243, 238, 0.7); }

/* PROSE */
.prose { max-width: 42rem; }
.prose h2 { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.75rem; text-transform: uppercase; margin-top: 3rem; margin-bottom: 1rem; letter-spacing: -0.005em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.25rem; text-transform: uppercase; margin-top: 2rem; margin-bottom: 0.75rem; }
.prose p { color: rgba(245, 243, 238, 0.8); line-height: 1.7; margin-bottom: 1.25rem; font-size: 1.0625rem; }
.prose strong { color: var(--ri-paper); font-weight: 600; }
.prose ul { list-style: none; padding: 0; margin: 1.25rem 0; }
.prose ul li { position: relative; padding-left: 1.5rem; margin-bottom: 0.75rem; color: rgba(245, 243, 238, 0.8); line-height: 1.55; }
.prose ul li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 8px; height: 2px; background: var(--ri-hi-vis); }
.prose a { color: var(--ri-hi-vis); text-decoration: none; border-bottom: 1px solid rgba(245, 208, 0, 0.3); transition: border 0.15s; }
.prose a:hover { border-color: var(--ri-hi-vis); }

/* OFFER BLOCKS (operators page) */
.offer-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--ri-line); border: 1px solid var(--ri-line); margin-top: 3rem; }
@media (min-width: 800px) { .offer-grid { grid-template-columns: 1fr 1fr; } }
.offer-cell { background: var(--ri-ink); padding: 2rem; }
.offer-cell .num { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 2.5rem; color: var(--ri-hi-vis); line-height: 1; }
.offer-cell h3 { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.25rem; text-transform: uppercase; margin-top: 0.75rem; }
.offer-cell p { color: rgba(245, 243, 238, 0.7); margin-top: 0.5rem; line-height: 1.55; font-size: 0.9375rem; }

/* CTA BAND */
.cta-band { background: var(--ri-red); padding: 4rem 1.5rem; text-align: center; }
.cta-band .cta-inner { max-width: 720px; margin: 0 auto; }
.cta-band h2 { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(1.75rem, 4vw, 3rem); text-transform: uppercase; line-height: 1; color: #fff; }
.cta-band p { color: rgba(255, 255, 255, 0.85); margin-top: 1rem; font-size: 1.0625rem; }
.cta-band .btn-yellow { margin-top: 2rem; }

/* FORM */
.form-field { margin-bottom: 1.25rem; }
.form-field label { display: block; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ri-hi-vis); margin-bottom: 0.5rem; }
.form-field input, .form-field textarea, .form-field select { width: 100%; background: var(--ri-steel); border: 1px solid var(--ri-line); padding: 0.875rem 1rem; color: var(--ri-paper); font-family: 'Inter', sans-serif; font-size: 1rem; border-radius: 2px; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--ri-hi-vis); }
.form-field textarea { min-height: 140px; resize: vertical; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }