/* ============================================================
   LPM Consulting — Homepage Hero V9 ("negative-space overlay")
   ------------------------------------------------------------
   Layers a new V9 modifier (.hero--v9) on top of the existing
   .section .hero shell. The global <nav> and the arch-element
   section below this hero are untouched.

   Fonts (King and Queen, Work Sans) and brand color tokens
   (--blueberry, --cornflower, --periwinkle, --lime, --gardenia,
   --ink) are inherited from styles.css; no duplication here.

   V9 tweak values (locked in design exploration):
     photo x/y     : 0% / 42%   (background-position)
     photo zoom    : 100%       (background-size, auto height)
     headline color: blueberry
     italic accent : "Let's close them." with lime gradient underline
     sub color     : cornflower at weight 600
     CTA           : blueberry pill (.btn--primary) with arrow
   ============================================================ */

.hero--v9 {
  background-image: url('uploads/Photos/leya-hero.jpg');
  background-size: 100% auto;
  background-position: 0% 42%;
  background-repeat: no-repeat;
  background-color: #ECEDEA; /* studio backdrop, matches the photo edge */
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--section-pad-v) + 40px);
  padding-bottom: var(--section-pad-v);
}

/* Override the default centered .container so the text block
   sits flush in the photo's left-hand negative space instead of
   being pulled back to the centered max-width grid. */
.hero--v9 .container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 48px;
  padding-right: 5%;
}

.hero--v9 .hero-content {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero--v9 h1 {
  color: var(--blueberry);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 67px;
  line-height: 1.0;
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin: 0;
}

.hero--v9 h1 em {
  font-style: italic;
  color: var(--blueberry);
}

/* Lime gradient underline only beneath the italic phrase.
   Survives line wraps via box-decoration-break. */
.hero--v9__underline {
  background-image: linear-gradient(
    transparent 67%,
    var(--lime) 67%,
    var(--lime) 88%,
    transparent 88%
  );
  padding: 0 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hero--v9 .hero__subhead {
  color: var(--cornflower);
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.55;
  max-width: 400px;
  margin: 0;
}

.hero--v9__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}


/* ---------- Responsive (aligned to the site's 768px breakpoint) ---------- */
@media (max-width: 768px) {
  .hero--v9 {
    min-height: auto;
    /* Image is 3:2 landscape; on a portrait section, cover makes height
       exact and X is the only knob. Override with a height-based size
       slightly larger than the section so the empty studio backdrop above
       Leya's head overflows out the top and gets cropped. */
    background-size: auto 108%;
    background-position: 60% bottom;
    padding-top: 88vw;
    padding-bottom: 32px;
  }
  /* Cream fade across the lower section so the headline + subhead
     read as ink on near-solid gardenia, not as ink over a striped shirt.
     Stops pulled lower so the clear-photo zone extends down to roughly
     the shirt-button line; cream only blooms from there to the bottom. */
  .hero--v9::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(255, 255, 246, 0.97) 0%,
      rgba(255, 255, 246, 0.94) 22%,
      rgba(255, 255, 246, 0.80) 38%,
      rgba(255, 255, 246, 0) 55%
    );
    z-index: 1;
    pointer-events: none;
  }
  .hero--v9 .container { padding-left: 24px; padding-right: 24px; }
  .hero--v9 .hero-content { max-width: 100%; }
  .hero--v9 h1 { font-size: clamp(40px, 9vw, 64px); }
  .hero--v9 .hero__subhead { font-size: 17px; }
}