/* ============================================================
   IVTR Theme — Modern UI Layer v2
   Inspired by valenciatrailrace.com — calm, readable, modern.
   Loaded after main.min.css as a progressive override layer.
   ============================================================ */

:root {
  /* ---- Palette ---- */
  --c-primary:        #2046D2;
  --c-primary-hover:  #2f5af5;
  --c-accent:         #accb51;
  --c-accent-hover:   #bcd86a;
  --c-accent-deep:    #3d652c;
  --c-yellow:         #d6ad1f;
  --c-yellow-soft:    #efc743;
  --c-navy:           #292c5c;
  --c-navy-soft:      #3b3e78;
  --c-text:           #1a1d2e;
  --c-text-muted:     #5a6072;
  --c-white:          #ffffff;
  --c-bg:             #ffffff;
  --c-bg-soft:        #f7f8fa;
  --c-border:         #e6e8ee;

  /* ---- Radii ---- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;

  /* ---- Shadows ---- */
  --sh-xs: 0 1px 2px rgba(15, 20, 40, .06);
  --sh-sm: 0 4px 14px -4px rgba(15, 20, 40, .1);
  --sh-md: 0 12px 32px -8px rgba(15, 20, 40, .16);
  --sh-lg: 0 28px 60px -16px rgba(15, 20, 40, .22);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.3, .64, 1);
  --dur-1: 180ms;
  --dur-2: 320ms;
  --dur-3: 600ms;
  --dur-4: 900ms;

  /* ---- Type ---- */
  --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-display: 'Barlow Condensed', 'Inter', system-ui, sans-serif;

  --fs-label: .8125rem;
  --fs-body:  clamp(1rem, .2vw + .9rem, 1.0625rem);
  --fs-lead:  clamp(1.0625rem, .4vw + .9rem, 1.25rem);
  --fs-h6:    clamp(1rem, .2vw + .9rem, 1.125rem);
  --fs-h5:    clamp(1.125rem, .4vw + 1rem, 1.375rem);
  --fs-h4:    clamp(1.375rem, .6vw + 1.1rem, 1.75rem);
  --fs-h3:    clamp(1.625rem, 1vw + 1.2rem, 2.25rem);
  --fs-h2:    clamp(2rem, 2vw + 1.2rem, 3rem);
  --fs-h1:    clamp(2.5rem, 4vw + 1.2rem, 4.75rem);

  /* ---- Rhythm ---- */
  --section-y: clamp(72px, 9vw, 140px);
  --section-y-sm: clamp(48px, 6vw, 80px);
  --container-max: 1200px;
  --header-offset: 100px;
}

/* ============================================================
   Base typography & body
   ============================================================ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

body,
html body,
body * { font-family: var(--ff-body); }

body {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
body h1, body h2, body h3, body h4, body h5, body h6 {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .005em;
  color: var(--c-text);
  text-transform: uppercase;
  margin-top: 0;
}
body h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.01em; }
body h2 { font-size: var(--fs-h2); font-weight: 800; }
body h3 { font-size: var(--fs-h3); font-weight: 700; }
body h4 { font-size: var(--fs-h4); font-weight: 700; }
body h5 { font-size: var(--fs-h5); font-weight: 700; text-transform: none; letter-spacing: 0; }
body h6 { font-size: var(--fs-h6); font-weight: 700; text-transform: none; letter-spacing: 0; }

body p { font-size: var(--fs-body); line-height: 1.7; color: var(--c-text); }
body a { color: inherit; text-decoration: none; }

::selection { background: var(--c-yellow); color: var(--c-navy); }

img { max-width: 100%; height: auto; }
:where([id]) { scroll-margin-top: var(--header-offset); }

/* Section label — small, uppercase, tracked, with leading line.
   Usable as <span class="section-label"> if added in PHP;
   we also auto-style existing .section__title with a decorative top rule. */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
}
.section-label::before {
  content: "";
  width: 36px; height: 2px;
  background: currentColor;
  display: inline-block;
}

/* ============================================================
   Container overrides — wider breathing room, responsive padding
   ============================================================ */
body .container {
  max-width: var(--container-max);
  width: 100%;
  padding-inline: clamp(16px, 4vw, 32px);
  margin-inline: auto;
}

/* ============================================================
   Accessibility — skip link + focus
   ============================================================ */
.screen-reader-text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px; height: 1px;
  overflow: hidden;
  word-wrap: normal !important;
}
.skip-link {
  position: absolute;
  top: -48px; left: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--ff-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  transition: top var(--dur-1) var(--ease);
}
.skip-link:focus {
  top: 0; clip: auto; clip-path: none; width: auto; height: auto;
  color: var(--c-white);
}
:focus-visible {
  outline: 3px solid var(--c-yellow);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   Header — transparent over hero, solid + blur on scroll,
   Register CTA pill, responsive burger
   ============================================================ */
body .header {
  color: var(--c-navy);
  transition: background-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              backdrop-filter var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease);
}
body .header__row {
  gap: clamp(16px, 2vw, 32px);
  padding: 18px 0;
}
body .header__logo {
  margin-top: 0;
  transition: transform var(--dur-2) var(--ease);
}
body .header__logo img { transition: filter var(--dur-2) var(--ease); }

/* Transparent state — used over hero on pages with header--transparent */
body .header.header--transparent {
  background: transparent;
  color: var(--c-white);
  box-shadow: none;
}
body .header.header--transparent::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 180%;
  background: linear-gradient(180deg, rgba(15,20,40, .55) 0%, rgba(15,20,40, 0) 100%);
  pointer-events: none;
  z-index: -1;
}
body .header.header--transparent .header__logo img { filter: brightness(0) invert(1); }

/* Scrolled / fixed state — solid navy with blur */
body .header.header--fixed {
  background-color: color-mix(in srgb, var(--c-navy) 92%, transparent);
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  box-shadow: 0 6px 28px -12px rgba(15, 20, 40, .5);
  color: var(--c-white);
}
body .header.header--fixed::before { display: none; }
body .header.header--fixed .header__logo img { filter: brightness(0) invert(1); }
body .header.header--fixed .header__row { padding: 10px 0; }

/* Nav links */
body .header__nav {
  margin-top: 0;
  align-items: center;
}
body .header__nav a {
  position: relative;
  padding: 10px 12px;
  font-family: var(--ff-display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: inherit;
  transition: color var(--dur-1) var(--ease);
}
body .header__nav a::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 2px;
  background: var(--c-yellow);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-2) var(--ease);
}
body .header__nav a:hover,
body .header__nav .current-menu-item > a { color: var(--c-yellow); }
body .header__nav a:hover::after,
body .header__nav .current-menu-item > a::after { transform: scaleX(1); transform-origin: left center; }

/* Desktop dropdown submenu — scoped to >1280px so it doesn't bleed
   into the mobile burger menu (which has its own styles below). */
@media (min-width: 1281px) {
  body .header__nav .sub-menu {
    background: var(--c-navy) !important;
    box-shadow: 0 18px 40px -10px rgba(15, 20, 40, .45) !important;
    border-radius: var(--r-md);
    padding: 14px 10px !important;
    min-width: 220px;
    top: 100% !important;
    margin-top: 8px !important;
    border: 1px solid rgba(255, 255, 255, .08);
  }
  body .header__nav .sub-menu li { margin-bottom: 0 !important; }
  body .header__nav .sub-menu a {
    color: var(--c-white) !important;
    padding: 10px 14px !important;
    font-size: .85rem;
    letter-spacing: .1em;
    border-radius: 6px;
    display: block;
    width: 100%;
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  }
  body .header__nav .sub-menu a::after { display: none !important; }
  body .header__nav .sub-menu a:hover {
    background: rgba(214, 173, 31, .15);
    color: var(--c-yellow) !important;
  }
  body .header__nav .sub-menu .sub-menu {
    left: calc(100% + 8px) !important;
    top: 0 !important;
    margin-top: 0 !important;
  }
}

/* Non-homepage (default) header = solid white */
body .header:not(.header--transparent):not(.header--fixed) {
  background: var(--c-white);
  color: var(--c-navy);
  box-shadow: 0 2px 12px -6px rgba(15, 20, 40, .12);
  border-bottom: 1px solid var(--c-border);
}

/* ---------- Register CTA in header ---------- */
body .header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--c-yellow);
  color: var(--c-navy);
  font-family: var(--ff-display);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 2px solid var(--c-yellow);
  box-shadow: 0 6px 18px -8px rgba(214, 173, 31, .55);
  transition: transform var(--dur-2) var(--ease-spring),
              background-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
  white-space: nowrap;
}
body .header__cta:hover {
  background: var(--c-white);
  color: var(--c-navy);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -8px rgba(15, 20, 40, .35);
}
body .header--transparent .header__cta:hover {
  background: var(--c-white);
  color: var(--c-navy);
}
body .header__cta--mobile {
  display: inline-flex;
  margin-top: 28px;
  padding: 16px 28px;
  font-size: 1rem;
}

/* ---------- Burger ---------- */
body .header__burger {
  border-radius: 10px;
  color: currentColor;
  padding: 8px;
  transition: background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
body .header__burger:hover { background-color: rgba(255, 255, 255, .1); }
body .header__burger:active { transform: scale(.94); }
body .header:not(.header--transparent):not(.header--fixed) .header__burger:hover {
  background-color: rgba(15, 20, 40, .06);
}

/* Hide header CTA on mobile — it lives inside burger menu there */
@media (max-width: 1280px) {
  body .header__cta { display: none; }
  body .header__cta--mobile { display: inline-flex; }
}
@media (min-width: 1281px) {
  body .header__cta--mobile { display: none; }
}

body.menu-open { overflow: hidden; }

/* ---------- Mobile burger menu ---------- */
body .header__burger__menu {
  background: transparent;
  transition: opacity var(--dur-2) var(--ease);
}
body .header__burger__menu.show {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100svh !important;
  background-color: var(--c-navy) !important;
  background-image: linear-gradient(180deg, var(--c-navy) 0%, #1a1d42 100%) !important;
  padding: 90px clamp(24px, 6vw, 48px) 48px !important;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 32px;
  overflow-y: auto;
  color: var(--c-white) !important;
  animation: modern-menu-slide .4s var(--ease) both;
  z-index: 1000;
}
body .header__burger__menu.show * {
  color: var(--c-white);
}
body .header__burger__menu.show .header__nav .sub-menu {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 0 0 20px !important;
}
body .header__burger__menu.show::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 20% -10%, rgba(214, 173, 31, .18) 0%, transparent 50%),
              radial-gradient(circle at 90% 110%, rgba(172, 203, 81, .15) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
@keyframes modern-menu-slide {
  from { opacity: 0; transform: translateX(4%); }
  to   { opacity: 1; transform: none; }
}

body .header__burger__menu.show > * { position: relative; z-index: 1; }

body .header__burger__menu.show .header__logo {
  margin: 0 0 8px !important;
  display: inline-block;
  max-width: 130px;
}
body .header__burger__menu.show .header__logo img {
  filter: brightness(0) invert(1);
}

body .header__burger__menu.show .close,
body .header__burger__menu .close {
  position: absolute !important;
  top: 20px !important;
  right: clamp(16px, 4vw, 32px) !important;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  color: var(--c-white);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  z-index: 10;
  transition: background-color var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
body .header__burger__menu .close:hover {
  background: var(--c-yellow);
  color: var(--c-navy);
  border-color: var(--c-yellow);
  transform: rotate(90deg);
}
body .header__burger__menu .close svg { width: 22px; height: 22px; }

body .header__burger__menu.show .header__nav {
  display: flex !important;
  flex-direction: column;
  margin: 0 !important;
  padding: 0;
  list-style: none;
  gap: 2px;
}
body .header__burger__menu.show .header__nav li {
  width: 100%;
  margin: 0 !important;
  list-style: none;
  opacity: 0;
  transform: translateX(12px);
  animation: modern-menu-item .55s var(--ease) forwards;
}
body .header__burger__menu.show .header__nav li:nth-child(1) { animation-delay: .12s; }
body .header__burger__menu.show .header__nav li:nth-child(2) { animation-delay: .20s; }
body .header__burger__menu.show .header__nav li:nth-child(3) { animation-delay: .28s; }
body .header__burger__menu.show .header__nav li:nth-child(4) { animation-delay: .36s; }
body .header__burger__menu.show .header__nav li:nth-child(5) { animation-delay: .44s; }
body .header__burger__menu.show .header__nav li:nth-child(n+6) { animation-delay: .52s; }

@keyframes modern-menu-item {
  to { opacity: 1; transform: none; }
}

body .header__burger__menu.show .header__nav a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  font-family: var(--ff-display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-white);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: color var(--dur-2) var(--ease), padding-left var(--dur-2) var(--ease);
  width: 100%;
}
body .header__burger__menu.show .header__nav a::before {
  content: "";
  width: 0;
  height: 2px;
  background: var(--c-yellow);
  transition: width var(--dur-2) var(--ease);
  display: inline-block;
  flex-shrink: 0;
}
body .header__burger__menu.show .header__nav a::after { display: none; }
body .header__burger__menu.show .header__nav a:hover,
body .header__burger__menu.show .header__nav a:focus {
  color: var(--c-yellow);
  padding-left: 8px;
}
body .header__burger__menu.show .header__nav a:hover::before,
body .header__burger__menu.show .header__nav a:focus::before { width: 28px; }

/* Submenu in mobile — indented */
body .header__burger__menu.show .header__nav .sub-menu {
  position: static !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 4px 0 4px 20px !important;
  display: block !important;
  margin-top: 0 !important;
  min-width: 0 !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
}
body .header__burger__menu.show .header__nav .sub-menu li {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
body .header__burger__menu.show .header__nav .sub-menu a {
  font-size: 1rem !important;
  padding: 10px 0 !important;
  background: transparent !important;
  color: var(--c-white) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
  border-radius: 0 !important;
}
body .header__burger__menu.show .header__nav .sub-menu a:hover {
  background: transparent !important;
  color: var(--c-yellow) !important;
}

/* Register CTA in mobile menu — bottom pinned, big yellow */
body .header__cta--mobile {
  margin-top: auto !important;
  align-self: stretch;
  justify-content: center;
  padding: 18px 32px !important;
  font-size: 1rem !important;
  letter-spacing: .2em;
  box-shadow: 0 10px 28px -10px rgba(214, 173, 31, .6);
  opacity: 0;
  transform: translateY(12px);
  animation: modern-menu-item .6s var(--ease) .6s forwards;
}

/* Hide hover indicator on menu item */
body .header__burger__menu.show .menu-item-has-children::after {
  display: none;
}

/* ============================================================
   Buttons — sharper, modern, primary/outline
   ============================================================ */
body .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: var(--ff-display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  box-shadow: var(--sh-xs);
  transition: transform var(--dur-2) var(--ease-spring),
              box-shadow var(--dur-2) var(--ease),
              background-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
  will-change: transform;
}
body .btn:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
body .btn:active { transform: translateY(0); box-shadow: var(--sh-sm); }

body .btn-yellow {
  background-color: var(--c-yellow);
  color: var(--c-navy);
  border-color: var(--c-yellow);
}
body .btn-yellow:hover {
  background-color: var(--c-navy);
  color: var(--c-yellow);
  border-color: var(--c-navy);
}

.btn-outline {
  background: transparent;
  color: var(--c-navy);
  border: 2px solid var(--c-navy);
  padding: 14px 26px;
}
.btn-outline:hover {
  background: var(--c-navy);
  color: var(--c-white);
}

/* ============================================================
   Hero — calm overlay, generous spacing, scroll indicator
   ============================================================ */
body .hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  color: var(--c-white);
}
/* Parallax wrapper — JS sets --hero-bg from inline style, then clears it */
body .hero.has-parallax {
  background-image: none !important;
  background-color: var(--c-navy);
}
body .hero.has-parallax::before {
  content: "";
  position: absolute; inset: -8% 0;
  background-image: var(--hero-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
  will-change: transform;
  transform: translate3d(0, var(--hero-y, 0), 0);
  transition: transform 60ms linear;
}
body .hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0, .25) 0%, rgba(0,0,0, .05) 35%, rgba(0,0,0, .45) 100%);
  z-index: -1;
  pointer-events: none;
}

/* ---------- Hero content (H1 + eyebrow + CTA) ---------- */
body .hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(16px, 2vw, 28px);
  min-height: 100vh;
  min-height: 100svh;
  padding-top: clamp(80px, 12vh, 160px);
  padding-bottom: clamp(220px, 28vh, 320px);
  color: var(--c-white);
}
body .hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--c-yellow);
  opacity: 0;
  animation: modern-hero-in .7s var(--ease) .1s forwards;
}
body .hero__eyebrow::before,
body .hero__eyebrow::after {
  content: "";
  width: 40px; height: 2px;
  background: var(--c-yellow);
}
body .hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0px, 1vw, 8px);
  margin: 0;
  line-height: 1;
  font-family: var(--ff-display);
  text-shadow: 0 4px 30px rgba(0, 0, 0, .35);
  color: var(--c-white);
}
body .hero__title-top {
  font-size: clamp(3rem, 8vw + 1rem, 8rem);
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
  line-height: .92;
  opacity: 0;
  animation: modern-hero-in .9s var(--ease) .25s forwards;
}
body .hero__title-bottom {
  font-size: clamp(2rem, 5vw + 1rem, 5.25rem);
  font-weight: 600;
  letter-spacing: .02em;
  font-style: italic;
  text-transform: none;
  color: var(--c-yellow);
  line-height: 1;
  opacity: 0;
  animation: modern-hero-in .9s var(--ease) .45s forwards;
}
body .hero__cta {
  margin-top: clamp(8px, 2vw, 20px);
  opacity: 0;
  animation: modern-hero-in .8s var(--ease) .7s forwards;
}

@keyframes modern-hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 1024px) {
  body .hero__content { padding-bottom: clamp(300px, 34vh, 360px); }
}
@media (max-width: 520px) {
  /* stats bar collapses to a single column — 5 rows ~90px each ≈ 450-500px */
  body .hero__content { padding-bottom: clamp(480px, 80vw, 560px); }
}

/* Scroll indicator — added by JS */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(180px, 22vh, 240px);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-white);
  opacity: .9;
  z-index: 2;
  pointer-events: none;
  animation: modern-hero-fade 1.2s var(--ease) .6s both;
}
.hero__scroll::after {
  content: "";
  width: 2px; height: 56px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0));
  animation: modern-scroll-line 2.2s ease-in-out infinite;
}

@keyframes modern-scroll-line {
  0%   { transform: translateY(-6px) scaleY(.4); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(14px) scaleY(1); opacity: 0; }
}
@keyframes modern-hero-fade {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: .9; transform: translate(-50%, 0); }
}

/* Stats bar at hero bottom — restyle */
body .hero__bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: rgba(15, 20, 40, .82);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
body .hero__bottom__item {
  padding: 22px 24px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: transparent !important;
  border-right: 1px solid rgba(255, 255, 255, .08);
  color: var(--c-white);
  transition: background-color var(--dur-2) var(--ease);
}
body .hero__bottom__item:last-child { border-right: none; }
body .hero__bottom__item:hover { background: rgba(255, 255, 255, .05) !important; }
body .hero__bottom .bottom__item__label p {
  font-family: var(--ff-display);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  margin: 0;
}
body .hero__bottom .bottom__item__value p,
body .hero__bottom .bottom__item__value a {
  font-family: var(--ff-display);
  font-size: clamp(1.0625rem, .9vw + .8rem, 1.5rem);
  font-weight: 700;
  color: var(--c-white);
  line-height: 1.15;
  letter-spacing: .01em;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
body .hero__bottom .bottom__item__value a {
  color: var(--c-yellow);
  text-transform: uppercase;
  letter-spacing: .12em;
  transition: color var(--dur-1) var(--ease);
  position: relative;
  padding-bottom: 4px;
  display: inline-block;
}
body .hero__bottom .bottom__item__value a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease);
}
body .hero__bottom .bottom__item__value a:hover::after { transform: scaleX(1); }
body .hero__bottom .bottom__item__value a:hover { color: var(--c-yellow-soft); }

/* Staggered entrance for stats */
body .hero__bottom__item {
  opacity: 0;
  transform: translateY(14px);
  animation: modern-stats-in .7s var(--ease) forwards;
}
body .hero__bottom__item:nth-child(1) { animation-delay: .45s; }
body .hero__bottom__item:nth-child(2) { animation-delay: .55s; }
body .hero__bottom__item:nth-child(3) { animation-delay: .65s; }
body .hero__bottom__item:nth-child(4) { animation-delay: .75s; }
body .hero__bottom__item:nth-child(5) { animation-delay: .85s; }

@keyframes modern-stats-in {
  to { opacity: 1; transform: none; }
}

@media (max-width: 1024px) {
  body .hero__bottom {
    grid-template-columns: repeat(2, 1fr);
  }
  body .hero__bottom__item {
    border-right: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    min-height: 90px;
    padding: 16px 20px;
  }
  body .hero__bottom__item:nth-child(2n) { border-right: none; }
  .hero__scroll { display: none; }
}
@media (max-width: 520px) {
  body .hero__bottom { grid-template-columns: 1fr; }
  body .hero__bottom__item { border-right: none; }
}

/* ============================================================
   Brushed separators — Valencia-style painted transition
   Applied as pseudo-elements; color via background-color.
   ============================================================ */
.brushed-top,
.brushed-bottom { position: relative; }

.brushed-top::before,
.brushed-bottom::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: clamp(40px, 5vw, 80px);
  background-color: currentColor;
  -webkit-mask: url("../images/brushed-separator.svg") no-repeat top center / 100% 100%;
          mask: url("../images/brushed-separator.svg") no-repeat top center / 100% 100%;
  pointer-events: none;
  z-index: 3;
}
.brushed-top::before  { top: 0;    transform: translateY(-99%); }
.brushed-bottom::after { bottom: 0; transform: translateY(99%) scaleY(-1); }

/* ---- Apply to key section transitions ----
   Scoped to .home only — these separators describe the homepage flow.
   On inner pages (e.g. /supporters/ reusing the sponsors block),
   we don't want drippy edges cutting into headings/content. */
body section.about { position: relative; }

body.home section.about::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: clamp(40px, 5vw, 80px);
  background-color: var(--c-navy);
  -webkit-mask: url("../images/brushed-separator.svg") no-repeat top center / 100% 100%;
          mask: url("../images/brushed-separator.svg") no-repeat top center / 100% 100%;
  transform: translateY(99%) scaleY(-1);
  pointer-events: none;
  z-index: 3;
}

body section.cta.run { position: relative; }
body.home section.cta.run::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(40px, 5vw, 80px);
  background-color: var(--c-bg-soft);
  -webkit-mask: url("../images/brushed-separator.svg") no-repeat top center / 100% 100%;
          mask: url("../images/brushed-separator.svg") no-repeat top center / 100% 100%;
  transform: translateY(-99%);
  pointer-events: none;
  z-index: 3;
}

body section.pricing { position: relative; }
body.home section.pricing::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(40px, 5vw, 80px);
  background-color: var(--c-bg);
  -webkit-mask: url("../images/brushed-separator.svg") no-repeat top center / 100% 100%;
          mask: url("../images/brushed-separator.svg") no-repeat top center / 100% 100%;
  transform: translateY(-99%);
  pointer-events: none;
  z-index: 3;
}

body section.sponsors { position: relative; }
body section.sponsors::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(40px, 5vw, 80px);
  background-color: var(--c-bg-soft);
  -webkit-mask: url("../images/brushed-separator.svg") no-repeat top center / 100% 100%;
          mask: url("../images/brushed-separator.svg") no-repeat top center / 100% 100%;
  transform: translateY(-99%);
  pointer-events: none;
  z-index: 3;
}

/* On inner pages (not homepage) the sponsors block may be preceded by
   paragraph text from the page editor. Push the block down so the drip
   lands in empty white space above instead of over the text. */
body:not(.home) section.sponsors {
  margin-top: clamp(80px, 10vw, 140px);
}

/* ============================================================
   About — quieter cards, generous grid
   ============================================================ */
body .about {
  padding-block: var(--section-y);
}
body .about__wrapper {
  max-width: var(--container-max);
  padding-inline: clamp(16px, 4vw, 32px);
}
body .about__text h2 {
  color: var(--c-white);
  font-size: var(--fs-h2);
  margin-bottom: clamp(24px, 3vw, 40px);
  position: relative;
  padding-top: 56px;
}
body .about__text h2::before {
  content: "Our Race";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--c-yellow);
  white-space: nowrap;
}
body .about__text p {
  color: rgba(255, 255, 255, .88);
  font-size: var(--fs-lead);
  line-height: 1.75;
  margin-bottom: 1.2em;
}

body .about__action { margin-block: clamp(32px, 5vw, 64px); gap: 16px; }
body .about__subtitle {
  font-family: var(--ff-display);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-yellow);
}

body .about__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
  margin-top: clamp(32px, 4vw, 56px);
  align-items: stretch;
}
body .about__card {
  max-width: none;
  position: relative;
  padding: 0 !important;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  transition: transform var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
body .about__card:empty,
body .about__card:not(:has(img)):not(:has(h3)):not(:has(p)) { display: none; }

body .about__card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  border-radius: 0;
  overflow: hidden;
  background: var(--c-navy-soft);
  display: block;
  margin: 0 !important;
}
body .about__card__image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center;
  margin: 0 !important;
  transition: transform var(--dur-4) var(--ease), filter var(--dur-3) var(--ease);
  filter: saturate(.9);
}

body .about__card h3 {
  color: var(--c-white);
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: left;
  margin: 20px 20px 6px !important;
  padding: 0 0 0 22px;
  position: relative;
}
body .about__card h3::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: 14px; height: 2px;
  background: var(--c-yellow);
  transition: width var(--dur-3) var(--ease);
}

body .about__card p {
  color: rgba(255, 255, 255, .72);
  font-size: .85rem;
  line-height: 1.5;
  text-align: left;
  margin: 0 20px 22px !important;
}

body .about__card:hover {
  transform: translateY(-4px);
  border-color: rgba(214, 173, 31, .35);
  box-shadow: var(--sh-md);
}
body .about__card:hover img {
  transform: scale(1.05);
  filter: saturate(1);
}
body .about__card:hover h3::before { width: 28px; }

@media (max-width: 1024px) {
  body .about__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  body .about__cards { grid-template-columns: 1fr; }
  /* Keep vertical stacking (image on top, text below) so narrow
     phone screens get a full-width text column. */
  body .about__card { flex-direction: column; }
  body .about__card__image {
    width: 100%;
    aspect-ratio: 16 / 10;
  }
}

/* ============================================================
   CTA run section — readable, two-column info
   ============================================================ */
/* CTA image — edge-to-edge so brushed separator lands ON the image */
body section.cta:not(.run) {
  padding: 0 !important;
  margin: 0;
  line-height: 0;
  font-size: 0;
  position: relative;
}
body section.cta:not(.run) > p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
  font-size: 0;
}
body section.cta:not(.run) img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}
body .cta.run { padding-block: var(--section-y); background: var(--c-bg-soft); }
body .cta.run h2 {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 56px);
  color: var(--c-navy);
  position: relative;
  padding-top: 56px;
}
body .cta.run h2::before {
  content: "Race Details";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--c-yellow);
  white-space: nowrap;
}
body .run__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  text-align: left;
}

body .run__left, body .run__right {
  background: var(--c-white);
  padding: clamp(24px, 2.5vw, 36px);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-xs);
  position: relative;
  transition: box-shadow var(--dur-2) var(--ease);
}
body .run__left:hover, body .run__right:hover {
  box-shadow: var(--sh-md);
}

/* Run Details accordion — built by JS from sequential h3 headings */
body .run-accordion { display: flex; flex-direction: column; gap: 14px; }
body .run-accordion__intro {
  margin-bottom: 4px;
  color: var(--c-text);
}
body .run-accordion__intro p {
  font-size: .95rem;
  line-height: 1.65;
  margin: 0 0 8px;
  color: var(--c-text);
}
body .run-accordion__intro strong { color: var(--c-navy); }

body .run-accordion__item {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  position: relative;
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
body .run-accordion__item::before {
  /* Yellow accent bar on top — echoes pricing cards & CTAs */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--c-yellow);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-3) var(--ease);
  z-index: 2;
}
body .run-accordion__item:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}
body .run-accordion__item:hover::before { transform: scaleX(1); }

body .run-accordion__header {
  padding: 18px 20px 12px 74px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 42px;
  color: var(--c-navy);
  font-family: var(--ff-display);
  font-size: var(--fs-h5);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  position: relative;
  border-bottom: 1px solid var(--c-border);
}

/* Icon badge — navy with yellow glyph (matches site palette) */
body .run-accordion__header::before {
  content: "";
  position: absolute;
  left: 20px; top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-soft) 100%);
  box-shadow: 0 4px 14px -4px rgba(15, 20, 40, .35);
}
body .run-accordion__header::after {
  content: "";
  position: absolute;
  left: 20px; top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  background-color: var(--c-yellow);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 22px 22px; mask-size: 22px 22px;
  pointer-events: none;
}

body .run-accordion__title { flex: 1; }

body .run-accordion__body {
  padding: 18px 20px 22px;
  color: var(--c-text);
  font-size: .95rem;
  line-height: 1.7;
}
body .run-accordion__body > *:first-child { margin-top: 0; }
body .run-accordion__body > *:last-child { margin-bottom: 0; }
body .run-accordion__body p { margin: 0 0 10px; color: var(--c-text); }
body .run-accordion__body strong { color: var(--c-navy); }
body .run-accordion__body h5 {
  font-size: .82rem;
  color: var(--c-navy);
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 18px 0 8px;
  padding-left: 16px;
  position: relative;
  display: inline-block;
}
body .run-accordion__body h5::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-yellow);
}
body .run-accordion__body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body .run-accordion__body li {
  padding: 8px 0 8px 26px;
  position: relative;
  border-bottom: 1px solid var(--c-border);
  line-height: 1.4;
}
body .run-accordion__body li:last-child { border-bottom: none; }
body .run-accordion__body li::before {
  content: "";
  position: absolute;
  left: 6px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-yellow);
  box-shadow: 0 0 0 3px rgba(214, 173, 31, .2);
}
body .run-accordion__body li p {
  margin: 0;
  color: var(--c-navy);
  font-family: var(--ff-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

@keyframes modern-accordion-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Icon variants based on panel order inside column (data-panel-idx from JS) */
body .run__left .run-accordion__item[data-panel-idx="0"] .run-accordion__header::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M7 11h2v2H7v-2zm14-5v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2l.01-14A2 2 0 0 1 5 4h1V2h2v2h8V2h2v2h1a2 2 0 0 1 2 2zM5 8h14V6H5v2zm14 12V10H5v10h14z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M7 11h2v2H7v-2zm14-5v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2l.01-14A2 2 0 0 1 5 4h1V2h2v2h8V2h2v2h1a2 2 0 0 1 2 2zM5 8h14V6H5v2zm14 12V10H5v10h14z'/></svg>");
}
body .run__left .run-accordion__item[data-panel-idx="1"] .run-accordion__header::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 0 1 9.5 9 2.5 2.5 0 0 1 12 6.5 2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 0 1 9.5 9 2.5 2.5 0 0 1 12 6.5 2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5z'/></svg>");
}
body .run__right .run-accordion__item[data-panel-idx="0"] .run-accordion__header::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M6.49 20h11.02c.63 0 1.2-.37 1.44-.95.24-.58.11-1.25-.34-1.69l-5.49-5.49c-.59-.59-1.54-.59-2.12 0L5.5 17.36c-.45.45-.58 1.11-.34 1.69.25.58.82.95 1.33.95zM18 6.5a2.5 2.5 0 0 0-5 0 2.5 2.5 0 0 0 5 0zm-6.5 0a2.5 2.5 0 0 0-5 0 2.5 2.5 0 0 0 5 0z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M6.49 20h11.02c.63 0 1.2-.37 1.44-.95.24-.58.11-1.25-.34-1.69l-5.49-5.49c-.59-.59-1.54-.59-2.12 0L5.5 17.36c-.45.45-.58 1.11-.34 1.69.25.58.82.95 1.33.95zM18 6.5a2.5 2.5 0 0 0-5 0 2.5 2.5 0 0 0 5 0zm-6.5 0a2.5 2.5 0 0 0-5 0 2.5 2.5 0 0 0 5 0z'/></svg>");
}
body .run__right .run-accordion__item[data-panel-idx="1"] .run-accordion__header::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm.5-13H11v6l5.2 3.2.8-1.3-4.5-2.7z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm.5-13H11v6l5.2 3.2.8-1.3-4.5-2.7z'/></svg>");
}
/* Left column — 1st h3 = Check-in (calendar/check), 2nd = Start Line (map-pin) */
body .run__left h3:nth-of-type(1)::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M7 11h2v2H7v-2zm14-5v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2l.01-14A2 2 0 0 1 5 4h1V2h2v2h8V2h2v2h1a2 2 0 0 1 2 2zM5 8h14V6H5v2zm14 12V10H5v10h14zm-4-7h2v-2h-2v2zm-4 0h2v-2h-2v2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M7 11h2v2H7v-2zm14-5v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2l.01-14A2 2 0 0 1 5 4h1V2h2v2h8V2h2v2h1a2 2 0 0 1 2 2zM5 8h14V6H5v2zm14 12V10H5v10h14zm-4-7h2v-2h-2v2zm-4 0h2v-2h-2v2z'/></svg>");
}
body .run__left h3:nth-of-type(2)::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 0 1 9.5 9 2.5 2.5 0 0 1 12 6.5 2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 0 1 9.5 9 2.5 2.5 0 0 1 12 6.5 2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5z'/></svg>");
}
/* Right column — 1st = Distances (route), 2nd = Start Times (clock) */
body .run__right h3:nth-of-type(1)::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M6.49 20h11.02c.63 0 1.2-.37 1.44-.95.24-.58.11-1.25-.34-1.69l-5.49-5.49c-.59-.59-1.54-.59-2.12 0L5.5 17.36c-.45.45-.58 1.11-.34 1.69.25.58.82.95 1.33.95zM18 6.5a2.5 2.5 0 0 0-5 0 2.5 2.5 0 0 0 5 0zm-6.5 0a2.5 2.5 0 0 0-5 0 2.5 2.5 0 0 0 5 0z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M6.49 20h11.02c.63 0 1.2-.37 1.44-.95.24-.58.11-1.25-.34-1.69l-5.49-5.49c-.59-.59-1.54-.59-2.12 0L5.5 17.36c-.45.45-.58 1.11-.34 1.69.25.58.82.95 1.33.95zM18 6.5a2.5 2.5 0 0 0-5 0 2.5 2.5 0 0 0 5 0zm-6.5 0a2.5 2.5 0 0 0-5 0 2.5 2.5 0 0 0 5 0z'/></svg>");
}
body .run__right h3:nth-of-type(2)::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm.5-13H11v6l5.2 3.2.8-1.3-4.5-2.7z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm.5-13H11v6l5.2 3.2.8-1.3-4.5-2.7z'/></svg>");
}

/* Sub-section h5 (Saturday/Sunday) with small dot marker */
body .run__left h5, body .run__right h5 {
  font-size: .85rem;
  color: var(--c-accent-deep);
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 22px 0 10px;
  padding-left: 16px;
  position: relative;
  display: inline-block;
}
body .run__left h5::before, body .run__right h5::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  background: var(--c-yellow);
  border-radius: 50%;
}

body .run__left p, body .run__right p {
  color: var(--c-text);
  font-size: .9375rem;
  line-height: 1.65;
  margin: 0 0 10px;
}
body .run__left strong, body .run__right strong { color: var(--c-navy); }

/* List items — custom markers */
body .run__left ul, body .run__right ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body .run__left li, body .run__right li {
  color: var(--c-text);
  font-size: .9375rem;
  padding: 8px 0 8px 28px;
  position: relative;
  line-height: 1.4;
  border-bottom: 1px solid var(--c-border);
}
body .run__left li:last-child, body .run__right li:last-child { border-bottom: none; }
body .run__left li::before, body .run__right li::before {
  content: "";
  position: absolute;
  left: 6px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(172, 203, 81, .18);
}
/* Right-column time list — stronger accent */
body .run__right li p {
  margin: 0;
  color: var(--c-navy);
  font-family: var(--ff-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

@media (max-width: 860px) {
  body .run__inner { grid-template-columns: 1fr; gap: 16px; }
}

/* On narrow screens drop the outer white container so the inner
   accordion cards span the full viewport width and nothing is
   double-inset (card inside card). */
@media (max-width: 768px) {
  body .run__left,
  body .run__right {
    background: transparent;
    padding: 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }
  body .run__left:hover,
  body .run__right:hover { box-shadow: none; }
  body .run-accordion { gap: 12px; }
}

/* Optionally let the inner cards breathe out to the section edge too */
@media (max-width: 560px) {
  body section.cta.run > .container {
    padding-inline: 12px;
  }
}

/* ============================================================
   Countdown — tabular digits, calm
   ============================================================ */
body .countdown { height: auto; min-height: clamp(420px, 60vh, 640px); padding-block: var(--section-y); isolation: isolate; }
body .countdown__bg {
  background-size: cover !important;
  background-attachment: scroll;
  z-index: -2;
}
body .countdown::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,20,40,.72) 0%, rgba(15,20,40,.85) 100%);
  z-index: -1;
}
body .countdown__inner h2 {
  font-size: var(--fs-h2);
  color: var(--c-white);
  margin-bottom: clamp(40px, 5vw, 72px);
  letter-spacing: .02em;
  position: relative;
  padding-top: 56px;
}
body .countdown__inner h2::before {
  content: "Race Day";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--c-yellow);
  white-space: nowrap;
}
body .countdown__timer {
  gap: clamp(12px, 2vw, 32px);
  max-width: 800px;
  padding-bottom: 40px;
}
body .countdown__timer__box {
  flex: 1;
  text-align: center;
}
body .countdown__timer__num {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
  padding: clamp(16px, 2vw, 28px) clamp(12px, 2vw, 20px);
  border-radius: var(--r-md);
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 800;
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: transform var(--dur-2) var(--ease);
}
body .countdown__timer__num:after {
  display: none !important;
}
body .countdown__timer__label {
  font-family: var(--ff-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  bottom: 0;
  margin-top: 14px;
  position: static;
  width: auto;
}
/* Pulse seconds subtly */
body .countdown__timer__box:last-child .countdown__timer__num {
  animation: modern-pulse 1s var(--ease) infinite alternate;
}
@keyframes modern-pulse {
  from { transform: scale(1); }
  to   { transform: scale(1.015); }
}

/* ============================================================
   Pricing — Valencia-inspired: dark navy cards, yellow accents
   ============================================================ */
body .pricing {
  padding-block: var(--section-y);
  min-height: auto;
  background: var(--c-bg);
}
body .pricing__wrapper h2 {
  color: var(--c-navy);
  margin-bottom: 12px;
  position: relative;
  padding-top: 56px;
}
body .pricing__wrapper h2::before {
  content: "Endurance Run Entry";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  white-space: nowrap;
}
body .pricing__wrapper p {
  color: var(--c-text-muted);
  text-align: center;
  max-width: 640px;
  margin-bottom: clamp(32px, 4vw, 56px) !important;
}

body .pricing__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(24px, 3vw, 40px);
  align-items: stretch;
}

body .pricing__card {
  max-width: 100%;
  min-height: auto;
  background: var(--c-navy);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  transition: transform var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
body .pricing__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--c-yellow);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-3) var(--ease);
  z-index: 2;
}
body .pricing__card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-lg);
  border-color: rgba(214, 173, 31, .4);
  border-radius: var(--r-md) !important;
}
body .pricing__card:hover::before { transform: scaleX(1); }

body .pricing__inner {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

body .pricing__card .pricing__title,
body .pricing__card h3.pricing__title {
  color: var(--c-white);
  margin: 28px 24px 0;
  font-family: var(--ff-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  opacity: .85;
}

body .pricing__card .pricing__box {
  background: transparent;
  padding: 12px 24px 28px;
  color: var(--c-white);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  position: relative;
}
body .pricing__card .pricing__price {
  color: var(--c-yellow);
  font-family: var(--ff-display);
  font-size: clamp(3.25rem, 5vw + 1rem, 5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 20px rgba(214, 173, 31, .25);
}
body .pricing__card .pricing__subtitle {
  color: rgba(255, 255, 255, .6);
  font-family: var(--ff-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  margin-top: 4px;
}
body .pricing__card .pricing__text {
  color: rgba(255, 255, 255, .72);
  font-size: .85rem;
  margin-top: 8px;
  display: block;
}

body .pricing__card .pricing__list {
  padding: 0;
  flex: 1;
}
body .pricing__card .pricing__list ul {
  list-style: none;
  padding: 20px 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body .pricing__card .pricing__list li {
  color: rgba(255, 255, 255, .88);
  font-size: .9375rem;
  padding: 10px 0 10px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  margin: 0;
  position: relative;
  line-height: 1.4;
  background: none;
}
body .pricing__card .pricing__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  background: var(--c-yellow);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='currentColor'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='currentColor'/></svg>") no-repeat center / contain;
}
body .pricing__card .pricing__list li:last-child { border-bottom: none; }

body .pricing__card .pricing__group {
  margin-top: auto;
  padding: 20px 24px 28px;
  display: flex;
  justify-content: center;
}
body .pricing__card .btn.btn-pricing,
body .pricing__card .btn.btn-pricng {
  background: var(--c-yellow);
  color: var(--c-navy);
  border-color: var(--c-yellow);
  width: 100%;
  padding: 14px 20px;
  font-size: .85rem;
  letter-spacing: .18em;
  box-shadow: 0 6px 18px -8px rgba(214, 173, 31, .5);
}
body .pricing__card .btn.btn-pricing:hover,
body .pricing__card .btn.btn-pricng:hover {
  background: var(--c-white);
  color: var(--c-navy);
  border-color: var(--c-white);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px rgba(15, 20, 40, .45);
}

/* Middle card highlighted as "featured" (3rd of 4 — usually the popular one) */
body .pricing__cards > .pricing__card:nth-child(2) {
  background: linear-gradient(180deg, #2e3272 0%, var(--c-navy) 60%);
  border-color: rgba(214, 173, 31, .35);
}
body .pricing__cards > .pricing__card:nth-child(2)::after {
  content: "Popular";
  position: absolute;
  top: 18px; right: 18px;
  font-family: var(--ff-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-navy);
  background: var(--c-yellow);
  padding: 5px 10px;
  border-radius: 4px;
  z-index: 2;
}

/* ============================================================
   Photos — bento grid with varying tile sizes + zoom overlay
   ============================================================ */
body section.photos {
  padding-block: var(--section-y);
  background-color: var(--c-navy);
}
body .photos__wrapper { max-width: var(--container-max); }
body .photos h2 {
  color: var(--c-white);
  margin-bottom: clamp(32px, 4vw, 56px);
  position: relative;
  padding-top: 56px;
}
body .photos h2::before {
  content: "Gallery";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--c-yellow);
  white-space: nowrap;
}

body .photos__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(140px, 14vw, 220px);
  gap: clamp(10px, 1.2vw, 18px);
  max-width: none;
}

/* Asymmetric bento pattern — repeats every 8 tiles */
body .photos__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  cursor: zoom-in;
  background: rgba(255, 255, 255, .04);
  isolation: isolate;
  transform: translateY(0);
  transition: transform var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
  padding: 0 !important;
  border: 0 !important;
}
body .photos__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  max-width: none !important;
  max-height: none !important;
  transition: transform var(--dur-4) var(--ease),
              filter var(--dur-3) var(--ease);
  display: block;
}
body .photos__item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,20,40,0) 45%, rgba(15,20,40, .65) 100%);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
  pointer-events: none;
}
body .photos__item::before {
  content: "↗";
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(15, 20, 40, .5);
  backdrop-filter: blur(6px);
  color: var(--c-white);
  font-size: 1.1rem;
  font-weight: 600;
  opacity: 0;
  transform: translate(-6px, 6px) rotate(-10deg);
  transition: opacity var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease);
  z-index: 2;
}
body .photos__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
}
body .photos__item:hover img {
  transform: scale(1.08);
  filter: brightness(1.05);
}
body .photos__item:hover::after { opacity: 1; }
body .photos__item:hover::before {
  opacity: 1;
  transform: translate(0, 0) rotate(0);
}

/* Bento sizing rules — 8-tile cycle */
body .photos__item:nth-child(8n+1) { grid-column: span 2; grid-row: span 2; } /* big */
body .photos__item:nth-child(8n+2) { grid-column: span 1; grid-row: span 1; }
body .photos__item:nth-child(8n+3) { grid-column: span 1; grid-row: span 1; }
body .photos__item:nth-child(8n+4) { grid-column: span 2; grid-row: span 1; } /* wide */
body .photos__item:nth-child(8n+5) { grid-column: span 1; grid-row: span 2; } /* tall */
body .photos__item:nth-child(8n+6) { grid-column: span 2; grid-row: span 1; } /* wide */
body .photos__item:nth-child(8n+7) { grid-column: span 1; grid-row: span 1; }
body .photos__item:nth-child(8n)   { grid-column: span 1; grid-row: span 1; }

body .btn-photos {
  margin: clamp(32px, 4vw, 56px) auto 0 !important;
  display: inline-flex;
}
body .photos__action { display: flex; justify-content: center; }

@media (max-width: 1024px) {
  body .photos__items { grid-template-columns: repeat(3, 1fr); }
  body .photos__item:nth-child(8n+1),
  body .photos__item:nth-child(8n+4),
  body .photos__item:nth-child(8n+6) { grid-column: span 2; grid-row: span 1; }
  body .photos__item:nth-child(8n+5) { grid-column: span 1; grid-row: span 2; }
  body .photos__item:nth-child(n)    { grid-column: span 1; grid-row: span 1; }
  body .photos__item:nth-child(8n+1) { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 640px) {
  body .photos__items {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 140px;
  }
  body .photos__item:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  body .photos__item:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }
}

/* ============================================================
   Sponsors — grayscale → color on hover
   ============================================================ */
body .sponsors { padding-block: var(--section-y); background: var(--c-bg-soft); }
body .sponsors h2 {
  color: var(--c-navy);
  margin-bottom: clamp(32px, 4vw, 56px);
  position: relative;
  padding-top: 56px;
}
body .sponsors h2::before {
  content: "Our Sponsors";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  white-space: nowrap;
}
body .sponsors__items {
  max-width: 1100px;
  gap: clamp(24px, 3vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: center;
}
body .sponsors__items a {
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  transition: transform var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
body .sponsors__items a:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--c-yellow);
}
body .sponsors__items img {
  max-height: 110px;
  width: auto;
  filter: grayscale(100%);
  opacity: .75;
  transition: filter var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
body .sponsors__items a:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* ============================================================
   Entry hero — single posts & pages (featured-image banner)
   ============================================================ */
body .entry-hero {
  position: relative;
  min-height: clamp(380px, 55vh, 560px);
  display: grid;
  align-items: flex-end;
  background-size: cover;
  /* Show the TOP of the photo — don't crop the sky/horizon */
  background-position: center top;
  background-repeat: no-repeat;
  color: var(--c-white);
  overflow: hidden;
  isolation: isolate;
  margin-top: 0;
}

/* Remove the legacy .page { padding-top: 100px } when a hero is present
   so the image sits flush against the fixed header. Same for single posts. */
body.page:has(.entry-hero),
body.single:has(.entry-hero) {
  padding-top: 0 !important;
}
@media (max-width: 768px) {
  body.page:has(.entry-hero),
  body.single:has(.entry-hero) {
    padding-top: 0 !important;
  }
}
body .entry-hero--plain {
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-soft) 100%);
  min-height: clamp(260px, 32vh, 380px);
}
body .entry-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(15, 20, 40, .25) 0%,
    rgba(15, 20, 40, .05) 35%,
    rgba(15, 20, 40, .75) 100%);
  z-index: 0;
}
body .entry-hero--plain .entry-hero__overlay { display: none; }
body .entry-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(56px, 10vh, 110px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1100px;
  margin-inline: auto;
  width: 100%;
}
body .entry-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--c-yellow);
  opacity: 0;
  animation: modern-hero-in .7s var(--ease) .1s forwards;
}
body .entry-hero__eyebrow a { color: inherit; }
body .entry-hero__eyebrow::before {
  content: "";
  width: 36px; height: 2px;
  background: var(--c-yellow);
}
body .entry-hero__title {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 3vw + 1rem, 3.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--c-white);
  text-shadow: 0 4px 30px rgba(0, 0, 0, .35);
  margin: 0;
  opacity: 0;
  animation: modern-hero-in .9s var(--ease) .25s forwards;
}
body .entry-hero--plain .entry-hero__title { text-shadow: none; }
body .entry-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--ff-display);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  opacity: 0;
  animation: modern-hero-in .8s var(--ease) .45s forwards;
}
body .entry-hero__meta time,
body .entry-hero__meta .entry-hero__author { font-variant-numeric: tabular-nums; }

/* ============================================================
   Entry content (single post / page with hero)
   ============================================================ */
body .entry-main { padding-block: clamp(40px, 5vw, 80px) clamp(100px, 12vw, 160px); }

/* Legacy fallback layouts (.main / .page__wrapper used when no featured image)
   — add bottom breathing room so the footer's brushed separator doesn't
   overlap the last paragraph of content. */
body .main {
  padding-bottom: clamp(100px, 12vw, 160px);
}
body .page__wrapper {
  padding-bottom: clamp(40px, 5vw, 60px);
}
/* Align article container with hero__inner so H1 and body share the
   same left/right edges. Keep them both the same max-width. */
body .entry.container { max-width: 1100px; }
body .entry__content {
  max-width: none;
  padding: 0;
  margin: 0;
}
body .entry__content {
  font-size: clamp(1rem, .2vw + .95rem, 1.1rem);
  line-height: 1.75;
  color: var(--c-text);
}
body .entry__content > *:first-child { margin-top: 0; }
body .entry__content > *:last-child  { margin-bottom: 0; }
body .entry__content p { margin: 0 0 1.2em; }
body .entry__content h2 {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 1vw + 1.1rem, 2rem);
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 2em 0 .6em;
  color: var(--c-navy);
  text-transform: none;
}
body .entry__content h3 {
  font-family: var(--ff-display);
  font-size: clamp(1.25rem, .6vw + 1.05rem, 1.5rem);
  font-weight: 700;
  margin: 1.8em 0 .5em;
  color: var(--c-navy);
  text-transform: none;
  letter-spacing: 0;
}
body .entry__content h4 { font-size: 1.125rem; margin: 1.5em 0 .4em; color: var(--c-navy); text-transform: none; letter-spacing: 0; }
body .entry__content a {
  color: var(--c-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-1) var(--ease);
}
body .entry__content a:hover { color: var(--c-primary-hover); text-decoration-thickness: 2px; }
body .entry__content img,
body .entry__content figure,
body .page__content img,
body .page__content figure,
body .article__content img,
body .article__content figure {
  max-width: 100%;
  height: auto;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 1.5em 0;
}
body .entry__content .wp-block-image,
body .page__content .wp-block-image,
body .article__content .wp-block-image {
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body .entry__content figcaption {
  font-size: .85rem;
  color: var(--c-text-muted, #5a6072);
  text-align: center;
  margin-top: 8px;
}
body .entry__content blockquote {
  border-left: 3px solid var(--c-yellow);
  padding: 8px 0 8px 22px;
  margin: 1.6em 0;
  color: var(--c-text);
  font-size: 1.05em;
  font-style: italic;
}
body .entry__content ul,
body .entry__content ol { padding-left: 22px; margin: 0 0 1.2em; }
body .entry__content li { margin-bottom: .5em; }
body .entry__content hr {
  border: 0;
  border-top: 1px solid var(--c-border, #e6e8ee);
  margin: 2em 0;
}
body .entry__content pre,
body .entry__content code {
  background: #f5f6fa;
  border-radius: var(--r-sm);
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: .92em;
}
body .entry__content code { padding: 2px 6px; }
body .entry__content pre {
  padding: 16px 20px;
  overflow-x: auto;
  border: 1px solid var(--c-border, #e6e8ee);
}

/* Tags */
body .entry__tags {
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 28px;
  border-top: 1px solid var(--c-border, #e6e8ee);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
body .entry__tags-label {
  font-family: var(--ff-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-text-muted, #5a6072);
  margin-right: 6px;
}
body .entry__tag {
  padding: 6px 14px;
  background: var(--c-bg-soft, #f5f6fa);
  border: 1px solid var(--c-border, #e6e8ee);
  border-radius: 999px;
  font-size: .85rem;
  color: var(--c-navy);
  transition: background-color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease);
}
body .entry__tag:hover {
  background: var(--c-yellow);
  border-color: var(--c-yellow);
  color: var(--c-navy);
}

/* ============================================================
   Contact Form 7 — match site design
   ============================================================ */
body .wpcf7 {
  max-width: 640px;
  margin: clamp(24px, 3vw, 48px) auto;
  padding: clamp(24px, 3vw, 40px);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}
body .wpcf7 form { display: flex; flex-direction: column; gap: 18px; }

body .wpcf7 p { margin: 0; }

body .wpcf7 label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--ff-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-navy);
}

body .wpcf7-form-control.wpcf7-text,
body .wpcf7-form-control.wpcf7-email,
body .wpcf7-form-control.wpcf7-tel,
body .wpcf7-form-control.wpcf7-number,
body .wpcf7-form-control.wpcf7-url,
body .wpcf7-form-control.wpcf7-textarea,
body .wpcf7-form-control.wpcf7-select {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--ff-body);
  font-size: 1rem;
  color: var(--c-text);
  background: var(--c-white);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              background-color var(--dur-2) var(--ease);
  text-transform: none;
  letter-spacing: 0;
  box-shadow: var(--sh-xs);
}
body .wpcf7-form-control.wpcf7-textarea {
  min-height: 160px;
  line-height: 1.55;
  resize: vertical;
}
body .wpcf7-form-control:hover {
  border-color: var(--c-text-muted, #5a6072);
}
body .wpcf7-form-control:focus,
body .wpcf7-form-control:focus-visible {
  outline: none;
  border-color: var(--c-yellow);
  box-shadow: 0 0 0 4px rgba(214, 173, 31, .18);
}

body .wpcf7-form-control.wpcf7-submit {
  align-self: flex-start;
  padding: 14px 36px;
  font-family: var(--ff-display);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: var(--c-yellow);
  color: var(--c-navy);
  border: 2px solid var(--c-yellow);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease-spring);
  box-shadow: none;
  outline: none;
}
body .wpcf7-form-control.wpcf7-submit:hover {
  background: var(--c-navy);
  color: var(--c-yellow);
  border-color: var(--c-navy);
  transform: translateY(-1px);
}
body .wpcf7-form-control.wpcf7-submit:active {
  transform: translateY(0);
}
body .wpcf7-form-control.wpcf7-submit:focus-visible {
  outline: 3px solid var(--c-yellow);
  outline-offset: 3px;
}
body .wpcf7-form-control.wpcf7-submit:active {
  transform: translateY(0);
}

/* Validation states */
body .wpcf7-not-valid {
  border-color: #d63838 !important;
  background: #fff5f5 !important;
}
body .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: #d63838;
  font-size: .85rem;
  font-family: var(--ff-body);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* Response messages */
body .wpcf7-response-output {
  margin: 18px 0 0 !important;
  padding: 14px 18px !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-sm);
  font-size: .9rem;
  font-family: var(--ff-body);
  background: var(--c-bg-soft);
  color: var(--c-text);
  text-transform: none;
  letter-spacing: 0;
}
body form.wpcf7-form.sent .wpcf7-response-output {
  background: rgba(172, 203, 81, .12) !important;
  border-color: var(--c-accent) !important;
  color: var(--c-accent-deep) !important;
}
body form.wpcf7-form.invalid .wpcf7-response-output,
body form.wpcf7-form.failed .wpcf7-response-output,
body form.wpcf7-form.unaccepted .wpcf7-response-output {
  background: #fff5f5 !important;
  border-color: #d63838 !important;
  color: #a02020 !important;
}

/* Spinner */
body .wpcf7-spinner {
  background-color: var(--c-yellow) !important;
  margin-left: 16px !important;
}

/* Contact page layout — give the form breathing room */
body .page-id-830 .page__wrapper,
body .page-template-contact .page__wrapper,
body .page .main { padding-block: clamp(40px, 5vw, 80px); }

/* ============================================================
   Footer polish + brushed transition from sponsors
   ============================================================ */
body .footer {
  min-height: auto;
  padding-block: 0;
  position: relative;
}
body .footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(40px, 5vw, 80px);
  background-color: var(--c-accent);
  -webkit-mask: url("../images/brushed-separator.svg") no-repeat top center / 100% 100%;
          mask: url("../images/brushed-separator.svg") no-repeat top center / 100% 100%;
  transform: translateY(-99%);
  pointer-events: none;
  z-index: 3;
}
body .footer__top { padding-block: clamp(48px, 6vw, 96px); }
body .footer .socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  transition: background-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-spring);
}
body .footer .socials a:hover {
  background-color: rgba(255, 255, 255, .22);
  transform: translateY(-3px) scale(1.05);
}
body .footer h3 {
  font-family: var(--ff-display);
  color: var(--c-accent-deep);
  letter-spacing: .02em;
}

/* ============================================================
   Scroll-reveal (for sections — unchanged logic, softer values)
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-4) var(--ease), transform var(--dur-4) var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

.js-reveal-ready section.about,
.js-reveal-ready section.cta,
.js-reveal-ready section.countdown,
.js-reveal-ready section.pricing,
.js-reveal-ready section.photos,
.js-reveal-ready section.sponsors,
.js-reveal-ready section.run,
.js-reveal-ready .footer__top {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-4) var(--ease), transform var(--dur-4) var(--ease);
}
.js-reveal-ready section.about.is-visible,
.js-reveal-ready section.cta.is-visible,
.js-reveal-ready section.countdown.is-visible,
.js-reveal-ready section.pricing.is-visible,
.js-reveal-ready section.photos.is-visible,
.js-reveal-ready section.sponsors.is-visible,
.js-reveal-ready section.run.is-visible,
.js-reveal-ready .footer__top.is-visible {
  opacity: 1;
  transform: none;
}

/* Progressive per-element reveal (each child reveals when IT enters viewport) */
.js-progressive {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.js-progressive.is-visible {
  opacity: 1;
  transform: none;
}

/* Pricing cards still use simple stagger (they're in a row — stagger feels good) */
.js-reveal-ready .pricing.is-visible .pricing__card {
  animation: modern-card-in .7s var(--ease) both;
}
.js-reveal-ready .pricing.is-visible .pricing__card:nth-child(1) { animation-delay: .08s; }
.js-reveal-ready .pricing.is-visible .pricing__card:nth-child(2) { animation-delay: .16s; }
.js-reveal-ready .pricing.is-visible .pricing__card:nth-child(3) { animation-delay: .24s; }
.js-reveal-ready .pricing.is-visible .pricing__card:nth-child(4) { animation-delay: .32s; }

@keyframes modern-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .js-progressive,
  section.about, section.cta, section.countdown, section.pricing,
  section.photos, section.sponsors, section.run, .footer__top,
  .hero__bottom__item, .about__card, .pricing__card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* No-JS fallback — show everything */
html:not(.js-reveal-ready) section.about,
html:not(.js-reveal-ready) section.cta,
html:not(.js-reveal-ready) section.countdown,
html:not(.js-reveal-ready) section.pricing,
html:not(.js-reveal-ready) section.photos,
html:not(.js-reveal-ready) section.sponsors,
html:not(.js-reveal-ready) section.run,
html:not(.js-reveal-ready) .footer__top { opacity: 1; transform: none; }