/* ==========================================================================
   BanSek Trade — main stylesheet
   Order: base → primitives → mechanical layer → chrome → sections → widgets
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FALLBACK FONT METRICS
   Matched to the webfonts so the swap does not shift layout.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica Neue");
  size-adjust: 97%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Tight Fallback";
  src: local("Arial"), local("Helvetica Neue");
  size-adjust: 96%;
  ascent-override: 94%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  color: var(--bs-silver);
  background: var(--bs-black);
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section-pad);
  color: var(--ink-body);
  background: var(--surface);
}

.section--tight {
  padding-block: var(--section-pad-tight);
}

/* --------------------------------------------------------------------------
   3. TYPE PRIMITIVES
   -------------------------------------------------------------------------- */
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.mono-label--accent {
  color: var(--accent-ink);
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--ink);
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--stack-sm);
  max-width: 46ch;
  margin-bottom: var(--stack-xl);
}

.section__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h2);
  color: var(--ink);
  text-wrap: balance;
}

.section__intro {
  max-width: 56ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-body);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   4. MECHANICAL LAYER
   Each device is markup-free where possible: multi-background corner art.
   -------------------------------------------------------------------------- */

/* 4.1 Blueprint grid — engineering paper, 3% ink. */
.blueprint::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background-image:
    repeating-linear-gradient(0deg, rgba(201, 207, 214, 0.035) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(201, 207, 214, 0.035) 0 1px, transparent 1px 72px);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 35%, transparent 100%);
}

/* 4.2 Corner ticks — four L brackets from eight background slivers. */
.ticks {
  --tick-len: 12px;
  --tick-w: 1px;
  --tick-c: var(--ink-faint);
  position: absolute;
  inset: 8px;
  z-index: 2;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--tick-c), var(--tick-c)), linear-gradient(var(--tick-c), var(--tick-c)),
    linear-gradient(var(--tick-c), var(--tick-c)), linear-gradient(var(--tick-c), var(--tick-c)),
    linear-gradient(var(--tick-c), var(--tick-c)), linear-gradient(var(--tick-c), var(--tick-c)),
    linear-gradient(var(--tick-c), var(--tick-c)), linear-gradient(var(--tick-c), var(--tick-c));
  background-size:
    var(--tick-len) var(--tick-w), var(--tick-w) var(--tick-len),
    var(--tick-len) var(--tick-w), var(--tick-w) var(--tick-len),
    var(--tick-len) var(--tick-w), var(--tick-w) var(--tick-len),
    var(--tick-len) var(--tick-w), var(--tick-w) var(--tick-len);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  transition: opacity var(--dur) var(--ease-out-quart);
}

/* 4.3 Crosshair — a drawing-registration mark. */
.crosshair {
  position: absolute;
  z-index: 2;
  width: 15px;
  height: 15px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-image:
    linear-gradient(var(--ink-faint), var(--ink-faint)),
    linear-gradient(var(--ink-faint), var(--ink-faint));
  background-size: 100% 1px, 1px 100%;
}

/* 4.4 Bolt heads — four countersunk fasteners, pure background art. */
.bolts {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 10px 10px;
  background-image:
    radial-gradient(circle at 38% 34%, #454e57 0 2px, #23292f 2.2px 4.4px, transparent 4.6px),
    radial-gradient(circle at 38% 34%, #454e57 0 2px, #23292f 2.2px 4.4px, transparent 4.6px),
    radial-gradient(circle at 38% 34%, #454e57 0 2px, #23292f 2.2px 4.4px, transparent 4.6px),
    radial-gradient(circle at 38% 34%, #454e57 0 2px, #23292f 2.2px 4.4px, transparent 4.6px);
  background-position:
    14px 14px,
    calc(100% - 14px) 14px,
    14px calc(100% - 14px),
    calc(100% - 14px) calc(100% - 14px);
}

/* 4.5 Hazard stripe — workshop safety marking. Used exactly three times. */
.hazard {
  height: 4px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--bs-lime) 0 9px,
    var(--bs-black) 9px 18px
  );
  opacity: 0.85;
}

/* 4.6 Knurled grip texture. */
.knurl {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(201, 207, 214, 0.14) 0 1px,
    transparent 1px 5px
  );
}

/* --------------------------------------------------------------------------
   5. BUTTONS & CONTROLS
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 13px 22px;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border-radius: var(--radius);
  transition:
    background-color var(--dur) var(--ease-out-quart),
    color var(--dur) var(--ease-out-quart),
    border-color var(--dur) var(--ease-out-quart),
    transform var(--dur-fast) var(--ease-out-quart);
}

.btn__icon {
  flex: none;
  transition: transform var(--dur) var(--ease-out-quart);
}

.btn:hover .btn__icon {
  transform: translateX(4px);
}

.btn--primary {
  color: var(--bs-black);
  background: var(--bs-lime);
}

.btn--primary:hover {
  background: var(--bs-lime-dim);
}

.btn--outline {
  color: var(--ink);
  border: 1px solid var(--hairline);
}

.btn--outline:hover {
  border-color: var(--ink);
}

.section--light .btn--outline {
  border-color: #b9bfc6;
}

.btn--ghost {
  padding-inline: 0;
  color: var(--ink);
}

.btn--block {
  width: 100%;
}

.btn--lg {
  min-height: 56px;
  padding: 18px 28px;
  font-size: 16px;
}

/* Icon-only chrome buttons keep a 44px hit area at every size. */
.icon-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--bs-silver);
  border-radius: var(--radius);
  transition: color var(--dur) var(--ease-out-quart), background-color var(--dur) var(--ease-out-quart);
}

.icon-btn:hover {
  color: var(--bs-white);
  background: rgba(255, 255, 255, 0.06);
}

/* --------------------------------------------------------------------------
   6. PRELOADER
   -------------------------------------------------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.preloader[hidden] {
  display: none;
}

.preloader__half {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50.5%;
  background: var(--bs-black);
  transition: transform 700ms var(--ease-out-expo);
  will-change: transform;
}

/* Same-session return visit: same choreography, a third of the time. */
.preloader--fast .preloader__half {
  transition-duration: 300ms;
}

.preloader--fast .preloader__logo {
  animation-duration: 260ms, 2.4s;
}

.preloader__half--top {
  top: 0;
}

.preloader__half--bottom {
  bottom: 0;
}

.preloader.is-done .preloader__half--top {
  transform: translateY(-100%);
}

.preloader.is-done .preloader__half--bottom {
  transform: translateY(100%);
}

.preloader__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-items: center;
  width: min(280px, 72vw);
  text-align: center;
  transition: opacity 240ms linear;
}

.preloader.is-done .preloader__inner {
  opacity: 0;
}

.preloader__logo {
  width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(0.9);
  animation: preloader-in 700ms var(--ease-out-expo) forwards, preloader-breathe 2.4s 700ms var(--ease-in-out) infinite;
}

.preloader__bar {
  position: relative;
  width: 100%;
  height: 1px;
  background: var(--bs-line);
}

.preloader__fill {
  position: absolute;
  inset: 0;
  background: var(--bs-lime);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms linear;
}

.preloader__meta {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}

.preloader__pct {
  color: var(--bs-lime);
  font-variant-numeric: tabular-nums;
}

.preloader__status {
  color: var(--bs-gray);
  transition: opacity 200ms linear;
}

/* --------------------------------------------------------------------------
   7. NAVBAR
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--z-nav);
  transition: transform 420ms var(--ease-out-quart), background-color var(--dur) linear;
  will-change: transform;
}

.nav::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  background: var(--bs-line);
  opacity: 0;
  transition: opacity var(--dur) linear;
}

.nav.is-stuck {
  background: rgba(5, 5, 5, 0.85);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.nav.is-stuck::after {
  opacity: 1;
}

.nav.is-hidden {
  transform: translateY(-101%);
}

.nav__inner {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  width: var(--container);
  height: var(--nav-h);
  margin-inline: auto;
}

.nav__brand {
  display: inline-flex;
  gap: 11px;
  align-items: center;
  flex: none;
  min-height: 44px;
}

/* Phase 1.1: +20% (was 36px wide / 28px tall). The mark is 449×349, so this
   renders 43.2 × 33.6 — 47% of the 72px mobile bar, inside the 60% cap. */
.nav__mark {
  width: 43.2px;
  height: auto;
}

.nav__wordmark {
  display: none;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--bs-white);
}

.nav__wordmark span {
  color: var(--bs-gray);
  font-weight: 500;
}

.nav__menu {
  display: none;
}

.nav__list {
  display: flex;
  gap: clamp(4px, 1.4vw, 14px);
  align-items: center;
  list-style: none;
}

.nav__link {
  position: relative;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 10px 12px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--bs-silver);
  white-space: nowrap;
  transition: color var(--dur) var(--ease-out-quart);
}

.nav__link::after {
  position: absolute;
  bottom: 4px;
  left: 12px;
  width: calc(100% - 24px);
  height: 1px;
  content: "";
  background: var(--bs-lime);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-out-quart);
}

.nav__link:hover,
.nav__link[aria-expanded="true"] {
  color: var(--bs-white);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after,
.nav__link[aria-expanded="true"]::after {
  transform: scaleX(1);
}

.nav__link[aria-current="page"] {
  color: var(--bs-lime);
}

.nav__caret {
  transition: transform var(--dur) var(--ease-out-quart);
}

.nav__link[aria-expanded="true"] .nav__caret {
  transform: rotate(180deg);
}

.nav__utils {
  display: flex;
  gap: 4px;
  align-items: center;
  flex: none;
}

.nav__b2b {
  display: none;
}

/* Language switcher */
.lang {
  display: none;
  gap: 2px;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
}

.lang__btn {
  padding: 5px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--bs-gray);
  border-radius: 2px;
  transition: color var(--dur) var(--ease-out-quart), background-color var(--dur) var(--ease-out-quart);
}

.lang__btn[aria-current="true"] {
  color: var(--bs-black);
  background: var(--bs-lime);
}

.lang__btn[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

.lang__btn:not([disabled]):not([aria-current="true"]):hover {
  color: var(--bs-white);
}

@media (min-width: 600px) {
  .nav__wordmark {
    display: block;
  }
}

/* The full six-item nav plus the language switcher and the B2B button needs
   ~1064px of run. Below 1200 that would mean shrinking the links past a
   comfortable target size, so the overlay menu takes over instead — it already
   carries every item, the language switcher and the B2B call to action. */
@media (min-width: 1200px) {
  .nav__menu {
    display: block;
  }

  .lang {
    display: flex;
  }

  .nav__b2b {
    display: inline-flex;
    margin-left: 8px;
  }
}

/* 7.1 Mega menu */
.mega {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  visibility: hidden;
  background: rgba(8, 10, 12, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--bs-line);
  border-bottom: 1px solid var(--bs-line);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 520ms var(--ease-out-expo), visibility 0s linear 520ms;
}

.mega.is-open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 520ms var(--ease-out-expo), visibility 0s linear 0s;
}

.mega__inner {
  display: grid;
  gap: var(--stack-lg);
  width: var(--container);
  padding-block: clamp(28px, 3.5vw, 52px);
  margin-inline: auto;
  grid-template-columns: repeat(4, 1fr);
}

.mega__col-title {
  padding-bottom: 12px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-lime);
  border-bottom: 1px solid var(--bs-line);
}

.mega__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
}

.mega__link {
  display: block;
  padding: 8px 0;
  font-size: 15px;
  color: var(--bs-silver);
  transition: color var(--dur) var(--ease-out-quart), transform var(--dur) var(--ease-out-quart);
}

.mega__link:hover {
  color: var(--bs-white);
  transform: translateX(5px);
}

.mega__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 220px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
}

.mega__card img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  transition: transform var(--dur-slow) var(--ease-out-quart), opacity var(--dur) linear;
}

.mega__card:hover img {
  opacity: 0.75;
  transform: scale(1.05);
}

.mega__card span {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--bs-white);
}

.mega__card::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background: linear-gradient(0deg, rgba(5, 5, 5, 0.92), rgba(5, 5, 5, 0.1));
}

/* 7.2 Burger */
.nav__burger {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.nav__burger span {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 1.5px;
  background: var(--bs-white);
  border-radius: 2px;
  transition: transform 380ms var(--ease-out-expo), opacity 180ms linear;
}

.nav__burger span:nth-child(1) {
  transform: translateY(-5px);
}

.nav__burger span:nth-child(3) {
  transform: translateY(5px);
}

.nav__burger[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg);
}

.nav__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav__burger[aria-expanded="true"] span:nth-child(3) {
  transform: rotate(-45deg);
}

/* Declared after the burger's own display rule so it actually wins. */
@media (min-width: 1200px) {
  .nav__burger {
    display: none;
  }
}

/* 7.3 Mobile menu overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + 16px) var(--gutter) 28px;
  overflow-y: auto;
  visibility: hidden;
  background: var(--bs-black);
  opacity: 0;
  transition: opacity 320ms var(--ease-out-quart), visibility 0s linear 320ms;
  overscroll-behavior: contain;
}

.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 320ms var(--ease-out-quart), visibility 0s linear 0s;
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.mobile-menu__item {
  border-bottom: 1px solid var(--bs-line);
  opacity: 0;
  transform: translateY(18px);
}

.mobile-menu.is-open .mobile-menu__item {
  animation: menu-item-in 520ms var(--ease-out-expo) forwards;
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--bs-white);
  text-align: left;
}

.mobile-menu__link .nav__caret {
  color: var(--bs-gray);
}

.mobile-menu__link[aria-expanded="true"] .nav__caret {
  color: var(--bs-lime);
  transform: rotate(180deg);
}

.mobile-menu__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-out-expo);
}

.mobile-menu__panel[data-open="true"] {
  grid-template-rows: 1fr;
}

.mobile-menu__panel > div {
  overflow: hidden;
}

.mobile-menu__sublist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 16px;
  list-style: none;
}

.mobile-menu__subheading {
  padding: 12px 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-lime);
}

.mobile-menu__sublink {
  display: block;
  padding: 8px 0 8px 14px;
  font-size: 15px;
  color: var(--bs-silver);
  border-left: 1px solid var(--bs-line);
}

.mobile-menu__foot {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 28px;
  margin-top: auto;
}

.mobile-menu__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--bs-gray);
}

.mobile-menu__contact a {
  color: var(--bs-white);
}

.mobile-menu .lang {
  display: inline-flex;
  align-self: flex-start;
}

@media (min-width: 1200px) {
  .mobile-menu {
    display: none;
  }
}

/* 7.4 Full-screen search overlay */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  padding: calc(var(--nav-h) + 8vh) var(--gutter) 32px;
  visibility: hidden;
  background: rgba(5, 5, 5, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  align-content: start;
  transition: opacity 300ms var(--ease-out-quart), visibility 0s linear 300ms;
}

.search-overlay.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 300ms var(--ease-out-quart), visibility 0s linear 0s;
}

.search-overlay__inner {
  width: min(760px, 100%);
  margin-inline: auto;
}

.search-overlay__close {
  position: absolute;
  top: calc(var(--nav-h) / 2 - 22px);
  right: var(--gutter);
}

.search-overlay__field {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 16px;
  margin-block: 20px 22px;
  border-bottom: 1px solid var(--bs-line);
}

.search-overlay__input {
  width: 100%;
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--bs-white);
}

/* Placeholders carry the expected input format, so they hold AA contrast
   rather than dropping to the decorative tier. */
.search-overlay__input::placeholder {
  color: var(--bs-gray);
}

.search-overlay__hint {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-gray);
}

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero {
  /* A mathematically centred text block reads slightly low, so the block is
     biased up by this much. Spent as padding on the centred item, never a
     transform, so it cannot fight GSAP for the transform channel. */
  --hero-lift-pct: 2.5;
  --hero-lift: calc(var(--hero-lift-pct) * 1svh);
  --hero-foot-gap: clamp(14px, 2.2vh, 26px);
  /* Approximate height of the bottom group (cue + strip). Used only to work
     out where "centred" is — the grid below reserves the group's *real*
     height, so if this drifts the composition shifts slightly and the two can
     still never collide. */
  --hero-foot-h: 162px;
  --hero-pad-t: calc(var(--nav-h) + 16px);
  --hero-pad-b: clamp(24px, 4vh, 52px);

  position: relative;
  display: flex;
  min-height: 100svh;
  padding-top: var(--hero-pad-t);
  padding-bottom: var(--hero-pad-b);
  overflow: hidden;
  background: var(--bs-black);
  isolation: isolate;
}

@media (max-width: 899px) {
  .hero {
    /* The arrows dock into the strip below 1200px and the cue turns
       horizontal, so the group is a different shape on phones. */
    --hero-foot-h: 168px;
  }
}

/* --------------------------------------------------------------------------
   8.1 HERO SLIDER
   `.hero__bg` carries z-index -3, which makes it a stacking context: the
   slides and the whole overlay stack inside it sort locally, while the
   blueprint grid (-2), spotlight (-2) and gear (-1) still sit above the
   photographs and below the content (1).
   -------------------------------------------------------------------------- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
}

/* Oversized on purpose: the scroll-away parallax translates this box down by
   0.6× the hero height, and the extra 40% keeps it covering the frame at both
   ends of the range. Clipped by .hero__bg's overflow. */
.hero__slides {
  position: absolute;
  top: -20%;
  right: 0;
  left: 0;
  height: 140%;
  will-change: transform;
}

.hero-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  /* Hidden state is fully wiped from the right; the reveal runs left → right. */
  clip-path: inset(0 100% 0 0);
}

.hero-slide.is-active {
  z-index: 2;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition:
    opacity var(--slide-fade) var(--ease-in-out),
    clip-path var(--slide-fade) var(--ease-in-out);
  will-change: opacity, clip-path;
}

/* The outgoing slide keeps its full clip and only fades, so the two motions
   read as one reveal rather than two competing wipes. */
.hero-slide.is-leaving {
  z-index: 1;
  opacity: 0;
  clip-path: inset(0 0 0 0);
  transition: opacity var(--slide-fade) var(--ease-in-out);
}

.hero-slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--obj-pos, 50% 50%);
  transform: scale(1);
}

/* Ken Burns runs for the full display window (slide + transition) so the
   frame is never still. Drift direction alternates per slide. */
.hero-slide.is-active img {
  animation: hero-kenburns calc(var(--slide-dur) + var(--slide-fade)) linear forwards;
  will-change: transform;
}

.hero-slide[data-slide="0"] {
  --obj-pos: 50% 58%;
  --kb-x: -16px;
  --kb-y: -9px;
}

.hero-slide[data-slide="1"] {
  --obj-pos: 50% 56%;
  --kb-x: 15px;
  --kb-y: 7px;
}

.hero-slide[data-slide="2"] {
  --obj-pos: 58% 50%;
  --kb-x: -11px;
  --kb-y: 9px;
}

/* A portrait hero crops these 16:9 frames to a narrow vertical slice, so the
   focal point has to be nominated per slide or the crop lands on empty yard. */
@media (max-width: 899px) {
  .hero-slide[data-slide="1"] {
    --obj-pos: 74% 54%;
  }

  .hero-slide[data-slide="2"] {
    --obj-pos: 64% 50%;
  }
}

/* Missing file degrades to a dark panel, never a broken-image glyph. */
.hero-slide img.is-broken {
  opacity: 0;
}

.hero-slide.has-error {
  background: linear-gradient(120deg, #14171a, #07090b);
}

/* --- Overlay stack, bottom to top --------------------------------------- */
.hero__ov {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 1. Base darkening — per-slide strength, driven by data-overlay.
   Tuned so the worst pixel behind the H1 lands in the 8–9.5:1 band: still
   comfortably past AAA, but the photograph survives it. */
.hero__ov--base {
  z-index: 3;
  background: var(--bs-black);
  opacity: var(--hero-ov, 0.38);
  transition: opacity var(--slide-fade) var(--ease-in-out);
}

/* 2. Directional scrim — heaviest where the H1 sits, opening up hard toward
   the right third so the subject of each photograph actually reads. */
.hero__ov--scrim {
  z-index: 4;
  background: linear-gradient(
    100deg,
    rgba(5, 5, 5, 0.82) 0%,
    rgba(5, 5, 5, 0.52) 45%,
    rgba(5, 5, 5, 0.18) 100%
  );
}

/* 3. Bottom fade — has to land on whatever surface follows the hero, or the
   join shows as a step. The homepage hero is followed by the carbon search
   band; the inner-page heroes are followed by black, which is the default. */
.hero__ov--foot {
  z-index: 5;
  background: linear-gradient(
    180deg,
    rgba(5, 5, 5, 0) 78%,
    var(--hero-foot-end, var(--bs-black)) 100%
  );
}

.hero--home {
  --hero-foot-end: var(--bs-carbon);
}

/* 4. Vignette. */
.hero__ov--vignette {
  z-index: 6;
  background: radial-gradient(
    ellipse 76% 70% at 50% 45%,
    rgba(0, 0, 0, 0) 38%,
    rgba(0, 0, 0, 0.22) 100%
  );
}

/* 5. Duotone — barely perceptible; if the green is visible it is too strong. */
.hero__ov--duotone {
  z-index: 7;
  background: var(--bs-lime);
  opacity: 0.04;
  mix-blend-mode: overlay;
}

/* 6. Film grain. */
.hero__ov--grain {
  z-index: 8;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Diagnostic scan line — one pass per slide change. */
.hero__scan {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 9;
  height: 2px;
  background: var(--bs-lime);
  opacity: 0;
  pointer-events: none;
}

.hero__scan.is-running {
  animation: hero-scan var(--slide-fade) var(--ease-in-out) 1;
}

/* Cursor-follow spotlight — light catching a surface, not a torch. */
.hero__spotlight {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: 600px;
  height: 600px;
  margin: -300px 0 0 -300px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle closest-side, var(--bs-lime), transparent 100%);
  transition: opacity 420ms var(--ease-out-quart);
}

.hero__spotlight.is-live {
  opacity: 0.05;
}

.hero .blueprint::before {
  z-index: -2;
}

/* --- Arrows -------------------------------------------------------------- */
.hero-nav {
  position: relative;
  z-index: 4;
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--bs-silver);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 220ms var(--ease-out-quart),
    transform 320ms var(--ease-out-quart),
    border-color 220ms var(--ease-out-quart),
    color 220ms var(--ease-out-quart);
}

.hero-nav--prev {
  margin-left: 10px;
}

.hero-nav--next {
  margin-left: 6px;
}

/* Shown only while the pointer is actually moving in the hero — the idle
   timer in js/hero-slider.js removes this class after 1.8s of stillness. */
.hero-nav.is-shown,
.hero-nav:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.hero-nav:hover {
  color: var(--bs-lime);
  border-color: var(--bs-lime);
  transform: scale(1.08);
}

.hero-nav--prev:hover svg {
  transform: translateX(-3px);
}

.hero-nav--next:hover svg {
  transform: translateX(3px);
}

.hero-nav svg {
  transition: transform 320ms var(--ease-out-quart);
}

/* No hover on touch, so the arrows stay quietly visible instead. */
@media (hover: none) {
  .hero-nav {
    opacity: 0.55;
    pointer-events: auto;
  }
}

/* From 1200px the gutter finally clears the text column, so the arrows lift
   out of the strip to the hero edges. Offsets are expressed against the
   container edge; below 1448px that edge is exactly one gutter in, so
   subtracting the gutter lands them on the viewport edge without involving
   100vw (which counts the scrollbar and would drift by half its width). */
@media (min-width: 1200px) {
  .hero-nav {
    position: absolute;
    top: 50%;
    margin: -24px 0 0;
  }

  .hero-nav--prev {
    left: calc(10px - var(--gutter));
  }

  .hero-nav--next {
    right: calc(10px - var(--gutter));
  }
}

/* Past the container's 1320px cap the side margin grows, so the arrows can
   take the brief's full 32px inset with room to spare. */
@media (min-width: 1500px) {
  .hero-nav--prev {
    left: calc(32px - (100vw - 100%) / 2);
  }

  .hero-nav--next {
    right: calc(32px - (100vw - 100%) / 2);
  }
}

/* --- Indicators, caption, counter ---------------------------------------- */
/* Spacing is owned by .hero__foot's gap now that the strip is a flow sibling
   of the cue rather than the last item of the content column. */
.hero-ind {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
}

.hero-ind__bars {
  display: flex;
  gap: 8px;
}

.hero-ind__bar {
  position: relative;
  width: 32px;
  height: 44px; /* 44px touch target around a 2px bar */
  padding: 0;
}

.hero-ind__bar::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 32px;
  height: 2px;
  margin-top: -1px;
  content: "";
  background: rgba(255, 255, 255, 0.18);
}

.hero-ind__bar i {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  width: 32px;
  height: 2px;
  margin-top: -1px;
  background: var(--bs-lime);
  transform: scaleX(0);
  transform-origin: left center;
}

/* The fill doubles as the autoplay progress read-out. */
.hero-ind__bar.is-active i {
  transform: scaleX(1);
  transition: transform var(--slide-dur) linear;
}

.hero-ind__bar.is-paused i {
  transition: none;
}

.hero-ind__caption {
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-gray);
}

.hero-ind__caption span {
  display: block;
  transition: transform 460ms var(--ease-out-expo), opacity 260ms linear;
}

.hero-ind__caption.is-out span {
  opacity: 0;
  transform: translateY(-110%);
}

.hero-ind__caption.is-in span {
  opacity: 0;
  transform: translateY(110%);
  transition: none;
}

.hero-ind__counter {
  display: flex;
  gap: 5px;
  align-items: baseline;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  color: var(--bs-lime);
  font-variant-numeric: tabular-nums;
}

.hero-ind__counter-sep {
  color: var(--bs-gray);
}

/* Vertical digit roll, shared with the stats counters. */
.roll {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  line-height: 1;
  vertical-align: bottom;
}

.roll > span {
  display: block;
}

.roll.is-rolling > span {
  transition: transform 320ms var(--ease-out-expo);
  transform: translateY(-100%);
}

/* Perimeter hairline, traced once per session after the preloader clears.
   Four 1px edges drawn clockwise on staggered delays — a real trace, and
   unlike a dashed SVG path it behaves identically at every aspect ratio. */
.hero__trace {
  position: absolute;
  top: calc(var(--nav-h) + 24px);
  right: var(--gutter);
  bottom: 24px;
  left: var(--gutter);
  z-index: 0;
  display: block;
  pointer-events: none;
  opacity: 0;
}

.hero__trace-e {
  position: absolute;
  background: var(--bs-lime);
}

.hero__trace-e--t {
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
}

.hero__trace-e--r {
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  transform: scaleY(0);
  transform-origin: center top;
}

.hero__trace-e--b {
  right: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  transform: scaleX(0);
  transform-origin: right center;
}

.hero__trace-e--l {
  bottom: 0;
  left: 0;
  width: 1px;
  height: 100%;
  transform: scaleY(0);
  transform-origin: center bottom;
}

.hero__trace.is-tracing {
  opacity: 0.5;
  transition: opacity 300ms linear;
}

.hero__trace.is-tracing .hero__trace-e {
  transition: transform 380ms var(--ease-in-out);
}

.hero__trace.is-tracing .hero__trace-e--t {
  transform: scaleX(1);
}

.hero__trace.is-tracing .hero__trace-e--r {
  transform: scaleY(1);
  transition-delay: 375ms;
}

.hero__trace.is-tracing .hero__trace-e--b {
  transform: scaleX(1);
  transition-delay: 750ms;
}

.hero__trace.is-tracing .hero__trace-e--l {
  transform: scaleY(1);
  transition-delay: 1125ms;
}

.hero__trace.is-settled {
  opacity: 0.08;
  transition: opacity 900ms var(--ease-out-quart);
}

.hero__trace.is-settled .hero__trace-e--t,
.hero__trace.is-settled .hero__trace-e--b {
  transform: scaleX(1);
}

.hero__trace.is-settled .hero__trace-e--r,
.hero__trace.is-settled .hero__trace-e--l {
  transform: scaleY(1);
}

@media (max-width: 899px) {
  .hero__trace {
    display: none;
  }
}

.hero__gear {
  position: absolute;
  right: -32vw;
  bottom: -12vh;
  z-index: -1;
  width: 92vw;
  max-width: 900px;
  color: var(--bs-lime);
  opacity: 0.05;
  pointer-events: none;
}

/* Row 2 measures the foot itself, so the centring in row 1 always reserves
   exactly the space the instrument strip and cue occupy — nothing to keep in
   sync by hand if that strip ever changes. --hero-foot-gap is the one knob. */
.hero__content {
  position: relative;
  z-index: 1;
  width: var(--container);
  margin-inline: auto;
  /* Inner-page heroes have no foot to reserve, so they keep the original
     bottom-anchored composition. */
  align-self: flex-end;
}

/* Only the homepage hero has the two-part composition. Scoped, because the
   page heroes share .hero__content with a flat list of children — a grid here
   would stretch their breadcrumb into a 1fr row. */
.hero--home .hero__content {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-self: stretch;
}

/* Centring inside row 1 alone sits half the foot's height too high, because
   row 1 is the hero minus the foot. This puts the block back on the hero's
   true centre and then lifts it by --hero-lift, and nothing else.
       shift = (footH + padBottom − padTop) / 2 − lift
   It is a transform rather than padding on purpose: padding would be real
   layout height, and on a 640px-tall phone that alone pushed the hero past
   100svh. GSAP never touches this element — the intro animates
   [data-hero-item] and the parallax animates .hero__content — so the transform
   channel is free. */
.hero__main {
  align-self: center;
  /* js/main.js overwrites --hero-shift with the same figure clamped to the
     room actually left above the foot; on a short viewport the full shift does
     not fit. The fallback below is deliberately capped low so a JS-less
     visitor gets a block that sits a little high rather than one that lands on
     the strip. */
  transform: translateY(
    var(
      --hero-shift,
      min(
        calc((var(--hero-foot-h) + var(--hero-pad-b) - var(--hero-pad-t)) / 2 - var(--hero-lift)),
        1vh
      )
    )
  );
}

/* The margin is layout, not decoration: it guarantees separation from the
   centred block even on a viewport too short to hold both comfortably, where
   the hero grows past 100svh rather than letting the two touch. */
.hero__foot {
  display: flex;
  flex-direction: column;
  gap: var(--hero-foot-gap);
  margin-top: clamp(14px, 2.6vh, 34px);
}

.hero__eyebrow {
  margin-bottom: 20px;
}

/* Smaller type needs more air under it to read as a choice, not a shrink. */
.hero__title {
  max-width: 17ch;
  margin-bottom: 26px;
}

/* Line-mask reveal: each line rides inside its own overflow-hidden box. */
.line-mask {
  display: block;
  overflow: hidden;
}

.line-mask > span {
  display: block;
  transform: translateY(105%);
}

.hero__sub {
  max-width: 58ch;
  margin-bottom: clamp(28px, 4vw, 40px);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--bs-silver);
}

/* One action, not a pair. The extra air below is what stops a single button
   from reading as the survivor of a removed row. */
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(6px, 1.4vh, 14px);
}

.hero__markers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  margin-top: 22px;
  list-style: none;
}

.hero__markers li {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-gray);
}

.hero__markers li::before {
  width: 5px;
  height: 5px;
  content: "";
  background: var(--bs-lime);
  border-radius: 50%;
  flex: none;
}

/* Scroll cue — a real control, not decoration. The search band no longer
   overlaps the hero, so this is what tells the visitor the search exists.
   Horizontal on phones to spend as little of a 640px viewport as possible;
   the vertical travelling-dot rail appears once there is room for it. */
.scroll-cue {
  display: inline-flex;
  flex-direction: row;
  gap: 9px;
  align-items: center;
  align-self: center;
  min-height: 44px;
  padding: 6px 14px;
  /* Silver, not --bs-gray: measured over the brightest part of the hero,
     gray lands at 2.48:1 and silver at 5.91:1. This is a control now, not
     decoration, so it has to clear AA. */
  color: var(--bs-silver);
  border-radius: var(--radius);
  transition: color var(--dur) var(--ease-out-quart);
}

.scroll-cue:hover {
  color: var(--bs-lime);
}

.scroll-cue__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}

.scroll-cue__track {
  position: relative;
  display: none;
  flex: none;
  width: 1px;
  height: 36px;
  overflow: hidden;
  background: var(--bs-line);
}

.scroll-cue__track::after {
  position: absolute;
  top: 0;
  left: -2px;
  width: 5px;
  height: 5px;
  content: "";
  background: var(--bs-lime);
  border-radius: 50%;
  animation: scroll-dot 2.2s var(--ease-in-out) infinite;
}

.scroll-cue__arrow {
  flex: none;
  transition: transform var(--dur) var(--ease-out-quart);
}

.scroll-cue:hover .scroll-cue__arrow {
  transform: translateY(3px);
}

@media (min-width: 900px) {
  .scroll-cue {
    flex-direction: column;
    gap: 10px;
    padding: 4px 12px 0;
  }

  .scroll-cue__track {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   9. PARTS SEARCH MODULE — lives in its own band below the hero (§9.1)
   -------------------------------------------------------------------------- */
.psearch {
  max-width: 760px;
}

.psearch__tabs {
  position: relative;
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 10px;
  background: rgba(12, 14, 16, 0.8);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: none;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.psearch__tabs::-webkit-scrollbar {
  display: none;
}

/* One pill that slides and width-morphs between tabs (FLIP, see
   js/parts-search.js). Replaces the background jumping tab to tab. */
.psearch__pill {
  position: absolute;
  top: 4px;
  left: 0;
  z-index: 0;
  height: 44px;
  background: var(--bs-lime);
  border-radius: 2px;
  transform-origin: left center;
  pointer-events: none;
}

.psearch__pill.is-moving {
  transition: transform 460ms var(--ease-in-out);
}

.psearch__tab {
  position: relative;
  z-index: 1;
  padding: 13px 14px; /* 44px tall — thumb target on a phone next to a truck */
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bs-gray);
  border-radius: 2px;
  transition: color var(--dur) var(--ease-out-quart), background-color var(--dur) var(--ease-out-quart);
}

.psearch__tab:hover {
  color: var(--bs-white);
}

/* Base state paints the lime behind the active tab. Once the pill is measured
   and live, `.has-pill` hands the job over to it — so a failed script leaves a
   readable tablist rather than black text on nothing. */
.psearch__tab[aria-selected="true"] {
  color: var(--bs-black);
  background: var(--bs-lime);
}

.psearch__tabs.has-pill .psearch__tab[aria-selected="true"] {
  background: transparent;
}

.psearch__panel {
  position: relative;
  padding: 12px;
  background: var(--bs-steel-2);
  border: 1px solid var(--bs-line);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur) var(--ease-out-quart), box-shadow var(--dur) var(--ease-out-quart);
}

.psearch__panel.is-focused {
  border-color: rgba(204, 249, 12, 0.5);
  box-shadow: 0 0 0 4px var(--bs-lime-glow), var(--shadow-card);
}

.psearch__row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.psearch__field {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding-inline: 14px;
  background: var(--bs-black);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
}

.psearch__field svg {
  flex: none;
  color: var(--bs-gray);
}

.psearch__input {
  width: 100%;
  align-self: stretch; /* the whole 52px field is tappable, not just the text line */
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--bs-white);
}

.psearch__input::placeholder {
  color: var(--bs-gray);
  text-transform: none;
}

.psearch__clear {
  display: none;
  flex: none;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  color: var(--bs-gray);
  border-radius: 50%;
}

.psearch__clear.is-visible {
  display: inline-flex;
}

.psearch__clear:hover {
  color: var(--bs-white);
  background: rgba(255, 255, 255, 0.07);
}

.psearch__selects {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

.psearch__select {
  position: relative;
}

.psearch__select select {
  width: 100%;
  min-height: 52px;
  padding: 0 40px 0 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--bs-white);
  appearance: none;
  background: var(--bs-black);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
}

.psearch__select select:disabled {
  color: var(--bs-gray-dim);
  cursor: not-allowed;
}

.psearch__select option {
  color: #fff;
  background: #14171a;
}

.psearch__select::after {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  content: "";
  pointer-events: none;
  border-right: 1.5px solid var(--bs-gray);
  border-bottom: 1.5px solid var(--bs-gray);
  transform: translateY(-70%) rotate(45deg);
}

.psearch__submit {
  width: 100%;
  min-height: 52px;
}

.psearch__chips {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  margin-top: 12px;
  overflow-x: auto;
  border-top: 1px solid var(--bs-line);
  scrollbar-width: none;
}

.psearch__chips::-webkit-scrollbar {
  display: none;
}

.psearch__chips-label {
  flex: none;
  align-self: center;
  padding-right: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  /* Gray falls to 4.38:1 against the raised panel, so this label steps up a
     tier; the 10px size and wide tracking keep it subordinate to the chips. */
  color: var(--bs-silver);
}

.psearch__chip {
  flex: none;
  padding: 7px 11px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--bs-silver);
  white-space: nowrap;
  border: 1px solid var(--bs-line);
  border-radius: var(--radius-pill);
  transition: color var(--dur) var(--ease-out-quart), border-color var(--dur) var(--ease-out-quart);
}

.psearch__chip:hover {
  color: var(--bs-lime);
  border-color: rgba(204, 249, 12, 0.45);
}

.psearch__result {
  display: none;
  gap: 14px;
  padding: 16px;
  margin-top: 12px;
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-left: 2px solid var(--bs-lime);
  border-radius: var(--radius);
}

.psearch__result.is-visible {
  display: flex;
}

.psearch__result.is-error {
  border-left-color: var(--bs-warn);
}

.psearch__result-icon {
  flex: none;
  color: var(--bs-lime);
}

.psearch__result.is-error .psearch__result-icon {
  color: var(--bs-warn);
}

.psearch__result-title {
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--bs-white);
}

.psearch__result-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--bs-silver);
}

.psearch__result-body a {
  color: var(--bs-lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 600px) {
  .psearch__row {
    flex-direction: row;
  }

  .psearch__field {
    flex: 1;
  }

  .psearch__submit {
    width: auto;
    padding-inline: 26px;
  }

  .psearch__selects {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   9.1 PART SEARCH BAND
   The module used to live in the hero and crowded it, worst on mobile where it
   fought the H1 for the fold. It is now the first full section below the hero,
   on its own surface so the boundary with the slider is a stated edge rather
   than a blend. The scroll cue in the hero is what advertises it.
   -------------------------------------------------------------------------- */
.psearch-band {
  position: relative;
  padding-block: var(--section-pad-tight);
  background: var(--bs-carbon);
}

.psearch-band__panel {
  position: relative;
  display: grid;
  /* minmax(0, …), not the implicit auto track: the chips row and the tablist
     are horizontally scrollable, and an auto track would size to their
     max-content and push the whole page sideways. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px);
  padding: clamp(20px, 3vw, 34px);
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.psearch-band__heading {
  margin-top: 8px;
  margin-bottom: clamp(18px, 2.4vw, 26px);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h2);
  color: var(--ink);
}

/* The band gives the module the full column, so drop the hero-era cap. */
.psearch-band .psearch {
  max-width: none;
}

.psearch-band__main,
.psearch-band__aside {
  min-width: 0;
}

.psearch-band__aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: clamp(18px, 2.4vw, 24px);
  border-top: 1px solid var(--bs-line);
}

.psearch-band__help {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-body);
}

.psearch-band__help a {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--bs-lime);
  white-space: nowrap;
}

.psearch-band__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 2px;
  list-style: none;
}

.psearch-band__list li {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.psearch-band__list li::before {
  width: 4px;
  height: 4px;
  content: "";
  background: var(--bs-gray-dim);
  flex: none;
}

@media (min-width: 1024px) {
  .psearch-band__panel {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
    align-items: start;
  }

  .psearch-band__aside {
    padding-top: 0;
    padding-left: clamp(24px, 2.6vw, 40px);
    border-top: none;
    border-left: 1px solid var(--bs-line);
  }

  .psearch-band__list {
    flex-direction: column;
    gap: 7px;
  }
}

/* --------------------------------------------------------------------------
   10. BRAND MARQUEE
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  padding-block: clamp(28px, 4vw, 44px);
  overflow: hidden;
  background: var(--bs-carbon);
  border-block: 1px solid var(--bs-line);
}

.marquee__knurl {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 6px;
}

.marquee__row {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__row + .marquee__row {
  margin-top: 10px;
}

.marquee__track {
  display: flex;
  flex: none;
  gap: 10px;
  padding-right: 10px;
  will-change: transform;
  animation: marquee-loop var(--marquee-dur, 46s) linear infinite;
}

.marquee__row--reverse .marquee__track {
  animation-direction: reverse;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

.brand-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 46px;
  padding-inline: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bs-gray);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
  opacity: 0.45;
  transition: opacity var(--dur) var(--ease-out-quart), color var(--dur) var(--ease-out-quart),
    border-color var(--dur) var(--ease-out-quart);
}

.brand-chip:hover {
  color: var(--bs-lime);
  border-color: rgba(204, 249, 12, 0.4);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   11. STATS
   -------------------------------------------------------------------------- */
.stats {
  background: var(--bs-carbon);
}

.stats__grid {
  --stat-num-size: clamp(34px, 6.4vw, 62px);

  position: relative;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, 1fr);
  padding: clamp(24px, 4vw, 44px) clamp(16px, 3vw, 36px);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(28, 32, 37, 0.55), rgba(12, 14, 16, 0));
}

/* Two fixed rows: the number row is exactly one line tall whatever the figure,
   so all four numbers share a baseline and all four labels start on the same
   line — and the longest label can wrap without shoving its number up. */
.stat {
  position: relative;
  display: grid;
  grid-template-rows: var(--stat-num-size) auto;
  align-content: start;
  padding: clamp(18px, 3vw, 26px) clamp(10px, 2vw, 22px);
}

.stat__rule {
  position: absolute;
  top: 12%;
  left: 0;
  width: 1px;
  height: 76%;
  background: var(--bs-line);
  transform: scaleY(0);
  transform-origin: top center;
}

.stat:nth-child(odd) .stat__rule {
  display: none;
}

.stat__num {
  display: block;
  align-self: end; /* line-height 1 → the box bottom is the shared baseline */
  font-family: var(--font-mono);
  font-size: var(--stat-num-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--bs-lime);
  font-variant-numeric: tabular-nums;
}

/* Odometer (js/scroll-animations.js). The *columns* sit in a row; only the
   digits inside a column stack, and that stack is what rolls. Written as
   `.stat__num.odo` on purpose: a bare `.odo` ties on specificity with
   `.stat__num` above and loses on source order, which is what stacked the
   figures vertically. */
.stat__num.odo {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
}

/* overflow:hidden also synthesises a bottom-edge baseline, so the digit
   columns and the static suffix all align on one line. */
.odo__col,
.odo__suffix {
  display: block;
  flex: none;
  height: 1em;
  overflow: hidden;
  line-height: 1;
}

/* Exactly one monospace advance wide. The tracking is reproduced as a negative
   margin *between* columns rather than letter-spacing inside them, so a digit
   can never be clipped by its own box. */
.odo__col {
  width: 1ch;
  margin-right: -0.045em;
  letter-spacing: 0;
}

.odo__strip {
  display: block;
  transition-property: transform;
  transition-timing-function: var(--ease-out-expo);
  transform: translateY(0);
  will-change: transform;
}

.odo__strip i {
  display: block;
  height: 1em;
  font-style: normal;
  line-height: 1;
}

.stat__label {
  display: block;
  max-width: 18ch;
  margin-top: 12px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--bs-gray);
}

@media (min-width: 900px) {
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .stat:nth-child(odd) .stat__rule {
    display: block;
  }

  .stat:first-child .stat__rule {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   12. PROGRAM GRID
   -------------------------------------------------------------------------- */
.programs {
  background: var(--bs-black);
}

.card-grid {
  display: grid;
  gap: clamp(12px, 1.6vw, 18px);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px;
  overflow: hidden;
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
  transform-style: preserve-3d;
  transition: border-color var(--dur) var(--ease-out-quart), background-color var(--dur) var(--ease-out-quart),
    transform 240ms var(--ease-out-quart);
  will-change: transform;
}

.pcard:hover,
.pcard:focus-visible {
  background: var(--bs-steel-2);
  border-color: rgba(204, 249, 12, 0.55);
}

.pcard:hover .ticks,
.pcard:focus-visible .ticks {
  --tick-c: var(--bs-lime);
}

.pcard__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bs-black);
  border-radius: var(--radius-sm);
}

.pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--dur-slow) var(--ease-out-quart), transform var(--dur-slow) var(--ease-out-quart);
}

.pcard:hover .pcard__media img,
.pcard:focus-visible .pcard__media img {
  filter: grayscale(0) contrast(1);
  transform: scale(1.06);
}

.pcard__idx {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 4px 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--bs-silver);
  background: rgba(5, 5, 5, 0.72);
  border: 1px solid var(--bs-line);
  border-radius: 2px;
}

.pcard__body {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px 6px;
}

.pcard__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--bs-white);
  text-wrap: balance;
}

.pcard__arrow {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--bs-black);
  background: var(--bs-lime);
  border-radius: 50%;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity var(--dur) var(--ease-out-quart), transform var(--dur) var(--ease-out-expo);
}

.pcard:hover .pcard__arrow,
.pcard:focus-visible .pcard__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* --------------------------------------------------------------------------
   13. EXPLODED VIEW
   -------------------------------------------------------------------------- */
/* ScrollTrigger writes hard px widths onto the pinned element and the spacer it
   injects, taken from whatever the viewport measured at refresh time. If that
   measurement predates the vertical scrollbar — and here it does, because the
   preloader locks the body — both end up one scrollbar too wide and the page
   scrolls sideways. `clip` contains that without creating a scroll box, and
   does not reach the stage while it is pinned (fixed elements are clipped by
   their containing block, which is the viewport). */
.exploded {
  position: relative;
  overflow-x: clip;
  background: var(--bs-carbon);
  border-top: 1px solid var(--bs-line);
}

.pin-spacer {
  max-width: 100%;
}

.exploded__stage {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding-block: clamp(56px, 8vw, 96px);
  overflow: hidden;
}

.exploded__head {
  position: absolute;
  top: clamp(56px, 8vw, 96px);
  left: 50%;
  z-index: 3;
  width: var(--container);
  transform: translateX(-50%);
  pointer-events: none;
}

.exploded__title {
  max-width: 20ch;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--ls-h3);
  color: var(--bs-white);
}

.exploded__figure {
  position: relative;
  width: min(1100px, 100%);
  padding-inline: var(--gutter);
  perspective: 1200px;
}

.exploded__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.exploded__progress {
  position: absolute;
  bottom: clamp(28px, 5vw, 56px);
  left: 50%;
  z-index: 3;
  width: min(220px, 50vw);
  height: 1px;
  background: var(--bs-line);
  transform: translateX(-50%);
}

.exploded__progress i {
  display: block;
  height: 100%;
  background: var(--bs-lime);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Callouts: label + leader line, keyed to a scroll position. */
.callout {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
}

.callout__line {
  display: block;
  width: clamp(28px, 6vw, 74px);
  height: 1px;
  background: var(--bs-lime);
  transform: scaleX(0);
  transform-origin: left center;
}

/* DOM order is text → line → dot. A left-hand callout reads outward-in, so the
   leader grows from the dot back toward the label; a right-hand one mirrors. */
.callout--right {
  flex-direction: row-reverse;
}

.callout--left .callout__line {
  transform-origin: right center;
}

.callout__text {
  max-width: 22ch;
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.15vw, 12px);
  letter-spacing: 0.1em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--bs-silver);
}

.callout__text b {
  display: block;
  font-weight: 700;
  color: var(--bs-lime);
}

.callout__dot {
  width: 6px;
  height: 6px;
  background: var(--bs-lime);
  border-radius: 50%;
  flex: none;
}

/* --------------------------------------------------------------------------
   14. PROCESS (pinned on desktop, stacked on mobile)
   -------------------------------------------------------------------------- */
.process {
  background: var(--bs-black);
}

.process__layout {
  display: grid;
  gap: var(--stack-lg);
  grid-template-columns: 1fr;
}

.process__aside {
  position: relative;
}

.process__count {
  display: none;
  font-family: var(--font-mono);
  font-size: clamp(56px, 9vw, 108px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--bs-lime);
}

.process__count-sep {
  color: var(--bs-gray);
}

.process__aside-title {
  display: none;
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  color: var(--bs-white);
}

.process__steps {
  position: relative; /* the rail is absolutely placed against this column */
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.step {
  position: relative;
  padding: clamp(22px, 3vw, 36px);
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-out-quart), background-color var(--dur) var(--ease-out-quart);
}

.step__idx {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--ls-mono);
  color: var(--bs-lime);
}

.step__title {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  color: var(--bs-white);
}

.step__body {
  max-width: 46ch;
  line-height: 1.6;
  color: var(--bs-silver);
}

.step__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  list-style: none;
}

.step__meta li {
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bs-gray);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius-pill);
}

.process__rail {
  display: none;
}

@media (min-width: 900px) {
  .process__layout {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(40px, 6vw, 96px);
  }

  /* Sticky beats a GSAP pin here: no pin-spacer to fight the grid, and it
     survives a resize without a refresh. */
  .process__aside {
    position: sticky;
    top: calc(var(--nav-h) + 16vh);
    align-self: start;
  }

  .process__count,
  .process__aside-title {
    display: block;
  }

  .process__steps {
    gap: clamp(80px, 14vh, 160px);
    padding-block: 8vh 12vh;
  }

  .step.is-dim {
    border-color: var(--bs-line);
    opacity: 0.42;
  }

  .step.is-active {
    border-color: rgba(204, 249, 12, 0.4);
    opacity: 1;
  }

  .process__rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -26px;
    display: block;
    width: 1px;
    background: var(--bs-line);
  }

  .process__rail i {
    position: absolute;
    inset: 0;
    display: block;
    background: var(--bs-lime);
    transform: scaleY(0);
    transform-origin: top center;
  }
}

/* --------------------------------------------------------------------------
   15. TECHNICAL SUPPORT — light band
   -------------------------------------------------------------------------- */
.support {
  border-block: 1px solid var(--bs-paper-line);
}

.res-grid {
  display: grid;
  gap: clamp(12px, 1.6vw, 18px);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .res-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .res-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.res-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease-out-quart), box-shadow var(--dur) var(--ease-out-quart),
    border-color var(--dur) var(--ease-out-quart);
}

.res-card:hover,
.res-card:focus-visible {
  border-color: #b6bdc4;
  box-shadow: 0 14px 34px -22px rgba(5, 5, 5, 0.5);
  transform: translateY(-3px);
}

.res-card__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.res-card__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--accent-ink);
}

.res-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}

.res-card__body {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-muted);
}

.res-card__more {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.res-card__more svg {
  transition: transform var(--dur) var(--ease-out-quart);
}

.res-card:hover .res-card__more svg {
  transform: translateX(4px);
}

/* Featured video card spans the row on wide screens. */
.res-card--featured {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

@media (min-width: 600px) {
  .res-card--featured {
    grid-column: span 2;
    flex-direction: row;
  }
}

.res-card__thumb {
  position: relative;
  flex: none;
  overflow: hidden;
  background: var(--bs-black);
}

.res-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out-quart);
}

.res-card--featured:hover .res-card__thumb img {
  transform: scale(1.05);
}

@media (min-width: 600px) {
  .res-card__thumb {
    width: 46%;
  }
}

.res-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: var(--bs-black);
  background: var(--bs-lime);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease-out-expo);
}

.res-card--featured:hover .res-card__play {
  transform: translate(-50%, -50%) scale(1.1);
}

.res-card__featured-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.4vw, 30px);
}

.res-card__duration {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

/* Download strip */
.dl-strip {
  margin-top: var(--stack-xl);
}

.dl-strip__head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}

.dl-strip__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  color: var(--ink);
}

.dl-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .dl-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .dl-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.dl-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-out-quart), transform var(--dur) var(--ease-out-quart);
}

.dl-card:hover {
  border-color: #a9b1b9;
  transform: translateY(-2px);
}

.dl-card__icon {
  flex: none;
  color: var(--ink-muted);
}

.dl-card__name {
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.dl-card__meta {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   16. BRANCH NETWORK
   -------------------------------------------------------------------------- */
.network {
  background: var(--bs-carbon);
}

.network__layout {
  display: grid;
  gap: var(--stack-lg);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1200px) {
  .network__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: clamp(32px, 4vw, 64px);
  }
}

.branch-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .branch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.branch {
  position: relative;
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-out-quart), background-color var(--dur) var(--ease-out-quart);
}

.branch.is-active,
.branch:hover {
  background: var(--bs-steel-2);
  border-color: rgba(204, 249, 12, 0.45);
}

.branch__city {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--bs-white);
}

.branch__role {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-lime);
}

.branch__addr {
  margin-bottom: 14px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--bs-silver);
}

.branch__rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 14px;
  border-top: 1px solid var(--bs-line);
}

.branch__row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--bs-silver);
}

.branch__row dt {
  flex: none;
  width: 80px; /* fits "RADNO VR." at 10px mono + 0.12em tracking without wrapping */
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bs-gray);
}

.branch__row dd {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.branch__row a:hover {
  color: var(--bs-lime);
}

.branch__map-link {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bs-lime);
}

.branch__map-link svg {
  transition: transform var(--dur) var(--ease-out-quart);
}

.branch__map-link:hover svg {
  transform: translate(2px, -2px);
}

.branch[data-status="unconfirmed"] .branch__addr {
  color: var(--bs-gray);
  font-style: italic;
}

.branch__flag {
  display: inline-block;
  padding: 3px 7px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bs-warn);
  border: 1px solid rgba(255, 95, 31, 0.4);
  border-radius: 2px;
}

/* Map */
.map {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  padding: clamp(20px, 3vw, 32px);
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
}

.map__svg {
  width: 100%;
  height: auto;
}

.map__outline {
  fill: rgba(28, 32, 37, 0.9);
  stroke: var(--bs-line);
  stroke-width: 1.4;
}

.map__pin {
  cursor: pointer;
}

.map__pin-dot {
  fill: var(--bs-lime);
  transition: r 220ms var(--ease-out-quart);
}

.map__pin-ring {
  fill: none;
  stroke: var(--bs-lime);
  stroke-width: 1.2;
  transform-origin: center;
  transform-box: fill-box;
  animation: pin-pulse 2.8s var(--ease-out-quart) infinite;
}

.map__pin:nth-of-type(2) .map__pin-ring {
  animation-delay: 0.5s;
}

.map__pin:nth-of-type(3) .map__pin-ring {
  animation-delay: 1s;
}

.map__pin:nth-of-type(4) .map__pin-ring {
  animation-delay: 1.5s;
}

.map__pin:nth-of-type(5) .map__pin-ring {
  animation-delay: 2s;
}

.map__pin-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  fill: var(--bs-gray);
  transition: fill 220ms var(--ease-out-quart);
}

.map__pin.is-active .map__pin-dot {
  r: 7;
}

.map__pin.is-active .map__pin-label {
  fill: var(--bs-white);
}

.map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--bs-line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bs-gray);
}

/* --------------------------------------------------------------------------
   17. B2B — light band
   -------------------------------------------------------------------------- */
.b2b__inner {
  display: grid;
  gap: var(--stack-lg);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 900px) {
  .b2b__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(40px, 6vw, 88px);
  }
}

.b2b__title {
  max-width: 18ch;
  margin-block: 16px 18px;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h2);
  color: var(--ink);
  text-wrap: balance;
}

.b2b__body {
  max-width: 54ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-body);
}

.b2b__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--stack-md);
}

.b2b__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: clamp(20px, 3vw, 30px);
  list-style: none;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.b2b__list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-block: 14px;
}

.b2b__list li + li {
  border-top: 1px solid var(--hairline);
}

.b2b__list svg {
  flex: none;
  margin-top: 2px;
  color: var(--accent-ink);
}

.b2b__list strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.b2b__list span {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  overflow: hidden;
  background: var(--bs-black);
}

.footer__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(56px, 8vw, 104px) 0;
}

.footer__top {
  display: grid;
  gap: var(--stack-lg);
  grid-template-columns: 1fr;
  padding-bottom: var(--stack-xl);
}

@media (min-width: 900px) {
  .footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: clamp(32px, 5vw, 80px);
  }
}

.footer__logo {
  width: 148px;
  height: auto;
}

.footer__tagline {
  max-width: 34ch;
  margin-top: 20px;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--bs-gray);
}

.footer__badge {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  padding: 9px 13px;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bs-lime);
  border: 1px solid rgba(204, 249, 12, 0.3);
  border-radius: var(--radius);
}

.footer__cols {
  display: grid;
  gap: var(--stack-md) 24px;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
  .footer__cols {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer__col-title {
  padding-bottom: 12px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-gray);
  border-bottom: 1px solid var(--bs-line);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  list-style: none;
  font-size: var(--fs-small);
}

.footer__list a {
  color: var(--bs-silver);
  transition: color var(--dur) var(--ease-out-quart);
}

.footer__list a:hover {
  color: var(--bs-lime);
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--bs-silver);
}

.footer__contact b {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bs-gray);
}

.footer__contact a:hover {
  color: var(--bs-lime);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
  /* Bottom padding clears the two fixed widgets so the legal line is never
     sitting underneath the launcher or the back-to-top button. */
  padding-block: 22px clamp(84px, 7vw, 96px);
  border-top: 1px solid var(--bs-line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bs-gray);
}

.footer__legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
}

/* Oversized wordmark, bleeding off the bottom edge. */
.footer__wordmark {
  position: absolute;
  right: 0;
  bottom: -3.5vw;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(76px, 19vw, 300px);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.05em;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  pointer-events: none;
  user-select: none;
  -webkit-text-stroke: 1px rgba(201, 207, 214, 0.09);
}

/* --------------------------------------------------------------------------
   19. AI ASSISTANT WIDGET
   -------------------------------------------------------------------------- */
.ai {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: var(--z-widget);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  pointer-events: none;
}

.ai__launcher,
.totop {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.7);
  transition: opacity var(--dur) var(--ease-out-quart), transform var(--dur) var(--ease-out-expo),
    visibility 0s linear var(--dur);
}

.ai.is-revealed .ai__launcher,
.totop.is-revealed {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  transition-delay: 0s;
}

.ai__launcher {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--bs-black);
  background: var(--bs-lime);
  border-radius: 50%;
  box-shadow: var(--shadow-pop);
  pointer-events: auto;
}

.ai__launcher:hover {
  background: var(--bs-lime-dim);
}

.ai__launcher::after {
  position: absolute;
  inset: 0;
  content: "";
  border: 2px solid var(--bs-lime);
  border-radius: 50%;
  opacity: 0;
}

.ai.is-hinting .ai__launcher::after {
  animation: launcher-ping 1.8s var(--ease-out-quart) 3;
}

.ai__launcher-icon--close {
  display: none;
}

.ai.is-open .ai__launcher-icon--open {
  display: none;
}

.ai.is-open .ai__launcher-icon--close {
  display: block;
}

.ai__panel {
  position: absolute;
  bottom: 60px;
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow: hidden;
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  visibility: hidden;
  opacity: 0;
  transform: scale(0.9) translateY(12px);
  transform-origin: bottom left;
  transition: opacity 260ms var(--ease-out-quart), transform 320ms var(--ease-out-expo),
    visibility 0s linear 320ms;
  pointer-events: auto;
}

.ai.is-open .ai__panel {
  visibility: visible;
  opacity: 1;
  transform: scale(1) translateY(0);
  transition-delay: 0s;
}

.ai__head {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 12px 12px 14px;
  background: var(--bs-carbon);
  border-bottom: 1px solid var(--bs-line);
}

.ai__head img {
  width: 30px;
  height: auto;
  flex: none;
}

.ai__head-text {
  flex: 1;
  min-width: 0;
}

.ai__head-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--bs-white);
}

.ai__status {
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bs-gray);
}

.ai__status::before {
  width: 6px;
  height: 6px;
  content: "";
  background: #3ddc84;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.16);
}

.ai__log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

.msg {
  max-width: 88%;
  padding: 11px 13px;
  font-size: 13.5px;
  line-height: 1.55;
  border-radius: 10px;
  animation: msg-in 320ms var(--ease-out-expo) both;
}

.msg--bot {
  color: var(--bs-silver);
  background: var(--bs-steel-2);
  border: 1px solid var(--bs-line);
  border-bottom-left-radius: 3px;
}

.msg--user {
  align-self: flex-end;
  color: var(--bs-black);
  background: var(--bs-lime);
  border-bottom-right-radius: 3px;
  font-weight: 500;
}

.msg strong {
  color: var(--bs-white);
}

.msg--user strong {
  color: var(--bs-black);
}

.msg ul {
  padding-left: 16px;
  margin-top: 6px;
}

.msg li {
  margin-bottom: 3px;
}

.msg a {
  color: var(--bs-lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.msg--user a {
  color: var(--bs-black);
}

.msg--typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 15px 14px;
}

.msg--typing i {
  width: 5px;
  height: 5px;
  background: var(--bs-gray);
  border-radius: 50%;
  animation: typing-dot 1.2s var(--ease-in-out) infinite;
}

.msg--typing i:nth-child(2) {
  animation-delay: 0.15s;
}

.msg--typing i:nth-child(3) {
  animation-delay: 0.3s;
}

.ai__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 12px;
}

.ai__chip {
  padding: 7px 11px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--bs-silver);
  text-align: left;
  border: 1px solid var(--bs-line);
  border-radius: var(--radius-pill);
  transition: color var(--dur) var(--ease-out-quart), border-color var(--dur) var(--ease-out-quart);
}

.ai__chip:hover {
  color: var(--bs-lime);
  border-color: rgba(204, 249, 12, 0.45);
}

/* Some chips ask a question, some go somewhere. The ones that go somewhere are
   anchors, so they need the box the button already had — and an arrow, so the
   difference is visible before you click rather than after. */
.ai__chip--link {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.ai__chip--link::after {
  content: "→";
  color: var(--bs-gray);
  transition: color var(--dur) var(--ease-out-quart);
}

.ai__chip--link:hover::after {
  color: inherit;
}

.ai__form {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px;
  background: var(--bs-carbon);
  border-top: 1px solid var(--bs-line);
}

.ai__input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding-inline: 12px;
  font-size: 13.5px;
  color: var(--bs-white);
  background: var(--bs-black);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
}

.ai__input::placeholder {
  color: var(--bs-gray);
}

.ai__send {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--bs-black);
  background: var(--bs-lime);
  border-radius: var(--radius);
  transition: background-color var(--dur) var(--ease-out-quart);
}

.ai__send:hover {
  background: var(--bs-lime-dim);
}

/* --------------------------------------------------------------------------
   20. BACK TO TOP
   -------------------------------------------------------------------------- */
.totop {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--z-widget);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--bs-white);
  background: rgba(12, 14, 16, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--bs-line);
  border-radius: 50%;
}

.totop__ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.totop__ring circle {
  fill: none;
  stroke-width: 1.5;
}

.totop__track {
  stroke: var(--bs-line);
}

.totop__bar {
  stroke: var(--bs-lime);
  stroke-linecap: round;
  opacity: 0.75;
  transition: opacity var(--dur) linear;
}

.totop:hover .totop__bar {
  opacity: 1;
}

.totop__chevron {
  position: relative;
  transition: transform var(--dur) var(--ease-out-expo);
}

.totop:hover .totop__chevron {
  transform: translateY(-2px);
}

@media (min-width: 600px) {
  .ai {
    bottom: 24px;
    left: 24px;
  }

  .ai__launcher {
    width: 56px;
    height: 56px;
  }

  .ai__panel {
    bottom: 68px;
  }

  .totop {
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
  }
}

/* --------------------------------------------------------------------------
   21. SECTION DIVIDER WITH GEAR
   -------------------------------------------------------------------------- */
.divider {
  position: relative;
  height: clamp(90px, 13vw, 170px);
  overflow: hidden;
  background: var(--bs-black);
}

.divider__gear {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(180px, 26vw, 320px);
  color: var(--bs-lime);
  opacity: 0.07;
  transform: translate(-50%, -50%);
}

.divider__rule {
  position: absolute;
  top: 50%;
  right: var(--gutter);
  left: var(--gutter);
  height: 1px;
  background: var(--bs-line);
}

/* --------------------------------------------------------------------------
   22. REVEAL BASELINE
   Content is visible by default. The hidden start state is armed by JS only
   once the observer that will bring it back is actually wired up — so a failed
   script leaves a readable page rather than a blank one.
   -------------------------------------------------------------------------- */
html:not(.js) .preloader {
  display: none;
}

html.reveal-armed .reveal {
  opacity: 0;
  transform: translateY(22px);
}

html.reveal-armed .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease-out-quart), transform 700ms var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}

/* --------------------------------------------------------------------------
   23. SECTION-ENTRY CURTAIN
   Heading blocks lift a clip-path curtain instead of fading up, so every
   section enters the same way and the scroll reads as choreographed.
   -------------------------------------------------------------------------- */
html.reveal-armed .reveal-curtain {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
}

html.reveal-armed .reveal-curtain.is-in {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transition:
    clip-path 900ms var(--ease-in-out),
    opacity 420ms linear;
}

/* --------------------------------------------------------------------------
   24. LINK UNDERLINE DRAW
   In from the left on hover, out to the right on leave.
   -------------------------------------------------------------------------- */
.link-draw {
  position: relative;
  display: inline;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 0 1px;
  transition: background-size 340ms var(--ease-out-quart), color var(--dur) var(--ease-out-quart);
}

.link-draw:hover,
.link-draw:focus-visible {
  background-position: 0 100%;
  background-size: 100% 1px;
}

.footer__list a,
.mega__link,
.footer__contact a,
.footer__legal a,
.branch__row a,
.psearch__result-body a,
.msg a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 100% calc(100% - 1px);
  background-size: 0 1px;
  text-decoration: none;
  transition: background-size 340ms var(--ease-out-quart), color var(--dur) var(--ease-out-quart),
    transform var(--dur) var(--ease-out-quart);
}

.footer__list a:hover,
.footer__list a:focus-visible,
.mega__link:hover,
.mega__link:focus-visible,
.footer__contact a:hover,
.footer__contact a:focus-visible,
.footer__legal a:hover,
.footer__legal a:focus-visible,
.branch__row a:hover,
.branch__row a:focus-visible,
.psearch__result-body a:hover,
.msg a:hover {
  background-position: 0 calc(100% - 1px);
  background-size: 100% 1px;
}

/* Hero entry: staggered, fired the moment the preloader splits. */
.hero.is-armed [data-hero-item] {
  opacity: 0;
}

.hero.is-armed [data-hero-item]:not(.line-mask) {
  transform: translateY(16px);
}

.hero.is-revealed [data-hero-item] {
  opacity: 1;
  transition: opacity 680ms var(--ease-out-quart);
  transition-delay: var(--hero-delay, 0ms);
}

.hero.is-revealed [data-hero-item]:not(.line-mask) {
  transform: none;
  transition: opacity 680ms var(--ease-out-quart), transform 820ms var(--ease-out-expo);
  transition-delay: var(--hero-delay, 0ms);
}

.hero.is-revealed .line-mask > span {
  transform: none;
  transition: transform 900ms var(--ease-out-expo);
  transition-delay: var(--hero-delay, 0ms);
}