/* ============================================================
   assets/css/landing.css
   Styles for get-a-quote.php and lead-thank-you.php only.
   Loaded after main.css so it can lean on the shared .btn-grad
   hover behaviour and the site's font stack, while keeping all
   landing-specific rules out of the main stylesheet.
   Brand tokens reused from main.css: #0E2A52 / #123563 (deep
   blue), #1E5FBF (link blue), #E0872B / #F2A24C (amber accent).
   ============================================================ */

.lp-body {
  margin: 0;
  background: #fff;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  color: #152743;
  -webkit-font-smoothing: antialiased;
}

/* ── Shared section shell ── */
.lp-sec-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
}

.lp-sec-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 44px;
}

.lp-h2 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #0E2A52;
  margin: 14px 0 12px;
}

.lp-h2-light { color: #fff; }

.lp-sec-sub {
  font-size: 17px;
  line-height: 1.65;
  color: #5A6C87;
  margin: 0;
}

.lp-accent {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  color: #F2A24C;
}

.lp-accent-dark {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  color: #E0872B;
}

/* ── Eyebrow pill ── */
.lp-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 17px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #EAF1FB;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.lp-pill-dark {
  background: #EFF4FB;
  border-color: #DBE5F2;
  color: #1E5FBF;
}

.lp-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F2A24C;
  animation: pulseGlow 2.4s ease-in-out infinite;
}

/* ============================================================
   PLAIN HEADER — brand + phone, no navigation
   ============================================================ */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #0E2A52;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.lp-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lp-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.lp-brand-badge {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.lp-brand-badge img {
  width: 100%;
  height: 100%;
  border-radius: 13px;
  object-fit: contain;
}

.lp-header-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #E0872B, #F2A24C);
  color: #241202;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, transform .25s cubic-bezier(.4,.2,.2,1), box-shadow .3s ease;
}

.lp-header-call:hover {
  background: #FFCE9A;
  color: #3d1f04;
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -16px rgba(242, 162, 76, .85);
}

/* ============================================================
   HERO + FORM
   ============================================================ */
/* The hero aims to fit one screen so the form's submit button is reachable
   without scrolling. min-height (not fixed height) means taller content still
   grows the section rather than being clipped; svh accounts for mobile
   browser chrome. Padding shrinks on short viewports via the media queries
   further down. */
.lp-hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 66px);
  display: flex;
  align-items: center;
  padding: 40px 0 48px;
  overflow: hidden;
}

.lp-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* All the banner's text sits in the top-left of the artwork — anchor the
     crop there so cover only ever trims the empty right/bottom edges, never
     the headline at the top. */
  object-position: left top;
  z-index: -2;
}

.lp-hero-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 1fr minmax(0, 560px);
  gap: 44px;
  align-items: center;
}

/* The promo copy lives inside the banner artwork (left side of the desktop
   image), so the form card is the hero's only HTML child — pin it to the
   right column over the image's empty dark area. */
.lp-hero-inner > .lp-form-card { grid-column: 2; }

/* The clamp floor (38px) is what a phone actually renders — it is set high
   deliberately so the headline never shrinks to a small size on narrow
   screens. Same principle applies to the body copy below: one size for every
   screen rather than a shrunken mobile variant. */
.lp-h1 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(38px, 5.4vw, 60px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -.025em;
  color: #fff;
  margin: 18px 0 16px;
}

.lp-lede {
  font-size: 19px;
  line-height: 1.6;
  color: #C6D6EC;
  margin: 0 0 26px;
  max-width: 44ch;
}

/* The limited-time promo copy (.lp-promo-*, .lp-pill-hot) that used to sit
   left of the form was removed: the offer text is now part of the hero banner
   artwork itself. The page's h1 lives on as a screen-reader-only element so
   the document keeps a top-level heading. */
.lp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lp-trust {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.lp-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 17px;
  line-height: 1.45;
  color: #E3ECF9;
  font-weight: 500;
}

.lp-trust-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(242, 162, 76, .18);
  border: 1px solid rgba(242, 162, 76, .4);
  color: #F2A24C;
  margin-top: 1px;
}

/* ── Form card ── */
/* Frosted-glass card over the dark banner artwork: translucent dark fill with
   a backdrop blur and a faint light border; all text inside is light and the
   inputs share the same translucent treatment. */
.lp-form-card {
  background: rgba(10, 22, 34, .45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .65);
}

.lp-form-head { margin-bottom: 18px; }

.lp-form-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 23px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.015em;
}

.lp-form-sub {
  font-size: 14.5px;
  color: rgba(255, 255, 255, .72);
  margin: 5px 0 0;
}

.lp-form {
  display: grid;
  gap: 13px;
}

.lp-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.lp-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.lp-field label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
}

.lp-field input,
.lp-field select,
.lp-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid rgba(255, 255, 255, .25);
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  font-size: 16px;
  font-family: 'Hanken Grotesk', sans-serif;
  color: #fff;
  outline: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.lp-field textarea {
  resize: vertical;
  min-height: 64px;
}

.lp-field input:focus,
.lp-field select:focus,
.lp-field textarea:focus {
  border-color: rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .1);
}

.lp-field input::placeholder,
.lp-field textarea::placeholder { color: rgba(255, 255, 255, .55); }

.lp-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
  cursor: pointer;
}

.lp-consent input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: #1E5FBF;
  cursor: pointer;
}

.lp-policy-note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
}

.lp-error {
  margin: 0;
  padding: 11px 14px;
  border-radius: 10px;
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  color: #B91C1C;
  font-size: 13.5px;
  font-weight: 500;
}

.lp-submit {
  width: 100%;
  padding: 15px 20px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #0E2A52, #1E5FBF);
  color: #fff;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}

.lp-submit:disabled {
  opacity: .65;
  cursor: not-allowed;
}

.lp-form-foot {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, .65);
  margin: 0;
}

/* ============================================================
   STATS
   ============================================================ */
.lp-stats {
  background: #0B2143;
  padding: 34px 0;
}

.lp-stats-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  text-align: center;
}

.lp-stat-num {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
}

.lp-stats-inner .lp-stat:nth-child(4) .lp-stat-num { color: #F2A24C; }

.lp-stat-label {
  font-size: 13px;
  color: #9FB6D6;
  margin-top: 5px;
  font-weight: 500;
}

/* ============================================================
   SERVICES
   ============================================================ */
.lp-services { padding: 76px 0; background: #fff; }

/* Five services, five columns — fixed rather than auto-fit so the row never
   breaks to 4+1 and leaves an orphan card. Cards are correspondingly compact. */
.lp-svc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.lp-svc-card {
  background: #fff;
  border: 1px solid #E5EBF4;
  border-radius: 14px;
  padding: 20px 16px;
  min-width: 0;
  transition: transform .25s cubic-bezier(.4,.2,.2,1), box-shadow .3s ease, border-color .3s ease;
}

.lp-svc-card:hover {
  transform: translateY(-5px);
  border-color: #C9D9F0;
  box-shadow: 0 22px 40px -22px rgba(14, 42, 82, .4);
}

.lp-svc-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #EFF6FF;
  color: #1E5FBF;
  margin-bottom: 12px;
}

.lp-svc-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.3;
  font-weight: 700;
  color: #0E2A52;
  margin: 0 0 7px;
  /* Long names ("Hot Water Tanks/Tankless") must break inside the narrow
     column instead of forcing the whole grid wider. */
  overflow-wrap: anywhere;
}

.lp-svc-desc {
  font-size: 15px;
  line-height: 1.55;
  color: #5A6C87;
  margin: 0;
}

/* ============================================================
   FREE QUOTE — the original hero copy, moved here as its own
   section so the hero above can focus on the AC promo instead.
   ============================================================ */
.lp-freequote {
  padding: 84px 0;
  background: linear-gradient(135deg, #0E2A52, #123563);
}

.lp-freequote-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.lp-freequote-h1 { margin: 18px 0 16px; }

.lp-freequote-lede { margin: 0; }

.lp-freequote-trust {
  display: grid;
  gap: 18px;
}

/* ============================================================
   PROCESS
   ============================================================ */
.lp-process {
  padding: 76px 0;
  background: linear-gradient(135deg, #0E2A52, #123563);
}

.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.lp-step {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  padding: 28px 24px;
}

.lp-step-num {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #F2A24C;
  letter-spacing: -.02em;
  margin-bottom: 12px;
}

.lp-step-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}

.lp-step-desc {
  font-size: 15.5px;
  line-height: 1.62;
  color: #B9CBE4;
  margin: 0;
}

/* Light variant used on the lead thank-you page */
.lp-steps-light .lp-step {
  background: #F7FAFD;
  border-color: #E5EBF4;
}

.lp-steps-light .lp-step-num { color: #E0872B; }
.lp-steps-light .lp-step-title { color: #0E2A52; }
.lp-steps-light .lp-step-desc { color: #5A6C87; }

/* ============================================================
   WHY US
   ============================================================ */
.lp-reasons { padding: 76px 0; background: #F7FAFD; }

.lp-reasons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.lp-reason {
  background: #fff;
  border: 1px solid #E5EBF4;
  border-radius: 16px;
  padding: 26px 24px;
  transition: transform .25s cubic-bezier(.4,.2,.2,1), box-shadow .3s ease;
}

.lp-reason:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 40px -22px rgba(14, 42, 82, .35);
}

.lp-reason-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: #EFF6FF;
  color: #1E5FBF;
  margin-bottom: 15px;
}

.lp-reason.is-warm .lp-reason-icon {
  background: #FFF7ED;
  color: #E0872B;
}

.lp-reason-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #0E2A52;
  margin-bottom: 8px;
}

.lp-reason-desc {
  font-size: 15.5px;
  line-height: 1.6;
  color: #5A6C87;
  margin: 0;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
/* Extra bottom padding: this is now the last section before the footer
   (the "Ready for your quote?" CTA that used to follow it was removed). */
.lp-tst { padding: 76px 0 88px; background: #fff; }

.lp-tst-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.lp-tst-card {
  margin: 0;
  background: #F7FAFD;
  border: 1px solid #E5EBF4;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lp-tst-stars {
  color: #F2A24C;
  font-size: 15px;
  letter-spacing: 2px;
}

.lp-tst-text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: #35486A;
  flex: 1;
}

.lp-tst-person {
  display: flex;
  align-items: center;
  gap: 11px;
}

.lp-tst-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1E5FBF, #3B82D6);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}

.lp-tst-name {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: #0E2A52;
}

.lp-tst-loc {
  display: block;
  font-size: 12.5px;
  color: #7C8CA3;
}

/* ============================================================
   MID-PAGE CTAs — repeated lead-capture prompts between sections,
   every one anchors back to #quote rather than a phone number.
   ============================================================ */
.lp-midcta { padding: 40px 0; background: #F7FAFD; border-top: 1px solid #E5EBF4; border-bottom: 1px solid #E5EBF4; }

.lp-midcta-dark {
  background: linear-gradient(135deg, #0E2A52, #123563);
  border-color: transparent;
}

.lp-midcta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.lp-midcta-copy { min-width: 0; }

.lp-midcta-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 700;
  color: #0E2A52;
  letter-spacing: -.01em;
}

.lp-midcta-title-light { color: #fff; }

.lp-midcta-sub {
  margin: 6px 0 0;
  font-size: 15.5px;
  color: #5A6C87;
}

.lp-midcta-sub-light { color: #B9CBE4; }

.lp-midcta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 14px 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #E0872B, #F2A24C);
  color: #241202;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: none;
}

.lp-midcta-btn:hover {
  background: #FFCE9A;
  color: #3d1f04;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.lp-finalcta {
  padding: 76px 0;
  background: linear-gradient(135deg, #0E2A52, #123563);
  text-align: center;
}

.lp-finalcta-sub {
  max-width: 54ch;
  margin: 14px auto 28px;
  font-size: 17px;
  line-height: 1.6;
  color: #B9CBE4;
}

.lp-finalcta-btn {
  display: inline-flex;
  align-items: center;
  padding: 16px 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, #E0872B, #F2A24C);
  color: #241202;
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
}

.lp-finalcta-btn:hover {
  background: #FFCE9A;
  color: #3d1f04;
}

/* ============================================================
   MOBILE STICKY CTA — hidden by default, shown only on small
   screens (see RESPONSIVE below) once the visitor scrolls past
   the hero form, so the primary submit button is never covered.
   ============================================================ */
.lp-stickycta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid #E5EBF4;
  box-shadow: 0 -12px 30px -18px rgba(6, 18, 40, .35);
  transform: translateY(100%);
  transition: transform .3s ease;
}

.lp-stickycta.is-visible { transform: translateY(0); }

.lp-stickycta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0E2A52, #1E5FBF);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
}

/* ============================================================
   PLAIN FOOTER
   ============================================================ */
.lp-footer {
  background: #0B2143;
  /* Subtle depth so the footer reads as its own surface rather than a
     flat continuation of the section above it. */
  background-image: radial-gradient(circle at 12% 0%, rgba(30, 95, 191, .28), transparent 55%);
}

/* ── Main footer grid ── */
.lp-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 46px 22px 40px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
}

.lp-footer-brand { min-width: 0; }

.lp-footer-mark {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
}

.lp-footer-badge {
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.lp-footer-badge img {
  width: 100%;
  height: 100%;
  border-radius: 17px;
  object-fit: contain;
}

.lp-footer-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.lp-footer-name {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
}

.lp-footer-tagline {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .17em;
  color: #9FB6D6;
}

.lp-footer-blurb {
  font-size: 14.5px;
  line-height: 1.65;
  color: #9FB6D6;
  margin: 0 0 18px;
  max-width: 42ch;
}

.lp-footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lp-footer-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #C6D6EC;
  font-size: 12.5px;
  font-weight: 600;
}

.lp-footer-badge-chip svg { color: #F2A24C; flex-shrink: 0; }

/* ── Footer columns ── */
.lp-footer-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.lp-footer-head {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #7E9AC0;
  margin-bottom: 16px;
}

.lp-footer-tel {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: #F2A24C;
  text-decoration: none;
  transition: color .25s ease;
  overflow-wrap: anywhere;
}

.lp-footer-tel:hover { color: #FFCE9A; }

.lp-footer-email {
  font-size: 14.5px;
  color: #C6D6EC;
  text-decoration: none;
  margin-top: 8px;
  overflow-wrap: anywhere;
  transition: color .25s ease;
}

.lp-footer-email:hover { color: #fff; }

.lp-footer-hours {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 16px;
}

.lp-footer-hours-row {
  font-size: 13.5px;
  line-height: 1.5;
  color: #9FB6D6;
}

.lp-footer-hours-row strong {
  display: block;
  color: #E3ECF9;
  font-weight: 600;
  font-size: 12.5px;
}

.lp-footer-area-lede {
  font-size: 13.5px;
  line-height: 1.55;
  color: #9FB6D6;
  margin: 0 0 12px;
}

.lp-footer-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.lp-footer-area-chip {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  color: #B9CBE4;
  font-size: 12px;
  font-weight: 500;
}

/* ── Bottom bar ── */
.lp-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.lp-footer-bottom-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #8CA4C6;
}

.lp-footer-credit { color: #7E9AC0; }

/* The .lty-* block that styled a bespoke lead thank-you page was removed:
   lead-thank-you.php now mirrors thankyou.php and uses assets/css/thankyou.css
   instead, so this stylesheet only serves get-a-quote.php. */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  /* Stacked layout: the square mobile banner (which carries all the promo
     copy) becomes a normal full-width image, with the form card below it on
     a matching dark backdrop instead of stretched behind everything. */
  .lp-hero {
    min-height: 0;
    display: block;
    padding: 0 0 52px;
    background: #0E1B15;
  }
  .lp-hero-img {
    position: static;
    height: auto;
    display: block;
  }
  .lp-hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 30px;
  }
  .lp-hero-inner > .lp-form-card { grid-column: auto; }
  .lp-trust {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-freequote-inner { grid-template-columns: 1fr; gap: 32px; }
  /* Brand block spans the full width, the two info columns sit beside it. */
  .lp-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .lp-footer-brand { grid-column: 1 / -1; }
}

/* ── Short viewports (typical 1366×768 laptops) ──
   Reclaim height by tightening SPACING ONLY. Font sizes deliberately stay at
   their full values here: an earlier version shrank the headline and trust
   list too, which made the copy read small on short-but-wide windows. Padding
   and gaps give back enough room without touching legibility. */
@media (min-width: 981px) and (max-height: 860px) {
  .lp-hero { padding: 24px 0 28px; }
  .lp-hero-inner { gap: 34px; }
  .lp-h1 { margin: 10px 0 10px; }
  .lp-lede { margin-bottom: 16px; }
  .lp-trust { gap: 9px; margin-bottom: 16px; }
  .lp-form-card { padding: 20px; }
  .lp-form-head { margin-bottom: 13px; }
  .lp-form { gap: 10px; }
  .lp-row2 { gap: 10px; }
  .lp-field textarea { min-height: 52px; }
}

@media (max-height: 640px) {
  .lp-hero { min-height: 0; }
}

/* Services grid steps down 5 → 3 → 2 → 1 rather than jumping straight to a
   single column, so the cards never get too cramped to read at tablet sizes. */
@media (max-width: 1080px) {
  .lp-svc-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  .lp-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
  .lp-svc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .lp-header-inner { padding: 10px 16px; }
  .lp-brand-badge { width: 50px; height: 50px; }
  .lp-brand-badge img { border-radius: 11px; }
  .lp-header-call { padding: 9px 14px; font-size: 13.5px; }

  .lp-hero { padding: 0 0 44px; }
  .lp-hero-inner { padding: 0 16px; }
  .lp-sec-inner { padding: 0 16px; }

  /* One field per row on phones — two side-by-side inputs get too narrow
     to read the placeholder text. */
  .lp-row2 { grid-template-columns: 1fr; }

  /* One service card per row on mobile. Font sizes are inherited — with a
     full-width card there is no reason to shrink the text. */
  .lp-svc-grid { grid-template-columns: 1fr; gap: 12px; }
  .lp-svc-card { padding: 20px 18px; }

  /* Only padding changes here — every font size is inherited from the base
     rules so text reads the same on a phone as on a desktop. */
  .lp-form-card { padding: 22px 18px; border-radius: 16px; }

  .lp-services, .lp-process, .lp-reasons { padding: 56px 0; }
  .lp-tst { padding: 56px 0 64px; }

  .lp-midcta { padding: 32px 0; }
  .lp-midcta-inner { flex-direction: column; align-items: flex-start; }
  .lp-midcta-btn { width: 100%; justify-content: center; }

  .lp-finalcta { padding: 56px 0; }
  .lp-finalcta-btn { width: 100%; justify-content: center; }

  /* Sticky CTA bar covers the bottom of the screen on phones once the
     visitor scrolls past the hero form — the footer keeps extra bottom
     padding so its own content never sits underneath it. */
  .lp-stickycta { display: block; }
  .lp-footer { padding-bottom: 74px; }

  /* Footer stacks to a single column on phones. */
  .lp-footer-inner {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 36px 16px 32px;
  }
  .lp-footer-blurb { max-width: none; }
  .lp-footer-bottom-inner {
    padding: 16px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    font-size: 12.5px;
  }
}

@media (max-width: 400px) {
  .lp-header-call { padding: 10px 12px; font-size: 12.5px; }
  /* Stats stay two-up even on the narrowest phones — one per row made the
     band far too tall. The numbers shrink instead of the grid collapsing. */
  .lp-stats-inner { gap: 22px 12px; }
  .lp-stat-num { font-size: 25px; }
  .lp-stat-label { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-svc-card, .lp-reason, .lp-header-call { transition: none; }
  .lp-svc-card:hover, .lp-reason:hover, .lp-header-call:hover { transform: none; }
  .lp-pill-dot { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   LANDING PAGE VARIANTS
   Opt-in modifier classes for campaign pages whose artwork or styling
   differs from get-a-quote. Deliberately additive and placed last, so
   the original page renders byte-identical to before.
   ══════════════════════════════════════════════════════════════════ */

/* ── Full-bleed hero: never crop the bottom of the artwork ──
   .lp-hero-img uses object-fit:cover, which trims whichever axis overflows.
   Which axis that is depends on how the hero's box compares to the artwork's
   16:9 ratio:
     hero SHORTER than 16:9 -> vertical overflow -> the BOTTOM is trimmed
     hero TALLER  than 16:9 -> horizontal overflow -> the RIGHT is trimmed
   The default hero is `100svh - 66px` tall, which on any normal widescreen
   window is shorter than 16:9 (1920x1014 is 0.53 vs 0.5625) — fine for the
   AC banner, whose lower area is empty, but the duct banner carries the icon
   strip and the INSTALLATION | SERVICE | MAINTENANCE band right down to its
   bottom edge, so that copy was being cut off.
   Giving the hero a floor of 56.25vw (= the artwork's own height at full
   bleed) guarantees it is never shorter than 16:9, so the overflow always
   lands on the horizontal axis instead — where object-position:left top
   trims the empty right-hand photo area rather than the offer. */
.lp-hero-full { min-height: max(calc(100svh - 66px), 56.25vw); }

/* Below 980px the hero stops being a cover-image backdrop and the banner
   renders as a normal full-width image (see the responsive block above), so
   nothing is cropped and the floor must be released or it would add a huge
   empty gap under the artwork. */
@media (max-width: 980px) {
  .lp-hero-full { min-height: 0; }
}

/* ── Solid form card: white ──
   The default card is dark translucent glass, which reads well over the AC
   banner's dark right-hand side but muddies over the duct banner's pale
   photo. This variant is opaque so legibility no longer depends on whatever
   artwork happens to sit behind it. Swap the class for .lp-form-card-dark
   on the page to get the near-black version instead. */
.lp-form-card-light {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(14, 42, 82, .1);
  box-shadow: 0 34px 70px -28px rgba(6, 20, 40, .55);
}

.lp-form-card-light .lp-form-title { color: #0E2A52; }
.lp-form-card-light .lp-form-sub,
.lp-form-card-light .lp-consent,
.lp-form-card-light .lp-policy-note { color: #51637A; }
.lp-form-card-light .lp-form-foot { color: #6B7C91; }
.lp-form-card-light .lp-field label { color: #16324F; }

.lp-form-card-light .lp-field input,
.lp-form-card-light .lp-field select,
.lp-form-card-light .lp-field textarea {
  background: #F4F8FC;
  border-color: #D2DEEB;
  color: #0E2A52;
}

.lp-form-card-light .lp-field input:focus,
.lp-form-card-light .lp-field select:focus,
.lp-form-card-light .lp-field textarea:focus {
  background: #fff;
  border-color: #1E5FBF;
  box-shadow: 0 0 0 3px rgba(30, 95, 191, .15);
}

.lp-form-card-light .lp-field input::placeholder,
.lp-form-card-light .lp-field textarea::placeholder { color: #94A5B8; }

/* ── Solid form card: near-black ──
   Same idea as the light variant — opacity instead of glass — but keeping
   the default white-on-dark text, so only the surfaces need restating. */
.lp-form-card-dark {
  background: #0B1118;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .8);
}

.lp-form-card-dark .lp-field input,
.lp-form-card-dark .lp-field select,
.lp-form-card-dark .lp-field textarea {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .2);
}