.home-v8 {
  --v8-ink: #201e1a;
  --v8-ink-deep: #151411;
  --v8-ivory: #fbf6eb;
  --v8-ivory-soft: #eee6d7;
  --v8-sun: #f2c94c;
  --v8-sage: #78ad91;
  --v8-blue: #75a9d7;
  --v8-coral: #d98b76;
  color: var(--v8-ivory);
  background: var(--v8-ink);
}

.home-v8 main { overflow: clip; }

.v8-hero {
  position: relative;
  min-height: min(860px, 100svh);
  height: max(720px, 100svh);
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  padding: 96px max(var(--page-gutter), calc((100vw - var(--max)) / 2)) 76px;
  background:
    radial-gradient(circle at 77% 42%, rgba(242, 201, 76, .09), transparent 27rem),
    linear-gradient(135deg, #24221d 0%, var(--v8-ink-deep) 78%);
}

.v8-hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  content: "";
  opacity: .5;
  background-image:
    linear-gradient(rgba(251, 246, 235, .027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 246, 235, .027) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, #000 0%, transparent 84%);
}

.v8-hero::after {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  background: rgba(251, 246, 235, .16);
}

.motion-canvas,
.brand-scene-fallback {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
}

.motion-canvas { cursor: grab; touch-action: pan-y; }
.motion-canvas.dragging { cursor: grabbing; }
.brand-scene-fallback { display: grid; place-items: center; padding-left: 43%; }
.brand-scene-fallback img { width: min(43vw, 620px); filter: drop-shadow(0 28px 50px rgba(0, 0, 0, .35)); }
.v8-hero.scene-ready .brand-scene-fallback { opacity: 0; }

.v8-hero-copy {
  position: relative;
  z-index: 2;
  width: min(52%, 610px);
  padding-top: 18px;
}

.v8-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 21px;
  color: #cbc3b5;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.v8-kicker::before { width: 32px; height: 1px; content: ""; background: var(--v8-sun); }

.hero-verbs {
  margin: 0;
  color: var(--v8-ivory);
  font-family: var(--display);
  font-size: clamp(4.1rem, 7.3vw, 7.25rem);
  font-weight: 570;
  line-height: .79;
  letter-spacing: -.065em;
}

.hero-verbs span { display: block; }
.hero-verbs span:nth-child(2) { color: var(--v8-sun); }
.hero-verbs span + span { margin-top: .12em; }

.hero-summary {
  max-width: 510px;
  margin: 30px 0 0;
  color: #d1c9bc;
  font-size: clamp(.98rem, 1.25vw, 1.12rem);
  line-height: 1.65;
}

.v8-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }

.v8-button {
  min-height: 51px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 19px;
  border: 1px solid rgba(251, 246, 235, .2);
  border-radius: 0;
  color: var(--v8-ivory);
  background: rgba(255, 255, 255, .02);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.v8-button:hover { transform: translateY(-2px); border-color: rgba(251, 246, 235, .55); }
.v8-button-primary { border-color: var(--v8-sun); color: #17150f; background: var(--v8-sun); }
.v8-button-primary:hover { border-color: #f7d75e; background: #f7d75e; }

.scene-spin {
  position: absolute;
  z-index: 4;
  right: max(var(--page-gutter), calc((100vw - var(--max)) / 2));
  bottom: 34px;
  padding: 6px 0;
  border: 0;
  color: #aaa397;
  background: transparent;
  font-size: .67rem;
  cursor: pointer;
}

.scene-spin span { margin-left: 6px; color: var(--v8-sun); }
.scene-spin:hover { color: var(--v8-ivory); }

.v8-scroll-cue {
  position: absolute;
  z-index: 3;
  bottom: 34px;
  left: max(var(--page-gutter), calc((100vw - var(--max)) / 2));
  display: flex;
  align-items: center;
  gap: 13px;
  color: #aaa397;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.v8-scroll-cue i { width: 42px; height: 1px; background: linear-gradient(90deg, var(--v8-sun) 35%, rgba(251, 246, 235, .2) 35%); }

.kinetic-band {
  overflow: hidden;
  border-block: 1px solid rgba(32, 30, 26, .22);
  color: var(--v8-ink);
  background: var(--v8-sun);
}

.kinetic-track { width: max-content; display: flex; animation: v8Ticker 36s linear infinite; }
.kinetic-set { min-width: max-content; min-height: 63px; display: flex; align-items: center; gap: 28px; padding-right: 28px; }
.kinetic-set span { font-family: var(--display); font-size: 1.28rem; font-weight: 570; }
.kinetic-set i { opacity: .46; font-size: .68rem; font-style: normal; }
@keyframes v8Ticker { to { transform: translateX(-50%); } }

.dimension-section,
.expertise-section,
.product-showcase,
.delivery-section {
  padding: clamp(88px, 9vw, 130px) max(var(--page-gutter), calc((100vw - var(--max)) / 2));
}

.section-heading { max-width: 690px; margin-bottom: clamp(42px, 5vw, 68px); }
.section-heading h2,
.delivery-copy h2 {
  margin: 0;
  color: var(--v8-ivory);
  font-family: var(--display);
  font-size: clamp(3.2rem, 5.7vw, 5.65rem);
  font-weight: 560;
  line-height: .91;
  letter-spacing: -.055em;
}
.section-heading > p:last-child,
.delivery-copy > p:not(.v8-kicker) { max-width: 610px; margin: 24px 0 0; color: #aaa397; line-height: 1.7; }

.expertise-section { background: var(--v8-ink); }

.dimension-section {
  position: relative;
  background:
    radial-gradient(circle at 7% 18%, rgba(242, 201, 76, .08), transparent 25rem),
    radial-gradient(circle at 96% 72%, rgba(117, 169, 215, .055), transparent 30rem),
    linear-gradient(180deg, #211f1b, #171613 72%, #1d1b17);
}

.dimension-section::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .34;
  background-image:
    linear-gradient(rgba(251, 246, 235, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 246, 235, .025) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, #000, transparent 86%);
}

.dimension-heading { position: relative; z-index: 2; max-width: 820px; }
.capability-story {
  --scene-accent: var(--v8-sun);
  --scene-accent-rgb: 242, 201, 76;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(430px, 1.06fr) minmax(360px, .76fr);
  align-items: start;
  gap: clamp(45px, 6vw, 92px);
  transition: --scene-accent 400ms ease;
}

.capability-story[data-active-scene="product"] { --scene-accent: var(--v8-sage); --scene-accent-rgb: 120, 173, 145; }
.capability-story[data-active-scene="growth"] { --scene-accent: var(--v8-coral); --scene-accent-rgb: 217, 139, 118; }
.capability-story[data-active-scene="ai"] { --scene-accent: #a797c2; --scene-accent-rgb: 167, 151, 194; }

.capability-stage {
  position: sticky;
  top: 76px;
  height: clamp(510px, calc(100svh - 108px), 680px);
  padding: 5px;
  perspective: 1200px;
}

.capability-stage-shell {
  position: relative;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(251, 246, 235, .16);
  background:
    radial-gradient(circle at 57% 43%, rgba(var(--scene-accent-rgb), .18), transparent 36%),
    linear-gradient(135deg, rgba(var(--scene-accent-rgb), .08), transparent 34%),
    linear-gradient(145deg, #292720, #12120f 82%);
  box-shadow: 0 36px 100px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .04);
  transform: rotateY(1.6deg);
  transition: background 480ms ease, border-color 480ms ease;
}

.capability-stage-shell::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background-image:
    linear-gradient(rgba(251, 246, 235, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 246, 235, .035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.capability-stage canvas,
.capability-fallback { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; }
.capability-stage canvas { cursor: crosshair; touch-action: pan-y; }
.capability-fallback { display: grid; place-items: center; }
.capability-fallback span { position: absolute; width: 112px; height: 112px; border: 1px solid rgba(var(--scene-accent-rgb), .4); transform: rotate(22deg); }
.capability-fallback span:nth-child(2) { transform: translateX(92px) rotate(-14deg); }
.capability-fallback span:nth-child(3) { transform: translateX(-92px) rotate(34deg); }
.capability-fallback span:nth-child(4) { width: 220px; height: 220px; border-radius: 50%; opacity: .35; }
.capability-fallback b { position: relative; color: var(--scene-accent); font: 570 8rem var(--display); }
.capability-story.scene-ready .capability-fallback { opacity: 0; }

.capability-axis { position: absolute; z-index: 2; pointer-events: none; background: rgba(251, 246, 235, .1); }
.axis-x { right: 20px; bottom: 56px; left: 20px; height: 1px; }
.axis-y { top: 20px; bottom: 20px; left: 52px; width: 1px; }
.capability-hud { position: absolute; z-index: 3; right: 22px; bottom: 20px; left: 68px; display: flex; align-items: center; gap: 12px; }
.capability-hud span { color: var(--scene-accent); font-size: .62rem; font-weight: 800; letter-spacing: .1em; }
.capability-hud strong { color: #9f988d; font-size: .58rem; letter-spacing: .13em; }
.capability-drag { position: absolute; z-index: 3; top: 20px; right: 22px; margin: 0; color: #8d877d; font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; }
.capability-drag span { color: var(--scene-accent); }

.capability-steps { display: grid; }
.capability-step {
  min-height: clamp(480px, 66svh, 610px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 66px) 0;
  opacity: .3;
  transform: translateX(18px);
  transition: opacity 380ms ease, transform 380ms ease;
}
.capability-step + .capability-step { border-top: 1px solid rgba(251, 246, 235, .1); }
.capability-step.is-active { opacity: 1; transform: none; }
.capability-step > span { color: var(--scene-accent); font-size: .62rem; font-weight: 800; letter-spacing: .14em; }
.capability-step h3 { max-width: 560px; margin: 19px 0 18px; color: var(--v8-ivory); font: 560 clamp(2.55rem, 4.2vw, 4.45rem)/.94 var(--display); letter-spacing: -.05em; }
.capability-step p { max-width: 480px; margin: 0; color: #aaa397; font-size: .9rem; line-height: 1.72; }
.capability-step ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 27px 0 0; padding: 0; list-style: none; }
.capability-step li { padding: 7px 10px; border: 1px solid rgba(var(--scene-accent-rgb), .27); color: #c7c0b4; background: rgba(var(--scene-accent-rgb), .04); font-size: .61rem; letter-spacing: .06em; text-transform: uppercase; }
.expertise-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(251, 246, 235, .15); border-left: 1px solid rgba(251, 246, 235, .15); }

.expertise-card {
  position: relative;
  min-height: 390px;
  padding: clamp(22px, 3vw, 36px);
  border-right: 1px solid rgba(251, 246, 235, .15);
  border-bottom: 1px solid rgba(251, 246, 235, .15);
  background: rgba(255, 255, 255, .012);
  transition: background .25s ease;
}
.expertise-card:hover { background: rgba(255, 255, 255, .035); }
.expertise-card > span { color: var(--v8-sun); font: 700 .62rem var(--sans); letter-spacing: .11em; }
.expertise-card h3 { margin: 22px 0 10px; color: var(--v8-ivory); font-size: clamp(1.65rem, 2.5vw, 2.4rem); font-weight: 550; line-height: 1.05; }
.expertise-card p { max-width: 420px; margin: 0; color: #a8a195; font-size: .86rem; line-height: 1.7; }

.expertise-visual { position: absolute; top: 28px; right: 29px; width: min(39%, 205px); height: 154px; opacity: .84; }
.visual-brand { display: grid; place-items: center; }
.visual-brand i { position: absolute; width: 84px; height: 84px; border: 1px solid rgba(242, 201, 76, .35); transform: rotate(16deg); }
.visual-brand i:nth-child(2) { transform: rotate(-14deg); }
.visual-brand b { position: relative; color: var(--v8-sun); font: 600 5rem var(--display); }
.visual-product i { position: absolute; right: 0; width: 78%; height: 72%; border: 1px solid rgba(251, 246, 235, .27); background: rgba(251, 246, 235, .02); }
.visual-product i:nth-child(2) { top: 15px; right: 15px; }
.visual-product i:nth-child(3) { top: 30px; right: 30px; background: linear-gradient(145deg, rgba(242, 201, 76, .12), transparent); }
.visual-growth { display: flex; align-items: end; justify-content: end; gap: 9px; padding: 23px 5px 7px; }
.visual-growth i { width: 20px; height: 25%; background: rgba(251, 246, 235, .13); }
.visual-growth i:nth-child(2) { height: 46%; }
.visual-growth i:nth-child(3) { height: 67%; }
.visual-growth i:nth-child(4) { height: 92%; background: var(--v8-sun); }
.visual-ai { display: grid; place-items: center; }
.visual-ai i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--v8-sun); box-shadow: 0 0 22px rgba(242, 201, 76, .55); }
.visual-ai i:nth-child(1) { transform: translate(-70px, -38px); }
.visual-ai i:nth-child(2) { transform: translate(65px, -45px); }
.visual-ai i:nth-child(3) { transform: translate(-53px, 43px); }
.visual-ai i:nth-child(4) { transform: translate(72px, 39px); }
.visual-ai i:nth-child(5) { width: 42px; height: 42px; border: 1px solid var(--v8-sun); background: rgba(242, 201, 76, .09); box-shadow: none; }
.visual-ai::before,
.visual-ai::after { position: absolute; width: 142px; height: 1px; content: ""; background: rgba(242, 201, 76, .32); transform: rotate(30deg); }
.visual-ai::after { transform: rotate(-32deg); }

.section-link { display: inline-flex; gap: 22px; margin-top: 36px; padding-bottom: 7px; border-bottom: 1px solid var(--v8-sun); color: var(--v8-ivory); font-size: .79rem; font-weight: 700; }

.product-showcase { color: var(--v8-ink); background: var(--v8-ivory); }
.product-heading h2 { color: var(--v8-ink); }
.product-heading .v8-kicker { color: #6d675e; }
.product-heading > p:last-child { color: #716a60; }

.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.product-card {
  --product-accent: var(--v8-sun);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  border: 1px solid rgba(32, 30, 26, .16);
  border-top: 3px solid var(--product-accent);
  background: #fffaf0;
  box-shadow: 0 18px 55px rgba(32, 30, 26, .07);
  transition: transform .28s ease, box-shadow .28s ease;
}
.product-card:hover { transform: translateY(-6px); box-shadow: 0 28px 70px rgba(32, 30, 26, .13); }
.product-health { --product-accent: var(--v8-sage); }
.product-systems { --product-accent: var(--v8-blue); }
.product-play { --product-accent: var(--v8-coral); }
.product-picture { aspect-ratio: 3 / 2; overflow: hidden; background: #ebe5d9; }
.product-picture img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.product-card:hover .product-picture img { transform: scale(1.025); }
.product-card-copy { min-height: 270px; display: flex; flex-direction: column; padding: 25px 25px 28px; }
.product-card-copy > span { color: color-mix(in srgb, var(--product-accent) 72%, #201e1a); font-size: .61rem; font-weight: 800; letter-spacing: .12em; }
.product-card-copy h3 { margin: 15px 0 13px; color: var(--v8-ink); font-size: clamp(2rem, 3vw, 3rem); font-weight: 570; line-height: 1; }
.product-card-copy p { margin: 0; color: #6d675e; font-size: .84rem; line-height: 1.67; }
.product-card-copy b { display: flex; justify-content: space-between; gap: 15px; margin-top: auto; padding-top: 25px; border-top: 1px solid rgba(32, 30, 26, .12); color: var(--v8-ink); font-size: .73rem; }
.product-card-copy b i { color: var(--product-accent); font-style: normal; }

.delivery-section { display: grid; grid-template-columns: minmax(0, .95fr) minmax(430px, 1.05fr); align-items: center; gap: clamp(70px, 9vw, 140px); background: var(--v8-ink-deep); }
.delivery-copy h2 { max-width: 660px; font-size: clamp(3rem, 5vw, 5rem); }
.delivery-copy .v8-button { margin-top: 29px; }
.delivery-path { margin: 0; padding: 0; border-top: 1px solid rgba(251, 246, 235, .17); list-style: none; }
.delivery-path li { display: grid; grid-template-columns: 52px 1fr; gap: 17px; padding: 22px 0; border-bottom: 1px solid rgba(251, 246, 235, .17); }
.delivery-path li > span { color: var(--v8-sun); font-size: .64rem; font-weight: 800; letter-spacing: .08em; }
.delivery-path strong { display: block; color: var(--v8-ivory); font-family: var(--display); font-size: 1.48rem; font-weight: 560; line-height: 1; }
.delivery-path p { margin: 7px 0 0; color: #999286; font-size: .77rem; }

.home-v8.has-motion [data-reveal] { opacity: 1; transform: translateY(16px); transition: transform .55s ease var(--reveal-delay, 0ms); }
.has-motion [data-reveal].visible { transform: none; }

@media (max-width: 980px) {
  .v8-hero { min-height: 720px; height: 88svh; }
  .v8-hero-copy { width: 58%; }
  .hero-verbs { font-size: clamp(3.8rem, 8.5vw, 6rem); }
  .product-grid { grid-template-columns: 1fr; }
  .product-card { grid-template-columns: minmax(290px, .9fr) 1fr; grid-template-rows: none; }
  .product-picture { height: 100%; aspect-ratio: auto; }
  .product-card-copy { min-height: 330px; }
  .delivery-section { grid-template-columns: 1fr; gap: 55px; }
  .capability-story { grid-template-columns: minmax(380px, 1fr) minmax(300px, .72fr); gap: 35px; }
  .capability-stage { height: clamp(460px, calc(100svh - 110px), 590px); }
}

@media (max-width: 760px) {
  .v8-hero { height: auto; min-height: 780px; align-items: flex-end; padding-top: 92px; padding-bottom: 100px; }
  .v8-hero-copy { width: 100%; }
  .hero-verbs { font-size: clamp(3.7rem, 18vw, 5.4rem); line-height: .82; }
  .hero-summary { max-width: 88%; margin-top: 23px; }
  .motion-canvas { height: 54%; bottom: auto; pointer-events: none; }
  .brand-scene-fallback { height: 49%; bottom: auto; padding: 70px 6vw 0; place-items: center; }
  .brand-scene-fallback img { width: min(84vw, 500px); }
  .scene-spin { display: none; }
  .v8-scroll-cue { bottom: 28px; }
  .kinetic-set { min-height: 54px; gap: 23px; padding-right: 23px; }
  .kinetic-set span { font-size: 1.05rem; }
  .expertise-grid { grid-template-columns: 1fr; }
  .expertise-card { min-height: 330px; }
  .expertise-visual { width: 42%; height: 130px; }
  .section-heading h2 { font-size: clamp(3rem, 14.5vw, 4.5rem); }
  .product-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .product-picture { aspect-ratio: 3 / 2; }
  .product-card-copy { min-height: 260px; }
  .capability-story { grid-template-columns: 1fr; gap: 0; }
  .capability-stage { z-index: 4; top: 60px; height: 40svh; min-height: 315px; padding: 0; background: #171613; }
  .capability-stage-shell { transform: none; }
  .capability-steps { margin-top: 10px; }
  .capability-step { min-height: 48svh; padding: 70px 3px 38px; opacity: .22; }
  .capability-step h3 { max-width: 88%; font-size: clamp(2.6rem, 13vw, 4rem); }
  .capability-drag { display: none; }
}

@media (max-width: 520px) {
  .v8-hero { min-height: 750px; }
  .v8-actions { display: grid; }
  .v8-button { width: 100%; }
  .dimension-section,
  .expertise-section,
  .product-showcase,
  .delivery-section { padding-block: 78px; }
  .expertise-card { min-height: 305px; }
  .expertise-card h3 { max-width: 63%; }
}

@media (prefers-reduced-motion: reduce) {
  .kinetic-track { animation: none; }
  .product-card,
  .product-picture img,
  [data-reveal] { transition: none !important; }
}