/* =============================================================================
   PITLINE - layout and sections
============================================================================= */

/* -----------------------------------------------------------------------------
   NAV - one line on desktop, 68px tall, never taller than 80px
----------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  height: 68px;
  display: flex;
  align-items: center;
  transition: background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 1px 0 var(--line);
}
@media (prefers-reduced-transparency: reduce) {
  .nav.is-stuck {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.75rem);
  width: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
}
.brand__mark {
  width: 26px;
  height: 26px;
  background: var(--accent);
  clip-path: polygon(0 0, 68% 0, 100% 100%, 32% 100%);
}
.brand__word {
  font-family: var(--font-la);
  font-weight: 800;
  font-stretch: 88%;
  letter-spacing: .12em;
  font-size: .92rem;
  text-transform: uppercase;
}

.nav__links {
  display: none;
  gap: clamp(1rem, 2.2vw, 2rem);
  margin-inline-end: auto;
}
.nav__link {
  font-size: var(--step--1);
  color: var(--fg-2);
  font-weight: 500;
  position: relative;
  padding-block: .35rem;
  transition: color var(--dur-1) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-2) var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="true"] { color: var(--fg); }
.nav__link:hover::after,
.nav__link[aria-current="true"]::after { transform: scaleX(1); }

.nav__tools {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-inline-start: auto;
}

.icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--fg-2);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.icon-btn:hover { color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2); }
.icon-btn svg { width: 18px; height: 18px; }

.theme-toggle .ico-moon { display: none; }
:root[data-theme="light"] .theme-toggle .ico-moon { display: block; }
:root[data-theme="light"] .theme-toggle .ico-sun { display: none; }

.nav__cta { display: none; }
.nav__burger { display: grid; }

@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__burger { display: none; }
}

/* mobile sheet */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--bg);
  display: grid;
  align-content: center;
  gap: .25rem;
  padding: var(--gutter);
  transform: translateY(-101%);
  visibility: hidden;
  transition: transform var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
}
.menu[data-open="true"] {
  transform: none;
  visibility: visible;
  transition: transform var(--dur-3) var(--ease), visibility 0s;
}
.menu__link {
  font-size: var(--step-3);
  font-weight: 800;
  padding-block: .55rem;
  border-block-end: 1px solid var(--line);
}
.menu__cta { margin-block-start: 1.75rem; justify-self: start; }
.menu__close {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: var(--gutter);
}
@media (min-width: 900px) { .menu { display: none; } }

/* -----------------------------------------------------------------------------
   HERO - asymmetric split. Copy leads (right in RTL), the stage carries the weight.
----------------------------------------------------------------------------- */
.hero {
  min-height: 100dvh;
  display: flex;
  padding-block: 6rem 2.5rem;
  position: relative;
  overflow: clip;
}
/* a spotlight behind the bike rather than a corner wash */
.hero::before {
  content: "";
  position: absolute;
  inset-block-start: 12%;
  left: 50%;
  translate: -50% 0;
  width: min(1100px, 92%);
  height: 90%;
  background: radial-gradient(closest-side, var(--accent-wash), transparent 70%);
  pointer-events: none;
}

/* The headline is a two-clause statement, so it leads and the bike sits under
   it as the centrepiece. A split column would break the sentence into ribbons. */
.hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(1.4rem, 2.6vw, 2.4rem);
  width: 100%;
}

.hero h1 {
  /* the floor is set for phones, where the buttons move below the bike and
     leave room the headline can spend */
  font-size: clamp(2.1rem, 4vw, 4.1rem);
  max-width: min(100%, 72rem);
}
.hero h1 .clause { display: block; }
.hero h1 em {
  font-style: normal;
  color: var(--accent-text);
  white-space: nowrap; /* the emphasised word must never break across lines */
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

/* The stage takes whatever height is left, and the bike is sized from that
   height so the hero always fits the viewport. Below the split the bike goes
   back to being sized by width, where height is no longer the scarce axis. */
.hero__stage {
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 900px) {
  .hero__stage .compare {
    height: 100%;
    width: auto;
    max-width: 100%;
  }
}
@media (max-width: 899px) {
  .hero__stage { flex: 0 0 auto; }
  .hero__stage .compare { max-width: min(560px, 100%); }
  /* On a phone the bike no longer reaches the bottom of the viewport, so the
     buttons sit under it: headline, product, action. The source order keeps the
     buttons before the stage because that is what desktop shows, so this is the
     one place where visual and focus order differ by a single step. */
  .hero__cta { order: 1; }
}

/* -----------------------------------------------------------------------------
   COMPARE - drag to wipe between the bare bike and the finished kit.
   --pos is the divider, 0..1 measured from the physical left edge. The kitted
   bike sits on top clipped to the left of the divider, so in RTL the finished
   bike reads first and the bare one trails behind it.
----------------------------------------------------------------------------- */
@property --pos {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}

/* No panel, no border, no notch: the bike sits directly on the page and is
   centred in its own box, with only a soft contact shadow to ground it. */
.compare {
  --pos: .5;
  position: relative;
  width: 100%;
  aspect-ratio: 1240 / 962;
  touch-action: pan-y;
  cursor: ew-resize;
  transition: --pos var(--dur-2) var(--ease);
}
.compare.is-dragging { transition: none; cursor: grabbing; }

/* the floor the bike stands on */
.compare::after {
  content: "";
  position: absolute;
  inset-block-end: 4%;
  inset-inline: 18%;
  height: 6%;
  background: radial-gradient(closest-side, rgb(0 0 0 / .5), transparent 74%);
  filter: blur(9px);
  pointer-events: none;
}
:root[data-theme="light"] .compare::after {
  background: radial-gradient(closest-side, rgb(20 22 26 / .22), transparent 74%);
}

.compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}
.compare__img--top { clip-path: inset(0 calc(100% - var(--pos) * 100%) 0 0); }

/* With the panel gone the labels are plain type, not chips on a surface. */
.compare__tag {
  position: absolute;
  inset-block-start: 0;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .01em; /* Persian is joined: no tracking, no small-caps */
  pointer-events: none;
}
/* physical sides: the clip runs left-to-right regardless of writing direction */
.compare__tag--after {
  left: 0;
  color: var(--accent-text);
  opacity: clamp(0, calc((var(--pos) - .1) * 7), 1);
}
.compare__tag--before {
  right: 0;
  color: var(--fg-3);
  opacity: clamp(0, calc((.9 - var(--pos)) * 7), 1);
}

.compare__handle {
  position: absolute;
  inset-block: 0;
  left: calc(var(--pos) * 100%);
  width: 54px;
  transform: translateX(-50%);
  cursor: ew-resize;
  display: grid;
  place-items: center;
  touch-action: none;
}
.compare__handle::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, var(--accent) 13%, var(--accent) 87%, transparent);
}
.compare__grip {
  position: relative;
  width: 54px;
  height: 54px;
  display: grid;
  grid-auto-flow: column;
  place-items: center;
  gap: 1px;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 8px 26px -10px rgb(0 0 0 / .75);
  transition: transform var(--dur-2) var(--ease);
}
.compare__grip svg { width: 13px; height: 13px; }
.compare__handle:hover .compare__grip,
.compare__handle:focus-visible .compare__grip { transform: scale(1.08); }
.compare.is-dragging .compare__grip { transform: scale(.94); }

/* sits in the clear band above the handlebars: the bike now fills the stage,
   so the bottom edge has no room for a label */
.compare__hint {
  position: absolute;
  inset-block-start: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
  font-size: var(--step--2);
  color: var(--fg-3);
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease);
}
.compare__hint svg { width: 14px; height: 14px; }
.compare.is-touched .compare__hint { opacity: 0; }