/* Footer service-areas links are orange inside white text: 2.14:1, and colour








           is the only cue distinguishing them. Underline adds a non-colour cue so the








           link is identifiable without relying on contrast alone (WCAG 1.4.1). */








        p.service-areas a { text-decoration: underline; text-underline-offset: 2px; }








        /* 24-hour emergency service. Real: the owner answers personally at any hour and








           will come out. Call-outs carry a fee, and saying so up front is the point --








           surprise after-hours pricing is what generates the review nobody recovers from. */








        .emergency-line { color: #f2f2f2; font-size: 1.05rem; line-height: 1.6; margin: 0 0 16px 0; }








        .emergency-line strong { color: var(--brand-orange); }








        /* Underlined on purpose: an orange in-text link against white text is 2.14:1, so








           colour alone cannot be the only cue (same WCAG 1.4.1 rule as the service-areas








           link). Learned once today already -- do not repeat it here. */








        .emergency-line a { color: var(--brand-orange); text-decoration: underline; text-underline-offset: 2px; }








        .emergency-callout { border-left: 6px solid var(--brand-orange); background: rgba(255, 153, 0, 0.10);








            padding: 18px 22px; margin: 1.8rem 0; font-size: 1.1rem; line-height: 1.65; color: #f2f2f2; }








        .emergency-callout strong { color: var(--brand-orange); display: block; margin-bottom: 6px;








            font-family: 'Oswald', 'Oswald Fallback', sans-serif; text-transform: uppercase;








            font-size: 1.25rem; letter-spacing: 0.5px; }








        /* `.service-list li` is `display: flex`, which turns each text run into an anonymous








           flex item and DISCARDS the whitespace either side of them. The result is








           "Burning smellsor visible smoke" on the emergency page and








           "outdated brand:Federal Pacific" on panel-upgrades -- a pre-existing live bug on








           the latter. A margin restores the visual space without disturbing the flex








           alignment of the ::before checkmark. */








        .service-list li strong { margin-right: 0.32em; }








        /* Phones: `display: flex` gives each text run its own column, so the bold lead-in is








           squeezed into a narrow strip beside its own sentence. Stack them instead. */








        @media (max-width: 640px) {








            /* block makes the lead-in flow inline with its sentence; the negative text-indent








               keeps the checkmark out in the gutter so wrapped lines align under the text. */








            .service-list li { display: block; padding-left: 2.4rem; text-indent: -2.4rem; }








            /* In normal flow the source whitespace is real, so the flex-era margin would








               put a gap before punctuation that follows the lead-in directly ("reset , or"). */








            .service-list li strong { margin-right: 0; }








        }








        /* In-text links in page content. Without this they fall back to the UA default








           rgb(0,0,238) -- roughly 1.3:1 on the near-black background, and off-brand.








           Underlined because colour alone cannot be the only distinction (WCAG 1.4.1). */








        .content-link { color: var(--brand-orange); text-decoration: underline; text-underline-offset: 2px; }








        /* Customer reviews, placed on the page that answers the question they speak to.








           Same card treatment as the homepage so the site reads as one thing. Source is








           stated because a quote with no provenance is just a claim. BBB redacts names








           inside review bodies, so quotes are chosen to sit either side of those








           placeholders rather than publishing a sentence with REMOVED in the middle. */








        .reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin: 44px 0 0; }








        .review-card { background: #f4f4f4; border-radius: 8px; border-left: 6px solid var(--brand-orange); padding: 28px 26px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); display: flex; flex-direction: column; }








        .review-card p { color: #333; font-style: italic; font-size: 1rem; line-height: 1.55; margin: 0 0 16px; flex: 1 1 auto; }








        .review-card .reviewer { color: #000; font-family: 'Oswald', 'Oswald Fallback', sans-serif; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.5px; margin: 0; font-style: normal; flex: 0 0 auto; }








        .review-card .review-source { color: #666; font-size: 0.85rem; margin: 6px 0 0; font-style: normal; flex: 0 0 auto; }








        .reviews-heading { font-size: 2rem; margin: 60px 0 0; }








            /* desk-nav-canonical-2026-09-20 - one header, one bar height, one active state */








        header { background-color: var(--brand-dark); position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.5); border-bottom: 2px solid var(--brand-orange); min-height: 64px; }








        .nav-container { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; }








        .nav-container a { color: #fff; padding: 12px 16px; font-size: 1rem; font-weight: 700; letter-spacing: 1px; font-family: 'Roboto Condensed', 'Roboto Fallback', sans-serif; text-decoration: none; }








        .nav-container a:hover, .nav-container a.active { color: var(--brand-orange); }











        /* --- Hero call-to-action (added 2026-09-28) ---------------------------


           Ported verbatim from the city-page template, which already carried the


           orange call button, so the service template now speaks the same way.


           The audit found no tel: link or form inside the first screen of these


           pages: a visitor landing from search had to scroll to find a way to


           reach Yancie. Do not remove without also removing the hero markup. */


        .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; margin-top: 28px; }


        .hero .btn-cta { display: inline-block; background: var(--brand-orange); color: var(--brand-dark); font-family: 'Oswald', 'Oswald Fallback', sans-serif; font-size: clamp(1.1rem, 2.4vw, 1.45rem); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 16px 32px; border-radius: 6px; box-shadow: 0 8px 24px rgba(255, 153, 0, 0.35); text-decoration: none; }


        .hero .btn-cta:hover { background: #ffaa33; transform: translateY(-2px); color: var(--brand-dark); }


        .hero .btn-quiet { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; font-size: 1rem; }


        .hero .btn-quiet:hover { color: var(--brand-orange); }


        @media (max-width: 560px) {


            .hero .btn-cta { display: block; width: 100%; box-sizing: border-box; }


            .hero-cta { gap: 12px; }


        }





        /* --- Call button in the sticky header (added 2026-09-28) --------------


           The audit measured a 101 px sticky bar on a 390 px viewport carrying no


           way to call. Nothing is removed from the nav (the footer carries no nav


           links on this template, so hiding an item would strand it), so the call


           button joins the same wrapping rows instead of taking a row of its own:


           measured at 390x844 the bar holds its height and one of its items is now


           the phone number. A full-width button row was tried first and made the


           bar 151 px — this is the version that does not cost screen. */


        nav.nav-container a.nav-call { display: inline-flex; align-items: center; background: var(--brand-orange); color: var(--brand-dark) !important; font-weight: 700; padding: 8px 16px; border-radius: 6px; letter-spacing: 0.5px; }


        nav.nav-container a.nav-call:hover { background: #ffaa33; }


        @media (max-width: 860px) {


            nav.nav-container { gap: 6px 8px; padding: 8px 10px; }


            nav.nav-container a { font-size: 11.5px; letter-spacing: 0.3px; }


            nav.nav-container a.nav-call { padding: 8px 12px; font-size: 12.5px; letter-spacing: 0.3px; }


        }





        /* Skip link (added 2026-09-28). The audit found no skip link on any page,


           so a keyboard or screen-reader user tabbed through the six nav items on


           every page. Off-screen until focused, then it lands in the corner. */


        .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--brand-orange); color: var(--brand-dark); font-weight: 700; padding: 12px 18px; border-radius: 0 0 6px 0; text-decoration: none; }


        .skip-link:focus { left: 0; outline: 3px solid #ffffff; outline-offset: 2px; }