/* ==========================================================================
   SECTION: HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + var(--sp-12));
  padding-bottom: var(--sp-16);
  background: var(--c-base);
  overflow: hidden;
}

/* Background slideshow — the parallax layer; photo slides crossfade inside it. */
.hero__bg {
  position: absolute; inset: 0;
  will-change: transform;   /* parallax target, driven by js/motion.js */
}

/* OPTION A — colour overlay. A deep-forest scrim, heaviest behind the copy and
   clearing toward the right so the panels still read. Drop the .hero--overlay
   class on the section to get OPTION B: the raw photo, no overlay. */
.hero__scrim {
  position: absolute; inset: 0;
  pointer-events: none;
  display: none;
}
.hero--overlay .hero__scrim {
  display: block;
  background:
    linear-gradient(100deg,
      rgba(11,31,23,0.94) 0%,
      rgba(11,31,23,0.86) 30%,
      rgba(11,31,23,0.62) 58%,
      rgba(11,31,23,0.42) 100%),
    linear-gradient(to bottom, rgba(11,31,23,0.55) 0%, rgba(11,31,23,0) 35%);
}

.hero__slide {
  position: absolute; inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1400ms var(--ease);
}
.hero__slide.is-active { opacity: 1; }

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

/* Ambient sun glow — the one piece of decoration on the page */
.hero__glow {
  position: absolute;
  width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  top: -10%; right: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,166,35,0.22) 0%, rgba(245,166,35,0) 68%);
  animation: hero-drift 16s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes hero-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-4%, 5%, 0) scale(1.10); }
}

/* Fade the image into the section below */
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: linear-gradient(to bottom, rgba(11,31,23,0), var(--c-base));
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 2; }

.hero__content { max-width: 780px; }

/* OPTION B fallback: with no scrim, white type sits straight on a bright sky.
   A soft shadow is the least we can do to keep it legible. */
.hero:not(.hero--overlay) .hero__content {
  text-shadow: 0 2px 18px rgba(11,31,23,0.75), 0 1px 3px rgba(11,31,23,0.6);
}

.hero .t-eyebrow { color: var(--c-energy); }

.hero h1 { color: var(--c-surface); margin-bottom: var(--sp-6); }

/* The amber underline on "up to 50%" — drawn by CSS, animates on load */
.hero .mark {
  position: relative;
  display: inline-block;
  color: var(--c-energy);
}
.hero .mark::after {
  content: ''; position: absolute; left: 0; bottom: 0.06em;
  width: 100%; height: 0.10em;
  background: var(--c-energy); opacity: 0.28;
  transform: scaleX(0); transform-origin: left;
  animation: mark-draw 900ms var(--ease) 700ms forwards;
}
@keyframes mark-draw { to { transform: scaleX(1); } }

.hero__sub {
  font-size: var(--fs-lead); line-height: 1.6; letter-spacing: var(--ls-lead);
  color: var(--c-muted-d);
  max-width: 620px;
  margin-bottom: var(--sp-8);
}

.hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

/* Audience shortcuts. The two CTAs above are what to DO; these are who you
   ARE - a homeowner shouldn't have to read a factory pitch to find out we do
   houses. Targets are the cards in the solutions section. */
.hero__aud {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-6);
  margin-bottom: var(--sp-4);
}
.hero__aud a {
  color: var(--c-surface);
  font-size: var(--fs-small);
  font-weight: var(--w-semi);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(247,245,240,0.32);
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.hero__aud a:hover {
  color: var(--c-energy);
  border-bottom-color: var(--c-energy);
}

.hero__micro {
  font-size: var(--fs-caption);
  color: rgba(247,245,240,0.55);
}

/* Scroll cue */
.hero__cue {
  position: absolute; left: 50%; bottom: var(--sp-6);
  transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  font-size: 10px; font-weight: var(--w-semi);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(247,245,240,0.42);
  text-decoration: none;
}
.hero__cue:hover { color: var(--c-energy); }
.hero__cue span {
  width: 1px; height: 32px;
  background: linear-gradient(to bottom, rgba(247,245,240,0.45), transparent);
  animation: cue-pulse 2.2s ease-in-out infinite;
}
@keyframes cue-pulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }

@media (max-width: 700px) {
  .hero { min-height: auto; padding-top: calc(var(--nav-h) + var(--sp-12)); }
  .hero__actions .btn { width: 100%; }
  .hero__cue { display: none; }
}