/* SiteLyft post-migration fixes — loaded AFTER the Webflow stylesheets so these rules win.
   Every rule documents the defect it repairs. */

/* HERO CARD (homepage): the email field escaped the semi-transparent card.
   Cause: the card carried a hardcoded size — `width: 1143.03px; height: 405.2px` — the fractional
   values you get from dragging a box on the Webflow canvas. A box with a fixed height cannot
   contain content that needs more room, so the form simply spilled out of the bottom.

   Measured against the LIVE site with harness/viewports.mjs (child = .text-field-banner,
   parent = .base-container.overlay), the card is 405px tall at every width from 768px up while its
   content needs more:

       1280px   field bottom 524 vs card bottom 564   inside, 40px spare
       1440px   field bottom 608 vs card bottom 564   ESCAPES by 44px
       1728px+  field bottom 608 vs card bottom 564   ESCAPES by 44px
        768px   field bottom 693 vs card bottom 564   ESCAPES by 129px  (worst)
        991px   field bottom 693 vs card bottom 564   ESCAPES by 129px
         390px  contained — Webflow's own mobile rule already sets height:auto

   So it looked correct only at Webflow's desktop editing width, and broke both wider AND on tablet.

   Fix: let the card size itself to its content. Height becomes auto everywhere, with bottom padding
   so the form never sits flush against the card edge. From 992px up the desktop proportions are
   preserved with min-height:405px (nothing changes at 1280px) and the fixed pixel width becomes
   fluid with the same 1143px ceiling. Below 992px, Webflow's own width rules keep winning — only the
   height constraint is lifted. */
.base-container.overlay {
  height: auto;
  padding-bottom: 32px;
}

@media screen and (min-width: 992px) {
  .base-container.overlay {
    width: 100%;
    max-width: 1143px;
    min-height: 405px;
  }
}

/* HOMEPAGE "About Us" CTA: its wrapper carried `margin-left: 20px` from when it was a direct child
   of the <section> and had to be indented from the viewport by hand. The button has now been moved
   inside .about-content-wrapper (see harness/_lbcbtn.py) so it tracks the content column at every
   breakpoint; that 20px is left over and pushes it out of line with the heading and video above it.
   Zeroed so the three line up. Scoped to the .s modifier, which appears exactly once site-wide. */
.div-block-16.s {
  margin-left: 0;
}

/* HOMEPAGE video box: .div-block-23 is a hardcoded `height: 300px` wrapper around a 16:9 YouTube
   embed that computes to 340-345px tall at desktop, so the iframe hung 40-45px out of its own
   container. Nothing sat directly below it so it was not obvious, but the box is also what paints
   the :hover overlay — at 300px that overlay stopped short of the video it was covering. Height
   auto lets the box match its only child. */
.div-block-23 {
  height: auto;
}

/* HERO CONTENT not centred inside the card (the visible symptom: heading, paragraph and email field
   hug the left while a wide empty area sits on the right).

   Webflow's `.w-layout-blockcontainer` computes to `display: block`, so the `align-items: center` and
   `flex-direction: column` declared on `.base-container` are inert. Whenever Webflow CAPS the inner
   block's width, a capped block with fixed `margin: 0 40px` in a block container sits hard left and
   every pixel of slack lands on the right. Measured, and identical on the live Webflow site:

       480-675px    cap 540px, no slack yet     gap  56 / 56    symmetric
       700px        cap 540px                   gap  56 / 76    20px off
       768px        cap 540px                   gap  56 / 111   55px off
       991px        cap 540px                   gap  56 / 316   260px off
       992-1439px   uncapped, fills the card    gap  56 / 56    symmetric
       1440px+      cap 800px                   gap  56 / 287   231px off

   Auto side margins centre the block. Applied ONLY in the two capped ranges: where the inner is
   uncapped it already fills the card, and auto margins there would let it expand into the card's
   40px gutter and rewrap the headline. The 700px lower bound is where the 540px cap starts to bind
   (below it the content is narrower than the space available, so it is already centred). */
@media screen and (min-width: 700px) and (max-width: 991px) {
  .content-banner-home-2 {
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (min-width: 1440px) {
  .content-banner-home-2 {
    margin-left: auto;
    margin-right: auto;
  }
}