/*
 * Modern refresh layer. Loaded after main.css (and home-quote.css /
 * book-move.css) on every page, so it only restyles: no layout or content
 * changes. Delete the <link> to modern.css to go back to the old look.
 *
 * Type: Plus Jakarta Sans (headings, nav, buttons) + Inter (body).
 */

:root {
    --hl-brand: #ff6f00;
    --hl-brand-dark: #e85d00;
    --hl-brand-soft: #fff1e4;
    --hl-grad: linear-gradient(135deg, #ff6a00 0%, #ff8a00 55%, #ffa726 100%);
    --hl-ink: #0b1324;
    --hl-text: #1f2a3d;
    --hl-muted: #526077;
    --hl-line: #e5e8ef;
    --hl-soft: #fff7ef;
    --hl-sky: #eef7ff;
    --hl-radius: 14px;
    --hl-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .08);
    --hl-shadow-lg: 0 2px 4px rgba(16, 24, 40, .06), 0 18px 40px rgba(16, 24, 40, .14);
    --hl-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --hl-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ------------------------------------------------------------------ type */

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--hl-body);
    color: var(--hl-text);
}

/* main.css sets a condensed font on almost every element; replace it
   everywhere except icon fonts. */
/* :where() keeps this rule's specificity at zero, so the heading rule below
   (and any later font rule) still wins. */
body :where(*:not(.fa, .fas, .far, .fab, .glyphicon)) {
    font-family: var(--hl-body) !important;
}

h1, h2, h3, h4, h5, h6,
.navbar-default .navbar-nav > li > a,
.button, a.button, button, input[type="submit"],
.hq-submit, .hq-badge, .q-links, .review-ticker-stars,
.topmast a {
    font-family: var(--hl-display) !important;
}

h1, h2, h3, h4 {
    letter-spacing: -0.02em;
    text-wrap: balance;
}

p, li, dd, td, blockquote p {
    font-weight: 400 !important;
}

/* ------------------------------------------------------------ top + nav */

.topmast a {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
}

.mast,
header .mast {
    box-shadow: 0 1px 0 var(--hl-line), 0 6px 18px rgba(16, 24, 40, .05);
}

.navbar-default .navbar-nav > li > a {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: var(--hl-ink) !important;
    letter-spacing: -0.005em;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a {
    color: var(--hl-brand) !important;
}

/* Narrow desktops: the bolder face needs a little less padding to stay on
   one row. */
@media (min-width: 768px) and (max-width: 1365px) {
    .navbar-default .navbar-nav > li > a {
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 14px !important;
    }

    /* Pages with a ninth menu item (the booking page adds "Get Estimate"). */
    .navbar-default .navbar-nav:has(> li:nth-child(9)) > li > a {
        padding-left: 7px !important;
        padding-right: 7px !important;
        font-size: 13.5px !important;
    }
}

.navbar-default .navbar-nav .dropdown-menu {
    border: 1px solid var(--hl-line);
    border-radius: 12px;
    box-shadow: var(--hl-shadow-lg);
    padding: 6px;
}

.navbar-default .navbar-nav .dropdown-menu > li > a {
    border-radius: 8px;
    font-weight: 500;
    color: var(--hl-ink);
}

/* --------------------------------------------------------------- buttons */

a.button, .button, .hub-hero-cta .button, .hub-mid-cta .button,
.go2, .go3, .hq-submit, .book-btn {
    border: 0;
    border-radius: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
    text-transform: none !important;
    box-shadow: 0 6px 16px rgba(255, 119, 0, .28);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

a.button, .button {
    display: inline-block;
    padding: 14px 28px !important;
    background: var(--hl-brand) !important;
    color: #fff !important;
    text-decoration: none !important;
}

a.button:hover, .button:hover, .go2:hover, .go3:hover, .hq-submit:hover, .book-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(255, 119, 0, .34);
    background-color: var(--hl-brand-dark) !important;
}

.go3 {
    background: var(--hl-ink) !important;
    box-shadow: 0 6px 16px rgba(16, 24, 40, .22);
}

/* -------------------------------------------------------------- heroes */

/* Homepage carousel caption and service-page hero boxes: dark glass card
   with white type instead of washed-out white with thin orange. */
#myCarousel .carousel-inner .item,
.residential-banner .item,
.commercial-banner .item,
.specialty-banner .item {
    background: rgba(15, 23, 42, .74) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 16px 0 0 16px !important;
    padding: 22px 28px !important;
    height: auto !important;
    box-shadow: var(--hl-shadow-lg);
}

#myCarousel .carousel-inner .item h1,
#myCarousel .carousel-inner .item h2,
.residential-banner .item h1,
.commercial-banner .item h1,
.specialty-banner .item h1 {
    font-size: clamp(30px, 3.4vw, 46px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: #fff !important;
    text-transform: none !important;
    margin: 6px 0 12px !important;
}

#myCarousel .carousel-inner .item p,
.residential-banner .item p,
.commercial-banner .item p,
.specialty-banner .item p {
    font-size: clamp(16px, 1.35vw, 19px) !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, .88) !important;
    font-weight: 500 !important;
}

/* The homepage caption shares the hero with the estimate form. */
#myCarousel .carousel-inner .item h1,
#myCarousel .carousel-inner .item h2 {
    font-size: clamp(26px, 2.5vw, 36px) !important;
}

#myCarousel .carousel-inner .item p:last-child,
.residential-banner .item p:last-child,
.commercial-banner .item p:last-child,
.specialty-banner .item p:last-child {
    color: #ffb46b !important;
}

.hub-banner .item {
    border-radius: 16px;
}

.hub-banner .item h1 {
    font-weight: 800 !important;
    letter-spacing: -0.025em;
    text-transform: none !important;
    line-height: 1.1 !important;
}

.hub-banner .item p {
    font-weight: 500 !important;
    line-height: 1.55 !important;
}

/* --------------------------------------------------------- home sections */

.contrast {
    background: var(--hl-soft) !important;
}

.intro .col-sm-3 {
    padding-top: 8px;
    padding-bottom: 8px;
}

.intro h2, .intro h3 {
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    color: var(--hl-ink) !important;
    margin-bottom: 10px !important;
}

.intro p, .intro2 p, .about p, .qualities p, .services p, .overlay p, .overlay2 p {
    color: var(--hl-text) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

.about h3,
.qualities .col-sm-3 h2, .qualities .col-sm-4 h2,
.intro2 h2,
.overlay h2, .overlay2 h2 {
    font-size: clamp(26px, 2.4vw, 34px) !important;
    font-weight: 800 !important;
    color: var(--hl-ink) !important;
    text-transform: none !important;
    line-height: 1.2 !important;
}

/* Thin orange rule above section headings as the brand accent. */
.about h3::before,
.intro2 h2::before,
.overlay h2::before, .overlay2 h2::before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin-bottom: 14px;
    border-radius: 4px;
    background: var(--hl-brand);
}

.overlay h2::before, .overlay2 h2::before, .intro2 h2::before {
    margin-left: auto;
    margin-right: auto;
}

.overlay hr {
    display: none;
}

.overlay, .overlay2 {
    background: rgba(255, 255, 255, .94) !important;
}

.services {
    background: var(--hl-soft) !important;
    padding-bottom: 40px;
}

.services h2 {
    font-size: 21px !important;
    font-weight: 800 !important;
    color: var(--hl-ink) !important;
    margin: 16px 0 8px !important;
}

.services img {
    border-radius: var(--hl-radius);
    box-shadow: var(--hl-shadow);
}

.services .col-sm-12 > p:first-child {
    font-weight: 800 !important;
    color: var(--hl-ink) !important;
}

.services .col-sm-12 p {
    color: var(--hl-text) !important;
    font-weight: 500 !important;
}

/* ------------------------------------------------------------ hub pages */

.hub-content p, .hub-content li, .hub-content dd {
    color: var(--hl-text) !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
}

.hub-content h2 {
    font-size: clamp(24px, 2.2vw, 30px) !important;
    font-weight: 800 !important;
    color: var(--hl-ink) !important;
    margin-top: 40px !important;
}

.hub-content dt {
    font-family: var(--hl-display) !important;
    font-weight: 700;
    color: var(--hl-ink);
    font-size: 17px;
    margin-top: 18px;
}

.hub-content a {
    color: var(--hl-brand-dark) !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.hub-content a.button {
    color: #fff !important;
}

.hub-trust li strong, .hub-services li strong {
    color: var(--hl-ink);
}

.hub-guides {
    background: var(--hl-brand-soft);
    border-radius: 12px;
    padding: 14px 18px;
}

.small-move-prices {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--hl-shadow);
}

.small-move-prices th {
    background: var(--hl-ink);
    color: #fff !important;
    font-family: var(--hl-display) !important;
    font-weight: 700;
}

/* -------------------------------------------------------- reviews/cards */

.review-card, .blog-card {
    border: 1px solid var(--hl-line) !important;
    border-radius: var(--hl-radius) !important;
    box-shadow: var(--hl-shadow) !important;
    background: #fff;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.blog-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--hl-shadow-lg) !important;
}

.review-card h3, .blog-card h2, .blog-card h2 a {
    font-weight: 800 !important;
    color: var(--hl-ink) !important;
    letter-spacing: -0.015em;
}

.review-card p, .blog-card p {
    color: var(--hl-text) !important;
    line-height: 1.65 !important;
}

.blog-card .read-more {
    font-family: var(--hl-display) !important;
    font-weight: 700;
    color: var(--hl-brand-dark) !important;
}

.review-ticker {
    font-weight: 500;
}

/* ------------------------------------------------------------- articles */

.article-wrap {
    max-width: 780px !important;
}

.article-wrap h1 {
    font-size: clamp(32px, 3.6vw, 46px) !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    color: var(--hl-ink) !important;
    text-transform: none !important;
}

.article-wrap h2 {
    font-size: clamp(24px, 2.3vw, 30px) !important;
    font-weight: 800 !important;
    color: var(--hl-ink) !important;
    margin-top: 40px !important;
    line-height: 1.25 !important;
}

.article-wrap h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--hl-ink) !important;
}

.article-wrap p, .article-wrap li {
    font-size: 18px !important;
    line-height: 1.75 !important;
    color: var(--hl-text) !important;
}

.article-wrap a {
    color: var(--hl-brand-dark);
    text-underline-offset: 2px;
}

.article-meta {
    color: var(--hl-muted) !important;
    font-size: 15px !important;
}

.article-cta {
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--hl-ink) !important;
    padding: 24px 28px !important;
    box-shadow: var(--hl-shadow-lg);
}

.article-cta p, .article-cta strong {
    color: #fff !important;
}

.article-cta a {
    color: #ffb46b !important;
    font-weight: 700;
}

/* The booking link is the main action, so it gets a real button. */
.article-cta a[href="/#estimate"] {
    display: inline-block;
    margin: 6px 6px 6px 0;
    padding: 11px 20px;
    border-radius: 10px;
    background: var(--hl-brand);
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(255, 119, 0, .35);
}

.article-wrap blockquote {
    border-left: 4px solid var(--hl-brand);
    background: var(--hl-soft);
    border-radius: 0 12px 12px 0;
    padding: 18px 22px;
    margin: 18px 0;
}

.article-wrap blockquote p {
    font-size: 17px !important;
    color: var(--hl-ink) !important;
    margin: 0 0 8px;
}

.article-wrap blockquote footer {
    color: var(--hl-muted);
    font-size: 14px;
    font-weight: 600;
}

.article-tags span {
    border-radius: 999px !important;
    font-weight: 500;
}

/* --------------------------------------------------------------- footer */

.footer {
    background: var(--hl-ink) !important;
    border-top: 4px solid var(--hl-brand);
}

.footer .inner {
    border-bottom-color: rgba(255, 255, 255, .14) !important;
}

.footer p, .footer li, .footer a, .disclaim {
    font-weight: 400 !important;
    color: rgba(255, 255, 255, .78) !important;
}

.footer a:hover {
    color: #ffb46b !important;
}

.q-links {
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: .1em;
    color: #fff !important;
}

.footer form {
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .04);
}

.footer input, .footer textarea {
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
    padding: 10px 12px !important;
}

.footer input::placeholder, .footer textarea::placeholder {
    color: rgba(255, 255, 255, .55);
}

.footer .go2 {
    background: var(--hl-brand) !important;
    color: #fff !important;
    border: 0 !important;
    padding: 12px 24px !important;
}

/* The logo has black lettering, so give it a light tile on the dark footer. */
.footer .logo1 {
    background: #fff;
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}

.disclaim {
    color: rgba(255, 255, 255, .6) !important;
    font-size: 13.5px !important;
}

/* ---------------------------------------------------------------- forms */

.hero-quote-card {
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28) !important;
}

.hq-step h3 {
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

.hq-field label, .hq-label-block {
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.hq-field > input, .hq-field > select,
.form-left input, .form-left textarea {
    border-radius: 10px !important;
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 767px) {
    /* Inter is wider than the old condensed face; keep phone + hours on one line. */
    .topmast a {
        font-size: 12px !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap;
    }

    #myCarousel .carousel-inner .item,
    .residential-banner .item,
    .commercial-banner .item,
    .specialty-banner .item {
        border-radius: 14px !important;
        padding: 16px 18px !important;
    }

    .article-wrap p, .article-wrap li {
        font-size: 17px !important;
    }

    .hub-content p, .hub-content li, .hub-content dd {
        font-size: 16.5px !important;
    }

    /* Centered paragraphs and bullet lists read ragged on a phone. */
    .hub-content, .hub-content p, .hub-content li, .hub-content dt, .hub-content dd,
    .hub-content h2, .hub-content h3 {
        text-align: left !important;
    }

    .hub-content ul, .hub-content ol {
        padding-left: 22px;
    }

    .navbar-default .navbar-nav > li > a {
        font-size: 16px !important;
    }
}

/* ------------------------------------------------- crisp + bright pass */

/* Brighter brand surfaces: gradient top bar, buttons and accents. */
.mast-wrap, .topmast {
    background: var(--hl-grad) !important;
}

a.button, .button, .go2, .hq-submit, .book-btn,
.article-cta a[href="/#estimate"] {
    background: var(--hl-grad) !important;
    color: #fff !important;
}

a.button:hover, .button:hover, .go2:hover, .hq-submit:hover, .book-btn:hover {
    background: linear-gradient(135deg, #f25f00 0%, #ff7a00 55%, #ff9800 100%) !important;
}

.about h3::before,
.intro2 h2::before,
.overlay h2::before, .overlay2 h2::before {
    width: 56px;
    background: var(--hl-grad);
}

/* Section backgrounds: warm cream and fresh sky instead of flat gray. */
.contrast {
    background: linear-gradient(180deg, #fff7ef 0%, #ffffff 100%) !important;
}

.services {
    background: linear-gradient(180deg, var(--hl-sky) 0%, #ffffff 100%) !important;
}

.move-day-section {
    background: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%);
}

/* Crisper text: full-strength ink for headings, near-black body copy, and
   tighter heading tracking. */
h1, h2, h3, h4 {
    color: var(--hl-ink);
}

.intro p, .about p, .services p, .overlay p, .hub-content p, .hub-content li,
.article-wrap p, .article-wrap li, .review-card p, .blog-card p {
    color: var(--hl-text) !important;
}

.hub-content a, .article-wrap a:not(.button) {
    color: var(--hl-brand-dark) !important;
    font-weight: 600;
}

.hub-guides {
    background: linear-gradient(135deg, #fff1e4 0%, #fff8ee 100%);
    border: 1px solid #ffd9b8;
}

.footer {
    border-top: 0 !important;
    box-shadow: inset 0 4px 0 #ff7a00;
}

/* =====================================================================
   Site header (replaces the old Bootstrap navbar on every page)
   Sticky, in the page flow, so nothing needs a "header height" offset.
   ===================================================================== */

/* .main used overflow:hidden, which stops position:sticky. clip still hides
   sideways overflow without creating a scroll container. */
body .main {
    overflow: visible !important;
    overflow-x: clip !important;
}

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

html.sh-lock, html.sh-lock body {
    overflow: hidden;
}

header.site-header,
header.site-header.smaller {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    box-shadow: 0 1px 0 var(--hl-line) !important;
    z-index: 1100 !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: box-shadow .2s ease !important;
}

header.site-header.is-scrolled {
    box-shadow: 0 1px 0 var(--hl-line), 0 10px 30px rgba(11, 19, 36, .10) !important;
}

/* The old layout pushed the first section down to clear a fixed header. */
header.site-header + * {
    margin-top: 0 !important;
}

.sh-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
}

/* --- utility strip */
.sh-util {
    background: var(--hl-ink);
    color: rgba(255, 255, 255, .86);
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
}

.sh-util .sh-wrap {
    height: 36px;
    gap: 28px;
    justify-content: center;
}

.sh-util-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.sh-util-item i {
    color: #ffb46b;
}

.sh-stars {
    color: #ffb400;
    letter-spacing: 1px;
}

/* The strip used to collapse on scroll. That changed the header height,
   which moved the page, which could flip the scroll state back: the page
   shook near the top. The header now keeps one height; only the shadow
   changes. */

/* --- main bar */
.sh-main .sh-wrap {
    height: 76px;
    gap: 20px;
}

.sh-logo {
    flex: none;
    display: block;
    line-height: 0;
}

.sh-logo img {
    width: auto !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sh-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.sh-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sh-menu > li {
    position: relative;
    margin: 0;
    padding: 0;
}

.sh-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--hl-ink) !important;
    font-family: var(--hl-display) !important;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.sh-link i {
    font-size: 11px;
    opacity: .6;
    transition: transform .2s ease;
}

.sh-link:hover, .sh-link:focus-visible,
.sh-has-sub.is-open > .sh-link {
    background: var(--hl-brand-soft);
    color: var(--hl-brand-dark) !important;
    outline: none;
}

.sh-menu > li.is-active > .sh-link {
    color: var(--hl-brand-dark) !important;
}

.sh-menu > li.is-active > .sh-link::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 2px;
    height: 3px;
    border-radius: 3px;
    background: var(--hl-grad);
}

/* --- dropdown panels */
.sh-sub {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    width: 560px;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    background: #fff;
    border: 1px solid var(--hl-line);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(11, 19, 36, .18);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

/* Invisible bridge so the pointer can travel from the button to the panel. */
.sh-sub::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}

.sh-has-sub.is-open > .sh-sub {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.sh-has-sub.is-open > .sh-link i {
    transform: rotate(180deg);
}

@media (hover: hover) and (min-width: 1100px) {
    .sh-has-sub:hover > .sh-sub,
    .sh-has-sub:focus-within > .sh-sub {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }

    .sh-has-sub:hover > .sh-link {
        background: var(--hl-brand-soft);
        color: var(--hl-brand-dark) !important;
    }

    .sh-has-sub:hover > .sh-link i {
        transform: rotate(180deg);
    }
}

.sh-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    color: var(--hl-ink) !important;
    text-decoration: none !important;
    transition: background-color .15s ease;
}

.sh-item:hover, .sh-item:focus-visible {
    background: #fff6ee;
    outline: none;
}

.sh-item.is-current {
    background: var(--hl-brand-soft);
}

.sh-ico {
    flex: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff1e4, #ffe3c7);
    font-size: 20px;
}

.sh-item b {
    display: block;
    font-family: var(--hl-display) !important;
    font-size: 15px;
    font-weight: 800;
    color: var(--hl-ink);
}

.sh-item small {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--hl-muted);
}

.sh-sub-foot {
    grid-column: 1 / -1;
    margin: 4px 0 0 !important;
    padding: 10px 12px 4px;
    border-top: 1px solid var(--hl-line);
    font-size: 13px !important;
    color: var(--hl-muted) !important;
}

.sh-sub-foot a {
    color: var(--hl-brand-dark) !important;
    font-weight: 700;
}

/* --- right-hand actions */
.sh-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sh-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    color: var(--hl-ink) !important;
    font-family: var(--hl-display) !important;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none !important;
    white-space: nowrap;
}

.sh-phone i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--hl-brand-soft);
    color: var(--hl-brand-dark);
    font-size: 13px;
}

.sh-phone:hover {
    background: #f6f7fa;
}

.sh-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 22px;
    border-radius: 12px;
    background: var(--hl-grad);
    color: #fff !important;
    font-family: var(--hl-display) !important;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(255, 106, 0, .32);
    transition: transform .15s ease, box-shadow .15s ease;
}

.sh-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(255, 106, 0, .38);
}

.sh-panel-cta {
    display: none;
}

.sh-burger {
    display: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--hl-line);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    position: relative;
}

.sh-burger span {
    position: absolute;
    left: 13px;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--hl-ink);
    transition: transform .2s ease, opacity .2s ease, top .2s ease;
}

.sh-burger span:nth-child(1) { top: 16px; }
.sh-burger span:nth-child(2) { top: 22px; }
.sh-burger span:nth-child(3) { top: 28px; }

header.site-header.sh-open .sh-burger span:nth-child(1) { top: 22px; transform: rotate(45deg); }
header.site-header.sh-open .sh-burger span:nth-child(2) { opacity: 0; }
header.site-header.sh-open .sh-burger span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* --- mid widths: keep one row */
@media (max-width: 1279px) and (min-width: 1100px) {
    .sh-phone span { display: none; }
    .sh-phone { padding: 0 6px; }
    .sh-link { padding: 0 12px; font-size: 15px; }
}

/* --- phones and tablets: slide-down panel */
@media (max-width: 1099px) {
    .sh-util .sh-hide-sm { display: none; }
    .sh-util .sh-wrap { height: 32px; }
    .sh-main .sh-wrap { height: 66px; padding: 0 14px; gap: 10px; }
    .sh-logo { margin-right: auto; }
    .sh-logo img { height: 48px !important; }
    .sh-burger { display: block; }
    .sh-phone span { display: none; }
    .sh-phone { padding: 0; }
    .sh-phone i { width: 44px; height: 44px; border-radius: 12px; font-size: 16px; }

    .sh-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        display: block;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        padding: 12px 14px 20px;
        background: #fff;
        border-top: 1px solid var(--hl-line);
        box-shadow: 0 24px 40px rgba(11, 19, 36, .16);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }

    header.site-header.sh-open .sh-nav {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .sh-menu { display: block; }
    .sh-menu > li { border-bottom: 1px solid var(--hl-line); }
    .sh-link { width: 100%; height: 54px; padding: 0 6px; justify-content: space-between; font-size: 17px; border-radius: 0; }
    .sh-link:hover, .sh-has-sub.is-open > .sh-link { background: transparent; }
    .sh-menu > li.is-active > .sh-link::after { display: none; }

    .sh-sub {
        position: static;
        width: auto;
        display: none;
        grid-template-columns: 1fr;
        padding: 0 0 10px;
        border: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .sh-sub::before { display: none; }
    .sh-has-sub.is-open > .sh-sub { display: grid; transform: none; }
    .sh-item { padding: 10px 6px; }

    .sh-panel-cta {
        display: grid;
        gap: 10px;
        margin-top: 16px;
    }

    .sh-panel-cta .sh-cta { height: 52px; font-size: 16px; }

    .sh-call {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 52px;
        border-radius: 12px;
        background: var(--hl-ink);
        color: #fff !important;
        font-family: var(--hl-display) !important;
        font-weight: 800;
        text-decoration: none !important;
    }
}

@media (max-width: 520px) {
    .sh-cta-top { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sh-sub, .sh-nav, .sh-util, .sh-burger span, .sh-cta { transition: none !important; }
}


/* Spacing that used to clear the old fixed header. */
.blog-banner {
    padding-top: 56px !important;
}

.header-contact .form-wrap {
    margin-top: 40px !important;
}

.book-page {
    padding-top: 36px !important;
}

@media (max-width: 767px) {
    .blog-banner { padding-top: 36px !important; }
    .header-contact .form-wrap { margin-top: 20px !important; }
    .book-page { padding-top: 22px !important; }
}

/* --------------------------------------------- service areas (contact) */

.service-areas.sa-block {
    float: none;
    width: 100%;
    padding: 8px 15px 24px !important;
    text-align: left;
}

.sa-title {
    margin: 0 0 6px !important;
    font-size: clamp(26px, 2.4vw, 34px) !important;
    font-weight: 800 !important;
    color: var(--hl-ink) !important;
    text-align: left !important;
}

.sa-block .sa-sub {
    margin: 0 0 22px !important;
    font-size: 16px !important;
    color: var(--hl-text) !important;
    text-align: left !important;
}

.sa-sub a {
    color: var(--hl-brand-dark) !important;
    font-weight: 700;
}

.sa-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.sa-county {
    padding: 20px 22px;
    border: 1px solid var(--hl-line);
    border-radius: var(--hl-radius);
    background: #fff;
    box-shadow: var(--hl-shadow);
}

.sa-county h3 {
    margin: 0 0 12px !important;
    padding-bottom: 10px;
    border-bottom: 3px solid transparent;
    border-image: var(--hl-grad) 1;
    font-size: 19px !important;
    font-weight: 800 !important;
    text-align: left !important;
}

.sa-county h3 a {
    color: var(--hl-ink) !important;
    text-decoration: none !important;
}

.sa-county h3 a:hover {
    color: var(--hl-brand-dark) !important;
}

.sa-list {
    columns: 2;
    column-gap: 18px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.sa-list li {
    break-inside: avoid;
    margin: 0 !important;
    padding: 4px 0 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: var(--hl-text) !important;
    text-align: left !important;
}

.sa-list li a {
    color: var(--hl-brand-dark) !important;
    font-weight: 700;
}

@media (max-width: 991px) {
    .sa-grid { grid-template-columns: 1fr; }
}

/* ---------------------- contact page: points to the homepage estimate */

.ct-estimate {
    width: 90%;
    margin: 0 auto 28px;
    text-align: left;
}

.form-left .ct-estimate .ct-lead {
    width: auto;
    margin: 0 0 16px;
    padding: 0;
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: #fff !important;
}

.ct-points {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.form-left .ct-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #fff !important;
}

.ct-points i {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, .2);
    font-size: 13px;
}

.ct-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    border-radius: 14px;
    background: #fff;
    color: var(--hl-brand-dark) !important;
    font-family: var(--hl-display) !important;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 10px 24px rgba(11, 19, 36, .22);
    transition: transform .15s ease, box-shadow .15s ease;
}

.ct-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(11, 19, 36, .28);
}

.form-left .ct-estimate .ct-alt {
    width: auto;
    margin: 18px 0 0;
    padding: 0;
    font-size: 15px !important;
    color: rgba(255, 255, 255, .92) !important;
}

.ct-alt a {
    color: #fff !important;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 767px) {
    .ct-cta { width: 100%; justify-content: center; }
}

/* ------------------------------------------- homepage review marquee */

.rv-marquee {
    position: relative;
    overflow: hidden;
    padding: 26px 0 30px;
    background:
        radial-gradient(1200px 200px at 10% 0%, rgba(255, 138, 0, .16), transparent 60%),
        radial-gradient(900px 220px at 90% 100%, rgba(124, 58, 237, .14), transparent 60%),
        linear-gradient(180deg, #fff8f1 0%, #f7f4ff 100%);
    border-top: 1px solid #ffe1c4;
    border-bottom: 1px solid #ece6ff;
}

.rv-head {
    margin: 0 auto 18px !important;
    padding: 0 16px;
    text-align: center;
    font-size: 15px !important;
    color: var(--hl-text) !important;
}

.rv-head b {
    color: var(--hl-ink);
    font-family: var(--hl-display) !important;
    font-weight: 800;
}

.rv-score {
    display: inline-block;
    margin-right: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--hl-grad);
    color: #fff;
    font-family: var(--hl-display) !important;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(255, 106, 0, .3);
}

.rv-dot {
    margin: 0 6px;
    color: #c4c9d4;
}

.rv-row {
    overflow: hidden;
    padding: 18px 0 10px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.rv-track {
    display: flex;
    width: max-content;
    animation: rv-scroll 75s linear infinite;
}

.rv-right .rv-track {
    animation-duration: 85s;
    animation-direction: reverse;
}

.rv-row:hover .rv-track,
.rv-row:focus-within .rv-track {
    animation-play-state: paused;
}

.rv-group {
    display: flex;
    gap: 16px;
    padding-right: 16px;
}

@keyframes rv-scroll {
    to { transform: translateX(-50%); }
}

.rv-card {
    position: relative;
    flex: none;
    width: 330px;
    margin: 0;
    padding: 18px 18px 14px 18px;
    border: 1px solid rgba(23, 32, 51, .06);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 10px 24px rgba(16, 24, 40, .08);
    transition: transform .2s ease, box-shadow .2s ease;
}

.rv-card:hover {
    transform: translateY(-4px) rotate(-.4deg);
    box-shadow: 0 4px 8px rgba(16, 24, 40, .06), 0 18px 36px rgba(16, 24, 40, .14);
}

.rv-emoji {
    position: absolute;
    top: -12px;
    right: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    font-size: 21px;
    box-shadow: 0 6px 14px rgba(16, 24, 40, .14);
    animation: rv-bob 2.8s ease-in-out infinite;
}

.rv-card:nth-child(3n+2) .rv-emoji { animation-delay: -.9s; }
.rv-card:nth-child(3n) .rv-emoji { animation-delay: -1.8s; }

@keyframes rv-bob {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-4px) rotate(-6deg); }
}

.rv-card blockquote {
    margin: 0 0 14px !important;
    padding: 0 30px 0 0 !important;
    border: 0 !important;
    font-family: var(--hl-display) !important;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.45;
    color: var(--hl-ink);
    white-space: normal;
}

.rv-card figcaption {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rv-avatar {
    flex: none;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c, #ff6a00);
    color: #fff;
    font-family: var(--hl-display) !important;
    font-size: 15px;
    font-weight: 800;
}

.rv-who {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.rv-who b {
    font-size: 14px;
    color: var(--hl-ink);
    white-space: nowrap;
}

.rv-src {
    font-size: 12px;
    font-weight: 600;
    color: var(--hl-muted);
}

.rv-src.rv-google::before { content: "G "; color: #4285f4; font-weight: 900; }
.rv-src.rv-thumbtack::before { content: "● "; color: #009fd9; }

.rv-stars {
    margin-left: auto;
    color: #ffb400;
    font-size: 15px;
    letter-spacing: 1px;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .rv-marquee { padding: 20px 0 22px; }
    .rv-card { width: 280px; padding: 16px 14px 12px; }
    .rv-card blockquote { font-size: 15px !important; }
    .rv-track { animation-duration: 60s; }
    .rv-right .rv-track { animation-duration: 70s; }
    /* One row on phones keeps the section short under the estimate form. */
    .rv-right { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rv-track, .rv-emoji { animation: none; }
    .rv-row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .rv-group[aria-hidden="true"] { display: none; }
}

/* ------------------------------- homepage estimate: crew + included */

.hq-est-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-bottom: 6px !important;
}

.hq-crew {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    color: var(--hl-brand-dark);
    font-size: .8em;
    font-weight: 800;
    white-space: nowrap;
}

.hq-crew-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.hq-emo {
    font-size: 1.05em;
    line-height: 1;
}

.hq-dot, .hq-plus {
    color: #c4c9d4;
    font-weight: 700;
}

/* On phones the crew wraps to its own line, so drop the separator. */
@media (max-width: 767px) {
    .hq-dot { display: none; }
}

.hq-included {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin: 0 0 10px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

.hq-included > span {
    padding: 3px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-weight: 600;
}

.hq-included > span:not(.hq-inc-label)::before {
    content: "✓ ";
    color: #10b981;
    font-weight: 800;
}

.hq-included > .hq-inc-label {
    padding-left: 0;
    background: none;
    color: var(--hl-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ------------------------------------------ homepage hero: brand orange */

/* Replaces the staged living-room photo (every breakpoint) with a warm
   orange gradient, a soft light bloom and a faint dot texture. Only the
   homepage hero (.hero-has-form); service pages keep their photos. */
.banner.hero-has-form {
    background:
        radial-gradient(rgba(255, 255, 255, .07) 1.1px, transparent 1.5px) 0 0 / 24px 24px,
        radial-gradient(760px 420px at 12% 18%, rgba(255, 122, 0, .38), transparent 62%),
        radial-gradient(620px 380px at 92% 105%, rgba(255, 166, 38, .20), transparent 60%),
        linear-gradient(135deg, #0b1324 0%, #14213d 55%, #1d2b4f 100%) !important;
    background-attachment: scroll !important;
}

/* Headline sits straight on the orange in white: no dark glass box. */
.banner.hero-has-form #myCarousel .carousel-inner .item {
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none !important;
    padding: 0 !important;
    text-align: left;
}

.banner.hero-has-form #myCarousel .carousel-inner .item h1,
.banner.hero-has-form #myCarousel .carousel-inner .item h2 {
    font-size: clamp(32px, 3.4vw, 50px) !important;
    line-height: 1.05 !important;
    text-align: left !important;
    color: #fff !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
}

.banner.hero-has-form #myCarousel .carousel-inner .item p {
    text-align: left !important;
    color: rgba(255, 255, 255, .95) !important;
    font-weight: 600 !important;
}

.banner.hero-has-form #myCarousel .carousel-inner .item p:last-child {
    display: inline-block;
    margin-top: 10px !important;
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(255, 122, 0, .18);
    border: 1px solid rgba(255, 150, 60, .35);
    color: #ffd2a6 !important;
    font-size: 15px !important;
}

/* The white form card needs a deeper shadow to lift off the orange. */
.banner.hero-has-form .hero-quote-card {
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06) !important;
}

@media (max-width: 1199px) {
    .banner.hero-has-form #myCarousel .carousel-inner .item {
        text-align: center;
    }

    .banner.hero-has-form #myCarousel .carousel-inner .item h1,
    .banner.hero-has-form #myCarousel .carousel-inner .item h2,
    .banner.hero-has-form #myCarousel .carousel-inner .item p {
        text-align: center !important;
    }
}

/* ------------------------------------------------ homepage perk cards */

.perks {
    padding: 56px 16px 52px;
    background:
        radial-gradient(800px 260px at 0% 0%, rgba(255, 138, 0, .10), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fff8f1 100%);
}

.perks-wrap {
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}

.perks-eyebrow {
    display: inline-block;
    margin: 0 0 10px !important;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--hl-brand-soft);
    color: var(--hl-brand-dark) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.perks h2 {
    margin: 0 0 30px !important;
    font-size: clamp(28px, 3vw, 40px) !important;
    font-weight: 800 !important;
    color: var(--hl-ink) !important;
}

.perks-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.perk {
    position: relative;
    padding: 28px 20px 24px;
    border: 1px solid var(--hl-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 12px 28px rgba(16, 24, 40, .07);
    text-align: center;
    opacity: 0;
    transform: translateY(24px) scale(.97);
    transition: opacity .55s ease var(--d, 0ms), transform .55s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms), box-shadow .2s ease;
    overflow: hidden;
}

/* A colored strip along the top of each card. */
.perk::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 5px;
    background: var(--perk);
}

.perk.is-in {
    opacity: 1;
    transform: none;
}

.perk:hover {
    transform: translateY(-6px);
    box-shadow: 0 4px 8px rgba(16, 24, 40, .06), 0 22px 44px rgba(16, 24, 40, .14);
    transition-delay: 0ms;
}

.perk-ico {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: color-mix(in srgb, var(--perk) 14%, #fff);
    font-size: 36px;
}

/* Soft pulsing ring behind the emoji. */
.perk-ico::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 28px;
    border: 2px solid color-mix(in srgb, var(--perk) 35%, transparent);
    animation: perk-ring 2.6s ease-out infinite;
    animation-delay: var(--d, 0ms);
}

.perk-ico > span {
    display: inline-block;
    animation: perk-float 3.2s ease-in-out infinite;
    animation-delay: var(--d, 0ms);
}

.perk:hover .perk-ico > span {
    animation: perk-bounce .6s cubic-bezier(.3, 1.6, .5, 1);
}

@keyframes perk-float {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-5px) rotate(-6deg); }
}

@keyframes perk-bounce {
    0% { transform: scale(1); }
    40% { transform: scale(1.28) rotate(8deg); }
    100% { transform: scale(1); }
}

@keyframes perk-ring {
    0% { transform: scale(.92); opacity: .9; }
    100% { transform: scale(1.18); opacity: 0; }
}

.perk h3 {
    margin: 0 0 8px !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
    color: var(--hl-ink) !important;
    text-transform: none !important;
}

.perk p {
    margin: 0 !important;
    font-size: 15.5px !important;
    line-height: 1.55 !important;
    color: var(--hl-text) !important;
}

.perks-cta {
    margin: 30px 0 0 !important;
}

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

@media (max-width: 520px) {
    .perks { padding: 40px 14px 40px; }
    .perks h2 { margin-bottom: 20px !important; }
    /* Phones: one compact row per perk, emoji on the left. */
    .perks-grid { grid-template-columns: 1fr; gap: 10px; }
    .perk { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; align-items: center; padding: 16px 16px 16px 14px; border-radius: 16px; text-align: left; }
    .perk::before { top: 0; bottom: 0; left: 0; right: auto; width: 5px; height: auto; }
    .perk-ico { grid-row: span 2; width: 56px; height: 56px; margin: 0; font-size: 27px; border-radius: 16px; }
    .perk-ico::after { border-radius: 20px; }
    .perk h3 { margin: 0 0 2px !important; font-size: 16.5px !important; text-align: left !important; }
    .perk p { font-size: 14px !important; text-align: left !important; }
}
}

@media (prefers-reduced-motion: reduce) {
    .perk { opacity: 1; transform: none; transition: none; }
    .perk-ico::after, .perk-ico > span { animation: none; }
}

/* ------------------------------------------- homepage lower sections */

.hl-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

.hl-eyebrow {
    display: inline-block;
    margin: 0 0 10px !important;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--hl-brand-soft);
    color: var(--hl-brand-dark) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hl-trust h2, .hl-services h2, .hl-reviews h2, .hl-faq h2 {
    margin: 0 0 18px !important;
    font-size: clamp(28px, 3vw, 40px) !important;
    font-weight: 800 !important;
    color: var(--hl-ink) !important;
}

/* trust */
.hl-trust {
    padding: 64px 0;
    background: #fff;
}

.hl-trust-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 40px;
    align-items: center;
}

.hl-trust-copy p:not(.hl-eyebrow) {
    margin: 0 0 12px !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
    color: var(--hl-text) !important;
}

.hl-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hl-stats li {
    padding: 22px 18px;
    border-radius: 18px;
    background: linear-gradient(160deg, #fff7ef 0%, #ffffff 70%);
    border: 1px solid #ffe1c4;
    text-align: center;
}

.hl-stats b {
    display: block;
    font-family: var(--hl-display) !important;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 800;
    color: var(--hl-brand-dark);
    letter-spacing: -0.02em;
}

.hl-stats span {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--hl-muted);
}

/* services */
.hl-services {
    padding: 64px 0;
    background: linear-gradient(180deg, var(--hl-sky) 0%, #ffffff 100%);
    text-align: center;
}

.hl-svc-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    text-align: left;
}

.hl-svc {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--hl-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--hl-shadow);
    color: var(--hl-ink) !important;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease;
}

.hl-svc:hover {
    transform: translateY(-5px);
    box-shadow: var(--hl-shadow-lg);
}

.hl-svc-img {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.hl-svc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.hl-svc:hover .hl-svc-img img {
    transform: scale(1.05);
}

.hl-svc-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    padding: 16px 18px 18px;
}

.hl-svc-body b {
    font-family: var(--hl-display) !important;
    font-size: 19px;
    font-weight: 800;
}

.hl-svc-body > span {
    font-size: 15px;
    line-height: 1.5;
    color: var(--hl-text);
}

.hl-svc-body em {
    margin-top: auto;
    padding-top: 6px;
    font-style: normal;
    font-family: var(--hl-display) !important;
    font-weight: 800;
    font-size: 14.5px;
    color: var(--hl-brand-dark);
}

/* reviews */
.hl-reviews {
    padding: 64px 0;
    background: #fff;
    text-align: center;
}

.hl-rev-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    text-align: left;
}

.hl-rev {
    margin: 0;
    padding: 22px;
    border: 1px solid var(--hl-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--hl-shadow);
}

.hl-rev-stars {
    margin: 0 0 10px !important;
    color: #ffb400 !important;
    font-size: 18px !important;
    letter-spacing: 2px;
}

.hl-rev blockquote {
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 15.5px !important;
    line-height: 1.6 !important;
    color: var(--hl-ink) !important;
}

.hl-rev figcaption {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--hl-muted);
}

.hl-rev figcaption b {
    color: var(--hl-ink);
}

.hl-rev-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 26px 0 0 !important;
}

.hl-btn-ghost {
    display: inline-flex;
    align-items: center;
    padding: 12px 20px;
    border: 2px solid var(--hl-line);
    border-radius: 12px;
    color: var(--hl-ink) !important;
    font-family: var(--hl-display) !important;
    font-weight: 800;
    text-decoration: none !important;
    transition: border-color .15s ease, color .15s ease;
}

.hl-btn-ghost:hover {
    border-color: var(--hl-brand);
    color: var(--hl-brand-dark) !important;
}

/* designer banner */
.hl-designer {
    padding: 0 0 56px;
    background: #fff;
}

.hl-designer-inner {
    display: flex;
    align-items: center;
    gap: 20px;
}

.hl-designer-inner {
    padding: 22px 26px;
    border-radius: 20px;
    background: linear-gradient(135deg, #fff1e4 0%, #f5f0ff 100%);
    border: 1px solid #ffe1c4;
}

.hl-designer-ico {
    flex: none;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #fff;
    font-size: 28px;
    box-shadow: var(--hl-shadow);
}

.hl-designer-inner > div {
    flex: 1;
}

.hl-designer h2 {
    margin: 0 0 4px !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--hl-ink) !important;
}

.hl-designer p {
    margin: 0 !important;
    font-size: 15px !important;
    color: var(--hl-text) !important;
}

.hl-btn-dark {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 20px;
    border-radius: 12px;
    background: var(--hl-ink);
    color: #fff !important;
    font-family: var(--hl-display) !important;
    font-weight: 800;
    text-decoration: none !important;
}

/* FAQ */
.hl-faq {
    padding: 64px 0;
    background: linear-gradient(180deg, #fff8f1 0%, #ffffff 100%);
    text-align: center;
}

.hl-faq-wrap {
    max-width: 820px;
}

.hl-q {
    margin: 0 0 10px;
    border: 1px solid var(--hl-line);
    border-radius: 14px;
    background: #fff;
    text-align: left;
    transition: box-shadow .2s ease;
}

.hl-q[open] {
    box-shadow: var(--hl-shadow);
    border-color: #ffd2a6;
}

.hl-q summary {
    position: relative;
    padding: 18px 52px 18px 20px;
    cursor: pointer;
    list-style: none;
    font-family: var(--hl-display) !important;
    font-size: 17px;
    font-weight: 800;
    color: var(--hl-ink);
}

.hl-q summary::-webkit-details-marker {
    display: none;
}

.hl-q summary::after {
    content: "+";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--hl-brand-soft);
    color: var(--hl-brand-dark);
    font-size: 20px;
    font-weight: 800;
    transition: transform .2s ease;
}

.hl-q[open] summary::after {
    transform: rotate(45deg);
}

.hl-q p {
    margin: 0 !important;
    padding: 0 20px 18px !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: var(--hl-text) !important;
}

/* final CTA */
.hl-final {
    padding: 0 0 64px;
    background: #fff;
}

.hl-final-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 34px 36px;
    border-radius: 24px;
    background:
        radial-gradient(520px 260px at 0% 0%, rgba(255, 122, 0, .45), transparent 60%),
        linear-gradient(135deg, #0b1324 0%, #1d2b4f 100%);
    box-shadow: 0 24px 50px rgba(11, 19, 36, .25);
}

.hl-final h2 {
    margin: 0 0 6px !important;
    font-size: clamp(24px, 2.6vw, 34px) !important;
    font-weight: 800 !important;
    color: #fff !important;
}

.hl-final p {
    margin: 0 !important;
    font-size: 16px !important;
    color: rgba(255, 255, 255, .82) !important;
}

.hl-final-btns {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hl-btn-primary, .hl-btn-light {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 24px;
    border-radius: 14px;
    font-family: var(--hl-display) !important;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none !important;
    white-space: nowrap;
}

.hl-btn-primary {
    background: var(--hl-grad);
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(255, 106, 0, .4);
}

.hl-btn-light {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff !important;
}

/* footer CTA (replaces the footer form, sitewide) */
.footer-cta {
    text-align: center;
}

.footer .footer-cta-text {
    max-width: 460px;
    margin: 6px auto 18px !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, .8) !important;
}

.footer-cta-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.footer .footer-cta-primary, .footer .footer-cta-call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 12px;
    font-family: var(--hl-display) !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.footer .footer-cta-primary {
    background: var(--hl-grad);
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(255, 106, 0, .35);
}

.footer .footer-cta-call {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff !important;
}

@media (max-width: 991px) {
    .hl-trust-grid { grid-template-columns: 1fr; gap: 28px; }
    .hl-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hl-rev-grid { grid-template-columns: 1fr; }
    .hl-final-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
    .hl-trust, .hl-services, .hl-reviews, .hl-faq { padding: 44px 0; }
    .hl-svc-grid { grid-template-columns: 1fr; }
    /* Compact rows: small photo left, text right. */
    .hl-svc { flex-direction: row; }
    .hl-svc-img { flex: none; width: 112px; aspect-ratio: auto; }
    .hl-svc-body { padding: 14px 14px 14px 16px; gap: 3px; }
    .hl-svc-body b { font-size: 17px; }
    .hl-svc-body > span { font-size: 14px; }
    .hl-svc-body em { padding-top: 4px; font-size: 13.5px; }
    .hl-q summary { font-size: 16px; padding: 16px 48px 16px 16px; }
    .hl-q p { padding: 0 16px 16px !important; font-size: 15px !important; }
    /* Reviews swipe sideways on phones instead of stacking. */
    .hl-rev-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; scroll-padding: 0 20px; -webkit-overflow-scrolling: touch; }
    .hl-rev { scroll-snap-align: start; }
    .footer .links { columns: 2; column-gap: 16px; }
    .footer .links li { break-inside: avoid; }
    .hl-stats li { padding: 16px 12px; }
    .hl-designer-inner { flex-direction: column; align-items: flex-start; padding: 20px; }
    .hl-final { padding-bottom: 44px; }
    .hl-final-inner { padding: 26px 22px; border-radius: 20px; }
    .hl-final-btns, .hl-final-btns a { width: 100%; justify-content: center; }
}

/* ------------------------------------------------ hero estimate card v2 */

.banner.hero-has-form .hero-quote-card {
    border-radius: 22px !important;
    padding: 20px 26px 18px !important;
    border-top: 0;
    max-height: 560px;
}

/* gradient strip along the top of the card */
.hero-quote-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 5px;
    border-radius: 22px 22px 0 0;
    background: var(--hl-grad);
}

/* --- progress stepper */
.hq-stepper {
    display: flex;
    gap: 6px;
    margin: 2px 0 10px;
    padding: 0;
    list-style: none;
}

.hq-stepper li {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px 8px;
    border-bottom: 3px solid #eef0f4;
    font-family: var(--hl-display) !important;
    font-size: 12.5px;
    font-weight: 700;
    color: #9aa3b2;
    white-space: nowrap;
    transition: color .2s ease, border-color .2s ease;
}

.hq-stepper li span {
    flex: none;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef0f4;
    color: #7b8494;
    font-size: 12px;
    font-weight: 800;
    transition: background .2s ease, color .2s ease;
}

.hq-stepper li.on {
    color: var(--hl-ink);
    border-bottom-color: var(--hl-brand);
}

.hq-stepper li.on span {
    background: var(--hl-grad);
    color: #fff;
    box-shadow: 0 4px 10px rgba(255, 106, 0, .35);
}

.hq-stepper li.done {
    color: #10b981;
    border-bottom-color: #a7f3d0;
}

.hq-stepper li.done span {
    background: #10b981;
    color: transparent;
    position: relative;
}

.hq-stepper li.done span::after {
    content: "✓";
    position: absolute;
    color: #fff;
}

.hero-quote-card[data-step="4"] .hq-stepper {
    display: none;
}

/* --- headings + subline */
.hero-quote-card .hq-step h3,
.hero-quote-card .hq-title {
    margin: 0 0 8px !important;
    font-family: var(--hl-display) !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    color: var(--hl-ink) !important;
}

.hero-quote-card .hq-sub {
    margin: 0 0 10px !important;
    font-size: 15px !important;
    color: var(--hl-muted) !important;
}

.hq-sub-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hq-sub-chips span {
    padding: 5px 11px;
    border-radius: 999px;
    background: #fff4ea;
    color: #9a3f00;
    font-size: 13px;
    font-weight: 700;
}

/* --- fields */
.hero-quote-card .hq-field label,
.hero-quote-card .hq-label-block {
    margin-bottom: 4px !important;
    font-family: var(--hl-body) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #3b4659 !important;
}

.hero-quote-card .hq-field > input,
.hero-quote-card .hq-field > select,
.hero-quote-card .hb-ac-anchor > input {
    min-height: 46px !important;
    padding: 10px 14px !important;
    border: 1.5px solid #e3e7ee !important;
    border-radius: 12px !important;
    background: #f7f8fb !important;
    color: var(--hl-ink) !important;
    font-family: var(--hl-body) !important;
    font-size: 16px !important;
    font-weight: 500;
}

.hero-quote-card .hq-field > input:focus,
.hero-quote-card .hq-field > select:focus,
.hero-quote-card .hb-ac-anchor > input:focus {
    border-color: var(--hl-brand) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(255, 106, 0, .14) !important;
}

/* --- From / To as one route */
.hq-route {
    position: relative;
    flex-direction: column;
    gap: 8px !important;
    padding: 10px 12px;
    border-radius: 16px;
    background: #fbfbfd;
    border: 1px solid #eef0f4;
}

.hq-route .hq-pair {
    width: 100%;
}

.hq-from, .hq-to {
    position: relative;
}

.hero-quote-card .hq-route .hq-from input,
.hero-quote-card .hq-route .hq-to input {
    padding-left: 44px !important;
}

/* route markers sit inside the inputs */
.hq-from::before, .hq-to::before {
    position: absolute;
    left: 14px;
    bottom: 25px;
    transform: translateY(50%);
    z-index: 2;
    pointer-events: none;
}

.hq-from::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 4px solid #10b981;
    background: #fff;
    box-sizing: border-box;
}

.hq-to::before {
    content: "📍";
    font-size: 17px;
    left: 12px;
    line-height: 1;
}

/* Dotted line joining the two markers, drawn up from the "to" pin. The
   distance between marker centres is one label + input + the 8px gap. */
.hq-to::after {
    content: "";
    position: absolute;
    left: 21px;
    bottom: 32px;
    height: 58px;
    border-left: 2px dashed #c6ccd8;
    z-index: 2;
    pointer-events: none;
}

/* --- main button */
.hero-quote-card .hq-submit {
    position: relative;
    overflow: hidden;
    min-height: 52px !important;
    border-radius: 14px !important;
    background: var(--hl-grad) !important;
    font-family: var(--hl-display) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.005em !important;
    text-transform: none !important;
    box-shadow: 0 12px 26px rgba(255, 106, 0, .35) !important;
}

.hero-quote-card .hq-submit i {
    transition: transform .2s ease;
}

.hero-quote-card .hq-submit:hover i {
    transform: translateX(4px);
}

/* a light sweep across the main button every few seconds */
.hq-submit-main::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 30%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-18deg);
    animation: hq-shine 4.5s ease-in-out infinite;
}

@keyframes hq-shine {
    0%, 60% { left: -40%; }
    85%, 100% { left: 130%; }
}

.hq-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 14px;
    margin: 10px 0 0 !important;
    font-size: 12.5px !important;
    font-weight: 600;
    color: var(--hl-muted) !important;
}

.hq-trust span + span::before {
    content: "·";
    margin-right: 14px;
    color: #c4c9d4;
}

/* --- step 2: arrival windows as chips */
.hero-quote-card .hq-window-grid label {
    min-height: 44px !important;
    border: 1.5px solid #e3e7ee !important;
    border-radius: 12px !important;
    background: #f7f8fb;
    font-family: var(--hl-body) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--hl-ink);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.hero-quote-card .hq-window-grid label:hover {
    border-color: #ffc89b !important;
}

.hero-quote-card .hq-window-grid label.checked {
    border-color: var(--hl-brand) !important;
    background: #fff4ea !important;
    color: #9a3f00;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, .12);
}

.hero-quote-card .hq-window-grid input {
    accent-color: var(--hl-brand);
}

.hero-quote-card .hq-result-stats > div {
    border-radius: 14px !important;
    border: 1.5px solid #ffe0c2 !important;
    background: linear-gradient(160deg, #fff7ef, #fff) !important;
}

.hero-quote-card .hq-result-stats strong {
    font-family: var(--hl-display) !important;
    font-weight: 800 !important;
    color: var(--hl-brand-dark) !important;
}

.hero-quote-card .hq-link {
    font-family: var(--hl-body) !important;
    font-weight: 600;
    color: var(--hl-muted) !important;
}

@media (max-width: 767px) {
    .banner.hero-has-form .hero-quote-card { padding: 18px 16px 16px !important; border-radius: 20px !important; }
    .hq-stepper li { font-size: 0; gap: 0; justify-content: center; }
    .hq-stepper li span { font-size: 12px; }
    .hq-stepper li.on { font-size: 12px; gap: 6px; }
    .hero-quote-card .hq-step h3, .hero-quote-card .hq-title { font-size: 22px !important; }
    .hq-route { padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .hq-submit-main::after { animation: none; display: none; }
}

.hero-quote-card .hq-row { margin-bottom: 12px !important; }
.hq-from::before, .hq-to::before { bottom: 23px; }

/* Labels line up with the text inside the route inputs, clear of the line. */
.hero-quote-card .hq-route .hq-from label,
.hero-quote-card .hq-route .hq-to label {
    padding-left: 44px;
}

/* ----------------------------------- estimate final step: two choices */

.hq-choices {
    margin-top: 4px;
}

.hq-choice-note {
    margin: 8px 0 0 !important;
    text-align: center;
    font-size: 12.5px !important;
    color: var(--hl-muted) !important;
}

.hq-choice-note i {
    color: #10b981;
    margin-right: 4px;
}

.hq-or {
    position: relative;
    margin: 12px 0;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #9aa3b2;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.hq-or::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid #eef0f4;
}

.hq-or span {
    position: relative;
    padding: 0 10px;
    background: #fff;
}

.hq-callback {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    border: 1.5px solid #e3e7ee;
    border-radius: 14px;
    background: #fff;
    color: var(--hl-ink);
    font-family: var(--hl-display) !important;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.hq-callback:hover {
    border-color: var(--hl-brand);
    background: #fff8f1;
}

.hq-callback:disabled, .hero-quote-card .hq-submit:disabled {
    opacity: .6;
    cursor: default;
}

.hq-deposit-note a {
    color: var(--hl-brand-dark) !important;
    font-weight: 800;
}

/* ------------------------------------------- booking-confirmed.html */

.bc-page {
    padding: 48px 16px 64px;
    background: linear-gradient(180deg, #fff8f1 0%, #ffffff 100%);
}

.bc-card {
    max-width: 640px;
    margin: 0 auto;
    padding: 36px 32px;
    border: 1px solid var(--hl-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--hl-shadow-lg);
    text-align: center;
}

.bc-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ecfdf5;
    font-size: 38px;
}

.bc-eyebrow {
    margin: 0 0 6px !important;
    color: #059669 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bc-card h1 {
    margin: 0 0 10px !important;
    font-size: clamp(28px, 3.4vw, 38px) !important;
    font-weight: 800 !important;
    color: var(--hl-ink) !important;
}

.bc-lead {
    margin: 0 auto 20px !important;
    max-width: 480px;
    font-size: 16.5px !important;
    line-height: 1.6 !important;
    color: var(--hl-text) !important;
}

.bc-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.bc-details > div {
    padding: 12px;
    border: 1.5px solid #ffe0c2;
    border-radius: 14px;
    background: linear-gradient(160deg, #fff7ef, #fff);
}

.bc-details span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--hl-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.bc-details strong {
    display: block;
    margin-top: 2px;
    font-family: var(--hl-display) !important;
    font-size: 17px;
    font-weight: 800;
    color: var(--hl-ink);
}

.bc-route {
    margin: 0 0 18px !important;
    font-size: 14px !important;
    color: var(--hl-muted) !important;
}

.bc-next {
    margin: 8px 0 18px;
    padding: 0;
    list-style: none;
    text-align: left;
}

.bc-next li {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--hl-line);
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: var(--hl-text) !important;
}

.bc-help {
    margin: 0 0 18px !important;
    font-size: 14.5px !important;
    color: var(--hl-muted) !important;
}

.bc-help a {
    color: var(--hl-brand-dark) !important;
    font-weight: 800;
}

@media (max-width: 520px) {
    .bc-card { padding: 26px 18px; }
    .bc-details { grid-template-columns: 1fr; }
}

/* Step 3 carries two buttons; keep it inside the card on desktop. */
#hq-step-contact .hq-sub { margin-bottom: 8px !important; }
#hq-step-contact .hq-row { margin-bottom: 10px !important; }
.hq-or { margin: 8px 0; }
.hq-choice-note { margin-top: 6px !important; }
.hq-callback { min-height: 44px; }
#hq-step-contact .hq-legal { margin: 8px 0 4px !important; font-size: 11px !important; line-height: 1.45 !important; }

/* Phones and tablets: the estimate card and the hero grow with their content
   (a fixed height let the card spill into the reviews below), and the old
   81px top gap for the floating header is no longer needed. */
@media (max-width: 1199px) {
    .banner.hero-has-form {
        height: auto !important;
        min-height: 0 !important;
        padding-top: 20px !important;
        padding-bottom: 24px !important;
    }

    .banner.hero-has-form .hero-quote-card {
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
}

/* --- phone overlap fixes */
@media (max-width: 767px) {
    /* Service-page heroes were a fixed 200px with 74px of old header padding,
       so the caption ran into the heading below. */
    .residential-banner:not(.hub-banner),
    .commercial-banner,
    .specialty-banner {
        height: auto !important;
        min-height: 0 !important;
        padding: 36px 0 !important;
    }

    .residential-banner:not(.hub-banner) .item,
    .commercial-banner .item,
    .specialty-banner .item {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        margin: 0 14px !important;
    }

    /* Floated footer link lists let the logo slide up over them. */
    .footer .links {
        float: none !important;
        width: 100% !important;
    }

    .footer h6.q-links {
        height: auto !important;
    }

    .footer .inner > [class*="col-sm-"]::after {
        content: "";
        display: table;
        clear: both;
    }

    /* Review strip heading: keep the badge and count, drop the tagline. */
    .rv-head > span:not(.rv-score) {
        display: none;
    }
}

/* 1200-1299px laptops: the card was narrowed to 580px, which made steps 2
   and 3 taller than the card and forced scrolling inside it. Give it more
   width and take it from the caption. */
@media (min-width: 1200px) and (max-width: 1299px) {
    .hero-quote-overlay {
        width: 700px !important;
        right: 2% !important;
    }

    .banner.hero-has-form #myCarousel .carousel-inner .item {
        width: 30% !important;
        margin-left: 2.5% !important;
    }

    .banner.hero-has-form #myCarousel .carousel-inner .item h1,
    .banner.hero-has-form #myCarousel .carousel-inner .item h2 {
        font-size: 30px !important;
    }
}

/* Step 2 trim on desktop so the estimate + date step fits the card. */
@media (min-width: 1200px) {
    #hq-step-schedule .hq-result-stats { margin-bottom: 8px !important; }
    #hq-step-schedule .hq-result-stats > div { padding: 7px 10px !important; }
    #hq-step-schedule .hq-result-stats strong { font-size: 23px !important; }
    #hq-step-schedule .hq-included { margin-bottom: 8px !important; }
    #hq-step-schedule .hq-window-grid label { min-height: 40px !important; }
    #hq-step-schedule .hq-row { margin-bottom: 8px !important; }
}

/* The wider card has room for the date and the arrival chips side by side. */
@media (min-width: 1200px) {
    .hero-quote-card .hq-row.hq-row-schedule {
        flex-direction: row !important;
        gap: 14px !important;
    }

    .hero-quote-card .hq-row.hq-row-schedule > .hq-field {
        margin-bottom: 0 !important;
    }

    .hero-quote-card .hq-row.hq-row-schedule > .hq-field:first-child {
        flex: 0 0 190px;
    }
}

/* --------------------------------------- homepage hero: static proof copy */

.banner.hero-has-form .hero-copy {
    position: absolute;
    left: 4%;
    top: 50%;
    transform: translateY(-50%);
    width: min(500px, calc(100% - 860px));
    color: #fff;
    z-index: 5;
}

.hc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px !important;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 122, 0, .16);
    border: 1px solid rgba(255, 150, 60, .4);
    color: #ffc896 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hero-copy h1 {
    margin: 0 0 12px !important;
    font-size: clamp(34px, 3.3vw, 52px) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
    color: #fff !important;
    text-transform: none !important;
}

.hero-copy .hc-sub {
    margin: 0 0 22px !important;
    max-width: 440px;
    font-size: 17px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, .82) !important;
}

.hc-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hc-stats li {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.hc-stats b {
    display: block;
    font-family: var(--hl-display) !important;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    letter-spacing: -0.02em;
}

.hc-stats li:nth-child(2) b {
    color: #ffb46b;
}

.hc-star {
    color: #ffb400;
}

.hc-stats span:not(.hc-star) {
    display: block;
    margin-top: 3px;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .72);
}

/* 1200-1299px: the card is 700px wide there, so the copy gets a bit less. */
@media (min-width: 1200px) and (max-width: 1299px) {
    .banner.hero-has-form .hero-copy { left: 3%; width: calc(100% - 800px); }
    .hero-copy h1 { font-size: 34px !important; }
    .hero-copy .hc-sub { font-size: 15.5px !important; }
    .hc-stats b { font-size: 22px; }
}

/* Phones and tablets: the form comes first, then a compact proof strip. */
@media (max-width: 1199px) {
    .banner.hero-has-form .hero-copy {
        position: static;
        order: 2;
        transform: none;
        width: auto;
        max-width: 560px;
        margin: 18px auto 0;
        padding: 0 16px;
    }

    /* Keep the h1 (Google indexes the phone layout first), drop the rest. */
    .hc-eyebrow, .hero-copy .hc-sub {
        display: none;
    }

    .hero-copy h1 {
        margin: 0 0 12px !important;
        font-size: 22px !important;
        text-align: center !important;
    }

    .hc-stats { gap: 8px; }
    .hc-stats li { padding: 12px 14px; border-radius: 14px; }
    .hc-stats b { font-size: 20px; }
    .hc-stats span:not(.hc-star) { font-size: 12.5px; }
}