/* =========================================================
   V91 — HERO CTA + PAGE TRANSITIONS
   - Removes the old fixed yellow promotion bar.
   - Keeps all hero content below the fixed navigation.
   - Moves the main hero CTAs to the right-side image area.
   - Adds garage-door and heavy-drop page transition surfaces.
   ========================================================= */

:root{
  --v91-ink:#07121a;
  --v91-teal:#0798aa;
  --v91-teal-deep:#056d79;
  --v91-orange:#ff5a0a;
  --v91-line:rgba(7,18,26,.12);
}

/* The old top promo strip is intentionally retired in V91. */
body.theme-v38 .promo-bar,
body.theme-v38 > .campaign-announcement{
  display:none!important;
}

/* Header alone determines the start of the page now. JS will refine this live. */
:root{--v87-nav-offset:108px}
@media(max-width:900px){:root{--v87-nav-offset:96px}}
@media(max-width:640px){:root{--v87-nav-offset:88px}}

/* Keep the hero clean and white while giving the artwork more visual weight. */
.v87-page-hero{
  padding-top:var(--v87-nav-offset)!important;
  background:#fff!important;
}
.v87-hero-card{
  grid-template-columns:minmax(330px,.76fr) minmax(560px,1.24fr);
}
.v87-hero-media{
  display:grid;
  gap:10px;
}
.v87-hero-image-frame{
  position:relative;
  border-radius:30px!important;
  box-shadow:0 24px 60px rgba(18,52,64,.16)!important;
}
.v87-hero-media img{
  border-radius:23px!important;
}

/* Right-side CTA dock. */
.v91-hero-media-actions{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) auto;
  gap:9px;
  align-items:stretch;
  margin-top:2px;
}
.v91-media-cta{
  position:relative;
  min-width:0;
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 13px 11px 15px;
  border-radius:17px;
  text-decoration:none!important;
  overflow:hidden;
  isolation:isolate;
  border:1px solid var(--v91-line);
  box-shadow:0 10px 24px rgba(11,38,48,.09);
  transform:translateZ(0);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease;
}
.v91-media-cta::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  transition:opacity .22s ease,transform .35s cubic-bezier(.2,.8,.2,1);
}
.v91-media-cta:hover,
.v91-media-cta:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(11,38,48,.15);
}
.v91-media-cta:focus-visible{outline:3px solid rgba(7,152,170,.28);outline-offset:3px}
.v91-media-cta small,
.v91-media-cta strong{display:block;min-width:0}
.v91-media-cta small{
  font-size:8px;
  line-height:1;
  font-weight:950;
  letter-spacing:.13em;
  text-transform:uppercase;
  opacity:.72;
  margin-bottom:4px;
}
.v91-media-cta strong{
  font-size:12px;
  line-height:1.2;
  font-weight:950;
  overflow-wrap:anywhere;
}
.v91-media-cta>b{
  flex:none;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:12px;
  font-size:17px;
  transition:transform .22s ease;
}
.v91-media-cta:hover>b{transform:translateX(3px)}

.v91-media-cta--primary{
  color:#fff!important;
  background:linear-gradient(135deg,#087b8a,#0798aa 55%,#11adbd);
  border-color:rgba(7,152,170,.38);
}
.v91-media-cta--primary::before{
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 2px,transparent 2px 8px);
  transform:translateY(-18%);
}
.v91-media-cta--primary:hover::before{opacity:1;transform:translateY(0)}
.v91-media-cta--primary>b{background:#fff;color:#057a88}

.v91-media-cta--secondary{
  color:#101820!important;
  background:#fff;
  border-color:rgba(255,90,10,.28);
}
.v91-media-cta--secondary::before{
  background:linear-gradient(135deg,rgba(255,90,10,.11),rgba(255,90,10,.02));
  transform:translateY(-12px) rotate(-1deg);
}
.v91-media-cta--secondary:hover::before{opacity:1;transform:translateY(0) rotate(0)}
.v91-media-cta--secondary>b{background:#ff5a0a;color:#fff}

.v91-media-cta--call{
  min-width:122px;
  display:grid;
  align-content:center;
  justify-items:center;
  text-align:center;
  color:#fff!important;
  background:#07121a;
  border-color:#07121a;
  padding-inline:13px;
}
.v91-media-cta--call small{color:#7de5ef;opacity:1}
.v91-media-cta--call strong{font-size:11px;white-space:nowrap}
.v91-media-cta--call:hover,.v91-media-cta--call:focus-visible{background:#0c2731}

/* We moved the primary actions to the artwork column in V91. */
.v87-hero-actions{display:none!important}
.v87-hero-media figcaption{padding-top:3px!important}


/* Page transition stage. JS inserts this only when needed. */
.v91-transition-stage{
  position:fixed;
  inset:0;
  z-index:99999;
  pointer-events:none;
  visibility:hidden;
  overflow:hidden;
}
.v91-transition-stage.is-active{visibility:visible;pointer-events:all}
.v91-transition-stage .v91-transition-panel{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
}
.v91-transition-stage .v91-transition-label{
  position:relative;
  z-index:4;
  display:grid;
  justify-items:center;
  gap:8px;
  opacity:0;
  transform:translateY(10px);
  font:950 12px/1.1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.v91-transition-stage .v91-transition-label::before{
  content:"";
  width:38px;height:4px;border-radius:999px;background:#ff5a0a;
}

/* Garage door: steel shutter drops hard from the top. */
.v91-transition-stage[data-type="garage"] .v91-transition-panel{
  transform:translateY(-104%);
  background:
    repeating-linear-gradient(0deg,#07121a 0 32px,#102933 32px 34px,#07121a 34px 66px),
    #07121a;
  box-shadow:0 16px 0 rgba(255,90,10,.95),0 28px 40px rgba(0,0,0,.28);
}
.v91-transition-stage[data-type="garage"].is-entering .v91-transition-panel{
  animation:v91GarageSlam .56s cubic-bezier(.18,.85,.18,1) forwards;
}
.v91-transition-stage[data-type="garage"].is-entering .v91-transition-label{
  animation:v91LabelIn .28s .30s ease forwards;
}
.v91-transition-stage[data-type="garage"].is-leaving .v91-transition-panel{
  transform:translateY(0);
  animation:v91GarageLift .52s cubic-bezier(.7,0,.25,1) forwards;
}

/* Heavy drop: a dark slab falls like a rock, bounces once, then covers the screen. */
.v91-transition-stage[data-type="drop"] .v91-transition-panel{
  inset:-7vh -5vw;
  transform:translateY(-118%) rotate(-1.5deg) scale(.985);
  border-radius:0 0 40px 40px;
  background:radial-gradient(circle at 50% 30%,#17434e,#07121a 56%);
  box-shadow:0 34px 0 rgba(255,90,10,.88),0 50px 60px rgba(0,0,0,.38);
}
.v91-transition-stage[data-type="drop"].is-entering .v91-transition-panel{
  animation:v91RockDrop .62s cubic-bezier(.12,.84,.2,1) forwards;
}
.v91-transition-stage[data-type="drop"].is-entering .v91-transition-label{
  animation:v91LabelIn .24s .35s ease forwards;
}
.v91-transition-stage[data-type="drop"].is-leaving .v91-transition-panel{
  transform:translateY(0) rotate(0) scale(1);
  animation:v91RockClear .52s cubic-bezier(.72,0,.25,1) forwards;
}

@keyframes v91GarageSlam{
  0%{transform:translateY(-104%)}
  78%{transform:translateY(2.5%)}
  91%{transform:translateY(-1%)}
  100%{transform:translateY(0)}
}
@keyframes v91GarageLift{
  0%{transform:translateY(0)}
  100%{transform:translateY(-104%)}
}
@keyframes v91RockDrop{
  0%{transform:translateY(-118%) rotate(-1.5deg) scale(.985)}
  74%{transform:translateY(2.8%) rotate(.45deg) scale(1.006)}
  88%{transform:translateY(-1.2%) rotate(-.15deg) scale(.998)}
  100%{transform:translateY(0) rotate(0) scale(1)}
}
@keyframes v91RockClear{
  0%{transform:translateY(0) scale(1)}
  100%{transform:translateY(110%) scale(1.015)}
}
@keyframes v91LabelIn{
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:1180px){
  .v87-hero-card{grid-template-columns:minmax(300px,.82fr) minmax(430px,1.18fr)}
  .v91-hero-media-actions{grid-template-columns:1fr 1fr}
  .v91-media-cta--call{grid-column:1/-1;min-height:48px;display:flex;justify-content:center;gap:8px}
  .v91-media-cta--call small{margin:0}
}
@media(max-width:900px){
  .v87-hero-card{grid-template-columns:1fr}
  .v91-hero-media-actions{grid-template-columns:1fr 1fr auto}
  .v91-media-cta--call{grid-column:auto;display:grid;min-width:118px;min-height:60px}
}
@media(max-width:640px){
  .v91-hero-media-actions{grid-template-columns:1fr 1fr;gap:7px}
  .v91-media-cta{min-height:56px;border-radius:14px;padding:10px 11px}
  .v91-media-cta--call{grid-column:1/-1;min-height:46px;display:flex;justify-content:center;gap:8px}
  .v91-media-cta--call small{margin:0}
  .v87-hero-image-frame{border-radius:18px!important}
  .v87-hero-media img{border-radius:13px!important}
}
@media(max-width:390px){
  .v91-hero-media-actions{grid-template-columns:1fr}
  .v91-media-cta--call{grid-column:auto}
}

@media(prefers-reduced-motion:reduce){
  .v91-media-cta,
  .v91-media-cta::before,
  .v91-media-cta>b{transition:none!important}
  .v91-transition-stage *{animation-duration:.01ms!important;animation-iteration-count:1!important}
}