/* =====================================================================
   NestFlo — homepage hero (photo bleeding off the right edge)

   Loaded by index.html only, after styles.css. In its own file so the
   hero can be iterated on without touching styles.css and its
   bump-?v=N-on-every-page convention.

   Every class is prefixed dc- or hero-bleed- so it can never collide
   with the sitewide .lp-* landing styles already in styles.css.

   The previous version of this file was a two column split: copy on
   solid navy, photo in its own column beside it. The photo now runs off
   the right edge instead, at full height. The important property is
   unchanged and deliberate: at desktop width NO TEXT SITS ON THE PHOTO,
   so nothing here is doing legibility work. The gradient exists only to
   dissolve the photo's left edge into the navy field.
   ===================================================================== */

.dc-hero {
  position: relative; overflow: hidden;
  background: var(--brand-deep);
  min-height: clamp(440px, 52vw, 600px);
  display: flex; align-items: center;
  padding-block: clamp(36px, 5vw, 64px);
}

/* The photo is a real <img>, never a CSS background-image. It is the LCP
   element, and a background image throws away srcset and fetchpriority
   and loads late. */
.hero-bleed-img {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 72%; height: 100%;
  object-fit: cover; object-position: 42% 50%;
  /* close to the house values used on .ba and .portrait images */
  filter: contrast(1.04) saturate(0.94);
}
/* Solid navy behind the copy, letting go of the photo before the right
   edge so it bleeds off the screen rather than ending in a hard line. */
.hero-bleed-fade {
  position: absolute; inset: 0;
  /* A long, gentle ramp. The image has a hard left edge, so if the navy is
     still near solid where that edge lands you see a seam between flat navy
     and navy-over-photo-texture. The image starts further left than the fade
     needs, and the dissolve is spread over half the width to hide it. */
  background: linear-gradient(to right,
    var(--brand-deep) 0%,
    var(--brand-deep) 26%,
    rgba(10,36,71,0.97) 34%,
    rgba(10,36,71,0.86) 42%,
    rgba(10,36,71,0.62) 52%,
    rgba(10,36,71,0.34) 64%,
    rgba(10,36,71,0.14) 78%,
    rgba(10,36,71,0.04) 92%,
    rgba(10,36,71,0.02) 100%);
}
.dc-hero > .container { position: relative; z-index: 2; width: 100%; }
.dc-hero-copy { max-width: 47%; }

/* ---------------------------------------------------------------- type */
.dc-hero h1 {
  /* Sentence case like the rest of the site: five stacked lines of caps read
     as shouting, which is what killed the earlier drafts of this hero.
     1.14 line height so the descenders of line one clear the teal line. */
  color: #fff;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height: 1.14; letter-spacing: -0.02em;
  margin: 0;
}
/* the payoff line is the hook: same size band, teal, its own line */
.dc-hero h1 .dc-hl { display: block; color: var(--teal); }
.dc-hero .dc-hero-sub {
  color: rgba(255,255,255,0.86); font-size: clamp(1rem, 1.5vw, 1.08rem);
  line-height: 1.55; max-width: 42ch; margin: 20px 0 0;
}

/* ------------------------------------------------------------- eyebrow */
/* Two tiers. The region reads first so someone in Waterdown or Georgetown
   can place themselves, and the city list drops to caption weight so it
   costs a line without costing attention. */
.dc-hero .dc-eyebrow {
  display: block; margin-bottom: 18px;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--teal);
}
.dc-hero .eb-region { display: flex; align-items: center; gap: 8px; }
.dc-hero .eb-region .msym { font-size: 17px; }
.dc-hero .eb-cities {
  display: block; margin-top: 3px; margin-left: 25px;
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: rgba(255,255,255,0.60);
}

/* --------------------------------------------------------------- price */
/* The only place the number appears in the hero. */
.dc-price {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 4px 12px; margin: 26px 0 0;
}
.dc-price-lead { color: rgba(255,255,255,0.82); font-size: 1rem; font-weight: 600; }
.dc-price-amt {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 4vw, 2.9rem); line-height: 1;
  letter-spacing: -0.03em; color: var(--teal);
}
.dc-price-reg { color: rgba(255,255,255,0.55); font-size: 0.92rem; }

/* ------------------------------------------------------------ the ask */
/* One button. No .cta-pair, so nothing can sit beside it and compete.
   A min-width so it reads as a deliberate block rather than something that
   shrank to fit its label; the text centres inside it. */
.dc-cta { margin: 26px 0 0; }
.dc-cta .btn { min-width: 320px; }

/* The quieter second action: a line of text, deliberately not a button. */
.dc-call {
  display: flex; align-items: center; gap: 8px; margin: 16px 0 0;
  color: rgba(255,255,255,0.80); font-size: 0.98rem;
}
.dc-call .msym { font-size: 18px; color: rgba(255,255,255,0.62); }
.dc-call a {
  color: #fff; font-weight: 700; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.32);
}
.dc-call a:hover { border-bottom-color: #fff; }


/* =====================================================================
   Below 960 the photo cannot sit beside the copy, so it goes full width
   behind it and the copy centres. This is the ONLY breakpoint where text
   sits on the photo, which is why the scrim goes heavy here and every
   muted text value is lifted.
   ===================================================================== */
@media (max-width: 960px) {
  .dc-hero { min-height: 0; padding-block: 30px 38px; }
  .hero-bleed-img {
    width: 100%; object-position: 42% 46%;
    filter: brightness(0.55) contrast(1.08) saturate(0.88);
  }
  .hero-bleed-fade {
    background: linear-gradient(to bottom,
      rgba(10,36,71,0.66), rgba(10,36,71,0.80) 55%, rgba(10,36,71,0.88));
  }
  .dc-hero-copy { max-width: none; text-align: center; }
  .dc-hero .dc-eyebrow { text-align: center; }
  .dc-hero .eb-region { justify-content: center; }
  .dc-hero .eb-cities { margin-left: 0; line-height: 1.5; }
  .dc-hero .dc-hero-sub { margin-inline: auto; }
  .dc-price, .dc-call { justify-content: center; }
  /* lifted because here, and only here, this text is over the photo */
  .dc-hero .dc-hero-sub { color: rgba(255,255,255,0.94); }
  .dc-hero .eb-cities   { color: rgba(255,255,255,0.82); }
  .dc-hero .dc-call     { color: rgba(255,255,255,0.92); }
}


@media (max-width: 560px) {
  /* full width primary action, nothing squeezed onto its row */
  .dc-cta .btn { width: 100%; justify-content: center; }
}

/* Very narrow phones: scale the headline down so it keeps its intended
   breaks instead of wrapping into fragments. */
@media (max-width: 480px) {
  .dc-hero .dc-eyebrow { font-size: 0.68rem; letter-spacing: 0.06em; }
  .dc-hero .eb-cities { font-size: 0.76rem; }
  .dc-hero h1 { font-size: clamp(1.55rem, 7vw, 1.9rem); }
}


/* The main service section slot used to hold a 16:9 video and now holds a
   portrait still, so it needs its own sizing rule. 4/3 with a cover crop to
   match .gallery-item and .ba figure img elsewhere in styles.css. */
.svc-video img { width: 100%; height: auto; display: block; aspect-ratio: 4/3; object-fit: cover; }