@charset "UTF-8";
/* ==========================================================================
   ONE STOP SHOP DESIGNZ — motion.css
   The Blackout look and everything that moves, loaded after theme.css.

   01. ATMOSPHERE      grain, frame lines, page-to-page fade, progress, cursor
   02. TYPE            capitals, mono labels, fire
   03. BUTTONS         the fill that rises under the pointer
   04. HEADER          clear over the hero, solid once you scroll
   05. HEROES          home (figure in smoke), page heroes, image heroes
   06. TICKER          the services rolling past
   07. REVEAL          headings rise word by word, the rest slides in
   08. CARDS           products, cells, tiles, panels, steps, stats
   09. HOME            rail, stream, wall, offers, release, doors
   10. STORE           jump bar, bands, spotlight
   11. PAGES           services, FAQ, contact, about, product page
   12. BAND + FOOTER   the closing call, the wordmark
   13. WEBSITES        the "Need a website?" mockups
   14. REDUCED MOTION  all of it off, final states shown

   Rules:
   - Content is never hidden unless the script has run (html.fx-on). If the
     script is blocked, the page is simply static.
   - Only transform, opacity, clip-path and background-position animate.
     No blur is ever animated.
   - Everything stops for people who ask their device for less motion.
   ========================================================================== */


/* ==========================================================================
   01. ATMOSPHERE
   ========================================================================== */

:root {
  /* Names the website mockups (section 13) were drawn with. */
  --fx-red:     var(--c-ember);
  --fx-crimson: var(--c-blood);
  --fx-ember:   #ff7a2e;
  --fx-gold:    var(--c-heat);
  --fx-glow:    rgba(255, 74, 28, 0.5);
  --fx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fx-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

html { background: var(--c-bg); scrollbar-color: #3a3734 var(--c-bg); }
/* Things that slide in from the side start a little way off to the right.
   Until they arrive they must not make a phone's page scroll sideways. */
.site-main { overflow-x: clip; }

/* Two hairlines down the page where the layout's edges are, and a low red
   glow in the top corner. One still layer behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(var(--c-line), var(--c-line)) calc(50% - var(--w-page) / 2) 0 / 1px 100% no-repeat,
    linear-gradient(var(--c-line), var(--c-line)) calc(50% + var(--w-page) / 2) 0 / 1px 100% no-repeat,
    radial-gradient(70rem 44rem at 100% 0%, rgba(177, 15, 28, 0.1), transparent 60%);
}
/* Film grain, behind the content, so black reads as a surface. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--c-ember); color: #fff; }

/* One page fades into the next (browsers that support it; others just load). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fx-page-out 0.22s ease both; }
::view-transition-new(root) { animation: fx-page-in 0.45s var(--fx-ease-out) both; }
@keyframes fx-page-out { to { opacity: 0; } }
@keyframes fx-page-in { from { opacity: 0; transform: translateY(14px); } }

/* Scroll progress, along the top edge. */
.fx-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 2px;
  transform-origin: 0 50%;
  transform: scaleX(var(--fx-scroll, 0));
  background: var(--fire-run);
  pointer-events: none;
}

/* A ring that trails the pointer and opens up over anything you can press.
   Mouse and trackpad only; the real cursor stays. */
.fx-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9998;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(236, 231, 223, 0.55);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s, width 0.3s var(--ease), height 0.3s var(--ease), margin 0.3s var(--ease), border-color 0.3s, background-color 0.3s;
  will-change: transform;
}
.fx-cursor.is-on { opacity: 1; }
.fx-cursor.is-over {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-color: var(--c-ember);
  background: rgba(255, 74, 28, 0.1);
}

/* Smoke and embers: one small canvas per stage, drawn by motion.js. */
.fx-smoke {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


/* ==========================================================================
   02. TYPE
   ========================================================================== */

.t-display, .t-h1, .t-h2, .t-h3 {
  text-transform: uppercase;
  hyphens: manual;
}
.t-h3 { font-weight: var(--fw-display); line-height: 1; }

.t-eyebrow,
.t-micro,
.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
}
.t-eyebrow { font-size: var(--t-micro); line-height: 1.4; letter-spacing: var(--ls-eyebrow); color: var(--c-text-muted); }
.t-micro { letter-spacing: 0.18em; line-height: 1.4; }
.mono { font-size: var(--t-micro); line-height: 1.4; letter-spacing: 0.2em; color: var(--c-text-muted); }

.t-lead { font-size: clamp(1rem, 0.92rem + 0.45vw, 1.2rem); line-height: 1.55; color: #cfc9c0; }

.prose h2, .prose h3 { text-transform: uppercase; }
.prose h2 { font-size: var(--t-h3); line-height: 1; }
.prose h3 { font-size: 1.375rem; font-weight: var(--fw-display); line-height: 1.05; }

/* Fire: one word in a headline. Rises through the letters like heat. */
.fx-hot,
.fire {
  display: inline-block;
  padding-bottom: 0.06em;
  background: var(--fire);
  background-size: 100% 190%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fx-fire 3.4s ease-in-out infinite alternate;
}
@keyframes fx-fire { to { background-position: 0 100%; } }

/* Every smaller title on the site is display type too. */
.card__title,
.lane__item-title,
.study__nav-title,
.faq__item summary,
.footer__heading,
.brand__text {
  text-transform: uppercase;
  font-weight: var(--fw-display);
}
.footer__heading { font-family: var(--font-mono); font-weight: 500; }


/* ==========================================================================
   03. BUTTONS
   ========================================================================== */

.btn,
.woocommerce .button,
.woocommerce-page .button,
.woocommerce button[type="submit"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 10px;
  min-height: 48px;
  padding: 13px 22px;
  border: 1px solid var(--c-line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--c-text);
  font: var(--fw-display) 1.0625rem/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.3s, border-color 0.3s, transform 0.4s var(--ease);
}
.btn::before,
.woocommerce .button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fire-fill);
  transform: translateY(101%);
  transition: transform 0.4s var(--ease);
}
.btn:hover,
.btn:focus-visible,
.woocommerce .button:hover {
  color: #fff;
  border-color: var(--c-ember);
  background: transparent;
}
.btn:hover::before,
.btn:focus-visible::before,
.woocommerce .button:hover::before { transform: none; }

.btn--primary,
.woocommerce .button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce #place_order {
  background: var(--c-text);
  border-color: var(--c-text);
  color: var(--c-text-invert);
}
.btn--primary:hover,
.btn--primary:focus-visible,
.woocommerce .button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover {
  background: var(--c-text);
  border-color: var(--c-ember);
  color: #fff;
}

.btn--secondary { background: rgba(5, 5, 5, 0.35); }
.btn--secondary:hover { border-color: var(--c-ember); background: rgba(5, 5, 5, 0.35); }

/* The quiet one is a mono text link with a line that draws under it. */
.btn--quiet {
  min-height: var(--tap);
  padding: 0;
  border: 0;
  overflow: visible;
  font: 500 0.75rem/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text);
}
.btn--quiet::before {
  inset: auto 0 10px 0;
  height: 1px;
  z-index: 0;
  background: var(--fire-run);
  transform: scaleX(0);
  transform-origin: left;
}
.btn--quiet:hover { color: var(--c-heat); border: 0; }
.btn--quiet:hover::before { transform: none; }

.btn--lg { min-height: 58px; padding-inline: 28px; font-size: 1.25rem; }
.btn--sm { min-height: var(--tap); padding: 10px 16px; font-size: 0.9375rem; }
.btn .icon { transition: transform 0.4s var(--ease); }
.btn:hover .icon { transform: translateX(5px); }
.btn .icon--play { width: 0.95em; height: 0.95em; }
.btn:hover .icon--play { transform: none; }

/* Magnetic buttons (set by the script) lean toward the pointer. */
.btn[data-fx-magnet] { transform: translate(var(--tx, 0), var(--ty, 0)); }


/* ==========================================================================
   04. HEADER
   ========================================================================== */

.site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.site-header.is-stuck,
body.is-nav-open .site-header,
.site-header:has(.header__search:not([hidden])) {
  background: rgba(5, 5, 5, 0.96);
  border-bottom-color: var(--c-line);
}
.site-header.is-stuck {
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
/* The fire hairline under the bar once it has stuck. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--fire-run);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
  pointer-events: none;
}
.site-header.is-stuck::after { transform: none; }

/* The first stage on a page runs up under the bar. */
.site-main > .hero:first-child,
.site-main > .reel:first-child,
.site-main > .mhero:first-child { margin-top: calc(var(--header-h) * -1); }

.brand img,
.brand .custom-logo { max-height: 46px; border-radius: 50%; transition: transform 0.6s var(--fx-spring); }
.brand:hover img { transform: rotate(-8deg) scale(1.08); }
.brand__text { font-size: 1.25rem; line-height: 0.9; letter-spacing: 0.04em; }

.nav__link {
  font: 500 var(--t-micro)/1 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text);
  opacity: 0.72;
  transition: opacity 0.25s;
}
.nav__link:hover,
.nav__item:focus-within > .nav__link,
.nav__item.is-current > .nav__link { opacity: 1; }
.nav__item.is-current > .nav__link::after { height: 2px; bottom: 9px; background: var(--c-ember); }
.nav__sub { border-radius: 0; background: var(--c-surface); border-color: var(--c-line-strong); }
.nav__sub a {
  font: 500 var(--t-micro)/1.3 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav__sub a:hover { background: var(--c-accent-quiet); color: var(--c-heat); }

.icon-btn { color: var(--c-text); border-radius: 0; }
.icon-btn:hover { background: var(--c-accent-quiet); color: var(--c-heat); }
.cart-count { background: var(--c-ember); color: #050505; font-family: var(--font-mono); font-weight: 500; }

.header__cta { display: none; margin-left: var(--s-3); }
@media (min-width: 1280px) { .header__cta { display: inline-flex; } }
.nav__foot { display: none; }

.header__search input[type="search"] { border-radius: 0; background: var(--c-surface); border-color: var(--c-line-strong); }

/* Phone and tablet: the menu is a full blacked-out screen of big names. */
@media (max-width: 1099px) {
  .nav {
    display: flex;
    flex-direction: column;
    padding-top: var(--s-4);
    background:
      radial-gradient(80% 50% at 100% 100%, rgba(177, 15, 28, 0.4), transparent 70%),
      var(--c-bg);
  }
  .nav__list { counter-reset: nav; }
  .nav__item { counter-increment: nav; border-bottom-color: var(--c-line); }
  .nav__link {
    justify-content: flex-start;
    gap: var(--s-4);
    min-height: 60px;
    font: var(--fw-display) clamp(1.9rem, 1.2rem + 3.6vw, 2.75rem)/1 var(--font-display);
    letter-spacing: 0.02em;
    opacity: 1;
  }
  .nav__link::before {
    content: counter(nav, decimal-leading-zero);
    font: 500 var(--t-micro)/1 var(--font-mono);
    letter-spacing: 0.16em;
    color: var(--c-ember);
  }
  .nav__item.is-current > .nav__row > .nav__link,
  .nav__item.is-current > .nav__link {
    background: var(--fire);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .nav__sub a { min-height: var(--tap); padding-left: 2.5rem; font-size: 0.75rem; }
  .nav__foot {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    margin-top: auto;
    padding-top: var(--s-7);
  }
  /* Each name steps in as the screen opens. */
  html.fx-on .nav .nav__item,
  html.fx-on .nav .nav__foot { opacity: 0; transform: translateY(18px); }
  html.fx-on .nav.is-open .nav__item,
  html.fx-on .nav.is-open .nav__foot {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s var(--ease) calc(60ms * var(--n, 0) + 80ms), transform 0.6s var(--ease) calc(60ms * var(--n, 0) + 80ms);
  }
  .nav__item:nth-child(1) { --n: 0; } .nav__item:nth-child(2) { --n: 1; } .nav__item:nth-child(3) { --n: 2; }
  .nav__item:nth-child(4) { --n: 3; } .nav__item:nth-child(5) { --n: 4; } .nav__item:nth-child(6) { --n: 5; }
  .nav__item:nth-child(7) { --n: 6; } .nav__item:nth-child(8) { --n: 7; } .nav__item:nth-child(n+9) { --n: 8; }
  .nav__foot { --n: 9; }
}


/* ==========================================================================
   05. HEROES
   ========================================================================== */

.hero { background: var(--c-bg); }
/* Stages have layers that hang past their edges. "clip" rather than "hidden":
   a hidden box can still be scrolled inside (by a focus, by a script), which
   slides every layer out of place; a clipped one cannot. */
.hero,
.mhero,
.tease,
.band,
.wall,
.footer-cta,
.site-footer { overflow: clip; }
.hero__content { position: relative; z-index: 3; }
.hero__content > * { max-width: 60rem; }
.hero__content .t-eyebrow { margin-bottom: var(--s-3); }
.hero__content .t-lead { max-width: 40ch; margin-top: var(--s-5); }

/* Hero text waits for the script to set up its entrance, so nothing flashes
   in and then out again. The head script lifts this if the script fails. */
html.fx-on .hero:not(.fx-ready) .hero__content,
html.fx-on .mhero:not(.fx-ready) .mhero__in { opacity: 0; }

/* Everything in a hero that is not the headline follows it in. */
html.fx-on .fx-intro { opacity: 0; transform: translateY(22px); }
html.fx-on .fx-intro.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--fx-ease-out) var(--d, 0s), transform 0.9s var(--fx-ease-out) var(--d, 0s);
}

/* --- Home: a figure coming out of the dark, next to the headline --------- */

.hero--home {
  min-height: min(100svh, 60rem);
  align-items: flex-end;
  padding-block: calc(var(--header-h) + var(--s-8)) clamp(5rem, 9vw, 7rem);
  background:
    radial-gradient(90% 70% at 78% 100%, rgba(177, 15, 28, 0.42), transparent 62%),
    radial-gradient(60% 50% at 80% 70%, rgba(255, 74, 28, 0.16), transparent 70%),
    var(--c-bg);
}
.hero--home::after { background: linear-gradient(180deg, transparent 70%, var(--c-bg) 100%); z-index: 2; }
.hero--home .hero__bg { opacity: 0.35; }
.hero--home .t-display {
  max-width: 6.1em;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  text-wrap: wrap;
}
.hero--home .t-lead { margin-top: var(--s-5); }

/* A portrait, nearly as tall as the stage and sized from that height, so the
   head is never cut off on a short screen. */
.hero__figure {
  position: absolute;
  right: max(0px, calc(50% - 47rem));
  bottom: 0;
  z-index: 0;
  height: min(calc(100% - var(--header-h) + 0.5rem), 58rem);
  max-width: 54%;
  margin: 0;
  aspect-ratio: 4 / 5;
  --fig-mask: linear-gradient(to top, transparent 0, #000 22%), linear-gradient(to right, transparent 0, #000 30%), linear-gradient(to bottom, transparent 0, #000 12%), linear-gradient(to left, transparent 0, #000 12%);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}
.hero__figure picture { display: contents; }
/* The picture and the light on it each fade out at the edges. The mask is on
   the two layers, not on the figure: a blend inside a masked box draws
   nothing at all in Chromium. */
.hero__figure img,
.hero__figure::after {
  -webkit-mask-image: var(--fig-mask);
  -webkit-mask-composite: source-in;
  mask-image: var(--fig-mask);
  mask-composite: intersect;
}
.hero__figure img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* The red light on the figure's edge. */
.hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(250deg, rgba(255, 74, 28, 0.3), rgba(177, 15, 28, 0.14) 35%, transparent 62%);
  mix-blend-mode: color-dodge;
}
html.fx-on .hero__figure { opacity: 0; }
html.fx-on .hero.fx-ready .hero__figure { opacity: 1; transition: opacity 1.6s ease 0.25s; }

@media (max-width: 760px) {
  .hero--home { min-height: 0; padding-top: calc(var(--header-h) + min(76vw, 24rem)); }
  /* On a phone the picture sits above the headline: a square cut from the
     top of the portrait, fading out where the words begin. */
  .hero__figure {
    top: calc(var(--header-h) - 8px);
    bottom: auto;
    right: -6%;
    width: 112%;
    height: auto;
    max-width: none;
    aspect-ratio: 1 / 1;
    --fig-mask: linear-gradient(to top, transparent 0, #000 42%), linear-gradient(to right, transparent 0, #000 12%), linear-gradient(to bottom, transparent 0, #000 9%), linear-gradient(to left, transparent 0, #000 8%);
  }
  .hero__figure img { object-position: center 6%; }
}

/* "Now designing: album covers|" above the headline. */
.fx-typer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s-4);
  max-width: 100%;
  font: 500 var(--t-micro)/1.4 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.fx-typer__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-ember);
  animation: fx-ping 1.8s var(--fx-ease-out) infinite;
}
@keyframes fx-ping {
  0%   { box-shadow: 0 0 0 0 rgba(255, 74, 28, 0.7); }
  100% { box-shadow: 0 0 0 11px rgba(255, 74, 28, 0); }
}
.fx-typer__label { white-space: nowrap; }
.fx-typer__word { color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-typer__caret {
  display: inline-block;
  width: 7px;
  height: 1.1em;
  margin-left: -4px;
  background: var(--c-ember);
  animation: fx-caret 0.9s steps(1) infinite;
}
@keyframes fx-caret { 50% { opacity: 0; } }

/* Scroll cue, bottom corner of the home hero. */
.fx-cue {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s-6);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  font: 500 var(--t-micro)/1 var(--font-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.fx-cue i {
  display: block;
  width: 54px;
  height: 1px;
  background: var(--fire-run);
  transform-origin: left;
  animation: fx-cue 2.2s var(--fx-ease-out) infinite;
}
@keyframes fx-cue {
  0%   { transform: scaleX(0); opacity: 1; }
  60%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@media (max-width: 760px), (max-height: 640px) { .fx-cue { display: none; } }

/* --- Page heroes: the title as a poster --------------------------------- */

.hero--flat {
  min-height: clamp(22rem, 54vh, 34rem);
  align-items: flex-end;
  padding-block: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)) clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--c-line);
  background:
    radial-gradient(60% 90% at 100% 100%, rgba(177, 15, 28, 0.36), transparent 65%),
    var(--c-bg);
}
.hero--flat .t-h1 {
  font-size: clamp(3rem, 1rem + 9vw, 7.5rem);
  line-height: 0.88;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}
.hero--flat .t-eyebrow { margin-bottom: var(--s-3); }
.hero--flat .t-eyebrow::before { content: "/ "; color: var(--c-ember); }
.hero--flat .t-lead { margin-top: var(--s-5); }

/* The page's name again, huge and hollow, drifting behind the title. */
.hero__ghost {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.16em;
  z-index: 0;
  overflow: hidden;
  font: var(--fw-display) clamp(7rem, 2rem + 22vw, 19rem)/0.8 var(--font-display);
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(236, 231, 223, 0.09);
  pointer-events: none;
  user-select: none;
}
.hero__ghost span { display: inline-block; padding-right: 0.35em; animation: fx-run 60s linear infinite; }
@keyframes fx-run { to { transform: translateX(-100%); } }

/* Pages you fill things in on get the short version. */
.woocommerce-cart .hero--flat,
.woocommerce-checkout .hero--flat,
.woocommerce-account .hero--flat { min-height: 0; padding-bottom: var(--s-6); }
.woocommerce-cart .hero--flat .t-h1,
.woocommerce-checkout .hero--flat .t-h1,
.woocommerce-account .hero--flat .t-h1 { font-size: var(--t-h1); }

/* --- Image heroes (NBA2K, Past & Present) -------------------------------- */

.hero:not(.hero--flat):not(.hero--home) {
  min-height: clamp(30rem, 78vh, 48rem);
  padding-block: calc(var(--header-h) + var(--s-9)) var(--s-9);
}
.hero__bg img { animation: fx-kenburns 26s ease-in-out infinite alternate; }
@keyframes fx-kenburns { from { transform: scale(1.04); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
.hero--nba2k::after,
.hero:not(.hero--flat):not(.hero--home)::after {
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.94) 0%, rgba(5, 5, 5, 0.66) 48%, rgba(5, 5, 5, 0.3) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.3) 0%, rgba(5, 5, 5, 0.2) 55%, var(--c-bg) 100%);
}
/* No picture set yet: the same red light as every other stage, no scrim. */
.hero:not(.hero--flat):not(.hero--home):not(:has(.hero__bg)) {
  background: radial-gradient(60% 90% at 100% 100%, rgba(177, 15, 28, 0.4), transparent 65%), var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.hero:not(.hero--flat):not(.hero--home):not(:has(.hero__bg))::after { background: none; }


/* ==========================================================================
   06. TICKER — what gets made, rolling past
   ========================================================================== */

.fx-marquee {
  position: relative;
  padding-block: var(--s-5);
  border-block: 1px solid var(--c-line);
  background: var(--c-bg);
  overflow: hidden;
}
.fx-marquee__row { display: flex; width: max-content; animation: fx-marquee 44s linear infinite; }
.fx-marquee__row + .fx-marquee__row { margin-top: var(--s-3); animation-direction: reverse; animation-duration: 58s; }
.fx-marquee:hover .fx-marquee__row { animation-play-state: paused; }
.fx-marquee__set { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.fx-marquee__set li {
  display: flex;
  align-items: center;
  font: var(--fw-display) clamp(2.25rem, 1.4rem + 3.6vw, 4.75rem)/1 var(--font-display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-text);
}
.fx-marquee__set li:nth-child(even) { color: transparent; -webkit-text-stroke: 1px rgba(236, 231, 223, 0.6); }
.fx-marquee__set li::after {
  content: "/";
  padding-inline: 0.35em;
  color: var(--c-ember);
  -webkit-text-stroke: 0;
}
.fx-marquee__row + .fx-marquee__row .fx-marquee__set li {
  font: 500 0.75rem/1 var(--font-mono);
  letter-spacing: 0.24em;
  color: var(--c-text-muted);
  -webkit-text-stroke: 0;
}
.fx-marquee__row + .fx-marquee__row .fx-marquee__set li::after { padding-inline: 1.6em; }
@keyframes fx-marquee { to { transform: translateX(-50%); } }


/* ==========================================================================
   07. REVEAL — things arrive as you reach them
   ========================================================================== */

html.fx-on [data-fx-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s var(--fx-ease-out) var(--fx-delay, 0s), transform 0.9s var(--fx-ease-out) var(--fx-delay, 0s);
}
html.fx-on [data-fx-reveal="left"]  { transform: translateX(-44px); }
html.fx-on [data-fx-reveal="right"] { transform: translateX(44px); }
html.fx-on [data-fx-reveal="zoom"]  { transform: scale(0.94); }
html.fx-on [data-fx-reveal].is-in { opacity: 1; transform: none; }

/* Media opens like a shutter. */
html.fx-on [data-fx-reveal="wipe"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--fx-ease-out) var(--fx-delay, 0s);
}
html.fx-on [data-fx-reveal="wipe"].is-in { clip-path: inset(0 0 0 0); }

/* Headings come up word by word, out of a mask. The padding keeps the tops
   and tails of the letters inside it. */
.fx-words .fx-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.14em 0.03em 0.1em;
  margin: -0.14em -0.03em -0.1em;
}
.fx-words .fx-w > span { display: inline-block; }
/* Once a hero headline has risen, the masks come off, so its shadow is not
   cut into boxes around each word. */
.fx-words.fx-done .fx-w { overflow: visible; }
html.fx-on .fx-words .fx-w > span { transform: translateY(115%); }
html.fx-on .fx-words.is-in .fx-w > span,
html.fx-on .is-in .fx-words .fx-w > span {
  transform: none;
  transition: transform 1s var(--fx-ease-out) calc(var(--i) * 60ms + var(--d, 0s));
}
/* The fire word in a split headline rises with the rest. */
html.fx-on .fx-words .fx-hot { opacity: 0; transform: translateY(0.5em); }
html.fx-on .fx-words.is-in .fx-hot,
html.fx-on .is-in .fx-words .fx-hot {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s ease calc(var(--i) * 60ms + var(--d, 0s)), transform 1s var(--fx-ease-out) calc(var(--i) * 60ms + var(--d, 0s));
}

/* Section heads: a numbered mono label over a poster headline. */

.section__head { counter-increment: sec; gap: var(--s-3); margin-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem); max-width: 62rem; }
.section__head .t-eyebrow::before,
.storeband__head .t-eyebrow::before {
  content: counter(sec, decimal-leading-zero) " /";
  margin-right: 0.8em;
  color: var(--c-ember);
}
.section__head .t-lead { margin-top: var(--s-2); }
.section--divided { border-top-color: var(--c-line); }
.section + .section--divided { padding-top: var(--section-y); }
.section + .section--divided.section--tight { padding-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }


/* ==========================================================================
   08. CARDS
   ========================================================================== */

/* --- Product card -------------------------------------------------------- */

.card {
  background: var(--c-surface);
  border-color: var(--c-line);
  isolation: isolate;
  transition: transform 0.5s var(--ease), border-color 0.3s;
}
.card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  height: 2px;
  background: var(--fire-run);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
  pointer-events: none;
}
.card:hover { transform: translateY(-6px); border-color: var(--c-line-strong); box-shadow: var(--shadow-lift); }
.card:hover::before,
.card:focus-within::before { transform: none; }

.card__media { aspect-ratio: 1 / 1; background: #09090a; }
.card__media--wide { aspect-ratio: 16 / 9; }
.card__media img {
  object-fit: cover;
  padding: 0;
  filter: saturate(0.92) brightness(0.9);
  transition: transform 1s var(--ease), filter 0.5s;
}
.card:hover .card__media img { transform: scale(1.07); filter: none; }
.grid--4 .card__media img { padding: 0; }
.pick .card__media img { object-fit: contain; padding: var(--s-4); filter: none; }

.card__body { gap: var(--s-2); padding: var(--s-5); }
.card__title { font-size: 1.5rem; line-height: 1; letter-spacing: 0.01em; }
.card__meta { color: var(--c-text-muted); }
.card__foot { padding-top: var(--s-4); border-top: 1px solid var(--c-line); margin-top: auto; }
.card__body > .card__meta + .card__foot,
.card__body > .card__title + .card__foot { margin-top: auto; }
.card__foot .btn { min-height: var(--tap); padding: 10px 14px; font-size: 0.9375rem; }
.card__sale,
.woocommerce span.onsale {
  border: 0;
  background: var(--c-text);
  color: var(--c-text-invert);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.16em;
  padding: 6px 8px;
  backdrop-filter: none;
}
.card__noimage { font-family: var(--font-mono); }

.price__now { font-size: 1.75rem; line-height: 1; letter-spacing: 0.01em; }
.price__was { font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.06em; }
.rating__star.is-on { color: var(--c-heat); }

@media (max-width: 620px) {
  .grid--4 .card__title { font-size: 1.2rem; }
  .grid--4 .price__now { font-size: 1.4rem; }
  .grid--4 .card__foot .btn { font-size: 0.8125rem; letter-spacing: 0.06em; }
}

/* --- Cells: text cards that share their borders --------------------------
   A run of .feature or .tile in a grid becomes one ruled table. Under the
   pointer a cell fills with fire from the bottom. */

.grid:has(> .feature),
.grid:has(> .tile),
.grid:has(> .package),
.steps {
  gap: 0;
  border-top: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
}
.grid { counter-reset: fx-card; }
.feature,
.tile,
.package,
.steps__item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  border-radius: 0;
  background: transparent;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  transition: color 0.3s;
}
.feature { counter-increment: fx-card; min-height: 17rem; gap: var(--s-3); }
.feature:hover { transform: none; border-color: var(--c-line); }
.feature::before,
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fire-fill);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
}
.feature:hover::before,
.feature:focus-within::before,
.tile:hover::before { transform: none; }
.feature .t-h3::before {
  content: counter(fx-card, decimal-leading-zero);
  display: block;
  margin-bottom: clamp(1.5rem, 4vw, 3.25rem);
  font: 500 var(--t-micro)/1 var(--font-mono);
  letter-spacing: 0.2em;
  color: var(--c-ember);
  transition: color 0.3s;
}
.feature .t-h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); line-height: 0.95; }
.feature .t-muted,
.tile .t-muted { transition: color 0.3s; }
.feature:hover .t-muted,
.feature:focus-within .t-muted,
.tile:hover .t-muted,
.feature:hover .t-h3::before,
.feature:focus-within .t-h3::before { color: #fff; }
.feature:hover .btn--quiet,
.feature:focus-within .btn--quiet { color: #fff; }
.feature .btn--quiet::before { background: #fff; }
.feature .btn--quiet { margin-top: auto; padding-top: 0; }

.tile { gap: var(--s-3); }
/* Four tiles fill their row; no empty fifth column with half a border. */
.grid.tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.tile__icon {
  width: 52px;
  height: 52px;
  margin-bottom: var(--s-6);
  border-radius: 50%;
  border-color: var(--c-line-strong);
  color: var(--c-heat);
  transition: transform 0.6s var(--fx-spring), background-color 0.3s, color 0.3s, border-color 0.3s;
}
.tile:hover .tile__icon { transform: rotate(-10deg) scale(1.1); background: #050505; border-color: #050505; color: #fff; }
.tile .t-h3 { font-size: 1.5rem; }
@media (max-width: 620px) {
  .grid.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { padding: var(--s-4); }
  .tile__icon { margin-bottom: var(--s-4); }
  .tile .t-h3 { font-size: 1.25rem; overflow-wrap: break-word; }
}

/* --- Panels, proof, callouts -------------------------------------------- */

.panel,
.proof,
.contact__details,
.package {
  background: var(--c-surface);
  border-color: var(--c-line);
}
.panel,
.proof { position: relative; }
/* A bracket in two corners, like a frame guide. */
.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid var(--c-ember);
  pointer-events: none;
  transition: width 0.4s var(--ease), height 0.4s var(--ease);
}
.panel::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.panel::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.panel:hover::before,
.panel:hover::after { width: 34px; height: 34px; }
.panel--split .t-h2 { font-size: var(--t-h2); }
.proof__text { font-size: var(--t-body-lg); }
.proof__author { font: var(--fw-display) 1.25rem/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; }

.callout { border-left: 2px solid var(--c-ember); background: var(--c-surface); border-radius: 0; }
.disclosure { border-left-color: var(--c-ember); }

.package { background: transparent; }
.package--featured { background: var(--c-surface); box-shadow: inset 0 2px 0 var(--c-ember); }
.checklist .icon { color: var(--c-ember); }

/* --- Steps: a big hollow number over each ------------------------------- */

.steps__num {
  font-size: clamp(3.5rem, 2rem + 5vw, 6rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(236, 231, 223, 0.4);
  transition: -webkit-text-stroke-color 0.4s;
}
.steps__item:hover .steps__num { -webkit-text-stroke-color: var(--c-ember); }
.steps__item { background: transparent; }

/* --- Stats: the numbers, as tall as they will go -------------------------- */

.stats {
  gap: 0;
  padding-top: 0;
  border-top: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stat {
  gap: var(--s-3);
  padding: var(--s-2) clamp(0.75rem, 2.4vw, 2rem);
  border-left: 1px solid var(--c-line);
}
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__num {
  font-size: clamp(3.5rem, 1rem + 11vw, 9.5rem);
  line-height: 0.84;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.stat__num sup { font-size: 0.42em; vertical-align: top; line-height: 1; color: var(--c-ember); }
.stat__label {
  font: 500 var(--t-micro)/1.4 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; }
  .stat {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-3) 0;
    border-left: 0;
    border-top: 1px solid var(--c-line);
  }
  .stat:first-child { border-top: 0; }
  .stat__label { text-align: right; }
}

/* --- Video frames ------------------------------------------------------- */

.videoframe { border-color: var(--c-line-strong); background: var(--c-surface); }
.videoframe__play .icon { background: var(--c-text); color: var(--c-text-invert); padding: 20px 18px 20px 22px; transition: background-color 0.3s, color 0.3s, transform 0.4s var(--fx-spring); }
.videoframe__play:hover .icon { background: var(--c-ember); color: #fff; transform: scale(1.1); }


/* ==========================================================================
   09. HOME
   ========================================================================== */

/* --- The rail: lanes you swipe through ------------------------------------ */

.rail-wrap { position: relative; }
.rail {
  display: flex;
  gap: 14px;
  margin-inline: calc(var(--gutter) * -1);
  padding: 4px var(--gutter) var(--s-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.rail.is-dragging a { pointer-events: none; }

.railcard {
  position: relative;
  flex: 0 0 clamp(15rem, 27vw, 19.5rem);
  height: clamp(23rem, 40vw, 29rem);
  scroll-snap-align: start;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s-5);
  border: 1px solid var(--c-line);
  background: linear-gradient(160deg, #1a0507, var(--c-surface) 60%);
  color: var(--c-text);
}
.railcard__img { position: absolute; inset: 0; z-index: -2; }
.railcard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.7) brightness(0.74) contrast(1.08);
  transition: filter 0.5s, transform 0.9s var(--ease);
}
.railcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.05) 0%, rgba(5, 5, 5, 0.3) 40%, var(--c-bg) 84%);
}
.railcard::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--fire-run);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.railcard:hover .railcard__img img,
.railcard:focus-visible .railcard__img img { filter: grayscale(0) brightness(0.95); transform: scale(1.07); }
.railcard:hover::after,
.railcard:focus-visible::after { transform: none; }
.railcard__no {
  position: absolute;
  left: var(--s-4);
  top: var(--s-3);
  font: var(--fw-display) 4rem/1 var(--font-display);
  color: transparent;
  -webkit-text-stroke: 1px rgba(236, 231, 223, 0.42);
}
/* A lane with no picture yet gets its name, tall and hollow, up the side. */
.railcard__word {
  position: absolute;
  right: -6px;
  top: 2.4rem;
  z-index: -1;
  font: var(--fw-display) 9.5rem/0.8 var(--font-display);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 74, 28, 0.35);
  writing-mode: vertical-rl;
  text-transform: uppercase;
  white-space: nowrap;
}
.railcard h3 { font: var(--fw-display) clamp(1.75rem, 1.3rem + 1.4vw, 2.3rem)/0.92 var(--font-display); text-transform: uppercase; }
.railcard p { margin: var(--s-2) 0 var(--s-4); font-size: var(--t-small); line-height: 1.5; color: #c3bdb4; }
.railcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
}
.railcard__foot b { font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-heat); }
.railcard__go,
.offer__go,
.door__go {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  transition: background-color 0.3s, border-color 0.3s, transform 0.4s var(--ease), color 0.3s;
}
.railcard:hover .railcard__go { background: var(--c-ember); border-color: var(--c-ember); color: #050505; transform: rotate(-45deg); }

/* How far along the rail you are, and two buttons for a mouse. */
.rail__ui { display: flex; align-items: center; gap: var(--s-4); }
.rail__bar { flex: 1; height: 1px; background: var(--c-line-strong); }
.rail__bar i { display: block; height: 3px; margin-top: -1px; width: 100%; background: var(--fire-run); transform-origin: left; transform: scaleX(var(--p, 0.15)); }
.rail__btn {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--c-line-strong);
  color: var(--c-text);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.rail__btn:hover { background: var(--c-text); border-color: var(--c-text); color: var(--c-text-invert); }
.rail__btn[disabled] { opacity: 0.3; pointer-events: none; }
.rail__btn--prev .icon { transform: rotate(180deg); }

/* --- The stream demo ------------------------------------------------------ */

.stream { gap: clamp(1.5rem, 4vw, 4rem); }
#stream { overflow-x: clip; }
.stream__media { position: relative; }
.stream__media::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(177, 15, 28, 0.5), transparent);
  animation: fx-pulse 6s ease-in-out infinite;
}
@keyframes fx-pulse { 50% { opacity: 0.55; transform: scale(1.06); } }
.stream__tag {
  position: absolute;
  left: var(--s-3);
  top: var(--s-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  background: rgba(5, 5, 5, 0.7);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text);
  pointer-events: none;
}
.stream__tag i { width: 7px; height: 7px; border-radius: 50%; background: #ff2a2a; animation: fx-caret 1.2s steps(1) infinite; }
.stream__copy .t-body { color: #c3bdb4; font-size: var(--t-body-lg); }

/* --- The wall: the work, rolling both ways -------------------------------- */

.wall { position: relative; padding-inline: 0; }
/* The heading and the button sit above the side fades. */
.wall > .container { position: relative; z-index: 2; }
.wall > .section__foot { margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.wall__rows { margin-top: clamp(1rem, 3vw, 2rem); transform: rotate(-4deg) scale(1.08); }
.wall::before,
.wall::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 14%;
  pointer-events: none;
}
.wall::before { left: 0; background: linear-gradient(90deg, var(--c-bg), transparent); }
.wall::after { right: 0; background: linear-gradient(270deg, var(--c-bg), transparent); }
.wall__row { display: flex; width: max-content; gap: 12px; padding-bottom: 12px; animation: fx-marquee 64s linear infinite; }
.wall__row:nth-child(2) { animation-direction: reverse; animation-duration: 78s; }
.wall:hover .wall__row { animation-play-state: paused; }
.wall:not(.is-live) .wall__row { animation-play-state: paused; }
.shot {
  flex: none;
  width: clamp(8.5rem, 17vw, 13rem);
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--c-surface);
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.78) contrast(1.12);
  transition: filter 0.4s, transform 0.6s var(--ease);
}
.shot:hover img { filter: none; transform: scale(1.06); }

/* --- Offers: one ruled row each, a picture follows the pointer ------------ */

.offers { border-top: 1px solid var(--c-line-strong); }
.offer {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1.15fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4) clamp(1rem, 3vw, 3rem);
  min-height: 6.5rem;
  padding: var(--s-5) var(--s-2);
  border-bottom: 1px solid var(--c-line);
  transition: padding 0.5s var(--ease), color 0.3s;
}
.offer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fire-fill);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease);
}
.offer:hover,
.offer:focus-visible { padding-inline: var(--s-5); color: #fff; }
.offer:hover::before,
.offer:focus-visible::before { transform: none; }
.offer__no { font: 500 var(--t-micro)/1 var(--font-mono); letter-spacing: 0.2em; color: var(--c-ember); transition: color 0.3s; }
.offer__title { font: var(--fw-display) clamp(1.9rem, 1.2rem + 3vw, 3.75rem)/0.9 var(--font-display); text-transform: uppercase; }
.offer__text { font-size: var(--t-small); line-height: 1.55; color: var(--c-text-muted); max-width: 44ch; transition: color 0.3s; }
.offer:hover .offer__no,
.offer:hover .offer__text,
.offer:focus-visible .offer__no,
.offer:focus-visible .offer__text { color: #fff; }
.offer:hover .offer__go,
.door:hover .door__go { background: #050505; border-color: #050505; color: #fff; transform: rotate(-45deg); }
@media (max-width: 760px) {
  .offer { grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
  .offer__text { grid-column: 2 / -1; grid-row: 2; }
}
/* The picture that follows the pointer along the list. */
.fx-peek {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  width: 15rem;
  aspect-ratio: 1;
  margin: -7.5rem 0 0 1.5rem;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  clip-path: inset(50% 0 50% 0);
  transition: opacity 0.3s, clip-path 0.5s var(--ease);
  will-change: transform;
  box-shadow: var(--shadow-panel);
}
.fx-peek.is-on { opacity: 1; clip-path: inset(0 0 0 0); }
.fx-peek img { width: 100%; height: 100%; object-fit: cover; }

/* --- Custom songs: the pitch beside a deck of samples you can play -------- */

.songband {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: radial-gradient(64% 90% at 0% 100%, rgba(177, 15, 28, 0.36), transparent 64%);
}
.section.songband,
.section + .section--divided.songband { padding-bottom: calc(var(--section-y) + clamp(1.5rem, 4vw, 3rem)); }
.songband__in { display: grid; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
@media (min-width: 940px) { .songband__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.songband__copy { min-width: 0; }
.songband .section__head { margin-bottom: var(--s-6); }
.songband .hero__meta { margin-top: var(--s-6); }
@media (max-width: 600px) {
  .songband__copy .cluster { flex-direction: column; align-items: stretch; }
  .songband__copy .cluster .btn { width: 100%; white-space: normal; }
}

/* The deck: a framed panel, a bracket in two corners like a frame guide. */
.songband__deck {
  position: relative;
  min-width: 0;
  padding: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
  border: 1px solid var(--c-line-strong);
  background: rgba(8, 8, 9, 0.86);
  box-shadow: var(--shadow-panel);
}
.songband__deck::before,
.songband__deck::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid var(--c-ember);
  pointer-events: none;
}
.songband__deck::before { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.songband__deck::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.songband__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line-strong);
}
.songband__label > span:first-child { display: inline-flex; align-items: center; gap: 10px; color: var(--c-text); }
.songband__label > span:last-child { color: var(--c-heat); }
.songband__list { margin: 0; }
.songband__more { margin-top: var(--s-4); }

/* One sample: the whole row is the play button. */
.sbs {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  min-height: 5rem;
  padding: var(--s-3) 4px;
  border-bottom: 1px solid var(--c-line);
  transition: padding 0.4s var(--ease);
}
.sbs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(255, 74, 28, 0.24), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}
.sbs:has(.sbs__play):hover,
.sbs.is-on { padding-left: 14px; }
.sbs:has(.sbs__play):hover::before,
.sbs.is-on::before { opacity: 1; }
.sbs__play {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  color: var(--c-text);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, transform 0.4s var(--fx-spring);
}
.sbs__play::after { content: ""; position: absolute; inset: 0; }
.sbs__play .icon { width: 15px; height: 15px; }
.sbs__icon-play { margin-left: 3px; }
.sbs__icon-pause { display: none; }
.sbs.is-playing .sbs__icon-pause { display: block; }
.sbs.is-playing .sbs__icon-play { display: none; }
.sbs:hover .sbs__play { background: var(--c-ember); border-color: var(--c-ember); color: #050505; transform: scale(1.08); }
.sbs.is-on .sbs__play { background: var(--c-text); border-color: var(--c-text); color: var(--c-text-invert); }
.sbs__t { flex: 1; min-width: 0; display: grid; gap: 5px; }
.sbs__name {
  font: var(--fw-display) clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem)/1 var(--font-display);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.sbs.is-on .sbs__name {
  background: var(--fire);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sbs__time { flex: none; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.sbs:not(.is-on) .sbs__time { display: none; }
/* The browser's own player, until the script takes over. */
.sbs__audio { width: 100%; max-width: 24rem; margin-top: 6px; }
.sbs.is-ready .sbs__audio { display: none; }
/* Little level bars beside whatever is playing. */
.sbs__bars { display: none; align-items: flex-end; gap: 3px; height: 20px; flex: none; }
.sbs.is-on .sbs__bars { display: inline-flex; }
.sbs__bars i { width: 3px; height: 100%; background: var(--c-ember); transform-origin: bottom; transform: scaleY(0.3); }
.sbs.is-playing .sbs__bars i { animation: fx-bars 0.9s ease-in-out infinite; }
.sbs__bars i:nth-child(2) { animation-delay: -0.3s; }
.sbs__bars i:nth-child(3) { animation-delay: -0.55s; }
.sbs__bars i:nth-child(4) { animation-delay: -0.15s; }
@keyframes fx-bars { 0%, 100% { transform: scaleY(0.2); } 50% { transform: scaleY(1); } }
/* How far in it is. On the row that is playing, tap it to skip. */
.sbs__seek {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  z-index: 2;
  height: 16px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.3s;
}
.sbs__seek i {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 3px;
  background: var(--fire-run);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}
.sbs.is-on .sbs__seek { opacity: 1; pointer-events: auto; }
@media (max-width: 600px) {
  .sbs__play { width: 46px; height: 46px; }
  .sbs__time { display: none; }
}

/* Level meters along the bottom. Each bar has its own height and pace (--v,
   set in the markup): a slow idle while the band is on screen, livelier while
   a sample plays. */
.songband__meter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: clamp(2.5rem, 6vw, 4.5rem);
  padding-inline: var(--gutter);
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.6s;
}
.songband__meter i {
  flex: 1;
  height: 100%;
  background: var(--fire);
  transform-origin: bottom;
  transform: scaleY(calc(0.08 + var(--v) * 0.028));
}
.songband.is-live .songband__meter i {
  animation: fx-meter calc(1.5s + var(--v) * 0.16s) ease-in-out calc(var(--v) * -0.31s) infinite alternate;
}
body.is-playing .songband__meter { opacity: 1; }
body.is-playing .songband.is-live .songband__meter i {
  animation: fx-meter-live calc(0.55s + var(--v) * 0.06s) ease-in-out calc(var(--v) * -0.13s) infinite alternate;
}
@keyframes fx-meter {
  from { transform: scaleY(0.06); }
  to   { transform: scaleY(calc(0.14 + var(--v) * 0.03)); }
}
@keyframes fx-meter-live {
  from { transform: scaleY(0.08); }
  to   { transform: scaleY(calc(0.35 + var(--v) * 0.062)); }
}
@media (max-width: 700px) { .songband__meter i:nth-child(n+29) { display: none; } }

/* --- The release, promoted on the home page ------------------------------ */

.tease { position: relative; isolation: isolate; overflow: hidden; }
.tease__bg { position: absolute; inset: -12%; z-index: -2; }
.tease__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(36px) brightness(0.55); transform: scale(1.1); }
.tease::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--c-bg) 0%, rgba(5, 5, 5, 0.3) 60%, rgba(5, 5, 5, 0.75)), linear-gradient(180deg, var(--c-bg), transparent 18%, transparent 82%, var(--c-bg));
}
.tease__in { display: grid; gap: clamp(1.25rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 760px) { .tease__in { grid-template-columns: minmax(12rem, 22rem) 1fr; } }
.cover {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--c-surface-2);
  box-shadow: 0 40px 70px -24px #000, 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.cover img { width: 100%; height: 100%; object-fit: cover; }
.tease .cover { max-width: 22rem; transition: transform 0.8s var(--ease); }
.tease:hover .cover { transform: rotate(-2deg) scale(1.02); }
.artistname {
  font: var(--fw-display) clamp(1.3rem, 1rem + 1.2vw, 1.9rem)/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-heat);
}
.tease .t-h1 { margin-block: var(--s-2) var(--s-3); }

/* --- Two doors: buy it now, or talk it through ----------------------------- */

.doors { display: grid; border: 1px solid var(--c-line); }
@media (min-width: 800px) { .doors { grid-template-columns: 1fr 1fr; } }
.door {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-height: clamp(17rem, 30vw, 24rem);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  color: var(--c-text);
  transition: color 0.3s;
}
.door + .door { border-top: 1px solid var(--c-line); }
@media (min-width: 800px) { .door + .door { border-top: 0; border-left: 1px solid var(--c-line); } }
.door::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fire-fill);
  transform: translateY(101%);
  transition: transform 0.6s var(--ease);
}
.door:hover::before,
.door:focus-visible::before { transform: none; }
.door__no { font: var(--fw-display) clamp(4rem, 2rem + 7vw, 8rem)/0.8 var(--font-display); color: transparent; -webkit-text-stroke: 1px rgba(236, 231, 223, 0.4); transition: -webkit-text-stroke-color 0.3s; }
.door:hover .door__no { -webkit-text-stroke-color: #fff; }
.door .t-h3 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); line-height: 0.92; margin-top: var(--s-4); }
.door p { max-width: 42ch; color: var(--c-text-muted); transition: color 0.3s; }
.door:hover p { color: #fff; }
.door__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--c-line); font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; }
.door:hover .door__foot { border-top-color: rgba(255, 255, 255, 0.4); }


/* ==========================================================================
   10. STORE
   ========================================================================== */

.jumpbar {
  background: rgba(5, 5, 5, 0.94);
  border-block-color: var(--c-line);
}
.jumpbar__chip {
  border-radius: 0;
  border-color: var(--c-line-strong);
  font: 500 var(--t-micro)/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.jumpbar__chip:hover,
.jumpbar__chip.is-current { background: var(--c-text); border-color: var(--c-text); color: var(--c-text-invert); }
.jumpbar__count { color: var(--c-ember); font-size: 10px; }
.jumpbar__chip:hover .jumpbar__count,
.jumpbar__chip.is-current .jumpbar__count { color: var(--c-blood); }

.site-main { counter-reset: sec band; }
.storeband { counter-increment: band; }
.storeband__head {
  position: relative;
  gap: var(--s-3);
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  padding-top: var(--s-7);
  border-top: 1px solid var(--c-line-strong);
}
.storeband__head::before {
  content: counter(band, decimal-leading-zero) " / LANE";
  font: 500 var(--t-micro)/1 var(--font-mono);
  letter-spacing: 0.2em;
  color: var(--c-ember);
}
.storeband__head .t-h2 { font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.5rem); line-height: 0.88; }
.spotlight { border-bottom-color: var(--c-line); }
.store__faq { border-top-color: var(--c-line); }

.hero--store .hero__meta,
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  max-width: none;
}
.hero__meta span { font: 500 var(--t-micro)/1.4 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-text-muted); }
.hero__meta b { color: var(--c-heat); font-weight: 500; }


/* ==========================================================================
   11. PAGES
   ========================================================================== */

/* --- Services: the reel and the lanes ------------------------------------ */

.reel { padding-top: calc(var(--header-h) + var(--s-9)); }
.reel::after { background: linear-gradient(180deg, rgba(5, 5, 5, 0.6) 0%, rgba(5, 5, 5, 0.3) 45%, var(--c-bg) 100%); }
.reel { background: radial-gradient(70% 90% at 100% 100%, rgba(177, 15, 28, 0.36), transparent 65%), var(--c-bg); overflow: clip; }
.reel__inner { position: relative; z-index: 2; }
.reel__panel { background: rgba(8, 8, 9, 0.9); border-color: var(--c-line-strong); }
.reel__panel .t-h1 { font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.75rem); line-height: 0.9; }
.lane__items { border-top-color: var(--c-line-strong); }
.lane__item { position: relative; isolation: isolate; min-height: 72px; padding-inline: var(--s-2); transition: padding 0.5s var(--ease), color 0.3s; }
.lane__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(255, 74, 28, 0.22), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}
.lane__item:hover { padding-left: var(--s-5); }
.lane__item:hover::before { opacity: 1; }
.lane__item-title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1; }
.lane__item-action { font: 500 var(--t-micro)/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-heat); }

/* --- FAQ ------------------------------------------------------------------ */

.faq__nav a {
  border-radius: 0;
  font: 500 var(--t-micro)/1.3 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.faq__nav a:hover { background: var(--c-accent-quiet); color: var(--c-heat); }
.faq__group > .t-h3 { color: var(--c-heat); font-size: 1.375rem; letter-spacing: 0.06em; }
.faq__item { border-top-color: var(--c-line); }
.faq__item summary {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1;
  min-height: 72px;
  transition: color 0.3s, padding 0.5s var(--ease);
}
.faq__item summary:hover,
.faq__item[open] summary { padding-left: var(--s-3); }
.faq__item[open] summary { color: var(--c-heat); }
.faq__item summary::after { color: var(--c-ember); transition: transform 0.5s var(--ease); }
.faq__item[open] summary::after { transform: rotate(180deg); }
html.fx-on .faq__item[open] .faq__answer { animation: fx-drop 0.5s var(--fx-ease-out) both; }
@keyframes fx-drop { from { opacity: 0; transform: translateY(-8px); } }

/* --- Forms: contact, 2KTop5, order files, the order questions ------------- */

.field > label,
.intake__label,
.woocommerce form .form-row label {
  font: 500 var(--t-micro)/1.4 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.field input,
.field select,
.field textarea,
.intake input[type="text"],
.intake input[type="url"],
.intake select,
.intake textarea,
.woocommerce form .input-text,
.woocommerce form select,
.woocommerce form textarea,
.woocommerce .quantity .qty {
  background: var(--c-surface);
  border-color: var(--c-line-strong);
  border-radius: 0;
  transition: border-color 0.3s, background-color 0.3s;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.intake input:focus,
.intake select:focus,
.intake textarea:focus,
.woocommerce form .input-text:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus {
  outline: 0;
  border-color: var(--c-ember);
  background: var(--c-surface-2);
  box-shadow: 0 1px 0 0 var(--c-ember);
}
/* A tick box's label is a sentence, not a field name. */
.field--check > label,
.intake__field--consent label {
  font: var(--fw-body) var(--t-small)/1.55 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}
.field--check input[type="checkbox"],
.intake__field--consent input { accent-color: var(--c-ember); }
.contact__icon { border-radius: 50%; border-color: var(--c-line-strong); color: var(--c-heat); }
.intake { background: var(--c-surface); }
.intake__bar span { background: var(--fire-run); }
.intake__option span { border-radius: 0; background: transparent; font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.intake__option input:checked + span { background: var(--c-text); border-color: var(--c-text); color: var(--c-text-invert); }

/* --- About ---------------------------------------------------------------- */

.about-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: calc(var(--header-h) + var(--s-8));
  margin-top: calc(var(--header-h) * -1);
  background: radial-gradient(60% 90% at 100% 100%, rgba(177, 15, 28, 0.36), transparent 65%), var(--c-bg);
}
.about-hero > .container { position: relative; z-index: 2; }
.about-hero > .fx-smoke { z-index: 0; }
.about-hero__face { display: flex; flex-direction: column; gap: var(--s-3); }
.about-hero .cluster { margin-top: var(--s-6); }
.about-hero__text > .t-h1 { max-width: 14ch; font-size: clamp(2.75rem, 1.2rem + 6vw, 5.75rem); line-height: 0.88; }
.portrait { border-color: var(--c-line-strong); }
.portrait picture { display: contents; }
.portrait img { filter: grayscale(0.15) contrast(1.04); transition: filter 0.6s, transform 1.2s var(--ease); }
.portrait:hover img { filter: none; transform: scale(1.04); }
.about-elsewhere__link { border-radius: 0; border-color: var(--c-line-strong); font: 500 var(--t-micro)/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-text); }
.about-elsewhere__link:hover { background: var(--c-text); border-color: var(--c-text); color: var(--c-text-invert); }

/* --- Product page, archive, cart, checkout -------------------------------- */

.woocommerce div.product .product_title { font-size: var(--t-h2); line-height: 0.92; text-transform: uppercase; }
.woocommerce div.product p.price,
.woocommerce div.product .woocommerce-variation-price { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); line-height: 1; color: var(--c-heat); }
.woocommerce div.product p.price .amount,
.woocommerce div.product .woocommerce-variation-price .amount { color: var(--c-heat); }
.woocommerce div.product div.images { border-color: var(--c-line-strong); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font: 500 var(--t-micro)/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { border-bottom-color: var(--c-ember); }
.woocommerce div.product .woocommerce-tabs .panel::before,
.woocommerce div.product .woocommerce-tabs .panel::after { content: none; }
.woocommerce div.product .woocommerce-tabs .panel { background: none; border: 0; padding: 0; }
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading,
.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce .woocommerce-order-details__title,
.woocommerce .woocommerce-column__title,
.woocommerce div.product .woocommerce-tabs .panel h2 { text-transform: uppercase; font-weight: var(--fw-display); line-height: 1; }
.product-lane a { font: 500 var(--t-micro)/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; }
.terms dt { font: 500 var(--t-micro)/1.6 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.woocommerce table.shop_table { border-radius: 0; }
.woocommerce table.shop_table thead th { font-family: var(--font-mono); letter-spacing: 0.16em; }
.woocommerce table.shop_table .product-name a { font-size: 1.25rem; font-weight: var(--fw-display); text-transform: uppercase; }
.woocommerce .star-rating span::before { color: var(--c-heat); }
.woocommerce-error, .woocommerce-message, .woocommerce-info { border-radius: 0; }
.woocommerce-message { border-left-color: var(--c-ember); }
.buybar { border-top-color: var(--c-ember); }
.archive-head .t-h1 { font-size: var(--t-h1); }
.study__nav-link:hover { border-color: var(--c-ember); }
.study__nav-title { font-size: 1.5rem; line-height: 1; }
.gallery__item { transition: border-color 0.3s; }
.gallery__item:hover { border-color: var(--c-line-strong); }
.todo { font-family: var(--font-body); }


/* ==========================================================================
   12. BAND + FOOTER
   ========================================================================== */

/* The closing call on a page: as big as the opener. */
.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-items: flex-start;
  text-align: left;
  gap: var(--s-4);
  padding: clamp(2.75rem, 1.5rem + 6vw, 6.5rem) clamp(1.25rem, 0.5rem + 3.5vw, 4rem);
  border-color: var(--c-line);
  background:
    radial-gradient(70% 90% at 100% 100%, rgba(177, 15, 28, 0.45), transparent 65%),
    var(--c-surface);
}
.band .t-h1 { font-size: clamp(3rem, 1rem + 9.5vw, 8rem); line-height: var(--lh-display); max-width: 9.5em; }
.band .t-lead { max-width: 46ch; }
.band .btn { margin-top: var(--s-4); }
.band > * { position: relative; z-index: 2; }
.band > .fx-smoke { position: absolute; z-index: 1; }
/* On a phone the band's buttons stack, full width, and a long label wraps
   instead of pushing past the edge. */
@media (max-width: 600px) {
  .band .cluster { flex-direction: column; align-items: stretch; width: 100%; }
  .band .btn { max-width: 100%; white-space: normal; }
}

.footer-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top-color: var(--c-line);
  background:
    radial-gradient(60% 120% at 100% 100%, rgba(177, 15, 28, 0.42), transparent 65%),
    var(--c-bg);
}
.footer-cta__inner { padding-block: clamp(3rem, 1.5rem + 6vw, 6.5rem); align-items: flex-end; }
.footer-cta__copy { max-width: 56rem; }
.footer-cta .t-h2 { font-size: clamp(3rem, 1rem + 9vw, 7.5rem); line-height: var(--lh-display); }

.site-footer { position: relative; overflow: hidden; border-top-color: var(--c-line); background: var(--c-bg); }
.footer__links a,
.footer__legal-links a { transition: color 0.25s, transform 0.4s var(--ease); }
.footer__links a:hover { color: var(--c-heat); transform: translateX(6px); }
.footer__contact dt { font-family: var(--font-mono); letter-spacing: 0.16em; }
.social a { border-radius: 50%; border-color: var(--c-line-strong); color: var(--c-text); }
.social a:hover { background: var(--c-ember); border-color: var(--c-ember); color: #050505; transform: translateY(-3px); }
.social a { transition: background-color 0.3s, border-color 0.3s, color 0.3s, transform 0.4s var(--fx-spring); }
.footer__legal { margin-top: var(--s-8); border-top-color: var(--c-line); }
.footer__copyright,
.footer__legal-links a { font: 500 var(--t-micro)/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }

/* The name, hollow and enormous, rolling along the bottom of every page. */
.footer__mark {
  overflow: hidden;
  margin-top: var(--s-6);
  font: var(--fw-display) clamp(5rem, 2rem + 17vw, 15rem)/0.82 var(--font-display);
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(236, 231, 223, 0.24);
  user-select: none;
}
.footer__mark span { display: inline-block; padding-right: 0.3em; animation: fx-run 48s linear infinite; }
.footer__mark b { font-weight: inherit; background: var(--fire); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; }


/* ==========================================================================
   13. WEBSITES — the "Need a website?" band on the home page
   A browser and a phone that build a site in front of you, next to the
   packages. The mockups are decoration only (aria-hidden in the markup).
   ========================================================================== */

.webpromo {
  display: grid;
  gap: var(--s-8);
  align-items: center;
}
@media (min-width: 960px) {
  .webpromo { grid-template-columns: 1fr 1.08fr; gap: var(--s-9); }
}
.webpromo__copy .section__head { margin-bottom: 0; }
.webpromo__copy > .webpromo__plans { margin-top: var(--s-6); }
.webpromo__copy > .cluster { margin-top: var(--s-6); align-items: center; }

/* The packages. */
.webpromo__plans { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-line-strong); }
.webplan {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  column-gap: var(--s-4);
  padding: var(--s-4) var(--s-2);
  border-bottom: 1px solid var(--c-line);
  color: var(--c-text);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: padding 0.5s var(--ease), color 0.3s;
}
.webplan::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fire-fill);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease);
}
.webplan:hover::before { transform: none; }
.webplan:hover { padding-inline: var(--s-4); color: #fff; }
.webplan__name { grid-column: 1; font: var(--fw-display) clamp(1.5rem, 1.2rem + 1.2vw, 2rem)/1 var(--font-display); text-transform: uppercase; }
.webplan__note { grid-column: 1; grid-row: 2; font: 500 var(--t-micro)/1.5 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-text-muted); transition: color 0.3s; }
.webplan:hover .webplan__note { color: #fff; }
.webplan__price { grid-column: 2; grid-row: 1 / span 2; }
.webplan__price .price { margin: 0; justify-content: flex-end; }
.webplan__price .price__now { color: var(--c-heat); transition: color 0.3s; }
.webplan:hover .price__now { color: #fff; }
.webplan > .icon { grid-column: 3; grid-row: 1 / span 2; color: var(--c-text-faint); transition: transform 0.4s var(--ease), color 0.3s; }
.webplan:hover > .icon { color: #fff; transform: translateX(4px); }

/* The mockups. */
.webpromo__visual {
  position: relative;
  padding: 2% 9% 14% 0;
}
.mock-browser {
  position: relative;
  border: 1px solid var(--c-line-strong);
  overflow: hidden;
  background: #111114;
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.85),
    0 30px 90px -40px rgba(177, 15, 28, 0.65);
  animation: fx-float 8s ease-in-out infinite;
}
@keyframes fx-float { 50% { transform: translateY(-10px); } }
.mock-browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: #18181c;
  border-bottom: 1px solid var(--c-line);
}
.mock-browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a42; }
.mock-browser__bar i:nth-child(1) { background: #d9534f; }
.mock-browser__bar i:nth-child(2) { background: #e3b341; }
.mock-browser__bar i:nth-child(3) { background: #3fb27f; }
.mock-browser__url {
  flex: 1;
  margin-left: 10px;
  padding: 5px 12px;
  background: #0d0d10;
  font: 500 11px/1.2 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
  white-space: nowrap;
}
.mock-browser__url span { display: inline-block; }
.mock-browser__page {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  aspect-ratio: 16 / 10.5;
  background:
    radial-gradient(120% 80% at 85% 0%, rgba(177, 15, 28, 0.25), transparent 60%),
    #0a0a0b;
}
.mock-nav { display: flex; align-items: center; gap: 10px; }
.mock-nav b { width: 22%; height: 10px; background: var(--c-text); }
.mock-nav span { width: 9%; height: 6px; background: #3d3d46; }
.mock-nav span:first-of-type { margin-left: auto; }
.mock-hero {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 22px 18px;
  border: 1px solid rgba(255, 74, 28, 0.28);
  overflow: hidden;
  background: linear-gradient(120deg, #2c0a0a, #120606 65%);
}
.mock-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.09) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: fx-sweep 4s ease-in-out 1.5s infinite;
}
@keyframes fx-sweep { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } }
.mock-line { display: block; width: 55%; height: 8px; background: rgba(255, 255, 255, 0.35); }
.mock-line--xl { width: 72%; height: 16px; background: linear-gradient(90deg, var(--c-text), var(--fx-gold)); }
.mock-line--lg { width: 50%; height: 16px; background: var(--c-text); }
.mock-btn {
  display: block;
  width: 26%;
  height: 18px;
  margin-top: 6px;
  background: var(--fire-fill);
  animation: fx-press 6s ease-in-out infinite;
}
@keyframes fx-press {
  0%, 26%, 38%, 100% { transform: none; filter: none; }
  30%                { transform: scale(0.94); filter: brightness(1.5); }
}
.mock-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mock-cards > div {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--c-line);
  overflow: hidden;
  background: linear-gradient(180deg, #1c1c21, #141417);
}
.mock-cards > div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 56%;
  background: linear-gradient(135deg, rgba(255, 74, 28, 0.5), rgba(255, 122, 46, 0.15));
}
.mock-cards > div:nth-child(2)::before { background: linear-gradient(135deg, rgba(255, 197, 110, 0.42), rgba(255, 122, 46, 0.12)); }
.mock-cards > div:nth-child(3)::before { background: linear-gradient(135deg, rgba(177, 15, 28, 0.6), rgba(60, 10, 14, 0.2)); }
.mock-cards > div::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 30%;
  bottom: 16%;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
}

/* A cursor that visits the button, clicks, then browses the cards. */
.mock-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 22px;
  background: #fff;
  clip-path: polygon(0 0, 0 78%, 26% 60%, 44% 100%, 58% 94%, 40% 56%, 74% 56%);
  animation: fx-cursor 6s ease-in-out infinite;
}
/* Positions are percentages of the browser mockup, so the cursor lands on
   the button and the cards at any size. */
@keyframes fx-cursor {
  0%, 100% { left: 86%; top: 92%; transform: none; }
  26%      { left: 11%; top: 45%; transform: none; }
  30%      { left: 11%; top: 45%; transform: scale(0.8); }
  34%      { left: 11%; top: 45%; transform: none; }
  58%, 76% { left: 76%; top: 80%; transform: none; }
}

.mock-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 27%;
  aspect-ratio: 9 / 18;
  padding: 7px;
  border: 1px solid var(--c-line-strong);
  border-radius: 22px;
  background: #0b0b0e;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9), 0 0 50px -12px rgba(177, 15, 28, 0.55);
  animation: fx-float2 7s ease-in-out infinite;
}
@keyframes fx-float2 { 50% { transform: translateY(-14px) rotate(2deg); } }
.mock-phone__page {
  display: grid;
  align-content: start;
  gap: 8px;
  height: 100%;
  padding: 14px 9px;
  border-radius: 16px;
  background: radial-gradient(120% 60% at 50% 0%, rgba(177, 15, 28, 0.4), transparent 70%), #101012;
}
.mock-phone__page span { display: block; }
.mock-phone__page span:nth-child(1) { height: 70px; background: linear-gradient(135deg, #2c0a0a, #3a0d0d); border: 1px solid rgba(255, 74, 28, 0.3); }
.mock-phone__page span:nth-child(2) { width: 80%; height: 8px; background: rgba(255, 255, 255, 0.4); }
.mock-phone__page span:nth-child(3) { width: 58%; height: 16px; background: var(--fire-fill); }

/* Off screen, the mockups hold still (motion.js sets .is-live while visible). */
html.fx-on .webpromo__visual:not(.is-live) *,
html.fx-on .webpromo__visual:not(.is-live) *::before,
html.fx-on .webpromo__visual:not(.is-live) *::after { animation-play-state: paused; }

/* The build: pieces pop in one after another when the band comes into view. */
html.fx-on .webpromo__visual .mock-build { opacity: 0; transform: translateY(12px) scale(0.92); }
html.fx-on .webpromo__visual.is-in .mock-build {
  animation: fx-build 0.8s var(--fx-ease-out) calc(0.35s + var(--b) * 130ms) forwards;
}
@keyframes fx-build { to { opacity: 1; transform: none; } }
html.fx-on .webpromo__visual .mock-browser__url span { clip-path: inset(0 100% 0 0); }
html.fx-on .webpromo__visual.is-in .mock-browser__url span { animation: fx-type 1.1s steps(13) 0.2s forwards; }
@keyframes fx-type { to { clip-path: inset(0 0 0 0); } }

@media (max-width: 700px) {
  .webpromo__visual { padding: 0 10% 16% 0; }
  .mock-browser__page { gap: 10px; padding: 12px; }
  .mock-phone { width: 30%; }
}


/* ==========================================================================
   14. REDUCED MOTION — show everything, move nothing
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }

  .fx-hot, .fire,
  .fx-marquee__row,
  .wall__row,
  .hero__ghost span,
  .footer__mark span,
  .fx-cue i,
  .fx-typer__dot,
  .fx-typer__caret,
  .stream__media::before,
  .stream__tag i,
  .songband__meter i,
  .sbs__bars i,
  .hero__bg img,
  .mock-browser, .mock-phone, .mock-cursor, .mock-btn, .mock-hero::after { animation: none !important; }
  html.fx-on .webpromo__visual .mock-build,
  html.fx-on .webpromo__visual .mock-browser__url span { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; }
  .mock-cursor, .fx-cursor, .fx-smoke, .fx-peek, .fx-progress { display: none !important; }

  html.fx-on [data-fx-reveal],
  html.fx-on .fx-intro,
  html.fx-on .hero__figure,
  html.fx-on .fx-words .fx-w > span,
  html.fx-on .fx-words .fx-hot,
  html.fx-on .nav .nav__item,
  html.fx-on .nav .nav__foot {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .fx-marquee__row { flex-wrap: wrap; width: auto; }
  .fx-marquee__set { flex-wrap: wrap; }
  .fx-marquee__set[aria-hidden="true"] { display: none; }
  .wall__rows { transform: none; }
}