/* About page - studio scroll experience (local) */

:root {
  --vl-ab-bg: var(--color-background, var(--color-black, #000000));
  --vl-ab-surface: #0a0a0a;
  --vl-ab-line: rgba(255, 255, 255, 0.1);
  --vl-ab-text: var(--color-text, #f5f5f5);
  --vl-ab-muted: rgba(245, 245, 245, 0.55);
  --vl-ab-accent: #ff2b2b;
  --vl-ab-rail-width: 4.75rem;
  --vl-ab-rail-bg: #000000;
  --vl-ab-rail-ink: rgba(255, 255, 255, 0.42);
  --vl-ab-rail-muted: rgba(255, 255, 255, 0.38);
  --vl-ab-rail-label: rgba(255, 255, 255, 0.92);
  --vl-ab-hero-scale: 0.7;
  --vl-ab-rail-cta: rgba(255, 255, 255, 0.12);
  --vl-ab-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vl-ab-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vl-ab-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .vl-ab-marquee__track,
  .vl-ab-products-marquee__track {
    animation: none !important;
  }
}

body.vl-ab-page {
  margin: 0;
  --vl-ab-rail-width: 0;
  color: var(--color-text, var(--vl-ab-text));
  background: var(--color-background, var(--color-black, #000000));
}

/* White-scroll (light band) overrides for About-specific colors */
body.vl-ab-page.vl-theme-middle {
  --vl-ab-bg: var(--color-background, #ffffff);
  --vl-ab-surface: #ffffff;
  --vl-ab-line: rgba(0, 0, 0, 0.14);
  --vl-ab-text: #0b0b0c;
  --vl-ab-muted: rgba(0, 0, 0, 0.58);
}

/* Keep the intro hero permanently dark (even in white-scroll middle band). */
body.vl-ab-page.vl-theme-middle .vl-ab-beams-hero {
  background: var(--color-black, #000000);
  color: #f5f5f5;
}

body.vl-ab-page.vl-theme-middle .vl-ab-beams-hero__bg {
  background: var(--color-black, #000000);
}

body.vl-ab-page.vl-theme-middle .vl-ab-beams-hero__content,
body.vl-ab-page.vl-theme-middle .vl-ab-beams-hero__eyebrow,
body.vl-ab-page.vl-theme-middle .vl-ab-beams-hero__scroll {
  color: #f5f5f5;
  -webkit-text-fill-color: #f5f5f5;
}

body.vl-ab-page .text {
  color: inherit;
}

body.vl-ab-page a {
  color: inherit;
}

/* Site header + footer (main column only; rail stays full height) */
body.vl-ab-page .header {
  margin-left: var(--vl-ab-rail-width);
  width: calc(100% - var(--vl-ab-rail-width));
  max-width: calc(100vw - var(--vl-ab-rail-width));
  box-sizing: border-box;
  background-color: var(--color-accent, var(--vl-ab-accent)) !important;
  color: #fff !important;
  --color-text: #fff;
}

/* Lenis uses width:100% on .header — with rail margin that overflows the viewport and clips the toggle. */
html.lenis body.vl-ab-page .header {
  left: 0 !important;
  right: auto !important;
  width: calc(100% - var(--vl-ab-rail-width)) !important;
  max-width: calc(100vw - var(--vl-ab-rail-width)) !important;
  margin-left: var(--vl-ab-rail-width) !important;
  box-sizing: border-box !important;
}

body.vl-ab-page .header .header__container {
  background-color: transparent;
  position: relative;
  max-width: 100%;
  overflow: visible;
}

/* Pin toggle inside the about header column so nav cannot push it off-screen. */
html.js body.vl-ab-page .header .header__container > .vl-scroll-toggle {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  z-index: 6;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (min-width: 1024px) {
  html.js body.vl-ab-page .header .header__container {
    padding-right: clamp(0.5rem, 1.25vw, 1rem);
  }

  html.js body.vl-ab-page .header .header__container > .navigation {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    padding-right: 3.35rem;
  }

  html.js body.vl-ab-page .header .header__container > .navigation .navigation__list {
    min-width: 0;
    max-width: 100%;
  }

  html.js body.vl-ab-page .header .header__container > .vl-scroll-toggle {
    position: absolute;
    right: clamp(0.5rem, 1.25vw, 1rem);
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
  }
}

/* Red header: keep toggle chrome visible when white-scroll flips body tokens. */
body.vl-ab-page .header .vl-scroll-toggle__track {
  background: rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25) !important;
}

body.vl-ab-page .header .vl-scroll-toggle--on .vl-scroll-toggle__track {
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.95),
    inset 0 -1px 1px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.65) !important;
}

body.vl-ab-page .header .vl-scroll-toggle--on .vl-scroll-toggle__thumb {
  background: linear-gradient(160deg, var(--color-accent, #ff2b2b) 0%, #c91f1f 100%) !important;
}

body.vl-ab-page .header .navigation__link,
body.vl-ab-page .header .header__logo {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* About header only: skip sitewide red pour — white links, underline on hover/active */
body.vl-ab-page .header .navigation__item > .navigation__link {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration: none;
}

body.vl-ab-page .header .navigation__item--active > .navigation__link,
body.vl-ab-page .header .navigation__item:not(.navigation__item--active) > .navigation__link:hover,
body.vl-ab-page .header .navigation__item:not(.navigation__item--active) > .navigation__link:focus-visible {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  background-image: none !important;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  opacity: 1;
}

body.vl-ab-page .header .header__button span {
  background: #fff !important;
}

body.vl-ab-page .footer.footer {
  margin-left: var(--vl-ab-rail-width);
  width: calc(100% - var(--vl-ab-rail-width));
  box-sizing: border-box;
  background-color: var(--color-accent, var(--vl-ab-accent)) !important;
  color: #fff !important;
}

body.vl-ab-page .footer .navigation__link,
body.vl-ab-page .footer .p2,
body.vl-ab-page .footer .footer__copyright,
body.vl-ab-page .footer .footer__text {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* About footer: no parallax scrub — it was sliding over preceding copy */
body.vl-ab-page footer.footer > .footer__container,
body.vl-ab-page footer.footer > .grid.footer__container {
  transform: none !important;
}

body.vl-ab-page .header .header__logo img,
body.vl-ab-page .footer__logo img {
  filter: brightness(0) invert(1);
}

html.lenis body.vl-ab-page {
  padding-top: var(--vl-site-header-offset, 5.75rem);
}

/* Progress (main column, below sticky header) */
.vl-ab-progress {
  position: fixed;
  top: var(--vl-site-header-offset, 5.75rem);
  left: var(--vl-ab-rail-width);
  right: 0;
  height: 2px;
  z-index: 100;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.vl-ab-progress__bar {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--vl-ab-accent);
  transition: width 0.08s linear;
}

/* Left rail - vertical Roman numerals (-90deg), label reveals on hover */
.vl-ab-rail {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: var(--vl-ab-rail-width);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--vl-ab-rail-bg);
  color: var(--vl-ab-rail-ink);
  overflow: hidden;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.08);
}

.vl-ab-rail__home {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 4.25rem;
  text-decoration: none;
  color: var(--vl-ab-rail-label);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.vl-ab-rail__menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 22px;
}

.vl-ab-rail__menu span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--vl-ab-rail-ink);
  border-radius: 1px;
}

.vl-ab-rail__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.vl-ab-rail__list {
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.vl-ab-rail__list > li {
  flex: 1 1 0;
  min-height: 3.25rem;
  display: flex;
  transition: flex-grow 0.48s var(--vl-ab-ease);
}

.vl-ab-rail__list > li:hover,
.vl-ab-rail__list > li:focus-within {
  flex-grow: 3.25;
}

.vl-ab-rail__link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  min-height: 0;
  padding: 0.35rem 0;
  text-decoration: none;
  color: var(--vl-ab-rail-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.25s ease;
  overflow: hidden;
}

.vl-ab-rail__glyph {
  display: grid;
  place-items: center;
  transform: rotate(-90deg);
  transform-origin: center center;
  white-space: nowrap;
}

.vl-ab-rail__num,
.vl-ab-rail__label {
  grid-area: 1 / 1;
}

.vl-ab-rail__num {
  font-family: var(--vl-ab-serif);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 400;
  line-height: 1;
  color: var(--vl-ab-rail-ink);
  transition:
    opacity 0.28s var(--vl-ab-ease),
    visibility 0.28s var(--vl-ab-ease);
}

.vl-ab-rail__label {
  font-family: var(--font-primary, var(--vl-ab-font));
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vl-ab-rail-label);
  opacity: 0;
  visibility: hidden;
  max-width: 0;
  overflow: hidden;
  transition:
    opacity 0.35s var(--vl-ab-ease),
    visibility 0.35s var(--vl-ab-ease),
    max-width 0.45s var(--vl-ab-ease);
}

.vl-ab-rail__link.is-active .vl-ab-rail__num {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
}

.vl-ab-rail__list > li:hover .vl-ab-rail__num,
.vl-ab-rail__list > li:focus-within .vl-ab-rail__num,
.vl-ab-rail__link.is-pressed .vl-ab-rail__num {
  opacity: 0;
  visibility: hidden;
}

.vl-ab-rail__list > li:hover .vl-ab-rail__label,
.vl-ab-rail__list > li:focus-within .vl-ab-rail__label,
.vl-ab-rail__link.is-pressed .vl-ab-rail__label {
  opacity: 1;
  visibility: visible;
  max-width: 12rem;
}

.vl-ab-rail__cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.75rem;
  background: var(--vl-ab-rail-cta);
  text-decoration: none;
  color: rgba(255, 255, 255, 0.92);
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.vl-ab-rail__cta-text {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.92);
  transform: rotate(-90deg);
  transform-origin: center center;
}

.vl-ab-rail__cta:hover {
  filter: brightness(1.05);
}

/* Main column */
.vl-ab-main {
  margin-left: var(--vl-ab-rail-width);
  width: calc(100% - var(--vl-ab-rail-width));
  box-sizing: border-box;
}

.vl-ab-section[id] {
  scroll-margin-top: calc(var(--vl-site-header-offset, 5.75rem) + 1rem);
}

@media (max-width: 900px) {
  body.vl-ab-page {
    overflow-x: clip;
  }

  body.vl-ab-page .header,
  body.vl-ab-page .footer.footer {
    margin-left: 0;
    width: 100%;
    max-width: 100vw;
  }

  html.lenis body.vl-ab-page .header {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  html.js body.vl-ab-page .header .header__container > .vl-scroll-toggle {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
  }

  html.js body.vl-ab-page .header .header__container > .navigation {
    padding-right: 0;
  }

  .vl-ab-progress {
    left: 0;
  }

  /* Mobile: hide section rail — header nav is enough */
  .vl-ab-rail {
    display: none !important;
  }

  .vl-ab-main {
    margin-left: 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: clip;
  }

  .vl-ab-beams-hero__title {
    font-size: clamp(1.2rem, 6.2vw, 2.35rem);
  }

  .vl-ab-marquee {
    max-width: 100vw;
  }

  .vl-ab-marquee__item {
    font-size: clamp(1.35rem, 9vw, 2.35rem);
  }
}

/* Sections */
.vl-ab-section,
.vl-ab-quote {
  overflow-x: clip;
}

.vl-ab-section {
  position: relative;
  padding: clamp(4rem, 12vh, 7rem) clamp(1.5rem, 6vw, 5rem);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.vl-ab-section--hero {
  min-height: max(28rem, calc(92dvh - var(--vl-site-header-offset, 5.75rem)));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  padding-top: clamp(2.1rem, 5.6vh, 3.5rem);
  padding-bottom: clamp(2.1rem, 5.6vh, 3.5rem);
  overflow: visible;
}

/* About intro - standalone beams hero (not global .hero) */
.vl-ab-beams-hero {
  --vl-red-pour-base: #fafafa;
  position: relative;
  isolation: isolate;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  min-height: max(28rem, calc(92dvh - var(--vl-site-header-offset, 5.75rem)));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2.5rem, 6vh, 4rem) clamp(1.5rem, 6vw, 5rem);
  overflow: hidden;
}

.vl-ab-beams-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--color-black, #000000);
}

.vl-ab-beams-hero__bg::after {
  content: none;
}

.vl-ab-ripple-hero__wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

.vl-ab-ripple-hero__grid {
  position: relative;
  display: grid;
  flex-shrink: 0;
  pointer-events: auto;
  filter: blur(0.65px);
  -webkit-mask-image: radial-gradient(
    ellipse 140% 100% at 50% 10%,
    #000 4%,
    rgba(0, 0, 0, 0.55) 36%,
    rgba(0, 0, 0, 0.18) 62%,
    transparent 92%
  );
  mask-image: radial-gradient(
    ellipse 140% 100% at 50% 10%,
    #000 4%,
    rgba(0, 0, 0, 0.55) 36%,
    rgba(0, 0, 0, 0.18) 62%,
    transparent 92%
  );
}

.vl-ab-ripple-hero__cell {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0.5px solid var(--vl-ripple-cell-border);
  background: var(--vl-ripple-cell-fill);
  opacity: 0.32;
  cursor: pointer;
  appearance: none;
  will-change: opacity, filter;
  transition: opacity 180ms ease;
}

.vl-ab-ripple-hero__cell:hover {
  opacity: 0.72;
}

.vl-ab-ripple-hero__cell.is-rippling {
  animation: vl-ab-cell-ripple var(--vl-ripple-duration, 260ms) ease-out var(--vl-ripple-delay, 0ms) 1 none;
  filter: blur(0.2px);
}

@keyframes vl-ab-cell-ripple {
  0% {
    opacity: 0.28;
  }
  50% {
    opacity: var(--vl-ripple-peak, 0.82);
  }
  100% {
    opacity: 0.32;
  }
}

.vl-ab-beams-hero__content {
  position: relative;
  z-index: 2;
  width: min(100%, 52rem);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.vl-ab-beams-hero__eyebrow {
  margin: 0 0 1rem;
  font-family: var(--font-primary, var(--vl-ab-font));
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.vl-ab-beams-hero__title {
  position: relative;
  z-index: 20;
  margin: 0 auto;
  max-width: min(52rem, 100%);
  font-family: var(--font-primary, var(--vl-ab-font));
  font-size: clamp(1.4rem, 7.7vw, 4.375rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: center;
}

.vl-ab-beams-hero__title.hero__description .vl-red-pour-line {
  display: block;
  text-align: center;
}

/* Aceternity sparkles band under hero title — fade into hero glow, no box edge */
.vl-ab-sparkles {
  position: relative;
  z-index: 10;
  width: min(100%, 40rem);
  height: clamp(6.5rem, 16vw, 9rem);
  margin: clamp(0.35rem, 1vh, 0.65rem) auto 0;
  overflow: visible;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(
    ellipse 120% 110% at 50% 18%,
    #000 42%,
    rgba(0, 0, 0, 0.55) 68%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 120% 110% at 50% 18%,
    #000 42%,
    rgba(0, 0, 0, 0.55) 68%,
    transparent 100%
  );
}

.vl-ab-sparkles__lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.vl-ab-sparkles__line {
  position: absolute;
  top: 0.35rem;
  height: 1px;
  opacity: 0.55;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.62), transparent);
}

.vl-ab-sparkles__line--blur {
  filter: blur(5px);
  opacity: 0.45;
}

.vl-ab-sparkles__line--a {
  left: 15%;
  width: 70%;
}

.vl-ab-sparkles__line--a.vl-ab-sparkles__line--blur {
  height: 2px;
}

.vl-ab-sparkles__line--b {
  left: 58%;
  width: 22%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.38), transparent);
}

.vl-ab-sparkles__line--b.vl-ab-sparkles__line--blur {
  height: 4px;
}

.vl-ab-sparkles__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
  -webkit-mask-image: radial-gradient(
    ellipse 105% 95% at 50% 28%,
    #000 35%,
    rgba(0, 0, 0, 0.5) 62%,
    transparent 96%
  );
  mask-image: radial-gradient(
    ellipse 105% 95% at 50% 28%,
    #000 35%,
    rgba(0, 0, 0, 0.5) 62%,
    transparent 96%
  );
}

.vl-ab-sparkles.is-live .vl-ab-sparkles__canvas,
.vl-ab-sparkles.is-static .vl-ab-sparkles__canvas {
  opacity: 1;
}

.vl-ab-beams-hero__scroll {
  position: relative;
  z-index: 20;
  margin: clamp(1.25rem, 3vh, 1.75rem) auto 0;
  padding-top: 3rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vl-ab-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
}

.vl-ab-beams-hero__scroll::after {
  content: "";
  width: 1px;
  height: 48px;
  background: var(--vl-ab-accent);
  opacity: 0.55;
  animation: vl-ab-scroll-pulse 2s var(--vl-ab-ease) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .vl-ab-ripple-hero__cell {
    animation: none !important;
    cursor: default;
  }

  .vl-ab-beams-hero__scroll::after {
    animation: none !important;
  }
}

body.vl-ab-page .vl-ab-section--hero .hero__title,
body.vl-ab-page .vl-ab-section--hero .hero__description,
body.vl-ab-page .vl-ab-section--hero .vl-ab-hero__deck,
body.vl-ab-page .vl-ab-section--hero .vl-ab-hero__scroll {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

body.vl-ab-page .vl-ab-section--hero .hero__title {
  margin: 0 0 calc(1rem * var(--vl-ab-hero-scale));
  font-size: calc(1em * var(--vl-ab-hero-scale));
}

body.vl-ab-page .vl-ab-section--hero h1.hero__description {
  margin: 0 auto;
  max-width: min(52rem, 100%);
  font-size: clamp(1.4rem, 7.7vw, 4.375rem) !important;
  line-height: 1 !important;
  text-align: center;
}

body.vl-ab-page .vl-ab-section--hero .hero__title,
body.vl-ab-page .vl-ab-section--hero .vl-ab-hero__deck {
  width: 100%;
  text-align: center;
}

body.vl-ab-page .vl-ab-section--hero [data-vl-scroll-enter] {
  overflow: visible;
}

body.vl-ab-page .vl-ab-section--hero [data-vl-scroll-enter] .vl-ab-scroll-inner {
  transform-origin: center center;
}

body.vl-ab-page .text :is(h1, h2).hero__description {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.vl-ab-page .vl-ab-section__title.hero__description {
  margin: 0 0 1.5rem;
  max-width: none;
}

/* Studio: pinned red typographic scrub (reference-style) */
body.vl-ab-page .vl-ab-section--studio {
  max-width: none;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
  overflow-x: visible;
}

body.vl-ab-page .vl-ab-type-pin {
  width: 100%;
}

body.vl-ab-page .vl-ab-type-pin__track {
  height: 620vh;
}

body.vl-ab-page .vl-ab-type-pin__sticky {
  position: sticky;
  top: var(--vl-site-header-offset, 5.75rem);
  height: calc(100dvh - var(--vl-site-header-offset, 5.75rem));
  overflow-x: clip;
  overflow-y: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vl-ab-bg);
}

body.vl-ab-page .vl-ab-type-pin__stage {
  position: relative;
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

body.vl-ab-page .vl-ab-type-pin__lines {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  pointer-events: auto;
  font-size: clamp(4.5rem, 22vw, 16rem);
  /* Tight type rhythm; row-band is larger so separated rows show full caps */
  --vl-ab-type-line-height: 0.68em;
  --vl-ab-type-row-band: 0.94em;
  --vl-ab-type-middle-pad: 0.05em;
  --vl-ab-type-stack-offset: var(--vl-ab-type-row-band);
  --vl-ab-type-stack-height: calc(3 * var(--vl-ab-type-row-band));
  --vl-ab-type-glyph-half: calc(var(--vl-ab-type-line-height) / 2);
  --vl-ab-type-merge-cut: calc(50% + var(--vl-ab-type-middle-pad) + var(--vl-ab-type-glyph-half));
  line-height: var(--vl-ab-type-line-height);
}

body.vl-ab-page .vl-ab-type-pin__stack {
  position: relative;
  width: 100%;
  height: var(--vl-ab-type-stack-height);
  overflow: visible;
}

body.vl-ab-page .vl-ab-type-pin__line {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  overflow: visible;
  white-space: nowrap;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
}

body.vl-ab-page .vl-ab-type-pin__line--1 {
  z-index: 1;
}

body.vl-ab-page .vl-ab-type-pin__line--2 {
  top: 50%;
  bottom: auto;
  height: auto;
  transform: translateY(-50%);
  z-index: 4;
  padding-block: var(--vl-ab-type-middle-pad);
  background: transparent;
  box-sizing: content-box;
  overflow: visible;
}

body.vl-ab-page .vl-ab-type-pin.is-merging .vl-ab-type-pin__line--2 {
  background: var(--vl-ab-bg);
}

body.vl-ab-page .vl-ab-type-pin__line--3 {
  z-index: 2;
}

body.vl-ab-page .vl-ab-type-pin__row {
  position: relative;
  left: auto;
  display: inline-block;
  width: max-content;
  max-width: none;
  font-family: var(--font-primary, var(--vl-ab-font));
  font-size: 1em;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--vl-ab-accent);
  -webkit-text-fill-color: var(--vl-ab-accent);
  white-space: nowrap;
  transform-origin: center center;
  will-change: transform;
}

body.vl-ab-page .vl-ab-type-pin__line--1 .vl-ab-type-pin__row {
  transform: translate3d(100vw, 0, 0);
}

body.vl-ab-page .vl-ab-type-pin__line--2 .vl-ab-type-pin__row {
  transform: translate3d(-100vw, 0, 0);
}

body.vl-ab-page .vl-ab-type-pin__line--3 .vl-ab-type-pin__row {
  transform: translate3d(100vw, 0, 0);
}

body.vl-ab-page .vl-ab-type-pin__char {
  display: inline;
  cursor: default;
  transition:
    color 0.18s ease,
    -webkit-text-fill-color 0.18s ease;
}

body.vl-ab-page .vl-ab-type-pin__char:not(.is-space) {
  display: inline-block;
}

body.vl-ab-page .vl-ab-type-pin__char.is-space {
  width: 0.28em;
}

body.vl-ab-page .vl-ab-type-pin__char:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.vl-ab-page .vl-ab-type-pin__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.vl-ab-page .vl-ab-type-pin__reveal {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 clamp(1.25rem, 5vw, 4rem);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}

body.vl-ab-page .vl-ab-type-pin.is-revealing .vl-ab-type-pin__lines {
  z-index: 2;
}

body.vl-ab-page .vl-ab-type-pin.is-title-settled .vl-ab-type-pin__line--2 .vl-ab-type-pin__row {
  letter-spacing: 0.08em;
}

body.vl-ab-page .vl-ab-type-pin.is-revealing .vl-ab-type-pin__line--2 {
  background: transparent;
}

body.vl-ab-page .vl-ab-type-pin__reveal-list {
  margin: 0;
  padding: 0;
  list-style: none;
  width: min(100%, 92vw);
  opacity: 0;
  will-change: opacity, transform;
}

body.vl-ab-page .vl-ab-type-pin__reveal-item {
  --vl-item-focus: 0;
  margin: 0;
  padding: 0.06em 0;
  font-family: var(--font-primary, var(--vl-ab-font));
  font-size: clamp(1.85rem, 7.5vw, 5.25rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: none;
  white-space: nowrap;
  transform: scale(calc(1 + var(--vl-item-focus) * 0.12));
  transform-origin: center center;
  color: rgba(255, 255, 255, calc(0.12 + var(--vl-item-focus) * 0.88));
  -webkit-text-fill-color: rgba(255, 255, 255, calc(0.12 + var(--vl-item-focus) * 0.88));
}

/* White-scroll (light band): the roles list must be dark/legible. */
body.vl-ab-page.vl-theme-middle .vl-ab-type-pin__reveal-item {
  color: rgba(11, 11, 12, calc(0.18 + var(--vl-item-focus) * 0.82));
  -webkit-text-fill-color: rgba(11, 11, 12, calc(0.18 + var(--vl-item-focus) * 0.82));
}

body.vl-ab-page .vl-ab-type-pin.is-title-settled .vl-ab-type-pin__reveal-item.is-active {
  letter-spacing: -0.02em;
}

body.vl-ab-page .vl-ab-studio-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(3rem, 10vh, 5rem) clamp(1.5rem, 6vw, 5rem) clamp(4rem, 12vh, 7rem);
  color: var(--vl-ab-text);
}

/* Dark canvas (white scroll off): keep studio copy light — pour/gradient hooks stay transparent otherwise */
body.vl-ab-page:not(.vl-theme-middle) .vl-ab-studio-body .hero__title,
body.vl-ab-page:not(.vl-theme-middle) .vl-ab-studio-body .vl-ab-prose,
body.vl-ab-page:not(.vl-theme-middle) .vl-ab-studio-body .vl-ab-prose p,
body.vl-ab-page:not(.vl-theme-middle) .vl-ab-studio-body .vl-ab-prose strong,
body.vl-ab-page:not(.vl-theme-middle) .vl-ab-studio-body .vl-text-generate__word {
  color: var(--color-text, #f5f5f5) !important;
  -webkit-text-fill-color: var(--color-text, #f5f5f5) !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

body.vl-ab-page.vl-theme-middle .vl-ab-studio-body .hero__title,
body.vl-ab-page.vl-theme-middle .vl-ab-studio-body .vl-ab-prose p,
body.vl-ab-page.vl-theme-middle .vl-ab-studio-body .vl-ab-prose strong {
  color: var(--vl-ab-text);
  -webkit-text-fill-color: var(--vl-ab-text);
}

@media (max-width: 1440px) and (min-width: 901px), (max-height: 900px) and (min-width: 901px) {
  body.vl-ab-page .vl-ab-type-pin__track {
    height: 540vh;
  }

  body.vl-ab-page .vl-ab-type-pin__sticky {
    padding-inline: clamp(0.75rem, 2vw, 1.25rem);
    box-sizing: border-box;
  }

  body.vl-ab-page .vl-ab-type-pin__lines {
    font-size: clamp(3.25rem, 12vw, 11rem);
    --vl-ab-type-line-height: 0.72em;
    --vl-ab-type-row-band: 1.08em;
    --vl-ab-type-middle-pad: 0.08em;
    --vl-ab-type-stack-offset: var(--vl-ab-type-row-band);
    padding-inline: 0;
    box-sizing: border-box;
  }

  body.vl-ab-page .vl-ab-type-pin__reveal {
    padding-inline: clamp(0.75rem, 2vw, 1.25rem);
  }
}

@media (max-width: 900px) {
  html.lenis body.vl-ab-page {
    overscroll-behavior-y: none;
  }

  body.vl-ab-page .vl-ab-type-pin__track {
    height: 280vh;
  }

  body.vl-ab-page .vl-ab-type-pin__sticky {
    position: sticky;
    top: var(--vl-site-header-offset, 5.75rem);
    height: calc(100dvh - var(--vl-site-header-offset, 5.75rem));
    min-height: 0;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    padding-inline: clamp(0.75rem, 3vw, 1.25rem);
    box-sizing: border-box;
    background: #000 !important;
  }

  body.vl-ab-page .vl-ab-type-pin__stage {
    min-height: 0;
    height: auto;
    width: 100%;
    flex-direction: column;
    gap: clamp(0.35rem, 2vh, 0.75rem);
    align-items: center;
    justify-content: center;
    will-change: transform;
  }

  body.vl-ab-page .vl-ab-type-pin__lines {
    font-size: clamp(2.85rem, 17vw, 7rem);
    --vl-ab-type-row-band: 1.02em;
    --vl-ab-type-line-height: 0.7em;
    --vl-ab-type-middle-pad: 0.07em;
    --vl-ab-type-stack-offset: var(--vl-ab-type-row-band);
    max-width: 100%;
    overflow-x: clip;
    flex-shrink: 0;
  }

  body.vl-ab-page .vl-ab-type-pin__reveal {
    position: relative;
    inset: auto;
    top: auto !important;
    width: 100%;
    flex-shrink: 0;
    height: clamp(4.25rem, 14vh, 6.75rem);
    overflow: hidden;
    opacity: 1;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 16%,
      #000 84%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 16%,
      #000 84%,
      transparent 100%
    );
    will-change: auto;
  }

  body.vl-ab-page .vl-ab-type-pin__reveal-list {
    width: min(100%, 100%);
    padding-inline: clamp(0.5rem, 3vw, 1rem);
    box-sizing: border-box;
    will-change: transform, opacity;
  }

  body.vl-ab-page .vl-ab-type-pin__reveal-item {
    font-size: clamp(1.15rem, 5.2vw, 2.15rem);
    white-space: nowrap;
    transform: none;
    transition: none;
    color: rgba(255, 255, 255, calc(0.14 + var(--vl-item-focus, 0) * 0.86)) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, calc(0.14 + var(--vl-item-focus, 0) * 0.86)) !important;
  }

  body.vl-ab-page .vl-ab-type-pin--desktop {
    display: none !important;
  }

  body.vl-ab-page .vl-ab-type-pin--mobile {
    display: block;
  }
}

@media (min-width: 901px) {
  body.vl-ab-page .vl-ab-type-pin--mobile {
    display: none !important;
  }
}

/* Mobile-only Who we are pin (separate DOM + scroll path) */
@media (max-width: 900px) {
  body.vl-ab-page .vl-ab-type-pin-mobile {
    width: 100%;
  }

  body.vl-ab-page .vl-ab-type-pin-mobile__track {
    height: 340vh;
  }

  body.vl-ab-page .vl-ab-type-pin-mobile__sticky {
    position: sticky;
    top: var(--vl-site-header-offset, 5.75rem);
    height: calc(100dvh - var(--vl-site-header-offset, 5.75rem));
    display: block;
    padding-inline: clamp(0.75rem, 3vw, 1.25rem);
    box-sizing: border-box;
    background: #000 !important;
    overflow: visible;
  }

  body.vl-ab-page .vl-ab-type-pin-mobile__frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  body.vl-ab-page .vl-ab-type-pin-mobile__titles {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(100%, 100vw);
    flex-shrink: 0;
    font-size: clamp(2.85rem, 17vw, 7rem);
    --vl-ab-m-type-line-height: 0.7em;
    --vl-ab-m-type-row-band: 1.02em;
    --vl-ab-m-type-middle-pad: 0.07em;
    --vl-ab-m-type-stack-offset: var(--vl-ab-m-type-row-band);
    --vl-ab-m-type-stack-height: calc(3 * var(--vl-ab-m-type-row-band));
    line-height: var(--vl-ab-m-type-line-height);
    overflow: visible;
    z-index: 2;
  }

  body.vl-ab-page .vl-ab-type-pin-mobile__stack {
    position: relative;
    width: 100%;
    height: var(--vl-ab-m-type-stack-height);
  }

  body.vl-ab-page .vl-ab-type-pin-mobile__line {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    overflow: visible;
    will-change: transform, opacity;
  }

  body.vl-ab-page .vl-ab-type-pin-mobile__line--1 {
    z-index: 1;
  }

  body.vl-ab-page .vl-ab-type-pin-mobile__line--2 {
    top: 50%;
    bottom: auto;
    height: auto;
    transform: translateY(-50%);
    z-index: 4;
    padding-block: var(--vl-ab-m-type-middle-pad);
    box-sizing: content-box;
  }

  body.vl-ab-page .vl-ab-type-pin-mobile.is-merging .vl-ab-type-pin-mobile__line--2 {
    background: #000;
  }

  body.vl-ab-page .vl-ab-type-pin-mobile__line--3 {
    z-index: 2;
  }

  body.vl-ab-page .vl-ab-type-pin-mobile__list-viewport {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% + clamp(2.4rem, 9vh, 3.6rem));
    width: 100%;
    height: clamp(4.25rem, 14vh, 6.75rem);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 16%,
      #000 84%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 16%,
      #000 84%,
      transparent 100%
    );
  }

  body.vl-ab-page .vl-ab-type-pin-mobile.is-revealing .vl-ab-type-pin-mobile__list-viewport {
    pointer-events: none;
  }

  body.vl-ab-page .vl-ab-type-pin-mobile__list {
    margin: 0;
    padding: 0 clamp(0.5rem, 3vw, 1rem);
    list-style: none;
    width: 100%;
    box-sizing: border-box;
    will-change: transform, opacity;
  }

  body.vl-ab-page .vl-ab-type-pin-mobile__item {
    --vl-item-focus: 0;
    margin: 0;
    padding: 0.06em 0;
    font-family: var(--font-primary, var(--vl-ab-font));
    font-size: clamp(1.15rem, 5.2vw, 2.15rem);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.035em;
    white-space: nowrap;
    text-align: center;
    color: rgba(255, 255, 255, calc(0.14 + var(--vl-item-focus, 0) * 0.86));
    -webkit-text-fill-color: rgba(255, 255, 255, calc(0.14 + var(--vl-item-focus, 0) * 0.86));
  }

  body.vl-ab-page.vl-theme-middle .vl-ab-type-pin-mobile__item {
    color: rgba(11, 11, 12, calc(0.18 + var(--vl-item-focus, 0) * 0.82));
    -webkit-text-fill-color: rgba(11, 11, 12, calc(0.18 + var(--vl-item-focus, 0) * 0.82));
  }

  body.vl-ab-page .vl-ab-type-pin-mobile.is-title-settled .vl-ab-type-pin-mobile__item.is-active {
    letter-spacing: -0.02em;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.vl-ab-page .vl-ab-type-pin__track {
    height: auto;
  }

  body.vl-ab-page .vl-ab-type-pin-mobile__track {
    height: auto;
  }

  body.vl-ab-page .vl-ab-type-pin-mobile__sticky {
    position: relative;
    top: auto;
    height: auto;
    min-height: 70vh;
    padding: 3rem 0;
  }

  body.vl-ab-page .vl-ab-type-pin-mobile__frame {
    min-height: 70vh;
  }

  body.vl-ab-page .vl-ab-type-pin-mobile__titles {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
  }

  body.vl-ab-page .vl-ab-type-pin-mobile__list-viewport {
    position: relative;
    top: auto;
    opacity: 1;
    height: auto;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  body.vl-ab-page .vl-ab-type-pin__sticky {
    position: relative;
    top: auto;
    height: auto;
    min-height: 70vh;
    padding: 3rem 0;
  }

  body.vl-ab-page .vl-ab-type-pin__stage {
    flex-direction: column;
    gap: 0.65rem;
  }

  body.vl-ab-page .vl-ab-type-pin__row {
    transform: none !important;
  }

  body.vl-ab-page .vl-ab-type-pin__line {
    transform: none !important;
    opacity: 1 !important;
  }

  body.vl-ab-page .vl-ab-type-pin__line:not(.vl-ab-type-pin__line--2) {
    display: none;
  }

  body.vl-ab-page .vl-ab-type-pin__reveal {
    position: relative;
    inset: auto;
    top: auto !important;
    opacity: 1;
    transform: none !important;
  }

  body.vl-ab-page .vl-ab-type-pin__reveal-list {
    opacity: 1;
    transform: none;
  }

}

body.vl-ab-page .vl-ab-hero__deck {
  margin: calc(1.35rem * var(--vl-ab-hero-scale)) 0 0;
  max-width: min(calc(var(--body-text-max, 42rem) * var(--vl-ab-hero-scale) + 12rem), 100%);
}

.vl-ab-hero__scroll {
  margin-top: calc(2rem * var(--vl-ab-hero-scale));
  padding-top: calc(3rem * var(--vl-ab-hero-scale));
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vl-ab-muted);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.vl-ab-hero__scroll::after {
  content: "";
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--vl-ab-accent), transparent);
  animation: vl-ab-scroll-pulse 2s var(--vl-ab-ease) infinite;
}

@keyframes vl-ab-scroll-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scaleY(0.6);
    transform-origin: top;
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* Scroll enter: slide from left/right, expand, lift (JS sets transform) */
[data-vl-scroll-enter] {
  opacity: 0.12;
  will-change: transform, opacity;
}

[data-vl-scroll-enter].is-scroll-visible {
  opacity: 1;
}

.vl-ab-scroll-inner {
  display: block;
  transform-origin: left center;
  will-change: transform;
}

.vl-ab-scroll-inner:has(> p:only-child),
.hero__title .vl-ab-scroll-inner {
  display: inline-block;
}

[data-vl-scroll-enter="right"] .vl-ab-scroll-inner {
  transform-origin: right center;
}

@media (prefers-reduced-motion: reduce) {
  [data-vl-scroll-enter] {
    opacity: 1 !important;
  }

  .vl-ab-scroll-inner {
    transform: none !important;
  }
}

/* Quote stack - three quotes, sequential fade-in, then scroll continues */
.vl-ab-quote-stack {
  position: relative;
  width: 100%;
  overflow-x: clip;
  border-top: 1px solid var(--vl-ab-line);
  border-bottom: 1px solid var(--vl-ab-line);
  background: var(--color-background, var(--color-black, #000000));
  scroll-margin-top: calc(var(--vl-site-header-offset, 5.75rem) + 1rem);
  --vl-quote-ink: rgba(245, 245, 245, 0.92);
  --vl-quote-pour-base: rgba(245, 245, 245, 0.92);
}

.vl-ab-quote-stack__track {
  height: 200vh;
}

.vl-ab-quote-stack__sticky {
  position: sticky;
  top: var(--vl-site-header-offset, 5.75rem);
  height: calc(100dvh - var(--vl-site-header-offset, 5.75rem));
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
  padding: clamp(2rem, 8vh, 4rem) clamp(1rem, 3vw, 2rem) clamp(0.5rem, 1.5vw, 1rem);
  background: var(--color-background, var(--color-black, #000000));
}

body.vl-ab-page.vl-theme-middle:not(.vl-white-scroll-disabled) .vl-ab-quote-stack,
body.vl-ab-page.vl-theme-middle:not(.vl-white-scroll-disabled) .vl-ab-quote-stack__sticky {
  background: var(--color-background, #ffffff);
  --vl-quote-ink: rgba(11, 11, 12, 0.92);
  --vl-quote-pour-base: rgba(11, 11, 12, 0.92);
}

body.vl-ab-page:not(.vl-theme-middle) .vl-ab-quote-stack,
body.vl-ab-page:not(.vl-theme-middle) .vl-ab-quote-stack__sticky,
body.vl-ab-page.vl-white-scroll-disabled .vl-ab-quote-stack,
body.vl-ab-page.vl-white-scroll-disabled .vl-ab-quote-stack__sticky {
  background: var(--color-background, var(--color-black, #000000));
}

.vl-ab-quote-stack__grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(1.25rem, 3vh, 2rem);
  width: min(100%, 42rem);
  margin: 0 auto;
}

.vl-ab-quote-stack__layer {
  position: relative;
  margin: 0;
  max-width: none;
  max-height: 0;
  overflow: hidden;
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

.vl-ab-quote-stack__layer.is-quote-entering,
.vl-ab-quote-stack__layer.is-quote-live {
  max-height: none;
  overflow: visible;
}

.vl-ab-quote-stack__text {
  display: block;
  transform-origin: center center;
  color: var(--vl-quote-ink);
  -webkit-text-fill-color: var(--vl-quote-ink);
}

/* Resting copy: solid ink only — do not reset background on hover pour. */
body.vl-ab-page:not(.vl-theme-middle) .vl-ab-quote-stack__text,
body.vl-ab-page.vl-white-scroll-disabled .vl-ab-quote-stack__text,
body.vl-ab-page.vl-theme-middle:not(.vl-white-scroll-disabled) .vl-ab-quote-stack__text {
  color: var(--vl-quote-ink) !important;
  -webkit-text-fill-color: var(--vl-quote-ink) !important;
}

/* White scroll off: keep legible copy; scroll-scrub opacity stays JS-driven. */
body.vl-ab-page.vl-white-scroll-disabled .vl-ab-quote-stack__layer.is-quote-entering,
body.vl-ab-page.vl-white-scroll-disabled .vl-ab-quote-stack__layer.is-quote-live {
  max-height: none;
  overflow: visible;
}

@media (hover: hover) and (pointer: fine) {
  .vl-ab-quote-stack__layer.is-quote-entering:hover .vl-ab-quote-stack__text,
  .vl-ab-quote-stack__layer.is-quote-live:hover .vl-ab-quote-stack__text,
  .vl-ab-quote-stack__layer.is-quote-entering:focus-within .vl-ab-quote-stack__text,
  .vl-ab-quote-stack__layer.is-quote-live:focus-within .vl-ab-quote-stack__text {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background-color: transparent !important;
    background-image: linear-gradient(
      to top,
      var(--color-accent, #ff2b2b) 0%,
      var(--color-accent, #ff2b2b) 50%,
      var(--vl-quote-pour-base) 50%,
      var(--vl-quote-pour-base) 100%
    ) !important;
    background-size: 100% 200% !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    animation: vl-ab-quote-pour 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  }
}

@keyframes vl-ab-quote-pour {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 100%;
  }
}

.vl-ab-quote-stack__layer--1,
.vl-ab-quote-stack__layer--2,
.vl-ab-quote-stack__layer--3 {
  text-align: left;
  align-self: stretch;
}

.vl-ab-quote-stack.is-all-visible .vl-ab-quote-stack__layer--2 {
  text-shadow: none;
}

@media (min-width: 901px) {
  .vl-ab-quote-stack__track {
    height: 240vh;
  }
}

/* Aceternity container scroll — compact sticky stack (iPad tilt + text slide) */
.vl-ab-container-scroll {
  position: relative;
  z-index: 4;
  width: 100%;
  margin: clamp(-10vh, -6rem, -3rem) 0 0;
  padding: 0;
  overflow: visible;
  background: var(--vl-ab-bg);
}

.vl-ab-container-scroll__outer {
  position: relative;
  display: block;
  height: 175vh;
  padding: 0 clamp(0.75rem, 3vw, 5rem);
}

.vl-ab-container-scroll__stage {
  position: sticky;
  top: var(--vl-site-header-offset, 5.75rem);
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: clamp(0.35rem, 0.75vh, 0.65rem) 0 clamp(0.25rem, 0.5vh, 0.5rem);
  overflow: visible;
}

.vl-ab-container-scroll__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: clamp(0.5rem, 1vh, 0.85rem);
  overflow: visible;
}

.vl-ab-container-scroll__perspective {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  will-change: transform;
}

body.vl-ab-page .vl-ab-cs-type {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: clamp(0.15rem, 0.35vh, 0.35rem) clamp(0.75rem, 3vw, 1.5rem) 0;
  text-align: center;
  opacity: 0;
  overflow: visible;
  pointer-events: none;
}

body.vl-ab-page .vl-ab-cs-type.is-live {
  pointer-events: auto;
}

/* Match Aceternity Card: max-w-5xl + fixed h-[30rem] md:h-[40rem] (not image aspect on width) */
.vl-ab-container-scroll__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 64rem;
  height: 30rem;
  margin: 0 auto;
  padding: 0.5rem;
  border: 4px solid #6c6c6c;
  border-radius: 30px;
  background: #222222;
  transform-origin: center center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: rotateX(20deg) scale(1.05);
  will-change: transform;
  box-shadow:
    0 0 #0000004d,
    0 9px 20px #0000004a,
    0 37px 37px #00000042,
    0 84px 50px #00000026,
    0 149px 60px #0000000a,
    0 233px 65px #00000003;
}

.vl-ab-container-scroll__card-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 1rem;
  background: #18181b;
}

.vl-ab-container-scroll__card-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  user-select: none;
  -webkit-user-drag: none;
}

@media (min-width: 768px) {
  .vl-ab-container-scroll__outer {
    height: 210vh;
  }

  .vl-ab-container-scroll__card {
    height: 40rem;
    padding: 1.5rem;
  }

  .vl-ab-container-scroll__card-inner {
    border-radius: 1rem;
    padding: 1rem;
    box-sizing: border-box;
  }

  .vl-ab-container-scroll__card-inner img {
    border-radius: 0.65rem;
  }
}

/* Build. Ship. Repeat. — under iPad (~36% of WHO WE ARE scale after 40% reduction) */
body.vl-ab-page .vl-ab-cs-type__row {
  display: inline-block;
  width: max-content;
  max-width: min(100%, 68vw);
  font-size: clamp(1.9rem, 8.8vw, 6.85rem);
  font-family: var(--font-primary, var(--vl-ab-font));
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--vl-ab-accent);
  -webkit-text-fill-color: var(--vl-ab-accent);
  white-space: nowrap;
  transform: translate3d(-62vw, 0, 0);
  transform-origin: center center;
  will-change: transform, opacity;
}

body.vl-ab-page .vl-ab-cs-type__row .vl-ab-type-pin__char {
  display: inline;
  cursor: default;
  transition:
    color 0.18s ease,
    -webkit-text-fill-color 0.18s ease;
}

body.vl-ab-page .vl-ab-cs-type__row .vl-ab-type-pin__char:not(.is-space) {
  display: inline-block;
}

body.vl-ab-page .vl-ab-cs-type__row .vl-ab-type-pin__char.is-space {
  width: 0.28em;
}

body.vl-ab-page .vl-ab-cs-type__row .vl-ab-type-pin__char:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

@media (max-width: 900px) {
  body.vl-ab-page .vl-ab-cs-type__row {
    font-size: clamp(1.35rem, 7.2vw, 3.15rem);
    max-width: min(100%, 92vw);
    transform: translate3d(-38vw, 0, 0);
  }
}

@media (max-width: 900px) {
  .vl-ab-quote-stack__track {
    height: 128vh;
  }

  .vl-ab-quote-stack__sticky {
    padding: clamp(1.15rem, 4.5vh, 1.75rem) clamp(1rem, 3vw, 1.25rem)
      clamp(0.25rem, 1vh, 0.5rem);
    align-items: flex-start;
  }

  .vl-ab-quote-stack__grid {
    max-width: min(42ch, 92vw);
    gap: clamp(0.85rem, 2.2vh, 1.35rem);
  }

  .vl-ab-quote-stack__layer {
    font-size: clamp(1.05rem, 4.2vw, 1.35rem);
    line-height: 1.4;
  }

  .vl-ab-container-scroll {
    margin-top: clamp(-3vh, -1.5rem, -0.75rem);
  }

  .vl-ab-container-scroll__outer {
    height: 118vh;
  }

  .vl-ab-container-scroll__stage {
    padding-bottom: 0;
  }

  .vl-ab-container-scroll__card {
    width: min(100%, calc(100vw - 2rem));
    max-width: 64rem;
    height: auto;
    aspect-ratio: 16 / 10;
    max-height: min(52vw, 13.5rem);
    padding: 0.35rem;
    box-sizing: border-box;
    overflow: hidden;
  }

  .vl-ab-container-scroll__card-inner {
    border-radius: 0.55rem;
    overflow: hidden;
    height: 100%;
    box-sizing: border-box;
  }

  .vl-ab-container-scroll__card-inner img {
    object-fit: contain;
    object-position: center center;
    width: 100%;
    height: 100%;
    background: #18181b;
  }

  body.vl-ab-page .vl-ab-studio-body {
    padding-bottom: clamp(2.5rem, 8vh, 3.75rem);
  }

  body.vl-ab-page .vl-ab-section--studio {
    overflow-x: clip;
  }
}

/* Studio section title: static (no scroll-enter drift) */
body.vl-ab-page .vl-ab-studio-body .hero__title[data-vl-scroll-enter] {
  opacity: 1;
}

body.vl-ab-page .vl-ab-studio-body .hero__title[data-vl-scroll-enter] .vl-ab-scroll-inner {
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .vl-ab-quote-stack__track,
  .vl-ab-container-scroll__outer {
    height: auto;
    min-height: 0;
  }

  .vl-ab-quote-stack__sticky,
  .vl-ab-container-scroll__stage {
    position: relative;
    top: auto;
    min-height: 0;
  }

  .vl-ab-quote-stack__sticky {
    height: auto;
    padding: clamp(1.5rem, 4vh, 2.5rem) clamp(1.5rem, 6vw, 5rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .vl-ab-container-scroll__outer {
    padding: clamp(1rem, 3vh, 1.5rem) clamp(1rem, 4vw, 2rem);
  }

  .vl-ab-quote-stack__grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .vl-ab-quote-stack__layer {
    position: relative;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-align: left !important;
    max-width: 42ch;
    max-height: none !important;
    overflow: visible !important;
  }

  .vl-ab-quote-stack__text {
    color: var(--vl-ab-text) !important;
    -webkit-text-fill-color: var(--vl-ab-text) !important;
    background-image: none !important;
    animation: none !important;
  }

  .vl-ab-container-scroll__card {
    transform: none !important;
  }

  .vl-ab-cs-type {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  .vl-ab-cs-type__row {
    transform: none !important;
  }
}

/* White-scroll mode: marquee strokes must stay visible on light background. */
body.vl-ab-page.vl-theme-middle .vl-ab-marquee__item {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
}

/* Marquee should NOT react to light/dark mode: force a dark band + white stroke */
.vl-ab-marquee {
  background: var(--color-black, #000000);
}

.vl-ab-marquee__item {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
}
/* Quote (legacy single block - kept for reference selectors) */
.vl-ab-quote {
  font-size: clamp(1.35rem, 3.5vw, 2.25rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  max-width: 28ch;
  margin: 0;
  padding: clamp(3rem, 8vh, 6rem) clamp(1.5rem, 6vw, 5rem);
  border-top: 1px solid var(--vl-ab-line);
  border-bottom: 1px solid var(--vl-ab-line);
}

/* Marquee tags */
.vl-ab-marquee {
  overflow: hidden;
  background: var(--color-black, #000000);
  border-bottom: 1px solid var(--vl-ab-line);
  padding: 1.25rem 0;
  mask-image: none;
  -webkit-mask-image: none;
}

.vl-ab-marquee__track {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  animation: vl-ab-marquee 32s linear infinite;
}

.vl-ab-marquee__item {
  flex: 0 0 auto;
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
}

/* White-scroll (light band): ensure About content stays readable */
body.vl-ab-page.vl-theme-middle .vl-ab-main,
body.vl-ab-page.vl-theme-middle .vl-ab-section,
body.vl-ab-page.vl-theme-middle .vl-ab-prose,
body.vl-ab-page.vl-theme-middle .vl-ab-prose p,
body.vl-ab-page.vl-theme-middle .vl-ab-prose strong,
body.vl-ab-page.vl-theme-middle .vl-ab-highlight-card h3 {
  color: var(--vl-ab-text);
  -webkit-text-fill-color: var(--vl-ab-text);
}

body.vl-ab-page.vl-theme-middle .vl-ab-stats span,
body.vl-ab-page.vl-theme-middle .vl-ab-highlight-card__source,
body.vl-ab-page.vl-theme-middle .vl-ab-highlight-card__more {
  color: var(--vl-ab-muted);
  -webkit-text-fill-color: var(--vl-ab-muted);
}

body.vl-ab-page.vl-theme-middle .vl-ab-highlight-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: var(--vl-ab-line);
}

@keyframes vl-ab-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Prose blocks */
body.vl-ab-page .vl-ab-section .hero__title {
  margin: 0 0 0.75rem;
}

body.vl-ab-page .vl-ab-prose {
  max-width: var(--body-text-max, 42rem);
}

.vl-ab-prose p {
  margin: 0 0 1.15rem;
}

.vl-ab-prose strong {
  color: var(--vl-ab-text);
  font-weight: 600;
}

/* Text generate effect - driven by vl-aceternity-home.js (same as homepage) */
body.vl-ab-page .vl-ab-prose.vl-text-generate {
  display: block;
}

body.vl-ab-page .vl-text-generate__word {
  display: inline;
  opacity: 0;
}

body.vl-ab-page .vl-text-generate--filter .vl-text-generate__word {
  filter: blur(8px);
}

body.vl-ab-page .vl-text-generate__word.is-revealed {
  animation: vl-ab-text-generate-in var(--vl-text-generate-duration, 0.45s) ease forwards;
}

@keyframes vl-ab-text-generate-in {
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.vl-ab-page .vl-text-generate__word {
    opacity: 1 !important;
    filter: none !important;
    animation: none !important;
  }
}

/* Parallax figure */
.vl-ab-figure {
  margin: 2.5rem 0 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--vl-ab-line);
  aspect-ratio: 16 / 9;
  max-width: 56rem;
}

.vl-ab-figure img {
  display: block;
  width: 100%;
  height: 120%;
  object-fit: cover;
  will-change: transform;
}

/* Product handsets - static row, centered */
.vl-ab-phones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(0.35rem, 1.5vw, 1rem);
  margin: 2.5rem auto 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
}

.vl-ab-phones__item {
  flex: 0 0 auto;
  width: clamp(4.75rem, 11vw, 7.75rem);
  margin: 0;
}

.vl-ab-phones__item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.45));
}

/* Experience grid */
.vl-ab-exp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .vl-ab-exp-grid {
    grid-template-columns: 1fr;
  }
}

.vl-ab-exp-card {
  border: 1px solid var(--vl-ab-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--vl-ab-surface);
}

.vl-ab-exp-card__img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.vl-ab-exp-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--vl-ab-ease);
}

.vl-ab-exp-card:hover .vl-ab-exp-card__img img {
  transform: scale(1.04);
}

.vl-ab-exp-card__body {
  padding: 1rem 1.1rem 1.25rem;
}

.vl-ab-exp-card__body h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
}

.vl-ab-exp-card__body p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--vl-ab-muted);
  line-height: 1.45;
}

/* Stats */
.vl-ab-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}

@media (max-width: 700px) {
  .vl-ab-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.vl-ab-stats li {
  padding: 1.25rem;
  border: 1px solid var(--vl-ab-line);
  border-radius: 10px;
}

.vl-ab-stats strong {
  display: block;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--vl-ab-accent);
}

.vl-ab-stats span {
  font-size: 0.8rem;
  color: var(--vl-ab-muted);
}

/* Products marquee grid */
.vl-ab-products-marquee {
  overflow: hidden;
  margin-top: 2rem;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.vl-ab-products-marquee__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: vl-ab-marquee 40s linear infinite reverse;
}

.vl-ab-product-pill {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 1.1rem 0.65rem 0.65rem;
  border: 1px solid var(--vl-ab-line);
  border-radius: 999px;
  background: var(--vl-ab-surface);
  text-decoration: none;
  color: var(--vl-ab-text);
  font-size: 0.875rem;
  font-weight: 500;
  transition: border-color 0.2s;
}

.vl-ab-product-pill:hover {
  border-color: rgba(255, 43, 43, 0.5);
}

.vl-ab-product-pill img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Horizontal highlights */
.vl-ab-highlights {
  margin-top: 2rem;
}

.vl-ab-highlights__rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  cursor: grab;
  scrollbar-width: thin;
  scrollbar-color: var(--vl-ab-line) transparent;
}

.vl-ab-highlights__rail.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.vl-ab-highlight-card {
  flex: 0 0 min(320px, 85vw);
  scroll-snap-align: start;
  border: 1px solid var(--vl-ab-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--vl-ab-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.25s var(--vl-ab-ease);
}

.vl-ab-highlight-card:hover {
  border-color: rgba(255, 43, 43, 0.45);
  transform: translateY(-4px);
}

.vl-ab-highlight-card__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.vl-ab-highlight-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vl-ab-highlight-card__body {
  padding: 1rem 1.15rem 1.25rem;
}

.vl-ab-highlight-card__source {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vl-ab-muted);
  margin-bottom: 0.35rem;
}

.vl-ab-highlight-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.vl-ab-highlight-card__more {
  font-size: 0.8rem;
  color: var(--vl-ab-accent);
}

/* CTA */
.vl-ab-cta {
  min-height: 70dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-top: 1px solid var(--vl-ab-line);
}

body.vl-ab-page .vl-ab-cta__title.hero__description {
  margin: 0 0 1.5rem;
  max-width: none;
}

.vl-ab-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.vl-ab-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s, background 0.2s;
}

.vl-ab-cta__btn--primary {
  background: var(--vl-ab-accent);
  color: #fff;
}

.vl-ab-cta__btn--ghost {
  border: 1px solid var(--vl-ab-line);
  color: var(--vl-ab-text);
}

.vl-ab-cta__btn:hover {
  transform: translateY(-2px);
}