/* ==========================================================================
   Commercial Cleaning Hero
   Premium, SaaS-inspired two-column hero/introduction section.
   BEM root: .cc_hero
   ========================================================================== */

.cc_hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 600px at -4% 110%, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0) 60%),
        radial-gradient(700px 500px at 50% 50%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 75%),
        linear-gradient(180deg, #F6F7FA 0%, #FBFBFD 55%, #F6F7FA 100%);
    isolation: isolate;
}

/* Very faint noise texture for premium depth (no extra HTTP request). */
.cc_hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Soft accent glows that sit beneath the content */
.cc_hero__glow {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    filter: blur(110px);
    border-radius: 50%;
}
.cc_hero__glow--top {
    top: -180px;
    right: -160px;
    width: 620px;
    height: 620px;
    background: rgba(15, 23, 42, 0.04);
}
.cc_hero__glow--bottom {
    bottom: -220px;
    left: -160px;
    width: 540px;
    height: 540px;
    background: rgba(15, 23, 42, 0.06);
}

.cc_hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 72px;
}

/* ----- Left column ------------------------------------------------------ */

.cc_hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 920px;
}

.cc_hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: #FFFFFF;
    border: 1px solid #828282;
    border-radius: 999px;
    color: var(--red, #E43D2F);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 24px -16px rgba(15, 23, 42, 0.10);
    margin: 0 0 26px;
}
.cc_hero__eyebrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--red, #E43D2F);
}
.cc_hero__eyebrow-icon svg {
    display: block;
    width: 14px;
    height: 14px;
}

.cc_hero__heading {
    font-family: "Instrument Sans", sans-serif;
    color: #0B1220;
    font-size: clamp(38px, 4.2vw, 60px) !important;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.022em;
    margin: 0 0 24px;
    max-width: 680px;
    text-wrap: pretty;
}
.cc_hero__heading strong,
.cc_hero__heading b {
    font-weight: 700;
}

.cc_hero__intro {
    color: #475467;
    font-size: 17px;
    line-height: 1.65;
    margin: 0 0 20px;
    max-width: 560px;
}
.cc_hero__intro p {
    font-size: 17px;
    line-height: 1.65;
    color: #475467;
    margin: 0 0 10px;
}
.cc_hero__intro p:last-child {
    margin-bottom: 0;
}

.cc_hero__self-check {
    color: #1F2937;
    font-size: 17px;
    line-height: 1.65;
    margin: 0 0 24px;
    max-width: 560px;
}
.cc_hero__self-check p {
    font-size: 17px;
    line-height: 1.65;
    color: #1F2937;
    margin: 0;
}
.cc_hero__self-check strong {
    color: #0B1220;
    font-weight: 700;
}

/* Pills row */
.cc_hero__pills {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    /* Lock cross-axis to flex-start so items keep their natural size and
       don't stretch to fill the tallest flex-line. Together with the
       margin-bottom reset below, this prevents the global
       `ul li:not(:last-of-type) { margin-bottom: 1rem }` rule from
       inflating the last pill via flex stretch. */
    align-items: flex-start;
    gap: 5px;
}
.cc_hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    /* Override theme-wide `ul li:not(:last-of-type) { margin-bottom: 1rem }` */
    margin-bottom: 0;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 12px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 22px -16px rgba(15, 23, 42, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.cc_hero__pill:hover {
    transform: translateY(-2px);
    border-color: rgba(228, 61, 47, 0.18);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 12px 28px -14px rgba(228, 61, 47, 0.16);
}
.cc_hero__pill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--red, #E43D2F);
    flex-shrink: 0;
}
.cc_hero__pill-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}
.cc_hero__pill-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.cc_hero__pill-label {
    font-size: 14.5px;
    font-weight: 600;
    color: #1F2937;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: -0.005em;
}

/* Secondary CTA copy */
.cc_hero__secondary-cta {
    color: #475467;
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 36px;
    max-width: 580px;
}
.cc_hero__secondary-cta p {
    font-size: 16px;
    line-height: 1.65;
    color: #475467;
    margin: 0 0 6px;
}
.cc_hero__secondary-cta p:last-child {
    margin-bottom: 0;
}
.cc_hero__secondary-cta strong {
    color: #0B1220;
    font-weight: 700;
}

/* Trust indicators row */
.cc_hero__trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* Don't stretch items to the tallest row's height — keep each item at
       its natural content height so dividers stay aligned with the icons,
       not the row's geometric centre. */
    align-items: start;
    gap: 28px;
    width: 100%;
}
.cc_hero__trust-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    /* Override theme-wide `ul li:not(:last-of-type) { margin-bottom: 1rem }` */
    margin-bottom: 0;
}
/* Hairline divider sitting in the column gap between adjacent trust items.
   The grid uses `gap: 28px`, so positioning the line at `left: -14px` centres
   it precisely between items. The vertical position is anchored to the icon
   container's centre (`top: 20px` = half of the 40px icon) so the pipe lines
   up with the icons regardless of how many lines the body text wraps to. */
.cc_hero__trust-item + .cc_hero__trust-item::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 20px;
    transform: translateY(-50%);
    width: 1px;
    height: 56px;
    background: rgba(15, 23, 42, 0.10);
    pointer-events: none;
}
.cc_hero__trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(228, 61, 47, 0.08);
    border: none;
    color: var(--red, #E43D2F);
    flex-shrink: 0;
    box-shadow: none;
}
.cc_hero__trust-icon-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}
.cc_hero__trust-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 2px;
}
.cc_hero__trust-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: #0B1220;
    margin: 0 !important;
    letter-spacing: -0.005em;
}
.cc_hero__trust-description {
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    color: #667085;
    margin: 0;
}

/* ----- Right column (visual) ------------------------------------------- */

.cc_hero__visual {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    min-height: 540px;
    /* Break out of the .container's right edge so the image hugs the
       viewport: cancel the container's 15px right padding plus, on
       wide screens, half the centred max-width (1790px) margin. */
    margin-right: calc(-15px - max(0px, (100vw - 1790px) / 2));
}

/* === Subtle cool ambient halo behind the image =========================
   Restrained editorial lighting — visible but never saturated.
   Two soft, neutral focal points provide tonal balance without
   introducing any colour cast on the image. */
.cc_hero__visual::before {
    content: "";
    position: absolute;
    inset: -18% -16% -10% -14%;
    background:
        radial-gradient(
            ellipse 70% 55% at 60% 22%,
            rgba(15, 23, 42, 0.05) 0%,
            rgba(15, 23, 42, 0.02) 42%,
            rgba(15, 23, 42, 0) 75%
        ),
        radial-gradient(
            ellipse 50% 40% at 18% 82%,
            rgba(15, 23, 42, 0.04) 0%,
            rgba(15, 23, 42, 0) 75%
        );
    filter: blur(45px);
    z-index: -1;
    pointer-events: none;
}

.cc_hero__media {
    position: relative;
    flex: 1;
    width: 100%;
    /* Pronounced organic curve at top-left, modest elsewhere */
    border-radius: 270px 28px 0px 0px;
    overflow: hidden;
    /* Soft, near-symmetric ambient shadow that doesn't lift the bottom edge.
       The image still feels grounded but its bottom is free to dissolve
       into the section background. */
}

/* === Atmospheric fog (lower portion only) ============================
   A backdrop-filter blur applied to the bottom ~38% of the image,
   feathered in via a mask so its top edge is invisible and its bottom
   edge is fully active. This produces real optical haze on the image
   content rather than a flat white overlay. */
.cc_hero__media::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    pointer-events: none;
    z-index: 1;
    backdrop-filter: blur(6px) saturate(102%);
    -webkit-backdrop-filter: blur(6px) saturate(102%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 55%, rgba(0, 0, 0, 1) 100%);
            mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 55%, rgba(0, 0, 0, 1) 100%);
}

/* === Soft white veil ================================================
   A multi-stop linear gradient layered ON TOP of the fog.
   Image is 100% visible for the first 72%, then a gentle mist
   builds, peaking at a translucent 0.50 — never solid white,
   so cleaning-cart and floor detail still read through. */
.cc_hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    /* background:
        radial-gradient(
            ellipse 130% 50% at 50% 105%,
            rgba(248, 249, 251, 0.55) 0%,
            rgba(248, 249, 251, 0.18) 45%,
            rgba(248, 249, 251, 0) 80%
        ),
        linear-gradient(
            180deg,
            rgba(248, 249, 251, 0) 0%,
            rgba(248, 249, 251, 0) 72%,
            rgba(248, 249, 251, 0.10) 84%,
            rgba(248, 249, 251, 0.30) 95%,
            rgba(248, 249, 251, 0.50) 100%
        ); */
}
.cc_hero__image,
.cc_hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Floating CTA cluster — anchors the card + dashed indicator together at the
   bottom-left of the image. Owns the position and float animation so the
   indicator follows the card, and creates an isolated stacking context so the
   indicator can be layered visually behind the card. */
.cc_hero__floating-cluster {
    position: absolute;
    left: -32px;
    bottom: 90px;
    z-index: 2;
    isolation: isolate;
    animation: ccHeroFloat 6s ease-in-out infinite;
}

/* Floating CTA card — sits inside the cluster, rendered above the indicator
   so the dashed arrow appears to emerge from underneath the card. */
.cc_hero__floating-card {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    box-shadow:
        0 40px 80px -20px rgba(228, 61, 47, 0.10),
        0 24px 48px -16px rgba(15, 23, 42, 0.20),
        0 12px 24px -12px rgba(15, 23, 42, 0.12),
        0 4px 8px -4px rgba(15, 23, 42, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.55);
    max-width: 290px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cc_hero__floating-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 48px 96px -24px rgba(228, 61, 47, 0.14),
        0 32px 64px -20px rgba(15, 23, 42, 0.24),
        0 14px 28px -14px rgba(15, 23, 42, 0.14),
        inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.cc_hero__floating-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--red, #E43D2F);
    flex-shrink: 0;
}
.cc_hero__floating-icon svg {
    width: 100%;
    height: 100%;
}
.cc_hero__floating-arrow-icon {
    display: block;
}
.cc_hero__floating-text {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
    color: #0B1220;
    letter-spacing: -0.005em;
    max-width: 180px;
}

/* Dashed arrow trails downward, appearing to emerge from underneath the
   white card. Sits in the cluster's stacking context one level below the
   card (z-index: 1 vs card's 2), so the SVG's top portion that overlaps
   the card body is hidden behind it and only the curve below is visible. */
.cc_hero__floating-indicator {
    position: absolute;
    left: auto;
    right: 32px;
    bottom: -88px;
    z-index: 1;
    color: var(--red, #E43D2F);
    pointer-events: none;
    opacity: 0.85;
}

@keyframes ccHeroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    .cc_hero__floating-cluster {
        animation: none;
    }
}

/* ----- Responsive ------------------------------------------------------ */

@media (max-width: 1399px) {
    .cc_hero__inner {
        gap: 64px;
    }
}

@media (max-width: 1199px) {

    .cc_hero__inner {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: 56px;
    }
    .cc_hero__visual {
        min-height: 500px;
    }
    .cc_hero__visual::before {
        inset: -14% -14% -8% -12%;
    }
    .cc_hero__media {
        border-radius: 72px 24px 24px 24px;
    }
    .cc_hero__trust {
        gap: 24px;
    }
    .cc_hero__floating-cluster {
        left: -24px;
        bottom: -28px;
    }
    .cc_hero__floating-card {
        max-width: 270px;
    }
}

@media (max-width: 991px) {

    .cc_hero__inner {
        grid-template-columns: 1fr;
        gap: 56px;
    }
    .cc_hero__content {
        max-width: 100%;
    }
    .cc_hero__heading {
        font-size: clamp(34px, 5.5vw, 48px) !important;
        max-width: 100%;
    }
    .cc_hero__visual {
        order: 2;
        min-height: 440px;
        /* Stacked layout: visual is full-row inside the container, no
           right-edge breakout. */
        margin-right: 0;
    }
    .cc_hero__visual::before {
        inset: -8% -8% -4% -8%;
    }
    .cc_hero__media {
        border-radius: 56px 20px 20px 20px;
    }
    .cc_hero__trust {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 28px;
        padding-top: 16px;
    }
    /* 2-column grid: hide the divider before items that start a new row
       (3rd item) so pipes only appear between siblings on the same row. */
    .cc_hero__trust-item:nth-child(2n+1)::before {
        content: none;
    }
    .cc_hero__floating-cluster {
        left: -16px;
        bottom: -24px;
    }
    .cc_hero__floating-card {
        max-width: 270px;
        padding: 16px 20px;
    }
    .cc_hero__floating-indicator {
        display: none;
    }
}

@media (max-width: 640px) {
    .cc_hero {
        padding: 64px 0 56px;
    }
    .cc_hero__eyebrow {
        margin: 0 0 20px;
    }
    .cc_hero__heading {
        font-size: clamp(30px, 8vw, 40px) !important;
        line-height: 1.08;
        margin: 0 0 20px;
    }
    .cc_hero__intro,
    .cc_hero__intro p,
    .cc_hero__self-check,
    .cc_hero__self-check p {
        font-size: 15.5px;
        line-height: 1.6;
    }
    .cc_hero__intro {
        margin: 0 0 18px;
    }
    .cc_hero__self-check {
        margin: 0 0 22px;
    }
    .cc_hero__secondary-cta,
    .cc_hero__secondary-cta p {
        font-size: 15px;
        line-height: 1.6;
    }
    .cc_hero__secondary-cta {
        margin: 0 0 32px;
    }
    .cc_hero__pills {
        gap: 8px;
        margin: 0 0 28px;
    }
    .cc_hero__pill {
        padding: 10px 14px;
        border-radius: 10px;
    }
    .cc_hero__pill-label {
        font-size: 13.5px;
    }
    .cc_hero__trust {
        /* grid-template-columns: 1fr; */
        gap: 18px;
    }
    .cc_hero__trust-icon {
        width: 36px;
        height: 36px;
    }
    .cc_hero__visual {
        min-height: 360px;
    }
    .cc_hero__visual::before {
        inset: -4% -6% -2% -6%;
        filter: blur(30px);
    }
    .cc_hero__media {
        border-radius: 44px 16px 16px 16px;
    }
    .cc_hero__floating-cluster {
        left: -10px;
        bottom: -20px;
    }
    .cc_hero__floating-card {
        max-width: 240px;
        padding: 14px 18px;
        gap: 12px;
    }
    .cc_hero__floating-text {
        font-size: 13px;
        max-width: 150px;
    }
    .cc_hero__floating-icon {
        width: 32px;
        height: 32px;
    }
}