/* =====================================================
   JAKIM 2027 — Design System
   Font: Inter (body) + Bebas Neue (display headings)
   ===================================================== */

/* ── Variables ─────────────────────────────────────── */
:root {
  --blue:      #125efa;
  --red:       #e8000e;
  --black:     #08090c;
  --white:     #ffffff;
  --light:     #eff3ff;
  --line:      #e2e5ed;
  --gray:      #5c6372;
  --header-h:  90px;
}

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html  { scroll-behavior: smooth; }
body  {
  margin: 0;
  color: var(--black);
  background: var(--white);
  font-family: 'Inter', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
a      { color: inherit; text-decoration: none; }
button { font: inherit; }
img    { max-width: 100%; display: block; }

/* Skip link */
.skip-link {
  position: absolute; left: 10px; top: -50px;
  background: #fff; color: #000; padding: 12px; z-index: 9999;
}
.skip-link:focus { top: 10px; }

/* =====================================================
   NAVBAR — Sticky, Clean, Modern
   ===================================================== */
.site-header {
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 4%;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1000;
  isolation: isolate;
  transition: box-shadow .3s;
}
.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  top: 0;
  height: calc(100% - 1px);
  pointer-events: none;
  z-index: 0;
  opacity: .82;
  background-image: url('images/jakarta-pattern.webp');
  background-repeat: no-repeat;
  background-size: cover;
  mix-blend-mode: multiply;
  filter: saturate(1.15) contrast(1.08);
}
.site-header::before {
  left: 0;
  width: clamp(200px, 14vw, 260px);
  background-position: center;
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 72%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 72%, transparent 100%);
  transform: translateX(-48px);
}
.site-header::after {
  right: 0;
  width: clamp(220px, 19vw, 330px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='330' height='90' viewBox='0 0 330 90'%3E%3Cg fill='none' stroke-linecap='square'%3E%3Cpath d='M42-18L118 22 82 62 154 104' stroke='%23125efa' stroke-width='3'/%3E%3Cpath d='M112-20L190 18 154 58 232 98' stroke='%23e8000e' stroke-width='2.5'/%3E%3Cpath d='M186-14L254 24 218 60 298 104' stroke='%23102149' stroke-width='2'/%3E%3Cpath d='M258-18L318 18 286 54 350 88' stroke='%23125efa' stroke-width='1.5'/%3E%3Cpath d='M76 0L26 40 70 82' stroke='%23e8000e' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
  background-position: right center;
  background-size: 100% 100%;
  clip-path: none;
  mix-blend-mode: normal;
  filter: none;
  opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 100%);
}
.site-header > * {
  position: relative;
  z-index: 1;
}
.site-header.scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, .08);
}

/* Brand — image logo */
.brand {
  display: flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  height: 100%;
  padding: 10px 0;
  justify-self: end;
  margin-right: 4vw;
}
.brand-logo {
  height: 100%;
  max-height: 64px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* ── Nav links ───────────────────────────────────── */
.main-nav {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-family: 'Inter', sans-serif;
}

@media (max-width: 1280px) {
  .site-header::before,
  .site-header::after { display: none; }
}

/* ── Language toggle — pill switch ───────────────── */
.lang-toggle {
  display: flex;
  align-items: center;
  justify-self: end;
  flex: none;
  background: #f3f5fa;
  border: 1px solid #e2e6ef;
  border-radius: 0;
  padding: 4px;
  gap: 3px;
  box-shadow: inset 0 1px 2px rgba(16, 33, 73, .06);
}
.lang-btn {
  border: none;
  background: transparent;
  color: var(--gray);
  min-width: 38px;
  min-height: 32px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 10px;
  border-radius: 0;
  cursor: pointer;
  transition: background .22s, color .22s, box-shadow .22s, transform .22s;
  font-family: 'Inter', sans-serif;
  line-height: 1;
}
.lang-btn.active {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 10px rgba(18, 94, 250, .25);
}
.lang-btn:not(.active):hover {
  background: #fff;
  color: var(--blue);
}
.lang-btn:active { transform: scale(.96); }

.main-nav > a:not(.nav-register),
.nav-group > button {
  border: 0;
  background: none;
  padding: 8px 16px;
  color: #1a1d28;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 0;
  transition: background .18s, color .18s;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
}
.main-nav > a:hover,
.nav-group > button:hover,
.nav-group.open > button {
  color: var(--blue);
  background: transparent;
}

/* ── Dropdown arrow (CSS only) ───────────────────── */
.nav-arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -2px);
  transition: transform .2s;
  flex: none;
}
.nav-group.open .nav-arrow {
  transform: rotate(-135deg) translate(-1px, -2px);
}

/* ── Dropdown panel ──────────────────────────────── */
.nav-group {
  position: relative;
  overflow: visible;
}
.nav-group:hover,
.nav-group:focus-within,
.nav-group.open {
  z-index: 20;
}
.nav-drop {
  position: absolute;
  top: 100%;           /* flush to button — no gap that loses hover */
  left: 0;
  min-width: 240px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 27, 83, .15), 0 0 0 1px rgba(0,0,0,.04);
  border-top: 3px solid var(--red);
  border-radius: 0;
  padding: 16px 0; /* top padding bridges visual gap */
  z-index: 1100;
  /* smooth transition instead of display:none */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}
.nav-group:hover .nav-drop,
.nav-group:focus-within .nav-drop,
.nav-group.open .nav-drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-drop a {
  display: block;
  padding: 14px 28px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #2a2d38;
  transition: background .15s, color .15s;
}
.nav-drop a:hover,
.nav-drop a:focus-visible {
  background: var(--blue);
  color: #fff;
}

/* Hamburger (mobile) */
.menu-toggle {
  display: none;
  width: 42px; height: 42px;
  border: 0;
  background: transparent;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
}
.menu-toggle span {
  width: 22px; height: 2px;
  background: var(--blue);
  border-radius: 0;
  transition: transform .25s, opacity .25s;
}

/* =====================================================
   HERO
   ===================================================== */
/* =====================================================
   HERO STAGE + HERO + HERO-MEDIA
   ===================================================== */
/* Outer wrapper: hero + gigi-balang share a positioned parent
   so the ondel (absolute children) can overlap both */
.hero-stage {
  position: relative;
  z-index: 0;
  isolation: isolate;
  --ondel-reveal: 0;
  margin: 0;
  padding: 0;
  /* overflow visible by default so ondel are fully shown */
}

.page-home > main {
  display: block;
  margin: 0;
  padding: 0;
}

.hero {
  background: #102149;
  height: calc(100svh - var(--header-h));
  min-height: 850px;
  max-height: 1300px;
  position: relative;
  color: #fff;
  /* NO overflow:hidden here — video clipped by .hero-media instead */
}

/* Clips the background video/overlay to hero bounds */
.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hero-video,
.hero-video-overlay {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
}
.hero-video {
  object-fit: cover;
  object-position: center 48%;
  z-index: 0;
  background: #102149 url('images/hero-poster.webp') center/cover no-repeat;
}
.hero-video-overlay {
  z-index: 1;
  background:
    linear-gradient(90deg, #061126cc 0%, #06112655 48%, #061126bb 100%),
    linear-gradient(0deg,   #07152ef0 0%, transparent 38%);
}

/* Decorative outline text */
.hero-outline {
  position: absolute;
  bottom: 60px; left: -10px;
  white-space: nowrap;
  font-size: clamp(130px, 20vw, 340px);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px #ffffff12;
  pointer-events: none;
  z-index: 1;
}

/* ── Hero Copy ───────────────────────────────────── */
.hero-copy {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: min(760px, 84%);
  text-align: center;
}

.eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  text-transform: uppercase;
}
.eyebrow-line { height: 2px; width: 24px; background: var(--red); flex: none; }

.hero-kicker {
  margin: 20px 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.hero h1 {
  font-family: 'Barlow Condensed', 'Bebas Neue', 'Inter', sans-serif;
  font-size: clamp(80px, 10vw, 160px);
  line-height: .88;
  letter-spacing: .04em;
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
}
.hero h1 em {
  font-style: normal;
  color: var(--red);
  -webkit-text-stroke: 1px #fff4;
  text-shadow: 4px 4px 0 #0849c5;
}
.hero-title-art {
  display: block;
  width: min(680px, 100%);
  height: auto;
  margin: -28px auto -34px;
  object-fit: contain;
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hero-intro {
  font-size: 14px;
  line-height: 1.7;
  max-width: 440px;
  margin: 14px auto 0;
  font-weight: 400;
  color: rgba(255,255,255,.75);
}

/* Mini Countdown */
.hero-countdown {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 60px auto 0;
  padding: 24px 40px 48px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
  background-color: rgba(16, 33, 73, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 0;
  clip-path: polygon(24px 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
  width: auto;
  position: relative;
  box-shadow: 0 24px 50px rgba(0,0,0,.3);
}
.hero-cd-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-bottom: 20px;
}
.hero-cd-units {
  display: flex;
}
.hero-cd-units > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100px;
  padding: 0 24px;
  border-right: 1px solid rgba(255,255,255,.15);
}
.hero-cd-units > div:last-child { border-right: 0; }
.hero-cd-units strong {
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  text-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.hero-cd-units span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-top: 10px;
}

/* Hero Actions — single centered CTA */
.hero-actions {
  display: flex;
  justify-content: center;
  margin-top: -26px;
  position: relative;
  z-index: 10;
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  min-height: 46px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 0;
  transition: transform .22s, background .22s, box-shadow .22s, border-color .22s;
  cursor: pointer;
  border: 0;
  font-family: inherit;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 22px #0003; }
.button-white { background: #fff; color: var(--black); }
.button-red   { background: var(--red); color: #fff; font-weight: 900; letter-spacing: .08em; box-shadow: 0 4px 14px rgba(226,0,15, .3); }
.button-red:hover { background: #c8000b; box-shadow: 0 8px 24px rgba(226,0,15, .6); }
.button-black { background: var(--black); color: #fff; }

/* Registration CTA: parallelogram shape without skewing its content. */
.registration-link {
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

/* Vertical label */
.hero-vertical {
  position: absolute;
  right: 2%; top: 22%;
  writing-mode: vertical-rl;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .28em;
  z-index: 4;
  color: rgba(255,255,255,.5);
}

/* ── Ondel-ondel — scroll reveal + float animation ── */
/* Ondel are children of .hero-stage (not .hero).
   Positioned from bottom of hero-stage = bottom of gigi-balang.
   z-index > gigi-balang so they overlap it cleanly. */
.ondel {
  position: absolute;
  z-index: 20;
  bottom: -80px;                          /* feet rest at gigi-balang bottom */
  width: min(26vw, 400px);
  /* Shorter so ondel appear more in lower portion of hero */
  height: calc(100svh - var(--header-h) - 140px);
  max-height: 800px;
  min-height: 360px;
  pointer-events: none;
  opacity: var(--ondel-reveal);
  /* Rich layered shadow: dark base + blue rim light */
  filter:
    drop-shadow(0 32px 40px rgba(3, 11, 33, .85))
    drop-shadow(-6px 0 20px rgba(18, 94, 250, .25))
    drop-shadow(0  0 60px rgba(3, 11, 33, .4));
}
.ondel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  animation: ondelFloat 5s ease-in-out infinite;
}
.ondel-pria   img { animation-delay: 0s; }
.ondel-wanita img { animation-delay: -2.5s; }

@keyframes ondelFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-14px) rotate(.8deg); }
}

.ondel-pria {
  left: 4%;
  opacity: var(--ondel-reveal);
  transform: translateX(calc((1 - var(--ondel-reveal)) * -250px));
  transition: opacity .3s ease-out, transform .3s ease-out;
}
.ondel-wanita {
  right: 4%;
  opacity: var(--ondel-reveal);
  transform: scaleX(-1) translateX(calc((1 - var(--ondel-reveal)) * -250px));
  transition: opacity .3s ease-out, transform .3s ease-out;
}

/* ── Gigi Balang Border ──────────────────────────── */
.gigi-balang {
  display: block;
  height: 80px;
  background: url('images/gigi-balang.png') left top / auto 80px repeat-x;
  position: relative;
  z-index: 10;
  pointer-events: none;
}

/* =====================================================
   TICKER
   ===================================================== */
.ticker-band {
  height: 62px;
  overflow: hidden;
  position: relative;
  z-index: 5;
  margin-top: -2px;
  background: var(--light);
}
.ticker {
  height: 62px;
  overflow: hidden;
  width: 100%;
  margin-left: 0;
  background: var(--red);
  color: #fff;
  display: flex;
  align-items: center;
  clip-path: polygon(0 18%, 100% 0, 100% 82%, 0 100%);
  position: relative;
  z-index: 1;
}
.ticker::before,
.ticker::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 72px;
  z-index: 3;
  pointer-events: none;
}
.ticker::before {
  left: 0;
  background: linear-gradient(90deg, var(--red) 38%, rgba(232,0,14,.88) 58%, transparent 100%);
}
.ticker::after {
  right: 0;
  background: linear-gradient(270deg, var(--red) 38%, rgba(232,0,14,.88) 58%, transparent 100%);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.ticker span {
  white-space: nowrap;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-right: 24px;
}
.ticker b { font-weight: 400; margin: 0 22px; }

/* =====================================================
   SHARED
   ===================================================== */
.section-wrap { width: min(1330px, 88%); margin: auto; }

.section-index {
  display: block;
  font-size: 10px;
  letter-spacing: .2em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 4px;
}
.section-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--blue);
  margin: 0 0 16px;
  text-transform: uppercase;
}

/* Big display headings */
.story h2,
.section-head h2,
.centuries-heading h2,
.benefits-heading h2,
.updates h2,
.info-links h2,
.footer-top h2,
.sponsor-heading h2 {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: clamp(54px, 6.8vw, 112px);
  line-height: .93;
  letter-spacing: .03em;
  margin: 8px 0 0;
  font-weight: 400;
}
.story h2 span,
.section-head h2 span,
.centuries-heading h2 span,
.benefits-heading h2 span,
.updates h2 span,
.info-links h2 span,
.sponsor-heading h2 span { color: var(--blue); }
.story h2 .period { color: var(--red); }

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* =====================================================
   STORY
   ===================================================== */
.story {
  display: grid;
  grid-template-columns: 26% 1fr;
  padding: 140px 0 80px;
  align-items: start;
  position: relative;
}
.story-aside {
  position: sticky;
  top: 96px;
  overflow: visible;
}
/* ── Betawi ornament ─────────────────────────────────── */
.betawi-ornament {
  margin-top: 24px;
  width: 130%;
  max-width: 360px;
  will-change: transform;
  pointer-events: none;
  user-select: none;
  transition: transform .1s linear;
}
.betawi-ornament img {
  width: 100%;
  opacity: .78;
  filter: drop-shadow(0 8px 24px rgba(200,0,14,.2));
  display: block;
}
.asterisk-parallax {
  margin-top: 80px;
  display: inline-block;
  position: sticky;
  top: 170px;
}
.asterisk {
  font-size: 190px;
  font-weight: 400;
  line-height: 1;
  color: var(--red);
  transform-origin: center;
  animation: spin 28s linear infinite;
  display: block;
}
.story-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 20px;
  gap: 20px;
  position: relative;
}

.story-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 600px; /* atur sesuai keinginan, misal 60px atau 20% */
  border-top: 1px solid var(--line);
}

.story-bottom p {
  max-width: 480px;
  line-height: 1.8;
  margin: 0;
  font-size: 15px;
  color: #2a2d38;
}
.waving-hand {
  position: absolute;
  right: 1%;
  top: 36%;
  width: clamp(150px, 18vw, 270px);
  transform-origin: bottom center;
  filter: drop-shadow(0 18px 26px rgba(16,33,73,.14));
}
.round-arrow {
  border: 1.5px solid #000;
  width: 66px; height: 66px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  flex: none;
  transition: background .25s, color .25s, transform .25s;
}
.round-arrow:hover { background: var(--blue); color: #fff; transform: rotate(45deg); }

/* =====================================================
   5 ABAD
   ===================================================== */
.five-centuries {
  position: relative;
  background: var(--light);
  padding: 0 0 60px;
  overflow: hidden;
}
.centuries-bg-pattern {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5,16,48,.90), rgba(5,16,48,.58) 48%, rgba(5,16,48,.76)),
    url('images/jakarta-transit-background.webp') center / cover no-repeat;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
.centuries-heading {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 26% 1fr;
  align-items: start;
  gap: 20px;
  color: #fff;
  background: transparent;
  padding: 56px 0 36px;
}
.centuries-heading h2 { font-size: clamp(64px, 8.5vw, 135px); }
.centuries-pemprov {
  position: absolute;
  top: 54px;
  right: 0;
  width: clamp(74px, 7vw, 108px);
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}

.era-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.era {
  color: var(--black);
  background: rgba(255,255,255,.94);
  border-top: 5px solid var(--blue);
  padding: 22px 18px 26px;
  min-height: 280px;
  box-shadow: 0 6px 24px rgba(6,61,189,.08);
  transition: transform .3s, background .3s;
}
.era:hover { transform: translateY(-10px); background: var(--blue); color: #fff; }
.era:nth-child(3) { border-color: var(--red); }
.era-no { font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.era-symbol { font-size: 56px; line-height: 1; color: var(--blue); margin: 24px 0 10px; }
.era:nth-child(3) .era-symbol { color: var(--red); }
.era:hover .era-symbol { color: #fff; }
.era h3 { font-size: 17px; margin: 0 0 8px; letter-spacing: -.02em; font-weight: 700; }
.era p  { font-size: 12.5px; line-height: 1.65; margin: 0; }

/* =====================================================
   JAKARTA 500 CELEBRATION WEEKEND
   ===================================================== */
.jakarta-weekend {
  --festival-yellow: #ffca31;
  --festival-lime: #70e231;
  --festival-cyan: #29afe7;
  --festival-magenta: #dd5aeb;
  --festival-coral: #ff675f;
  position: relative;
  min-height: 1040px;
  padding: 74px 0 56px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: #071542;
}
.festival-visual,
.festival-shade { position: absolute; inset: 0; }
.festival-visual { z-index: -3; }
.festival-visual img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: saturate(1.03) contrast(1.02);
}
.festival-shade {
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(4,12,41,.30) 0%, rgba(5,13,43,.06) 30%, rgba(5,13,43,.55) 68%, #071542 100%),
    linear-gradient(90deg, rgba(7,21,66,.30), transparent 35%, transparent 65%, rgba(7,21,66,.24));
}
.festival-orbit {
  position: absolute; z-index: -1; border: 1px solid rgba(255,255,255,.38);
  border-radius: 50%; pointer-events: none;
}
.festival-orbit-one { width: 460px; height: 460px; right: -180px; top: 30%; }
.festival-orbit-two { width: 160px; height: 160px; left: -80px; top: 55%; }
.festival-inner { position: relative; z-index: 1; }
.festival-heading {
  display: grid; grid-template-columns: minmax(150px, 240px) minmax(0, 720px);
  gap: clamp(28px, 7vw, 100px); align-items: start;
}
.festival-edition {
  display: flex; align-items: center; gap: 13px; padding-top: 5px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 900;
  line-height: 1.05; letter-spacing: .08em;
}
.festival-500 {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(72px, 8vw, 128px);
  line-height: .72; letter-spacing: -.05em; color: var(--festival-yellow);
  text-shadow: 5px 5px 0 var(--festival-coral);
}
.festival-kicker {
  margin: 0 0 11px; font-size: 11px; font-weight: 900;
  letter-spacing: .18em; text-transform: uppercase;
}
.festival-heading h2 {
  margin: 0; font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(74px, 9vw, 142px); line-height: .78; letter-spacing: -.025em;
}
.festival-heading h2 span { color: var(--festival-yellow); }
.festival-intro {
  max-width: 590px; margin: 28px 0 0; font-size: 15px; line-height: 1.75;
  text-shadow: 0 2px 14px rgba(0,0,0,.65);
}
.festival-program {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  max-width: 840px; margin: 390px 0 0 auto;
}
.artist-card {
  position: relative; min-height: 250px; padding: 23px 26px 27px; overflow: hidden;
  color: #09113a; box-shadow: 0 18px 50px rgba(0,0,0,.24);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}
.artist-card::before {
  content: ""; position: absolute; width: 140px; height: 140px; right: -46px;
  bottom: -50px; border-radius: 50%; border: 24px solid rgba(255,255,255,.27);
}
.artist-card-saturday { background: var(--festival-yellow); }
.artist-card-sunday { background: var(--festival-magenta); }
.artist-day {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 15px; border-bottom: 1px solid rgba(9,17,58,.34);
}
.artist-day span {
  font-size: 13px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
}
.artist-day small,
.artist-presented {
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.artist-presented { margin: 24px 0 5px; }
.artist-card h3 {
  margin: 0; font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(52px, 5vw, 78px); line-height: .76; letter-spacing: -.01em;
}
.artist-card h3 small { font-family: 'Inter', sans-serif; font-size: 15px; letter-spacing: 0; }
.artist-arrow {
  position: absolute; right: 22px; bottom: 20px; display: grid; place-items: center;
  width: 42px; height: 42px; border: 1px solid currentColor; border-radius: 50%; font-size: 20px;
}
.run-sessions {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  margin-top: 14px; background: rgba(255,255,255,.32); border: 1px solid rgba(255,255,255,.32);
}
.run-session {
  min-height: 160px; padding: 24px 28px; display: grid;
  grid-template-columns: 58px 1fr auto; gap: 20px; align-items: center;
  background: rgba(6,17,56,.88); backdrop-filter: blur(12px);
}
.run-session > span {
  position: relative; width: 52px; height: 52px; border-radius: 50%; display: block;
}
.run-session-sun {
  background: var(--festival-yellow);
  box-shadow: 0 0 0 8px rgba(255,202,49,.14), 0 0 34px rgba(255,202,49,.64);
}
.run-session-moon { background: var(--festival-cyan); }
.run-session-moon::after {
  content: ""; position: absolute; width: 46px; height: 46px; left: 17px; top: -8px;
  border-radius: 50%; background: #071542;
}
.run-session p {
  margin: 0 0 5px; color: var(--festival-yellow); font-size: 11px;
  font-weight: 900; letter-spacing: .15em; text-transform: uppercase;
}
.run-session-night p { color: var(--festival-cyan); }
.run-session h3 {
  margin: 0; font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 5vw, 74px); line-height: .8;
}
.run-session h3 span { color: var(--festival-coral); }
.run-session small {
  max-width: 130px; font-size: 10px; line-height: 1.5;
  text-transform: uppercase; letter-spacing: .06em;
}
.festival-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; margin-top: 24px;
}
.festival-foot p { margin: 0; font-size: 10px; letter-spacing: .14em; }
.festival-cta {
  display: inline-flex; align-items: center; gap: 24px; min-height: 52px;
  padding: 0 22px; color: #08113a; background: var(--festival-lime);
  font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  transition: transform .2s, background .2s;
}
.festival-cta:hover { transform: translateY(-3px); background: #fff; }
.festival-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* =====================================================
   RACE SECTION
   ===================================================== */
.race-section { padding: 70px 0 70px; }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 60px;
  gap: 30px;
}
.section-head > p {
  max-width: 260px;
  font-size: 15px;
  line-height: 1.75;
  color: #2a2d38;
}
.race-slider-shell {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}
.race-slider {
  display: flex;
  gap: 0;
  width: calc(100% + 76px);
  margin: 0 -38px;
  overflow: hidden;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  padding: 0;
}
.race-slider::-webkit-scrollbar { display: none; }
.race-slider.dragging { cursor: grabbing; }
.race-card {
  --race-color: var(--blue);
  --race-color-start: #125efa;
  --race-color-end: #102149;
  position: relative;
  flex: 0 0 clamp(270px, 29vw, 390px);
  min-height: 620px;
  padding: 30px 36px 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
  margin-right: -38px;
  clip-path: polygon(38px 0, 100% 0, calc(100% - 38px) 100%, 0 100%);
  transition: filter .25s ease;
  text-decoration: none;
}
.race-card::before,
.race-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
}
.race-card::before {
  background: url('images/hero-poster.webp') var(--race-position, center) / cover no-repeat;
  filter: grayscale(.75) contrast(1.08);
  transform: scale(1.03);
  transition: transform .45s ease;
}
.race-card::after {
  z-index: -1;
  background: linear-gradient(145deg, var(--race-color-start), var(--race-color-end));
  opacity: .82;
  mix-blend-mode: multiply;
}
.race-card:hover::before { transform: scale(1.09); }
.race-card-title {
  width: 100%;
  margin: auto 0;
  padding: 0 18px;
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(64px, 7vw, 104px);
  line-height: .86;
  letter-spacing: -.025em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 8px 28px rgba(0,0,0,.25);
}
.race-card-title small {
  font-size: .45em;
  vertical-align: middle;
}
.race-card-5k {
  --race-color: #e8000e;
  --race-color-start: #f01b2a;
  --race-color-end: #8f0010;
  --race-position: 25% center;
}
.race-card-10k {
  --race-color: #125efa;
  --race-color-start: #1268ff;
  --race-color-end: #063dbd;
  --race-position: 38% center;
}
.race-card-21k {
  --race-color: #102149;
  --race-color-start: #213e7d;
  --race-color-end: #07142f;
  --race-position: 72% center;
}
.race-card-42k {
  --race-color: #6b35df;
  --race-color-start: #e8000e;
  --race-color-end: #125efa;
  --race-position: 55% center;
}
.race-card-no {
  margin-left: 24px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  opacity: .8;
}
.race-card-distance {
  min-width: 142px;
  min-height: 132px;
  margin: 32px auto 0;
  padding: 5px 18px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--race-color);
  background: #fff;
  border: 7px solid var(--race-color);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 112px;
  line-height: .85;
  letter-spacing: -.04em;
  transform: skew(-5deg);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.race-card-distance small {
  margin: 28px 0 0 2px;
  font-size: 38px;
  letter-spacing: 0;
}
.race-card-copy {
  margin-top: auto;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.race-card-link {
  margin-top: 14px;
  padding: 10px 15px;
  border: 1px solid rgba(255,255,255,.85);
  background: rgba(0,0,0,.12);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.race-section-title:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.race-card:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -5px;
}
.race-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray);
  letter-spacing: .04em;
}

/* =====================================================
   SPONSOR SECTION — tiered layout matching reference
   ===================================================== */
.benefits-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 104px 0 92px;
  color: #fff;
  background: var(--black);
}
.benefits-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    radial-gradient(circle at 12% 22%, rgba(18,94,250,.42), transparent 31%),
    radial-gradient(circle at 88% 76%, rgba(232,0,14,.3), transparent 30%);
  background-size: 44px 44px, 44px 44px, auto, auto;
}
.benefits-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -20%;
  right: -8%;
  width: 38%;
  height: 140%;
  border: 2px solid rgba(255,255,255,.08);
  transform: skewX(-18deg) rotate(8deg);
}
.benefit-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.benefits-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 44px;
  margin-bottom: 62px;
}
.benefits-heading .section-index { color: rgba(255,255,255,.62); }
.benefits-heading .section-kicker { margin-top: 12px; color: #fff; }
.benefits-heading h2 { color: #fff; }
.benefits-heading h2 span { color: var(--red); }
.benefits-heading > p {
  max-width: 350px;
  margin: 0 0 8px;
  color: rgba(255,255,255,.7);
  font-size: 15px;
  line-height: 1.75;
}
.benefits-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 28px;
  max-width: 1180px;
  margin: 0 auto;
}
.benefit-item { flex: 0 1 172px; text-align: center; }
.benefit-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 138px;
  aspect-ratio: 1;
  margin: 0 auto 18px;
  border: 2px solid rgba(255,255,255,.65);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--blue) 8%, #1048c2 43%, var(--red) 100%);
  box-shadow: 0 20px 38px rgba(0,0,0,.34), 0 0 0 8px rgba(255,255,255,.045);
  transition: transform .32s ease, box-shadow .32s ease;
}
.benefit-item:nth-child(even) .benefit-icon { background: linear-gradient(145deg, var(--red), #bb1022 44%, var(--blue)); }
.benefit-icon::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: inherit;
}
.benefit-icon svg {
  width: 62%;
  height: 62%;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.benefit-item:hover .benefit-icon {
  transform: translateY(-8px) rotate(-2deg);
  box-shadow: 0 28px 48px rgba(0,0,0,.42), 0 0 0 10px rgba(255,255,255,.07);
}
.benefit-item h3 {
  margin: 0;
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.benefits-note {
  margin: 48px 0 0;
  color: rgba(255,255,255,.48);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}
@media (max-width: 900px) {
  .benefit-item { flex-basis: calc(25% - 24px); }
}
@media (max-width: 780px) {
  .benefits-section { padding: 72px 0 68px; }
  .benefits-heading { display: block; margin-bottom: 48px; }
  .benefits-heading > p { margin-top: 24px; }
  .benefits-grid { gap: 34px 16px; }
  .benefit-item { flex-basis: calc(33.333% - 16px); }
  .benefit-icon { width: 118px; }
}
@media (max-width: 540px) {
  .benefits-heading h2 { font-size: clamp(54px, 17vw, 78px); }
  .benefit-item { flex-basis: calc(50% - 12px); }
  .benefit-icon { width: min(116px, 32vw); }
  .benefit-item h3 { font-size: 18px; }
}

.sponsor-section {
  background: #fff;
  padding: 56px 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.sponsor-section::before,
.sponsor-section::after {
  content: "";
  position: absolute;
  top: 34px;
  bottom: 34px;
  width: min(260px, calc((100vw - min(1180px, 92vw)) / 2));
  z-index: 0;
  pointer-events: none;
  opacity: .34;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.sponsor-section::before {
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='1600' viewBox='0 0 260 1600'%3E%3Cg fill='none' stroke-linecap='square'%3E%3Cpath d='M-54 18L126 112 34 268 202 386 82 548 236 716 48 884 174 1054 18 1248 148 1430 72 1618' stroke='%23125efa' stroke-width='4'/%3E%3Cpath d='M30-40L224 76 112 238 278 366 146 526 256 650 96 824 224 988 74 1176 194 1322 116 1510' stroke='%23e8000e' stroke-width='2.5'/%3E%3Cpath d='M-80 214L58 326 2 482 166 604 24 770 144 916-18 1088 116 1260 32 1412 206 1560' stroke='%23102149' stroke-width='2'/%3E%3Cpath d='M156-20L250 118 176 302 286 474 126 678 246 846 152 1034 278 1196 136 1382 238 1544' stroke='%23125efa' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 64%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 64%, transparent 100%);
}
.sponsor-section::after {
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='1600' viewBox='0 0 260 1600'%3E%3Cg fill='none' stroke-linecap='square'%3E%3Cpath d='M314 36L138 156 232 318 54 462 188 638 18 792 214 974 72 1138 246 1308 118 1484 190 1620' stroke='%23e8000e' stroke-width='4'/%3E%3Cpath d='M244-42L64 92 174 254-8 398 126 566 12 734 176 878 42 1056 194 1214 52 1390 132 1542' stroke='%23125efa' stroke-width='2.5'/%3E%3Cpath d='M330 248L198 356 256 512 104 658 238 824 98 1002 274 1154 132 1328 226 1472 58 1608' stroke='%23102149' stroke-width='2'/%3E%3Cpath d='M92-18L8 142 86 286-22 486 134 666 22 842 124 1028-12 1198 146 1374 46 1548' stroke='%23e8000e' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 64%, transparent 100%);
  mask-image: linear-gradient(270deg, #000 0%, #000 64%, transparent 100%);
}
.sponsor-heading,
.sponsor-section .sp-section {
  position: relative;
  z-index: 1;
}
.sponsor-heading {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 28px;
}
.sponsor-heading .section-index { text-align: center; margin-bottom: 6px; }
.sponsor-heading p {
  font-size: 15px;
  color: var(--gray);
  line-height: 1.75;
  margin: 16px 0 0;
}

/* ── Tier 1: Presented By / Platinum / Organized By ── */
.sponsor-tier {
  width: min(1100px, 88%);
  margin: 0 auto 28px;
}
.sponsor-tier-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.sponsor-tier-row.tier-center {
  justify-content: center;
}
/* Divider between tier rows */
.sponsor-tier-divider {
  width: min(1100px, 88%);
  margin: 0 auto 28px;
  border: none;
  border-top: 1px solid var(--line);
}

/* Individual sponsor cell */
.spon-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 40px;
  text-align: center;
  min-width: 200px;
  flex: 1;
  max-width: 320px;
  border: none;
}
.spon-cell.spon-cell-sm {
  max-width: 200px;
  padding: 20px 24px;
}
.spon-cell.spon-cell-lg {
  max-width: 380px;
  padding: 20px 48px;
}

/* Role label above logo */
.spon-role {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #26304a;
  line-height: 1.5;
  text-align: center;
}

/* Logo images inside cells */
.spon-cell img {
  width: 100%;
  max-height: 110px;
  max-width: 240px;
  object-fit: contain;
  transition: transform .25s, filter .25s;
  transform: scale(1.12);
  transform-origin: center;
}
.spon-cell.spon-cell-lg img  { max-height: 145px; max-width: 310px; }
.spon-cell.spon-cell-sm img  { max-height: 78px; max-width: 170px; }
.spon-cell img:hover          { transform: scale(1.18); filter: brightness(1.05); }

/* Vertical divider between cells (not on last child) */
.spon-cell + .spon-cell {
  border-left: 0;
}

/* ── Tier 3: middle single sponsor (Official Mobile Banking) ── */
.sponsor-single-row {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

/* ── Tier 4 & 5 rows (3-col, 7-col) — no card border ── */
.sponsor-tier-row.tier-sm .spon-cell {
  min-width: 120px;
  max-width: 180px;
  padding: 16px 20px;
}
.sponsor-tier-row.tier-sm .spon-cell img {
  max-height: 72px;
}

/* Marquee container (kept for possible future use) */
.smarquee {
  overflow: hidden;
  margin-bottom: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image:         linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.smarquee-track {
  display: flex;
  width: max-content;
  gap: 24px;
  padding: 8px 0;
  animation: smarqueeScroll linear infinite;
}

/* =====================================================
   SPONSOR SECTION — sp-section layout
   ===================================================== */
.sp-section {
  width: min(1180px, 92%);
  margin: 0 auto;
}
.sp-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  gap: 0;
}
.sp-divider {
  border: none;
  border-top: 1px solid #edf0f5;
  margin: 0;
}
.sp-row-title {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #26304a;
  text-align: center;
  margin: 0 0 20px;
}
/* Shared grid helpers */
.b1-grid, .b3-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  width: 100%;
}
.b4-grid, .b6a-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
}
.b6b-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  width: 100%;
}
.b6b-grid img {
  height: 64px;
  width: auto;
  max-height: 64px !important;
  max-width: 150px;
  object-fit: contain;
  margin: 8px 16px;
  transform: scale(1.15);
  transform-origin: center;
}
.b2-wrap, .b5-hotels {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
/* Each column in b1/b3/b4/b6a grids */
.sp-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  text-align: center;
  border: 0;
}
.sp-col:last-child { border-right: 0; }
.sp-col-title {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #26304a;
  line-height: 1.4;
  margin: 0;
  min-height: 34px;
}
/* Logo wrapper inside each col */
.sp-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 84px;
}
.sp-logo-wrap img {
  max-height: 82px !important;
  max-width: 180px;
  width: auto;
  object-fit: contain;
  transform: scale(1.15);
  transform-origin: center;
  transition: transform .22s ease;
}
.sp-logo-wrap img:hover { transform: scale(1.2); }
/* Multi-image in one cell */
.sp-col-multi .sp-logo-wrap img {
  max-height: 54px !important;
  max-width: 105px;
}
/* b5 hotel pairs */
.b5-hotels .sp-logo-wrap img {
  max-height: 92px !important;
  max-width: 240px;
}
/* b2 single big logo */
.b2-wrap .sp-logo-wrap img {
  max-height: 125px !important;
  max-width: 330px;
}
/* b7 supporting partners — pill style */
.b7-flex, .b8-flex, .hotel-flex {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
.b7-pill, .b8-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 94px;
  padding: 12px;
  border: 0;
}
.b7-pill:last-child, .b8-pill:last-child { }
.b7-pill img, .b8-pill img {
  max-height: 62px !important;
  max-width: 145px;
  width: auto;
  object-fit: contain;
  transform: scale(1.15);
  transform-origin: center;
}
/* b8 BUMD — wider pills */
.b8-pill {
  padding: 14px;
}
.b8-pill img {
  max-height: 72px !important;
  max-width: 175px;
}
/* hotel pills */
.hotel-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 94px;
  padding: 12px;
  border: 0;
}
.hotel-pill img {
  max-height: 72px !important;
  max-width: 155px;
  width: auto;
  object-fit: contain;
  transform: scale(1.15);
  transform-origin: center;
}

/* ── Mobile overrides for sp-section ── */
@media (max-width: 780px) {
  .sponsor-section { padding: 40px 0; }
  .sponsor-section::before,
  .sponsor-section::after { display: none; }
  .sponsor-heading { margin-bottom: 22px; }
  .sponsor-heading p { font-size: 14px; line-height: 1.6; }
  .sp-section { width: calc(100% - 32px); }
  .b1-grid { grid-template-columns: 1fr 1.35fr 1fr; }
  .b3-grid { grid-template-columns: repeat(3, 1fr); }
  .b4-grid, .b6a-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .b7-flex, .hotel-flex { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .b8-flex { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sp-col { padding: 10px 7px; border: 0; }
  .sp-col-title { font-size: 8.5px; letter-spacing: .06em; min-height: 34px; }
  .sp-row-title { font-size: 10px; }
  .sp-logo-wrap { min-height: 64px; }
  .sp-logo-wrap img { max-height: 64px !important; max-width: 132px; }
  .b2-wrap .sp-logo-wrap img { max-height: 86px !important; max-width: 190px; }
  .b5-hotels { gap: 20px; }
  .b7-pill, .hotel-pill { min-height: 78px; padding: 8px; }
  .b7-pill img, .hotel-pill img { max-height: 48px !important; max-width: 112px; }
  .b8-pill { min-height: 78px; padding: 10px; }
  .b8-pill img { max-height: 54px !important; max-width: 125px; }
  .sp-logo-wrap img,
  .b6b-grid img,
  .b7-pill img,
  .b8-pill img,
  .hotel-pill img { transform: scale(1.06); }
  .sp-row { padding: 24px 8px; }
  .sp-divider { margin: 0; }
}
@media (max-width: 540px) {
  .b1-grid, .b3-grid { grid-template-columns: 1fr; gap: 0; }
  .b1-grid .sp-col, .b3-grid .sp-col { border: 0; padding: 14px 8px; }
  .b4-grid, .b6a-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b7-flex, .hotel-flex { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-logo-wrap img { max-height: 58px !important; max-width: 140px; margin-top: 0 !important; }
  .sp-col-title { font-size: 8px; min-height: auto; }
  .b5-hotels { flex-direction: column; gap: 8px; }
  .b6b-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .b6b-grid img { max-width: 100%; height: 40px; margin: 8px; }
}
@keyframes smarqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.smarquee-card {
  width: 200px;
  height: 90px;
  background: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  flex: none;
  transition: transform .25s;
}
.smarquee-card:hover { transform: translateY(-4px) scale(1.05); }
.smarquee-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sponsor-cta {
  text-align: center;
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
}
.sponsor-join-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 2px solid var(--blue);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue);
  transition: background .22s, color .22s, transform .22s;
}
.sponsor-join-btn:hover {
  background: var(--blue);
  color: #fff;
  transform: translateY(-3px);
}

/* =====================================================
   REGISTRATION
   ===================================================== */
.registration {
  position: relative;
  overflow: hidden;
  background: var(--blue);
  color: #fff;
}
.registration-pattern {
  position: absolute;
  right: -7%; top: -18%;
  width: 58%; height: 130%;
  background: url('images/jakarta-pattern.webp') center / cover;
  filter: brightness(0) invert(1);
  opacity: .09;
  transform: rotate(-14deg);
}
.registration-inner {
  display: grid;
  grid-template-columns: 26% 1fr;
  padding: 70px 0 80px;
  position: relative;
  z-index: 2;
  gap: 40px;
}
.registration .section-kicker { color: rgba(255,255,255,.65); }
.registration h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(72px, 10vw, 162px);
  line-height: .88;
  letter-spacing: .03em;
  margin: 0;
  font-weight: 400;
}
.registration h2 i {
  font-style: normal;
  color: var(--red);
  -webkit-text-stroke: 1px rgba(255,255,255,.4);
}
.registration-date { font-size: 16px; margin: 26px 0; line-height: 1.5; }
.countdown { display: flex; gap: 20px; margin: 24px 0 30px; }
.countdown div {
  min-width: 90px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255,255,255,.5);
  padding-top: 8px;
}
.countdown strong { font-size: 44px; letter-spacing: -.07em; font-weight: 800; }
.countdown span   { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.registration-note { font-size: 12px; opacity: .7; line-height: 1.7; max-width: 360px; margin-top: 14px; }

/* =====================================================
   UPDATES
   ===================================================== */
.updates { padding: 70px 0; }
.updates h2 { margin: 26px 0 44px; }
.updates-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.update-card {
  min-height: 390px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  transition: transform .28s;
}
.update-card:hover { transform: translateY(-6px); }
.update-card.red  { background: var(--red); }
.update-card.blue { background: var(--blue); }
.update-card::after {
  content: '✳';
  font-size: 320px;
  position: absolute;
  right: -80px; bottom: -150px;
  opacity: .09;
  line-height: 1;
  pointer-events: none;
}
.update-card > span { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.update-card > div  { display: flex; justify-content: space-between; align-items: flex-end; }
.update-card h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 4vw, 60px);
  letter-spacing: .03em;
  line-height: 1.02;
  margin: 0;
  font-weight: 400;
}
.card-arrow { font-size: 52px; }
.update-card p { font-size: 14px; margin: 0; max-width: 290px; line-height: 1.65; }

/* =====================================================
   INFO LINKS
   ===================================================== */
.info-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  padding: 50px 0 120px;
  border-top: 1px solid var(--line);
}
.info-links h2 { font-size: clamp(48px, 5vw, 78px); }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.info-grid > div { display: flex; flex-direction: column; gap: 12px; }
.info-grid h3 { font-size: 17px; color: var(--blue); margin: 0 0 6px; font-weight: 700; }
.info-grid a { font-size: 14px; font-weight: 600; }
.info-grid a:hover { color: var(--red); }
.info-coming {
  grid-column: 2;
  font-size: 12px;
  color: var(--gray);
  margin: 0;
  line-height: 1.75;
}

/* =====================================================
   FOOTER
   ===================================================== */
footer {
  background: var(--black);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.footer-decoration {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 118px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='118' viewBox='0 0 1440 118'%3E%3Crect width='1440' height='118' fill='%23fff'/%3E%3Cg fill='%2308090c'%3E%3Cpath d='M0 89H34V62H58V78H82V48H108V70H132V35H158V74H184V55H214V82H242V68H268V96H0z'/%3E%3Cpath d='M252 104V80H270Q278 48 324 39Q370 48 378 80H396V104z'/%3E%3Crect x='401' y='38' width='13' height='66'/%3E%3Cpath d='M397 38Q407 21 417 38zM284 80Q324 45 364 80z'/%3E%3Cpath d='M432 104V76H456V54H482V82H506V43H532V69H554V88H580V104z'/%3E%3Cpath d='M628 106H674V99H685L704 38H712L731 99H742V106H788V118H628z'/%3E%3Cpath d='M804 106V84H832V62H858V78H882V48H908V72H934V91H960V106z'/%3E%3Cpath d='M976 106V82H996V68H1018V90H1040V58H1066V74H1090V98H1114V106z'/%3E%3Cpath d='M1130 109H1308V118H1130zM1162 109L1194 58H1200L1232 109H1224L1197 67L1170 109z'/%3E%3Cpath d='M1320 108V78H1342V54H1368V72H1392V43H1418V108zM0 105H1440V118H0z'/%3E%3C/g%3E%3Cg fill='none' stroke='%2308090c'%3E%3Ccircle cx='1197' cy='58' r='38' stroke-width='5'/%3E%3Cpath d='M1197 20V96M1159 58H1235M1170 31L1224 85M1224 31L1170 85' stroke-width='3'/%3E%3Cpath d='M1010 41L1128 25M1034 38V76M1106 28V72' stroke-width='3'/%3E%3C/g%3E%3Cg fill='%23125efa'%3E%3Cpath d='M951 103Q984 88 1017 103Q1050 88 1083 103Q1116 88 1149 103V110H951z'/%3E%3Crect x='1030' y='39' width='22' height='13'/%3E%3Crect x='1094' y='29' width='22' height='13'/%3E%3C/g%3E%3Cpath d='M704 37Q693 28 704 18Q716 28 711 37z' fill='%23e8000e'/%3E%3Ccircle cx='1197' cy='58' r='5' fill='%23e8000e'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 118px;
  opacity: 1;
}
.footer-inner { padding: 160px 0 38px; }
.footer-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.2);
  padding-bottom: 80px;
}
.footer-top h2 {
  font-size: clamp(68px, 9.5vw, 154px);
  line-height: .9;
  letter-spacing: .03em;
  margin: 28px 0 0;
}
.footer-top h2 span { color: var(--blue); }
/* footer-top-link works as both <a> and <button> */
.footer-top-link {
  width: 84px; height: 84px;
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 42px;
  flex: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .25s, border-color .25s;
}
.footer-top-link:hover { background: var(--red); border-color: var(--red); }
.footer-panels {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 16px;
  padding: 42px 0;
}
.footer-panel {
  min-width: 0;
  min-height: 250px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(145deg, rgba(18,94,250,.18), rgba(255,255,255,.025));
}
.footer-panel-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.footer-panel-heading h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.footer-panel-icon,
.footer-panel-symbol {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
}
.footer-panel-icon svg { width: 21px; height: 21px; fill: currentColor; }
.footer-panel-symbol { color: var(--red); font-size: 25px; font-weight: 900; }
.footer-panel p {
  margin: 0 0 20px;
  color: #c8cbd4;
  font-size: 13px;
  line-height: 1.7;
}
.footer-subscribe-form {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  min-height: 48px;
  background: #fff;
  color: var(--black);
}
.footer-subscribe-form > span { display: grid; place-items: center; color: var(--gray); }
.footer-subscribe-form input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0 8px;
  color: var(--black);
  font: inherit;
  font-size: 13px;
}
.footer-subscribe-form button {
  border: 0;
  padding: 0 20px;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.footer-subscribe-form button:hover { background: var(--red); }
.footer-contact-list,
.footer-social-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-contact-list a,
.footer-social-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: #e3e5eb;
  font-size: 13px;
  font-weight: 600;
}
.footer-contact-list a:hover,
.footer-social-list a:hover { color: #fff; }
.footer-list-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
}
.footer-social-list small {
  padding: 2px 6px;
  background: var(--red);
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}
.footer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.2);
}
.footer-brand {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .02em;
}
.footer-brand b { color: var(--blue); }
.copyright { color: #9b9da6; line-height: 1.85; font-size: 12px; }

/* =====================================================
   GPX ROUTE PREVIEW & EVENT HISTORY
   ===================================================== */
.route-preview { padding: 96px 0; }
.route-preview-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  align-items: end;
  gap: 40px;
  margin-bottom: 38px;
}
.route-preview-heading h2,
.history-heading h2 {
  margin: 8px 0 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(68px, 8vw, 126px);
  line-height: .8;
  letter-spacing: -.02em;
}
.route-preview-heading h2 span,
.history-heading h2 span { color: var(--red); }
.route-preview-heading > p {
  margin: 0;
  color: var(--gray);
  font-size: 14px;
  line-height: 1.75;
}
.route-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  min-height: 570px;
  background: #07142f;
}
.route-preview-grid .race-route-map { min-height: 570px; }
.route-preview-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(30px, 5vw, 70px);
  color: #fff;
}
.route-preview-copy > span {
  color: #69a0ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
}
.route-preview-copy h3 {
  margin: 15px 0 20px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 5vw, 78px);
  line-height: .9;
}
.route-preview-copy p { margin: 0 0 28px; font-size: 13px; line-height: 1.8; color: #c5cde1; }
.route-preview-copy .btn-outline-red { color: #fff; }

.event-history { padding: 92px 0 110px; color: #fff; background: #07142f; }
.history-heading {
  display: grid;
  grid-template-columns: 26% 1fr;
  align-items: start;
  margin-bottom: 40px;
}
.history-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.history-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 430px;
  padding: 28px;
  overflow: hidden;
  isolation: isolate;
  background: center / cover no-repeat;
}
.history-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(3,11,33,.05), rgba(3,11,33,.92));
  transition: background .3s;
}
.history-card:hover::before { background: linear-gradient(180deg, rgba(18,94,250,.08), rgba(3,11,33,.82)); }
.history-2024 { background-image: url('images/hero-poster.webp'); }
.history-2025 { background-image: url('images/jakarta-500-run-music-key-visual.webp'); }
.history-2026 { background-image: url('images/jakarta-transit-background.webp'); }
.history-year {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(72px, 8vw, 118px);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.88);
}
.history-card small { color: #8eb4ff; font-weight: 900; letter-spacing: .14em; }
.history-card h3 { max-width: 290px; margin: 10px 0 0; font-size: 21px; line-height: 1.35; }
.race-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  background: linear-gradient(145deg, var(--blue), #07142f);
}
.race-placeholder strong { font-family: 'Bebas Neue', sans-serif; font-size: 110px; line-height: .8; }
.race-placeholder span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

/* =====================================================
   KEYFRAMES
   ===================================================== */
@keyframes marquee  { to { transform: translateX(-50%); } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes ondelFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-14px) rotate(.8deg); }
}
@keyframes waveHand {
  0%, 100% { transform: rotate(15deg); }
  50% { transform: rotate(-15deg); }
}
.waving-hand {
  animation: waveHand 2.5s ease-in-out infinite;
}

/* =====================================================
   RESPONSIVE — 1100px
   ===================================================== */
@media (max-width: 1100px) {
  .main-nav { gap: 0; font-size: 12px; letter-spacing: .04em; }
  .main-nav > a:not(.nav-register), .nav-group > button { padding: 8px 10px; font-size: 12px; }
  .era-grid { grid-template-columns: repeat(3, 1fr); }
  .festival-program { margin-top: 330px; }
}

/* =====================================================
   RESPONSIVE — 780px
   ===================================================== */
@media (max-width: 780px) {
  :root { --header-h: 76px; }

  .site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
  }
  .site-header::after { display: none; }
  .brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }
  .brand-logo { max-height: 44px; }

  /* Hamburger */
  .menu-toggle { 
    display: flex; 
    order: -1;
    z-index: 10;
  }
  .lang-toggle {
    z-index: 10;
  }
  .main-nav {
    display: none;
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    height: auto;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 16px 40px rgba(0,0,0,.12);
    padding: 12px 5% 28px;
    align-items: stretch;
    gap: 0;
    flex-direction: column;
    z-index: 199;
  }
  .main-nav.open { display: flex; }
  .main-nav > a:not(.nav-register),
  .nav-group > button {
    padding: 14px 0;
    display: flex;
    font-size: 16px;
    width: 100%;
    text-align: left;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
  }
  .nav-drop {
    position: static;
    box-shadow: none;
    border-left: 3px solid var(--red);
    border-top: 0;
    padding: 4px 0 4px 14px;
    display: none;
    border-radius: 0;
  }
  .nav-group:hover .nav-drop { display: none; }
  .nav-group.open .nav-drop { display: grid; }
  .nav-drop a { font-size: 13px; border-radius: 0; }

  /* Hero */
  .hero { height: calc(100svh - var(--header-h)); min-height: 640px; }
  .hero-copy { width: 90%; }
  .hero h1 { font-size: clamp(68px, 13vw, 110px); }
  .hero-kicker { margin-top: 14px; }
  .hero-intro { font-size: 13px; }

  /* Sponsor tiered */
  .spon-cell { min-width: 0; width: 33.333%; padding: 14px 6px; gap: 8px; border: 0 !important; }
  .spon-cell.spon-cell-lg { width: 66.666%; padding: 12px 8px; }
  .sponsor-tier-row { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0 2%; }
  .spon-role { font-size: 7px; }
  .spon-cell img { max-height: 92px; max-width: 190px; }
  .spon-cell.spon-cell-lg img { max-height: 118px; max-width: 250px; }
  .spon-cell.spon-cell-sm img,
  .sponsor-tier-row.tier-sm .spon-cell img { max-height: 70px; max-width: 150px; }

  .ondel {
    width: 38%;
    height: calc(100svh - var(--header-h) - 30px);
    min-height: 320px;
    bottom: -50px;
  }
  .ondel-pria   { left: -5%; }
  .ondel-wanita { right: -5%; }

  .gigi-balang { height: 52px; background-size: auto 52px; }

  /* Ticker */
  .ticker-band,
  .ticker { height: 52px; }
  .ticker::before,
  .ticker::after { width: 44px; }
  .ticker span { font-size: 17px; }

  /* Story */
  .story { grid-template-columns: 1fr; padding: 80px 0 50px; }
  .story-aside { display: flex; justify-content: space-between; align-items: center; }
  .asterisk-parallax { margin: 0; }
  .asterisk { font-size: 46px; }
  .story-main { margin-top: 38px; padding-bottom: 120px; }
  .waving-hand { width: clamp(110px, 28vw, 170px); top: auto; bottom: 0; }
  .story-bottom { align-items: center; gap: 14px; }
  .story-bottom p { font-size: 14px; }
  .round-arrow { flex: none; width: 54px; height: 54px; }

  /* 5 Abad */
  .centuries-heading { display: block; padding: 40px 0 24px; }
  .centuries-title-wrap { margin-top: 28px; }
  .centuries-heading h2 { font-size: clamp(62px, 12vw, 96px); }
  .centuries-pemprov { top: 36px; width: 76px; }
  .era-grid { grid-template-columns: repeat(2, 1fr); }

  .route-preview { padding: 64px 0; }
  .route-preview-heading { grid-template-columns: 1fr; gap: 20px; }
  .route-preview-grid { grid-template-columns: 1fr; }
  .route-preview-copy { min-height: 300px; }
  .history-heading { grid-template-columns: 1fr; gap: 22px; }
  .history-grid { grid-template-columns: 1fr; }
  .history-card { min-height: 320px; }

  /* Jakarta 500 weekend */
  .jakarta-weekend { min-height: 0; padding: 52px 0 44px; }
  .festival-visual img { object-position: 47% center; }
  .festival-shade {
    background: linear-gradient(180deg, rgba(5,13,43,.42) 0%, rgba(5,13,43,.12) 27%, rgba(5,13,43,.82) 56%, #071542 76%);
  }
  .festival-heading { grid-template-columns: 135px 1fr; gap: 24px; }
  .festival-heading h2 { font-size: clamp(66px, 12vw, 100px); }
  .festival-intro { max-width: 520px; }
  .festival-program { margin-top: 310px; }
  .run-session { grid-template-columns: 48px 1fr; }
  .run-session small { grid-column: 2; max-width: none; }

  /* Sponsor marquee — smaller cards on mobile */
  .smarquee-card { width: 180px; height: 82px; padding: 14px 20px; }

  /* Race */
  .race-section { padding: 50px 0; }
  .section-head { display: block; margin-bottom: 36px; }
  .section-head > p { margin: 18px 0; }
  .race-card { flex-basis: min(68vw, 340px); min-height: 560px; }

  /* Registration */
  .registration-inner { display: block; padding: 55px 0; }
  .registration-inner > div { margin-top: 36px; }
  .registration h2 { font-size: clamp(68px, 13vw, 112px); }

  /* Updates */
  .updates { padding: 50px 0; }
  .update-card { min-height: 320px; }

  /* Info links */
  .info-links { display: block; padding-bottom: 85px; }
  .info-grid { margin-top: 44px; }
  .info-coming { margin-top: 24px; }

  /* Footer */
  .footer-decoration { height: 76px; background-size: auto 76px; }
  .footer-inner { padding: 112px 0 30px; }
  .footer-panels { grid-template-columns: 1fr; }
  .footer-panel { min-height: 0; }
}

/* =====================================================
   RESPONSIVE — 540px
   ===================================================== */
@media (max-width: 540px) {
  .hero { min-height: 580px; }
  .hero h1 { font-size: clamp(50px, 13vw, 68px); }
  .hero-title-art { width: 108%; max-width: none; margin: -18px -4% -24px; }
  .hero-intro { font-size: 13px; max-width: 300px; }
  .hero-countdown { padding: 16px 0 36px; border-radius: 0; width: calc(100vw - 40px); max-width: 400px; box-sizing: border-box; margin-left: auto; margin-right: auto; }
  .hero-cd-units { width: 100%; justify-content: space-between; }
  .hero-cd-units > div { min-width: 0; padding: 0 6px; flex: 1; border-right: 1px solid rgba(255,255,255,.15); }
  .hero-cd-units > div:last-child { border-right: none; }
  .hero-cd-units strong { font-size: clamp(22px, 6vw, 32px); }
  .hero-cd-units span { font-size: 8px; letter-spacing: 0; margin-top: 4px; }

  .ondel { width: 42%; height: 48%; bottom: -46px; }
  .ondel-pria   { left: -8%; }
  .ondel-wanita { right: -8%; }

  .gigi-balang { height: 42px; background-size: auto 42px; }
  .era-grid { gap: 8px; }
  .era { padding: 14px; min-height: 250px; }
  .era-symbol { font-size: 42px; margin: 20px 0 8px; }

  .jakarta-weekend { padding-top: 36px; }
  .festival-visual { height: 580px; }
  .festival-visual img { object-position: 53% top; }
  .festival-shade {
    background: linear-gradient(180deg, rgba(5,13,43,.28) 0%, rgba(5,13,43,.06) 30%, #071542 50%);
  }
  .festival-heading { display: block; }
  .festival-edition { margin-bottom: 30px; }
  .festival-500 { font-size: 76px; }
  .festival-kicker { max-width: 250px; }
  .festival-heading h2 { font-size: clamp(62px, 20vw, 92px); }
  .festival-intro { margin-top: 20px; font-size: 13px; }
  .festival-program { grid-template-columns: 1fr; margin-top: 245px; }
  .artist-card { min-height: 214px; padding: 20px 22px 23px; }
  .artist-card h3 { font-size: 58px; }
  .run-sessions { grid-template-columns: 1fr; }
  .run-session { min-height: 135px; padding: 20px; grid-template-columns: 46px 1fr; gap: 16px; }
  .run-session > span { width: 42px; height: 42px; }
  .run-session-moon::after { width: 38px; height: 38px; left: 14px; top: -7px; }
  .run-session h3 { font-size: 54px; }
  .festival-foot { align-items: stretch; flex-direction: column; }
  .festival-cta { justify-content: space-between; }

  .race-slider { width: calc(100% + 60px); margin-inline: -30px; }
  .race-card { flex-basis: 82vw; min-height: 500px; margin-right: -30px; padding: 24px 30px 28px; clip-path: polygon(30px 0, 100% 0, calc(100% - 30px) 100%, 0 100%); }
  .race-card-distance { min-width: 122px; min-height: 114px; font-size: 92px; }
  .race-card-distance small { margin-top: 24px; font-size: 32px; }
  .race-card-copy { font-size: 26px; }

  .registration h2 { font-size: clamp(58px, 13vw, 84px); }
  .countdown { gap: 10px; }
  .countdown div { min-width: 0; flex: 1; }
  .countdown strong { font-size: 30px; }

  .updates-grid { grid-template-columns: 1fr; }
  .update-card { min-height: 280px; }

  .footer-top h2 { font-size: clamp(44px, 10vw, 66px); }
  .footer-top-link { width: 48px; height: 48px; font-size: 24px; }
  .footer-panel { padding: 22px; }
  .footer-subscribe-form { grid-template-columns: 40px minmax(0, 1fr); }
  .footer-subscribe-form button { grid-column: 1 / -1; min-height: 44px; }
  .footer-meta { align-items: flex-start; flex-direction: column; }
  .footer-brand { font-size: 14px; }

  .sponsor-logo-card { width: 120px; height: 55px; padding: 12px 16px; }
}

/* =====================================================
   REDUCED MOTION
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .ondel  { opacity: 1 !important; }
  .ondel img { animation: none !important; }
  .hero-video { display: none; }
}

/* =====================================================
   TABS & PAGE CONTENT (Race & Pre-Race)
   ===================================================== */
.page-header {
  padding: 44px 4% 28px;
  text-align: center;
  background: linear-gradient(180deg, #f7f9ff 0%, #fff 100%);
}
.page-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
}
.tab-btn {
  padding: 12px 20px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  color: #102149;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(16,33,73,.04);
}
.tab-btn::before {
  content: "";
  position: absolute;
  top: -10px; bottom: -10px; left: 0;
  width: 12px;
  background: transparent;
  transform: skewX(-20deg) translateX(-10px);
  transition: background .2s;
}
.tab-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-1px);
}
.tab-btn:hover::before {
  background: var(--blue);
}
.tab-btn.active {
  background: #0d46d4; /* Darker blue */
  color: #fff;
  border-color: #0d46d4;
  box-shadow: 0 6px 16px rgba(13, 70, 212, .25);
}
.tab-btn.active::before {
  background: #e60000; /* Darker red */
}

.tab-content {
  display: none;
  padding: 20px 4% 56px;
}
.tab-content.active {
  display: block;
}

/* Race Grid */
.race-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.race-map {
  background: #f4f6fa;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  min-height: 340px;
}
.race-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.race-route-map {
  min-height: 570px;
  background: #f3f4f6;
  box-shadow: 0 12px 38px rgba(16,33,73,.14);
}
.route-map-canvas {
  position: absolute;
  inset: 0;
  min-height: 570px;
}
.route-map-heading {
  position: absolute;
  z-index: 3;
  top: 22px;
  left: 22px;
  display: flex;
  flex-direction: column;
  padding: 12px 16px 10px;
  color: #fff;
  background: rgba(16,33,73,.92);
  border-left: 5px solid var(--red);
  box-shadow: 0 8px 24px rgba(16,33,73,.22);
  pointer-events: none;
}
.route-map-heading span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.route-map-heading strong {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px;
  line-height: .9;
  letter-spacing: .02em;
}
.route-map-status {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: min(290px, calc(100% - 40px));
  padding: 12px 16px;
  background: rgba(255,255,255,.94);
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 8px 28px rgba(16,33,73,.14);
}
.route-map-status[hidden] { display: none; }
.route-map-status.is-error { color: var(--red); }
.route-map-controls {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 32px;
  left: 18px;
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 14px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 32px rgba(16,33,73,.2);
  backdrop-filter: blur(10px);
}
.route-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 92px;
  min-height: 42px;
  padding: 8px 14px;
  border: 0;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}
.route-play:disabled { opacity: .48; cursor: wait; }
.route-play-icon { min-width: 12px; font-size: 11px; }
.route-progress-control { display: flex; align-items: center; }
.route-progress-control input {
  width: 100%;
  height: 5px;
  margin: 0;
  accent-color: var(--red);
  cursor: pointer;
}
.route-progress-control input:disabled { cursor: wait; }
.route-distance {
  min-width: 62px;
  color: var(--black);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px;
  font-weight: 900;
  text-align: right;
}
.route-endpoint {
  padding: 5px 8px;
  border: 2px solid #fff;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.route-endpoint-start { background: var(--blue); }
.route-endpoint-finish { background: var(--red); }
.race-route-map .maplibregl-ctrl-top-right { top: 14px; right: 14px; }
.race-route-map .maplibregl-ctrl-group {
  border-radius: 0;
  box-shadow: 0 5px 20px rgba(16,33,73,.18);
}
.race-route-map .maplibregl-ctrl-attrib { font-size: 9px; }

.race-info-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: 0 8px 32px rgba(0,0,0,.06);
  overflow: hidden;
}
.info-header {
  background: #f8f9fa;
  color: #102149;
  text-align: left;
  padding: 18px 24px;
  font-size: 19px;
  font-weight: 900;
  text-transform: uppercase;
  border-left: 6px solid;
  border-image: linear-gradient(to bottom, var(--blue), var(--red)) 1;
}
.info-table {
  padding: 12px 24px 22px;
}
.info-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.info-row:last-child {
  border-bottom: none;
}
.info-row strong {
  color: #102149;
  font-weight: 800;
}
.info-row span {
  color: var(--gray);
  text-align: right;
}

.dl-btn-wrap {
  text-align: center;
  margin-top: 20px;
}
.btn-outline-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border: 2px solid var(--red);
  color: var(--red);
  font-weight: 800;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .06em;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.btn-outline-red:hover {
  background: var(--red);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(232,0,14,.2);
}
.info-notes {
  text-align: center;
  color: var(--blue);
  font-size: 12px;
  margin: 16px 0 0;
}

/* FAQ / Accordion */
.faq-wrap {
  max-width: 800px;
  margin: 0 auto;
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: 0;
  margin-bottom: 8px;
  overflow: hidden;
}
.faq-question {
  width: 100%;
  text-align: left;
  padding: 15px 20px;
  background: #fff;
  border: none;
  font-size: 15px;
  font-weight: 700;
  color: #102149;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-question:hover { background: #f9f9fb; }
.faq-question::after {
  content: "+";
  font-size: 20px;
  font-weight: 400;
}
.faq-item.open .faq-question::after { content: "-"; }
.faq-answer {
  display: none;
  padding: 0 20px 18px;
  color: var(--gray);
  font-size: 14px;
  line-height: 1.7;
}
.faq-item.open .faq-answer { display: block; }

.kontak-submit { width: fit-content; }

.registration-dialog {
  width: min(430px, calc(100% - 32px));
  padding: 36px;
  border: 0;
  border-radius: 18px;
  color: var(--black);
  text-align: center;
  box-shadow: 0 28px 80px rgba(3, 11, 33, .3);
}
.registration-dialog::backdrop {
  background: rgba(3, 11, 33, .72);
  backdrop-filter: blur(5px);
}
.registration-dialog-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f1f3f8;
  color: var(--black);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.registration-dialog-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 28px;
  font-weight: 900;
}
.registration-dialog h2 {
  margin: 0 0 8px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 38px;
  letter-spacing: .03em;
}
.registration-dialog p { margin: 0 0 22px; color: var(--gray); }

.tab-btn:focus-visible,
.button:focus-visible,
.btn-outline-red:focus-visible,
.sponsor-join-btn:focus-visible,
.faq-question:focus-visible {
  outline: 3px solid rgba(18, 94, 250, .25);
  outline-offset: 3px;
}

@media (max-width: 780px) {
  .page-header { padding: 30px 16px 20px; }
  .page-tabs { gap: 7px; }
  .tab-btn { padding: 10px 14px; min-height: 42px; font-size: 11px; }
  .tab-content { padding: 14px 16px 40px; }
  .race-grid { grid-template-columns: 1fr; gap: 16px; }
  .race-map, .race-map > div:first-child { min-height: 420px !important; }
  .race-route-map { min-height: 480px !important; }
  .route-map-controls { right: 12px; bottom: 28px; left: 12px; }
  .info-header { padding: 16px 20px; }
  .info-table { padding: 8px 20px 20px; }
  .faq-question { padding: 14px 16px; font-size: 14px; gap: 16px; }
  .faq-answer { padding: 0 16px 16px; }
}

@media (max-width: 540px) {
  .page-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-race .page-tabs .tab-btn:last-child { grid-column: auto; }
  .tab-btn { width: 100%; letter-spacing: .04em; }
  .race-map, .race-map > div:first-child { min-height: 300px !important; }
  .race-route-map { min-height: 430px !important; }
  .route-map-heading { top: 12px; left: 12px; padding: 10px 12px 8px; }
  .route-map-heading strong { font-size: 34px; }
  .route-map-controls {
    grid-template-columns: auto 1fr;
    gap: 9px 12px;
    padding: 10px;
  }
  .route-progress-control { grid-column: 1 / -1; grid-row: 2; }
  .route-distance { grid-column: 2; grid-row: 1; }
  .info-row { gap: 16px; }
  .info-row strong { flex: 0 0 42%; }
  .kontak-submit { width: 100%; }
}