/* ============================================================================
   CYPRESS & PINE — LANDING PAGE LAYER
   ----------------------------------------------------------------------------
   Load AFTER cp-system.css, on paid landing pages only.

   This adds exactly one component to the existing system: a split hero that
   puts the lead form above the fold next to the headline, instead of leaving
   it in the .leadband further down the page. It reuses .leadform, .field,
   .btn and every token already defined in cp-system.css. No new colours, no
   new type, no new spacing values.
   ============================================================================ */

.hero.hero-split {
  align-items: center;
  min-height: clamp(600px, 88vh, 880px);
}

.hero.hero-split .hero-in {
  display: grid;
  grid-template-columns: 1.05fr 430px;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
  padding-top: 72px;
  padding-bottom: 72px;
}

/* The headline column keeps every hero style already defined. Only the
   measure tightens, because it now shares the row with the form. */
.hero.hero-split .hero-copy h1 { max-width: 13ch; }
.hero.hero-split .hero-copy p  { max-width: 42ch; }
.hero.hero-split .cta-row { margin-top: 28px; }

/* .leadform is the existing component. It only needs to stop being full width
   and pick up a touch more contrast, since it now sits over photography
   rather than over the solid .leadband. */
.hero.hero-split .leadform {
  background: rgba(9, 15, 11, .82);
  border-color: rgba(255, 255, 255, .22);
  padding: clamp(26px, 2.4vw, 34px);
}
.hero.hero-split .leadform .field { margin-bottom: 15px; }
.hero.hero-split .leadform h3 { margin-bottom: 4px; }

@media (max-width: 1000px) {
  .hero.hero-split .hero-in { grid-template-columns: 1fr 380px; }
}

@media (max-width: 900px) {
  .hero.hero-split { min-height: 0; align-items: flex-end; }
  .hero.hero-split .hero-in {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .hero.hero-split .hero-copy h1,
  .hero.hero-split .hero-copy p { max-width: none; }
}

/* The stock .hero-scrim is a vertical gradient, tuned for copy sitting at the
   bottom of the hero. The split hero centres its content, so it needs a
   horizontal pass as well or the headline and the form both float over bright
   water. His vertical gradient is kept underneath, unchanged. */
.hero.hero-split .hero-scrim {
  background:
    linear-gradient(90deg,
      rgba(10,16,12,.78) 0%, rgba(10,16,12,.56) 40%,
      rgba(10,16,12,.34) 62%, rgba(10,16,12,.58) 100%),
    linear-gradient(180deg,
      rgba(10,16,12,.46) 0%, rgba(10,16,12,.30) 30%,
      rgba(10,16,12,.62) 62%, rgba(10,16,12,.88) 100%);
}

/* The headline shares the row now, so it comes down a step from the full
   width hero scale. Same clamp shape, smaller ceiling. */
.hero.hero-split .hero-copy h1 { font-size: clamp(40px, 4.6vw, 64px); }

@media (max-width: 900px) {
  .hero.hero-split .hero-scrim {
    background: linear-gradient(180deg,
      rgba(10,16,12,.58) 0%, rgba(10,16,12,.42) 26%,
      rgba(10,16,12,.70) 60%, rgba(10,16,12,.90) 100%);
  }
}