/* Header slideshow — 20 animation styles. The active slide gets .is-active,
   the one leaving gets .is-prev; each style animates those two. */
.hs { position: relative; height: max(520px, var(--hs-h)); overflow: hidden; background: var(--hs-bg, #001219); color: var(--hs-ink, #fff); isolation: isolate; }
.hs-stage { position: absolute; inset: 0; }
.hs-slide { position: absolute; inset: 0; opacity: 0; z-index: 0; }
.hs-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
.hs-slide.is-active { opacity: 1; z-index: 2; }
.hs-slide.is-prev { opacity: 1; z-index: 1; }
.hs::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: rgba(0,0,0,var(--overlay)); }
.hs-copy { position: absolute; z-index: 5; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; pointer-events: none; }
.hs-copy > * { pointer-events: auto; }
.hs-align-left .hs-copy { align-items: flex-start; text-align: left; padding-left: 7vw; }
.hs-align-bottom .hs-copy { justify-content: flex-end; padding-bottom: 12vh; }
.hs-title { font: 700 clamp(44px, 7vw, 110px)/.95 var(--display); letter-spacing: .01em; margin: 0 0 16px; text-shadow: 0 4px 40px rgba(0,0,0,.35); text-wrap: balance; }
.hs-sub { font: 500 clamp(17px, 1.8vw, 22px)/1.5 var(--body); margin: 0 0 28px; text-shadow: 0 2px 16px rgba(0,0,0,.4); }
.hs-btn { display: inline-block; border: 2px solid var(--hs-ink, #fff); color: var(--hs-ink, #fff); text-decoration: none; padding: 15px 40px; font: 700 15px var(--body); letter-spacing: .18em; text-transform: uppercase; transition: background .3s, color .3s; }
.hs-btn:hover { background: var(--hs-ink, #fff); color: var(--hs-bg, #001219); }
.hs-dots { position: absolute; z-index: 6; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 8px; }
.hs-dots i { width: 28px; height: 3px; background: color-mix(in srgb, var(--hs-ink, #fff) 40%, transparent); transition: background .4s; }
.hs-dots i.on { background: var(--hs-ink, #fff); }
.hs-lab-tag { position: absolute; z-index: 8; left: 16px; top: 16px; display: flex; align-items: center; gap: 10px; background: #AE2012; color: #fff; border-radius: 999px; padding: 5px 16px 5px 5px; font: 700 15px var(--body); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.hs-lab-tag b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #AE2012; font: 800 18px var(--mono); }

/* 1 slide — the GHL behaviour */
.hs--slide .hs-slide { opacity: 1; transform: translateX(100%); transition: transform 1s ease-in-out; }
.hs--slide .hs-slide.is-active { transform: none; }
.hs--slide .hs-slide.is-prev { transform: translateX(-100%); }
/* 2 crossfade */
.hs--fade .hs-slide { transition: opacity 1.4s ease; }
.hs--fade .hs-slide.is-prev { opacity: 0; }
/* 3 Ken Burns */
.hs--kenburns .hs-slide { transition: opacity 1.6s ease; }
.hs--kenburns .hs-slide.is-prev { opacity: 0; }
.hs--kenburns .hs-slide.is-active img { animation: kb var(--dur, 6s) linear forwards; }
.hs--kenburns .hs-slide:nth-child(even).is-active img { animation-name: kb2; }
@keyframes kb { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.18) translate(-2%, -2%); } }
@keyframes kb2 { from { transform: scale(1.18) translate(2%, 1%); } to { transform: scale(1.03) translate(0, 0); } }
/* 4 zoom-out reveal */
.hs--zoomout .hs-slide.is-active { animation: zoomout 1.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes zoomout { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: scale(1); } }
/* 5 slide up */
.hs--up .hs-slide.is-active { animation: up 1.1s cubic-bezier(.7,0,.2,1) both; }
.hs--up .hs-slide.is-prev { animation: upOut 1.1s cubic-bezier(.7,0,.2,1) both; }
@keyframes up { from { transform: translateY(100%); } }
@keyframes upOut { to { transform: translateY(-30%); filter: brightness(.5); } }
/* 6 curtain wipe */
.hs--curtain .hs-slide.is-active { animation: curtain 1.2s cubic-bezier(.7,0,.2,1) both; }
@keyframes curtain { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* 7 red-sun circle */
.hs--sun .hs-slide.is-active { animation: sun 1.5s cubic-bezier(.6,0,.2,1) both; }
.hs--sun .hs-slide.is-active::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 50% 50%, transparent 0 60%, var(--hs-accent, #AE2012) 60% 63%, transparent 63%); animation: sunring 1.5s cubic-bezier(.6,0,.2,1) both; pointer-events: none; }
@keyframes sun { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
@keyframes sunring { from { opacity: 1; transform: scale(.2); } to { opacity: 0; transform: scale(1.6); } }
/* 8 diagonal wipe */
.hs--diagonal .hs-slide.is-active { animation: diag 1.2s cubic-bezier(.7,0,.2,1) both; }
@keyframes diag { from { clip-path: polygon(0 0, 0 0, 0 0, 0 0); } 60% { clip-path: polygon(0 0, 140% 0, 0 140%, 0 100%); } to { clip-path: polygon(0 0, 200% 0, 0 200%, 0 100%); } }
/* 9 blinds, 10 shutters, 11 tiles — pieces built by the script */
.hs-pieces { position: absolute; inset: 0; z-index: 2; display: grid; pointer-events: none; }
.hs-pieces i { background-image: var(--img); background-size: var(--bgw) var(--bgh); background-repeat: no-repeat; opacity: 0; }
.hs-pieces.go i { animation: piece .9s cubic-bezier(.3,.7,.2,1) both; animation-delay: var(--d); }
.hs--blinds .hs-pieces.go i { animation-name: blind; } .hs--shutters .hs-pieces.go i { animation-name: shutter; } .hs--tiles .hs-pieces.go i { animation-name: tile; }
@keyframes blind { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes shutter { from { opacity: 1; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes tile { from { opacity: 0; transform: scale(.6) rotate(-6deg); } to { opacity: 1; transform: none; } }
/* 12 moving film strip */
.hs--film .hs-stage { display: flex; width: max-content; height: 100%; animation: film var(--dur, 40s) linear infinite; }
.hs--film .hs-slide { position: relative; inset: auto; opacity: 1; width: 62vw; height: 100%; flex: none; border-right: 6px solid var(--hs-bg, #001219); }
@keyframes film { to { transform: translateX(-50%); } }
.hs--film .hs-dots { display: none; }
/* 13 parallax slide */
.hs--parallax .hs-slide { opacity: 1; transform: translateX(100%); transition: transform 1.2s cubic-bezier(.7,0,.2,1); overflow: hidden; }
.hs--parallax .hs-slide img { transform: translateX(-60%); transition: transform 1.2s cubic-bezier(.7,0,.2,1); }
.hs--parallax .hs-slide.is-active, .hs--parallax .hs-slide.is-active img { transform: none; }
.hs--parallax .hs-slide.is-prev { transform: translateX(-100%); } .hs--parallax .hs-slide.is-prev img { transform: translateX(60%); }
/* 14 cube */
.hs--cube .hs-stage { perspective: 1800px; }
.hs--cube .hs-slide { opacity: 1; backface-visibility: hidden; transform-origin: 50% 50% -50vw; transform: rotateY(90deg); transition: transform 1.3s cubic-bezier(.6,0,.3,1); }
.hs--cube .hs-slide.is-active { transform: rotateY(0); } .hs--cube .hs-slide.is-prev { transform: rotateY(-90deg); }
/* 15 flip */
.hs--flip .hs-stage { perspective: 2000px; }
.hs--flip .hs-slide { opacity: 1; backface-visibility: hidden; transform: rotateX(-180deg); transition: transform 1.2s cubic-bezier(.6,0,.3,1); }
.hs--flip .hs-slide.is-active { transform: rotateX(0); } .hs--flip .hs-slide.is-prev { transform: rotateX(180deg); }
/* 16 stacked cards */
.hs--stack .hs-slide.is-active { animation: stack 1.1s cubic-bezier(.2,.7,.2,1) both; box-shadow: -40px 0 80px rgba(0,0,0,.5); }
.hs--stack .hs-slide.is-prev { animation: stackOut 1.1s ease both; }
@keyframes stack { from { transform: translateX(80%) rotate(6deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes stackOut { to { transform: scale(.88); filter: brightness(.4); } }
/* 17 four panels */
.hs--accordion .hs-stage { display: flex; }
.hs--accordion .hs-slide { position: relative; inset: auto; opacity: 1; flex: 1; transition: flex 1s cubic-bezier(.6,0,.2,1); border-right: 2px solid var(--hs-bg, #001219); overflow: hidden; }
.hs--accordion .hs-slide.is-active { flex: 4; }
.hs--accordion .hs-slide:hover { flex: 4; }
.hs--accordion .hs-stage:hover .hs-slide.is-active:not(:hover) { flex: 1; }
.hs--accordion .hs-slide img { filter: saturate(.6) brightness(.8); transition: filter .8s; }
.hs--accordion .hs-slide.is-active img, .hs--accordion .hs-slide:hover img { filter: none; }
/* 18 glitch */
.hs--glitch .hs-slide.is-active { animation: glitch .9s steps(1) both; }
.hs--glitch .hs-slide.is-active::before, .hs--glitch .hs-slide.is-active::after { content: ''; position: absolute; inset: 0; background: var(--img) center 35% / cover; mix-blend-mode: screen; animation: glitchRGB .9s steps(2) both; pointer-events: none; }
.hs--glitch .hs-slide.is-active::before { filter: hue-rotate(-60deg) saturate(3); } .hs--glitch .hs-slide.is-active::after { filter: hue-rotate(120deg) saturate(3); animation-direction: reverse; }
@keyframes glitch { 0% { clip-path: inset(40% 0 30% 0); transform: translateX(-4%); } 15% { clip-path: inset(10% 0 60% 0); transform: translateX(3%); } 30% { clip-path: inset(70% 0 5% 0); transform: translateX(-2%); } 45% { clip-path: inset(0 0 0 0); transform: translateX(1%); } 60%, 100% { clip-path: inset(0); transform: none; } }
@keyframes glitchRGB { 0% { transform: translate(-12px, 4px); opacity: .7; } 50% { transform: translate(10px, -3px); opacity: .5; } 100% { transform: none; opacity: 0; } }
/* 19 blur-to-sharp */
.hs--focus .hs-slide { transition: opacity 1.4s ease; } .hs--focus .hs-slide.is-prev { opacity: 0; }
.hs--focus .hs-slide.is-active img { animation: focus 2.2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes focus { from { filter: blur(24px) saturate(1.6); transform: scale(1.12); } to { filter: none; transform: none; } }
/* 20 photos inside the letters, then the full photo */
.hs--letters .hs-slide { transition: opacity 1.4s ease; } .hs--letters .hs-slide.is-prev { opacity: 0; }
.hs-letters { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; background: var(--hs-bg, #001219); color: transparent; font: 400 clamp(90px, 18vw, 320px)/1 var(--display); letter-spacing: -.01em;
  background-image: var(--img); background-size: cover; background-position: center; -webkit-background-clip: text; background-clip: text; animation: letters 3.2s cubic-bezier(.7,0,.2,1) .6s both; pointer-events: none; }
.hs-letters::before { content: ''; position: absolute; inset: 0; background: var(--hs-bg, #001219); z-index: -1; animation: lettersBg 3.2s cubic-bezier(.7,0,.2,1) .6s both; }
@keyframes letters { 0%, 45% { transform: scale(1); opacity: 1; } 100% { transform: scale(14); opacity: 0; } }
@keyframes lettersBg { 0%, 45% { opacity: 1; } 80%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .hs * { animation: none !important; transition: none !important; } .hs-letters { display: none; } }
@media (max-width: 760px) { .hs--film .hs-slide { width: 90vw; } .hs-align-left .hs-copy { padding-left: 20px; } }
/* slides waiting off-stage jump back without sweeping across the picture */
.hs--slide .hs-slide:not(.is-active):not(.is-prev), .hs--parallax .hs-slide:not(.is-active):not(.is-prev),
.hs--parallax .hs-slide:not(.is-active):not(.is-prev) img, .hs--cube .hs-slide:not(.is-active):not(.is-prev), .hs--flip .hs-slide:not(.is-active):not(.is-prev) { transition: none; }
.hs-lab-note { background: #AE2012; color: #fff; padding: 14px 20px; font: 700 15px var(--body); letter-spacing: .02em; }