/* Campbells Precision Roofing — complete redesign mock
   Brand: professional red / charcoal / white */
:root {
  /* CPR palette — warm charcoal-gray surfaces + navy / gold / cranberry accents */
  --navy: #1B2B45;
  --navy-mid: #243552;
  --navy-deep: #152238;
  --navy-rgb: 27, 43, 69;
  --red: #A84850;
  --red-dark: #8B3A41;
  --red-soft: #4A383C;
  --red-rgb: 168, 72, 80;
  --gold: #B8975F;
  --gold-soft: #E8D4B0;
  --gold-wash: #454038;
  --gold-rgb: 184, 151, 95;
  /* Light text on dark surfaces (WCAG-ish) */
  --charcoal: #F0F2F5;
  --charcoal-soft: #D4D8DE;
  --gray: #C5CAD1;
  /* Preview family: #4A4F57 → #3E434B → #383D45 */
  --panel: #4A4F57;
  --panel-raised: #52585F;
  --gray-light: #3E434B;
  --gray-border: #555B64;
  --cream: #383D45;
  --white: #fff;
  --heading: #F7F8FA;
  --max: 1120px;
  --radius: 12px;
  --shadow: 0 2px 18px rgba(0, 0, 0, .28);
  --shadow-lg: 0 16px 42px rgba(0, 0, 0, .38);
  --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font: var(--font-sans);
  --section-pad: 4.5rem;
  --card-pad: 1.7rem;
}
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* clip avoids forcing overflow-y:auto (which traps scroll on body and breaks sticky math) */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}
@supports not (overflow-x: clip) {
  html { overflow-x: hidden; }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--charcoal);
  background: var(--cream);
  line-height: 1.72;
  font-size: 1.0625rem;
  font-weight: 400;
  padding-bottom: 0;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; color: var(--charcoal); margin: 0 0 .55em; font-weight: 600; }
h1, h2 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  color: var(--heading);
}
h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-weight: 600;
}
h2 {
  font-size: clamp(1.55rem, 2.7vw, 2.2rem);
  letter-spacing: -0.015em;
  margin-bottom: .65em;
  line-height: 1.18;
  font-weight: 600;
}
h3 {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--heading);
}
h4 {
  font-family: var(--font-sans);
  font-weight: 700;
}
p { margin: 0 0 1.05em; color: var(--gray); }
.wrap { width: min(100% - 2.25rem, var(--max)); margin-inline: auto; }
.muted { color: #A8AEB6; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* Top bar */
.topbar {
  background: linear-gradient(90deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-mid) 100%);
  color: #D5DCE6;
  font-size: .8rem;
  padding: .55rem 0;
}
.topbar .wrap {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: space-between; align-items: center;
}
.topbar a { color: var(--white); font-weight: 600; }
.topbar a:hover { color: var(--gold-soft); text-decoration: none; }

/* Header / nav */
.site-header {
  background: rgba(56,61,69,.94);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky; top: 0; z-index: 200;
  max-width: 100%;
  transition: background .35s cubic-bezier(.22,1,.36,1),
    box-shadow .35s cubic-bezier(.22,1,.36,1),
    border-color .35s cubic-bezier(.22,1,.36,1);
}
.site-header.is-scrolled {
  background: rgba(62,67,75,.97);
  box-shadow: 0 10px 32px rgba(0,0,0,.35);
  border-bottom-color: transparent;
}
.site-header .wrap {
  max-width: min(100% - 2rem, var(--max));
  width: 100%;
  box-sizing: border-box;
}
.nav-row {
  display: flex; align-items: center; gap: .75rem 1.1rem;
  padding: .7rem 0; flex-wrap: nowrap;
  max-width: 100%; min-width: 0;
}
.logo {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--charcoal); text-decoration: none; flex-shrink: 0;
  font-weight: 700; font-size: .95rem;
}
.logo:hover { text-decoration: none; }
.logo-img { width: 48px; height: auto; object-fit: contain; }
.logo-text span { color: var(--red); }
.nav-links {
  display: flex; align-items: center; gap: .15rem;
  list-style: none; margin: 0; padding: 0; flex: 1; justify-content: center;
}
.nav-links > li { position: relative; }
.nav-links a, .nav-links button.nav-drop {
  display: inline-block; padding: .5rem .55rem;
  color: var(--charcoal); font-size: .875rem; font-weight: 550;
  background: none; border: none; cursor: pointer; font-family: inherit;
  white-space: nowrap;
  border-radius: 6px;
  transition: color .25s cubic-bezier(.22,1,.36,1), background .25s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover, .nav-links button.nav-drop:hover,
.nav-links a.active { color: var(--red); text-decoration: none; }
.nav-cta {
  display: inline-flex; align-items: center; gap: .65rem;
  flex-shrink: 1; min-width: 0; max-width: 100%;
}
.nav-cta .btn {
  max-width: 100%;
  box-sizing: border-box;
}
.nav-phone {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .35rem .25rem;
  font-weight: 800; color: var(--charcoal); white-space: nowrap; font-size: .95rem;
}
.nav-phone:hover { color: var(--red); text-decoration: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .75rem 1.3rem;
  background: var(--red); color: var(--white) !important;
  font-family: var(--font-sans);
  font-weight: 600; border-radius: var(--radius);
  border: 2px solid var(--red); font-size: .9rem;
  letter-spacing: .01em;
  text-decoration: none !important; cursor: pointer;
  transition: background .28s cubic-bezier(.22,1,.36,1), border-color .28s cubic-bezier(.22,1,.36,1), transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s cubic-bezier(.22,1,.36,1);
  white-space: nowrap; text-align: center;
}
.btn:hover { background: var(--red-dark); border-color: var(--red-dark); box-shadow: 0 8px 22px rgba(var(--red-rgb), .22); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--red) !important; }
.btn-outline:hover { background: var(--red); color: var(--white) !important; }
.btn-on-dark {
  border-color: rgba(255,255,255,.85); color: #fff !important; background: transparent;
}
.btn-on-dark:hover { background: #fff; color: var(--red) !important; border-color: #fff; }
.btn-white {
  background: var(--white); color: var(--red) !important; border-color: var(--white);
}
.btn-white:hover { background: var(--gray-light); }
.btn-sm { padding: .55rem .95rem; font-size: .82rem; min-height: 44px; }
.btn-ghost {
  background: transparent; border-color: transparent; color: var(--charcoal) !important;
  text-decoration: underline !important; padding-left: .25rem; padding-right: .25rem;
}

/* Dropdown */
.dropdown {
  display: none; position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 280px; max-height: min(70vh, 520px); overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--gray-border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: .55rem 0; list-style: none; margin: 0;
  z-index: 50;
}
.nav-links > li:hover > .dropdown,
.nav-links > li.open > .dropdown { display: block; }
.dropdown a {
  display: block; padding: .65rem 1.15rem; font-size: .9rem; line-height: 1.35;
  color: var(--charcoal); font-weight: 500; min-height: 44px;
  display: flex; align-items: center;
}
.dropdown a:hover { background: var(--red-soft); color: #F0C4C8; text-decoration: none; }
.menu-toggle {
  display: none; background: none; border: 1px solid var(--gray-border);
  min-width: 44px; min-height: 44px; padding: .4rem .65rem;
  border-radius: var(--radius); cursor: pointer;
  font-size: 1.15rem; color: var(--charcoal);
}

/* Dual hero */
.hero, .dual-hero {
  background:
    radial-gradient(ellipse at 88% 12%, rgba(var(--red-rgb), .18), transparent 48%),
    radial-gradient(ellipse at 12% 90%, rgba(var(--gold-rgb), .12), transparent 42%),
    linear-gradient(145deg, var(--navy-deep) 0%, var(--navy) 48%, var(--navy-mid) 100%);
  color: var(--white);
  padding: 4.75rem 0 4rem;
}
.hero h1, .dual-hero h1 { color: var(--white); margin-bottom: .7rem; max-width: 20ch; font-weight: 600; }
.hero .lead, .dual-hero .lead {
  color: #E8EDF4; font-size: 1.125rem; max-width: 36rem; margin-bottom: 1.65rem; line-height: 1.65;
}
.hero-eyebrow { color: #E8D4B0 !important; letter-spacing: .14em; }
.hero-actions {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1rem;
}
.hero-phone {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-size: clamp(1.35rem, 4vw, 1.85rem);
  font-weight: 800;
  color: #fff !important;
  letter-spacing: .01em;
  text-decoration: none !important;
  margin: .25rem 0 .5rem;
  padding: .35rem 0;
}
.hero-phone:hover { color: var(--gold-soft) !important; }
.hero-note { color: #C8D0DC; font-size: .875rem; margin: 0; }

/* Compact dual strip for inner pages after page-hero alternative:
   We use full dual-hero on every page per requirements */
.dual-hero.compact { padding: 1.5rem 0 1.35rem; }
.dual-hero.compact h1 { max-width: none; font-size: clamp(1.3rem, 2.6vw, 1.75rem); margin-bottom: .35rem; }
.dual-hero.compact .lead { font-size: .98rem; margin-bottom: .85rem; max-width: 40rem; }
.dual-hero.compact .hero-actions { margin-bottom: .5rem; gap: .55rem; }
.dual-hero.compact .hero-phone { font-size: clamp(1.15rem, 3vw, 1.45rem); margin: .15rem 0 .35rem; padding: .25rem 0; }
.dual-hero.compact .hero-note { font-size: .78rem; }

/* Trust bar */
.trust-bar {
  background: linear-gradient(180deg, var(--panel) 0%, var(--cream) 100%);
  border-bottom: 1px solid var(--gray-border);
  padding: .85rem 0 1rem;
}
.trust-bar ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .45rem 1.25rem;
  justify-content: center; text-align: center; align-items: center;
}
.trust-bar li {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--charcoal-soft);
  opacity: .9;
}
.trust-bar li::before {
  content: ""; display: inline-block; width: .35rem; height: .35rem;
  border-radius: 50%; background: var(--red); margin-right: .4rem;
  vertical-align: middle; opacity: .85;
}

/* Sections */
section { padding: var(--section-pad) 0; }
.section-alt { background: var(--gray-light); }
section:not(.hero):not(.dual-hero):not(.cta-band):not(.section-alt) {
  background: transparent;
}
.section-head { text-align: center; max-width: 40rem; margin: 0 auto 2.85rem; }
.section-head p { margin-bottom: 0; }
.eyebrow {
  display: inline-block; font-family: var(--font-sans);
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--red);
  margin-bottom: .55rem;
}
.eyebrow::after {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2px;
  margin-top: .45rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity: .85;
}
.section-head .eyebrow::after { margin-inline: auto; }

/* Cards / grids */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.35rem; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
.card {
  background: var(--panel); border: 1px solid var(--gray-border);
  border-radius: var(--radius); padding: var(--card-pad);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1), border-color .3s cubic-bezier(.22,1,.36,1);
  height: 100%;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: #6A7078; }
.card h3 { margin-bottom: .45rem; }
.card p { flex: 1; font-size: .94rem; margin-bottom: .5em; }
.card .card-link {
  margin-top: auto; padding-top: .85rem; font-weight: 700; font-size: .88rem; color: var(--red);
}
.card .card-link:hover { text-decoration: underline; }
.card-icon {
  width: 2.5rem; height: 2.5rem; border-radius: 8px;
  background: var(--red-soft); color: var(--red);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .8rem; margin-bottom: .85rem;
  letter-spacing: .02em;
}

/* Steps */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; counter-reset: step; }
.step {
  background: var(--panel); border: 1px solid var(--gray-border);
  border-radius: var(--radius); padding: 1.35rem; position: relative;
  box-shadow: var(--shadow);
}
.step::before {
  counter-increment: step; content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--red); color: var(--white); font-weight: 800;
  font-size: .85rem; margin-bottom: .55rem;
}
.step h3 { font-size: 1rem; }
.step p { font-size: .875rem; margin: 0; }

/* Lead form */
.lead-form {
  background: var(--panel);
  border: 1px solid var(--gray-border);
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: var(--shadow-lg);
}
.lead-form h3 { margin-top: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .85rem; }
.form-row .full { grid-column: 1 / -1; }
label { display: block; font-weight: 700; font-size: .8rem; margin-bottom: .3rem; color: var(--charcoal); }
input, textarea, select {
  width: 100%; padding: .7rem .8rem; border: 1px solid var(--gray-border);
  border-radius: var(--radius); font: inherit; background: var(--panel);
  color: var(--charcoal);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(var(--red-rgb),.14);
}
textarea { min-height: 120px; resize: vertical; }
.form-note { font-size: .78rem; color: var(--gray); margin-top: .65rem; margin-bottom: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid .full { grid-column: 1 / -1; }
.contact-aside {
  background: var(--gray-light); padding: 1.6rem; border-radius: 12px; border: 1px solid var(--gray-border);
}
.contact-aside h3 { margin-top: 1.1rem; font-size: 1rem; }
.contact-aside h3:first-child { margin-top: 0; }
.contact-aside p, .contact-aside li { color: var(--charcoal-soft); }
.contact-aside ul { padding-left: 1.1rem; margin: 0 0 1rem; }
.two-col { display: grid; grid-template-columns: 1.35fr 1fr; gap: 2rem; align-items: start; }
.two-col-equal { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }

/* Google Business reviews embed */
.google-reviews {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.25rem 1.5rem;
  align-items: stretch;
  max-width: 920px;
  margin: 0 auto 1.75rem;
}
.google-reviews--wide { max-width: 980px; }
.google-reviews-card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--cream) 100%);
  border: 1px solid rgba(var(--navy-rgb), .10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.35rem 1.35rem 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gr-top {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .85rem;
}
.gr-gmark {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: var(--panel-raised);
  border: 1px solid rgba(255,255,255,.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(27, 43, 69, .06);
}
.gr-gmark svg { display: block; }
.gr-label {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
}
.gr-name {
  margin: .1rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.25;
}
.gr-score-row {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  margin: .15rem 0 .35rem;
}
.gr-score {
  font-family: Fraunces, Georgia, serif;
  font-size: 2.35rem;
  font-weight: 700;
  color: var(--gold-soft);
  line-height: 1;
}
.gr-stars {
  color: #f4b400;
  font-size: 1.25rem;
  letter-spacing: .06em;
  text-shadow: 0 1px 0 rgba(184, 151, 95, .25);
}
.gr-count {
  margin: 0 0 1.1rem;
  color: var(--charcoal-soft);
  font-size: .95rem;
}
.gr-count strong { color: var(--charcoal); font-weight: 700; }
.gr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .65rem;
}
.gr-actions .btn {
  flex: 1 1 auto;
  text-align: center;
  min-width: 9.5rem;
  font-size: .88rem;
  padding: .65rem 1rem;
}
.gr-source {
  margin: .95rem 0 0;
  font-size: .8rem;
  color: var(--gray);
}
.gr-source a {
  color: var(--gold-soft);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gr-source a:hover { color: var(--red); }
.google-reviews-map {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(var(--navy-rgb), .10);
  box-shadow: var(--shadow);
  background: var(--gray-light);
  min-height: 280px;
}
.google-reviews-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
}
@media (max-width: 760px) {
  .google-reviews {
    grid-template-columns: 1fr;
    max-width: 32rem;
  }
  .google-reviews-map iframe { min-height: 280px; }
  .gr-actions .btn { width: 100%; }
}

/* Reviews — no invented quotes on reviews page; homepage may link only */
.review-card { border-left: 3px solid var(--red); }
.review-card .who { font-weight: 700; color: var(--charcoal); font-size: .9rem; margin: 0; }
.stars { color: var(--red); letter-spacing: .1em; margin-bottom: .4rem; font-size: .9rem; }

/* Photo placeholders */
.photo-ph {
  background: var(--panel); border: 2px dashed #6A7078; border-radius: var(--radius);
  min-height: 180px; display: flex; align-items: center; justify-content: center;
  color: var(--charcoal-soft); font-size: .9rem; font-weight: 700; text-align: center; padding: 1rem;
}
.photo-ph.tall { min-height: 280px; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

.badge-ph {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 88px; height: 48px; padding: .4rem .6rem;
  border: 1px dashed #6A7078; border-radius: 4px; background: var(--panel);
  font-size: .65rem; font-weight: 700; color: var(--charcoal-soft); text-align: center;
}

/* Contact methods: quiet Call | Text | Email chips (cream / navy / gold) */
section > .wrap + .wrap.two-col { margin-top: 0; }
.reach-out-head {
  text-align: left;
  margin-bottom: 1.15rem;
  max-width: 40rem;
}
.reach-out-head .eyebrow { margin-bottom: .45rem; }
.reach-out-head h2 { margin-bottom: .4rem; }
.reach-out-head p { color: var(--gray); margin: 0; }
.contact-methods {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .65rem;
  margin: 0 0 1.75rem;
}
.contact-method {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .15rem;
  padding: .7rem 1.05rem .75rem;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--gray-border);
  border-radius: 999px;
  text-decoration: none !important;
  color: var(--charcoal) !important;
  min-height: 44px;
  box-shadow: none;
  transition: background .28s cubic-bezier(.22,1,.36,1), border-color .28s cubic-bezier(.22,1,.36,1), color .28s cubic-bezier(.22,1,.36,1), box-shadow .28s cubic-bezier(.22,1,.36,1);
}
.contact-method:hover {
  background: var(--red-soft);
  border-color: rgba(var(--red-rgb), .28);
  box-shadow: none;
  transform: none;
  color: var(--heading) !important;
}
.contact-method:hover .cm-label { color: var(--red); }
.contact-method:hover .cm-value { color: var(--heading); }
.contact-method .cm-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
}
.contact-method .cm-value {
  font-size: .92rem;
  font-weight: 600;
  color: var(--heading);
  word-break: break-word;
}
.contact-method.cm-call,
.contact-method.cm-text,
.contact-method.cm-email {
  border-color: var(--gray-border);
  background: rgba(255,255,255,.05);
}
/* Homepage process step — quiet Call / Text / Email */
.step-contact {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .75rem;
}
.step-contact a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: .28rem .7rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--charcoal-soft) !important;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--gray-border);
  border-radius: 999px;
  text-decoration: none !important;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.step-contact a:hover {
  color: var(--red) !important;
  border-color: rgba(var(--red-rgb), .3);
  background: var(--red-soft);
  text-decoration: none !important;
}
.contact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .85rem;
  align-items: center;
  margin: 0 0 1.15rem;
  padding: .75rem 1rem;
  background: var(--gray-light);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius);
  font-size: .92rem;
}
.contact-strip .cs-label {
  font-weight: 800;
  color: var(--charcoal);
  margin-right: .15rem;
}
.contact-strip a {
  font-weight: 700;
  color: var(--red);
  text-decoration: none !important;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: .15rem .1rem;
}
.contact-strip a:hover { text-decoration: underline !important; }
.contact-strip .cs-sep { color: #bbb; user-select: none; }
.footer-contact-links a { font-weight: 600; }
@media (max-width: 700px) {
  .contact-methods { flex-direction: column; align-items: stretch; }
  .contact-method { border-radius: 12px; width: 100%; }
}

/* CTA band — soft cream / light navy wash (not funeral black) */
.cta-band {
  background:
    linear-gradient(160deg, var(--panel) 0%, var(--gray-light) 42%, var(--cream) 100%);
  color: var(--charcoal);
  padding: 2.75rem 0;
  text-align: center;
  border-top: 1px solid var(--gray-border);
  box-shadow: inset 0 1px 0 rgba(var(--gold-rgb), .28);
}
.cta-band h2 { color: var(--charcoal); }
.cta-band p { color: var(--gray); max-width: 34rem; margin: 0 auto 1.1rem; }
.cta-band .hero-actions { justify-content: center; gap: .65rem 1rem; }

/* Primary estimate: outline / softer visual weight */
.cta-band .btn:not(.btn-ghost):not(.btn-on-dark),
.cta-band .btn-white {
  background: transparent;
  color: var(--red) !important;
  border: 1.5px solid rgba(var(--red-rgb), .45);
  box-shadow: none;
  font-weight: 600;
  font-size: .88rem;
  padding: .62rem 1.15rem;
  min-height: 44px;
}
.cta-band .btn:not(.btn-ghost):not(.btn-on-dark):hover,
.cta-band .btn-white:hover {
  background: var(--red-soft);
  border-color: var(--red);
  color: var(--red-dark) !important;
  transform: none;
  box-shadow: none;
}

/* Secondary CTA: quiet text link (not a competing pill) */
.cta-band .btn-ghost,
.cta-band .btn-on-dark,
.cta-band .btn-outline.btn-on-dark {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--charcoal) !important;
  font-weight: 650;
  font-size: .9rem;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  box-shadow: none;
  padding: .5rem .65rem;
  transform: none;
}
.cta-band .btn-ghost:hover,
.cta-band .btn-on-dark:hover,
.cta-band .btn-outline.btn-on-dark:hover {
  background: transparent !important;
  color: var(--red) !important;
  border-color: transparent !important;
  transform: none;
  box-shadow: none;
}

/* Call / Text / Email: subtle chips, not loud dark pills */
.cta-band .contact-strip {
  background: transparent !important;
  border: none !important;
  justify-content: center;
  max-width: 28rem;
  margin: 1rem auto 0 !important;
  padding: .2rem 0;
  gap: .4rem .5rem;
}
.cta-band .contact-strip .cs-label {
  color: var(--charcoal) !important;
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  margin: 0 0 .2rem;
}
.cta-band .contact-strip a {
  color: var(--charcoal) !important;
  font-weight: 650;
  font-size: .86rem;
  padding: .38rem .85rem;
  min-height: 40px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--gray-border);
  border-radius: 999px;
}
.cta-band .contact-strip a:hover {
  color: var(--red) !important;
  border-color: rgba(var(--red-rgb), .3);
  background: var(--red-soft);
  text-decoration: none !important;
}
.cta-band .contact-strip .cs-sep { display: none; }

/* Storm / long-form */
.prose { max-width: 42rem; }
.prose-wide { max-width: 52rem; margin-inline: auto; }
.prose-wide h2 { margin-top: 2rem; }
.prose-wide h2:first-child { margin-top: 0; }
.list-check { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.list-check li {
  padding: .4rem 0 .4rem 1.55rem; position: relative; color: var(--gray);
}
.list-check li::before {
  content: "✓"; position: absolute; left: 0; color: var(--red); font-weight: 800;
}
.callout {
  background: var(--red-soft); border-left: 4px solid var(--red);
  padding: 1.1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.5rem 0;
}
.callout p { margin: 0; color: var(--charcoal-soft); }
.compliance-note {
  font-size: .85rem; color: var(--charcoal-soft); border-top: 1px solid var(--gray-border);
  padding-top: 1rem; margin-top: 2rem;
}
.carrier-grid {
  list-style: none; padding: 0; margin: 1rem 0 1.25rem;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem .9rem;
}
.carrier-grid li {
  background: var(--gray-light); border: 1px solid var(--gray-border);
  border-radius: var(--radius); padding: .65rem .85rem;
  color: var(--charcoal-soft); font-weight: 650; font-size: .95rem;
}
.carrier-grid .carrier-note {
  display: block; font-weight: 500; font-size: .8rem; color: var(--gray); margin-top: .15rem;
}
.carrier-footnote { font-size: .95rem; color: var(--gray); margin: 0 0 1.5rem; }
@media (max-width: 560px) {
  .carrier-grid { grid-template-columns: 1fr; }
}

/* FAQ */
.faq-item { border-bottom: 1px solid var(--gray-border); padding: 1.15rem 0; }
.faq-item h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.faq-item p { margin: 0; }

/* Counties strip */
.county-strip {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.25rem;
}
.chip {
  background: var(--panel-raised); border: 1px solid var(--gray-border);
  border-radius: 999px; padding: .35rem .85rem; font-size: .8rem; font-weight: 650;
  color: var(--charcoal);
}

/* Footer */
.site-footer {
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-mid) 55%, #2C3D56 100%);
  color: #D0D7E0; padding: 3.25rem 0 1.75rem; font-size: .9rem;
}
.site-footer h4 {
  font-family: var(--font-sans);
  color: var(--white); font-size: .8rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: .75rem;
}
.site-footer a { color: #E0E5EC; }
.site-footer a:hover { color: var(--gold-soft); }
.footer-brand-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-logo { width: 200px; height: auto; max-height: 72px; object-fit: contain; }
.footer-marks { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.footer-marks .badge-ph {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #D0D7E0; min-width: 72px; height: 42px;
}
.footer-marks .footer-badge {
  width: 64px; height: 64px; object-fit: contain;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; padding: 4px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.footer-marks .footer-badge:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(212,175,55,.35);
}
.footer-grid {
  display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 1.5rem;
  margin-bottom: 1.75rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .35rem; }
.footer-creds {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding: 1.25rem 1.35rem;
  margin-bottom: 1.35rem; font-size: .82rem; line-height: 1.6; color: #C4CBD5;
}
.footer-creds p { color: #C8CFD8; margin: 0 0 .65rem; }
.footer-creds p:last-child { margin-bottom: 0; }
.footer-creds strong { color: #eee; font-weight: 700; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 1rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: .78rem; color: #A8B0BC;
}
.social-ph {
  display: inline-block; padding: .35rem .65rem; border: 1px dashed #8A939F;
  border-radius: 4px; font-size: .75rem; color: #C8CFD8; margin-right: .35rem;
}
a.social-ph:hover { color: #fff; border-color: #999; text-decoration: none; }


.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.products-list { columns: 2; gap: 2rem; margin: 0 0 1rem; padding-left: 1.2rem; color: var(--gray); }
.products-list li { margin-bottom: .35rem; break-inside: avoid; }

/* Wide desktop: one-row nav; CTA may wrap text, never force overflow */
@media (min-width: 1181px) {
  .nav-row {
    flex-wrap: nowrap;
    gap: .5rem .7rem;
  }
  .nav-links {
    flex-wrap: nowrap;
    gap: .05rem;
    min-width: 0;
    flex: 1 1 auto;
  }
  .nav-links a, .nav-links button.nav-drop {
    padding: .45rem .42rem;
    font-size: .84rem;
  }
  .nav-cta {
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: .6rem;
  }
  .nav-cta .btn {
    white-space: normal;
    line-height: 1.2;
    padding: .55rem .85rem;
    font-size: .8rem;
    max-width: 12rem;
  }
  .logo-img { width: 44px; }
  .logo-text { font-size: .9rem; }
}

/* Hamburger earlier than before — prevents desktop header horizontal scroll */
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .nav-row.nav-open .nav-links {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--panel);
    border-bottom: 1px solid var(--gray-border);
    border-top: 1px solid var(--gray-border);
    padding: .85rem 1rem 1.1rem;
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
    max-height: min(75vh, 560px); overflow: auto;
    z-index: 250;
  }
  .nav-row.nav-open .nav-links > li {
    border-bottom: 1px solid var(--gray-border);
  }
  .nav-row.nav-open .nav-links > li:last-child { border-bottom: none; }
  .nav-row.nav-open .nav-links a,
  .nav-row.nav-open .nav-links button.nav-drop {
    min-height: 44px; display: flex; align-items: center;
    white-space: normal; width: 100%;
    color: var(--charcoal); font-size: 1rem;
  }
  .nav-row { flex-wrap: wrap; position: relative; max-width: 100%; }
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto;
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    background: var(--white); border: 1px solid var(--gray-border);
  }
  .nav-cta {
    width: 100%; max-width: 100%;
    justify-content: space-between; align-items: center;
    order: 3; margin-top: .15rem; gap: .5rem;
    min-width: 0; box-sizing: border-box;
  }
  .nav-cta .btn {
    flex: 1 1 auto; min-width: 0; max-width: 100%;
    width: auto; white-space: normal; line-height: 1.25;
    box-sizing: border-box;
  }
  .nav-phone {
    display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0;
    padding: .35rem .4rem;
  }
  .logo-text { display: none; }
  .nav-row.nav-open .dropdown {
    position: static; display: none; box-shadow: none; border: none;
    padding-left: .75rem; background: var(--gray-light);
  }
  .nav-row.nav-open li.open > .dropdown { display: block; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-5 { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .two-col, .two-col-equal { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: 1fr 1fr; }
  .products-list { columns: 1; }
}

@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: 1fr; }
  .hero, .dual-hero { padding: 2.75rem 0 2.25rem; }
  .dual-hero.compact { padding: 1.25rem 0 1.1rem; }
  section { padding: 2.75rem 0; }
  .section-head { margin-bottom: 1.75rem; }
  .nav-cta .btn {
    width: 100%; flex: 1 1 100%; max-width: 100%;
    white-space: normal;
  }
  .nav-phone { font-size: 1.05rem; font-weight: 800; }
  .hero-actions {
    flex-direction: column; align-items: stretch; flex-wrap: nowrap;
  }
  .hero-actions .btn {
    width: 100%; max-width: 100%; white-space: normal;
    min-height: 48px; line-height: 1.3; box-sizing: border-box;
  }
  .hero-phone {
    display: flex; width: 100%; max-width: 100%; justify-content: center;
    min-height: 56px; font-size: clamp(1.55rem, 7vw, 1.95rem);
    padding: .65rem .5rem; margin: .35rem 0 .65rem;
    border: 2px solid rgba(255,255,255,.35); border-radius: var(--radius);
    background: rgba(255,255,255,.06);
    box-sizing: border-box;
  }
  .cta-band .hero-phone {
    border-color: var(--gray-border);
    background: rgba(26, 36, 51, .04);
    color: var(--charcoal);
  }
  .topbar { font-size: .72rem; }
  .wrap { width: min(100% - 1.5rem, var(--max)); max-width: 100%; box-sizing: border-box; }
  .lead-form .btn[type="submit"],
  .lead-form button.btn {
    width: 100%; max-width: 100%; white-space: normal; min-height: 48px;
    box-sizing: border-box;
  }
  input, textarea, select { max-width: 100%; box-sizing: border-box; }
}

@media (max-width: 420px) {
  h1 { font-size: 1.55rem; }
  .hero .lead, .dual-hero .lead { font-size: 1.02rem; }
  .btn { font-size: .88rem; }
  .nav-cta .btn { font-size: .8rem; padding: .55rem .7rem; }
}

/* Mobile menu open: keep panel opaque over hero CTAs */
body.nav-is-open .site-header {
  box-shadow: 0 12px 32px rgba(0,0,0,.2);
}
body.nav-is-open .nav-row.nav-open .nav-links {
  background: var(--panel);
}

/* Live project photos */
.content-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  object-fit: cover;
}
.photo-frame {
  margin: 0;
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
  background: var(--gray-light);
  border: 1px solid var(--gray-border);
}
.photo-frame.tall .content-img,
.photo-frame.tall img {
  width: 100%;
  max-width: 100%;
  height: 340px;
  object-fit: cover;
  filter: none;
}
.photo-grid .photo-frame {
  min-height: 0;
}
.photo-grid .content-img,
.photo-grid img {
  width: 100%;
  max-width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  filter: none;
}
.photo-grid figcaption {
  font-size: .8rem;
  color: var(--gray);
  padding: .55rem .75rem .7rem;
  margin: 0;
}
@media (max-width: 800px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-grid .content-img, .photo-grid img { height: 220px; }
  .photo-frame.tall .content-img, .photo-frame.tall img { height: 260px; }
}
@media (max-width: 520px) {
  .photo-grid { grid-template-columns: 1fr; }
}
.hero-with-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
}
.hero-with-bg::before {
  content: "";
  position: absolute;
  inset: -3%;
  z-index: -2;
  background: url("/images/from-live/dji_fly_20250505.JPG") center/cover no-repeat;
  transform: scale(1.02);
  animation: hero-ken 32s cubic-bezier(.22,1,.36,1) infinite alternate;
  will-change: transform;
  filter: none;
}
.hero-with-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg,
      rgba(var(--navy-rgb),.76) 0%,
      rgba(var(--navy-rgb),.56) 38%,
      rgba(var(--navy-rgb),.36) 68%,
      rgba(var(--navy-rgb),.46) 100%),
    linear-gradient(180deg, rgba(var(--navy-rgb),.20) 0%, transparent 38%, rgba(var(--navy-rgb),.38) 100%),
    radial-gradient(ellipse at 82% 18%, rgba(var(--red-rgb),.14), transparent 52%),
    radial-gradient(ellipse at 20% 85%, rgba(var(--gold-rgb),.11), transparent 45%);
  pointer-events: none;
}
.hero-with-bg > .wrap { position: relative; z-index: 1; }
@keyframes hero-ken {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(-1.2%, -0.6%, 0); }
}
.trust-badges {
  display: flex; flex-wrap: wrap; gap: .85rem 1.25rem; align-items: center; justify-content: center;
  margin-top: .85rem;
  padding-top: .65rem;
  border-top: 1px solid var(--gray-border);
}
.trust-badges img {
  max-height: 48px; width: auto; max-width: 120px; height: auto;
  opacity: .95;
}
.photo-frame {
  box-shadow: var(--shadow);
}
.photo-grid {
  gap: 1.25rem;
}
.cta-band {
  background:
    linear-gradient(160deg, var(--panel) 0%, var(--gray-light) 42%, var(--cream) 100%);
}
.cta-band p { color: var(--gray); }

/* Form polish on contact */
form.form-grid,
.lead-form form {
  gap: 1.1rem;
}
form.form-grid {
  background: var(--panel);
  border: 1px solid var(--gray-border);
  border-radius: 12px;
  padding: 1.65rem;
  box-shadow: var(--shadow);
}
form.form-grid .btn[type="submit"],
form.form-grid button.btn {
  margin-top: .35rem;
}
.contact-aside {
  padding: 1.75rem;
}
@media (max-width: 700px) {
  .contact-method { min-height: 48px; align-items: stretch; }
}


/* Combined lead-form + form-grid: single surface */
form.lead-form.form-grid {
  padding: 1.75rem;
  gap: 1.1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
form.lead-form.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 720px) {
  form.lead-form.form-grid { grid-template-columns: 1fr; }
}

/* ========== Motion / premium feel (BAAS-inspired, CPR brand) ========== */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur: .28s;
}

.nav-phone,
.logo,
.topbar a,
.site-footer a,
.hero-phone,
.contact-strip a,
.card .card-link {
  transition: color var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}

.dropdown {
  /* soft appear when opened via :hover — browsers still snap display; opacity aids feel where supported */
  animation: none;
}

/* Portfolio / photo cards — subtle image zoom */
.photo-frame {
  transition: box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
}
.photo-frame:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.photo-grid .photo-frame img,
.photo-grid .photo-frame .content-img,
.photo-frame.tall img,
.photo-frame.tall .content-img {
  transition: transform .7s var(--ease-out);
}
.photo-grid .photo-frame:hover img,
.photo-grid .photo-frame:hover .content-img,
.photo-frame.tall:hover img,
.photo-frame.tall:hover .content-img {
  transform: scale(1.04);
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translate3d(0, 1.15rem, 0);
  transition:
    opacity .75s var(--ease-out),
    transform .75s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* Stagger siblings lightly inside grids */
.grid-2 > .reveal:nth-child(2),
.grid-3 > .reveal:nth-child(2),
.grid-4 > .reveal:nth-child(2),
.grid-5 > .reveal:nth-child(2),
.photo-grid > .reveal:nth-child(2),
.steps > .reveal:nth-child(2) { transition-delay: .06s; }
.grid-2 > .reveal:nth-child(3),
.grid-3 > .reveal:nth-child(3),
.grid-4 > .reveal:nth-child(3),
.grid-5 > .reveal:nth-child(3),
.photo-grid > .reveal:nth-child(3),
.steps > .reveal:nth-child(3) { transition-delay: .12s; }
.grid-3 > .reveal:nth-child(4),
.grid-4 > .reveal:nth-child(4),
.grid-5 > .reveal:nth-child(4),
.photo-grid > .reveal:nth-child(4),
.steps > .reveal:nth-child(4) { transition-delay: .16s; }
.grid-4 > .reveal:nth-child(5),
.grid-5 > .reveal:nth-child(5),
.photo-grid > .reveal:nth-child(5),
.steps > .reveal:nth-child(5) { transition-delay: .2s; }
.grid-4 > .reveal:nth-child(n+6),
.grid-5 > .reveal:nth-child(n+6),
.photo-grid > .reveal:nth-child(n+6) { transition-delay: .24s; }

/* Extra breathing room where sections felt tight */
.trust-bar { padding: 1.35rem 0 1.45rem; }
.cta-band { padding: 3.35rem 0; }
.lead-form { padding: 1.9rem; }
.two-col { gap: 2.35rem; }
.grid-2, .grid-3, .grid-4 { gap: 1.55rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-with-bg::before {
    animation: none !important;
    transform: none !important;
    inset: 0;
  }
  .reveal,
  .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .photo-grid .photo-frame:hover img,
  .photo-grid .photo-frame:hover .content-img,
  .photo-frame.tall:hover img,
  .photo-frame.tall:hover .content-img,
  .card:hover,
  .btn:hover,
  .contact-method:hover {
    transform: none !important;
  }
  .btn,
  .card,
  .contact-method,
  .site-header,
  .photo-frame,
  .photo-frame img,
  .photo-frame .content-img {
    transition: none !important;
  }
}



.contact-aside .aside-reach {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .35rem 0 1rem;
}
.contact-aside .aside-reach a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .35rem .85rem;
  font-size: .86rem;
  font-weight: 600;
  color: var(--charcoal-soft) !important;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--gray-border);
  border-radius: 999px;
  text-decoration: none !important;
}
.contact-aside .aside-reach a:hover {
  color: var(--red) !important;
  border-color: rgba(var(--red-rgb), .3);
  background: var(--red-soft);
  text-decoration: none !important;
}

/* Homepage service cards — clickable photo thumbnails
   Style D: raised panel #5A6068 + gold top edge 3px #B8975F */
a.card.card-thumb {
  padding: 0;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit;
  background: #5A6068;
  border: 1px solid #6A7078;
  border-top: 3px solid #B8975F;
  box-shadow: var(--shadow);
}
a.card.card-thumb::after { display: none; }
a.card.card-thumb:hover {
  text-decoration: none !important;
  border-color: #6A7078;
  border-top-color: #B8975F;
}
.card-thumb .card-media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(145deg, var(--gray-light), var(--gold-wash));
  border-bottom: 1px solid #6A7078;
}
.card-thumb .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.card-thumb:hover .card-media img {
  transform: scale(1.045);
}
.card-thumb .card-body {
  padding: 1.15rem 1.25rem 1.3rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .15rem;
}
.card-thumb .card-body h3 {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
}
.card-thumb .card-body p {
  margin: 0;
  flex: 1;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--gray);
}
.card-thumb .card-body .card-link {
  margin-top: .85rem;
  padding-top: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .card-thumb:hover .card-media img { transform: none; }
}

/* Homepage Quick request — invite card linking to /contact-us */
.quick-request {
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: calc(var(--radius) + 2px);
  padding: 1.75rem 1.85rem;
  box-shadow: var(--shadow-lg);
}
.quick-request p:last-of-type { margin-bottom: 1.15rem; }
.quick-request .hero-actions { margin-bottom: 0; }
.quick-request .btn { min-width: min(100%, 16rem); }

/* ========== Why CPR — paragraph + bullets ========== */
.why-cpr {
  position: relative;
  overflow: hidden;
}
.why-cpr::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 8% 20%, rgba(var(--gold-rgb),.14), transparent 42%),
    radial-gradient(ellipse at 92% 80%, rgba(var(--red-rgb),.06), transparent 45%);
  z-index: 0;
}
.why-cpr > .wrap { position: relative; z-index: 1; }
.why-cpr-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  gap: 2.25rem 2.75rem;
  align-items: start;
}
.why-cpr-copy { min-width: 0; }
.why-cpr .section-head {
  max-width: 40rem;
  margin-bottom: 1rem;
}
.why-cpr .section-head h2 {
  margin-bottom: 0;
  color: var(--heading);
}
.why-lead {
  margin: 0 0 1.35rem;
  max-width: 42rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--charcoal-soft);
}
.why-bullets {
  margin: 0 0 1.5rem;
  max-width: 42rem;
}
.why-bullets li {
  padding: .55rem 0 .55rem 1.65rem;
  font-size: .98rem;
  line-height: 1.55;
  color: var(--charcoal-soft);
  border-bottom: 1px solid rgba(var(--navy-rgb), .06);
}
.why-bullets li:last-child { border-bottom: none; }
.why-bullets li::before {
  color: var(--gold);
  font-size: .95rem;
}
.why-bullets strong {
  color: var(--heading);
  font-weight: 700;
}
.why-bullets a { font-weight: 650; }
.why-bullets-compact {
  margin: 0 0 1.35rem;
}
.why-bullets-compact li {
  font-size: .95rem;
  padding: .45rem 0 .45rem 1.55rem;
}
.why-cpr-aside { display: flex; flex-direction: column; gap: 1rem; }
.why-cpr-photo {
  box-shadow: var(--shadow-lg);
  border-radius: calc(var(--radius) + 4px);
  position: sticky;
  top: 1.25rem;
}
.why-cpr-photo .content-img,
.why-cpr-photo img {
  height: 420px;
  object-fit: cover;
  width: 100%;
}
.why-cpr-foot {
  display: flex;
  justify-content: flex-start;
  margin-top: .25rem;
}
.quick-request-wide {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}
.quick-request-wide .hero-actions {
  justify-content: center;
  margin-bottom: 0;
}

/* ========== Service tabs — premium polish ========== */
.dual-hero.compact {
  padding: 2.15rem 0 1.85rem;
  background:
    radial-gradient(ellipse at 90% 8%, rgba(var(--red-rgb),.16), transparent 46%),
    radial-gradient(ellipse at 10% 95%, rgba(var(--gold-rgb),.12), transparent 40%),
    linear-gradient(148deg, var(--navy-deep) 0%, var(--navy) 48%, var(--navy-mid) 100%);
}
.dual-hero.compact h1 {
  font-size: clamp(1.45rem, 2.8vw, 1.95rem);
  letter-spacing: -0.022em;
  margin-bottom: .45rem;
  max-width: 28ch;
}
.dual-hero.compact .lead {
  font-size: 1.02rem;
  line-height: 1.6;
  margin-bottom: 1.05rem;
  max-width: 42rem;
  color: #e6eaef;
}
.dual-hero.compact .hero-actions { margin-bottom: .55rem; gap: .65rem; }
.dual-hero.compact .hero-note { font-size: .8rem; color: #C8D0DC; }

.section-alt {
  background:
    linear-gradient(180deg, #42484F 0%, var(--gray-light) 40%, var(--cream) 100%);
}

.service-intro .eyebrow { margin-bottom: .55rem; }
.service-intro h2 { margin-top: 0; }
.service-intro .list-check { margin-top: .35rem; }
.service-intro .list-check li { padding: .5rem 0 .5rem 1.65rem; }

.card {
  background: linear-gradient(180deg, var(--panel-raised) 0%, var(--panel) 100%);
  border-radius: calc(var(--radius) + 2px);
  padding: 1.55rem 1.55rem 1.45rem;
  position: relative;
}
.card::after {
  content: "";
  position: absolute;
  top: 0; left: 1.1rem; right: 1.1rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), transparent 85%);
  opacity: .55;
  pointer-events: none;
}
.card h3 {
  font-size: 1.08rem;
  color: var(--heading);
  letter-spacing: -0.012em;
}
.card p { font-size: .93rem; line-height: 1.55; }
.card .list-check { margin: .35rem 0 0; }
.card .list-check li {
  font-size: .88rem;
  padding: .28rem 0 .28rem 1.4rem;
  line-height: 1.45;
}
.card-icon {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 10px;
  background:
    linear-gradient(145deg, var(--gold-wash) 0%, var(--panel-raised) 50%, var(--red-soft) 100%);
  color: var(--gold-soft);
  border: 1px solid rgba(var(--gold-rgb),.4);
  font-size: .78rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset;
}
.card-icon.card-num {
  border-radius: 999px;
  font-size: .9rem;
  background: linear-gradient(145deg, var(--navy) 0%, #2a3648 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(var(--navy-rgb),.18);
}

.photo-frame {
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(229,223,213,.95);
  background: linear-gradient(180deg, var(--panel), var(--gray-light));
}
.photo-frame.tall .content-img,
.photo-frame.tall img {
  height: min(380px, 52vw);
}
.section-head {
  max-width: 42rem;
  margin-bottom: 2.5rem;
}
.section-head h2 { margin-bottom: .45em; }
.section-head p {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--gray);
}

/* Auto-fit grids used on product/service tabs */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.35rem;
}

.trust-bar {
  background: linear-gradient(180deg, var(--panel) 0%, var(--cream) 100%);
  padding: 1.15rem 0 1.25rem;
}
.trust-bar li {
  font-size: .72rem;
  letter-spacing: .06em;
}

@media (max-width: 900px) {
  .why-cpr-layout { grid-template-columns: 1fr; gap: 1.75rem; }
  .why-cpr-photo { position: static; }
  .why-cpr-photo .content-img,
  .why-cpr-photo img { height: 280px; }
  .why-cpr-aside { order: -1; }
}
@media (max-width: 640px) {
  .why-lead { font-size: 1rem; }
  .why-bullets li { font-size: .95rem; }
  .dual-hero.compact { padding: 1.65rem 0 1.45rem; }
  .dual-hero.compact h1 { max-width: none; }
  .photo-frame.tall .content-img,
  .photo-frame.tall img { height: 240px; }
}

/* === polish-pass-2026-09-19 === */
/* Spacing rhythm */
:root { --section-pad: 4.25rem; }
.section-head { margin-bottom: 2.45rem; }
.section-head h2 {
  letter-spacing: -0.02em;
  line-height: 1.18;
}
.section-head > p:not(.eyebrow) {
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Hero — quieter premium */
.hero.dual-hero h1,
.dual-hero h1 {
  letter-spacing: -0.025em;
  max-width: 18ch;
}
.hero .lead,
.dual-hero .lead {
  max-width: 36rem;
  line-height: 1.55;
  font-size: clamp(1.02rem, 1.6vw, 1.12rem);
}
.hero-actions .btn { box-shadow: none; }
.hero-phone { letter-spacing: -0.015em; }

/* Soft bottom CTA */
.cta-band { padding: 2.85rem 0; }
.cta-band h2 { letter-spacing: -0.02em; margin-bottom: .45em; }
.cta-band > .wrap > p { margin-bottom: 1.15rem; }

/* Card thumbs — crop + body consistency */
a.card.card-thumb { height: 100%; }
.card-thumb .card-media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(145deg, #3A3F47, #454B54);
}
.card-thumb .card-media img {
  object-fit: cover;
  object-position: center 42%;
}
.card-thumb .card-media img[src*="dji_fly"],
.card-thumb .card-media img[src*="image4"],
.card-thumb .card-media img[src*="20170818_183"] {
  object-position: center 32%;
}
.card-thumb .card-media img[src*="roof-plate"],
.card-thumb .card-media img[src*="image1"],
.card-thumb .card-media img[src*="image6"],
.card-thumb .card-media img[src*="image8"],
.card-thumb .card-media img[src*="image7"] {
  object-position: center center;
}
.card-thumb .card-media img[src*="IMG_20170818_201511"],
.card-thumb .card-media img[src*="IMG_4733"] {
  object-position: center 28%;
}
.card-thumb .card-body {
  padding: 1.15rem 1.2rem 1.3rem;
  gap: .2rem;
  min-height: 9.25rem;
}
.card-thumb .card-body h3 {
  font-size: 1.02rem;
  letter-spacing: -0.012em;
  line-height: 1.25;
  margin: 0 0 .3rem;
}
.card-thumb .card-body p {
  font-size: .875rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.grid-4, .grid-3, .grid-5 { align-items: stretch; }

/* Portfolio grid — even crops */
.photo-grid .photo-frame img,
.photo-grid .content-img {
  object-position: center 40%;
}
.photo-grid .photo-frame img[src*="dji_fly"],
.photo-grid .content-img[src*="dji_fly"] {
  object-position: center 30%;
}

/* Google reviews — warm card already defined above; keep map height on wide layout */
.google-reviews--wide .google-reviews-map iframe { min-height: 380px; }

/* Reach Out step — subtle gold warmth */
.step-reach {
  border-color: rgba(var(--gold-rgb), .42);
  background: linear-gradient(180deg, var(--panel-raised) 0%, var(--gold-wash) 100%);
  box-shadow: var(--shadow);
}
.steps { align-items: stretch; }
.step { height: 100%; }

/* Why CPR breathing room */
.why-lead { line-height: 1.7; }
.why-bullets li { padding-top: .5rem; padding-bottom: .5rem; }

/* Quick request card */
.quick-request {
  border-color: rgba(var(--navy-rgb), .08);
  background: linear-gradient(180deg, var(--panel-raised) 0%, var(--panel) 100%);
}

/* Compact service heroes — slightly calmer */
.dual-hero.compact {
  padding: 2rem 0 1.7rem;
}
.dual-hero.compact h1 {
  letter-spacing: -0.022em;
  line-height: 1.15;
}
.dual-hero.compact .lead {
  opacity: .93;
}

/* About / thin service pages — prose comfort */
.service-intro { max-width: 40rem; }
.service-intro .list-check { margin-top: .25rem; }

@media (max-width: 720px) {
  .card-thumb .card-body { min-height: 0; }
  .hero.dual-hero h1,
  .dual-hero h1 { max-width: none; }
}


/* —— Featured Roofing Services links (sitewide visual weight) —— */
/* Nav dropdown */
.dropdown a[href="/roofing"],
.dropdown a[href="/roofing/"] {
  font-weight: 700;
  color: var(--heading);
  font-size: .95rem;
  background: linear-gradient(90deg, var(--gold-wash) 0%, transparent 78%);
  border-left: 3px solid var(--gold);
  margin: .15rem 0;
  padding-left: calc(1.15rem - 3px);
}
.dropdown a[href="/roofing"]:hover,
.dropdown a[href="/roofing/"]:hover {
  background: var(--red-soft);
  color: var(--red);
  border-left-color: var(--red);
}

/* Footer Services list — warm gold on navy, not washed gray */
.site-footer .footer-grid a[href="/roofing"],
.site-footer .footer-grid a[href="/roofing/"] {
  color: var(--gold-soft);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
}
.site-footer .footer-grid a[href="/roofing"]:hover,
.site-footer .footer-grid a[href="/roofing/"]:hover {
  color: #fff;
}

/* Utility for hero / inline */
a.roofing-link {
  display: inline-block;
  color: var(--red);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .01em;
  text-decoration: none !important;
  border-bottom: 2px solid rgba(var(--red-rgb), .4);
  padding: .15rem 0 .2rem;
  transition: color .25s cubic-bezier(.22,1,.36,1), border-color .25s cubic-bezier(.22,1,.36,1);
}
a.roofing-link:hover {
  color: var(--red-dark);
  border-bottom-color: var(--red);
}
.hero a.roofing-link,
.dual-hero a.roofing-link {
  color: var(--gold-soft);
  border-bottom-color: rgba(var(--gold-rgb), .55);
  font-size: 1.05rem;
  font-weight: 700;
}
.hero a.roofing-link:hover,
.dual-hero a.roofing-link:hover {
  color: #fff;
  border-bottom-color: var(--gold);
}
.hero-roofing-link {
  margin: .85rem 0 0;
}
.hero-roofing-link a.roofing-link {
  /* slightly button-like chip on dark hero */
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem 1.05rem;
  border: 1.5px solid rgba(var(--gold-rgb), .65);
  border-radius: var(--radius);
  background: rgba(var(--gold-rgb), .12);
  border-bottom-width: 1.5px;
  color: var(--gold-soft);
  font-size: .95rem;
}
.hero-roofing-link a.roofing-link:hover {
  background: rgba(var(--gold-rgb), .22);
  border-color: var(--gold);
  color: #fff;
}

/* Homepage / services card emphasis */
a.card.card-thumb[href="/roofing"],
a.card.card-thumb[href="/roofing/"] {
  border-color: rgba(var(--red-rgb), .32);
  border-top-color: #B8975F;
  box-shadow: 0 4px 22px rgba(var(--red-rgb), .09), var(--shadow);
}
a.card.card-thumb[href="/roofing"] .card-body h3,
a.card.card-thumb[href="/roofing/"] .card-body h3 {
  color: var(--heading);
  font-weight: 700;
  font-size: 1.12rem;
}
a.card.card-thumb[href="/roofing"] .card-link,
a.card.card-thumb[href="/roofing/"] .card-link {
  font-weight: 800;
}
.card:has(> a.card-link[href="/roofing"]) h3,
.card:has(> a.card-link[href="/roofing/"]) h3 {
  color: var(--heading);
  font-weight: 700;
}
a.card-link[href="/roofing"],
a.card-link[href="/roofing/"] {
  font-weight: 800;
  font-size: .92rem;
}

/* —— Live-layout reshape: credentials, pride+reviews, explore, military, process —— */
.hero-precision {
  border-bottom: 4px solid var(--red);
  min-height: min(72vh, 640px);
  display: flex;
  align-items: flex-end;
  padding-bottom: 3.5rem;
}
.hero-precision h1 {
  max-width: 14ch;
  font-size: clamp(2.4rem, 6vw, 3.75rem);
  letter-spacing: -0.03em;
}
.hero-precision .lead { max-width: 38rem; }

.credential-strip {
  background: linear-gradient(180deg, var(--panel) 0%, var(--cream) 100%);
  padding: 2.75rem 0 2.25rem;
  border-bottom: 1px solid var(--gray-border);
}
.credential-strip::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--red);
  margin: -2.75rem 0 2.25rem;
}
.credential-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.credential-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  background: linear-gradient(160deg, var(--red) 0%, var(--red-dark) 100%);
  color: #fff;
  border-radius: calc(var(--radius) + 4px);
  padding: 2rem 1.5rem 1.85rem;
  box-shadow: var(--shadow-lg);
}
.credential-card img {
  width: auto;
  height: 96px;
  object-fit: contain;
  background: #fff;
  border-radius: 12px;
  padding: .55rem .75rem;
}
.credential-card h2 {
  color: #fff;
  font-family: var(--font-sans);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  margin: 0;
}
.credential-card p {
  margin: 0;
  color: #fff;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.55;
  max-width: 34ch;
}
.credential-badges {
  list-style: none;
  margin: 1.35rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem .85rem;
}

.credential-also {
  margin: 0.85rem 0 0;
  text-align: center;
  font-size: 0.92rem;
  color: var(--muted, #5a6068);
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

.credential-badges li {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--heading);
  background: var(--panel-raised);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: .45rem .9rem;
}

.pride-reviews {
  padding: var(--section-pad) 0;
  background: var(--cream);
}
.pride-reviews-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr);
  gap: 2.5rem 2.75rem;
  align-items: start;
}
.pride-reviews .why-cpr-copy .section-head { margin-bottom: 1rem; }
.pride-reviews .why-lead { margin-bottom: 1.1rem; }
.google-reviews--stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: none;
}
.google-reviews--stack .google-reviews-map iframe { min-height: 240px; height: 240px; }

.commitment-explore { padding: var(--section-pad) 0; }
.commitment-kicker {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--charcoal-soft);
  max-width: 52rem;
  margin: 0 auto 2.25rem;
  line-height: 1.7;
}
.explore-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 2rem 2.5rem;
  align-items: center;
}
.explore-perks {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: .95rem;
}
.explore-perks li {
  display: grid;
  gap: .2rem;
  padding: .95rem 1.05rem;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.explore-perks strong {
  color: var(--heading);
  font-size: 1rem;
}
.explore-perks span {
  color: var(--gray);
  font-size: .92rem;
}
.explore-photo { margin: 0; }

.military-rebate {
  /* Darker gray band — light text (preview family) */
  background:
    linear-gradient(160deg, var(--panel) 0%, var(--gray-light) 55%, var(--cream) 100%);
  color: var(--charcoal-soft);
  padding: 3.25rem 0;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(0,0,0,.25);
  box-shadow: inset 0 1px 0 rgba(var(--gold-rgb), .35);
}
.military-rebate .wrap { max-width: 46rem; }
.military-eyebrow { color: #C9A86A !important; }
.military-rebate .eyebrow::after { margin-inline: auto; }
.military-rebate h2 {
  color: var(--heading);
  font-style: italic;
  margin-bottom: .55rem;
  font-size: clamp(1.45rem, 4.2vw, 2rem);
  font-weight: 650;
  line-height: 1.25;
}
.military-thanks {
  font-size: 1.18rem;
  color: #E8ECF0;
  margin: 0 0 1rem;
  font-weight: 650;
  line-height: 1.4;
}
.military-rebate p {
  color: #D4D8DE;
  margin: 0 auto 1.35rem;
  max-width: 40rem;
  font-size: 1.02rem;
  line-height: 1.65;
}
.military-rebate strong { color: #FFFFFF; font-weight: 700; }
.military-rebate .btn-on-dark {
  border-color: rgba(255,255,255,.55);
  color: #fff !important;
  background: transparent;
}
.military-rebate .btn-on-dark:hover {
  background: #fff;
  border-color: #fff;
  color: var(--red) !important;
}

.what-to-expect {
  background: var(--cream);
  padding: var(--section-pad) 0;
  border-top: 6px solid var(--navy-deep);
}
.what-to-expect .section-head h2 {
  color: var(--red);
  font-style: italic;
  font-family: var(--font-display);
}

.dropdown-sep {
  height: 1px;
  margin: .45rem .85rem;
  padding: 0 !important;
  background: var(--gray-border);
  list-style: none;
  pointer-events: none;
}

/* Longer live-like nav: allow wrap + slightly tighter links */
@media (min-width: 1181px) {
  .nav-links {
    flex-wrap: wrap;
    row-gap: .15rem;
    max-width: 52rem;
  }
  .nav-links a, .nav-links button.nav-drop {
    padding: .4rem .42rem;
    font-size: .8rem;
  }
  /* keep estimate CTA + live-like phone pill */
  .nav-phone {
    background: var(--panel-raised);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 8px;
    padding: .45rem .85rem;
    font-size: .88rem;
    color: var(--heading);
    box-shadow: var(--shadow);
  }
}

@media (max-width: 900px) {
  .credential-grid,
  .pride-reviews-layout,
  .explore-grid {
    grid-template-columns: 1fr;
  }
  .hero-precision { min-height: 0; align-items: center; padding: 3.5rem 0 2.75rem; }
}

/* ========== Sitewide darker-gray cohesion (2026-09-19) ========== */
/* Page hierarchy: cream=#383D45 page · gray-light=#3E434B alt · panel=#4A4F57 cards */

.card h3,
.step h3,
.section-head h2,
.faq-item h3,
.lead-form h3,
.contact-aside h3,
.quick-request h3,
.explore-perks strong,
.why-lead,
.commitment-kicker {
  color: var(--heading);
}
.why-lead,
.why-bullets li {
  color: var(--charcoal-soft);
}
.why-bullets li {
  border-bottom-color: rgba(255,255,255,.08);
}
.card p,
.step p,
.section-head p {
  color: var(--gray);
}

/* Raised panels on darker page */
.quick-request,
.google-reviews-card,
.explore-perks li,
.credential-strip,
.pride-reviews,
.what-to-expect,
.trust-bar {
  background: linear-gradient(180deg, var(--panel) 0%, var(--gray-light) 100%);
}
.pride-reviews,
.what-to-expect {
  background: var(--cream);
}
.credential-strip {
  background: linear-gradient(180deg, var(--panel) 0%, var(--cream) 100%);
  border-bottom-color: rgba(255,255,255,.08);
}
.credential-badges li {
  background: var(--panel-raised);
  color: var(--heading);
  border-color: rgba(255,255,255,.14);
}
.credential-card img {
  background: #fff; /* logos need light plate */
}
.explore-perks li {
  background: var(--panel);
  border-color: rgba(255,255,255,.10);
}
.explore-perks strong { color: var(--heading); }
.explore-perks span { color: var(--gray); }

/* Soft CTA — same gray system, light type, cranberry outline */
.cta-band {
  background:
    linear-gradient(160deg, var(--panel) 0%, var(--gray-light) 42%, var(--cream) 100%);
  color: var(--charcoal-soft);
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(var(--gold-rgb), .32);
}
.cta-band h2 { color: var(--heading); }
.cta-band p { color: #D4D8DE; }
.cta-band .btn:not(.btn-ghost):not(.btn-on-dark),
.cta-band .btn-white {
  background: transparent;
  color: #F0C4C8 !important;
  border: 1.5px solid rgba(240, 196, 200, .55);
}
.cta-band .btn:not(.btn-ghost):not(.btn-on-dark):hover,
.cta-band .btn-white:hover {
  background: var(--red-soft);
  border-color: var(--red);
  color: #fff !important;
}
.cta-band .btn-ghost,
.cta-band .btn-on-dark,
.cta-band .btn-outline.btn-on-dark {
  color: var(--charcoal-soft) !important;
}
.cta-band .btn-ghost:hover,
.cta-band .btn-on-dark:hover,
.cta-band .btn-outline.btn-on-dark:hover {
  color: #F0C4C8 !important;
}
.cta-band .contact-strip .cs-label,
.cta-band .contact-strip a {
  color: var(--charcoal-soft) !important;
}
.cta-band .contact-strip a {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
.cta-band .contact-strip a:hover {
  color: #F0C4C8 !important;
  background: var(--red-soft);
  border-color: rgba(var(--red-rgb), .45);
}
@media (max-width: 720px) {
  .cta-band .hero-phone {
    border-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.06);
    color: var(--heading) !important;
  }
}

/* Contact chips / reach-out */
.contact-method {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
}
.contact-method .cm-label { color: var(--gold-soft) !important; }
.contact-method .cm-value,
.contact-method:hover .cm-value {
  color: var(--heading) !important;
}
.contact-method:hover {
  background: var(--red-soft);
  border-color: rgba(var(--red-rgb), .4);
}

/* Nav phone pill on dark header — light plate for scanability */
.nav-phone {
  color: var(--heading);
}
@media (min-width: 1181px) {
  .nav-phone {
    background: var(--panel-raised);
    border: 1px solid rgba(255,255,255,.14);
    color: var(--heading);
    box-shadow: var(--shadow);
  }
}
.menu-toggle {
  background: var(--panel-raised);
  border-color: rgba(255,255,255,.14);
  color: var(--heading);
}

/* Dropdown roofing feature link */
.dropdown a[href="/roofing"],
.dropdown a[href="/roofing/"] {
  color: var(--heading);
  background: linear-gradient(90deg, var(--gold-wash) 0%, transparent 78%);
}

/* Cards / steps polish */
.card,
.step,
.lead-form,
.chip,
.quick-request {
  background: var(--panel);
  border-color: rgba(255,255,255,.10);
}
.card {
  background: linear-gradient(180deg, var(--panel-raised) 0%, var(--panel) 100%);
}
.step-reach {
  background: linear-gradient(180deg, var(--panel-raised) 0%, var(--gold-wash) 100%);
  border-color: rgba(var(--gold-rgb), .42);
}
.card-icon {
  border-color: rgba(var(--gold-rgb), .35);
  box-shadow: none;
  color: var(--gold-soft);
}
.photo-frame {
  background: var(--gray-light);
  border-color: rgba(255,255,255,.10);
}
.callout {
  background: var(--red-soft);
  border-left-color: var(--red);
}
.callout p { color: var(--charcoal-soft); }
.carrier-grid li {
  background: var(--panel);
  color: var(--charcoal-soft);
}

/* Footer hover: gold-soft is now light text — good */
.site-footer a:hover { color: var(--gold-soft); }

/* Commitment / process section on page deep */
.commitment-explore {
  background: var(--gray-light);
}
.what-to-expect .section-head h2 {
  color: #F0C4C8; /* cranberry-tint light for italic display */
}

/* Area / service card thumb body text already uses vars */

/* Style D — photo thumbs stay raised + gold top (override any later .card panel rules) */
a.card.card-thumb {
  background: #5A6068;
  border-top: 3px solid #B8975F;
}
.card-thumb .card-media {
  border-bottom-color: #6A7078;
}
.card-thumb .card-body h3 {
  color: var(--heading);
}
.card-thumb .card-body p {
  color: var(--gray);
}
/* Keep gold top when roofing emphasis retints side borders */
a.card.card-thumb[href="/roofing"],
a.card.card-thumb[href="/roofing/"] {
  border-top-color: #B8975F;
}

/* Ensure logo text readable */
.logo { color: var(--heading); }
.logo-text span { color: #F0C4C8; }

/* btn-white on dark heroes stays true white */
.btn-white { background: #fff; border-color: #fff; }
.btn-white:hover { background: #E8ECF0; color: var(--red-dark) !important; }


/* —— Competitive polish (Sep 2026) — no sticky Call Now bar —— */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .85rem;
  list-style: none;
  margin: .85rem 0 0;
  padding: 0;
  max-width: 42rem;
}
.hero-trust li {
  font-size: .82rem;
  font-weight: 650;
  color: #E8ECF0;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(184,151,95,.45);
  border-radius: 999px;
  padding: .35rem .75rem;
  letter-spacing: .01em;
}
.hero-trust strong { color: var(--gold-soft); font-weight: 800; }

.proof-strip .proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: .25rem;
}
.proof-strip .proof-cta {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  justify-content: center;
}
.proof-strip .photo-frame {
  border-top: 3px solid var(--gold);
  box-shadow: var(--shadow);
}
@media (max-width: 720px) {
  .proof-strip .proof-grid { grid-template-columns: 1fr; }
  .hero-trust { justify-content: center; }
  .hero-trust li { font-size: .78rem; }
}

/* Stronger tap-to-call in topbar + header (replaces sticky Call Now) */
.topbar a[href^="tel:"] {
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .01em;
  padding: .15rem .35rem;
  border-radius: 6px;
  background: rgba(255,255,255,.08);
}
.topbar a[href^="tel:"]:hover {
  background: rgba(184,151,95,.25);
  color: var(--gold-soft);
}
.nav-phone {
  font-weight: 800 !important;
  letter-spacing: .01em;
}
.nav-cta .btn {
  min-height: 44px;
}

/* Dark-theme contrast: readable body + military cream accents */
.military-rebate p,
.military-rebate .military-thanks {
  color: #F0E6D2; /* cream readable on dark gray */
}
.military-rebate p { color: #E8DFC8; }
.military-rebate strong { color: #FFF8EC; }

/* Storm teaser prominence when near top */
.storm-check--teaser {
  border-top: 3px solid var(--gold);
  background:
    linear-gradient(180deg, rgba(27,43,69,.22) 0%, transparent 40%),
    var(--cream);
}
.storm-check--teaser .storm-check-panel {
  box-shadow: var(--shadow-lg);
}

/* Service soft CTA: primary estimate = filled */
.cta-band .hero-actions .btn:first-child:not(.btn-outline):not(.btn-ghost) {
  box-shadow: 0 8px 22px rgba(168,72,80,.35);
}

/* Mobile tap targets + spacing */
@media (max-width: 720px) {
  .btn, .btn-sm, .nav-cta .btn, .contact-strip a, .step-contact a {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .contact-strip a, .step-contact a {
    padding: .55rem .9rem;
  }
  .credential-badges {
    gap: .45rem;
  }
  .credential-badges li {
    font-size: .78rem;
    padding: .4rem .65rem;
  }
  body { font-size: 1.05rem; }
  .lead { line-height: 1.55; }
}



/* —— Quick Estimate widget (instant ballpark / multi-step) —— */
.quick-estimate {
  padding: var(--section-pad) 0;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(var(--gold-rgb),.16), transparent 42%),
    radial-gradient(ellipse at 88% 100%, rgba(var(--red-rgb),.10), transparent 40%),
    var(--gray-light);
  border-top: 3px solid var(--gold);
  border-bottom: 1px solid rgba(0,0,0,.22);
}
.qe-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 2rem 2.5rem;
  align-items: start;
}
.qe-intro .section-head { margin-bottom: 1rem; max-width: 36rem; }
.qe-bullets { margin: 0 0 1.25rem; max-width: 34rem; }
.qe-bullets li { color: var(--charcoal-soft); }
.qe-alt-path {
  font-size: .95rem;
  color: var(--gray);
  margin: 0;
}
.qe-alt-path a { font-weight: 700; }
.qe-card {
  background: var(--panel);
  border: 1px solid var(--gray-border);
  border-top: 3px solid var(--gold);
  border-radius: calc(var(--radius) + 2px);
  padding: 1.5rem 1.55rem 1.35rem;
  box-shadow: var(--shadow-lg);
}
.qe-progress {
  margin: 0 0 1.15rem;
  padding-bottom: .95rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.qe-prog-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: .55rem;
}
.qe-prog-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .35rem;
}
.qe-prog-steps--4 {
  grid-template-columns: repeat(4, 1fr);
}
.qe-prog-steps li {
  position: relative;
  text-align: center;
  font-size: .68rem;
  font-weight: 650;
  color: var(--gray);
  padding-top: .55rem;
}
.qe-prog-steps li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,.12);
}
.qe-prog-steps li.is-done::before {
  background: rgba(var(--gold-rgb), .55);
}
.qe-prog-steps li.is-active {
  color: var(--gold-soft);
}
.qe-prog-steps li.is-active::before {
  background: var(--gold);
}
.qe-prog-steps li span { display: block; line-height: 1.2; }
.qe-step-title {
  margin: 0 0 .35rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.8vw, 1.45rem);
  color: var(--heading);
}
.qe-step-lead {
  margin: 0 0 1rem;
  font-size: .92rem;
  color: var(--charcoal-soft);
  line-height: 1.45;
}
.qe-field { margin-bottom: 1rem; }
.qe-field label,
.qe-grid label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: .35rem;
}
.qe-field input,
.qe-grid input,
.qe-grid select {
  width: 100%;
  min-height: 46px;
  border-radius: 10px;
  border: 1px solid var(--gray-border);
  background: var(--panel-raised);
  color: var(--charcoal);
  padding: .55rem .75rem;
  font: inherit;
}
.qe-field input:focus,
.qe-grid input:focus,
.qe-grid select:focus {
  outline: 2px solid rgba(var(--gold-rgb), .55);
  outline-offset: 1px;
  border-color: var(--gold);
}
.qe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem 1rem;
  margin-bottom: 1rem;
}
.qe-grid .full { grid-column: 1 / -1; }
.qe-mode {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1rem;
  align-items: center;
}
.qe-label {
  font-weight: 700;
  font-size: .8rem;
  color: var(--charcoal);
  width: 100%;
}
.qe-radio {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--charcoal-soft);
  cursor: pointer;
}
.qe-radio input { width: auto; margin: 0; accent-color: var(--red); min-height: auto; }
.qe-geolabel {
  margin: 0 0 .65rem;
  font-size: .88rem;
  font-weight: 650;
  color: var(--gold-soft);
  line-height: 1.4;
}
.qe-map {
  height: 220px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(184,151,95,.35);
  margin-bottom: 1rem;
  background: var(--navy-deep);
  z-index: 0;
}
.qe-map .leaflet-container {
  width: 100%;
  height: 100%;
  font: inherit;
  background: #1a2332;
}
.qe-products {
  display: grid;
  gap: .65rem;
  margin: 0 0 1rem;
}
.qe-product {
  display: block;
  cursor: pointer;
  margin: 0;
}
.qe-product input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.qe-product-body {
  display: block;
  position: relative;
  padding: .9rem 1rem .85rem;
  border-radius: var(--radius);
  border: 1px solid var(--gray-border);
  background: var(--panel-raised);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.qe-product:hover .qe-product-body {
  border-color: rgba(var(--gold-rgb), .55);
}
.qe-product input:checked + .qe-product-body {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .45), var(--shadow);
  background: linear-gradient(165deg, rgba(var(--navy-rgb), .55), rgba(74, 79, 87, .95));
}
.qe-product-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy-deep);
  background: var(--gold);
  padding: .18rem .45rem;
  border-radius: 999px;
  margin-bottom: .35rem;
}
.qe-product-badge--alt {
  background: rgba(255,255,255,.14);
  color: var(--charcoal-soft);
}
.qe-product-name {
  display: block;
  font-weight: 750;
  font-size: .98rem;
  color: var(--heading);
  margin-bottom: .2rem;
}
.qe-product-desc {
  display: block;
  font-size: .8rem;
  color: var(--gray);
  line-height: 1.4;
}
.qe-product--secondary .qe-product-body {
  opacity: .92;
}
.qe-nav {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin-top: .25rem;
}
.qe-nav--split {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}
.qe-nav--split .btn { flex: 1 1 140px; }
.qe-result {
  background: linear-gradient(165deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-mid) 100%);
  border: 1px solid rgba(184,151,95,.4);
  border-radius: var(--radius);
  padding: 1.15rem 1.2rem 1.05rem;
  margin: 0 0 1rem;
  text-align: center;
}
.qe-result-label {
  margin: 0 0 .25rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.qe-range {
  margin: 0 0 .45rem;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 4vw, 2.05rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.qe-meta {
  margin: 0 0 .65rem;
  font-size: .78rem;
  color: #C5CAD1;
  line-height: 1.45;
}
.qe-disclaimer {
  margin: 0;
  font-size: .8rem;
  color: #E8DFC8;
  line-height: 1.45;
}
.qe-disclaimer strong { color: #FFF8EC; }
.qe-done {
  background: rgba(155, 231, 176, .08);
  border: 1px solid rgba(155, 231, 176, .35);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1rem;
}
.qe-done-title {
  margin: 0 0 .35rem;
  font-weight: 750;
  color: #9BE7B0;
}
.qe-done p { margin: 0; color: var(--charcoal-soft); font-size: .92rem; }
.qe-submit {
  width: 100%;
  min-height: 52px;
  font-size: 1rem;
}
.qe-card .form-note { margin-top: .75rem; }
.qe-status {
  margin-top: .75rem;
  font-size: .9rem;
  min-height: 1.25em;
  color: var(--charcoal-soft);
}
.qe-status--ok { color: #9BE7B0; font-weight: 650; }
.qe-status--err { color: #FFB4B4; font-weight: 650; }
.qe-status--pending { color: var(--gold-soft); }

.qe-trust {
  margin: 0 0 1.1rem;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(184,151,95,.35);
  background: rgba(0,0,0,.18);
}
.qe-trust-line {
  margin: 0;
  font-size: .86rem;
  color: var(--charcoal-soft);
  line-height: 1.45;
}
.qe-trust-line + .qe-trust-line { margin-top: .35rem; }
.qe-trust-line a { font-weight: 700; }
.qe-cta-pair {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 0 0 1rem;
}
.qe-cta-pair .btn { flex: 1 1 180px; text-align: center; }
.qe-squares-note {
  margin: 0;
  font-size: .88rem;
  color: var(--gold-soft);
  line-height: 1.45;
}
.qe-pre-disclaimer {
  margin: 0 0 .85rem;
  padding: .75rem .9rem;
  border-radius: var(--radius);
  border: 1px solid rgba(184,151,95,.4);
  background: rgba(184,151,95,.1);
  font-size: .9rem;
  color: #FFF8EC;
  line-height: 1.45;
}
.qe-mini-note {
  margin: 0 0 1rem;
  font-size: .82rem;
  color: var(--gray);
  line-height: 1.4;
}
.qe-card-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .75rem;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--gray);
}
.qe-card-trust span {
  white-space: nowrap;
}
.qe-card-trust a { color: var(--gold-soft); font-weight: 700; }

@media (max-width: 900px) {
  .qe-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .qe-grid { grid-template-columns: 1fr; }
  .qe-card { padding: 1.25rem 1.1rem 1.15rem; }
  .qe-submit { min-height: 52px; }
  .qe-prog-steps li span { font-size: .62rem; }
  .qe-map { height: 200px; }
  .qe-nav--split { flex-direction: column; }
  .qe-cta-pair { flex-direction: column; }
  .qe-card-trust { font-size: .68rem; gap: .3rem .55rem; }
}

/* END competitive polish Sep 2026 */

/* —— Overnight P0 polish (Sep 19–20, 2026) —— */
.dropdown-label {
  display: block;
  padding: .55rem 1.15rem .25rem;
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-soft);
  pointer-events: none;
}
.dropdown-grouped {
  min-width: 292px;
  max-height: min(72vh, 540px);
}
.nav-links > li.active-section > .nav-drop,
.nav-links > li.has-dropdown.active-section > .nav-drop {
  color: var(--red);
}
.why-opener {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--charcoal-soft);
  max-width: 40rem;
}
.proof-card figcaption,
.photo-frame.proof-card figcaption {
  padding: .75rem 0.15rem 0;
}
.proof-card figcaption strong {
  display: block;
  color: var(--heading);
  font-size: .92rem;
}
.proof-card figcaption span {
  display: block;
  color: var(--gray);
  font-size: .82rem;
  margin-top: .15rem;
}
@media (max-width: 1180px) {
  body.nav-is-open { overflow: hidden; }
  .nav-row.nav-open .nav-links {
    max-height: min(78vh, 640px);
    padding-bottom: 1.25rem;
    overscroll-behavior: contain;
  }
  .nav-row.nav-open .dropdown-grouped {
    max-height: none;
  }
  .nav-row.nav-open .dropdown-label {
    padding-top: .75rem;
  }
  /* Keep hero CTAs clear of sticky header */
  .hero.dual-hero { scroll-margin-top: 5.5rem; }
}
@media (max-width: 420px) {
  .hero-actions .btn { width: 100%; }
  .nav-cta .btn { font-size: .78rem; padding: .55rem .7rem; }
}
/* QE progress labels readable on mobile */
.qe-prog-steps li { font-size: .75rem; }


/* Class aliases for overnight nav labels */
.dropdown-label, .dropdown-label { }
.dropdown .dropdown-label,
.dropdown .dropdown-label {
  display: block;
  padding: .55rem 1.15rem .25rem;
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-soft, #E8D4B0);
  pointer-events: none;
}