html { scroll-behavior: smooth; }
  body { margin: 0; background: #0B0B0B; }
  @keyframes sp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  ::selection { background: #E7511F; color: #0B0B0B; }
  details > summary { list-style: none; cursor: pointer; }
  details > summary::-webkit-details-marker { display: none; }
  details[open] .sp-plus { transform: rotate(45deg); }
  .sp-ev:hover { padding-left: 22px; }
  .sp-ev:hover .sp-ev-arrow { opacity: 1; transform: translateX(0); }
  .sp-ev:hover .sp-ev-title { color: #E7511F; }
  a { color: inherit; text-decoration: none; }
  nav a:hover { color: #E7511F; }
  @keyframes sp-float { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-18px) rotate(var(--r,0deg)); } }
  .sp-prod:hover .sp-prod-img { transform: scale(1.04); }
  .sp-prod:hover .sp-prod-add { background:#E7511F; color:#0B0B0B; }
  .sp-prod-img { transition: transform 0.5s cubic-bezier(0.2,0.7,0.25,1); }
  .sp-prod-add { transition: background 0.2s, color 0.2s; }
  /* Italic display voice on titles + key parts */
  h1, h2, blockquote, .sp-ital, .sp-ev-title { font-style: italic; }
  /* Barber display voice — upright, filled solid (the woff is an outline face; text-stroke fills it) */
  .sp-barber { font-family: "Barber", "Futura Cyrillic", sans-serif; font-style: normal !important; -webkit-text-stroke: 0.085em currentColor; paint-order: stroke fill; letter-spacing: 0 !important; }
  .sp-barber .sp-accent, .sp-barber span { -webkit-text-stroke: 0.085em currentColor; paint-order: stroke fill; }
  .sp-root h2 { transition: color 0.28s ease; }
  .sp-root h2:hover { color:#E7511F; }
  .sp-onorange h2:hover { color:#FFFFFF; }
  image-slot { display:block; width:100%; height:100%; }
  /* ---- Theme variables (base = uniform across all content sections) ---- */
  .sp-root { --bg:#0B0B0B; --fg:#FFFFFF; --soft:rgba(255,255,255,0.72); --muted:rgba(255,255,255,0.55); --faint:rgba(255,255,255,0.4); --line:rgba(255,255,255,0.12); --panel:rgba(255,255,255,0.045); --nav-bg:rgba(11,11,11,0.72); background:var(--bg); color:var(--fg); }
  .sp-theme-white { --bg:#FFFFFF; --fg:#0B0B0B; --soft:rgba(11,11,11,0.7); --muted:rgba(11,11,11,0.55); --faint:rgba(11,11,11,0.4); --line:rgba(11,11,11,0.12); --panel:rgba(11,11,11,0.03); --nav-bg:rgba(255,255,255,0.78); }
  /* full-bleed photo section: image behind + dark overlay, always white text */
  .sp-photo { position:relative; z-index:2; }
  .sp-photo .sp-photo-bg { position:absolute; inset:0; z-index:-2; }
  .sp-photo .sp-photo-ov { position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(11,11,11,0.62), rgba(11,11,11,0.72)); }
  .sp-photo, .sp-photo * { color:#FFFFFF; }
  .sp-photo .sp-accent { color:#E7511F !important; }
  .sp-logo { filter:invert(1); }
  .sp-theme-white .sp-logo { filter:none; }
  .sp-mobile-menu .sp-logo { filter:none; }
  .sp-theme-white nav a img { filter:none; }
  .sp-burger span.sp-bar { background:currentColor !important; }
  .sp-filter.is-active { background:#FFFFFF !important; color:#0B0B0B !important; }
  .sp-theme-white .sp-filter.is-active { background:#0B0B0B !important; color:#FFFFFF !important; }
  .sp-filter-arrow { opacity:0; transform:translateX(-8px); transition:all 0.2s; }
  .sp-filter.is-active .sp-filter-arrow { opacity:1; transform:translateX(0); }
  .sp-filter:hover { color:#E7511F; }
  .sp-filter.is-active:hover { color:#0B0B0B; }
  .sp-prod.is-hidden { display:none !important; }
  /* hidden high-scores easter egg */
  .sp-scores { position:fixed; inset:0; z-index:80; background:#0B0B0B; display:none; overflow:hidden; }
  .sp-scores.open { display:block; }
  .sp-scores-rows { position:absolute; inset:-20% -20%; transform:rotate(-5deg); display:flex; flex-direction:column; }
  .sp-scores-rows .band { flex:1; display:flex; align-items:center; overflow:hidden; min-height:0; }
  .sp-scores-rows .band > div { display:inline-flex; white-space:nowrap; font-weight:900; letter-spacing:0.01em; font-size:clamp(28px,7vh,90px); line-height:1; }
  .sp-scores-close { position:fixed; top:16px; right:22px; z-index:83; width:54px; height:54px; background:none; border:none; color:#fff; font-size:42px; line-height:1; cursor:pointer; }
  .sp-scores-modal { position:fixed; z-index:82; top:50%; left:50%; transform:translate(-50%,-50%); background:#0B0B0B; color:#fff; border:2px solid #fff; padding:34px 44px; text-align:center; max-width:80vw; }
  .sp-scores-modal.hidden { display:none; }
  .sp-scores-modal-close { position:absolute; top:8px; right:10px; width:34px; height:34px; background:none; border:none; color:#fff; font-size:26px; line-height:1; cursor:pointer; }
  .sp-odometer { cursor:pointer; }
  .sp-odo { display:inline-flex; align-items:stretch; gap:2px; background:linear-gradient(180deg,#f6f6f6,#dcdcdc); padding:9px; border-radius:7px; box-shadow:inset 0 2px 6px rgba(0,0,0,0.28), 0 1px 0 rgba(255,255,255,0.7); }
  .sp-odo-w { position:relative; width:34px; height:48px; overflow:hidden; border-radius:3px; background:linear-gradient(180deg,#ffffff 0%,#f2f2f2 14%,#e4e4e4 50%,#f2f2f2 86%,#ffffff 100%); box-shadow:inset 0 0 0 1px rgba(0,0,0,0.12); }
  .sp-odo-w::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,0.28),rgba(0,0,0,0) 32%,rgba(0,0,0,0) 68%,rgba(0,0,0,0.28)); }
  .sp-odo-strip { will-change:transform; transition:transform 0.09s linear; }
  .sp-odo-strip > span { display:flex; align-items:center; justify-content:center; height:48px; font-family:'Arial Narrow',Arial,sans-serif; font-weight:800; font-size:32px; color:#0B0B0B; text-shadow:0 1px 0 rgba(255,255,255,0.6); }
  .sp-odo-dot { display:flex; align-items:flex-end; justify-content:center; padding:0 1px 8px; color:#E7511F; font-weight:900; font-size:28px; }
  .sp-odo-w.cont { background:linear-gradient(180deg,#c23f12,#f26a2e 48%,#c23f12); box-shadow:inset 0 0 0 1px rgba(0,0,0,0.4); }
  .sp-odo-w.cont::after { background:linear-gradient(180deg,rgba(60,20,4,0.6),rgba(0,0,0,0) 34%,rgba(0,0,0,0) 66%,rgba(60,20,4,0.6)); }
  .sp-odo-w.cont .sp-odo-strip { transition:none; }
  .sp-odo-w.cont .sp-odo-strip > span { color:#12100a; text-shadow:0 1px 0 rgba(255,255,255,0.35); }
  .sp-odo.sm { padding:5px; gap:1px; border-radius:5px; }
  .sp-odo.sm .sp-odo-w { width:19px; height:26px; }
  .sp-odo.sm .sp-odo-strip > span { height:26px; font-size:17px; }
  .sp-odo.sm .sp-odo-dot { font-size:16px; padding:0 1px 4px; }
  #records details summary { grid-template-columns:40px 1fr auto 24px !important; gap:14px !important; }
  #records details summary > span:nth-child(4) { display:none !important; }
  .sp-mbr:hover .sp-mbr-cta { background:#FFFFFF; color:#0B0B0B; }
  .sp-mbr:hover .sp-mbr-cta-arrow { transform:translateX(8px); }
  html.sp-has-cursor, html.sp-has-cursor * { cursor:none !important; }
  @media (pointer: coarse) { .sp-cursor { display:none !important; } }
  @media (prefers-reduced-motion: no-preference) {
    #records.sp-anim-ready .sp-board-head, #records.sp-anim-ready details { opacity:0; transform:translateY(28px); transition:opacity 0.6s ease, transform 0.6s cubic-bezier(0.2,0.7,0.25,1); }
    #records.sp-in .sp-board-head, #records.sp-in details { opacity:1; transform:none; }
    #records.sp-in .sp-board-head { transition-delay:0.02s; }
    #records.sp-in details:nth-of-type(1) { transition-delay:0.12s; }
    #records.sp-in details:nth-of-type(2) { transition-delay:0.20s; }
    #records.sp-in details:nth-of-type(3) { transition-delay:0.28s; }
    #records.sp-in details:nth-of-type(4) { transition-delay:0.36s; }
    #records.sp-in details:nth-of-type(5) { transition-delay:0.44s; }
  }
  .sp-legal { color:inherit; transition:color 0.2s; }
  .sp-legal:hover { color:#E7511F; }
  .sp-podium:hover, .sp-podium:hover span { color:#FFFFFF !important; }
  .sp-prod-grid { scrollbar-width:none; -ms-overflow-style:none; }
  .sp-prod-grid::-webkit-scrollbar { display:none; }
  .sp-signup:hover { background:#FFFFFF; color:#0B0B0B; }
  .sp-signup:hover .sp-signup-arrow { transform:translateX(10px); }
  .sp-foot-link { transition:color 0.2s; }
  .sp-foot-link:hover { color:#E7511F; }
  footer#contact input::placeholder { color:rgba(255,255,255,0.4); }
  /* smaller copyright glyph everywhere */
  .sp-c { font-size:0.62em; vertical-align:0.32em; opacity:0.85; }
  /* mobile menu + burger */
  .sp-burger { display:none; }
  .sp-mobile-menu { position:fixed; inset:0; z-index:60; background:#FFFFFF; color:#0B0B0B; transform:translateX(100%); transition:transform 0.45s cubic-bezier(0.7,0,0.2,1); display:flex; flex-direction:column; visibility:hidden; }
  .sp-mobile-menu.open { transform:translateX(0); visibility:visible; }
  .sp-km-pill { display:none; }
  .sp-quote-dot { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.3); border:none; padding:0; cursor:pointer; transition:background 0.25s, transform 0.25s; }
  .sp-quote-dot.on { background:#E7511F; transform:scale(1.25); }
  .sp-quote-slider, .sp-quote-slide { text-align:center; }
  .sp-quote-slide blockquote { margin-left:auto; margin-right:auto; }
  @media (min-width: 720px) { .sp-foot-grid { grid-template-columns:1fr 1fr 1.7fr !important; } }
  /* scroll hints for sliders + breakdowns */
  @keyframes sp-nudge { 0%,100%{ transform:translateX(0); opacity:0.55; } 50%{ transform:translateX(6px); opacity:1; } }
  @keyframes sp-bob { 0%,100%{ transform:translateY(0); opacity:0.6; } 50%{ transform:translateY(4px); opacity:1; } }
  .sp-scroll-hint { display:none; }
  .sp-scroll-hint .arrow { display:inline-block; animation:sp-nudge 1.2s ease-in-out infinite; font-size:15px; }
  @media (max-width: 860px) {
    .sp-scroll-hint { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; font-family:monospace; font-size:11px; letter-spacing:0.14em; }
  }
  /* mobile menu links: uniform, selected → orange */
  .sp-mm-link { color:#0B0B0B; transition:color 0.2s; }
  .sp-mm-link:hover, .sp-mm-link.sel { color:#E7511F; }
  .sp-mm-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0; border-bottom:1px solid rgba(11,11,11,0.16); color:#0B0B0B; font-weight:800; font-size:clamp(26px,7vw,38px); letter-spacing:-0.01em; transition:color 0.2s; }
  .sp-mm-row:hover, .sp-mm-row.sel { color:#E7511F; }
  .sp-mm-side { position:absolute; top:0; left:0; height:100%; width:54px; border-right:1px solid rgba(11,11,11,0.16); display:flex; align-items:center; justify-content:center; overflow:hidden; pointer-events:none; }
  .sp-mm-side span { writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; font-family:monospace; font-size:12px; letter-spacing:0.18em; color:#0B0B0B; }
  @media (max-width: 860px) {
    .sp-nav-links, .sp-nav-atl { display:none !important; }
    .sp-burger { display:flex !important; }
    .sp-km-pill { display:flex !important; }
    /* center logo, burger floats right */
    nav.sp-nav { position:relative; justify-content:center !important; }
    nav.sp-nav .sp-logo-link { margin:0 auto; }
    nav.sp-nav .sp-burger { position:absolute; right:5vw; top:50%; transform:translateY(-50%); }
    nav.sp-nav .sp-bar { background:#FFFFFF !important; }
    /* WE RACE ALL YEAR gallery → horizontal slider */
    .sp-about-gallery .sp-gal-item { width:74vw !important; }
    .sp-about-gallery .sp-gal-track { animation-duration:24s; }
    /* series rows → compact stacked */
    .sp-ev { grid-template-columns:auto 1fr !important; grid-template-areas:'idx date' 'idx title' 'idx meta' !important; gap:2px 14px !important; padding:20px 0 !important; align-items:baseline !important; }
    .sp-ev > :nth-child(1) { grid-area:idx; align-self:start; }
    .sp-ev > :nth-child(2) { grid-area:date; }
    .sp-ev > :nth-child(3) { grid-area:title; font-size:26px !important; margin:2px 0; }
    .sp-ev > :nth-child(4) { grid-area:meta; }
    .sp-ev > :nth-child(5) { display:none !important; }
    /* board breakdown summaries → stack cleanly on mobile */
    #records details summary { grid-template-columns:1fr auto !important; grid-template-areas:'num plus' 'title plus' 'value meta' !important; gap:2px 12px !important; align-items:center !important; padding:16px 0 !important; }
    #records details summary > :nth-child(1) { grid-area:num; }
    #records details summary > :nth-child(2) { grid-area:title; font-size:18px !important; }
    #records details summary > :nth-child(3) { grid-area:value; font-size:22px !important; }
    #records details summary > :nth-child(4) { grid-area:meta; text-align:right; }
    #records details summary > :nth-child(5) { grid-area:plus; align-self:start; }
    #records details div[style*="padding-left:60px"] { padding-left:16px !important; }
    /* WE RACE ALL YEAR stats → one line, centered, smaller */
    .sp-stats { flex-wrap:nowrap !important; gap:20px !important; justify-content:center !important; }
    .sp-stats > div > div:first-child { font-size:30px !important; }
    .sp-stats > div > div:last-child { font-size:9px !important; letter-spacing:0.08em !important; }
    /* run collective 4 boxes → horizontal slider */
    .sp-collective-grid { display:flex !important; grid-template-columns:none !important; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    .sp-collective-grid::-webkit-scrollbar { display:none; }
    .sp-collective-grid > div, .sp-collective-grid > a { flex:0 0 78% !important; scroll-snap-align:start; box-sizing:border-box; }
    /* shop: filters on top (horizontal), products below */
    .sp-shop-grid { display:block !important; grid-template-columns:none !important; }
    .sp-filters { flex-direction:row !important; overflow-x:auto; gap:8px; padding:0 0 16px !important; margin-bottom:16px; border-bottom:1px solid var(--line); scrollbar-width:none; }
    .sp-filters::-webkit-scrollbar { display:none; }
    .sp-filter { flex:0 0 auto; white-space:nowrap; padding:8px 16px !important; border:1px solid var(--line); border-radius:100px; font-size:13px !important; }
    .sp-filter-arrow { display:none !important; }
    .sp-prod-grid { border-left:none !important; margin:0 -5vw; padding:0 5vw; }
  }


/* ===== WE RACE ALL YEAR - infinite slow auto-scroll gallery ===== */
.sp-about-gallery { display:block; overflow:hidden; margin:0 -5vw; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); }
.sp-about-gallery .sp-gal-track { display:flex; width:max-content; will-change:transform; animation:sp-gal-scroll 38s linear infinite; }
.sp-about-gallery:hover .sp-gal-track { animation-play-state:paused; }
.sp-about-gallery .sp-gal-item { flex:0 0 auto; width:clamp(220px,24vw,320px); aspect-ratio:3/4; margin-right:16px; }
@keyframes sp-gal-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sp-about-gallery .sp-gal-track { animation:none; } }
#about .sp-scroll-hint { display:none !important; }


/* header social links: desktop-only (mobile uses the menu, all sizes use footer) */
.sp-nav-social { display:none; align-items:center; gap:14px; }
.sp-nav-social a { font-size:11px; letter-spacing:0.12em; padding-bottom:0; }
@media (min-width:1120px) { .sp-nav-social { display:flex; } }


/* mobile: shorter hero so it doesn't hog the screen */
@media (max-width: 860px) {
  #top.sp-photo { min-height:62vh !important; padding-top:44px !important; padding-bottom:36px !important; }
}
@media (max-width: 600px) {
  #top.sp-photo { min-height:58vh !important; }
}

/* WE COMPETE — two-column race schedule (added 2026-07-15 for HYROX 2027) */
@media (min-width: 861px){
  .sp-compete-list{ display:grid; grid-template-columns:1fr 1fr; grid-auto-flow:column; grid-template-rows:repeat(var(--sp-rows,4), auto); column-gap:64px; }
  .sp-compete-list .sp-ev{ grid-template-columns:40px 96px minmax(0,1fr) auto auto !important; gap:18px !important; }
  .sp-compete-list .sp-ev-title{ font-size:clamp(20px,2.2vw,34px) !important; }
  .sp-compete-list .sp-ev-colend{ border-bottom:1px solid var(--line); }
}
@media (max-width: 860px){
  /* compact single-line rows so 15 races don't run long on phones */
  .sp-compete-list{ display:block; }
  .sp-compete-list .sp-ev{ grid-template-columns:auto auto minmax(0,1fr) !important; grid-template-areas:'idx date title' !important; gap:0 12px !important; padding:13px 0 !important; align-items:baseline !important; }
  .sp-compete-list .sp-ev > :nth-child(1){ grid-area:idx; }
  .sp-compete-list .sp-ev > :nth-child(2){ grid-area:date; white-space:nowrap; }
  .sp-compete-list .sp-ev > :nth-child(3){ grid-area:title; font-size:17px !important; margin:0 !important; line-height:1.1; }
  .sp-compete-list .sp-ev > :nth-child(4){ display:none !important; }
  .sp-compete-list .sp-ev > :nth-child(5){ display:none !important; }
}
