/* ============================================================================
 * /free-siding-estimate-v2/v2.css
 * Scoped to body.roof-v2. Doesn't touch the live site's other pages.
 *
 * Design system commitments:
 *   – ONE display family: "DM Serif Display" (italic for accent words only)
 *   – ONE body family: "Inter"
 *   – Four colors: ink (navy), cream, terra-cotta accent, CTA orange
 *   – Three repeating section patterns:
 *       Pattern A — full-bleed video + dark wash + big italic line (hero,
 *                   statement breaks, final CTA)
 *       Pattern B — cream content section with eyebrow + serif h2 + body
 *                   (estimator, materials, comparison, value stack, FAQ)
 *       Pattern C — warm-cream accent variant of pattern B (New England)
 *   – ONE motion: scroll-fade-in on .rv2-reveal. No marquees, no scrollytelling,
 *     no 3D tilt, no parallax.
 * ============================================================================ */

body.roof-v2 {
  /* Tokens — only what the v2 layout uses. */
  --rv2-ink:        #0A1733;
  --rv2-ink-soft:   #475569;
  --rv2-ink-muted:  #94A3B8;
  --rv2-cream:      #FAFAF7;
  --rv2-cream-2:    #F4F1EA;
  --rv2-warm:       #FFF5EA;
  --rv2-warm-2:     #FFE8D2;
  --rv2-line:       rgba(10, 23, 51, 0.10);
  --rv2-accent:     #C2410C;        /* terra-cotta */
  --rv2-orange:     #FF8C00;        /* CTA orange */
  --rv2-orange-hi:  #FFB347;
  --rv2-white:      #FFFFFF;

  --rv2-r-sm: 10px;
  --rv2-r-md: 16px;
  --rv2-r-lg: 24px;

  --rv2-pad-y: clamp(96px, 12vw, 160px);

  /* Reset the global base color/font for this scoped page. */
  background: var(--rv2-cream);
  color: var(--rv2-ink);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11';
}

/* Defeat the global `*` color rule so children inherit cleanly. */
body.roof-v2 *,
body.roof-v2 *::before,
body.roof-v2 *::after {
  color: inherit;
  font-family: inherit;
}

/* Make sure the existing landing-page sticky bar / global decorations
   from style.css don't leak in. */
body.roof-v2 .lp-sticky-cta-bar { display: none !important; }

/* ── Layout primitives ────────────────────────────────────────────────────── */
body.roof-v2 .rv2-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
body.roof-v2 .rv2-section {
  position: relative;
  padding: var(--rv2-pad-y) 0;
  isolation: isolate;
}
body.roof-v2 .rv2-display {
  font-family: 'DM Serif Display', 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.02;
  text-wrap: balance;
}
body.roof-v2 .rv2-display em {
  font-style: italic;
  color: var(--rv2-accent) !important;
}
body.roof-v2 .rv2-h2 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  margin: 0 0 clamp(16px, 2vw, 24px);
  color: var(--rv2-ink) !important;
}
body.roof-v2 .rv2-section-head {
  max-width: 880px;
  margin: 0 auto clamp(48px, 6vw, 72px);
  text-align: center;
}
body.roof-v2 .rv2-section-sub {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--rv2-ink-soft) !important;
  max-width: 60ch;
  margin: 0 auto;
}
body.roof-v2 .rv2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rv2-accent) !important;
  margin: 0 auto clamp(20px, 2.5vw, 28px);
}
body.roof-v2 .rv2-eyebrow-light { color: var(--rv2-orange-hi) !important; }
body.roof-v2 .rv2-eyebrow-line {
  display: inline-block;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, currentColor 0%, transparent 100%);
}

/* ── Reveal animation ─────────────────────────────────────────────────────── */
body.roof-v2 .rv2-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}
body.roof-v2 .rv2-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  body.roof-v2 .rv2-reveal { transition: none; opacity: 1; transform: none; }
}

/* ── Header ───────────────────────────────────────────────────────────────── */
body.roof-v2 .rv2-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(10, 23, 51, 0.0);
  backdrop-filter: blur(0);
  transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
body.roof-v2.is-scrolled .rv2-header,
body.roof-v2 .rv2-header.is-pinned {
  background: rgba(10, 23, 51, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(255,255,255,0.06);
}
body.roof-v2 .rv2-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
body.roof-v2 .rv2-logo img {
  display: block;
  height: 32px;
  width: auto;
}
body.roof-v2 .rv2-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--rv2-white) !important;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  text-decoration: none;
  transition: background 0.3s, border-color 0.3s;
}
body.roof-v2 .rv2-phone:hover {
  background: rgba(255, 140, 0, 0.18);
  border-color: var(--rv2-orange);
}
@media (max-width: 600px) {
  body.roof-v2 .rv2-phone-text { display: none; }
}

/* ── PATTERN A — full-bleed video + dark wash sections ────────────────────── */
body.roof-v2 .rv2-hero,
body.roof-v2 .rv2-statement,
body.roof-v2 .rv2-final {
  position: relative;
  background: #08111F;
  color: var(--rv2-white);
  overflow: hidden;
  isolation: isolate;
}
body.roof-v2 .rv2-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.7) contrast(1.04) brightness(0.62);
  transform: scale(1.06);
  z-index: 0;
}
body.roof-v2 .rv2-bg-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,17,31,0.55) 0%, rgba(8,17,31,0.35) 35%, rgba(8,17,31,0.78) 100%),
    linear-gradient(90deg, rgba(8,17,31,0.55) 0%, rgba(8,17,31,0.20) 60%, rgba(8,17,31,0.35) 100%);
  z-index: 1;
}
body.roof-v2 .rv2-hero { padding-top: clamp(120px, 16vh, 200px); padding-bottom: clamp(72px, 9vw, 120px); min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; }
body.roof-v2 .rv2-statement { padding-top: clamp(112px, 14vw, 180px); padding-bottom: clamp(112px, 14vw, 180px); min-height: 70vh; display: flex; align-items: center; }
body.roof-v2 .rv2-final { padding-top: clamp(112px, 14vw, 180px); padding-bottom: clamp(112px, 14vw, 180px); }

/* HERO copy */
body.roof-v2 .rv2-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  text-align: left;
}
body.roof-v2 .rv2-hero-headline {
  font-size: clamp(2.6rem, 7vw, 6rem);
  color: var(--rv2-white) !important;
  margin: 0 0 clamp(20px, 2.5vw, 28px);
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
  max-width: 18ch;
}
body.roof-v2 .rv2-hero-headline em {
  color: var(--rv2-orange-hi) !important;
  font-style: italic;
}
body.roof-v2 .rv2-hero-sub {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: rgba(255,255,255,0.92) !important;
  max-width: 56ch;
  margin: 0 0 clamp(28px, 3vw, 36px);
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
body.roof-v2 .rv2-hero-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 2vw, 28px);
}
body.roof-v2 .rv2-hero-supporting {
  font-size: 13px;
  color: rgba(255,255,255,0.78) !important;
  margin: 0 0 clamp(28px, 3vw, 40px);
  letter-spacing: 0.02em;
}
body.roof-v2 .rv2-hero-trust {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70) !important;
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid rgba(255,255,255,0.16);
  max-width: 560px;
}

/* STATEMENT copy */
body.roof-v2 .rv2-statement-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  text-align: left;
}
body.roof-v2 .rv2-statement-line {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 7.5vw, 6.5rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--rv2-white) !important;
  margin: 0 0 clamp(20px, 2vw, 28px);
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
  max-width: 22ch;
}
body.roof-v2 .rv2-statement-line em {
  font-style: italic;
  color: var(--rv2-orange-hi) !important;
}
body.roof-v2 .rv2-statement-sub {
  font-size: clamp(16px, 1.4vw, 19px);
  color: rgba(255,255,255,0.82) !important;
  max-width: 60ch;
  margin: 0;
  line-height: 1.55;
  font-weight: 500;
}

/* FINAL CTA */
body.roof-v2 .rv2-final-inner {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  text-align: left;
}
body.roof-v2 .rv2-final-headline {
  font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  color: var(--rv2-white) !important;
  margin: 0 0 clamp(20px, 2.5vw, 28px);
  max-width: 22ch;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
body.roof-v2 .rv2-final-headline em { color: var(--rv2-orange-hi) !important; font-style: italic; }
body.roof-v2 .rv2-final-sub {
  font-size: clamp(16px, 1.4vw, 19px);
  color: rgba(255,255,255,0.92) !important;
  max-width: 60ch;
  margin: 0 0 clamp(28px, 3vw, 36px);
  line-height: 1.55;
}

/* ── CTA buttons ─────────────────────────────────────────────────────────── */
body.roof-v2 .rv2-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
  white-space: nowrap;
}
body.roof-v2 .rv2-cta-primary {
  background: var(--rv2-orange) !important;
  color: #0A1733 !important;
  box-shadow: 0 14px 36px -10px rgba(255, 140, 0, 0.5),
              0 0 0 1px rgba(255,255,255,0.04) inset;
}
body.roof-v2 .rv2-cta-primary:hover {
  background: var(--rv2-orange-hi) !important;
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -10px rgba(255,140,0,0.6);
}
body.roof-v2 .rv2-cta-arrow { transition: transform 0.3s; font-weight: 700; }
body.roof-v2 .rv2-cta:hover .rv2-cta-arrow { transform: translateX(4px); }
body.roof-v2 .rv2-cta-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--rv2-white) !important;
  text-decoration: none;
  padding: 10px 0;
}
body.roof-v2 .rv2-cta-call:hover { color: var(--rv2-orange-hi) !important; }
body.roof-v2 .rv2-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--rv2-accent) !important;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.01em;
}
body.roof-v2 .rv2-cta-link:hover { color: var(--rv2-orange) !important; }

body.roof-v2 .rv2-section-cta-row {
  text-align: center;
  margin-top: clamp(40px, 5vw, 64px);
}

/* ── PATTERN B — cream content section ───────────────────────────────────── */
body.roof-v2 .rv2-estimator,
body.roof-v2 .rv2-materials,
body.roof-v2 .rv2-versus,
body.roof-v2 .rv2-valuestack,
body.roof-v2 .rv2-faq {
  background: var(--rv2-cream);
  color: var(--rv2-ink);
}
body.roof-v2 .rv2-estimator + .rv2-section,
body.roof-v2 .rv2-materials + .rv2-section,
body.roof-v2 .rv2-versus + .rv2-section,
body.roof-v2 .rv2-valuestack + .rv2-section,
body.roof-v2 .rv2-faq + .rv2-section { /* placeholder for adjacency rules if needed */ }

/* Estimator — wrap the legacy fieldsets in a premium card */
body.roof-v2 .rv2-estimator-box {
  max-width: 720px;
  margin: 0 auto;
  background: var(--rv2-white);
  border: 1px solid var(--rv2-line);
  border-radius: var(--rv2-r-lg);
  padding: clamp(28px, 4vw, 44px);
  box-shadow:
    0 40px 80px -28px rgba(10, 23, 51, 0.18),
    0 0 0 1px rgba(194, 65, 12, 0.04);
}
body.roof-v2 .rv2-progress { /* legacy steps inherit from /style.css; no overrides needed */ }
body.roof-v2 .rv2-step-trust {
  text-align: center;
  font-size: 12px;
  color: var(--rv2-ink-muted) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 14px 0 0;
}
body.roof-v2 .rv2-step-cta {
  background: var(--rv2-orange) !important;
  color: var(--rv2-ink) !important;
  border-radius: 999px !important;
  padding: 16px 28px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  border: none !important;
  box-shadow: 0 14px 32px -10px rgba(255,140,0,0.5);
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
}
body.roof-v2 .rv2-step-cta:hover {
  background: var(--rv2-orange-hi) !important;
  transform: translateY(-2px);
}

/* Estimator form refinements (override base style.css subtleties to fit cream) */
body.roof-v2 .rv2-estimator-box h3 {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  letter-spacing: -0.015em;
  color: var(--rv2-ink) !important;
  margin: 0 0 8px;
}
body.roof-v2 .rv2-estimator-box .step-subtext,
body.roof-v2 .rv2-estimator-box .input-hint {
  color: var(--rv2-ink-soft) !important;
}
body.roof-v2 .rv2-estimator-box label {
  color: var(--rv2-ink) !important;
  font-weight: 600;
}
body.roof-v2 .rv2-estimator-box input[type="text"],
body.roof-v2 .rv2-estimator-box input[type="tel"],
body.roof-v2 .rv2-estimator-box input[type="email"],
body.roof-v2 .rv2-estimator-box select {
  border-color: var(--rv2-line);
  background: var(--rv2-white);
  color: var(--rv2-ink);
}
body.roof-v2 .rv2-estimator-box input:focus,
body.roof-v2 .rv2-estimator-box select:focus {
  border-color: var(--rv2-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.15);
}
body.roof-v2 .rv2-estimator-box .option-card {
  border-color: var(--rv2-line);
  background: var(--rv2-white);
  color: var(--rv2-ink);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
body.roof-v2 .rv2-estimator-box .option-card:hover {
  border-color: var(--rv2-accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(10,23,51,0.15);
}
body.roof-v2 .rv2-estimator-box .option-card.selected,
body.roof-v2 .rv2-estimator-box .option-card[aria-pressed="true"] {
  border-color: var(--rv2-accent);
  background: var(--rv2-warm);
}

/* Materials — 4-card grid */
body.roof-v2 .rv2-material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
}
body.roof-v2 .rv2-material-card {
  background: var(--rv2-white);
  border: 1px solid var(--rv2-line);
  border-radius: var(--rv2-r-lg);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s, box-shadow 0.4s, border-color 0.3s;
}
body.roof-v2 .rv2-material-card:hover {
  transform: translateY(-4px);
  border-color: rgba(194, 65, 12, 0.35);
  box-shadow: 0 30px 60px -20px rgba(10, 23, 51, 0.18);
}
body.roof-v2 .rv2-material-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rv2-ink-soft) !important;
  background: var(--rv2-cream-2);
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 16px;
}
body.roof-v2 .rv2-material-tag-accent {
  background: rgba(194, 65, 12, 0.12);
  color: var(--rv2-accent) !important;
}
body.roof-v2 .rv2-material-title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.015em;
  color: var(--rv2-ink) !important;
  margin: 0 0 12px;
}
body.roof-v2 .rv2-material-desc {
  color: var(--rv2-ink-soft) !important;
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 20px;
}
body.roof-v2 .rv2-material-meta {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border-top: 1px solid var(--rv2-line);
}
body.roof-v2 .rv2-material-meta li {
  padding: 12px 0;
  border-bottom: 1px solid var(--rv2-line);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
body.roof-v2 .rv2-material-meta li span {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rv2-ink-muted) !important;
  flex-shrink: 0;
}
body.roof-v2 .rv2-material-card .rv2-cta-link { margin-top: auto; }

/* Vinyl vs LP SmartSide / Old vs Nova — versus pattern */
body.roof-v2 .rv2-versus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
}
body.roof-v2 .rv2-versus-card {
  background: var(--rv2-white);
  border: 1px solid var(--rv2-line);
  border-radius: var(--rv2-r-lg);
  padding: clamp(28px, 3.5vw, 44px);
  position: relative;
}
body.roof-v2 .rv2-versus-card-old {
  background: var(--rv2-cream-2);
}
body.roof-v2 .rv2-versus-card-accent {
  background: linear-gradient(135deg, var(--rv2-warm) 0%, var(--rv2-warm-2) 100%);
  border: 2px solid var(--rv2-accent);
  box-shadow: 0 24px 60px -16px rgba(194, 65, 12, 0.20);
}
body.roof-v2 .rv2-versus-badge {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--rv2-accent);
  color: var(--rv2-white) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 6px 14px;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(194, 65, 12, 0.35);
}
body.roof-v2 .rv2-versus-title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--rv2-ink) !important;
  margin: 0 0 8px;
  letter-spacing: -0.015em;
}
body.roof-v2 .rv2-versus-tagline {
  color: var(--rv2-ink-soft) !important;
  font-size: 15px;
  margin: 0 0 24px;
  font-style: italic;
}
body.roof-v2 .rv2-versus-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.roof-v2 .rv2-versus-list li {
  position: relative;
  padding: 12px 0 12px 30px;
  font-size: 15px;
  color: var(--rv2-ink) !important;
  border-bottom: 1px solid var(--rv2-line);
}
body.roof-v2 .rv2-versus-list li:last-child { border-bottom: none; }
body.roof-v2 .rv2-versus-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(194, 65, 12, 0.12);
}
body.roof-v2 .rv2-versus-list li::after {
  content: '✓';
  position: absolute;
  left: 4px;
  top: 12px;
  color: var(--rv2-accent);
  font-size: 13px;
  font-weight: 800;
}
body.roof-v2 .rv2-versus-list-x li::before { background: rgba(220, 38, 38, 0.10); }
body.roof-v2 .rv2-versus-list-x li::after { content: '✕'; color: #B91C1C; }
body.roof-v2 .rv2-versus-list-check li::after { color: var(--rv2-accent); }

/* New England — Pattern C (warm accent) */
body.roof-v2 .rv2-newengland {
  background: linear-gradient(135deg, var(--rv2-warm) 0%, var(--rv2-cream) 100%);
  position: relative;
  overflow: hidden;
}
body.roof-v2 .rv2-newengland::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 60% at 90% 10%, rgba(194,65,12,0.12) 0%, transparent 60%),
    radial-gradient(40% 50% at 10% 90%, rgba(194,65,12,0.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
body.roof-v2 .rv2-newengland > .rv2-container { position: relative; z-index: 1; }
body.roof-v2 .rv2-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px 32px;
  max-width: 920px;
  margin: 0 auto;
}
body.roof-v2 .rv2-feature-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(194, 65, 12, 0.15);
  border-radius: var(--rv2-r-md);
  font-size: 15px;
  color: var(--rv2-ink) !important;
  font-weight: 500;
  backdrop-filter: blur(6px);
}
body.roof-v2 .rv2-feature-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--rv2-accent);
  color: var(--rv2-white) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}

/* Value stack — 6-card grid + total */
body.roof-v2 .rv2-value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
body.roof-v2 .rv2-value-card {
  position: relative;
  background: var(--rv2-white);
  border: 1px solid var(--rv2-line);
  border-radius: var(--rv2-r-md);
  padding: 24px 24px 28px;
  transition: transform 0.4s, border-color 0.3s, box-shadow 0.4s;
}
body.roof-v2 .rv2-value-card:hover {
  transform: translateY(-3px);
  border-color: rgba(194, 65, 12, 0.30);
  box-shadow: 0 24px 48px -16px rgba(10, 23, 51, 0.15);
}
body.roof-v2 .rv2-value-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  background: linear-gradient(135deg, var(--rv2-orange) 0%, var(--rv2-accent) 100%);
  color: var(--rv2-white) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
body.roof-v2 .rv2-value-card h3 {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: 19px;
  color: var(--rv2-ink) !important;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  max-width: 80%;
}
body.roof-v2 .rv2-value-card p {
  color: var(--rv2-ink-soft) !important;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
body.roof-v2 .rv2-value-total {
  max-width: 720px;
  margin: clamp(40px, 5vw, 56px) auto 0;
  padding: 24px 32px;
  background: var(--rv2-ink);
  border-radius: var(--rv2-r-md);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 30px 60px -20px rgba(10, 23, 51, 0.45);
}
body.roof-v2 .rv2-value-total-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72) !important;
}
body.roof-v2 .rv2-value-total-amount {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--rv2-orange-hi) !important;
  font-feature-settings: 'tnum';
}

/* FAQ */
body.roof-v2 .rv2-faq-container { max-width: 880px; }
body.roof-v2 .rv2-faq-list { display: flex; flex-direction: column; gap: 12px; }
body.roof-v2 .rv2-faq-item {
  background: var(--rv2-white);
  border: 1px solid var(--rv2-line);
  border-radius: var(--rv2-r-md);
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
body.roof-v2 .rv2-faq-item[open] {
  border-color: rgba(194, 65, 12, 0.40);
  box-shadow: 0 16px 36px -16px rgba(10, 23, 51, 0.18);
}
body.roof-v2 .rv2-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 28px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--rv2-ink) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
}
body.roof-v2 .rv2-faq-item summary::-webkit-details-marker { display: none; }
body.roof-v2 .rv2-faq-item summary::after {
  content: '+';
  font-family: 'DM Serif Display', serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--rv2-accent) !important;
  line-height: 1;
  transition: transform 0.3s;
}
body.roof-v2 .rv2-faq-item[open] summary::after { transform: rotate(45deg); }
body.roof-v2 .rv2-faq-body {
  padding: 0 28px 24px;
  color: var(--rv2-ink-soft) !important;
  font-size: 15px;
  line-height: 1.6;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
body.roof-v2 .rv2-footer {
  background: var(--rv2-ink);
  color: var(--rv2-white);
  padding: clamp(48px, 6vw, 80px) 0 clamp(32px, 4vw, 48px);
}
body.roof-v2 .rv2-footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
body.roof-v2 .rv2-footer-brand img { height: 36px; width: auto; display: block; margin-bottom: 12px; }
body.roof-v2 .rv2-footer-tag {
  font-size: 14px;
  color: rgba(255,255,255,0.62) !important;
  margin: 0;
  max-width: 320px;
}
body.roof-v2 .rv2-footer-meta { text-align: right; font-size: 14px; color: rgba(255,255,255,0.72) !important; }
body.roof-v2 .rv2-footer-meta p { margin: 6px 0; }
body.roof-v2 .rv2-footer-phone {
  font-family: 'DM Serif Display', serif;
  font-size: 24px;
  color: var(--rv2-orange-hi) !important;
  text-decoration: none;
  letter-spacing: -0.01em;
}
body.roof-v2 .rv2-footer-phone:hover { color: var(--rv2-white) !important; }
body.roof-v2 .rv2-footer-links a {
  color: rgba(255,255,255,0.72) !important;
  text-decoration: none;
}
body.roof-v2 .rv2-footer-links a:hover { color: var(--rv2-orange-hi) !important; }
@media (max-width: 600px) {
  body.roof-v2 .rv2-footer-meta { text-align: left; }
}

/* ── Sticky mobile CTA bar ───────────────────────────────────────────────── */
body.roof-v2 .rv2-sticky {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translate(-50%, 130%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 14px;
  background: rgba(10, 23, 51, 0.98);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.5);
  backdrop-filter: blur(20px);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
  opacity: 0;
  pointer-events: none;
  width: min(560px, calc(100% - 32px));
}
body.roof-v2 .rv2-sticky.is-shown {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
body.roof-v2 .rv2-sticky-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  color: var(--rv2-white) !important;
  flex-shrink: 0;
}
body.roof-v2 .rv2-sticky-call:hover { background: rgba(255,140,0,0.18); color: var(--rv2-orange-hi) !important; }
body.roof-v2 .rv2-sticky-cta {
  flex: 1;
  text-align: center;
  background: var(--rv2-orange) !important;
  color: var(--rv2-ink) !important;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.25s;
}
body.roof-v2 .rv2-sticky-cta:hover { background: var(--rv2-orange-hi) !important; }

@media (min-width: 980px) {
  /* Desktop — sticky bar hidden; the in-page CTAs are enough */
  body.roof-v2 .rv2-sticky { display: none; }
}

/* ── Mobile refinements ──────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body.roof-v2 .rv2-section-head { text-align: left; margin-left: 0; margin-right: 0; }
  body.roof-v2 .rv2-eyebrow { margin-left: 0; }
  body.roof-v2 .rv2-hero-actions { gap: 12px; }
  body.roof-v2 .rv2-hero-trust { font-size: 11px; letter-spacing: 0.14em; }
  body.roof-v2 .rv2-versus-card { padding: 24px; }
  body.roof-v2 .rv2-material-card { padding: 24px; }
  body.roof-v2 .rv2-feature-list { gap: 12px; }
  body.roof-v2 .rv2-faq-item summary { padding: 18px 20px; font-size: 15px; }
  body.roof-v2 .rv2-faq-body { padding: 0 20px 20px; }
}

/* ============================================================================
 * v2.1 — small UX wins (2026-05-08)
 * Progress text, contact trust line, estimator trust strip, mobile hero trim.
 * ============================================================================ */

/* Visible "Step X of 4" indicator above the dot strip */
body.roof-v2 .rv2-progress-text {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rv2-accent);
  margin: 0 0 14px;
}

/* Trust line above the contact name fields */
body.roof-v2 .rv2-contact-trust {
  margin: 14px 0 24px;
  padding: 14px 18px;
  background: var(--rv2-warm);
  border: 1px solid rgba(194, 65, 12, 0.22);
  border-radius: var(--rv2-r-md);
  font-size: 14px;
  line-height: 1.5;
  color: var(--rv2-ink) !important;
  font-weight: 500;
}

/* Five-pill trust strip near the estimator */
body.roof-v2 .rv2-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  list-style: none;
  margin: 0 auto clamp(32px, 4vw, 48px);
  padding: 0;
  max-width: 920px;
}
body.roof-v2 .rv2-trust-strip li {
  position: relative;
  padding: 10px 18px 10px 36px;
  background: var(--rv2-white);
  border: 1px solid var(--rv2-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rv2-ink) !important;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
body.roof-v2 .rv2-trust-strip li::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--rv2-accent) 0 35%, rgba(194,65,12,0.18) 36% 100%);
}
@media (max-width: 600px) {
  body.roof-v2 .rv2-trust-strip li {
    padding: 8px 14px 8px 32px;
    font-size: 12px;
    white-space: normal;
  }
  body.roof-v2 .rv2-trust-strip li::before { left: 12px; width: 12px; height: 12px; margin-top: -6px; }
}

/* Mobile: shrink hero so the estimator peeks sooner; bigger tap targets. */
@media (max-width: 760px) {
  body.roof-v2 .rv2-hero {
    min-height: 86vh;
    min-height: 86dvh;
    padding-top: clamp(96px, 14vh, 140px);
    padding-bottom: clamp(48px, 8vw, 80px);
  }
  body.roof-v2 .rv2-cta {
    padding: 18px 26px;
    font-size: 16px;
  }
  body.roof-v2 .rv2-step-cta {
    padding: 18px 24px !important;
    font-size: 17px !important;
  }
  body.roof-v2 .rv2-section { padding: clamp(72px, 14vw, 120px) 0; }
}