/* =========================================================
   UPGRADE LAYER
   - Hero: the character is the star, huge and first
   - Capabilities: designs are no longer glued to the words
   - Global scroll reveal / transition primitives
   ========================================================= */

/* ---------- HERO : giant character first ---------- */
.hero {
  align-items: flex-end;
  height: 100svh;
  min-height: 720px;
}
.hero .mascot {
  --s: 52vmin;
  top: 50%;
  z-index: 3;
}
@media (min-width: 1500px) {
  .hero .mascot { --s: 52vmin; }
}
.hero .hero-inner {
  padding-bottom: 92px;
  z-index: 5;
  width: 100%;
}
.hero h1 {
  font-size: clamp(30px, 5.4vw, 86px);
}
.hero .eyebrow { margin-bottom: 16px; }
.hero .sub { margin-top: 16px; font-size: 14px; }
.hero .bg-w { font-size: 74vw; color: #202024; }
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  background: linear-gradient(180deg, transparent, rgba(18, 18, 21, 0.92) 65%, var(--ink));
  z-index: 4;
  pointer-events: none;
}
@media (max-width: 900px) {
  .hero .mascot { --s: 86vmin; top: 40%; }
  .hero .hero-inner { padding-bottom: 64px; }
  .hero h1 { font-size: clamp(26px, 8.5vw, 44px); }
}

/* ---------- CAPABILITIES : words on their own, designs on their own ---------- */
.svc-x .stage {
  grid-template-columns: 1fr;
  gap: 64px;
}
.svc-x .item .t .alt { display: none; }
.svc-x .visual {
  position: relative;
  top: auto;
  aspect-ratio: 21 / 9;
  border-radius: 10px;
}
@media (max-width: 780px) {
  .svc-x .visual { aspect-ratio: 4 / 3; }
}
.svc-x .visual .slide {
  transition: opacity 0.55s var(--ease), transform 1.1s var(--ease);
}
.svc-x .visual .dots {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  z-index: 3;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.svc-x .visual .dots i {
  width: 26px; height: 3px;
  background: rgba(255, 255, 255, 0.28);
  display: block;
  border-radius: 2px;
  transition: background 0.4s var(--ease), width 0.4s var(--ease);
}
.svc-x .visual .dots i.on { background: var(--coral); width: 46px; }

/* ---------- GLOBAL SCROLL REVEAL PRIMITIVES ---------- */
[data-up] { will-change: transform, opacity; }
.u-hidden { opacity: 0; }

/* section-to-section transition sheen */
.sec-wipe {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  background: var(--coral);
  transform-origin: bottom;
}

/* faster, always-on marquees */
.marquee .track { animation-duration: 16s !important; }

@media (prefers-reduced-motion: reduce) {
  [data-up] { opacity: 1 !important; transform: none !important; }
}