/* Dark installations dissolve into the continuous light page, without a hard section edge. */
:root { --fade: clamp(7rem, 18vh, 12rem); }
.hero3d__stage { mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - var(--fade)), rgb(0 0 0 / 0.92) calc(100% - var(--fade) * 0.75), rgb(0 0 0 / 0.5) calc(100% - var(--fade) * 0.38), transparent 100%); }
.hero3d__copy { max-width: min(42%, 33rem); }
.hero3d h1 { font-size: clamp(2.9rem, 4.3vw, 4.25rem); max-width: 14ch; line-height: 1.06; }
.hero3d .lead { max-width: 36ch; font-size: clamp(1rem, 1.15vw, 1.15rem); }
.hero3d__inner { gap: var(--space-7); min-height: min(900px, 100svh); padding-block: calc(var(--header-h) + 3rem) 2rem; }
.hero-index { max-width: 48rem; }
.hero-index a { align-items: center; min-height: 3.6rem; font-size: 0.8rem; padding-inline: 1rem; }
.stage-hero { background: transparent; border: 0; color: var(--fg-inverse); padding-block: calc(var(--header-h) + 4rem) calc(var(--fade) + 2.5rem); }
.stage-hero__bg, .stage__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 85% 20%, var(--hero-1), var(--hero-2) 58%, var(--hero-3)); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent); }
.stage-hero::after { display: none; }
.stage-hero h1 { font-size: var(--step-4); max-width: 23ch; }
.stage-hero .lead { color: var(--fg-inverse); opacity: 0.8; max-width: var(--measure-lead); }
.stage-hero .crumbs, .stage-hero .crumbs a { color: var(--fg-inverse); opacity: 0.8; }
.stage-hero + .section, .stage-hero + .subnav { margin-top: calc(var(--fade) * -0.45); }
.stage { isolation: isolate; color: var(--fg-inverse); padding-block: calc(var(--fade) + 2rem) !important; }
.stage__bg { mask-image: linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); }
.stage .eyebrow { color: var(--accent); }
.stage .lead { color: var(--fg-inverse); opacity: 0.8; }
.btn--ghost-light { --_fg: var(--fg-inverse); --_bg: transparent; --_bd: var(--glass-dark-bd); }
.tone-mark { position: absolute; width: 1px; height: 1px; left: 0; pointer-events: none; }
.tone-mark--end { bottom: calc(var(--fade) * 0.6); }
.tone-mark--start { top: calc(var(--fade) * 0.6); }
.glass-site .site-header .container { transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.glass-site .site-header[data-over="dark"] .container { background: var(--glass-dark-bg); border-color: var(--glass-dark-bd); box-shadow: 0 12px 36px -18px rgb(0 0 0 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.1); }
.glass-site .site-header[data-over="dark"] .wordmark, .glass-site .site-header[data-over="dark"] .nav-toggle { color: var(--fg-inverse); }
.glass-site .site-header[data-over="dark"] .lang3d a { color: var(--fg-inverse); }
.glass-site .site-header[data-over="dark"] .lang3d { box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.3); }
@media (min-width: 72.01rem) {
  .glass-site .site-header[data-over="dark"] .nav__link { color: var(--fg-inverse); }
  .glass-site .site-header[data-over="dark"] .nav__link:hover { background: var(--glass-dark-bd); }
  .glass-site .site-header[data-over="dark"] .nav__link[aria-current="page"], .glass-site .site-header[data-over="dark"] .nav__link[aria-expanded="true"] { background: var(--glass-dark-bd); }
}
@media (max-width: 72rem) {
  .glass-site .site-header[data-over="dark"] .nav .lang3d a { color: var(--fg); }
}
@media (max-width: 60rem) {
  .hero3d__copy { max-width: 36rem; }
  .hero3d__inner { min-height: 0; padding-top: calc(var(--header-h) + 3rem); }
  .hero3d { padding-bottom: calc(clamp(340px, 52vw, 500px) + var(--fade)); }
  .hero3d h1 { font-size: clamp(2.5rem, 6vw, 3.6rem); max-width: 17ch; }
  .hero3d .lead { max-width: 42ch; }
  .hero3d__stage::after { background: linear-gradient(to bottom, rgb(6 22 38 / 0.85), rgb(6 22 38 / 0.65) 36%, transparent 58%); }
  .stage-hero { padding-top: calc(var(--header-h) + 2.5rem); }
}
@media (max-width: 40rem) {
  .hero3d__inner { padding-top: calc(var(--header-h) + 2rem); }
  .hero3d h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
}