/* The original homepage's full-width film, shade, fluid and copy layering. */
.circuit-hero {
  position: relative; display: flex; align-items: center; isolation: isolate;
  min-height: max(680px, calc(100svh - var(--circuit-header-height, 92px) - var(--circuit-rail-height, 40px)));
  padding: 100px var(--page-pad) 142px; overflow: hidden;
  background: #07131a; border-bottom: 4px solid var(--accent);
}
.hero-bg-video, .hero-film-shade, .circuit-background, .hero-fluid-layer {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.hero-bg-video { z-index: 0; object-fit: cover; object-position: center; opacity: .8; }
.hero-film-shade {
  z-index: 1;
  background: radial-gradient(ellipse at 12% 22%, #0879a14d, transparent 55%), linear-gradient(90deg, #071017eb 0%, #0811199c 44%, #0a151d26 76%), linear-gradient(0deg, #07131acc, transparent 28%);
}
.circuit-background { z-index: 2; opacity: .55; }
.hero-fluid-layer { z-index: 3; mix-blend-mode: screen; overflow: hidden; }
.hero-fluid-layer canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 220ms; }
.circuit-hero .hero-copy { position: relative; z-index: 4; width: min(1200px, 100%); max-width: none; margin: 0 auto; }
.circuit-hero .kicker { font-size: 12px; letter-spacing: .13em; color: #52d7f5; }
.circuit-hero h1 { max-width: 1080px; margin: 24px 0 30px; font: 700 clamp(52px, 6vw, 94px)/.99 var(--heading-font); letter-spacing: -.06em; overflow-wrap: normal; }
.circuit-hero h1 span { color: var(--text); }
.circuit-hero .hero-description { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.65; max-width: 61ch; color: #dae3e6; margin: 0; }
.circuit-hero .hero-actions { margin-top: 34px; gap: 16px; }
.circuit-hero .action.secondary { background: #10212ac2; }
.circuit-hero .cursor-toggle { min-height: 44px; padding: 10px 13px; background: #0b1822b8; border: 1px solid #59727f; border-radius: 3px; color: #d7e5ec; }
.circuit-hero .cursor-toggle::before { content: ''; width: 6px; height: 6px; background: #8195a0; }
.circuit-hero .cursor-toggle[aria-pressed=true] { background: #134452b8; border-color: var(--accent); }
.circuit-hero .cursor-toggle[aria-pressed=true]::before { background: var(--accent); }
.hero-signature { position: absolute; z-index: 4; right: var(--page-pad); top: 28px; display: flex; align-items: center; gap: 12px; color: #c5d5db; font: 9px/1.5 ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.hero-signature svg { width: 17px; height: 17px; color: var(--accent); }
.hero-foot { position: absolute; z-index: 4; inset: auto var(--page-pad) 26px; display: flex; justify-content: space-between; align-items: center; gap: 28px; border-top: 1px solid #6a87916b; padding-top: 18px; }
.hero-connections { display: flex; flex-wrap: wrap; gap: 14px 34px; }
.hero-connections a { display: inline-flex; align-items: center; min-height: 44px; gap: 13px; font-size: 12px; font-weight: 600; text-decoration: none; color: #e0eaed; }
.hero-connections a svg { width: 16px; height: 16px; transition: transform 180ms; }
.hero-connections a:hover { color: #64e1fb; }
.hero-connections a:hover svg { transform: translateX(4px); }
.hero-motion { flex-shrink: 0; min-height: 44px; padding: 9px 12px; border: 1px solid #597581; background: #122731d9; border-radius: 3px; color: #d9e6ec; font-size: 11px; }
.hero-motion:hover { background: #254757; }
.hero-motion:disabled { opacity: .65; }
@media (min-width: 1600px) { .circuit-hero { padding-inline: max(var(--page-pad), calc((100vw - 1460px) / 2)); } }
@media (max-width: 1100px) {
  .circuit-hero h1 { font-size: clamp(52px, 7.8vw, 80px); }
  .hero-film-shade { background: linear-gradient(90deg, #071017eb, #08111966 80%), linear-gradient(0deg, #07131ae6, transparent 45%); }
}
@media (max-width: 800px) {
  .circuit-hero { min-height: max(600px, calc(100svh - var(--circuit-header-height, 80px) - var(--circuit-rail-height, 70px))); padding-top: 80px; padding-bottom: 158px; }
  .circuit-hero h1 { font-size: clamp(45px, 8.5vw, 68px); }
  .circuit-hero .hero-description { font-size: 17px; max-width: 47ch; }
  .hero-signature { top: 24px; font-size: 8px; }
  .hero-connections { gap: 0 20px; }
  .hero-foot { gap: 16px; }
}
@media (max-width: 560px) {
  .circuit-hero { min-height: max(620px, calc(100svh - var(--circuit-header-height, 78px) - var(--circuit-rail-height, 85px))); padding: 80px 20px 154px; }
  .hero-bg-video { object-position: 57% center; opacity: .72; }
  .circuit-hero .hero-copy { margin: 0; }
  .circuit-hero .kicker { font-size: 9px; letter-spacing: .08em; }
  .circuit-hero h1 { font-size: clamp(35px, 10vw, 56px); margin: 21px 0 24px; letter-spacing: -.065em; }
  .circuit-hero .hero-description { font-size: 16px; line-height: 1.7; }
  .circuit-hero .hero-actions { gap: 14px 12px; margin-top: 29px; }
  .circuit-hero .action { padding: 12px 14px; font-size: 12px; gap: 12px; }
  .circuit-hero .cursor-toggle { flex-basis: auto; }
  .hero-signature { left: 20px; right: auto; top: 22px; font-size: 7px; }
  .hero-foot { left: 20px; right: 20px; bottom: 18px; gap: 8px; padding-top: 12px; align-items: flex-end; }
  .hero-connections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .hero-connections a { min-height: 36px; font-size: 10px; gap: 8px; }
  .hero-connections a svg { display: none; }
  .hero-motion { min-height: 44px; padding-inline: 9px; font-size: 9px; }
}
@media (max-width: 350px) { .circuit-hero .action { font-size: 11px; gap: 8px; padding-inline: 12px; } }
@media (max-height: 520px) and (min-width: 561px) { .circuit-hero { min-height: 560px; padding-top: 75px; padding-bottom: 120px; } }
@media (prefers-reduced-motion: reduce) { .hero-fluid-layer { display: none; } .hero-connections a:hover svg { transform: none; } }