/* Revolution Roofing landing site: v7 style fixes (Sep 28, 2026). */

/* Thank-you page: headline was navy text on the navy band. */
.ty-scope .bg-primary h1 { color: var(--primary-foreground); }

/* Hero proof points: room for the longer credential lines on desktop. */
@media (width > 620px) {
  .hero-points { grid-template-columns: repeat(2, minmax(0, 260px)); }
}

/* Emergency tarping: full-width call button instead of an 18px text link. */
.urgent-callout .phone-link-inline {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  margin-top: 12px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--secondary);
  color: var(--secondary-foreground);
  text-decoration: none;
}
.urgent-callout .phone-link-inline:hover { text-decoration: none; filter: brightness(1.05); }

/* Footer business hours. */
.footer-hours { color: oklch(82% .025 275); }

/* Mobile sticky bar steps aside while a form's submit area is on screen. */
.sticky-cta { transition: transform .2s ease; }
html.rr-form-in-view .sticky-cta { transform: translateY(110%); }

/* Section jump targets clear the sticky jump menu on desktop. */
#storm, #financing, #reviews, #faq, #estimate, #inspection-title, #gallery-title { scroll-margin-top: 64px; }

/* ---------------------------------------------------------------- v8 (Sep 30, 2026) */

/* Hero checkmarks: room for "Protect & Transform Your Exteriors" on one line. */
@media (width > 620px) {
  .hero-points { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); max-width: 640px; margin-bottom: 22px; }
}

/* Owner block between the checkmarks and the red call button. */
.owner-promise { max-width: 600px; margin: 0 0 24px; color: var(--primary-foreground); }
.owner-promise .owner-promise-title {
  color: var(--primary-foreground);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.12;
  margin: 0 0 8px;
}
.owner-promise .owner-promise-kicker {
  color: oklch(83% .11 22);
  font-size: 19px;
  font-weight: 900;
  margin: 0 0 10px;
}
.owner-promise p { color: oklch(93% .02 270); font-size: 16.5px; line-height: 1.5; margin: 0 0 8px; }
.owner-promise p:last-child { margin-bottom: 0; }
.owner-promise .owner-promise-title { text-wrap: balance; }
.rr-note a { white-space: nowrap; }

/* Desktop: the owner block adds height to the left column, so the hero is
   tightened to keep the red call button on the first screen. */
@media (width > 900px) {
  .hero-layout { padding-block: 52px 60px; row-gap: 18px; }
  .hero-subtitle { margin-bottom: 14px; }
  .owner-promise { margin-bottom: 20px; }
  .owner-promise .owner-promise-title { font-size: 28px; margin-bottom: 6px; }
  .owner-promise .owner-promise-kicker { font-size: 18px; margin-bottom: 8px; }
  .owner-promise p { font-size: 16px; line-height: 1.45; margin-bottom: 6px; }
}
/* Phones and tablets (single-column hero), v9: checkmarks sit ABOVE the form.
   Order: headline, checkmarks, form, owner block, red call button.
   CSS only: the checkmarks stay in the same place in the page code, so
   nothing React checks on load changes. Desktop keeps them beside the form. */
@media (width <= 900px) {
  .hero-layout { grid-template-areas: "headline" "points" "form" "owner" "call"; }
  .hero-support { display: contents; }
  .hero-support > .hero-points { grid-area: points; margin: 0; }
  .hero-support > .owner-promise { grid-area: owner; margin: 6px 0 0; }
  .hero-support > .phone-link { grid-area: call; }
}
@media (width <= 620px) {
  .hero-support > .hero-points { gap: 10px; }
  .owner-promise .owner-promise-title { font-size: 27px; }
  .owner-promise .owner-promise-kicker { font-size: 18px; }
  .owner-promise p { font-size: 16px; }
  .hero-support .phone-link { width: 100%; }
}

/* "Get My Free Estimate" pop-up form. */
html.rr-modal-open { overflow: hidden; }
html.rr-modal-open .sticky-cta { transform: translateY(110%); }
.rr-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.rr-modal[hidden] { display: none; }
.rr-modal-backdrop { position: absolute; inset: 0; background: oklch(15% .05 280 / .72); }
.rr-modal-card {
  position: relative; width: 100%; max-width: 470px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
  background: var(--card); color: var(--foreground);
  border-radius: 12px; padding: 30px 24px 22px;
  box-shadow: 0 28px 70px oklch(10% .05 280 / .45);
  outline: none;
}
.rr-modal-card h2 { color: var(--primary); font-size: 28px; font-weight: 900; margin: 0 40px 6px 0; }
.rr-modal-sub { color: var(--muted-foreground); font-size: 15.5px; margin: 0 0 18px; }
.rr-modal-close {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--muted-foreground); font-size: 30px; line-height: 1; cursor: pointer;
}
.rr-modal-close:hover { background: var(--muted); color: var(--primary); }
.rr-field { display: grid; gap: 6px; margin: 0 0 14px; }
.rr-field label { color: var(--primary); font-size: 14.5px; font-weight: 800; }
.rr-optional { color: var(--muted-foreground); font-weight: 600; }
.rr-field input, .rr-field select {
  width: 100%; min-height: 50px; box-sizing: border-box;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: oklch(100% 0 0); color: var(--foreground);
  font: inherit; font-size: 16px;
}
.rr-field select { appearance: auto; }
.rr-field input:focus, .rr-field select:focus { border-color: var(--primary); outline: 3px solid var(--ring); outline-offset: 1px; }
.rr-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.rr-form-error { color: oklch(48% .19 25); font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.rr-form-error a { color: inherit; }
.rr-submit {
  width: 100%; min-height: 56px; margin-top: 4px;
  border: 0; border-radius: 999px;
  background: var(--secondary); color: var(--secondary-foreground);
  font: inherit; font-size: 17px; font-weight: 900; cursor: pointer;
  box-shadow: 0 10px 28px oklch(32% .12 26 / .22);
}
.rr-submit:hover { filter: brightness(1.06); }
.rr-submit[disabled] { opacity: .75; cursor: wait; }
.rr-note { color: var(--muted-foreground); font-size: 13px; text-align: center; margin: 12px 0 0; }
.rr-note a { color: var(--primary); }
@media (width <= 620px) {
  .rr-modal { align-items: flex-end; padding: 0; }
  .rr-modal-card { max-width: none; border-radius: 16px 16px 0 0; padding: 26px 18px 20px; max-height: 92vh; max-height: 92dvh; }
  .rr-modal-card h2 { font-size: 25px; }
}

/* ---------------------------------------------------------------- v10 (Oct 9, 2026) */

/* Hero: the $1,000 offer sits on its own line under the headline; the
   subtitle's first sentence is the lead. */
.hero h1 span { display: block; margin-top: .22em; font-size: .56em; line-height: 1.15; }
.hero-subtitle strong { display: block; margin-bottom: 6px; color: var(--primary-foreground); font-weight: 800; }
.problem-copy strong { color: var(--foreground); }

/* "Claim My $1,000 Savings" button with its terms line underneath. */
.claim-cta {
  display: grid; gap: 8px; width: 100%; max-width: 520px; box-sizing: border-box;
  padding: 12px 12px 10px; border-radius: 14px; background: var(--primary);
}
.claim-cta .claim-link { width: 100%; box-sizing: border-box; }
.claim-cta p.claim-note { max-width: none; margin: 0; text-align: center; font-size: 13px; line-height: 1.4; color: oklch(90% .03 275); }
.hero .claim-cta { padding: 0; background: transparent; }
.cta-jump span { white-space: normal; text-align: center; }
#bottom-form { scroll-margin-top: 64px; }
#bottom-form h2:focus { outline: none; }

/* GAF + James Hardie cards in the navy credential band. */
.credential-cards {
  display: grid; gap: 12px; width: 100%; max-width: 440px; box-sizing: border-box;
  padding: 12px; border-radius: 14px; background: oklch(22% .13 280);
}
.cred-card {
  display: grid; justify-items: center; gap: 4px; text-align: center;
  padding: 18px 16px 20px; border-radius: 10px; background: oklch(33% .15 280);
}
.cred-card p { margin: 0; }
.cred-card .cred-name { font-family: var(--font-display); font-size: 27px; font-weight: 800; line-height: 1.15; color: var(--primary-foreground); }
.cred-card .cred-label {
  width: 100%; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid oklch(100% 0 0 / .2);
  color: oklch(83% .11 22); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.cred-card .cred-title { color: var(--primary-foreground); font-size: 17px; font-weight: 800; }
.cred-card .cred-text { color: oklch(90% .025 276); font-size: 14px; line-height: 1.5; }
@media (width > 900px) {
  .credential-layout { grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); }
}
@media (width <= 900px) {
  .credential-layout { grid-template-columns: 1fr; }
}

/* Roofing services: two cards now that gutters is gone. */
@media (width > 900px) {
  .services-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; }
}

/* Siding "Preview Your Colors" photo: keep the color samples in frame. */
.help-photo img[src*="siding-colors"] { object-position: 85% center; }