/* ==========================================================================
   Premium layer — loads after style.css and refines the shared look.
   Colors, type and spacing all come from the tokens below, so a new client
   only needs new values here (plus their logo/photos) to re-skin the site.
   ========================================================================== */

:root {
  /* Brand */
  --accent:       #F7A823;
  --accent-dark:  #E8950F;
  --accent-rgb:   247, 168, 35;

  /* Deep, slightly desaturated navy reads more upscale than bright blue */
  --dark:    #061430;
  --dark-2:  #0A1B3D;
  --dark-3:  #0E2450;
  --muted:   #A9B6CF;

  /* Light "paper" sections for contrast between the dark ones */
  --paper:        #F7F5F0;
  --paper-2:      #EFEBE2;
  --ink:          #0B1A33;
  --ink-muted:    #5A6476;
  --line-dark:    rgba(255,255,255,0.09);
  --line-light:   rgba(11,26,51,0.10);

  --radius:    18px;
  --radius-sm: 12px;
  --shadow-lg: 0 30px 70px -20px rgba(3,10,26,0.55);
  --shadow-md: 0 18px 40px -18px rgba(3,10,26,0.45);
}

body { font-size: 1.02rem; }
p { color: var(--muted); }

/* -------------------- Typography -------------------- */
h1 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; }
h2 {
  font-size: clamp(2.1rem, 3.6vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}
h3 { letter-spacing: -0.01em; }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin-bottom: 1.1rem;
}
.section-label::before {
  content: '';
  width: 28px; height: 1.5px;
  background: currentColor;
  opacity: 0.9;
}
.section-head.centered .section-label::after {
  content: '';
  width: 28px; height: 1.5px;
  background: currentColor;
  opacity: 0.9;
}
.section-head { margin-bottom: 3.5rem; }
.section-head h2 { margin-bottom: 1.1rem; }
.section-head p { font-size: 1.06rem; line-height: 1.7; }

/* Split section heading: title left, intro + link right */
.section-head-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.5rem 4rem;
  align-items: end;
  max-width: none;
  margin-bottom: 3.5rem;
}
.section-head-split h2 { margin-bottom: 0; }
.section-head-split p { margin-bottom: 0; }

/* -------------------- Layout -------------------- */
section { padding: 7rem 5%; }
.wrap { max-width: 1240px; }

.section-light { background: var(--paper); color: var(--ink); }
.section-light h2,
.section-light h3 { color: var(--ink); }
.section-light p { color: var(--ink-muted); }
.section-light .section-label { color: #B9740A; }

/* -------------------- Buttons -------------------- */
.btn {
  border-radius: 999px;
  padding: 1rem 1.9rem;
  font-weight: 700;
  letter-spacing: 0.005em;
}
.btn .icon { width: 1.05rem; height: 1.05rem; }
.btn-primary {
  background: linear-gradient(180deg, #FFB534 0%, var(--accent) 55%, #EE9C14 100%);
  box-shadow: 0 10px 24px -10px rgba(var(--accent-rgb), 0.7), inset 0 1px 0 rgba(255,255,255,0.35);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background: linear-gradient(180deg, #FFBE4A 0%, #F9AE2E 55%, var(--accent-dark) 100%);
    box-shadow: 0 16px 32px -12px rgba(var(--accent-rgb), 0.8), inset 0 1px 0 rgba(255,255,255,0.35);
  }
  .btn-arrow:hover .icon { transform: translateX(3px); }
}
.btn-arrow .icon { transition: transform 0.2s var(--ease-premium); }
.btn-ghost {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-dark {
  background: var(--ink);
  color: #fff !important;
}
@media (hover: hover) and (pointer: fine) {
  .btn-dark:hover { transform: translateY(-2px); background: #13284D; box-shadow: var(--shadow-md); }
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent);
}
.text-link .icon { width: 1rem; height: 1rem; transition: transform 0.2s var(--ease-premium); }
.section-light .text-link { color: #A8680A; }
@media (hover: hover) and (pointer: fine) {
  .text-link:hover .icon { transform: translateX(3px); }
}

/* ==========================================================================
   NAV — transparent over the hero photo, solid once you scroll
   ========================================================================== */
.nav {
  background: rgba(6,20,48,0.72);
  border-bottom: 1px solid transparent;
  transition: background 0.35s var(--ease-premium), border-color 0.35s var(--ease-premium);
}
body:has(.hero-premium) .nav:not(.scrolled) {
  background: linear-gradient(180deg, rgba(4,12,30,0.65) 0%, rgba(4,12,30,0) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body:has(.mobile-menu.open) .nav,
.nav.scrolled {
  background: rgba(6,20,48,0.94) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom-color: var(--line-dark);
}
.nav-links > a,
.nav-dropdown-toggle { color: rgba(255,255,255,0.88); }
.nav-right .btn-primary { padding: 0.8rem 1.5rem; }
.mobile-menu { background: rgba(6,20,48,0.97); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero-premium .hero-bg::after {
  background:
    linear-gradient(90deg, rgba(4,12,30,0.94) 0%, rgba(4,12,30,0.80) 42%, rgba(4,12,30,0.30) 100%),
    linear-gradient(0deg, rgba(6,20,48,1) 0%, rgba(6,20,48,0) 22%);
}
.hero-premium .hero-content { padding-top: 3.5rem; }
@media (min-width: 1025px) {
  .hero-premium .hero-inner { align-items: center; }
  .hero-premium .hero-content { padding-top: 0; }
}

.hero-rating {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  margin-bottom: 1.6rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  transition: background 0.2s var(--ease-premium), border-color 0.2s var(--ease-premium);
}
.hero-rating strong { color: #fff; font-weight: 700; }
.hero-rating-stars { display: inline-flex; gap: 2px; color: var(--accent); }
.hero-rating-stars svg { width: 15px; height: 15px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .hero-rating:hover { background: rgba(255,255,255,0.11); border-color: rgba(var(--accent-rgb),0.45); }
}

.hero-premium h1 {
  font-size: clamp(2.6rem, 4.6vw, 4.4rem);
  margin-bottom: 1.4rem;
  text-wrap: balance;
}
.hero-premium h1 .hl { color: var(--accent); }
.hero-premium .hero-sub {
  font-size: 1.14rem;
  line-height: 1.7;
  max-width: 50ch;
  color: rgba(255,255,255,0.80);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.6rem;
  list-style: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.hero-trust li { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-trust svg {
  width: 18px; height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
  flex-shrink: 0;
}

/* Quote card: glassier, with a thin gold rule along the top */
.hero-premium .estimate-card {
  position: relative;
  background: linear-gradient(180deg, rgba(14,32,72,0.92) 0%, rgba(8,22,52,0.94) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.hero-premium .estimate-card::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.estimate-card .form-group input,
.estimate-card .form-group select,
.estimate-card .form-group textarea { border-radius: 10px; }

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
.trust-strip {
  padding: 0 5%;
  background: var(--dark);
  position: relative;
  z-index: 3;
}
.trust-strip .trust-grid {
  max-width: 1240px;
  gap: 0;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  overflow: hidden;
}
.trust-strip .trust-item {
  padding: 1.7rem 1.6rem;
  align-items: center;
}
.trust-strip .trust-item + .trust-item { border-left: 1px solid var(--line-dark); }
.trust-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  flex-shrink: 0;
}
.trust-icon .icon { width: 1.35rem; height: 1.35rem; }
.trust-strip .trust-item strong { font-family: var(--font-heading); font-size: 1rem; }
.trust-strip .trust-item span { font-size: 0.84rem; line-height: 1.5; color: var(--muted); }

/* ==========================================================================
   SERVICES (light section)
   ========================================================================== */
.section-light .services-grid,
.services-grid {
  gap: 1.25rem;
  background: none;
}
.service-card {
  border-radius: var(--radius);
  min-height: 500px;
  box-shadow: var(--shadow-md);
  isolation: isolate;
}
.service-card-overlay {
  background: linear-gradient(to top, rgba(4,12,30,0.96) 0%, rgba(4,12,30,0.78) 34%, rgba(4,12,30,0.18) 64%, rgba(4,12,30,0) 100%);
}
.service-card-content { padding: 2rem 1.8rem; }
.service-card h3 { font-size: 1.3rem; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; }
.service-card p { font-size: 0.9rem; line-height: 1.6; }
.service-card .icon-box {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.16);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  color: var(--accent);
}
.service-card-num {
  position: absolute;
  top: 1.3rem; right: 1.4rem;
  z-index: 1;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.75);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(4,12,30,0.45);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (hover: hover) and (pointer: fine) {
  .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
}
.services-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  margin-top: 2.5rem;
  padding: 1.6rem 2rem;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line-light);
}
.services-foot p { margin: 0; font-weight: 600; color: var(--ink); font-size: 1.05rem; }

/* ==========================================================================
   RECENT WORK — bento gallery
   ========================================================================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 250px;
  gap: 1rem;
}
.gallery-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 0;
  background: var(--dark-3);
}
.gallery-item.is-feature { grid-column: span 2; grid-row: span 2; }
.gallery-item.is-wide { grid-column: span 2; }
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-premium);
}
.gallery-item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1.3rem 1.1rem;
  background: linear-gradient(to top, rgba(4,12,30,0.92), rgba(4,12,30,0));
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.gallery-item figcaption strong { font-family: var(--font-heading); font-size: 0.98rem; color: #fff; }
.gallery-item figcaption span { font-size: 0.82rem; color: rgba(255,255,255,0.75); line-height: 1.45; }
.gallery-item.is-feature figcaption { padding: 4rem 1.8rem 1.6rem; }
.gallery-item.is-feature figcaption strong { font-size: 1.25rem; }
.gallery-item.is-feature figcaption span { font-size: 0.92rem; }
@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover img { transform: scale(1.04); }
}

.result-banner {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem 2rem;
  padding: 1.8rem 2rem;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--accent-rgb), 0.16), transparent 55%),
    rgba(255,255,255,0.03);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
}
.result-seal {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), 0.14);
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  color: var(--accent);
}
.result-seal .icon { width: 1.8rem; height: 1.8rem; }
.result-banner h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: #fff; margin-bottom: 0.25rem; }
.result-banner p { margin: 0; font-size: 0.95rem; }

/* ==========================================================================
   WHY US — photo + standards checklist + stats
   ========================================================================== */
.why-premium {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 5rem;
  align-items: center;
}
.why-media { position: relative; min-width: 0; }
.why-media .img-slot {
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
}
.why-media-badge {
  position: absolute;
  right: -1.5rem; bottom: 2.2rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.3rem;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  max-width: 260px;
}
.why-media-badge .num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--ink);
}
.why-media-badge .label { font-size: 0.82rem; font-weight: 600; line-height: 1.35; color: var(--ink-muted); }
.why-copy-premium > p { font-size: 1.06rem; line-height: 1.75; margin-bottom: 1.1rem; }
.check-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.95rem 1.8rem;
  margin: 2rem 0 2.2rem;
  list-style: none;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255,255,255,0.9);
}
.check-list svg {
  width: 22px; height: 22px;
  padding: 4px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  flex-shrink: 0;
}
.why-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 5rem;
  border-top: 1px solid var(--line-dark);
}
.stats-row .stat {
  padding: 2.2rem 1.5rem 0;
  text-align: center;
  min-width: 0;
}
.stats-row .stat + .stat { border-left: 1px solid var(--line-dark); }
.stats-row .stat-num {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 0.4rem;
}
.stats-row .stat-num .icon { width: 0.7em; height: 0.7em; color: var(--accent); }
.stats-row .stat-num small { font-size: 0.5em; color: var(--accent); font-weight: 800; }
.stats-row .stat-label { font-size: 0.86rem; letter-spacing: 0.02em; }

/* ==========================================================================
   PROCESS (light section)
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 2.2rem 2rem 2.2rem;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line-light);
  box-shadow: 0 10px 30px -18px rgba(11,26,51,0.25);
  min-width: 0;
  transition: transform 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium);
}
@media (hover: hover) and (pointer: fine) {
  .step:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -20px rgba(11,26,51,0.3); }
}
.step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem; }
.step-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.04em;
  /* solid gold gradient numerals (never a thin outline) */
  background: linear-gradient(180deg, #F9B53A 0%, #E8950F 55%, #B9740A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink);
  color: var(--accent);
}
.step-icon .icon { width: 1.4rem; height: 1.4rem; }
.step h3 { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800; margin-bottom: 0.6rem; }
.step p { font-size: 0.96rem; line-height: 1.65; margin: 0; }
.steps-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.6rem; margin-top: 3rem; }

/* ==========================================================================
   LIGHTING FEATURE
   ========================================================================== */
.feature-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem 4rem;
  align-items: center;
  padding: 4rem;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(var(--accent-rgb), 0.22), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(60,120,230,0.20), transparent 60%),
    linear-gradient(160deg, #0F2654 0%, #081A3C 100%);
  border: 1px solid var(--line-dark);
  box-shadow: var(--shadow-lg);
}
.feature-panel h2 { margin-bottom: 1.1rem; }
.feature-panel > div > p { font-size: 1.06rem; line-height: 1.75; margin-bottom: 2rem; }
.feature-list { display: flex; flex-direction: column; gap: 1rem; list-style: none; }
.feature-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line-dark);
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  line-height: 1.45;
}
.feature-list .icon-box { width: 42px; height: 42px; border-radius: 11px; background: rgba(var(--accent-rgb), 0.14); }
.feature-list .icon-box .icon { width: 1.25rem; height: 1.25rem; }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.review-strip.reviews-premium { padding: 7rem 0 6rem; border-top: none; }
.reviews-premium .section-head-split { padding: 0 5%; max-width: 1240px; margin-left: auto; margin-right: auto; box-sizing: content-box; }
.rating-summary {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  justify-self: end;
  padding: 1.2rem 1.6rem;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-dark);
}
.rating-summary .big {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
}
.rating-summary .stars { display: flex; gap: 3px; color: var(--accent); margin-bottom: 0.3rem; }
.rating-summary .stars svg { width: 18px; height: 18px; fill: currentColor; }
.rating-summary .meta { font-size: 0.85rem; color: var(--muted); line-height: 1.4; }
.rating-summary .meta strong { color: #fff; }

.review-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 2rem 1.9rem;
  flex: 0 0 360px;
  width: 360px;
  position: relative;
}
.review-card::before {
  content: '\201C';
  position: absolute;
  top: 0.6rem; right: 1.4rem;
  font-family: Georgia, serif;
  font-size: 4.2rem;
  line-height: 1;
  color: rgba(var(--accent-rgb), 0.22);
}
.review-text { font-size: 0.95rem; line-height: 1.7; color: rgba(255,255,255,0.86); }
.review-author { font-family: var(--font-heading); font-size: 0.95rem; }
@media (max-width: 520px) {
  .review-card { flex-basis: 84vw; width: 84vw; }
}

.reviews-actions {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 1.5rem;
  margin-top: 2.8rem;
}
.reviews-actions .reviews-cta { margin-top: 0; padding: 0; }
.reviews-premium .review-us-cta { margin-top: 0; }

/* The "Review Us on Google" card: quieter, horizontal on desktop */
.review-us-cta {
  max-width: 760px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title btn" "stars btn";
  align-items: center;
  column-gap: 2rem;
  text-align: left;
  padding: 1.6rem 2rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: var(--radius);
  box-shadow: none;
}
.review-us-cta h3 { grid-area: title; font-size: 1.35rem; margin-bottom: 0.4rem; }
.review-us-stars { grid-area: stars; justify-content: flex-start; margin-bottom: 0; }
.review-us-stars svg { width: 20px; height: 20px; }
.review-us-cta .btn { grid-area: btn; }
@media (max-width: 600px) {
  .review-us-cta {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "stars" "btn";
    text-align: center;
    row-gap: 0;
  }
  .review-us-stars { justify-content: center; margin-bottom: 1.2rem; }
}

/* ==========================================================================
   FAQ (light section)
   ========================================================================== */
.faq-premium {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3rem 5rem;
  align-items: start;
}
.faq-premium .faq-aside { position: sticky; top: calc(var(--nav-h) + 2rem); }
.faq-premium .faq-aside p { font-size: 1.04rem; line-height: 1.7; margin-bottom: 1.8rem; }
.faq-aside-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.faq-premium .faq-list {
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line-light);
  padding: 0.6rem 1.8rem;
  box-shadow: 0 10px 30px -18px rgba(11,26,51,0.25);
}
.faq-premium .faq-item { border-bottom: 1px solid var(--line-light); }
.faq-premium .faq-item:last-child { border-bottom: none; }
.faq-premium .faq-item:hover { background: none; }
.faq-premium .faq-question {
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 1.06rem;
  font-weight: 700;
  padding: 1.45rem 0;
}
.faq-premium .faq-question .icon {
  width: 30px; height: 30px;
  padding: 7px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
}
.faq-premium .faq-item.open .faq-question .icon { background: var(--accent); }
.faq-premium .faq-answer-inner { color: var(--ink-muted); font-size: 0.98rem; line-height: 1.7; padding: 0 2.5rem 1.5rem 0; }

/* ==========================================================================
   SERVICE AREA
   ========================================================================== */
.area-premium .area-grid { gap: 4.5rem; margin-top: 0; grid-template-columns: 1fr 1fr; }
.area-premium .area-map { border-radius: 22px; aspect-ratio: 1 / 1; box-shadow: var(--shadow-lg); border: 1px solid var(--line-dark); }
.area-premium .area-list > p { margin: -0.6rem 0 1.8rem; font-size: 1.04rem; line-height: 1.7; }
.area-premium .area-pin-grid { gap: 0.2rem 1.5rem; }
.area-premium .area-pin-item {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line-dark);
}
.area-premium .area-pin-item a { font-size: 0.97rem; font-weight: 600; color: rgba(255,255,255,0.9); }

/* ==========================================================================
   FINAL CTA (photo background)
   ========================================================================== */
.cta-final {
  position: relative;
  padding: 8rem 5%;
  text-align: center;
  overflow: hidden;
  background: var(--dark);
}
.cta-final-bg { position: absolute; inset: 0; z-index: 0; }
.cta-final-bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-final-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 90% at 50% 50%, rgba(6,20,48,0.78), rgba(6,20,48,0.95)),
    linear-gradient(0deg, rgba(6,20,48,0.6), rgba(6,20,48,0.6));
}
.cta-final-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.cta-final h2 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); color: #fff; margin-bottom: 1.1rem; }
.cta-final p { font-size: 1.12rem; line-height: 1.7; color: rgba(255,255,255,0.82); margin-bottom: 2.2rem; }
.cta-final-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.cta-final-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.6rem;
  margin-top: 2rem;
  list-style: none;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
}
.cta-final-note li { display: inline-flex; align-items: center; gap: 0.45rem; }
.cta-final-note svg { width: 16px; height: 16px; color: var(--accent); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: #040E24; border-top: 1px solid var(--line-dark); }
.footer-brand { display: flex; align-items: center; gap: 0.6rem; font-size: 1.3rem; }
.footer-brand img { width: 46px; height: auto; }
.footer-tagline { line-height: 1.7; max-width: 32ch; margin-bottom: 1.4rem; }
.footer-col h4 { color: rgba(255,255,255,0.55); letter-spacing: 0.14em; }
.footer-col a { color: rgba(255,255,255,0.78); transition: color 0.2s var(--ease-premium); }
.footer-col ul { gap: 0.65rem; }
.footer-areas { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.65rem 1.2rem !important; }
.footer-contact-item { margin-bottom: 0.75rem; }
.footer-bottom { font-size: 0.8rem; }

/* Floating quote button: pill to match the round chat bubble */
.quote-fab {
  border-radius: 999px;
  background: linear-gradient(180deg, #FFB534 0%, var(--accent) 55%, #EE9C14 100%);
  box-shadow: 0 14px 30px -8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.35);
  letter-spacing: 0.04em;
}

/* Popup + contact form cards match the hero card */
.quote-modal-box {
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  border-radius: 22px;
  background: linear-gradient(180deg, #0E2048 0%, #081834 100%);
}
.quote-modal { background: rgba(3,9,22,0.82); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .why-premium { gap: 3.5rem; }
  .why-media-badge { right: 1rem; }
  .feature-panel { padding: 3rem; gap: 2.5rem; }
}
@media (max-width: 1024px) {
  section { padding: 5rem 5%; }
  .review-strip.reviews-premium { padding: 5rem 0 4.5rem; }
  .section-head-split { grid-template-columns: 1fr; align-items: start; }
  .rating-summary { justify-self: start; }
  .why-premium { grid-template-columns: 1fr; }
  .why-media { max-width: 560px; }
  .feature-panel { grid-template-columns: 1fr; }
  .faq-premium { grid-template-columns: 1fr; }
  .faq-premium .faq-aside { position: static; }
  .area-premium .area-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .area-premium .area-map { aspect-ratio: 16 / 10; }
  .trust-strip .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-strip .trust-item:nth-child(3) { border-left: none; }
  .trust-strip .trust-item:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
  .hero-premium .hero-content { padding-top: 2.5rem; }
}
@media (max-width: 860px) {
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }
  .steps { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .stats-row .stat:nth-child(3) { border-left: none; }
  .stats-row .stat:nth-child(n+3) { border-top: 1px solid var(--line-dark); margin-top: 2rem; }
  .result-banner { grid-template-columns: auto 1fr; }
  .result-banner .btn { grid-column: 1 / -1; justify-self: start; }
  .footer-areas { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .check-list { grid-template-columns: 1fr; }
  .trust-strip .trust-grid { grid-template-columns: 1fr; }
  .trust-strip .trust-item + .trust-item { border-left: none; border-top: 1px solid var(--line-dark); }
  .trust-strip .trust-item { padding: 1.3rem 1.3rem; }
  .services-foot { padding: 1.4rem; }
  .services-foot .btn { width: 100%; }
}
@media (max-width: 520px) {
  section { padding: 4rem 5%; }
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .gallery-item.is-feature, .gallery-item.is-wide { grid-column: auto; grid-row: auto; }
  .gallery-item.is-feature { grid-row: span 1; }
  .feature-panel { padding: 2rem 1.4rem; border-radius: 20px; }
  .result-banner { grid-template-columns: 1fr; text-align: left; padding: 1.5rem; }
  .result-banner .btn { width: 100%; }
  .step { padding: 1.8rem 1.5rem; }
  .faq-premium .faq-list { padding: 0.3rem 1.2rem; }
  .faq-premium .faq-answer-inner { padding-right: 0; }
  .why-media-badge { left: 1rem; right: auto; bottom: 1rem; }
  .cta-final { padding: 5.5rem 5%; }
  .cta-final-buttons .btn { width: 100%; }
  .rating-summary { width: 100%; }
  .hero-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1rem; font-size: 0.84rem; }
  .hero-premium .hero-content { padding-top: 1.5rem; }
  .hero-rating { font-size: 0.78rem; }
}
@media (max-width: 480px) {
  .hero-premium .hero-buttons .btn { width: 100%; }
}

/* Late additions */
.btn-outline-dark {
  background: #fff;
  color: var(--ink) !important;
  border: 1px solid var(--line-light);
}
@media (hover: hover) and (pointer: fine) {
  .btn-outline-dark:hover { transform: translateY(-2px); border-color: rgba(11,26,51,0.3); box-shadow: var(--shadow-md); }
}
.btn-outline-dark .icon { color: #B9740A; }
.why-media-badge .num small { font-size: 0.5em; color: #B9740A; font-weight: 800; margin-left: 2px; }
/* Cards on light sections keep their own white-on-photo text */
.section-light .service-card h3 { color: #fff; }
.section-light .service-card p { color: rgba(255,255,255,0.78); }
.section-light .service-card .service-card-link { color: var(--accent); }
.why-copy-premium h2,
.faq-aside h2 { margin-bottom: 1.2rem; }
.footer-brand b { font-weight: inherit; }

/* ==========================================================================
   HOMEPAGE HERO — business name first, keyword headline under it
   ========================================================================== */
.hero-premium h1 .hero-brand {
  display: block;
  font-size: clamp(3rem, 5.4vw, 5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.hero-premium h1 .hero-title {
  display: block;
  margin-top: 0.85rem;
  font-size: clamp(1.45rem, 2.3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.94);
}

/* ==========================================================================
   INNER PAGE HERO (service, area, FAQ, contact pages)
   ========================================================================== */
.page-hero { min-height: 72vh; display: flex; align-items: center; }
.page-hero .hero-bg::after {
  background:
    linear-gradient(90deg, rgba(4,12,30,0.95) 0%, rgba(4,12,30,0.82) 50%, rgba(4,12,30,0.45) 100%),
    linear-gradient(0deg, rgba(6,20,48,1) 0%, rgba(6,20,48,0) 30%);
}
.page-hero .area-hero-inner { padding-top: 2.5rem; padding-bottom: 4.5rem; }
.page-hero .area-hero-inner .hero-content { max-width: 780px; padding-top: 2rem; }
.page-hero .area-hero-inner .hero-content h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.8rem);
  line-height: 1.06;
  margin-bottom: 1.2rem;
  text-wrap: balance;
}
.page-hero .area-hero-inner .hero-sub { font-size: 1.1rem; line-height: 1.7; max-width: 58ch; margin-bottom: 2rem; color: rgba(255,255,255,0.8); }
.page-hero .hero-buttons { margin-bottom: 2rem; }

.breadcrumb { margin-bottom: 1.4rem; }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
}
.breadcrumb li + li::before { content: '/'; margin-right: 0.4rem; color: rgba(255,255,255,0.35); }
.breadcrumb a { color: rgba(255,255,255,0.75); transition: color 0.2s var(--ease-premium); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current] { color: var(--accent); }

/* ==========================================================================
   SHARED INNER-PAGE BLOCKS
   ========================================================================== */
/* Intro copy on light sections */
.section-light .area-intro { max-width: 860px; }
.section-light .area-intro p { color: var(--ink-muted); font-size: 1.06rem; line-height: 1.8; }
.area-intro p:first-child { font-size: 1.15rem; }
.section-light .area-intro p:first-child { color: var(--ink); }

/* "What's included" checklists become a grid of tiles */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto;
}
.detail-grid .financing-point {
  align-items: center;
  padding: 1.15rem 1.3rem;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-dark);
  transition: border-color 0.2s var(--ease-premium), background 0.2s var(--ease-premium);
}
@media (hover: hover) and (pointer: fine) {
  .detail-grid .financing-point:hover { border-color: rgba(var(--accent-rgb), 0.4); background: rgba(255,255,255,0.06); }
}
.detail-grid .financing-point p { font-weight: 600; color: rgba(255,255,255,0.92); }
@media (max-width: 600px) { .detail-grid { grid-template-columns: 1fr; } }

/* Photo grids on service pages */
.work-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin-top: 0;
}
.work-item .img-slot { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.work-caption strong { font-family: var(--font-heading); }
@media (max-width: 860px) { .work-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .work-grid { grid-template-columns: 1fr; } }

/* Text-only cards (service areas hub) */
.service-card:not(:has(.service-card-media)) {
  min-height: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  border: 1px solid var(--line-dark);
  box-shadow: none;
}
.service-card:not(:has(.service-card-media)) .service-card-content { margin-top: 0; }
@media (hover: hover) and (pointer: fine) {
  .service-card:not(:has(.service-card-media)):hover { border-color: rgba(var(--accent-rgb), 0.45); box-shadow: var(--shadow-md); }
}
.service-card .service-card-link { margin-top: auto; padding-top: 1rem; }
.service-card-content { flex: 1; }

/* FAQ page on a light section */
.section-light .faq-grid { gap: 3rem 4rem; align-items: start; }
.section-light .faq-list {
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line-light);
  padding: 0.6rem 1.8rem;
  box-shadow: 0 10px 30px -18px rgba(11,26,51,0.25);
}
.section-light .faq-item { border-bottom: 1px solid var(--line-light); }
.section-light .faq-item:last-child { border-bottom: none; }
.section-light .faq-item:hover { background: none; }
.section-light .faq-question { color: var(--ink); font-family: var(--font-heading); font-size: 1.04rem; padding: 1.4rem 0; }
.section-light .faq-question .icon { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--paper); color: var(--ink); }
.section-light .faq-item.open .faq-question .icon { background: var(--accent); }
.section-light .faq-answer-inner { color: var(--ink-muted); font-size: 0.98rem; line-height: 1.7; padding: 0 2.5rem 1.5rem 0; }
.section-light .faq-visual { position: sticky; top: calc(var(--nav-h) + 2rem); }
.section-light .faq-visual .img-slot { border-radius: 22px; box-shadow: var(--shadow-lg); }
@media (max-width: 860px) { .section-light .faq-visual { position: static; } }
@media (max-width: 520px) { .section-light .faq-list { padding: 0.3rem 1.2rem; } .section-light .faq-answer-inner { padding-right: 0; } }

/* Contact page */
.section-light .contact-info p { color: var(--ink-muted); }
.section-light .contact-info .contact-note { color: var(--ink-muted); }
.contact-chip { border-radius: 14px; padding: 1.1rem 1.4rem; box-shadow: 0 10px 24px -14px rgba(var(--accent-rgb), 0.8); }
.contact-form {
  position: relative;
  background: linear-gradient(180deg, #0E2048 0%, #081834 100%);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.contact-form::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* Legal pages */
.legal-header {
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(var(--accent-rgb), 0.12), transparent 60%),
    linear-gradient(180deg, #061430 0%, #0A1B3D 100%);
  padding-bottom: 4rem;
}
.section-light .legal-content h2 { color: var(--ink); border-top-color: var(--line-light); }
.section-light .legal-content h3 { color: var(--ink); }
.section-light .legal-content p,
.section-light .legal-content li { color: var(--ink-muted); }
.section-light .legal-content li strong { color: var(--ink); }
.section-light .legal-content a { color: #A8680A; text-decoration: underline; text-underline-offset: 2px; }
.legal-content { max-width: 820px; margin: 0 auto; }

/* The "Review Us" block on pages without a reviews strip */
.review-cta-section { padding: 5rem 5%; }

@media (max-width: 1024px) {
  .page-hero { min-height: 0; }
  .page-hero .area-hero-inner .hero-content { padding-top: 1.5rem; }
}
@media (max-width: 520px) {
  .page-hero .area-hero-inner { padding-bottom: 3rem; }
  .page-hero .hero-buttons .btn { width: 100%; }
}
/* Forms keep white headings even inside light sections */
.section-light .quote-form h2,
.section-light .quote-form h3 { color: #fff; }
/* On phones, questions come first; the decorative photo is dropped */
@media (max-width: 860px) { .section-light .faq-visual { display: none; } }

/* ==========================================================================
   ONE CONTAINER FOR EVERYTHING
   Every section, the nav, the hero and the footer share the same content
   edges, so headings, cards and photos line up down the whole page.
   --gutter is the side margin on small screens; --container caps the
   content width on large ones.
   ========================================================================== */
:root {
  --gutter: clamp(20px, 5vw, 72px);
  --container: clamp(1100px, 84vw, 1560px);
  --edge: max(var(--gutter), calc((100% - var(--container)) / 2));
}
section { padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap,
.wrap:has(.services-grid) { max-width: var(--container); padding-left: 0; padding-right: 0; }

.nav { padding-left: var(--edge); padding-right: var(--edge); }
.mobile-menu { padding-left: var(--gutter); padding-right: var(--gutter); }
.hero { padding-left: 0; padding-right: 0; }
.hero .hero-inner { padding-left: var(--edge); padding-right: var(--edge); }

.trust-strip { padding: 0 var(--gutter); }
.trust-strip .trust-grid { max-width: var(--container); }
.cta-final { padding-left: var(--gutter); padding-right: var(--gutter); }

.footer { padding-left: var(--gutter); padding-right: var(--gutter); }

/* the review carousel runs edge to edge, so its text rows carry their own side margins */
.review-strip { padding-left: 0; padding-right: 0; }
.review-strip .wrap {
  max-width: calc(var(--container) + 2 * var(--gutter));
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.reviews-premium .section-head-split {
  max-width: var(--container);
  padding: 0 var(--gutter);
  box-sizing: content-box;
}
.review-strip .reviews-cta { padding: 0; }

/* legal pages: title block lines up with the reading column */
.legal-header .wrap { max-width: 820px; }

/* ==========================================================================
   NAV — show the full menu on regular laptop screens too
   (the phone number joins it from 1561px, where there's room)
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1560px) {
  .nav { grid-template-columns: 1fr auto 1fr; }
  .nav-links { display: flex; gap: 1.7rem; }
  .hamburger { display: none; }
  .mobile-menu, .mobile-backdrop { display: none; }
}

/* ==========================================================================
   COLOR + DEPTH POLISH
   ========================================================================== */
/* Soft light falling across the dark sections instead of flat fills */
.bg-dark-2 {
  background:
    radial-gradient(1100px 520px at 0% 0%, rgba(40,96,200,0.16), transparent 62%),
    radial-gradient(900px 480px at 100% 100%, rgba(var(--accent-rgb),0.05), transparent 60%),
    var(--dark-2);
}
.section-light {
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(var(--accent-rgb),0.07), transparent 60%),
    var(--paper);
}

/* Floating quote button: normal capitals, not shouty all-caps */
.quote-fab { text-transform: none; letter-spacing: 0.01em; font-size: 0.95rem; }

/* Selection + scrollbar in brand colors */
::selection { background: rgba(var(--accent-rgb), 0.85); color: #061430; }
html { scrollbar-color: #24375F #061430; }

/* ==========================================================================
   FOOTER LAYOUT
   ========================================================================== */
.footer-grid { grid-template-columns: 1.15fr 1fr 1.55fr 1fr; gap: 3rem; }
.footer-areas a { white-space: nowrap; }
.footer-bottom { justify-content: space-between; gap: 0.8rem 2rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
.why-media-badge { max-width: 300px; }

/* ==========================================================================
   MOBILE POLISH
   ========================================================================== */
/* Rating badge stays on one line */
@media (max-width: 520px) {
  .hero-rating { flex-wrap: nowrap; gap: 0.5rem; padding: 0.45rem 0.85rem 0.45rem 0.65rem; font-size: 0.74rem; white-space: nowrap; max-width: 100%; }
  .hero-rating-stars svg { width: 12px; height: 12px; }
}
/* Service-area list: two columns on phones instead of one long column */
@media (max-width: 520px) {
  .area-pin-grid,
  .area-premium .area-pin-grid { grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .area-pin-item { gap: 0.45rem; }
  .area-pin-item a,
  .area-premium .area-pin-item a { font-size: 0.88rem; }
  .area-pin-item .icon { width: 1rem; height: 1rem; }
}
/* Leave room under the footer for the floating quote + chat buttons */
@media (max-width: 860px) {
  .footer-bottom { padding-bottom: 6rem; }
}

/* Intro sections on service/area pages: heading beside the copy on desktop
   (instead of a narrow column with empty space to its right) */
@media (min-width: 1025px) {
  .wrap:has(> .area-intro) {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 2rem 5rem;
    align-items: start;
  }
  .wrap:has(> .area-intro) > .section-head {
    margin-bottom: 0;
    position: sticky;
    top: calc(var(--nav-h) + 2rem);
  }
  .wrap:has(> .area-intro) > .area-intro { margin-top: 0; }
}

/* Contact page: email/phone as clean white cards instead of solid orange bars */
.section-light .contact-chip {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line-light);
  box-shadow: 0 10px 30px -18px rgba(11,26,51,0.3);
  font-weight: 600;
  gap: 1rem;
  padding: 0.95rem 1.2rem;
}
.section-light .contact-chip .icon {
  width: 42px; height: 42px;
  padding: 11px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--accent);
}
@media (hover: hover) and (pointer: fine) {
  .section-light .contact-chip:hover { background: #fff; border-color: rgba(var(--accent-rgb),0.6); transform: translateY(-2px); box-shadow: var(--shadow-md); }
}

/* Legal pages: the sub-sections inside the reading column are not page sections */
.legal-content section { padding: 0; }

/* Desktop nav: links sit centered in the space between the logo and the
   phone/quote buttons, so the gaps on either side stay equal at every width */
@media (min-width: 1200px) {
  .nav { grid-template-columns: auto 1fr auto; column-gap: 2rem; }
  .nav-links { justify-self: center; }
}

/* Tablet: the hero quote form lines up with the hero text above it
   instead of floating in the middle */
@media (max-width: 1024px) {
  .hero-premium .estimate-card { justify-self: start; margin-left: 0; margin-right: 0; }
}
@media (max-width: 860px) {
  .hero-premium .estimate-card { justify-self: stretch; max-width: none; }
}

/* ==========================================================================
   HOW IT WORKS — dark band with solid gold step numbers
   Fades from the navy above into the darker navy below so it flows
   between the neighbouring sections.
   ========================================================================== */
.section-steps {
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(var(--accent-rgb), 0.10), transparent 70%),
    linear-gradient(180deg, #0B1E46 0%, #061430 100%);
  border-top: 1px solid var(--line-dark);
}
.section-steps .section-head p { color: var(--muted); }
.section-steps .steps { position: relative; }
.section-steps .step {
  background: linear-gradient(180deg, rgba(255,255,255,0.065) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}
/* thin gold rule along the top of each card */
.section-steps .step::before {
  content: '';
  position: absolute;
  top: 0; left: 2rem; right: 2rem;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0), rgba(var(--accent-rgb),0.9), rgba(var(--accent-rgb),0));
}
@media (hover: hover) and (pointer: fine) {
  .section-steps .step:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--accent-rgb), 0.35);
    box-shadow: 0 36px 70px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(var(--accent-rgb),0.12), inset 0 1px 0 rgba(255,255,255,0.08);
  }
}
.section-steps .step-num {
  font-size: 3.4rem;
  letter-spacing: -0.05em;
  -webkit-text-stroke: 0;
  background: linear-gradient(180deg, #FFD88A 0%, var(--accent) 55%, #C9800C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 18px rgba(var(--accent-rgb), 0.25));
}
.section-steps .step-icon {
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  color: var(--accent);
}
.section-steps .step h3 { color: #fff; }
.section-steps .step p { color: var(--muted); }
.section-steps .steps-cta .text-link { color: var(--accent); }
@media (max-width: 860px) {
  .section-steps .step-num { font-size: 3rem; }
}
.stats-row .stat-num { font-variant-numeric: tabular-nums; }

/* Footer column labels (plain text, not headings, so the page outline stays clean) */
.footer-heading {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 1.1rem;
}

/* ==========================================================================
   REVIEW ARROWS (added by site.js inside the rating box)
   ========================================================================== */
.reviews-nav {
  display: flex;
  gap: 0.6rem;
  margin-left: 0.6rem;
  padding-left: 1.3rem;
  border-left: 1px solid var(--line-dark);
}
.reviews-arrow {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  transition: background 0.2s var(--ease-premium), color 0.2s var(--ease-premium), transform 0.2s var(--ease-premium);
}
.reviews-arrow svg { width: 20px; height: 20px; }
.reviews-arrow.is-next svg { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) {
  .reviews-arrow:hover { background: var(--accent); color: #061430; transform: translateY(-2px); }
}
.reviews-arrow:active { transform: scale(0.94); }
@media (max-width: 520px) {
  .rating-summary { flex-wrap: wrap; }
  .reviews-nav { margin-left: auto; padding-left: 1rem; }
  .reviews-arrow { width: 42px; height: 42px; }
}
@media (max-width: 380px) {
  .reviews-nav { margin-left: 0; padding-left: 0; border-left: 0; }
}

/* ==========================================================================
   PHOTO LIGHTBOX
   ========================================================================== */
.is-zoomable { cursor: zoom-in; }
.is-zoomable:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4.5rem 1.5rem 3.5rem;
  background: rgba(3,9,22,0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease-premium), visibility 0.25s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-figure {
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
.lightbox-figure img {
  max-width: 100%;
  max-height: calc(100vh - 12rem);
  max-height: calc(100dvh - 12rem);
  width: auto; height: auto;
  border-radius: 14px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8);
  transform: scale(0.97);
  transition: transform 0.35s var(--ease-premium);
}
.lightbox.open .lightbox-figure img { transform: none; }
.lightbox-figure figcaption { text-align: center; color: rgba(255,255,255,0.85); font-size: 0.92rem; line-height: 1.5; }
.lightbox-figure figcaption strong { display: block; font-family: var(--font-heading); color: #fff; font-size: 1.05rem; }
.lightbox-figure figcaption span { color: var(--muted); }
.lightbox-close,
.lightbox-arrow {
  flex-shrink: 0;
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.lightbox-close svg { width: 20px; height: 20px; }
.lightbox-arrow svg { width: 22px; height: 22px; }
.lightbox-close { position: absolute; top: 1.2rem; right: 1.2rem; }
@media (hover: hover) and (pointer: fine) {
  .lightbox-close:hover, .lightbox-arrow:hover { background: var(--accent); color: #061430; border-color: var(--accent); }
}
.lightbox-count {
  position: absolute;
  top: 1.9rem; left: 1.6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
}
.lightbox.is-single .lightbox-arrow,
.lightbox.is-single .lightbox-count { display: none; }
@media (max-width: 640px) {
  .lightbox { padding: 4.5rem 0.75rem 6rem; }
  .lightbox-arrow { position: absolute; bottom: 1.5rem; }
  .lightbox-arrow.is-prev { left: calc(50% - 62px); }
  .lightbox-arrow.is-next { right: calc(50% - 62px); }
}

/* ==========================================================================
   NAV SLIMS DOWN ONCE YOU SCROLL
   ========================================================================== */
:root { --nav-shrink: 12px; }
@media (max-width: 860px) { :root { --nav-shrink: 8px; } }
.nav { transition: background 0.35s var(--ease-premium), border-color 0.35s var(--ease-premium), height 0.35s var(--ease-premium); }
.nav.scrolled { height: calc(var(--nav-h) - var(--nav-shrink)); }
.nav-logo .logo-icon { transition: width 0.35s var(--ease-premium), height 0.35s var(--ease-premium); }
.nav.scrolled .nav-logo .logo-icon { width: 42px; height: 40px; }
.nav.scrolled ~ .mobile-menu { top: calc(var(--nav-h) - var(--nav-shrink)); }
@media (max-width: 520px) {
  .nav.scrolled .nav-logo .logo-icon { width: 36px; height: 34px; }
}

/* ==========================================================================
   SMOOTH PAGE-TO-PAGE TRANSITIONS
   Browsers that support cross-page view transitions (Chrome, Edge, Safari
   18.2+) cross-fade between pages while the nav stays put. Others just
   load normally.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .nav { view-transition-name: site-nav; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.35s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
}
/* where page transitions run, they replace the old "fade in after every
   image has loaded" effect, so pages show immediately */
@media (prefers-reduced-motion: no-preference) {
  @supports (view-transition-name: x) { body { opacity: 1; } }
}
/* phones: arrows sit on their own row under the rating, divided by a top rule */
@media (max-width: 520px) {
  .reviews-nav {
    width: 100%;
    margin-left: 0;
    padding: 0.9rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--line-dark);
    justify-content: flex-end;
  }
}

/* Homepage hero (desktop): start the text near the top of the quote card
   instead of centering it against the card's full height, which left the
   headline sitting low on the screen */
@media (min-width: 1025px) {
  .hero-premium .hero-inner { align-items: start; }
  .hero-premium .hero-content { padding-top: calc(2.5rem + 2.25rem); }
}

/* ==========================================================================
   REFINED FINISH — less playful, more established-company
   Lighter headline weight, flat buttons with modest corners, tighter
   radii, no glows. Everything above still applies; this only tones it down.
   ========================================================================== */
:root {
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-lg: 0 24px 50px -24px rgba(3,10,26,0.6);
  --shadow-md: 0 14px 30px -18px rgba(3,10,26,0.5);
}

/* Headlines: bold, not chunky */
h1, h2,
.hero-premium h1 .hero-brand,
.cta-final h2 { font-weight: 700; letter-spacing: -0.025em; }
h3, .service-card h3, .step h3, .result-banner h3, .warranty-banner h3 { font-weight: 700; letter-spacing: -0.01em; }
.hero-premium h1 .hero-title { font-weight: 600; letter-spacing: -0.01em; }
.hero-premium h1 .hl { color: inherit; }   /* no two-tone headline */
.section-label { letter-spacing: 0.18em; font-weight: 600; }

/* Buttons: flat, squared-off, no glow */
.btn { border-radius: 8px; letter-spacing: 0.01em; font-weight: 600; }
.btn-primary,
.quote-fab {
  background: var(--accent);
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--accent-dark); box-shadow: none; transform: translateY(-1px); }
  .btn-dark:hover, .btn-outline-dark:hover, .btn-ghost:hover { transform: translateY(-1px); box-shadow: none; }
}
.quote-fab { border-radius: 8px; box-shadow: 0 10px 24px -10px rgba(0,0,0,0.55); }
.hero-rating, .rating-summary, .services-foot, .result-banner, .warranty-banner { border-radius: 10px; }
.hero-rating { border-radius: 8px; }

/* Corners: tighter everywhere */
.service-card, .gallery-item, .step, .review-card, .feature-panel, .faq-premium .faq-list,
.section-light .faq-list, .trust-strip .trust-grid, .detail-grid .financing-point, .feature-list li,
.contact-chip, .review-us-cta, .work-item .img-slot { border-radius: 12px; }
.hero-premium .estimate-card, .contact-form, .quote-modal-box, .why-media .img-slot,
.area-premium .area-map, .section-light .faq-visual .img-slot, .lightbox-figure img { border-radius: 14px; }
.service-card-num, .reviews-arrow, .lightbox-arrow, .lightbox-close { border-radius: 8px; }
.icon-box, .trust-icon, .step-icon, .feature-list .icon-box, .section-light .contact-chip .icon { border-radius: 8px; }

/* Numbers: solid, quiet, no glow */
.section-steps .step-num,
.step-num {
  font-weight: 700;
  font-size: 2.6rem;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--accent);
  filter: none;
}
.section-steps .step::before { left: 0; right: 0; opacity: 0.6; height: 1px; }
.stats-row .stat-num { font-weight: 700; }
.stats-row .stat-num small { color: var(--muted); font-weight: 600; }

/* Fewer decorative flourishes */
.review-card::before { display: none; }
.hero-premium .estimate-card::before,
.contact-form::before { height: 1px; opacity: 0.7; }
.feature-panel {
  background: linear-gradient(160deg, #0E2450 0%, #081A3C 100%);
}
.section-light { background: var(--paper); }
.bg-dark-2 {
  background:
    radial-gradient(1100px 520px at 0% 0%, rgba(40,96,200,0.10), transparent 62%),
    var(--dark-2);
}
.section-steps { background: linear-gradient(180deg, #0B1E46 0%, #061430 100%); }
.service-card:hover, .step:hover, .section-steps .step:hover { transform: translateY(-3px); }

/* ==========================================================================
   PROFESSIONAL FINISH
   Crisp corporate heading face, plain line icons instead of tinted boxes,
   gold used only where it means something (buttons, links, ratings).
   ========================================================================== */
:root { --font-heading: 'Inter Tight', 'Inter', -apple-system, sans-serif; }

h1, h2, .hero-premium h1 .hero-brand, .cta-final h2 { font-weight: 600; letter-spacing: -0.03em; }
h3 { font-weight: 600; letter-spacing: -0.015em; }
.hero-premium h1 .hero-title { font-weight: 500; letter-spacing: -0.015em; color: rgba(255,255,255,0.92); }
.btn, .nav-links a, .nav-dropdown-toggle { font-weight: 600; letter-spacing: 0; }
.nav-logo .logo-text, .footer-brand { font-weight: 700; letter-spacing: -0.02em; }
.step-num, .section-steps .step-num, .stats-row .stat-num, .rating-summary .big, .why-media-badge .num { font-weight: 600; letter-spacing: -0.03em; }
.section-label { font-weight: 600; font-size: 0.72rem; }

/* Service cards: the photo and title do the work — no number badge or icon tile */
.service-card-num,
.service-card .icon-box { display: none; }

/* Icons: plain gold line icons, no tinted squares or circles */
.trust-icon, .step-icon, .feature-list .icon-box, .result-seal, .warranty-seal {
  background: none;
  border: 0;
  width: auto; height: auto;
  padding: 0;
}
.trust-icon .icon { width: 1.6rem; height: 1.6rem; }
.step-icon .icon { width: 1.5rem; height: 1.5rem; color: var(--muted); }
.feature-list .icon-box .icon { width: 1.3rem; height: 1.3rem; }
.result-seal .icon, .warranty-seal .icon { width: 2rem; height: 2rem; }
.hero-trust svg, .check-list svg, .cta-final-note svg {
  background: none;
  padding: 0;
  width: 16px; height: 16px;
}
.financing-point-icon { background: none; width: 20px; height: 20px; }
.section-light .contact-chip .icon { background: none; padding: 0; width: 22px; height: 22px; color: #B9740A; }

/* Quieter decoration */
.hero-rating { background: rgba(6,20,48,0.45); }
.section-steps .step::before { display: none; }
.trust-strip .trust-item strong { font-weight: 600; }
.section-steps .step-icon { background: none; border: 0; width: auto; height: auto; }

/* Review page: the public-review option stays available (no review gating)
   but sits quietly at the very bottom of the feedback card */
.review-flow-card .review-public-quiet {
  font-size: 0.58rem;
  margin: 1.6rem 0 0;
  opacity: 0.55;
}
.review-public-quiet a { text-decoration-color: rgba(169,182,207,0.4); }

/* ==========================================================================
   HEADING FONT — Manrope (pressure washing / cleaning trades).
   To re-skin for another trade: change the Google Fonts link on each page
   and this one variable (see the font-by-trade list).
   ========================================================================== */
:root { --font-heading: 'Manrope', 'Inter', -apple-system, sans-serif; }
h1, h2, .hero-premium h1 .hero-brand, .cta-final h2 { font-weight: 700; letter-spacing: -0.035em; }
h3 { font-weight: 700; letter-spacing: -0.02em; }
.hero-premium h1 .hero-title { font-weight: 600; letter-spacing: -0.02em; }
.step-num, .section-steps .step-num, .stats-row .stat-num, .rating-summary .big, .why-media-badge .num { font-weight: 700; }

/* ==========================================================================
   RESTRAINED FINISH
   Muted gold, full-bleed project photography, a quieter hero and service
   cards that show more photo. (Brand gold stays recognisable, just less
   saturated, so it reads as an accent rather than a promotion.)
   ========================================================================== */
:root {
  --accent:      #D9A441;
  --accent-dark: #C28F2F;
  --accent-rgb:  217, 164, 65;
}
.section-light .section-label,
.section-light .text-link { color: #9C6E1C; }
.btn-primary, .quote-fab { color: #0B1A33 !important; }

/* Hero: no checkmark chips, smaller rating badge */
.hero-trust { display: none; }
.hero-rating { font-size: 0.76rem; padding: 0.38rem 0.8rem 0.38rem 0.6rem; gap: 0.5rem; margin-bottom: 1.4rem; }
.hero-rating-stars svg { width: 12px; height: 12px; }
.page-hero .hero-buttons { margin-bottom: 0; }

/* Recent Work: edge-to-edge photo band, square corners, hairline gaps */
.gallery,
.work-grid {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  gap: 3px;
}
.gallery { grid-auto-rows: 300px; }
.gallery-item,
.work-item .img-slot { border-radius: 0; box-shadow: none; }
.gallery-item figcaption { padding: 3rem 1.6rem 1.3rem; }
.gallery-item figcaption strong { font-size: 0.92rem; font-weight: 600; letter-spacing: 0; }
.gallery-item figcaption span { font-size: 0.78rem; }
.work-grid { margin-top: 0.5rem; }
.result-banner, .warranty-banner { margin-top: 3rem; }
@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover img { transform: scale(1.03); }
  .work-item:hover { transform: none; }
}
@media (max-width: 860px) { .gallery { grid-auto-rows: 240px; } }
@media (max-width: 520px) { .gallery { grid-auto-rows: 280px; } }

/* Service cards: more photo, lighter overlay, smaller text */
.service-card-overlay {
  background: linear-gradient(to top, rgba(4,12,30,0.92) 0%, rgba(4,12,30,0.6) 32%, rgba(4,12,30,0) 60%);
}
.service-card-content { padding: 1.6rem 1.5rem; }
.service-card h3 { font-size: 1.12rem; margin-bottom: 0.4rem; }
.service-card p {
  font-size: 0.84rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.service-card-link { font-size: 0.8rem; }

/* Brand gold back to the original */
:root {
  --accent:      #F7A823;
  --accent-dark: #E8950F;
  --accent-rgb:  247, 168, 35;
}
.section-light .section-label,
.section-light .text-link { color: #B9740A; }

/* ==========================================================================
   SURVEY-STYLE QUOTE FORM (built by site.js from the regular form)
   ========================================================================== */
.qf-hidden-select { display: none; }
.qf-progress { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 1.3rem; }
.qf-progress-label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.qf-progress-label b { color: #fff; }
.qf-progress-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; }
.qf-progress-bar i { display: block; height: 100%; width: 50%; background: var(--accent); transition: width 0.35s var(--ease-premium); }
.qf-progress.is-step-2 .qf-progress-bar i { width: 100%; }

.qf-steps { display: grid; }
.qf-step { grid-area: 1 / 1; min-width: 0; transition: opacity 0.25s var(--ease-premium); }
.qf-step:not(.is-active) { visibility: hidden; opacity: 0; pointer-events: none; }

.qf-question { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: #fff; margin-bottom: 1rem; letter-spacing: -0.01em; }
.qf-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.qf-tile {
  display: flex; align-items: center;
  min-height: 58px;
  padding: 0.8rem 1rem;
  border-radius: 8px;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.16);
  transition: border-color 0.15s, background 0.15s, transform 0.15s var(--ease-premium);
}
.qf-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (hover: hover) and (pointer: fine) {
  .qf-tile:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),0.08); transform: translateY(-1px); }
}
.qf-tile.is-selected { border-color: var(--accent); background: rgba(var(--accent-rgb),0.12); }
.qf-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qf-reassure { margin-top: 1.2rem; font-size: 0.8rem; color: var(--muted); text-align: center; }

.qf-chosen {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 0.85rem; color: var(--muted);
}
.qf-chosen b { color: #fff; font-weight: 600; }
.qf-back { color: var(--accent); font-size: 0.82rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; flex-shrink: 0; }
@media (max-width: 380px) { .qf-tiles { grid-template-columns: 1fr; } .qf-tile:last-child:nth-child(odd) { grid-column: auto; } }

/* ==========================================================================
   QUIETER, MORE EDITORIAL
   ========================================================================== */
/* Smaller section headlines read as established rather than salesy */
h2 { font-size: clamp(1.85rem, 2.8vw, 2.6rem); line-height: 1.12; }
.cta-final h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.quote-form h2 { font-size: clamp(1.6rem, 2.2vw, 2rem); }

/* Trust strip: plain row of text between hairlines, no box */
.trust-strip .trust-grid {
  border: 0;
  border-radius: 0;
  background: none;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.trust-strip .trust-item + .trust-item { border-left: 0; }
.trust-strip .trust-item { padding: 1.6rem 1.2rem 1.6rem 0; }

/* Full-width feature photo with one line over it (homepage) */
.feature-band {
  position: relative;
  padding: 0;
  height: min(72vh, 680px);
  min-height: 420px;
  overflow: hidden;
  background: var(--dark);
}
.feature-band .img-slot { position: absolute; inset: 0; }
.feature-band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.feature-band::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(4,12,30,0.85) 0%, rgba(4,12,30,0.25) 45%, rgba(4,12,30,0.05) 100%);
}
.feature-band-caption {
  position: absolute; z-index: 1;
  left: var(--edge); right: var(--edge); bottom: 3rem;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
}
.feature-band-caption h2 { color: #fff; margin: 0; max-width: 18ch; }
.feature-band-caption span { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.feature-band img { object-position: 50% 70%; }
/* step 1 fills the card: tiles stretch to the height step 2 needs */
.qf-step:first-child { display: flex; flex-direction: column; }
.qf-step:first-child .qf-tiles { flex: 1; grid-auto-rows: 1fr; }
.qf-tile { font-size: 0.95rem; padding: 0.9rem 1.1rem; }

/* ==========================================================================
   PHONE ALWAYS IN THE NAV (speed to lead)
   Desktop/laptop: full number as a tap-to-call link. Phones/tablets: a
   round call button beside "Get a Quote".
   ========================================================================== */
.nav-right .nav-phone { display: flex; }
.nav-phone { transition: color 0.2s var(--ease-premium); }
@media (hover: hover) and (pointer: fine) { .nav-phone:hover { color: var(--accent); } }
@media (min-width: 1200px) and (max-width: 1560px) {
  .nav-links { gap: 1.35rem; }
  .nav-links > a, .nav-dropdown-toggle { font-size: 0.88rem; }
  .nav-right { gap: 1.1rem; }
  .nav-right .nav-phone { font-size: 0.88rem; }
}
@media (max-width: 1199px) {
  .nav-right .nav-phone {
    width: 40px; height: 40px;
    justify-content: center;
    border-radius: 50%;
    font-size: 0;            /* icon only; the link text stays for screen readers via aria-label */
    gap: 0;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
  }
  .nav-right .nav-phone .icon { width: 18px; height: 18px; }
  .nav-right { gap: 0.6rem; }
}
@media (max-width: 380px) {
  .nav-right .nav-phone { width: 36px; height: 36px; }
  .nav-right { gap: 0.4rem; }
}
/* very small phones: logo mark only, so the logo never touches the call button */
@media (max-width: 300px) { .nav-logo .logo-text { display: none; } }

/* ==========================================================================
   MODERN PASS
   ========================================================================== */
/* 1. no scroll-mouse icon   4. no film grain */
.scroll-indicator,
.grain-overlay { display: none !important; }

/* 9. more breathing room between sections */
section { padding-top: 8.5rem; padding-bottom: 8.5rem; }
.review-strip.reviews-premium { padding-top: 8.5rem; padding-bottom: 7.5rem; }
.trust-strip { padding-top: 0; padding-bottom: 0; }
.hero, .feature-band { padding-top: var(--nav-h); padding-bottom: 0; }
.hero { padding-top: var(--nav-h); }
.feature-band { padding-top: 0; }
@media (max-width: 1024px) {
  section { padding-top: 6rem; padding-bottom: 6rem; }
  .review-strip.reviews-premium { padding-top: 6rem; padding-bottom: 5.5rem; }
}
@media (max-width: 520px) {
  section { padding-top: 4.75rem; padding-bottom: 4.75rem; }
  .review-strip.reviews-premium { padding-top: 4.75rem; padding-bottom: 4.5rem; }
}
.hero, .trust-strip, .feature-band { padding-bottom: 0; }

/* 2. service area without the map: heading + intro left, area list right */
.area-premium .area-grid { display: block; }
.area-premium .area-list {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  column-gap: 5rem;
  align-items: start;
}
.area-premium .area-list > * { grid-column: 1; }
.area-premium .area-list .area-pin-grid { grid-column: 2; grid-row: 1 / span 4; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) {
  .area-premium .area-list { grid-template-columns: 1fr; }
  .area-premium .area-list .area-pin-grid { grid-column: 1; grid-row: auto; grid-template-columns: repeat(3, 1fr); margin-top: 1rem; }
}
@media (max-width: 700px) { .area-premium .area-list .area-pin-grid { grid-template-columns: 1fr 1fr; } }

/* 3. "Review us on Google" as one quiet line instead of a third box */
.review-us-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 0.9rem;
  max-width: none;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  text-align: center;
}
.review-us-cta h3 { order: 2; margin: 0; font-size: 0.95rem; font-weight: 600; color: rgba(255,255,255,0.85); }
.review-us-stars { order: 1; margin: 0; gap: 2px; }
.review-us-stars svg { width: 15px; height: 15px; }
.review-us-cta .btn {
  order: 3;
  padding: 0;
  background: none !important;
  border: 0;
  box-shadow: none;
  color: var(--accent) !important;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.review-us-cta .btn:hover { transform: none; color: #fff !important; }
.review-cta-section .review-us-cta h3 { color: rgba(255,255,255,0.85); }

/* 6. Services: editorial two-column list (photo beside text) instead of tall photo cards */
.services-grid:has(.service-card-media) {
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem 4rem;
}
.service-card:has(.service-card-media) {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 1.75rem;
  align-items: center;
  min-height: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  isolation: auto;
}
.service-card:has(.service-card-media):hover { transform: none; box-shadow: none; }
.service-card:has(.service-card-media) .service-card-media {
  position: relative;
  inset: auto;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
}
.service-card:has(.service-card-media) .service-card-overlay { display: none; }
.service-card:has(.service-card-media) .service-card-content { position: static; margin: 0; padding: 0; }
.service-card:has(.service-card-media) h3 { font-size: 1.2rem; margin-bottom: 0.5rem; transition: color 0.2s var(--ease-premium); }
.service-card:has(.service-card-media) p { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: 0.92rem; line-height: 1.65; color: var(--muted); }
.section-light .service-card:has(.service-card-media) h3 { color: var(--ink); }
.section-light .service-card:has(.service-card-media) p { color: var(--ink-muted); }
.section-light .service-card:has(.service-card-media) .service-card-link { color: #9C6E1C; }
.service-card:has(.service-card-media) .service-card-link { margin-top: 0.9rem; padding-top: 0; font-size: 0.85rem; }
@media (hover: hover) and (pointer: fine) {
  .service-card:has(.service-card-media):hover h3 { color: var(--accent); }
  .section-light .service-card:has(.service-card-media):hover h3 { color: #9C6E1C; }
  .service-card:has(.service-card-media):hover .service-card-media img { transform: scale(1.04); }
}
@media (max-width: 1024px) {
  .services-grid:has(.service-card-media) { grid-template-columns: 1fr; gap: 3rem; max-width: 720px; }
}
@media (max-width: 520px) {
  .service-card:has(.service-card-media) { grid-template-columns: 1fr; gap: 1.1rem; }
  .services-grid:has(.service-card-media) { gap: 2.75rem; }
}

/* 7. Review cards: initials, name, Google mark */
.review-person {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-dark);
}
.review-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: #061430;
  background: var(--accent);
}
.review-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.review-who .review-author { line-height: 1.3; }
.review-who .review-source { line-height: 1.3; }
.review-g { width: 20px; height: 20px; flex-shrink: 0; }
.review-text { margin-bottom: 1.4rem; }

/* 5. Mobile call + quote bar (replaces the floating quote pill on phones) */
.mobile-cta-bar { display: none; }
@media (max-width: 860px) {
  .quote-fab { display: none !important; }
  .mobile-cta-bar {
    position: fixed;
    left: 12px;
    right: 88px;             /* leaves room for the chat bubble */
    bottom: 20px;
    z-index: 96;
    height: 58px;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 6px;
    padding: 5px;
    border-radius: 12px;
    background: rgba(6,20,48,0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: none;
    transition: opacity 0.25s var(--ease-premium), transform 0.25s var(--ease-premium), visibility 0.25s;
  }
  .mobile-cta-bar.is-hidden { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; }
  body.quote-open .mobile-cta-bar { display: none; }
  .mobile-cta-bar a,
  .mobile-cta-bar button {
    display: flex; align-items: center; justify-content: center; gap: 0.45rem;
    border-radius: 8px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
  }
  .mcb-call { color: #fff; background: rgba(255,255,255,0.08); }
  .mcb-call svg { width: 17px; height: 17px; color: var(--accent); }
  .mcb-quote { color: #0B1A33; background: var(--accent); }
}

/* 8. Photo reveals */
.reveal-img { clip-path: inset(8% 6% 8% 6% round 12px); transition: clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-img img { transform: scale(1.1); transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-img.is-revealed { clip-path: inset(0 0 0 0 round 0); }
.reveal-img.is-revealed img { transform: none; }

/* Section rhythm, tuned after measuring every page: generous but not empty */
section { padding-top: 7.5rem; padding-bottom: 7.5rem; }
.review-strip.reviews-premium { padding-top: 7.5rem; padding-bottom: 6.5rem; }
@media (max-width: 1024px) {
  section { padding-top: 5.5rem; padding-bottom: 5.5rem; }
  .review-strip.reviews-premium { padding-top: 5.5rem; padding-bottom: 5rem; }
}
@media (max-width: 520px) {
  section { padding-top: 4rem; padding-bottom: 4rem; }
  .review-strip.reviews-premium { padding-top: 4rem; padding-bottom: 3.75rem; }
}
/* sections that manage their own height keep it */
.hero { padding-top: var(--nav-h); padding-bottom: 0; }
.trust-strip, .feature-band { padding-top: 0; padding-bottom: 0; }
.legal-content section { padding: 0; }
/* the last section before the footer doesn't need a full bottom gap on top of the footer's own */
main > section:last-child:not(.cta-final) { padding-bottom: 6rem; }
@media (max-width: 520px) { main > section:last-child:not(.cta-final) { padding-bottom: 3.5rem; } }

/* ==========================================================================
   MOBILE MENU — scrolls on its own when open (e.g. Service Areas expanded)
   ========================================================================== */
.mobile-menu {
  max-height: calc(100vh - var(--nav-h));
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2.5rem;
}
.nav.scrolled ~ .mobile-menu {
  max-height: calc(100vh - var(--nav-h) + var(--nav-shrink));
  max-height: calc(100dvh - var(--nav-h) + var(--nav-shrink));
}
/* desktop dropdowns never run off short laptop screens */
.nav-dropdown-menu { max-height: calc(100vh - var(--nav-h) - 24px); overflow-y: auto; }
/* menu items keep their full height so the menu scrolls instead of squashing them */
.mobile-menu > * { flex-shrink: 0; }

/* Mobile menu typography: clear hierarchy instead of everything bold */
.mobile-menu { gap: 0; padding-top: 0.75rem; }
.mobile-menu > a:not(.btn):not(.nav-phone) {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line-dark);
}
.mobile-accordion-toggle {
  padding: 1.15rem 0 1rem;
  margin: 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}
.mobile-accordion-toggle.open { border-bottom-color: transparent; }
.mobile-services-grid,
.mobile-areas-grid { gap: 0 1.2rem; }
.mobile-services-grid a,
.mobile-areas-grid a {
  font-size: 0.93rem;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  padding: 0.5rem 0;
  line-height: 1.35;
}
.mobile-accordion-toggle.open + .mobile-services-grid,
.mobile-accordion-toggle.open + .mobile-areas-grid { padding-bottom: 0.9rem; border-bottom: 1px solid var(--line-dark); }
.mobile-menu .nav-phone { padding: 1.4rem 0 1rem; font-size: 1.05rem; font-weight: 600; }
.mobile-menu .btn-block { margin-top: 0.4rem; }

/* Inner-page heroes: shorter now the trust chips are gone, so no dead space under the buttons */
.page-hero { min-height: 62vh; }
.page-hero .area-hero-inner { padding-top: 2rem; padding-bottom: 4rem; }
/* heroes without buttons (Contact, legal-style pages) are shorter still */
.page-hero:not(:has(.hero-buttons)) { min-height: 46vh; }
@media (max-width: 1024px) {
  .page-hero, .page-hero:not(:has(.hero-buttons)) { min-height: 0; }
}

/* ==========================================================================
   "REVIEW US ON GOOGLE" — back to a full section card with a big button
   (replaces the one-line version above)
   ========================================================================== */
.review-us-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title btn" "stars btn";
  align-items: center;
  column-gap: 2.5rem;
  row-gap: 0.6rem;
  max-width: 820px;
  margin: 0 auto;
  padding: 2.2rem 2.6rem;
  text-align: left;
  background:
    radial-gradient(80% 140% at 0% 0%, rgba(var(--accent-rgb), 0.12), transparent 60%),
    rgba(255,255,255,0.04);
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: 14px;
  box-shadow: 0 24px 50px -28px rgba(0,0,0,0.6);
}
.review-us-cta h3 {
  grid-area: title;
  order: 0;
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.review-us-stars { grid-area: stars; order: 0; justify-content: flex-start; gap: 4px; margin: 0; }
.review-us-stars svg { width: 24px; height: 24px; }
.review-us-cta .btn {
  grid-area: btn;
  order: 0;
  padding: 1.15rem 2.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  color: #0B1A33 !important;
  background: var(--accent) !important;
  border-radius: 8px;
}
@media (hover: hover) and (pointer: fine) {
  .review-us-cta .btn:hover { background: var(--accent-dark) !important; color: #0B1A33 !important; transform: translateY(-1px); }
}
.reviews-premium .review-us-cta { margin-top: 0.5rem; }
@media (max-width: 640px) {
  .review-us-cta {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "stars" "btn";
    justify-items: center;
    text-align: center;
    padding: 2rem 1.4rem;
    row-gap: 0.8rem;
  }
  .review-us-stars { justify-content: center; }
  .review-us-cta .btn { width: 100%; margin-top: 0.6rem; }
}
.review-us-cta { width: 100%; box-sizing: border-box; }
.reviews-actions { justify-items: stretch; }
.reviews-actions .reviews-cta { justify-self: center; }

/* ==========================================================================
   UNSLOP PASS (2026-10-19)
   Built against the OB Operations anti-slop checklist. Overrides earlier
   layers. Rules: one accent (gold) for call and quote actions only, flat
   surfaces, radius by role, shadows only on things that float, no
   eyebrow labels, one load animation, Plus Jakarta Sans throughout.
   ========================================================================== */
:root {
  --font-heading: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, sans-serif;

  /* colors by job */
  --color-ground:      #061430;  /* dark sections, hero, footer (logo navy) */
  --color-ground-alt:  #0A1B3D;  /* second dark surface */
  --color-paper:       #F3F5F9;  /* light sections, tinted toward the navy */
  --color-surface:     #FFFFFF;  /* white sections, cards that hold content */
  --color-ink:         #0B1A33;  /* text on light */
  --color-ink-soft:    #4F5B70;  /* secondary text on light (AA on paper) */
  --color-action:      #F7A823;  /* call + quote buttons, rating stars */
  --color-action-hover:#E8950F;

  /* radius by role */
  --r-input: 6px;
  --r-button: 6px;
  --r-photo: 4px;
  --r-card: 8px;
  --r-float: 10px;
}

/* ---------- type ---------- */
body, button, input, select, textarea { font-family: var(--font-body); }
body { font-size: 1.0625rem; line-height: 1.6; }
h1, h2, h3, h4, .btn, .nav-links a, .nav-dropdown-toggle { font-family: var(--font-heading); }
h1 { font-weight: 700; letter-spacing: -0.025em; }
h2 { font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1.9rem, 2.7vw, 2.6rem); line-height: 1.12; }
h3 { font-weight: 700; letter-spacing: -0.01em; }
.section-head p, .why-copy-premium > p, .section-light .area-intro p { max-width: 62ch; }

/* no eyebrow labels above headings */
.section-label, .slide-label { display: none !important; }

/* ---------- motion: everything visible, one load sequence in the hero ---------- */
.fade-up, .slide-label { opacity: 1 !important; transform: none !important; transition: none !important; }
.reveal-img, .reveal-img.is-revealed { clip-path: none !important; transition: none !important; }
.reveal-img img, .reveal-img.is-revealed img { transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .hero-premium .hero-content > *, .hero-premium .estimate-card, .page-hero .hero-content > * {
    animation: heroIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .hero-premium .hero-content > *:nth-child(2), .page-hero .hero-content > *:nth-child(2) { animation-delay: 0.06s; }
  .hero-premium .hero-content > *:nth-child(3), .page-hero .hero-content > *:nth-child(3) { animation-delay: 0.12s; }
  .hero-premium .hero-content > *:nth-child(4), .page-hero .hero-content > *:nth-child(4) { animation-delay: 0.18s; }
  .hero-premium .hero-content > *:nth-child(5) { animation-delay: 0.24s; }
  .hero-premium .estimate-card { animation-delay: 0.15s; }
}
@keyframes heroIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* no hover lift or zoom on blocks; only clickable things give small feedback */
.service-card:hover, .step:hover, .section-steps .step:hover, .work-item:hover,
.contact-chip:hover, .reviews-arrow:hover, .btn-primary:hover, .btn-dark:hover,
.btn-outline-dark:hover, .btn-ghost:hover, .quote-fab:hover { transform: none !important; }
.service-card:hover .service-card-media img, .gallery-item:hover img,
.work-item .img-slot:hover img { transform: none !important; }

/* ---------- surfaces: flat, no glass, no glows ---------- */
*, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.bg-dark   { background: var(--color-ground); }
.bg-dark-2 { background: var(--color-ground-alt); }
.section-light { background: var(--color-paper); }
.section-white { background: var(--color-surface); color: var(--color-ink); }
.section-steps { background: var(--color-ground); border-top: 0; }
.legal-header { background: var(--color-ground); }
.review-flow { background: var(--color-ground); }
.cta-final-bg::after { background: rgba(6,20,48,0.84); }
.nav.scrolled, body:has(.mobile-menu.open) .nav { background: var(--color-ground) !important; }
.mobile-menu { background: var(--color-ground); }
.nav-dropdown-menu { background: var(--color-ground-alt); }
.mobile-cta-bar { background: var(--color-ground); }
.quote-modal { background: rgba(3,9,22,0.86); }
.lightbox { background: rgba(3,9,22,0.95); }

/* shadows only on things that float (form card over the hero photo, popup, menus, floating buttons) */
.service-card, .step, .faq-premium .faq-list, .section-light .faq-list, .gallery-item,
.work-item .img-slot, .why-media .img-slot, .contact-chip, .section-light .contact-chip,
.review-card, .contact-form, .services-foot, .detail-grid .financing-point { box-shadow: none !important; }
.hero-premium .estimate-card { box-shadow: 0 24px 48px -24px rgba(0,0,0,0.55); }

/* ---------- radius by role ---------- */
.btn, .quote-fab, .mcb-call, .mcb-quote, .qf-tile, .contact-chip, .hero-badge { border-radius: var(--r-button) !important; }
.form-group input, .form-group select, .form-group textarea, .qf-chosen { border-radius: var(--r-input) !important; }
.service-card:has(.service-card-media) .service-card-media, .why-media .img-slot,
.section-light .faq-visual .img-slot, .lightbox-figure img { border-radius: var(--r-photo) !important; }
.review-card, .faq-premium .faq-list, .section-light .faq-list { border-radius: var(--r-card) !important; }
.hero-premium .estimate-card, .contact-form, .quote-modal-box, .mobile-cta-bar,
.nav-dropdown-menu, .review-us-cta { border-radius: var(--r-float) !important; }
.estimate-card::before, .contact-form::before, .hero-premium .estimate-card::before { display: none !important; }

/* ---------- gold only on call / quote actions (and rating stars) ---------- */
.text-link, .section-light .text-link, .section-steps .steps-cta .text-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.text-link .icon { display: none; }
.check-list svg, .hero-trust svg, .cta-final-note svg { background: none; color: currentColor; opacity: 0.7; }
.step-num, .section-steps .step-num { color: #fff !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; filter: none !important; }
.breadcrumb [aria-current] { color: #fff; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.nav-links a:hover, .nav-dropdown-toggle:hover, .footer-col a:hover, .footer-bottom a:hover { color: #fff !important; text-decoration: underline; text-underline-offset: 5px; }
.nav-dropdown-menu a:hover { color: #fff !important; background: rgba(255,255,255,0.08) !important; }
.area-pin-item .icon, .area-premium .area-pin-item .icon { color: var(--muted); }
.area-pin-item a:hover { color: #fff !important; text-decoration: underline; }
.footer-contact-item .icon { color: var(--muted); }
.service-card-link { color: inherit !important; text-decoration: underline; text-underline-offset: 4px; }
.service-card-link .icon { display: none; }
.trust-icon { display: none; }

/* ==========================================================================
   HERO (homepage) — left text, form right, SEO headline
   ========================================================================== */
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.6rem; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.85rem;
  background: rgba(6,20,48,0.55);
  border: 1px solid rgba(255,255,255,0.22);
  font-size: 0.85rem; font-weight: 600; color: #fff; line-height: 1;
}
.hero-badge.brand img { width: 22px; height: 22px; object-fit: contain; }
.hero-badge.brand { font-weight: 700; font-size: 0.9rem; }
.hero-badge .g-mark, .form-trust .g-mark { width: 16px; height: 16px; flex-shrink: 0; }
.hero-badge .stars, .form-trust .stars { display: inline-flex; gap: 1px; color: var(--color-action); }
.hero-badge .stars svg { width: 13px; height: 13px; fill: currentColor; }
.hero-badge b { font-weight: 800; }
a.hero-badge:hover { border-color: rgba(255,255,255,0.5); }

.hero-premium h1 {
  font-size: clamp(2.35rem, 4.1vw, 59px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.025em;
  max-width: 13ch;
  margin-bottom: 1.4rem;
  text-wrap: balance;
}
.hero-premium .hero-sub { font-size: 1.12rem; line-height: 1.6; max-width: 50ch; color: rgba(255,255,255,0.86); margin-bottom: 1.6rem; }
.hero-services {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, max-content); gap: 0.6rem 2rem;
  margin: 0 0 2rem;
}
.hero-services li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.98rem; font-weight: 600; }
.hero-services svg { width: 17px; height: 17px; color: rgba(255,255,255,0.7); flex-shrink: 0; }
.hero-services a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.35); text-underline-offset: 4px; }
.hero-services a:hover { text-decoration-color: #fff; }
.btn-call {
  background: var(--color-action); color: #0B1A33 !important;
  padding: 1rem 1.7rem; font-size: 1rem; font-weight: 700;
}
.btn-call:hover { background: var(--color-action-hover); }
.btn-call .icon { width: 1.1rem; height: 1.1rem; }

.hero-premium .estimate-card { background: var(--color-ground); border: 1px solid rgba(255,255,255,0.14); }
.form-trust {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.45rem;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.86rem; font-weight: 600; color: rgba(255,255,255,0.85);
}
.form-trust .stars svg { width: 12px; height: 12px; fill: currentColor; }

@media (max-width: 600px) {
  .hero-services { grid-template-columns: 1fr; }
  .hero-call { width: 100%; }
  .hero-badge { font-size: 0.8rem; padding: 0.45rem 0.7rem; }
}

/* inner page heroes share the headline style */
.page-hero .area-hero-inner .hero-content h1 { font-size: clamp(2.2rem, 3.8vw, 54px); line-height: 1.02; font-weight: 700; letter-spacing: -0.025em; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
/* trust strip: four plain statements between hairlines */
.trust-strip .trust-item { padding: 1.5rem 1.6rem 1.5rem 0; }
.trust-strip .trust-item strong { font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; }
.trust-strip .trust-item span { font-size: 0.9rem; }

/* services: plain closing line */
.services-note { margin-top: 3rem; font-size: 1.05rem; color: var(--color-ink); }
.services-note a { color: var(--color-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* why us on white */
.section-white h2, .section-white h3 { color: var(--color-ink); }
.section-white p { color: var(--color-ink-soft); }
.section-white .check-list li { color: var(--color-ink); }
.section-white .why-copy-premium > p { color: var(--color-ink-soft); }

/* steps: cardless columns divided by a rule */
.section-steps .steps { gap: 3rem; }
.section-steps .step {
  background: none; border: 0; border-radius: 0; padding: 1.6rem 0 0;
  border-top: 1px solid rgba(255,255,255,0.22);
  overflow: visible;
}
.section-steps .step::before { display: none; }
.step-top { margin-bottom: 0.9rem; }
.section-steps .step-num { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; }
.section-steps .step h3 { font-size: 1.2rem; }

/* reviews on a light section */
.review-strip.reviews-light { background: var(--color-paper); }
.reviews-light h2 { color: var(--color-ink); }
.reviews-light .rating-summary { background: none; border: 0; padding: 0; }
.reviews-light .rating-summary .big { color: var(--color-ink); }
.reviews-light .rating-summary .meta { color: var(--color-ink-soft); }
.reviews-light .rating-summary .meta strong { color: var(--color-ink); }
.reviews-light .reviews-nav { border-left-color: rgba(11,26,51,0.15); }
.reviews-light .reviews-arrow { color: var(--color-ink); background: #fff; border-color: rgba(11,26,51,0.25); }
.reviews-light .reviews-arrow:hover { background: var(--color-ink); color: #fff; }
.reviews-light .review-card { background: #fff; border: 1px solid rgba(11,26,51,0.12); }
.reviews-light .review-text { color: var(--color-ink); }
.reviews-light .review-author { color: var(--color-ink); }
.reviews-light .review-source { color: var(--color-ink-soft); }
.reviews-light .review-person { border-top-color: rgba(11,26,51,0.1); }
.review-avatar { background: var(--color-ground); color: #fff; }
.reviews-light .btn-ghost { background: #fff; color: var(--color-ink) !important; border: 1px solid rgba(11,26,51,0.25); }
.reviews-light .btn-ghost:hover { border-color: var(--color-ink); }
.review-us-cta { background: var(--color-ground); border: 0; box-shadow: none; }
@media (max-width: 520px) { .reviews-light .reviews-nav { border-top-color: rgba(11,26,51,0.12); } }

/* "what's included" lists: cardless rows */
.detail-grid { gap: 0 2.5rem; }
.detail-grid .financing-point { background: none; border: 0; border-bottom: 1px solid var(--line-dark); border-radius: 0; padding: 1rem 0; }
.financing-point-icon { color: currentColor; opacity: 0.7; }

/* final CTA: tighter, one line of copy */
.cta-final { padding-top: 6.5rem; padding-bottom: 6.5rem; }
.cta-final h2 { font-size: clamp(2rem, 3.2vw, 2.9rem); }

/* service area: denser than its neighbours */
.area-premium { padding-top: 5.5rem; padding-bottom: 5.5rem; }
@media (max-width: 520px) { .area-premium { padding-top: 3.75rem; padding-bottom: 3.75rem; } }

/* footer and caption labels: sentence case, no letter-spaced caps */
.footer-heading { text-transform: none; letter-spacing: 0; font-size: 0.95rem; font-weight: 700; color: #fff; }
.feature-band-caption span { text-transform: none; letter-spacing: 0; font-size: 0.95rem; font-weight: 600; }
.mobile-accordion-toggle { text-transform: none; letter-spacing: 0; font-size: 1.12rem; font-weight: 600; color: #fff; }
.mobile-accordion-toggle.open { color: #fff; }

/* ==========================================================================
   BLOG + GALLERY
   ========================================================================== */
.post-meta { font-size: 0.9rem; color: rgba(255,255,255,0.75); margin: -0.6rem 0 1.6rem; }
.section-white .post-meta, .blog-item .post-meta { color: var(--color-ink-soft); margin: 0 0 0.5rem; }

/* article body: one readable column */
.post-section { padding-top: 5rem; }
.prose { max-width: 68ch; margin: 0 auto; color: var(--color-ink); }
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.7; color: #2A3446; }
.prose p { margin: 0 0 1.15rem; }
.prose h2 { font-size: clamp(1.4rem, 2vw, 1.7rem); color: var(--color-ink); margin: 2.4rem 0 0.8rem; line-height: 1.2; }
.prose ul, .prose ol { margin: 0 0 1.3rem 1.25rem; display: flex; flex-direction: column; gap: 0.45rem; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose strong { color: var(--color-ink); }
.prose a { color: var(--color-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.post-cta { margin-top: 2.8rem; padding-top: 1.8rem; border-top: 1px solid rgba(11,26,51,0.14); }
.post-cta p { margin-bottom: 1.1rem; }
.post-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.post-cta .text-link { color: var(--color-ink); font-weight: 600; }

/* related posts: a plain list */
.related-section { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.related-section h2 { color: var(--color-ink); margin-bottom: 1.4rem; }
.related-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2.5rem; }
.related-list li { padding: 1.2rem 0; border-top: 1px solid rgba(11,26,51,0.14); display: flex; flex-direction: column; gap: 0.4rem; }
.related-list a { font-family: var(--font-heading); font-weight: 700; font-size: 1.08rem; line-height: 1.3; color: var(--color-ink); }
.related-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.related-list span { font-size: 0.93rem; line-height: 1.55; color: var(--color-ink-soft); }
.related-all { margin-top: 1.4rem; color: var(--color-ink); font-weight: 600; }
@media (max-width: 860px) { .related-list { grid-template-columns: 1fr; } }

/* blog hub: photo-led rows */
.blog-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 4rem; }
.blog-item { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 1.5rem; align-items: start; }
.blog-item-media { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-photo); overflow: hidden; }
.blog-item-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-item h2 { font-size: 1.25rem; line-height: 1.25; margin-bottom: 0.5rem; }
.blog-item h2 a { color: var(--color-ink); }
.blog-item h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog-item p { font-size: 0.97rem; line-height: 1.6; margin-bottom: 0.8rem; }
.blog-item .text-link { color: var(--color-ink); font-weight: 600; font-size: 0.95rem; }
@media (max-width: 1024px) { .blog-list { grid-template-columns: 1fr; max-width: 760px; } }
@media (max-width: 520px) { .blog-item { grid-template-columns: 1fr; gap: 1rem; } }

/* gallery page: contained grid with filters (not the full-bleed band) */
.gallery-section { padding-top: 4.5rem; }
.gallery-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2rem; }
.gallery-filter {
  padding: 0.65rem 1.1rem; border-radius: var(--r-button);
  font-family: var(--font-heading); font-weight: 600; font-size: 0.92rem;
  color: #fff; background: transparent; border: 1px solid rgba(255,255,255,0.28);
}
.gallery-filter:hover { border-color: #fff; }
.gallery-filter.is-active { background: #fff; color: var(--color-ink); border-color: #fff; }
.work-grid.gallery-page { margin-left: 0; margin-right: 0; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 1rem; }
.gallery-page .work-item[hidden] { display: none; }
.gallery-page .work-item .img-slot { aspect-ratio: 1 / 1; border-radius: var(--r-photo); }
.gallery-page .work-caption { margin-top: 0.6rem; }
.gallery-page .work-caption strong { font-size: 0.92rem; font-weight: 600; color: rgba(255,255,255,0.9); }
.gallery-note { margin-top: 2.6rem; color: rgba(255,255,255,0.85); }
.gallery-note a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1024px) { .work-grid.gallery-page { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .work-grid.gallery-page { grid-template-columns: 1fr 1fr; gap: 1.1rem 0.75rem; } .gallery-filter { font-size: 0.85rem; padding: 0.55rem 0.85rem; } }
.prose .btn { text-decoration: none; color: #0B1A33 !important; }
.gallery-more { margin-top: 2rem; font-weight: 600; color: #fff; }

/* ==========================================================================
   NAV CALL BUTTON (tablets + phones)
   521–1199px: solid square call button with just the phone icon, beside
   "Get a Quote". 520px and below: "Get a Quote" leaves the nav (the bottom
   bar and hero form cover it) and the call button grows to icon + "Call".
   It always matches the hamburger's height so the two line up.
   ========================================================================== */
@media (max-width: 1199px) {
  .nav-right .nav-phone {
    width: 46px; height: 46px;
    border-radius: var(--r-button) !important;
    background: var(--color-action);
    border: 0;
    color: var(--color-ink);
  }
  .nav-right .nav-phone .icon { color: var(--color-ink); width: 19px; height: 19px; }
  .hamburger { height: 46px; }
}
@media (hover: hover) and (pointer: fine) and (max-width: 1199px) {
  .nav-right .nav-phone:hover { background: var(--color-action-hover); color: var(--color-ink); }
}
@media (max-width: 520px) {
  .nav-right .open-quote { display: none; }
  .nav-right .nav-phone {
    width: auto; height: 44px;
    padding: 0 1rem;
    gap: 0.45rem;
  }
  .nav-right .nav-phone::after {
    content: "Call";
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
  }
  .nav-right .nav-phone .icon { width: 17px; height: 17px; }
  .hamburger { height: 44px; }
  .nav-right { gap: 0.75rem; }
}

/* Mobile bar sits above GoHighLevel's chat layer. The widget's invisible
   container (greeting + bubble) is a large fixed box that otherwise swallows
   taps on "Get a Quote" while the greeting is showing. The bar steps aside
   whenever the chat, menu, quote popup or lightbox is open. */
@media (max-width: 860px) {
  .mobile-cta-bar { z-index: 100000000; }
  body.chat-open .mobile-cta-bar,
  body:has(.mobile-menu.open) .mobile-cta-bar,
  body:has(.lightbox.open) .mobile-cta-bar { display: none; }
}