/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


/* ============================================================
   HybridLeadFormSection — Lead form section for the /hybrid page.

   Layout:
     Badge (inline or rail) → Heading → 2-col content row
     (body copy | lead form) → full-width illustration.

   Background gradient continues from the homepage LeadFormSection
   and blends seamlessly into SiteFooter.
   ============================================================ */


/* ---- Section background ---------------------------------- */

.hlf-section {
  background: linear-gradient(
    180deg,
    rgba(229, 223, 213, 0.5) 0%,
    rgba(222, 215, 204, 0.5) 100%
  ), var(--background);
}


/* ---- Heading --------------------------------------------- */

.hlf__heading {
  max-width:     800px;
  margin-bottom: 4rem;   /* 64px gap before content row */
}


/* ---- 2-column content row -------------------------------- */

.hlf__content {
  display:     flex;
  gap:         2rem;   /* 32px */
  align-items: stretch;
  width:       100%;
}

.hlf__copy {
  flex:           1;
  padding-right:  2rem;
  display:        flex;
  flex-direction: column;
  gap: 2rem;
}

.hlf__copy .hp-body {
  flex-shrink: 0;
}

.hlf__illustration {
  margin-top: auto;
}

.hlf__form-wrap {
  flex: 0 0 31rem;   /* 496px */
}


/* ---- Illustration (inside left copy column) -------------- */

.hlf__illustration {
  display:    block;
  width:      100%;
  height:     auto;
}


/* ============================================================
   Small desktop (≤1280px)
   ============================================================ */

@media (max-width: 1280px) {
  .hlf__copy {
    padding-right: 0;
  }
}


/* ============================================================
   Tablet (≤991px)
   ============================================================ */

@media (max-width: 991px) {
  .hlf__heading {
    margin-bottom: 2.25rem;   /* 36px */
  }

  .hlf__content {
    flex-direction: column;
  }

  .hlf__copy {
    padding-right: 0;
  }

  .hlf__illustration {
    display: none;
  }

  .hlf__form-wrap {
    flex:  none;
    width: 100%;
  }
}


/* ============================================================
   Mobile (≤767px)
   ============================================================ */

@media (max-width: 767px) {
  .hlf__heading {
    margin-bottom: 2rem;
  }
}