/* ==========================================================================
   CT Alloy — home page
   ========================================================================== */

body.home { background: #000; }

.page {
  position: relative;
  width: 100%;
  background: #000;
  color: var(--silver-100);
}

/* ==========================================================================
   Preloader
   ========================================================================== */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--ink-900);
  color: var(--silver-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  transition: opacity .7s ease;
}
.preloader[hidden] { display: none; }
.preloader.is-done { opacity: 0; pointer-events: none; }
.preloader__ring { position: relative; width: 74px; height: 74px; }
.preloader__ring::before,
.preloader__ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(238, 241, 246, .1);
}
.preloader__ring::after {
  border-color: transparent;
  border-top-color: var(--silver);
  animation: ct-spin 1s linear infinite;
}
.preloader__glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(238, 241, 246, .55);
}
.preloader__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.preloader__label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: rgba(238, 241, 246, .5);
  text-align: center;
}
.preloader__count {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.preloader__pct {
  font-size: 66px;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.preloader__unit { font-size: 22px; color: rgba(238, 241, 246, .4); }
.preloader__track {
  position: relative;
  height: 2px;
  width: 220px;
  background: rgba(238, 241, 246, .12);
  border-radius: 2px;
  overflow: hidden;
}
.preloader__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--steel-400), #e7ebf0);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  background-color: #000;
  background-image:
    radial-gradient(125% 100% at 72% 16%, rgba(72, 80, 88, .5) 0%, rgba(30, 34, 38, .32) 40%, rgba(0, 0, 0, 0) 68%),
    radial-gradient(95% 85% at 18% 92%, rgba(44, 48, 52, .42), rgba(0, 0, 0, 0) 62%),
    linear-gradient(160deg, #121416 0%, #08090b 55%, #000 100%);
}
/* The reveal ends on a straight cut: at the 2 s mark the hero is simply gone,
   with no fade, lift or blur. `display: none` is the point here, not a
   shortcut — there is deliberately nothing left to transition. */
.hero.is-released { display: none; }

/* Without JS the gate can never open, so the hero must not be a fixed overlay
   and the preloader must not exist at all. `.is-static` is the same situation
   reached with JS: home.js sets it whenever the gate is off (coarse pointer or
   reduced motion on a wide screen), where nothing would ever release the hero
   and it would otherwise stay pinned over the entire page. */
.no-js .hero,
.hero.is-static {
  position: relative;
  height: 100svh;
  min-height: 560px;
}
.no-js .preloader,
.no-js .hud,
.hero.is-static .hud { display: none; }
.no-js .hero__video,
.hero.is-static .hero__video {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
}

.hero__type {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1vh;
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.hero__type-row {
  display: flex;
  width: max-content;
  font-size: clamp(120px, 21vw, 340px);
  color: rgba(238, 241, 246, .06);
  animation: ct-marq 26s linear infinite;
}
.hero__type-row--rev {
  color: rgba(154, 160, 168, .08);
  animation: ct-marq-rev 34s linear infinite;
}

.hero__focus,
.hero__ring {
  position: absolute;
  left: 52%;
  top: 47%;
  pointer-events: none;
  border-radius: 50%;
}
.hero__focus {
  transform: translate(-4%, -36%);
  width: min(80vh, 780px);
  height: min(80vh, 780px);
  background: radial-gradient(circle at 50% 46%, rgba(250, 249, 245, .13) 0%, rgba(250, 249, 245, .07) 52%, rgba(250, 249, 245, 0) 72%);
}
.hero__ring {
  transform: translate(75%, 25%);
  width: min(60vh, 588px);
  height: min(60vh, 588px);
  border: 1px solid rgba(238, 241, 246, .12);
  box-shadow: inset 0 0 90px rgba(238, 241, 246, .07);
}

.hero__video {
  position: absolute;
  left: 69px;
  right: 69px;
  top: 60px;
  bottom: 1px;
  width: auto;
  height: auto;
  object-fit: cover;
  display: block;
  transform: translateX(var(--hero-video-x, 211px));
}

.hero__vignette,
.hero__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__vignette { background: none; }
.hero__grade {
  background: linear-gradient(180deg, #000, rgba(5, 6, 10, 0) 22%, rgba(5, 6, 10, 0) 66%, rgba(5, 6, 10, .92) 100%);
}

/* --- top bar --- */

.topbar {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 30px;
  border-radius: 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  background: linear-gradient(-155deg, rgba(250, 249, 245, 0), rgba(6, 7, 10, .82) 100%);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -1px 0 rgba(255, 255, 255, .04);
}
.topbar__left { display: flex; align-items: center; gap: 22px; }
.topbar__logo { display: block; width: auto; height: 42px; }

.menu { position: relative; }
.menu__burger { display: inline-flex; align-items: center; gap: 11px; }
.menu__bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 15px;
}
.menu__bars span { height: 1.5px; background: #fff; border-radius: 2px; }
.menu__panel {
  position: absolute;
  top: 50%;
  left: calc(100% + 14px);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 7px;
  border-radius: 100px;
  white-space: nowrap;
  background: linear-gradient(155deg, rgba(20, 22, 28, .94), rgba(6, 7, 10, .96));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 26px 64px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translate(-8px, -50%);
  pointer-events: none;
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out);
}
.menu__panel.is-open { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.menu__panel a {
  padding: 12px 14px;
  border-radius: 10px;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  letter-spacing: .2em;
  transition: background .2s ease, color .2s ease;
}
.menu__panel a:first-child { color: #fff; }
.menu__panel a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
/* Nothing can open the panel without JS, so lay its links out inline instead
   of leaving them unreachable behind a dead button. */
.no-js .menu__burger { display: none; }
.no-js .menu__panel {
  position: static;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* --- hero title --- */

.hero__title {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  pointer-events: none;
  padding: 0 clamp(28px, 6vw, 96px);
}
.hero__eyebrow-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.hero__eyebrow-line { width: 46px; height: 1px; background: var(--silver-100); }
.hero__eyebrow {
  font-family: var(--mono);
  font-size: clamp(10px, 1.2vw, 13px);
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--steel-500);
}
.hero__h1 {
  margin: 0;
  /* The design hard-codes 127px; clamp keeps the same desktop scale but lets it
     survive phones. */
  font-size: clamp(46px, 9.5vw, 127px);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.02em;
  color: var(--silver-100);
  text-shadow: 0 24px 80px rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
}
.hero__h1 .rim-o {
  display: inline-block;
  width: .8em;
  height: .8em;
  margin: 0 .015em;
  transform: translateY(.03em);
  animation: ct-spin 9s linear infinite;
  will-change: transform;
}
.hero__h1 .rim-o svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero__tagline {
  margin-top: 24px;
  font-size: clamp(17px, 2.4vw, 30px);
  color: rgba(238, 241, 246, .76);
  max-width: 460px;
  line-height: 1.5;
}
.hero__actions {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  pointer-events: auto;
}
.hero__pill {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(238, 241, 246, .5);
  border: 1px solid rgba(238, 241, 246, .18);
  border-radius: 100px;
  padding: 11px 16px;
}

/* --- hero HUD --- */

.hud {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  width: min(560px, 82vw);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hud__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(238, 241, 246, .55);
}
.hud__hint {
  color: var(--silver-100);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.hud__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(208, 71, 43, .2);
  animation: ct-bob 1.8s ease-in-out infinite;
  flex: none;
}
.hud__seq { color: rgba(238, 241, 246, .4); }
.hud__track { position: relative; height: 3px; width: 100%; }
.hud__rail {
  position: absolute;
  inset: 0;
  background: rgba(238, 241, 246, .14);
  border-radius: 3px;
  overflow: hidden;
}
.hud__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--silver), var(--silver-100));
  box-shadow: 0 0 12px rgba(180, 186, 194, .55);
}
.hud__knob {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(238, 241, 246, .4));
}
.hud__knob svg { display: block; width: 100%; height: 100%; }

/* ==========================================================================
   Banner — "shoe for your car"
   ========================================================================== */

.banner {
  position: relative;
  z-index: 5;
  padding: 74px 34px 88px;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #14161d 0%, #0a0b0e 55%, #05060a 100%);
}
.banner__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .11;
  pointer-events: none;
  z-index: 0;
}
.banner__inner {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
}
.banner__corner {
  position: absolute;
  width: 36px;
  height: 36px;
  pointer-events: none;
}
.banner__corner--tl { top: -6px; left: -6px; border-top: 2px solid rgba(255, 255, 255, .4); border-left: 2px solid rgba(255, 255, 255, .4); }
.banner__corner--tr { top: -6px; right: -6px; border-top: 2px solid rgba(255, 255, 255, .4); border-right: 2px solid rgba(255, 255, 255, .4); }
.banner__corner--bl { bottom: -6px; left: -6px; border-bottom: 2px solid rgba(255, 255, 255, .4); border-left: 2px solid rgba(255, 255, 255, .4); }
.banner__corner--br { bottom: -6px; right: -6px; border-bottom: 2px solid rgba(255, 255, 255, .4); border-right: 2px solid rgba(255, 255, 255, .4); }
.banner__spine {
  position: absolute;
  top: 50%;
  left: -20px;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .34);
  pointer-events: none;
}
.banner__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.banner__title {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 56px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
}
.banner__sub {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.banner__badges {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.banner__ticker {
  margin-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  overflow: hidden;
  padding: 11px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.banner__ticker-inner {
  display: flex;
  width: max-content;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  animation: ct-marq 26s linear infinite;
}

.showcase {
  position: relative;
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 28px;
  align-items: center;
}
.showcase__glow {
  position: absolute;
  inset: -9% 9% 6% -7%;
  background: linear-gradient(150deg, #fff, #b3b3b3);
  border-radius: 30px;
  z-index: 0;
  box-shadow: 0 30px 64px -22px rgba(138, 138, 138, .75);
  opacity: .06;
  pointer-events: none;
}
.showcase__disc {
  position: relative;
  z-index: 1;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: transform .35s var(--ease-soft);
}
.showcase__disc:hover { transform: scale(1.08); }
.showcase__disc::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%);
  transform: translateX(-160%);
  transition: transform .8s ease;
}
.showcase__disc:hover::after { transform: translateX(160%); }

.domino {
  text-align: center;
  margin-top: 40px;
  font-family: var(--mono);
  font-size: clamp(12px, 1.7vw, 19px);
  letter-spacing: 1.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  display: flex;
  gap: .9em;
  justify-content: center;
  flex-wrap: wrap;
}
.domino span {
  display: inline-block;
  transform-origin: bottom center;
  opacity: 0;
  animation: ct-domino .6s var(--ease-soft) both;
  animation-play-state: paused;
}
.domino.is-playing span { animation-play-state: running; }
.no-js .domino span { opacity: 1; animation: none; }

/* ==========================================================================
   Wheel technology

   Replaced the old "Featured rims" grid of eight hand-picked wheels. The home
   page now opens on the three processes the catalogue is built around, one
   card each, and the card is the route into that part of the gallery — which
   is also why the separate category chip row above the grid is gone: the cards
   carry the categories themselves.

   The cards are light slabs on a black page, the same treatment as .rim-card,
   because that contrast is the whole look of the dark theme.
   ========================================================================== */

.tech {
  position: relative;
  z-index: 5;
  background: #000;
  padding: 74px 34px 88px;
}
.tech__inner { max-width: 1320px; margin: 0 auto; }
.tech__head {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 0 14px;
}
/* The old .featured__title had no rule at all, so a section heading landed at
   the UA default 24px while every other band on the page ran 44-84px. */
.tech__title {
  margin: 0;
  flex: none;
  font-size: clamp(30px, 3.8vw, 50px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--silver-100);
}
.tech__title em {
  font-style: normal;
  color: rgba(238, 241, 246, .55);
}
.tech__lede {
  margin: 0 0 44px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(238, 241, 246, .58);
  text-wrap: pretty;
}

.tech__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.techcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #fff 0%, #f3f4f7 58%, #eaecf0 100%);
  border: 1px solid rgba(12, 15, 20, .07);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(12, 15, 20, .04);
  transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft), border-color .45s ease;
}
.techcard:hover {
  transform: translateY(-7px);
  box-shadow: 0 30px 54px -20px rgba(12, 15, 20, .34);
  border-color: rgba(12, 15, 20, .14);
}
/* A family with nothing behind it is hidden by CT.initSiteNav() via
   [data-family]; .techcard sets display, which outranks the UA [hidden] rule. */
.techcard[hidden] { display: none; }
.techcard__top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(201, 206, 214, 0), var(--silver) 50%, rgba(201, 206, 214, 0));
}
.techcard__index {
  position: absolute;
  top: 15px;
  left: 17px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: rgba(12, 15, 20, .32);
}
.techcard__tally {
  position: absolute;
  top: 13px;
  right: 15px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(12, 15, 20, .36);
  border: 1px solid rgba(12, 15, 20, .12);
  border-radius: 100px;
  padding: 3px 9px;
}
.techcard__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-top: 10px;
}
.techcard__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(52% 52% at 50% 49%, rgba(58, 64, 72, .34) 0%, rgba(58, 64, 72, .15) 56%, rgba(150, 158, 168, 0) 74%);
}
.techcard__shadow {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 12%;
  height: 14px;
  background: var(--ink);
  transform: skewX(-34deg);
  filter: blur(8px);
  opacity: .2;
}
.techcard__figure {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.techcard__img {
  width: 84%;
  height: 84%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 14px 22px rgba(12, 15, 20, .2));
  transition: transform .55s var(--ease-soft);
}
.techcard:hover .techcard__img { transform: scale(1.06) rotate(5deg); }

.techcard__body {
  padding: 6px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
/* Uppercase in CSS, not in the markup — the heading is a data-i18n target and
   the language switch rewrites its textContent. */
.techcard__name {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.techcard__note {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .02em;
  line-height: 1.5;
  color: rgba(12, 15, 20, .5);
}
.techcard__hr {
  height: 1px;
  margin-top: 3px;
  background: linear-gradient(90deg, rgba(12, 15, 20, .13), rgba(12, 15, 20, 0));
}
.techcard__tech {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(12, 15, 20, .66);
  text-wrap: pretty;
}

/* Sub-constructions. Only Forged has more than one today, so this row is
   absent from the other two cards by design rather than by accident. */
.techcard__kinds {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 3px;
}
.techcard__kinds a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 13px;
  border-radius: 11px;
  background: rgba(12, 15, 20, .04);
  border: 1px solid rgba(12, 15, 20, .09);
  transition: background .22s ease, border-color .22s ease, transform .22s var(--ease-out);
}
.techcard__kinds a[hidden] { display: none; }
.techcard__kinds a:hover {
  background: rgba(12, 15, 20, .08);
  border-color: rgba(12, 15, 20, .2);
  transform: translateY(-2px);
}
.techcard__kinds span {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}
/* Deliberately not white-space: nowrap — this sits inside a grid cell that gets
   down to ~280px on a phone, and a nowrap note would prop the card open. */
.techcard__kinds em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: right;
  color: rgba(12, 15, 20, .45);
}

/* margin-top:auto pins the CTA to the bottom, so the three cards line their
   links up even though the Forged card carries an extra row. */
.techcard__cta {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(12, 15, 20, .62);
  transition: color .25s ease;
}
.techcard__cta span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(12, 15, 20, .16);
  font-size: 12px;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.techcard:hover .techcard__cta { color: var(--ink); }
.techcard:hover .techcard__cta span,
.techcard__cta:hover span {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: translateX(3px);
}

.tech__more { display: flex; justify-content: center; margin-top: 56px; }
.tech__more .btn--cta span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;

  height: 30px;
  border-radius: 50%;
  background: rgba(12, 15, 20, .1);
  font-size: 15px;
}

/* ==========================================================================
   Wheels for reals
   ========================================================================== */

.wheels {
  position: relative;
  z-index: 5;
  background: #000;
}
.wheels__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: stretch;
  position: relative;
}
.wheels__ghost {
  position: absolute;
  left: -20%;
  top: 6%;
  width: 62%;
  height: 124%;
  background: url('../img/wheels-face.webp') center / contain no-repeat;
  transform: scale(1.45);
  opacity: .12;
  filter: blur(1px);
  pointer-events: none;
  z-index: 2;
}
/* The design export left this as a 92px sliver pinned by hand-tuned negative
   margins; as a real two-column split it wants to fill its column. */
.wheels__strip {
  position: relative;
  z-index: 3;
  min-height: 400px;
  height: 100%;
  background: url('../img/wheels-face.webp') center / cover no-repeat;
  overflow: hidden;
}
.wheels__strip-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.wheels__bling {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .85) 50%, transparent);
  mix-blend-mode: screen;
  animation: ct-bling 3.6s ease-in-out infinite;
}
.wheels__sparkle {
  position: absolute;
  background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, .5) 35%, transparent 70%);
  animation: ct-sparkle 3.6s ease-in-out infinite;
}
.wheels__copy {
  padding: 72px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wheels__copy h2 {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--silver-100);
}
.wheels__eyebrow {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--steel-500);
}
.wheels__copy p {
  margin: 26px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(238, 241, 246, .62);
  max-width: 380px;
  text-wrap: pretty;
}

/* ==========================================================================
   Top notch / forging
   ========================================================================== */

.topnotch {
  position: relative;
  z-index: 5;
  background: #000;
  padding: 80px 34px;
  overflow: hidden;
}
.topnotch__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 114%;
  object-fit: cover;
  opacity: .1;
  pointer-events: none;
  z-index: 0;
}
.topnotch__inner {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.topnotch__inner h2 {
  margin: 0;
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--silver-100);
}
.topnotch__eyebrow {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(238, 241, 246, .5);
}
.topnotch__inner p {
  margin: 30px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(238, 241, 246, .62);
  max-width: 400px;
  text-wrap: pretty;
}
.topnotch__figure {
  position: relative;
  aspect-ratio: 16 / 10;
}
.topnotch__exploded {
  position: absolute;
  inset: 0;
  background: url('../img/rim-exploded.webp') center / contain no-repeat;
  transform-origin: center center;
  animation: ct-squish 4.2s ease-in-out infinite;
  will-change: transform;
}
.topnotch__caption {
  position: absolute;
  left: 0;
  bottom: -6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(238, 241, 246, .42);
}

/* ==========================================================================
   About
   ========================================================================== */

.about {
  position: relative;
  z-index: 5;
  background: #000;
  padding: 84px 34px 90px;
}
.about__inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.about__inner h2 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--silver-100);
}
.about__eyebrow {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(238, 241, 246, .45);
}
.about__copy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 44px;
  text-align: left;
}
.about__copy p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(238, 241, 246, .6);
}
.about__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.about__tile {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
}
.about__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter .45s var(--ease-out), transform .45s var(--ease-out);
}
.about__tile:hover img,
.about__tile:focus-within img {
  filter: blur(7px) brightness(.5);
  transform: scale(1.06);
}
.about__tile figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 4px 20px rgba(0, 0, 0, .6);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s ease, transform .45s var(--ease-out);
  pointer-events: none;
}
.about__tile:hover figcaption,
.about__tile:focus-within figcaption {
  opacity: 1;
  transform: none;
}
/* Hover reveals are unreachable on touch — show the caption outright there. */
@media (hover: none) {
  .about__tile figcaption { opacity: 1; transform: none; }
  .about__tile img { filter: brightness(.55); }
}

/* ==========================================================================
   FAQ

   A <details>/<summary> accordion, so it works with no JavaScript and the
   answers sit in the DOM whether or not they are open — which is what makes
   them indexable. Styled off .tech so the two dark bands read as siblings.
   ========================================================================== */

.faq {
  position: relative;
  z-index: 5;
  background: #000;
  padding: 74px 34px 88px;
  border-top: 1px solid rgba(238, 241, 246, .07);
}
.faq__inner { max-width: 1100px; margin: 0 auto; }
.faq__head {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 0 14px;
}
.faq__title {
  margin: 0;
  flex: none;
  font-size: clamp(30px, 3.8vw, 50px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--silver-100);
}
.faq__title em {
  font-style: normal;
  color: rgba(238, 241, 246, .55);
}
.faq__lede {
  margin: 0 0 38px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(238, 241, 246, .58);
  text-wrap: pretty;
}

.faq__list {
  border-top: 1px solid rgba(238, 241, 246, .1);
}
.faq__item {
  border-bottom: 1px solid rgba(238, 241, 246, .1);
}
.faq__item summary {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  transition: color .25s ease;
}
/* Safari paints its own disclosure triangle through a pseudo-element that
   `list-style: none` does not reach. */
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover h3,
.faq__item summary:focus-visible h3 { color: var(--silver-100); }
.faq__item summary:focus-visible {
  outline: 2px solid rgba(238, 241, 246, .5);
  outline-offset: 4px;
  border-radius: 4px;
}
/* The <h3> is inside the <summary> so the questions keep a real place in the
   document outline — a crawler reading headings sees them, not just body text. */
.faq__item summary h3 {
  margin: 0;
  flex: 1;
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.005em;
  color: rgba(238, 241, 246, .82);
  transition: color .25s ease;
}
/* Drawn rather than a glyph, so it can rotate into a minus on open. */
.faq__item summary::after {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 6px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  color: rgba(238, 241, 246, .4);
  transition: transform .3s var(--ease-out), color .25s ease;
}
/* 45°, not 90° — a plus rotated a quarter turn is still a plus. This lands on
   an ×, which also reads as "close" rather than "expand". */
.faq__item[open] summary::after {
  transform: rotate(45deg);
  color: rgba(238, 241, 246, .7);
}
.faq__item summary:hover::after { color: rgba(238, 241, 246, .75); }

.faq__answer {
  padding: 0 44px 26px 0;
  max-width: 78ch;
}
.faq__answer p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(238, 241, 246, .6);
  text-wrap: pretty;
}
.faq__answer strong {
  font-weight: 600;
  color: rgba(238, 241, 246, .85);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .tech__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

@media (max-width: 1024px) {
  .tech__grid { grid-template-columns: repeat(2, 1fr); }
  .wheels__inner { grid-template-columns: 1fr; }
  .wheels__ghost { display: none; }
  .wheels__strip { min-height: 260px; }
  .wheels__copy { padding: 48px 28px 56px; }
  .wheels__copy p { max-width: none; }
  .topnotch__inner { grid-template-columns: 1fr; gap: 40px; }
  .topnotch__inner p { max-width: none; }
  .topbar__logo { height: 36px; }
}

@media (max-width: 900px) {
  /* Below this width the scroll-scrub gate is disabled (see home.js) and the
     hero becomes an ordinary section in the flow. */
  .hero {
    position: relative;
    height: 100svh;
    min-height: 560px;
  }
  .hero__ring { display: none; }
  .hud { display: none; }
  /* No gate below this width, so no glide — let the clip fill the hero. */
  .hero__video {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }
  .hero__title {
    justify-content: flex-end;
    padding-bottom: clamp(52px, 11vh, 104px);
  }
  .hero__grade {
    background: linear-gradient(180deg,
      rgba(0, 0, 0, .86) 0%,
      rgba(0, 0, 0, .22) 13%,
      rgba(5, 6, 10, 0) 33%,
      rgba(5, 6, 10, .58) 57%,
      rgba(5, 6, 10, .89) 76%,
      var(--ink-900) 100%);
  }
  .hero__eyebrow-row { margin-bottom: 16px; }
  .hero__eyebrow { color: rgba(238, 241, 246, .74); }
  .hero__h1 { text-shadow: 0 2px 16px rgba(0, 0, 0, .8), 0 18px 60px rgba(0, 0, 0, .6); }
  .hero__tagline {
    margin-top: 18px;
    color: rgba(238, 241, 246, .88);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .75);
  }
  .hero__actions { margin-top: 24px; }
  /* Outlined pills read as nothing over chrome — give them their own ground. */
  .hero__pill {
    color: rgba(238, 241, 246, .82);
    background: rgba(8, 9, 13, .58);
    border-color: rgba(238, 241, 246, .3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .menu__panel {
    top: calc(100% + 12px);
    left: 0;
    transform: translate(0, 8px);
    flex-direction: column;
    align-items: stretch;
    border-radius: 16px;
  }
  .menu__panel.is-open { transform: translate(0, 0); }
  .topbar { padding: 14px 16px; gap: 10px; }
  .topbar__left { gap: 12px; }
  .tech__grid { grid-template-columns: repeat(2, 1fr); }
  .about__copy { grid-template-columns: 1fr; gap: 22px; }
  .banner__badges { align-items: flex-start; }
  .banner__spine { display: none; }
}

@media (max-width: 640px) {
  .banner,
  .tech,
  .faq,
  .about { padding-left: 18px; padding-right: 18px; }
  .banner { padding-top: 54px; padding-bottom: 64px; }
  .tech { padding-top: 54px; padding-bottom: 64px; }
  .tech__head { gap: 14px; margin-bottom: 12px; }
  .tech__lede { margin-bottom: 30px; font-size: 15px; }
  .faq { padding-top: 54px; padding-bottom: 64px; }
  .faq__head { gap: 14px; margin-bottom: 12px; }
  .faq__lede { margin-bottom: 26px; font-size: 15px; }
  /* The answer clears the (absent) marker column on a phone. */
  .faq__answer { padding-right: 0; }
  .faq__item summary { gap: 14px; padding: 18px 0; }
  .tech__grid { grid-template-columns: 1fr; gap: 22px; }
  .showcase { grid-template-columns: 1fr; gap: 18px; }
  .showcase__glow { display: none; }
  .domino { letter-spacing: .5em; }
  .about__gallery { grid-template-columns: 1fr; }
  .topnotch { padding: 56px 18px; }
  .hero__eyebrow { letter-spacing: .3em; }
  .site-footer { padding: 48px 18px 32px; }
  .site-footer__legal { gap: 14px 20px; }
}