/* Restore the requested body/circuit film as atmosphere, not product photography. */
:root {
  --hero-navy: #070e1a;
  --hero-white: #f0f5ff;
  --hero-copy: #d3ddec;
  --hero-blue: #78adff;
  --hero-veil: rgba(7,14,26,.88);
  --hero-clear: rgba(7,14,26,0);
  --hero-soft: rgba(7,14,26,.2);
  --hero-control: rgba(7,14,26,.72);
}
#hero.body-hero {
  position: relative; display: flex; align-items: center; isolation: isolate;
  min-height: 760px; height: auto; padding: 144px max(32px, calc((100vw - 1280px) / 2)) 96px;
  overflow: hidden; background: var(--hero-navy); color: var(--hero-white);
}
#hero.body-hero .hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0;
  display: block; background: var(--hero-navy); z-index: -2;
}
#hero.body-hero .hero-bg img, #hero.body-hero .hero-bg video {
  position: absolute; inset: 0 0 0 auto; width: 64%; height: 100%; padding: 0;
  aspect-ratio: auto; object-fit: contain; object-position: center; mix-blend-mode: normal;
}
#hero.body-hero .hero-bg video { opacity: 0; }
#hero.body-hero.has-hero-video .hero-bg video { opacity: 1; }
#hero.body-hero .hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--hero-navy) 10%, var(--hero-veil) 35%, var(--hero-soft) 65%, var(--hero-clear));
}
#hero.body-hero .hero-content { position: relative; display: block; max-width: 600px; }
#hero.body-hero .hero-h1 { color: var(--hero-white); }
#hero.body-hero .hero-h1 em, #hero.body-hero .hero-eyebrow { color: var(--hero-blue); }
#hero.body-hero .hero-sub { color: var(--hero-copy); }
#hero.body-hero .hero-h1 { margin-bottom: 24px; }
#hero.body-hero .hero-eyebrow { margin-bottom: 24px; }
#hero.body-hero .hero-sub { margin-bottom: 32px; }
#hero.body-hero .stat-text { color: var(--hero-copy) !important; }
#hero.body-hero .btn-outline { color: var(--hero-white); border-color: var(--hero-copy); }
#hero.body-hero .btn-outline:hover { background: var(--hero-control); border-color: var(--hero-white); }
.hero-motion-toggle {
  position: absolute; right: 24px; bottom: 24px; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--hero-copy);
  border-radius: var(--studio-radius); background: var(--hero-control); color: var(--hero-white); cursor: pointer;
}
.hero-motion-toggle[hidden] { display: none; }
.hero-motion-toggle:hover { background: var(--hero-navy); }
.hero-motion-toggle:active { transform: scale(.98); }
.hero-motion-toggle:focus-visible { outline: 2px solid var(--hero-blue); outline-offset: 4px; }
.hero-motion-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.hero-motion-toggle .play-icon, .hero-motion-toggle[data-paused='true'] .pause-icon { display: none; }
.hero-motion-toggle[data-paused='true'] .play-icon { display: block; }
/* Desktop: one aligned composition; soften the media frame, not the hardware. */
@media (min-width: 1024px) {
  :root {
    --hero-gutter: max(48px, calc((100vw - 1280px) / 2));
    --hero-rule: rgba(211,221,236,.18);
  }
  body:has(#hero.body-hero) nav { padding-inline: var(--hero-gutter); }
  #hero.body-hero {
    min-height: 800px; padding: 128px var(--hero-gutter) 80px;
  }
  #hero.body-hero .hero-content { width: 47%; max-width: 560px; }
  #hero.body-hero .hero-h1 { font-size: clamp(64px, 5.6vw, 80px); line-height: 1.08; }
  #hero.body-hero .hero-h1 br { display: none; }
  #hero.body-hero .hero-h1 em { display: block; text-wrap: balance; }
  #hero.body-hero .hero-eyebrow { font-size: 11px; letter-spacing: .16em; }
  #hero.body-hero .hero-sub { max-width: 544px; font-size: 17px; line-height: 1.65; }
  #hero.body-hero .hero-bg {
    inset: 88px max(32px, calc((100vw - 1376px) / 2)) 0 auto;
    width: min(54vw, 720px); height: calc(100% - 88px);
  }
  #hero.body-hero .hero-bg img, #hero.body-hero .hero-bg video {
    inset: 0 0 0 auto; width: auto; max-width: none; height: 100%; aspect-ratio: 1258 / 1494; object-fit: contain;
    mask-image: linear-gradient(90deg, var(--hero-clear) 12%, var(--hero-white) 26%, var(--hero-white) 84%, var(--hero-clear) 89%), linear-gradient(var(--hero-clear), var(--hero-white) 12%, var(--hero-white) 92%, var(--hero-clear));
    mask-composite: intersect;
  }
  #hero.body-hero.has-hero-video .hero-bg img { opacity: 0; }
  #hero.body-hero .hero-bg::after { content: none; }
  #hero.body-hero .hero-stat {
    display: flex; flex-direction: column; gap: 8px; max-width: 100%;
    margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--hero-rule);
  }
  #hero.body-hero .stat-pill { max-width: 100%; }
  #hero.body-hero .stat-text { font-family: var(--sans); font-size: 12px; line-height: 1.6; letter-spacing: .02em; }
  #hero.body-hero .hero-ctas { gap: 16px; }
  #hero.body-hero .hero-ctas a { min-height: 48px; display: inline-flex; align-items: center; border-radius: var(--studio-radius); }
  #hero.body-hero .hero-ctas a:focus-visible { outline: 2px solid var(--hero-blue); outline-offset: 4px; }
  #hero.body-hero .hero-ctas a:active { transform: scale(.98); }
  #hero.body-hero .hero-motion-toggle { right: var(--hero-gutter); bottom: 32px; border-color: var(--hero-rule); }
}
@media (max-width: 768px) {
  #hero.body-hero { min-height: 984px; min-height: max(984px, 100svh); align-items: flex-end; padding: 424px 24px 80px; }
  #hero.body-hero .hero-bg img, #hero.body-hero .hero-bg video { width: 100%; height: auto; aspect-ratio: 1258 / 1494; object-position: center top; transform: translateY(64px); mask-image: linear-gradient(to bottom, var(--hero-white) 72%, var(--hero-clear) 100%); }
  #hero.body-hero .hero-bg::after { background: linear-gradient(0deg, var(--hero-navy), var(--hero-veil) 38%, var(--hero-soft) 80%, var(--hero-clear)); }
  #hero.body-hero .hero-content { width: 100%; }
  #hero.body-hero .hero-h1 { font-size: clamp(48px, 13vw, 72px); margin-bottom: 24px; }
  #hero.body-hero .hero-eyebrow { margin-bottom: 16px; }
}
@media (max-width: 480px) {
  /* Crop the selected source's side bands on phones, identically for film/poster. */
  #hero.body-hero { min-height: max(1048px, 100svh); padding-top: max(448px, calc(100vw + 128px)); }
  #hero.body-hero .hero-bg img, #hero.body-hero .hero-bg video { width: 125%; max-width: none; right: -12.5%; }
}