/* ARL Slipstream navy hero — production (no controls panel) */

.hero.hero-ss{
  --ss-bg:#1E264D;
  --ss-corner:14px;
  --ss-lift:1.035;
  --ss-shadow:1;
  --ss-vig:1;
  position:relative;
  min-height:100vh;
  height:100vh;
  display:block;
  padding:0;
  overflow:hidden;
  color:#FFFFFF;
  background:
    radial-gradient(130% 100% at 72% 62%, #2A335C 0%, var(--ss-bg) 62%, #151A36 100%) !important;
}

.hero.hero-ss,
.hero.hero-ss.band-paper{
  background:
    radial-gradient(130% 100% at 72% 62%, #2A335C 0%, #1E264D 62%, #151A36 100%) !important;
}

#ss-stage{
  position:absolute;
  inset:0;
  z-index:1;
  isolation:isolate;
  overflow:hidden;
  perspective:1500px;
  perspective-origin:50% 64%;
  cursor:grab;
  touch-action:pan-y;
  user-select:none;
  outline:none;
}
#ss-stage.-drag{ cursor:grabbing; touch-action:none; }

#ss-belt{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform:rotateY(var(--ss-tilt,-32deg));
}

.ss-card{
  position:absolute;
  left:50%;
  top:var(--ss-cy,64%);
  width:var(--ss-cw,230px);
  height:var(--ss-ch,308px);
  margin-left:calc(var(--ss-cw,230px) / -2);
  margin-top:calc(var(--ss-ch,308px) / -2);
  transform-style:preserve-3d;
  will-change:transform,opacity;
}

.ss-card__inner{
  position:absolute;
  inset:0;
  border-radius:var(--ss-corner);
  overflow:hidden;
  background:#131318;
  box-shadow:
    0 40px 80px -24px rgba(0,0,0, calc(.72 * var(--ss-shadow))),
    0 8px 24px -10px rgba(0,0,0, calc(.6 * var(--ss-shadow)));
  transition:transform .34s cubic-bezier(.22,.61,.36,1), box-shadow .34s ease;
  will-change:transform;
}
.ss-card.-active .ss-card__inner{
  transform:scale(var(--ss-lift));
  box-shadow:0 52px 100px -24px rgba(0,0,0,.8), 0 10px 30px -10px rgba(0,0,0,.7);
}
.ss-card__inner img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  max-width:none;
}

.ss-card__scrim{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:var(--ss-scrim,1.4);
  background:linear-gradient(to top,
    rgba(4,4,6,.92) 0%, rgba(4,4,6,.55) 24%, rgba(4,4,6,.08) 46%, rgba(4,4,6,0) 62%);
}
.ss-card__foot{
  position:absolute;
  left:16px;
  right:14px;
  bottom:15px;
  z-index:2;
}
.ss-card__title{
  margin:0;
  font-family:"Inter Tight", Inter, sans-serif;
  font-weight:600;
  font-size:var(--ss-title-size,20px);
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--ss-title-color,#FFFFFF);
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}
.ss-card__meta{ display:none !important; }

#ss-vignette{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:var(--ss-vig);
  background:
    linear-gradient(to right, #1E264D 0%, rgba(30,38,77,.55) 12%, rgba(30,38,77,0) 34%),
    linear-gradient(to bottom, rgba(30,38,77,0) 62%, rgba(30,38,77,.5) 100%);
}

.hero.hero-ss .ss-lede,
.hero.hero-ss h1.ss-lede,
.hero h1.ss-lede{
  position:absolute;
  top:clamp(96px, 15vh, 150px);
  left:0;
  right:0;
  z-index:8;
  margin:0;
  padding:0 clamp(22px, 6vw, 48px);
  text-align:center;
  pointer-events:none;
  font-family:"Inter Tight", Inter, sans-serif;
  font-weight:800;
  letter-spacing:-.045em;
  font-size:clamp(27px, 4.4vw, 62px);
  line-height:1.05;
  color:#FFFFFF !important;
  max-width:none;
  isolation:isolate;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
  height:5.4em;
  overflow:hidden;
}

.ss-hint{
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  margin:0;
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  font-weight:500;
  color:rgba(255,255,255,.34);
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}

#ss-stage:focus-visible{
  outline:2px solid rgba(255,255,255,.7);
  outline-offset:-6px;
}

/* Header stays white over the navy hero. Nav stays navy. */
body.ss-over-hero .hdr,
body.ss-over-hero .hdr.scrolled,
body.phone.ss-over-hero .hdr,
body.phone.ss-over-hero .hdr.scrolled{
  background:#FFFFFF !important;
  background-image:none !important;
  border-bottom-color:var(--line, rgba(30,38,77,.12)) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none;
}

/* Mega and drawer stay paper white so they remain readable */
body.ss-over-hero .mega{
  background:#FFFFFF;
}
body.ss-over-hero .mega .nl,
body.ss-over-hero .mega a,
body.ss-over-hero .mega h5,
body.ss-over-hero .mega h4,
body.ss-over-hero .mega h3,
body.ss-over-hero .mega b{
  color:#1E264D;
}

@media (max-width:900px){
  .hero.hero-ss{
    min-height:100vh;
    height:100vh;
    padding:0;
  }
}

@media (max-width:720px){
  .ss-lede{ top:clamp(78px, 12vh, 116px); }
  .ss-lede br{ display:none; }
  .ss-hint{ bottom:18px; letter-spacing:.24em; }
}

@media (max-height:540px){
  .ss-lede{ top:58px; font-size:clamp(22px, 5.6vw, 38px); }
}

@media (prefers-reduced-motion:reduce){
  .ss-card__inner{ transition:none; }
}