/* ==================================================
   ClientScore Homepage Typography
   Aligns the Elementor-built homepage with the Inter /
   Plus Jakarta Sans system used across the rest of the
   site, and fixes the "INT" font-family typo in the
   WPCode "ClientScore Hero" snippet (it was falling back
   to the browser's generic sans-serif instead of Inter).
================================================== */

/* Hero H1 - "Know your clients." should render black; "Quote with
   confidence." stays blue via the sitewide h1 span rule in
   astra-child/style.css, which is more specific than this and wins for
   just that span. */
.elementor-element-eec8d17 h1 {
    color: #000000 !important;
}

/* Elementor's own default padding on full-width flex Containers
   (.e-con-full) - not something set anywhere in our own CSS files, but
   present on every full-width flex container across the homepage,
   fighting any padding set from inside our own custom sections/widgets.
   Zeroed out here so padding on these containers is controlled entirely
   from Elementor's own editor going forward. */
.e-con.e-con-full {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Hero primary CTA text column - now e-con-full, so it's also caught by
   the sitewide e-con-full reset above (which zeroes it out). Overriding
   with 28px on both sides here, mobile only, since this column needs its
   own side spacing instead of flush edges on small screens. */
@media (max-width: 767px) {
    .elementor-element.elementor-element-367ef89 {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
}

/* Exception: the hero's "Client Overview" floating card (score ring +
   Pays on Time/Communication/etc list) is a custom embed widget
   (#coEmbedRoot / .co-embed), not an Elementor Container, so it wasn't
   affected by the .e-con-full reset above - it lost its padding for a
   different reason. Restoring it directly here. */
#coEmbedRoot {
    padding: 20px !important;
}

.cs-trust-bar,
.cs-feature-grid,
.cs-feature-card,
.cs-feature-card .elementor-heading-title,
.cs-feature-card p,
.cs-trust-item .elementor-heading-title,
.cs-trust-item p {
    font-family: 'Inter', sans-serif !important;
}

.elementor-widget-heading .elementor-heading-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p {
    font-family: 'Inter', sans-serif !important;
}

/* Eyebrow labels: CHECK CLIENTS / LEAVE REVIEWS
   (sized/styled to match design/how-it-works-mockup-comparison.html's
   .cp-hero-eyebrow) */
.elementor-element-88c042f .elementor-heading-title,
.elementor-element-48195f8 .elementor-heading-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

/* Section headlines
   (sized/styled to match design/how-it-works-mockup-comparison.html's
   .cp-hero h1) */
.elementor-element-feabbbc .elementor-heading-title,
.elementor-element-7023534 .elementor-heading-title,
.elementor-element-f232bd9 .elementor-heading-title {
    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #0f172a !important;
}

/* Body copy under the section headlines.
   CHECK CLIENTS (bdbb857) lost its <p> wrapper at some point when its
   text was edited in Elementor, so the "p" descendant selector below
   stopped matching it - it's targeted directly here as a fallback. */
.elementor-element-bdbb857 p,
.elementor-element-bdbb857,
.elementor-element-737271a p,
.elementor-element-2dd22ff p {
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #5f6b7a !important;
}

/* Feature checklist icons (CHECK CLIENTS / LEAVE REVIEWS): swap the
   off-brand light blue (Elementor global --e-global-color-primary)
   for the brand green used for checkmarks elsewhere on the site. */
.elementor-element-c517227 .elementor-icon-list-icon svg,
.elementor-element-5682f96 .elementor-icon-list-icon svg {
    fill: #2fa83f !important;
}

.elementor-element-c517227 .elementor-icon-list-icon i,
.elementor-element-5682f96 .elementor-icon-list-icon i {
    color: #2fa83f !important;
}

/* Bump the checklist icon size up (was 14px via Elementor's
   --e-icon-list-icon-size custom property, now 20px). This variable
   also drives the list item's inherited font-size, so pin the text
   back to 15px to match the body copy above it. */
.elementor-element-c517227,
.elementor-element-5682f96 {
    --e-icon-list-icon-size: 20px !important;
}

.elementor-element-c517227 .elementor-icon-list-icon svg,
.elementor-element-5682f96 .elementor-icon-list-icon svg {
    width: 20px !important;
    height: 20px !important;
}

.elementor-element-c517227 .elementor-icon-list-text,
.elementor-element-5682f96 .elementor-icon-list-text {
    font-size: 18px !important;
}

/* Cap the checklist width to match the 440px paragraph above it, so
   both wrap at the same reading width instead of the list stretching
   to the full column. */
.elementor-element-c517227,
.elementor-element-5682f96 {
    max-width: 440px !important;
}

/* Hero visual overflow mask
   The tradie photo (.cs-hero-tradie-mask) and background circle are tall
   and were bleeding past the hero section's natural bottom/right edges
   into the next section (LEAVE REVIEWS) - visible on the right past the
   column, and covering that section's own image below. Raising z-index
   on the LEAVE REVIEWS side wasn't enough to reliably win that stacking
   comparison across sections, so instead the overflow is clipped at the
   source: this hero visual column now hard-clips anything that extends
   past its own box, and the gradient fades to white just inside that
   clipped edge instead of overshooting past it. */
.elementor-element-41e51d9 {
    position: relative !important;
    overflow: hidden !important;
}

.elementor-element-41e51d9::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 55%);
    z-index: 20;
    pointer-events: none;
}

/* Desktop-only hero image/card positioning tweaks, found via live
   DevTools testing on a desktop viewport. Elementor already has its
   own mobile-breakpoint values for these same elements' position/size
   controls - these fixed-pixel !important overrides have no media
   query awareness of their own, so without this guard they'd stomp
   over Elementor's mobile values too, causing a large empty gap
   under the hero on small screens (e.g. a 495px-tall container that
   doesn't suit the stacked mobile layout). */
@media (min-width: 768px) {
    .elementor-element.elementor-element-41e51d9.e-con-full.e-flex.e-con.e-child {
        height: 495px !important;
    }

    .cs-hero-tradie-mask {
        width: 420px !important;
        transform: translateY(40px) !important;
    }

    body:not(.rtl) .elementor-15 .elementor-element.elementor-element-78a2d70 {
        right: -57px !important;
        top: -65px;
    }

    .cs-hero-card {
        left: 80px !important;
    }
}

/* "Why ClientScore" section - sits between the hero and the trust bar.
   Replaces the earlier negatively-framed "The Problem" section with a
   positive benefit-card layout (icon + h3 + p x3), reusing the same
   section-level spacing rules (still targeted below and in the mobile
   gap-normalization block via .cs-why). Markup is a plain HTML widget;
   styling lives here instead of an inline <style> block in the widget
   itself. */
.cs-why {
    background: #f8fafc;
    text-align: left !important;
    padding: 80px 0;
    font-family: 'Inter', sans-serif;
}

.cs-why-inner {
    max-width: 1280px;
    margin: 0 auto;
    text-align: left !important;
}

.cs-why .cs-eyebrow-local {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #2d7ff9;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.cs-why h2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
    color: #0f172a;
    margin: 0 0 36px;
}

/* Class-based version of the "Everything you need to quote smart."
   heading's styling above, for use on an <h3> once it's promoted from
   h2 - a class selector avoids the earlier heading-hierarchy fix
   breaking against Astra's own generic h2/h3 tag-based typography
   (astra-theme-css-inline-css), since this doesn't rely on tag
   matching at all. */
.cs-heading-local {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
    color: #0f172a;
    margin: 0 0 36px;
}

.cs-why-row {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: left !important;
}

/* Icon beside the heading (not stacked above it) at all viewport
   sizes - icon + h4 are siblings in the source HTML widget, not
   wrapped together, so a 2-column grid places them on row 1 and lets
   the paragraph span both columns on row 2, centered against the
   icon's height. */
.cs-why-item {
    padding: 0 24px 0 0;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    align-items: center;
}

.cs-why-item:not(:first-child) {
    padding-left: 60px;
}

.cs-why-item + .cs-why-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: #dde3ea;
}

.cs-why-icon {
    font-size: 40px;
    grid-row: 1;
    grid-column: 1;
}

.cs-why-icon.is-blue {
    color: #2d7ff9;
}

.cs-why-icon.is-green {
    color: #2fa83f;
}

.cs-why-item h4 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.2;
    grid-row: 1;
    grid-column: 2;
}

.cs-why-item p {
    font-size: 18px;
    color: #5f6b7a;
    line-height: 1.55;
    margin-top: 12px;
    grid-row: 2;
    grid-column: 1 / -1;
}

@media (max-width: 767px) {
    .cs-why-row {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .cs-why-item,
    .cs-why-item:not(:first-child) {
        padding: 0;
    }

    .cs-why-item + .cs-why-item::before {
        display: none;
    }
}

/* CHECK CLIENTS and LEAVE REVIEWS column widths - both rows were an
   uneven split (35/55 and 70/45) between the text column and the
   visual card column; forced to an even 50/50 split so the search
   card and review card (now with their max-width cap removed) get
   equal room to the text beside them. Desktop-only: these columns
   stack to full width on mobile via Elementor's own responsive
   behaviour, and an unscoped 50% here fought that stacking, squeezing
   both columns side by side on narrow screens instead. */
@media (min-width: 768px) {
    .elementor-15 .elementor-element.elementor-element-bf41a4d,
    .elementor-15 .elementor-element.elementor-element-4ce7bef,
    .elementor-15 .elementor-element.elementor-element-b1fc520,
    .elementor-15 .elementor-element.elementor-element-f9a08f3 {
        width: 50% !important;
    }
}

/* Mobile stacking order fix - CHECK CLIENTS puts the search card
   column first in the DOM (it's the left column on desktop), so when
   the row stacks on mobile the card floats in above its own "CHECK
   CLIENTS" heading, disconnected from context. LEAVE REVIEWS doesn't
   have this problem since its text column is already first in the
   DOM. Targets whichever of the two known CHECK CLIENTS columns
   actually contains the search card, rather than hardcoding which ID
   is which (safer if Elementor ever regenerates these IDs). */
@media (max-width: 767px) {
    .elementor-15 .elementor-element.elementor-element-bf41a4d:has(.cs-home-search-card),
    .elementor-15 .elementor-element.elementor-element-4ce7bef:has(.cs-home-search-card) {
        order: 2;
    }
}

/* Leave Reviews card paragraph - Astra's global .entry-content p rule
   adds a 1.6em bottom margin here; unwanted on mobile where it creates
   excess gap before the icon list below it. */
@media (max-width: 767px) {
    .elementor-15 .elementor-element.elementor-element-737271a p {
        margin-bottom: 0;
    }
}

/* "Search before you quote" card - the visual for the CHECK CLIENTS
   feature row. Classes are prefixed cs-home- (not cs-search-*) to
   avoid colliding with the real, functionally-identical .cs-search-*
   classes used on the actual /search/ dashboard page - that stylesheet
   loads site-wide, not just on its own page. */
.cs-home-search-card {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.08);
    padding: 24px;
    font-family: 'Inter', sans-serif;
}

.cs-home-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12px;
    color: #9aa4b2;
    margin-bottom: 16px;
}

.cs-home-search-result {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f8fbff;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    padding: 16px 18px;
}

.cs-home-ring { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.cs-home-ring svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.cs-home-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.cs-home-ring .ring-bg, .cs-home-ring .ring-gap { stroke: #e5e7eb; }
.cs-home-ring .ring-remaining { stroke: #2d7ff9; }
.cs-home-ring .ring-score { stroke: #2fa83f; }
.cs-home-ring-content {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cs-home-ring-content strong {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 18px; font-weight: 800; color: #0f172a; line-height: 1;
}

.cs-home-result-name { font-size: 18px; font-weight: 700; color: #0f172a; }
.cs-home-result-meta { font-size: 12px; color: #5f6b7a; margin-top: 2px; }

/* "Every score you leave makes the next quote safer" card - the visual
   for the reframed LEAVE REVIEWS feature row. Same green-bar pattern as
   the client portal's Score Breakdown (no stars), and the same
   responsive width: 100% treatment as .cs-home-search-card so it fills
   its Elementor container instead of floating at a fixed size. */
.cs-home-review-card {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.08);
    padding: 24px;
    font-family: 'Inter', sans-serif;
}

.cs-home-review-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 18px;
}

.cs-home-review-row {
    display: grid;
    grid-template-columns: 110px 1fr 40px;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.cs-home-review-row:last-child {
    margin-bottom: 0;
}

.cs-home-review-row span {
    font-size: 13px;
    color: #3a4454;
}

.cs-home-review-row strong {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    text-align: right;
}

.cs-home-review-bar {
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.cs-home-review-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: #2fa83f;
}

/* Final CTA section - closes the page after LEAVE REVIEWS (the trust
   statement section that used to sit between them was removed - this
   now carries its own margin-top to keep that gap deliberate rather
   than whatever's left over). Background matches .btn-secondary's
   hover colour (#F7FAFF) for a light, cohesive close to the page. */
.cs-final-cta {
    background: #F7FAFF;
    padding: 80px 0;
    font-family: 'Inter', sans-serif;
}

/* Elementor's own wrapping container around this widget carries a
   small native bottom padding on top of .cs-final-cta's own - strip
   it so the section doesn't have two stacked sources of bottom gap
   before the footer. */
.elementor-element.elementor-element-f87fc77 {
    padding-bottom: 0 !important;
}

.cs-final-cta-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    text-align: left;
}

.cs-final-cta .cs-eyebrow-local {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #2d7ff9;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.cs-final-cta h2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 12px;
}

/* Class-based version of the "Know before you go." heading's styling
   above, for use on an <h3> once it's promoted from h2 - same reasoning
   as .cs-heading-local (avoids relying on tag matching, which breaks
   the moment the HTML tag changes and Astra's own generic tag-based
   typography takes over instead). */
.cs-heading-local-cta {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

/* The heading is wrapped in its own generic <div> in the live markup
   (<div><h3 class="cs-heading-local-cta">...</h3></div>), separate from
   the paragraph's own wrapper div - margin-bottom on the h3 itself
   wasn't producing a reliable visible gap between the two divs, so the
   spacing is applied to the wrapper div directly instead. */
.cs-final-cta-text > div:has(.cs-heading-local-cta) {
    margin-bottom: 20px;
}

.cs-final-cta p {
    font-size: 18px;
    color: #5f7a9e;
    margin: 0 0 28px;
}

/* Button reuses the sitewide .btn-primary class (see astra-child/
   style.css) instead of a bespoke class - the earlier .cs-final-cta-btn
   drifted out of sync with the hero's button (missing !important on
   text-decoration caused a stray underline, and a different padding
   model made it look narrower/skinnier). Reusing .btn-primary directly
   guarantees pixel parity and stays in sync with any future tweak. */

/* Hero's button has an Elementor-set min-width (285px) that the plain
   .btn-primary/.e-button-base classes alone don't carry - matching it
   explicitly here so both buttons render the same size. Padding
   (16px/32px) already matches via .btn-primary, only min-width needed
   restating. */
.cs-final-cta .btn-primary {
    min-width: 285px;
}

/* Tertiary "How It Works" link below the primary button - a third tier
   below .btn-primary and .btn-secondary (the outline style reserved for
   Login in the hero), so it needs its own treatment rather than reusing
   either. Bumped up from a small 14px/600 muted link to 17px/700 so it
   "pops" more, but stays plain text (no border/background) so it reads
   as a lower-commitment option, not a second button competing with
   .btn-primary. The arrow nudges right on hover (see .arrow below) for
   the same reason - motion instead of button chrome. */
.cs-final-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 17px;
    font-weight: 700;
    color: #2d7ff9;
    text-decoration: none !important; /* Astra's .entry-content a underline (2 classes + element) otherwise outranks this 1-class selector - same fix as .cs-faq-sidebar-item */
}

.cs-final-cta-link:hover {
    text-decoration: underline;
}

.cs-final-cta-link .arrow {
    transition: transform 0.2s ease;
}

.cs-final-cta-link:hover .arrow {
    transform: translateX(4px);
}

.cs-final-cta-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-phone-crop {
    width: 100%;
    max-width: 320px;
    height: 260px;
    overflow: hidden;
    position: relative;
}

.cs-phone-frame {
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #0f172a;
    border-radius: 40px;
    padding: 14px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.cs-phone-frame::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 18px;
    background: #0f172a;
    border-radius: 999px;
    z-index: 2;
}

.cs-phone-screen {
    width: 100%;
    height: 100%;
    background: #ffffff;
    border-radius: 28px;
    overflow: hidden;
}

.cs-phone-screen img {
    display: block;
    width: 100%;
    height: auto;
}

/* Mobile gap normalization
   The desktop margin-bottom/margin-top values above (50px on
   .cs-why/.cs-final-cta) were tuned against desktop measurements only.
   Elementor's own native section padding shrinks differently at the
   mobile breakpoint, so the same flat margins produced wildly
   inconsistent gaps on mobile (measured: 10px, 60px, 40px, 100px, 20px
   between hero/problem/checkClients/leaveReviews/proof/cta). These
   overrides target a consistent ~40px gap on mobile, matching the one
   native Elementor gap (CHECK CLIENTS -> LEAVE REVIEWS) that isn't
   safe to adjust directly. */
@media (max-width: 767px) {
    /* Hero text column (HTML widget) - matches the 28px mobile side-inset
       used everywhere else on the page; no CSS in this file previously
       targeted it, so it was sitting flush against the viewport edge. */
    .elementor-element-eec8d17 .elementor-widget-container {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    .cs-why {
        padding-top: 48px;
        padding-bottom: 48px;
        padding-left: 28px;
        padding-right: 28px;
    }

    .cs-final-cta {
        padding-top: 0;
        padding-left: 28px;
        padding-right: 28px;
        padding-bottom: 32px;
    }

    .cs-final-cta-inner {
        grid-template-columns: 1fr;
        text-align: left;
        gap: 32px;
    }

    /* Hero's "Join as a trade" button is an Elementor Button widget
       with its own full-width-on-mobile setting; this CTA's button is
       a plain HTML link, so it needs the same treatment spelled out
       explicitly to match. Scoped to this section only, not a
       sitewide change to .btn-primary. */
    .cs-final-cta .btn-primary {
        display: block;
        width: 100%;
    }

    .cs-phone-crop {
        height: 180px;
    }
}

/* Animated "Search before you quote" card - cycles through 6 example
   searches (typewriter effect + blinking cursor + score-ring reveal),
   replacing the previous static single-example card. Base card/bar/
   result/ring classes above (.cs-home-search-card etc.) are unchanged;
   these are additive-only. */
.cs-home-search-icon { width: 14px; height: 14px; flex-shrink: 0; color: #9aa4b2; }

.cs-home-search-typed { color: #0f172a; font-weight: 500; }

.cs-home-search-cursor {
    display: inline-block;
    width: 1px;
    margin-left: 1px;
    color: #2d7ff9;
    animation: cs-home-cursor-blink 1s step-end infinite;
}
.cs-home-search-cursor::before { content: "|"; }

@keyframes cs-home-cursor-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.cs-home-search-bar.is-typing .cs-home-search-placeholder,
.cs-home-search-bar.has-query .cs-home-search-placeholder {
    display: none;
}

.cs-home-search-result {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}
.cs-home-search-result.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Scoped to .cs-home-search-card so this transition doesn't leak onto
   other score rings elsewhere on the page (the ring markup/classes are
   a site-wide convention, reused in many places). */
.cs-home-search-card .ring-score {
    transition: stroke-dasharray 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.cs-home-search-card .ring-remaining {
    transition: stroke-dasharray 0.9s cubic-bezier(0.22, 1, 0.36, 1), stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .cs-home-search-cursor { animation: none; opacity: 1; }
    .cs-home-search-result { transition: none; }
    .cs-home-search-card .ring-score,
    .cs-home-search-card .ring-remaining { transition: none; }
}

/* Leave Reviews section - extra bottom spacing on desktop only. */
@media (min-width: 768px) {
    .elementor-element.elementor-element-155bed8 {
        padding-bottom: 60px;
    }
}