/* ============================================================
   Fair Air Solutions — WOW Polish Layer (2026-10-13)
   Pure CSS enhancement sheet, loaded AFTER each page's inline
   styles via <link rel="stylesheet" href="/assets/polish.css">.
   Palette-locked to the site system: navy #052b46 / #031d31,
   sky #9ddfff, gold #f3a53b (+ #ffd447, the gold tint already
   used by the site's own heading underlines & call gradient),
   cream #fff9f3, line #eadbcf, green #60c940, ink #092a40.
   No layout, content, color-scheme or JS changes. Animations
   use transform/opacity only. No dust/particle effects.
   ============================================================ */

/* ---------- 1. Template pages: hero headline chrome ----------
   City / service / neighborhood pages (anything with .hero-inner).
   The plain part of the H1 gets the same steel-chrome language as
   the homepage headline; the gold .hl span keeps its own gold
   gradient (its rules outrank these). Subtle sky glow via
   drop-shadow, matching the template's own .hl technique. */
.hero-inner{position:relative}
.hero-inner h1{
  background-image:linear-gradient(180deg,#ffffff 0%,#eaf6ff 30%,#9ddfff 52%,#ffffff 74%,#d9ecf7 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 2px 12px rgba(157,223,255,.28));
}

/* ---------- 2. Template hero: light ring + pedestal glow ----------
   ::before/::after on .hero are already used by the template
   (blurred orbs), so the ring lives on .hero-inner instead.
   Children are lifted one layer so text/CTAs paint above it. */
.hero-inner::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(640px,130%);aspect-ratio:1/1;border-radius:50%;
  left:50%;top:-250px;transform:translateX(-50%);
  background:radial-gradient(circle,transparent 63%,rgba(157,223,255,.20) 67%,rgba(157,223,255,.05) 71%,transparent 76%);
}
.hero-inner::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(720px,120%);height:190px;border-radius:50%;
  left:50%;bottom:-60px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(243,165,59,.20),transparent 65%);
}
.hero-inner>*{position:relative;z-index:1}

/* ---------- 3. Homepage hero: light ring + pedestal glow ----------
   Scoped to the homepage hero only (it is the one hero that
   contains .hero-media). FIX (Oct 13): the first version of this
   rule set `background` on ::before with only the two glow
   layers — higher specificity than the homepage's own
   .hero:before, so it REPLACED the hero's dark navy overlay
   wholesale and the bright photo showed through washed-out.
   This version sets ONLY the background property, and its value
   is the glow layers stacked ON TOP OF the homepage's original
   overlay layers, copied verbatim — the rich navy is fully
   preserved, the glow paints above it, all other ::before
   properties (content/position/z-index) come from the
   homepage's own rule as before. */
.hero:has(>.hero-media)::before{
  background:
    radial-gradient(ellipse 55% 20% at 50% 94%,rgba(243,165,59,.13),transparent 70%),
    radial-gradient(circle at 50% -140px,transparent 148px,rgba(157,223,255,.15) 168px,rgba(157,223,255,.04) 178px,transparent 196px),
    radial-gradient(circle at 72% 24%,rgba(255,164,96,.16),transparent 34%),
    linear-gradient(180deg,rgba(3,20,35,.82) 0%,rgba(3,20,35,.74) 18%,rgba(5,34,55,.66) 46%,rgba(24,23,48,.72) 100%),
    linear-gradient(0deg,rgba(3,20,35,.9) 0%,rgba(111,43,63,.28) 54%,rgba(246,111,66,.14) 100%);
}

/* ---------- 4. Homepage section titles: gold underline accent ----------
   The homepage H2s already carry the steel-chrome gradient; this
   adds the thin gold bar the template pages already have.
   Homepage-only selectors (ids / .section-head do not exist in
   the shared template, whose H2s keep their own underline). */
.section-head h2,
h2#how-title,h2#serve-title,h2#team-title,h2#faq-title,
h2#areas-title,h2#guarantee-title,h2#comparison-title,
h2#shock-title,h2#quiz-title,h2#instagram-title,h2#before-after-title{
  position:relative;
}
.section-head h2::after,
h2#how-title::after,h2#serve-title::after,h2#team-title::after,
h2#faq-title::after,h2#areas-title::after,h2#guarantee-title::after,
h2#comparison-title::after,h2#shock-title::after,h2#quiz-title::after,
h2#instagram-title::after,h2#before-after-title::after{
  content:"";position:absolute;left:0;bottom:-13px;width:72px;height:4px;
  border-radius:4px;pointer-events:none;
  background:linear-gradient(90deg,#f3a53b,#ffd447,#f3a53b);
  box-shadow:0 0 12px rgba(243,165,59,.45);
}
.section-head-centered h2::after{left:50%;transform:translateX(-50%)}

/* ---------- 5. Cards: deeper hover lift & gold edge glow ----------
   Template .card already lifts -6px; this deepens its shadow.
   Template .review / .step and homepage .service / .quote gain
   the lift. Hub .hub-card already has this treatment built in. */
.cards .card:hover{box-shadow:0 20px 44px rgba(243,165,59,.22),0 8px 20px rgba(5,43,70,.10)}
.review{transition:transform .25s ease,box-shadow .25s ease}
.review:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(243,165,59,.16),0 6px 16px rgba(5,43,70,.08)}
.step{transition:transform .25s ease,box-shadow .25s ease}
.step:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(5,43,70,.30)}
.service,.quote{transition:transform .25s ease,box-shadow .25s ease}
.service:hover,.quote:hover{transform:translateY(-4px);box-shadow:0 24px 54px rgba(5,43,70,.22),0 0 0 1px rgba(243,165,59,.20)}

/* ---------- 6. Primary CTAs: shine sweep on hover ----------
   Existing gradients, breathe and glow animations are kept.
   The band is a ::before (unused by all five targets) clipped
   by overflow:hidden; sweep animates transform only.
   Excluded on purpose: the CALL NOW banner (has its own shine
   + ping rings), the mobile call/book bar (ping rings), and
   the booking-form submit (.submit) — the form stays as-is. */
.cta-book,.cta-call,.btn-call,.nav-book{position:relative;overflow:hidden}
.site-cta:not(.submit){overflow:hidden}
.cta-book::before,.cta-call::before,.btn-call::before,
.nav-book::before,.site-cta:not(.submit)::before{
  content:"";position:absolute;top:-20%;bottom:-20%;left:-70%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg) translateX(0);
  transition:transform .8s ease;pointer-events:none;
}
.cta-book:hover::before,.cta-call:hover::before,.btn-call:hover::before,
.nav-book:hover::before,.site-cta:not(.submit):hover::before{
  transform:skewX(-20deg) translateX(460%);
}

/* ---------- 7. Photos: gold-tinted frame & soft shadow ----------
   Flush gallery/slider images are intentionally left alone
   (their cards already frame them). Standalone photos only. */
.service img{box-shadow:inset 0 0 0 1px rgba(243,165,59,.22)}
.team-photo{box-shadow:0 0 0 6px rgba(243,165,59,.10),0 18px 36px rgba(3,29,49,.35)}
.feat-img{border:1px solid rgba(243,165,59,.30);box-shadow:0 18px 40px rgba(5,43,70,.18)}

/* ---------- 8. Review stars: soft gold glow ---------- */
.stars,.top-rating{text-shadow:0 0 10px rgba(243,165,59,.45),0 0 24px rgba(243,165,59,.16)}

/* ---------- 9. Reduced motion: polish goes still ---------- */
@media (prefers-reduced-motion: reduce){
  .cta-book::before,.cta-call::before,.btn-call::before,
  .nav-book::before,.site-cta:not(.submit)::before{transition:none}
  .card,.review,.step,.service,.quote{transition:none}
  .review:hover,.step:hover,.service:hover,.quote:hover{transform:none}
}