/* =========================================================
   Electric Adrenaline Fix — Header Logo
   Rider left of phrase; gold glint R→L electrocutes the rider.
   ========================================================= */

.page-banner,
.logo-header {
  --yellow: #fecb00;
  position: relative;
  width: 100%;
  background:
    radial-gradient(ellipse 80% 120% at 10% 20%, rgba(254, 203, 0, 0.22) 0%, transparent 50%),
    radial-gradient(ellipse 70% 100% at 90% 80%, rgba(254, 203, 0, 0.12) 0%, transparent 45%),
    linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 40%, #111 70%, #0d0d0d 100%);
  color: #fff;
  text-align: center;
  padding: 3.25rem 1.25rem 3.5rem;
  border-bottom: 3px solid var(--yellow);
  font-family: Helvetica, Arial, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  overflow: visible;
  isolation: isolate;
}

.page-banner *,
.logo-header * {
  box-sizing: border-box;
}

.page-banner::before,
.logo-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -18deg,
      transparent,
      transparent 12px,
      rgba(255, 255, 255, 0.015) 12px,
      rgba(255, 255, 255, 0.015) 13px
    );
  pointer-events: none;
}

.page-banner::after,
.logo-header::after {
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  width: 120%;
  height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(254, 203, 0, 0.18) 0%, transparent 65%);
  pointer-events: none;
  animation: banner-pulse 4s ease-in-out infinite;
}

@keyframes banner-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.05);
  }
}

.page-banner-inner,
.logo-header-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}

/*
  Phrase is a centered block under “One Stop Shop For Your”.
  Rider sits to the left of that block and does not shift the text.
*/
.accent-with-rider {
  --glint-dur: 3.5s;
  --rider-w: min(300px, 36vw);
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0.35em auto 0;
  position: relative;
  text-align: center;
  overflow: visible;
}

/* Stacked clean + electrocuted rider — left of the centered phrase */
.rider-stack {
  position: absolute;
  right: calc(100% + 0.35rem);
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  height: fit-content;
  display: block;
  width: var(--rider-w);
  max-width: none;
  line-height: 0;
  z-index: 2;
  pointer-events: none;
  animation: rider-electrocute-shake var(--glint-dur) linear infinite;
}

.page-banner-charge,
.logo-header-charge {
  width: 100%;
  height: auto;
  max-height: min(320px, 48vw);
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: block;
  object-fit: contain;
  object-position: center;
  line-height: 0;
}

/* Phrase is the centering box; rider is taken out of flow */
.accent-with-rider > .page-banner-accent,
.accent-with-rider > .logo-header-accent {
  display: block;
  text-align: center;
}

.rider-stack .rider-base {
  position: relative;
  z-index: 1;
  animation: rider-base-charge var(--glint-dur) linear infinite;
}

/* Electrocution overlay: body crackles when gold glint hits */
.rider-stack .rider-electrocuted {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  animation: rider-electrocute-flash var(--glint-dur) linear infinite;
}

/* Hide legacy bridge bolts / dual-rider if present */
.energy-bridge,
.bridge-arc,
.rider-charge-wrap .rider-charged,
.page-banner-rider .rider-charged {
  display: none !important;
}

.page-banner-copy,
.logo-header-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.page-banner-eyebrow,
.logo-header-eyebrow {
  display: inline-block;
  margin: 0 0 0.85rem;
  padding: 0.35rem 0.9rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: var(--yellow);
  border-radius: 999px;
  box-shadow: 0 0 24px rgba(254, 203, 0, 0.45);
  animation: banner-badge 2.8s ease-in-out infinite;
}

@keyframes banner-badge {
  0%,
  100% {
    box-shadow: 0 0 16px rgba(254, 203, 0, 0.35);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 0 32px rgba(254, 203, 0, 0.7);
    transform: translateY(-2px);
  }
}

.page-banner-title,
.logo-header-title {
  font-size: clamp(2.1rem, 7vw, 4.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.35),
    0 12px 40px rgba(0, 0, 0, 0.45);
  width: 100%;
  max-width: min(1100px, 100%);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}

.page-banner-title .accent-with-rider,
.logo-header-title .accent-with-rider {
  width: max-content;
  max-width: 100%;
  align-self: center;
}

.page-banner-accent,
.logo-header-accent {
  display: block;
  margin-top: 0;
  /* Deep gold base + wide hot-white glint band for a clear sweep */
  background: linear-gradient(
    90deg,
    #c49200 0%,
    #e6b800 12%,
    #fecb00 22%,
    #ffe566 32%,
    #fff8d0 40%,
    #ffffff 46%,
    #fffef5 50%,
    #ffffff 54%,
    #fff8d0 60%,
    #ffe566 68%,
    #fecb00 78%,
    #e6b800 88%,
    #c49200 100%
  );
  background-size: 280% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 10px rgba(254, 203, 0, 0.55))
    drop-shadow(0 0 22px rgba(255, 243, 168, 0.35));
  /* Glint travels toward the rider (right → left) */
  animation: banner-shine-rtl var(--glint-dur, 3.5s) linear infinite;
  text-align: center;
  line-height: 1.08;
  position: relative;
  z-index: 2;
  flex-shrink: 1;
  min-width: 0;
}

/* "Electric" on its own line above "Adrenaline Fix" */
.page-banner-accent br,
.logo-header-accent br {
  display: block;
  content: "";
}

/*
  Gold glint: bright white-hot band sweeps toward the rider.
  Stronger contrast + glow so the pass is easy to see.
*/
@keyframes banner-shine-rtl {
  0% {
    background-position: 0% center;
    filter:
      drop-shadow(0 0 8px rgba(254, 203, 0, 0.45))
      drop-shadow(0 0 16px rgba(255, 243, 168, 0.25));
  }
  40% {
    filter:
      drop-shadow(0 0 14px rgba(254, 203, 0, 0.7))
      drop-shadow(0 0 28px rgba(255, 250, 220, 0.5));
  }
  70% {
    filter:
      drop-shadow(0 0 18px rgba(255, 243, 168, 0.95))
      drop-shadow(0 0 36px rgba(254, 203, 0, 0.85))
      drop-shadow(0 0 48px rgba(255, 255, 255, 0.35));
  }
  78% {
    background-position: 100% center;
    filter:
      drop-shadow(0 0 22px rgba(255, 255, 255, 0.9))
      drop-shadow(0 0 40px rgba(254, 203, 0, 1))
      drop-shadow(0 0 60px rgba(255, 243, 168, 0.75));
  }
  100% {
    background-position: 100% center;
    filter:
      drop-shadow(0 0 12px rgba(254, 203, 0, 0.55))
      drop-shadow(0 0 24px rgba(255, 243, 168, 0.3));
  }
}

/*
  Electrocution flash: when glint arrives (~74–90%), show body lightning overlay.
  Quick flicker for that “zapped” feel.
*/
@keyframes rider-electrocute-flash {
  0%,
  72% {
    opacity: 0;
    filter: brightness(1) drop-shadow(0 0 0 transparent);
  }
  74% {
    opacity: 1;
    filter:
      brightness(1.35)
      drop-shadow(0 0 14px rgba(120, 200, 255, 0.95))
      drop-shadow(0 0 28px rgba(254, 203, 0, 0.85));
  }
  76% {
    opacity: 0.55;
  }
  78% {
    opacity: 1;
    filter:
      brightness(1.45)
      drop-shadow(0 0 18px rgba(160, 220, 255, 1))
      drop-shadow(0 0 36px rgba(254, 203, 0, 0.95));
  }
  82% {
    opacity: 0.7;
  }
  86% {
    opacity: 1;
    filter:
      brightness(1.3)
      drop-shadow(0 0 16px rgba(120, 200, 255, 0.9))
      drop-shadow(0 0 30px rgba(254, 203, 0, 0.8));
  }
  92%,
  100% {
    opacity: 0;
    filter: brightness(1) drop-shadow(0 0 0 transparent);
  }
}

/* Base rider brightens slightly under the zap */
@keyframes rider-base-charge {
  0%,
  72% {
    filter: brightness(0.98) drop-shadow(0 0 0 transparent);
  }
  76%,
  88% {
    filter:
      brightness(1.18) saturate(1.12)
      drop-shadow(0 0 12px rgba(254, 203, 0, 0.65))
      drop-shadow(0 0 28px rgba(120, 200, 255, 0.35));
  }
  100% {
    filter: brightness(0.98) drop-shadow(0 0 0 transparent);
  }
}

/* Subtle electrocution shake while charged */
@keyframes rider-electrocute-shake {
  0%,
  72% {
    transform: translate(0, 0) scale(1);
  }
  74% {
    transform: translate(-1px, 1px) scale(1.04);
  }
  76% {
    transform: translate(2px, -1px) scale(1.05);
  }
  78% {
    transform: translate(-2px, 0) scale(1.06);
  }
  80% {
    transform: translate(1px, 2px) scale(1.05);
  }
  82% {
    transform: translate(-1px, -1px) scale(1.05);
  }
  84% {
    transform: translate(2px, 1px) scale(1.04);
  }
  86% {
    transform: translate(-1px, 0) scale(1.03);
  }
  90%,
  100% {
    transform: translate(0, 0) scale(1);
  }
}

/* Hide any leftover strike markup if present */
.e-strike-layer,
.strike-layer,
.header-energy-wave {
  display: none !important;
}

.page-banner-bar,
.logo-header-bar {
  width: min(220px, 50%);
  height: 5px;
  margin: 1.35rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--yellow), #fff3a8, var(--yellow), transparent);
  box-shadow: 0 0 20px rgba(254, 203, 0, 0.55);
}

/* Company name under banner header */
.company-name-under-header {
  margin: 0.85rem 0 0;
  padding: 0;
  font-family: "Orbitron", system-ui, sans-serif;
  font-size: clamp(1.05rem, 2.8vw, 1.45rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: none;
  color: #fecb00;
  text-align: center;
  text-shadow:
    0 0 18px rgba(254, 203, 0, 0.45),
    0 2px 0 rgba(0, 0, 0, 0.35);
}

.brand-e {
  position: relative;
  display: inline-block;
  font-size: 1.22em;
  font-weight: 900;
  line-height: 0.9;
  background: linear-gradient(180deg, #ffffff 0%, #00f0ff 30%, #39ff14 68%, #00e5ff 100%);
  background-size: 100% 240%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 5px #00f0ff)
    drop-shadow(0 0 12px rgba(57, 255, 20, 0.45));
  animation: brand-e-surge 1.05s linear infinite, brand-e-flicker 2.6s infinite;
}

.brand-e::after {
  content: "";
  position: absolute;
  left: 24%;
  right: 20%;
  top: 10%;
  bottom: 8%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath fill='%23ffffff' stroke='%2300f0ff' stroke-width='1.4' d='M13.8 1.2 L4.6 19.8 h7.4 L6.6 38.8 20.6 18.6 h-7.2 L18.6 1.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: brand-e-bolt 1.1s ease-in-out infinite;
}

@keyframes brand-e-surge {
  0% { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}

@keyframes brand-e-flicker {
  0%, 90%, 100% { opacity: 1; }
  92% { opacity: 0.55; }
  93% { opacity: 1; }
  96% { opacity: 0.7; }
  97% { opacity: 1; }
}

@keyframes brand-e-bolt {
  0%, 64%, 100% { opacity: 0.18; transform: translateY(0) scaleY(0.94); }
  68% { opacity: 1; transform: translateY(5%) scaleY(1.1); }
  74% { opacity: 0.22; }
  79% { opacity: 0.95; }
  86% { opacity: 0.28; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-e,
  .brand-e::after {
    animation: none;
  }
}

.logo-header--sm .company-name-under-header,
.m-site-banner .company-name-under-header {
  font-size: clamp(0.9rem, 3.2vw, 1.15rem);
  letter-spacing: 0.08em;
  margin-top: 0.65rem;
}

.company-name-bar-standalone {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0d0d0d 100%);
  border-bottom: 2px solid #fecb00;
  padding: 0.85rem 1rem 1rem;
  text-align: center;
}

.company-name-bar-standalone .company-name-under-header {
  margin-top: 0;
}

/* Compact size variants */
.logo-header--sm {
  padding: 1.5rem 1rem 1.75rem;
}

.logo-header--sm .logo-header-title {
  font-size: clamp(1.25rem, 4vw, 2rem);
}

.logo-header--sm .logo-header-eyebrow {
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  padding: 0.28rem 0.7rem;
  margin-bottom: 0.55rem;
}

.logo-header--sm .logo-header-bar {
  width: min(140px, 45%);
  height: 3px;
  margin-top: 0.85rem;
}

.logo-header--sm .accent-with-rider {
  --rider-w: min(140px, 28vw);
}

.logo-header--sm .page-banner-charge,
.logo-header--sm .logo-header-charge {
  max-height: min(150px, 32vw);
}

.logo-header--md {
  padding: 2.25rem 1.25rem 2.5rem;
}

.logo-header--md .logo-header-title {
  font-size: clamp(1.6rem, 5vw, 2.75rem);
}

.logo-header--md .accent-with-rider {
  --rider-w: min(240px, 34vw);
}

.logo-header--md .page-banner-charge,
.logo-header--md .logo-header-charge {
  max-height: min(260px, 42vw);
}

@media (prefers-reduced-motion: reduce) {
  .page-banner::after,
  .logo-header::after,
  .page-banner-eyebrow,
  .logo-header-eyebrow,
  .page-banner-accent,
  .logo-header-accent,
  .rider-stack,
  .rider-stack .rider-base,
  .rider-stack .rider-electrocuted {
    animation: none !important;
  }

  .rider-stack .rider-electrocuted {
    opacity: 0;
  }
}

@media (max-width: 720px) {
  .page-banner,
  .logo-header {
    padding: 1.35rem 0.75rem 1.5rem;
  }

  .page-banner-title,
  .logo-header-title {
    font-size: clamp(1.35rem, 6.5vw, 2.1rem);
  }

  .page-banner-eyebrow,
  .logo-header-eyebrow {
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    padding: 0.28rem 0.65rem;
    margin-bottom: 0.55rem;
  }

  .accent-with-rider {
    --rider-w: min(100px, 26vw);
    column-gap: 0.15rem;
  }

  .page-banner-charge,
  .logo-header-charge {
    max-height: min(120px, 30vw);
  }

  .page-banner-accent,
  .logo-header-accent {
    text-align: center;
    font-size: 0.88em;
    line-height: 1.1;
  }

  .page-banner-bar,
  .logo-header-bar {
    width: min(160px, 45%);
    height: 3px;
    margin-top: 0.9rem;
  }
}

/* Stack rider above phrase on narrow phones so nothing clips */
@media (max-width: 540px) {
  .accent-with-rider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    max-width: 100%;
  }

  .rider-stack {
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    margin: 0;
    width: min(150px, 42vw);
    order: -1;
  }

  .accent-with-rider > .page-banner-accent,
  .accent-with-rider > .logo-header-accent {
    width: 100%;
    text-align: center;
  }

  .page-banner-title,
  .logo-header-title {
    font-size: clamp(1.2rem, 6.2vw, 1.75rem);
  }
}