/* ==========================================================================
   Y.O.Y — section styles
   `html.motion` is set by main.js when motion is allowed; everything that
   depends on sticky/scroll choreography hangs off it, so reduced-motion and
   no-JS visitors get a plain, fully readable page.
   ========================================================================== */

/* ─────────── PRELOADER ─────────── */
.preloader {
  position: fixed; inset: 0; z-index: var(--z-preloader);
  background: var(--yoy-oxblood); color: var(--cream);
  display: grid; grid-template-rows: 1fr auto auto;
  padding: var(--sp-gutter);
}
.preloader__mark { align-self: center; justify-self: center; width: min(46vw, 360px); color: var(--yoy-paper); }
.preloader__mark svg { width: 100%; height: auto; overflow: visible; }
.preloader__row {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
  padding-bottom: 1.1rem;
}
.preloader__label {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--yoy-gold);
}
.preloader__count {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3rem, 9vw, 7.5rem); line-height: 0.8; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.preloader__rule { position: relative; height: 3px; background: rgba(244,237,228,0.12); }
.preloader__rule i {
  position: absolute; inset: 0; background: var(--yoy-red-hot);
  transform: scaleX(0); transform-origin: left center;
}
.preloader__rule b {
  position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: var(--yoy-red-hot);
}

/* ─────────── NAV ─────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  border-bottom: 1px solid transparent;
  transition: background 0.6s var(--e-out), border-color 0.6s var(--e-out),
              transform 0.6s var(--e-out), backdrop-filter 0.6s var(--e-out);
}
.nav.is-stuck {
  background: rgba(10, 5, 6, 0.78);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--hairline);
}
.nav.is-hidden { transform: translateY(-100%); }
.nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding-block: clamp(0.9rem, 1.6vw, 1.5rem);
}
.nav__brand { display: flex; align-items: center; gap: 14px; color: var(--yoy-paper); }
.nav__logo { display: block; width: 74px; }
.nav__logo svg { width: 100%; height: auto; }
.nav__sub {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-70);
  padding-left: 14px; border-left: 1px solid var(--hairline);
}
.nav__links { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.75rem); }
.nav__link {
  position: relative; font-size: 0.9375rem; font-weight: 500; color: var(--cream-80);
  padding-block: 6px; transition: color var(--d-fast) var(--e-out);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--yoy-red-hot);
  transform: scaleX(0); transform-origin: right center;
  transition: transform 0.6s var(--e-out);
}
.nav__link:hover { color: var(--yoy-paper); }
.nav__link:hover::after, .nav__link[aria-current]::after { transform: scaleX(1); transform-origin: left center; }
.nav__link[aria-current] { color: var(--yoy-paper); }

.nav__burger { display: none; width: 44px; height: 44px; position: relative; }
.nav__burger span {
  position: absolute; left: 8px; right: 8px; height: 2px; background: var(--cream);
  transition: transform var(--d-fast) var(--e-out), top var(--d-fast) var(--e-out);
}
.nav__burger span:nth-child(1) { top: 17px; }
.nav__burger span:nth-child(2) { top: 25px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

.nav__drawer {
  display: none; flex-direction: column;
  padding: 0.5rem var(--sp-gutter) 2rem;
  background: rgba(10,5,6,0.97);
  border-bottom: 1px solid var(--hairline);
}
.nav__drawer a {
  font-family: var(--font-display); font-size: 2rem; font-weight: 600; letter-spacing: -0.03em;
  padding-block: 0.65rem; border-bottom: 1px solid var(--hairline);
}

/* ─────────── HERO ─────────── */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(6.5rem, 12vh, 9rem); padding-bottom: 8.5rem;
  overflow: hidden;
  background: var(--grad-hero); color: var(--cream);
  --accent: var(--yoy-gold);
}
.hero__bg {
  position: absolute; inset: 0;
  background-image: url("../img/texture-linen.jpg");
  background-size: 480px; opacity: 0.16; mix-blend-mode: overlay;
}
.hero__vignette { position: absolute; inset: 0; background: var(--vignette); }
.hero__inner { position: relative; text-align: center; }

.hero__eyebrow {
  display: inline-flex; gap: 0.9em; flex-wrap: wrap; justify-content: center;
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--yoy-gold);
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
}
.hero__eyebrow i { font-style: normal; color: var(--yoy-red-hot); }

/* Capped by width, by an absolute max, and by viewport height
   (2.27 = the logo viewBox aspect, 1386 / 610). */
.hero__mark {
  width: min(72vw, 880px, calc(36svh * 2.27));
  margin-inline: auto; color: var(--yoy-paper);
}
.hero__mark svg { width: 100%; height: auto; overflow: visible; }

.hero__tag { margin-top: clamp(1.6rem, 3.2vw, 2.6rem); }
.hero__line {
  font-size: clamp(1.25rem, 2vw, 1.85rem);
  font-weight: 500; line-height: 1.35; letter-spacing: -0.02em;
  max-width: 28ch; margin-inline: auto; color: var(--yoy-paper);
  text-wrap: balance;
}
.hero__sub { margin-top: 0.7rem; font-size: 1.0625rem; color: var(--cream-80); }

.hero__cta {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 18px 34px; margin-top: clamp(1.9rem, 3.2vw, 2.75rem);
}

.proofbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-wrap: wrap;
  border-top: 1px solid var(--hairline);
  background: rgba(10,5,6,0.34);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.proofbar li {
  flex: 1 1 200px;
  padding: clamp(1rem, 1.6vw, 1.45rem) clamp(1.25rem, 3.2vw, 3.2rem);
  border-right: 1px solid var(--hairline);
}
.proofbar li:last-child { border-right: 0; }
.proofbar__n {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1; letter-spacing: -0.03em;
  color: var(--yoy-paper); font-variant-numeric: tabular-nums;
}
.proofbar__n i { color: var(--yoy-amber); font-style: normal; }
.proofbar__l {
  display: block; margin-top: 0.5rem;
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-70);
}

/* ─────────── VISION — sticky, one line per step ─────────── */
.vision {
  position: relative;
  background: var(--yoy-oxblood); color: var(--cream);
  --accent: var(--yoy-gold);
  --slice: 100svh;
}
.vision__stage {
  position: relative;
  display: grid; grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  padding-block: clamp(6.5rem, 12vh, 8rem) clamp(2rem, 5vh, 3rem);
  background:
    radial-gradient(60% 50% at 50% 55%, rgba(160,0,0,0.22), transparent 70%),
    var(--yoy-oxblood);
}
.vision__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vision__count {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.12em; color: var(--cream-70); font-variant-numeric: tabular-nums;
}
.vision__count b { color: var(--yoy-paper); font-weight: 500; }

.vision__stack {
  display: grid; gap: clamp(2.5rem, 7vh, 5rem); align-content: center;
  padding: 3rem var(--sp-gutter);
}
.vision__line {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 4.3vw, 4.4rem);
  line-height: 1.08; letter-spacing: -0.032em;
  text-align: center; max-width: 21ch; margin-inline: auto;
  color: var(--yoy-paper); text-wrap: balance;
}
.vision__line--pair span { display: block; }
.vision__line--pair span + span { margin-top: 0.3em; }
.vision__line--final { font-size: clamp(2.8rem, 8vw, 8.5rem); line-height: 1; max-width: none; }
.vision__line--final .em { font-size: 1.12em; }
.vision__strike { display: block; width: min(52%, 460px); height: auto; margin: 0.25em auto 0; overflow: visible; }
.vision__strike line { stroke: var(--yoy-red-hot); stroke-width: 6; }
.vision__strike circle { fill: var(--yoy-red-hot); }

.vision__rail { position: relative; height: 2px; margin-inline: var(--sp-gutter); background: var(--hairline); }
.vision__rail i { position: absolute; inset: 0; background: var(--yoy-red-hot); transform: scaleX(0); transform-origin: left center; }
.vision__rail b { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--yoy-red-hot); }

.vision__snaps { position: absolute; inset: 0; pointer-events: none; }
.vision__snaps i { position: absolute; left: 0; width: 1px; height: 1px; top: calc((var(--k) + 0.5) * var(--slice)); }

html.motion .vision { height: calc(var(--n) * var(--slice) + 100svh); }
html.motion .vision__stage { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: hidden; }
html.motion .vision__stack { position: relative; display: block; padding: 0; }
html.motion .vision__line {
  position: absolute; left: var(--sp-gutter); right: var(--sp-gutter); top: 50%;
  visibility: hidden; opacity: 0;
}
/* Touch: the browser does the stepping — each snap point must be stopped at. */
@media (hover: none), (pointer: coarse) {
  html.motion { scroll-snap-type: y proximity; }
  html.motion .vision__snaps i { scroll-snap-align: start; scroll-snap-stop: always; }
}

/* ─────────── WORK / BENTO ─────────── */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(58px, 7.1vw, 112px);
  gap: clamp(8px, 0.9vw, 14px);
}
/* Spans follow each clip's aspect (row unit ≈ 100px): 16:9 films take 6–7 columns × 3 rows,
   9:16 reels take 2 columns × 3 rows — or 3 × 5 on the all-work page. Numbers are the
   sequence the studio asked for; the home page shows 1–6, work.html shows all nine. */
.b--1 { grid-column: 1 / 8;   grid-row: 1 / 4; }    /* Founder Sessions · 16:9 */
.b--2 { grid-column: 8 / 13;  grid-row: 1 / 4; }    /* Character Intro  · 16:9 */
.b--3 { grid-column: 1 / 3;   grid-row: 4 / 7; }    /* Cooking          · 9:16 */
.b--4 { grid-column: 3 / 5;   grid-row: 4 / 7; }    /* Mutton Show      · 9:16 */
.b--5 { grid-column: 5 / 11;  grid-row: 4 / 7; }    /* Neha Nagar       · 16:9 */
.b--6 { grid-column: 11 / 13; grid-row: 4 / 7; }    /* Furniture        · 9:16 */
.b--7 { grid-column: 1 / 7;   grid-row: 7 / 10; }   /* Music video      · 16:9 */
.b--8 { grid-column: 7 / 10;  grid-row: 7 / 12; }   /* Shoot 01         · 9:16 */
.b--9 { grid-column: 10 / 13; grid-row: 7 / 12; }   /* Shoot 02         · 9:16 */
.b-cta {
  grid-column: 1 / 7; grid-row: 10 / 12;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  padding: clamp(1.1rem, 2vw, 1.75rem);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  background: linear-gradient(135deg, #2A0A10 0%, var(--ink-800) 100%);
}
.b-cta__title { font-size: clamp(1.5rem, 2.6vw, 2.5rem); max-width: 14ch; }
.b-cta .strike-link { align-self: flex-start; }

.bento__card {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--ink-700);
  isolation: isolate; cursor: pointer;
}
.card__media { position: absolute; inset: -6% 0; }   /* room for scroll parallax */
.card__poster, .card__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.85) contrast(1.02);
  transition: filter var(--d-base) var(--e-out), transform var(--d-slow) var(--e-out);
}
.card__video { opacity: 0; transition: opacity 0.4s linear; }
.bento__card.is-playing .card__video { opacity: 1; }
.bento__card:hover .card__poster,
.bento__card:hover .card__video { filter: saturate(1.05) contrast(1.05); transform: scale(1.035); }

.bento__card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,5,6,0.4) 0%, rgba(10,5,6,0) 30%, rgba(10,5,6,0.5) 64%, rgba(10,5,6,0.94) 100%);
}
.card__index {
  position: absolute; top: 16px; left: 18px; z-index: 2;
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em;
  color: rgba(253,253,253,0.85);
}
.card__ratio {
  position: absolute; top: 13px; right: 14px; z-index: 2;
  padding: 3px 9px; border: 1px solid rgba(244,237,228,0.3);
  background: rgba(10,5,6,0.5);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--cream);
}
.card__foot { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; }
.card__rule {
  display: block; height: 2px; background: var(--yoy-red-hot);
  margin-bottom: 12px; transform: scaleX(0); transform-origin: left center;
  transition: transform 0.8s var(--e-out);
}
.bento__card:hover .card__rule { transform: scaleX(1); }
.card__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.card__kicker {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--yoy-amber);
}
.card__title {
  margin-top: 6px; color: var(--yoy-paper);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.1rem, 1.6vw, 1.7rem); letter-spacing: -0.025em; line-height: 1.1;
}
.card__play {
  display: grid; place-items: center; flex-shrink: 0;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--yoy-red); color: var(--yoy-paper);
  box-shadow: inset 0 -6px 14px rgba(0,0,0,0.25);
  transition: transform var(--d-fast) var(--e-out);
}
.card__play svg { margin-left: 3px; }
.card__play:hover { transform: scale(1.1); }
.bento__card { container-type: inline-size; }
@container (max-width: 250px) {
  .card__foot { left: 14px; right: 14px; bottom: 14px; }
  .card__index { left: 14px; }
  .card__title { font-size: 1.05rem; }
  .card__kicker { font-size: 0.6875rem; letter-spacing: 0.06em; }
}

/* "View all" row under a section's media */
.more {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin-top: clamp(1.75rem, 3vw, 2.75rem); padding-top: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 1px solid var(--hairline);
}
.more--strip { margin-top: clamp(2rem, 3.5vw, 3rem); }
.more__count {
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cream-70);
}
.more__count b { color: var(--yoy-amber); font-weight: 500; }

/* ─────────── FILM STRIP ─────────── */
.strip { padding-block: var(--sp-section); overflow: hidden; background: var(--ink-900); }
.strip__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.strip__hint { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-70); }
.strip__frame {
  position: relative; background: #0D0708;
  border-block: 1px solid var(--ink-600);
  padding-block: 10px; cursor: grab;
}
.strip__frame:active { cursor: grabbing; }
.strip__perf {
  height: 16px; margin-block: 4px;
  background-image: repeating-linear-gradient(90deg,
    transparent 0 14px, rgba(244,237,228,0.16) 14px 26px, transparent 26px 40px);
  background-size: 40px 100%;
}
.strip__track { display: flex; gap: 10px; padding-inline: 10px; will-change: transform; }
.strip__cell {
  margin: 0; flex-shrink: 0; position: relative;
  width: clamp(160px, 17vw, 270px); aspect-ratio: 2 / 3;
  overflow: hidden; border-radius: 2px; background: var(--ink-700);
}
.strip__cell img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.75) contrast(1.04);
  transition: filter var(--d-base) var(--e-out), transform var(--d-slow) var(--e-out);
  pointer-events: none; user-select: none;
}
.strip__cell:hover img { filter: saturate(1.05); transform: scale(1.05); }
.strip__cell::after {            /* keeps the caption legible on bright frames */
  content: ""; position: absolute; inset: auto 0 0; height: 34%; pointer-events: none;
  background: linear-gradient(0deg, rgba(10,5,6,0.62), rgba(10,5,6,0));
}
.strip__cell figcaption {
  z-index: 1; position: absolute; left: 10px; bottom: 8px;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em;
  color: rgba(253,253,253,0.8); text-transform: uppercase;
}

/* ─────────── SERVICES ─────────── */
.services { --accent: var(--yoy-gold); }
.tiers {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.tier {
  position: relative; overflow: hidden;
  padding: clamp(1.75rem, 2.6vw, 2.6rem);
  border: 1px solid rgba(244,237,228,0.16);
  background: rgba(10,5,6,0.28);
  transition: border-color var(--d-base) var(--e-out), background var(--d-base) var(--e-out);
}
.tier::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--yoy-red-hot); transform: scaleX(0); transform-origin: left center;
  transition: transform 0.9s var(--e-out);
}
.tier:hover { border-color: rgba(224,177,52,0.4); background: rgba(10,5,6,0.42); }
.tier:hover::before { transform: scaleX(1); }
.tier__num { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--yoy-gold); }
.tier__name {
  margin: 0.9rem 0 1.6rem; color: var(--yoy-paper);
  font-family: var(--font-display); font-weight: 650;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem); letter-spacing: -0.03em; line-height: 1.05;
}
.tier__list { display: grid; gap: 0.8rem; }
.tier__list li { position: relative; padding-left: 22px; font-size: 1rem; line-height: 1.5; color: var(--cream-80); }
.tier__list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 2px; background: var(--yoy-red-hot); }

.services__goal {
  margin-top: clamp(3.5rem, 7vw, 6rem); text-align: center;
  font-size: clamp(1.9rem, 4.2vw, 3.9rem);
}
.services__goal span {
  display: block; margin-top: 1.1rem;
  font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 400;
  letter-spacing: 0; color: var(--cream-80);
}

/* ─────────── FLYWHEEL — a ferris wheel of platforms ─────────── */
.flywheel { position: relative; background: var(--ink-900); color: var(--cream); overflow: clip; }
.flywheel__stage {
  display: flex; align-items: center;
  min-height: 100svh;
  padding-block: clamp(6rem, 12vh, 8rem) clamp(3rem, 6vh, 4rem);
  background: radial-gradient(50% 60% at 68% 50%, rgba(160,0,0,0.14), transparent 70%);
}
.flywheel__grid {
  display: grid; align-items: center; gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.flywheel__copy .display { margin-top: 1.1rem; }
.flywheel__copy .lede { margin-top: 1.4rem; }

.readout {
  margin-top: clamp(2rem, 4vh, 3rem); padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  min-height: 10.5rem;
}
.readout__k {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--yoy-amber);
}
.readout__k b { color: var(--cream-70); font-weight: 500; font-variant-numeric: tabular-nums; }
.readout__v {
  display: block; margin-top: 0.8rem;
  font-family: var(--font-display); font-weight: 650;
  font-size: clamp(1.7rem, 2.6vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.05;
  color: var(--yoy-paper);
}
.readout__d { display: block; margin-top: 0.6rem; font-size: 1.0625rem; line-height: 1.55; color: var(--cream-80); max-width: 40ch; }

.wheel {
  position: relative; justify-self: center;
  width: min(68svh, 44vw, 640px); aspect-ratio: 1;
}
.wheel__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fly-ring { fill: none; stroke: url(#flyGrad); stroke-width: 1.35; vector-effect: non-scaling-stroke; }
.fly-spoke { stroke: rgba(244,237,228,0.16); stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.fly-axle { fill: none; stroke: rgba(244,237,228,0.1); stroke-width: 1; vector-effect: non-scaling-stroke; }

.wheel__hub {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; pointer-events: none;
}
.wheel__hub b {
  display: block; font-family: var(--font-display); font-weight: 650;
  font-size: clamp(1.5rem, 2.5vw, 2.4rem); line-height: 1; letter-spacing: -0.035em;
  color: var(--yoy-paper);
}
.wheel__hub small {
  display: block; margin-top: 0.8rem;
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-70);
}

.wheel__cars { position: absolute; inset: 0; }
.car { position: absolute; left: 50%; top: 50%; will-change: transform; }
.car__btn {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  transform-origin: 50% 0;   /* cabins hang from the top */
}
.car__icon {
  display: grid; place-items: center;
  width: clamp(44px, 4.2vw, 58px); aspect-ratio: 1;
  border-radius: 27%;
  box-shadow: 0 10px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 0.6s var(--e-out), box-shadow 0.6s var(--e-out);
}
.car__icon svg { width: 52%; height: 52%; fill: #fff; }
.car__label {
  font-size: 0.8125rem; font-weight: 500; line-height: 1.1; white-space: nowrap;
  color: var(--cream-70); transition: color 0.4s var(--e-out);
}
.car__btn:hover .car__icon, .car__btn:focus-visible .car__icon { transform: scale(1.1); }
.car.is-active .car__icon {
  transform: scale(1.22);
  box-shadow: 0 0 0 2px var(--yoy-amber), 0 14px 34px rgba(252,169,0,0.3);
}
.car.is-active .car__label { color: var(--yoy-amber); }

.car__icon--ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.car__icon--yt { background: #FF0033; }
.car__icon--shoot {           /* the studio's own service, so it wears the brand red */
  background: radial-gradient(circle at 30% 20%, #C8141C 0%, var(--yoy-red) 55%, #6E0000 100%);
}
.car__icon--shoot svg { fill: var(--yoy-paper); width: 54%; height: 54%; }
.car__icon--meta { background: #fff; }
.car__icon--meta svg { fill: #0866FF; }
.car__icon--wa { background: #25D366; }

@media (min-width: 900px) {
  html.motion .flywheel { height: 280svh; }
  html.motion .flywheel__stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
}

/* ─────────── PERFORMANCE ─────────── */
.metrics {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  background: var(--ink-600); border: 1px solid var(--ink-600);
}
.metric { padding: clamp(1.6rem, 2.3vw, 2.3rem); background: var(--ink-900); transition: background var(--d-base) var(--e-out); }
.metric:hover { background: var(--ink-800); }
.metric b, .metric i {
  font-family: var(--font-display); font-weight: 700; font-style: normal;
  font-size: clamp(2.2rem, 3.4vw, 3.3rem); line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.metric b { color: var(--yoy-paper); }
.metric i { color: var(--yoy-amber); }
.metric h3 {
  margin-top: 1rem; font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--yoy-amber); font-weight: 500;
}
.metric p { margin-top: 0.45rem; font-size: 0.9375rem; color: var(--cream-70); }
.metric--hero { background: var(--yoy-oxblood); }
.metric--hero:hover { background: #4A0B12; }
.metric--hero i { color: var(--yoy-gold); }

/* ─────────── MARKET (paper) ─────────── */
.market { background: var(--yoy-crumple); color: #1A0D0F; }
.market::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("../img/texture-paper.jpg");
  background-size: cover; opacity: 0.5; mix-blend-mode: multiply;
}
.market > * { position: relative; }
.market__title { margin-top: 1.1rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.market__cols { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.market__ch {
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding-bottom: 1rem; margin-bottom: 1.75rem; border-bottom: 1px solid rgba(26,13,15,0.18);
}
.market__col ul { display: grid; gap: 1.15rem; }
.market__col li { position: relative; padding-left: 28px; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.4; }
.market__col li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 14px; height: 2px; }
.market__col--old .market__ch { color: rgba(26,13,15,0.62); }
.market__col--old li { color: rgba(26,13,15,0.66); }
.market__col--old li::before { background: rgba(26,13,15,0.35); }
.market__col--new .market__ch { color: var(--yoy-red); }
.market__col--new li { color: #1A0D0F; font-weight: 500; }
.market__col--new li::before { background: var(--yoy-red); }

/* ─────────── VERTICALS ─────────── */
.verticals { position: relative; overflow: hidden; --accent: var(--yoy-gold); }
.verticals__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.06);
  transition: opacity 0.9s var(--e-out), transform 1.6s var(--e-out);
  filter: saturate(0.75) brightness(0.4);
}
.verticals.is-hovering .verticals__bg { opacity: 1; transform: scale(1); }
.verticals .shell { position: relative; }
.verticals__list { margin-top: 2.5rem; }
.verticals__list li { border-top: 1px solid rgba(244,237,228,0.18); }
.verticals__list li:last-child { border-bottom: 1px solid rgba(244,237,228,0.18); }
.verticals__list button {
  display: flex; align-items: baseline; gap: clamp(1rem, 3vw, 2.75rem);
  width: 100%; text-align: left;
  padding-block: clamp(1.1rem, 2.3vw, 1.9rem);
  font-family: var(--font-display); font-weight: 650;
  font-size: clamp(2rem, 5.6vw, 5rem); line-height: 1; letter-spacing: -0.04em;
  color: var(--cream);
  transition: color var(--d-fast) var(--e-out), padding-left var(--d-base) var(--e-out);
}
.verticals__list button:hover, .verticals__list button:focus-visible { color: var(--yoy-paper); padding-left: 1.25rem; }
.verticals__i { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.12em; color: var(--yoy-gold); flex-shrink: 0; }
/* hovering a vertical strikes it through, exactly like the logo */
.verticals__name { position: relative; display: inline-block; }
.verticals__name::after {
  content: ""; position: absolute; left: -0.06em; right: -0.06em; top: 54%; height: 0.075em;
  background: var(--yoy-red-hot); transform: scaleX(0); transform-origin: left center;
  transition: transform 0.75s var(--e-out);
}
.verticals__name::before {
  content: ""; position: absolute; right: -0.28em; top: calc(54% + 0.0375em);
  width: 0.24em; height: 0.24em; margin-top: -0.12em; border-radius: 50%;
  background: var(--yoy-red-hot); transform: scale(0);
  transition: transform 0.45s var(--e-out);
}
.verticals__list button:hover .verticals__name::after,
.verticals__list button:focus-visible .verticals__name::after { transform: scaleX(1); }
.verticals__list button:hover .verticals__name::before,
.verticals__list button:focus-visible .verticals__name::before { transform: scale(1); transition-delay: 0.4s; }

/* ─────────── CLIENTS MARQUEE ─────────── */
.clients { overflow: hidden; }
.marquee { overflow: hidden; margin-top: 2.5rem; }
.marquee + .marquee { margin-top: 1rem; }
.marquee__row { display: flex; gap: 1rem; padding-right: 1rem; width: max-content; will-change: transform; }   /* trailing gap keeps the loop seamless */
/* flat tiles with baked backgrounds: desaturate, don't fade (fading greys the plate) */
.marquee__row img {
  width: clamp(124px, 12vw, 178px); height: clamp(72px, 6.8vw, 102px);
  object-fit: contain; background: var(--yoy-paper);
  padding: 14px;
  filter: grayscale(1) contrast(0.92) brightness(0.92);
  transition: filter var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.marquee__row img:hover { filter: none; transform: translateY(-4px); }

/* ─────────── REVIEWS (paper) ─────────── */
.reviews { background: var(--yoy-crumple); color: #1A0D0F; }
.chats { columns: 3 280px; column-gap: clamp(1rem, 1.8vw, 1.5rem); }
.chat {
  break-inside: avoid; margin: 0 0 clamp(1rem, 1.8vw, 1.5rem);
  padding: clamp(1.3rem, 1.9vw, 1.8rem);
  background: var(--yoy-paper);
  border-radius: 14px 14px 14px 3px;
  box-shadow: 0 12px 30px rgba(26,13,15,0.1);
}
.chat p { font-size: 1rem; line-height: 1.6; color: #241315; }
.chat p b { font-weight: 650; color: var(--yoy-red); }
.chat footer { margin-top: 1rem; }
.chat cite {
  font-family: var(--font-mono); font-size: var(--fs-label); font-style: normal;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(26,13,15,0.6);
}
.chat--big p { font-family: var(--font-serif); font-style: italic; font-size: 1.75rem; line-height: 1.2; color: #1A0D0F; }

/* ─────────── WEBDEV ─────────── */
.webdev__grid {
  display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.webdev__copy .display { margin-top: 1.1rem; }
.webdev__copy .lede { margin-top: 1.5rem; }
.webdev__copy .strike { margin-top: 2.25rem; }
.webdev__phone {
  justify-self: center; width: min(300px, 80%); aspect-ratio: 9 / 19;
  border-radius: 40px; padding: 9px;
  background: linear-gradient(160deg, #2B1518, #0D0708);
  box-shadow: 0 30px 70px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(244,237,228,0.1);
}
.webdev__video { width: 100%; height: 100%; object-fit: cover; border-radius: 32px; background: var(--ink-700); }

/* ─────────── CTA ─────────── */
.cta { --accent: var(--yoy-gold); text-align: center; }
.cta__inner { display: grid; justify-items: center; gap: 1.6rem; }
.cta__title { font-size: clamp(2.2rem, 5.8vw, 5.4rem); max-width: 17ch; }
.cta__links {
  display: grid; gap: 1px; width: 100%;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  background: rgba(244,237,228,0.16); border: 1px solid rgba(244,237,228,0.16);
}
.cta__links a {
  display: grid; grid-template-columns: 7rem 1fr auto; align-items: center; gap: 1rem;
  padding: clamp(1.15rem, 2vw, 1.7rem) clamp(1.25rem, 2.4vw, 2rem);
  background: var(--yoy-oxblood); text-align: left;
  transition: background var(--d-fast) var(--e-out);
}
.cta__links a:hover { background: #4A0B12; }
.cta__k { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--yoy-gold); }
.cta__v { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 1.9vw, 1.7rem); letter-spacing: -0.02em; color: var(--yoy-paper); overflow-wrap: anywhere; }
.cta__go { position: relative; width: 30px; height: 2px; background: var(--yoy-red-hot); transition: width 0.7s var(--e-out); }
.cta__go::after { content: ""; position: absolute; right: -5px; top: -4.5px; width: 11px; height: 11px; border-radius: 50%; background: var(--yoy-red-hot); }
.cta__links a:hover .cta__go { width: 64px; }

/* ─────────── FOOTER ─────────── */
.footer {
  position: relative; overflow: hidden;
  background: var(--yoy-oxblood); color: var(--cream);
  padding-top: clamp(3.5rem, 7vw, 6rem);
  border-top: 1px solid rgba(244,237,228,0.1);
}
.footer__top { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2rem; }
.footer__tag { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 2.2rem); letter-spacing: -0.03em; max-width: 18ch; line-height: 1.1; }
.footer__tag .em { color: var(--yoy-gold); }
.footer__meta {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.25rem; border-top: 1px solid rgba(244,237,228,0.14);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-70);
}
/* the giant, fold-cropped wordmark (crop at 88% of the logo's height) */
.footer__giant {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  aspect-ratio: 1386 / 537; overflow: hidden;
  color: rgba(244,237,228,0.12);
}
.footer__giant svg { width: 100%; height: auto; display: block; }

/* ─────────── LIGHTBOX ─────────── */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-lightbox);
  background: rgba(8,4,5,0.95);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem);
}
.lightbox__stage { display: grid; place-items: center; width: min(1100px, 100%); }
.lightbox__stage video, .lightbox__stage img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 78svh;
  border-radius: var(--r-lg); background: #000;
}
.lightbox__stage iframe {
  display: block; border: 0; border-radius: var(--r-lg); background: #000;
  width: min(100%, calc(78svh * 16 / 9)); aspect-ratio: 16 / 9;
}
.lightbox__meta {
  position: absolute; left: 0; right: 0; bottom: clamp(0.75rem, 2.4vw, 1.6rem);
  display: flex; justify-content: center; gap: 1.1rem; padding-inline: 1rem;
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cream-70); pointer-events: none;
}
.lightbox__meta span:first-child { color: var(--yoy-amber); }
.lightbox__nav {
  position: absolute; top: 50%; margin-top: -26px;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(244,237,228,0.28); background: rgba(10,5,6,0.55); color: var(--yoy-paper);
  transition: background var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.lightbox__nav--prev { left: clamp(0.6rem, 2.4vw, 2rem); }
.lightbox__nav--next { right: clamp(0.6rem, 2.4vw, 2rem); }
.lightbox__nav:hover { background: var(--yoy-red); border-color: var(--yoy-red); transform: scale(1.06); }
.lightbox__close {
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--yoy-red); color: var(--yoy-paper);
  transition: transform var(--d-fast) var(--e-out);
}
.lightbox__close:hover { transform: rotate(90deg) scale(1.05); }

/* ══════════════ RESPONSIVE ══════════════ */

@media (max-width: 1024px) {
  .bento { grid-auto-rows: clamp(52px, 8.4vw, 92px); }
  .chats { columns: 2 260px; }
}

@media (max-width: 899px) {
  .flywheel__grid { grid-template-columns: 1fr; }
  .wheel { width: min(92vw, 520px); margin-top: 2rem; }
  .readout { min-height: 0; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav.is-open .nav__drawer { display: flex; }

  .hero { min-height: auto; padding-bottom: 0; }
  /* keep the height cap too — a short, wide window hits this breakpoint */
  .hero__mark { width: min(92vw, calc(36svh * 2.27)); }
  .proofbar {
    position: static; margin-top: clamp(2.5rem, 8vw, 4rem);
    backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10,5,6,0.4);
  }
  .proofbar li { flex: 1 1 50%; border-bottom: 1px solid var(--hairline); }
  .proofbar li:nth-child(2n) { border-right: 0; }
  .proofbar li:nth-last-child(-n+2) { border-bottom: 0; }

  .bento { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: auto; }
  .bento__card, .b-cta { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 3 / 4; }
  .bento__card.is-land { grid-column: 1 / -1 !important; aspect-ratio: 16 / 9; }
  .b-cta { grid-column: 1 / -1 !important; aspect-ratio: auto; min-height: 220px; }

  .chats { columns: 1; }
  .cta__links a { grid-template-columns: 1fr auto; }
  .cta__k { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bento__card.is-port { aspect-ratio: 4 / 5; }
  .lightbox__nav { top: auto; bottom: 3.6rem; margin-top: 0; width: 46px; height: 46px; }
  .hero__cta { flex-direction: column; }
  .footer__meta { flex-direction: column; gap: 0.5rem; }
  .car__label { font-size: 0.75rem; }
}