/* Home only. Load after media, refinements and motion styles when approved. */
.page-index {
  --home-admin-offset: 0px;
  --home-header-height: 95px;
}
.page-index.admin-bar { --home-admin-offset: 32px; }

.page-index .site-header {
  position: fixed;
  inset: var(--home-admin-offset) 0 auto;
  width: 100%;
  background: linear-gradient(180deg, #0b1414c9, #0b141459 74%, #0b141400);
  border-bottom-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
.page-index .site-header.motion-header-scrolled,
.page-index .site-header.motion-menu-is-open {
  background: #101710fc;
  border-bottom-color: #cfb18b45;
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 28px #00000030;
}
.page-index .header-inner { min-height: var(--home-header-height); }
.page-index .site-header .navigation > a { text-shadow: 0 1px 8px #000000a6; }

.page-index .industrial-hero,
.page-index .industrial-hero.hero-has-video {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(100vh - var(--home-admin-offset));
  height: calc(100svh - var(--home-admin-offset));
  /* Intrinsic minimum keeps every CTA/control in flow on short screens or zoom. */
  min-height: 580px;
  min-height: max-content;
  padding-block: calc(var(--home-header-height) + 32px) 20px;
}
.page-index .hero-shade {
  background: linear-gradient(180deg, #08100830, #08100818 60%, #081008a6), radial-gradient(ellipse at 50% 48%, #0b1414a6, #0b141426 76%);
}
.page-index .hero-responsive-poster { position: absolute; inset: 0; z-index: -3; }
.page-index .hero-responsive-poster img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.page-index .industrial-hero > .hero-video-cropped { object-position: center; }
.page-index .hero-content,
.page-index .hero-has-video .hero-content {
  order: 1;
  flex: 0 0 auto;
  width: min(900px, calc(100% - 100px));
  padding-block: 0;
  margin-block: auto;
  text-align: center;
}
.page-index .hero-content > .eyebrow {
  max-width: 700px;
  margin-inline: auto;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .13em;
}
.page-index .hero-content h1 {
  margin-block: 20px 22px;
  font-size: clamp(80px, 6.4vw, 92px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.04em;
}
.page-index .hero-subtitle {
  max-width: 650px;
  margin-inline: auto;
  font-size: clamp(23px, 2.15vw, 30px);
  line-height: 1.5;
}
.page-index .hero-actions {
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px;
  max-width: none;
  margin: 30px auto 0;
}
.page-index .hero-actions .button { min-height: 46px; }

.page-index .hero-media-controls {
  position: static;
  inset: auto;
  order: 2;
  flex: 0 0 auto;
  align-items: center;
  max-width: min(420px, calc(100% - 40px));
  margin: 24px auto 12px;
}
.page-index .hero-video-unavailable .hero-video-status { text-align: center; }
.page-index .hero-foot {
  position: static;
  inset: auto;
  order: 3;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  gap: 28px;
  min-height: 44px;
  margin: 0 auto;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .1em;
}
.page-index .hero-foot > a { margin-left: 0; }
.page-index .hero-foot > span:first-child { max-width: none; }

@media (max-width: 950px) {
  .page-index { --home-header-height: 82px; }
  .page-index .site-header .navigation {
    top: 100%;
    max-height: calc(100vh - var(--home-header-height) - var(--home-admin-offset));
    max-height: calc(100svh - var(--home-header-height) - var(--home-admin-offset));
  }
  .page-index .hero-content,
  .page-index .hero-has-video .hero-content { width: calc(100% - 64px); }
}
@media (max-width: 782px) {
  .page-index.admin-bar { --home-admin-offset: 46px; }
}
@media (max-width: 650px) {
  .page-index { --home-header-height: 78px; }
  .page-index .industrial-hero,
  .page-index .industrial-hero.hero-has-video { padding-block: calc(var(--home-header-height) + 24px) 16px; }
  .page-index .hero-content,
  .page-index .hero-has-video .hero-content {
    width: calc(100% - 40px);
    padding-block: 0;
  }
  .page-index .hero-content > .eyebrow {
    max-width: 290px;
    font-size: 10px;
    line-height: 1.7;
    letter-spacing: .1em;
  }
  .page-index .hero-content h1 {
    margin-block: 16px 18px;
    font-size: clamp(58px, 16vw, 68px);
    line-height: 1.08;
    letter-spacing: -.035em;
  }
  .page-index .hero-subtitle { max-width: 350px; font-size: 22px; line-height: 1.45; }
  .page-index .hero-actions { margin-top: 24px; gap: 12px; }
  .page-index .hero-actions .button { min-height: 44px; font-size: 12px; }
  .page-index .hero-media-controls { margin-block: 22px 8px; }
  .page-index .hero-foot { gap: 12px; font-size: 8px; letter-spacing: .07em; }
  .page-index .hero-foot > a { flex-shrink: 0; }
}
@media (max-width: 380px) {
  .page-index .hero-content > .eyebrow { max-width: 260px; }
  .page-index .hero-subtitle { font-size: 20px; }
  .page-index .hero-actions { flex-direction: column; align-items: stretch; max-width: 270px; gap: 10px; margin-top: 20px; }
  .page-index .hero-actions .button { width: 100%; }
  .page-index .hero-foot { gap: 8px; font-size: 8px; }
}
@media (max-height: 650px) {
  .page-index .industrial-hero,
  .page-index .industrial-hero.hero-has-video { padding-top: calc(var(--home-header-height) + 18px); }
  .page-index .hero-media-controls { margin-top: 18px; }
}
@media (forced-colors: active) {
  .page-index .site-header,
  .page-index .site-header.motion-header-scrolled,
  .page-index .site-header.motion-menu-is-open { background: Canvas; border-bottom-color: CanvasText; }
}