/* Two reversible hero directions, sharing the same live cube canvas. */
.hero[data-hero-preview] { position: relative }
.hero-switch { position: absolute; z-index: 5; right: 64px; top: 9px; display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 30px; background: var(--paper) }
.hero-switch button { padding: 7px 14px; border-radius: 24px; font-size: 11px; line-height: 1.3; min-height: 31px; transition: background .2s,color .2s }
.hero-switch button[aria-pressed=true] { background: var(--ink); color: white }
.hero[data-hero-variant=colour] { width: 100%; max-width: none; min-height: min(790px,calc(100svh - 96px)); display: grid; grid-template-columns: 1fr; padding: 112px max(4.45%,calc((100vw - 1312px)/2)) 88px; overflow: hidden; isolation: isolate; background: #253bb0; color: #f4f5ff }
.hero[data-hero-variant=colour] .hero-switch { top: 24px; right: max(4.45%,calc((100vw - 1312px)/2)); background: #15277430; border-color: #ffffff38; color: #eef1ff }
.hero[data-hero-variant=colour] .hero-switch button[aria-pressed=true] { background: #f2f4ff; color: #1a2d85 }
.hero[data-hero-variant=colour] .hero-switch button:focus-visible { outline-color: white; outline-offset: 2px }
.hero[data-hero-variant=colour] .hero-copy { position: relative; z-index: 2; width: 100%; max-width: 1312px; margin-inline: auto; padding: 0; align-self: center }
.hero[data-hero-variant=colour] h1 { max-width: 8ch; font-size: clamp(88px,13vw,180px); line-height: .95; letter-spacing: -.065em; text-wrap: balance; text-shadow: 0 2px 28px #17287520 }
.hero[data-hero-variant=colour] .hero-description { margin-top: 34px; max-width: 440px; font-size: 19px; line-height: 1.6; color: #e0e6ff; text-wrap: pretty }
.hero[data-hero-variant=colour] .hero-art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; background: transparent; overflow: hidden }
.hero[data-hero-variant=colour] .hero-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg,#253bb0c9 0%,#253bb04d 35%,#253bb000 65%) }
.hero[data-hero-variant=colour] .sculpture { inset: -17% -8% -17% 18%; opacity: .92 }
@media(max-width:1150px) {
  .hero-switch { right: 40px }
}
@media(max-width:850px) {
  .hero-switch { right: 28px }
  .hero[data-hero-variant=colour] { min-height: 650px; padding: 100px 28px 72px }
  .hero[data-hero-variant=colour] .hero-switch { right: 28px }
  .hero[data-hero-variant=colour] h1 { font-size: clamp(90px,15vw,130px) }
  .hero[data-hero-variant=colour] .sculpture { inset: -4% -35% 0 5%; opacity: .75 }
}
@media(max-width:600px) {
  .hero[data-hero-preview][data-hero-variant=original] { padding-top: 68px }
  .hero-switch { top: 14px; right: 22px }
  .hero[data-hero-variant=colour] { min-height: min(700px,calc(100svh - 76px)); padding: 106px 24px 62px }
  .hero[data-hero-variant=colour] .hero-switch { top: 18px; right: 22px }
  .hero[data-hero-variant=colour] .hero-copy { align-self: end }
  .hero[data-hero-variant=colour] h1 { font-size: clamp(76px,20vw,115px) }
  .hero[data-hero-variant=colour] .hero-description { font-size: 16px; max-width: 300px; margin-top: 27px }
  .hero[data-hero-variant=colour] .sculpture { inset: -14% -33% 16% -12%; opacity: .68 }
  .hero[data-hero-variant=colour] .hero-art::after { background: linear-gradient(0deg,#253bb0c9 0%,#253bb04d 50%,#253bb000 100%) }
}
@media(prefers-reduced-motion:reduce) {
  .hero-switch button { transition: none }
}