/* ============================================================
   FreerideFanatics — shared stylesheet
   Design language adapted from hotcut.xyz (light warm bg, wavy
   line-art decoration, condensed heavy headlines, mono labels,
   burnt-orange accent, thin-border cards).
   ============================================================ */

:root{
  --bg:#eae9e5;
  --bg-card:#f5f4f1;
  --ink:#15161a;
  --muted:#6b6f74;
  --line: rgba(21,22,26,0.14);
  --orange:#dd6a34;
  --orange-dark:#c25a29;
  --dark:#0d1013;
  --dark2:#3d454e;
  --dark3:#525b64;
  --mono: 'Space Mono', monospace;
  --head: 'Archivo Black', sans-serif;
  --body: 'Inter', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:clip;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
.mono{font-family:var(--mono); letter-spacing:0.08em;}
.label{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:12px;
  color:var(--muted);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-size:13px;
  padding:15px 28px;
  border:1.5px solid var(--ink);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  white-space:nowrap;
  transition:all .15s ease;
}
.btn:hover{background:var(--ink); color:var(--bg);}
.btn-solid{background:var(--orange); border-color:var(--orange); color:#fff;}
.btn-solid:hover{background:var(--orange-dark); border-color:var(--orange-dark); color:#fff;}
.btn-sm{padding:10px 18px; font-size:11px;}

/* ===== Announcement bar ===== */
.announce{
  background:var(--dark);
  color:#cfd3d6;
  text-align:center;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:9px 12px;
}
.announce span{color:var(--orange);}

/* ===== Header ===== */
header{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
header.scrolled{box-shadow:0 6px 24px rgba(15,16,19,0.08);}
.nav-row{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
  gap:24px;
}
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; background:none; border:none; cursor:pointer; padding:0;
}
.nav-toggle span{width:22px; height:2px; background:var(--ink); transition:transform .2s ease, opacity .2s ease;}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--head);
  font-size:19px;
  letter-spacing:0.01em;
  white-space:nowrap;
}
.logo .mark{
  width:30px; height:30px; flex-shrink:0;
  background:var(--orange);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--head); font-size:16px;
  transform:skew(-6deg);
}
nav.links{
  display:flex; gap:26px; flex-wrap:wrap;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
nav.links a{position:relative; padding-bottom:2px;}
nav.links a:hover, nav.links a.active{color:var(--orange);}
nav.links .nav-item{position:relative;}
nav.links .caret{font-size:9px; color:var(--muted); margin-left:2px;}
nav.links .dropdown{
  position:absolute; top:100%; left:-16px; padding-top:12px;
  display:none; z-index:30;
}
nav.links .has-dropdown:hover .dropdown,
nav.links .has-dropdown:focus-within .dropdown{display:block;}
nav.links .dropdown-inner{
  background:var(--bg); border:1px solid var(--line);
  box-shadow:0 12px 24px rgba(15,16,19,0.08);
  min-width:150px; display:flex; flex-direction:column;
}
nav.links .dropdown-inner a{padding:12px 16px; border-bottom:1px solid var(--line);}
nav.links .dropdown-inner a:last-child{border-bottom:none;}
nav.links .dropdown-inner a:hover{background:var(--bg-card); color:var(--orange);}
nav.links .competition-nav .dropdown-inner{min-width:235px;}
nav.links .competition-nav .dropdown-inner a{display:flex; flex-direction:column; gap:4px;}
nav.links .competition-nav .dropdown-inner small{font-family:var(--mono); font-size:9px; color:var(--muted); letter-spacing:.08em;}
nav.links .dropdown-note{padding:11px 16px; color:var(--muted); font-family:var(--mono); font-size:9px; letter-spacing:.08em;}
.nav-icons{display:flex; align-items:center; gap:18px;}
.icon-btn{
  font-family:var(--mono); font-size:12px; text-transform:uppercase;
  display:flex; align-items:center; gap:6px; letter-spacing:0.08em;
}

/* ===== Hero (shared) ===== */
.hero{
  position:relative;
  overflow:hidden;
  padding:80px 0 40px;
  border-bottom:1px solid var(--line);
}
/* bled 100px past each edge: most paths are drawn flush (0 -> 1240), so without
   this the drift below would pull their ends into view and leave a gap. The
   bleed must exceed the largest travel in the keyframes (80px). */
.hero-waves{position:absolute; top:0; bottom:0; left:-100px; right:-100px; width:auto; z-index:0; opacity:1;}
/* The SVG carries stroke-opacity 0.06-0.10 which, multiplied by the old 0.55
   container opacity, rendered the lines at 3-5% — invisible, so their drift
   was invisible too. Overriding here (CSS beats the presentation attribute)
   keeps the source untouched while restoring some depth between layers. */
.hero-waves path{stroke-opacity:0.15;}
.hero-waves path:nth-child(2n){stroke-opacity:0.11;}
.hero-waves path:nth-child(3n){stroke-opacity:0.19;}
.hero-inner{position:relative; z-index:1;}

/* ===== Drifting line-art (hero + dark CTA) =====
   Each path drifts on its own timing so the lines slide past one another
   instead of moving as one block. Travel and duration are set so every path
   moves at 4-8 px/s: below roughly 3 px/s a continuous drift reads as a still
   image, which is what a slower first attempt looked like. */
.hero-waves path, .cta-dark .waves path{
  animation:wave-drift 9s ease-in-out infinite alternate;
  will-change:transform;
}
.hero-waves path:nth-child(3n+1), .cta-dark .waves path:nth-child(3n+1){
  animation-duration:11s; animation-delay:-6s;
}
.hero-waves path:nth-child(3n+2), .cta-dark .waves path:nth-child(3n+2){
  animation-duration:7s; animation-delay:-9s; animation-name:wave-drift-alt;
}
.hero-waves path:nth-child(4n), .cta-dark .waves path:nth-child(4n){
  animation-duration:10s; animation-delay:-3s;
}
@keyframes wave-drift{
  from{transform:translate(0, 0);}
  to{transform:translate(-80px, 12px);}
}
@keyframes wave-drift-alt{
  from{transform:translate(-60px, -10px);}
  to{transform:translate(40px, 10px);}
}
.hero h1{
  font-family:var(--head);
  font-size:clamp(36px, 6.4vw, 84px);
  line-height:0.98;
  text-transform:uppercase;
  margin:16px 0 22px;
  max-width:920px;
}
.hero h1 em{font-style:normal; color:var(--orange);}
.hero p.sub{max-width:540px; color:var(--muted); font-size:16px; margin-bottom:30px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:48px;}

/* ===== Homepage hero ===== */
.home-page{overflow-x:clip;}
.home-hero{border-bottom:none; padding-bottom:40px;}
.home-hero .hero-inner{display:flex; flex-direction:column; align-items:flex-start;}
.home-hero p.sub{max-width:620px; font-size:17px; line-height:1.65;}
.home-hero .hero-ctas{align-items:center;}
.home-text-link{
  font-family:var(--mono); font-size:12px; text-transform:uppercase;
  letter-spacing:0.08em; border-bottom:1px solid var(--ink); padding:8px 0 4px;
}
.home-text-link span{color:var(--orange); margin-left:4px;}
.home-text-link:hover{color:var(--orange);}

/* ===== Marquee ticker ===== */
.ticker-wrap{
  overflow:hidden;
  border-bottom:1px solid var(--line);
  padding-bottom:20px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track{
  display:flex; gap:18px; width:max-content;
  font-family:var(--mono); font-size:12px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--muted);
  animation:marquee 26s linear infinite;
}
.ticker-track:hover{animation-play-state:paused;}
.ticker-track a{transition:color .15s ease;}
.ticker-track a:hover{color:var(--orange);}
.ticker-track b{color:var(--ink);}
.ticker-track .dot{color:var(--orange);}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ===== Section heading pattern ===== */
.section{padding:72px 0;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:36px; flex-wrap:wrap; gap:16px;
  border-bottom:1px solid var(--line);
  padding-bottom:22px;
}
.section-head h2{
  font-family:var(--head);
  font-size:clamp(26px, 3.6vw, 42px);
  text-transform:uppercase;
  margin-top:6px;
}
.section-head .see-all{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.08em; border-bottom:1px solid var(--ink); padding-bottom:2px;}

/* ===== Filters (index page) ===== */
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px;}
.results-filters{margin-bottom:18px;}
.filter-btn{
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em;
  padding:9px 16px; border:1px solid var(--line); background:var(--bg-card); color:var(--muted);
  cursor:pointer; transition:all .15s ease;
}
.filter-btn:hover{border-color:var(--ink); color:var(--ink);}
.filter-btn.active{background:var(--ink); border-color:var(--ink); color:var(--bg);}
.search-input{
  font-family:var(--mono); font-size:12px; letter-spacing:0.04em;
  padding:9px 14px; border:1px solid var(--line); background:var(--bg-card); color:var(--ink);
  min-width:220px;
}
.search-input::placeholder{color:var(--muted);}

/* ===== Rankings (homepage) ===== */
.rankings-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;}
.ranking-col{min-width:0; background:var(--bg-card); border:1px solid var(--line);}
.ranking-col-head{
  padding:18px 20px; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
}
.ranking-col-head h3{font-family:var(--head); font-size:15px; text-transform:uppercase; letter-spacing:0.01em;}
.ranking-col-head .tag{font-family:var(--mono); font-size:10px; color:var(--orange); text-transform:uppercase; letter-spacing:0.08em;}
.ranking-row{display:flex; align-items:center; gap:14px; padding:13px 20px; border-bottom:1px solid var(--line); transition:background .15s ease;}
.ranking-row:last-child{border-bottom:none;}
.ranking-row:hover{background:rgba(221,106,52,0.06);}
.ranking-rank{font-family:var(--head); font-size:18px; color:var(--orange); width:26px; flex-shrink:0;}
.ranking-row .id-block{min-width:0; flex:1;}
.ranking-row .name{font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ranking-row .sub{font-size:10px; color:var(--muted); font-family:var(--mono); text-transform:uppercase; letter-spacing:0.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ranking-row .pts{flex-shrink:0; font-family:var(--mono); font-size:12px; color:var(--ink); font-weight:700; background:var(--bg); border:1px solid var(--line); padding:3px 8px;}
.home-rankings{padding-bottom:72px;}

/* ===== Best Equipment marquee (continuous slow scroll, one card per category) ===== */
.eq-carousel-section{overflow:hidden;}
.carousel{position:relative; background:var(--dark); color:#fff; overflow:hidden; user-select:none;}
.carousel::before, .carousel::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(32px, 6vw, 90px);
  z-index:2; pointer-events:none;
}
.carousel::before{left:0; background:linear-gradient(to right, var(--dark), rgba(13,16,19,0));}
.carousel::after{right:0; background:linear-gradient(to left, var(--dark), rgba(13,16,19,0));}
.carousel-track{display:flex; will-change:transform; touch-action:pan-y; cursor:grab;}
.carousel-track:active{cursor:grabbing;}
.carousel-slide{
  flex:0 0 clamp(320px, 28vw, 420px);
  border-right:1px solid rgba(255,255,255,0.08);
  padding:34px 30px 30px;
  display:flex; flex-direction:column; gap:18px;
}
.carousel-slide .slide-head{
  display:flex; flex-direction:column; gap:5px;
  padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.12);
}
.carousel-slide .slide-head .idx{font-family:var(--mono); font-size:11px; letter-spacing:0.16em; color:var(--orange);}
.carousel-slide .slide-head h3{font-family:var(--head); font-size:26px; text-transform:uppercase; line-height:1; color:#fff;}
.carousel-slide .slide-head .cat-sub{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:0.12em; color:rgba(255,255,255,0.45);}
.carousel-slide .podium{display:flex; flex-direction:column; flex:1;}
.podium-item{
  display:flex; align-items:flex-start; gap:14px;
  padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.podium-item:last-child{border-bottom:none; padding-bottom:0;}
.podium-item .p-rank{
  font-family:var(--head); font-size:19px; line-height:1.2;
  color:rgba(255,255,255,0.25); width:20px; flex-shrink:0;
}
.podium-item .p-thumb{
  flex:0 0 48px; width:48px; height:48px;
  background:#fff; border:1px solid rgba(255,255,255,0.2); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.podium-item .p-thumb img{width:100%; height:100%; object-fit:contain;}
.podium-item.rank-1 .p-rank{color:var(--orange);}
.podium-item .p-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:8px;}
.podium-item h4{
  font-family:var(--head); font-size:14px;
  text-transform:uppercase; line-height:1.25; color:#fff;
  overflow-wrap:break-word;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.podium-item.rank-1 h4{font-size:16px;}
.podium-item .p-bar{height:3px; background:rgba(255,255,255,0.1); overflow:hidden;}
.podium-item .p-bar span{display:block; height:100%; background:var(--orange);}
.podium-item.rank-2 .p-bar span, .podium-item.rank-3 .p-bar span{background:rgba(255,255,255,0.35);}
.podium-item .p-foot{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.podium-item .p-meta{
  font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:0.08em;
  color:rgba(255,255,255,0.5);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.podium-item .p-shop{
  flex-shrink:0;
  font-family:var(--mono); text-transform:uppercase; letter-spacing:0.1em; font-size:10px;
  padding:5px 12px; border:1px solid rgba(255,255,255,0.3); color:#fff;
  transition:all .15s ease;
}
.podium-item .p-shop:hover{background:var(--orange); border-color:var(--orange); color:#fff;}
.podium-item .p-shop.is-muted{color:rgba(255,255,255,0.45); border-color:rgba(255,255,255,0.14);}

.home-page a:focus-visible,
.home-page button:focus-visible,
.home-page input:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
}

/* ===== Rider grid & card ===== */
.grid-riders{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.rider-card{
  background:var(--bg-card);
  border:1px solid var(--line);
  display:flex; flex-direction:column;
  transition:transform .18s ease, border-color .18s ease;
}
.rider-card:hover{transform:translateY(-4px); border-color:var(--ink);}
.rider-card .photo{
  aspect-ratio:4/5; overflow:hidden; border-bottom:1px solid var(--line);
  background:linear-gradient(155deg, var(--dark2), var(--dark));
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.rider-card .photo img{width:100%; height:100%; object-fit:cover;}
.rider-card .initials{
  font-family:var(--head); font-size:40px; color:rgba(255,255,255,0.35);
}
.rider-card .badge{
  position:absolute; top:10px; left:10px;
  font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:0.08em;
  background:rgba(13,16,19,0.65); color:#fff; padding:4px 8px;
}
.rider-card .info{padding:14px 16px 18px; display:flex; flex-direction:column; gap:6px;}
.rider-card .country{font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--orange);}
.rider-card h3{font-size:16px; font-weight:700; line-height:1.25;}
.rider-card .team{font-size:12px; color:var(--muted);}

/* ===== Rider detail page ===== */
.back-link{
  font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--muted); display:inline-flex; align-items:center; gap:6px; margin-bottom:28px;
}
.back-link:hover{color:var(--orange);}
.rider-hero{
  display:grid; grid-template-columns:280px 1fr; gap:40px; align-items:start;
  /* padding-bottom matches main's padding-top (18px) so the rider photo sits
     with the same breathing room above and below */
  padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:0;
}
.rider-hero .photo{
  aspect-ratio:4/5; border:1px solid var(--line);
  background:linear-gradient(155deg, var(--dark2), var(--dark));
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.rider-hero .photo img{width:100%; height:100%; object-fit:cover;}
.rider-hero .initials{font-family:var(--head); font-size:64px; color:rgba(255,255,255,0.35);}
.rider-hero h1{
  font-family:var(--head); font-size:clamp(32px, 5vw, 58px); text-transform:uppercase; line-height:0.98; margin:10px 0 14px;
}
.rider-meta{display:flex; flex-wrap:wrap; gap:10px 26px; margin-bottom:20px;}
.rider-meta .item{font-size:13px;}
.rider-meta .item span{display:block; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin-bottom:3px;}
.rider-meta .ig-link{color:var(--orange); border-bottom:1px solid transparent; transition:border-color .15s ease;}
.rider-meta .ig-link:hover{border-bottom-color:var(--orange);}
.rider-bio{color:var(--muted); font-size:15px; max-width:560px; margin-bottom:18px;}
.sponsor-row{display:flex; flex-wrap:wrap; gap:8px;}
.sponsor-row span{
  font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:0.08em;
  border:1px solid var(--line); padding:5px 10px; color:var(--muted);
}

/* Equipment — grouped sections */
.equip-group{margin-bottom:34px;}
.equip-group-head{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.equip-group-head .icon{
  width:34px; height:34px; flex-shrink:0; color:var(--orange);
  border:1px solid var(--line); background:var(--bg-card); padding:6px;
}
.equip-group-head .icon svg{width:100%; height:100%;}
.equip-group-head .idx{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:0.08em;}
.equip-group-head h3{font-family:var(--head); font-size:16px; text-transform:uppercase; letter-spacing:0.01em;}

/* ===== Bike build composition (frame centre, fork front, shock rear) ===== */
.bike-build{
  position:relative;
  /* full-bleed: breaks out of the centred .wrap so the banner spans the page */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  /* no border-top: the banner now butts straight against the rider hero,
     whose own bottom border already draws the separation */
  border-bottom:1px solid var(--line);
  /* white, not --bg-card: the product shots are cut out on white, so anything
     else leaves a visible rectangle around every part */
  background:#fff;
  padding:18px clamp(24px, 5vw, 80px) 32px; margin-bottom:36px; overflow:hidden;
}
.bb-label{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:0.18em;
  font-size:12px; color:var(--muted);
  /* leave room for the replay button pinned to the panel's top-right */
  padding-right:110px;
}
.bb-stage{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:340px;
}
.bb-part{margin:0; text-align:center;}
.bb-part img{display:block; margin:0 auto; object-fit:contain;}
.bb-part figcaption{
  display:flex; flex-direction:column; gap:2px; margin-top:10px;
}
.bb-cat{
  font-family:var(--mono); font-size:10px; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--orange);
}
.bb-name{font-size:13px; font-weight:600; line-height:1.25;}
.bb-part a{display:block;}
.bb-part a:hover .bb-name{color:var(--orange);}

/* the frame is the centrepiece */
/* explicit width: as a flex item with only max-width, the figure would
   shrink to nothing and collapse the 100%-wide image inside it */
.bb-frame{position:relative; z-index:2; flex:0 0 auto; width:min(560px, 62%);}
.bb-frame img{width:100%; max-height:300px;}
.bb-frame .bb-name{font-size:15px;}

/* --- frame reveal: outline draws itself, becomes a pencil sketch, then the
   photo resolves. Layers are stacked; only the photo is in normal flow so the
   block keeps its natural height. Nothing animates until .playing is set, so
   the sequence starts when the composition is scrolled into view. --- */
.bb-reveal{position:relative; display:block;}
.bb-reveal .bb-sketch, .bb-reveal .bb-draw{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; pointer-events:none;
}
.bb-reveal .bb-draw{z-index:3;}
.bb-reveal .bb-sketch{z-index:2;}
.bb-reveal .bb-photo{position:relative; z-index:1;}

/* pre-roll state: photo hidden, drawing ready to run */
.bb-reveal.armed .bb-photo{opacity:0;}
.bb-reveal.armed .bb-sketch{opacity:0;}
.bb-reveal.armed .bb-draw{opacity:1;}

.bb-reveal.playing .bb-draw{animation:bb-drop-outline .7s 2.8s ease forwards;}
.bb-reveal.playing .bb-sketch{
  animation:bb-in .7s 2.55s ease forwards, bb-out 1s 4.6s ease forwards;
}
.bb-reveal.playing .bb-photo{
  animation:bb-photo-in 1.15s 4.55s cubic-bezier(.2,.65,.25,1) forwards;
}

@keyframes bb-in{to{opacity:1;}}
@keyframes bb-out{from{opacity:1;} to{opacity:0;}}
@keyframes bb-drop-outline{to{opacity:0;}}
@keyframes bb-photo-in{from{opacity:0; transform:scale(1.012);} to{opacity:1; transform:scale(1);}}

/* Replay affordance, revealed once the sequence has run. It sits on the panel
   rather than inside .bb-reveal, because that span lives inside the shop <a>
   and a button nested in an anchor would be invalid and would navigate on
   click. */
.bb-replay{
  position:absolute; right:16px; top:16px; z-index:4;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:0.1em;
  border:1px solid var(--line); background:rgba(255,255,255,0.86); backdrop-filter:blur(6px);
  color:var(--muted); padding:6px 11px; cursor:pointer;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease, color .15s ease, border-color .15s ease;
}
.bike-build.reveal-done .bb-replay{opacity:1; pointer-events:auto;}
.bb-replay:hover{color:var(--ink); border-color:var(--ink);}

@media (prefers-reduced-motion: reduce){
  .hero-waves path, .cta-dark .waves path{animation:none;}
  .bb-reveal .bb-sketch, .bb-reveal .bb-draw{display:none;}
  .bb-reveal .bb-photo, .bb-reveal.armed .bb-photo{opacity:1; animation:none;}
  .bb-replay{display:none;}
}

/* Fork over the front, shock tucked in behind. Frame product shots follow the
   industry convention of putting the head tube on the right, so "front" is the
   right-hand side — checked across every frame photo in use. The insets are
   chosen so both boxes overlap the frame instead of floating at the edges. */
.bb-fork, .bb-shock{position:absolute; top:50%; transform:translateY(-50%); width:clamp(110px, 15vw, 170px);}
.bb-fork{right:15%; z-index:3;}
.bb-shock{left:15%; z-index:1; opacity:0.92;}
/* no drop-shadow here: the JPEGs are opaque white rectangles, so the shadow
   traces the image box instead of the part and reads as a stray card */
.bb-fork img{width:100%; max-height:240px;}
.bb-shock img{width:100%; max-height:190px;}
.bb-shock .bb-name, .bb-fork .bb-name{font-size:12px;}
.equip-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;}
.equip-item{
  border:1px solid var(--line); border-left:3px solid var(--orange); background:var(--bg-card);
  padding:16px 18px; display:flex; justify-content:space-between; align-items:center; gap:16px;
  transition:border-color .15s ease, transform .15s ease;
}
.equip-item:hover{transform:translateX(2px); border-left-color:var(--orange-dark);}
.equip-item > div{flex:1; min-width:0;}
.equip-item .equip-thumb{
  flex:0 0 56px; width:56px; height:56px;
  border:1px solid var(--line); background:#fff; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.equip-item .equip-thumb img{width:100%; height:100%; object-fit:contain;}
.equip-item .cat{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:0.1em; color:var(--orange); margin-bottom:6px; display:block;}
.equip-item h4{font-size:15px; font-weight:600; line-height:1.3;}
.equip-item .detail{font-size:12px; color:var(--muted); margin-top:3px;}
.equip-item .equip-actions{flex:0 0 auto; display:flex; align-items:center; gap:8px;}
.equip-item .shop-btn{
  flex-shrink:0;
  font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:0.08em;
  border:1.5px solid var(--ink); padding:9px 14px; white-space:nowrap;
  transition:all .15s ease;
}
.equip-item .shop-btn:hover{background:var(--ink); color:var(--bg);}
.equip-item .amazon-btn{border-color:var(--orange); color:var(--orange-dark);}
.equip-item .amazon-btn:hover{background:var(--orange); border-color:var(--orange); color:#fff;}

/* Results table */
.results-table{width:100%; border-collapse:collapse; font-size:13px;}
.results-table th{
  font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted);
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);
}
.results-table td{padding:12px; border-bottom:1px solid var(--line);}
.results-table tr:hover td{background:var(--bg-card);}
.results-table .points{font-family:var(--mono); color:var(--orange); font-weight:700;}
.results-table .result{font-weight:600;}
.results-table .podium{font-family:var(--head); letter-spacing:0.02em;}
.results-table .p1{color:#b8860b;}
.results-table .p2{color:#6b7076;}
.results-table .p3{color:#a05a2c;}

/* ===== Standings page ===== */
/* two stacked chip rows: competition first (broadest), then category */
.standings-comp{margin-bottom:12px;}
.standings-block{display:none;}
.standings-block.is-shown{display:block;}
/* the round columns can outgrow the page — scroll the table, never the body */
.standings-scroll{overflow-x:auto; border:1px solid var(--line); background:var(--bg-card);}
.standings-table{width:100%; border-collapse:collapse; font-size:13px; min-width:640px;}
.standings-table th{
  font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--muted); text-align:left; padding:12px; border-bottom:1px solid var(--line);
  white-space:nowrap; position:sticky; top:0; background:var(--bg-card);
}
.standings-table td{padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle;}
.standings-table tr:last-child td{border-bottom:none;}
.standings-table tbody tr:hover td{background:rgba(221,106,52,0.06);}
.standings-table .pos{font-family:var(--head); font-size:15px; color:var(--muted); width:44px;}
.standings-table .pos.p1{color:#b8860b;}
.standings-table .pos.p2{color:#6b7076;}
.standings-table .pos.p3{color:#a05a2c;}
.standings-table .who{min-width:200px; font-weight:600;}
.standings-table .who a:hover{color:var(--orange);}
.standings-table .who .sub{
  display:block; font-family:var(--mono); font-size:10px; font-weight:400;
  text-transform:uppercase; letter-spacing:0.04em; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:34ch;
}
.standings-table .nat{font-family:var(--mono); font-size:11px; color:var(--muted); width:48px;}
.standings-table th.rd, .standings-table td.rd{text-align:center; width:60px; font-family:var(--mono); font-size:11px;}
.standings-table td.rd.blank{color:rgba(21,22,26,0.22);}
.standings-table th.total, .standings-table td.total{
  text-align:right; font-family:var(--mono); font-weight:700; color:var(--orange); white-space:nowrap;
}
.standings-foot{
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--muted); margin-top:12px;
}
.mobile-total{display:none;}

/* Standings-only layout and controls */
.standings-page{overflow-x:clip;}
.standings-hero{padding:64px 0 30px; border-bottom:none;}
.standings-hero h1{margin-bottom:0;}
.standings-section{padding-top:22px;}
.standings-overview{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line); background:var(--bg-card); margin-bottom:32px;
}
.standings-overview > div{min-width:0; padding:20px; border-right:1px solid var(--line);}
.standings-overview > div:last-child{border-right:none;}
.standings-overview strong{
  display:block; font-family:var(--head); font-size:clamp(20px,2vw,28px);
  line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.standings-overview span{
  display:block; margin-top:7px; font-family:var(--mono); font-size:10px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
}
.standings-toolbar{
  display:grid; grid-template-columns:auto auto minmax(240px,1fr); align-items:end;
  gap:22px; padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--line);
}
.standings-toolbar .filters{margin-bottom:0;}
.toolbar-label,.standings-search > span{
  display:block; margin-bottom:8px; font-family:var(--mono); font-size:10px;
  text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
}
.competition-badge{
  display:inline-flex; align-items:center; min-height:36px; padding:9px 16px;
  background:var(--ink); color:var(--bg); font-family:var(--mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.08em;
}
.standings-search{justify-self:stretch;}
.standings-search .search-input{width:100%; min-width:0; min-height:36px;}
.standings-swipe{
  display:none; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:9px; font-family:var(--mono); font-size:10px;
  text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
}
.standings-swipe b{font-size:17px; color:var(--orange); transition:opacity .2s ease;}
.standings-swipe.is-complete b{opacity:.2;}
.standings-table caption{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.standings-table abbr{text-decoration:none; cursor:help;}
.standings-table th.total,.standings-table td.total{border-left:1px solid var(--line);}
.standings-table .pos.p1{color:var(--orange);}
.standings-table tbody tr:has(.pos.p1) td{background:rgba(221,106,52,.045);}
.standings-empty{
  padding:28px; border:1px solid var(--line); background:var(--bg-card);
  text-align:center; color:var(--muted); font-family:var(--mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.08em;
}
.standings-legend{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 24px;
  padding-top:18px; border-top:1px solid var(--line); margin-top:28px;
  color:var(--muted); font-family:var(--mono); font-size:10px;
  text-transform:uppercase; letter-spacing:.06em;
}
.standings-legend b{color:var(--orange); font-size:16px; line-height:0;}
.standings-page .filter-btn:focus-visible,
.standings-page .search-input:focus-visible,
.standings-page .standings-table a:focus-visible{
  outline:3px solid var(--orange); outline-offset:2px;
}

@media (max-width:820px){
  .standings-hero{padding:52px 0 22px;}
  .standings-hero h1{font-size:clamp(36px,12vw,48px);}
  .standings-overview{grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:26px;}
  .standings-overview > div:nth-child(2){border-right:none;}
  .standings-overview > div:nth-child(-n+2){border-bottom:1px solid var(--line);}
  .standings-toolbar{grid-template-columns:1fr; gap:16px;}
  .standings-toolbar [data-standings-filters]{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
  .standings-toolbar .filter-btn{min-height:40px; padding:9px 10px;}
  .competition-badge{width:100%; justify-content:center;}
  .standings-search .search-input{min-height:44px;}
  .standings-swipe{display:flex;}
  .standings-table{min-width:760px;}
  .standings-table th,.standings-table td{padding:10px 9px;}
  .standings-table th:nth-child(1),.standings-table td:nth-child(1){
    position:sticky; left:0; z-index:3; width:42px; min-width:42px; background:var(--bg-card);
  }
  .standings-table th:nth-child(2),.standings-table td:nth-child(2){
    position:sticky; left:42px; z-index:3; min-width:174px; max-width:174px;
    background:var(--bg-card); box-shadow:1px 0 0 var(--line), 12px 0 18px -18px rgba(13,16,19,.65);
  }
  .standings-table thead th:nth-child(-n+2){z-index:5;}
  .standings-table tbody tr:hover td:nth-child(-n+2),
  .standings-table tbody tr:has(.pos.p1) td:nth-child(-n+2){background:#f1eee9;}
  .standings-table .who{min-width:174px; max-width:174px;}
  .standings-table .who .sub{max-width:150px;}
  .standings-table .mobile-total{
    display:inline-block; margin-top:5px; color:var(--orange); font-family:var(--mono);
    font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  }
  .standings-table .nat{min-width:48px;}
  .standings-table th.rd,.standings-table td.rd{min-width:66px;}
  .standings-foot{margin-top:10px;}
  .standings-legend{flex-direction:column;}
}

@media (max-width:560px){
  .standings-page .icon-btn{display:none;}
  .standings-section{padding-top:16px;}
  .standings-overview > div{padding:15px 14px;}
  .standings-overview strong{font-size:18px;}
  .standings-overview > div:nth-child(n+3) strong{font-size:16px; white-space:normal;}
  .standings-overview span{font-size:9px;}
}

/* ===== FAQ accordion ===== */
.faq{max-width:820px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{display:flex; justify-content:space-between; align-items:center; padding:22px 0; cursor:pointer; gap:20px;}
.faq-q h3{font-size:16px; font-weight:600; display:flex; align-items:baseline; gap:14px;}
.faq-num{font-family:var(--mono); font-size:12px; color:var(--orange);}
.faq-q .plus{font-family:var(--mono); font-size:20px; color:var(--muted); transition:transform .25s ease, color .25s ease; flex-shrink:0;}
.faq-item.open .faq-q .plus{transform:rotate(45deg); color:var(--orange);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.faq-a p{padding:0 0 22px; color:var(--muted); font-size:14px; max-width:640px;}

/* ===== CTA dark ===== */
.cta-dark{
  position:relative;
  background:linear-gradient(180deg, var(--dark) 0%, var(--dark) 30%, var(--dark2) 65%, var(--dark3) 100%);
  color:#fff;
  padding:90px 0 0;
  overflow:hidden;
}
.cta-dark .waves{position:absolute; top:0; bottom:0; left:-100px; right:-100px; width:auto; opacity:1;}
/* same reasoning as .hero-waves: white strokes at 0.06-0.10 times a 0.5
   container were rendering at 3-5% against the dark panel */
.cta-dark .waves path{stroke-opacity:0.17;}
.cta-dark .waves path:nth-child(2n){stroke-opacity:0.12;}
.cta-dark .waves path:nth-child(3n){stroke-opacity:0.22;}
.cta-inner{position:relative; z-index:1; padding-bottom:80px;}
.cta-dark .label{color:#9aa0a5;}
.cta-dark h2{
  font-family:var(--head); font-size:clamp(30px, 5.4vw, 58px); text-transform:uppercase;
  line-height:1.02; margin:14px 0 16px; max-width:760px;
}
.cta-dark p.sub{color:#c7cbce; max-width:440px; margin-bottom:28px; font-size:16px;}
.cta-form{display:flex; gap:0; max-width:460px; margin-bottom:18px;}
.cta-form input{
  flex:1; font-family:var(--mono); font-size:13px; padding:15px 16px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.3); border-right:none; color:#fff;
}
.cta-form input::placeholder{color:#8f959a;}
.cta-form button{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:0.08em; font-size:13px;
  padding:15px 26px; background:#fff; color:var(--dark); border:1px solid #fff; cursor:pointer;
}
.cta-form button:hover{background:var(--orange); border-color:var(--orange); color:#fff;}
.cta-dark .fineprint{font-family:var(--mono); font-size:11px; color:#9aa0a5; text-transform:uppercase; letter-spacing:0.06em;}

/* ===== Scroll reveal ===== */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* ===== Footer (single row, Hotcut-style) ===== */
footer{background:var(--bg); border-top:1px solid var(--line); padding:36px 0;}
.footer-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px;}
.footer-logo{font-family:var(--head); font-size:16px; display:flex; align-items:center; gap:9px;}
.footer-logo .mark{width:20px; height:20px; background:var(--orange); transform:skew(-6deg); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--head); font-size:11px;}
.footer-links{display:flex; gap:24px; flex-wrap:wrap; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink);}
.footer-links a:hover{color:var(--orange);}
.footer-copy{font-family:var(--mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em;}
.footer-updated{
  margin-top:18px;
  padding-top:12px;
  border-top:1px solid rgba(21,22,26,0.06);
  font-family:var(--mono);
  font-size:9px;
  color:var(--muted);
  letter-spacing:0.04em;
  opacity:0.58;
  text-align:right;
}

/* ===== Editorial SEO guides ===== */
.guide-page{background:var(--bg); color:var(--ink);}
.guide-hero{padding:88px 0 64px; border-bottom:1px solid var(--line);}
.guide-hero h1{font-family:var(--head); font-size:clamp(38px,7vw,82px); line-height:.96; text-transform:uppercase; max-width:1050px; margin:18px 0 24px;}
.guide-hero .lead{font-size:clamp(18px,2.2vw,24px); line-height:1.55; max-width:820px; color:var(--ink);}
.guide-meta{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:30px; font-family:var(--mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em;}
.guide-layout{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:72px; padding:72px 0 96px; align-items:start;}
.guide-content{max-width:820px;}
.guide-content section{padding:0 0 52px; margin:0 0 52px; border-bottom:1px solid var(--line);}
.guide-content h2{font-family:var(--head); font-size:clamp(28px,4vw,46px); line-height:1.05; text-transform:uppercase; margin:0 0 22px;}
.guide-content h3{font-family:var(--head); font-size:21px; text-transform:uppercase; margin:30px 0 12px;}
.guide-content p,.guide-content li{font-size:17px; line-height:1.75; color:#34363a;}
.guide-content p+p{margin-top:16px;}
.guide-content ul{padding-left:20px; margin:18px 0;}
.guide-content li+li{margin-top:9px;}
.guide-callout{padding:24px 26px; margin:26px 0; border-left:4px solid var(--orange); background:#fff; box-shadow:0 12px 34px rgba(21,22,26,.06);}
.guide-callout strong{display:block; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--orange); margin-bottom:8px;}
.guide-sidebar{position:sticky; top:110px; display:grid; gap:18px;}
.guide-card{background:#fff; border:1px solid var(--line); padding:24px;}
.guide-card h2{font-family:var(--head); font-size:18px; text-transform:uppercase; margin:0 0 14px;}
.guide-card a{display:block; padding:10px 0; border-top:1px solid var(--line); font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em;}
.guide-card a:hover{color:var(--orange);}
.language-list{display:flex; flex-wrap:wrap; gap:8px;}
.language-list a{display:inline-flex; padding:7px 9px; border:1px solid var(--line);}
.language-list a[aria-current="page"]{background:var(--dark); color:#fff; border-color:var(--dark);}
.guide-faq details{border-top:1px solid var(--line); padding:18px 0;}
.guide-faq summary{cursor:pointer; font-family:var(--head); font-size:18px; text-transform:uppercase;}
.guide-faq details p{margin-top:14px;}
.breadcrumbs{display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:20px 0; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);}
.breadcrumbs a:hover{color:var(--orange);}
.breadcrumbs span[aria-current="page"]{color:var(--ink);}
@media(max-width:900px){.guide-layout{grid-template-columns:1fr; gap:30px}.guide-sidebar{position:static; order:-1}.guide-hero{padding:60px 0 46px}}

/* ===== Contact ===== */
.contact-layout{display:grid; grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr); gap:72px; padding:64px 32px 100px; align-items:start;}
.contact-intro h2,.contact-panel h2{font-family:var(--head); font-size:clamp(30px,4vw,48px); line-height:1; text-transform:uppercase; margin:14px 0 28px;}
.contact-checklist{list-style:none; padding:0; margin:0; border-top:1px solid var(--line);}
.contact-checklist li{display:grid; gap:5px; padding:18px 0; border-bottom:1px solid var(--line);}
.contact-checklist strong{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--orange-dark);}
.contact-checklist span{font-size:14px; line-height:1.6; color:var(--muted);}
.contact-direct{margin-top:28px; padding:22px; background:var(--dark); color:#fff;}
.contact-direct span{display:block; margin-bottom:9px; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:#aeb2b7;}
.contact-direct a{font-weight:700; overflow-wrap:anywhere; text-decoration:underline; text-underline-offset:4px;}
.contact-panel{background:#fff; border:1px solid var(--line); padding:clamp(24px,4vw,48px); box-shadow:0 18px 48px rgba(21,22,26,.06);}
.contact-field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.contact-field{display:grid; gap:8px; margin-bottom:18px;}
.contact-field label{font-family:var(--mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;}
.contact-field label>span{font-weight:400; color:var(--muted); text-transform:none; letter-spacing:0;}
.contact-field input,.contact-field select,.contact-field textarea{width:100%; border:1px solid #cfd1d0; border-radius:0; background:#fafaf8; color:var(--ink); font:inherit; padding:13px 14px; transition:border-color .15s ease,box-shadow .15s ease;}
.contact-field textarea{resize:vertical; min-height:180px; line-height:1.55;}
.contact-field input:focus,.contact-field select:focus,.contact-field textarea:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(238,93,34,.12);}
.contact-field small{color:var(--muted); font-size:11px;}
.contact-consent{display:flex; align-items:flex-start; gap:11px; font-size:12px; line-height:1.55; color:var(--muted); cursor:pointer;}
.contact-consent input{margin-top:3px; flex:0 0 auto; accent-color:var(--orange);}
.contact-consent a{text-decoration:underline; text-underline-offset:2px; color:var(--ink);}
.contact-trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.contact-submit{margin-top:24px; min-width:180px; border:0; cursor:pointer;}
.contact-submit[disabled]{opacity:.6; cursor:progress;}
.contact-status{min-height:1.4em; margin-top:16px; font-family:var(--mono); font-size:11px; line-height:1.5;}
.contact-status.is-done{color:#247a48;}
.contact-status.is-error{color:#b33b23;}
.contact-required{margin-top:6px; color:var(--muted); font-size:10px;}
@media(max-width:900px){.contact-layout{grid-template-columns:1fr; gap:36px; padding:42px 32px 80px}.contact-intro{max-width:720px}}
@media(max-width:560px){.contact-layout{padding-left:20px;padding-right:20px}.contact-field-row{grid-template-columns:1fr}.contact-panel{padding:24px 18px}.contact-submit{width:100%}.guide-hero h1{font-size:clamp(28px,7.7vw,34px);overflow-wrap:anywhere}.nav-row{padding-left:20px;padding-right:20px}.logo{font-size:17px}.logo .mark{width:28px;height:28px}}

/* ===== Competitions ===== */
.competition-hero,.competition-detail-hero{position:relative; overflow:hidden; background:var(--dark); color:#fff; padding:92px 0 82px;}
.competition-hero::after,.competition-detail-hero::after{content:""; position:absolute; width:520px; height:520px; right:-120px; top:-270px; border:1px solid rgba(255,255,255,.1); border-radius:50%; box-shadow:0 0 0 90px rgba(255,255,255,.025),0 0 0 180px rgba(255,255,255,.015);}
.competition-hero .wrap,.competition-detail-hero .wrap{position:relative; z-index:1;}
.competition-hero h1,.competition-detail-hero h1{font-family:var(--head); font-size:clamp(46px,7vw,94px); line-height:.92; text-transform:uppercase; max-width:980px; margin:18px 0 26px;}
.competition-hero p,.competition-detail-hero p{max-width:750px; color:#bdc1c5; font-size:18px; line-height:1.7;}
.competition-detail-hero .hero-ctas{margin-top:32px;}
.competition-detail-hero .btn:not(.btn-solid){border-color:#62666d; color:#fff;}
.competition-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;}
.competition-card{display:flex; flex-direction:column; align-items:flex-start; min-height:430px; padding:36px; background:#fff; border:1px solid var(--line); box-shadow:0 14px 38px rgba(21,22,26,.05);}
.competition-card-top{width:100%; display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; text-transform:uppercase; color:var(--muted);}
.competition-status{color:#25774a;}
.competition-sport{margin-top:54px; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--orange-dark);}
.competition-card h2{font-family:var(--head); font-size:clamp(30px,4vw,48px); line-height:1; text-transform:uppercase; margin:12px 0 18px;}
.competition-card p{max-width:650px; color:var(--muted); line-height:1.65;}
.competition-card-stats{display:flex; flex-wrap:wrap; gap:14px 22px; margin:28px 0; font-family:var(--mono); font-size:10px; text-transform:uppercase; color:var(--muted);}
.competition-card-stats strong{color:var(--ink); font-size:15px;}
.competition-card .btn{margin-top:auto;}
.competition-note{display:grid; grid-template-columns:220px 1fr; gap:30px; margin-top:28px; padding:28px; border:1px solid var(--line);}
.competition-note strong{font-family:var(--head); font-size:22px; text-transform:uppercase;}
.competition-note p{color:var(--muted); line-height:1.65;}
.competition-overview-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr); gap:72px;}
.competition-summary h2{font-family:var(--head); font-size:clamp(34px,5vw,58px); line-height:1; text-transform:uppercase; margin:16px 0 22px;}
.competition-summary>p{font-size:17px; line-height:1.75; color:#34363a;}
.competition-summary dl{display:grid; grid-template-columns:repeat(3,1fr); margin-top:30px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.competition-summary dl div{padding:20px 16px 20px 0;}
.competition-summary dt{font-family:var(--mono); font-size:9px; text-transform:uppercase; color:var(--muted);}
.competition-summary dd{margin:8px 0 0; font-family:var(--head); font-size:22px; text-transform:uppercase;}
.competition-leaders{display:grid; align-content:start; gap:12px;}
.competition-leaders>a{display:grid; grid-template-columns:1fr auto; gap:4px 18px; padding:22px; background:#fff; border:1px solid var(--line);}
.competition-leaders>a:hover{border-color:var(--orange);}
.competition-leaders span,.competition-leaders small{font-family:var(--mono); font-size:9px; text-transform:uppercase; color:var(--muted);}
.competition-leaders strong{font-family:var(--head); font-size:22px; text-transform:uppercase;}
.competition-leaders small{grid-column:2; grid-row:1/3; align-self:center; color:var(--orange-dark);}
.competition-rounds{background:#fff;}
.competition-rounds ol{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line);}
.competition-rounds li{display:grid; grid-template-columns:48px 1fr; gap:16px; padding:22px 18px 22px 0; border-bottom:1px solid var(--line);}
.competition-rounds li:nth-child(odd){border-right:1px solid var(--line);}
.competition-rounds li:nth-child(even){padding-left:22px;}
.competition-rounds li>span{font-family:var(--head); font-size:25px; color:var(--orange);}
.competition-rounds strong{display:block; font-size:14px;}
.competition-rounds small{display:block; margin-top:6px; font-family:var(--mono); font-size:9px; text-transform:uppercase; color:var(--muted);}
.competition-link-grid{display:grid; grid-template-columns:repeat(4,1fr);}
.competition-link-grid>a{display:grid; min-height:180px; padding:24px; border:1px solid var(--line); background:#fff;}
.competition-link-grid>a+a{border-left:0;}
.competition-link-grid>a:hover{background:var(--dark); color:#fff;}
.competition-link-grid span,.competition-link-grid small{font-family:var(--mono); font-size:9px; text-transform:uppercase; color:var(--muted);}
.competition-link-grid strong{align-self:end; font-family:var(--head); font-size:23px; text-transform:uppercase;}
@media(max-width:900px){.competition-grid{grid-template-columns:1fr}.competition-overview-grid{grid-template-columns:1fr;gap:42px}.competition-link-grid{grid-template-columns:repeat(2,1fr)}.competition-link-grid>a:nth-child(3){border-left:1px solid var(--line)}.competition-link-grid>a:nth-child(n+3){border-top:0}}
@media(max-width:620px){.competition-hero,.competition-detail-hero{padding:66px 0 58px}.competition-hero h1,.competition-detail-hero h1{font-size:clamp(34px,9vw,42px);overflow-wrap:anywhere}.competition-note{grid-template-columns:1fr}.competition-card{min-height:0;padding:26px 22px}.competition-sport{margin-top:38px}.competition-summary dl{grid-template-columns:1fr}.competition-summary dl div+div{border-top:1px solid var(--line)}.competition-rounds ol{grid-template-columns:1fr}.competition-rounds li:nth-child(odd){border-right:0}.competition-rounds li:nth-child(even){padding-left:0}.competition-link-grid{grid-template-columns:1fr}.competition-link-grid>a+a,.competition-link-grid>a:nth-child(3){border-left:1px solid var(--line);border-top:0}}

/* ===== Equipment database ===== */
.equipment-hero{position:relative; overflow:hidden; background:var(--dark); color:#fff; border-bottom:none;}
.equipment-hero::before{content:""; position:absolute; width:480px; height:480px; right:-130px; top:-180px; border:1px solid rgba(255,255,255,.09); border-radius:50%; box-shadow:0 0 0 90px rgba(255,255,255,.025),0 0 0 180px rgba(255,255,255,.015);}
.equipment-hero-layout{position:relative; z-index:1; min-height:650px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(470px,1.1fr); gap:64px; align-items:center;}
.equipment-hero-copy{padding:92px 0 84px;}
.equipment-hero-copy .label{color:#ffad78;}
.equipment-hero-copy h1{font-family:var(--head); font-size:clamp(50px,6.4vw,92px); line-height:.9; letter-spacing:-.035em; text-transform:uppercase; max-width:680px; margin:20px 0 26px;}
.equipment-hero-copy h1 em{color:var(--orange); font-style:normal;}
.equipment-hero-copy>p{max-width:620px; color:#b8bcc1; font-size:17px; line-height:1.7;}
.equipment-hero-copy .hero-ctas{margin:34px 0 44px;}
.equipment-compare-cta{border-color:#656971; color:#fff;}
.equipment-compare-cta:hover{background:#fff; border-color:#fff; color:var(--dark);}
.equipment-hero-stats{display:flex; gap:0; border-top:1px solid #33363c; max-width:540px;}
.equipment-hero-stats>div{display:grid; gap:3px; min-width:132px; padding:20px 28px 0 0; margin-right:28px; border-right:1px solid #33363c;}
.equipment-hero-stats>div:last-child{border-right:none; margin-right:0;}
.equipment-hero-stats strong{font-family:var(--head); font-size:26px; color:#fff;}
.equipment-hero-stats span{font-family:var(--mono); font-size:9px; letter-spacing:.09em; text-transform:uppercase; color:#8f949a;}
.equipment-hero-visual{position:relative; height:570px; align-self:end;}
.equipment-hero-product{position:absolute; background:#f8f7f3; color:var(--ink); border:1px solid rgba(255,255,255,.2); box-shadow:0 24px 70px rgba(0,0,0,.32); overflow:hidden;}
.equipment-hero-product img,.equipment-hero-icon{display:flex; align-items:center; justify-content:center; width:100%; height:100%; object-fit:contain; padding:24px;}
.equipment-hero-icon svg{width:100px; height:100px; color:var(--orange);}
.equipment-hero-product figcaption{position:absolute; left:0; right:0; bottom:0; display:grid; gap:3px; padding:12px 14px; background:linear-gradient(transparent,rgba(12,13,16,.92) 38%); color:#fff;}
.equipment-hero-product figcaption span{font-family:var(--mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:#d38b5b;}
.equipment-hero-product figcaption strong{font-family:var(--head); font-size:13px; line-height:1.05; text-transform:uppercase;}
.hero-product-1{width:330px; height:410px; left:3%; bottom:0; transform:rotate(-3deg);}
.hero-product-2{width:245px; height:305px; right:4%; bottom:56px; transform:rotate(5deg);}
.hero-product-3{width:190px; height:225px; right:22%; top:5px; transform:rotate(-2deg);}
.equipment-catalogue{padding-top:54px;}
.equipment-catalogue-head{display:flex; align-items:end; justify-content:space-between; gap:40px; padding-bottom:28px; border-bottom:1px solid var(--line);}
.equipment-catalogue-head h2{font-family:var(--head); font-size:clamp(38px,5vw,64px); line-height:.95; text-transform:uppercase; margin:12px 0;}
.equipment-catalogue-head p{font-size:15px; color:var(--muted); max-width:630px; line-height:1.65;}
.equipment-group-nav{display:flex; flex-wrap:wrap; gap:8px; padding:22px 0 12px;}
.equipment-group-nav a{padding:9px 12px; border:1px solid var(--line); background:#fff; font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.07em;}
.equipment-group-nav a:hover{border-color:var(--orange); color:var(--orange);}
.equipment-group{padding:64px 0 12px; scroll-margin-top:88px;}
.equipment-group-head{display:grid; grid-template-columns:64px minmax(0,1fr); gap:20px; align-items:start; margin-bottom:24px;}
.equipment-group-icon{width:64px; height:64px; display:flex; align-items:center; justify-content:center; background:var(--orange); color:#fff; transform:skew(-3deg);}
.equipment-group-icon svg{width:34px; height:34px; transform:skew(3deg);}
.equipment-group-head h2{font-family:var(--head); font-size:clamp(28px,4vw,44px); line-height:1; text-transform:uppercase; margin:7px 0 8px;}
.equipment-group-head p{max-width:650px; color:var(--muted); font-size:14px; line-height:1.6;}
.equipment-category-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;}
.equipment-category-card{min-width:0; border:1px solid var(--line); background:#fff; display:flex; flex-direction:column; transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;}
.equipment-category-card:hover{transform:translateY(-5px); border-color:#c2c4c2; box-shadow:0 22px 48px rgba(21,22,26,.11);}
.equipment-category-media{position:relative; height:205px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#f8f8f5,#ecece8); border-bottom:1px solid var(--line);}
.equipment-category-media>img{width:100%; height:100%; object-fit:contain; padding:18px; transition:transform .3s ease; mix-blend-mode:multiply;}
.equipment-category-card:hover .equipment-category-media>img{transform:scale(1.055);}
.equipment-category-icon{display:flex; align-items:center; justify-content:center; color:#bfc1bf;}
.equipment-category-icon svg{width:82px; height:82px;}
.equipment-category-number{position:absolute; left:14px; top:14px; font-family:var(--mono); font-size:9px; color:var(--muted); letter-spacing:.08em;}
.equipment-category-arrow{position:absolute; right:13px; top:11px; width:31px; height:31px; display:flex; align-items:center; justify-content:center; border:1px solid #d4d5d2; background:rgba(255,255,255,.82); transition:all .2s ease;}
.equipment-category-card:hover .equipment-category-arrow{background:var(--orange); border-color:var(--orange); color:#fff;}
.equipment-category-body{display:flex; flex-direction:column; flex:1; padding:22px;}
.equipment-category-body h3{font-family:var(--head); font-size:22px; line-height:1.08; text-transform:uppercase; margin:12px 0 8px; overflow-wrap:anywhere;}
.equipment-category-body>p{font-size:12px; line-height:1.5; color:var(--muted); margin-bottom:22px;}
.equipment-category-stats{display:flex; gap:22px; margin-top:auto; padding-top:17px; border-top:1px solid var(--line); font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);}
.equipment-category-stats strong{color:var(--ink); font-family:var(--head); font-size:17px; margin-right:4px;}
.equipment-compare-banner{display:flex; align-items:center; justify-content:space-between; gap:48px; margin:78px 0 30px; padding:38px 42px; background:var(--dark); color:#fff;}
.equipment-compare-banner .label{color:#ffad78;}
.equipment-compare-banner h2{font-family:var(--head); font-size:clamp(26px,4vw,42px); text-transform:uppercase; margin:9px 0;}
.equipment-compare-banner p{max-width:690px; color:#aeb2b7; line-height:1.6; font-size:14px;}
.equipment-compare-banner .btn{flex-shrink:0;}
.equipment-ranking-list{display:grid; gap:14px;}
.equipment-rank-card{display:grid; grid-template-columns:54px 160px minmax(0,1fr); gap:24px; align-items:center; padding:20px 24px; border:1px solid var(--line); background:#fff;}
.equipment-rank{font-family:var(--head); font-size:27px; color:var(--orange);}
.equipment-rank-card>img,.equipment-placeholder{width:160px; height:120px; object-fit:contain; background:#f4f4f2; display:flex; align-items:center; justify-content:center; font-family:var(--head); color:#c8c9c7;}
.equipment-rank-main h2{font-family:var(--head); font-size:25px; line-height:1.1; text-transform:uppercase; margin:6px 0 8px;}
.equipment-rank-main>p{font-family:var(--mono); font-size:11px; color:var(--muted);}
.equipment-riders{display:flex; flex-wrap:wrap; gap:7px; margin:14px 0;}
.equipment-riders a{padding:6px 8px; border:1px solid var(--line); font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.04em;}
.equipment-riders a:hover{border-color:var(--orange); color:var(--orange);}
.equipment-rank-main .equip-actions{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.equipment-rank-main .shop-btn,.compare-toggle,.compare-clear{
  appearance:none; background:transparent; color:var(--ink); cursor:pointer;
  font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.07em;
  border:1px solid var(--ink); padding:9px 13px; white-space:nowrap; transition:all .15s ease;
}
.equipment-rank-main .shop-btn:hover,.compare-toggle:hover,.compare-clear:hover{background:var(--ink); color:#fff;}
.compare-toggle{border-color:var(--orange); color:var(--orange-dark);}
.compare-toggle.is-selected{background:var(--orange); border-color:var(--orange); color:#fff;}
.rider-summary{max-width:760px; margin-top:22px; font-size:14px; line-height:1.7; color:var(--muted);}

/* ===== Equipment comparator ===== */
.compare-tray{
  position:fixed; left:50%; bottom:18px; z-index:80; width:min(720px,calc(100% - 28px));
  transform:translate(-50%,calc(100% + 40px)); opacity:0; pointer-events:none;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:15px 18px; background:var(--dark); color:#fff; border:1px solid #34363d;
  box-shadow:0 18px 50px rgba(10,11,14,.3); transition:transform .25s ease,opacity .25s ease;
}
.compare-tray.is-visible{transform:translate(-50%,0); opacity:1; pointer-events:auto;}
.compare-tray-copy{display:flex; flex-direction:column; gap:3px; min-width:0;}
.compare-tray-copy strong{font-family:var(--head); font-size:16px; text-transform:uppercase;}
.compare-tray-copy span{font-family:var(--mono); font-size:9px; color:#adb1b7; letter-spacing:.04em;}
.compare-tray-actions{display:flex; align-items:center; gap:9px; flex-shrink:0;}
.compare-tray .compare-clear{border-color:#656971; color:#d9dcdf;}
.compare-tray .compare-clear:hover{background:#fff; border-color:#fff; color:var(--dark);}
.compare-open.is-disabled{opacity:.4; cursor:not-allowed;}
.compare-hero{padding-bottom:60px;}
.compare-notice{padding:22px 24px; margin-bottom:34px; border-left:4px solid var(--orange); background:#fff;}
.compare-notice strong{display:block; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--orange); margin-bottom:7px;}
.compare-notice p{font-size:14px; line-height:1.65; color:var(--muted);}
.compare-empty{text-align:center; padding:64px 24px; border:1px dashed #c9cbc9; background:#fff;}
.compare-empty h2{font-family:var(--head); font-size:clamp(26px,4vw,42px); text-transform:uppercase; margin-bottom:10px;}
.compare-empty p{color:var(--muted); margin:0 auto 24px; max-width:580px;}
.compare-page-head{display:flex; align-items:end; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:22px;}
.compare-page-head h2{font-family:var(--head); font-size:clamp(27px,4vw,44px); text-transform:uppercase; margin-top:8px;}
.compare-hint{padding:13px 16px; margin-bottom:18px; background:#fff3ec; border:1px solid #f0c7af; color:#7c3d1a; font-size:13px;}
.compare-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; align-items:start;}
.compare-card{position:relative; padding:22px; border:1px solid var(--line); background:#fff; min-width:0;}
.compare-card>img,.compare-placeholder{width:100%; height:170px; object-fit:contain; background:#f4f4f2; margin-bottom:18px;}
.compare-placeholder{display:flex; align-items:center; justify-content:center; font-family:var(--head); font-size:34px; color:#c8c9c7;}
.compare-card h3{font-family:var(--head); font-size:23px; line-height:1.08; text-transform:uppercase; margin:7px 0 18px; overflow-wrap:anywhere;}
.compare-remove{position:absolute; top:11px; right:11px; z-index:2; border:1px solid var(--line); background:#fff; padding:6px 8px; font-family:var(--mono); font-size:8px; text-transform:uppercase; cursor:pointer;}
.compare-remove:hover{border-color:var(--orange); color:var(--orange);}
.compare-fact{display:grid; gap:4px; padding:12px 0; border-top:1px solid var(--line);}
.compare-fact span,.compare-riders>span{font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);}
.compare-fact strong{font-size:13px; line-height:1.45; overflow-wrap:anywhere;}
.compare-riders{padding:13px 0; border-top:1px solid var(--line);}
.compare-riders>div{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.compare-riders a{padding:5px 7px; border:1px solid var(--line); font-family:var(--mono); font-size:9px;}
.compare-riders a:hover{border-color:var(--orange); color:var(--orange);}
.compare-source{display:inline-flex; margin-top:8px; border:1px solid var(--ink); padding:9px 12px; font-family:var(--mono); font-size:9px; text-transform:uppercase;}
@media(max-width:900px){
  .equipment-hero-layout{grid-template-columns:1fr; gap:0; min-height:0;}
  .equipment-hero-copy{padding:76px 0 30px;}
  .equipment-hero-visual{height:430px; width:min(620px,100%); justify-self:center; align-self:auto;}
  .hero-product-1{width:290px;height:350px;left:4%}.hero-product-2{width:225px;height:275px;right:4%}.hero-product-3{width:165px;height:195px;right:27%}
  .equipment-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .equipment-compare-banner{align-items:flex-start; flex-direction:column; gap:24px;}
  .equipment-rank-card{grid-template-columns:44px 110px minmax(0,1fr)}.equipment-rank-card>img,.equipment-placeholder{width:110px;height:90px}
}
@media(max-width:620px){
  .equipment-hero-copy{padding:56px 0 20px}.equipment-hero-copy h1{font-size:48px}.equipment-hero-copy>p{font-size:15px}
  .equipment-hero-copy .hero-ctas{display:grid;grid-template-columns:1fr;gap:9px}.equipment-hero-copy .hero-ctas .btn{text-align:center}
  .equipment-hero-stats{justify-content:space-between}.equipment-hero-stats>div{min-width:0;padding-right:14px;margin-right:14px}.equipment-hero-stats strong{font-size:21px}
  .equipment-hero-visual{height:320px}.hero-product-1{width:210px;height:270px;left:0}.hero-product-2{width:155px;height:205px;right:0;bottom:28px}.hero-product-3{width:115px;height:140px;right:21%;top:0}
  .equipment-catalogue{padding-top:34px}.equipment-catalogue-head{align-items:flex-start;flex-direction:column;gap:15px}.equipment-group{padding-top:48px}
  .equipment-group-head{grid-template-columns:48px minmax(0,1fr);gap:14px}.equipment-group-icon{width:48px;height:48px}.equipment-group-icon svg{width:27px;height:27px}
  .equipment-category-grid{grid-template-columns:1fr}.equipment-category-media{height:185px}.equipment-compare-banner{padding:28px 24px;margin-top:58px}
  .equipment-rank-card{grid-template-columns:38px minmax(0,1fr);gap:14px}.equipment-rank-card>img,.equipment-placeholder{display:none}.equipment-rank-main h2{font-size:20px}
  .compare-tray{align-items:stretch;gap:11px;flex-direction:column}.compare-tray-actions{justify-content:flex-end}.compare-page-head{align-items:flex-start;flex-direction:column}.compare-grid{grid-template-columns:1fr}
}

/* ===== Responsive ===== */
@media (max-width:1000px){
  .grid-riders{grid-template-columns:repeat(3,1fr);}
  .rider-hero{grid-template-columns:220px 1fr; gap:28px;}
  .equip-grid{grid-template-columns:1fr;}
  .rankings-grid{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .carousel-slide{flex:0 0 min(82vw, 340px); padding:26px 22px 24px;}
  .carousel-slide .slide-head h3{font-size:22px;}
  /* Not enough width to overlap parts around the frame — stack them instead */
  .bike-build{padding:24px 18px 18px;}
  .bb-stage{flex-direction:column; gap:24px; min-height:0;}
  /* DOM order is shock/frame/fork for the desktop stacking; stacked vertically
     the centrepiece should come first instead */
  .bb-frame{order:1; width:100%; max-width:100%;}
  .bb-fork{order:2;}
  .bb-shock{order:3;}
  .bb-frame img{max-height:220px;}
  .bb-fork, .bb-shock{
    position:static; transform:none; width:auto;
    display:flex; align-items:center; gap:16px; text-align:left;
  }
  .bb-fork img, .bb-shock img{width:80px; max-height:110px; margin:0;}
  .bb-fork figcaption, .bb-shock figcaption{margin-top:0;}
  .bb-fork a, .bb-shock a{display:flex; align-items:center; gap:16px;}
  .nav-toggle{display:flex;}
  nav.links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--bg);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    box-shadow:0 12px 24px rgba(15,16,19,0.08);
  }
  nav.links.open{display:flex;}
  nav.links a{padding:16px 32px; border-bottom:1px solid var(--line);}
  nav.links .nav-item{position:static;}
  nav.links .nav-item > a{display:block;}
  nav.links .caret{display:none;}
  nav.links .dropdown{position:static; display:block; padding-top:0;}
  nav.links .dropdown-inner{border:none; box-shadow:none; background:transparent; min-width:0;}
  nav.links .dropdown-inner a{padding:14px 32px 14px 48px; color:var(--muted);}
  nav.links .dropdown-note{display:block; padding:12px 32px 12px 48px;}
  nav.links .dropdown-inner a:hover{background:transparent;}
  .grid-riders{grid-template-columns:repeat(2,1fr);}
  .rider-hero{grid-template-columns:1fr; gap:22px;}
  .rider-hero .photo{max-width:220px;}
}
@media (max-width:560px){
  .equip-item{display:grid; grid-template-columns:56px minmax(0,1fr); align-items:center; gap:12px; padding:14px;}
  .equip-item:not(:has(.equip-thumb)){grid-template-columns:minmax(0,1fr);}
  .equip-item .equip-thumb{grid-column:1; grid-row:1;}
  .equip-item > div:not(.equip-actions){grid-column:2; min-width:0; width:100%;}
  .equip-item:not(:has(.equip-thumb)) > div:not(.equip-actions){grid-column:1;}
  .equip-item .equip-actions{grid-column:2; width:100%; flex-wrap:wrap; justify-content:flex-start;}
  .equip-item:not(:has(.equip-thumb)) .equip-actions{grid-column:1;}
  .equip-item h4,.equip-item .detail{overflow-wrap:anywhere;}
  .grid-riders{grid-template-columns:1fr;}
  .hero{padding:56px 0 24px;}
  .section{padding:52px 0;}
  .home-page .icon-btn{display:none;}
  .home-hero{padding:52px 0 24px;}
  .home-hero h1{font-size:40px; line-height:0.96; margin-bottom:20px;}
  .home-hero p.sub{font-size:15px; line-height:1.55; margin-bottom:26px;}
  .home-hero .hero-ctas{display:grid; grid-template-columns:1fr 1fr; width:100%; margin-bottom:38px;}
  .home-hero .hero-ctas .btn{width:100%; padding:14px 12px; font-size:11px;}
  .home-hero .home-text-link{grid-column:1 / -1; justify-self:start;}
  .home-hero .ticker-wrap{width:100%; padding-bottom:16px;}
  .home-rankings{padding:52px 0;}
  .home-rankings .section-head{align-items:flex-start;}
  .home-rankings .ranking-row{gap:10px; padding:13px 12px;}
  .home-rankings .ranking-rank{width:25px; font-size:16px;}
  .home-rankings .ranking-row .name{font-size:12px;}
  .home-rankings .ranking-row .sub{font-size:9px;}
  .home-rankings .ranking-row .pts{font-size:10px; padding:3px 6px;}
  .home-page .eq-carousel-section{padding-top:0;}
}

@media (prefers-reduced-motion: reduce){
  .home-page .hero-waves path,
  .home-page .ticker-track,
  .home-page .cta-dark .waves path{animation:none;}
}

/* ---------------------------------------------------------------- newsletter */
/* The label and the honeypot have to stay reachable by assistive tech and by
   bots respectively, so neither can use display:none. */
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.nl-trap{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}

.cta-form{position:relative;}
.cta-form input:focus-visible, .cta-form button:focus-visible{
  outline:2px solid var(--orange); outline-offset:2px;
}
.cta-form button[disabled]{opacity:0.6; cursor:progress;}
.cta-form[hidden]{display:none;}

.cta-status{
  font-family:var(--mono); font-size:12px; letter-spacing:0.02em;
  color:#c7cbce; margin:0 0 10px; min-height:1.2em; max-width:460px;
}
.cta-status:empty{margin-bottom:0;}
.cta-status.is-done{color:#7fd6a2;}
.cta-status.is-error{color:#ff9b7a;}

.cta-dark .fineprint a{color:#c7cbce; text-decoration:underline; text-underline-offset:2px;}
.cta-dark .fineprint a:hover{color:#fff;}

@media (max-width:560px){
  .cta-form{flex-wrap:wrap;}
  .cta-form input{flex:1 1 100%; min-width:0;}
  .cta-form button{flex:1 1 100%; margin-top:8px;}
}