.hero-motion {
  margin-top: 14px;
  padding: 6px 10px;
  background: transparent;
  color: var(--gold);
  border: 1px solid #b69d554f;
  border-radius: 5px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
}
.cube-showcase {
  --cube-size: clamp(170px, 18vw, 278px);
  min-width: 0;
  align-self: center;
  padding: 12px;
}
.cube-stage {
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  min-height: calc(var(--cube-size) * 1.55);
  perspective: 950px;
}
.service-cube {
  width: var(--cube-size);
  height: var(--cube-size);
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--cube-pitch, -13deg)) rotateY(calc(-17deg - var(--cube-turn, 0) * 90deg + var(--cube-yaw-offset, 0deg)));
  transition: transform 1.05s cubic-bezier(.22,.75,.18,1);
}
.service-cube-face {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 10%;
  border: 1px solid #fff0a599;
  color: #fff1b2;
  background: radial-gradient(ellipse at 10% 4%, #6f5023, #251d0d 68%, #18140a);
  box-shadow: inset 0 0 42px #e9b63425;
  backface-visibility: hidden;
  transform: rotateY(calc(var(--side, 0) * 90deg)) translateZ(calc(var(--cube-size) / 2));
}
.face-1 { background: radial-gradient(ellipse at 10% 4%, #665527, #28220f 70%); }
.face-2 { background: radial-gradient(ellipse at 10% 4%, #6b431f, #291b10 70%); }
.face-3 { background: radial-gradient(ellipse at 10% 4%, #555029, #1c2113 70%); }
.face-number { font: 600 clamp(7px, .9vw, 10px)/1.4 monospace; letter-spacing: .13em; }
.face-symbol { font-size: clamp(23px, 3vw, 48px); margin-top: 7%; line-height: 1; color: var(--gold); }
.service-cube-face strong {
  margin: 5% 0 3%;
  font-size: clamp(21px, 3vw, 42px);
  line-height: .96;
  letter-spacing: -.055em;
}
.service-cube-face small { font-size: clamp(9px, 1vw, 13px); }
.cube-top, .cube-bottom { align-items: center; background: #66501e; color: #f0d87b; }
.cube-stage.is-tracking .service-cube { transition-duration: 160ms; }
.cube-top img, .cube-bottom img {
  width: 92%;
  height: auto;
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
}
.cube-top { transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); }
.cube-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }
.cube-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  position: relative;
}
.cube-controls button, .metric-options button {
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  border: 1px solid #b49c5544;
  background: #15140f;
  padding: 9px 11px;
  border-radius: 5px;
  text-align: left;
}
.cube-controls button { font-size: clamp(10px, 1.1vw, 13px); }
.cube-controls button[aria-pressed="true"], .metric-options button[aria-pressed="true"] {
  color: #15120a;
  border-color: var(--gold);
  background: var(--gold);
}
.impact-grid.metrics-active { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; }
.metric-options { display: grid; gap: 7px; }
.metrics-active p { margin: 0; text-align: center; }
.metrics-active p strong { font-size: clamp(52px, 11vw, 148px); line-height: 1; letter-spacing: -.085em; }
.metrics-active p span { margin: 10px auto 0; max-width: 23ch; }
.metrics-active [hidden] { display: none; }
@keyframes type-letter { from { opacity: 0; } to { opacity: 1; } }
@keyframes card-arrival {
  from { opacity: .38; translate: 0 22px; }
  to { opacity: 1; translate: none; }
}
@media (prefers-reduced-motion: no-preference) {
  body:not(.paused) .motion-card { animation: card-arrival .58s ease-out var(--arrival-delay, 0ms) backwards; }
  body:not(.paused) .is-typewriting typing-letter {
    animation: type-letter 1ms step-end backwards;
    animation-delay: calc(var(--typing-start, 0ms) + var(--letter-delay));
  }
}
body.paused .service-cube { transition: none; }
@media (prefers-reduced-motion: reduce) { .service-cube { transition: none; } }
@media (max-width: 700px) {
  .cube-showcase { --cube-size: clamp(112px, 29vw, 171px); grid-row: 1; }
  .hero:has(.cube-showcase) { padding-top: 22px; }
  .cube-stage { min-height: calc(var(--cube-size) * 1.44); }
  .service-cube-face strong { font-size: clamp(17px, 4vw, 26px); }
  .face-symbol { font-size: clamp(17px, 4vw, 25px); }
  .impact-grid.metrics-active { gap: 12px; }
  .metric-options button { padding: 7px; font-size: 12px; }
}


@media (prefers-reduced-motion: no-preference) {
  body:not(.paused) .tumble-heading.is-typewriting { overflow: clip; }

  .tumble-heading tumble-word { display: inline-block; white-space: nowrap; }

  body:not(.paused) .tumble-heading.is-typewriting typing-letter {
    --tumble-tilt: -26deg;
    display: inline-block;
    transform-origin: 50% 80%;
    animation: headline-letter-drop 820ms cubic-bezier(.25,.65,.35,1) backwards;
    animation-delay: calc(var(--typing-start, 0ms) + var(--letter-delay) * 1.85);
  }

  body:not(.paused) .tumble-heading.is-typewriting typing-letter:nth-child(even) {
    --tumble-tilt: 34deg;
  }
}

@keyframes headline-letter-drop {
  0% { opacity: 0; transform: translateY(-1.45em) rotate(var(--tumble-tilt)); }
  19% { opacity: 1; }
  58% { transform: translateY(.06em) rotate(calc(var(--tumble-tilt) * -.32)); }
  78% { transform: translateY(-.09em) rotate(calc(var(--tumble-tilt) * .17)); }
  100% { transform: none; }
}