/* Introduction and scroll-controlled character. */
.hero-scroll-track { display: contents; }
.hero .hero-intro { position: relative; z-index: 3; padding-top: 112px; max-width: 850px; }
.hero .hero-intro h1 { display: block; font-size: clamp(2.8rem, 7vw, 6rem); opacity: 1; transform: none; margin-top: 20px; }
.hero .hero-intro .role { margin-top: 24px; max-width: 650px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.contact-help { font-size: 14px; color: var(--text-soft); line-height: 1.6; margin-top: 16px; }
.skip-link { position: fixed; top: 8px; left: 16px; z-index: 10000; padding: 12px 18px; background: var(--bg); color: var(--text); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
@media (max-width: 640px) { .hero .hero-intro { padding-top: 24px; } }
.hero {
  min-height: 100svh;
  display: block;
  padding-top: 22px;
  padding-bottom: 48px;
  overflow: visible;
}
.hero .eyebrow-row { margin-bottom: 12px; }
@media (min-width: 900px) {
  .hero-scroll-track { display: block; position: relative; }
  .hero-scroll-track::after { content: ''; display: block; height: 80svh; }
  .hero {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: start;
    padding-top: 112px;
  }
  .hero .hero-intro {
    position: relative;
    top: auto;
    padding-top: 0;
    margin-top: 64px;
    min-width: 0;
  }
  .hero .hero-intro h1 { font-size: clamp(3rem, 5.3vw, 5rem); }
  .hero .hero-intro .role { font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
  .hero .hero-3d-stage {
    position: relative;
    top: 0;
    height: min(680px, calc(100svh - 128px));
  }
  .hero .character-scroll-scene { height: auto; }
  .hero .hero-3d-character, .hero .hero-3d-poster {
    width: 88%;
    --character-bottom: clamp(80px, 24svh, 216px);
  }
}
.character-scroll-scene { position: relative; height: 150svh; }
.hero-3d-stage {
  position: sticky;
  top: 104px;
  width: 100%;
  height: calc(100svh - 104px);
  margin: 0 auto;
  isolation: isolate;
}
.hero-3d-character, .hero-3d-poster {
  position: absolute;
  top: 55%;
  left: 50%;
  width: min(80%, calc((100svh - 150px) * 1.22));
  aspect-ratio: 500 / 407;
  height: auto;
  max-height: 94%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  z-index: 1;
  animation: none;
}
.hero-3d-poster[hidden] { display: none; }
.hero-3d-orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.hero-3d-orbit canvas { display: block; }
.hero h1 {
  position: relative;
  z-index: 3;
  white-space: normal;
  margin-top: 24px;
}
.hero .role { margin-top: 28px; }
@media (min-width: 900px) {
  .hero h1 { display: block; }
}
@media (max-width: 640px) {
  .hero-3d-stage { top: 124px; height: calc(100svh - 124px); }
  .hero-3d-character, .hero-3d-poster {
    width: 94%;
    top: 52%;
  }
  .character-scroll-scene { height: 120svh; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-track { display: contents; }
  .hero-scroll-track::after { display: none; }
  .hero { position: relative; top: auto; }
  .character-scroll-scene { height: auto; }
  .hero .hero-intro { position: relative; top: auto; }
  .hero-3d-stage { position: relative; top: 0; }
  .hero-3d-stage * { animation: none !important; transition: none !important; }
}

/* Keep the scroll track from collapsing inside an existing flex layout. */
.character-scroll-scene { width: 100%; flex: none; overflow: visible; }
.hero-3d-stage { position: -webkit-sticky; position: sticky; }
@media (prefers-reduced-motion: reduce) {
  .hero-3d-stage { position: relative; }
}

/* Keep the character fixed in place: no CSS bobbing, tilting or hover motion. */
.hero-3d-character,
.hero-3d-poster,
.hero-3d-character:hover,
.hero-3d-poster:hover {
  animation: none !important;
  transition: none !important;
  transform: translate(-50%, -50%) !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
}

/* Anchor the portrait to the bottom edge of the pinned hero viewport. */
.hero-3d-character,
.hero-3d-poster,
.hero-3d-character:hover,
.hero-3d-poster:hover {
  top: auto !important;
  bottom: var(--character-bottom, 0px) !important;
  left: 50%;
  transform: translateX(-50%) !important;
}

/* Tall phones need a height-led portrait, not a narrow width-led thumbnail. */
@media (max-width: 640px) {
  .hero-3d-stage {
    overflow: clip;
  }
  .hero-3d-character,
  .hero-3d-poster {
    width: auto !important;
    height: 82% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 500 / 407;
    bottom: 0 !important;
    object-fit: contain;
  }
  /* Keep the top icons close to the head on tall screens. */
  .hero-3d-orbit {
    top: auto;
    bottom: 0;
    height: 94%;
  }
}