/* "Our Promise" - the checklist and a second estimate form, under the reviews.
 *
 * Ported from the reference build's Free Estimate section. Two columns: what
 * the customer gets on the left, the same two-step form the hero uses on the
 * right, and a row of badges under both.
 *
 * The form is deliberately the SAME markup and the same `.sos-heroform` class
 * as the hero's, not a copy with its own styles. hero-form.js already wires
 * every `.sos-heroform` on the page and lead-capture.js is a delegated listener
 * keyed on name="quote-request", so the second instance works with no new
 * JavaScript at all. Only the input ids differ, so the labels stay unique.
 *
 * Loaded after reviews.css. Same reason: sections.css paints `.sos-band h2`
 * white for the dark bands and this one is light.
 */

/* ---- the band -----------------------------------------------------------
   Grey against the white reviews band above it. The breadcrumb bar directly
   below is also #f5f5f5, so the band takes a bottom border - without it the
   two run together and the breadcrumb reads as part of this section. */

.sos-promise {
  background: #f5f5f5;
  border-bottom: 1px solid #e2e2e2;
  padding: 64px 0;
}

.sos-promise .sos-pr-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: start;
}

.sos-promise .sos-pr-eyebrow {
  display: block;
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #898989;
  margin-bottom: 10px;
}

/* sections.css sets .sos-band h2 to white for the dark bands; restated here
   rather than fought, since this sheet loads after it. */
.sos-promise h2 {
  color: #1a1a1a;
  margin: 0;
  text-align: left;
}

.sos-promise .sos-pr-rule {
  width: 56px;
  height: 3px;
  background: #dd5c26;
  margin: 18px 0 0;
}

/* ---- the checklist ------------------------------------------------------ */

.sos-promise .sos-pr-checks {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}

.sos-promise .sos-pr-checks li {
  position: relative;
  padding: 0 0 0 34px;
  margin: 0 0 15px;
  font-size: 1rem;
  line-height: 1.6;
  color: #3d3d3d;
}

.sos-promise .sos-pr-checks li:last-child {
  margin-bottom: 0;
}

/* The tick is drawn rather than an image or an icon font - one less request,
   and it scales with the text. */
.sos-promise .sos-pr-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dd5c26
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    no-repeat center / 12px 12px;
}

.sos-promise .sos-pr-checks strong {
  color: #1a1a1a;
  font-weight: 700;
}

/* ---- badges -------------------------------------------------------------
   Three, all of them things the client's own site already states. The
   reference's fourth badge, "BBB A+ Rated", is deliberately NOT here: the BBB
   profile lists Snead's as not accredited and rated A, so it is a false claim -
   see wiki/log.md, 2026-08-23. */

.sos-promise .sos-pr-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid #e2e2e2;
}

.sos-promise .sos-pr-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  padding: 11px 16px;
}

.sos-promise .sos-pr-badge svg {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: #dd5c26;
  fill: none;
  stroke-width: 2;
}

/* ---- the form column ----------------------------------------------------
   .sos-heroform brings its own card styling from hero.css. Two properties have
   to be undone: the flex-basis it uses as a hero column, and the z-index that
   lifts it over the site's floating review badge - harmless here, but it only
   exists for the hero. */

.sos-promise .sos-heroform {
  flex: none;
  width: 100%;
  max-width: none;
}

/* ---- responsive --------------------------------------------------------- */

@media all and (max-width: 980px) {
  .sos-promise {
    padding: 48px 0;
  }
  .sos-promise .sos-pr-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .sos-promise .sos-heroform {
    max-width: 460px;
    margin: 0 auto;
  }
}

@media all and (max-width: 620px) {
  .sos-promise .sos-pr-badges {
    gap: 8px;
  }
  .sos-promise .sos-pr-badge {
    font-size: 0.82rem;
    padding: 9px 12px;
  }
}