/* ==========================================================================
   Iron Shore Roofing — landing-page conversion layer (styles)
   --------------------------------------------------------------------------
   Companion to lp-optimize.js. Mobile is treated as the primary case because
   paid social traffic is overwhelmingly phones.

   Brand is untouched: same blue (#1a5fd4 / #3b7ef5), same orange CTA, same
   Barlow Condensed / Oswald / Open Sans, same square-cornered language. Only
   arrangement, emphasis and density change.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Enable the reordering
   --------------------------------------------------------------------------
   lp-optimize.js writes `order` onto each child of <main>; that only takes
   effect once main is a flex container.
   -------------------------------------------------------------------------- */
main.lp-ordered {
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   1. MOBILE — the priority case
   ========================================================================== */
@media (max-width: 1023px) {

  /* ---- Critical repair -------------------------------------------------
     The hero was laying the copy and the form out side by side on phones:
     the headline was crushed into a ~180px column and the form card ran off
     the right edge of the screen, unusable. Force a single column. */
  .hero.ch-on .hero-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  .hero.ch-on .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    padding-right: 0 !important;
  }

  .hero.ch-on .hero-form-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 0 4px !important;
    box-sizing: border-box;
  }

  .hero.ch-on .hero-inner {
    padding-bottom: 18px !important;
  }
}

/* ==========================================================================
   1b. PHONES ONLY — band sizing and type scale
   --------------------------------------------------------------------------
   These are vw-derived, so they must not leak into tablet. Scoped to 1023px
   they made the scene band 46vw = 377px on an 820px tablet, which pushed the
   headline and form off the first screen entirely. The structural stacking
   above still applies to the whole sub-1024 range; only the sizing is here.
   ========================================================================== */
@media (max-width: 767px) {

  /* Every pixel above the form costs conversions on paid traffic, so the
     scene band, headline and supporting copy are all tightened. */
  .hero.ch-on .hero-inner {
    padding-top: calc(46vw + 14px) !important;
  }

  .hero.ch-on .ch-media {
    height: 46vw !important;
  }

  .hero.ch-on .hero-content h1 {
    font-size: clamp(30px, 8vw, 40px) !important;
    line-height: 1.02 !important;
    margin-bottom: 10px !important;
  }

  .hero.ch-on .ch-eyebrow {
    margin-bottom: 8px !important;
  }

  .hero.ch-on .hero-accent {
    margin-bottom: 10px !important;
  }

  .hero.ch-on .hero-subtitle {
    font-size: 15px !important;
    line-height: 1.45 !important;
    margin-bottom: 16px !important;
  }

  /* Two buttons across instead of stacked full-width: saves ~60px of scroll
     directly above the form without losing either action. */
  .hero.ch-on .hero-ctas {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  .hero.ch-on .hero-ctas .btn-primary,
  .hero.ch-on .hero-ctas .btn-outline {
    width: 100% !important;
    padding: 14px 8px !important;
    font-size: 13px !important;
    text-align: center;
    box-sizing: border-box;
  }

  /* Trust strip sits under the form as reinforcement, not competition. */
  .hero.ch-on .ch-trustbar {
    margin-top: 16px !important;
  }
}

/* Small phones — reclaim a little more above the form. */
@media (max-width: 400px) {
  .hero.ch-on .hero-inner {
    padding-top: calc(43vw + 12px) !important;
  }

  .hero.ch-on .ch-media {
    height: 43vw !important;
  }

  .hero.ch-on .hero-ctas .btn-primary,
  .hero.ch-on .hero-ctas .btn-outline {
    font-size: 12px !important;
    letter-spacing: 0.2px;
  }
}

/* ==========================================================================
   2. The form card — the page's primary action
   ========================================================================== */
.hero-form-card {
  border: 1px solid rgba(59, 126, 245, 0.30);
  box-shadow: 0 24px 60px rgba(4, 8, 15, 0.55);
}

/* Reassurance under the card heading. */
.lp-reassure {
  margin: 8px 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #9fb0c6;
}

/* Proof row under the submit button — last thing read before acting. */
.lp-formtrust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 14px 0 0;
  padding: 12px 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.lp-formtrust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: Oswald, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #b7c4d4;
}

.lp-formtrust svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: var(--color-primary-light, #3b7ef5);
}

@media (max-width: 400px) {
  .lp-formtrust {
    gap: 6px 12px;
  }

  .lp-formtrust li {
    font-size: 9.5px;
    letter-spacing: 0.8px;
  }
}

/* ==========================================================================
   3. Density — paid traffic should reach proof faster
   ========================================================================== */
@media (max-width: 1023px) {
  .section-padding {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  .cta-band {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* The stat bar is the first credibility beat after the hero — give it more
   presence than a passing strip. */
.stat-bar .stat-value {
  letter-spacing: -0.5px;
}

@media (max-width: 767px) {
  .stat-bar .stat-label {
    font-size: 10px !important;
    letter-spacing: 1.2px !important;
  }
}

/* ==========================================================================
   4. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-form-card {
    transition: none !important;
  }
}


/* ==========================================================================
   Hero eyebrow legibility on the photo hero
   --------------------------------------------------------------------------
   The eyebrow was brand blue, which worked against the old video hero's flat
   navy panel. The current hero is a photograph whose sky is blue in exactly
   that corner, so blue-on-blue left the line close to unreadable. White with
   a soft shadow reads cleanly over any part of a photo.
   ========================================================================== */
.hero.ch-on .ch-eyebrow {
  color: #ffffff !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65);
}