/* Spartan Mechanical LLC — Custom Styles */

:root {
  --spartan-red: #d41230;
  --spartan-red-dark: #8f0a1f;
  --spartan-gold: #d4af37;
  --spartan-gold-light: #f5d76e;
  --spartan-silver: #c8c8c8;
  --spartan-black: #050505;
  --spartan-gray: #0c0c0c;
  --spartan-gray-2: #121212;
  --spartan-gray-3: #1a1a1a;
  --text-muted: #9a9a9a;
  --section-pad-y: clamp(3.5rem, 8vw, 7rem);
  --cta-min-h: 3.5rem;
}

html {
  scroll-behavior: auto;
}

body {
  background: #050305;
  color: #f5f5f5;
  overflow-x: hidden;
}
/* Page-wide HD lightning ambience: one fixed, GPU-composited layer behind
   everything. The dark gradient on top keeps the storm dim enough for text;
   sections are translucent so the hero video blends into the whole page. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 3, 5, 0.78) 0%, rgba(5, 3, 5, 0.85) 45%, rgba(5, 3, 5, 0.8) 100%),
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(200, 16, 46, 0.1), transparent 55%),
    radial-gradient(ellipse 55% 45% at 100% 60%, rgba(56, 189, 248, 0.07), transparent 55%),
    url("../assets/lightning-ambient.webp") center 30% / cover no-repeat #050305;
}
/* Sections go translucent so the storm reads through the whole page and the
   hero video no longer sits in its own box */
main section.bg-spartan-black {
  background-color: rgba(8, 7, 8, 0.45) !important;
}
main section.bg-spartan-gray {
  background-color: rgba(16, 15, 16, 0.55) !important;
}
footer.bg-black {
  background-color: rgba(3, 3, 3, 0.72) !important;
}

/* Smooth Lenis-compatible */
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

/* Selection */
::selection {
  background: var(--spartan-red);
  color: #fff;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--spartan-red), var(--spartan-gold));
  border-radius: 5px;
}

/* Transparent shield logo (PNG with alpha — no white plate) */
.logo-img {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: center center;
  background: transparent !important;
  background-color: transparent !important;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 14px rgba(0, 180, 255, 0.15));
  image-rendering: auto;
  -webkit-user-drag: none;
  user-select: none;
}

/* =========================================================
   LIVE LOGO v2 — REBUILD
   Layers: aura → warrior (animated) → FX → frame (static + shine)
   Full alpha PNG, no white plate
   ========================================================= */
.logo-live {
  --logo-h: 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex-shrink: 0;
  background: transparent !important;
  isolation: isolate;
}
.logo-live-stack {
  position: relative;
  display: block;
  height: var(--logo-h);
  width: calc(var(--logo-h) * 347 / 520);
  aspect-ratio: 347 / 520;
  background: transparent !important;
  overflow: visible;
  contain: layout style;
}
.logo-live-stack > img,
.logo-live-stack .logo-live-warrior,
.logo-live-stack .logo-live-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* --- Layer 0: energy aura (behind warrior) --- */
.logo-live-aura {
  position: absolute;
  inset: 16% 14% 18% 14%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(56, 189, 248, 0.35) 0%,
    rgba(200, 16, 46, 0.12) 45%,
    transparent 72%
  );
  filter: blur(8px);
  opacity: 0.5;
  pointer-events: none;
  will-change: transform, opacity;
}

/* --- Layer 1: warrior (ONLY fully animated layer) --- */
.logo-live-warrior {
  z-index: 1;
  transform-origin: 40% 52%;
  will-change: transform, filter;
  clip-path: ellipse(39% 41% at 50% 51%);
  filter: drop-shadow(0 0 8px rgba(0, 170, 255, 0.35));
  backface-visibility: hidden;
}

/* --- Layer 2: lightning + spear FX (inside aperture) --- */
.logo-live-fx {
  position: absolute;
  inset: 11% 13% 15% 13%;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  border-radius: 50%;
  clip-path: ellipse(49% 49% at 50% 50%);
}
.logo-spear-glow {
  position: absolute;
  left: 10%;
  top: 2%;
  width: 18%;
  height: 78%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(125, 211, 252, 0.95) 18%,
    rgba(56, 189, 248, 0.55) 48%,
    rgba(200, 16, 46, 0.25) 72%,
    transparent 100%
  );
  filter: blur(3px);
  opacity: 0.35;
  transform: rotate(-8deg);
  border-radius: 40%;
  transform-origin: 50% 8%;
  will-change: transform, opacity;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.5);
}
.logo-live-warrior {
  /* Aggressive thrust toward camera originates near spear arm */
  transform-origin: 36% 46% !important;
}
.logo-helmet-glow {
  position: absolute;
  left: 42%;
  top: 14%;
  width: 22%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(125, 211, 252, 0.9) 0%, rgba(56, 189, 248, 0.25) 50%, transparent 70%);
  filter: blur(5px);
  opacity: 0.35;
  will-change: opacity, transform;
}
.logo-thrust-flash {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(125, 211, 252, 0.45) 28%,
    rgba(200, 16, 46, 0.2) 50%,
    transparent 72%
  );
  opacity: 0;
  mix-blend-mode: screen;
  will-change: opacity, transform;
}
.logo-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70%;
  height: 70%;
  margin: -35% 0 0 -35%;
  border-radius: 50%;
  border: 1.5px solid rgba(125, 211, 252, 0.45);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
  opacity: 0;
  will-change: transform, opacity;
}
.logo-bolt {
  position: absolute;
  width: 2.5px;
  height: 0;
  top: 6%;
  background: linear-gradient(180deg, #fff 0%, #7dd3fc 40%, transparent 100%);
  box-shadow: 0 0 10px #38bdf8, 0 0 18px rgba(56, 189, 248, 0.85);
  opacity: 0;
  border-radius: 2px;
  transform-origin: top center;
  will-change: height, opacity;
}
.logo-bolt.b1 { left: 58%; transform: rotate(12deg); }
.logo-bolt.b2 { left: 44%; transform: rotate(-16deg); width: 2px; }
.logo-bolt.b3 { left: 70%; transform: rotate(24deg); width: 2px; }
.logo-bolt.b4 { left: 36%; top: 8%; transform: rotate(-24deg); }
.logo-bolt.b5 { left: 78%; top: 12%; transform: rotate(32deg); width: 2px; }
.logo-bolt.b6 { left: 52%; top: 4%; transform: rotate(4deg); width: 2px; }

/* --- Layer 3: shield frame (static pose; subtle metallic shine only) --- */
.logo-live-frame {
  z-index: 4;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.55));
  /* no transform animation on frame */
}
.logo-frame-shine {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: 12%;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.14) 48%,
    rgba(245, 215, 110, 0.12) 52%,
    transparent 65%
  );
  background-size: 220% 220%;
  background-position: 120% 0%;
  mix-blend-mode: soft-light;
  opacity: 0.55;
  will-change: background-position, opacity;
}

/* =========================================================
   ANIMATED LOGO — spartan_spear_thrust_forward.mp4
   80–110px HD mark (nav/footer) — crisp like hero, no stretch
   ========================================================= */
.logo-mark {
  --logo-mark-h: 88px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--logo-mark-h);
  /* Exact 720:1280 portrait ratio → integer-friendly box */
  width: calc(var(--logo-mark-h) * 720 / 1280);
  flex-shrink: 0;
  background: #050305 !important;
  line-height: 0;
  overflow: hidden;
  border-radius: 10px;
  isolation: isolate;
  /* GPU layer for sharp video downscale */
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.logo-mark--nav {
  --logo-mark-h: 88px;
}
@media (min-width: 768px) {
  .logo-mark--nav {
    --logo-mark-h: 100px;
  }
}
@media (min-width: 1024px) {
  .logo-mark--nav {
    --logo-mark-h: 110px;
  }
}
.logo-mark--footer {
  --logo-mark-h: 80px;
}
@media (min-width: 768px) {
  .logo-mark--footer {
    --logo-mark-h: 96px;
  }
}
.logo-mark-video {
  display: block;
  width: 100%;
  height: 100%;
  /* Same treatment as hero media — cover + upper framing of warrior */
  object-fit: cover;
  object-position: center 20%;
  background: #050305 !important;
  mix-blend-mode: normal;
  /* Match hero brightness/contrast so mark looks as sharp */
  filter: brightness(1.06) contrast(1.1) saturate(1.08);
  opacity: 1;
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.logo-mark-video.is-playing {
  opacity: 1;
}
.logo-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 14px rgba(200, 16, 46, 0.2);
  pointer-events: none;
  z-index: 1;
}
.logo-brand-lockup:hover .logo-mark {
  transform: translateZ(0) scale(1.03);
  transition: transform 0.25s ease;
}

/* Static PNG fallback */
.logo-nav-static {
  height: 96px;
  width: auto;
  max-height: 120px;
  display: block;
  background: transparent !important;
  object-fit: contain;
  filter: none;
}

/* Never cover hero background with warrior video */
.hero-warrior-stage,
.hero-warrior-video,
.hero-warrior-glow,
#warrior-thrust-video {
  display: none !important;
}

/* Legacy fallback */
.logo-nav {
  height: 150px;
  width: auto;
  max-height: 192px;
}

.logo-brand-lockup:hover .logo-live-frame {
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 14px rgba(0, 180, 255, 0.22));
}

/* Header height matches 80–110px logo mark */
.site-header-inner {
  align-items: center;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
header .site-header-inner {
  min-height: 96px;
}
@media (min-width: 768px) {
  header .site-header-inner {
    min-height: 108px;
  }
}
@media (min-width: 1024px) {
  header .site-header-inner {
    min-height: 118px;
  }
}

.logo-footer {
  height: 100px;
  width: auto;
  max-height: 110px;
}

/* Hero: large badge above headline */
.logo-hero-badge {
  height: 96px;
  width: auto;
  max-height: 100px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .logo-hero-badge {
    height: 110px;
    max-height: 120px;
  }
}
.logo-hero-mark {
  height: 28px;
  width: auto;
}

/* Centered brand lockup — entire area is the home link */
.logo-brand-lockup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  text-decoration: none;
  line-height: 0;
  background: transparent !important;
  border: none;
  padding: 0;
  cursor: pointer;
}
.logo-brand-lockup:hover .logo-nav,
.logo-brand-lockup:focus-visible .logo-nav {
  transform: scale(1.06);
  filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 20px rgba(0, 180, 255, 0.28));
}
.logo-brand-lockup:focus-visible {
  outline: 2px solid var(--spartan-red);
  outline-offset: 4px;
  border-radius: 8px;
}
.logo-brand-text {
  display: none;
  flex-direction: column;
  justify-content: center;
  line-height: 1.05;
  text-align: left;
}
@media (min-width: 640px) {
  .logo-brand-text {
    display: flex;
  }
}

/* Hero badge link — centered, clickable home */
.hero-logo-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.25rem;
  background: transparent;
  text-decoration: none;
  line-height: 0;
}
.hero-logo-link:hover .logo-hero-badge {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 28px rgba(0, 180, 255, 0.35));
}
.logo-hero-badge {
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Typography helpers */
.font-display {
  font-family: "Oswald", "Arial Black", Impact, sans-serif;
  letter-spacing: 0.02em;
}

.font-body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

/* Spartan red utility */
.text-spartan-red { color: var(--spartan-red); }
.bg-spartan-red { background-color: var(--spartan-red); }
.border-spartan-red { border-color: var(--spartan-red); }
.text-spartan-gold { color: var(--spartan-gold); }
.bg-spartan-gold { background-color: var(--spartan-gold); }

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #fff 0%, var(--spartan-gold-light) 40%, var(--spartan-red) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-gold {
  background: linear-gradient(135deg, var(--spartan-gold-light), var(--spartan-gold), #8a7019);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Metallic borders */
.metal-border {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--spartan-gray-2), var(--spartan-gray-2)) padding-box,
    linear-gradient(135deg, var(--spartan-silver), var(--spartan-gold), var(--spartan-red)) border-box;
}

/* Glow effects */
.glow-red {
  box-shadow: 0 0 20px rgba(200, 16, 46, 0.4), 0 0 40px rgba(200, 16, 46, 0.15);
}
.glow-gold {
  box-shadow: 0 0 20px rgba(201, 162, 39, 0.35), 0 0 40px rgba(201, 162, 39, 0.12);
}

/* Pulsing CTA */
.btn-pulse {
  animation: pulse-glow 2.2s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.6), 0 4px 20px rgba(200, 16, 46, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(200, 16, 46, 0), 0 4px 30px rgba(200, 16, 46, 0.6);
  }
}

/* =========================================================
   HERO SPLIT — left copy · right spear video (full height)
   Text never overlaps video; perfect readable spacing
   ========================================================= */
.hero-section {
  position: relative;
  display: flex;
  align-items: stretch;
  /* Full viewport — video can use almost all vertical space (bigger) */
  min-height: 100svh;
  /* --header-stack is measured from the fixed announcement+nav wrapper by
     initNav(); the fallback covers no-JS and first paint */
  padding-top: calc(var(--header-stack, 10.5rem) + 0.75rem + env(safe-area-inset-top, 0px));
  padding-bottom: 0;
  overflow: hidden;
  /* Fully transparent: the hero sits directly on the page-wide lightning
     ambience (body::before) so it blends seamlessly into the home page */
  background: transparent;
}
/* Anchor targets land below the fixed header on native + Lenis scrolling */
[id] {
  scroll-margin-top: calc(var(--header-stack, 10.5rem) + 0.75rem);
}

/* Split: copy left | BIG video right (majority of width + full height) */
.hero-split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(58vh, 70vh);
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: calc(100svh - var(--header-stack, 10.5rem) - 0.75rem);
  align-items: stretch;
  gap: 0;
  box-sizing: border-box;
  padding: 0;
}
@media (min-width: 900px) {
  .hero-split {
    /* Copy gets real room; the cropped video fills its panel anyway */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: 1fr;
    min-height: calc(100svh - var(--header-stack, 10.5rem) - 0.75rem);
    padding-left: clamp(1rem, 3vw, 2.75rem);
    gap: 0;
    align-items: stretch;
  }
}
@media (min-width: 1200px) {
  .hero-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}
@media (min-width: 1536px) {
  .hero-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Left copy column */
.hero-copy {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.25rem 1.15rem 1.5rem;
  text-align: center;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
@media (min-width: 900px) {
  .hero-copy {
    margin: 0;
    max-width: 38rem;
    text-align: left;
    padding: 1.75rem 1.25rem 2rem 0;
    justify-content: center;
  }
}
@media (min-width: 1280px) {
  .hero-copy {
    max-width: 42rem;
    padding-right: 1.5rem;
  }
}

/*
 * Right media — edge-to-edge right side, full column height (BIG).
 * Video scales with contain = full frame, max size that fits the panel.
 */
.hero-media {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 58vh;
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  border-radius: 0;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}
/* No panel-local backdrop: the page-wide lightning layer (body::before)
   shows straight through, so the hero video sits on the exact same storm
   as the rest of the page */
.hero-media video {
  z-index: 1;
}
@media (min-width: 900px) {
  .hero-media {
    /* Pin to the split row's full height (top/bottom insets size it; forcing
       100svh here overflowed the section and clipped the badge bottom) */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 47%;
    min-height: 0;
    height: auto;
    max-height: none;
    align-self: stretch;
    background: transparent;
  }
}
@media (min-width: 1200px) {
  .hero-media {
    width: 48%;
  }
}
@media (min-width: 1536px) {
  .hero-media {
    width: 50%;
  }
}

/* Short desktop windows (laptops, restored windows): compress the copy stack
   so tagline → trust chips all fit above the fold with the header clear */
@media (min-width: 900px) and (max-height: 830px) {
  .hero-section .hero-copy {
    padding-top: 0.75rem;
    padding-bottom: 1rem;
  }
  .hero-section .hero-tagline {
    margin-bottom: 0.6rem;
  }
  .hero-section .hero-title {
    margin-bottom: 0.45rem;
  }
  .hero-section .hero-title .hero-line {
    font-size: clamp(1.9rem, 3.4vh + 1rem, 3.3rem);
  }
  .hero-section .hero-title .hero-line-2 {
    font-size: clamp(1.75rem, 3vh + 0.9rem, 3rem);
  }
  .hero-section .hero-subhead {
    margin-bottom: 0.4rem;
  }
  .hero-section .hero-rule {
    margin: 0.5rem 0;
  }
  .hero-section .hero-sub {
    margin-bottom: 0.9rem;
    font-size: 0.98rem;
    line-height: 1.55;
  }
  .hero-section .hero-ctas {
    margin-bottom: 0.75rem;
    gap: 0.7rem;
  }
  .hero-section .hero-trust {
    margin-top: 2rem;
    padding-top: 0.75rem;
    gap: 0.45rem;
  }
  .hero-section .hero-trust-chip {
    font-size: 0.72rem;
    padding: 0.28rem 0.6rem;
  }
}

/* Soft vignette — no hard crop */
.hero-media-glow {
  /* Disabled: any panel-local shading creates a visible box against the
     page-wide storm. Keep the element (markup references it) but paint nothing. */
  display: none;
}

/* Legacy full-bleed wrap (unused on home, kept safe) */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: #0a0608;
}
.hero-video-wrap--warrior {
  background: radial-gradient(ellipse at 70% 45%, #1a0a12 0%, #050305 70%);
}
.hero-poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
  transition: opacity 0.85s ease;
}
.hero-poster-img.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/*
 * MAX SIZE + FULL FRAME:
 * contain keeps entire 720×1280 visible; absolute fill of a tall/wide panel
 * makes it as large as the viewport allows without cropping.
 */
.hero-video,
.hero-video--split {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: none;
  will-change: opacity;
  filter: brightness(1.06) contrast(1.07) saturate(1.05);
  opacity: 0;
  transition: opacity 0.7s ease;
  background: transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.hero-video.is-ready,
.hero-video--split.is-ready {
  opacity: 1;
}
/* Size the element to the actual video box (not the whole panel) and round
   the corners to the badge's own radius, clipping the frame's black corners
   so the page storm shows through — no rectangle, no seam */
.hero-video--split {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 666 / 964;
  object-fit: cover;
  border-radius: 22.5% / 15.6%;
}
.hero-video-wrap video,
.hero-video--warrior {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

/* Kill leftover floating layers */
.warrior-stage,
.hero-watermark,
.hero-stamp,
.hero-warrior-column,
.hero-warrior-fg,
.hero-vignette,
.hero-scanlines,
.hero-overlay,
.hero-overlay-bright,
.hero-overlay-epic,
.hero-overlay-warrior {
  display: none !important;
}

/* Content column helpers (legacy class still used by some JS) */
.hero-inner {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.15rem;
  box-sizing: border-box;
}

.hero-tagline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  color: var(--spartan-gold-light);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
@media (min-width: 640px) {
  .hero-tagline { font-size: 0.8rem; letter-spacing: 0.18em; }
}
.hero-tagline-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--spartan-red);
  box-shadow: 0 0 8px rgba(200, 16, 46, 0.8);
  flex-shrink: 0;
  animation: pulse 1.5s ease infinite;
}

/* SPARTAN LETTERING — always fully visible in left column */
.hero-title {
  font-family: "Oswald", "Arial Black", Impact, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0 0 0.85rem;
  padding: 0.1rem 0;
  max-width: 100%;
  overflow: visible;
  perspective: none;
}
.hero-title .hero-line {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* Sized for split column — never clipped by video */
  font-size: clamp(1.75rem, 5.2vw + 0.35rem, 3.85rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  filter: none;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 0 rgba(180, 180, 180, 0.3),
    0 8px 28px rgba(0, 0, 0, 0.7),
    0 0 36px rgba(212, 175, 55, 0.28);
}
.hero-title .hero-line-1 {
  color: #ffffff;
}
.hero-title .hero-line-2 {
  margin-top: 0.1em;
  font-size: clamp(1.55rem, 4.6vw + 0.3rem, 3.35rem);
  text-shadow:
    0 1px 0 rgba(255, 220, 220, 0.35),
    0 2px 0 rgba(200, 16, 46, 0.35),
    0 8px 28px rgba(0, 0, 0, 0.7),
    0 0 32px rgba(200, 16, 46, 0.4);
}
@media (min-width: 900px) {
  .hero-title .hero-line {
    font-size: clamp(2.15rem, 3.4vw + 0.5rem, 4rem);
  }
  .hero-title .hero-line-2 {
    font-size: clamp(1.9rem, 3vw + 0.4rem, 3.5rem);
  }
}
.hero-title .hero-sword {
  color: #ff2d4a;
  text-shadow: 0 0 18px rgba(200, 16, 46, 0.95);
  white-space: nowrap;
}
/* GSAP chars — no parent clip */
.hero-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  will-change: transform, opacity;
  color: inherit;
  text-shadow: inherit;
}

.hero-subhead {
  margin: 0 0 0.85rem;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: clamp(0.95rem, 2.2vw, 1.35rem);
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--spartan-gold-light);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}

.hero-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 280px;
  margin: 0.75rem auto 1rem;
}
@media (min-width: 900px) {
  .hero-rule { margin-left: 0; margin-right: 0; }
}
.hero-rule-bar {
  flex: 1;
  height: 3px;
  background: linear-gradient(90deg, var(--spartan-red), var(--spartan-gold));
  box-shadow: 0 0 14px rgba(200, 16, 46, 0.55);
}
.hero-rule-diamond {
  width: 10px;
  height: 10px;
  background: var(--spartan-gold);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.8);
}

.hero-sub {
  margin: 0 0 1.5rem;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  color: #e8e8e8;
  font-weight: 500;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.hero-sub strong { color: #fff; }
@media (min-width: 900px) {
  .hero-sub { margin-left: 0; margin-right: 0; }
}

.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  /* Clear gap before trust badges — no overlap with pulse glow */
  margin-bottom: 0;
  width: 100%;
  position: relative;
  z-index: 2;
}
@media (min-width: 640px) {
  .hero-ctas {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
}
@media (min-width: 900px) {
  .hero-ctas {
    justify-content: flex-start;
  }
}

.hero-phone-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.75rem;
  padding: 0.9rem 1.25rem;
  border-radius: 1rem;
  background: var(--spartan-red);
  color: #fff !important;
  font-weight: 900;
  text-decoration: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 10px 36px rgba(200, 16, 46, 0.5);
}
@media (min-width: 640px) {
  .hero-phone-cta {
    width: auto;
    min-width: 16rem;
    flex: 1 1 auto;
  }
}
.hero-cta-icon {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}
.hero-cta-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
  text-align: left;
}
.hero-cta-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.95;
}
.hero-cta-number {
  margin-top: 0.2rem;
  font-size: clamp(1.15rem, 3vw, 1.55rem);
  font-weight: 900;
  letter-spacing: 0.01em;
}

.hero-quote-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 3.75rem;
  padding: 0.9rem 1.5rem;
  border-radius: 1rem;
  border: 2px solid var(--spartan-gold);
  background: rgba(0, 0, 0, 0.45);
  color: var(--spartan-gold-light) !important;
  font-weight: 900;
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  text-decoration: none;
  backdrop-filter: blur(8px);
}
@media (min-width: 640px) {
  .hero-quote-cta {
    width: auto;
    flex: 0 1 auto;
  }
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.65rem;
  justify-content: center;
  /* Clear air under Call / Free Quote buttons: the pulse-glow ring on the
     Call button reaches ~30px past its edge, so this gap must clear that
     plus normal breathing room, or the chips read as butted up against it */
  margin-top: 3rem;
  padding-top: 1rem;
  position: relative;
  z-index: 1;
}
@media (min-width: 640px) {
  .hero-trust { margin-top: 3.5rem; padding-top: 1.1rem; }
}
@media (min-width: 900px) {
  .hero-trust {
    justify-content: flex-start;
    margin-top: 3.75rem;
    padding-top: 1.25rem;
  }
}
.hero-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: #eee;
  backdrop-filter: blur(6px);
}
@media (min-width: 640px) {
  .hero-trust-chip { font-size: 0.85rem; padding: 0.55rem 0.95rem; }
}
/* Free Quote — permanent gold energy glow */
.btn-glow-gold,
.hero-quote-cta {
  animation: gold-glow-pulse 2.4s ease-in-out infinite;
  box-shadow:
    0 0 0 1px rgba(245, 215, 110, 0.25) inset,
    0 8px 32px rgba(201, 162, 39, 0.35),
    0 0 48px rgba(201, 162, 39, 0.28);
}
.hero-quote-cta:hover {
  animation: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.2) inset,
    0 12px 40px rgba(201, 162, 39, 0.55),
    0 0 70px rgba(245, 215, 110, 0.45) !important;
}
@keyframes gold-glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(245, 215, 110, 0.2) inset,
      0 8px 28px rgba(201, 162, 39, 0.3),
      0 0 40px rgba(201, 162, 39, 0.22);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(245, 215, 110, 0.4) inset,
      0 10px 36px rgba(201, 162, 39, 0.5),
      0 0 64px rgba(245, 215, 110, 0.4);
  }
}
/* (hero-trust-chip base rules defined above — no duplicate override) */
/* Desktop FG warrior (clickable) */
.hero-warrior-fg {
  height: min(58vh, 520px);
  width: auto;
  max-width: 100%;
  filter:
    drop-shadow(0 24px 48px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 40px rgba(0, 160, 255, 0.35))
    drop-shadow(0 0 20px rgba(200, 16, 46, 0.25));
  transition: transform 0.4s ease, filter 0.4s ease;
}
.hero-warrior-link:hover .hero-warrior-fg {
  transform: scale(1.04) translateY(-6px);
  filter:
    drop-shadow(0 28px 56px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 55px rgba(0, 180, 255, 0.5))
    drop-shadow(0 0 28px rgba(200, 16, 46, 0.4));
}

/* Service card forge effect */
.service-card {
  position: relative;
  background: linear-gradient(160deg, #1a1a1a 0%, #111 100%);
  border: 1px solid #2a2a2a;
  transition: border-color 0.4s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s;
  overflow: hidden;
}
/* The 3D tilt (preserve-3d) can hit-test the card plane above its children,
   swallowing clicks on CTA links — lift all content onto its own layer */
.service-card > * {
  position: relative;
  z-index: 1;
}
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(200,16,46,0.12), transparent 50%, rgba(201,162,39,0.08));
  opacity: 0;
  transition: opacity 0.4s;
  /* Decorative overlays must never eat clicks on the card's links */
  pointer-events: none;
}
.service-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(200,16,46,0.15), transparent 30%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  animation: spin-slow 8s linear infinite;
  pointer-events: none;
}
.service-card:hover {
  border-color: var(--spartan-red);
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 30px rgba(200,16,46,0.2);
}
.service-card:hover::before,
.service-card:hover::after {
  opacity: 1;
}
.service-card .icon-wrap {
  transition: transform 0.4s, color 0.4s, filter 0.4s;
}
.service-card:hover .icon-wrap {
  transform: scale(1.15);
  color: var(--spartan-gold);
  filter: drop-shadow(0 0 12px rgba(201,162,39,0.6));
}
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

/* Icon energy wave */
.energy-wave {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--spartan-red);
  opacity: 0;
  transform: scale(0.8);
}
.service-card:hover .energy-wave {
  animation: energy-pulse 1.2s ease-out infinite;
}
@keyframes energy-pulse {
  0% { opacity: 0.7; transform: scale(0.85); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* Trust badge */
.trust-badge {
  background: linear-gradient(145deg, #1f1f1f, #151515);
  border: 1px solid #333;
  transition: all 0.3s;
}
.trust-badge:hover {
  border-color: var(--spartan-gold);
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(201,162,39,0.15);
}

/* Testimonial card */
.testimonial-card {
  background: linear-gradient(160deg, #1c1c1c, #121212);
  border: 1px solid #2a2a2a;
  min-width: 0;
  flex-shrink: 0;
}

/* Stars */
.star-gold {
  color: var(--spartan-gold);
  filter: drop-shadow(0 0 4px rgba(201,162,39,0.5));
}

/* Form styles */
.form-input {
  width: 100%;
  background: #141414;
  border: 1px solid #333;
  color: #fff;
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  transition: border-color 0.3s, box-shadow 0.3s;
  outline: none;
}
.form-input:focus {
  border-color: var(--spartan-red);
  box-shadow: 0 0 0 3px rgba(200,16,46,0.2);
}
.form-input::placeholder {
  color: #666;
}
.form-input.error {
  border-color: #ef4444;
}

/* Multi-step form */
.form-step {
  display: none;
}
.form-step.active {
  display: block;
  animation: step-in 0.4s ease;
}
@keyframes step-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.step-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #333;
  transition: all 0.3s;
}
.step-dot.active {
  background: var(--spartan-red);
  box-shadow: 0 0 10px rgba(200,16,46,0.6);
  transform: scale(1.2);
}
.step-dot.done {
  background: var(--spartan-gold);
}

/* Sticky mobile call bar */
.mobile-call-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: linear-gradient(180deg, transparent, rgba(10,10,10,0.98) 20%);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
}
@media (min-width: 768px) {
  .mobile-call-bar { display: none; }
}

/* Nav */
.nav-scrolled {
  background: rgba(10, 10, 10, 0.95) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(200, 16, 46, 0.3);
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
}

/* Area chips */
.area-chip {
  background: #1a1a1a;
  border: 1px solid #333;
  transition: all 0.25s;
}
.area-chip:hover {
  border-color: var(--spartan-red);
  background: rgba(200,16,46,0.1);
  color: #fff;
  transform: scale(1.05);
}

/* Counter */
.stat-number {
  font-variant-numeric: tabular-nums;
}

/* Reveal helpers (GSAP will override) */
.reveal {
  opacity: 0;
  transform: translateY(40px);
}

/* FAQ accordion — even spacing, readable Q/A */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.faq-item {
  padding: 1.15rem 1.25rem !important;
  margin: 0;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  line-height: 1.4;
  color: #f5f5f5;
  padding: 0.15rem 0;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary .faq-icon {
  flex-shrink: 0;
  line-height: 1;
  margin-top: 0.1rem;
  transition: transform 0.2s ease, color 0.2s ease;
}
.faq-item[open] summary .faq-icon {
  transform: rotate(45deg);
  color: var(--spartan-red);
}
.faq-item .faq-answer,
.faq-item > p {
  margin: 0.9rem 0 0.15rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: #b0b0b0;
  font-size: 0.98rem;
  line-height: 1.65;
}

/* Map placeholder */
.map-placeholder {
  background:
    radial-gradient(circle at 45% 55%, rgba(200,16,46,0.25) 0%, transparent 25%),
    radial-gradient(circle at 55% 48%, rgba(201,162,39,0.15) 0%, transparent 20%),
    linear-gradient(160deg, #1a1a1a, #0f0f0f);
  position: relative;
  overflow: hidden;
}
.map-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(200,16,46,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,16,46,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Lead magnet (base shell; spacing refined below) */
.lead-magnet {
  background:
    linear-gradient(135deg, rgba(200,16,46,0.15), rgba(10,10,10,0.9)),
    #141414;
  border: 1px solid rgba(200,16,46,0.4);
}

/* Final CTA banner */
.cta-banner {
  background:
    linear-gradient(135deg, rgba(200,16,46,0.9), rgba(154,12,35,0.95)),
    #c8102e;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
}

/* Button micro-interactions */
.btn-spartan {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}
.btn-spartan::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}
.btn-spartan:hover {
  transform: translateY(-2px);
}
.btn-spartan:active::after {
  width: 300px;
  height: 300px;
}
.btn-spartan:active {
  transform: translateY(0);
}

/* Skip link a11y */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  background: var(--spartan-red);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 16px;
}

/* ========== WARRIOR STAGE (battling Spartan + spear/lightning) ========== */
.warrior-stage {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.warrior-stage-epic .warrior-float-main {
  right: 2%;
  top: 48%;
  width: min(48vw, 420px);
  opacity: 0.92;
}
@media (min-width: 1024px) {
  /* Desktop: animated layer sits under FG column — slightly ghosted to avoid double */
  .warrior-stage-epic .warrior-float-main {
    right: 3%;
    width: min(40vw, 380px);
    opacity: 0.35;
  }
  .warrior-stage-epic .warrior-float-ghost {
    opacity: 0.12;
  }
}
.warrior-aura {
  position: absolute;
  right: 6%;
  top: 46%;
  width: min(58vw, 520px);
  height: min(58vw, 520px);
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0, 160, 255, 0.28) 0%, rgba(200, 16, 46, 0.16) 38%, transparent 68%);
  filter: blur(10px);
  opacity: 0.9;
}
.warrior-aura-pulse {
  animation: aura-breathe 3s ease-in-out infinite;
}
@keyframes aura-breathe {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.75; }
  50% { transform: translateY(-50%) scale(1.12); opacity: 1; }
}
.warrior-ground-glow {
  position: absolute;
  right: 8%;
  bottom: 8%;
  width: min(40vw, 360px);
  height: 40px;
  background: radial-gradient(ellipse, rgba(0, 160, 255, 0.35), transparent 70%);
  filter: blur(12px);
}
.warrior-float {
  position: absolute;
  will-change: transform, filter;
}
.warrior-float-main {
  right: 4%;
  top: 50%;
  width: min(42vw, 340px);
  transform: translateY(-50%);
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 36px rgba(0, 160, 255, 0.4));
  z-index: 2;
}
.warrior-float-ghost {
  right: 16%;
  top: 36%;
  width: min(26vw, 200px);
  opacity: 0.2;
  filter: blur(1.5px) drop-shadow(0 0 24px rgba(200, 16, 46, 0.45));
  z-index: 1;
}
.warrior-img {
  width: 100%;
  height: auto;
  display: block;
  background: transparent !important;
  object-fit: contain;
}
.warrior-spear-glow {
  position: absolute;
  left: 8%;
  top: 12%;
  width: 8px;
  height: 55%;
  background: linear-gradient(180deg, rgba(125,211,252,0.9), rgba(56,189,248,0.2), transparent);
  filter: blur(6px);
  opacity: 0.7;
  transform: rotate(-8deg);
  border-radius: 50%;
  pointer-events: none;
}
.spear-arc {
  position: absolute;
  left: -5%;
  top: 18%;
  width: 40%;
  height: 40%;
  border: 2px solid transparent;
  border-top-color: rgba(125, 211, 252, 0.55);
  border-radius: 50%;
  opacity: 0;
  transform: rotate(-20deg);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
}
.lightning-bolt {
  position: absolute;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, transparent, #7dd3fc, #fff, #38bdf8, transparent);
  box-shadow: 0 0 12px #38bdf8, 0 0 28px rgba(56, 189, 248, 0.8);
  opacity: 0;
  border-radius: 2px;
  transform-origin: top center;
}
.bolt-1 { right: 24%; top: 12%; transform: rotate(12deg); }
.bolt-2 { right: 10%; top: 16%; transform: rotate(-18deg); width: 2px; }
.bolt-3 { right: 30%; top: 20%; transform: rotate(28deg); width: 2px; }
.bolt-4 { right: 18%; top: 8%; transform: rotate(-6deg); width: 2px; }
.bolt-5 { right: 36%; top: 24%; transform: rotate(38deg); width: 2px; }
.energy-orb {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #f5d76e 40%, #c8102e 100%);
  box-shadow: 0 0 16px rgba(201, 162, 39, 0.9), 0 0 32px rgba(200, 16, 46, 0.5);
  opacity: 0.7;
}
.orb-1 { right: 32%; top: 28%; }
.orb-2 { right: 6%; top: 52%; }
.orb-3 { right: 38%; top: 60%; }
.orb-4 { right: 14%; top: 68%; }
.orb-5 { right: 22%; top: 40%; width: 6px; height: 6px; }
.lightning-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 78% 45%, rgba(125, 211, 252, 0.3), transparent 55%);
  opacity: 0;
  mix-blend-mode: screen;
}
.battle-sparks span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f5d76e;
  box-shadow: 0 0 10px #f5d76e, 0 0 20px #c8102e;
  opacity: 0;
  right: 20%;
  top: 40%;
}
.battle-sparks span:nth-child(2) { right: 28%; top: 48%; }
.battle-sparks span:nth-child(3) { right: 14%; top: 36%; }
.battle-sparks span:nth-child(4) { right: 24%; top: 55%; }
.battle-sparks span:nth-child(5) { right: 32%; top: 42%; }
.battle-sparks span:nth-child(6) { right: 18%; top: 50%; }
@media (max-width: 1023px) {
  .warrior-float-main { right: -4%; width: min(52vw, 280px); top: 62%; opacity: 0.45; }
  .warrior-float-ghost { display: none; }
  .warrior-aura { right: -8%; opacity: 0.45; top: 58%; }
  .warrior-ground-glow { opacity: 0.4; }
}

/* ========== ENERGY BUTTONS & MICRO-INTERACTIONS ========== */
.btn-spartan,
a.btn-spartan,
button.btn-spartan {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    filter 0.3s ease;
}
.btn-spartan::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.35) 50%, transparent 80%);
  transform: translateX(-120%) skewX(-18deg);
  transition: transform 0.6s ease;
  z-index: 1;
  pointer-events: none;
}
.btn-spartan:hover::before {
  transform: translateX(120%) skewX(-18deg);
}
.btn-spartan:hover {
  transform: translateY(-3px) scale(1.02);
  filter: brightness(1.05);
}
.btn-spartan:active {
  transform: translateY(0) scale(0.98);
}
/* Red energy glow (primary) */
.btn-spartan.bg-spartan-red:hover,
.btn-spartan.btn-pulse:hover,
.hero-phone-cta:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.15) inset,
    0 8px 28px rgba(200, 16, 46, 0.55),
    0 0 40px rgba(200, 16, 46, 0.45),
    0 0 80px rgba(200, 16, 46, 0.25) !important;
}
/* Gold energy glow (secondary) */
.btn-spartan.border-spartan-gold:hover,
a.btn-spartan[class*="border-spartan-gold"]:hover {
  box-shadow:
    0 0 0 1px rgba(245, 215, 110, 0.35) inset,
    0 8px 28px rgba(201, 162, 39, 0.4),
    0 0 48px rgba(201, 162, 39, 0.35) !important;
  border-color: var(--spartan-gold-light) !important;
}

/* Magnetic / ripple helper */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  pointer-events: none;
  z-index: 2;
}

/* Service cards — red/gold energy hover */
.service-card {
  transform-style: preserve-3d;
  will-change: transform, box-shadow, border-color;
}
.service-card:hover {
  border-color: rgba(200, 16, 46, 0.75) !important;
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(201, 162, 39, 0.25),
    0 0 40px rgba(200, 16, 46, 0.28),
    0 0 70px rgba(201, 162, 39, 0.12) !important;
}
.service-card .icon-wrap {
  position: relative;
}
.service-card:hover .icon-wrap {
  color: var(--spartan-gold) !important;
  filter: drop-shadow(0 0 16px rgba(201, 162, 39, 0.75)) drop-shadow(0 0 8px rgba(200, 16, 46, 0.5));
}

/* Trust badges / area chips glow */
.trust-badge:hover,
.area-chip:hover {
  box-shadow: 0 8px 28px rgba(200, 16, 46, 0.18), 0 0 20px rgba(201, 162, 39, 0.12);
}

/* Nav link micro underline energy */
header nav a {
  position: relative;
  transition: color 0.25s ease;
}
header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--spartan-red), var(--spartan-gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 8px rgba(200, 16, 46, 0.6);
}
header nav a:hover::after {
  transform: scaleX(1);
}

/* Testimonial cards soft lift */
.testimonial-card {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.3s ease;
}
.testimonial-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(201, 162, 39, 0.45);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 24px rgba(201, 162, 39, 0.12);
}

/* Form focus energy */
.form-input:focus {
  border-color: var(--spartan-red) !important;
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.22), 0 0 20px rgba(200, 16, 46, 0.15) !important;
}

/* Section ambient parallax layers */
.parallax-layer {
  will-change: transform;
}

/* Cursor glow trail optional (desktop) */
.cursor-glow {
  position: fixed;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(circle, rgba(200, 16, 46, 0.12) 0%, rgba(201, 162, 39, 0.06) 35%, transparent 70%);
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cursor-glow.is-on {
  opacity: 1;
}

/* Stronger reveal defaults (GSAP drives final state) */
.reveal {
  opacity: 0;
  transform: translateY(48px) scale(0.96);
  will-change: transform, opacity;
}

/* Reduced motion */
/* CSS fallback if GSAP missing */
.logo-live--css-anim .logo-live-warrior {
  animation: logo-breathe 3s ease-in-out infinite;
}
.logo-live--css-anim .logo-spear-glow {
  animation: logo-spear 1.6s ease-in-out infinite;
}
@keyframes logo-breathe {
  0%, 100% { transform: scale(1) translateY(0) rotate(0deg); }
  20% { transform: scale(0.9) translateY(4px) rotate(-3deg); }
  35% { transform: scale(1.22) translateY(-10px) rotate(2deg); }
  50% { transform: scale(0.94) translateY(3px) rotate(-2deg); }
  65% { transform: scale(1.26) translateY(-12px) rotate(3deg); }
  80% { transform: scale(1.04) translateY(-2px) rotate(1deg); }
}
@keyframes logo-spear {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn-pulse { animation: none; }
  html { scroll-behavior: auto; }
  .warrior-stage { display: none; }
  .cursor-glow { display: none; }
  .logo-live-warrior,
  .logo-spear-glow,
  .logo-live-aura,
  .logo-bolt {
    animation: none !important;
    transform: none !important;
  }
  .reveal, .hero-char {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   SITE-WIDE AESTHETIC + CONVERSION POLISH
   Darker warrior theme · gold/red · big type · big CTAs · mobile
   ========================================================= */

/* Bigger section headings — NEVER apply to About value card titles */
section h2:not(.about-heading):not(.about-value-title),
.section-title {
  font-size: clamp(2rem, 5.5vw, 3.5rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
/* Value titles inside #about must never get these sizes */
#about h2.about-value-title,
#about h3.about-value-title,
#about .about-value-card h2,
#about .about-value-card h3,
.about-section .about-value-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-shadow: none !important;
}
section h3:not(.about-value-title),
.service-card h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.65rem) !important;
  font-weight: 800 !important;
}
.section-kicker {
  color: var(--spartan-red);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.8rem;
}
.section-rule {
  width: 6rem;
  height: 3px;
  background: linear-gradient(90deg, var(--spartan-red), var(--spartan-gold));
  margin: 0.75rem auto 1.25rem;
  box-shadow: 0 0 12px rgba(200,16,46,0.5);
}
.section-rule-left {
  margin-left: 0;
  margin-right: auto;
}

/* Universal large CTAs */
.btn-spartan,
a.btn-spartan,
button.btn-spartan {
  min-height: var(--cta-min-h);
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
.btn-lg {
  min-height: 3.75rem;
  font-size: 1.125rem !important;
  padding: 1rem 1.75rem !important;
  border-radius: 0.85rem !important;
}
.btn-xl {
  min-height: 4.25rem;
  font-size: 1.25rem !important;
  padding: 1.15rem 2rem !important;
  border-radius: 1rem !important;
}
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--spartan-red);
  transition: color 0.2s, gap 0.2s, text-shadow 0.2s;
}
.cta-link:hover {
  color: var(--spartan-gold-light);
  gap: 0.75rem;
  text-shadow: 0 0 12px rgba(201,162,39,0.4);
}

/* Trust strip under hero / mid-page */
.trust-strip {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(8, 8, 8, 0.6) 100%);
  border-top: 1px solid rgba(200,16,46,0.35);
  border-bottom: 1px solid rgba(212,175,55,0.2);
  padding: 1.25rem 0;
}
.trust-strip-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1rem;
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: linear-gradient(145deg, #141414, #0c0c0c);
  border: 1px solid rgba(212,175,55,0.28);
  font-size: 0.85rem;
  font-weight: 700;
  color: #e8e8e8;
  box-shadow: 0 0 0 1px rgba(200,16,46,0.08) inset;
  white-space: nowrap;
}
.trust-pill .icon {
  color: var(--spartan-gold);
  font-size: 1rem;
  line-height: 1;
}
.trust-pill strong {
  color: var(--spartan-gold-light);
}

/* Stats bar (20+ Years, etc.) — pushed well below hero / call CTAs */
.stats-bar {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.5), rgba(6, 6, 6, 0.55));
  border-color: rgba(200,16,46,0.25) !important;
  position: relative;
  margin-top: 1.5rem;
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
  clear: both;
}
@media (min-width: 768px) {
  .stats-bar {
    margin-top: 2rem;
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
.stats-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.04), transparent);
  pointer-events: none;
}
.stat-number {
  font-size: clamp(2.5rem, 6vw, 3.75rem) !important;
  font-weight: 900 !important;
  text-shadow: 0 0 30px rgba(200,16,46,0.25);
}

/* Service cards darker metal */
.service-card {
  background: linear-gradient(165deg, #141414 0%, #0a0a0a 55%, #080808 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}
.service-card::before {
  background: linear-gradient(135deg, rgba(200,16,46,0.18), transparent 45%, rgba(212,175,55,0.12)) !important;
}

/* Trust badges row (licensed / insured etc) */
.badge-wall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}
@media (min-width: 640px) {
  .badge-wall { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .badge-wall { grid-template-columns: repeat(6, 1fr); }
}
.badge-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.4rem;
  padding: 1.1rem 0.75rem;
  border-radius: 1rem;
  background: linear-gradient(160deg, #151515, #0a0a0a);
  border: 1px solid rgba(212,175,55,0.22);
  min-height: 6.5rem;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.badge-tile:hover {
  transform: translateY(-4px);
  border-color: var(--spartan-red);
  box-shadow: 0 10px 28px rgba(200,16,46,0.2), 0 0 20px rgba(212,175,55,0.1);
}
.badge-tile .emoji {
  font-size: 1.5rem;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(212,175,55,0.35));
}
.badge-tile span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ddd;
}

/* Review scoreboard */
.review-scoreboard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(200,16,46,0.12), rgba(12,12,12,0.95) 40%, rgba(212,175,55,0.08));
  border: 1px solid rgba(212,175,55,0.3);
  margin-bottom: 2rem;
}
.review-scoreboard .btn-spartan {
  margin-left: 0;
}
@media (min-width: 768px) {
  .review-scoreboard .btn-spartan.ml-auto {
    margin-left: auto;
  }
}
@media (max-width: 767px) {
  .review-scoreboard {
    flex-direction: column;
    align-items: flex-start;
  }
  .review-scoreboard .btn-spartan {
    width: 100%;
    justify-content: center;
  }
}
.review-score-big {
  font-family: "Oswald", Impact, sans-serif;
  font-size: clamp(2.75rem, 6vw, 3.5rem);
  font-weight: 900;
  line-height: 1;
  color: var(--spartan-gold-light);
  text-shadow: 0 0 24px rgba(212,175,55,0.4);
}
.review-stars-lg {
  font-size: 1.5rem;
  letter-spacing: 0.1em;
}

/* Mid-page conversion band */
.conv-band {
  background:
    linear-gradient(135deg, rgba(140,10,30,0.95), rgba(90,8,20,0.98)),
    #8f0a1f;
  border-top: 1px solid rgba(245,215,110,0.35);
  border-bottom: 1px solid rgba(245,215,110,0.2);
  padding: 2.5rem 1rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.conv-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(245,215,110,0.12), transparent 60%);
  pointer-events: none;
}
.conv-band h3 {
  font-family: "Oswald", sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.5rem;
  position: relative;
}
.conv-band p {
  color: rgba(255,255,255,0.9);
  margin-bottom: 1.25rem;
  position: relative;
}
.conv-band-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  position: relative;
}

/* Darker trust badges in why section */
.trust-badge {
  background: linear-gradient(145deg, #161616, #0a0a0a) !important;
  border: 1px solid rgba(212,175,55,0.18) !important;
}

/* Mobile sticky bar — larger touch targets */
.mobile-call-bar {
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom)) !important;
  gap: 10px !important;
  background: linear-gradient(180deg, transparent, rgba(5,5,5,0.98) 18%) !important;
  border-top: 1px solid rgba(200,16,46,0.35);
}
.mobile-call-bar a {
  min-height: 52px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1rem !important;
  font-weight: 900 !important;
  border-radius: 0.85rem !important;
}

/* Footer stronger */
footer {
  background: #030303 !important;
  border-top: 1px solid rgba(200,16,46,0.25) !important;
}
.footer-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* Header CTAs larger on desktop */
@media (min-width: 768px) {
  header .btn-spartan {
    min-height: 2.85rem;
    font-size: 0.95rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* Top bar bolder */
.top-bar-warrior {
  background: linear-gradient(90deg, #8f0a1f, #c8102e 40%, #8f0a1f) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(245,215,110,0.25);
}

/* Form submit larger */
#quote-form [type="submit"],
#quote-form [data-next] {
  min-height: 3.25rem !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
}

/* Mobile typography & spacing fixes */
@media (max-width: 767px) {
  .hero-ctas {
    width: 100%;
  }
  .hero-phone-cta,
  .hero-quote-cta {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
  .hero-phone-cta span {
    align-items: center !important;
    text-align: center !important;
  }
  .logo-mark--nav { --logo-mark-h: 80px; }
  header .site-header-inner {
    min-height: 88px !important;
  }
  .hero-section {
    padding-top: calc(var(--header-stack, 8.5rem) + 0.5rem + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 0 !important;
  }
  .hero-copy {
    padding: 0.5rem 1.1rem 0.9rem;
  }
  .hero-tagline {
    margin-bottom: 0.6rem;
  }
  .hero-split {
    grid-template-rows: auto minmax(56vh, 68vh);
    min-height: auto;
  }
  .hero-media {
    min-height: 56vh;
    position: relative;
    width: 100%;
    height: 100%;
  }
  .stats-bar {
    margin-top: 1.25rem;
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  .hero-sub {
    margin-bottom: 0.85rem;
  }
  .hero-rule {
    margin: 0.35rem 0 0.6rem;
  }
  .hero-trust {
    margin-top: 2.25rem;
    padding-top: 0.85rem;
  }
  /* Consistent section breathing room — do not crush About */
  section:not(.hero-section):not(.about-section) {
    padding-top: 3.75rem !important;
    padding-bottom: 3.75rem !important;
  }
  .about-section {
    padding-top: 3.75rem !important;
    padding-bottom: 3.75rem !important;
  }
  #faq,
  #lead-magnet,
  #contact {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  .faq-item {
    padding: 1.05rem 1.1rem !important;
  }
  .about-intro {
    gap: 1.75rem;
    margin-bottom: 2rem;
  }
  .about-values {
    gap: 0.9rem;
    margin-bottom: 1.5rem;
  }
  .about-value-card {
    padding: 1.2rem 1.15rem;
  }
  /* Extra bottom pad so sticky bar doesn't cover content */
  main {
    padding-bottom: 5.5rem;
  }
  footer {
    padding-bottom: 6.5rem !important;
  }
}

/* Area chips stronger */
.area-chip {
  border-color: rgba(212,175,55,0.2) !important;
  font-weight: 600;
}
.area-chip:hover {
  border-color: var(--spartan-red) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(200,16,46,0.2);
}

/* Lead magnet — breathing room for title, copy, form */
.lead-magnet {
  background:
    linear-gradient(135deg, rgba(200,16,46,0.2), rgba(5,5,5,0.95)),
    #0a0a0a !important;
  border: 1px solid rgba(212,175,55,0.35) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 40px rgba(200,16,46,0.1);
  padding: clamp(1.75rem, 4vw, 3rem) !important;
}
.lead-magnet-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.lead-magnet-kicker {
  margin: 0 0 0.65rem !important;
  letter-spacing: 0.2em;
}
.lead-magnet-title {
  margin: 0 0 1rem !important;
  line-height: 1.12 !important;
}
.lead-magnet-desc {
  margin: 0 0 1.15rem !important;
  line-height: 1.65;
  color: #d4d4d4;
  max-width: 36rem;
}
.lead-magnet-list {
  margin: 0 0 1.5rem !important;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  color: #a3a3a3;
  font-size: 0.95rem;
  line-height: 1.45;
}
.lead-magnet-list li {
  margin: 0;
  padding: 0;
}
#lead-magnet-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
  align-items: stretch;
}
@media (min-width: 640px) {
  #lead-magnet-form {
    flex-direction: row;
    align-items: center;
  }
  #lead-magnet-form .form-input {
    min-height: 3.25rem;
  }
  #lead-magnet-form button {
    min-height: 3.25rem;
    flex-shrink: 0;
  }
}
.lead-magnet-note {
  margin: 0.25rem 0 0 !important;
  line-height: 1.45;
}
#lead-magnet-success {
  margin-top: 0.75rem !important;
}

/* FAQ darker + open state */
.faq-item {
  background: #0a0a0a !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}
.faq-item[open] {
  border-color: rgba(200, 16, 46, 0.4) !important;
  box-shadow: 0 0 24px rgba(200, 16, 46, 0.1);
}

/* =========================================================
   ABOUT SECTION — 1 photo, 2×2 value cards, text never escapes
   ========================================================= */
#about.about-section,
.about-section {
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 !important;
  background: rgba(10, 10, 10, 0.45);
  overflow: hidden;
}
#about .container,
.about-section .container {
  max-width: 72rem;
  width: 100%;
  box-sizing: border-box;
}
.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  margin: 0 0 2.5rem;
  width: 100%;
  min-width: 0;
}
@media (min-width: 900px) {
  .about-intro {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 2.5rem;
    margin-bottom: 2.75rem;
    align-items: center;
  }
}
.about-copy {
  min-width: 0;
  max-width: 100%;
}
.about-kicker {
  margin: 0 0 0.75rem;
  color: var(--spartan-red);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.about-heading,
#about .about-heading,
.about-section .about-heading,
#about h1.about-heading {
  margin: 0 0 1.25rem !important;
  padding: 0 !important;
  font-size: clamp(1.85rem, 4vw, 3rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.02em;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  text-shadow: none !important;
}
.about-lead {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #d4d4d4;
  max-width: 100%;
}
.about-body {
  margin: 0 0 1rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: #a3a3a3;
  max-width: 100%;
}
.about-body:last-child {
  margin-bottom: 0;
}

/* ONE photo */
.about-photo {
  margin: 0;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-radius: 1rem;
  overflow: hidden;
  border: 3px solid var(--spartan-red);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  background: #0a0a0a;
  box-sizing: border-box;
}
.about-photo img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  object-position: center top;
  vertical-align: middle;
}
.about-photo-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 1.25rem 1.15rem 1.1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.5) 60%, transparent 100%);
  box-sizing: border-box;
}
.about-photo-caption .font-display {
  margin: 0;
  line-height: 1.15;
  font-size: clamp(1.25rem, 3vw, 1.5rem) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}
.about-photo-role {
  margin: 0.3rem 0 0;
  color: var(--spartan-gold);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
}
.about-photo-tag {
  margin: 0.3rem 0 0;
  color: #d4d4d4;
  font-size: 0.85rem;
  line-height: 1.4;
}

/*
 * Value cards — 2×2 only (never 4 skinny columns).
 * Simple border so text cannot “escape” complex metal borders.
 */
.about-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 0 0 1.75rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .about-values {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.15rem;
  }
}
/* Explicitly kill any 4-col rule that could crush cards */
@media (min-width: 1100px) {
  .about-values {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
  }
}

.about-value-card {
  margin: 0;
  padding: 1.25rem 1.2rem;
  border-radius: 0.85rem;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: #121212;
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 0 0 1px rgba(200, 16, 46, 0.08) inset;
}

/* Titles — NEVER inherit giant section h2/h3 sizes */
.about-value-title,
.about-value-card h3,
.about-value-card h2,
#about .about-value-title,
#about .about-value-card h3,
#about .about-value-card h2,
.about-section .about-value-title,
.about-section .about-value-card h3,
.about-section .about-value-card h2 {
  all: unset;
  display: block !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  font-family: "Oswald", Impact, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.02em !important;
  color: var(--spartan-gold) !important;
  text-transform: none !important;
  text-shadow: none !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

.about-value-text,
.about-value-card p,
#about .about-value-text,
#about .about-value-card p,
.about-section .about-value-text,
.about-section .about-value-card p {
  all: unset;
  display: block !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #b0b0b0 !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

.about-creds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.75rem;
}
.about-creds span {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  border-radius: 0.5rem;
  background: #121212;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c8c8c8;
  line-height: 1.3;
}
.about-story-link {
  margin: 0;
  padding: 0;
}

/* Brand chips */
/* ---------- Reviews: slow continuous marquee ---------- */
#testimonial-track,
#testimonial-track.testimonial-marquee {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: reviews-marquee var(--marquee-duration, 108s) linear infinite;
  will-change: transform;
}
#testimonial-track .testimonial-card,
.testimonial-marquee .testimonial-card {
  flex: 0 0 min(84vw, 380px) !important;
  width: min(84vw, 380px) !important;
  min-width: min(84vw, 380px) !important;
  max-width: min(84vw, 380px) !important;
  white-space: normal;
  box-sizing: border-box;
}
#testimonial-track.testimonial-marquee:hover,
#testimonial-track.testimonial-marquee:focus-within,
#testimonial-track.testimonial-marquee.is-paused {
  animation-play-state: paused !important;
}
@keyframes reviews-marquee {
  from { transform: translateX(0); }
  /* two identical card sets; offset by half the total minus half a gap */
  to { transform: translateX(calc(-50% - 12px)); }
}
.testimonial-marquee.marquee-static {
  animation: none;
}
/* Soft fade at the viewport edges so cards glide in and out elegantly */
#reviews .overflow-hidden {
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

/* ---------- Clashing Spartan spears (replaces the swords emoji) ---------- */
.spears-clash {
  width: 1.35em;
  height: 1.35em;
  display: inline-block;
  vertical-align: -0.2em;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.28));
}
.spears-clash .spear {
  transform-origin: 32px 57px;
}
.spears-clash .spear-l {
  animation: spear-clash-l 3.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.spears-clash .spear-r {
  animation: spear-clash-r 3.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes spear-clash-l {
  0%, 24% { transform: translateX(-7.5px) rotate(20deg); }
  38% { transform: translateX(-9px) rotate(13deg); }
  46%, 58% { transform: translateX(-6.5px) rotate(28deg); }
  80%, 100% { transform: translateX(-7.5px) rotate(20deg); }
}
@keyframes spear-clash-r {
  0%, 24% { transform: translateX(7.5px) rotate(-20deg); }
  38% { transform: translateX(9px) rotate(-13deg); }
  46%, 58% { transform: translateX(6.5px) rotate(-28deg); }
  80%, 100% { transform: translateX(7.5px) rotate(-20deg); }
}
.spears-clash .spark {
  opacity: 0;
  transform-origin: 32px 27px;
  animation: spear-spark 3.6s linear infinite;
}
@keyframes spear-spark {
  0%, 44% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  49% { opacity: 1; transform: scale(1.3) rotate(15deg); }
  56% { opacity: 0.8; transform: scale(0.9) rotate(25deg); }
  66%, 100% { opacity: 0; transform: scale(0.25) rotate(40deg); }
}
@media (prefers-reduced-motion: reduce) {
  .spears-clash .spear,
  .spears-clash .spark {
    animation: none;
  }
  .spears-clash .spark {
    opacity: 0.9;
    transform: scale(1);
  }
}

/* Real manufacturer thumbnails (mono set from Brandon's drive), rendered
   white via filter so they sit on the dark storm like etched steel */
.brand-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 2.75rem;
}
.brand-logo {
  height: clamp(30px, 4.2vw, 46px);
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.72;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.brand-logo:hover {
  opacity: 1;
  transform: translateY(-2px);
}
/* Rheem's round mark sits in a wide canvas — compensate so it reads at the
   same optical size as the wordmark logos */
.brand-logo[alt="Rheem"] {
  height: clamp(44px, 6vw, 66px);
}
@media (max-width: 640px) {
  .brand-logo-row {
    gap: 1.1rem 1.6rem;
  }
  .brand-logo {
    height: 30px;
  }
}

.brand-chip {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 0.85rem;
  font-weight: 700;
  color: #ccc;
  transition: border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.brand-chip:hover,
.brand-chip.is-featured {
  border-color: rgba(212,175,55,0.5);
  color: var(--spartan-gold-light);
  box-shadow: 0 0 16px rgba(212,175,55,0.15);
}

/* ==========================================================================
   "Forged in the Storm" design pass — appended last to win the cascade
   ========================================================================== */

/* --- Living storm: the page ambience flickers like distant lightning --- */
body::before {
  animation: storm-breathe 8s linear infinite;
}
@keyframes storm-breathe {
  0%, 78% { filter: brightness(1); }
  81% { filter: brightness(1.5); }
  83% { filter: brightness(1.06); }
  86% { filter: brightness(1.32); }
  90%, 100% { filter: brightness(1); }
}

/* --- Gold-foil stat numbers with a shine sweep when the count lands --- */
.stat-number {
  background: linear-gradient(
    115deg,
    #a98a1f 0%,
    #e8c95c 22%,
    #f7e6a2 40%,
    #c9a227 58%,
    #f5d76e 78%,
    #a98a1f 100%
  );
  background-size: 220% 100%;
  background-position: 50% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(201, 162, 39, 0.25));
}
.stat-number.stat-shine {
  animation: stat-shine 1.2s ease-out 1;
}
@keyframes stat-shine {
  from { background-position: 160% 0; }
  to { background-position: -60% 0; }
}

/* --- Spear-tip list bullets in service cards --- */
.service-card ul li {
  position: relative;
  list-style: none;
  padding-left: 1.35em;
}
.service-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 0.95em;
  height: 0.95em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12 L10 7.5 L12.8 12 L10 16.5 Z' fill='%23c9a227'/%3E%3Crect x='2' y='11.1' width='9' height='1.8' rx='0.9' fill='%23a08320'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- Section underlines draw in (GSAP scaleX; origin per alignment) --- */
.section-rule {
  transform-origin: center center;
}
.section-rule-left {
  transform-origin: left center;
}

/* --- Riveted steel section dividers (echo the badge frame) --- */
.steel-divider {
  position: relative;
  height: 14px;
  background:
    radial-gradient(circle at 10px 50%, rgba(232, 235, 240, 0.5) 0 1.7px, rgba(0, 0, 0, 0) 3.4px) 0 0 / 96px 100% repeat-x,
    linear-gradient(180deg, #34363b 0%, #1b1c1f 45%, #26272b 55%, #101114 100%);
  border-top: 1px solid rgba(201, 162, 39, 0.35);
  border-bottom: 1px solid rgba(201, 162, 39, 0.18);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}

/* --- Forms: gold focus glow (keyboard + pointer) --- */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: rgba(201, 162, 39, 0.65) !important;
  box-shadow:
    0 0 0 2px rgba(201, 162, 39, 0.5),
    0 0 18px rgba(201, 162, 39, 0.22);
}

/* --- FAQ open state: red rail + rotating icon --- */
.faq-item {
  border-left: 3px solid transparent;
  transition: border-color 0.3s;
}
.faq-item[open] {
  border-left: 3px solid var(--spartan-red) !important;
}
.faq-icon {
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
}
.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  color: var(--spartan-gold);
}

/* --- Mobile call bar: phone rings for attention every few seconds --- */
.call-ring {
  display: inline-block;
  transform-origin: 50% 25%;
  animation: call-ring 6s ease-in-out infinite;
}
@keyframes call-ring {
  0%, 86%, 100% { transform: rotate(0deg); }
  88% { transform: rotate(-14deg); }
  90% { transform: rotate(12deg); }
  92% { transform: rotate(-9deg); }
  94% { transform: rotate(6deg); }
  96% { transform: rotate(-3deg); }
  98% { transform: rotate(0deg); }
}

/* --- Footer: drifting ember line instead of a flat border --- */
footer.bg-black {
  position: relative;
  border-top-color: transparent !important;
}
footer.bg-black::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #c8102e, #c9a227, #7a0a1c, #c9a227, #c8102e);
  background-size: 200% 100%;
  animation: ember-drift 9s linear infinite;
  opacity: 0.85;
}
@keyframes ember-drift {
  from { background-position: 0% 0; }
  to { background-position: 200% 0; }
}

/* --- Forged-steel headline: BUILT DIFFERENT. in brushed silver ---
   GSAP splits the line into transformed .hero-char spans; background-clip
   on the parent doesn't survive child transforms, so each char carries its
   own steel gradient (reads as faceted forged metal) --- */
.hero-title .hero-line-1,
.hero-title .hero-line-1 .hero-char {
  background: linear-gradient(
    168deg,
    #f8f9fb 0%,
    #c7ccd6 32%,
    #ffffff 50%,
    #9aa1ad 74%,
    #e8ebf0 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffffff; /* fallback */
  text-shadow: none;
}

/* --- GHL embedded quote form --- */
.ghl-form-wrap {
  border-radius: 0.75rem;
  overflow: hidden;
}
.ghl-form-wrap iframe {
  display: block;
  width: 100%;
  /* form_embed.js resizes to content; this keeps the panel sane if it's blocked */
  min-height: 1050px;
}

/* --- Blog typography + cards --- */
.blog-body p {
  color: #cfcfd2;
  line-height: 1.75;
  margin-bottom: 1.15rem;
  font-size: 1.02rem;
}
.blog-body h2 {
  font-family: "Oswald", "Arial Black", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.45rem;
  color: #ffffff;
  margin: 2rem 0 0.75rem;
}
.blog-body a {
  color: var(--spartan-red);
}
.blog-body a:hover {
  color: var(--spartan-gold-light);
}
.blog-card {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 16, 46, 0.6) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 26px rgba(200, 16, 46, 0.18);
}

/* --- Final CTA: twin badge medallions flanking the banner --- */
.cta-banner {
  position: relative;
  overflow: hidden;
}
.cta-medallion {
  position: absolute;
  top: 50%;
  height: min(72%, 300px);
  width: auto;
  aspect-ratio: 666 / 964;
  object-fit: cover;
  border-radius: 22.5% / 15.6%;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(201, 162, 39, 0.35),
    0 0 34px rgba(0, 0, 0, 0.4);
  z-index: 1;
  pointer-events: none;
  display: none;
}
.cta-medallion--left {
  left: clamp(1rem, 4vw, 4.5rem);
  animation: medallion-float-l 7s ease-in-out infinite;
}
.cta-medallion--right {
  right: clamp(1rem, 4vw, 4.5rem);
  animation: medallion-float-r 7s ease-in-out infinite;
}
@media (min-width: 1100px) {
  .cta-medallion {
    display: block;
  }
}
/* Counter-phase float: when one rises the other settles — moving in sequence */
@keyframes medallion-float-l {
  0%, 100% { transform: translateY(calc(-50% - 9px)) rotate(-2deg); }
  50% { transform: translateY(calc(-50% + 9px)) rotate(1deg); }
}
@keyframes medallion-float-r {
  0%, 100% { transform: translateY(calc(-50% + 9px)) rotate(2deg); }
  50% { transform: translateY(calc(-50% - 9px)) rotate(-1deg); }
}

/* --- Reduced motion: still, but never broken --- */
@media (prefers-reduced-motion: reduce) {
  body::before,
  .call-ring,
  footer.bg-black::before,
  .stat-number.stat-shine,
  .cta-medallion--left,
  .cta-medallion--right {
    animation: none;
  }
  .cta-medallion {
    transform: translateY(-50%);
  }
}


/* --- AEO Answer Capsule & City Grid Additions --- */
.aeo-city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
.aeo-city-card {
  background: rgba(20, 20, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.aeo-city-card:hover {
  transform: translateY(-3px);
  border-color: rgba(200, 16, 46, 0.55);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}