/* ============================================================
   Home hero - covers the full-screen section with the 771 mobile plumbing scene.
============================================================ */
.hero--home {
    background-color: var(--color-dark);
    background-image: linear-gradient(90deg, rgb(0 20 59 / 85%), rgb(0 20 59 / 55%)), 
    url("/assets/img/home/Hydro-Crore-Plumbing-Services-Bloemfontein-hero-771.webp?v=89e359302b3d4cf1&release=1.1.4");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* color: #fff; */
}

/* ============================================================
   Home hero heading - keeps the title white above softer supporting text.
============================================================ */
.hero--home h1 {
    color: #fff;
}

/* ============================================================
   Home hero focus - uses a light keyboard outline over the photo.
============================================================ */
.hero--home a:focus-visible {
    outline-color: #fff;
}

/* ============================================================
   Medium Home screens - selects the 1920 image above 771px.
============================================================ */
@media (min-width: 772px) {

    /* ========================================================
       Medium Home background - loads the landscape plumbing scene.
    ======================================================== */
    .hero--home {
        background-image: linear-gradient(90deg, rgb(0 20 59 / 85%), rgb(0 20 59 / 55%)), url("/assets/img/home/Hydro-Crore-Plumbing-Services-Bloemfontein-hero-1920.webp?v=5929f365a79b971e&release=1.1.4");
    }
}
/* ============================================================
   Large Home screens - selects the 2560 plumbing scene above 1920px.
============================================================ */
@media (min-width: 1921px) {

    /* ========================================================
       Large Home background - loads the higher-resolution photo.
    ======================================================== */
    .hero--home {
        background-image: linear-gradient(90deg, rgb(0 20 59 / 85%), rgb(0 20 59 / 55%)), url("/assets/img/home/Hydro-Crore-Plumbing-Services-Bloemfontein-hero-2560.webp?v=a58cd7d892fd7a52&release=1.1.4");
    }
}

.container{
    text-align: center;
}

.home-intro h2{
    text-align: center;
}

/* ============================================================
   Introduction copy - keeps the service summary comfortable to read.
============================================================ */
.home-intro-copy {
    color: var(--color-muted);
    text-align: center;
}

/* ============================================================
   Introduction paragraphs - spaces each part of the service summary.
============================================================ */
.home-intro-copy p {
    margin: 0 0 24px;
}

/* ============================================================
   Trust group - places borderless signals above one shared bottom line.
============================================================ */
.trust-signals {
    position: relative;
    display: grid;
    gap: 32px;
    margin-top: 150px;
    margin-bottom: 150px;
    padding: 32px 0 48px;
}

/* ============================================================
   Trust signal - centres each icon, heading and description.
============================================================ */
.trust-signal {
    min-width: 0;
    text-align: center;
}

/* ============================================================
   Trust icons - centres shapes with light blue above the darkest blue.
============================================================ */
.trust-icon {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto 24px;
    background: linear-gradient(to bottom, var(--color-accent), var(--color-dark));
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* ============================================================
   Location icon - uses the Bootstrap shape with its colour set by CSS.
============================================================ */
.trust-icon--location {
    -webkit-mask-image: url("/assets/img/icons/geo-alt.svg?v=0d4d36c7fdbf0474&release=1.1.4");
    mask-image: url("/assets/img/icons/geo-alt.svg?v=0d4d36c7fdbf0474&release=1.1.4");
}

/* ============================================================
   Clock icon - masks the brand gradient into the emergency-callout shape.
============================================================ */
.trust-icon--clock {
    -webkit-mask-image: url("/assets/img/icons/clock.svg?v=9064809223e6d763&release=1.1.4");
    mask-image: url("/assets/img/icons/clock.svg?v=9064809223e6d763&release=1.1.4");
}

/* ============================================================
   Search icon - masks the brand gradient into the drain-inspection shape.
============================================================ */
.trust-icon--search {
    -webkit-mask-image: url("/assets/img/icons/search.svg?v=5b6c6080ec3f621f&release=1.1.4");
    mask-image: url("/assets/img/icons/search.svg?v=5b6c6080ec3f621f&release=1.1.4");
}

/* ============================================================
   Tools icon - masks the brand gradient into the property-services shape.
============================================================ */
.trust-icon--tools {
    -webkit-mask-image: url("/assets/img/icons/tools.svg?v=ee8c0c266955c0f2&release=1.1.4");
    mask-image: url("/assets/img/icons/tools.svg?v=ee8c0c266955c0f2&release=1.1.4");
}

/* ============================================================
   Trust headings - gives each service strength a compact centred title.
============================================================ */
.trust-signal h3 {
    margin: 0 0 12px;
    color: var(--color-dark);
    font-size: 18px;
    line-height: 1.4;
}

/* ============================================================
   Trust descriptions - centres supporting copy without adding card borders.
============================================================ */
.trust-signal p {
    max-width: 320px;
    margin: 0 auto;
    color: var(--color-muted);
    font-size: 14px;
}

/* ============================================================
   Bottom line - starts invisible and grows right with a light-blue leading tip.
============================================================ */
.trust-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-dark) 0%, var(--color-dark) 80%, var(--color-accent) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   Active reveal line - shows the travelling line while the sequence runs.
============================================================ */
.trust-signals.is-revealing .trust-line {
    opacity: 1;
}

/* ============================================================
   Pending trust signals - hides them only after the visible sequence starts.
============================================================ */
.trust-signals.is-pending .trust-signal,
.trust-signals.is-revealing .trust-signal:not(.is-revealed) {
    opacity: 0;
    transform: translateY(16px);
}

/* ============================================================
   Revealed trust signals - bounces each item upward and settles into position.
============================================================ */
.trust-signals.is-revealing .trust-signal.is-revealed {
    animation: home-trust-reveal 650ms ease-out both;
}

/* ============================================================
   Finished bottom line - stays fully visible after crossing the container.
============================================================ */
.trust-signals.is-complete .trust-line {
    transform: scaleX(1);
    opacity: 1;
    animation: none;
}

/* ============================================================
   Trust signal bounce - appears, lifts slightly, then falls gently into place.
============================================================ */
@keyframes home-trust-reveal {

    /* ========================================================
       Initial item - starts transparent just below its final position.
    ======================================================== */
    0% {
        opacity: 0;
        transform: translateY(16px);
    }

    /* ========================================================
       Upward bounce - reveals the signal slightly above its resting position.
    ======================================================== */
    45% {
        opacity: 1;
        transform: translateY(-10px);
    }

    /* ========================================================
       Soft landing - moves a few pixels below the final position.
    ======================================================== */
    75% {
        opacity: 1;
        transform: translateY(3px);
    }

    /* ========================================================
       Settled signal - remains fully visible without further animation.
    ======================================================== */
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   Tablet trust layout - places two signals on each row.
============================================================ */
@media (min-width: 772px) {

    /* ========================================================
       Two-column trust group - balances centred signals on medium screens.
    ======================================================== */
    .trust-signals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   Desktop trust layout - places all four service strengths in one row.
============================================================ */
@media (min-width: 1440px) {

    /* ========================================================
       Four-column trust group - aligns the signals with the travelling line.
    ======================================================== */
    .trust-signals {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ============================================================
   Reduced-motion trust display - keeps every signal visible without movement.
============================================================ */
@media (prefers-reduced-motion: reduce) {

    /* ========================================================
       Static trust signals - removes pending and bouncing item states.
    ======================================================== */
    .trust-signals.is-pending .trust-signal,
    .trust-signals.is-revealing .trust-signal {
        opacity: 1;
        transform: none;
        animation: none;
    }

    /* ========================================================
       Reduced-motion line - displays the full underline without movement.
    ======================================================== */
    .trust-signals .trust-line {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* ============================================================
   What we do section - sets a dark-blue backdrop for the service overview.
============================================================ */
.home-services {
    background: #00143b;
}
.home-services .container{
    margin-bottom: 150px;
}
/* ============================================================
   Service overview heading - uses white type against the dark background.
============================================================ */
.home-services h2 {
    color: #fff;
}

/* ============================================================
   Service overview eyebrow - highlights the section label in light blue.
============================================================ */
.home-services .eyebrow {
    color: var(--color-accent);
}

/* ============================================================
   Home service introduction - keeps summary copy readable on dark blue.
============================================================ */
.home-services-copy {
    max-width: 960px;
    margin: 0 auto 40px;
    color: #e3e4e6;
}

/* ============================================================
   Home service grid - spaces image-backed cards evenly across available columns.
============================================================ */
.home-service-grid {
    gap: 24px;
}

/* ============================================================
   Home service cards - clips the frosted title to the rounded photo boundary.
============================================================ */
.service-grid .home-service-card {
    --card-padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    min-width: 0;
    min-height: 460px;
    padding: var(--card-padding);
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    color: #fff;
    text-align: left;
    background-color: var(--color-dark);
    background-image: linear-gradient(
        180deg, rgb(0 20 59 / 92%) 0%, rgb(0 20 59 / 76%) 60%, rgb(0 20 59 / 25%) 100%), var(--service-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 220ms ease, box-shadow 220ms ease;
}

/* ============================================================
   Plumbing card image - features the drain-cleaning equipment photo.
============================================================ */
.home-service-card--plumbing {
    --service-image: url("/assets/img/services/Hydro-jetting%20equipment%20and%20clean%20drain%20pipe-1.webp?v=e13a5473779c0d4c&release=1.1.4");
}

/* ============================================================
   Purification card image - features the reverse-osmosis water system.
============================================================ */
.home-service-card--purification {
    --service-image: url("/assets/img/services/Premium%20reverse-osmosis%20water%20purification%20system-3.webp?v=990448abd86a8126&release=1.1.4");
}

/* ============================================================
   Construction card image - features tiling, painting and repair materials.
============================================================ */
.home-service-card--construction {
    --service-image: url("/assets/img/services/Polished%20Tiles%20and%20Precision%20Repairs-4.webp?v=0e36bdf1e63e9c45&release=1.1.4");
}

/* ============================================================
   Electrical card image - features the electrical panel and wiring.
============================================================ */
.home-service-card--electrical {
    --service-image: url("/assets/img/services/Modern%20Electrical%20Panel%20and%20Organized%20Wiring-2.webp?v=e808bff4f29296a6&release=1.1.4");
}

/* ============================================================
   Steelwork card image - features the gate photographed at blue hour.
============================================================ */
.home-service-card--steelwork {
    --service-image: url("/assets/img/services/Steel%20Gate%20at%20Blue%20Hour-6.webp?v=b87b722015dec27a&release=1.1.4");
}

/* ============================================================
   Woodworking card image - features the decking and timber roof beams.
============================================================ */
.home-service-card--woodworking {
    --service-image: url("/assets/img/services/Timber%20Decking%20and%20Roof%20Beams-5.webp?v=9f4c276ae62ab4ea&release=1.1.4");
}

/* ============================================================
   Service card titles - centres stronger white type on a full-width frosted strip.
============================================================ */
.home-service-card h3 {
    align-self: stretch;
    width: calc(100% + var(--card-padding) + var(--card-padding));
    margin: calc(0px - var(--card-padding)) calc(0px - var(--card-padding)) 0;
    padding: 24px var(--card-padding);
    border-radius: 12px 12px 0 0;
    /* border-bottom: 1px solid rgb(255 255 255 / 18%); */
    background: linear-gradient(135deg, rgb(227 240 250 / 12%), rgb(227 240 250 / 5%));
    -webkit-backdrop-filter: blur(6px) saturate(110%);
    backdrop-filter: blur(6px) saturate(110%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%);
    color: #fff;
    font-size: clamp(28px, 2.5vw, 36px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.5px;
    text-align: center;
}

/* ============================================================
   Service card summaries - centres the copy above a faint light-blue divider.
============================================================ */
.home-service-card p {
    align-self: stretch;
    margin: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid rgb(16 154 232 / 35%);
    color: #fff;
    font-size: 16px;
    line-height: 1.65;
    text-align: center;
}

/* ============================================================
   Subservice lists - enlarges named offerings by 0.5rem for easier scanning.
============================================================ */
.home-service-card ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: calc(15px + 0.2rem);
}

/* ============================================================
   Mouse service lists - reveals subservices on hover without moving the cards.
============================================================ */
@media (hover: hover) and (pointer: fine) {

    /* ========================================================
       Hidden list - reserves its space while keeping the photo uncluttered.
    ======================================================== */
    .home-service-card ul {
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity 180ms ease, transform 180ms ease, visibility 0ms linear 180ms;
    }

    /* ========================================================
       Revealed list - supports both pointer hover and keyboard navigation.
    ======================================================== */
    .home-service-card:hover ul,
    .home-service-card:focus-visible ul {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition-delay: 0ms;
    }
}

/* ============================================================
   Reduced-motion subservices - changes visibility without sliding or fading.
============================================================ */
@media (prefers-reduced-motion: reduce) {

    /* ========================================================
       Static list reveal - removes movement from the optional hover state.
    ======================================================== */
    .home-service-card ul {
        transform: none;
        transition: none;
    }
}

/* ============================================================
   Subservice items - reserves space for small brand-colour bullets.
============================================================ */
.home-service-card li {
    position: relative;
    padding-left: 16px;
}

/* ============================================================
   Subservice bullets - introduces each name with a subtle light-blue marker.
============================================================ */
.home-service-card li::before {
    content: "";
    position: absolute;
    top: 0.65em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-accent);
}

/* ============================================================
   Card destination label - adds a dark shadow for visibility over the photograph.
============================================================ */
.home-service-card-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    align-self: stretch;
    margin-top: auto;
    padding-top: 16px;
    font-size: 14px;
    text-shadow: 0 2px 4px rgb(0 20 59 / 95%), 0 0 12px rgb(0 20 59 / 80%);
}

/* ============================================================
   Image card feedback - lifts the card without replacing its background photo.
============================================================ */
.service-grid .home-service-card:hover,
.service-grid .home-service-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgb(0 20 59 / 15%);
}

/* ============================================================
   Card keyboard outline - provides a visible brand-colour focus ring.
============================================================ */
.service-grid .home-service-card:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 5px;
}

/* ============================================================
   Mobile service cards - keeps padding comfortable on narrow screens.
============================================================ */
@media (max-width: 771px) {

    /* ========================================================
       Mobile card spacing - allows images and copy to fill the wider container.
    ======================================================== */
    .service-grid .home-service-card {
        --card-padding: 24px;
    }
}

/* ============================================================
   Reduced-motion service cards - removes pointer-triggered movement.
============================================================ */
@media (prefers-reduced-motion: reduce) {

    /* ========================================================
       Static card feedback - preserves focus styling without motion.
    ======================================================== */
    .service-grid .home-service-card:hover,
    .service-grid .home-service-card:focus-visible {
        transform: none;
        transition: none;
    }
}

/* ============================================================
   Paired Home cards - angles only the centre edges while retaining the grid gap.
============================================================ */
@media (min-width: 640px) {

    /* ========================================================
       Angled card controls - keeps the cut within the existing text padding.
    ======================================================== */
    .home-service-grid .home-service-card {
        --home-card-angle: 20px;
        --home-card-border: 5px;
        position: relative;
        width: calc(100% + var(--home-card-angle));
    }

    /* ========================================================
       Left cards - preserves the rounded outer edge and angles the inner edge.
    ======================================================== */
    .home-service-grid .home-service-card:nth-child(odd) {
        border-radius: 12px 0 0 12px;
        clip-path: polygon(0 0, 100% 0, calc(100% - 2 * var(--home-card-angle)) 100%, 0 100%);
    }

    /* ========================================================
       Right cards - mirrors the inner edge with the original gap between pairs.
    ======================================================== */
    .home-service-grid .home-service-card:nth-child(even) {
        margin-left: calc(0px - var(--home-card-angle));
        border-radius: 0 12px 12px 0;
        clip-path: polygon(calc(2 * var(--home-card-angle)) 0, 100% 0, 100% 100%, 0 100%);
        text-align: right;
    }

    /* ========================================================
       Centre border - paints a five-pixel white strip along the left-card cut.
    ======================================================== */
    .home-service-grid .home-service-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: #fff;
        pointer-events: none;
        clip-path: polygon(calc(100% - var(--home-card-border)) 0, 100% 0, calc(100% - 2 * var(--home-card-angle)) 100%, calc(100% - 2 * var(--home-card-angle) - var(--home-card-border)) 100%);
    }

    /* ========================================================
       Right centre border - mirrors the five-pixel white strip.
    ======================================================== */
    .home-service-grid .home-service-card:nth-child(even)::after {
        clip-path: polygon(calc(2 * var(--home-card-angle)) 0, calc(2 * var(--home-card-angle) + var(--home-card-border)) 0, var(--home-card-border) 100%, 0 100%);
    }

    /* ========================================================
       Second pair - reverses the diagonal to continue the central zigzag.
    ======================================================== */
    .home-service-grid .home-service-card:nth-child(4n + 3) {
        clip-path: polygon(0 0, calc(100% - 2 * var(--home-card-angle)) 0, 100% 100%, 0 100%);
    }

    /* ========================================================
       Second right card - matches the reversed left diagonal.
    ======================================================== */
    .home-service-grid .home-service-card:nth-child(4n) {
        clip-path: polygon(0 0, 100% 0, 100% 100%, calc(2 * var(--home-card-angle)) 100%);
    }

    /* ========================================================
       Reversed left border - follows the second pair's inward cut.
    ======================================================== */
    .home-service-grid .home-service-card:nth-child(4n + 3)::after {
        clip-path: polygon(calc(100% - 2 * var(--home-card-angle) - var(--home-card-border)) 0, calc(100% - 2 * var(--home-card-angle)) 0, 100% 100%, calc(100% - var(--home-card-border)) 100%);
    }

    /* ========================================================
       Reversed right border - follows the second pair's matching cut.
    ======================================================== */
    .home-service-grid .home-service-card:nth-child(4n)::after {
        clip-path: polygon(0 0, var(--home-card-border) 0, calc(2 * var(--home-card-angle) + var(--home-card-border)) 100%, calc(2 * var(--home-card-angle)) 100%);
    }

    /* ========================================================
       Inner title corners - removes rounding only beside the central seam.
    ======================================================== */
    .home-service-grid .home-service-card:nth-child(odd) h3 {
        border-top-right-radius: 0;
    }

    /* ========================================================
       Right title corner - retains rounding at the outer right edge.
    ======================================================== */
    .home-service-grid .home-service-card:nth-child(even) h3 {
        border-top-left-radius: 0;
    }

    /* ========================================================
       Right lists - aligns service names right with a bullet before each name.
    ======================================================== */
    .home-service-grid .home-service-card:nth-child(even) ul {
        align-self: stretch;
        text-align: right;
    }

    /* ========================================================
       Right list items - avoids reserving a separate column for the bullet.
    ======================================================== */
    .home-service-grid .home-service-card:nth-child(even) li {
        padding-left: 0;
    }

    /* ========================================================
       Right bullets - keeps each marker immediately before its service text.
    ======================================================== */
    .home-service-grid .home-service-card:nth-child(even) li::before {
        position: static;
        display: inline-block;
        margin-right: 11px;
        vertical-align: middle;
    }
}

/* ============================================================
   Home contact section - gives the closing invitation simple vertical spacing.
============================================================ */
.home-contact-cta {
    padding: 80px 24px;
}

/* ============================================================
   Contact invitation layout - centres the logo, short copy and contact button.
============================================================ */
.home-contact-cta .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 0;
    text-align: center;
}

/* ============================================================
   Contact invitation logo - displays the secondary mark at roughly 300px wide.
============================================================ */
.home-cta-logo {
    display: block;
    width: 300px;
    max-width: 100%;
    height: auto;
}

/* ============================================================
   Contact invitation copy - keeps the final message short and easy to read.
============================================================ */
.home-cta-copy {
    max-width: 640px;
    margin: 0;
    color: var(--color-muted);
    font-size: 20px;
    line-height: 1.6;
}

/* ============================================================
   Social invitation note - introduces configured social links without clutter.
============================================================ */
.home-cta-social-note {
    margin: 0;
    color: var(--color-muted);
    font-size: 14px;
}

/* ============================================================
   Contact invitation socials - centres the available social destinations.
============================================================ */
.home-cta-socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 24px;
}