/* Shared presentation mechanics, independent TORQUE art direction. */
@import url("../vanta/case.css");
:root {
  --paper: #10171c;
  --ink: #edf3f6;
  --muted: #b0bdc7;
  --line: #36434c;
  --accent: #88daf4;
  --surface: #1b2730;
  --surface-soft: #17232b;
  --accent-hover: #a9e6f8;
}
.hero-mockup:hover img,
.detail-shot:hover img {
  box-shadow: 0 12px 24px #080d1233;
}
.contact {
  color: #10171c;
}
.contact-action {
  color: #10171c;
}
.intro h1 {
  font-size: clamp(42px, 6vw, 88px);
  font-weight: 650;
  letter-spacing: -0.055em;
}
.category {
  color: var(--accent);
}
.intro h1 em {
  font-style: normal;
  color: var(--accent);
}
.project-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 45px;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: 13px;
}
header a:focus-visible,
.contact:focus-visible {
  outline-color: var(--accent);
}
.hero-frame {
  position: relative;
}
.hero-frame .case-car-stage {
  position: absolute;
  right: 0;
  top: 13.4%;
  width: 56%;
  height: 75.6%;
}
.case-car-stage[data-state="ready"] {
  background: radial-gradient(ellipse at 55% 50%, #263139, #0c1114 70%);
}
.hero-frame .viewer-ui {
  bottom: 0;
}
@media (max-width: 768px) {
  .hero-frame .case-car-stage {
    position: relative;
    width: 100%;
    height: 310px;
    margin-top: 18px;
    background: #0c1114;
  }
}