/* ==========================================================================
   Goldy's Automotive — Glass UI layer
   Loaded AFTER style.css / responsive.css / custom.css / color1.css.
   Public site only. Never linked from the admin login or any post-login view.
   Palette is unchanged: brand red #BA0913 on white / dark charcoal.
   ========================================================================== */

:root {
    --g-red: #ba0913;
    --g-red-dark: #8f060e;
    --g-red-soft: rgba(186, 9, 19, .10);
    --g-ink: #343434;
    --g-muted: #6b7078;

    /* glass recipe (light surfaces) */
    --g-surface: rgba(255, 255, 255, .62);
    --g-surface-strong: rgba(255, 255, 255, .80);
    --g-border: rgba(255, 255, 255, .70);
    --g-hairline: rgba(20, 20, 25, .07);
    --g-blur: saturate(165%) blur(16px);
    --g-shadow: 0 10px 30px rgba(18, 20, 25, .08), 0 2px 8px rgba(18, 20, 25, .05);
    --g-shadow-lift: 0 20px 46px rgba(18, 20, 25, .16), 0 4px 12px rgba(18, 20, 25, .07);

    /* glass recipe (dark surfaces) */
    --g-surface-dark: rgba(255, 255, 255, .07);
    --g-border-dark: rgba(255, 255, 255, .14);

    --g-ease: cubic-bezier(.22, .61, .36, 1);
    --g-radius: 16px;
}

/* --------------------------------------------------------------------------
   1. HEADING PARITY
   The homepage now carries exactly one <h1> (the SEO heading). The headings
   that used to be <h1> are <h2 class="as-h1"> and must look identical.
   -------------------------------------------------------------------------- */
.sec-title h2.as-h1 {
    color: #343434;
    font-size: 30px;
    font-weight: 700;
    line-height: 38px;
    text-transform: uppercase;
    padding-top: 3px;
}

.rev_slider_wrapper .wheel-installation h2.as-h1 {
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    margin: 10px 0 22px;
}

.rev_slider_wrapper .wheel-installation .rate h2.as-h1 {
    color: var(--g-red);
    font-size: 48px;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    text-transform: none;
}

.wheel-work-left .title h2.as-h1 {
    position: relative;
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
    display: inline-block;
}

.wheel-work-left .title h2.as-h1::after {
    background: #3a3a3a none repeat scroll 0 0;
    content: "";
    display: inline-block;
    height: 1px;
    left: 235px;
    position: absolute;
    top: 13px;
    width: 535px;
}

.wheel-work-right h2.as-h1 {
    background: var(--g-red) none repeat scroll 0 0;
    color: #fff;
    display: block;
    font-size: 30px;
    font-weight: 700;
    padding: 10px 0 12px 25px;
    text-transform: uppercase;
    margin-bottom: 25px;
}

/* --------------------------------------------------------------------------
   2. REUSABLE GLASS PANEL
   -------------------------------------------------------------------------- */
.glass-panel {
    background: var(--g-surface);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius);
    box-shadow: var(--g-shadow);
    transition: transform .45s var(--g-ease), box-shadow .45s var(--g-ease), background .45s var(--g-ease);
}

/* --------------------------------------------------------------------------
   3. LOCAL SEO INTRO (the new H1 band under the slider)
   -------------------------------------------------------------------------- */
.local-intro-area {
    position: relative;
    padding: 62px 0 40px;
    background:
        radial-gradient(120% 90% at 12% 0%, rgba(186, 9, 19, .07), transparent 60%),
        radial-gradient(90% 80% at 100% 100%, rgba(186, 9, 19, .05), transparent 60%),
        #fbfbfc;
}

.local-intro-card {
    position: relative;
    overflow: hidden;
    padding: 44px 46px 40px;
    text-align: center;
    border-top: 3px solid var(--g-red);
}

.local-intro-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 42%);
}

.local-intro-card > * {
    position: relative;
    z-index: 1;
}

.local-intro-tag {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--g-red-soft);
    border: 1px solid rgba(186, 9, 19, .18);
    color: var(--g-red);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.local-intro-card h1 {
    margin: 0 0 16px;
    color: var(--g-ink);
    font-size: 34px;
    line-height: 1.28;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.local-intro-card > p {
    max-width: 880px;
    margin: 0 auto 24px;
    color: var(--g-muted);
    font-size: 16px;
    line-height: 1.75;
}

.local-intro-card > p a {
    color: var(--g-red);
    font-weight: 600;
    border-bottom: 1px solid rgba(186, 9, 19, .35);
}

.local-intro-card > p a:hover {
    color: var(--g-red-dark);
    border-bottom-color: var(--g-red-dark);
}

.local-intro-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.local-intro-chips li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    border: 1px solid var(--g-hairline);
    color: var(--g-ink);
    font-size: 13px;
    font-weight: 600;
    transition: transform .3s var(--g-ease), border-color .3s var(--g-ease), box-shadow .3s var(--g-ease);
}

.local-intro-chips li i {
    color: var(--g-red);
    font-size: 12px;
}

.local-intro-chips li:hover {
    transform: translateY(-2px);
    border-color: rgba(186, 9, 19, .3);
    box-shadow: 0 6px 16px rgba(186, 9, 19, .12);
}

.local-intro-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.local-intro-actions .aut-cr-btn.inverse {
    background: rgba(255, 255, 255, .7);
    background-image: none;
    color: var(--g-red);
    border: 1px solid rgba(186, 9, 19, .35);
}

.local-intro-actions .aut-cr-btn.inverse:hover {
    color: #fff;
}

/* --------------------------------------------------------------------------
   4. GLASS ON THE EXISTING CARD COMPONENTS
   -------------------------------------------------------------------------- */

/* "100% Transparency / Genuine Spare Parts / Trusted & Quality Service" */
.trusted-service-area .single-item {
    padding: 26px 24px;
    border-radius: var(--g-radius);
    background: var(--g-surface);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-hairline);
    box-shadow: var(--g-shadow);
    transition: transform .45s var(--g-ease), box-shadow .45s var(--g-ease), border-color .45s var(--g-ease);
}

.trusted-service-area .single-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--g-shadow-lift);
    border-color: rgba(186, 9, 19, .22);
}

/* "Our Best Services" tiles */
.best-service-area .single-item {
    border-radius: var(--g-radius);
    box-shadow: var(--g-shadow);
    transition: transform .45s var(--g-ease), box-shadow .45s var(--g-ease);
}

.best-service-area .single-item > .img-holder {
    border-radius: var(--g-radius) var(--g-radius) 0 0;
    overflow: hidden;
}

.best-service-area .single-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--g-shadow-lift);
}

.best-service-area .single-item .title {
    background: var(--g-surface-strong);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border-top: 1px solid var(--g-border);
}

/* Dark "Wheel Works" band — glass tuned for a dark ground */
.wheel-work-right ul li .single-other-service-list {
    background: var(--g-surface-dark);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
    border: 1px solid var(--g-border-dark);
    border-radius: 12px;
    transition: transform .35s var(--g-ease), background .35s var(--g-ease), border-color .35s var(--g-ease);
}

.wheel-work-right ul li .single-other-service-list:hover,
.wheel-work-right ul li.active .single-other-service-list {
    transform: translateX(4px);
    border-color: rgba(255, 255, 255, .28);
}

/* The service list is four narrow columns, so the glass goes on each row
   rather than the column — boxing the columns forces the labels to wrap. */
.wheel-work-left .single-list-item ul li {
    background: var(--g-surface-dark);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
    border: 1px solid var(--g-border-dark);
    border-radius: 10px;
    line-height: 42px;
    padding: 0 14px;
    margin-bottom: 10px;
    white-space: nowrap;
    transition: transform .3s var(--g-ease), border-color .3s var(--g-ease), background .3s var(--g-ease);
}

.wheel-work-left .single-list-item ul li:hover {
    transform: translateX(3px);
    background: rgba(255, 255, 255, .12);
    border-color: rgba(186, 9, 19, .45);
}

/* FAQ accordion */
.faq-content-left .accordion-box .accordion {
    background: var(--g-surface);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-hairline);
    border-radius: 12px;
    margin-bottom: 12px;
    transition: box-shadow .4s var(--g-ease), border-color .4s var(--g-ease);
}

.faq-content-left .accordion-box .accordion:hover {
    box-shadow: var(--g-shadow);
    border-color: rgba(186, 9, 19, .2);
}

/* Gallery tiles */
.work-gallery-right .work-gallery-items .single-item .img-holder {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--g-shadow);
}

/* Team cards */
.meet-our-specialist-area .single-item {
    border-radius: var(--g-radius);
    background: var(--g-surface);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-hairline);
    box-shadow: var(--g-shadow);
    transition: transform .45s var(--g-ease), box-shadow .45s var(--g-ease);
}

.meet-our-specialist-area .single-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--g-shadow-lift);
}

.meet-our-specialist-area .single-item .img-holder {
    border-radius: var(--g-radius) var(--g-radius) 0 0;
    overflow: hidden;
}

/* Blog / news cards */
.single-blog-post {
    border-radius: var(--g-radius);
    background: var(--g-surface);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-hairline);
    box-shadow: var(--g-shadow);
    transition: transform .45s var(--g-ease), box-shadow .45s var(--g-ease);
}

.single-blog-post:hover {
    transform: translateY(-6px);
    box-shadow: var(--g-shadow-lift);
}

/* Call-to-action band: gloss painted as a background layer only.
   The template builds the angled ribbon ends with .box:before / .box:after
   and positions them outside the box, so neither may be overridden and the
   box must never be given overflow:hidden. */
.call-to-action-area .box {
    background-image: linear-gradient(115deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 48%);
}

.call-to-action-area .box h2 {
    z-index: 2;
}

.call-to-action-area .box a {
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
    transition: transform .35s var(--g-ease), box-shadow .35s var(--g-ease), border-radius .35s var(--g-ease);
    z-index: 2;
}

.call-to-action-area .box a:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .24);
}

/* Sticky contact buttons (WhatsApp / Call / Appointment) */
.sticky-buttons a,
.sticky-buttons .btn {
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    transition: transform .3s var(--g-ease), box-shadow .3s var(--g-ease);
}

.sticky-buttons a:hover,
.sticky-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .26);
}

/* Buttons everywhere get a subtle sheen */
.aut-cr-btn {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}

.aut-cr-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent);
    transform: skewX(-22deg);
    transition: left .6s var(--g-ease);
}

.aut-cr-btn:hover::after {
    left: 160%;
}

/* Sub-page cards used by rwc / wheel / engine / brakes / belt / lube / shop */
.zoom-card,
.service-card-item,
.info-card {
    background: var(--g-surface-strong) !important;
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-hairline);
    box-shadow: var(--g-shadow) !important;
}

.zoom-card:hover,
.service-card-item:hover,
.info-card:hover {
    box-shadow: var(--g-shadow-lift) !important;
}

/* Header turns to frosted glass once the sticky state kicks in */
.main-header.stricky-fixed,
.header-lower.stricky-fixed {
    background: rgba(255, 255, 255, .82) !important;
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    box-shadow: 0 6px 24px rgba(18, 20, 25, .10);
    border-bottom: 1px solid var(--g-border);
}

/* --------------------------------------------------------------------------
   5. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .local-intro-card { padding: 34px 26px 30px; }
    .local-intro-card h1 { font-size: 26px; }
    .wheel-work-left .title h2.as-h1::after { display: none; }
}

/* The template hard-codes .call-to-action-area .box at width:950px and then, in
   responsive.css, pulls the heading and button up out of the 60px box with
   negative `top` values. Those offsets overlap once the heading wraps, so below
   the desktop breakpoint the band is reflowed as a normal stacked block.
   Every offset responsive.css sets (box top, h2 top, a top/left) is reset here,
   or the leftovers drag the button back over the heading. */
@media (max-width: 991px) {
    .call-to-action-area {
        padding: 34px 0 36px;
        margin-bottom: 44px;
    }

    .call-to-action-area .box {
        width: 100%;
        height: auto;
        top: 0;
        padding: 0 18px;
        text-align: center;
        background: transparent;
        background-image: none;
    }

    .call-to-action-area .box:before,
    .call-to-action-area .box:after {
        display: none;
    }

    .call-to-action-area .box h2 {
        top: 0;
        padding: 0 0 20px;
        font-size: 20px;
        line-height: 1.35;
        text-align: center;
    }

    .call-to-action-area .box a {
        top: 0;
        left: 0;
        width: 100%;
        max-width: 260px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .local-intro-area { padding-top: 42px; }
    .local-intro-card { padding: 28px 20px 26px; border-radius: 14px; }
    .local-intro-card h1 { font-size: 22px; line-height: 1.32; }
    .local-intro-card > p { font-size: 15px; }
    .local-intro-actions .aut-cr-btn { width: 100%; }
    .rev_slider_wrapper .wheel-installation h2.as-h1 { font-size: 30px; }
    .rev_slider_wrapper .wheel-installation .rate h2.as-h1 { font-size: 32px; }
}

/* --------------------------------------------------------------------------
   6. GRACEFUL DEGRADATION + ACCESSIBILITY
   -------------------------------------------------------------------------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .glass-panel,
    .local-intro-card,
    .trusted-service-area .single-item,
    .best-service-area .single-item .title,
    .faq-content-left .accordion-box .accordion,
    .meet-our-specialist-area .single-item,
    .single-blog-post,
    .zoom-card,
    .main-header.stricky-fixed,
    .header-lower.stricky-fixed {
        background: #fff !important;
    }
    .wheel-work-left .single-list-item,
    .wheel-work-right ul li .single-other-service-list {
        background: rgba(255, 255, 255, .12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .glass-panel,
    .local-intro-chips li,
    .trusted-service-area .single-item,
    .best-service-area .single-item,
    .meet-our-specialist-area .single-item,
    .single-blog-post,
    .aut-cr-btn::after,
    .sticky-buttons a {
        transition: none !important;
    }
    .trusted-service-area .single-item:hover,
    .best-service-area .single-item:hover,
    .meet-our-specialist-area .single-item:hover,
    .single-blog-post:hover {
        transform: none;
    }
}

a:focus-visible,
button:focus-visible,
.aut-cr-btn:focus-visible {
    outline: 2px solid var(--g-red);
    outline-offset: 3px;
}

/* ==========================================================================
   7. MOTION LAYER
   Everything here is gated behind .js-motion, which assets/js/site-motion.js
   puts on <html>. No script, or "reduce motion" on: nothing is ever hidden.
   ========================================================================== */

:root {
    --g-out: cubic-bezier(.16, .84, .44, 1);   /* ease-out — arriving */
    --g-in: cubic-bezier(.55, .06, .68, .19);  /* ease-in  — leaving  */
}


/* Belt and braces: nothing may scroll the page sideways. `clip` is preferred
   over `hidden` because it does not turn the element into a scroll container,
   which would break any position:sticky descendant. */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

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

/* ---- scroll reveal ---- */
.js-motion [data-reveal] {
    opacity: 0;
    transition: opacity .78s var(--g-out), transform .78s var(--g-out);
    will-change: opacity, transform;
}

/* All reveal offsets are VERTICAL.
   A horizontal start offset (translateX) widens the document for every element
   that has not revealed yet, so the page gains a sideways scroll and drifts
   left/right while you scroll down it — worst on phones, where the container
   already fills the viewport. Vertical offsets cannot do that, because a page
   is free to be taller than the screen but must never be wider. */
.js-motion [data-reveal="up"]    { transform: translate3d(0, 34px, 0); }
.js-motion [data-reveal="left"]  { transform: translate3d(0, 30px, 0); }
.js-motion [data-reveal="right"] { transform: translate3d(0, 38px, 0); }
.js-motion [data-reveal="zoom"]  { transform: scale(.94); }

.js-motion [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* Once revealed, drop the hint so hover transforms stay crisp */
.js-motion [data-reveal].is-revealed {
    will-change: auto;
}

/* ---- scroll progress bar ---- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    z-index: 100000;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--g-red), #e8434d);
    box-shadow: 0 0 12px rgba(186, 9, 19, .55);
    pointer-events: none;
}

/* ---- page transitions ---- */
.page-veil {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* arriving: ease-out */
    transition: opacity .5s var(--g-out), visibility 0s linear .5s;
}

.page-veil.is-covering {
    opacity: 1;
    visibility: visible;
    transition: opacity .28s var(--g-in), visibility 0s;
}

/* leaving: ease-in, with a subtle lift so the change of page reads */
.page-veil.is-leaving {
    background: radial-gradient(120% 120% at 50% 50%, #fff 55%, #f4f4f5);
}

.js-motion.is-arriving main,
.js-motion .page-arrive {
    animation: pageArrive .6s var(--g-out) both;
}

@keyframes pageArrive {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .page-veil,
    .scroll-progress { display: none !important; }
}

/* ==========================================================================
   8. SPACING CLEANUP
   ========================================================================== */

/* An unfilled AdSense slot still reserves its block height, which is what put
   the ~130px void between the trust cards and "Our Best Services". */
ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

ins.adsbygoogle {
    margin: 0 auto;
    max-width: 100%;
}

/* The template reserved 143px of empty tail here purely as clearance for the
   grey trapezoid tab that .best-service-area .top-bg lifts up by 59px.
   Clearance is all it needs. */
.trusted-service-area {
    padding-bottom: 66px;
}

.quality-service-area {
    padding-top: 74px;
    padding-bottom: 48px;
}

.wheel-work-area {
    padding-top: 70px;
}

.faq-and-gallery-area {
    padding-top: 74px;
    padding-bottom: 64px;
}

.meet-our-specialist-area {
    padding-top: 74px;
}

.our-latest-news-area {
    padding-top: 74px;
    padding-bottom: 72px;
}

.best-service-area {
    padding-bottom: 44px;
}

@media (max-width: 767px) {
    .trusted-service-area { padding-bottom: 40px; }
    .quality-service-area,
    .wheel-work-area,
    .faq-and-gallery-area,
    .meet-our-specialist-area,
    .our-latest-news-area { padding-top: 52px; }
    .faq-and-gallery-area,
    .our-latest-news-area { padding-bottom: 48px; }
    /* the trapezoid tab is a desktop flourish; it overflows narrow screens */
    .best-service-area .top-bg { display: none; }
    .best-service-area { padding-top: 52px; }
    .best-service-area .sec-title.large-title,
    .best-service-area .our-best-service-items { top: 0; }
}

/* ==========================================================================
   9. STICKY CONTACT BUTTONS  (WhatsApp / Call Now / Appointment)
   Bottom-centre on every public page. Colours unchanged.
   ========================================================================== */
.sticky-buttons {
    position: fixed !important;
    bottom: 20px;
    z-index: 99998;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    flex-direction: row !important;
    width: auto;
    gap: 14px;
    padding: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: saturate(170%) blur(14px);
    backdrop-filter: saturate(170%) blur(14px);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 12px 34px rgba(18, 20, 25, .18);
}

.sticky-buttons .sticky-button {
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    transition: transform .3s var(--g-out), box-shadow .3s var(--g-out), background-color .3s var(--g-out);
}

.sticky-buttons .sticky-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .26);
}

@media (max-width: 767px) {
    .sticky-buttons {
        bottom: 10px;
        width: auto;
        max-width: calc(100% - 20px);
        gap: 6px;
        padding: 6px;
        justify-content: center !important;
    }

    .sticky-buttons .sticky-button {
        flex: 0 1 auto;
        padding: 9px 14px;
    }
}

/* The page's own 480px rules land before this file, so the small-phone sizing
   has to be restated here or the pills stay too wide to fit three across. */
@media (max-width: 480px) {
    .sticky-buttons {
        gap: 5px;
        padding: 5px;
        max-width: calc(100% - 12px);
    }

    .sticky-buttons .sticky-button {
        padding: 8px 10px;
        font-size: 12.5px;
    }

    .sticky-buttons .sticky-button i {
        font-size: 14px;
        margin-right: 5px;
    }
}

/* ==========================================================================
   10. BOOKING PAGE  (parts.blade.php)
   ========================================================================== */
/* style.css has `.stricky + section { margin-top: -158px }` so that the slider
   tucks up under the fixed header. The booking page has a heading there
   instead, which was landing behind the header — so that pull-up is cancelled
   (the selector has to out-specify `.stricky + section`) and the section
   clears the header's real height on its own. */
.stricky + section.booking-area,
.booking-area {
    margin-top: 0;
}

.booking-area {
    /* --site-header-h is published by site-motion.js from the header's real
       measured height; the literal is the no-JS fallback. */
    padding-top: calc(var(--site-header-h, 240px) + 44px);
    padding-bottom: 70px;
    background:
        radial-gradient(110% 70% at 8% 0, rgba(186, 9, 19, .07), transparent 62%),
        radial-gradient(90% 70% at 100% 100%, rgba(186, 9, 19, .05), transparent 62%),
        #fbfbfc;
}

.booking-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--g-red-soft);
    border: 1px solid rgba(186, 9, 19, .18);
    color: var(--g-red);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.booking-area .sec-title h1 {
    color: var(--g-ink);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    margin: 0 0 12px;
}

.booking-lead {
    max-width: 620px;
    margin: 16px auto 0;
    color: var(--g-muted);
    font-size: 16px;
}

.booking-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-top: 12px;
}

.booking-col {
    display: flex;
    flex-direction: column;
    margin-bottom: 26px;
}

.booking-form,
.services-panel {
    flex: 1 1 auto;
    padding: 34px 32px 36px;
    border-top: 3px solid var(--g-red);
}

.booking-form-title,
.services-panel-title {
    margin: 0 0 22px;
    color: var(--g-ink);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.booking-form .form-group {
    margin-bottom: 18px;
}

.booking-form label {
    display: block;
    margin-bottom: 7px;
    color: var(--g-ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.booking-form .form-control {
    width: 100%;
    height: auto;
    padding: 12px 15px;
    border-radius: 10px;
    border: 1px solid rgba(20, 20, 25, .12);
    background: rgba(255, 255, 255, .78);
    color: var(--g-ink);
    font-size: 15px;
    box-shadow: none;
    transition: border-color .3s var(--g-out), box-shadow .3s var(--g-out), background .3s var(--g-out);
}

.booking-form .form-control:focus {
    outline: none;
    background: #fff;
    border-color: var(--g-red);
    box-shadow: 0 0 0 4px rgba(186, 9, 19, .12);
}

.booking-form textarea.form-control {
    min-height: 118px;
    resize: vertical;
}

/* radios rendered as selectable chips */
.service-choice .form-check {
    display: inline-block;
    margin: 0 8px 10px 0;
    padding: 0;
}

.service-choice .form-check-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.service-choice .form-check-label {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(20, 20, 25, .14);
    background: rgba(255, 255, 255, .8);
    color: var(--g-ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .28s var(--g-out);
}

.service-choice .form-check-label:hover {
    border-color: rgba(186, 9, 19, .4);
    transform: translateY(-2px);
}

.service-choice .form-check-input:checked + .form-check-label {
    background: var(--g-red);
    border-color: var(--g-red);
    color: #fff;
    box-shadow: 0 8px 20px rgba(186, 9, 19, .3);
}

.service-choice .form-check-input:focus-visible + .form-check-label {
    outline: 2px solid var(--g-red);
    outline-offset: 3px;
}

.booking-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 30px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(180deg, #d51e27, #bb0a13);
    color: #fff;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(186, 9, 19, .28);
    transition: transform .3s var(--g-out), box-shadow .3s var(--g-out);
}

.booking-submit:hover,
.booking-submit:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(186, 9, 19, .38);
}

/* services accordion */
.services-panel #service-list {
    margin: 0;
    padding: 0;
}

.services-panel #service-list > li {
    margin-bottom: 10px;
    border-radius: 12px;
    border: 1px solid var(--g-hairline);
    background: rgba(255, 255, 255, .72);
    overflow: hidden;
    transition: border-color .3s var(--g-out), box-shadow .3s var(--g-out);
}

.services-panel #service-list > li:hover,
.services-panel #service-list > li.is-open {
    border-color: rgba(186, 9, 19, .28);
    box-shadow: 0 8px 20px rgba(18, 20, 25, .08);
}

.toggle-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: transparent;
    color: var(--g-ink);
    font-weight: 600;
    font-size: 15px;
    border-radius: 12px;
    transition: color .28s var(--g-out);
}

.toggle-header:hover {
    color: var(--g-red);
}

.toggle-icon {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    background: var(--g-red-soft);
    color: var(--g-red) !important;
    font-size: 16px;
    font-weight: 700;
    transition: transform .3s var(--g-out), background .3s var(--g-out);
}

.services-panel #service-list > li.is-open .toggle-icon {
    background: var(--g-red);
    color: #fff !important;
    transform: rotate(180deg);
}

/* max-height animates; display does not */
.toggle-desc {
    max-height: 0;
    overflow: hidden;
    margin: 0 18px;
    color: var(--g-muted);
    font-size: 14px;
    line-height: 1.65;
    font-style: italic;
    transition: max-height .42s var(--g-out), padding .42s var(--g-out);
}

.services-panel #service-list > li.is-open .toggle-desc {
    padding-bottom: 16px;
}

@media (max-width: 991px) {
    .booking-area { padding-top: calc(var(--site-header-h, 0px) + 46px); padding-bottom: 56px; }
    .booking-area .sec-title h1 { font-size: 27px; }

    /* The columns are .col-lg-7 / .col-lg-5 with .col-md-12, so Bootstrap sets
       no width at all below 992px. As block elements that is fine — they fill
       the row — but as flex items they shrink to their content and the cards
       end up narrow and off-centre. Flex is only needed for the equal-height
       side-by-side desktop layout, so drop it here. */
    .booking-grid,
    .booking-col {
        display: block;
    }
    .booking-form,
    .services-panel { padding: 28px 22px 30px; }
}

@media (max-width: 575px) {
    .booking-area { padding-top: calc(var(--site-header-h, 0px) + 38px); padding-bottom: 48px; }
    .booking-area .sec-title h1 { font-size: 22px; }
    .booking-lead { font-size: 15px; }
    .booking-form,
    .services-panel { padding: 24px 18px 26px; border-radius: 14px; }
    .service-choice .form-check { display: block; margin-right: 0; }
    .service-choice .form-check-label { display: block; text-align: center; }
    .booking-submit { width: 100%; justify-content: center; }
}

/* ==========================================================================
   11. LOCATIONS & SUBURBS
   ========================================================================== */
.locations-area {
    padding: 74px 0 66px;
    background:
        radial-gradient(90% 60% at 0 0, rgba(186, 9, 19, .06), transparent 62%),
        radial-gradient(80% 60% at 100% 100%, rgba(186, 9, 19, .05), transparent 62%),
        #fbfbfc;
}

.locations-area .sec-title,
.reviews-area .sec-title {
    margin-bottom: 44px;
}

.locations-grid {
    display: flex;
    flex-wrap: wrap;
}

.locations-grid > div {
    display: flex;
    margin-bottom: 26px;
}

.branch-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 30px 30px 32px;
    border-top: 3px solid var(--g-red);
}

.branch-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--g-hairline);
}

.branch-pin {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    border-radius: 50%;
    background: var(--g-red);
    color: #fff;
    font-size: 20px;
    box-shadow: 0 8px 18px rgba(186, 9, 19, .3);
}

.branch-heading h3 {
    margin: 0 0 6px;
    color: var(--g-ink);
    font-size: 21px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.branch-address {
    margin: 0;
    color: var(--g-muted);
    font-size: 15px;
    line-height: 1.6;
}

.branch-contact {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}

.branch-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 7px 0;
    font-size: 15px;
    color: var(--g-ink);
    word-break: break-word;
}

.branch-contact li i {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    background: var(--g-red-soft);
    color: var(--g-red);
    font-size: 13px;
}

.branch-contact a {
    color: var(--g-ink);
    border-bottom: 1px solid transparent;
    transition: color .3s var(--g-out), border-color .3s var(--g-out);
}

.branch-contact a:hover {
    color: var(--g-red);
    border-bottom-color: rgba(186, 9, 19, .4);
}

.branch-phones .sep {
    color: var(--g-muted);
    padding: 0 4px;
}

.branch-suburbs {
    flex: 1 1 auto;
    margin-bottom: 24px;
}

.branch-suburbs h4 {
    margin: 0 0 14px;
    color: var(--g-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.branch-suburbs h4::after {
    content: "";
    display: block;
    width: 34px;
    height: 2px;
    margin-top: 8px;
    background: var(--g-red);
}

.suburb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.suburb-chips li {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--g-hairline);
    background: rgba(255, 255, 255, .8);
    color: var(--g-ink);
    font-size: 13px;
    font-weight: 600;
    transition: transform .28s var(--g-out), border-color .28s var(--g-out), box-shadow .28s var(--g-out);
}

.suburb-chips li:hover {
    transform: translateY(-2px);
    border-color: rgba(186, 9, 19, .34);
    box-shadow: 0 6px 16px rgba(186, 9, 19, .12);
}

.branch-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.branch-actions .aut-cr-btn.inverse {
    background: rgba(255, 255, 255, .72);
    background-image: none;
    color: var(--g-red);
    border: 1px solid rgba(186, 9, 19, .35);
}

.branch-actions .aut-cr-btn.inverse:hover {
    background: var(--g-red);
    background-image: none;
    color: #fff;
}

/* ==========================================================================
   12. GOOGLE REVIEWS
   ========================================================================== */
.reviews-area {
    padding: 74px 0 78px;
    background: #fff;
}

.reviews-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 30px;
    margin-bottom: 32px;
    border-left: 4px solid var(--g-red);
}

.reviews-score {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.reviews-score .score {
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: var(--g-ink);
}

.reviews-score .stars,
.review-stars {
    color: #f5a623;
    letter-spacing: 2px;
    font-size: 16px;
}

.reviews-score .count {
    color: var(--g-muted);
    font-size: 14px;
}

/* Single auto-scrolling row.
   Spacing is margin-right on each card rather than flex `gap`, deliberately:
   with `gap`, one set is N*card + (N-0.5)*gap wide but translateX(-50%) moves
   half the whole track, so the loop lands half a gap out and visibly jumps.
   With margin baked into every card, one set is exactly 50% of the track. */
.reviews-marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.reviews-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    padding: 6px 0 10px;
    /* site-motion.js overrides this to hold a constant px/second speed
       whatever the review count; this is the no-JS fallback. */
    animation: reviewsScroll 70s linear infinite;
}

@keyframes reviewsScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Let people stop it to actually read one. */
.reviews-marquee:hover .reviews-track,
.reviews-marquee:focus-within .reviews-track {
    animation-play-state: paused;
}

.reviews-track .review-card {
    flex: 0 0 auto;
    width: 380px;
    min-height: 300px;
    margin-right: 24px;
}

@media (prefers-reduced-motion: reduce) {
    .reviews-track {
        animation: none;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }
    /* the duplicate set is decorative — drop it when not scrolling */
    .reviews-track .review-card[aria-hidden="true"] {
        display: none;
    }
    .reviews-marquee {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 26px 22px;
    overflow: hidden;
}

.review-card::after {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--g-red), rgba(186, 9, 19, 0));
}

.review-quote {
    position: absolute;
    top: 6px;
    right: 20px;
    font-size: 72px;
    line-height: 1;
    color: rgba(186, 9, 19, .1);
    font-family: Georgia, 'Times New Roman', serif;
    pointer-events: none;
}

.review-stars {
    margin-bottom: 12px;
    font-size: 14px;
}

.review-text {
    flex: 1 1 auto;
    margin: 0 0 20px;
    color: var(--g-muted);
    font-size: 15px;
    line-height: 1.7;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--g-hairline);
}

.review-author img,
.review-initial {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.review-initial {
    display: inline-block;
    line-height: 44px;
    text-align: center;
    background: var(--g-red);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
}

.review-author strong {
    display: block;
    color: var(--g-ink);
    font-size: 15px;
}

.review-author em {
    display: block;
    color: var(--g-muted);
    font-size: 13px;
    font-style: normal;
}

.reviews-empty {
    max-width: 660px;
    margin: 0 auto;
    padding: 40px 34px 38px;
    text-align: center;
    border-top: 3px solid var(--g-red);
}

.reviews-empty > i {
    font-size: 34px;
    color: var(--g-red);
    margin-bottom: 16px;
    display: block;
}

.reviews-empty h3 {
    margin: 0 0 12px;
    color: var(--g-ink);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
}

.reviews-empty p {
    margin: 0 auto 24px;
    max-width: 480px;
    color: var(--g-muted);
    font-size: 15px;
}

@media (max-width: 991px) {
    .locations-area,
    .reviews-area { padding: 56px 0 52px; }
    .branch-card { padding: 26px 22px 28px; }
    .reviews-summary { justify-content: center; text-align: center; }
}

@media (max-width: 575px) {
    .locations-area,
    .reviews-area { padding: 46px 0 44px; }
    .branch-card { padding: 22px 18px 24px; border-radius: 14px; }
    .branch-head { gap: 12px; }
    .branch-heading h3 { font-size: 18px; }
    .suburb-chips li { font-size: 12px; padding: 6px 12px; }
    .branch-actions .aut-cr-btn { width: 100%; }
    .reviews-score .score { font-size: 32px; }
    .review-card { padding: 22px 20px 18px; }
}

/* ==========================================================================
   13. LEAVE-A-REVIEW
   ========================================================================== */
.reviews-summary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.reviews-summary-actions .aut-cr-btn.inverse,
.review-invite-actions .aut-cr-btn.inverse,
.reviews-empty .aut-cr-btn.inverse {
    background: rgba(255, 255, 255, .72);
    background-image: none;
    color: var(--g-red);
    border: 1px solid rgba(186, 9, 19, .35);
}

.reviews-summary-actions .aut-cr-btn.inverse:hover,
.review-invite-actions .aut-cr-btn.inverse:hover,
.reviews-empty .aut-cr-btn.inverse:hover {
    background: var(--g-red);
    background-image: none;
    color: #fff;
}

.reviews-summary-actions .aut-cr-btn i {
    margin-right: 7px;
}

.review-invite {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-top: 30px;
    padding: 26px 30px;
    border-left: 4px solid var(--g-red);
}

.review-invite-text h3 {
    margin: 0 0 8px;
    color: var(--g-ink);
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.review-invite-text h3 i {
    color: var(--g-red);
    margin-right: 8px;
}

.review-invite-text p {
    margin: 0;
    color: var(--g-muted);
    font-size: 15px;
}

.review-invite-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* per-branch review link on the location cards */
.branch-review-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px dashed var(--g-hairline);
    width: 100%;
    color: var(--g-muted);
    font-size: 13.5px;
    font-weight: 600;
    transition: color .3s var(--g-out);
}

.branch-review-link i {
    color: var(--g-red);
    font-size: 15px;
}

.branch-review-link:hover {
    color: var(--g-red);
}

@media (max-width: 767px) {
    .review-invite {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 20px;
    }

    .review-invite-actions,
    .reviews-summary-actions {
        width: 100%;
    }

    .review-invite-actions .aut-cr-btn,
    .reviews-summary-actions .aut-cr-btn {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* Google review bodies range from one line to several paragraphs. Clamp them
   so the grid stays even; the full text is a click away on Google. */
.review-text {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-card .review-text {
    white-space: pre-line;
}


/* marquee: narrower cards on small screens */
@media (max-width: 767px) {
    .reviews-track .review-card {
        width: 300px;
        min-height: 280px;
        margin-right: 16px;
    }
}

@media (max-width: 420px) {
    .reviews-track .review-card {
        width: 265px;
        margin-right: 14px;
    }
}

/* ==========================================================================
   14. MOBILE IMAGE SIZING
   The theme sizes these photos for a multi-column desktop grid. Once the
   columns stack on a phone each one becomes full-bleed — 515x515 team photos,
   497px gallery tiles — so the page balloons to ~18,700px and reads as one
   long run of oversized pictures with big empty gaps between the content.
   Cap them and give the gallery a real thumbnail grid.
   ========================================================================== */
@media (max-width: 767px) {

    /* Work gallery: 2-up thumbnails instead of five full-width images. */
    .work-gallery-right .work-gallery-items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .work-gallery-right .work-gallery-items .single-item {
        width: auto;
        float: none;
        margin: 0;
        padding: 0;
    }

    .work-gallery-right .work-gallery-items .single-item .img-holder,
    .work-gallery-right .work-gallery-items .single-item .img-holder img {
        width: 100%;
        height: 132px;
    }

    .work-gallery-right .work-gallery-items .single-item .img-holder img {
        object-fit: cover;
        display: block;
    }

    /* "Our Best Services" tiles */
    .best-service-area .single-item > .img-holder img {
        min-height: 0;
        height: 215px;
        width: 100%;
        object-fit: cover;
        display: block;
    }

    /* Team photos — square and full width is far too tall stacked */
    .meet-our-specialist-area .single-item .img-holder img {
        height: 250px;
        width: 100%;
        object-fit: cover;
        object-position: center top;
        display: block;
    }

    /* News thumbnails */
    .our-latest-news-area .single-blog-post .img-holder img {
        height: 190px;
        width: 100%;
        object-fit: cover;
        display: block;
    }
}

/* ==========================================================================
   15. SINGLE-WORKSHOP LOCATION CARD
   One shop, so the card runs full width and splits internally instead of
   sitting in a half-width column with dead space beside it.
   ========================================================================== */
.branch-card--single {
    padding: 32px 34px 34px;
}

.branch-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}

.branch-split .branch-suburbs {
    margin-bottom: 0;
    padding-left: 34px;
    border-left: 1px solid var(--g-hairline);
}

.branch-card--single .branch-contact li i.fa-clock-o {
    align-self: flex-start;
}

.branch-hours {
    color: var(--g-muted);
    font-size: 14px;
    line-height: 1.65;
}

.branch-card--single .branch-actions {
    margin-top: 4px;
}

@media (max-width: 991px) {
    .branch-card--single {
        padding: 26px 22px 28px;
    }

    .branch-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .branch-split .branch-suburbs {
        padding-left: 0;
        padding-top: 24px;
        border-left: none;
        border-top: 1px solid var(--g-hairline);
    }
}

@media (max-width: 575px) {
    .branch-card--single {
        padding: 22px 18px 24px;
    }
}