/* =================================================================
   ASPHALT — combined stylesheet
   - SHARED block: reset, body, grain, cursor (declared ONCE)
   - S1 block:     hero  (s1- prefixed)
   - S2 block:     drop  (s2- prefixed)
   ================================================================= */

/* ===== SHARED / GLOBAL (was duplicated in every section) ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body {
  background-color: #F5F3EE;
  color: #1c1b1b;
  overflow-x: hidden;
  cursor: none;
}
body::-webkit-scrollbar { display: none; }
body { -ms-overflow-style: none; scrollbar-width: none; }

/* Paper grain — once, on top of everything */
body::after {
  content: '';
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 9990;
  opacity: 0.032;
  background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
}

/* ===== SHARED custom cursor (single instance for whole page) ===== */
#cursor {
  width: 32px; height: 32px;
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 99999;
  transform: translate(-50%, -50%);
  will-change: left, top;
  transition: transform 0.15s cubic-bezier(0.23,1,0.32,1);
}
#cursor svg { animation: wheel-spin 3s linear infinite; display: block; }
#cursor.fast svg { animation: wheel-spin 0.3s linear infinite; }
#cursor.big { transform: translate(-50%,-50%) scale(1.5); }

@keyframes wheel-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* =================================================================
   S1 — HERO
   ================================================================= */

/* Nav (shared/fixed) */
.s1-nav {
  position: fixed; top: 0; width: 100%; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px clamp(24px,5vw,80px);
  background: rgba(245,243,238,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.s1-nav-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px; letter-spacing: 0.02em;
  color: #0A0A0A; line-height: 1;
}
.s1-nav-links { display: flex; gap: 36px; list-style: none; }
.s1-nav-link {
  position: relative;
  font-family: 'Space Mono', monospace;
  font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #4b4731; text-decoration: none;
  padding-bottom: 2px;
  transition: color 0.25s;
}
.s1-nav-link::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px; background: #CC4A1A;
  transition: width 0.3s cubic-bezier(0.23,1,0.32,1);
}
.s1-nav-link:hover { color: #CC4A1A; }
.s1-nav-link:hover::after { width: 100%; }
.s1-nav-icons { display: flex; align-items: center; gap: 16px; }
@media (max-width: 768px) { .s1-nav-links { display: none; } }

/* Hero canvas */
.s1-canvas {
  position: relative; width: 100%; height: 100vh;
  overflow: hidden; display: flex;
  align-items: center; justify-content: center;
  background: #F5F3EE;
}

/* Ghost circles */
.s1-circle-1 {
  position: absolute; top: 25%; right: 25%;
  width: 192px; height: 192px;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 50%; pointer-events: none;
}
.s1-circle-2 {
  position: absolute; bottom: 25%; left: 25%;
  width: 288px; height: 288px;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 50%; pointer-events: none;
}

/* Title */
.s1-title-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.s1-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(80px, 20vw, 260px);
  line-height: 0.9; color: #0A0A0A;
  white-space: nowrap; user-select: none;
  animation: s1-slam-in 1.1s cubic-bezier(0.23,1,0.32,1) forwards;
}
.s1-title-a { color: #FFE600; }

@keyframes s1-slam-in {
  0%   { transform: translateY(-80px) scale(1.06); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Board */
.s1-board-wrap {
  position: relative; z-index: 10;
  width: 100%; max-width: 896px;
  padding: 0 clamp(24px,5vw,80px);
  display: flex; flex-direction: column; align-items: center;
}
.s1-board-float {
  perspective: 1000px;
  filter: drop-shadow(0 40px 28px rgba(10,10,10,0.13));
  animation: s1-board-float 6s ease-in-out infinite;
}
.s1-board-img {
  width: 100%; height: auto; max-width: 600px;
  object-fit: contain;
  transform: rotate(-15deg);
  transition: transform 0.7s;
}
@keyframes s1-board-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}

/* Subtitle + CTA */
.s1-sub {
  animation: s1-fade-up 0.9s cubic-bezier(0.23,1,0.32,1) 0.9s both;
  text-align: center; margin-top: 32px;
}
.s1-sub-text {
  font-family: 'Space Mono', monospace;
  font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #4b4731;
  margin-bottom: 24px;
}
.s1-cta-btn {
  background: #CC4A1A; color: #fff;
  font-family: 'Space Mono', monospace;
  font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 14px 36px; border: none; cursor: none;
  transition: transform 0.2s cubic-bezier(0.23,1,0.32,1), background 0.2s;
}
.s1-cta-btn:hover  { transform: scale(1.05); background: #b03d10; }
.s1-cta-btn:active { transform: scale(0.97); }

@keyframes s1-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll indicator */
.s1-scroll-indicator {
  position: absolute; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  align-items: center; gap: 8px; z-index: 20;
}
.s1-scroll-ring {
  position: relative; width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
}
.s1-scroll-svg {
  width: 100%; height: 100%;
  animation: s1-spin-slow 12s linear infinite;
}
.s1-scroll-arrow {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
@keyframes s1-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Left vertical label */
.s1-vert-label {
  position: absolute; top: 50%; left: 20px;
  pointer-events: none;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font-family: 'Space Mono', monospace;
  font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(0,0,0,0.18);
}


/* =================================================================
   S2 — THE DROP
   ================================================================= */
.s2-section {
  position: relative;
  height: 100vh; width: 100%;
  display: flex; flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: #F5F3EE;
  padding: clamp(24px,5vw,80px);
}

/* Watermark */
.s2-watermark-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 0; overflow: hidden; pointer-events: none;
}
.s2-watermark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22vw; color: rgba(0,0,0,0.03);
  user-select: none; text-transform: uppercase;
}

/* Ghost circles */
.s2-circle-1 {
  position: absolute; top: 8%; left: 4%;
  width: 42vw; height: 42vw;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 50%; pointer-events: none; z-index: 0;
}
.s2-circle-2 {
  position: absolute; bottom: -12%; right: -6%;
  width: 32vw; height: 32vw;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 50%; pointer-events: none; z-index: 0;
}

/* Vertical label */
.s2-vert-label {
  position: absolute; left: 18px; top: 50%;
  pointer-events: none; z-index: 10;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font-family: 'Space Mono', monospace;
  font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(0,0,0,0.2);
}

/* Top row */
.s2-top-row {
  position: relative; z-index: 20;
  display: flex; justify-content: space-between;
  align-items: flex-start; width: 100%;
  margin-top: 48px;
}
.s2-section-label {
  display: flex; flex-direction: column; gap: 4px;
  animation: s2-slide-left 0.8s cubic-bezier(0.23,1,0.32,1) 0.2s both;
}
.s2-section-num {
  font-family: 'Space Mono', monospace;
  font-size: 11px; color: #CCCCCC; letter-spacing: 0.15em;
}
.s2-section-name {
  font-family: 'Space Mono', monospace;
  font-size: 10px; color: #AAAAAA;
  letter-spacing: 0.25em; text-transform: uppercase;
}
.s2-title-wrap {
  display: flex; flex-direction: column; align-items: flex-end;
  animation: s2-slide-right 0.8s cubic-bezier(0.23,1,0.32,1) 0.1s both;
}
.s2-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px,8vw,110px);
  line-height: 0.82; text-align: right;
  letter-spacing: -0.01em;
}
.s2-title-black { color: #0A0A0A; display: block; }
.s2-title-yellow { color: #FFE600; display: block; }

@keyframes s2-slide-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes s2-slide-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Board center */
.s2-board-center {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 10; pointer-events: none;
  perspective: 1000px;
}
@media (min-width: 768px) { .s2-board-center { pointer-events: auto; } }

.s2-board-wrap {
  animation: s2-board-entry 1s cubic-bezier(0.23,1,0.32,1) 0.3s both;
}
.s2-board-wrap.s2-loaded {
  animation: s2-board-float 5.5s ease-in-out infinite;
}
.s2-board-img {
  width: clamp(220px,45vh,480px); height: auto; object-fit: contain;
  filter: drop-shadow(0 35px 40px rgba(0,0,0,0.16));
  pointer-events: auto;
}

@keyframes s2-board-entry {
  from { opacity: 0; transform: translateY(50px) rotate(28deg); }
  to   { opacity: 1; transform: translateY(0) rotate(28deg); }
}
@keyframes s2-board-float {
  0%,100% { transform: translateY(0) rotate(28deg); }
  50%      { transform: translateY(-14px) rotate(30deg); }
}

/* Bottom row */
.s2-bottom-row {
  position: relative; z-index: 20;
  display: flex; flex-direction: column;
  justify-content: space-between; align-items: flex-end;
  width: 100%; gap: 32px; margin-bottom: 8px;
}
@media (min-width: 768px) { .s2-bottom-row { flex-direction: row; } }

/* Description */
.s2-desc {
  width: 100%;
  animation: s2-slide-left 0.8s cubic-bezier(0.23,1,0.32,1) 0.35s both;
}
@media (min-width: 768px) { .s2-desc { width: 33.333%; } }
.s2-desc-rule {
  width: 40px; height: 1px; background: #0A0A0A; margin-bottom: 12px;
}
.s2-desc-text {
  font-family: 'Space Mono', monospace;
  font-size: 11px; color: #999; line-height: 1.8;
}

/* CTA */
.s2-cta-wrap {
  width: 100%; display: flex; justify-content: center; padding-bottom: 8px;
}
.s2-cta-link {
  font-family: 'Space Mono', monospace;
  font-size: 12px; letter-spacing: 0.15em;
  text-transform: uppercase; color: #CC4A1A;
  text-decoration: none;
  border-bottom: 1px solid rgba(204,74,26,0.3);
  padding-bottom: 2px;
  transition: letter-spacing 0.3s, border-color 0.3s;
  display: inline-flex; align-items: center; gap: 6px;
}
.s2-cta-link:hover { letter-spacing: 0.22em; border-color: #CC4A1A; }
.s2-cta-arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.23,1,0.32,1);
}
.s2-cta-link:hover .s2-cta-arrow { transform: translateX(5px); }

/* Badges */
.s2-badges-wrap {
  width: 100%; display: flex; flex-wrap: wrap;
  justify-content: flex-end; gap: 10px;
  align-items: flex-end; position: relative;
  min-height: 130px;
}
@media (min-width: 768px) { .s2-badges-wrap { width: 33.333%; } }

.s2-size-labels {
  position: absolute; top: -32px; right: 160px;
  font-family: 'Space Mono', monospace;
  font-size: 9px; color: #CCCCCC; letter-spacing: 0.1em;
  display: flex; align-items: center; gap: 6px;
}
.s2-size-star { color: #FFE600; font-weight: 700; }

.s2-badge {
  box-shadow: 2px 4px 10px rgba(0,0,0,0.08);
  transition: transform 0.3s cubic-bezier(0.23,1,0.32,1), box-shadow 0.3s;
  animation: s2-pop-in 0.55s cubic-bezier(0.34,1.56,0.64,1) both;
}
.s2-badge:hover {
  transform: translateY(-4px) scale(1.06) !important;
  box-shadow: 3px 8px 20px rgba(0,0,0,0.12);
}
.s2-badge-est {
  position: absolute; left: -40px; bottom: 80px;
  transform: rotate(-12deg);
  background: white; border: 1px solid rgba(0,0,0,0.08);
  border-radius: 50%; width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  animation-delay: 0.75s;
}
.s2-badge-est-text {
  font-family: 'Space Mono', monospace;
  font-size: 8px; text-align: center; line-height: 1.3; color: #0A0A0A;
}
.s2-badge-product {
  background: white; border: 1px solid rgba(0,0,0,0.06);
  padding: 10px 16px;
}
.s2-badge-name {
  font-family: 'Space Mono', monospace;
  font-size: 9px; color: #AAAAAA; margin-bottom: 4px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.s2-badge-price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px; color: #CC4A1A;
}

@keyframes s2-pop-in {
  0%   { opacity: 0; transform: scale(0.6) rotate(var(--s2-rot, 0deg)); }
  70%  { transform: scale(1.08) rotate(var(--s2-rot, 0deg)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--s2-rot, 0deg)); }
}


/* =================================================================
   S3 — THE BOARDS
   ================================================================= */
.s3-section {
  position: relative; width: 100%; overflow: hidden;
  background: #F5F3EE;
  padding-top: clamp(80px,12vh,140px);
  padding-bottom: clamp(60px,10vh,120px);
}

/* Ghost circles */
.s3-circle-1 {
  position: absolute; top: -80px; right: -160px;
  width: 600px; height: 600px;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 50%; pointer-events: none; opacity: 0.4;
}
.s3-circle-2 {
  position: absolute; bottom: 160px; left: -80px;
  width: 400px; height: 400px;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 50%; pointer-events: none; opacity: 0.25;
}

/* Watermark — scoped to this section (was position:fixed) */
.s3-watermark-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.s3-watermark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(80px,28vw,380px);
  color: rgba(0,0,0,0.04);
  user-select: none; line-height: 1; white-space: nowrap;
  transition: transform 0.1s linear;
}

/* Vertical label */
.s3-vert-label {
  position: absolute; left: 18px; top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl; text-orientation: mixed;
  pointer-events: none;
  font-family: 'Space Mono', monospace;
  font-size: 9px; letter-spacing: 0.25em;
  text-transform: uppercase; color: rgba(0,0,0,0.18);
}

/* Section header */
.s3-header {
  position: relative; z-index: 10;
  padding: 0 clamp(24px,5vw,80px);
  margin-bottom: clamp(40px,6vh,80px);
  display: flex; align-items: baseline; justify-content: space-between;
}
.s3-section-num {
  font-family: 'Space Mono', monospace;
  font-size: 11px; letter-spacing: 0.2em; color: #CCCCCC;
  margin-bottom: 8px; display: block;
}
.s3-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px,8vw,100px);
  line-height: 1; color: #0A0A0A;
}
.s3-view-all {
  font-family: 'Space Mono', monospace;
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: #CC4A1A; text-decoration: none;
  border-bottom: 1px solid rgba(204,74,26,0.35);
  padding-bottom: 2px; transition: letter-spacing 0.3s;
}
.s3-view-all:hover { letter-spacing: 0.22em; }

/* Grid */
.s3-grid-wrap {
  position: relative; z-index: 10;
  padding: 0 clamp(24px,5vw,80px);
}
.s3-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px,8vh,100px) clamp(16px,2vw,32px);
  align-items: start;
}
@media (min-width: 768px) {
  .s3-grid { grid-template-columns: repeat(12, 1fr); }
}

/* Board item */
.s3-board-item {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.85s cubic-bezier(0.23,1,0.32,1),
              transform 0.85s cubic-bezier(0.23,1,0.32,1);
}
.s3-board-item.s3-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Grid placements */
.s3-board-1 { grid-column: 1 / -1; }
.s3-board-2 { grid-column: 1 / -1; margin-top: clamp(40px,10vh,130px); }
.s3-board-3 { grid-column: 1 / -1; }
.s3-board-4 { grid-column: 1 / -1; margin-top: clamp(-20px,-4vh,-60px); }

@media (min-width: 768px) {
  .s3-board-1 { grid-column: 1 / 6; }
  .s3-board-2 { grid-column: 8 / 12; }
  .s3-board-3 { grid-column: 2 / 6; }
  .s3-board-4 { grid-column: 7 / 12; }
}

/* Deck card */
.s3-deck {
  perspective: 1000px;
  transition: transform 0.55s cubic-bezier(0.23,1,0.32,1);
}
.s3-deck:hover { transform: scale(1.03) translateY(-12px); }

.s3-deck-img {
  width: 100%; height: auto; object-fit: contain;
  transition: transform 0.55s cubic-bezier(0.23,1,0.32,1);
  transform-style: preserve-3d;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.13));
}
.s3-deck:hover .s3-deck-img {
  transform: rotateY(14deg) rotateX(8deg);
}

/* Board info */
.s3-deck-info { margin-top: 20px; }
.s3-deck-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px,4vw,48px);
  color: #0A0A0A; line-height: 1;
}
.s3-deck-info-right { margin-top: 20px; text-align: right; }

/* Price sticker */
.s3-price-tag {
  display: inline-block;
  background: #FFE600; color: #0A0A0A;
  font-family: 'Space Mono', monospace;
  font-weight: 700; font-size: 13px;
  letter-spacing: 0.05em; padding: 4px 14px;
  transform: rotate(-2.5deg);
  box-shadow: 2px 2px 0 #0A0A0A;
  margin-top: 8px;
}


/* =================================================================
   S4 — THE NUMBERS
   ================================================================= */
.s4-section {
  position: relative;
  min-height: 100vh; width: 100%;
  background: #F5F3EE;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  padding: clamp(80px,12vh,140px) clamp(24px,5vw,80px);
}

/* Ghost circles */
.s4-circle-1 {
  position: absolute; top: -80px; right: -80px;
  width: 600px; height: 600px;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 50%; pointer-events: none;
}
.s4-circle-2 {
  position: absolute; bottom: 40px; left: 25%;
  width: 400px; height: 400px;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 50%; pointer-events: none;
}

/* Left vertical label */
.s4-vert-label {
  position: absolute; left: 18px; top: 50%;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  pointer-events: none;
  font-family: 'Space Mono', monospace;
  font-size: 9px; letter-spacing: 0.25em;
  text-transform: uppercase; color: rgba(0,0,0,0.18);
  white-space: nowrap;
}

/* Section number */
.s4-section-num {
  font-family: 'Space Mono', monospace;
  font-size: 11px; letter-spacing: 0.2em;
  color: #CCCCCC; margin-bottom: 48px;
}

/* Content row */
.s4-content-row {
  position: relative; z-index: 10; width: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(24px,4vw,64px);
}
@media (min-width: 768px) {
  .s4-content-row { flex-direction: row; }
}

/* Side label */
.s4-side-label-wrap {
  display: none; flex: none; padding-top: 8px;
}
@media (min-width: 768px) { .s4-side-label-wrap { display: flex; } }
.s4-side-label {
  font-family: 'Space Mono', monospace;
  font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(0,0,0,0.25);
  writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap;
  position: sticky; top: 120px;
}

/* Stats column */
.s4-stats-col {
  flex-grow: 1; width: 100%;
  display: flex; flex-direction: column;
  gap: clamp(40px,8vh,90px);
}

/* Stat block */
.s4-stat-block {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 0.85s cubic-bezier(0.22,1,0.36,1),
              transform 0.85s cubic-bezier(0.22,1,0.36,1);
  width: 100%;
}
.s4-stat-block.s4-visible {
  opacity: 1;
  transform: translateY(0);
}
.s4-stat-inner {
  display: flex; flex-direction: column;
  align-items: flex-start; width: 100%;
}

/* Stat number */
.s4-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(72px,18vw,240px);
  line-height: 0.88; color: #0A0A0A;
  letter-spacing: -0.02em;
  transition: letter-spacing 0.4s;
}
.s4-stat-block:hover .s4-stat-num {
  letter-spacing: -0.01em;
}

/* Yellow rule */
.s4-stat-rule {
  width: 100%; height: 2px;
  background: #FFE600; margin-top: 10px;
  transform-origin: left; transform: scaleX(0);
  transition: transform 0.7s cubic-bezier(0.23,1,0.32,1);
}
.s4-stat-block.s4-visible .s4-stat-rule {
  transform: scaleX(1);
}

/* Stat description row */
.s4-stat-desc-row {
  margin-top: 12px;
  display: flex; justify-content: space-between;
  align-items: baseline; width: 100%;
}
.s4-stat-desc {
  font-family: 'Space Mono', monospace;
  font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: #4b4731; opacity: 0.7;
}
.s4-stat-index {
  font-family: 'Space Mono', monospace;
  font-size: 9px; letter-spacing: 0.1em; color: #CCCCCC;
}

/* Skater silhouette */
.s4-silhouette {
  position: absolute; bottom: 64px; right: 32px;
  pointer-events: none; user-select: none;
  opacity: 0.03;
  transform: rotate(-12deg) scale(1.3);
}


/* =================================================================
   S5 — THE CULTURE
   ================================================================= */

/* Mouse-driven custom properties (namespaced, read only by s5-* elements) */
:root {
  --s5-mouse-x: 0;
  --s5-mouse-y: 0;
  --s5-parallax-x: 0px;
  --s5-parallax-y: 0px;
}

.s5-section {
  position: relative; width: 100%; height: 100vh;
  overflow: hidden; display: flex; align-items: center;
  background: #F5F3EE;
  padding-top: 64px;
}

/* Ghost circles with orbital animation */
.s5-circle-1 {
  position: absolute; top: -80px; left: -80px;
  width: 600px; height: 600px;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 50%; pointer-events: none;
  animation: s5-orbital 25s ease-in-out infinite;
}
.s5-circle-2 {
  position: absolute; bottom: 40px; right: 25%;
  width: 400px; height: 400px;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 50%; pointer-events: none;
  animation: s5-orbital 30s ease-in-out infinite;
  animation-delay: -5s;
}

@keyframes s5-orbital {
  0%   { transform: translate(0,0) rotate(0deg); }
  33%  { transform: translate(28px,-18px) rotate(120deg); }
  66%  { transform: translate(-18px,36px) rotate(240deg); }
  100% { transform: translate(0,0) rotate(360deg); }
}

/* Section number */
.s5-section-num {
  position: absolute; z-index: 20;
  top: clamp(80px,12vh,120px);
  left: clamp(24px,5vw,80px);
  font-family: 'Space Mono', monospace;
  font-size: 11px; letter-spacing: 0.2em; color: #CCCCCC;
}

/* Left vertical label */
.s5-vert-label {
  position: absolute; left: 18px; top: 50%;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  pointer-events: none; z-index: 20;
  font-family: 'Space Mono', monospace;
  font-size: 9px; letter-spacing: 0.25em;
  text-transform: uppercase; color: rgba(0,0,0,0.2);
}

/* Main grid */
.s5-grid {
  width: 100%; height: 100%;
  display: grid; grid-template-columns: 1fr;
  align-items: center; position: relative; z-index: 10;
  padding: 0 clamp(24px,5vw,80px);
  gap: clamp(16px,2vw,32px);
}
@media (min-width: 768px) {
  .s5-grid { grid-template-columns: 1fr 1fr; }
}

/* Left typography col */
.s5-left {
  display: flex; flex-direction: column; justify-content: center;
}

/* Headline group 1 */
.s5-headline-group-1 { margin-bottom: 16px; }

/* Slam-up reveal */
.s5-slam {
  opacity: 0;
  transform: translateY(56px) scale(0.92) rotateX(12deg);
  transition: transform 0.85s cubic-bezier(0.23,1,0.32,1),
              opacity 0.85s ease;
  perspective: 1000px;
}
.s5-slam.s5-active {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0deg);
}

/* Parallax layer */
.s5-parallax {
  transform: translate(
    calc(var(--s5-parallax-x) * var(--s5-depth, 1)),
    calc(var(--s5-parallax-y) * var(--s5-depth, 1))
  );
  transition: transform 0.2s cubic-bezier(0.23,1,0.32,1);
}

/* Headline text */
.s5-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px,10vw,140px);
  line-height: 0.85; color: #0A0A0A;
}
.s5-headline-yellow { color: #FFE600; }

/* Divider */
.s5-divider {
  width: 100%; height: 1px; background: #0A0A0A; margin-bottom: 16px;
}

/* Body text */
.s5-body-text {
  font-family: 'Space Mono', monospace;
  font-size: 12px; color: #999;
  text-transform: uppercase; letter-spacing: 0.1em;
  line-height: 1.8; margin-bottom: 16px;
  max-width: 380px;
}

/* CTA link */
.s5-cta-link {
  font-family: 'Space Mono', monospace;
  font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: #CC4A1A;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap 0.3s cubic-bezier(0.23,1,0.32,1);
}
.s5-cta-link:hover { gap: 12px; }

/* Right board col */
.s5-right {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  height: 100%;
  perspective: 2000px; transform-style: preserve-3d;
}

/* 3D board tilt */
.s5-board-3d {
  transform: rotateY(calc(var(--s5-mouse-x) * 18deg))
             rotateX(calc(var(--s5-mouse-y) * -18deg));
  transition: transform 0.2s cubic-bezier(0.23,1,0.32,1);
  filter: drop-shadow(
    calc(var(--s5-mouse-x) * -18px)
    calc(calc(var(--s5-mouse-y) * 18px) + 36px)
    36px rgba(0,0,0,0.14)
  );
}

/* Board slide-in entry */
.s5-board-entry {
  opacity: 0; transform: translateX(60px);
  transition: opacity 1s cubic-bezier(0.23,1,0.32,1),
              transform 1s cubic-bezier(0.23,1,0.32,1);
}
.s5-board-entry.s5-board-visible {
  opacity: 1; transform: translateX(0);
}

/* Board image */
.s5-board-img {
  height: clamp(300px, 75vh, 680px);
  width: auto; object-fit: contain;
}

/* Bottom ticker */
.s5-ticker-wrap {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 40; overflow: hidden;
  background: #F5F3EE;
  border-top: 1px solid #0A0A0A;
  padding: 14px 0;
}
.s5-ticker-track {
  display: flex; white-space: nowrap; align-items: center;
  animation: s5-ticker-scroll 22s linear infinite;
}
.s5-ticker-set {
  display: flex; align-items: center;
  gap: 32px; padding: 0 16px;
}
.s5-ticker-word {
  font-family: 'Space Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; color: #0A0A0A;
}

@keyframes s5-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* =================================================================
   S6 — FOOTER
   ================================================================= */

/* Top border */
.s6-top-border {
  width: 100%; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,0.08) 20%,
    rgba(0,0,0,0.08) 80%,
    transparent 100%
  );
}

/* Footer wrapper */
.s6-footer {
  position: relative;
  min-height: 100vh; width: 100%;
  display: flex; flex-direction: column;
  justify-content: space-between;
  overflow: hidden; background: #F5F3EE;
  padding: clamp(60px,10vh,120px) clamp(24px,5vw,80px) clamp(32px,5vh,56px);
}

/* Ghost circles */
.s6-circle-1 {
  position: absolute; top: -80px; left: -80px;
  width: 600px; height: 600px;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 50%; pointer-events: none;
}
.s6-circle-2 {
  position: absolute; bottom: 160px; right: 80px;
  width: 400px; height: 400px;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 50%; pointer-events: none;
}
.s6-circle-3 {
  position: absolute; top: 50%; left: 50%;
  width: 700px; height: 700px;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%);
}

/* Vertical label */
.s6-vert-label {
  position: absolute; left: 18px; top: 50%;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  pointer-events: none; z-index: 10;
  font-family: 'Space Mono', monospace;
  font-size: 9px; letter-spacing: 0.25em;
  text-transform: uppercase; color: rgba(0,0,0,0.18);
  white-space: nowrap;
}

/* CTA area */
.s6-cta-area {
  flex-grow: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(40px,8vh,100px) 0;
}

/* Reveal-up animation */
.s6-reveal {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.85s cubic-bezier(0.2,0.8,0.2,1),
              transform 0.85s cubic-bezier(0.2,0.8,0.2,1);
}
.s6-reveal.s6-visible {
  opacity: 1; transform: translateY(0);
}

/* Headline */
.s6-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(56px,13vw,180px);
  line-height: 1; color: #0A0A0A;
  user-select: none;
}

/* CTA button wrap */
.s6-btn-wrap {
  position: relative; display: inline-block;
  margin-top: clamp(32px,5vh,56px);
}
.s6-btn {
  position: relative;
  background: #CC4A1A; color: #fff;
  font-family: 'Space Mono', monospace;
  font-size: 13px; letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 16px 52px;
  border: none; cursor: none; overflow: visible;
  transition: transform 0.2s cubic-bezier(0.23,1,0.32,1), background 0.2s;
}
.s6-btn:hover  { transform: scale(1.05); background: #b03d10; }
.s6-btn:active { transform: scale(0.97); }
.s6-btn-shadow {
  position: absolute; inset: 0;
  background: #0A0A0A;
  transform: translate(3px, 3px);
  z-index: -1; opacity: 0.12;
  transition: transform 0.2s cubic-bezier(0.23,1,0.32,1);
}
.s6-btn-wrap:hover .s6-btn-shadow { transform: translate(5px, 5px); }

/* Bottom row */
.s6-bottom {
  width: 100%;
}
.s6-bottom-rule {
  width: 100%; height: 1px;
  background: rgba(0,0,0,0.08);
  margin-bottom: clamp(24px,4vh,40px);
}
.s6-bottom-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 24px; align-items: end;
}
@media (min-width: 768px) {
  .s6-bottom-grid { grid-template-columns: 1fr 1fr; }
}

/* Nav links */
.s6-nav-links {
  display: flex; flex-wrap: wrap; gap: 12px 32px;
}
.s6-nav-link {
  font-family: 'Space Mono', monospace;
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: #4b4731; text-decoration: none;
  position: relative; padding-bottom: 2px;
  transition: color 0.25s;
}
.s6-nav-link::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px; background: #CC4A1A;
  transition: width 0.3s cubic-bezier(0.23,1,0.32,1);
}
.s6-nav-link:hover { color: #CC4A1A; }
.s6-nav-link:hover::after { width: 100%; }

/* Copyright */
.s6-copyright { text-align: right; }
.s6-copyright-text {
  font-family: 'Space Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(0,0,0,0.4);
  margin-bottom: 8px;
}
.s6-legal-links {
  display: flex; justify-content: flex-end; gap: 20px;
}
.s6-legal-link {
  font-family: 'Space Mono', monospace;
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  color: #4b4731; text-decoration: none;
  position: relative; padding-bottom: 2px;
  transition: color 0.25s;
}
.s6-legal-link::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px; background: #CC4A1A;
  transition: width 0.3s cubic-bezier(0.23,1,0.32,1);
}
.s6-legal-link:hover { color: #CC4A1A; }
.s6-legal-link:hover::after { width: 100%; }

/* Spark particle */
.s6-spark {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99997;
}

/* Silhouette */
.s6-silhouette {
  position: absolute; bottom: 32px; right: 32px;
  pointer-events: none; user-select: none;
  opacity: 0.04; filter: grayscale(1);
}