/* ==============================================================
   ALTERNATE HERO — photo card, nav-on-image, stats card overlapping
   the photo's bottom edge. Loaded only by index-alt.html so the
   original hero stays intact for comparison.
   ============================================================== */

.heroX {
  padding: 14px 0 clamp(40px, 5vw, 72px);

  /* One inset for the whole hero. The reference sets its type well in from the
     card edge — roughly 6% of the card width — and hangs the nav on the same
     line, which is what makes the block read as composed rather than pinned to
     the corner. Every child below uses this token so that edge stays true. */
  --hx-inset: clamp(26px, 5vw, 76px);
}

/* The hero deliberately breaks out of the page's .wrap. The rest of the site
   sits in a 1200px column with generous gutters; the hero card is a photo and
   wants the width, so it runs nearly edge-to-edge with just enough inset to
   let the rounded corners read. */
.heroX .wrap {
  max-width: none;
  padding: 0 clamp(10px, 1.2vw, 20px);
}

.heroX__card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: clamp(540px, 60vw, 660px);
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

.heroX__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 8319 Summerside. The source is 3:2 and the card is ~2.1:1, so only the
     vertical is cropped: 42% keeps the gables and porch while trimming the
     ornamental grasses that would otherwise fill the lower third and fight
     the stats card. */
  object-position: 50% 42%;
  z-index: -2;
}

/* Two scrims, not one: a left-weighted wash so white type has a dark base,
   plus a bottom fade so the stats card has something to sit against. A single
   flat overlay would grey the whole photo out and lose the reason for having
   one.
   Tuned to THIS photo by measurement, not by eye: the headline zone needs
   α≥0.40 to clear 4.5:1 against white and the sub-copy α≥0.31, so the ramp
   starts at 0.74 for headroom over the bright sky and clears to almost
   nothing by the right edge, where the porch should read. Re-measure if the
   photo changes — a brighter image will silently drop the type below AA. */
.heroX__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(14, 12, 28, .74) 0%,
      rgba(14, 12, 28, .62) 28%,
      rgba(14, 12, 28, .34) 52%,
      rgba(14, 12, 28, .10) 76%,
      rgba(14, 12, 28, .02) 100%),
    linear-gradient(to bottom,
      rgba(14, 12, 28, .26) 0%,
      rgba(14, 12, 28, 0) 24%,
      rgba(14, 12, 28, .06) 72%,
      rgba(14, 12, 28, .18) 100%);
}

/* ---------- nav over the photo ---------- */

.heroX__nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
  padding: clamp(26px, 2.6vw, 34px) var(--hx-inset) 0;
  color: #fff;
}
.heroX__logo {
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: #fff;
}
.heroX__logo span {
  font-weight: 400;
  opacity: .72;
  margin-left: .34em;
}
.heroX__links {
  display: flex;
  gap: clamp(10px, 1.6vw, 28px);
  font-size: .82rem;
  font-weight: 500;
  margin-left: auto;
}
.heroX__links a { color: rgba(255, 255, 255, .82); white-space: nowrap; }
.heroX__links a:hover { color: #fff; }

.heroX__toggle-input { display: none; }
.heroX__toggle {
  display: none;
  margin-left: auto;
  font-size: 1.5rem;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  user-select: none;
}

.heroX__cta {
  margin-left: clamp(18px, 3vw, 44px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, .96);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 9px 9px 9px 18px;
  white-space: nowrap;
}
.heroX__cta span {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .8rem;
}
.heroX__cta:hover { background: #fff; }

@media (max-width: 920px) {
  .heroX__links { display: none; }
  .heroX__toggle { display: block; }
  .heroX__toggle-input:checked ~ .heroX__links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(20, 20, 20, .96);
    padding: 18px var(--hx-inset);
    gap: 16px;
    z-index: 60;
  }
}

/* Below ~560px the pill CTA and the wordmark fight for the same row and the
   CTA gets clipped off the card. The wordmark wins — it's the brand. */
@media (max-width: 560px) {
  .heroX__cta { display: none; }
  .heroX__nav { padding-top: 18px; }
}

/* ---------- headline block ---------- */

.heroX__body {
  position: relative;
  padding: clamp(42px, 7vw, 92px) var(--hx-inset) 0;
  max-width: 860px;
}
.heroX__body h1 {
  color: #fff;
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  letter-spacing: -.03em;
  max-width: 16ch;
}
.heroX__body h1 em {
  font-style: normal;
  /* Plain brand red — no box, no shadow/outline. Legibility trade-off is
     accepted: flat red measures ~1.1:1 against this photo in places, so the
     underline is doing double duty as the visual anchor that keeps the word
     readable as a unit even where the fill itself gets lost in the image. */
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
.heroX__sub {
  margin-top: 16px;
  max-width: 54ch;
  color: rgba(255, 255, 255, .84);
  font-size: clamp(.94rem, 1.25vw, 1.04rem);
  line-height: 1.6;
}

.heroX__addr { margin-top: 26px; max-width: 660px; }
.heroX__sample { margin-top: 10px; font-size: .85rem; }
.heroX__sample a { color: rgba(255, 255, 255, .82); font-weight: 600; }
.heroX__sample a:hover { color: #fff; }
/* The button is a fixed-width island; without a min the input shrinks under
   it and truncates the example address, which is the one bit of copy that
   teaches people the expected format. */
.heroX__addr .addr__input { min-width: 0; padding-right: 8px; }
.heroX__addr .addr__btn { flex: none; }
.heroX__addr .addr__box {
  box-shadow: 0 18px 44px rgba(10, 8, 24, .34);
  border-color: transparent;
}

/* On a phone the inline button squeezes the input down to "Start with", which
   loses the example address that teaches the expected format. Stack instead. */
@media (max-width: 560px) {
  .heroX__addr .addr__box {
    flex-direction: column;
    border-radius: 20px;
    padding: 8px;
    gap: 8px;
  }
  .heroX__addr .addr__input { text-align: center; padding: 12px 10px; }
  .heroX__addr .addr__btn { width: 100%; padding: 14px 20px; }
}

/* ==============================================================
   Stats strip — lives OUTSIDE the hero card, as its own section
   directly below. Three placements were tried (overlapping card,
   inline on the photo, this one); this one won because it's the
   only one that leaves the full photo — porch included — visible,
   rather than a card corner or a wrapped, orphaned stat line
   covering part of it.
   ============================================================== */

.statsBelow {
  background: var(--surface);
  border-bottom: 1px solid var(--grid);
  padding: clamp(20px, 3vw, 30px) 0;
}
.statsBelow__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px);
}
.hstatB {
  /* Stacked, not inline-baseline: an inline pair puts the number and label in
     one flex row sharing a fixed column width, so a wider number (e.g.
     "Monthly") leaves less room for its own label than a shorter one
     ("Live") gets — "Value Updates" wrapped alone while the other three
     didn't, from the same column width. Stacking removes that asymmetry;
     every label gets the full column width regardless of the number above it. */
  padding-left: clamp(16px, 3vw, 40px);
  border-left: 3px solid var(--accent);
}
.hstatB b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.hstatB span {
  /* Same treatment settled on earlier: bold, red, one size up from the
     original .74rem — kept consistent even though the stats moved sections. */
  display: block;
  margin-top: 4px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--accent);
}
@media (max-width: 760px) {
  .statsBelow__row { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
}