/*------------------------------------*\
    CCS Cleanup — Tier 1–4 cosmetic + mobile + a11y fixes

    Scope: CSS-only. No markup, copy, URL, heading, alt-text, or schema changes.
    Enqueued AFTER trumps.css to guarantee these overrides land last.

    Tier 1 — Mobile-breaking (layout, overflow, tap targets, forms)
    Tier 2 — Visual polish (buttons, spacing, contrast)
    Tier 3 — Performance-as-design (content-visibility, deferred decoration)
    Tier 4 — Accessibility polish (reduced-motion, focus-visible, contrast)
\*------------------------------------*/

/* ============================================================
   Tier 1 — Mobile-breaking
   ============================================================ */

/* T1-1: hero shadow duplicate cannot overflow narrow viewports */
.masthead__text .hero-text {
    max-width: 100%;
    overflow: hidden;
}
.masthead__text p.shadow {
    max-width: 100%;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}
@media (max-width: 420px) {
    .masthead__text h1,
    .masthead__text p.shadow {
        font-size: 30px;
        line-height: 1.1em;
    }
}

/* T1-1a / T2-0: keep the CCS homepage hero on a single typographic layer.
   The decorative outline clone can wrap differently than the live H1 once
   `text-wrap: balance` kicks in, which creates a visibly doubled headline. */
.home .masthead__text > span,
.home .masthead__text h1 {
    max-width: 12ch;
    text-wrap: balance;
}

.home .masthead__text > span {
    margin-left: auto;
    margin-right: auto;
}

.home .masthead__text .hero-text__outline {
    display: none !important;
}

.home .masthead__text h1 {
    margin-left: auto;
    margin-right: auto;
    -webkit-text-stroke: 2px var(--white);
    paint-order: stroke fill;
    text-shadow: 4px 4px 0 rgba(4, 36, 82, 0.5);
}

/* T1-1b: on the CCS homepage, narrow viewports need a single readable
   outline treatment instead of offset duplicate text layers. */
@media (max-width: 575px) {
    .home .masthead__text .hero-text {
        overflow: visible;
    }

    .home .masthead__text > span {
        max-width: 9ch;
        margin-left: auto;
        margin-right: auto;
        font-size: clamp(26px, 9.5vw, 40px);
        line-height: 1.05em;
    }

    .home .masthead__text .hero-text__outline,
    .home .full-width-cta__highlight-text-visual::after {
        content: "" !important;
        display: none !important;
    }

    .home .masthead__text h1 {
        max-width: 10ch;
        margin-left: auto;
        margin-right: auto;
        font-size: clamp(26px, 8.1vw, 34px);
        line-height: 1.05em;
        text-wrap: normal;
        left: auto;
        top: auto;
        -webkit-text-stroke: 0 !important;
        text-shadow: none !important;
    }

    .home .masthead__text .btn-group {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .home .masthead__text .btn-group .btn {
        width: auto;
        margin: 0;
    }

    .home .full-width-cta__highlight-text-visual {
        display: inline-block;
        line-height: 1.2;
        -webkit-text-stroke: 0 !important;
        text-shadow: none !important;
    }
}

@media (min-width: 1200px) {
    .home .masthead__text > span,
    .home .masthead__text h1 {
        margin-left: 0;
        margin-right: 0;
    }
}

/* First-paint parity for utilities whose canonical trumps.css copy is deferred. */
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.screen-reader-text {
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
}

.hidden {
    display: none !important;
    visibility: hidden !important;
}

/* These responsive utilities also live in trumps.css. Repeat the small,
   layout-critical subset here so print-swap/deferred delivery cannot expose
   the wrong responsive header controls during first paint. */
@media (max-width: 767px) {
    .hidden-xs-down {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .hidden-sm-down {
        display: none !important;
    }
}

@media (max-width: 1199px) {
    .hidden-md-down {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .hidden-lg {
        display: none !important;
    }
}

.js-search-toggle,
.toggle-menu,
.desktop-menu__search-close {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    font: inherit;
    color: inherit;
}

.js-search-toggle,
.desktop-menu__search-close {
    background: transparent;
    padding: 0;
}

/* Fixed mobile/tablet header sits outside normal flow; offset mastheads so
   page titles are not hidden behind the promo/header stack. */
@media (max-width: 1199px) {
    .masthead {
        margin-top: 176px;
    }

    .masthead--innerpage__wrapper,
    .has-promotional-deals + .masthead--innerpage .masthead--innerpage__wrapper {
        margin-top: 0;
        padding-top: 36px;
        padding-bottom: 48px;
    }

    .masthead--innerpage__text h1,
    .masthead--innerpage__text .h1 {
        font-size: clamp(32px, 9vw, 44px);
        line-height: 1.12;
        text-wrap: balance;
    }
}

@media (max-width: 420px) {
    .masthead {
        margin-top: 174px;
    }

    .masthead--innerpage__wrapper {
        padding-top: 30px;
    }

    .masthead--innerpage__text h1,
    .masthead--innerpage__text .h1 {
        font-size: clamp(28px, 7.6vw, 32px);
        line-height: 1.15;
    }
}

/* T1-2 / T1-3: 44px min tap targets for mobile phone icon + hamburger */
@media (max-width: 1024px) {
    .header-phone.mobile-phone a,
    .header-phone.mobile-phone {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }
    .toggle-menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }
    .js-search-toggle {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* T1-3b: the fixed mobile header has three utility controls. Keep the logo
   and controls in a single row without letting the search/menu buttons crop
   against the viewport edge on phones. */
@media (max-width: 575px) {
    .page-header > .container {
        padding-left: 16px;
        padding-right: 12px;
    }

    .header-wrap {
        flex-wrap: nowrap;
        gap: 12px;
    }

    .logo {
        flex: 1 1 auto;
        min-width: 0;
        max-width: clamp(132px, 42vw, 165px);
    }

    .logo img,
    .logo .retina-logo {
        max-width: 100%;
    }

    .header-right {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .header-phone.mobile-phone,
    .header-phone.mobile-phone a,
    .js-search-toggle,
    .toggle-menu {
        min-width: 42px;
        min-height: 42px;
        padding: 9px;
    }

    .toggle-menu {
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 360px) {
    .page-header > .container {
        padding-left: 12px;
        padding-right: 10px;
    }

    .header-wrap {
        gap: 8px;
    }

    .logo {
        max-width: 128px;
    }

    .header-right {
        gap: 6px;
    }

    .header-phone.mobile-phone,
    .header-phone.mobile-phone a,
    .js-search-toggle,
    .toggle-menu {
        min-width: 40px;
        min-height: 40px;
        padding: 8px;
    }

    .toggle-menu {
        width: 40px;
        height: 40px;
    }
}

/* T1-4 / new Captain Right Away portrait: let the homepage cartoon overlay
   respect its native aspect ratio. Keep this scoped to the homepage masthead
   so injected Captain sections and legacy in-content artwork stay untouched. */
.masthead--homepage .masthead__cartoon-image {
    height: auto !important;
    object-fit: contain;
    aspect-ratio: 900 / 1328;
}

@media (max-width: 480px) {
    .masthead--homepage .masthead__cartoon-image {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
        margin: 16px auto 0;
        display: block;
        max-width: 220px;
        width: 220px !important;
        height: auto !important;
    }
    .masthead--homepage .masthead__image {
        max-width: 100%;
        height: auto;
    }
    .masthead--homepage .masthead__large-image {
        height: 220px;
    }
}

@media (min-width: 768px) {
    .masthead--homepage .masthead__cartoon-image {
        max-width: 220px !important;
        width: 220px !important;
        height: auto !important;
        bottom: -20px !important;
    }
}

@media (min-width: 1200px) {
    .masthead--homepage .masthead__cartoon-image {
        max-width: 240px !important;
        width: 240px !important;
        height: auto !important;
        bottom: -20px !important;
    }
}

/* T1-5: Trust bar spacing on small phones */
@media (max-width: 400px) {
    .ccs-trust-bar {
        padding: 10px 14px;
        font-size: 12px;
        line-height: 1.55;
    }
    .ccs-trust-bar__inner {
        gap: 4px 14px;
    }
    .ccs-trust-bar__item {
        white-space: normal;
    }
}

/* T1-5b: Tighten the promo bar on phones so the hero stays meaningfully above
   the fold without hiding the current offer. */
@media (max-width: 767px) {
    .header-notification-bar {
        padding: 10px 0;
        font-size: clamp(13px, 3.7vw, 15px);
        line-height: 1.28;
        letter-spacing: 0.02em;
    }
    .header-notification-bar .container {
        padding-left: 18px;
        padding-right: 18px;
    }
    .header-notification-bar__msg {
        max-width: 33ch;
        margin: 0 auto;
        text-wrap: balance;
    }
    .header-notification-bar__cta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }
    .header-notification-bar__cta i {
        padding: 0;
        font-size: 14px;
    }
}

@media (max-width: 389px) {
    .header-notification-bar__msg {
        max-width: 30ch;
    }
}

/* T1-6: Promotion deals grid — avoid widow card on tablet */
@media (min-width: 768px) and (max-width: 1199px) {
    .deals-crads__wrap .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* T1-7: Form inputs ≥16px to prevent iOS zoom-on-focus */
.page-content input[type="text"],
.page-content input[type="email"],
.page-content input[type="tel"],
.page-content input[type="number"],
.page-content input[type="url"],
.page-content input[type="search"],
.page-content input[type="password"],
.page-content input[type="date"],
.page-content textarea,
.page-content select,
.wpcf7 textarea,
.wpcf7 select,
.gform_wrapper textarea,
.gform_wrapper select {
    font-size: max(16px, 1rem);
}

/* T1-8: Footer address long-line overflow protection */
.footer-link-col ul li a,
.footer-link-col ul li {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* ============================================================
   Tier 2 — Visual polish
   ============================================================ */

/* T2-1: Normalize button padding across blocks */
.btn,
.btn-primary,
.btn-secondary,
.btn-tertiary {
    padding: 14px 24px;
}
@media (min-width: 768px) {
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-tertiary {
        padding: 16px 28px;
    }
}
.btn-icon {
    gap: 10px;
}

a.btn-tertiary[href^="tel:"]::after {
    content: none;
    display: none;
}

.btn-icon:has(i),
.btn-primary-icon {
    padding-left: 54px;
}

/* T2-2: Sub-heading breathing on mobile */
.sub-heading,
.sub-heading p {
    letter-spacing: 0.04em;
}
@media (max-width: 767px) {
    .sub-heading,
    .sub-heading p {
        font-size: 16px;
        line-height: 1.4;
    }
}

/* T2-3: Back-to-top contrast */
.back-to-top,
.js-back-to-top {
    color: var(--dark-blue, #042452);
}
.back-to-top:hover,
.js-back-to-top:hover,
.back-to-top button:hover,
.js-back-to-top button:hover {
    color: var(--primary-color, #FF5F1F);
}

/* T2-4: Masthead wave — prevent 1px hairline seam */
.masthead__wave {
    display: block;
    margin-top: -1px;
}

/* T2-4b: generated service/location titles can be very long. Make the shared
   mobile type scale fit the real sitemap labels instead of clipping the final
   word offscreen. */
@media (max-width: 767px) {
    .masthead--innerpage__text h1,
    .masthead--innerpage__text .h1 {
        max-width: 11.5ch;
        margin-left: auto;
        margin-right: auto;
        font-size: clamp(27px, 8vw, 34px);
        line-height: 1.12;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: auto;
    }

    .page-content h1,
    .page-content .h1,
    .page-content h2,
    .page-content .h2 {
        font-size: clamp(28px, 8vw, 32px);
        line-height: 1.18;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: auto;
    }

    .page-content h3,
    .page-content .h3 {
        font-size: clamp(23px, 6.8vw, 28px);
        line-height: 1.2;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: auto;
    }

    .page-content p,
    .page-content li {
        overflow-wrap: break-word;
        word-break: normal;
    }

    .fx-block h1,
    .fx-block .h1,
    .fx-block h2,
    .fx-block .h2,
    .fx-block h3,
    .fx-block .h3 {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
        hyphens: auto;
    }

    .fx-block h2,
    .fx-block .h2 {
        font-size: clamp(28px, 8vw, 32px);
        line-height: 1.18;
    }

    .fx-block h3,
    .fx-block .h3 {
        font-size: clamp(23px, 6.8vw, 28px);
        line-height: 1.2;
    }

    .fx-block p,
    .fx-block li,
    .fx-block .sub-heading {
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: normal;
    }
}

@media (max-width: 420px) {
    .masthead--innerpage__text h1,
    .masthead--innerpage__text .h1 {
        max-width: 12.5ch;
        font-size: clamp(25px, 7.5vw, 30px);
    }

    .page-content h1,
    .page-content .h1,
    .page-content h2,
    .page-content .h2 {
        font-size: clamp(26px, 7.2vw, 30px);
    }
}

/* T2-4c: common image/text blocks use decorative overlap assets that were
   wider than the phone viewport. Keep the artwork contained so the following
   copy does not render on a horizontally clipped canvas. */
@media (max-width: 767px) {
    .image-text,
    .half-image-text-icon-pullouts,
    .pullouts-image-col {
        overflow: hidden;
    }

    .image-text__img--with-sml {
        padding-right: 0;
        padding-bottom: 42px;
    }

    .image-text__img__sml {
        right: 10px;
        bottom: 0;
        width: min(30vw, 110px);
    }

    .image-text__pattern {
        display: none;
    }

    .pullouts-image {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    .pullouts-image img {
        width: 100%;
        height: auto;
        margin-left: 0;
    }
}

/* T2-5: Icon vertical alignment in buttons */
.btn-icon i,
.btn i[class^="icon-"] {
    vertical-align: -2px;
    line-height: 1;
}

/* T2-6: Headline wrap balance */
.deals-crad h3,
.deals-crads h3,
.masthead__text h1,
.sub-heading {
    text-wrap: balance;
}

/* T2-7: Testimonial slider arrow centering */
.testimonials .slick-arrow {
    top: calc(50% - 12px);
}

/* T2-8: Homepage promo amount should read as one outlined value, not a doubled layer */
.home .promo-cta .highlighted-text {
    display: inline-block;
    -webkit-text-stroke: 1px var(--white);
    text-shadow: 4px 4px 0 var(--dark-blue);
}

.home .promo-cta .highlighted-text::after {
    content: none;
}

/* ============================================================
   Tier 3 — Performance-as-design (CSS-only)
   ============================================================ */

/* T3-1: GPU pre-warm for cartoon overlay */
.masthead--homepage .masthead__cartoon-image {
    will-change: transform;
}

/* T3-1 (cont): content-visibility for below-fold hero image */
.masthead__image {
    contain: layout paint;
}

/* Mobile/reduced-motion pages do not run the desktop reveal system, so the
   preloader must never sit above the page waiting for a GSAP timeline. */
@media (max-width: 1199px), (prefers-reduced-motion: reduce) {
    .logo-svg__preloader {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Desktop safety net: if JS or a third-party animation dependency fails, the
   loader gets out of the way and page content remains reachable. */
.logo-svg__preloader {
    pointer-events: none;
    animation: ccs-preloader-fail-safe 200ms ease 1.8s forwards;
}

@keyframes ccs-preloader-fail-safe {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* T3-4: Don't render heavy deals graphic on small screens (and skip request below md) */
@media (max-width: 1024px) {
    .deals-crads__graphics {
        display: none !important;
    }
}

/* ============================================================
   Tier 4 — Accessibility polish
   ============================================================ */

/* ------------------------------------------------------------
   GSAP fallback: if the scroll-triggered animations haven't
   revealed .animated-content children within 4 seconds (e.g.,
   GSAP failed to initialize, or ScrollTrigger didn't fire in
   a headless crawler / AMP / low-power mode), force the
   content visible so we never ship opaque dark bands.
   If GSAP DID run, its inline styles win over this fallback.
   ------------------------------------------------------------ */
@keyframes ccs-fallback-reveal {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1200px) {
    body:not(.turn-off-sparkle) .animated-content > p,
    body:not(.turn-off-sparkle) .animated-content > ul > li,
    body:not(.turn-off-sparkle) .animated-content > ol > li,
    body:not(.turn-off-sparkle) .animated-content > div:not(.reviews),
    body:not(.turn-off-sparkle) .animated-content > h2,
    body:not(.turn-off-sparkle) .animated-content > h3,
    body:not(.turn-off-sparkle) .animated-content > h4,
    body:not(.turn-off-sparkle) .animated-content > h5,
    body:not(.turn-off-sparkle) .animated-content > h6,
    body:not(.turn-off-sparkle) .animated-content > blockquote,
    body:not(.turn-off-sparkle) .animated-content > article,
    body:not(.turn-off-sparkle) .animated-content > img,
    body:not(.turn-off-sparkle) .animated-content > span,
    body:not(.turn-off-sparkle) .animated-slider .slick-slide,
    body:not(.turn-off-sparkle) .animated-card .animated-card-item,
    body:not(.turn-off-sparkle) .animated-image,
    body:not(.turn-off-sparkle) .animated-image-tiles,
    body:not(.turn-off-sparkle) .animated-image-header {
        animation: ccs-fallback-reveal 0.4s ease 4s forwards;
    }
}

/* Desktop critical content should never depend on a delayed scroll animation.
   The header, nav, and masthead are the first things customers need; if GSAP
   is slow, blocked, or waiting on the preloader, keep these elements visible. */
@media (min-width: 1200px) {
    .page-content {
        position: relative;
        z-index: 10;
        background: var(--white, #fff);
    }

    .page-footer {
        position: relative !important;
        bottom: auto !important;
        z-index: 0;
    }

    .page-header,
    .page-header .animated-content,
    .page-header .animated-content > *,
    .masthead,
    .masthead .masthead__wrapper,
    .masthead .animated-content,
    .masthead .animated-content > *,
    .masthead .js-animated-split-text,
    .masthead .js-animated-split-text *,
    .masthead .js-homepage-banner-animation,
    .masthead .js-homepage-banner-animation *,
    .masthead .js-animated-image-header,
    .masthead .js-animated-image-header > *,
    .masthead .masthead__text,
    .masthead .masthead__text *,
    .masthead .masthead__image,
    .masthead .masthead__large-image,
    .masthead .masthead__cartoon-image {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}

body.ccs-animation-safe-reveal .logo-svg__preloader {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

body.ccs-animation-safe-reveal .page-header,
body.ccs-animation-safe-reveal .masthead,
body.ccs-animation-safe-reveal .masthead__wrapper,
body.ccs-animation-safe-reveal .animated-content,
body.ccs-animation-safe-reveal .animated-content > *,
body.ccs-animation-safe-reveal .js-animated-image,
body.ccs-animation-safe-reveal .js-animated-image *,
body.ccs-animation-safe-reveal .js-animated-image-header,
body.ccs-animation-safe-reveal .js-animated-image-header > *,
body.ccs-animation-safe-reveal .js-animated-split-text,
body.ccs-animation-safe-reveal .js-animated-split-text *,
body.ccs-animation-safe-reveal .js-slide-left-animation,
body.ccs-animation-safe-reveal .js-slide-left-animation *,
body.ccs-animation-safe-reveal .js-slide-angle-animation,
body.ccs-animation-safe-reveal .js-slide-angle-animation *,
body.ccs-animation-safe-reveal .js-animated-image-pullouts,
body.ccs-animation-safe-reveal .js-animated-image-pullouts *,
body.ccs-animation-safe-reveal .js-animated-image-tiles,
body.ccs-animation-safe-reveal .js-animated-image-tiles *,
body.ccs-animation-safe-reveal .js-animated-content,
body.ccs-animation-safe-reveal .js-animated-content > *,
body.ccs-animation-safe-reveal .js-animated-media-text,
body.ccs-animation-safe-reveal .js-animated-media-text *,
body.ccs-animation-safe-reveal .js-animated-card,
body.ccs-animation-safe-reveal .js-animated-card *,
body.ccs-animation-safe-reveal .js-animated-slider,
body.ccs-animation-safe-reveal .js-animated-slider *,
body.ccs-animation-safe-reveal .js-slide-up-animation,
body.ccs-animation-safe-reveal .js-slide-up-animation * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* T4-1: Respect prefers-reduced-motion across theme animations */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .js-animated-split-text *,
    .js-animated-content,
    .js-animated-image,
    .js-animated-image-header,
    .js-animated-card,
    .js-animated-card-item,
    .js-animated-image-tiles,
    .js-homepage-banner-animation {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* T4-2: Focus-visible rings */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-tertiary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.toggle-menu:focus-visible,
.js-search-toggle:focus-visible,
.js-back-to-top:focus-visible {
    outline: 2px solid var(--secondary-color, #209AD6);
    outline-offset: 3px;
    border-radius: inherit;
}

.header-phone:focus-within {
    outline: 2px solid var(--secondary-color, #209AD6);
    outline-offset: 2px;
}

/* T4-3: Slightly darken sub-heading blue on small text contexts (AA-large already passes;
   this nudges body uses into AA-normal territory without touching the design token.) */
.sub-heading.sub-heading--body,
p .sub-heading,
.deals-crad .sub-heading {
    color: var(--secondary-aa, #1878AB);
}

/* Wave 1.3 AA: inner-template text-bearing blue/orange */
.sub-heading,
.sub-heading p {
    color: var(--secondary-aa, #1878AB);
}

/* ============================================================
   Tier 5 — Full-site formatting pass, April 2026
   ============================================================ */

/* The generated service/location pages and blog templates reuse many legacy
   blocks with large decorative art. Keep the visual language, but never let
   decorations create a sideways canvas on phones. */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow-x: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

.page-content,
.section-margins,
.blog-listing-container,
.blog-single-container,
.search-results,
.container,
.row,
[class*="col-"] {
    min-width: 0;
}

/* Desktop/tablet overflow hardening: decorative art and carousel tracks should
   never create a sideways page canvas, even when animations or sliders render
   before JS has settled. */
.image-text,
.half-image-text-icon-pullouts,
.pullouts-image-col,
.full-width-cta,
.testimonial-cards,
.testimonials,
.testimonial-card-right,
.testimonial-card-right__wrap,
.testimonial-card-slider {
    overflow-x: clip;
}

@supports not (overflow-x: clip) {
    .image-text,
.half-image-text-icon-pullouts,
.pullouts-image-col,
.full-width-cta,
.testimonial-cards,
.testimonials,
.testimonial-card-right,
.testimonial-card-right__wrap,
.testimonial-card-slider {
        overflow-x: hidden;
    }
}

.pullouts-image,
.image-text__pattern,
.footer-right-bg-icon,
.full-width-cta__man-image {
    max-width: 100vw;
}

.pullouts-image img,
.pullouts-image-graphics img,
.image-text__pattern,
.footer-right-bg-icon,
.full-width-cta__man-image {
    height: auto;
}

.testimonial-card-slider .slick-list {
    overflow: hidden !important;
}

@media (max-width: 767px) {
    .testimonial-cards,
.testimonials,
.full-width-cta,
.fx-accordion,
.tab-accordion {
        overflow: hidden;
    }
}

/* Blog/archive filter bar: the live mobile view was squeezing the category
   picker, input, and submit button into a 50/50 row, clipping labels and
   making the search control look broken. */
.search_bar,
.blog_title_bar {
    padding: clamp(24px, 5vw, 40px) 0 20px;
}

.search_bar .row,
.blog_title_bar .row {
    align-items: center;
}

.search_bar .choices,
.blog_title_bar .choices,
.right-title-bar .choices,
.right-title-bar .search_form,
.search_form,
.search_form form {
    width: 100%;
    max-width: none;
}

.search_bar .choices,
.blog_title_bar .choices {
    margin-bottom: 0;
}

.search_bar .choices__inner,
.blog_title_bar .choices__inner,
.search_bar input.search_bar_input,
.search_form input.search_bar_input,
.search_bar input.search_bar_submit,
.search_form input.search_bar_submit {
    min-height: 50px;
    height: auto;
    font-size: 16px;
    line-height: 1.25;
}

.search_bar .choices__inner,
.blog_title_bar .choices__inner {
    display: flex;
    align-items: center;
    padding: 8px 44px 8px 16px;
    border-color: #cfd8e3;
    border-radius: 8px;
}

.search_bar .choices__inner .choices__list,
.blog_title_bar .choices__inner .choices__list {
    height: auto;
    min-height: 0;
    line-height: 1.25;
}

.search_bar input.search_bar_input,
.search_form input.search_bar_input {
    max-width: none;
    margin: 0;
    border-color: #cfd8e3;
    border-radius: 8px 0 0 8px;
    padding: 12px 16px;
}

.search_bar input.search_bar_submit,
.search_form input.search_bar_submit {
    margin: 0;
    border-radius: 0 8px 8px 0;
    background-color: #1f7dea;
    font-weight: 700;
    white-space: nowrap;
}

.right-title-bar {
    align-items: stretch;
    gap: 12px;
}

.right-title-bar .search_form form,
.search_bar .search_form form {
    display: flex;
    justify-content: stretch;
}

/* Category/search controls belong on the blog index. On article pages they
   were hidden underneath the fixed header while still consuming 120–230px of
   document height. Lead with the article and offset it below the real header. */
body.single-post .blog_title_bar {
    display: none;
}

body.single-post .blog-single-container {
    margin-top: clamp(146px, calc(131px + 5vw), 166px);
}

@media (min-width: 768px) and (max-width: 828px) {
    body.single-post .blog-single-container {
        margin-top: 230px;
    }
}

@media (min-width: 829px) and (max-width: 878px) {
    body.single-post .blog-single-container {
        margin-top: clamp(176px, calc(604px - 48.7vw), 200px);
    }
}

@media (min-width: 879px) and (max-width: 1024px) {
    body.single-post .blog-single-container {
        margin-top: 176px;
    }
}

@media (min-width: 1025px) and (max-width: 1122px) {
    body.single-post .blog-single-container {
        margin-top: 166px;
    }
}

@media (min-width: 1123px) and (max-width: 1199px) {
    body.single-post .blog-single-container {
        margin-top: 148px;
    }
}

@media (min-width: 1200px) {
    body.single-post .blog-single-container {
        margin-top: 160px;
    }
}

@media (max-width: 767px) {
    .search_bar {
        margin-bottom: 22px;
    }

    .search_bar .row,
    .blog_title_bar .row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-left: 0;
        margin-right: 0;
    }

    .search_bar [class*="col-"],
    .blog_title_bar [class*="col-"] {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        text-align: left;
    }

    .right-title-bar {
        display: grid;
        grid-template-columns: 1fr;
    }

    .search_bar .search_form form,
    .right-title-bar .search_form form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .search_bar input.search_bar_submit,
    .search_form input.search_bar_submit {
        min-width: 112px;
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media (max-width: 359px) {
    .search_bar .search_form form,
    .right-title-bar .search_form form {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .search_bar input.search_bar_input,
    .search_form input.search_bar_input,
    .search_bar input.search_bar_submit,
    .search_form input.search_bar_submit {
        width: 100%;
        border-radius: 8px;
    }
}

/* Long article and generated service titles need a smaller editorial rhythm on
   phones. The previous scale made common 2026 guide titles dominate the first
   screen and collide with surrounding metadata. */
@media (max-width: 767px) {
    .blog-single-container h1,
    .single-post h1,
    .single h1 {
        font-size: clamp(31px, 9vw, 40px);
        line-height: 1.1;
        letter-spacing: 0;
        overflow-wrap: break-word;
        text-wrap: balance;
    }

    .blog-single-container h2,
    .toc-container h2,
    .popular-posts h2 {
        font-size: clamp(28px, 8vw, 38px);
        line-height: 1.12;
        letter-spacing: 0;
        overflow-wrap: break-word;
        text-wrap: balance;
    }

    .blog-single-meta,
    .social-share-row {
        gap: 10px 16px;
    }

    .toc-container ul,
    .toc-container ol {
        margin-left: 0;
    }

    .toc-container li {
        padding-left: 34px;
    }
}

/* Long generated labels, CMS-authored CTAs, and footer link grids need one
   more shared wrapping pass beyond the template-specific mobile fixes above. */
.page-content a:not(.btn),
.footer-link-col a,
.footer-seo-services__nav a,
.desktop-menu__search,
.desktop-menu__search * {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Buttons across ACF blocks often receive CMS-authored labels. Preserve the
   visual system while allowing longer actions to wrap cleanly on phones. */
.btn,
.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-icon,
.icons-button__cta,
.deals-crad__link .btn-tertiary {
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

.btn-icon {
    justify-content: center;
    flex-wrap: wrap;
}

.btn.btn-icon:has(i),
.btn-primary-icon {
    padding-left: 56px;
}

@media (min-width: 768px) {
    .btn.btn-icon:has(i),
.btn-primary-icon {
        padding-left: 60px;
    }
}

@media (max-width: 575px) {
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-tertiary {
        width: auto;
        min-height: 44px;
        padding-left: 18px;
        padding-right: 18px;
        line-height: 1.25;
    }

    .btn-icon:has(i),
.btn-primary-icon {
        padding-left: 52px;
    }
}

/* Image and icon cards were mostly safe at 390px, but the fixed 292px card
   width can still exceed the content box on older 320px devices. */
.image-button {
    width: min(292px, 100%);
    max-width: 100%;
    aspect-ratio: 292 / 266;
    height: auto;
}

.image-button__title,
.icons-button__title,
.icons-button__details p {
    overflow-wrap: break-word;
    word-break: normal;
}

.icons-button__cta {
    min-height: 59px;
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 1.25;
}

@media (max-width: 575px) {
    .icons-button__top {
        padding-left: 20px;
        padding-right: 20px;
    }

    .icons-button__cta {
        font-size: 16px;
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* Deal cards use decorative inset art plus large offer typography. Long dollar
   amounts and service names need a more elastic mobile measure. */
.deals-crads__wrap {
    max-width: 100%;
}

@media (max-width: 575px) {
    .deals-crads__wrap {
        padding-left: 0;
        padding-right: 0;
    }

    .deals-crad {
        padding-left: clamp(18px, 7vw, 32px);
        padding-right: clamp(18px, 7vw, 32px);
        min-height: 164px;
    }

    .deals-crad::before {
        left: 12px;
        top: 12px;
        width: calc(100% - 24px);
        height: calc(100% - 24px);
    }

    .deals-crad h3 {
        font-size: clamp(22px, 7vw, 27px);
        line-height: 1.18;
    }
}

/* Footer SEO link grids are useful for crawl depth, but they should read like
   compact navigation and not create tap targets smaller than the text line. */
.footer-seo-services__nav a,
.footer-bottom__wrapper a,
.footer-link-col ul li a {
    min-height: 44px;
    align-items: center;
}

.footer-seo-services__nav a,
.footer-bottom__wrapper a {
    display: inline-flex;
}

@media (max-width: 767px) {
    .footer-seo-services {
        padding-left: 0;
        padding-right: 0;
    }

    .footer-seo-services__nav ul,
    .footer-bottom__wrapper ul {
        gap: 10px 18px;
    }

    .footer-bottom {
        margin-top: 72px;
    }
}

/* ============================================================
   Tier 6 — Full-sitemap touch and legacy page formatting pass
   ============================================================ */

/* Header utility links were visually legible, but several measured as small
   tap targets in the full-site crawl. Preserve the compact header while giving
   promo, logo, search, and breadcrumb links a reliable hit area. */
.header-notification-bar a,
.logo-container.retina-logo,
.js-search-toggle,
.breadcrumbs a,
.breadcrumbs-link,
.footer-logo a,
.footer-review-location a,
.footer-social a,
.half-form-text__info,
.resp-sharing-button__link,
.testimonial-arrow {
    min-height: 44px;
}

.header-notification-bar a,
.logo-container.retina-logo,
.breadcrumbs a,
.breadcrumbs-link,
.footer-logo a,
.footer-review-location a,
.footer-social a,
.half-form-text__info,
.resp-sharing-button__link {
    display: inline-flex;
    align-items: center;
}

.footer-social a,
.resp-sharing-button__link {
    justify-content: center;
    min-width: 44px;
}

.testimonial-arrow {
    min-width: 44px;
}

@media (min-width: 1200px) {
    .js-search-toggle {
        min-width: 44px;
        min-height: 44px;
        border-radius: 8px;
    }
}

@media (max-width: 767px) {
    .header-notification-bar a {
        margin-top: -8px;
        margin-bottom: -8px;
    }
}

/* A legacy SEO landing page is rendered as direct body children instead of the
   normal page-content/container structure. Give those raw CMS nodes the same
   readable measure and mobile padding so headings and tables do not scrape the
   viewport edge or create sideways scroll. */
body.page-id-3241 > h1,
body.page-id-3241 > h2,
body.page-id-3241 > h3,
body.page-id-3241 > h4,
body.page-id-3241 > h5,
body.page-id-3241 > h6,
body.page-id-3241 > p,
body.page-id-3241 > ul,
body.page-id-3241 > ol,
body.page-id-3241 > table {
    width: min(calc(100% - 44px), 1120px);
    margin-left: auto;
    margin-right: auto;
}

body.page-id-3241 > h1:first-of-type {
    margin-top: clamp(28px, 7vw, 56px);
}

body.page-id-3241 > h1,
body.page-id-3241 > h2,
body.page-id-3241 > h3 {
    overflow-wrap: break-word;
    text-wrap: balance;
}

body.page-id-3241 > p,
body.page-id-3241 > li {
    overflow-wrap: break-word;
}

body.page-id-3241 > table {
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
}

body.page-id-3241 > table th,
body.page-id-3241 > table td {
    padding: 10px 12px;
    border: 1px solid #d6e0eb;
    vertical-align: top;
}

@media (max-width: 767px) {
    body.page-id-3241 > h1 {
        font-size: clamp(30px, 8.4vw, 36px);
        line-height: 1.12;
    }

    body.page-id-3241 > h2 {
        font-size: clamp(26px, 7.2vw, 32px);
        line-height: 1.16;
    }

    body.page-id-3241 > h3 {
        font-size: clamp(22px, 6vw, 27px);
        line-height: 1.2;
    }

    body.page-id-3241 > ul,
    body.page-id-3241 > ol {
        padding-left: 42px;
    }
}

/* Decorative CTA people artwork can sit a few pixels outside the content box
   on phones. Keep the intended overlap without reporting as clipped layout. */
@media (max-width: 767px) {
    .full-width-cta {
        overflow: hidden;
    }

    .full-width-cta__man-image {
        left: max(0px, var(--ccs-man-offset, 0px));
    }
}

/* ============================================================
   Tier 7 — Homepage hero + testimonials + service-area map
   rework, May 2026

   - Hero: the orange SEO H1 was rendering at the same scale as
     the white emotional headline, so the long keyword string
     wrapped to ~5 lines and dwarfed the rest of the column,
     leaving the text block far taller than the team photo.
     Rebalance into a clear hierarchy (eyebrow -> big white
     promise -> compact orange specifics -> CTA) and vertically
     centre the two columns.
   - Testimonials: the >=1200px layout absolutely-positioned the
     four cards around an absolutely-positioned heading, so the
     cards rendered on top of the "1000'S of Florida" headline,
     the mascot and the CTA. Replace the fragile collage with a
     clean centred heading banner above a tidy card row.
   - Service-area map: guarantee a concrete map height (the
     paired JS re-dispatches resize) so Google Maps never keeps
     a grey, un-tiled band.
   ============================================================ */

/* ---- Hero: tablet + small-desktop (576px - 1199px) ---- */
@media (min-width: 576px) and (max-width: 1199px) {
    .home .masthead--hero-team .masthead__text > span {
        max-width: 18ch;
        font-size: clamp(34px, 5.4vw, 48px);
        line-height: 1.08;
    }

    .home .masthead--hero-team .masthead__text h1 {
        max-width: 30ch;
        margin-top: 6px;
        margin-bottom: 30px;
        font-size: clamp(20px, 3vw, 27px);
        line-height: 1.26;
        letter-spacing: 0.005em;
        -webkit-text-stroke: 0 !important;
        text-shadow: none !important;
    }
}

/* ---- Hero: desktop (>=1200px) full rebalance ---- */
@media (min-width: 1200px) {
    .masthead--hero-team .masthead__flex {
        align-items: center;
    }

    .masthead--hero-team .masthead__text {
        width: 53%;
        padding-top: 0;
        padding-right: 52px;
    }

    .masthead--hero-team .masthead__image {
        width: 47%;
        padding-left: 0;
    }

    .home .masthead--hero-team .sub-heading,
    .home .masthead--hero-team .sub-heading p {
        margin-bottom: 16px;
        font-size: 16px;
        letter-spacing: 0.13em;
        line-height: 1.45;
    }

    /* White emotional headline = dominant line */
    .home .masthead--hero-team .masthead__text > span {
        max-width: 15ch;
        margin: 0 0 14px;
        font-size: clamp(40px, 3.4vw, 54px);
        line-height: 1.05;
        letter-spacing: -0.012em;
    }

    /* Orange SEO H1 = supporting specifics, compact and clean */
    .home .masthead--hero-team .masthead__text h1 {
        max-width: 23ch;
        margin: 0 0 34px;
        font-size: clamp(22px, 1.7vw, 29px);
        line-height: 1.24;
        letter-spacing: 0.006em;
        -webkit-text-stroke: 0 !important;
        text-shadow: none !important;
    }

    .home .masthead--hero-team .masthead__text .btn-group {
        gap: 18px;
    }
}

/* ---- Hero: phone first-screen conversion polish ----
   The fixed promo/header stack is already offset above the hero, so the old
   200px mobile hero padding pushed the team photo and review proof below a
   common 390px viewport. Tighten the mobile rhythm and make call/book actions
   read as a deliberate conversion cluster. */
@media (max-width: 767px) {
    .home .masthead--hero-team .masthead__wrapper {
        padding: clamp(52px, 14vw, 84px) 0 clamp(86px, 20vw, 126px);
    }

    .home .masthead--hero-team .masthead__text {
        margin-bottom: clamp(24px, 7vw, 40px);
    }

    .home .masthead--hero-team .sub-heading,
    .home .masthead--hero-team .sub-heading p {
        margin-bottom: 10px;
        font-size: clamp(14px, 3.8vw, 16px);
        line-height: 1.35;
        letter-spacing: 0.12em;
    }

    .home .masthead--hero-team .masthead__text > span {
        max-width: 12ch;
        margin-bottom: 10px;
        font-size: clamp(34px, 10.5vw, 42px);
        line-height: 1.03;
    }

    .home .masthead--hero-team .masthead__text h1 {
        max-width: 17ch;
        margin: 0 auto 24px;
        font-size: clamp(25px, 7vw, 31px);
        line-height: 1.08;
        letter-spacing: 0.01em;
    }

    .home .masthead--hero-team .masthead__text .btn-group {
        gap: 10px;
    }

    .home .masthead--hero-team .masthead__text .btn-secondary {
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
    }

    .home .masthead--hero-team .masthead__text .btn-tertiary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        padding: 9px 16px;
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        color: var(--white);
    }

    .home .masthead--hero-team .masthead__image {
        max-width: min(360px, 92vw);
        margin-top: 0;
    }

    .home .masthead--hero-team .masthead__large-image,
    .home .masthead--hero-team .masthead__hero-team {
        border-radius: 16px;
        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
    }
}

@media (max-width: 420px) {
    .home .masthead--hero-team .masthead__text h1 {
        max-width: 16ch;
    }
}

/* ---- Homepage proof shelf: compact verified badges ---- */
.home .review {
    margin-top: clamp(-118px, -13vw, -78px);
    padding: 0 0 clamp(18px, 3vw, 28px);
    z-index: 5;
}

.home .review__col {
    width: min(100%, 780px);
    max-width: 100%;
    margin: 0 auto;
    padding: clamp(10px, 2vw, 16px);
    gap: clamp(10px, 2.8vw, 24px);
    border: 1px solid rgba(4, 36, 82, 0.10);
    border-radius: 8px;
    box-shadow: 0 18px 38px rgba(4, 36, 82, 0.18);
    justify-content: center;
}

.home .review__logo,
.home .review__logo a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.home .review__logo {
    flex: 0 1 auto;
    min-width: 92px;
    min-height: 58px;
}

.home .review__logo img {
    display: block;
    width: auto;
    max-width: min(100%, 150px);
    max-height: 70px;
    object-fit: contain;
}

@media (max-width: 767px) {
    .home .review {
        margin-top: -214px;
        padding-bottom: 18px;
    }

    .home .review__col {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
        max-width: 520px;
        padding: 8px;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .home .review__logo {
        min-width: 0;
        min-height: 44px;
        padding: 2px;
    }

    .home .review__logo img {
        max-width: 100%;
        max-height: 48px;
    }
}

@media (max-width: 360px) {
    .home .review__col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .home .review {
        margin-top: -86px;
        padding-top: 0;
    }

    .home .review__col {
        width: min(100%, 760px);
    }

    .home .review__logo {
        min-width: 104px;
    }
}

@media (min-width: 1200px) {
    .home .review {
        margin-top: -96px;
        padding-bottom: 26px;
    }

    .home .review__col {
        width: min(100%, 790px);
        margin-right: auto;
        margin-left: clamp(0px, 3vw, 36px);
        gap: 22px;
    }
}

/* ---- Testimonials: desktop (>=1200px) clean banner + card row ----
   Scoped to .home so these compound selectors out-rank the block
   stylesheet regardless of enqueue order. */
@media (min-width: 1200px) {
    .home .testimonials__wrapper {
        position: static;
        width: 100%;
        height: auto;
        max-width: 1306px;
        margin: 0 auto;
        padding: 0 24px;
    }

    /* Heading: mascot beside a stacked "Trusted by 1000'S ..." +
       CTA, shrink-wrapped and centred as one tidy banner. */
    .home .testimonials__heading {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        z-index: auto;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 38px;
        width: max-content;
        max-width: 100%;
        margin: 0 auto 52px;
        padding: 0;
        text-align: left;
    }

    .home .testimonial-man-image {
        position: static;
        left: auto;
        top: auto;
        z-index: auto;
        grid-row: 1 / span 2;
        align-self: center;
        width: clamp(190px, 15vw, 250px);
        height: auto;
    }

    .home .testimonials__heading h2 {
        grid-column: 2;
        margin: 0 0 6px;
        font-size: 34px;
        line-height: 1.16;
    }

    .home .testimonials__heading .testimonials__count {
        display: block;
        margin: 2px 0;
        font-size: 86px;
        line-height: 0.92;
        letter-spacing: -0.02em;
    }

    .home .testimonials__heading .btn-tertiary,
    .home .testimonials__heading .additional-cta-buttons {
        grid-column: 2;
        justify-self: start;
    }

    /* Cards: tidy responsive row, no overlap with the heading */
    .home .testimonial-slider,
    .home .testimonial-slider.fx-slider {
        position: static;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
        margin: 0;
        padding: 12px 0 0;
    }

    .home .testimonial-slide,
    .home .testimonial-slide:first-child,
    .home .testimonial-slide:nth-child(2),
    .home .testimonial-slide:nth-child(3),
    .home .testimonial-slide:nth-child(4),
    .home .testimonial-slider.fx-slider .fx-slide {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: auto;
        z-index: auto;
    }

    .home .testimonial-slide-item {
        height: 100%;
        transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    }

    .home .testimonial-slide:hover .testimonial-slide-item {
        transform: translateY(-4px);
        box-shadow: 0 14px 30px rgba(51, 51, 51, 0.22);
    }

    .home .testimonial-slide-item__description {
        max-height: 132px;
    }
}

@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
    .home .testimonial-slide-item,
    .home .testimonial-slide:hover .testimonial-slide-item {
        transition: none;
        transform: none;
    }
}

/* Narrower desktop: drop to two columns so cards keep a usable width */
@media (min-width: 1200px) and (max-width: 1399px) {
    .home .testimonial-slider,
    .home .testimonial-slider.fx-slider {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- Service-area map: guarantee a concrete height ----
   WP Rocket defers component CSS, so the map could initialize
   before FxAccordion.css applied its fixed height — Google then
   measured the flex-stretched (tall, accordion-expanded) height
   and kept that geometry, leaving a grey offset band. Reinforce
   an explicit height on the map wrapper here, and an inline
   <style> in the map template locks it before any script runs. */
.fx-accordion--service-location__map {
    min-height: 320px;
}

.fx-location__map {
    height: 100%;
}

@media (min-width: 768px) {
    .fx-accordion--service-location__map {
        min-height: 418px;
    }
}

@media (min-width: 1200px) {
    .fx-accordion--service-location__map {
        min-height: 813px;
    }
}

/*------------------------------------*\
    Visual Formatting Audit fixes (2026-05-22)
\*------------------------------------*/

/* Issue 04 — long SEO titles: supporting subtitle line under the hero H1.
   The brand / qualifier copy is split off the H1 in partials/masthead.php
   and rendered here as a calmer secondary line. */
.masthead--innerpage__subtitle {
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(15px, 1.4vw, 19px);
    font-weight: 500;
    line-height: 1.4;
    margin: 0 auto 14px;
    max-width: 44ch;
    text-wrap: balance;
}

/* Issue 04 — give the shortened H1 room to breathe instead of the tight
   11.5ch clamp that forced word-per-line stacking. */
@media (max-width: 767px) {
    .masthead--innerpage__text h1,
    .masthead--innerpage__text .h1 {
        max-width: 22ch;
        font-size: clamp(27px, 7.6vw, 35px);
    }
    .masthead--innerpage__subtitle {
        font-size: 15px;
        max-width: 32ch;
    }
}
@media (max-width: 420px) {
    .masthead--innerpage__text h1,
    .masthead--innerpage__text .h1 {
        max-width: 20ch;
        font-size: clamp(26px, 7.2vw, 31px);
    }
}

/* Issue 09 — compact hero variant for utility pages (privacy, sitemap,
   terms, etc.). Same curved hero, far less wasted vertical space. */
.masthead--compact .masthead--innerpage__wrapper {
    padding: 32px 0 34px;
}
@media (min-width: 768px) {
    .masthead--compact .masthead--innerpage__wrapper {
        padding: 38px 0 42px;
    }
}
@media (min-width: 1200px) {
    .masthead--compact .masthead--innerpage__wrapper {
        padding: 44px 0 56px;
    }
}
.masthead--compact .masthead--innerpage__text h1,
.masthead--compact .masthead--innerpage__text .h1 {
    font-size: clamp(28px, 4vw, 40px);
    margin-bottom: 8px;
}

/* Issue 07/08 — designed fallback thumbnail for blog cards with no
   featured image (replaces the small logo floating in whitespace). */
.blog-post__img-container.blog-post__img--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0b1b3f 0%, #1f4f87 55%, #209ad6 100%);
}
.blog-post__img-container.blog-post__img--fallback > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.blog-post__img-container.blog-post__img--fallback::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.10) 0, transparent 42%),
        radial-gradient(circle at 82% 78%, rgba(255, 255, 255, 0.08) 0, transparent 40%);
    pointer-events: none;
}
.blog-post__img-fallback-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 22px;
    text-align: center;
}
.blog-post__img-fallback-inner .blog-post__img-fallback-mark {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 26px;
}
.blog-post__img-fallback-inner .blog-post__img-fallback-label {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Issue 06 — mobile header & promo bar.
   Promo message and its CTA are now separate elements so the arrow icon
   never interrupts the offer copy, and the CTA reads as a clear link. */
.header-notification-bar .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 14px;
}
.header-notification-bar__msg {
    display: inline;
    margin: 0;
}
.header-notification-bar__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: 600;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.55);
}
.header-notification-bar__cta span {
    display: inline;
    max-width: none;
    margin: 0;
    white-space: nowrap;
}
.header-notification-bar__cta:hover,
.header-notification-bar__cta:focus {
    text-decoration-color: #fff;
}
.header-notification-bar__cta i {
    position: static;
    width: auto;
    height: auto;
    color: #209AD6;
    font-size: 15px;
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .header-notification-bar .container {
        flex-direction: column;
        gap: 6px;
    }
    .header-notification-bar__msg {
        display: block;
        max-width: 34ch;
        margin: 0 auto;
        text-wrap: balance;
    }
    .header-notification-bar__cta {
        margin: 0 auto;
        max-width: calc(100% - 24px);
        min-height: 32px;
        padding: 2px 14px;
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 999px;
        justify-content: center;
        text-decoration: none;
        font-size: 13px;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }
    .header-notification-bar__cta i {
        font-size: 13px;
    }
}

/* Issue 06 — larger, more legible mobile logo. */
@media (max-width: 1199px) {
    .logo {
        max-width: clamp(150px, 47vw, 188px);
    }
}
@media (max-width: 360px) {
    .logo {
        max-width: 150px;
    }
}

/* Issue 05: referral embed readability and reserved-space cleanup. */
.ccs-referral-embed {
    max-width: 1180px;
    margin: clamp(28px, 6vw, 72px) auto;
    padding: 0 clamp(16px, 4vw, 28px);
}

.ccs-referral-embed__intro {
    max-width: 760px;
    margin: 0 auto 20px;
    text-align: center;
}

.ccs-referral-embed__eyebrow {
	display: none;
}

.ccs-referral-embed__intro h2 {
    margin: 0 0 10px;
    color: #042452;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.12;
}

.ccs-referral-embed__intro p {
    margin: 0;
    color: #24384f;
    font-size: 17px;
    line-height: 1.6;
}

.ccs-referral-embed__intro a {
	color: #0b5e96;
	font-weight: 800;
}

.ccs-referral-embed__action-panel {
	max-width: 980px;
	margin: 0 auto;
	padding: clamp(24px, 4vw, 42px);
	border-radius: 18px;
	background: #021b3f;
	box-shadow: 0 22px 48px rgba(4, 36, 82, 0.14);
	text-align: center;
}

.ccs-referral-embed__action-panel h3 {
	margin: 0 0 10px;
	color: #fff;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.2;
}

.ccs-referral-embed__action-panel p {
	max-width: 62ch;
	margin: 0 auto;
	color: #f6fbff;
	font-size: 17px;
	line-height: 1.6;
}

.ccs-referral-embed__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 22px;
}

.ccs-referral-embed__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 9px 19px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.ccs-referral-embed__button--primary {
	border-color: #cc4a10;
	background: #cc4a10;
	color: #fff;
}

.ccs-referral-embed__button--secondary {
	border-color: #fff;
	background: #fff;
	color: #042452;
}

.ccs-referral-embed__button:focus-visible {
	outline: 3px solid #209ad6;
	outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
	.ccs-referral-embed__button:hover {
		box-shadow: 0 10px 24px rgba(4, 36, 82, 0.18);
		transform: translateY(-1px);
	}
}

@media (max-width: 767px) {
    .ccs-referral-embed {
        margin-top: 34px;
        margin-bottom: 48px;
        padding-right: 16px;
        padding-left: 16px;
    }

    .ccs-referral-embed__intro {
        text-align: left;
    }

    .ccs-referral-embed__intro h2 {
        font-size: clamp(26px, 7.4vw, 32px);
        line-height: 1.16;
    }

    .ccs-referral-embed__intro p {
        font-size: 16px;
    }

	.ccs-referral-embed__action-panel {
		text-align: left;
	}

	.ccs-referral-embed__action-panel p {
		margin-left: 0;
	}

	.ccs-referral-embed__actions {
		justify-content: stretch;
	}

	.ccs-referral-embed__button {
		width: 100%;
	}
}

/* Mobile lead bar: persistent call/book actions for high-intent visitors. */
.ccs-mobile-lead-bar {
    display: none;
}

@media (max-width: 767px) {
    body.ccs-has-mobile-lead-bar {
        padding-bottom: calc(86px + env(safe-area-inset-bottom));
    }

    .ccs-mobile-lead-bar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 99990;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: rgba(7, 22, 46, 0.96);
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: 0 -12px 30px rgba(7, 22, 46, 0.22);
    }

    .ccs-mobile-lead-bar__item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 56px;
        padding: 9px 10px;
        border-radius: 8px;
        color: #fff;
        text-decoration: none;
    }

    .ccs-mobile-lead-bar__item i {
        flex: 0 0 auto;
        font-size: 19px;
        line-height: 1;
    }

    .ccs-mobile-lead-bar__item span {
        display: grid;
        gap: 2px;
        min-width: 0;
        line-height: 1.05;
    }

    .ccs-mobile-lead-bar__item strong,
    .ccs-mobile-lead-bar__item small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ccs-mobile-lead-bar__item strong {
        color: inherit;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0;
    }

    .ccs-mobile-lead-bar__item small {
        color: #fff;
        font-size: 12px;
        font-weight: 600;
    }

    .ccs-mobile-lead-bar__item--call {
        background: var(--primary-aa, #CC4A10);
    }

    .ccs-mobile-lead-bar__item--book {
        background: #0b5e96;
    }

    .ccs-mobile-lead-bar__item:focus-visible {
        outline: 3px solid #fff;
        outline-offset: -4px;
    }
}

@media (max-width: 360px) {
    .ccs-mobile-lead-bar {
        gap: 6px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .ccs-mobile-lead-bar__item {
        gap: 7px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .ccs-mobile-lead-bar__item strong {
        font-size: 13px;
    }

    .ccs-mobile-lead-bar__item small {
        font-size: 11px;
    }
}

/* Visual rescue pass: keep the conversion surfaces polished after the
   DataForSEO growth layer and across Safari's common laptop viewport widths. */
.home .masthead--hero-team .masthead__text .btn-tertiary {
    border: 1px solid oklch(100% 0 0 / 0.58);
    background: oklch(100% 0 0 / 0.12);
    color: oklch(100% 0 0) !important;
    box-shadow: 0 16px 30px oklch(0% 0 0 / 0.18);
    font-weight: 800;
}

.home .masthead--hero-team .masthead__text .btn-tertiary[href^="tel:"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 18px;
    border-color: white;
    border-radius: 999px;
    background: white !important;
    color: var(--dark-blue, rgb(4 36 82)) !important;
    border-color: oklch(100% 0 0);
    background: oklch(100% 0 0) !important;
    color: oklch(24% 0.1 258) !important;
    opacity: 1 !important;
    text-shadow: none;
}

.home .masthead--hero-team .masthead__text .btn-tertiary[href^="tel:"]:hover,
.home .masthead--hero-team .masthead__text .btn-tertiary[href^="tel:"]:focus-visible {
    color: oklch(46% 0.12 242) !important;
}

@media (min-width: 900px) and (max-width: 1199px) {
    .home .masthead--hero-team .masthead__wrapper {
        padding: 74px 0 146px;
    }

    .home .masthead--hero-team .masthead__flex {
        display: grid;
        grid-template-columns: minmax(0, 0.95fr) minmax(390px, 1.05fr);
        align-items: center;
        gap: 34px;
    }

    .home .masthead--hero-team .masthead__text {
        margin-bottom: 0;
        padding-top: 0;
        text-align: left;
    }

    .home .masthead--hero-team .masthead__text > span,
    .home .masthead--hero-team .masthead__text h1 {
        margin-left: 0;
        margin-right: 0;
    }

    .home .masthead--hero-team .masthead__text > span {
        max-width: 14ch;
        font-size: clamp(38px, 4.5vw, 48px);
    }

    .home .masthead--hero-team .masthead__text h1 {
        max-width: 23ch;
        margin-bottom: 28px;
        font-size: clamp(21px, 2.4vw, 28px);
        line-height: 1.18;
    }

    .home .masthead--hero-team .masthead__text .btn-group {
        justify-content: flex-start;
        gap: 14px;
    }

    .home .masthead--hero-team .masthead__image {
        width: auto;
        max-width: 100%;
        margin: 0;
    }

    .home .masthead--hero-team .masthead__large-image,
    .home .masthead--hero-team .masthead__hero-team {
        border-radius: 22px;
    }

    .home .review {
        margin-top: -104px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .home .masthead--hero-team .masthead__wrapper {
        padding: 64px 0 132px;
    }

    .home .masthead--hero-team .masthead__text {
        margin-bottom: 30px;
    }

    .home .masthead--hero-team .masthead__image {
        max-width: 620px;
    }

    .home .review {
        margin-top: -112px;
    }
}

@media (max-width: 767px) {
    .home .masthead--hero-team .masthead__text .btn-tertiary[href^="tel:"] {
        min-width: min(100%, 230px);
    }
}

.ccs-home-page2-paths {
    max-width: 1180px;
    margin-right: auto;
    margin-left: auto;
    box-shadow: 0 18px 44px oklch(20% 0.08 258 / 0.09);
}

.ccs-home-page2-paths > p:last-child {
    margin: 18px 0 0;
    padding: 14px 16px;
    border-radius: 8px;
    background: oklch(100% 0 0);
    color: oklch(34% 0.07 249);
    font-weight: 700;
}

.ccs-home-page2-paths .ccs-city-depth__grid > div {
    background: oklch(100% 0 0);
    border: 1px solid oklch(46% 0.12 242 / 0.16);
    border-radius: 8px;
    padding: clamp(16px, 2vw, 22px);
    box-shadow: 0 10px 28px oklch(20% 0.08 258 / 0.07);
}

.ccs-home-page2-paths .ccs-city-depth__grid ul {
    gap: 0;
    margin-top: 14px;
}

.ccs-home-page2-paths .ccs-city-depth__grid li {
    padding-left: 0;
}

.ccs-home-page2-paths .ccs-city-depth__grid li::before {
    display: none;
}

.ccs-home-page2-paths .ccs-city-depth__grid li + li {
    border-top: 1px solid oklch(93% 0.02 249);
}

.ccs-home-page2-paths .ccs-city-depth__grid a {
    display: flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
}

.ccs-home-page2-paths .ccs-city-depth__grid a::after {
    content: ">";
    margin-left: auto;
    padding-left: 12px;
    color: oklch(68% 0.19 43);
    font-weight: 900;
}

.ccs-footer-growth-links {
    background: oklch(98% 0.006 248);
}

.ccs-footer-growth-links .container {
    max-width: 1180px;
}

.ccs-footer-growth-links__grid > * {
    border: 1px solid oklch(91% 0.025 249);
    border-radius: 8px;
    background: oklch(100% 0 0);
    padding: 18px;
}

.ccs-footer-growth-links h2 {
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.18;
}

.ccs-footer-growth-links h3 {
    padding-bottom: 9px;
    border-bottom: 1px solid oklch(93% 0.02 249);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ccs-footer-growth-links ul {
    display: grid;
    gap: 0;
}

.ccs-footer-growth-links li + li {
    margin-top: 0;
    border-top: 1px solid oklch(96% 0.014 249);
}

.ccs-footer-growth-links a {
    display: flex;
    align-items: center;
    min-height: 40px;
    color: oklch(41% 0.11 244);
}

@media (max-width: 767px) {
    .ccs-home-page2-paths,
    .ccs-footer-growth-links {
        margin-right: 16px;
        margin-left: 16px;
    }

    .ccs-home-page2-paths {
        padding: 18px;
    }

    .ccs-home-page2-paths h2,
    .ccs-footer-growth-links h2 {
        font-size: clamp(22px, 7vw, 28px);
    }

    .ccs-footer-growth-links {
        padding: 26px 0;
    }

    .ccs-footer-growth-links__grid {
        gap: 14px;
    }

    .ccs-footer-growth-links a {
        min-height: 44px;
    }
}

@media (min-width: 1200px) {
    /* Header inline minification currently removes the space in descendant
       submenu selectors, so restore the desktop dropdown cascade here. */
    .nav-primary .sub-menu {
        display: none !important;
        position: absolute !important;
        top: 40px;
        left: 0;
        min-width: 200px;
        max-width: unset;
        margin-top: 0;
        margin-left: 0;
        padding: 0;
        border: 1px solid #d2dcee;
        border-radius: 0 0 15px 15px;
        background: #fff;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }

    .nav-primary li:hover > .sub-menu,
    .nav-primary li:focus-within > .sub-menu {
        display: block !important;
    }

    .nav-primary .sub-menu li {
        display: block;
        width: 100%;
        padding: 0;
    }

    .nav-primary .sub-menu .sub-menu {
        top: 0;
        left: 100%;
    }

    .nav-primary .sub-menu li:last-child a {
        border-radius: 0 0 15px 15px;
    }

    .nav-primary .sub-menu li a {
        padding: 10px 20px;
        white-space: nowrap;
    }

    .nav-primary .sub-menu li:hover a {
        background-color: #edf7fc;
    }

    .nav-primary .sub-menu li.menu-item-has-children .icon-down-carret {
        display: none;
    }

    .nav-primary .sub-menu li.menu-item-has-children .icon-circle-right-arrow,
    .nav-primary .sub-menu li .icon-circle-right-arrow {
        top: 0;
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 10px;
        color: #339cd4;
        font-size: 15px;
    }

    .nav-primary .sub-menu li.menu-item-has-children.js-toggled .icon-circle-right-arrow.js-toggled,
    .nav-primary .sub-menu li.menu-item-has-children a:hover + .icon-circle-right-arrow,
    .nav-primary .sub-menu li a:hover + .icon-circle-right-arrow {
        color: #ff5f1f !important;
    }
}

/* Mockup alignment pass: CSS-only premium rhythm for the homepage body.
   Preserve all rendered copy, links, headings, JSON-LD, and tracking hooks. */
.home .half-image-text-icon-pullouts,
.home .promo-cta,
.home .half-image-half-accordian-links,
.home .testimonials,
.home .floating-cta,
.home .home-image-text {
    scroll-margin-top: 188px;
}

.home .half-image-text-icon-pullouts .container,
.home .promo-cta .container,
.home .half-image-half-accordian-links .container,
.home .testimonials__wrapper,
.home .floating-cta__wrapper,
.home .home-image-text .container {
    max-width: 1264px;
}

.home .half-image-text-icon-pullouts {
    padding-top: clamp(56px, 7vw, 96px);
    padding-bottom: clamp(58px, 7vw, 92px);
    background:
        linear-gradient(180deg, oklch(100% 0 0) 0%, oklch(98% 0.008 240) 100%);
    overflow: hidden;
}

.home .half-image-text-icon-pullouts .row {
    row-gap: 34px;
}

.home .half-image-text-icon-pullouts__text {
    max-width: 650px;
}

.home .half-image-text-icon-pullouts__text .sub-heading,
.home .half-image-half-accordian-links .sub-heading,
.home .home-image-text .sub-heading {
    color: var(--secondary-aa, #1878AB);
    letter-spacing: 0.09em;
}

.home .half-image-text-icon-pullouts__text h2,
.home .half-image-half-accordian-links h2,
.home .home-image-text h2 {
    letter-spacing: 0;
    text-wrap: balance;
}

.home .half-image-text-icon-pullouts__text p,
.home .half-image-half-accordian-links .fx-accordion__heading p,
.home .home-image-text__text p {
    color: oklch(33% 0.035 250);
}

.home .home-image-text .image-text__text p a:not(.btn) {
    color: var(--primary-aa, #CC4A10);
    text-decoration: underline;
}

.home .testimonials__heading .testimonials__count {
    color: var(--primary-aa, #CC4A10);
}

.home .testimonials__heading .btn-tertiary {
    color: var(--secondary-aa, #1878AB);
}

.home .pullouts-image--self-contained {
    filter: drop-shadow(0 24px 32px oklch(21% 0.07 250 / 0.13));
}

.home .promo-cta {
    max-width: min(1120px, calc(100% - 40px));
    margin-top: clamp(34px, 6vw, 84px);
    margin-bottom: clamp(56px, 7vw, 104px);
    border-radius: 8px;
    background:
        linear-gradient(135deg, oklch(23% 0.095 255) 0%, oklch(30% 0.11 250) 100%);
    box-shadow: 0 26px 62px oklch(20% 0.08 255 / 0.18);
}

.home .promo-cta::before,
.home .promo-cta::after {
    border-radius: 8px;
}

.home .promo-cta__wrap {
    gap: clamp(20px, 4vw, 46px);
}

.home .promo-cta__content {
    position: relative;
    z-index: 2;
}

.home .promo-cta h2 {
    max-width: 15ch;
    color: oklch(100% 0 0);
    font-weight: 700;
    letter-spacing: 0;
    text-wrap: balance;
}

.home .promo-cta .highlighted-text {
    color: oklch(70% 0.21 44);
    letter-spacing: 0;
}

.home .promo-cta .highlighted-text::after {
    color: oklch(23% 0.095 255);
    -webkit-text-stroke-color: oklch(100% 0 0);
}

.home .promo-cta__image {
    border-radius: 8px;
    box-shadow: 0 18px 36px oklch(0% 0 0 / 0.20);
}

.home .half-image-half-accordian-links {
    padding-top: clamp(62px, 8vw, 112px);
    padding-bottom: clamp(64px, 8vw, 116px);
    background:
        linear-gradient(180deg, oklch(96% 0.018 232) 0%, oklch(98% 0.01 232) 100%);
}

.home .half-image-half-accordian-links__wrapper {
    gap: clamp(34px, 5vw, 68px);
}

.home .half-image-half-accordian-links__content {
    position: relative;
    z-index: 2;
}

.home .half-image-half-accordian-links__image {
    align-content: start;
}

.home .half-image-half-accordian-image {
    border-radius: 8px;
    box-shadow: 0 18px 36px oklch(24% 0.07 250 / 0.12);
}

.home .half-image-half-accordian-links .fx-accordion__panels {
    border-radius: 8px;
    box-shadow: 0 18px 44px oklch(24% 0.07 250 / 0.11);
}

.home .half-image-half-accordian-links .fx-accordion__panel {
    border-color: oklch(86% 0.035 238);
}

.home .half-image-half-accordian-links .fx-accordion__panel__toggle {
    min-height: 58px;
}

.home .accordian-icon-links ul li a {
    border-radius: 8px;
}

.home .testimonials {
    padding-top: clamp(64px, 8vw, 112px);
    padding-bottom: clamp(72px, 9vw, 124px);
    background:
        linear-gradient(180deg, oklch(98% 0.01 232) 0%, oklch(96% 0.018 232) 100%);
}

.home .testimonial-slide-item {
    border: 1px solid oklch(86% 0.035 238);
    border-radius: 8px;
    box-shadow: 0 16px 34px oklch(24% 0.07 250 / 0.10);
}

.home .testimonial-slide-item__description {
    color: oklch(34% 0.035 250);
}

.home .floating-cta__wrapper,
.home .home-image-text__img img,
.home .fx-accordion--service-location .fx-accordion__panels,
.home .ccs-captain {
    border-radius: 8px;
}

@media (min-width: 1200px) {
    .home .half-image-text-icon-pullouts .row {
        align-items: center;
    }

    .home .promo-cta {
        padding: 42px;
    }

    .home .promo-cta__content {
        flex: 0 1 46%;
    }

    .home .promo-cta__image {
        flex: 1 1 48%;
        width: auto;
        max-height: 340px;
    }
}

@media (max-width: 767px) {
    .home .half-image-text-icon-pullouts,
    .home .half-image-half-accordian-links,
    .home .testimonials {
        padding-right: 0;
        padding-left: 0;
    }

    .home .half-image-text-icon-pullouts {
        padding-top: 44px;
    }

    .home .half-image-text-icon-pullouts__text {
        max-width: 100%;
    }

    .home .pullouts-image-col {
        padding-top: 24px;
    }

    .home .pullouts-image--self-contained {
        filter: drop-shadow(0 16px 22px oklch(21% 0.07 250 / 0.10));
    }

    .home .promo-cta {
        max-width: calc(100% - 40px);
        margin-top: 36px;
        margin-bottom: 64px;
        padding: 28px 20px;
    }

    .home .promo-cta__wrap {
        gap: 22px;
    }

    .home .promo-cta h2 {
        max-width: 13ch;
        margin-right: auto;
        margin-left: auto;
        font-size: clamp(27px, 8vw, 34px);
        line-height: 1.08;
    }

    .home .promo-cta .highlighted-text,
    .home .promo-cta .highlighted-text::after {
        font-size: clamp(48px, 16vw, 66px);
    }

    .home .promo-cta__image {
        max-height: none;
    }

    .home .half-image-half-accordian-links {
        padding-top: 58px;
    }

    .home .half-image-half-accordian-links__wrapper {
        gap: 28px;
    }

    .home .half-image-half-accordian-links .fx-accordion__heading {
        margin-bottom: 22px;
    }

    .home .testimonials__heading h2 {
        text-wrap: balance;
    }

    .home .ccs-mobile-lead-bar {
        box-shadow: 0 -16px 34px oklch(14% 0.06 250 / 0.28);
    }
}

/* ============================================================
   Tier 8 — 2026-06 Premium redesign pass (mobile-first)
   Owner feedback: site reads as poorly designed / formatted.
   Scope: decorative noise removal, module design-language
   unification, link-band calm-down, FAQ accordion cards,
   map fallback, dated banner modernization.
   ============================================================ */

/* T8-1: Rotated outline-text watermarks ("CALL. CHILL. SMILE.")
   overlap adjacent sections and read as rendering glitches.
   Pure decoration — remove. */
.yeah,
.accordion-since-year {
    display: none !important;
}

/* T8-2: "We're Right Away." promo banner — the offset duplicate
   text (:after with text-stroke) is a dated 2000s double-print
   effect and harms legibility. Single confident headline instead. */
.highlighted-text:after {
    content: none !important;
}
.highlighted-text {
    font-style: normal;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 18px rgba(4, 36, 82, 0.35);
}

/* T8-3: Growth FAQ accordions — raw <details> bars look unstyled.
   Card accordions matching the site's card language. */
.ccs-growth-faq h2 {
    font-size: clamp(20px, 2.4vw, 26px);
    color: #0b1b3f;
    margin-bottom: 18px;
}
.ccs-growth-faq details {
    background: #ffffff;
    border: 1px solid #e3ecf5;
    border-radius: 12px;
    margin: 0 0 10px;
    padding: 0;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ccs-growth-faq details:hover {
    border-color: #c7d9ec;
}
.ccs-growth-faq details[open] {
    border-color: #c7d9ec;
    box-shadow: 0 10px 28px rgba(11, 27, 63, 0.07);
}
.ccs-growth-faq summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    color: #0b1b3f;
    font-size: 16px;
    line-height: 1.45;
    padding: 16px 52px 16px 18px;
    position: relative;
    border: 0;
    margin: 0;
}
.ccs-growth-faq summary::-webkit-details-marker {
    display: none;
}
.ccs-growth-faq summary::after {
    content: "+";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #edf7fc;
    color: #209ad6;
    font-size: 19px;
    font-weight: 500;
    line-height: 28px;
    text-align: center;
}
.ccs-growth-faq details[open] summary::after {
    content: "\2212";
    background: #0b1b3f;
    color: #ffffff;
}
.ccs-growth-faq details > p,
.ccs-growth-faq details > div {
    padding: 0 18px 18px;
    margin: 0;
    color: #26384f;
    line-height: 1.65;
}

/* T8-4: Page-bottom link blocks — reduce link-farm feel.
   Smaller, calmer link type; consistent heading scale; no
   boxes-in-boxes. */
.ccs-growth-links h2,
.ccs-footer-growth-links h2 {
    font-size: clamp(19px, 2.2vw, 24px);
    letter-spacing: 0.01em;
}
.ccs-growth-links h3,
.ccs-footer-growth-links h3 {
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5a6c82;
}
.ccs-growth-links a,
.ccs-footer-growth-links a {
    font-size: 14px;
    line-height: 1.5;
    color: #2d4a68;
    text-decoration: none;
}
.ccs-growth-links a:hover,
.ccs-footer-growth-links a:hover {
    color: #ff5f1f;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ccs-footer-growth-links__grid > * {
    border: 0;
    border-top: 2px solid #e3ecf5;
    border-radius: 0;
    background: transparent;
    padding: 14px 0 0;
}
.ccs-footer-growth-links a {
    min-height: 34px;
}
.ccs-footer-growth-links li + li {
    border-top: 0;
}

/* T8-5: Sitewide navy footer service grid — merge visually with
   the page above it; quieter links, tighter rhythm. */
.footer-seo-services {
    padding: 36px 0 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-seo-services h3 {
    font-size: 13px;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
}
.footer-seo-services__nav a {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.78);
}
.footer-seo-services__nav a:hover,
.footer-seo-services__nav a:focus {
    color: #ffffff;
}
.footer-seo-services__nav ul {
    gap: 8px 20px;
}

/* T8-6: Growth content modules — one card language: same radius,
   same heading scale, same vertical rhythm. */
.ccs-answer-card,
.ccs-city-depth,
.ccs-repair-launch,
.ccs-local-map,
.ccs-city-service-intent,
.ccs-post-paths {
    border-radius: 14px;
}
.ccs-city-depth h2,
.ccs-repair-launch h2,
.ccs-local-map h2,
.ccs-city-service-intent h2,
.ccs-post-paths h2 {
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.25;
}
.ccs-answer-card__actions a,
.ccs-city-depth a.ccs-btn,
.ccs-emergency-hub a {
    border-radius: 999px;
}

/* T8-7: Service-area map — desktop height was excessive (813px)
   and the container shows as a dead gray void while the embed
   lazy-loads. Brand-tinted surface + sane height. */
.fx-accordion--service-location__map {
    background: linear-gradient(160deg, #0b1b3f 0%, #123764 70%, #1c5288 100%);
    border-radius: 16px;
}
@media (min-width: 1200px) {
    .fx-accordion--service-location__map {
        min-height: 540px !important;
        height: 540px;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .fx-accordion--service-location__map {
        min-height: 380px !important;
    }
}

/* T8-8: Tablet hero (768–1199px) — owner screenshot at ~780px
   showed a large empty navy region. Tighten vertical padding and
   keep the hero media visible at tablet widths. */
@media (min-width: 768px) and (max-width: 1199px) {
    .masthead .js-animated-content {
        padding-top: clamp(24px, 4vw, 40px);
        padding-bottom: clamp(24px, 4vw, 40px);
    }
    .masthead .hidden-md-down.masthead__image,
    .masthead__image {
        display: block;
    }
}

/* T8-10: City links list — kill stray theme bullets/markers. */
.footer-seo-services__nav ul {
    list-style: none;
    padding-left: 0;
}
.footer-seo-services__nav li {
    list-style: none;
}
.footer-seo-services__nav li::marker {
    content: none;
}
.footer-seo-services__nav li::before {
    content: none !important;
    display: none !important;
}

/* T8-11: The theme footer's 124px top padding stacks under the
   services band into a dead navy void — tighten when adjacent. */
.footer-seo-services + .page-footer,
.footer-seo-services ~ .page-footer {
    padding-top: 48px;
}

/* T8-11b: The services band precedes the footer on every page
   (ccs_before_footer hook) — the sibling selector misses when the
   theme wraps them, so set the trimmed footer padding directly. */
.page-footer {
    padding-top: 48px;
}

/* T8-12: Guides list — match the marker-free city list. */
.ccs-footer-growth-links li::before,
.ccs-growth-links li::before {
    content: none !important;
    display: none !important;
}
.ccs-footer-growth-links li::marker,
.ccs-growth-links li::marker {
    content: none;
}
.ccs-footer-growth-links ul,
.ccs-growth-links ul {
    list-style: none;
    padding-left: 0;
}

/* T8-13: Services band + theme footer use two different navies
   (#0B1B3F vs #021B3F) creating a visible seam — unify. */
.footer-seo-services {
    background: #021B3F;
}

/* ============================================================
   Tier 9 — Phase 2 premium redesign: inner-page hero, floating
   answer card, decision-module cards, testimonial rhythm.
   ============================================================ */

/* T9-1: Inner masthead — replace the teal band + dated wave SVG
   with a confident brand-navy gradient and a clean edge. */
.masthead--innerpage {
    background: linear-gradient(135deg, #042452 0%, #0b1b3f 55%, #11355f 100%);
}
.masthead--innerpage__wave {
    display: none;
}
.masthead--innerpage__bg {
    opacity: 0.5;
}
.masthead--innerpage__wrapper {
    padding: clamp(44px, 6vw, 72px) 0 clamp(56px, 7vw, 88px);
}

/* Editorial left alignment on desktop; centered stays on mobile. */
@media (min-width: 992px) {
    .masthead--innerpage__text.text-center {
        text-align: left;
        max-width: 880px;
    }
    .masthead--innerpage__text .breadcrumbs,
    .masthead--innerpage__text nav {
        justify-content: flex-start;
    }
}
.masthead--innerpage__text h1,
.masthead--innerpage__text .h1 {
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.masthead--innerpage__subtitle {
    opacity: 0.85;
}

/* T9-2: Quick Answer card — float up into the masthead so it reads
   as a designed hero element, not a bolted-on block. */
.masthead--innerpage + * .ccs-answer-card:first-child,
.masthead--innerpage ~ .page-content .ccs-answer-card:first-child,
.ccs-answer-card {
    background: #ffffff;
    border: 1px solid #e3ecf5;
    border-left: 5px solid #ff5f1f;
    box-shadow: 0 22px 48px rgba(4, 36, 82, 0.14);
}
.page-content > .ccs-answer-card:first-child,
.page-content > *:first-child > .ccs-answer-card:first-child {
    margin-top: -44px;
    position: relative;
    z-index: 6;
}
.ccs-answer-card__eyebrow {
    display: inline-block;
    background: #edf7fc;
    color: #0b4f87;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    letter-spacing: 0.08em;
}

/* T9-3: City-depth / decision modules — break the two-column text
   walls into scannable cards. */
.ccs-city-depth {
    background: #ffffff;
    border: 1px solid #e3ecf5;
}
.ccs-city-depth__grid {
    gap: 18px;
}
.ccs-city-depth__grid > div {
    background: #f8fafd;
    border: 1px solid #e9f0f8;
    border-radius: 12px;
    padding: 18px 20px;
}
.ccs-city-depth__grid > div h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5a6c82;
    margin-bottom: 10px;
}
.ccs-city-depth__grid li {
    line-height: 1.55;
}

/* T9-4: Testimonial cards — equal heights and consistent star row
   below desktop (desktop handled in Tier 7). */
@media (max-width: 1199px) {
    .testimonial-card,
    .testimonial-cards .slick-slide > div {
        height: 100%;
    }
    .testimonial-card {
        display: flex;
        flex-direction: column;
        border-radius: 14px;
    }
    .testimonial-card .testimonial-card__quote,
    .testimonial-card p {
        flex: 1 1 auto;
    }
}

/* T9-5: Section rhythm — consistent breathing room for injected
   growth modules sitewide. */
.ccs-city-depth,
.ccs-repair-launch,
.ccs-local-map,
.ccs-city-service-intent,
.ccs-post-paths,
.ccs-growth-faq {
    margin-top: clamp(36px, 5vw, 56px);
    margin-bottom: clamp(36px, 5vw, 56px);
}

/* T9-6: Homepage services section — the image column wrapped under
   the accordion at desktop (stray margin tipped the flex line), so
   the left half of the section sat empty. Lock the two columns. */
@media (min-width: 1200px) {
    .half-image-half-accordian-links__wrapper {
        flex-wrap: nowrap;
        align-items: flex-start;
    }
    .half-image-half-accordian-links__content,
    .half-image-half-accordian-links__image {
        width: calc(50% - 16px);
        max-width: none;
        margin: 0;
        flex: 0 0 calc(50% - 16px);
    }
}

/* ============================================================
   Tier 10 — Blog single polish: TOC card, share row, tables,
   meta eyebrow. These are the highest-traffic pages (cost guides).
   ============================================================ */

/* T10-1: Table of contents — flat 14-link bullet wall becomes a
   designed two-column card. */
.toc-container {
    background: #f7fafd;
    border: 1px solid #e3ecf5;
    border-left: 4px solid #209ad6;
    border-radius: 14px;
    padding: 22px 26px;
    margin: 22px 0 34px;
}
.toc-container h2,
.toc-container h3,
.toc-container .toc-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5a6c82;
    margin: 0 0 12px;
}
.toc-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 768px) {
    .toc-container ul {
        columns: 2;
        column-gap: 36px;
    }
}
@media (min-width: 1025px) {
    .toc-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 40px;
    }

    .toc-container h2,
    .toc-container h3,
    .toc-container .toc-title {
        grid-column: 1 / -1;
    }

    .toc-container ul {
        columns: auto;
    }
}
.toc-container li {
    break-inside: avoid;
    margin: 0;
    padding: 5px 0;
}
.toc-container li::before {
    content: none !important;
}
.toc-container a {
    color: #0b4f87;
    font-size: 14.5px;
    line-height: 1.45;
    text-decoration: none;
}
.toc-container a:hover {
    color: #ff5f1f;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* T10-2: Share row — pale gray ghosts become tactile brand chips. */
.social-share-row .social-share-row__item a,
.social-share-row .resp-sharing-button__link {
    opacity: 1;
}
.social-share-row__item svg,
.social-share-row__item img {
    filter: none;
}
.social-share-row.social-share-row-grey a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #edf7fc;
    transition: background 0.2s ease, transform 0.15s ease;
}
.social-share-row.social-share-row-grey a:hover {
    background: #d9eefb;
    transform: translateY(-1px);
}

/* T10-3: Article tables (cost/SEER2 guides) — designed data tables
   that photograph well in snippets. */
.single-post article table,
.single article table,
body.single table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e3ecf5;
    border-radius: 12px;
    overflow: hidden;
    margin: 26px 0;
    font-size: 15px;
}
body.single table thead th,
body.single table tr:first-child th {
    background: #0b1b3f;
    color: #ffffff;
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
body.single table td {
    padding: 11px 16px;
    border-top: 1px solid #edf2f8;
    color: #26384f;
}
body.single table tbody tr:nth-child(even) td {
    background: #f8fafd;
}
@media (max-width: 600px) {
    body.single table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* T10-4: Post meta line — quiet uppercase eyebrow. */
body.single .post-meta,
body.single .entry-meta {
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #7b8aa0;
}

/* ============================================================
   Tier 11 — Homepage hero typography + lazyload polish.
   ============================================================ */

/* T11-1: Remove the offset outline duplicate behind the hero H1
   (same dated double-print family as the promo banner). */
.hero-text__outline {
    display: none !important;
}

/* T11-2: Hero type refinement — confident scale and rhythm. */
.masthead--homepage .masthead__text .sub-heading {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.92;
}
.masthead--homepage .masthead__text > span {
    letter-spacing: -0.015em;
    text-wrap: balance;
    line-height: 1.08;
}
.masthead--homepage .hero-text h1 {
    letter-spacing: 0.02em;
    line-height: 1.25;
}

/* T11-3: Lazyloaded images fade in instead of popping over gray
   placeholder boxes. */
img.lazyload,
img.lazyloading {
    opacity: 0.001;
}
img.lazyloaded {
    opacity: 1;
    transition: opacity 0.35s ease;
}
.half-image-half-accordian-image {
    background: #eef4fa;
}

/* ============================================================
   Tier 12 — Redesign completion pass.
   ============================================================ */

/* T12-1: Third outline-watermark instance (floating CTA bar). */
.floating-cta__since-year {
    display: none !important;
}

/* T12-2: Slide-up animation items (services tiles, Comfort Club
   imagery) had no safe-reveal fallback — sections rendered with
   empty halves for crawlers, screenshots, and any visitor whose
   scroll triggers never fire. Force-reveal after the same 4s
   grace period the rest of the fallback system uses. */
@media (min-width: 1200px) {
    body:not(.turn-off-sparkle) .js-slide-up-animation-item,
    body:not(.turn-off-sparkle) .js-slide-up-animation > * {
        animation: ccs-fallback-reveal 0.4s ease 4s forwards;
    }
}

/* T12-3: Book Now buttons — the icon was absolutely pinned to the
   left edge and optically off-center. Flex-center icon + label as
   one unit. */
.btn-icon,
.btn.btn-icon,
.btn-primary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
.btn-icon:has(i) {
    padding-left: 28px;
}
.btn-primary-icon {
    padding-left: 28px;
}
.btn-icon i,
.btn-primary-icon i {
    position: static;
    transform: none;
    font-size: 19px;
    line-height: 1;
}

/* T12-4: Any image lazysizes never processes must still reveal
   (footer logo regression guard) — same fallback-reveal pattern. */
img.lazyload {
    animation: ccs-fallback-reveal 0.3s ease 2.5s forwards;
}

/* T12-5: Footer logo — white treatment for contrast on the navy
   footer (the color logo's navy text vanished against it). */
.page-footer .footer-logo__img {
    background: #ffffff;
    padding: 10px 16px;
    border-radius: 10px;
    max-width: 280px;
    height: auto;
}

/* T12-6: Blog share row — last chip clipped past the right edge on
   small screens; let chips wrap with tighter gaps. */
.social-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
}
.social-share-row .social-share-row__item {
    margin: 0;
}
@media (max-width: 420px) {
    .social-share-row.social-share-row-grey a {
        width: 34px;
        height: 34px;
    }
}

/* T12-7: Testimonial cards — short quotes left a tall dead zone in
   fixed-height cards; size to content with a sane minimum. */
.testimonial-card,
.testimonial-card-item .testimonial-card {
    height: auto;
    min-height: 220px;
}
.testimonial-card .testimonial-card__details {
    flex: 0 1 auto;
}

/* ============================================================
   TIER 13 — Resource-hub consolidation & long-list balancing
   Service pages stacked three near-identical link banks whose
   32-item guide columns ran far past their siblings, leaving
   deep white voids (worst on /plumbing/drain-cleaning/). PHP
   now suppresses the duplicate pre-footer bank; these rules
   turn the remaining lists into balanced, scannable hubs.
   ============================================================ */

/* T13-1: In-content resource hub — let the two short link groups
   share a row and flow the long guides list across three columns
   so every column bottoms out together. */
@media (min-width: 768px) {
    .ccs-growth-links__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ccs-growth-links__grid > :nth-child(3) {
        grid-column: 1 / -1;
        border-top: 1px solid #e3ecf5;
        padding-top: 18px;
    }
    .ccs-growth-links__grid > :nth-child(3) ul {
        display: block;
        columns: 3;
        column-gap: 32px;
    }
    .ccs-growth-links__grid > :nth-child(3) li {
        break-inside: avoid;
        padding-top: 3px;
        padding-bottom: 3px;
    }

    .ccs-footer-growth-links__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ccs-footer-growth-links__grid > :nth-child(3) {
        grid-column: 1 / -1;
        border-top: 2px solid #e3ecf5;
        padding-top: 16px;
    }
    .ccs-footer-growth-links__grid > :nth-child(3) ul {
        display: block;
        columns: 3;
        column-gap: 32px;
    }
    .ccs-footer-growth-links__grid > :nth-child(3) li {
        break-inside: avoid;
    }
    .ccs-footer-growth-links__grid > :nth-child(3) a {
        min-height: 30px;
    }
}

/* T13-2: Resource hub speaks the site card language — token radius
   and the soft navy shadow instead of a thin gray outline. */
.ccs-growth-links {
    border: 1px solid #e3ecf5;
    border-radius: 15px;
    box-shadow: 0 16px 42px rgba(11, 27, 63, 0.08);
}

/* T13-3: Long guide-link stacks inside intent/city sections (the
   18-row "Helpful plumbing paths" column) — two balanced columns
   on desktop instead of one deep stack beside a short sibling. */
@media (min-width: 768px) {
    .ccs-city-depth__grid ul.ccs-virtual-guide__links,
    .ccs-city-service-intent ul.ccs-virtual-guide__links {
        display: block;
        columns: 2;
        column-gap: 28px;
    }
    .ccs-city-depth__grid ul.ccs-virtual-guide__links li,
    .ccs-city-service-intent ul.ccs-virtual-guide__links li {
        break-inside: avoid;
        margin-top: 0;
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

/* T13-4: Icon benefit cards (Comfort Club savings etc.) — swap the
   harsh gray drop shadow for the token navy shadow and put titles
   in brand navy. */
.icons-button {
    box-shadow: 0 16px 42px rgba(11, 27, 63, 0.08);
}
.icons-button__title {
    color: #0b1b3f !important;
}

/* T13-5: Office NAP attribution — a quiet contained card instead of
   a flat gray full-width band. */
.ccs-seo-nap {
    background: #f5f9fd;
    border-top: 0;
}
.ccs-seo-nap .ccs-seo-nap-grid {
    background: #fff;
    border: 1px solid #e3ecf5;
    border-left: 4px solid #209ad6;
    border-radius: 12px;
    max-width: 560px;
    padding: 22px 26px;
}

/* ============================================================
   TIER 14 — Mobile page-weight reduction for city pages
   Boynton Beach ran 27,600px tall at 390w; the bulk was open
   30-item link lists and full-width-stacked service cards.
   Link groups are now <details> folds (open on desktop, JS
   closes them on phones), long in-section lists scroll within
   a capped window, and service cards go 2-up.
   ============================================================ */

/* T14-1: Linkfold groups — invisible chrome on desktop (always
   open, no marker, no pointer), tappable accordion rows on phones. */
details.ccs-linkfold > summary {
    list-style: none;
}
details.ccs-linkfold > summary::-webkit-details-marker {
    display: none;
}
details.ccs-linkfold > summary h3 {
    display: inline-block;
    margin: 0 0 10px;
}
@media (min-width: 768px) {
    details.ccs-linkfold > summary {
        pointer-events: none;
        cursor: default;
    }
}
@media (max-width: 767px) {
    details.ccs-linkfold > summary {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 48px;
    }
    details.ccs-linkfold > summary h3 {
        margin: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }
    details.ccs-linkfold > summary::after {
        content: "+";
        flex: 0 0 auto;
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: #edf7fc;
        color: #0b1b3f;
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
    }
    details.ccs-linkfold[open] > summary::after {
        content: "\2212";
        background: #ff5f1f;
        color: #fff;
    }
    details.ccs-linkfold[open] > summary {
        margin-bottom: 6px;
    }
    /* The growth-module mobile card rule gives each group a padded
       card; keep the closed state compact. */
    .ccs-growth-links__grid > details.ccs-linkfold,
    .ccs-footer-growth-links__grid > details.ccs-linkfold {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

/* T14-2: Long link lists inside city intent sections — on phones,
   cap to a scrollable window (~7 rows) with an edge fade so the
   page doesn't carry the full stack. */
@media (max-width: 767px) {
    .ccs-city-depth__grid ul.ccs-virtual-guide__links,
    .ccs-city-service-intent ul.ccs-virtual-guide__links {
        max-height: 330px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-right: 8px;
        border-bottom: 1px solid #e3ecf5;
        mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
    }
}

/* T14-3: "Complete Home Services" image cards — 2-up grid on phones
   instead of six full-width stacked tiles. */
@media (max-width: 575px) {
    .image-buttons .image-button-flex {
        display: flex;
        flex-wrap: wrap;
    }
    .image-buttons .image-button-item {
        width: 50%;
        flex: 0 0 50%;
    }
    .image-buttons .image-button__title {
        font-size: 15px;
        line-height: 1.3;
    }
}

/* T14-4: Long local-intent prose modules — on phones, preview the
   first ~560px with a fade and a Show more expander (full content
   stays in the DOM; only presentation folds). */
@media (max-width: 767px) {
    .ccs-foldable:not(.ccs-expanded) {
        position: relative;
        max-height: 560px;
        overflow: hidden;
    }
    .ccs-city-depth.ccs-foldable:not(.ccs-expanded)::after,
    .ccs-city-service-intent.ccs-foldable:not(.ccs-expanded)::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 130px;
        pointer-events: none;
    }
    .ccs-city-depth.ccs-foldable:not(.ccs-expanded)::after {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 85%);
    }
    .ccs-city-service-intent.ccs-foldable:not(.ccs-expanded)::after {
        background: linear-gradient(to bottom, rgba(247, 251, 255, 0), #f7fbff 85%);
    }
    .ccs-readmore {
        display: block;
        margin: -14px auto 26px;
        min-height: 44px;
        padding: 10px 26px;
        border: 2px solid var(--primary-aa, #CC4A10);
        border-radius: 999px;
        background: #fff;
        color: var(--primary-aa, #CC4A10);
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
    }
    .ccs-readmore[aria-expanded="true"] {
        background: var(--primary-aa, #CC4A10);
        color: #fff;
    }
}
@media (min-width: 768px) {
    .ccs-readmore {
        display: none;
    }
}

/* ============================================================
   TIER 15 — Blog long-form typography
   Blog guides carry nearly all organic clicks; the body type was
   theme-default (small, wide measure, cramped rhythm). Editorial
   reading experience: comfortable measure, generous leading,
   clear heading hierarchy, designed callouts.
   ============================================================ */

body.single-post .blog-single-container p,
body.single .blog-single-container p,
body.single-post article .wysiwyg li,
body.single article .wysiwyg li {
    font-size: 17px;
    line-height: 1.75;
    color: #2a3b52;
}

body.single .blog-single-container p {
    margin-bottom: 1.35em;
}

/* Measure: cap text line length for readability on wide screens. */
@media (min-width: 1200px) {
    body.single .blog-single-container .col-md-12 > p,
    body.single .blog-single-container .col-md-12 > ul,
    body.single .blog-single-container .col-md-12 > ol,
    body.single .blog-single-container .col-md-12 > h2,
    body.single .blog-single-container .col-md-12 > h3 {
        max-width: 760px;
    }
}

/* Heading rhythm: clear scale steps and breathing room above. */
body.single .blog-single-container h2 {
    font-size: clamp(24px, 2.4vw, 30px);
    line-height: 1.25;
    color: #0b1b3f;
    margin: 1.9em 0 0.6em;
}
body.single .blog-single-container h3 {
    font-size: clamp(19px, 1.8vw, 22px);
    line-height: 1.3;
    color: #0b1b3f;
    margin: 1.6em 0 0.5em;
}
body.single .blog-single-container .ccs-blog-cta h3 {
    color: #ffffff;
    margin: 0 0 12px;
}
body.single .blog-single-container .ccs-blog-cta p {
    color: rgba(255, 255, 255, 0.92);
}
body.single .blog-single-container .ccs-blog-cta p a:not(.btn) {
    color: #ffffff;
    text-decoration-color: rgba(255, 255, 255, 0.75);
}
body.single .blog-single-container .ccs-blog-cta p a:not(.btn):hover {
    color: #ffffff;
    text-decoration-color: #ffffff;
}
body.single .blog-single-container .ccs-blog-cta__button--primary {
    background: var(--primary-aa, #CC4A10);
    color: #ffffff;
}

/* In-article links: visible, brand, comfortable tap. */
body.single .blog-single-container p a:not(.btn),
body.single .blog-single-container li a:not(.btn) {
    color: #0b4f87;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #b8d7ef;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
body.single .blog-single-container p a:not(.btn):hover,
body.single .blog-single-container li a:not(.btn):hover {
    color: #ff5f1f;
    text-decoration-color: #ff5f1f;
}

/* Blockquotes → navy-edge pull quotes instead of theme gray. */
body.single .blog-single-container blockquote {
    margin: 28px 0;
    padding: 18px 24px;
    background: #f5f9fd;
    border-left: 4px solid #209ad6;
    border-radius: 0 12px 12px 0;
    font-size: 17px;
    line-height: 1.7;
    color: #1d3354;
}
body.single .blog-single-container blockquote p:last-child {
    margin-bottom: 0;
}

/* List rhythm: roomy, marker in brand orange. */
body.single .blog-single-container ul:not([class]) li,
body.single .blog-single-container ol:not([class]) li {
    margin-bottom: 0.55em;
}
body.single .blog-single-container ul:not([class]) li::marker {
    color: #ff5f1f;
}
body.single .blog-single-container ol:not([class]) li::marker {
    color: #ff5f1f;
    font-weight: 700;
}

/* In-article images: soften with the token radius. */
body.single .blog-single-container img {
    border-radius: 12px;
}

@media (max-width: 767px) {
    body.single-post .blog-single-container p,
    body.single .blog-single-container p,
    body.single .blog-single-container li {
        font-size: 16px;
        line-height: 1.7;
    }
}

/* Keep editorial review metadata on the same content grid as the page. */
.ccs-review-meta {
    clear: both;
    margin-top: clamp(32px, 5vw, 56px);
    border-top: 1px solid oklch(89% 0.018 245);
    color: oklch(39% 0.025 250);
}

.ccs-review-meta__inner {
    display: flex;
    width: 100%;
    max-width: var(--container-max-width, 1390px);
    margin: 0 auto;
    padding: 16px 22px 0;
    gap: 8px 24px;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.ccs-review-meta p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
}

.ccs-review-meta__updated {
    font-style: italic;
}

.ccs-review-meta__byline {
    color: oklch(31% 0.035 250);
    font-weight: 700;
}

@media (min-width: 768px) {
    .ccs-review-meta__inner {
        padding-right: 52px;
        padding-left: 52px;
    }
}

@media (min-width: 1025px) {
    .ccs-review-meta__inner {
        padding-right: 63px;
        padding-left: 63px;
    }
}

/* Homepage image composition repairs. These classes are emitted by the shared
   image/text block, whose original component stylesheet is not in the delayed
   homepage bundle. Keep the badge and pattern inside an intentional frame. */
.home .home-image-text .image-text__img {
    position: relative;
    z-index: 1;
    padding: 0 0 32px;
}

.home .home-image-text .image-text__img > img:first-child {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: 50% 42%;
}

.home .home-image-text .image-text__img__sml {
    position: absolute;
    z-index: 3;
    right: 14px;
    bottom: 0;
    width: clamp(92px, 26vw, 118px);
    height: auto;
    filter: drop-shadow(0 10px 16px oklch(14% 0.06 250 / 0.20));
}

.home .home-image-text .image-text__pattern {
    display: none;
    position: absolute;
    z-index: -1;
    width: min(390px, 34vw);
    height: auto;
    pointer-events: none;
}

@media (min-width: 768px) {
    .home .home-image-text .image-text__img {
        padding: 0 58px 52px 0;
    }

    .home .home-image-text .image-text__img__sml {
        right: 4px;
        width: 150px;
    }
}

@media (min-width: 1025px) {
    .home .home-image-text .image-text__img {
        padding: 0 0 46px;
        margin-right: 40px;
    }

    .home .home-image-text .image-text__img__sml {
        right: auto;
        bottom: 0;
        left: clamp(18px, 2.5vw, 42px);
        width: clamp(126px, 9vw, 150px);
    }

    .home .home-image-text .image-text__pattern {
        display: block;
        top: auto;
        right: auto;
        bottom: -72px;
        left: -132px;
        opacity: 0.72;
    }
}

/* The source mascot is 3000px wide. A previous height override allowed its
   intrinsic size to win after the delayed homepage stylesheet loaded. */
@media (min-width: 1200px) {
    .home .floating-cta .floating-cta__man {
        right: clamp(-30px, -1.5vw, -16px);
        left: auto;
        width: min(54%, 695px);
        max-width: 695px;
        height: auto;
        aspect-ratio: 695 / 529;
        object-fit: contain;
    }
}
.ccs-book-shell iframe{transition:opacity .25s ease}
@keyframes ccsShimmer{to{background-position:-200% 0}}
/* Wave 1.3 — AA contrast on inner templates (text-bearing only). */
.social-share-row-grey .social-share-row__item {
    color: #595959;
}
.social-share-row-grey .resp-sharing-button__icon--solid {
    fill: #595959;
}
.blog-post__bottom {
    background: #1878AB;
    color: #ffffff;
}
.ccs-answer-block a,
.ccs-link-mesh a,
.ccs-seo-content a:not(.ccs-seo-city-link):not(.ccs-related-service-link) {
    color: var(--primary-aa, #CC4A10);
}
.ccs-captain__cta {
    background: var(--primary-aa, #CC4A10);
    color: #ffffff;
}
.ccs-captain__cta span {
    color: #ffffff;
}
.ccs-local-map__eyebrow {
    color: var(--primary-aa, #CC4A10);
}

/* Wave 1.3 residuals: kicker blue must clear 4.5:1 on frost (#EDF7FC) too —
   --secondary-aa (#1878AB) is 4.49:1 there at 16px/700. #14618F is 6:1+ on
   frost and white alike. */
.sub-heading,
.sub-heading p {
    color: #14618F;
}
/* answer-block links inside text blocks need a non-color affordance */
.ccs-answer-block p a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* City a11y residuals (Lighthouse 2026-08-12): dark-surface kicker tint,
   NAP link depth, in-text link affordance. */
.testimonial-card-left .sub-heading{color:#8FD0F5}
.ccs-seo-nap-location address a{color:#B8410E}
.ccs-city-depth p a{text-decoration:underline;text-underline-offset:2px}

/* T6 (2026-08-13): the directory's per-city "AC repair" link wraps as one
   unit — never "AC" orphaned from "repair" at narrow column widths. */
.accordian-location-links__combo,
.accordian-location-links__combo a {
    white-space: nowrap;
}

.accordian-location-links__combo {
    flex-shrink: 0;
}

/* Blog-index cluster cards: block-level links inside list items detach
   the native disc marker onto an empty first line, so a dot floats over
   each link's ascenders. The links carry the affordance; no markers. */
.ccs-post-paths__card ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}