/* MOXIES — Digital Infrastructure.
   Cinematic five-scene story (desktop) with one persistent Spline robot,
   built mobile-first: base rules below are the plain stacked fallback that
   applies at every width; the `@media (min-width: 900px)` block at the
   bottom switches the story into the sticky/crossfading presentation.
   Keep the 900px breakpoint in sync with MOBILE_BREAKPOINT in script.js. */

:root {
  --bg-primary: #050505;
  --bg-secondary: #0d0d0d;
  --ivory: #f5f2eb;
  --text-secondary: #aaa59b;
  --gold-muted: #c5a05a;
  --gold-rich: #b88a3b;
  --gold-dark: #8f6b32;

  --font-serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

html {
  overflow-x: clip; /* never overflow-x: hidden here — that breaks position: sticky */
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-weight: 500;
}

/* ==================================================================
   STORY / STAGE — mobile-first base: plain stacked flow, no pinning.
   ================================================================== */

.moxies-story {
  position: relative;
}

.moxies-stage {
  position: relative;
  background-color: var(--bg-primary);
}

/* ---------- Navbar (persistent, always visible/interactive) ---------- */

.navbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 1rem 0.75rem;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: min(1120px, 100%);
  border-radius: 14px;
  border: 1px solid rgba(245, 242, 235, 0.08);
  background-color: rgba(13, 13, 13, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 0.75rem 1.25rem;
}

/* Logo sits beside the nav pill (not squeezed inside it, not floating
   elsewhere) — both vertically centered together in .navbar's own row via
   align-items: center above. Height only; width is intentionally omitted
   so the browser scales the file's native 1000×1000px in exact proportion
   (no crop, no stretch, no recolor). Sized to give the full icon +
   "MOXIES" + "MARKETING" lockup real presence next to the pill; the
   navbar's own row height simply grows to fit it — no more fighting to
   pin the bar to its old, too-small-for-this-lockup height. */
.logo-img {
  display: block;
  height: 52px;
  width: auto;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}

.nav-link {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ivory);
  opacity: 0.75;
  transition: opacity 200ms, color 200ms;
}

.nav-link:hover {
  opacity: 1;
  color: var(--gold-muted);
}

.nav-btn {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ivory);
  border: 1px solid var(--gold-dark);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  transition: background-color 200ms, border-color 200ms, color 200ms;
}

.nav-btn:hover {
  background-color: rgba(197, 160, 90, 0.12);
  border-color: var(--gold-muted);
  color: var(--gold-muted);
}

@media (max-width: 899px) {
  .nav-links,
  .nav-portal {
    display: none;
  }
}

/* ---------- Persistent Spline robot ----------
   ONE instance. Mobile: a normal-flow visual block above the Hero text
   (kept simple/functional, per scope — the full cinematic persistence is a
   desktop behavior). Desktop: fills the entire stage, see media query. */

.hero-visual {
  position: relative;
  width: 100%;
  height: 62vh;
  overflow: hidden;
}

.ambient-glow,
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ambient-glow {
  z-index: 0;
  background: radial-gradient(
    circle at 50% 46%,
    rgba(197, 160, 90, 0.16) 0%,
    rgba(197, 160, 90, 0.07) 28%,
    rgba(5, 5, 5, 0) 58%
  );
}

.hero-visual spline-viewer {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.vignette {
  z-index: 5;
  background: radial-gradient(
    ellipse at 50% 55%,
    rgba(5, 5, 5, 0) 40%,
    rgba(5, 5, 5, 0.55) 100%
  );
}

/* ---------- Scenes — mobile: plain stacked sections ---------- */

.scene {
  position: relative;
  opacity: 1;
}

/* ==================================================================
   SHARED TYPOGRAPHY (used across multiple scenes)
   ================================================================== */

.scene-container {
  width: min(1320px, 100%);
  margin: 0 auto;
}

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.section-headline {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.18;
  font-weight: 500;
  color: var(--ivory);
  margin-bottom: 1rem;
}

.gold {
  color: var(--gold-muted);
}

.subtext {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  font-weight: 400;
}

.col-number {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold-muted);
  margin-bottom: 0.4rem;
}

.arrow {
  display: inline-block;
  transition: transform 200ms;
}

.group:hover .arrow {
  transform: translateX(0.125rem);
}

.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ivory);
  background-color: rgba(245, 242, 235, 0.03);
  border: 1px solid var(--gold-dark);
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  transition: background-color 200ms, border-color 200ms, color 200ms;
}

.cta-primary:hover {
  background-color: rgba(197, 160, 90, 0.12);
  border-color: var(--gold-muted);
  color: var(--gold-muted);
}

.cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color 200ms;
}

.cta-secondary:hover {
  color: var(--gold-muted);
}

/* ==================================================================
   SCENE 01 — HERO
   ================================================================== */

.hero-outer {
  padding: 2rem 1.5rem 3rem;
}

.hero-inner {
  max-width: 24rem;
}

.hero-inner > * {
  margin-bottom: 0.9rem;
}

.headline {
  /* DM Serif Display has no true bold cut (Google Fonts ships regular +
     italic only) — font-weight: 700 triggers the browser's faux-bold
     synthesis, which is the intended "bold/strong" treatment here. Both
     headline groups inherit this from their shared <h1>. */
  font-family: "DM Serif Display", var(--font-serif);
  /* +10% over the previous clamp(2rem, 7vw, 2.5rem); line-height tightened
     slightly (1.15 → 1.1) so the larger type still feels composed. */
  font-size: clamp(2.2rem, 7.7vw, 2.75rem);
  line-height: 1.1;
  font-weight: 700;
  color: var(--ivory);
  margin-bottom: 1rem;
}

/* Shiny Text — Hero headline only (React Bits reference, reimplemented in
   plain CSS: no React/Motion/JS). A moving gradient is clipped to the text
   via background-clip: text; background-position is swept by a keyframe
   animation. Font/size/weight/line-height/spacing all inherit unchanged
   from .headline — only the paint (color) is affected.
   Cycle = speed (4s) + delay (1.5s) = 5.5s: the shine sweeps for the first
   4s (0%–72.7273% of the cycle, matching 4/5.5), then holds at its resting
   position for the remaining 1.5s before snapping back — same timing as
   the reference component's speed/delay behavior. */
.shiny-text {
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shiny-text-sweep 5.5s linear infinite;
}

.shiny-text--ivory {
  background-image: linear-gradient(
    125deg,
    #f5f2eb 0%,
    #f5f2eb 35%,
    #f6d98a 50%,
    #f5f2eb 65%,
    #f5f2eb 100%
  );
}

.shiny-text--gold {
  background-image: linear-gradient(
    125deg,
    #b88a3b 0%,
    #b88a3b 35%,
    #f6d98a 50%,
    #b88a3b 65%,
    #b88a3b 100%
  );
}

@keyframes shiny-text-sweep {
  0% {
    background-position: 150% center;
  }
  72.7273% {
    background-position: -50% center;
  }
  100% {
    background-position: -50% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shiny-text {
    animation: none;
    background-image: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
  }

  .shiny-text--ivory {
    color: #f5f2eb;
  }

  .shiny-text--gold {
    color: #b88a3b;
  }
}

.cta-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 0 !important;
}

/* ==================================================================
   SCENE 02 — GROWTH FRAMEWORK
   ================================================================== */

.framework-outer {
  padding: 3rem 1.5rem;
}

.scene-header--center {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto 2.25rem;
}

/* Single shared glass panel behind the whole Framework block (header +
   columns) — keeps it reading as one editorial composition, not five
   separate cards, while giving the text a real contrast surface against
   the robot. Solid dark fill, no blur — cheap on the GPU. */
.framework-outer .scene-container {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 45%),
    rgba(10, 10, 10, 0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(245, 242, 235, 0.12);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.framework-columns {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.framework-col {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(245, 242, 235, 0.08);
}

/* SINGLE-ASSET TEST — scoped only to .framework-col--build (the BUILD
   column), not the shared .framework-col rule above, so Attract/Convert/
   Retain/Scale are completely untouched. Hard 90×90px cap on both the
   wrapper and the image itself (no percentages, no 100%, no viewport
   units) plus overflow: hidden as a backstop — the rendered image can
   never exceed 90×90px regardless of assets/build.png's own dimensions,
   and this fixed-size block only adds its own small footprint to this one
   column, not the shared row/panel height calculation for the other four. */
.framework-col--build {
  position: relative;
}

.build-visual {
  width: 100px;
  height: 100px;
  max-width: 100px;
  max-height: 100px;
  overflow: hidden;
  margin: 0.25rem 0 0.5rem;
}

.build-visual img {
  display: block;
  width: 100px;
  height: 100px;
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
}

/* ATTRACT — same pattern as BUILD above, mirrored 1:1 for the second
   column. Same fixed-size overflow-safe slot, same dimensions, so ATTRACT
   matches BUILD's visual scale exactly. */
.framework-col--attract {
  position: relative;
}

.attract-visual {
  width: 100px;
  height: 100px;
  max-width: 100px;
  max-height: 100px;
  overflow: hidden;
  margin: 0.25rem 0 0.5rem;
}

.attract-visual img {
  display: block;
  width: 100px;
  height: 100px;
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
}

/* CONVERT — same pattern as BUILD/ATTRACT above, mirrored 1:1 for the
   third column. Same fixed-size overflow-safe slot, same dimensions. */
.framework-col--convert {
  position: relative;
}

.convert-visual {
  width: 100px;
  height: 100px;
  max-width: 100px;
  max-height: 100px;
  overflow: hidden;
  margin: 0.25rem 0 0.5rem;
}

.convert-visual img {
  display: block;
  width: 100px;
  height: 100px;
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
}

/* RETAIN — same pattern as BUILD/ATTRACT/CONVERT above, mirrored 1:1 for
   the fourth column. Same fixed-size overflow-safe slot, same dimensions. */
.framework-col--retain {
  position: relative;
}

.retain-visual {
  width: 100px;
  height: 100px;
  max-width: 100px;
  max-height: 100px;
  overflow: hidden;
  margin: 0.25rem 0 0.5rem;
}

.retain-visual img {
  display: block;
  width: 100px;
  height: 100px;
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
}

/* SCALE — same pattern as BUILD/ATTRACT/CONVERT/RETAIN above, mirrored 1:1
   for the fifth column. Same fixed-size overflow-safe slot, same
   dimensions. */
.framework-col--scale {
  position: relative;
}

.scale-visual {
  width: 100px;
  height: 100px;
  max-width: 100px;
  max-height: 100px;
  overflow: hidden;
  margin: 0.25rem 0 0.5rem;
}

.scale-visual img {
  display: block;
  width: 100px;
  height: 100px;
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
}

.col-name {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 0.5rem;
}

.col-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 0.6rem;
}

.col-services {
  font-size: 10.5px;
  letter-spacing: 0.02em;
  line-height: 1.7;
  color: rgba(245, 242, 235, 0.55);
}

/* "Growth Path" — thin progression line + 5 nodes echoing the five stage
   numbers above it. Static line always visible; a soft gold highlight
   sweeps along it slowly (::after, `left` animation — one small element,
   negligible cost) and each node gets a brief synced glow as the light
   passes. Purely decorative, no data, no copy changes. */
.growth-path {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 7px;
  margin: 0 0 1.75rem;
}

.growth-path::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: rgba(197, 160, 90, 0.25);
}

.growth-path::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 16%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(197, 160, 90, 0.85), transparent);
  animation: growth-path-travel 9s ease-in-out infinite;
}

.growth-node {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(197, 160, 90, 0.45);
  animation: growth-node-glow 9s ease-in-out infinite;
}

.growth-node:nth-child(1) {
  animation-delay: 0s;
}
.growth-node:nth-child(2) {
  animation-delay: 1.8s;
}
.growth-node:nth-child(3) {
  animation-delay: 3.6s;
}
.growth-node:nth-child(4) {
  animation-delay: 5.4s;
}
.growth-node:nth-child(5) {
  animation-delay: 7.2s;
}

@keyframes growth-path-travel {
  0% {
    left: 0%;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  50% {
    left: 84%;
    opacity: 1;
  }
  58% {
    opacity: 0;
  }
  100% {
    left: 84%;
    opacity: 0;
  }
}

@keyframes growth-node-glow {
  0%,
  92%,
  100% {
    background: rgba(197, 160, 90, 0.45);
    box-shadow: none;
  }
  4% {
    background: rgba(246, 217, 138, 0.95);
    box-shadow: 0 0 6px rgba(197, 160, 90, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .growth-path::after,
  .growth-node {
    animation: none;
  }
}

/* ==================================================================
   SCENE 03 — WHY MOXIES
   ================================================================== */

.why-outer {
  padding: 3rem 1.5rem;
}

/* Same shared-panel treatment as Framework: one glass surface grounds the
   copy + benefits together instead of sitting directly on the robot. */
.why-container {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 45%),
    rgba(10, 10, 10, 0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(245, 242, 235, 0.12);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.why-copy {
  max-width: 26rem;
}

.why-copy > * {
  margin-bottom: 1rem;
}

.why-benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.benefit h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ivory);
  margin: 0.3rem 0 0.4rem;
}

.benefit p {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Fragmented tools → MOXIES → outcomes. A single restrained row of
   existing-style glass chips with the site's own arrow glyph as the
   connector — no SVG, no new nodes, reuses the current visual language. */
.system-diagram {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245, 242, 235, 0.08);
}

.system-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  max-width: 14rem;
}

.system-chip {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ivory);
  background-color: rgba(10, 10, 10, 0.5);
  border: 1px solid rgba(245, 242, 235, 0.1);
  border-radius: 6px;
  padding: 0.3rem 0.55rem;
  white-space: nowrap;
}

.system-chip--outcome {
  color: var(--text-secondary);
  border-color: rgba(197, 160, 90, 0.25);
}

.system-core {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-muted);
  background-color: rgba(10, 10, 10, 0.6);
  border: 1px solid var(--gold-muted);
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  white-space: nowrap;
}

.system-connector {
  color: var(--gold-muted);
  opacity: 0.5;
  font-size: 12px;
}

/* ==================================================================
   SCENE 04 — INDUSTRIES
   ================================================================== */

.industries-outer {
  padding: 3rem 1.5rem;
}

.industries-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.industry-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 40%),
    rgba(24, 24, 24, 0.76);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(245, 242, 235, 0.16);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 200ms, background-color 200ms;
}

.industry-card:hover {
  border-color: rgba(197, 160, 90, 0.5);
  background-color: rgba(32, 32, 32, 0.85);
}

.industry-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ivory);
  margin-bottom: 0.6rem;
}

.card-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 0.85rem;
}

.card-tags {
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: rgba(245, 242, 235, 0.5);
  margin-bottom: 1.1rem;
  line-height: 1.6;
}

/* ==================================================================
   SCENE 05 — DIGITAL INFRASTRUCTURE
   ================================================================== */

.infra-outer {
  padding: 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.infra-copy {
  max-width: 26rem;
}

.infra-copy > * {
  margin-bottom: 1rem;
}

.infra-index {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  border-left: 1.5px solid var(--gold-muted);
  padding-left: 1.25rem;
}

/* "System Flow Map" — an abstract architectural rail beside the existing
   gold spine (not a literal per-module process diagram; kept schematic on
   purpose so it never needs to know each row's exact rendered position).
   Absolutely positioned and out of flex flow, so it cannot affect the
   existing rows' spacing. Desktop-only decorative touch — hidden on mobile
   to keep the stacked layout simple, per scope. */
.infra-flow {
  display: none;
}

/* Each module is its own restrained glass panel — subtle, hoverable, still
   reading as one connected system via the shared gold spine on the left. */
.infra-row {
  display: flex;
  gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 50%),
    rgba(13, 13, 13, 0.58);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(245, 242, 235, 0.1);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: background-color 220ms ease, border-color 220ms ease,
    box-shadow 220ms ease, transform 220ms ease;
}

.infra-row:hover {
  background-color: rgba(22, 22, 22, 0.78);
  border-color: rgba(197, 160, 90, 0.45);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(197, 160, 90, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateX(3px);
}

.infra-row h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ivory);
  margin-bottom: 0.3rem;
}

.infra-row p {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ==================================================================
   DESKTOP CINEMATIC PRESENTATION (≥900px)
   Keep this breakpoint in sync with MOBILE_BREAKPOINT in script.js.
   ================================================================== */

@media (min-width: 900px) {
  /* .moxies-story's exact height is set by script.js to match its
     HOLD_VH/TRANS_VH timeline precisely; this is only the pre-JS fallback. */
  .moxies-story {
    height: 545vh;
  }

  .moxies-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }

  .navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    gap: 1.25rem;
    padding: 1.5rem 2rem 0;
  }

  .logo-img {
    height: 76px;
  }

  .hero-visual {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
  }

  .scene {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
  }

  /* Only the currently-active (fully visible) scene accepts pointer input;
     empty space always passes clicks through to the robot underneath. */
  .scene-inner {
    pointer-events: none;
  }

  .scene.is-active .scene-inner {
    pointer-events: auto;
  }

  /* ---------- Scene 01 — Hero ---------- */

  .hero-outer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 4rem 4rem 5rem;
  }

  /* ---------- Scene 02 — Framework ---------- */

  .framework-outer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3rem;
  }

  .framework-columns {
    flex-direction: row;
    gap: 0;
  }

  .framework-col {
    flex: 1;
    padding: 0 1.5rem;
    border-top: none;
    border-left: 1px solid rgba(245, 242, 235, 0.08);
  }

  .framework-col:first-child {
    border-left: none;
    padding-left: 0;
  }

  .build-visual {
    width: 135px;
    height: 135px;
    max-width: 135px;
    max-height: 135px;
  }

  .build-visual img {
    width: 135px;
    height: 135px;
    max-width: 135px;
    max-height: 135px;
  }

  .attract-visual {
    width: 135px;
    height: 135px;
    max-width: 135px;
    max-height: 135px;
  }

  .attract-visual img {
    width: 135px;
    height: 135px;
    max-width: 135px;
    max-height: 135px;
  }

  .convert-visual {
    width: 135px;
    height: 135px;
    max-width: 135px;
    max-height: 135px;
  }

  .convert-visual img {
    width: 135px;
    height: 135px;
    max-width: 135px;
    max-height: 135px;
  }

  .retain-visual {
    width: 135px;
    height: 135px;
    max-width: 135px;
    max-height: 135px;
  }

  .retain-visual img {
    width: 135px;
    height: 135px;
    max-width: 135px;
    max-height: 135px;
  }

  .scale-visual {
    width: 135px;
    height: 135px;
    max-width: 135px;
    max-height: 135px;
  }

  .scale-visual img {
    width: 135px;
    height: 135px;
    max-width: 135px;
    max-height: 135px;
  }

  .framework-col:last-child {
    padding-right: 0;
  }

  /* ---------- Scene 03 — Why MOXIES ---------- */

  .why-outer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4rem;
  }

  /* Grid (not flex-row) so the new system-diagram strip can span both
     columns on its own row without any risk of the existing copy/benefits
     columns wrapping unexpectedly at narrower desktop widths. */
  .why-container {
    display: grid;
    grid-template-columns: minmax(0, 26rem) 1fr;
    align-items: center;
    gap: 2.5rem 4.5rem;
  }

  .why-copy {
    grid-column: 1;
    grid-row: 1;
  }

  .why-benefits {
    grid-column: 2;
    grid-row: 1;
  }

  .system-diagram {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .why-benefits {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2.5rem;
  }

  /* ---------- Scene 04 — Industries ---------- */

  .industries-outer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3rem;
  }

  .industries-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }

  /* ---------- Scene 05 — Digital Infrastructure ---------- */

  .infra-outer {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0 4rem;
  }

  .infra-copy {
    position: absolute;
    top: 4.5rem;
    left: 4rem;
  }

  .infra-index {
    position: absolute;
    top: 50%;
    right: 4rem;
    transform: translateY(-50%);
    width: min(24rem, 34vw);
  }

  .infra-flow {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -26px;
    width: 14px;
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 250ms ease;
  }

  .infra-index:has(.infra-row:hover) .infra-flow {
    opacity: 1;
  }

  .infra-flow-tick {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(197, 160, 90, 0.35);
  }

  .infra-flow-tick::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(197, 160, 90, 0.55);
    transform: translate(-50%, -50%);
  }

  .infra-flow-tick:nth-child(1) {
    top: 18%;
  }
  .infra-flow-tick:nth-child(2) {
    top: 50%;
  }
  .infra-flow-tick:nth-child(3) {
    top: 82%;
  }
}

@media (min-width: 1400px) {
  .hero-outer {
    padding: 5rem 7rem 6rem;
  }
}

/* ==================================================================
   FOOTER — outside .moxies-story/.moxies-stage entirely, normal document
   flow after the cinematic sequence. All classes prefixed .site-footer*
   so nothing here can collide with or affect any existing selector.
   Reuses the existing color/font tokens (--bg-secondary, --ivory,
   --text-secondary, --gold-muted, --gold-dark, --font-sans) rather than
   introducing new ones. No animation, no JS.
   ================================================================== */

.site-footer {
  background-color: var(--bg-secondary);
  border-top: 1px solid rgba(197, 160, 90, 0.16);
  padding: 2rem 1.5rem 1rem;
}

.site-footer-top {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: min(1320px, 100%);
  margin: 0 auto;
  padding-bottom: 1.5rem;
}

.site-footer-brand {
  max-width: 22rem;
}

/* 90px = 72px + 25%, per this pass. Height only; width: auto preserves
   the file's native aspect ratio exactly (no crop, no stretch). Reduced
   margin-bottom (was 0.85rem) pulls the tagline closer so logo+text read
   as one brand block. */
.site-footer-logo {
  display: block;
  height: 90px;
  width: auto;
  margin-bottom: 0.5rem;
}

.site-footer-tagline {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.site-footer-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.85rem;
}

.site-footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.site-footer-links a {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ivory);
  opacity: 0.8;
  transition: opacity 200ms, color 200ms;
}

.site-footer-links a:hover {
  opacity: 1;
  color: var(--gold-muted);
}

.site-footer-cta-col {
  display: flex;
  align-items: flex-start;
}

/* Compact gold-outline button, same visual family as .cta-primary
   elsewhere on the site but scaled down and refined for the footer:
   a thinner, more muted border and tighter vertical padding read as more
   restrained/elegant than the heavier --gold-dark outline used before. */
.site-footer-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ivory);
  background-color: rgba(245, 242, 235, 0.03);
  border: 1px solid rgba(197, 160, 90, 0.45);
  border-radius: 8px;
  padding: 0.45rem 1.1rem;
  white-space: nowrap;
  transition: background-color 200ms, border-color 200ms, color 200ms;
}

.site-footer-cta:hover {
  background-color: rgba(197, 160, 90, 0.1);
  border-color: var(--gold-muted);
  color: var(--gold-muted);
}

.site-footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(1320px, 100%);
  margin: 0 auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(245, 242, 235, 0.08);
}

.site-footer-copyright {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--text-secondary);
}

.site-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.site-footer-legal a {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--text-secondary);
  transition: color 200ms;
}

.site-footer-legal a:hover {
  color: var(--gold-muted);
}

/* Minimal "current page" indication for the legal-page footer (e.g. the
   Terms & Conditions link on terms-and-conditions.html) — only applies
   where a link carries aria-current="page"; inert everywhere else,
   including the homepage, which never sets this attribute. */
.site-footer-legal a[aria-current="page"] {
  color: var(--gold-muted);
}

@media (min-width: 700px) {
  .site-footer {
    padding: 2.5rem 2rem 1.25rem;
  }

  /* Brand column wider than the two link columns; CTA sized to its own
     content at the end of the row — a clean 4-part composition instead
     of one wide nav block with a lot of empty space around it. Column
     proportions/gap unchanged from the approved layout — only the
     padding-bottom below (vertical spacing) was tightened. */
  .site-footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: start;
    gap: 2.5rem;
    padding-bottom: 1.25rem;
  }

  .site-footer-cta-col {
    padding-top: 1.9rem;
  }

  .site-footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ==================================================================
   TERMS & PRIVACY CONSENT MODAL — homepage only, entirely isolated from
   the cinematic story/scroll system. All classes prefixed .consent-* so
   nothing here can collide with any existing selector. Reuses the site's
   existing color/font tokens. Driven by assets/consent.js (a separate
   script with no relation to script.js's scroll engine).
   ================================================================== */

.consent-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background-color: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 220ms ease-out;
}

.consent-overlay[hidden] {
  display: none;
}

.consent-overlay.is-visible {
  opacity: 1;
}

.consent-modal {
  width: min(90%, 560px);
  background-color: var(--bg-secondary);
  border: 1px solid rgba(197, 160, 90, 0.25);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(8px);
  opacity: 0;
  transition: transform 250ms ease-out, opacity 250ms ease-out;
}

.consent-overlay.is-visible .consent-modal {
  transform: translateY(0);
  opacity: 1;
}

.consent-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ivory);
  margin-bottom: 0.85rem;
}

.consent-body {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.consent-body a {
  color: var(--gold-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 200ms;
}

.consent-body a:hover {
  color: var(--ivory);
}

.consent-btn {
  display: inline-block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: #050505;
  background-color: var(--gold-muted);
  border: 1px solid var(--gold-muted);
  border-radius: 8px;
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  transition: background-color 200ms, border-color 200ms;
}

.consent-btn:hover {
  background-color: var(--gold-rich);
  border-color: var(--gold-rich);
}

.consent-btn:focus-visible {
  outline: 2px solid var(--gold-muted);
  outline-offset: 2px;
}

@media (min-width: 480px) {
  .consent-btn {
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consent-overlay,
  .consent-modal {
    transition: none;
  }
}