/* bye bye design — design system iz embalaže
   barve: #E32B26 rdeča · #111111 ink · #F1F2F3 bone · #F4F2EE warm · #444342 gray
   pisave: Anton (display) · Barlow Condensed (labels/UI) · Barlow (body) */

:root {
  --red:        #E32B26;
  --red-deep:   #C32825;
  --ink:        #111111;
  --ink-2:      #0D0D0D;
  --gray:       #444342;
  --bone:       #F1F2F3;
  --warm:       #F4F2EE;
  --rule:       rgba(17,17,17,.14);
  --rule-strong:rgba(17,17,17,.32);
  --rule-dark:  rgba(241,242,243,.16);

  --f-display: "Anton", "Barlow Condensed", Impact, sans-serif;
  --f-cond:    "Barlow Condensed", "Barlow", sans-serif;
  --f-body:    "Barlow", system-ui, sans-serif;

  --pad: clamp(16px, 3.4vw, 48px);
  --maxw: 1680px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--red); color: var(--bone); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- type ---------- */
.display {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .84;
  letter-spacing: -0.01em;
}
.label {
  font-family: var(--f-cond);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.label-sm { font-family: var(--f-cond); font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.cond { font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .04em; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--gray); }
.eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--red); }
.dark .eyebrow { color: rgba(241,242,243,.62); }

/* ---------- chrome ---------- */
header.nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--ink); color: var(--bone);
  border-bottom: 1px solid var(--rule-dark);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 62px; }
/* Lockup: the mark spans the wordmark's ink — top of the 'b' ascender on line 1
   down to the baseline of 'design' on line 2 (the 'g' descender hangs below it,
   as it should). Measured in Barlow Bold at 19px that block is 1.64em tall and
   its centre sits 0.15em below the centre of the line box that `align-items:
   center` would otherwise use — hence the shift down. Both values are in em, so
   the footer lockup at 24px follows. */
.brand { display: inline-flex; align-items: center; gap: .62em; font-size: 19px; }
.brand svg {
  height: 1.64em;
  width: calc(1.64em * 80 / 96);  /* viewBox 80×96, keep the ratio */
  transform: translateY(0.15em);
  flex: none;
}
/* wordmark = Barlow Bold, normal width — exactly as set on the packaging */
.brand .wm { font-family: var(--f-body); font-weight: 700; font-size: 1em; letter-spacing: -.005em; text-transform: lowercase; line-height: .94; }
.nav-links { display: flex; gap: 26px; }
.nav-links a { font-family: var(--f-cond); font-weight: 600; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; padding: 4px 0; border-bottom: 2px solid transparent; transition: border-color .18s, color .18s; }
.nav-links a:hover { color: var(--red); border-color: var(--red); }
.nav-right { display: flex; align-items: center; gap: 16px; }

.langsw { display: inline-flex; border: 1px solid var(--rule-dark); }
.langsw button { font-family: var(--f-cond); font-weight: 600; font-size: 12px; letter-spacing: .14em; padding: 5px 9px; color: rgba(241,242,243,.55); }
.langsw button[aria-pressed="true"] { background: var(--red); color: #fff; }

.burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.burger span { width: 22px; height: 2px; background: var(--bone); transition: transform .2s, opacity .2s; }
.nav.open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .burger span:nth-child(2) { opacity: 0; }
.nav.open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { display: none; background: var(--ink); border-top: 1px solid var(--rule-dark); }
.nav.open .mobile-menu { display: block; }
.mobile-menu a { display: block; padding: 15px 0; border-bottom: 1px solid var(--rule-dark); font-family: var(--f-cond); font-weight: 600; font-size: 17px; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- hero ---------- */
.hero { background: var(--red); color: #fff; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; min-height: min(88vh, 900px); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px,6vw,88px) 0; position: relative; z-index: 3; }
.hero h1 { margin: 18px 0 0; font-size: clamp(56px, 9.4vw, 172px); }
.hero h1 .ink { color: var(--ink); }
.hero p.lede { margin: 26px 0 0; max-width: 46ch; font-size: clamp(16px,1.25vw,19px); color: rgba(255,255,255,.88); }
/* The sketch is placed against the viewport, not against its column, and moves
   at HALF the rate the window narrows: `50vw` means 2px of narrowing slides it
   1px further left, so it is swallowed by the screen edge gradually rather than
   tracking the layout one-for-one. Its size still follows the hero height, so
   nothing about it is frozen.
   The `min(..., -45px)` cap keeps it bleeding off the edge on wide screens —
   the file is cut along its own left side (the down tube, lower third), and that
   cut has to stay off-page. .hero has overflow:hidden, so that edge clips it.
   The left edge is therefore not free to move right; the overlap with the
   headline comes from the size instead — 142% of the hero height, hung 34% below
   its bottom so the top of the saddle still clears the header. */
.hero-media { position: static; order: -1; min-height: 0; }
.hero-media img.sketch {
  position: absolute;
  top: auto; bottom: -34%;
  right: auto; left: min(calc(50vw - 738px), -45px);
  transform: none;
  height: 142%; width: auto; max-width: none;
}
.hero-mark {
  position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
  width: 58%; max-width: none; opacity: .09; pointer-events: none; z-index: 0;
}
.hero-meta { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--rule-dark); color: rgba(241,242,243,.55); }
.hero .hero-meta { border-top: 1px solid rgba(255,255,255,.35); color: rgba(255,255,255,.8); }
@media (min-width: 861px) { .hero .hero-meta { margin-top: 44px; } }
.hero .eyebrow { color: rgba(255,255,255,.85); }
.hero .eyebrow::before { background: var(--ink); }

/* ---------- buttons ---------- */
.btns { display: flex; gap: 10px; margin-top: 34px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-cond); font-weight: 700; font-size: 14px;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 15px 24px; border: 2px solid currentColor;
  transition: background .2s, color .2s, border-color .2s;
}
.btn .arw { transition: transform .2s; }
.btn:hover .arw { transform: translateX(5px); }
.btn--red { background: var(--red); border-color: var(--red); color: #fff; }
.btn--ink { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.btn--ink:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.hero .btn--ghost { color: #fff; }
.hero .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--red:hover { background: var(--ink); border-color: var(--bone); color: var(--bone); }
.dark .btn--ghost:hover, .hero .btn--ghost:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.btn--ghost:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* ---------- sections ---------- */
section { padding: clamp(56px, 8vw, 120px) 0; }
.dark { background: var(--ink); color: var(--bone); }
.red-sec { background: var(--red); color: #fff; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
h2.big { margin: 0; font-size: clamp(44px, 7.4vw, 132px); }
h2.mid { margin: 0; font-size: clamp(34px, 4.8vw, 80px); }
.red-slash { color: var(--red); }

/* ---------- product ---------- */
.tabs { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 22px 0 44px; }
.tabs button {
  font-family: var(--f-display); text-transform: uppercase;
  font-size: clamp(24px, 3.2vw, 50px); line-height: .9; letter-spacing: -0.01em;
  color: var(--rule-strong); transition: color .18s;
}
.tabs button[aria-selected="true"] { color: var(--red); }
.tabs button:hover { color: var(--ink); }
.dark .tabs button { color: rgba(241,242,243,.34); }
.dark .tabs button[aria-selected="true"] { color: var(--red); }
.dark .tabs button:hover { color: var(--bone); }
.dark .tabs .sep { color: rgba(241,242,243,.22); }
.tabs .sep { font-family: var(--f-display); font-size: clamp(24px,3.2vw,50px); color: var(--rule); }

.prod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.stage { position: relative; background: transparent; aspect-ratio: 4/5; overflow: hidden; }
.stage img { width: 100%; height: 100%; object-fit: contain; padding: 7%; }
.stage .corner { position: absolute; width: 16px; height: 16px; border: 2px solid var(--red); }
.stage .c-tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.stage .c-tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.stage .c-bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.stage .c-br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.stage .stamp { position: absolute; top: 16px; right: 38px; color: var(--gray); }
.stage .fignum { position: absolute; bottom: 16px; left: 38px; color: var(--gray); }
.views { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.views button { font-family: var(--f-cond); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; padding: 9px 14px; border: 1px solid var(--rule-strong); transition: all .18s; }
.views button[aria-selected="true"] { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.views .made { margin-left: auto; color: var(--gray); display: inline-flex; align-items: center; gap: 8px; }
.views .made::before { content: ""; width: 9px; height: 9px; background: var(--red); }

/* the specs table now leads the copy column, so its rule lines up with the
   top of the render beside it */
.specs { border-top: 2px solid var(--ink); margin-top: 0; }
.specs div { display: grid; grid-template-columns: 190px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.specs dt, .specs .k { font-family: var(--f-cond); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gray); }
.specs .v { font-family: var(--f-cond); font-size: 16px; letter-spacing: .01em; }
.price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 32px; }
.price { font-family: var(--f-display); font-size: 76px; line-height: .82; }
.price sup { font-size: 30px; vertical-align: top; color: var(--gray); }

/* ---------- fitment ---------- */
.fit-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(28px,4vw,64px); align-items: start; }
table.fit { width: 100%; border-collapse: collapse; }
table.fit th { text-align: left; font-family: var(--f-cond); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gray); padding: 10px 12px 10px 0; border-bottom: 2px solid var(--ink); }
table.fit td { padding: 18px 12px 18px 0; border-bottom: 1px solid var(--rule); font-family: var(--f-cond); font-size: 17px; letter-spacing: .02em; }
table.fit td.bike { font-family: var(--f-display); font-size: 22px; text-transform: uppercase; letter-spacing: 0; }
table.fit td.ok { color: var(--red); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; text-align: right; }
/* not shipping yet — same shape as .ok so the column reads as one scale,
   but grey, so it never gets mistaken for something you can buy today */
table.fit td.wip { color: var(--gray); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; text-align: right; }
table.fit tr:has(td.wip) td { color: var(--gray); }
.tbl-scroll { overflow-x: auto; }

/* ---------- wild strip ---------- */
.wild { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.wild figure { margin: 0; position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--ink); }
.wild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.wild figure:hover img { transform: scale(1.045); }
.wild figcaption { position: absolute; left: 12px; bottom: 12px; color: #fff; font-family: var(--f-cond); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.6); }

/* ---------- dealers ---------- */
.dealer-list { border-top: 2px solid var(--ink); }
.dealer {
  display: grid; grid-template-columns: 62px minmax(200px,1.4fr) minmax(220px,1.3fr) auto;
  gap: 20px; align-items: start;
  padding: 22px 0; border-bottom: 1px solid var(--rule);
  transition: background .2s;
}
.dealer:hover { background: rgba(17,17,17,.035); }
.dealer .num { font-family: var(--f-display); font-size: 30px; color: var(--red); line-height: 1; }
.dealer .nm { font-family: var(--f-display); font-size: clamp(20px,2vw,28px); text-transform: uppercase; line-height: .95; }
.dealer .shopname { font-family: var(--f-cond); font-weight: 600; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin-top: 5px; }
.dealer .meta { font-family: var(--f-cond); font-size: 15px; letter-spacing: .02em; color: var(--gray); }
.dealer .meta a { border-bottom: 1px solid var(--rule-strong); }
.dealer .maps { font-family: var(--f-cond); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; padding: 10px 14px; border: 2px solid var(--ink); white-space: nowrap; transition: all .18s; }
.dealer .maps:hover { background: var(--ink); color: var(--bone); }
.dealer-cta { border: 2px dashed var(--rule-strong); padding: 26px; margin-top: 26px; display: grid; grid-template-columns: 62px 1fr; gap: 20px; }

/* ---------- install ---------- */
.video { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; overflow: hidden; }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: .78; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.play { position: absolute; inset: 0; display: grid; place-items: center; }
.play i { width: 84px; height: 84px; border: 3px solid var(--red); background: rgba(227,43,38,.14); display: grid; place-items: center; transition: background .2s; }
.play:hover i { background: var(--red); }
.play i::after { content: ""; border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-left: 21px solid #fff; margin-left: 5px; }

/* ---------- process ---------- */
.proc-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px,4vw,64px); align-items: start; }
.proc-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 44px; border-top: 1px solid var(--rule-dark); padding-top: 22px; }
.proc-stats .n { font-family: var(--f-display); font-size: clamp(30px,3.2vw,48px); text-transform: uppercase; line-height: 1; }
.proc-stats .l { font-family: var(--f-cond); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(241,242,243,.6); margin-top: 6px; }

/* ---------- packaging ---------- */
.pack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pack-grid figure { margin: 0; background: var(--warm); padding: 22px; }
.pack-grid img { width: 100%; height: auto; object-fit: contain; max-height: 620px; margin: 0 auto; }

/* ---------- footer ---------- */
footer { background: var(--ink); color: var(--bone); padding: clamp(48px,6vw,88px) 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; }
.foot-grid h4 { margin: 0 0 14px; font-family: var(--f-cond); font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(241,242,243,.5); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.foot-grid a:hover { color: var(--red); }
.foot-bottom { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--rule-dark); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: rgba(241,242,243,.5); }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translate3d(0,18px,0); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .fit-grid { grid-template-columns: 1fr; }
  .wild { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .pack-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  /* phone: stack, and the CAD render may run the full width */
  .hero-grid { grid-template-columns: 1fr; }
  /* media row collapsed to zero so the empty box cannot push the copy down */
  .hero-grid { grid-template-rows: 0 1fr; }
  .hero-media { height: 0; }

  /* Phone: the copy takes the full width, but the sketch is NOT restacked under
     it — it stays absolutely placed against .hero, so it can never jump below
     the text. By this width the screen edge has swallowed most of it, which is
     the intended end of the same movement. The empty media box carries no
     height, so it adds nothing to the flow.
     63px = the sticky nav: the hero ends exactly at the fold. */
  .hero-grid { min-height: calc(100vh - 63px); min-height: calc(100svh - 63px); }
  .hero-copy { justify-content: flex-start; padding: 26px 0 0; }
  .hero-copy .btns { margin-top: 26px; }

  /* Narrow enough that no crop of the sketch reads as anything but a smear:
     drop it entirely rather than let a fragment hang behind the type. The mark
     takes over as the thing filling the panel, so it goes large. */
  .hero-media img.sketch { display: none; }
  .hero-mark { width: 155%; right: -34%; top: auto; bottom: -6%; transform: none; opacity: .11; }

  /* The copy becomes one centred column that stays left-aligned inside itself —
     every element shares the same left edge, the block as a whole is centred. */
  .hero-copy { align-items: center; text-align: left; }
  .hero-copy > * { width: min(100%, 34rem); margin-left: auto; margin-right: auto; }
  /* the lede's own max-width would re-centre it inside that block and break the
     shared left edge with the headline */
  .hero p.lede { max-width: none; }
  /* the meta rule rides the bottom of the full-height copy column */
  .hero .hero-meta { margin-top: auto; }
  .hero .btn { padding: 13px 18px; font-size: 12px; }

  /* touch sizing — these all measured 26–28px tall, too small to hit reliably */
  .langsw button { padding: 9px 13px; }
  .tabs button, .tabs .sep { padding-top: 6px; padding-bottom: 6px; }
  .dealer-cta .maps { padding: 12px 16px; }
  .nav-links { display: none; }
  .burger { display: flex; }
  .dealer { grid-template-columns: 46px 1fr; row-gap: 12px; }
  .dealer .meta { grid-column: 2; }
  .dealer .maps { grid-column: 2; justify-self: start; }
  .dealer-cta { grid-template-columns: 46px 1fr; }
  /* the render keeps its column, so the copy beside it has to give: shorter
     spec labels, price and button allowed to wrap */
  .specs div { grid-template-columns: 104px 1fr; gap: 8px; }
  .specs .v { font-size: 15px; }
  .price { font-size: 56px; }
  .price-row { gap: 14px; }
  .views button { padding: 9px 10px; letter-spacing: .1em; }
  /* squeezed into 343px the five columns broke words across four lines; let the
     table keep a legible width and scroll inside its own overflow box instead */
  table.fit { min-width: 520px; }
}

/* Phone only: the render stops sharing a row with the copy and takes the whole
   width. Above this it always sits beside its text. */
@media (max-width: 620px) {
  .prod-grid, .proc-grid { grid-template-columns: 1fr; }
  .stage, .views { max-width: none; }
  .specs div { grid-template-columns: 130px 1fr; }
  .specs .v { font-size: 16px; }
}