/* =========================================================
   W.I.P Services  -  Elite Visual Polish Layer
   Design-only upgrade: keeps existing content, SEO, links,
   schema, scripts, and page structure intact.
   ========================================================= */

:root {
  --elite-bg-1: #06110a;
  --elite-bg-2: #0e1a12;
  --elite-bg-3: #162718;
  --elite-ink: #f8f4e8;
  --elite-muted: rgba(248, 244, 232, 0.76);
  --elite-soft: rgba(255, 255, 255, 0.075);
  --elite-soft-strong: rgba(255, 255, 255, 0.13);
  --elite-line: rgba(230, 195, 106, 0.24);
  --elite-line-strong: rgba(230, 195, 106, 0.48);
  --elite-gold: #e6c36a;
  --elite-gold-2: #fff0b8;
  --elite-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
  --elite-shadow-soft: 0 16px 45px rgba(0, 0, 0, 0.30);
  --elite-radius: 30px;
  --elite-radius-sm: 18px;
  --elite-ease: cubic-bezier(.19, 1, .22, 1);
}

html {
  scroll-padding-top: 105px;
}

body {
  background:
    radial-gradient(circle at 8% -8%, rgba(230, 195, 106, 0.22), transparent 28%),
    radial-gradient(circle at 92% 2%, rgba(255, 255, 255, 0.08), transparent 25%),
    radial-gradient(circle at 78% 76%, rgba(230, 195, 106, 0.10), transparent 34%),
    linear-gradient(140deg, var(--elite-bg-1) 0%, var(--elite-bg-2) 46%, var(--elite-bg-3) 100%) !important;
  color: var(--elite-ink) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.page-shell {
  max-width: 1240px !important;
  padding-left: clamp(16px, 3vw, 34px) !important;
  padding-right: clamp(16px, 3vw, 34px) !important;
}

.site-header,
.top-contact-wrap,
.header-strip,
.hero,
.section-inner,
.floating-contact-wrapper,
.floating-logo {
  isolation: isolate;
}

.site-header,
.top-contact-wrap {
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

.site-header {
  border: 1px solid rgba(230, 195, 106, 0.20) !important;
  box-shadow: var(--elite-shadow-soft) !important;
}

.header-center,
.header-text,
.hero-main,
.section-header {
  text-wrap: balance;
}

.hero,
.section-inner,
.hero-side,
.service-card,
.audience-card,
.field-card,
.review-card,
.labor-support-card,
.proof-pair-card,
.founder-story,
.header-strip-card {
  position: relative;
  border-color: var(--elite-line) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.115), rgba(255,255,255,0.045)),
    radial-gradient(circle at 8% 0%, rgba(230,195,106,0.16), transparent 38%) !important;
  box-shadow: var(--elite-shadow-soft) !important;
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

.hero::before,
.section-inner::before,
.service-card::before,
.audience-card::before,
.field-card::before,
.review-card::before,
.labor-support-card::before,
.proof-pair-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.20), transparent 32%, rgba(230,195,106,0.08) 68%, transparent 100%);
  opacity: 0.5;
  z-index: -1;
}

.hero {
  overflow: hidden;
  border-radius: clamp(30px, 4vw, 48px) !important;
  min-height: auto;
  transform: translateZ(0);
}

.hero::after {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 240, 184, .20), transparent 24%),
    radial-gradient(circle at 88% 22%, rgba(230, 195, 106, .14), transparent 26%);
  opacity: .82;
  z-index: -1;
}

.hero-main h1,
.hero-main h2,
.section-header h2,
.header-text h1,
.header-center h1,
.service-card h3,
.audience-card h3,
.labor-support-card h3,
.field-card-body h3 {
  letter-spacing: -0.035em !important;
}

.hero-main h1,
.hero-main h2 {
  font-size: clamp(2.65rem, 7vw, 5.85rem) !important;
  line-height: 0.91 !important;
  margin-bottom: 22px !important;
  background: linear-gradient(105deg, #ffffff 0%, #fff3c4 36%, #e6c36a 72%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: none !important;
}

.hero-main p,
.hero-meta,
.section-header p,
.service-card p,
.audience-card p,
.labor-support-card p,
.field-card-body p,
.review-text,
.proof-note {
  color: var(--elite-muted) !important;
}

.hero-meta,
.top-split-label,
.pill,
.hero-badges span,
.hero-badge-footer,
.review-stars,
.proof-pair-badge {
  letter-spacing: .08em !important;
}

.hero-badges,
.hero-cta-row,
.audience-link-row,
.labor-cta-row {
  gap: 12px !important;
}

.pill,
.hero-badges span,
.hero-stat,
.proof-pair-badge,
.top-split-label {
  border: 1px solid rgba(230,195,106,.32) !important;
  background: rgba(255,255,255,.075) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 26px rgba(0,0,0,.18) !important;
}

.btn-primary,
.btn-dark,
.btn-ghost,
.audience-link,
.floating-text-button,
.floating-call-button,
button,
input[type="submit"] {
  transition:
    transform .34s var(--elite-ease),
    box-shadow .34s var(--elite-ease),
    border-color .34s var(--elite-ease),
    background .34s var(--elite-ease),
    filter .34s var(--elite-ease) !important;
}

.btn-primary,
.audience-link--primary,
.floating-text-button,
input[type="submit"] {
  color: #10140f !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  background: linear-gradient(135deg, #fff1b8 0%, #e6c36a 48%, #b99138 100%) !important;
  box-shadow: 0 18px 46px rgba(230,195,106,.25), inset 0 1px 0 rgba(255,255,255,.45) !important;
}

.btn-dark,
.btn-ghost,
.audience-link--ghost {
  border: 1px solid rgba(230,195,106,.34) !important;
  background: rgba(255,255,255,.065) !important;
  color: #fff8de !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 34px rgba(0,0,0,.22) !important;
}

.btn-primary:hover,
.btn-dark:hover,
.btn-ghost:hover,
.audience-link:hover,
.floating-text-button:hover,
.floating-call-button:hover,
button:hover,
input[type="submit"]:hover {
  transform: translateY(-3px) scale(1.012) !important;
  box-shadow: 0 26px 58px rgba(0,0,0,.32), 0 0 0 1px rgba(230,195,106,.22) !important;
  filter: saturate(1.08) brightness(1.04);
}

.floating-logo {
  border: 1px solid rgba(255, 240, 184, .58) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.42), 0 0 34px rgba(230,195,106,.16) !important;
}

.header-strip-grid,
.reviews-track {
  scroll-behavior: smooth;
}

.header-strip-card,
.field-card,
.proof-pair-photo,
.service-image-wrap,
.founder-story-photo {
  overflow: hidden;
}

.header-strip-card img,
.field-card img,
.proof-pair-photo img,
.service-image-wrap img,
.founder-story-photo img {
  transition: transform .85s var(--elite-ease), filter .85s var(--elite-ease) !important;
}

.header-strip-card:hover img,
.field-card:hover img,
.proof-pair-card:hover img,
.service-card:hover img,
.founder-story:hover img {
  transform: scale(1.055) !important;
  filter: contrast(1.04) saturate(1.07);
}

.service-card,
.audience-card,
.field-card,
.review-card,
.labor-support-card,
.proof-pair-card {
  transition:
    transform .42s var(--elite-ease),
    box-shadow .42s var(--elite-ease),
    border-color .42s var(--elite-ease),
    background .42s var(--elite-ease) !important;
}

.service-card:hover,
.audience-card:hover,
.field-card:hover,
.review-card:hover,
.labor-support-card:hover,
.proof-pair-card:hover {
  transform: translateY(-7px) !important;
  border-color: var(--elite-line-strong) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.42), 0 0 0 1px rgba(230,195,106,.14) !important;
}

.section {
  padding-top: clamp(48px, 7vw, 86px) !important;
  padding-bottom: clamp(32px, 5vw, 62px) !important;
}

.section-inner {
  border-radius: var(--elite-radius) !important;
  padding: clamp(24px, 4.5vw, 48px) !important;
}

.section-header h2 {
  font-size: clamp(2rem, 4.6vw, 3.8rem) !important;
  line-height: 1.02 !important;
  background: linear-gradient(100deg, #fff 0%, #fff0b8 52%, #e6c36a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.service-grid,
.audience-grid,
.field-gallery-grid,
.labor-support-grid,
.proof-pairs-grid {
  gap: clamp(16px, 2vw, 26px) !important;
}

.service-card,
.audience-card,
.labor-support-card,
.review-card {
  border-radius: var(--elite-radius-sm) !important;
}

.service-card--primary-service {
  border-color: rgba(255, 240, 184, .50) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,.36), 0 0 0 1px rgba(230,195,106,.16) !important;
}

.review-stars {
  color: var(--elite-gold-2) !important;
  text-shadow: 0 0 22px rgba(230,195,106,.25);
}

.reviews-track {
  padding-bottom: 14px !important;
}

.top-phone,
.top-phone a,
.top-contact,
.top-contact a,
.top-contact-wrap a {
  transition: color .28s ease, opacity .28s ease, transform .28s ease;
}

.top-phone a:hover,
.top-contact a:hover,
.top-contact-wrap a:hover {
  color: #fff1b8 !important;
  transform: translateY(-1px);
}

/* Motion system added by elite-animations.js */
.wip-reveal {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  transition: opacity .72s var(--elite-ease), transform .72s var(--elite-ease);
  will-change: opacity, transform;
}

.wip-reveal.wip-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.wip-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .64s var(--elite-ease), transform .64s var(--elite-ease);
}

.wip-stagger.wip-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.wip-stagger.wip-visible > *:nth-child(1) { transition-delay: .04s; }
.wip-stagger.wip-visible > *:nth-child(2) { transition-delay: .10s; }
.wip-stagger.wip-visible > *:nth-child(3) { transition-delay: .16s; }
.wip-stagger.wip-visible > *:nth-child(4) { transition-delay: .22s; }
.wip-stagger.wip-visible > *:nth-child(5) { transition-delay: .28s; }
.wip-stagger.wip-visible > *:nth-child(6) { transition-delay: .34s; }
.wip-stagger.wip-visible > *:nth-child(7) { transition-delay: .40s; }
.wip-stagger.wip-visible > *:nth-child(8) { transition-delay: .46s; }

.hero {
  animation: wipHeroLift .95s var(--elite-ease) both;
}

.floating-logo {
  animation: wipSoftFloat 7s ease-in-out infinite;
}

@keyframes wipHeroLift {
  from { opacity: 0; transform: translateY(18px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes wipSoftFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media (max-width: 760px) {
  body {
    background:
      radial-gradient(circle at 12% -5%, rgba(230,195,106,.18), transparent 32%),
      linear-gradient(155deg, #06110a 0%, #0e1a12 58%, #182619 100%) !important;
  }

  .hero {
    border-radius: 30px !important;
    padding: clamp(24px, 6vw, 34px) !important;
  }

  .hero-main h1,
  .hero-main h2 {
    font-size: clamp(2.35rem, 13vw, 4.05rem) !important;
    line-height: .94 !important;
  }

  .section-inner {
    border-radius: 24px !important;
    padding: 22px !important;
  }

  .service-card:hover,
  .audience-card:hover,
  .field-card:hover,
  .review-card:hover,
  .labor-support-card:hover,
  .proof-pair-card:hover,
  .btn-primary:hover,
  .btn-dark:hover,
  .btn-ghost:hover,
  .audience-link:hover,
  .floating-text-button:hover,
  .floating-call-button:hover {
    transform: none !important;
  }

  .floating-logo {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  .wip-reveal,
  .wip-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   W.I.P Services  -  Precision Responsive Polish Pass
   Purpose: design-only fixes requested after elite upgrade.
   Preserves HTML content, SEO structure, links, schema, forms,
   and Netlify compatibility.
   ========================================================= */

/* Keep the transparent circular strip images truly transparent. */
.header-strip .header-strip-card,
.header-strip .header-strip-card--badge,
.header-strip .header-strip-card--reviews {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

.header-strip .header-strip-card::before,
.header-strip .header-strip-card::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
}

.header-strip .header-strip-card img {
  background: transparent !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.42)) !important;
}

/* Make the top title treatment consistent and more alive on desktop and mobile. */
.site-header {
  background:
    linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.035)),
    radial-gradient(circle at 12% 0%, rgba(230,195,106,.18), transparent 42%) !important;
  border-radius: 24px !important;
}

.header-text h1,
.header-center h1 {
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
  line-height: .92 !important;
  background: linear-gradient(105deg, #ffffff 0%, #fff4c8 42%, #e6c36a 74%, #ffffff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: 0 18px 38px rgba(0,0,0,.22) !important;
}

.header-text p,
.header-center p {
  color: rgba(255,255,255,.86) !important;
  letter-spacing: .04em !important;
}

/* Safer full-width desktop spacing so hero/location copy does not hug the left edge. */
@media (min-width: 1180px) {
  .page-shell {
    max-width: 1320px !important;
    padding-left: clamp(42px, 5vw, 86px) !important;
    padding-right: clamp(42px, 5vw, 86px) !important;
  }

  .hero {
    padding-left: clamp(42px, 4.5vw, 76px) !important;
    padding-right: clamp(42px, 4.5vw, 76px) !important;
  }

  .hero-main,
  .hero-locations-desktop,
  .section-header,
  .field-gallery-intro,
  .proof-note {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Turn the hero CTAs and testimonial-adjacent links into obvious premium buttons. */
.hero-cta-row,
.audience-link-row,
.labor-cta-row,
.homeowner-cta-row {
  align-items: stretch !important;
}

.hero-cta-row a,
.audience-link,
.labor-cta-row a,
.homeowner-cta-row a {
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  font-weight: 850 !important;
  letter-spacing: .01em !important;
  white-space: normal !important;
}

.hero-cta-row .btn-ghost,
.hero-cta-row .btn-dark,
.audience-link--ghost,
.labor-cta-row .btn-dark,
.homeowner-cta-row .btn-dark {
  color: #fff8de !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.045)),
    radial-gradient(circle at 20% 0%, rgba(230,195,106,.18), transparent 50%) !important;
  border: 1px solid rgba(230,195,106,.42) !important;
}

/* Premium helper-note style for short intro/supporting copy. */
.audience-intro,
.section-header > p,
.field-gallery-intro,
.proof-note,
.hero-note,
.hero-mobile-areas {
  position: relative !important;
  color: rgba(255,255,255,.88) !important;
  font-size: clamp(.98rem, 1.25vw, 1.08rem) !important;
  line-height: 1.68 !important;
}

.section-header > p,
.field-gallery-intro,
.proof-note,
.hero-note,
.hero-mobile-areas {
  background: rgba(255,255,255,.052) !important;
  border: 1px solid rgba(230,195,106,.18) !important;
  border-radius: 18px !important;
  padding: 12px 15px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.audience-intro::before,
.section-header > p::before,
.field-gallery-intro::before,
.proof-note::before,
.hero-note::before,
.hero-mobile-areas::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: 999px;
  background: var(--elite-gold) !important;
  box-shadow: 0 0 16px rgba(230,195,106,.55);
  vertical-align: .08em;
}

/* Fix contrast problems caused by earlier dark/light blue inherited colors. */
.labor-support-card,
.homeowner-card {
  color: #fff !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.115), rgba(255,255,255,.045)),
    radial-gradient(circle at 8% 0%, rgba(230,195,106,.16), transparent 38%) !important;
  border-color: rgba(230,195,106,.30) !important;
}

.labor-support-card h3,
.homeowner-card h3,
.service-card h3,
.field-card-body h3,
.proof-pair-card h3 {
  color: #ffffff !important;
}

.labor-support-card p,
.homeowner-card p,
.labor-list li,
.homeowner-list li,
.field-gallery-intro,
.proof-note,
.service-card p,
.field-card-body p,
.proof-pair-card p {
  color: rgba(255,255,255,.90) !important;
}

.labor-list li::before,
.homeowner-list li::before {
  background: var(--elite-gold) !important;
  box-shadow: 0 0 0 4px rgba(230,195,106,.13), 0 0 16px rgba(230,195,106,.35) !important;
}

/* Override inline dark link colors in the service-area block for dark backgrounds. */
.section-inner a[href*="construction-cleaning.html"],
.section-inner a[href="park-city-construction-cleaning.html"],
.section-inner a[href="heber-midway-construction-cleaning.html"],
.section-inner a[href="utah-county-construction-cleaning.html"],
.section-inner a[href="salt-lake-county-construction-cleaning.html"] {
  color: #ffffff !important;
  background: rgba(255,255,255,.065) !important;
  border: 1px solid rgba(230,195,106,.25) !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.section-inner a[href*="construction-cleaning.html"]:hover,
.section-inner a[href="park-city-construction-cleaning.html"]:hover,
.section-inner a[href="heber-midway-construction-cleaning.html"]:hover,
.section-inner a[href="utah-county-construction-cleaning.html"]:hover,
.section-inner a[href="salt-lake-county-construction-cleaning.html"]:hover {
  border-color: rgba(230,195,106,.50) !important;
  transform: translateY(-2px);
}

/* Handyman button readability fix. */
a[href="handyman-services-utah.html"].btn-dark,
.homeowner-cta-row a[href="handyman-services-utah.html"] {
  color: #10140f !important;
  background: linear-gradient(135deg, #fff1b8 0%, #e6c36a 52%, #b99138 100%) !important;
  border: 1px solid rgba(255,255,255,.32) !important;
}

/* Tall Pines testimonial should read as the testimonial on phone too. */
.founder-story {
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.05)),
    radial-gradient(circle at 0% 0%, rgba(230,195,106,.18), transparent 42%) !important;
}

.founder-story-body h5 {
  color: #fff4c8 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.founder-story-body p {
  color: rgba(255,255,255,.92) !important;
  line-height: 1.72 !important;
}

/* Phone/mobile version: keep the desktop premium style, adapted safely. */
@media (max-width: 760px) {
  .page-shell {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .site-header {
    border-radius: 22px !important;
    padding: 18px 14px !important;
    margin-top: 12px !important;
  }

  .header-text h1,
  .header-center h1 {
    font-size: clamp(2.25rem, 14vw, 3.7rem) !important;
    line-height: .92 !important;
    margin-bottom: 8px !important;
  }

  .header-text p,
  .header-center p {
    font-size: .76rem !important;
    line-height: 1.45 !important;
  }

  .header-strip {
    margin-top: 12px !important;
  }

  .header-strip-grid {
    justify-content: flex-start !important;
    gap: 14px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .header-strip-card {
    flex: 0 0 88px !important;
    max-width: 88px !important;
  }

  .header-strip-card--badge {
    flex-basis: 100px !important;
    max-width: 100px !important;
  }

  .hero,
  .section-inner,
  .audience-paths .section-inner,
  .labor-support-card,
  .homeowner-card,
  .service-card,
  .field-card,
  .review-card,
  .proof-pair-card,
  .founder-story {
    border-radius: 24px !important;
  }

  .hero {
    padding: 24px 18px !important;
  }

  .hero-main h1,
  .hero-main h2,
  .section-header h2 {
    letter-spacing: -0.045em !important;
  }

  .hero-cta-row,
  .audience-link-row,
  .labor-cta-row,
  .homeowner-cta-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .hero-cta-row a,
  .audience-link,
  .labor-cta-row a,
  .homeowner-cta-row a {
    width: 100% !important;
    min-height: 48px !important;
    padding: 13px 16px !important;
  }

  .section-header > p,
  .field-gallery-intro,
  .proof-note,
  .hero-note,
  .hero-mobile-areas,
  .audience-intro {
    font-size: .95rem !important;
    line-height: 1.58 !important;
    padding: 11px 12px !important;
  }

  .labor-support-grid,
  .homeowner-grid,
  .audience-grid,
  .service-grid,
  .field-gallery-grid,
  .proof-pairs-grid {
    grid-template-columns: 1fr !important;
  }

  .labor-support-card,
  .homeowner-card,
  .audience-card,
  .service-card {
    padding: 19px 17px !important;
  }

  .founder-story {
    display: block !important;
    padding: 20px 18px !important;
  }

  .founder-story-photo {
    display: none !important;
  }

  .founder-story-body h5 {
    font-size: .82rem !important;
    margin-bottom: 12px !important;
  }

  .founder-story-body p {
    font-size: .95rem !important;
  }

  .reviews-track {
    gap: 14px !important;
  }

  .review-card {
    min-width: 86% !important;
  }
}


/* =========================================================
   Requested cleanup pass  -  design only
   - Removed hero-side service link list from HTML.
   - Adds breathing room above the main construction support title.
   - Softens button typography so labels are easier to read.
   ========================================================= */
.hero-main {
  padding-top: clamp(22px, 3.2vw, 58px) !important;
}

.hero-main h2:first-child {
  margin-top: clamp(16px, 2.4vw, 42px) !important;
}

.btn-primary,
.btn-dark,
.btn-ghost,
.audience-link,
.floating-text-button,
.floating-call-button,
.btn-submit,
button,
input[type="submit"] {
  font-weight: 560 !important;
  letter-spacing: .005em !important;
  text-rendering: geometricPrecision;
}

.hero-cta-row a,
.audience-link,
.labor-cta-row a,
.homeowner-cta-row a {
  font-weight: 560 !important;
  letter-spacing: .005em !important;
}

.btn-primary span,
.btn-dark span,
.btn-ghost span,
.audience-link span,
.floating-text-button span,
.floating-call-button span {
  font-weight: inherit !important;
}

@media (max-width: 760px) {
  .hero-main {
    padding-top: 18px !important;
  }

  .hero-main h2:first-child {
    margin-top: 18px !important;
  }

  .btn-primary,
  .btn-dark,
  .btn-ghost,
  .audience-link,
  .floating-text-button,
  .floating-call-button,
  .btn-submit,
  button,
  input[type="submit"] {
    font-weight: 540 !important;
  }
}


/* Final testimonial cleanup: remove side image beside the W.I.P Services testimonial on desktop and mobile. */
.founder-story {
  grid-template-columns: 1fr !important;
}

.founder-story-photo {
  display: none !important;
}

.founder-story-body {
  width: 100% !important;
}


/* Move the Tall Pines professional testimonial out of the hero and place it as a full-width trust section near the bottom. */
.tall-pines-testimonial-section {
  margin-top: clamp(38px, 6vw, 86px) !important;
  margin-bottom: clamp(34px, 5vw, 72px) !important;
}

.testimonial-section-inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 36px);
}

.tall-pines-testimonial-section .founder-story {
  display: block !important;
  margin: 0 !important;
  padding: clamp(24px, 4vw, 42px) !important;
  border-top: 0 !important;
  border-radius: 30px !important;
  background: radial-gradient(circle at top left, rgba(250,204,107,.16), rgba(7,10,18,.96) 45%, rgba(4,5,8,.98)) !important;
  border: 1px solid rgba(250,204,107,.28) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.38) !important;
}

.tall-pines-testimonial-section .founder-story-body h5 {
  margin-bottom: 16px !important;
  color: #facc6b !important;
  font-size: clamp(.9rem, 1.4vw, 1.05rem) !important;
  letter-spacing: .16em !important;
}

.tall-pines-testimonial-section .founder-story-body p {
  color: rgba(255,255,255,.92) !important;
  font-size: clamp(.98rem, 1.35vw, 1.12rem) !important;
  line-height: 1.85 !important;
  margin: 0 !important;
}

@media (max-width: 760px) {
  .tall-pines-testimonial-section {
    margin-top: 42px !important;
  }

  .testimonial-section-inner {
    padding: 0 14px;
  }

  .tall-pines-testimonial-section .founder-story {
    border-radius: 24px !important;
    padding: 22px 18px !important;
  }

  .tall-pines-testimonial-section .founder-story-body h5 {
    letter-spacing: .1em !important;
    line-height: 1.45 !important;
  }

  .tall-pines-testimonial-section .founder-story-body p {
    font-size: .95rem !important;
    line-height: 1.75 !important;
  }
}


/* Center the moved Tall Pines testimonial section now that the side image is gone. */
.tall-pines-testimonial-section .testimonial-section-inner {
  display: flex !important;
  justify-content: center !important;
}

.tall-pines-testimonial-section .founder-story {
  width: 100% !important;
  max-width: 960px !important;
  margin: 0 auto !important;
}

.tall-pines-testimonial-section .founder-story-body {
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.tall-pines-testimonial-section .founder-story-body p {
  text-wrap: pretty;
}

/* Remove the extra CTA container feel and let the two buttons sit cleanly on the page. */
.instant-cta-strip {
  max-width: 980px;
}

.instant-cta-inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
}

.instant-cta-button {
  font-weight: 560 !important;
}

@media (max-width: 640px) {
  .instant-cta-strip {
    padding: 0 14px !important;
  }
}

/* Center the main construction support hero now that the right-side content has been removed. */
.hero {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
  text-align: center !important;
  gap: 22px !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-main {
  width: 100% !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.hero-main h2,
.hero-main p,
.hero-main .hero-meta,
.hero-note,
.hero-mobile-areas {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.hero-badges,
.hero-cta-row {
  justify-content: center !important;
}

.hero-stat,
.hero-locations-desktop,
.hero-reviews {
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-locations-desktop {
  max-width: 920px !important;
  text-align: center !important;
}

@media (min-width: 1180px) {
  .hero {
    padding-left: clamp(28px, 4vw, 68px) !important;
    padding-right: clamp(28px, 4vw, 68px) !important;
  }
}

@media (max-width: 640px) {
  .hero-main h2,
  .hero-main p,
  .hero-main .hero-meta,
  .hero-note,
  .hero-mobile-areas {
    text-align: center !important;
  }
}


/* Larger top call-to-action buttons for stronger above-the-fold conversion. */
.instant-cta-strip {
  margin-top: 24px !important;
  margin-bottom: 28px !important;
}

.instant-cta-inner {
  gap: 18px !important;
}

.instant-cta-button {
  min-height: 60px !important;
  min-width: 245px !important;
  padding: 17px 32px !important;
  font-size: 1.08rem !important;
  font-weight: 560 !important;
}

@media (max-width: 640px) {
  .instant-cta-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
    font-size: 1.04rem !important;
  }
}


/* Smaller before/after visuals so the proof section feels cleaner and less oversized. */
.proof-showcase-section .proof-pairs-grid {
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.proof-showcase-section .proof-pair-card {
  max-width: 500px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.proof-showcase-section .proof-pair-photo {
  max-height: 320px !important;
}

.proof-showcase-section .proof-pair-photo img {
  width: 100% !important;
  max-height: 320px !important;
  object-fit: cover !important;
}

@media (max-width: 760px) {
  .proof-showcase-section .proof-pair-card {
    max-width: 430px !important;
  }

  .proof-showcase-section .proof-pair-photo,
  .proof-showcase-section .proof-pair-photo img {
    max-height: 240px !important;
  }
}

/* Final placement/polish: make the top CTA pair larger and more distinct than standard site buttons. */
.instant-cta-strip {
  max-width: 1080px !important;
  margin-top: clamp(24px, 3vw, 38px) !important;
  margin-bottom: clamp(28px, 4vw, 46px) !important;
}

.instant-cta-inner {
  gap: clamp(14px, 2vw, 22px) !important;
}

.instant-cta-button {
  min-height: 64px !important;
  min-width: 250px !important;
  padding: 18px 34px !important;
  border-radius: 999px !important;
  font-size: clamp(1rem, 1.25vw, 1.12rem) !important;
  font-weight: 600 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

.instant-cta-button::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.22);
  pointer-events: none;
  z-index: -1;
}

.instant-cta-button--quote {
  color: #111827 !important;
  background: linear-gradient(135deg, #fff4bc 0%, #e6c36a 46%, #b98522 100%) !important;
  box-shadow: 0 20px 48px rgba(230,195,106,.34), inset 0 1px 0 rgba(255,255,255,.58) !important;
}

.instant-cta-button--call {
  color: #fff8de !important;
  background: linear-gradient(135deg, rgba(255,255,255,.17), rgba(255,255,255,.045)) !important;
  border-color: rgba(230,195,106,.6) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.instant-cta-button:hover,
.instant-cta-button:focus-visible {
  transform: translateY(-4px) scale(1.015) !important;
}

@media (max-width: 640px) {
  .instant-cta-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 60px !important;
    font-size: .98rem !important;
  }
}

/* Blend the top hero/accolade area into the rest of the page so there is no hard green color break. */
:root {
  --elite-bg-1: #07140d;
  --elite-bg-2: #07140d;
  --elite-bg-3: #030706;
}

html,
body {
  background-color: #07140d !important;
}

body {
  background-image:
    radial-gradient(circle at 12% -10%, rgba(230, 195, 106, 0.16), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.055), transparent 28%),
    radial-gradient(circle at 50% 42%, rgba(14, 42, 24, 0.46), transparent 52%),
    linear-gradient(180deg, #07140d 0%, #07140d 38%, #07140d 64%, #030706 100%) !important;
  background-attachment: fixed !important;
}

.page-shell,
main,
.instant-cta-strip,
.top-accolade-badges {
  background: transparent !important;
}

.top-accolade-badges {
  margin-bottom: clamp(20px, 3vw, 34px) !important;
}


/* Final accolade/CTA refinements requested: five badges, note below images, softer gold button, gold Call/Text text. */
.top-accolade-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.top-accolade-note {
  max-width: 820px !important;
  margin: 14px auto 0 !important;
  text-align: center !important;
  color: rgba(255,255,255,.86) !important;
  font-size: clamp(.92rem, 1.35vw, 1.04rem) !important;
  line-height: 1.55 !important;
}

.instant-cta-button--quote {
  background: linear-gradient(135deg, #e4c36c 0%, #c29a3c 52%, #8b661f 100%) !important;
  border-color: rgba(230,195,106,.72) !important;
  box-shadow: 0 18px 42px rgba(144, 103, 31, .24), inset 0 1px 0 rgba(255,255,255,.30) !important;
}

.instant-cta-button--call {
  color: #e6c36a !important;
}

.instant-cta-button--call:visited {
  color: #e6c36a !important;
}

@media (max-width: 1100px) {
  .top-accolade-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .top-accolade-grid {
    display: flex !important;
  }
  .top-accolade-note {
    padding: 0 8px !important;
    margin-top: 10px !important;
  }
}


/* Make the top accolade badges smaller and tighten the construction-support title size. */
.top-accolade-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(120px, 160px)) !important;
  justify-content: center !important;
  gap: clamp(8px, 1.1vw, 14px) !important;
}

.top-accolade-badge {
  width: 100% !important;
  max-width: 160px !important;
  margin: 0 auto !important;
}

.top-accolade-badge img {
  width: 100% !important;
  max-width: 160px !important;
}

.hero-main > h2 {
  font-size: clamp(1.95rem, 3.8vw, 3.25rem) !important;
  line-height: 1.08 !important;
  margin-bottom: 16px !important;
}

@media (max-width: 1100px) {
  .top-accolade-grid {
    grid-template-columns: repeat(3, minmax(120px, 155px)) !important;
  }
}

@media (max-width: 640px) {
  .top-accolade-grid {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  .top-accolade-badge {
    min-width: 40vw !important;
    max-width: 150px !important;
  }

  .top-accolade-badge img {
    max-width: 150px !important;
  }

  .hero-main > h2 {
    font-size: clamp(1.55rem, 6vw, 2.1rem) !important;
    line-height: 1.12 !important;
  }
}


/* Final tune-up: add sixth accolade, keep badges smaller, resize title slightly larger, and improve mobile readability. */
.top-accolade-grid {
  grid-template-columns: repeat(6, minmax(96px, 130px)) !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(7px, .9vw, 12px) !important;
}

.top-accolade-badge,
.top-accolade-badge img {
  max-width: 130px !important;
}

.hero-main > h2 {
  font-size: clamp(2.18rem, 4.4vw, 3.7rem) !important;
  line-height: 1.06 !important;
  margin-bottom: 17px !important;
}

.hero-cta-row {
  justify-content: center !important;
}

.hero-stat {
  text-align: center !important;
}

.location-links a,
a[href="park-city-construction-cleaning.html"],
a[href="heber-midway-construction-cleaning.html"],
a[href="utah-county-construction-cleaning.html"],
a[href="salt-lake-county-construction-cleaning.html"] {
  color: #ffffff !important;
}

@media (max-width: 1100px) {
  .top-accolade-grid {
    grid-template-columns: repeat(3, minmax(100px, 130px)) !important;
  }
}

@media (max-width: 640px) {
  .top-accolade-grid {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 9px !important;
  }

  .top-accolade-badge {
    min-width: 34vw !important;
    max-width: 128px !important;
  }

  .top-accolade-badge img {
    max-width: 128px !important;
  }

  .hero-main > h2 {
    font-size: clamp(1.82rem, 7.1vw, 2.45rem) !important;
    line-height: 1.1 !important;
  }

  .hero-stat {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
  }

  .hero-stat-number,
  .hero-stat-text {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .hero-reviews .reviews-track {
    gap: 10px !important;
  }

  .hero-reviews .review-card {
    min-width: 72% !important;
    max-width: 240px !important;
    padding: 10px 10px 12px !important;
    border-radius: 18px !important;
  }

  .hero-reviews .review-stars {
    font-size: .78rem !important;
    margin-bottom: 6px !important;
  }

  .hero-reviews .review-text {
    font-size: .78rem !important;
    line-height: 1.42 !important;
    margin-bottom: 8px !important;
  }

  .hero-reviews .review-meta {
    font-size: .7rem !important;
  }
}


/* Mobile-only refinements: unify top tint, soften subtitle, smaller accolade badges, and smaller review cards. */
@media (max-width: 640px) {
  .top-phone-wrap {
    margin-top: 18px !important;
    background: transparent !important;
  }

  header.site-header,
  .site-header {
    background: linear-gradient(180deg, rgba(7,20,13,0.98) 0%, rgba(8,19,14,0.98) 100%) !important;
    box-shadow: none !important;
    border-color: rgba(230,195,106,0.18) !important;
  }

  header.site-header::before,
  header.site-header::after,
  .site-header::before,
  .site-header::after {
    display: none !important;
    background: transparent !important;
  }

  .header-strip,
  .header-strip-inner,
  .page-shell {
    background: transparent !important;
  }

  .header-text p {
    color: #183020 !important;
  }

  .top-accolade-grid {
    gap: 8px !important;
    padding-bottom: 10px !important;
  }

  .top-accolade-badge {
    min-width: 34vw !important;
    max-width: 124px !important;
    border-radius: 16px !important;
  }

  .top-accolade-badge img {
    max-width: 124px !important;
  }

  .hero-reviews .reviews-scroll-hint {
    font-size: .7rem !important;
  }

  .hero-reviews .reviews-track {
    gap: 8px !important;
    padding-bottom: 8px !important;
  }

  .hero-reviews .review-card {
    min-width: 58% !important;
    max-width: 198px !important;
    padding: 9px 9px 10px !important;
    border-radius: 16px !important;
  }

  .hero-reviews .review-stars {
    font-size: .74rem !important;
    margin-bottom: 5px !important;
  }

  .hero-reviews .review-text {
    font-size: .74rem !important;
    line-height: 1.38 !important;
    margin-bottom: 7px !important;
  }

  .hero-reviews .review-meta {
    font-size: .66rem !important;
  }
}

/* Slightly smaller accolade badges overall, while keeping them readable. */
.top-accolade-grid {
  grid-template-columns: repeat(6, minmax(108px, 138px)) !important;
  gap: clamp(8px, 1vw, 12px) !important;
}

.top-accolade-badge {
  max-width: 138px !important;
}

.top-accolade-badge img {
  max-width: 138px !important;
}

@media (max-width: 1100px) {
  .top-accolade-grid {
    grid-template-columns: repeat(3, minmax(108px, 136px)) !important;
  }
}

/* Mobile final top-tint correction: remove section-only color screens and keep the subtitle light gold/white. */
@media (max-width: 640px) {
  html,
  body,
  .page-shell {
    background: #07140d !important;
  }

  body::before,
  body::after,
  .page-shell::before,
  .page-shell::after,
  .top-phone-wrap::before,
  .top-phone-wrap::after,
  header.site-header::before,
  header.site-header::after,
  .site-header::before,
  .site-header::after,
  .header-strip::before,
  .header-strip::after,
  .top-accolade-badges::before,
  .top-accolade-badges::after {
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .top-phone-wrap,
  header.site-header,
  .site-header,
  .header-strip,
  .header-strip-inner,
  .instant-cta-strip,
  .top-accolade-badges {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  header.site-header,
  .site-header {
    border-color: rgba(230,195,106,0.22) !important;
  }

  .header-text p,
  header.site-header .header-text p,
  .site-header .header-text p {
    color: #fff1b8 !important;
    -webkit-text-fill-color: #fff1b8 !important;
    text-shadow: 0 1px 10px rgba(0,0,0,0.35) !important;
    opacity: 1 !important;
  }
}


/* Desktop top-tint correction: remove extra color screens/overlays so the top blends with the rest of the page. */
@media (min-width: 641px) {
  .page-shell {
    background: transparent !important;
    background-image: none !important;
  }

  body::before,
  body::after,
  .page-shell::before,
  .page-shell::after,
  .top-phone-wrap::before,
  .top-phone-wrap::after,
  header.site-header::before,
  header.site-header::after,
  .site-header::before,
  .site-header::after,
  .header-strip::before,
  .header-strip::after,
  .top-accolade-badges::before,
  .top-accolade-badges::after,
  .instant-cta-strip::before,
  .instant-cta-strip::after {
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .top-phone-wrap,
  header.site-header,
  .site-header,
  .header-strip,
  .header-strip-inner,
  .instant-cta-strip,
  .top-accolade-badges {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  header.site-header,
  .site-header {
    border-color: rgba(230,195,106,0.20) !important;
  }
}


/* Final contact/accolade update: one mobile Contact Us button, popup options, and five accolade badges. */
.floating-text-button,
.floating-or-label,
.floating-call-button {
  display: none !important;
}

.floating-contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.34);
  background: linear-gradient(135deg, #e4c36c 0%, #b9892d 58%, #6e4b14 100%);
  color: #10140f;
  font-size: .9rem;
  font-weight: 620;
  letter-spacing: .01em;
  box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 0 18px rgba(230,195,106,.18);
  cursor: pointer;
  animation: textButtonGlow 2.4s ease-in-out infinite;
}

.floating-contact-button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.mobile-contact-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
}

.mobile-contact-modal.is-open {
  display: flex;
}

.mobile-contact-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(7px);
}

.mobile-contact-card {
  position: relative;
  width: min(100%, 420px);
  padding: 24px 18px 18px;
  border-radius: 26px;
  border: 1px solid rgba(230,195,106,.34);
  background: linear-gradient(180deg, rgba(7,20,13,.98), rgba(4,8,6,.98));
  box-shadow: 0 26px 80px rgba(0,0,0,.58);
  color: #fff;
  text-align: center;
}

.mobile-contact-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff1b8;
  font-size: 1.35rem;
  line-height: 1;
}

.mobile-contact-kicker {
  margin: 0 0 6px;
  color: #e6c36a;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mobile-contact-card h2 {
  margin: 0 0 16px;
  color: #fff8de;
  font-size: 1.25rem;
  line-height: 1.2;
}

.mobile-contact-options {
  display: grid;
  gap: 10px;
}

.mobile-contact-options a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(230,195,106,.32);
  background: rgba(255,255,255,.08);
  color: #fff8de;
  text-decoration: none;
  font-weight: 580;
}

.mobile-contact-options a:first-child {
  background: linear-gradient(135deg, #e4c36c 0%, #b9892d 58%, #6e4b14 100%);
  color: #10140f;
}

.top-accolade-grid {
  grid-template-columns: repeat(5, minmax(108px, 138px)) !important;
}

@media (max-width: 1100px) {
  .top-accolade-grid {
    grid-template-columns: repeat(3, minmax(108px, 136px)) !important;
  }
}

@media (max-width: 640px) {
  .floating-contact-wrapper {
    bottom: 24px !important;
    right: 12px !important;
  }
  .floating-contact-button {
    padding: 11px 16px;
    font-size: .84rem;
  }
  body.mobile-contact-open {
    overflow: hidden;
  }
}

@media (min-width: 641px) {
  .mobile-contact-modal,
  .floating-contact-button {
    display: none !important;
  }
}