/* =========================================================
   CLEANORA - GLOBAL BASE
   ========================================================= */

:root {
    --cleanora-sage: #6B8E7B;
    --cleanora-cream: #F7F3EA;
    --cleanora-charcoal: #26332D;
    --cleanora-white: #FFFFFF;
    --cleanora-light-sage: #E4ECE7;
    --cleanora-dark-sage: #527262;

    --cleanora-transition: 0.3s ease;
}


/* =========================================================
   GLOBAL RESET
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family: "Inter", sans-serif;

    background-color: var(--cleanora-cream);
    color: var(--cleanora-charcoal);

    overflow-x: hidden;

    transition:
        background-color var(--cleanora-transition),
        color var(--cleanora-transition);
}

a {
    text-decoration: none;
}

button,
input,
textarea,
select {
    font-family: inherit;
}


/* =========================================================
   CLEANORA NAVBAR
   ========================================================= */

.cleanora-navbar {
    position: sticky;
    top: 0;
    left: 0;

    width: 100%;
    height: 78px;

    background-color: var(--cleanora-cream);

    border-bottom: 1px solid rgba(38, 51, 45, 0.10);

    z-index: 1000;

    transition:
        background-color var(--cleanora-transition),
        border-color var(--cleanora-transition),
        box-shadow var(--cleanora-transition);
}


/* =========================================================
   NAVBAR CONTAINER
   ========================================================= */

.cleanora-navcontainer {
    width: 100%;
    max-width: 1600px;

    min-height: 78px;

    margin: 0 auto;
    padding: 0 35px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;
}


/* =========================================================
   CLEANORA LOGO
   ========================================================= */

.cleanora-logo {
    flex-shrink: 0;

    color: var(--cleanora-charcoal);

    font-family: "Poppins", sans-serif;
    font-size: 1.55rem;
    font-weight: 800;

    letter-spacing: 2px;

    transition:
        color var(--cleanora-transition);
}

.cleanora-logo:hover {
    color: var(--cleanora-sage);
}


/* =========================================================
   NAVIGATION MENU
   ========================================================= */

.cleanora-navmenu {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 3px;
}


/* =========================================================
   NAVIGATION LINKS
   ========================================================= */

.cleanora-navlink {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 10px 8px;

    border: none;
    background: transparent;

    color: var(--cleanora-charcoal);

    font-family: "Poppins", sans-serif;
    font-size: 0.82rem;
    font-weight: 500;

    white-space: nowrap;

    cursor: pointer;

    transition:
        color var(--cleanora-transition),
        transform var(--cleanora-transition);
}

.cleanora-navlink:hover {
    color: var(--cleanora-sage);
}


/* =========================================================
   NAV LINK UNDERLINE
   ========================================================= */

.cleanora-navlink::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 3px;

    width: 0;
    height: 2px;

    background-color: var(--cleanora-sage);

    transform: translateX(-50%);

    transition: width var(--cleanora-transition);
}

.cleanora-navlink:hover::after {
    width: 60%;
}


/* =========================================================
   ACTIVE NAV LINK (current page)
   ========================================================= */

.cleanora-navlink.active {
    color: var(--cleanora-sage);
}

.cleanora-navlink.active::after {
    width: 60%;
}


/* =========================================================
   NAVBAR DROPDOWN
   ========================================================= */

.cleanora-dropdown {
    position: relative;
}


/* =========================================================
   DROPDOWN ARROW
   ========================================================= */

.cleanora-dropdown-toggle i {
    font-size: 0.62rem;

    transition:
        transform var(--cleanora-transition);
}

.cleanora-dropdown.active .cleanora-dropdown-toggle i {
    transform: rotate(180deg);
}


/* =========================================================
   DROPDOWN MENU
   ========================================================= */

.cleanora-dropdownmenu {
    position: absolute;

    top: calc(100% + 13px);
    left: 50%;

    min-width: 215px;

    padding: 10px 0;

    background-color: var(--cleanora-cream);

    border-top: 3px solid var(--cleanora-sage);

    box-shadow:
        0 15px 35px rgba(38, 51, 45, 0.15);

    opacity: 0;
    visibility: hidden;

    transform:
        translate(-50%, -8px);

    transition:
        opacity var(--cleanora-transition),
        visibility var(--cleanora-transition),
        transform var(--cleanora-transition);
}


/* =========================================================
   DROPDOWN ARROW SHAPE
   ========================================================= */

.cleanora-dropdownmenu::before {
    content: "";

    position: absolute;

    top: -8px;
    left: 50%;

    width: 14px;
    height: 14px;

    background-color: var(--cleanora-cream);

    transform:
        translateX(-50%) rotate(45deg);
}


/* =========================================================
   SHOW DROPDOWN
   ========================================================= */

.cleanora-dropdown:hover .cleanora-dropdownmenu,

.cleanora-dropdown.active .cleanora-dropdownmenu {
    opacity: 1;
    visibility: visible;

    transform:
        translate(-50%, 0);
}


/* =========================================================
   DROPDOWN LINKS
   ========================================================= */

.cleanora-dropdownlink {
    display: block;

    padding: 12px 20px;

    color: var(--cleanora-charcoal);

    font-size: 0.82rem;
    font-weight: 500;

    transition:
        color var(--cleanora-transition),
        background-color var(--cleanora-transition),
        padding-left var(--cleanora-transition);
}

.cleanora-dropdownlink:hover {
    color: var(--cleanora-white);

    background-color: var(--cleanora-sage);

    padding-left: 27px;
}

.cleanora-dropdownlink.active {
    color: var(--cleanora-white);

    background-color: var(--cleanora-sage);
}


/* =========================================================
   NAVBAR RIGHT ACTIONS
   ========================================================= */

.cleanora-navactions {
    display: flex;
    align-items: center;

    gap: 8px;

    flex-shrink: 0;
}


/* =========================================================
   THEME + RTL BUTTONS
   ========================================================= */

.cleanora-actionbtn {
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(38, 51, 45, 0.18);
    border-radius: 8px;

    background-color: transparent;
    color: var(--cleanora-charcoal);

    cursor: pointer;

    transition:
        color var(--cleanora-transition),
        background-color var(--cleanora-transition),
        border-color var(--cleanora-transition),
        transform var(--cleanora-transition);
}

.cleanora-actionbtn:hover {
    color: var(--cleanora-sage);

    background-color: var(--cleanora-light-sage);

    border-color: var(--cleanora-sage);

    transform: translateY(-2px);
}

.cleanora-actionbtn i {
    font-size: 0.95rem;
}

.cleanora-rtltext {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* RTL text */

.cleanora-rtltext {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}


/* =========================================================
   LOGIN BUTTON
   ========================================================= */

.cleanora-loginbtn {
    min-width: 92px;

    padding: 10px 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background-color: var(--cleanora-sage);
    color: var(--cleanora-white);

    border: 2px solid var(--cleanora-sage);
    border-radius: 8px;

    font-family: "Poppins", sans-serif;
    font-size: 0.82rem;
    font-weight: 600;

    transition:
        background-color var(--cleanora-transition),
        color var(--cleanora-transition),
        border-color var(--cleanora-transition),
        transform var(--cleanora-transition);
}

.cleanora-loginbtn:hover {
    background-color: transparent;

    color: var(--cleanora-sage);

    border-color: var(--cleanora-sage);

    transform: translateY(-2px);
}

/* =========================================================
   HAMBURGER
   ========================================================= */

.cleanora-hamburger {
    width: 42px;
    height: 42px;

    display: none;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 5px;

    border: none;
    background: transparent;

    cursor: pointer;
}

.cleanora-hamburger span {
    width: 23px;
    height: 2px;

    background-color: var(--cleanora-charcoal);

    transition:
        transform var(--cleanora-transition),
        opacity var(--cleanora-transition);
}


/* Hamburger active animation */

.cleanora-hamburger.active span:nth-child(1) {
    transform:
        translateY(7px) rotate(45deg);
}

.cleanora-hamburger.active span:nth-child(2) {
    opacity: 0;
}

.cleanora-hamburger.active span:nth-child(3) {
    transform:
        translateY(-7px) rotate(-45deg);
}


/* =========================================================
   LAPTOP — 1024px TO 1199px
   ========================================================= */

@media (min-width: 1024px) and (max-width: 1199px) {

    .cleanora-navcontainer {
        padding: 0 20px;
        gap: 10px;
    }

    .cleanora-navmenu {
        gap: 0;
    }

    .cleanora-navlink {
        padding: 10px 5px;

        font-size: 0.70rem;
    }

    .cleanora-logo {
        font-size: 1.3rem;
    }

    .cleanora-navactions {
        gap: 3px;
    }

    .cleanora-actionbtn {
        width: 34px;
        height: 34px;
    }

    .cleanora-loginbtn {
        min-width: 74px;

        padding: 9px 13px;

        font-size: 0.73rem;
    }
}


/* =========================================================
   LAPTOP-L — 1200px TO 1399px
   ========================================================= */

@media (min-width: 1200px) and (max-width: 1399px) {

    .cleanora-navcontainer {
        padding: 0 28px;
    }

    .cleanora-navlink {
        padding: 10px 7px;

        font-size: 0.77rem;
    }
}


/* =========================================================
   TABLET — BELOW 1024px
   ========================================================= */

@media (max-width: 1023px) {

    .cleanora-navbar {
        height: 70px;
    }

    .cleanora-navcontainer {
        min-height: 70px;

        padding: 0 22px;
    }


    /* Mobile/tablet menu */

    .cleanora-navmenu {
        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

        display: none;

        flex-direction: column;
        align-items: stretch;

        padding: 15px 22px 25px;

        background-color: var(--cleanora-cream);

        border-top: 1px solid rgba(38, 51, 45, 0.10);

        box-shadow:
            0 15px 30px rgba(38, 51, 45, 0.12);

        max-height: calc(100vh - 70px);

        overflow-y: auto;
    }


    /* Open mobile menu */

    .cleanora-navmenu.active {
        display: flex;
    }


    /* Mobile links */

    .cleanora-navlink {
        width: 100%;

        justify-content: space-between;

        padding: 14px 5px;

        font-size: 0.9rem;
    }


    /* Hide desktop underline */

    .cleanora-navlink::after {
        display: none;
    }


    /* Mobile dropdown */

    .cleanora-dropdown {
        width: 100%;
    }

    .cleanora-dropdownmenu {
        position: static;

        width: 100%;
        min-width: 0;

        padding: 0;

        border-top: none;

        box-shadow: none;

        display: none;

        opacity: 1;
        visibility: visible;

        transform: none;
    }


    .cleanora-dropdown.active .cleanora-dropdownmenu {
        display: block;

        transform: none;
    }


    .cleanora-dropdownmenu::before {
        display: none;
    }


    /* Mobile dropdown links */

    .cleanora-dropdownlink {
        padding: 12px 25px;

        font-size: 0.82rem;
    }

    .cleanora-dropdownlink:hover {
        padding-left: 30px;
    }


    /* Mobile hamburger */

    .cleanora-hamburger {
        display: flex;
    }


    /* Login hidden on mobile/tablet */

    .cleanora-loginbtn {
        display: none;
    }
}


/* =========================================================
   MOBILE-L — BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .cleanora-navcontainer {
        padding: 0 16px;
    }

    .cleanora-logo {
        font-size: 1.25rem;

        letter-spacing: 1.5px;
    }

    .cleanora-actionbtn {
        width: 35px;
        height: 35px;
    }

    .cleanora-navmenu {
        padding-left: 18px;
        padding-right: 18px;
    }
}


/* =========================================================
   MOBILE-M — BELOW 480px
   ========================================================= */

@media (max-width: 480px) {

    .cleanora-navbar {
        height: 65px;
    }

    .cleanora-navcontainer {
        min-height: 65px;

        padding: 0 12px;
    }

    .cleanora-logo {
        font-size: 1.12rem;

        letter-spacing: 1.5px;
    }

    .cleanora-navactions {
        gap: 6px;
    }

    .cleanora-actionbtn {
        width: 32px;
        height: 32px;
    }

    .cleanora-rtltext {
        font-size: 0.62rem;
    }

    .cleanora-hamburger {
        width: 36px;
        height: 36px;
    }

    .cleanora-hamburger span {
        width: 21px;
    }
}


/* =========================================================
   MOBILE-S — BELOW 360px
   ========================================================= */

@media (max-width: 360px) {

    .cleanora-logo {
        font-size: 1rem;

        letter-spacing: 1px;
    }

    .cleanora-actionbtn {
        width: 29px;
        height: 29px;
    }

    .cleanora-hamburger {
        width: 32px;
        height: 29px;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.cleanora-navlink:focus-visible,
.cleanora-actionbtn:focus-visible,
.cleanora-loginbtn:focus-visible,
.cleanora-hamburger:focus-visible,
.cleanora-dropdownlink:focus-visible {
    outline: 2px solid var(--cleanora-sage);

    outline-offset: 3px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;
    }
}

/* MOBILE LOGIN - HIDDEN ON DESKTOP */
.cleanora-mobile-login {
    display: none;
}

@media (max-width: 1023px) {

    .cleanora-mobile-login {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        padding: 12px 20px;

        background-color: var(--cleanora-sage);
        color: var(--cleanora-white);

        border: 2px solid var(--cleanora-sage);
        border-radius: 8px;

        font-family: "Poppins", sans-serif;
        font-size: 0.85rem;
        font-weight: 600;

        margin-top: 10px;

        transition:
            background-color var(--cleanora-transition),
            color var(--cleanora-transition),
            border-color var(--cleanora-transition);
    }

    .cleanora-mobile-login:hover {
        background-color: transparent;
        color: var(--cleanora-sage);
        border-color: var(--cleanora-sage);
    }
}

/* =========================================================
   HOME PAGE 1
   ========================================================= */

.home1-page {
    overflow: hidden;
    background: var(--cleanora-cream);
    color: var(--cleanora-charcoal);
}


/* =========================================================
   SHARED HOME1 REVEAL SYSTEM
   ========================================================= */

.home1-reveal {
    opacity: 0;
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(.22, 1, .36, 1);
}

.home1-reveal[data-reveal="fade-up"] {
    transform: translateY(55px);
}

.home1-reveal[data-reveal="fade-left"] {
    transform: translateX(-65px);
}

.home1-reveal[data-reveal="fade-right"] {
    transform: translateX(65px);
}

.home1-reveal[data-reveal="zoom"] {
    transform: scale(0.88);
}

.home1-reveal[data-reveal="scale"] {
    transform: scale(0.75);
}

.home1-reveal.home1-visible {
    opacity: 1;
    transform: translate(0) scale(1);
}


/* =========================================================
   HERO
   ========================================================= */

.home1-hero {
    min-height: calc(100vh - 76px);
    position: relative;
    display: flex;
    align-items: center;
    isolation: isolate;
    overflow: hidden;
    background: #26332D;
}

.home1-hero-background {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    z-index: 0;

    transform: scale(1.04);

    animation: home1HeroZoom 14s ease-in-out infinite alternate;
}

@keyframes home1HeroZoom {

    from {
        transform: scale(1.04);
    }

    to {
        transform: scale(1.12);
    }

}

.home1-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(38, 51, 45, 0.96) 0%,
            rgba(38, 51, 45, 0.82) 42%,
            rgba(38, 51, 45, 0.25) 100%
        );
}

.home1-hero-content {
    position: relative;
    z-index: 2;

    width: min(1180px, 92%);
    margin: 0 auto;
    padding: 110px 0 90px;
}
.home1-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;

    color: #E4ECE7;

    font-family: "Poppins", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
}

.home1-eyebrow-line {
    width: 38px;
    height: 2px;
    background: #E4ECE7;
}

.home1-hero-title {
    max-width: 760px;
    margin: 20px 0;

    color: #FFFFFF;

    font-family: "Poppins", sans-serif;
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: 0.98;
    font-weight: 700;
    letter-spacing: -3px;
}

.home1-hero-title span {
    color: #BFD4C7;
}

.home1-hero-text {
    max-width: 600px;
    margin-bottom: 32px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 1.05rem;
    line-height: 1.8;
}

.home1-hero-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.home1-primary-btn,
.home1-secondary-btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 13px 23px;

    font-family: "Poppins", sans-serif;
    font-size: 0.82rem;
    font-weight: 600;

    text-decoration: none;

    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease;
}

.home1-primary-btn {
    background: #6B8E7B;
    color: #FFFFFF;
}

.home1-primary-btn:hover {
    transform: translateY(-4px);
    background: #527262;
}

.home1-secondary-btn {
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.06);
}

.home1-secondary-btn:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.15);
}

.home1-hero-trust {
    display: flex;
    gap: 28px;
    margin-top: 42px;
    flex-wrap: wrap;
}

.home1-trust-item {
    display: flex;
    align-items: center;
    gap: 9px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 0.75rem;
}

.home1-trust-item i {
    color: #BFD4C7;
}

.home1-hero-image {
    position: absolute;
    right: 8%;
    bottom: 8%;
    width: min(31vw, 420px);
    z-index: 3;

    overflow: hidden;

    border: 8px solid rgba(255,255,255,0.12);

    animation: home1FloatingImage 5s ease-in-out infinite;
}

.home1-hero-image img {
    width: 100%;
    display: block;
}

@keyframes home1FloatingImage {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

}

.home1-floating-stat {
    position: absolute;
    z-index: 10;
    right: 32%;
    bottom: 9%;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px 18px;

    background: #F7F3EA;
    color: #26332D;

    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
}

.home1-stat-number {
    font-family: "Poppins", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
}

.home1-stars {
    color: #6B8E7B;
    font-size: 0.7rem;
    letter-spacing: 2px;
}

.home1-floating-stat small {
    font-size: 0.65rem;
}

.home1-scroll-indicator {
    position: absolute;
    bottom: 25px;
    left: 50%;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    color: rgba(255, 255, 255, 0.7);

    font-size: 0.65rem;
    letter-spacing: 1px;

    transform: translateX(-50%);
}

.home1-scroll-indicator i {
    animation: home1ScrollArrow 1.6s infinite;
}

@keyframes home1ScrollArrow {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(7px);
    }

}


/* =========================================================
   TRUST STRIP
   ========================================================= */

.home1-trust-strip {
    background: #E4ECE7;
    border-bottom: 1px solid rgba(38, 51, 45, 0.08);
}

.home1-trust-inner {
    width: min(1180px, 92%);
    margin: auto;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.home1-trust-block {
    min-height: 125px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    text-align: center;

    border-right: 1px solid rgba(38, 51, 45, 0.12);
}

.home1-trust-block:last-child {
    border-right: 0;
}

.home1-trust-block strong {
    color: #527262;

    font-family: "Poppins", sans-serif;
    font-size: 2rem;
    font-weight: 700;
}

.home1-trust-block strong::after {
    content: "+";
}

.home1-trust-block span {
    margin-top: 3px;

    font-size: 0.72rem;
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.home1-section-heading {
    width: min(750px, 92%);
    margin: 0 auto 60px;
    text-align: center;
}

.home1-section-kicker {
    display: inline-block;

    margin-bottom: 12px;

    color: #6B8E7B;

    font-family: "Poppins", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
}

.home1-section-heading h2 {
    margin: 0;

    font-family: "Poppins", sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -1.5px;
}

.home1-section-heading h2 span {
    color: #6B8E7B;
}

.home1-section-heading p {
    max-width: 600px;
    margin: 20px auto 0;

    color: rgba(38, 51, 45, 0.68);

    line-height: 1.8;
}


/* =========================================================
   SERVICES
   ========================================================= */

.home1-services {
    padding: 115px 0;
}

.home1-services-grid {
    width: min(1180px, 92%);
    margin: auto;

    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 3px;
}

.home1-service-item {
    position: relative;
    min-height: 470px;

    overflow: hidden;

    background: #26332D;
}

.home1-service-large {
    grid-row: span 2;
    min-height: 650px;
}

.home1-service-wide {
    grid-column: span 2;
    min-height: 300px;
}

.home1-service-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.home1-service-image::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(180deg,
            transparent 30%,
            rgba(38, 51, 45, 0.94) 100%);
}

.home1-service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform 0.8s cubic-bezier(.22, 1, .36, 1);
}

.home1-service-item:hover img {
    transform: scale(1.09);
}

.home1-service-content {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 28px;
    z-index: 2;

    color: #FFFFFF;
}

.home1-service-content>span {
    color: #BFD4C7;

    font-family: "Poppins", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
}

.home1-service-content h3 {
    margin: 8px 0;

    font-family: "Poppins", sans-serif;
    font-size: 1.5rem;
}

.home1-service-content p {
    max-width: 440px;
    margin: 0 0 15px;

    color: rgba(255, 255, 255, 0.76);

    font-size: 0.82rem;
    line-height: 1.7;
}

.home1-service-content a {
    color: #FFFFFF;

    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
}

.home1-service-content a i {
    margin-left: 7px;

    transition: transform 0.3s ease;
}

.home1-service-content a:hover i {
    transform: translateX(5px);
}


/* =========================================================
   WHY CLEANORA
   ========================================================= */

.home1-why {
    width: min(1180px, 92%);
    margin: 0 auto;
    padding: 90px 0 120px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;

    align-items: center;
}

.home1-why-image {
    position: relative;
}

.home1-why-image img {
    width: 100%;
    height: 600px;

    display: block;

    object-fit: cover;
}

.home1-image-stamp {
    position: absolute;
    right: -25px;
    bottom: 35px;

    width: 130px;
    height: 130px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: #6B8E7B;
    color: #FFFFFF;

    text-align: center;
}

.home1-image-stamp i {
    margin-bottom: 8px;
}

.home1-image-stamp span {
    font-family: "Poppins", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.home1-why-content h2 {
    margin: 0 0 20px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.1;
}

.home1-why-content h2 span {
    color: #6B8E7B;
}

.home1-why-content>p {
    margin-bottom: 30px;

    color: rgba(38, 51, 45, 0.7);

    line-height: 1.8;
}

.home1-why-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.home1-why-list>div {
    display: flex;
    gap: 15px;
}

.home1-why-list i {
    flex-shrink: 0;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #E4ECE7;
    color: #527262;
}

.home1-why-list strong,
.home1-why-list span {
    display: block;
}

.home1-why-list strong {
    margin-bottom: 4px;

    font-size: 0.85rem;
}

.home1-why-list span {
    color: rgba(38, 51, 45, 0.6);
    font-size: 0.75rem;
}

.home1-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-top: 32px;

    color: #527262;

    font-family: "Poppins", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}

.home1-text-link i {
    transition: transform 0.3s ease;
}

.home1-text-link:hover i {
    transform: translateX(6px);
}


/* =========================================================
   PROCESS
   ========================================================= */

.home1-process {
    padding: 115px 0;

    background: #E4ECE7;
}

.home1-process-grid {
    width: min(1050px, 92%);
    margin: auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;

    position: relative;
}

.home1-process-line {
    width: min(800px, 65%);
    height: 1px;

    margin: 0 auto 55px;

    background: rgba(82, 114, 98, 0.35);
}

.home1-process-item {
    position: relative;
    text-align: center;
}

.home1-process-number {
    margin-bottom: 15px;

    color: #6B8E7B;

    font-family: "Poppins", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
}

.home1-process-item>i {
    margin-bottom: 20px;

    color: #527262;

    font-size: 1.7rem;
}

.home1-process-item h3 {
    margin: 0 0 10px;

    font-family: "Poppins", sans-serif;
    font-size: 1rem;
}

.home1-process-item p {
    margin: auto;

    max-width: 270px;

    color: rgba(38, 51, 45, 0.65);

    font-size: 0.78rem;
    line-height: 1.7;
}


/* =========================================================
   TRANSFORMATION
   ========================================================= */

.home1-transformation {
    min-height: 650px;

    position: relative;

    display: flex;
    align-items: center;

    overflow: hidden;

    isolation: isolate;

    background: #26332D;
}

.home1-transformation-background {
    position: absolute;
    inset: 0;
    z-index: -2;

    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

    transform: scale(1.05);

    transition: transform 1.5s ease;
}

.home1-transformation:hover .home1-transformation-background {
    transform: scale(1.1);
}

.home1-transformation::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(90deg,
            rgba(38, 51, 45, 0.94),
            rgba(38, 51, 45, 0.28));
}

.home1-transformation-content {
    width: min(1180px, 92%);
    margin: auto;
}

.home1-transformation-content h2 {
    max-width: 650px;

    margin: 0 0 18px;

    color: #FFFFFF;

    font-family: "Poppins", sans-serif;
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 1;
}

.home1-transformation-content p {
    max-width: 480px;

    margin-bottom: 28px;

    color: rgba(255, 255, 255, 0.76);

    line-height: 1.8;
}

.home1-transformation-detail {
    position: absolute;
    right: 8%;
    bottom: 60px;

    display: flex;
    flex-direction: column;

    color: #FFFFFF;
}

.home1-transformation-detail span {
    color: #BFD4C7;

    font-size: 0.65rem;
    letter-spacing: 2px;
}

.home1-transformation-detail strong {
    font-family: "Poppins", sans-serif;
    font-size: 4rem;
    line-height: 1;
}

.home1-transformation-detail small {
    font-size: 0.7rem;
}


/* =========================================================
   COVERAGE
   ========================================================= */

.home1-coverage {
    width: min(1180px, 92%);
    margin: auto;
    padding: 120px 0;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;

    align-items: center;
}

.home1-coverage-content h2 {
    margin: 0 0 20px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.1;
}

.home1-coverage-content h2 span {
    color: #6B8E7B;
}

.home1-coverage-content>p {
    max-width: 520px;

    color: rgba(38, 51, 45, 0.68);

    line-height: 1.8;
}

.home1-location-search {
    max-width: 500px;
    margin-top: 30px;

    display: flex;
    align-items: center;

    border-bottom: 1px solid #26332D !important;
    width: 100%;
    min-height: 52px;
}
.home1-location-search i {
    color: #6B8E7B;
}

.home1-location-search input {
    flex: 1;

    min-width: 0;
    width: 100%;

    padding: 14px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #26332D;

    font-family: "Inter", sans-serif;
}

.home1-location-search input::placeholder {
    color: rgba(38, 51, 45, 0.55);
}

.home1-location-search button {
    padding: 10px 18px;

    border: 0;

    background: #6B8E7B;
    color: #FFFFFF;

    cursor: pointer;
}

.home1-coverage-visual {
    min-height: 430px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(135deg,
            #E4ECE7,
            #F7F3EA);

    position: relative;
    overflow: hidden;
}

.home1-coverage-map {
    width: 290px;
    height: 290px;

    position: relative;

    border: 1px dashed rgba(82, 114, 98, 0.5);

    transform: rotate(-8deg);

    animation: home1MapFloat 6s ease-in-out infinite;
}

@keyframes home1MapFloat {

    0%,
    100% {
        transform: rotate(-8deg) translateY(0);
    }

    50% {
        transform: rotate(-5deg) translateY(-12px);
    }

}

.home1-map-dot {
    position: absolute;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background: #6B8E7B;

    box-shadow: 0 0 0 7px rgba(107, 142, 123, 0.14);

    animation: home1Pulse 2.5s infinite;
}

.home1-map-dot-one {
    top: 22%;
    left: 30%;
}

.home1-map-dot-two {
    top: 55%;
    left: 65%;
}

.home1-map-dot-three {
    bottom: 20%;
    left: 25%;
}

.home1-map-dot-four {
    top: 32%;
    right: 15%;
}

.home1-map-ring {
    position: absolute;

    top: 43%;
    left: 48%;

    width: 55px;
    height: 55px;

    border: 1px solid #6B8E7B;

    border-radius: 50%;

    animation: home1PulseRing 2.5s infinite;
}

@keyframes home1Pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }

}

@keyframes home1PulseRing {

    0% {
        transform: scale(0.7);
        opacity: 0.9;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }

}


/* =========================================================
   TESTIMONIALS
   ========================================================= */

.home1-testimonials {
    padding: 115px 0;

    background: #F7F3EA;
}

.home1-testimonial-grid {
    width: min(1180px, 92%);
    margin: auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
}

.home1-testimonial {
    min-height: 340px;

    padding: 42px 35px;

    background: #E4ECE7;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.home1-testimonial-featured {
    background: #26332D;
    color: #FFFFFF;

    transform: translateY(-20px);
}

.home1-quote-mark {
    color: #6B8E7B;

    font-family: Georgia, serif;
    font-size: 4rem;
    line-height: 0.5;
}

.home1-testimonial p {
    margin: 25px 0;

    font-size: 0.9rem;
    line-height: 1.9;
}

.home1-testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.home1-author-avatar {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #6B8E7B;
    color: #FFFFFF;

    font-family: "Poppins", sans-serif;
    font-weight: 700;
}

.home1-testimonial-author strong,
.home1-testimonial-author span {
    display: block;
}

.home1-testimonial-author strong {
    font-size: 0.78rem;
}

.home1-testimonial-author span {
    margin-top: 3px;

    opacity: 0.6;

    font-size: 0.68rem;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.home1-final-cta {
    min-height: 550px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    isolation: isolate;
}

.home1-final-cta-background {
    position: absolute;
    inset: 0;
    z-index: -2;

    background-image:
        url("https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=2000&q=90");

    background-size: cover;
    background-position: center;
}

.home1-final-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: rgba(38, 51, 45, 0.82);
}

.home1-final-cta-content {
    width: min(800px, 92%);

    text-align: center;
}

.home1-final-cta-content h2 {
    margin: 0 0 20px;

    color: #FFFFFF;

    font-family: "Poppins", sans-serif;
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 1;
}

.home1-final-cta-content h2 span {
    color: #BFD4C7;
}

.home1-final-cta-content p {
    margin-bottom: 30px;

    color: rgba(255, 255, 255, 0.78);
}


/* =========================================================
   TABLET — 768px TO 1023px
   ========================================================= */

@media (max-width: 1023px) {

    .home1-hero {
        min-height: 780px;
    }

    .home1-hero-content {
        padding-top: 100px;
    }

    .home1-hero-title {
        max-width: 650px;
    }

    .home1-hero-image {
        right: 4%;
        bottom: 5%;
        width: 280px;
        opacity: 0.75;
    }

    .home1-floating-stat {
        right: 27%;
        bottom: 8%;
    }

    .home1-services-grid {
        grid-template-columns: 1fr 1fr;
    }

    .home1-service-large {
        grid-row: span 2;
        min-height: 500px;
    }

    .home1-service-wide {
        grid-column: span 2;
    }

    .home1-why,
    .home1-coverage {
        gap: 50px;
    }

    .home1-why-image img {
        height: 500px;
    }

    .home1-process-grid {
        gap: 25px;
    }

    .home1-transformation {
        min-height: 600px;
    }

}


/* =========================================================
   MOBILE-L — 480px TO 767px
   ========================================================= */

@media (max-width: 767px) {

    .home1-hero {
        min-height: 820px;
        align-items: flex-start;
    }

    .home1-hero-content {
        padding-top: 80px;
    }

    .home1-hero-title {
        font-size: clamp(2.7rem, 12vw, 4rem);
        letter-spacing: -2px;
    }

    .home1-hero-text {
        font-size: 0.9rem;
    }

    .home1-hero-image {
        right: 5%;
        bottom: 70px;
        width: 210px;
        opacity: 0.45;
    }

    .home1-floating-stat {
        right: auto;
        left: 5%;
        bottom: 85px;
    }

    .home1-scroll-indicator {
        display: none;
    }

    .home1-hero-trust {
        gap: 12px;
        flex-direction: column;
    }

    .home1-trust-inner {
        grid-template-columns: 1fr 1fr;
    }

    .home1-trust-block {
        min-height: 100px;
    }

    .home1-trust-block:nth-child(2) {
        border-right: 0;
    }

    .home1-services,
    .home1-process,
    .home1-testimonials {
        padding: 80px 0;
    }

    .home1-services-grid {
        grid-template-columns: 1fr;
    }

    .home1-service-large,
    .home1-service-wide {
        grid-column: auto;
        grid-row: auto;
        min-height: 420px;
    }

    .home1-why,
    .home1-coverage {
        grid-template-columns: 1fr;
        padding: 80px 0;
        gap: 50px;
    }

    .home1-why-image img {
        height: 430px;
    }

    .home1-image-stamp {
        right: 15px;
    }

    .home1-process-line {
        display: none;
    }

    .home1-process-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .home1-process-item {
        max-width: 350px;
        margin: auto;
    }

    .home1-transformation {
        min-height: 650px;
    }

    .home1-transformation-content {
        padding-top: 80px;
        align-self: flex-start;
    }

    .home1-transformation-detail {
        right: 8%;
        bottom: 45px;
    }

    .home1-coverage-visual {
        min-height: 350px;
    }

    .home1-testimonial-grid {
        grid-template-columns: 1fr;
    }

    .home1-testimonial-featured {
        transform: none;
    }

    .home1-final-cta {
        min-height: 500px;
    }

}


/* =========================================================
   MOBILE-M — BELOW 480px
   ========================================================= */

@media (max-width: 480px) {

    .home1-hero-content {
        width: 88%;
        padding-top: 65px;
    }

    .home1-hero-title {
        font-size: 2.55rem;
    }

    .home1-hero-text {
        font-size: 0.82rem;
        line-height: 1.7;
    }

    .home1-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .home1-primary-btn,
    .home1-secondary-btn {
        width: 100%;
    }

    .home1-hero-image {
        width: 180px;
        bottom: 55px;
    }

    .home1-floating-stat {
        bottom: 70px;
        padding: 10px 12px;
    }

    .home1-stat-number {
        font-size: 1.3rem;
    }

    .home1-trust-block strong {
        font-size: 1.5rem;
    }

    .home1-trust-block span {
        font-size: 0.62rem;
    }

    .home1-section-heading {
        margin-bottom: 42px;
    }

    .home1-section-heading h2 {
        font-size: 2rem;
    }

    .home1-service-item,
    .home1-service-large,
    .home1-service-wide {
        min-height: 390px;
    }

    .home1-service-content {
        left: 22px;
        right: 22px;
    }

    .home1-why-content h2,
    .home1-coverage-content h2 {
        font-size: 2rem;
    }

    .home1-why-image img {
        height: 360px;
    }

    .home1-image-stamp {
        width: 105px;
        height: 105px;
    }

    .home1-location-search button {
        padding: 9px 12px;
    }

    .home1-transformation-content h2 {
        font-size: 2.7rem;
    }

    .home1-transformation-detail strong {
        font-size: 3rem;
    }

    .home1-testimonial {
        padding: 32px 25px;
    }

    .home1-final-cta-content h2 {
        font-size: 2.7rem;
    }

}


/* =========================================================
   MOBILE-S — BELOW 360px
   ========================================================= */

@media (max-width: 359px) {

    .home1-hero-title {
        font-size: 2.25rem;
    }

    .home1-hero-content {
        padding-top: 55px;
    }

    .home1-hero-image {
        width: 145px;
    }

    .home1-floating-stat {
        left: 3%;
        padding: 8px;
    }

    .home1-floating-stat small {
        display: none;
    }

    .home1-trust-inner {
        grid-template-columns: 1fr;
    }

    .home1-trust-block {
        border-right: 0;
        border-bottom: 1px solid rgba(38, 51, 45, 0.12);
    }

    .home1-trust-block:last-child {
        border-bottom: 0;
    }

    .home1-section-heading h2 {
        font-size: 1.75rem;
    }

    .home1-service-item,
    .home1-service-large,
    .home1-service-wide {
        min-height: 350px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .home1-reveal,
    .home1-hero-background,
    .home1-hero-image,
    .home1-coverage-map,
    .home1-map-dot,
    .home1-map-ring,
    .home1-scroll-indicator i {
        animation: none !important;
        transition: none !important;
    }

}

/* =========================================================
   CLEANORA - MOBILE HOME DROPDOWN FIX
   Works for Mobile-S, Mobile-M, Mobile-L and Tablet
   ========================================================= */

@media (max-width: 1023px) {

    /* Home dropdown container */
    .cleanora-navmenu .cleanora-dropdown {
        width: 100%;
        display: block;
        position: relative;
    }

    /* Home / Dashboard dropdown button */
    .cleanora-navmenu .cleanora-dropdown-toggle {
        width: 100%;
        min-height: 48px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 14px 5px;

        background: transparent;
        border: none;

        color: var(--cleanora-charcoal);

        cursor: pointer;
    }

    /* Arrow */
    .cleanora-navmenu .cleanora-dropdown-toggle i {
        display: inline-block;
        margin-left: auto;

        transition: transform 0.3s ease;
    }

    /* Rotate arrow when dropdown is open */
    .cleanora-navmenu .cleanora-dropdown.active .cleanora-dropdown-toggle i {
        transform: rotate(180deg);
    }

    /* IMPORTANT:
       Override desktop dropdown positioning */
    .cleanora-navmenu .cleanora-dropdownmenu {
        position: static !important;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        display: none;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;

        background-color: var(--cleanora-light-sage);

        border: none;
        box-shadow: none;
    }

    /* SHOW HOME DROPDOWN */
    .cleanora-navmenu .cleanora-dropdown.active .cleanora-dropdownmenu {
        display: block !important;
    }

    /* Home Page 1 / Home Page 2 */
    .cleanora-navmenu .cleanora-dropdownlink {
        width: 100%;

        display: block;

        padding: 13px 25px;

        color: var(--cleanora-charcoal);

        background-color: transparent;

        font-size: 0.82rem;
    }

    /* Hover */
    .cleanora-navmenu .cleanora-dropdownlink:hover {
        padding-left: 30px;

        color: var(--cleanora-white);

        background-color: var(--cleanora-sage);
    }
}

/* =========================================================
   HOME PAGE 1 — COVERAGE REDESIGN
   ========================================================= */

.home1-coverage {
    position: relative;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 80px;

    width: min(1180px, 92%);
    min-height: 680px;
    margin: 0 auto;
    padding: 100px 0;
}


/* ---------------------------------------------------------
   LEFT CONTENT
   --------------------------------------------------------- */

.home1-coverage-content {
    position: relative;
    z-index: 2;
}

.home1-coverage-content h2 {
    max-width: 560px;
    margin: 18px 0 24px;

    font-size: clamp(2.8rem, 5vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.home1-coverage-content h2 span {
    color: var(--cleanora-sage);
}

.home1-coverage-content p {
    max-width: 520px;
    margin-bottom: 40px;

    font-size: 1rem;
    line-height: 1.8;
    color: rgba(247, 243, 234, 0.72);
}


/* ---------------------------------------------------------
   LOCATION SEARCH
   --------------------------------------------------------- */

.home1-location-search {
    display: flex;
    align-items: center;

    width: min(500px, 100%);
    min-height: 56px;

    border-bottom: 1px solid rgba(247, 243, 234, 0.3);
}

.home1-location-search > i {
    margin-right: 14px;
    color: var(--cleanora-sage);
    font-size: 1.05rem;
}

.home1-location-search input {
    flex: 1;

    min-width: 0;
    padding: 16px 0;

    border: none;
    outline: none;

    background: transparent;

    font-family: inherit;
    font-size: 0.95rem;
}

.home1-location-search button {
    padding: 12px 25px;

    border: none;
    background: var(--cleanora-sage);
    color: var(--cleanora-white);

    font-family: inherit;
    font-weight: 600;

    cursor: pointer;
    transition: var(--cleanora-transition);
}

.home1-location-search button:hover {
    background: var(--cleanora-dark-sage);
}


/* ---------------------------------------------------------
   COVERAGE IMAGE
   --------------------------------------------------------- */

.home1-coverage-visual {
    position: relative;
    min-height: 520px;
}

.home1-coverage-image {
    position: relative;

    width: 100%;
    height: 520px;

    overflow: hidden;
}

.home1-coverage-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 1.2s ease;
}

.home1-coverage-image:hover img {
    transform: scale(1.04);
}


/* ---------------------------------------------------------
   IMAGE OVERLAY
   --------------------------------------------------------- */

.home1-coverage-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(38, 51, 45, 0.58),
            rgba(38, 51, 45, 0.08) 65%
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   LOCATION PINS
   --------------------------------------------------------- */

.home1-coverage-pin {
    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border: 3px solid var(--cleanora-white);

    border-radius: 50%;

    background: var(--cleanora-sage);
    color: var(--cleanora-white);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.28);

    z-index: 3;

    animation: home1CoveragePulse 2.5s ease-in-out infinite;
}

.home1-coverage-pin i {
    font-size: 0.95rem;
}

.home1-coverage-pin-one {
    top: 25%;
    left: 30%;
}

.home1-coverage-pin-two {
    top: 45%;
    right: 25%;

    animation-delay: 0.5s;
}

.home1-coverage-pin-three {
    bottom: 25%;
    left: 48%;

    animation-delay: 1s;
}

.home1-coverage-pin-four {
    top: 62%;
    left: 17%;

    animation-delay: 1.5s;
}


@keyframes home1CoveragePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }

}


/* ---------------------------------------------------------
   IMAGE INFORMATION
   --------------------------------------------------------- */

.home1-coverage-image-info {
    position: absolute;
    left: 28px;
    bottom: 28px;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 16px 20px;

    background: rgba(247, 243, 234, 0.96);
    color: var(--cleanora-charcoal);

    z-index: 4;
}

.home1-coverage-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    background: var(--cleanora-sage);
    color: var(--cleanora-white);
}

.home1-coverage-image-info strong {
    display: block;

    margin-bottom: 3px;

    font-size: 0.9rem;
}

.home1-coverage-image-info small {
    display: block;

    font-size: 0.72rem;
    opacity: 0.7;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1023px) {

    .home1-coverage {
        grid-template-columns: 1fr;
        gap: 55px;

        min-height: auto;
        padding: 80px 0;
    }

    .home1-coverage-content {
        max-width: 700px;
    }

    .home1-coverage-visual {
        min-height: 450px;
    }

    .home1-coverage-image {
        height: 450px;
    }

}


@media (max-width: 767px) {

    .home1-coverage {
        width: 88%;
        padding: 65px 0;
    }

    .home1-coverage-content h2 {
        font-size: clamp(2.4rem, 10vw, 3.5rem);
    }

    .home1-location-search {
        width: 100%;
    }

    .home1-coverage-visual {
        min-height: 360px;
    }

    .home1-coverage-image {
        height: 360px;
    }

    .home1-coverage-image-info {
        left: 18px;
        bottom: 18px;

        padding: 13px 15px;
    }

    .home1-coverage-pin {
        width: 36px;
        height: 36px;
    }

}


@media (max-width: 479px) {

    .home1-location-search {
        align-items: stretch;
    }

    .home1-location-search button {
        padding: 10px 17px;
    }

    .home1-coverage-image-info {
        right: 18px;
    }

    .home1-coverage-image-info small {
        font-size: 0.66rem;
    }

}
/* =====================================================
   CLEANORA FOOTER
   ===================================================== */

.cleanora-footer {
    width: 100%;
    margin: 0;
    padding: 0;

    background-color: var(--cleanora-charcoal);
    color: var(--cleanora-white);

    font-family: "Inter", sans-serif;

    overflow: hidden;
}


/* =====================================================
   FOOTER MAIN
   ===================================================== */

.cleanora-footer-main {
    width: 100%;
    padding: 70px 5vw 40px;

    display: grid;
    grid-template-columns:
        minmax(260px, 1.5fr)
        minmax(150px, 1fr)
        minmax(170px, 1fr)
        minmax(250px, 1.25fr);

    gap: 55px;

    box-sizing: border-box;
}


/* =====================================================
   BRAND
   ===================================================== */

.cleanora-footer-brand {
    min-width: 0;
}

.cleanora-footer-logo {
    display: inline-block;

    color: var(--cleanora-white);

    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: 2px;

    text-decoration: none;

    margin-bottom: 22px;
}

.cleanora-footer-description {
    max-width: 390px;

    margin: 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 0.92rem;
    line-height: 1.8;
}


/* =====================================================
   TRUST ITEMS
   ===================================================== */

.cleanora-footer-trust {
    margin-top: 30px;

    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cleanora-footer-trust-item {
    display: flex;
    align-items: center;
    gap: 11px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 0.82rem;
}

.cleanora-footer-trust-item i {
    width: 20px;

    color: var(--cleanora-light-sage);

    font-size: 0.9rem;
}


/* =====================================================
   FOOTER COLUMNS
   ===================================================== */

.cleanora-footer-column {
    min-width: 0;
}

.cleanora-footer-heading {
    position: relative;

    margin: 0 0 25px;

    color: var(--cleanora-white);

    font-size: 0.88rem;
    font-weight: 700;

    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.cleanora-footer-heading::after {
    content: "";

    display: block;

    width: 30px;
    height: 2px;

    margin-top: 10px;

    background-color: var(--cleanora-sage);
}


/* =====================================================
   FOOTER LINKS
   ===================================================== */

.cleanora-footer-links {
    margin: 0;
    padding: 0;

    list-style: none;

    display: flex;
    flex-direction: column;
    gap: 13px;
}

.cleanora-footer-links li {
    margin: 0;
    padding: 0;
}

.cleanora-footer-links a {
    display: inline-block;

    color: rgba(255, 255, 255, 0.68);

    font-size: 0.84rem;
    line-height: 1.5;

    text-decoration: none;

    transition:
        color var(--cleanora-transition),
        transform var(--cleanora-transition);
}

.cleanora-footer-links a:hover {
    color: var(--cleanora-light-sage);

    transform: translateX(5px);
}


/* =====================================================
   CONTACT
   ===================================================== */

.cleanora-footer-contact {
    min-width: 0;
}

.cleanora-footer-contact-item {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    margin-bottom: 20px;
}

.cleanora-footer-contact-icon {
    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var(--cleanora-sage);

    color: var(--cleanora-white);

    font-size: 0.78rem;
}

.cleanora-footer-contact-item div {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.cleanora-footer-contact-item strong {
    color: var(--cleanora-white);

    font-size: 0.78rem;
    font-weight: 700;
}

.cleanora-footer-contact-item span,
.cleanora-footer-contact-item a {
    color: rgba(255, 255, 255, 0.68);

    font-size: 0.79rem;
    line-height: 1.5;

    text-decoration: none;
}

.cleanora-footer-contact-item a:hover {
    color: var(--cleanora-light-sage);
}


/* =====================================================
   SOCIAL LINKS
   ===================================================== */

.cleanora-footer-social {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-top: 25px;
}

.cleanora-footer-social-link {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.25);

    color: var(--cleanora-white);

    text-decoration: none;

    transition:
        background-color var(--cleanora-transition),
        border-color var(--cleanora-transition),
        transform var(--cleanora-transition);
}

.cleanora-footer-social-link:hover {
    background-color: var(--cleanora-sage);
    border-color: var(--cleanora-sage);

    transform: translateY(-3px);
}


/* =====================================================
   NEWSLETTER
   ===================================================== */

.cleanora-footer-newsletter {
    width: 100%;
    box-sizing: border-box;

    padding: 38px 5vw 42px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);

    align-items: center;
    gap: 70px;

    border-top: 1px solid rgba(255, 255, 255, 0.13);
}


.cleanora-footer-newsletter-content {
    min-width: 0;
}

.cleanora-footer-newsletter-kicker {
    display: block;

    margin-bottom: 12px;

    color: var(--cleanora-light-sage);

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 2px;
}

.cleanora-footer-newsletter-content h2 {
    max-width: 650px;

    margin: 0 0 12px;

    color: var(--cleanora-white);

    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1.08;
    font-weight: 750;
}

.cleanora-footer-newsletter-content h2 span {
    color: var(--cleanora-light-sage);
}

.cleanora-footer-newsletter-content p {
    max-width: 600px;

    margin: 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 0.88rem;
    line-height: 1.7;
}


/* =====================================================
   NEWSLETTER FORM
   ===================================================== */

.cleanora-footer-newsletter-form {
    width: 100%;
    min-width: 0;
}

.cleanora-footer-newsletter-label {
    display: block;

    margin-bottom: 9px;

    color: var(--cleanora-white);

    font-size: 0.75rem;
    font-weight: 600;
}

.cleanora-footer-newsletter-input {
    width: 100%;
    min-height: 56px;

    display: flex;
    align-items: center;

    border-bottom: 1px solid rgba(255, 255, 255, 0.45);

    box-sizing: border-box;
}

.cleanora-footer-newsletter-input > i {
    flex: 0 0 auto;

    margin-right: 12px;

    color: var(--cleanora-light-sage);
}

.cleanora-footer-newsletter-input input {
    flex: 1;
    min-width: 0;

    padding: 15px 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--cleanora-white);

    font-family: "Inter", sans-serif;
    font-size: 0.85rem;
}

.cleanora-footer-newsletter-input input::placeholder {
    color: rgba(255, 255, 255, 0.58);
}

.cleanora-footer-newsletter-input button {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 12px 17px;

    border: 0;

    background-color: var(--cleanora-cream);
    color: var(--cleanora-charcoal);

    font-family: "Inter", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color var(--cleanora-transition),
        color var(--cleanora-transition);
}

.cleanora-footer-newsletter-input button:hover {
    background-color: var(--cleanora-light-sage);
}

.cleanora-footer-newsletter-message {
    display: block;

    min-height: 18px;

    margin-top: 9px;

    color: var(--cleanora-light-sage);

    font-size: 0.72rem;
}


/* =====================================================
   FOOTER BOTTOM
   ===================================================== */

.cleanora-footer-bottom {
    width: 100%;
    box-sizing: border-box;

    padding: 22px 5vw;

    display: grid;
    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 25px;

    border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.cleanora-footer-bottom p {
    margin: 0;

    color: rgba(255, 255, 255, 0.58);

    font-size: 0.72rem;
}

.cleanora-footer-bottom-links {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 22px;
}

.cleanora-footer-bottom-links a {
    color: rgba(255, 255, 255, 0.58);

    font-size: 0.72rem;

    text-decoration: none;

    transition: color var(--cleanora-transition);
}

.cleanora-footer-bottom-links a:hover {
    color: var(--cleanora-light-sage);
}

.cleanora-footer-top {
    justify-self: end;

    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--cleanora-light-sage);

    font-size: 0.72rem;

    text-decoration: none;
}

.cleanora-footer-top i {
    transition: transform var(--cleanora-transition);
}

.cleanora-footer-top:hover i {
    transform: translateY(-3px);
}


/* =====================================================
   LAPTOP-L
   1200px - 1399px
   ===================================================== */

@media (max-width: 1399px) {

    .cleanora-footer-main {
        grid-template-columns:
            minmax(230px, 1.4fr)
            minmax(145px, 1fr)
            minmax(155px, 1fr)
            minmax(230px, 1.15fr);

        gap: 38px;
    }

    .cleanora-footer-newsletter {
        gap: 45px;
    }

}


/* =====================================================
   LAPTOP
   1024px - 1199px
   ===================================================== */

@media (max-width: 1199px) {

    .cleanora-footer-main {
        grid-template-columns: 1.35fr 1fr 1fr;

        gap: 45px;

        padding: 65px 4vw 40px;
    }

    .cleanora-footer-brand {
        grid-row: span 2;
    }

    .cleanora-footer-contact {
        grid-column: 2 / -1;
    }

    .cleanora-footer-newsletter {
        padding: 32px 4vw 36px;

        grid-template-columns: 1fr 1fr;

        gap: 35px;
    }

    .cleanora-footer-bottom {
        padding-left: 4vw;
        padding-right: 4vw;
    }

}


/* =====================================================
   TABLET
   768px - 1023px
   ===================================================== */

@media (max-width: 1023px) {

    .cleanora-footer-main {
        grid-template-columns: 1fr 1fr;

        gap: 45px 35px;

        padding: 60px 5vw 35px;
    }

    .cleanora-footer-brand {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .cleanora-footer-contact {
        grid-column: auto;
    }

    .cleanora-footer-newsletter {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 30px 5vw 34px;
    }

    .cleanora-footer-bottom {
        grid-template-columns: 1fr 1fr;

        padding: 22px 5vw;
    }

    .cleanora-footer-bottom-links {
        justify-content: flex-end;
    }

    .cleanora-footer-top {
        grid-column: 1 / -1;
        justify-self: start;
    }

}


/* =====================================================
   MOBILE-L
   480px - 767px
   ===================================================== */

@media (max-width: 767px) {

    .cleanora-footer-main {
        grid-template-columns: 1fr;

        gap: 38px;

        padding: 55px 6vw 30px;
    }

    .cleanora-footer-brand {
        grid-column: auto;
    }

    .cleanora-footer-contact {
        grid-column: auto;
    }

    .cleanora-footer-description {
        max-width: 100%;
    }

    .cleanora-footer-newsletter {
        padding: 28px 6vw 32px;
    }

    .cleanora-footer-newsletter-content h2 {
        font-size: 2rem;
    }

    .cleanora-footer-newsletter-input {
        align-items: stretch;
        flex-wrap: wrap;

        border-bottom: 0;
        gap: 10px;
    }

    .cleanora-footer-newsletter-input > i {
        display: none;
    }

    .cleanora-footer-newsletter-input input {
        width: 100%;
        flex: 1 1 100%;

        padding: 14px;

        border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    }

    .cleanora-footer-newsletter-input button {
        width: 100%;

        justify-content: center;

        padding: 14px;
    }

    .cleanora-footer-bottom {
        grid-template-columns: 1fr;

        gap: 15px;

        padding: 22px 6vw;
    }

    .cleanora-footer-bottom-links {
        justify-content: flex-start;

        flex-wrap: wrap;
        gap: 10px 18px;
    }

    .cleanora-footer-top {
        grid-column: auto;
    }

}


/* =====================================================
   MOBILE-M
   360px - 479px
   ===================================================== */

@media (max-width: 479px) {

    .cleanora-footer-main {
        padding-left: 7vw;
        padding-right: 7vw;
    }

    .cleanora-footer-newsletter {
        padding-left: 7vw;
        padding-right: 7vw;
    }

    .cleanora-footer-bottom {
        padding-left: 7vw;
        padding-right: 7vw;
    }

    .cleanora-footer-logo {
        font-size: 1.35rem;
    }

    .cleanora-footer-description {
        font-size: 0.82rem;
    }

    .cleanora-footer-newsletter-content h2 {
        font-size: 1.75rem;
    }

    .cleanora-footer-newsletter-content p {
        font-size: 0.8rem;
    }

}


/* =====================================================
   MOBILE-S
   Below 360px
   ===================================================== */

@media (max-width: 359px) {

    .cleanora-footer-main {
        padding: 45px 6vw 25px;
    }

    .cleanora-footer-newsletter {
        padding: 24px 6vw 28px;
    }

    .cleanora-footer-bottom {
        padding: 20px 6vw;
    }

    .cleanora-footer-heading {
        font-size: 0.8rem;
    }

    .cleanora-footer-links a {
        font-size: 0.78rem;
    }

    .cleanora-footer-contact-item span,
    .cleanora-footer-contact-item a {
        font-size: 0.74rem;
    }

}


/* =================================================
   HOME 1 — FINAL CTA TEXT VISIBILITY
   ================================================= */

.home1-final-cta {
    position: relative;
    isolation: isolate;
}

.home1-final-cta > img.home1-hero-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.home1-final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    z-index: -1;
}

.home1-final-cta-content {
    position: relative;
    z-index: 5;
}

.home1-final-cta-content .home1-section-kicker {
    position: relative;
    z-index: 6;
    color: #FFFFFF !important;
}

.home1-final-cta-content h2 {
    position: relative;
    z-index: 6;
    color: #FFFFFF !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.home1-final-cta-content h2 span {
    color: #D9F0E3 !important;
}

.home1-final-cta-content p {
    position: relative;
    z-index: 6;
    color: #FFFFFF !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.home1-final-cta-content .home1-primary-btn {
    position: relative;
    z-index: 6;
}


/* =========================================================
   CLEANORA HOME 2
   SAME HOME 1 DESIGN SYSTEM
   ========================================================= */

.home2-page {
    --home2-sage: #6B8E7B;
    --home2-cream: #F7F3EA;
    --home2-charcoal: #26332D;
    --home2-white: #FFFFFF;
    --home2-light-sage: #E4ECE7;
    --home2-dark-sage: #527262;

    background-color: var(--home2-cream);
    color: var(--home2-charcoal);

    font-family: "Inter", sans-serif;

    overflow: hidden;
}


/* =========================================================
   COMMON
   ========================================================= */

.home2-page h1,
.home2-page h2,
.home2-page h3,
.home2-page strong,
.home2-section-kicker,
.home2-label,
.home2-primary-btn,
.home2-main-btn,
.home2-service-link,
.home2-arrow-link {
    font-family: "Poppins", sans-serif;
}

.home2-page img {
    display: block;
    max-width: 100%;
}

.home2-page a {
    text-decoration: none;
}

.home2-reveal {
    opacity: 0;
    transform: translateY(55px);
    transition:
        opacity .9s ease,
        transform .9s ease;
}

.home2-reveal.home2-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   HERO
   ========================================================= */

.home2-hero {
    position: relative;
    min-height: calc(100vh - 78px);

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--home2-charcoal);
}

.home2-hero-image-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.home2-hero-image {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.04);

    animation: home2HeroZoom 14s ease-in-out infinite alternate;
}

.home2-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(38, 51, 45, .96) 0%,
            rgba(38, 51, 45, .82) 45%,
            rgba(38, 51, 45, .32) 78%,
            rgba(38, 51, 45, .05) 100%
        );
}

@keyframes home2HeroZoom {

    from {
        transform: scale(1.04);
    }

    to {
        transform: scale(1.11);
    }
}


.home2-hero-content {
    position: relative;
    z-index: 3;

    width: min(720px, 88%);

    margin-left: clamp(6%, 10vw, 14%);

    padding: 100px 0;
}

.home2-label {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 25px;

    color: #DCE8E1;

    font-size: .72rem;
    font-weight: 700;

    letter-spacing: 2px;
}

.home2-label-line {
    width: 45px;
    height: 1px;

    background: #DCE8E1;
}


.home2-hero-content h1 {
    margin: 0 0 28px;

    color: var(--home2-white);

    font-family: "Poppins", sans-serif;
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 700;

    line-height: .98;
    letter-spacing: -3px;
}

.home2-hero-content h1 span {
    display: block;
    color: #BFD4C7;
}

.home2-hero-text {
    max-width: 620px;

    margin-bottom: 36px;

    color: rgba(255,255,255,.86);

    font-size: 1.05rem;
    line-height: 1.8;
}


.home2-hero-actions,
.home2-cta-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
}


.home2-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    padding: 15px 24px;

    background: var(--home2-sage);
    color: var(--home2-white);

    border: 1px solid var(--home2-sage);

    font-size: .82rem;
    font-weight: 600;

    transition: .3s ease;
}

.home2-primary-btn:hover {
    background: var(--home2-dark-sage);
    border-color: var(--home2-dark-sage);
    color: var(--home2-white);

    transform: translateY(-3px);
}

.home2-primary-btn i,
.home2-arrow-link i,
.home2-service-link i,
.home2-main-btn i,
.home2-hero-link i,
.home2-cta-link i {
    transition: transform .3s ease;
}

.home2-primary-btn:hover i,
.home2-arrow-link:hover i,
.home2-service-link:hover i,
.home2-main-btn:hover i,
.home2-hero-link:hover i,
.home2-cta-link:hover i {
    transform: translateX(5px);
}


.home2-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 14px 24px;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50px;

    color: var(--home2-white);

    font-family: "Poppins", sans-serif;
    font-size: .82rem;
    font-weight: 600;

    transition: .3s ease;
}

.home2-cta-link:hover {
    background: var(--home2-sage);
    border-color: var(--home2-sage);
    color: var(--home2-white);

    transform: translateY(-3px);
}

.home2-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 14px 24px;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50px;

    color: var(--home2-white);

    font-family: "Poppins", sans-serif;
    font-size: .82rem;
    font-weight: 600;

    transition: .3s ease;
}

.home2-hero-link:hover {
    background: var(--home2-white);
    border-color: var(--home2-white);
    color: var(--home2-charcoal);

    transform: translateY(-3px);
}


.home2-hero-side-note {
    position: absolute;
    right: 7%;
    bottom: 13%;

    z-index: 4;

    width: 190px;

    padding-left: 18px;

    border-left: 1px solid var(--home2-sage);

    color: var(--home2-white);
}

.home2-hero-side-note span {
    display: block;

    margin-bottom: 10px;

    color: #BFD4C7;

    font-family: "Poppins", sans-serif;
    font-size: .72rem;
    font-weight: 700;
}

.home2-hero-side-note p {
    margin: 0;

    color: rgba(255,255,255,.78);

    font-size: .78rem;
    line-height: 1.7;
}


.home2-scroll-button {
    position: absolute;
    left: 50%;
    bottom: 28px;

    z-index: 4;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    transform: translateX(-50%);

    border: 0;
    background: transparent;

    color: rgba(255,255,255,.82);

    font-family: "Poppins", sans-serif;
    font-size: .62rem;
    letter-spacing: 2px;

    cursor: pointer;
}

.home2-scroll-button i {
    animation: home2ScrollArrow 1.6s ease-in-out infinite;
}

@keyframes home2ScrollArrow {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(7px);
    }
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.home2-section-kicker {
    display: block;

    margin-bottom: 16px;

    color: var(--home2-sage);

    font-size: .70rem;
    font-weight: 700;

    letter-spacing: 2px;
}

.home2-page h2 {
    margin: 0;

    color: var(--home2-charcoal);

    font-size: clamp(2.5rem, 4vw, 4.2rem);
    font-weight: 600;

    line-height: 1.08;
    letter-spacing: -1.5px;
}

.home2-page h2 span {
    color: var(--home2-sage);
}


/* =========================================================
   INTRO
   ========================================================= */

.home2-intro {
    display: grid;
    grid-template-columns: 130px minmax(0, 800px);

    gap: 70px;

    max-width: 1250px;

    margin: auto;

    padding: 125px 35px;
}

.home2-intro-number {
    color: var(--home2-sage);

    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 700;

    letter-spacing: 2px;
}

.home2-intro-content h2 {
    max-width: 780px;
}

.home2-intro-description {
    max-width: 690px;

    margin: 28px 0 45px;

    color: #52665D;

    font-size: .96rem;
    line-height: 1.9;
}


.home2-intro-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin-bottom: 38px;
}

.home2-intro-detail {
    display: flex;
    gap: 15px;
}

.home2-intro-detail > i {
    flex: 0 0 auto;

    color: var(--home2-sage);

    font-size: 1.15rem;
}

.home2-intro-detail strong {
    display: block;

    margin-bottom: 7px;

    color: var(--home2-charcoal);

    font-size: .82rem;
    font-weight: 600;
}

.home2-intro-detail p {
    margin: 0;

    color: #63736C;

    font-size: .76rem;
    line-height: 1.7;
}


.home2-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 12px 22px;

    border: 1px solid rgba(107, 142, 123, 0.35);
    border-radius: 50px;

    color: var(--home2-dark-sage);

    font-size: .82rem;
    font-weight: 600;

    transition: .3s ease;
}

.home2-arrow-link:hover {
    background: var(--home2-sage);
    border-color: var(--home2-sage);
    color: var(--home2-white);

    transform: translateY(-3px);
}


/* =========================================================
   SERVICES
   ========================================================= */

.home2-services {
    padding: 120px max(35px, 7vw);

    background: var(--home2-light-sage);
}

.home2-services-heading {
    display: grid;
    grid-template-columns: 1fr 400px;

    align-items: end;

    gap: 70px;

    max-width: 1250px;

    margin: 0 auto 70px;
}

.home2-services-heading-text {
    margin: 0;

    color: #52665D;

    font-size: .88rem;
    line-height: 1.8;
}


.home2-services-list {
    max-width: 1250px;
    margin: auto;
}


.home2-service-row {
    display: grid;
    grid-template-columns: 70px 290px minmax(0, 1fr);

    align-items: center;

    gap: 45px;

    min-height: 210px;

    padding: 30px 0;

    border-top: 1px solid rgba(38,51,45,.18);

    transition: .45s ease;
}

.home2-service-row:last-child {
    border-bottom: 1px solid rgba(38,51,45,.18);
}

.home2-service-row:hover {
    padding-left: 18px;
}

.home2-service-number {
    color: var(--home2-sage);

    font-family: "Poppins", sans-serif;
    font-size: .78rem;
    font-weight: 700;

    letter-spacing: 1px;
}


.home2-service-image {
    width: 100%;
    height: 170px;

    overflow: hidden;
}

.home2-service-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .8s ease;
}

.home2-service-row:hover .home2-service-image img {
    transform: scale(1.07);
}


.home2-service-content {
    max-width: 560px;
}

.home2-service-content h3 {
    margin: 0 0 13px;

    color: var(--home2-charcoal);

    font-size: 1.55rem;
    font-weight: 600;
}

.home2-service-content p {
    margin: 0 0 20px;

    color: #52665D;

    font-size: .82rem;
    line-height: 1.8;
}

.home2-service-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--home2-dark-sage);

    font-size: .75rem;
    font-weight: 600;
}


/* =========================================================
   STORY
   ========================================================= */

.home2-story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);

    min-height: 650px;
}

.home2-story-image {
    position: relative;

height: 650px;

    overflow: hidden;
}

.home2-story-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 1s ease;
}

.home2-story-image:hover img {
    transform: scale(1.04);
}

.home2-story-caption {
    position: absolute;

    left: 8%;
    bottom: 8%;

    max-width: 290px;

    color: var(--home2-white);

    font-family: "Poppins", sans-serif;
    font-size: .82rem;
    font-weight: 500;

    line-height: 1.6;
}


.home2-story-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 90px clamp(35px, 7vw, 100px);

    background: var(--home2-cream);
}

.home2-story-content h2 {
    margin-bottom: 30px;
}

.home2-story-content p {
    max-width: 100%;


    margin: 0 0 20px;

    color: #52665D;

    font-size: .9rem;
    line-height: 1.9;
}

.home2-story-content .home2-arrow-link {
    align-self: flex-start;
    margin-top: 18px;
}

/* =========================================================
   STATS
   ========================================================= */

.home2-stats {
    padding: 105px max(35px, 7vw);

    background: var(--home2-charcoal);
    color: var(--home2-white);
}

.home2-stats-heading {
    max-width: 1250px;
    margin: 0 auto 65px;
}

.home2-stats-heading h2 {
    color: var(--home2-white);
}

.home2-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    max-width: 1250px;

    margin: auto;
}

.home2-stat-item {
    padding: 25px 30px;

    border-right: 1px solid rgba(255,255,255,.16);
}

.home2-stat-item:last-child {
    border-right: 0;
}

.home2-stat-number {
    display: block;

    margin-bottom: 8px;

    color: #BFD4C7;

    font-family: "Poppins", sans-serif;
    font-size: clamp(2.4rem, 4vw, 4rem);
    font-weight: 600;

    line-height: 1;
}

.home2-stat-number::after {
    content: "+";
}

.home2-stat-item:nth-child(2) .home2-stat-number::after {
    content: "%";
}

.home2-stat-item span {
    color: rgba(255,255,255,.70);

    font-size: .76rem;
}


/* =========================================================
   PROCESS
   ========================================================= */

.home2-process {
    display: grid;
    grid-template-columns: .9fr 1.1fr;

    min-height: 680px;

    background: var(--home2-cream);
}

.home2-process-image {
    min-height: 680px;
    overflow: hidden;
}

.home2-process-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 1s ease;
}

.home2-process-image:hover img {
    transform: scale(1.04);
}


.home2-process-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 90px clamp(40px, 7vw, 100px);
}

.home2-process-content h2 {
    margin-bottom: 48px;
}

.home2-process-list {
    max-width: 600px;
}

.home2-process-step {
    display: grid;
    grid-template-columns: 55px 1fr;

    gap: 20px;

    padding: 22px 0;

    border-top: 1px solid rgba(38,51,45,.16);
}

.home2-process-step:last-child {
    border-bottom: 1px solid rgba(38,51,45,.16);
}

.home2-process-number {
    color: var(--home2-sage);

    font-family: "Poppins", sans-serif;
    font-size: .75rem;
    font-weight: 700;
}

.home2-process-step h3 {
    margin: 0 0 7px;

    color: var(--home2-charcoal);

    font-size: 1rem;
    font-weight: 600;
}

.home2-process-step p {
    margin: 0;

    color: #63736C;

    font-size: .78rem;
    line-height: 1.7;
}


.home2-main-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    align-self: flex-start;

    margin-top: 38px;

    padding: 14px 22px;

    background: var(--home2-sage);
    color: var(--home2-white);

    font-size: .78rem;
    font-weight: 600;

    transition: .3s ease;
}

.home2-main-btn:hover {
    background: var(--home2-dark-sage);
    color: var(--home2-white);
}


/* =========================================================
   TESTIMONIAL
   ========================================================= */

.home2-testimonial {
    position: relative;

    min-height: 540px;

    display: flex;
    align-items: center;

    padding: 100px max(35px, 10vw);

    background: var(--home2-light-sage);

    overflow: hidden;
}

.home2-testimonial-mark {
    position: absolute;

    top: 30px;
    left: 7%;

    color: rgba(82,114,98,.13);

    font-family: Georgia, serif;
    font-size: 15rem;

    line-height: 1;
}

.home2-testimonial-content {
    position: relative;
    z-index: 2;

    max-width: 850px;
}

.home2-testimonial-content blockquote {
    margin: 25px 0 35px;

    color: var(--home2-charcoal);

    font-family: "Poppins", sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    font-weight: 500;

    line-height: 1.45;
}

.home2-testimonial-person {
    display: flex;
    align-items: center;

    gap: 15px;
}

.home2-testimonial-avatar {
    width: 48px;
    height: 48px;

    overflow: hidden;

    border-radius: 50%;
}

.home2-testimonial-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.home2-testimonial-person strong {
    display: block;

    color: var(--home2-charcoal);

    font-size: .78rem;
}

.home2-testimonial-person span {
    display: block;

    margin-top: 3px;

    color: #63736C;

    font-size: .70rem;
}


/* =========================================================
   AREA / COVERAGE
   ========================================================= */

.home2-area {
    display: grid;
    grid-template-columns: .9fr 1.1fr;

    min-height: 650px;

    background: var(--home2-cream);
}

.home2-area-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 90px clamp(35px, 7vw, 100px);
}

.home2-area-content h2 {
    margin-bottom: 25px;
}

.home2-area-content > p {
    max-width: 480px;

    color: #52665D;

    font-size: .88rem;
    line-height: 1.8;
}


.home2-area-search {
    display: flex;
    align-items: center;

    max-width: 500px;

    margin: 28px 0 12px;

    border-bottom: 1px solid rgba(38,51,45,.40);
}

.home2-area-search > i {
    margin-right: 14px;

    color: var(--home2-sage);
}

.home2-area-search input {
    flex: 1;

    min-width: 0;

    padding: 14px 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--home2-charcoal);

    font-family: "Inter", sans-serif;
    font-size: .82rem;
}

.home2-area-search input::placeholder {
    color: #718079;
}

.home2-area-search button {
    padding: 10px 18px;

    border: 0;

    background: var(--home2-sage);
    color: var(--home2-white);

    font-family: "Poppins", sans-serif;
    font-size: .72rem;
    font-weight: 600;

    cursor: pointer;

    transition: .3s ease;
}

.home2-area-search button:hover {
    background: var(--home2-dark-sage);
}

.home2-area-message {
    min-height: 20px;

    margin: 0 0 18px;

    font-size: .72rem;
}


.home2-area-visual {
    position: relative;

    min-height: 650px;

    overflow: hidden;
}

.home2-area-visual > img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 1s ease;
}

.home2-area-visual:hover > img {
    transform: scale(1.04);
}

.home2-area-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        135deg,
        rgba(38,51,45,.45),
        rgba(38,51,45,.05)
    );
}

.home2-area-pin {
    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border: 3px solid var(--home2-white);
    border-radius: 50%;

    background: var(--home2-sage);
    color: var(--home2-white);

    box-shadow: 0 8px 25px rgba(0,0,0,.25);

    z-index: 3;

    animation: home2PinPulse 2.5s ease-in-out infinite;
}

@keyframes home2PinPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }
}

.home2-area-pin-one {
    left: 30%;
    top: 35%;
}

.home2-area-pin-two {
    left: 48%;
    top: 55%;
}

.home2-area-pin-three {
    left: 65%;
    top: 30%;
}

.home2-area-label {
    position: absolute;

    z-index: 4;

    padding: 8px 12px;

    background: rgba(247,243,234,.94);
    color: var(--home2-charcoal);

    font-family: "Poppins", sans-serif;
    font-size: .65rem;
    font-weight: 600;
}

.home2-area-label-one {
    left: 24%;
    top: 27%;
}

.home2-area-label-two {
    left: 43%;
    top: 63%;
}

.home2-area-label-three {
    left: 60%;
    top: 22%;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.home2-cta {
    position: relative;

    min-height: 570px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--home2-charcoal);
}

.home2-cta-image {
    position: absolute;
    inset: 0;
}

.home2-cta-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.home2-cta-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(38,51,45,.95),
            rgba(38,51,45,.70),
            rgba(38,51,45,.18)
        );
}

.home2-cta-content {
    position: relative;
    z-index: 3;

    width: min(700px, 88%);

    margin-left: 10%;

    padding: 90px 0;
}

.home2-cta-content h2 {
    margin-bottom: 25px;

    color: var(--home2-white);
}

.home2-cta-content h2 span {
    color: #D9F0E3;
}

.home2-cta-content p {
    max-width: 570px;

    margin-bottom: 35px;

    color: rgba(255,255,255,.84);

    font-size: .92rem;
    line-height: 1.8;
}


/* =========================================================
   HOME 2 RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1023px) {

    .home2-hero {
        min-height: 780px;
    }

    .home2-hero-content {
        margin-left: 7%;
    }

    .home2-hero-side-note {
        right: 5%;
    }

    .home2-intro {
        grid-template-columns: 70px 1fr;
        gap: 35px;
        padding: 90px 6%;
    }

    .home2-intro-details {
        gap: 20px;
    }

    .home2-services {
        padding: 90px 6%;
    }

    .home2-services-heading {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .home2-service-row {
        grid-template-columns: 55px 230px 1fr;
        gap: 25px;
    }

    .home2-story {
        grid-template-columns: 1fr 1fr;
    }

    .home2-story-image,
    .home2-process-image,
    .home2-area-visual {
        min-height: 520px;
    }

    .home2-process,
    .home2-area {
        min-height: 520px;
    }

    .home2-stats {
        padding: 85px 6%;
    }

    .home2-process-content,
    .home2-area-content {
        padding: 70px 6%;
    }

    .home2-cta-content {
        margin-left: 7%;
    }
}


/* =========================================================
   MOBILE LARGE / TABLET SMALL
   ========================================================= */

@media (max-width: 767px) {

    .home2-hero {
        min-height: 820px;
    }

    .home2-hero-content {
        width: 88%;
        margin: 0 auto;
        padding-top: 80px;
    }

    .home2-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(38,51,45,.94),
                rgba(38,51,45,.72)
            );
    }

    .home2-hero-content h1 {
        font-size: clamp(2.7rem, 10vw, 4rem);
        letter-spacing: -1.8px;
    }

    .home2-hero-text {
        max-width: 550px;
        font-size: .90rem;
    }

    .home2-hero-side-note {
        right: 6%;
        bottom: 15%;
    }

    .home2-scroll-button {
        bottom: 25px;
    }

    .home2-intro {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 80px 6%;
    }

    .home2-intro-number {
        margin-bottom: 5px;
    }

    .home2-intro-details {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .home2-services {
        padding: 80px 6%;
    }

    .home2-services-heading {
        margin-bottom: 45px;
    }

    .home2-service-row {
        grid-template-columns: 45px 1fr;
        gap: 18px;
        padding: 25px 0;
    }

    .home2-service-image {
        grid-column: 2;
        height: 220px;
    }

    .home2-service-content {
        grid-column: 2;
    }

    .home2-story {
        grid-template-columns: 1fr;
    }

    .home2-story-image {
        min-height: 430px;
    }

    .home2-story-content {
        padding: 80px 7%;
    }

    .home2-stats {
        padding: 80px 6%;
    }

    .home2-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .home2-stat-item {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.16);
    }

    .home2-stat-item:nth-child(odd) {
        border-right: 1px solid rgba(255,255,255,.16);
    }

    .home2-stat-item:nth-child(3),
    .home2-stat-item:nth-child(4) {
        border-bottom: 0;
    }

    .home2-process {
        grid-template-columns: 1fr;
    }

    .home2-process-image {
        min-height: 400px;
    }

    .home2-process-content {
        padding: 80px 7%;
    }

    .home2-testimonial {
        min-height: 500px;
        padding: 80px 7%;
    }

    .home2-testimonial-mark {
        left: 5%;
        font-size: 10rem;
    }

    .home2-area {
        grid-template-columns: 1fr;
    }

    .home2-area-content {
        padding: 80px 7%;
    }

    .home2-area-visual {
        min-height: 420px;
    }

    .home2-cta {
        min-height: 600px;
    }

    .home2-cta-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(38,51,45,.94),
                rgba(38,51,45,.70)
            );
    }

    .home2-cta-content {
        width: 88%;
        margin: 0 auto;
        padding: 80px 0;
    }

}


/* =========================================================
   MOBILE MEDIUM
   ========================================================= */

@media (max-width: 575px) {

    .home2-page h2 {
        font-size: 2.2rem;
    }

    .home2-label {
        font-size: .62rem;
        letter-spacing: 1.5px;
    }

    .home2-hero {
        min-height: 780px;
    }

    .home2-hero-content {
        padding-top: 65px;
    }

    .home2-hero-content h1 {
        font-size: 2.7rem;
    }

    .home2-hero-text {
        font-size: .82rem;
        line-height: 1.7;
    }

    .home2-hero-actions,
    .home2-cta-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 17px;
    }

    .home2-primary-btn,
    .home2-hero-link,
    .home2-cta-link {
        justify-content: center;
    }

    .home2-hero-side-note {
        display: none;
    }

    .home2-intro,
    .home2-services,
    .home2-story-content,
    .home2-stats,
    .home2-process-content,
    .home2-testimonial,
    .home2-area-content {
        padding-left: 6%;
        padding-right: 6%;
    }

    .home2-service-row {
        grid-template-columns: 35px 1fr;
        gap: 12px;
    }

    .home2-service-image {
        height: 190px;
    }

    .home2-service-content h3 {
        font-size: 1.25rem;
    }

    .home2-stat-item {
        padding: 22px 15px;
    }

    .home2-stat-number {
        font-size: 2.3rem;
    }

    .home2-area-search {
        max-width: 100%;
    }

    .home2-area-search button {
        padding: 10px 13px;
    }

    .home2-area-visual {
        min-height: 350px;
    }

    .home2-area-pin {
        width: 34px;
        height: 34px;
    }

}


/* =========================================================
   MOBILE SMALL
   ========================================================= */

@media (max-width: 390px) {

    .home2-hero {
        min-height: 740px;
    }

    .home2-hero-content h1 {
        font-size: 2.35rem;
    }

    .home2-page h2 {
        font-size: 1.9rem;
    }

    .home2-section-kicker {
        font-size: .62rem;
    }

    .home2-service-image {
        height: 165px;
    }

    .home2-stat-number {
        font-size: 2rem;
    }

    .home2-area-label {
        font-size: .56rem;
        padding: 6px 8px;
    }

}


/* =========================================================
   EXTRA SMALL
   ========================================================= */

@media (max-width: 359px) {

    .home2-hero {
        min-height: 700px;
    }

    .home2-hero-content {
        padding-top: 55px;
    }

    .home2-hero-content h1 {
        font-size: 2.15rem;
    }

    .home2-page h2 {
        font-size: 1.75rem;
    }

    .home2-service-row {
        grid-template-columns: 30px 1fr;
    }

    .home2-service-image {
        height: 145px;
    }

    .home2-stats-grid {
        grid-template-columns: 1fr;
    }

    .home2-stat-item,
    .home2-stat-item:nth-child(odd) {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.16);
    }

    .home2-stat-item:last-child {
        border-bottom: 0;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .home2-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .home2-hero-image,
    .home2-scroll-button i,
    .home2-area-pin {
        animation: none;
    }

    .home2-service-image img,
    .home2-story-image img,
    .home2-process-image img,
    .home2-area-visual > img {
        transition: none;
    }

}

/* =================================================
   HOME 2 — CLEANORA PROMISE
   ================================================= */

.home2-promise {
    position: relative;
    padding: 120px 6%;
    background: var(--home2-cream);
    color: var(--home2-charcoal);
    overflow: hidden;
}


/* =================================================
   HEADING
   ================================================= */

.home2-promise-heading {
    width: min(850px, 100%);
    margin-bottom: 75px;
}

.home2-promise-heading .home2-section-kicker {
    display: block;
    margin-bottom: 16px;
}

.home2-promise-heading h2 {
    margin: 0 0 22px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2.5rem, 5vw, 4.8rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -2px;
}

.home2-promise-heading h2 span {
    color: var(--cleanora-sage);
}

.home2-promise-heading p {
    max-width: 650px;
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(38, 51, 45, 0.72);
}


/* =================================================
   MAIN LAYOUT
   ================================================= */

.home2-promise-layout {
    width: min(1400px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(350px, 0.85fr);
    gap: 90px;
    align-items: center;
}


/* =================================================
   BEFORE / AFTER VISUAL
   ================================================= */

.home2-promise-visual {
    position: relative;
    height: 600px;
    overflow: hidden;
    background: var(--cleanora-light-sage);
    isolation: isolate;
    cursor: ew-resize;
}


.home2-promise-before,
.home2-promise-after {
    position: absolute;
    inset: 0;
    overflow: hidden;
}


.home2-promise-before img,
.home2-promise-after img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


.home2-promise-before {
    z-index: 1;
}


.home2-promise-after {
    z-index: 2;
    width: 50%;
}


.home2-promise-image-label {
    position: absolute;
    top: 25px;
    padding: 9px 15px;
    background: rgba(38, 51, 45, 0.88);
    color: #FFFFFF;
    font-family: "Poppins", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.5px;
}


.home2-promise-before .home2-promise-image-label {
    left: 25px;
}


.home2-promise-after .home2-promise-image-label {
    right: 25px;
}


/* =================================================
   DIVIDER
   ================================================= */

.home2-promise-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    z-index: 5;
    transform: translateX(-50%);
    pointer-events: none;
}


.home2-promise-divider-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: #FFFFFF;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
    transform: translateX(-50%);
}


.home2-promise-drag {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 2px solid #FFFFFF;
    background: var(--cleanora-sage);
    color: #FFFFFF;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    cursor: ew-resize;
    pointer-events: auto;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.22);
}


.home2-promise-drag i {
    font-size: 0.9rem;
}


/* =================================================
   RESULT BADGE
   ================================================= */

.home2-promise-result {
    position: absolute;
    right: 25px;
    bottom: 25px;
    z-index: 6;
    min-width: 145px;
    padding: 18px 20px;
    background: rgba(247, 243, 234, 0.95);
    color: var(--cleanora-charcoal);
}


.home2-promise-result strong {
    display: block;
    font-family: "Poppins", sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
}


.home2-promise-result span {
    display: block;
    margin-top: 6px;
    font-family: "Inter", sans-serif;
    font-size: 0.68rem;
    line-height: 1.4;
}


/* =================================================
   PROMISE CONTENT
   ================================================= */

.home2-promise-content {
    display: flex;
    flex-direction: column;
}


.home2-promise-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 22px;
    padding: 0 0 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid rgba(38, 51, 45, 0.15);
}


.home2-promise-number {
    font-family: "Poppins", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cleanora-sage);
    padding-top: 5px;
}


.home2-promise-item i {
    display: block;
    margin-bottom: 13px;
    color: var(--cleanora-sage);
    font-size: 1.25rem;
}


.home2-promise-item h3 {
    margin: 0 0 10px;
    font-family: "Poppins", sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--home2-charcoal);
}


.home2-promise-item p {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 0.88rem;
    line-height: 1.75;
    color: rgba(38, 51, 45, 0.68);
}


.home2-promise-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    margin-top: 5px;
    font-family: "Poppins", sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cleanora-dark-sage);
    text-decoration: none;
}


.home2-promise-link i {
    transition: transform 0.3s ease;
}


.home2-promise-link:hover {
    color: var(--cleanora-sage);
}


.home2-promise-link:hover i {
    transform: translateX(6px);
}


/* =================================================
   PROMISE IMAGE HOVER
   ================================================= */

.home2-promise-visual:hover .home2-promise-after img {
    transform: scale(1.025);
}


.home2-promise-before img,
.home2-promise-after img {
    transition: transform 0.8s ease;
}


/* =================================================
   TABLET / SMALL LAPTOP
   ================================================= */

@media (max-width: 1199px) {

    .home2-promise {
        padding: 100px 5%;
    }

    .home2-promise-layout {
        gap: 55px;
    }

    .home2-promise-visual {
        height: 520px;
    }

}


/* =================================================
   TABLET
   ================================================= */

@media (max-width: 1023px) {

    .home2-promise {
        padding: 90px 5%;
    }

    .home2-promise-heading {
        margin-bottom: 55px;
    }

    .home2-promise-layout {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .home2-promise-visual {
        height: 560px;
    }

    .home2-promise-content {
        max-width: 750px;
    }

}


/* =================================================
   MOBILE
   ================================================= */

@media (max-width: 767px) {

    .home2-promise {
        padding: 75px 6%;
    }

    .home2-promise-heading {
        margin-bottom: 45px;
    }

    .home2-promise-heading h2 {
        font-size: clamp(2.2rem, 10vw, 3.2rem);
        letter-spacing: -1px;
    }

    .home2-promise-heading p {
        font-size: 0.88rem;
        line-height: 1.7;
    }

    .home2-promise-layout {
        gap: 45px;
    }

    .home2-promise-visual {
        height: 430px;
    }

    .home2-promise-image-label {
        top: 18px;
        padding: 7px 11px;
        font-size: 0.58rem;
    }

    .home2-promise-before .home2-promise-image-label {
        left: 18px;
    }

    .home2-promise-after .home2-promise-image-label {
        right: 18px;
    }

    .home2-promise-drag {
        width: 42px;
        height: 42px;
    }

    .home2-promise-result {
        right: 18px;
        bottom: 18px;
        min-width: 120px;
        padding: 14px;
    }

    .home2-promise-result strong {
        font-size: 1.4rem;
    }

    .home2-promise-item {
        grid-template-columns: 35px 1fr;
        gap: 14px;
        padding-bottom: 25px;
        margin-bottom: 25px;
    }

    .home2-promise-item h3 {
        font-size: 1rem;
    }

    .home2-promise-item p {
        font-size: 0.82rem;
    }

}


/* =================================================
   SMALL MOBILE
   ================================================= */

@media (max-width: 480px) {

    .home2-promise {
        padding: 65px 5%;
    }

    .home2-promise-visual {
        height: 350px;
    }

    .home2-promise-result {
        right: 12px;
        bottom: 12px;
    }

    .home2-promise-result span {
        font-size: 0.6rem;
    }

    .home2-promise-item {
        grid-template-columns: 30px 1fr;
    }

    .home2-promise-link {
        font-size: 0.75rem;
    }

}


/* =========================================================
   =========================================================
   ABOUT US PAGE — CLEANORA
   Page-specific styles
   All selectors use the aboutus- prefix
   =========================================================
   ========================================================= */


/* =========================================================
   ABOUT US — PAGE FOUNDATION
   ========================================================= */

body.aboutus-body {
    overflow-x: hidden;
}

.aboutus-page main {
    overflow: hidden;
}

.aboutus-page .aboutus-reveal {
    opacity: 0;
    transform: translateY(55px);
    transition:
        opacity 0.9s ease,
        transform 0.9s ease;
}
/* =========================================================
   OVERRIDE GENERAL REVEAL FOR MISSION / VISION CARDS
========================================================= */

.aboutus-mission-card.aboutus-reveal {
    transform: translateX(-120px) scale(0.94);
}

.aboutus-vision-card.aboutus-reveal {
    transform: translateX(120px) scale(0.94);
}

.aboutus-mission-card.aboutus-reveal.aboutus-visible,
.aboutus-vision-card.aboutus-reveal.aboutus-visible {
    opacity: 1;
}

.aboutus-page .aboutus-reveal.aboutus-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   SHARED ABOUT US TYPOGRAPHY
   ========================================================= */

.aboutus-page .aboutus-section-kicker {
    display: inline-block;
    margin-bottom: 15px;
    font-family: "Poppins", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 2px;
    color: var(--cleanora-sage);
}

.aboutus-page p {
    font-family: "Inter", sans-serif;
}


/* =========================================================
   SECTION 1 — HERO
   ========================================================= */

.aboutus-hero {
    position: relative;
    min-height: calc(100vh - 78px);
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--cleanora-charcoal);
    color: var(--cleanora-white);
}


/* HERO IMAGE */

.aboutus-hero-media {
    position: absolute;
    inset: 0;
    z-index: -3;
    overflow: hidden;
}

.aboutus-hero-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.04);
    animation: aboutusHeroZoom 14s ease-in-out infinite alternate;
}

@keyframes aboutusHeroZoom {
    from {
        transform: scale(1.04);
    }

    to {
        transform: scale(1.12);
    }
}


/* HERO OVERLAY */

.aboutus-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(38, 51, 45, 0.96) 0%,
            rgba(38, 51, 45, 0.82) 48%,
            rgba(38, 51, 45, 0.25) 100%
        );
}


/* HERO CONTENT */

.aboutus-hero-content {
    position: relative;
    z-index: 3;
    width: min(1180px, 92%);
    margin: 0 auto;
    padding: 110px 0 190px;
}

.aboutus-hero-kicker {
    display: block;
    margin-bottom: 20px;
    font-family: "Poppins", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: #BFD4C7;
}

.aboutus-hero-title {
    max-width: 950px;
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: clamp(3rem, 6.2vw, 6rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -3px;
    color: #FFFFFF;
}

.aboutus-hero-title span {
    display: block;
    color: #BFD4C7;
}

.aboutus-hero-description {
    max-width: 600px;
    margin: 30px 0 0;
    font-size: 1rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.78);
}


/* HERO BUTTONS */

.aboutus-hero-actions {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 38px;
}

.aboutus-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 25px;
    border: 1px solid var(--cleanora-sage);
    background: var(--cleanora-sage);
    color: #FFFFFF;
    font-family: "Poppins", sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease;
}

.aboutus-primary-btn:hover {
    transform: translateY(-4px);
    background: var(--cleanora-dark-sage);
    border-color: var(--cleanora-dark-sage);
    color: #FFFFFF;
}

.aboutus-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 13px 22px;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50px;

    color: #FFFFFF;
    font-family: "Poppins", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: .3s ease;
}

.aboutus-text-link:hover {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--cleanora-charcoal);

    transform: translateY(-3px);
}


/* HERO FLOATING ASSETS */

.aboutus-hero-float {
    position: absolute;
    right: 8%;
    bottom: 27%;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    background: rgba(247, 243, 234, 0.94);
    color: var(--cleanora-charcoal);
    font-family: "Inter", sans-serif;
    font-size: 0.72rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.aboutus-hero-float i {
    color: var(--cleanora-sage);
}

.aboutus-hero-float-two {
    right: 18%;
    bottom: 14%;
    display: block;
    min-width: 135px;
}

.aboutus-hero-float-two strong {
    display: block;
    font-family: "Poppins", sans-serif;
    font-size: 1.6rem;
    line-height: 1;
}

.aboutus-hero-float-two span {
    display: block;
    margin-top: 5px;
    font-size: 0.67rem;
    color: var(--cleanora-dark-sage);
}


/* HERO STATS */

.aboutus-hero-stats {
    position: absolute;
    left: 4%;
    bottom: 35px;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    gap: 42px;
}

.aboutus-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.aboutus-hero-stat strong {
    font-family: "Poppins", sans-serif;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1;
    color: #FFFFFF;
}

.aboutus-hero-stat span {
    font-family: "Inter", sans-serif;
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.7);
}


/* =========================================================
   ABOUT US - MISSION & VISION
   TWO CARDS COLLISION ANIMATION
========================================================= */

.aboutus-missionvision {
    position: relative;
    width: 100%;
    min-height: 760px;
    padding: 110px 6vw 120px;
    background: var(--cleanora-cream);
    color: var(--cleanora-charcoal);
    overflow: hidden;
}


/* =========================================================
   HEADING
========================================================= */

.aboutus-missionvision-heading {
    position: relative;
    z-index: 5;
    max-width: 760px;
    margin: 0 auto 75px;
    text-align: center;
}

.aboutus-missionvision-heading h2 {
    margin: 14px 0 18px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -2px;
}

.aboutus-missionvision-heading h2 span {
    color: var(--cleanora-sage);
}

.aboutus-missionvision-heading p {
    max-width: 620px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(38, 51, 45, 0.68);
}


/* =========================================================
   CARDS AREA
========================================================= */

.aboutus-missionvision-cards {
    position: relative;
    z-index: 3;

    width: min(1250px, 100%);
    min-height: 360px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;

    align-items: center;
}


/* =========================================================
   PURPOSE CARD
========================================================= */

.aboutus-purpose-card {
    position: relative;

    min-height: 350px;

    padding: 45px 48px;

    overflow: hidden;

    border-radius: 24px;

    box-shadow:
        0 25px 60px rgba(38, 51, 45, 0.12);

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
}


/* Mission */

.aboutus-mission-card {
    background: #E4ECE7;

    transform:
        translateX(-120px)
        scale(0.94);

    opacity: 0;
}


/* Vision */

.aboutus-vision-card {
    background: #26332D;
    color: var(--cleanora-white);

    transform:
        translateX(120px)
        scale(0.94);

    opacity: 0;
}


/* =========================================================
   WHEN CARDS BECOME VISIBLE
========================================================= */

.aboutus-mission-card.aboutus-visible {
    animation:
        aboutusMissionEnter
        1.15s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}


.aboutus-vision-card.aboutus-visible {
    animation:
        aboutusVisionEnter
        1.15s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}


/* =========================================================
   MISSION ENTERS FROM LEFT
========================================================= */

@keyframes aboutusMissionEnter {

    0% {
        opacity: 0;
        transform:
            translateX(-120px)
            scale(0.94);
    }

    55% {
        opacity: 1;
        transform:
            translateX(30px)
            scale(1.015);
    }

    75% {
        transform:
            translateX(-12px)
            scale(1.005);
    }

    100% {
        opacity: 1;
        transform:
            translateX(0)
            scale(1);
    }

}


/* =========================================================
   VISION ENTERS FROM RIGHT
========================================================= */

@keyframes aboutusVisionEnter {

    0% {
        opacity: 0;
        transform:
            translateX(120px)
            scale(0.94);
    }

    55% {
        opacity: 1;
        transform:
            translateX(-30px)
            scale(1.015);
    }

    75% {
        transform:
            translateX(12px)
            scale(1.005);
    }

    100% {
        opacity: 1;
        transform:
            translateX(0)
            scale(1);
    }

}


/* =========================================================
   ICON
========================================================= */

.aboutus-purpose-icon {
    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 28px;

    border-radius: 50%;

    background: var(--cleanora-sage);
    color: var(--cleanora-white);

    font-size: 1.35rem;

    transition:
        transform 0.4s ease,
        background 0.4s ease;
}


.aboutus-vision-card .aboutus-purpose-icon {
    background: #BFD4C7;
    color: var(--cleanora-charcoal);
}


.aboutus-purpose-card:hover
.aboutus-purpose-icon {
    transform:
        rotate(-8deg)
        scale(1.08);
}


/* =========================================================
   NUMBER
========================================================= */

.aboutus-purpose-number {
    position: absolute;

    top: 28px;
    right: 34px;

    font-family: "Poppins", sans-serif;

    font-size: 5rem;
    font-weight: 800;

    line-height: 1;

    color: rgba(38, 51, 45, 0.07);

    pointer-events: none;
}


.aboutus-vision-card .aboutus-purpose-number {
    color: rgba(255, 255, 255, 0.06);
}


/* =========================================================
   CONTENT
========================================================= */

.aboutus-purpose-content {
    position: relative;
    z-index: 2;
    max-width: 480px;
}


.aboutus-purpose-label {
    display: block;

    margin-bottom: 12px;

    font-family: "Poppins", sans-serif;

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 2px;

    color: var(--cleanora-dark-sage);
}


.aboutus-vision-card .aboutus-purpose-label {
    color: #BFD4C7;
}


.aboutus-purpose-content h3 {
    margin: 0 0 18px;

    font-family: "Poppins", sans-serif;

    font-size: clamp(1.8rem, 3vw, 2.6rem);

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -1px;
}


.aboutus-purpose-content h3 span {
    color: var(--cleanora-dark-sage);
}


.aboutus-vision-card .aboutus-purpose-content h3 span {
    color: #BFD4C7;
}


.aboutus-purpose-content p {
    max-width: 450px;

    margin: 0;

    font-size: 0.94rem;

    line-height: 1.8;

    color: rgba(38, 51, 45, 0.68);
}


.aboutus-vision-card .aboutus-purpose-content p {
    color: rgba(255, 255, 255, 0.68);
}


/* =========================================================
   BOTTOM LINE
========================================================= */

.aboutus-purpose-line {
    width: 100%;
    height: 1px;

    margin: 32px 0 20px;

    background: rgba(38, 51, 45, 0.15);
}


.aboutus-vision-card .aboutus-purpose-line {
    background: rgba(255, 255, 255, 0.15);
}


/* =========================================================
   CARD FOOTER
========================================================= */

.aboutus-purpose-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.aboutus-purpose-bottom span {
    display: flex;

    align-items: center;

    gap: 9px;

    font-family: "Poppins", sans-serif;

    font-size: 0.72rem;
    font-weight: 600;

    color: var(--cleanora-dark-sage);
}


.aboutus-purpose-bottom span i {
    color: var(--cleanora-sage);
}


.aboutus-vision-card .aboutus-purpose-bottom span {
    color: #BFD4C7;
}


.aboutus-vision-card .aboutus-purpose-bottom span i {
    color: #BFD4C7;
}


.aboutus-purpose-bottom > i {
    color: var(--cleanora-sage);

    transition:
        transform 0.3s ease;
}


.aboutus-vision-card .aboutus-purpose-bottom > i {
    color: #BFD4C7;
}


.aboutus-purpose-card:hover
.aboutus-purpose-bottom > i {
    transform: translateX(6px);
}


/* =========================================================
   CENTER COLLISION POINT
========================================================= */

.aboutus-purpose-collision {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 8;

    width: 1px;
    height: 1px;

    transform:
        translate(-50%, -50%);

    pointer-events: none;
}


.aboutus-purpose-collision::before,
.aboutus-purpose-collision::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--cleanora-sage);

    transform:
        translate(-50%, -50%)
        scale(0);

    opacity: 0;
}


/* Collision happens after cards arrive */

.aboutus-missionvision
.aboutus-purpose-collision.aboutus-collision-active::before {

    animation:
        aboutusCollisionBurst
        0.7s
        0.1s
        ease-out
        forwards;
}


.aboutus-missionvision
.aboutus-purpose-collision.aboutus-collision-active::after {

    animation:
        aboutusCollisionBurst
        0.7s
        0.18s
        ease-out
        forwards;
}


@keyframes aboutusCollisionBurst {

    0% {
        opacity: 0.9;

        transform:
            translate(-50%, -50%)
            scale(0);
    }

    45% {
        opacity: 0.8;

        transform:
            translate(-50%, -50%)
            scale(18);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(42);
    }

}


/* =========================================================
   COLLISION RESULT
========================================================= */

.aboutus-purpose-result {

    position: relative;

    z-index: 6;

    width: fit-content;

    margin: 42px auto 0;

    display: flex;

    align-items: center;
    gap: 10px;

    font-family: "Poppins", sans-serif;

    font-size: 0.78rem;
    font-weight: 600;

    color: var(--cleanora-dark-sage);

    opacity: 0;

    transform:
        translateY(15px)
        scale(0.9);

    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}


.aboutus-purpose-result.aboutus-visible {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

}


.aboutus-purpose-result i {
    color: var(--cleanora-sage);

    animation:
        aboutusResultSparkle
        1.8s
        ease-in-out
        infinite;
}


@keyframes aboutusResultSparkle {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.2);
    }

}


/* =========================================================
   HOVER - CARD LIFTS SLIGHTLY
========================================================= */

.aboutus-mission-card.aboutus-visible:hover {
    transform:
        translateY(-8px)
        scale(1.01);
}


.aboutus-vision-card.aboutus-visible:hover {
    transform:
        translateY(-8px)
        scale(1.01);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1023px) {

    .aboutus-missionvision {
        padding: 90px 5vw 100px;
    }

    .aboutus-missionvision-heading {
        margin-bottom: 60px;
    }

    .aboutus-missionvision-cards {
        gap: 24px;
    }

    .aboutus-purpose-card {
        min-height: 360px;
        padding: 38px 34px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .aboutus-missionvision {
        min-height: auto;
        padding: 80px 6vw 90px;
    }

    .aboutus-missionvision-heading {
        margin-bottom: 45px;
    }

    .aboutus-missionvision-heading h2 {
        font-size: 2.4rem;
        letter-spacing: -1px;
    }

    .aboutus-missionvision-heading p {
        font-size: 0.88rem;
    }

    .aboutus-missionvision-cards {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .aboutus-purpose-card {
    width: 100%;
    height: auto;
    min-height: 330px;
    padding: 34px 28px;
}
    /*
       On mobile the cards enter from
       opposite vertical directions.
    */

    .aboutus-mission-card {
        transform:
            translateY(-70px)
            scale(0.95);
    }

    .aboutus-vision-card {
        transform:
            translateY(70px)
            scale(0.95);
    }

    .aboutus-mission-card.aboutus-visible {
        animation:
            aboutusMissionMobileEnter
            0.9s
            cubic-bezier(0.22, 1, 0.36, 1)
            forwards;
    }

    .aboutus-vision-card.aboutus-visible {
        animation:
            aboutusVisionMobileEnter
            0.9s
            cubic-bezier(0.22, 1, 0.36, 1)
            forwards;
    }

    @keyframes aboutusMissionMobileEnter {

        0% {
            opacity: 0;
            transform:
                translateY(-70px)
                scale(0.95);
        }

        70% {
            opacity: 1;
            transform:
                translateY(8px)
                scale(1.01);
        }

        100% {
            opacity: 1;
            transform:
                translateY(0)
                scale(1);
        }

    }

    @keyframes aboutusVisionMobileEnter {

        0% {
            opacity: 0;
            transform:
                translateY(70px)
                scale(0.95);
        }

        70% {
            opacity: 1;
            transform:
                translateY(-8px)
                scale(1.01);
        }

        100% {
            opacity: 1;
            transform:
                translateY(0)
                scale(1);
        }

    }

    .aboutus-purpose-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 22px;
    }

    .aboutus-purpose-number {
        font-size: 4rem;
        top: 22px;
        right: 24px;
    }

    .aboutus-purpose-content h3 {
        font-size: 1.75rem;
    }

    .aboutus-purpose-content p {
        font-size: 0.86rem;
    }

    .aboutus-purpose-collision {
        display: none;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .aboutus-missionvision {
        padding: 70px 5vw 80px;
    }

    .aboutus-missionvision-heading h2 {
        font-size: 2.05rem;
    }

    .aboutus-purpose-card {
        min-height: 315px;
        padding: 30px 24px;
    }

    .aboutus-purpose-content h3 {
        font-size: 1.55rem;
    }

    .aboutus-purpose-content p {
        font-size: 0.82rem;
        line-height: 1.7;
    }

    .aboutus-purpose-number {
        font-size: 3.5rem;
    }

}
/* =========================================================
   SECTION 3 — HISTORY
   ========================================================= */

.aboutus-history {
    position: relative;
    padding: 120px 6%;
    overflow: hidden;
    background: var(--cleanora-light-sage);
    color: var(--cleanora-charcoal);
}

.aboutus-history-heading {
    width: min(800px, 100%);
    margin: 0 auto 90px;
    text-align: center;
}

.aboutus-history-heading h2 {
    margin: 0 0 22px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2.6rem, 5vw, 4.8rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -2px;
}

.aboutus-history-heading h2 span {
    color: var(--cleanora-sage);
}

.aboutus-history-heading p {
    max-width: 600px;
    margin: 0 auto;
    font-size: 0.92rem;
    line-height: 1.8;
    color: rgba(38, 51, 45, 0.68);
}


/* TIMELINE */

.aboutus-timeline {
    position: relative;
    width: min(1400px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.aboutus-timeline-track {
    position: absolute;
    top: 17px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: rgba(38, 51, 45, 0.15);
}

.aboutus-timeline-progress {
    display: block;
    width: 0;
    height: 100%;
    background: var(--cleanora-sage);
    transition: width 1.5s ease;
}


/* TIMELINE ITEM */

.aboutus-timeline-item {
    position: relative;
    padding: 0 25px;
}

.aboutus-timeline-marker {
    position: relative;
    width: 36px;
    height: 36px;
    margin-bottom: 35px;
    display: grid;
    place-items: center;
    background: var(--cleanora-light-sage);
    border: 1px solid rgba(107, 142, 123, 0.45);
    transform: rotate(45deg);
    z-index: 3;
}

.aboutus-timeline-marker span {
    width: 9px;
    height: 9px;
    background: var(--cleanora-sage);
    transform: rotate(-45deg);
    transition: transform 0.4s ease;
}

.aboutus-timeline-item:hover
.aboutus-timeline-marker span {
    transform: rotate(-45deg) scale(1.7);
}

.aboutus-timeline-content {
    max-width: 260px;
}

.aboutus-timeline-year {
    display: block;
    margin-bottom: 8px;
    font-family: "Poppins", sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--cleanora-dark-sage);
}

.aboutus-timeline-content h3 {
    margin: 0 0 12px;
    font-family: "Poppins", sans-serif;
    font-size: 1.08rem;
    font-weight: 600;
}

.aboutus-timeline-content p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.75;
    color: rgba(38, 51, 45, 0.67);
}


/* =========================================================
   ABOUT US - SECTION 4 : MOUSE PARALLAX DIFFERENCE
========================================================= */

.aboutus-difference {
    position: relative;
    min-height: 800px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--cleanora-charcoal);
    color: #fff;
}

/* subtle mouse-follow glow */
.aboutus-difference::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    left: var(--aboutus-mouse-x, 50%);
    top: var(--aboutus-mouse-y, 50%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(107, 142, 123, 0.16) 0%,
        rgba(107, 142, 123, 0.06) 35%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    transition:
        left 0.18s ease-out,
        top 0.18s ease-out;
}


/* Main layout */

.aboutus-difference-layout {
    position: relative;
    z-index: 3;

    width: min(1350px, 88%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 100px;
    align-items: center;

    transform:
        translate(
            var(--aboutus-content-x, 0px),
            var(--aboutus-content-y, 0px)
        );
    transition: transform 0.25s ease-out;
}


/* Left side */

.aboutus-difference-statement {
    position: relative;
    z-index: 3;
}

.aboutus-difference-statement h2 {
    margin: 14px 0 28px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(2.8rem, 5vw, 5.3rem);
    font-weight: 700;
    line-height: 0.99;
    letter-spacing: -3px;

    color: #fff;
}

.aboutus-difference-statement h2 span {
    color: #bfd8cb;
}

.aboutus-difference-statement p {
    max-width: 560px;
    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 1.08rem;
    line-height: 1.85;

    color: rgba(255, 255, 255, 0.82);
}


/* Feature list */

.aboutus-difference-features {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
}


/* Feature */

.aboutus-difference-feature {
    position: relative;

    width: 100%;

    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 22px;

    padding: 28px 0;

    border: 0;
    border-top: 1px solid rgba(255,255,255,.18);
    border-radius: 0;

    background: transparent;
    color: #fff;

    text-align: left;
    cursor: pointer;

    transition:
        transform .35s ease,
        padding-left .35s ease,
        border-color .35s ease;
}

.aboutus-difference-feature:last-child {
    border-bottom: 1px solid rgba(255,255,255,.18);
}


/* Mouse hover */

@media (hover:hover) {

    .aboutus-difference-feature:hover {
        padding-left: 14px;
        transform: translateX(6px);
        border-color: rgba(191,216,203,.55);
    }

    .aboutus-difference-feature:hover
    .aboutus-difference-feature-number {
        color: #fff;
    }

    .aboutus-difference-feature:hover i {
        color: #fff;
        transform: translateX(7px) rotate(-5deg);
    }

}


/* Number */

.aboutus-difference-feature-number {
    padding-top: 2px;

    font-family: "Poppins", sans-serif;
    font-size: .78rem;
    font-weight: 700;

    color: #bfd8cb;

    transition: color .3s ease;
}


/* Icon */

.aboutus-difference-feature i {
    display: block;
    margin-bottom: 10px;

    color: #bfd8cb;
    font-size: 1.15rem;

    transition:
        transform .35s ease,
        color .3s ease;
}


/* Heading */

.aboutus-difference-feature h3 {
    margin: 0 0 9px;

    font-family: "Poppins", sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.4;

    color: #fff;
}


/* Description */

.aboutus-difference-feature p {
    max-width: 560px;
    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 1rem;
    line-height: 1.75;

    color: rgba(255,255,255,.76);
}


/* Giant CARE */

.aboutus-difference-kinetic {
    position: absolute;

    right: -2%;
    bottom: -8%;

    z-index: 1;

    font-family: "Poppins", sans-serif;
    font-size: clamp(8rem, 19vw, 20rem);
    font-weight: 800;
    line-height: .8;
    letter-spacing: -12px;

    color: rgba(255,255,255,.045);

    white-space: nowrap;
    pointer-events: none;

    transform:
        translate(
            var(--aboutus-care-x, 0px),
            var(--aboutus-care-y, 0px)
        );

    transition: transform .25s ease-out;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1023px) {

    .aboutus-difference {
        min-height: auto;
        padding: 100px 0;
    }

    .aboutus-difference-layout {
        width: 88%;
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .aboutus-difference-statement h2 {
        font-size: clamp(2.8rem,7vw,4.5rem);
    }

    .aboutus-difference-statement p {
        max-width: 720px;
    }

    .aboutus-difference-kinetic {
        font-size: 17rem;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px) {

    .aboutus-difference {
        padding: 80px 0;
    }

    .aboutus-difference-layout {
        width: 89%;
        gap: 48px;
        transform: none !important;
    }

    .aboutus-difference::before {
        width: 280px;
        height: 280px;
    }

    .aboutus-difference-statement h2 {
        margin-bottom: 22px;
        font-size: clamp(2.5rem,11vw,4rem);
        letter-spacing: -2px;
    }

    .aboutus-difference-statement p {
        font-size: .98rem;
        line-height: 1.8;
    }

    .aboutus-difference-feature {
        grid-template-columns: 42px 1fr;
        gap: 15px;
        padding: 24px 0;
    }

    .aboutus-difference-feature h3 {
        font-size: 1.05rem;
    }

    .aboutus-difference-feature p {
        font-size: .94rem;
    }

    .aboutus-difference-kinetic {
        font-size: 9rem;
        letter-spacing: -7px;
        right: -8%;
        bottom: 0;

        transform: none !important;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:480px) {

    .aboutus-difference {
        padding: 70px 0;
    }

    .aboutus-difference-layout {
        width: 90%;
    }

    .aboutus-difference::before {
        width: 220px;
        height: 220px;
    }

    .aboutus-difference-statement h2 {
        font-size: clamp(2.35rem,12vw,3.3rem);
    }

    .aboutus-difference-statement p {
        font-size: .94rem;
    }

    .aboutus-difference-feature {
        grid-template-columns: 34px 1fr;
        gap: 12px;
        padding: 21px 0;
    }

    .aboutus-difference-feature p {
        font-size: .9rem;
    }

    .aboutus-difference-kinetic {
        font-size: 7rem;
    }
}
/* =========================================================
   SECTION 5 — TEAM
   ========================================================= */

.aboutus-team {
    position: relative;
    padding: 120px 6%;
    overflow: hidden;
    background: var(--cleanora-cream);
    color: var(--cleanora-charcoal);
}

.aboutus-team-heading {
    width: min(800px, 100%);
    margin-bottom: 75px;
}

.aboutus-team-heading h2 {
    max-width: 750px;
    margin: 0 0 23px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2.7rem, 5vw, 5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -2px;
}

.aboutus-team-heading h2 span {
    color: var(--cleanora-sage);
}

.aboutus-team-heading p {
    max-width: 630px;
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.8;
    color: rgba(38, 51, 45, 0.68);
}


/* TEAM LAYOUT */

.aboutus-team-layout {
    width: min(1400px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 60px;
    align-items: start;
}


/* MAIN TEAM IMAGE */

.aboutus-team-main {
    position: relative;
    min-height: 610px;
    overflow: hidden;
}

.aboutus-team-main-image {
    display: block;
    width: 100%;
    height: 610px;
    object-fit: cover;
    object-position: center;
    transition: transform 1s ease;
}

.aboutus-team-main:hover
.aboutus-team-main-image {
    transform: scale(1.045);
}

.aboutus-team-main-caption {
    position: absolute;
    left: 30px;
    bottom: 30px;
    z-index: 3;
    padding: 18px 22px;
    background: rgba(247, 243, 234, 0.94);
    color: var(--cleanora-charcoal);
}

.aboutus-team-main-caption span {
    display: block;
    margin-bottom: 5px;
    font-family: "Poppins", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--cleanora-sage);
}

.aboutus-team-main-caption strong {
    display: block;
    font-family: "Poppins", sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
}


/* TEAM MEMBERS */

.aboutus-team-members {
    display: flex;
    flex-direction: column;
}

.aboutus-team-member {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 25px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(38, 51, 45, 0.14);
}

.aboutus-team-member:first-child {
    padding-top: 0;
}

.aboutus-team-member-image {
    position: relative;
    width: 150px;
    height: 175px;
    overflow: hidden;
}

.aboutus-team-member-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.aboutus-team-member:hover
.aboutus-team-member-image img {
    transform: scale(1.08);
}

.aboutus-team-member-info span {
    display: block;
    margin-bottom: 8px;
    font-family: "Poppins", sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 1.3px;
    color: var(--cleanora-sage);
}

.aboutus-team-member-info h3 {
    margin: 0 0 6px;
    font-family: "Poppins", sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
}

.aboutus-team-member-info p {
    margin: 0;
    font-size: 0.73rem;
    color: rgba(38, 51, 45, 0.62);
}


/* TRAINING */

.aboutus-team-training {
    width: min(1000px, 100%);
    margin: 75px auto 0;
    padding-top: 35px;
    display: grid;
    grid-template-columns: 65px 1fr;
    gap: 25px;
    align-items: start;
    border-top: 1px solid rgba(38, 51, 45, 0.15);
}

.aboutus-team-training-icon {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    background: var(--cleanora-light-sage);
    color: var(--cleanora-sage);
    transform: rotate(45deg);
}

.aboutus-team-training-icon i {
    transform: rotate(-45deg);
}

.aboutus-team-training h3 {
    margin: 0 0 10px;
    font-family: "Poppins", sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
}

.aboutus-team-training p {
    max-width: 700px;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.75;
    color: rgba(38, 51, 45, 0.66);
}

/* =========================================================
   SECTION 6 - WHAT WE BELIEVE
========================================================= */

.aboutus-beliefs {
    position: relative;
    background: var(--cleanora-cream);
    color: var(--cleanora-charcoal);
    overflow: hidden;
}


/* Intro */

.aboutus-beliefs-intro {
    width: min(1100px, 88%);
    margin: 0 auto;

    min-height: 430px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
}

.aboutus-beliefs-intro h2 {
    margin: 16px 0 22px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(2.8rem, 6vw, 6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -3px;
}

.aboutus-beliefs-intro h2 span {
    color: var(--cleanora-sage);
}

.aboutus-beliefs-intro p {
    max-width: 620px;
    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 1.05rem;
    line-height: 1.8;

    color: #5d6962;
}


/* Sticky stack */

.aboutus-beliefs-stack {
    position: relative;

    width: min(1250px, 90%);
    height: 250vh;

    margin: 0 auto;
}


/* Cards */

.aboutus-belief-card {
    position: sticky;

    top: 100px;

    width: 100%;
    height: min(68vh, 620px);

    padding: clamp(30px, 5vw, 70px);

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow: hidden;

    border-radius: 30px;

    box-shadow:
        0 30px 80px rgba(38, 51, 45, 0.16);

    transform-origin: center bottom;

    transition:
        transform .35s ease,
        filter .35s ease;
}


/* Different stack positions */

.aboutus-belief-card-one {
    background: #dce8e1;
    z-index: 1;
    top: 100px;
}

.aboutus-belief-card-two {
    background: #c9d9d0;
    z-index: 2;
    top: 120px;
}

.aboutus-belief-card-three {
    background: #b5cbbf;
    z-index: 3;
    top: 140px;
}

.aboutus-belief-card-four {
    background: var(--cleanora-sage);
    color: #fff;
    z-index: 4;
    top: 160px;
}


/* Number */

.aboutus-belief-card-number {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
}


/* Content */

.aboutus-belief-card-content {
    max-width: 700px;
}

.aboutus-belief-card-content span {
    display: block;
    margin-bottom: 14px;

    font-family: "Inter", sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 2px;
}

.aboutus-belief-card-content h3 {
    margin: 0 0 20px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(4rem, 10vw, 9rem);
    font-weight: 800;
    line-height: .85;
    letter-spacing: -5px;
}

.aboutus-belief-card-content p {
    max-width: 560px;
    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 1.08rem;
    line-height: 1.8;
}


/* Icon */

.aboutus-belief-card-icon {
    position: absolute;

    right: 7%;
    top: 50%;

    font-size: clamp(7rem, 16vw, 15rem);

    opacity: .09;

    transform:
        translateY(-50%)
        rotate(-12deg);

    pointer-events: none;
}


/* Mission */

.aboutus-mission-mask {
    position: relative;

    min-height: 650px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 100px 5%;

    overflow: hidden;

    background: var(--cleanora-charcoal);
    color: #fff;
}

.aboutus-mission-mask-inner {
    width: 100%;
    text-align: center;
}

.aboutus-mission-small {
    display: block;

    margin-bottom: 25px;

    font-family: "Inter", sans-serif;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 3px;

    color: #bfd8cb;
}


/* Massive text */

.aboutus-mission-word {
    position: relative;

    font-family: "Poppins", sans-serif;
    font-size: clamp(4rem, 14vw, 14rem);
    font-weight: 800;
    line-height: .8;
    letter-spacing: -8px;

    color: transparent;

    background-image:
        linear-gradient(
            120deg,
            #bfd8cb,
            #6b8e7b,
            #dce8e1,
            #527262,
            #bfd8cb
        );

    background-size: 300% 300%;
    background-clip: text;
    -webkit-background-clip: text;

    -webkit-text-stroke: 2px rgba(191,216,203,.25);

    animation:
        aboutusMissionFlow 7s ease-in-out infinite;
}

@keyframes aboutusMissionFlow {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}


.aboutus-mission-description {
    max-width: 620px;

    margin: 45px auto 0;

    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;

    color: rgba(255,255,255,.78);
}


/* =========================================================
   SECTION 7 - INSIDE CLEANORA
========================================================= */

.aboutus-inside {
    position: relative;

    background: var(--cleanora-cream);
    color: var(--cleanora-charcoal);

    overflow: hidden;
}


/* Sticky wrapper */

.aboutus-inside-sticky {
    position: sticky;
    top: 0;

    min-height: 100vh;

    display: grid;
    grid-template-columns: .85fr 1.15fr;

    align-items: stretch;
}


/* Manifesto */

.aboutus-inside-manifesto {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        80px
        clamp(40px, 7vw, 110px);

    background: var(--cleanora-charcoal);

    color: #fff;

    z-index: 5;
}

.aboutus-inside-manifesto h2 {
    margin: 18px 0 25px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(2.8rem, 5vw, 5.4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -3px;
}

.aboutus-inside-manifesto h2 span {
    color: #bfd8cb;
}

.aboutus-inside-manifesto p {
    max-width: 510px;

    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 1.05rem;
    line-height: 1.85;

    color: rgba(255,255,255,.76);
}


/* Progress */

.aboutus-inside-progress {
    width: 100%;
    max-width: 500px;

    margin-top: 55px;

    display: flex;
    align-items: center;
    gap: 15px;

    font-family: "Poppins", sans-serif;
    font-size: .75rem;
    font-weight: 700;
}

.aboutus-inside-progress-line {
    position: relative;

    flex: 1;
    height: 2px;

    background: rgba(255,255,255,.2);
}

.aboutus-inside-progress-line span {
    position: absolute;

    left: 0;
    top: 0;

    width: 25%;
    height: 100%;

    background: #bfd8cb;

    transition: width .5s ease;
}


/* Slideshow */

.aboutus-inside-slideshow {
    position: relative;

    min-height: 100vh;

    overflow: hidden;

    background: #dce8e1;
}


/* Slides */

.aboutus-inside-slide {
    position: absolute;

    inset: 0;

    display: flex;
    flex-direction: column;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(80px)
        scale(.94);

    transition:
        opacity .65s ease,
        visibility .65s ease,
        transform .8s cubic-bezier(.2,.8,.2,1);
}

.aboutus-inside-slide-active {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


/* Image */

.aboutus-inside-image-wrap {
    position: relative;

    flex: 1;

    min-height: 0;

    overflow: hidden;
}

.aboutus-inside-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transform: scale(1.08);

    transition:
        transform 1.2s cubic-bezier(.2,.8,.2,1);
}

.aboutus-inside-slide-active
.aboutus-inside-image {
    transform: scale(1);
}


/* Slide content */

.aboutus-inside-slide-content {
    flex: 0 0 auto;

    padding: 28px 45px 35px;

    background: var(--cleanora-cream);
}

.aboutus-inside-slide-content span {
    display: block;

    margin-bottom: 8px;

    font-family: "Inter", sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 2px;

    color: var(--cleanora-sage);
}

.aboutus-inside-slide-content h3 {
    margin: 0 0 7px;

    font-family: "Poppins", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
}

.aboutus-inside-slide-content p {
    max-width: 650px;

    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: .95rem;
    line-height: 1.65;

    color: #5d6962;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1023px) {

    .aboutus-beliefs-intro {
        min-height: 360px;
    }

    .aboutus-beliefs-stack {
        width: 90%;
        height: 230vh;
    }

    .aboutus-belief-card {
        height: 570px;
        top: 80px;
    }

    .aboutus-belief-card-two {
        top: 100px;
    }

    .aboutus-belief-card-three {
        top: 120px;
    }

    .aboutus-belief-card-four {
        top: 140px;
    }

    .aboutus-inside-sticky {
        grid-template-columns: .8fr 1.2fr;
    }

    .aboutus-inside-manifesto {
        padding: 55px 45px;
    }

    .aboutus-inside-manifesto h2 {
        font-size: clamp(2.5rem, 5vw, 4rem);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px) {

    .aboutus-beliefs-intro {
        width: 89%;
        min-height: 330px;
    }

    .aboutus-beliefs-intro h2 {
        font-size: clamp(2.5rem, 11vw, 4rem);
        letter-spacing: -2px;
    }

    .aboutus-beliefs-intro p {
        font-size: .95rem;
    }


    .aboutus-beliefs-stack {
        width: 90%;
        height: 220vh;
    }

    .aboutus-belief-card {
        height: 500px;
        padding: 30px;

        border-radius: 24px;

        top: 70px;
    }

    .aboutus-belief-card-two {
        top: 90px;
    }

    .aboutus-belief-card-three {
        top: 110px;
    }

    .aboutus-belief-card-four {
        top: 130px;
    }

    .aboutus-belief-card-content h3 {
        font-size: clamp(4rem, 18vw, 7rem);
    }

    .aboutus-belief-card-content p {
        font-size: .94rem;
    }

    .aboutus-belief-card-icon {
        font-size: 8rem;
        right: 5%;
    }


    .aboutus-mission-mask {
        min-height: 500px;
        padding: 70px 5%;
    }

    .aboutus-mission-word {
        font-size: clamp(3.4rem, 16vw, 7rem);
        letter-spacing: -4px;
    }

    .aboutus-mission-description {
        margin-top: 35px;
        font-size: .95rem;
    }


    /* Section 7 */

    .aboutus-inside-sticky {
        position: relative;

        min-height: auto;

        display: flex;
        flex-direction: column;
    }

    .aboutus-inside-manifesto {
        min-height: 500px;
        padding: 70px 8%;
    }

    .aboutus-inside-manifesto h2 {
        font-size: clamp(2.6rem, 10vw, 4rem);
        letter-spacing: -2px;
    }

    .aboutus-inside-manifesto p {
        font-size: .96rem;
    }

    .aboutus-inside-progress {
        margin-top: 40px;
    }

    .aboutus-inside-slideshow {
        min-height: 650px;
    }

    .aboutus-inside-slide-content {
        padding: 25px 7% 30px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:480px) {

    .aboutus-belief-card {
        height: 460px;
        padding: 25px;
    }

    .aboutus-belief-card-two {
        top: 85px;
    }

    .aboutus-belief-card-three {
        top: 100px;
    }

    .aboutus-belief-card-four {
        top: 115px;
    }

    .aboutus-belief-card-content h3 {
        font-size: 4.2rem;
    }

    .aboutus-belief-card-content p {
        font-size: .88rem;
        line-height: 1.7;
    }

    .aboutus-belief-card-icon {
        font-size: 6rem;
    }


    .aboutus-mission-mask {
        min-height: 430px;
    }

    .aboutus-mission-word {
        font-size: 3.4rem;
    }


    .aboutus-inside-manifesto {
        min-height: 450px;
        padding: 60px 7%;
    }

    .aboutus-inside-slideshow {
        min-height: 570px;
    }

    .aboutus-inside-slide-content h3 {
        font-size: 1.5rem;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce) {

    .aboutus-mission-word {
        animation: none;
    }

    .aboutus-belief-card,
    .aboutus-inside-slide,
    .aboutus-inside-image {
        transition: none;
    }

}

/* =========================================================
   TABLET — 1023px
   ========================================================= */

@media (max-width: 1023px) {

    /* HERO */

    .aboutus-hero {
        min-height: 780px;
    }

    .aboutus-hero-content {
        padding-top: 100px;
        padding-bottom: 170px;
    }

    .aboutus-hero-float {
        right: 5%;
        bottom: 25%;
    }

    .aboutus-hero-float-two {
        right: 10%;
        bottom: 12%;
    }

    .aboutus-hero-stats {
        left: 5%;
        gap: 28px;
    }


    /* MISSION */

    .aboutus-missionvision {
        min-height: 850px;
        padding: 100px 5%;
    }

    .aboutus-mission {
        padding-right: 45px;
    }

    .aboutus-vision {
        padding-left: 45px;
    }


    /* HISTORY */

    .aboutus-history {
        padding: 100px 5%;
    }

    .aboutus-timeline {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 65px;
    }

    .aboutus-timeline-track {
        display: none;
    }


    /* DIFFERENCE */

    .aboutus-difference {
        min-height: 750px;
    }

    .aboutus-difference-layout {
        width: 90%;
        grid-template-columns: 1fr;
        gap: 55px;
    }


    /* TEAM */

    .aboutus-team {
        padding: 100px 5%;
    }

    .aboutus-team-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .aboutus-team-main {
        min-height: 500px;
    }

    .aboutus-team-main-image {
        height: 500px;
    }

    .aboutus-team-members {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .aboutus-team-member {
        display: block;
        padding: 0;
        border-bottom: 0;
    }

    .aboutus-team-member:first-child {
        padding-top: 0;
    }

    .aboutus-team-member-image {
        width: 100%;
        height: 230px;
        margin-bottom: 18px;
    }


    /* STANDARDS */

    /* .aboutus-standards {
        padding: 100px 5%;
    }

    .aboutus-split-reveal {
        height: 520px;
    }

    .aboutus-standard-steps {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 40px;
    }

    .aboutus-standard-step:nth-child(3) {
        border-left: 0;
        padding-left: 0;
    } */


    /* CTA */

    /* .aboutus-cta {
        min-height: 560px;
    } */

}


/* =========================================================
   MOBILE — 767px
   ========================================================= */

@media (max-width: 767px) {

    /* HERO */

    .aboutus-hero {
        min-height: 820px;
    }

    .aboutus-hero-content {
        width: 88%;
        padding-top: 80px;
        padding-bottom: 220px;
    }

    .aboutus-hero-title {
        font-size: clamp(2.7rem, 11vw, 4rem);
        letter-spacing: -2px;
    }

    .aboutus-hero-description {
        font-size: 0.86rem;
        line-height: 1.75;
    }

    .aboutus-hero-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }

    .aboutus-hero-float {
        right: 5%;
        bottom: 21%;
    }

    .aboutus-hero-float-two {
        right: 5%;
        bottom: 12%;
    }

    .aboutus-hero-stats {
        left: 6%;
        right: 6%;
        bottom: 28px;
        justify-content: space-between;
        gap: 15px;
    }

    .aboutus-hero-stat strong {
        font-size: 1.35rem;
    }


    /* MISSION */

    .aboutus-missionvision {
        display: block;
        min-height: auto;
        padding: 80px 6% 125px;
    }

    .aboutus-missionvision-line {
        top: 80px;
        bottom: 100px;
        left: 18px;
    }

    .aboutus-mission,
    .aboutus-vision {
        width: 100%;
        padding: 0 0 0 48px;
        justify-self: auto;
    }

    .aboutus-mission {
        margin-bottom: 85px;
    }

    .aboutus-vision {
        margin-bottom: 100px;
    }

    .aboutus-mission-number,
    .aboutus-vision-number {
        left: 0;
        right: auto;
        top: -8px;
        font-size: 4rem;
    }

    .aboutus-mission h2,
    .aboutus-vision h2 {
        font-size: clamp(2.2rem, 10vw, 3.2rem);
        letter-spacing: -1px;
    }

    .aboutus-missionvision-collision {
        top: 50%;
        left: 18px;
        width: 42px;
        height: 42px;
    }

    .aboutus-missionvision.aboutus-collision-active
    .aboutus-missionvision-collision {
        transform: translate(-50%, -50%) rotate(45deg) scale(0.75);
    }

    .aboutus-missionvision-result {
        width: 82%;
        bottom: 35px;
        left: 55%;
    }


    /* HISTORY */

    .aboutus-history {
        padding: 80px 6%;
    }

    .aboutus-history-heading {
        margin-bottom: 60px;
        text-align: left;
    }

    .aboutus-history-heading h2 {
        font-size: clamp(2.3rem, 10vw, 3.3rem);
        letter-spacing: -1px;
    }

    .aboutus-history-heading p {
        font-size: 0.84rem;
    }

    .aboutus-timeline {
        display: block;
    }

    .aboutus-timeline-item {
        padding: 0 0 55px 55px;
    }

    .aboutus-timeline-item:last-child {
        padding-bottom: 0;
    }

    .aboutus-timeline-marker {
        position: absolute;
        top: 0;
        left: 3px;
        width: 30px;
        height: 30px;
    }

    .aboutus-timeline-content {
        max-width: none;
    }

    .aboutus-timeline-year {
        font-size: 1.35rem;
    }


    /* DIFFERENCE */

    .aboutus-difference {
        min-height: 850px;
        padding: 80px 6%;
    }

    .aboutus-difference-layout {
        width: 100%;
        gap: 45px;
    }

    .aboutus-difference-statement h2 {
        font-size: clamp(2.5rem, 11vw, 3.7rem);
        letter-spacing: -1px;
    }

    .aboutus-difference-feature {
        grid-template-columns: 40px 1fr;
        gap: 15px;
        padding: 23px 0;
    }

    .aboutus-difference-feature:hover {
        padding-left: 0;
    }

    .aboutus-difference-kinetic {
        font-size: 8rem;
        letter-spacing: -7px;
        bottom: 0;
    }


    /* TEAM */

    .aboutus-team {
        padding: 80px 6%;
    }

    .aboutus-team-heading {
        margin-bottom: 50px;
    }

    .aboutus-team-heading h2 {
        font-size: clamp(2.4rem, 10vw, 3.5rem);
        letter-spacing: -1px;
    }

    .aboutus-team-main {
        min-height: 420px;
    }

    .aboutus-team-main-image {
        height: 420px;
    }

    .aboutus-team-members {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .aboutus-team-member {
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: 18px;
        padding: 18px 0;
        border-bottom: 1px solid rgba(38, 51, 45, 0.14);
    }

    .aboutus-team-member-image {
        width: 120px;
        height: 145px;
        margin-bottom: 0;
    }

    .aboutus-team-training {
        margin-top: 55px;
        grid-template-columns: 50px 1fr;
        gap: 18px;
    }

    .aboutus-team-training-icon {
        width: 45px;
        height: 45px;
    }


    /* STANDARDS */

    /* .aboutus-standards {
        padding: 80px 6%;
    }

    .aboutus-standards-heading {
        margin-bottom: 45px;
    }

    .aboutus-standards-heading h2 {
        font-size: clamp(2.4rem, 10vw, 3.5rem);
        letter-spacing: -1px;
    }

    .aboutus-split-reveal {
        height: 430px;
    }

    .aboutus-standard-badge {
        padding: 9px 11px;
        font-size: 0.58rem;
    }

    .aboutus-standard-badge-one {
        left: 3%;
    }

    .aboutus-standard-badge-two {
        right: 3%;
    }

    .aboutus-standard-steps {
        display: block;
        margin-top: 50px;
    }

    .aboutus-standard-step,
    .aboutus-standard-step:nth-child(3) {
        padding: 22px 0;
        border-left: 0;
        border-bottom: 1px solid rgba(38, 51, 45, 0.14);
    }

    .aboutus-standard-step:last-child {
        border-bottom: 0;
    }
 */

    /* CTA */

    /* .aboutus-cta {
        min-height: 570px;
    }

    .aboutus-cta-content {
        width: 88%;
        padding: 80px 0;
    }

    .aboutus-cta-content h2 {
        font-size: clamp(2.8rem, 11vw, 4rem);
        letter-spacing: -2px;
    }

    .aboutus-cta-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }

    .aboutus-cta-floating {
        right: 5%;
        bottom: 8%;
    } */

}


/* =========================================================
   SMALL MOBILE — 480px
   ========================================================= */

@media (max-width: 480px) {

    .aboutus-hero {
        min-height: 780px;
    }

    .aboutus-hero-content {
        padding-top: 65px;
    }

    .aboutus-hero-title {
        font-size: 2.55rem;
    }

    .aboutus-hero-description {
        font-size: 0.8rem;
    }

    .aboutus-hero-stats {
        gap: 10px;
    }

    .aboutus-hero-stat strong {
        font-size: 1.15rem;
    }

    .aboutus-hero-stat span {
        font-size: 0.58rem;
    }


    .aboutus-missionvision {
        padding: 70px 5% 115px;
    }

    .aboutus-mission,
    .aboutus-vision {
        padding-left: 42px;
    }

    .aboutus-mission h2,
    .aboutus-vision h2 {
        font-size: 2rem;
    }

    .aboutus-mission p,
    .aboutus-vision p {
        font-size: 0.8rem;
    }


    .aboutus-history {
        padding: 70px 5%;
    }

    .aboutus-history-heading h2 {
        font-size: 2rem;
    }


    .aboutus-difference {
        min-height: 820px;
        padding: 70px 5%;
    }

    .aboutus-difference-statement h2 {
        font-size: 2.55rem;
    }


    .aboutus-team {
        padding: 70px 5%;
    }

    .aboutus-team-heading h2 {
        font-size: 2.2rem;
    }

    .aboutus-team-main {
        min-height: 350px;
    }

    .aboutus-team-main-image {
        height: 350px;
    }

    .aboutus-team-member {
        grid-template-columns: 100px 1fr;
    }

    .aboutus-team-member-image {
        width: 100px;
        height: 125px;
    }


    /* .aboutus-standards {
        padding: 70px 5%;
    }

    .aboutus-split-reveal {
        height: 350px;
    }

    .aboutus-split-label {
        top: 15px;
        padding: 7px 9px;
        font-size: 0.53rem;
    }

    .aboutus-split-base .aboutus-split-label {
        right: 15px;
    }

    .aboutus-split-alternate .aboutus-split-label {
        left: 15px;
    }

    .aboutus-split-handle {
        width: 40px;
        height: 40px;
    }


    .aboutus-cta {
        min-height: 520px;
    }

    .aboutus-cta-content {
        width: 90%;
    }

    .aboutus-cta-content h2 {
        font-size: 2.7rem;
    } */

}


/* =========================================================
   VERY SMALL MOBILE — 359px
   ========================================================= */

@media (max-width: 359px) {

    .aboutus-hero {
        min-height: 750px;
    }

    .aboutus-hero-title {
        font-size: 2.25rem;
    }

    .aboutus-hero-stats {
        flex-wrap: wrap;
    }

    .aboutus-mission h2,
    .aboutus-vision h2 {
        font-size: 1.8rem;
    }

    .aboutus-difference-statement h2 {
        font-size: 2.25rem;
    }

    .aboutus-team-member {
        grid-template-columns: 85px 1fr;
    }

    .aboutus-team-member-image {
        width: 85px;
        height: 110px;
    }

    /* .aboutus-cta-content h2 {
        font-size: 2.35rem;
    } */

}


/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .aboutus-page .aboutus-reveal,
    .aboutus-mission,
    .aboutus-vision,
    .aboutus-missionvision-collision,
    .aboutus-hero-image,
    .aboutus-cta-image,
    .aboutus-color-flood,
    .aboutus-difference-kinetic,
    .aboutus-split-image,
    .aboutus-team-main-image,
    .aboutus-team-member-image img {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    .aboutus-page .aboutus-reveal {
        opacity: 1 !important;
    }

}

/* =========================================================
   ABOUT US - MISSION & VISION FIXES
========================================================= */

/* Equal height for both cards */

.aboutus-missionvision-cards {
    align-items: stretch;
}

.aboutus-purpose-card {
    height: 390px;
    min-height: 390px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
}


/* Keep the card content balanced */

.aboutus-purpose-content {
    flex: 1;
}


/* Keep bottom area at the same position */

.aboutus-purpose-line {
    margin-top: auto;
}


/* =========================================================
   MOBILE - ALLOW NATURAL HEIGHT
========================================================= */

@media (max-width: 767px) {

    .aboutus-purpose-card {
        height: auto;
        min-height: 330px;
    }

}

/* =========================================================
   ABOUT US - SECTION 6
   WHAT WE BELIEVE
   RESPONSIVE STICKY STACK
========================================================= */

.aboutus-beliefs {
    position: relative;
    width: 100%;
    background: var(--cleanora-cream);
    color: var(--cleanora-charcoal);
    overflow: clip;
}


/* ---------------------------------------------------------
   INTRO
--------------------------------------------------------- */

.aboutus-beliefs-intro {
    width: min(1100px, 88%);
    min-height: 430px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    box-sizing: border-box;
}

.aboutus-beliefs-intro h2 {
    margin: 16px 0 22px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(2.8rem, 6vw, 6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -3px;
}

.aboutus-beliefs-intro h2 span {
    color: var(--cleanora-sage);
}

.aboutus-beliefs-intro p {
    max-width: 620px;
    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 1.05rem;
    line-height: 1.8;

    color: #5d6962;
}


/* ---------------------------------------------------------
   STICKY STACK
--------------------------------------------------------- */

.aboutus-beliefs-stack {
    position: relative;

    width: min(1250px, 90%);
    margin: 0 auto;

    /*
     * JS controls the actual height.
     * This fallback prevents layout failure
     * before JavaScript initializes.
     */
    height: 400vh;
}


/* ---------------------------------------------------------
   BELIEF CARDS
--------------------------------------------------------- */

.aboutus-belief-card {
    position: sticky;

    width: 100%;
    height: min(68vh, 620px);

    margin: 0;
    padding: clamp(30px, 5vw, 70px);

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow: hidden;

    border-radius: 30px;

    box-shadow:
        0 30px 80px rgba(38, 51, 45, 0.16);

    transform-origin: center bottom;

    /*
     * JS controls transform/filter.
     */
    will-change: transform, filter;

    transition:
        transform .18s ease-out,
        filter .18s ease-out;
}


/*
 * Each card sits slightly lower than
 * the previous card.
 */

.aboutus-belief-card-one {
    top: 90px;
    z-index: 1;
    background: #dce8e1;
}

.aboutus-belief-card-two {
    top: 110px;
    z-index: 2;
    background: #c9d9d0;
}

.aboutus-belief-card-three {
    top: 130px;
    z-index: 3;
    background: #b5cbbf;
}

.aboutus-belief-card-four {
    top: 150px;
    z-index: 4;
    background: var(--cleanora-sage);
    color: #ffffff;
}


/* ---------------------------------------------------------
   NUMBER
--------------------------------------------------------- */

.aboutus-belief-card-number {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
}


/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

.aboutus-belief-card-content {
    max-width: 700px;
}

.aboutus-belief-card-content span {
    display: block;
    margin-bottom: 14px;

    font-family: "Inter", sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 2px;
}

.aboutus-belief-card-content h3 {
    margin: 0 0 20px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(4rem, 10vw, 9rem);
    font-weight: 800;
    line-height: .85;
    letter-spacing: -5px;
}

.aboutus-belief-card-content p {
    max-width: 560px;
    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 1.08rem;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   ICON
--------------------------------------------------------- */

.aboutus-belief-card-icon {
    position: absolute;

    right: 7%;
    top: 50%;

    font-size: clamp(7rem, 16vw, 15rem);

    opacity: .09;

    transform:
        translateY(-50%)
        rotate(-12deg);

    pointer-events: none;
}


/* ---------------------------------------------------------
   MISSION MASK
--------------------------------------------------------- */

.aboutus-mission-mask {
    position: relative;

    min-height: 650px;

    padding: 100px 5%;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: var(--cleanora-charcoal);
    color: #ffffff;
}

.aboutus-mission-mask-inner {
    width: 100%;
    text-align: center;
}

.aboutus-mission-small {
    display: block;
    margin-bottom: 25px;

    font-family: "Inter", sans-serif;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 3px;

    color: #bfd8cb;
}

.aboutus-mission-word {
    position: relative;

    width: 100%;

    font-family: "Poppins", sans-serif;
    font-size: clamp(4rem, 14vw, 14rem);
    font-weight: 800;
    line-height: .8;
    letter-spacing: -8px;

    color: transparent;

    background-image:
        linear-gradient(
            120deg,
            #bfd8cb,
            #6b8e7b,
            #dce8e1,
            #527262,
            #bfd8cb
        );

    background-size: 300% 300%;

    background-clip: text;
    -webkit-background-clip: text;

    -webkit-text-stroke:
        2px rgba(191,216,203,.25);

    animation:
        aboutusMissionFlow
        7s ease-in-out infinite;
}

@keyframes aboutusMissionFlow {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}

.aboutus-mission-description {
    max-width: 620px;
    margin: 45px auto 0;

    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;

    color: rgba(255,255,255,.78);
}


/* =========================================================
   ABOUT US - SECTION 7
   INSIDE CLEANORA
   SCROLL CONTROLLED SLIDESHOW
========================================================= */

.aboutus-inside {
    position: relative;

    /*
     * JS changes this to:
     * 4 × viewport height
     *
     * This creates the required scroll
     * distance for the sticky slideshow.
     */
    height: 400vh;

    background: var(--cleanora-cream);
    color: var(--cleanora-charcoal);

    overflow: clip;
}


/* ---------------------------------------------------------
   STICKY WRAPPER
--------------------------------------------------------- */

.aboutus-inside-sticky {
    position: sticky;

    top: 0;

    width: 100%;
    height: 100vh;
    min-height: 600px;

    display: grid;

    grid-template-columns:
        minmax(320px, .85fr)
        minmax(0, 1.15fr);

    align-items: stretch;

    overflow: hidden;
}


/* ---------------------------------------------------------
   MANIFESTO
--------------------------------------------------------- */

.aboutus-inside-manifesto {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        80px
        clamp(40px, 7vw, 110px);

    box-sizing: border-box;

    background: var(--cleanora-charcoal);
    color: #ffffff;

    z-index: 5;
}

.aboutus-inside-manifesto h2 {
    margin: 18px 0 25px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(2.8rem, 5vw, 5.4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -3px;
}

.aboutus-inside-manifesto h2 span {
    color: #bfd8cb;
}

.aboutus-inside-manifesto p {
    max-width: 510px;
    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 1.05rem;
    line-height: 1.85;

    color: rgba(255,255,255,.76);
}


/* ---------------------------------------------------------
   PROGRESS
--------------------------------------------------------- */

.aboutus-inside-progress {
    width: 100%;
    max-width: 500px;

    margin-top: 55px;

    display: flex;
    align-items: center;
    gap: 15px;

    font-family: "Poppins", sans-serif;
    font-size: .75rem;
    font-weight: 700;
}

.aboutus-inside-progress-line {
    position: relative;

    flex: 1;
    height: 2px;

    background: rgba(255,255,255,.2);

    overflow: hidden;
}

.aboutus-inside-progress-line span {
    position: absolute;

    left: 0;
    top: 0;

    width: 25%;
    height: 100%;

    background: #bfd8cb;

    transition:
        width .45s ease;
}


/* ---------------------------------------------------------
   SLIDESHOW
--------------------------------------------------------- */

.aboutus-inside-slideshow {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #dce8e1;
}


/* ---------------------------------------------------------
   SLIDES
--------------------------------------------------------- */

.aboutus-inside-slide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    opacity: 0;
    visibility: hidden;

    transform:
        translate3d(70px, 0, 0)
        scale(.96);

    transition:
        opacity .55s ease,
        visibility .55s ease,
        transform .7s cubic-bezier(.2,.8,.2,1);
}

.aboutus-inside-slide-active {
    opacity: 1;
    visibility: visible;

    transform:
        translate3d(0, 0, 0)
        scale(1);

    z-index: 2;
}


/* ---------------------------------------------------------
   IMAGE
--------------------------------------------------------- */

.aboutus-inside-image-wrap {
    position: relative;

    flex: 1;

    min-height: 0;

    overflow: hidden;
}

.aboutus-inside-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transform: scale(1.08);

    transition:
        transform 1.1s cubic-bezier(.2,.8,.2,1);
}

.aboutus-inside-slide-active
.aboutus-inside-image {
    transform: scale(1);
}


/* ---------------------------------------------------------
   SLIDE CONTENT
--------------------------------------------------------- */

.aboutus-inside-slide-content {
    flex: 0 0 auto;

    padding:
        28px
        45px
        35px;

    box-sizing: border-box;

    background: var(--cleanora-cream);
}

.aboutus-inside-slide-content span {
    display: block;

    margin-bottom: 8px;

    font-family: "Inter", sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 2px;

    color: var(--cleanora-sage);
}

.aboutus-inside-slide-content h3 {
    margin: 0 0 7px;

    font-family: "Poppins", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
}

.aboutus-inside-slide-content p {
    max-width: 650px;

    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: .95rem;
    line-height: 1.65;

    color: #5d6962;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1023px) {

    .aboutus-beliefs-intro {
        min-height: 360px;
    }

    .aboutus-beliefs-stack {
        width: 90%;
    }

    .aboutus-belief-card {
        height: min(65vh, 570px);
    }

    .aboutus-belief-card-one {
        top: 70px;
    }

    .aboutus-belief-card-two {
        top: 90px;
    }

    .aboutus-belief-card-three {
        top: 110px;
    }

    .aboutus-belief-card-four {
        top: 130px;
    }


    .aboutus-inside-sticky {
        grid-template-columns:
            minmax(300px, .8fr)
            minmax(0, 1.2fr);
    }

    .aboutus-inside-manifesto {
        padding: 55px 45px;
    }

    .aboutus-inside-manifesto h2 {
        font-size:
            clamp(2.5rem, 5vw, 4rem);
    }

    .aboutus-inside-slide-content {
        padding:
            24px
            35px
            30px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px) {

    .aboutus-beliefs-intro {
        width: 89%;
        min-height: 330px;
    }

    .aboutus-beliefs-intro h2 {
        font-size:
            clamp(2.5rem, 11vw, 4rem);

        letter-spacing: -2px;
    }

    .aboutus-beliefs-intro p {
        font-size: .95rem;
    }


    /*
     * Mobile stack still has sticky cards,
     * but uses smaller cards and larger
     * spacing between stages.
     */

    .aboutus-beliefs-stack {
        width: 90%;
        height: 400vh;
    }

    .aboutus-belief-card {
        height: min(70vh, 500px);

        padding: 30px;

        border-radius: 24px;
    }

    .aboutus-belief-card-one {
        top: 60px;
    }

    .aboutus-belief-card-two {
        top: 75px;
    }

    .aboutus-belief-card-three {
        top: 90px;
    }

    .aboutus-belief-card-four {
        top: 105px;
    }

    .aboutus-belief-card-content h3 {
        font-size:
            clamp(4rem, 18vw, 7rem);
    }

    .aboutus-belief-card-content p {
        font-size: .94rem;
    }

    .aboutus-belief-card-icon {
        font-size: 8rem;
        right: 5%;
    }


    /* Mission */

    .aboutus-mission-mask {
        min-height: 500px;
        padding: 70px 5%;
    }

    .aboutus-mission-word {
        font-size:
            clamp(3.4rem, 16vw, 7rem);

        letter-spacing: -4px;
    }

    .aboutus-mission-description {
        margin-top: 35px;
        font-size: .95rem;
    }


    /* =====================================================
       SECTION 7 MOBILE
    ===================================================== */

    .aboutus-inside {
        height: auto;
        overflow: visible;
    }

    .aboutus-inside-sticky {
        position: relative;

        top: auto;

        width: 100%;
        height: auto;
        min-height: auto;

        display: flex;
        flex-direction: column;

        overflow: visible;
    }

    .aboutus-inside-manifesto {
        min-height: 500px;

        padding:
            70px
            8%;
    }

    .aboutus-inside-manifesto h2 {
        font-size:
            clamp(2.6rem, 10vw, 4rem);

        letter-spacing: -2px;
    }

    .aboutus-inside-manifesto p {
        font-size: .96rem;
    }

    .aboutus-inside-progress {
        margin-top: 40px;
    }


    /*
     * On mobile all four slides become
     * normal stacked content.
     */

    .aboutus-inside-slideshow {
        height: auto;
        min-height: 0;

        overflow: visible;

        background: var(--cleanora-cream);
    }

    .aboutus-inside-slide {
        position: relative;

        inset: auto;

        width: 100%;
        height: auto;
        min-height: 600px;

        display: flex;

        opacity: 1;
        visibility: visible;

        transform: none;

        transition: none;
    }

    .aboutus-inside-slide:not(
        .aboutus-inside-slide-active
    ) {
        display: flex;
    }

    .aboutus-inside-image-wrap {
        min-height: 400px;
        height: 400px;
        flex: none;
    }

    .aboutus-inside-slide-content {
        padding:
            25px
            7%
            30px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:480px) {

    .aboutus-belief-card {
        height: 460px;
        padding: 25px;
    }

    .aboutus-belief-card-one {
        top: 55px;
    }

    .aboutus-belief-card-two {
        top: 68px;
    }

    .aboutus-belief-card-three {
        top: 81px;
    }

    .aboutus-belief-card-four {
        top: 94px;
    }

    .aboutus-belief-card-content h3 {
        font-size: 4.2rem;
    }

    .aboutus-belief-card-content p {
        font-size: .88rem;
        line-height: 1.7;
    }

    .aboutus-belief-card-icon {
        font-size: 6rem;
    }


    .aboutus-mission-mask {
        min-height: 430px;
    }

    .aboutus-mission-word {
        font-size: 3.4rem;
    }


    .aboutus-inside-manifesto {
        min-height: 450px;
        padding: 60px 7%;
    }

    .aboutus-inside-slideshow {
        min-height: 0;
    }

    .aboutus-inside-slide {
        min-height: 520px;
    }

    .aboutus-inside-image-wrap {
        height: 330px;
        min-height: 330px;
    }

    .aboutus-inside-slide-content h3 {
        font-size: 1.5rem;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .aboutus-mission-word {
        animation: none;
    }

    .aboutus-belief-card,
    .aboutus-inside-slide,
    .aboutus-inside-image {
        transition: none;
    }

}





/* =========================================================
   CLEANORA SERVICES PAGE
   Unique prefix: services-
========================================================= */


/* =========================================================
   SERVICES GLOBAL
========================================================= */

.services-reveal {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.2,.8,.2,1);
}

.services-reveal.services-visible {
    opacity: 1;
    transform: translateY(0);
}

.services-section-kicker {
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--cleanora-sage);
}


/* =========================================================
   SECTION 01 — HERO
========================================================= */

.services-hero {
    position: relative;
    min-height: 720px;
    padding: 100px 6% 90px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--cleanora-cream);
    color: var(--cleanora-charcoal);
}

.services-hero-layout {
    position: relative;
    z-index: 3;
    width: min(1380px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(50px, 7vw, 110px);
    align-items: center;
}

.services-hero-content {
    position: relative;
    z-index: 4;
}

.services-hero-kicker {
    display: block;
    margin-bottom: 22px;
    font-family: "Inter", sans-serif;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--cleanora-sage);
}

.services-hero-mask {
    overflow: hidden;
}

.services-hero-mask h1 {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: clamp(3.2rem, 6vw, 6.7rem);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -4px;
    animation: servicesHeroTextReveal 1s cubic-bezier(.2,.8,.2,1) both;
}

.services-hero-mask h1 span {
    display: block;
    color: var(--cleanora-sage);
}

@keyframes servicesHeroTextReveal {
    from {
        opacity: 0;
        transform: translateY(110%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.services-hero-content > p {
    max-width: 570px;
    margin: 30px 0 35px;
    font-family: "Inter", sans-serif;
    font-size: 1.05rem;
    line-height: 1.85;
    color: #5d6962;
}

.services-hero-button {
    width: fit-content;
    min-height: 54px;
    padding: 0 25px;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
    background: var(--cleanora-charcoal);
    transition:
        transform .3s ease,
        background .3s ease;
}

.services-hero-button i {
    transition: transform .3s ease;
}

.services-hero-button:hover {
    transform: translateY(-4px);
    background: var(--cleanora-dark-sage);
}

.services-hero-button:hover i {
    transform: translateX(5px);
}

.services-hero-visual {
    position: relative;
    min-height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-hero-image-wrap {
    position: relative;
    width: 100%;
    height: 560px;
    overflow: hidden;
}

.services-hero-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.08);
    animation: servicesHeroImageZoom 1.4s .2s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes servicesHeroImageZoom {
    to {
        transform: scale(1);
    }
}

.services-hero-image-curtain {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: var(--cleanora-sage);
    transform-origin: left center;
    animation: servicesHeroCurtain 1.1s .15s cubic-bezier(.77,0,.18,1) forwards;
}

@keyframes servicesHeroCurtain {
    to {
        transform: scaleX(0);
    }
}

.services-hero-label {
    position: absolute;
    z-index: 8;
    min-height: 52px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--cleanora-cream);
    color: var(--cleanora-charcoal);
    box-shadow: 0 15px 40px rgba(38,51,45,.15);
    animation: servicesHeroLabelReveal .8s 1s ease both;
}

.services-hero-label i {
    color: var(--cleanora-sage);
}

.services-hero-label span {
    font-family: "Inter", sans-serif;
    font-size: .78rem;
    font-weight: 700;
}

.services-hero-label-one {
    left: -25px;
    top: 18%;
}

.services-hero-label-two {
    right: -25px;
    bottom: 15%;
    animation-delay: 1.15s;
}

@keyframes servicesHeroLabelReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.services-hero-background-word {
    position: absolute;
    right: -5%;
    bottom: -8%;
    z-index: 0;
    font-family: "Poppins", sans-serif;
    font-size: clamp(8rem, 22vw, 22rem);
    font-weight: 800;
    line-height: .75;
    letter-spacing: -15px;
    color: rgba(107,142,123,.06);
    pointer-events: none;
}


/* =========================================================
   SECTION 02 — SERVICE SELECTOR
========================================================= */

.services-selector {
    position: relative;
    padding: 110px 5% 130px;
    overflow: hidden;
    background: var(--cleanora-white);
    color: var(--cleanora-charcoal);
}

.services-selector-heading {
    width: min(800px, 90%);
    margin: 0 auto 65px;
    text-align: center;
}

.services-selector-heading h2 {
    margin: 15px 0 20px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2.8rem, 5vw, 5.2rem);
    line-height: 1;
    letter-spacing: -3px;
}

.services-selector-heading h2 span {
    color: var(--cleanora-sage);
}

.services-selector-heading p {
    max-width: 650px;
    margin: 0 auto;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: #5d6962;
}

.services-selector-runway {
    width: min(1250px, 94%);
    margin: 0 auto 55px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(38,51,45,.18);
    border-bottom: 1px solid rgba(38,51,45,.18);
}

.services-selector-item {
    position: relative;
    min-height: 105px;
    padding: 20px 24px;
    display: grid;
    grid-template-columns: 40px 1fr 25px;
    gap: 15px;
    align-items: center;
    border: 0;
    border-right: 1px solid rgba(38,51,45,.14);
    background: transparent;
    color: var(--cleanora-charcoal);
    text-align: left;
    cursor: pointer;
    transition:
        background .4s ease,
        color .4s ease,
        grid-template-columns .4s ease;
}

.services-selector-item:last-child {
    border-right: 0;
}

.services-selector-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -1px;
    height: 3px;
    background: var(--cleanora-sage);
    transition: right .45s ease;
}

.services-selector-item:hover {
    background: var(--cleanora-light-sage);
}

.services-selector-active {
    background: var(--cleanora-charcoal);
    color: #fff;
}

.services-selector-active::after {
    right: 0;
}

.services-selector-number {
    font-family: "Poppins", sans-serif;
    font-size: .76rem;
    font-weight: 700;
    color: var(--cleanora-sage);
}

.services-selector-name {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    transition: transform .4s ease;
}

.services-selector-active .services-selector-name {
    transform: translateX(5px);
}

.services-selector-item i {
    transition: transform .35s ease;
}

.services-selector-item:hover i,
.services-selector-active i {
    transform: translateX(5px);
}

.services-selector-showcase {
    width: min(1250px, 94%);
    min-height: 550px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    overflow: hidden;
    background: var(--cleanora-light-sage);
}

.services-selector-image {
    position: relative;
    min-height: 550px;
    overflow: hidden;
}

.services-selector-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition:
        opacity .45s ease,
        transform .7s cubic-bezier(.2,.8,.2,1);
}

.services-selector-image.services-selector-changing img {
    opacity: 0;
    transform: scale(1.08) translateX(35px);
}

.services-selector-info {
    padding: 65px clamp(35px, 5vw, 75px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.services-selector-info > span {
    font-family: "Inter", sans-serif;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--cleanora-sage);
}

.services-selector-info h3 {
    margin: 18px 0 20px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2.3rem, 4vw, 4.4rem);
    line-height: 1;
    letter-spacing: -2px;
}

.services-selector-info > p {
    max-width: 520px;
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: #526058;
}

.services-selector-features {
    margin-top: 35px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.services-selector-features span {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "Inter", sans-serif;
    font-size: .9rem;
    font-weight: 600;
}

.services-selector-features i {
    color: var(--cleanora-sage);
}


/* =========================================================
   SECTION 03 — STANDARD
========================================================= */

.services-standard {
    position: relative;
    min-height: 850px;
    padding: 130px 6%;
    overflow: hidden;
    background: var(--cleanora-cream);
    color: var(--cleanora-charcoal);
}

.services-standard-number {
    position: absolute;
    left: -2%;
    top: 3%;
    font-family: "Poppins", sans-serif;
    font-size: clamp(15rem, 35vw, 38rem);
    font-weight: 800;
    line-height: .75;
    letter-spacing: -20px;
    color: rgba(107,142,123,.08);
    pointer-events: none;
}

.services-standard-layout {
    position: relative;
    z-index: 2;
    width: min(1350px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: clamp(50px, 8vw, 130px);
    align-items: center;
}

.services-standard-content h2 {
    margin: 18px 0 25px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(3rem, 5.5vw, 6rem);
    line-height: .95;
    letter-spacing: -4px;
}

.services-standard-content h2 span {
    color: var(--cleanora-sage);
}

.services-standard-content > p {
    max-width: 540px;
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 1.05rem;
    line-height: 1.85;
    color: #5d6962;
}

.services-standard-list {
    margin-top: 45px;
    display: flex;
    flex-direction: column;
}

.services-standard-list-item {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 15px;
    padding: 18px 0;
    border-top: 1px solid rgba(38,51,45,.18);
}

.services-standard-list-item:last-child {
    border-bottom: 1px solid rgba(38,51,45,.18);
}

.services-standard-list-item span {
    font-family: "Poppins", sans-serif;
    font-size: .72rem;
    font-weight: 700;
    color: var(--cleanora-sage);
}

.services-standard-list-item p {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: .94rem;
    font-weight: 600;
}

.services-standard-visual {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
}

.services-standard-image-frame {
    position: relative;
    width: 100%;
    height: 620px;
    overflow: hidden;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s cubic-bezier(.77,0,.18,1);
}

.services-standard-visual.services-visible .services-standard-image-frame {
    clip-path: inset(0 0 0 0);
}

.services-standard-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.12);
    transition: transform 1.4s cubic-bezier(.2,.8,.2,1);
}

.services-standard-visual.services-visible .services-standard-image {
    transform: scale(1);
}

.services-standard-line {
    position: absolute;
    width: 180px;
    height: 2px;
    right: -55px;
    bottom: 45px;
    background: var(--cleanora-sage);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .8s .6s ease;
}

.services-standard-visual.services-visible .services-standard-line {
    transform: scaleX(1);
}


/* =========================================================
   SECTION 04 — DEEP
========================================================= */

.services-deep {
    position: relative;
    min-height: 900px;
    padding: 125px 5% 150px;
    overflow: hidden;
    background: var(--cleanora-charcoal);
    color: #fff;
}

.services-deep-background {
    position: absolute;
    right: -5%;
    bottom: -5%;
    font-family: "Poppins", sans-serif;
    font-size: clamp(12rem, 30vw, 32rem);
    font-weight: 800;
    line-height: .7;
    letter-spacing: -18px;
    color: rgba(255,255,255,.035);
    pointer-events: none;
}

.services-deep-heading {
    position: relative;
    z-index: 2;
    width: min(800px, 90%);
    margin: 0 auto 70px;
    text-align: center;
}

.services-deep-heading .services-section-kicker {
    color: #bfd8cb;
}

.services-deep-heading h2 {
    margin: 18px 0 22px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(3rem, 6vw, 6.2rem);
    line-height: .95;
    letter-spacing: -4px;
}

.services-deep-heading h2 span {
    color: #bfd8cb;
}

.services-deep-heading p {
    max-width: 650px;
    margin: 0 auto;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255,255,255,.76);
}

.services-deep-panels {
    position: relative;
    z-index: 3;
    width: min(1250px, 94%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    perspective: 1600px;
}

.services-deep-panel {
    min-height: 480px;
    perspective: 1200px;
    cursor: pointer;
}

.services-deep-panel-inner {
    position: relative;
    width: 100%;
    height: 480px;
    transform-style: preserve-3d;
    transition: transform .8s cubic-bezier(.2,.75,.2,1);
}

.services-deep-panel:hover .services-deep-panel-inner,
.services-deep-panel.services-deep-flipped .services-deep-panel-inner {
    transform: rotateY(180deg);
}

.services-deep-panel-front,
.services-deep-panel-back {
    position: absolute;
    inset: 0;
    padding: 42px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-sizing: border-box;
}

.services-deep-panel-front {
    background: #30443a;
    color: #fff;
}

.services-deep-panel:nth-child(2) .services-deep-panel-front {
    background: #3c5448;
}

.services-deep-panel:nth-child(3) .services-deep-panel-front {
    background: #527262;
}

.services-deep-panel-front > span {
    font-family: "Poppins", sans-serif;
    font-size: .8rem;
    font-weight: 700;
    color: #bfd8cb;
}

.services-deep-panel-front i {
    margin-top: auto;
    margin-bottom: 25px;
    font-size: 2rem;
    color: #bfd8cb;
}

.services-deep-panel-front h3 {
    margin: 0 0 15px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: .9;
    letter-spacing: -3px;
}

.services-deep-panel-front p {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: .8rem;
    color: rgba(255,255,255,.68);
}

.services-deep-panel-back {
    transform: rotateY(180deg);
    background: var(--cleanora-cream);
    color: var(--cleanora-charcoal);
}

.services-deep-panel-back > span {
    font-family: "Inter", sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--cleanora-sage);
}

.services-deep-panel-back h3 {
    margin: auto 0 15px;
    font-family: "Poppins", sans-serif;
    font-size: 3.3rem;
    line-height: 1;
}

.services-deep-panel-back p {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: .95rem;
    line-height: 1.75;
    color: #5d6962;
}

.services-deep-panel-back i {
    margin-top: 30px;
    color: var(--cleanora-sage);
}


/* =========================================================
   SECTION 05 — KITCHEN
========================================================= */

.services-kitchen {
    position: relative;
    min-height: 900px;
    padding: 120px 5%;
    overflow: hidden;
    background: var(--cleanora-white);
    color: var(--cleanora-charcoal);
}

.services-kitchen-heading {
    position: relative;
    z-index: 5;
    margin-bottom: 45px;
}

.services-kitchen-heading h2 {
    margin: 0;
    position: relative;
    z-index: 5;
    font-family: "Poppins", sans-serif;
    font-size: clamp(2.8rem, 6vw, 6rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -3px;
}
@media (max-width: 767px) {
    .services-kitchen-heading {
        margin-bottom: 25px;
    }
}
.services-kitchen-heading h2 span {
    color: var(--cleanora-sage);
}

.services-kitchen-scene {
    position: relative;
    width: min(1350px, 100%);
    height: 680px;
    margin: 0 auto;
    overflow: hidden;
}

.services-kitchen-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.05);
    transition: transform 1.5s cubic-bezier(.2,.8,.2,1);
}

.services-kitchen-scene:hover .services-kitchen-image {
    transform: scale(1);
}

.services-kitchen-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(
        circle at var(--services-kitchen-spot-x, 50%)
        var(--services-kitchen-spot-y, 50%),
        transparent 0,
        transparent 90px,
        rgba(0,0,0,.22) 230px,
        rgba(0,0,0,.38) 100%
    );
    opacity: 0;
    transition: opacity .45s ease;
}

.services-kitchen-scene.services-kitchen-active::after {
    opacity: 1;
}

.services-kitchen-hotspot {
    position: absolute;
    z-index: 5;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(107,142,123,.88);
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(107,142,123,.5);
    animation: servicesKitchenPulse 2s infinite;
}

.services-kitchen-hotspot span {
    position: absolute;
    width: 8px;
    height: 8px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background: #fff;
}

@keyframes servicesKitchenPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(107,142,123,.55);
    }

    70% {
        box-shadow: 0 0 0 16px rgba(107,142,123,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(107,142,123,0);
    }
}

.services-kitchen-hotspot-one {
    left: 37%;
    top: 58%;
}

.services-kitchen-hotspot-two {
    left: 66%;
    top: 44%;
}

.services-kitchen-hotspot-three {
    left: 52%;
    top: 69%;
}

.services-kitchen-hotspot:hover {
    transform: scale(1.15);
}

.services-kitchen-info {
    position: absolute;
    z-index: 6;
    right: 5%;
    bottom: 5%;
    width: min(390px, 42%);
    padding: 30px;
    background: var(--cleanora-cream);
    color: var(--cleanora-charcoal);
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity .4s ease,
        transform .4s ease;
    box-shadow: 0 25px 70px rgba(38,51,45,.2);
}

.services-kitchen-info.services-kitchen-info-visible {
    opacity: 1;
    transform: translateY(0);
}

.services-kitchen-info-label {
    font-family: "Inter", sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--cleanora-sage);
}

.services-kitchen-info h3 {
    margin: 12px 0 10px;
    font-family: "Poppins", sans-serif;
    font-size: 1.7rem;
}

.services-kitchen-info p {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: .9rem;
    line-height: 1.7;
    color: #5d6962;
}


/* =========================================================
   SECTION 06 — MOVE-IN
========================================================= */

.services-movein {
    position: relative;
    min-height: 950px;
    padding: 130px 5%;
    overflow: hidden;
    background: var(--cleanora-cream);
    color: var(--cleanora-charcoal);
}

.services-movein-kinetic {
    position: absolute;
    left: -5%;
    bottom: -5%;
    z-index: 0;
    font-family: "Poppins", sans-serif;
    font-size: clamp(10rem, 26vw, 28rem);
    font-weight: 800;
    line-height: .7;
    letter-spacing: -15px;
    color: rgba(107,142,123,.07);
    white-space: nowrap;
    pointer-events: none;
    transform: translateX(var(--services-movein-x, 0px));
    transition: transform .3s ease-out;
}

.services-movein-layout {
    position: relative;
    z-index: 2;
    width: min(1350px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    min-height: 700px;
    align-items: stretch;
}

.services-movein-image-wrap {
    position: relative;
    overflow: hidden;
    transform: translateX(-40px);
    opacity: 0;
    transition:
        opacity .9s ease,
        transform 1s cubic-bezier(.2,.8,.2,1);
}

.services-movein-image-wrap.services-visible {
    opacity: 1;
    transform: translateX(0);
}

.services-movein-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--cleanora-sage);
    transform-origin: right;
    transition: transform 1s cubic-bezier(.77,0,.18,1);
}

.services-movein-image-wrap.services-visible::after {
    transform: scaleX(0);
}

.services-movein-image {
    width: 100%;
    height: 100%;
    min-height: 700px;
    display: block;
    object-fit: cover;
}

.services-movein-content {
    padding: 75px clamp(40px, 7vw, 105px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--cleanora-charcoal);
    color: #fff;
    transform: translateX(40px);
    transition: transform .9s cubic-bezier(.2,.8,.2,1);
}

.services-movein-content.services-visible {
    transform: translateX(0);
}

.services-movein-content .services-section-kicker {
    color: #bfd8cb;
}

.services-movein-content h2 {
    margin: 18px 0 25px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(3rem, 5vw, 5.7rem);
    line-height: .95;
    letter-spacing: -4px;
}

.services-movein-content h2 span {
    color: #bfd8cb;
}

.services-movein-content > p {
    max-width: 540px;
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255,255,255,.76);
}

.services-movein-steps {
    margin-top: 45px;
}

.services-movein-step {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 15px;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,.18);
}

.services-movein-step:last-child {
    border-bottom: 1px solid rgba(255,255,255,.18);
}

.services-movein-step > span {
    font-family: "Poppins", sans-serif;
    font-size: .72rem;
    font-weight: 700;
    color: #bfd8cb;
}

.services-movein-step strong {
    display: block;
    margin-bottom: 6px;
    font-family: "Poppins", sans-serif;
    font-size: .92rem;
}

.services-movein-step p {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: .84rem;
    line-height: 1.6;
    color: rgba(255,255,255,.68);
}

.services-movein-complete {
    position: relative;
    z-index: 3;
    width: min(1350px, 100%);
    margin: 45px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-family: "Poppins", sans-serif;
    font-size: .82rem;
    letter-spacing: 1px;
    color: var(--cleanora-sage);
}

.services-movein-check {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cleanora-sage);
    border-radius: 50%;
}

.services-movein-check i {
    transform: scale(0);
    transition: transform .5s .4s ease;
}

.services-movein-complete.services-visible .services-movein-check i {
    transform: scale(1);
}


/* =========================================================
   SECTION 07 — FINAL
========================================================= */

.services-final {
    position: relative;
    min-height: 850px;
    padding: 125px 5% 120px;
    overflow: hidden;
    background: var(--cleanora-charcoal);
    color: #fff;
    text-align: center;
}

.services-final-kinetic {
    position: absolute;
    left: -10%;
    bottom: -7%;
    font-family: "Poppins", sans-serif;
    font-size: clamp(12rem, 30vw, 34rem);
    font-weight: 800;
    line-height: .7;
    letter-spacing: -20px;
    color: rgba(255,255,255,.035);
    white-space: nowrap;
    pointer-events: none;
    animation: servicesFinalKinetic 16s linear infinite alternate;
}

@keyframes servicesFinalKinetic {
    from {
        transform: translateX(-2%);
    }

    to {
        transform: translateX(8%);
    }
}

.services-final-content {
    position: relative;
    z-index: 2;
    width: min(850px, 90%);
    margin: 0 auto 60px;
}

.services-final-content .services-section-kicker {
    color: #bfd8cb;
}

.services-final-content h2 {
    margin: 18px 0 23px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(3rem, 6vw, 6.5rem);
    line-height: .93;
    letter-spacing: -5px;
}

.services-final-content h2 span {
    color: #bfd8cb;
}

.services-final-content p {
    max-width: 650px;
    margin: 0 auto;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255,255,255,.74);
}

.services-final-options {
    position: relative;
    z-index: 3;
    width: min(1050px, 94%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255,255,255,.2);
    border-bottom: 1px solid rgba(255,255,255,.2);
}

.services-final-option {
    min-height: 115px;
    padding: 20px;
    display: grid;
    grid-template-columns: 35px 1fr 25px;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    border-right: 1px solid rgba(255,255,255,.16);
    color: #fff;
    transition:
        background .35s ease,
        padding-left .35s ease;
}

.services-final-option:last-child {
    border-right: 0;
}

.services-final-option:hover {
    background: rgba(107,142,123,.18);
    padding-left: 28px;
}

.services-final-option span {
    font-family: "Poppins", sans-serif;
    font-size: .72rem;
    font-weight: 700;
    color: #bfd8cb;
}

.services-final-option strong {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
}

.services-final-option i {
    transition: transform .3s ease;
}

.services-final-option:hover i {
    transform: translateX(6px);
}

.services-final-cta {
    position: relative;
    z-index: 3;
    margin-top: 70px;
}

.services-final-cta h3 {
    margin: 0 0 25px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(1.8rem, 3vw, 3rem);
}

.services-final-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 9px;
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
}

.services-final-button::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 2px;
    background: #bfd8cb;
    transition: right .5s ease;
}

.services-final-button:hover::after {
    right: 0;
}

.services-final-button i {
    transition: transform .3s ease;
}

.services-final-button:hover i {
    transform: translateX(6px);
}

.services-final-pricing-link {
    display: block;
    width: fit-content;
    margin: 20px auto 0;
    font-family: "Inter", sans-serif;
    font-size: .82rem;
    color: #bfd8cb;
    text-decoration: none;
}


/* =========================================================
   TABLET — 768 TO 1023
========================================================= */

@media (max-width: 1023px) {

    .services-hero {
        min-height: auto;
        padding: 100px 5% 80px;
    }

    .services-hero-layout {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .services-hero-mask h1 {
        font-size: clamp(2.8rem, 6vw, 4.7rem);
    }

    .services-hero-image-wrap {
        height: 500px;
    }

    .services-hero-visual {
        min-height: 500px;
    }

    .services-selector {
        padding: 90px 4% 100px;
    }

    .services-selector-runway {
        width: 100%;
    }

    .services-selector-item {
        padding: 18px;
        grid-template-columns: 30px 1fr;
    }

    .services-selector-item i {
        display: none;
    }

    .services-selector-showcase {
        width: 100%;
        min-height: 500px;
    }

    .services-selector-image {
        min-height: 500px;
    }

    .services-standard {
        padding: 100px 5%;
    }

    .services-standard-layout {
        gap: 50px;
    }

    .services-standard-image-frame {
        height: 520px;
    }

    .services-standard-visual {
        min-height: 520px;
    }

    .services-deep {
        padding: 100px 4% 120px;
    }

    .services-deep-panels {
        gap: 15px;
    }

    .services-deep-panel,
    .services-deep-panel-inner {
        min-height: 420px;
        height: 420px;
    }

    .services-deep-panel-front,
    .services-deep-panel-back {
        padding: 30px;
    }

    .services-kitchen {
        padding: 100px 4%;
    }

    .services-kitchen-scene {
        width: 100%;
        height: 600px;
    }

    .services-movein {
        padding: 100px 4%;
    }

    .services-movein-layout {
        grid-template-columns: 1fr 1fr;
    }

    .services-movein-image,
    .services-movein-image-wrap {
        min-height: 600px;
    }

    .services-movein-content {
        padding: 55px 45px;
    }

    .services-final {
        padding: 100px 4%;
    }

}


/* =========================================================
   MOBILE — ALL MOBILE SIZES
========================================================= */

@media (max-width: 767px) {

    .services-reveal {
        transform: translateY(30px);
    }

    /* Hero */

    .services-hero {
        padding: 95px 6% 70px;
    }

    .services-hero-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .services-hero-mask h1 {
        font-size: clamp(2.7rem, 12vw, 4.3rem);
        letter-spacing: -2px;
    }

    .services-hero-content > p {
        font-size: .94rem;
        line-height: 1.75;
    }

    .services-hero-visual {
        min-height: 400px;
    }

    .services-hero-image-wrap {
        height: 430px;
    }

    .services-hero-label-one {
        left: -5px;
        top: 10%;
    }

    .services-hero-label-two {
        right: -5px;
        bottom: 10%;
    }

    .services-hero-label {
        min-height: 45px;
        padding: 0 12px;
    }

    .services-hero-label span {
        font-size: .7rem;
    }

    .services-hero-background-word {
        font-size: 9rem;
        letter-spacing: -7px;
    }


    /* Selector */

    .services-selector {
        padding: 75px 5% 85px;
    }

    .services-selector-heading {
        width: 100%;
        margin-bottom: 45px;
    }

    .services-selector-heading h2 {
        font-size: clamp(2.5rem, 11vw, 4rem);
        letter-spacing: -2px;
    }

    .services-selector-heading p {
        font-size: .92rem;
    }

    .services-selector-runway {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .services-selector-item {
        min-height: 90px;
        grid-template-columns: 30px 1fr;
        border-bottom: 1px solid rgba(38,51,45,.14);
    }

    .services-selector-item:nth-child(2n) {
        border-right: 0;
    }

    .services-selector-item:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .services-selector-showcase {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    .services-selector-image {
        min-height: 330px;
        height: 330px;
    }

    .services-selector-info {
        padding: 40px 28px 45px;
    }

    .services-selector-info h3 {
        font-size: clamp(2.2rem, 10vw, 3.5rem);
    }


    /* Standard */

    .services-standard {
        min-height: auto;
        padding: 90px 6% 100px;
    }

    .services-standard-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .services-standard-content h2 {
        font-size: clamp(2.8rem, 11vw, 4.5rem);
        letter-spacing: -2px;
    }

    .services-standard-content > p {
        font-size: .94rem;
    }

    .services-standard-visual {
        min-height: 400px;
    }

    .services-standard-image-frame {
        height: 430px;
    }

    .services-standard-line {
        right: -20px;
        bottom: 25px;
        width: 100px;
    }

    .services-standard-number {
        font-size: 15rem;
        top: 25%;
    }


    /* Deep */

    .services-deep {
        min-height: auto;
        padding: 90px 6% 100px;
    }

    .services-deep-heading {
        width: 100%;
        margin-bottom: 50px;
    }

    .services-deep-heading h2 {
        font-size: clamp(2.8rem, 11vw, 4.4rem);
        letter-spacing: -2px;
    }

    .services-deep-heading p {
        font-size: .92rem;
    }

    .services-deep-panels {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .services-deep-panel,
    .services-deep-panel-inner {
        min-height: 360px;
        height: 360px;
    }

    .services-deep-panel-front,
    .services-deep-panel-back {
        padding: 28px;
    }

    .services-deep-panel-front h3 {
        font-size: 3.2rem;
    }

    .services-deep-panel-back h3 {
        font-size: 2.5rem;
    }

    .services-deep-background {
        font-size: 10rem;
    }


    /* Kitchen */

    .services-kitchen {
        min-height: auto;
        padding: 85px 5% 90px;
    }

    .services-kitchen-heading {
        width: 100%;
        margin: 0 0 35px;
    }

    .services-kitchen-heading h2 {
        font-size: clamp(2.8rem, 11vw, 4.5rem);
        letter-spacing: -2px;
    }

    .services-kitchen-scene {
        height: 520px;
        width: 100%;
    }

    .services-kitchen-info {
        left: 5%;
        right: 5%;
        bottom: 5%;
        width: auto;
        padding: 24px;
    }

    .services-kitchen-hotspot {
        width: 34px;
        height: 34px;
    }


    /* Move-In */

    .services-movein {
        min-height: auto;
        padding: 85px 6% 90px;
    }

    .services-movein-layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .services-movein-image-wrap {
        min-height: 420px;
        height: 420px;
    }

    .services-movein-image {
        min-height: 420px;
    }

    .services-movein-content {
        padding: 55px 28px;
    }

    .services-movein-content h2 {
        font-size: clamp(2.8rem, 11vw, 4.5rem);
        letter-spacing: -2px;
    }

    .services-movein-content > p {
        font-size: .93rem;
    }

    .services-movein-complete {
        margin-top: 35px;
        font-size: .7rem;
    }

    .services-movein-kinetic {
        font-size: 10rem;
        letter-spacing: -8px;
    }


    /* Final */

    .services-final {
        min-height: auto;
        padding: 90px 5% 100px;
    }

    .services-final-content {
        width: 100%;
    }

    .services-final-content h2 {
        font-size: clamp(2.8rem, 11vw, 4.6rem);
        letter-spacing: -3px;
    }

    .services-final-content p {
        font-size: .93rem;
    }

    .services-final-options {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .services-final-option {
        min-height: 80px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.16);
    }

    .services-final-option:last-child {
        border-bottom: 0;
    }

    .services-final-cta {
        margin-top: 55px;
    }

    .services-final-kinetic {
        font-size: 11rem;
        letter-spacing: -8px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .services-hero {
        padding-top: 90px;
    }

    .services-hero-image-wrap {
        height: 360px;
    }

    .services-hero-visual {
        min-height: 360px;
    }

    .services-hero-label {
        transform: scale(.9);
    }

    .services-selector-item {
        min-height: 80px;
        padding: 14px 12px;
    }

    .services-selector-image {
        min-height: 280px;
        height: 280px;
    }

    .services-standard-image-frame {
        height: 350px;
    }

    .services-standard-visual {
        min-height: 350px;
    }

    .services-deep-panel,
    .services-deep-panel-inner {
        height: 330px;
        min-height: 330px;
    }

    .services-kitchen-scene {
        height: 430px;
    }

    .services-kitchen-info {
        padding: 20px;
    }

    .services-movein-image-wrap {
        min-height: 350px;
        height: 350px;
    }

    .services-movein-image {
        min-height: 350px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .services-reveal,
    .services-hero-mask h1,
    .services-hero-image,
    .services-hero-image-curtain,
    .services-hero-label,
    .services-selector-image img,
    .services-standard-image-frame,
    .services-standard-image,
    .services-standard-line,
    .services-deep-panel-inner,
    .services-kitchen-image,
    .services-kitchen-hotspot,
    .services-kitchen-info,
    .services-movein-image-wrap,
    .services-movein-image-wrap::after,
    .services-movein-content,
    .services-movein-check i,
    .services-final-kinetic {
        animation: none !important;
        transition: none !important;
    }

    .services-reveal {
        opacity: 1;
        transform: none;
    }

    .services-hero-image-curtain {
        transform: scaleX(0);
    }

    .services-standard-image-frame {
        clip-path: inset(0);
    }

    .services-standard-image {
        transform: none;
    }

    .services-standard-line {
        transform: scaleX(1);
    }

    .services-movein-image-wrap,
    .services-movein-content {
        opacity: 1;
        transform: none;
    }

    .services-movein-image-wrap::after {
        transform: scaleX(0);
    }

    .services-kitchen-hotspot {
        animation: none;
    }

}

/* =========================================================
   SERVICES IMAGE SYSTEM
   ========================================================= */

.services-selector-image {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 480px;
    overflow: hidden;
}

.services-selector-main-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition:
        transform 0.8s cubic-bezier(.2,.8,.2,1),
        opacity 0.45s ease;
}

.services-selector-image.services-image-changing
.services-selector-main-image {
    transform: scale(1.08);
    opacity: .25;
}


/* =========================================================
   DEEP MAIN IMAGE
   ========================================================= */

.services-deep-main-image {
    position: relative;
    width: min(1200px, 88%);
    height: min(58vh, 580px);
    min-height: 420px;
    margin: 45px auto 55px;
    overflow: hidden;
}

.services-deep-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: scale(1.08);
    transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}

.services-deep-main-image.services-visible
.services-deep-image {
    transform: scale(1);
}

.services-deep-image-overlay {
    position: absolute;
    left: 35px;
    bottom: 30px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 20px;
    background: rgba(38,51,45,.88);
    color: #fff;
}

.services-deep-image-overlay span {
    font-family: "Poppins", sans-serif;
    font-size: .8rem;
    font-weight: 700;
    color: #bfd8cb;
}

.services-deep-image-overlay strong {
    font-family: "Poppins", sans-serif;
    font-size: .9rem;
    letter-spacing: 2px;
}


/* =========================================================
   DEEP FLIP CARDS
   ========================================================= */

.services-deep-panel {
    perspective: 1200px;
}

.services-deep-panel-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 360px;
    transform-style: preserve-3d;
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
}

@media (hover: hover) {

    .services-deep-panel:hover
    .services-deep-panel-inner {
        transform: rotateY(180deg);
    }

}

.services-deep-panel-front,
.services-deep-panel-back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.services-deep-panel-back {
    transform: rotateY(180deg);
    background: #26332D;
}

.services-deep-panel-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .8s ease;
}

.services-deep-panel-back::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(38,51,45,.08),
        rgba(38,51,45,.9)
    );
    z-index: 1;
}

.services-deep-panel-back-content {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    z-index: 2;
    color: #fff;
}

.services-deep-panel-back-content span {
    display: block;
    margin-bottom: 8px;
    font-family: "Inter", sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #bfd8cb;
}

.services-deep-panel-back-content h3 {
    margin: 0 0 8px;
    font-family: "Poppins", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
}

.services-deep-panel-back-content p {
    margin: 0 0 18px;
    font-family: "Inter", sans-serif;
    font-size: .88rem;
    line-height: 1.65;
    color: rgba(255,255,255,.82);
}

.services-deep-panel-back-content i {
    font-size: 1rem;
    color: #bfd8cb;
}


/* =========================================================
   MOBILE FLIP SUPPORT
   ========================================================= */

.services-deep-panel.services-flipped
.services-deep-panel-inner {
    transform: rotateY(180deg);
}

@media (hover: none) {

    .services-deep-panel {
        cursor: pointer;
    }

}


/* =========================================================
   IMAGE RESPONSIVENESS
   ========================================================= */

.services-selector-main-image,
.services-standard-image,
.services-deep-image,
.services-deep-panel-image,
.services-kitchen-image,
.services-movein-image {
    max-width: 100%;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1023px) {

    .services-deep-main-image {
        width: 90%;
        height: 480px;
        min-height: 380px;
        margin-top: 35px;
    }

    .services-deep-panel-inner {
        min-height: 330px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .services-selector-image {
        min-height: 340px;
        height: 340px;
    }

    .services-deep-main-image {
        width: 90%;
        height: 360px;
        min-height: 300px;
        margin: 30px auto 35px;
    }

    .services-deep-image-overlay {
        left: 18px;
        bottom: 18px;
        gap: 12px;
        padding: 11px 14px;
    }

    .services-deep-panel-inner {
        min-height: 310px;
    }

    .services-deep-panel-back-content {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }

    .services-deep-panel-back-content h3 {
        font-size: 1.45rem;
    }

    .services-deep-panel-back-content p {
        font-size: .82rem;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .services-selector-image {
        min-height: 290px;
        height: 290px;
    }

    .services-deep-main-image {
        width: 92%;
        height: 300px;
        min-height: 270px;
    }

    .services-deep-panel-inner {
        min-height: 280px;
    }

}

/* =========================================================
   CLEANORA PRICING PAGE
   ========================================================= */


/* =========================================================
   GLOBAL PRICING VARIABLES
========================================================= */

:root {

    --pricing-sage: #6B8E7B;
    --pricing-cream: #F7F3EA;
    --pricing-charcoal: #26332D;
    --pricing-white: #FFFFFF;
    --pricing-light-sage: #E4ECE7;
    --pricing-dark-sage: #527262;

    --pricing-muted: #5D6962;

    --pricing-transition: .35s ease;

}


/* =========================================================
   PAGE
========================================================= */

.pricing-page {

    width: 100%;
    overflow: hidden;

}


/* =========================================================
   COMMON KICKER
========================================================= */

.pricing-section-kicker {

    display: inline-block;

    font-family: "Inter", sans-serif;

    font-size: .72rem;
    font-weight: 700;

    letter-spacing: 2.5px;

    color: var(--pricing-sage);

}


/* =========================================================
   COMMON REVEAL
========================================================= */

.pricing-reveal {

    opacity: 0;

    transform: translateY(45px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.8,.2,1);

}


.pricing-reveal.pricing-visible {

    opacity: 1;

    transform: translateY(0);

}


/* =========================================================
   SECTION 01 — HERO
========================================================= */

.pricing-hero {

    position: relative;

    min-height: 720px;

    display: flex;
    align-items: center;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(107,142,123,.14),
            transparent 32%
        ),
        var(--pricing-cream);

    color: var(--pricing-charcoal);

}


/* Pattern */

.pricing-hero-pattern {

    position: absolute;

    inset: 0;

    z-index: -3;

    opacity: .55;

    background-image:
        linear-gradient(
            rgba(107,142,123,.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(107,142,123,.08) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

    transform:
        translate(
            var(--pricing-pattern-x, 0px),
            var(--pricing-pattern-y, 0px)
        );

    transition:
        transform .35s ease-out;

}


/* Orb */

.pricing-hero-orb {

    position: absolute;

    left: var(--pricing-orb-x, 50%);
    top: var(--pricing-orb-y, 50%);

    width: 260px;
    height: 260px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(107,142,123,.30) 0%,
            rgba(107,142,123,.16) 25%,
            rgba(107,142,123,.07) 48%,
            transparent 72%
        );

    filter: blur(2px);

    transition:
        left .16s ease-out,
        top .16s ease-out;

}


.pricing-hero-orb span {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 24px;
    height: 24px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: var(--pricing-sage);

    box-shadow:
        0 0 0 8px rgba(107,142,123,.10),
        0 0 40px rgba(107,142,123,.30);

}


/* Background ₹ */

.pricing-hero-numbers {

    position: absolute;

    right: -2%;
    bottom: -15%;

    z-index: -2;

    font-family: "Poppins", sans-serif;

    font-size: clamp(
        16rem,
        34vw,
        38rem
    );

    font-weight: 800;

    line-height: .7;

    letter-spacing: -20px;

    color:
        rgba(38,51,45,.045);

    pointer-events: none;

    transform:
        translate(
            var(--pricing-number-x, 0px),
            var(--pricing-number-y, 0px)
        );

    transition:
        transform .3s ease-out;

}


/* Hero layout */

.pricing-hero-inner {

    width: min(1280px, 88%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 70px;

    align-items: center;

}


/* Hero text */

.pricing-hero-content h1 {

    margin: 18px 0 28px;

    max-width: 720px;

    font-family: "Poppins", sans-serif;

    font-size:
        clamp(
            3.5rem,
            7vw,
            7.5rem
        );

    font-weight: 700;

    line-height: .92;

    letter-spacing: -5px;

}


.pricing-hero-content h1 span {

    display: block;

    color: var(--pricing-sage);

}


.pricing-hero-content p {

    max-width: 570px;

    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 1.05rem;

    line-height: 1.85;

    color: var(--pricing-muted);

}


/* Hero button */

.pricing-hero-actions {

    margin-top: 38px;

}


.pricing-primary-btn {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding: 15px 22px;

    font-family: "Inter", sans-serif;

    font-size: .88rem;

    font-weight: 700;

    color: var(--pricing-white);

    background: var(--pricing-charcoal);

    text-decoration: none;

    transition:
        transform .3s ease,
        background .3s ease;

}


.pricing-primary-btn i {

    transition:
        transform .3s ease;

}


.pricing-primary-btn:hover {

    transform: translateY(-4px);

    background: var(--pricing-sage);

}


.pricing-primary-btn:hover i {

    transform: translateX(5px);

}


/* Hero visual */

.pricing-hero-visual {

    position: relative;

    min-height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* Orbit */

.pricing-hero-price-orbit {

    width: min(380px, 80vw);
    aspect-ratio: 1;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 8px;

    border:
        1px solid rgba(107,142,123,.35);

    border-radius: 50%;

    position: relative;

    animation:
        pricingOrbitFloat
        6s ease-in-out infinite;

}


.pricing-hero-price-orbit::before {

    content: "";

    position: absolute;

    inset: 28px;

    border:
        1px dashed rgba(107,142,123,.35);

    border-radius: 50%;

}


.pricing-hero-price-orbit strong {

    position: relative;

    z-index: 2;

    font-family: "Poppins", sans-serif;

    font-size: clamp(7rem, 15vw, 13rem);

    font-weight: 700;

    line-height: .7;

    color: var(--pricing-sage);

}


.pricing-orbit-label {

    position: relative;

    z-index: 2;

    font-family: "Inter", sans-serif;

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: 3px;

    color: var(--pricing-charcoal);

}


@keyframes pricingOrbitFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

}


/* Floating numbers */

.pricing-hero-floating {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 9px;

    font-family: "Inter", sans-serif;

}


.pricing-hero-floating span {

    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border: 1px solid var(--pricing-sage);

    border-radius: 50%;

    font-family: "Poppins", sans-serif;

    font-size: .72rem;

    font-weight: 700;

    color: var(--pricing-sage);

}


.pricing-hero-floating small {

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: 1px;

}


.pricing-hero-floating-one {

    top: 14%;

    left: 5%;

}


.pricing-hero-floating-two {

    top: 48%;

    right: 0;

}


.pricing-hero-floating-three {

    bottom: 13%;

    left: 15%;

}


/* =========================================================
   SECTION 02 — BUILDER
========================================================= */

.pricing-builder {

    min-height: 900px;

    padding: 120px 6%;

    background: var(--pricing-charcoal);

    color: var(--pricing-white);

}


.pricing-builder-heading {

    width: min(850px, 90%);

    margin: 0 auto 70px;

    text-align: center;

}


.pricing-builder-heading .pricing-section-kicker {

    color: #BFD8CB;

}


.pricing-builder-heading h2 {

    margin: 16px 0 22px;

    font-family: "Poppins", sans-serif;

    font-size:
        clamp(
            3rem,
            6vw,
            6rem
        );

    line-height: .95;

    letter-spacing: -4px;

}


.pricing-builder-heading h2 span {

    color: #BFD8CB;

}


.pricing-builder-heading p {

    max-width: 620px;

    margin: auto;

    font-family: "Inter", sans-serif;

    font-size: 1rem;

    line-height: 1.8;

    color: rgba(255,255,255,.72);

}


.pricing-builder-layout {

    width: min(1250px, 94%);

    margin: auto;

    display: grid;

    grid-template-columns: 1.25fr .75fr;

    gap: 80px;

    align-items: start;

}


/* Controls */

.pricing-builder-controls {

    display: flex;

    flex-direction: column;

    gap: 58px;

}


.pricing-builder-group {

    border-top:
        1px solid rgba(255,255,255,.18);

    padding-top: 25px;

}


.pricing-builder-label {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 24px;

}


.pricing-builder-label span {

    font-family: "Poppins", sans-serif;

    font-size: .75rem;

    color: #BFD8CB;

}


.pricing-builder-label strong {

    font-family: "Poppins", sans-serif;

    font-size: 1.15rem;

}


/* Service options */

.pricing-service-options {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

}


.pricing-service-option {

    min-height: 70px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 18px;

    border: 1px solid rgba(255,255,255,.16);

    border-right: 0;

    background: transparent;

    color: rgba(255,255,255,.72);

    font-family: "Inter", sans-serif;

    font-size: .88rem;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease;

}


.pricing-service-option:last-child {

    border-right:
        1px solid rgba(255,255,255,.16);

}


.pricing-service-option i {

    opacity: 0;

    color: #BFD8CB;

}


.pricing-service-option-active {

    background: #BFD8CB;

    color: var(--pricing-charcoal);

    border-color: #BFD8CB;

}


.pricing-service-option-active i {

    opacity: 1;

}


/* Rooms */

.pricing-room-options {

    display: flex;

    gap: 10px;

}


.pricing-room-option {

    width: 70px;
    height: 58px;

    border: 1px solid rgba(255,255,255,.2);

    background: transparent;

    color: rgba(255,255,255,.72);

    font-family: "Poppins", sans-serif;

    font-size: .85rem;

    cursor: pointer;

    transition:
        .3s ease;

}


.pricing-room-option-active {

    background: #BFD8CB;

    border-color: #BFD8CB;

    color: var(--pricing-charcoal);

    transform: translateY(-5px);

}


/* Frequency */

.pricing-frequency-options {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 10px;

}


.pricing-frequency-option {

    padding: 18px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

    border:
        1px solid rgba(255,255,255,.16);

    background: transparent;

    color: rgba(255,255,255,.72);

    text-align: left;

    cursor: pointer;

    transition: .3s ease;

}


.pricing-frequency-option span {

    font-family: "Poppins", sans-serif;

    font-size: .9rem;

    font-weight: 600;

}


.pricing-frequency-option small {

    font-family: "Inter", sans-serif;

    font-size: .72rem;

    color: rgba(255,255,255,.52);

}


.pricing-frequency-option-active {

    border-color: #BFD8CB;

    background:
        rgba(191,216,203,.09);

}


.pricing-frequency-option-active span {

    color: #BFD8CB;

}


/* Estimate */

.pricing-estimate {

    position: sticky;

    top: 110px;

    padding: 42px;

    background: #1D2923;

    border-top:
        3px solid #BFD8CB;

}


.pricing-estimate-kicker {

    font-family: "Inter", sans-serif;

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: 2px;

    color: #BFD8CB;

}


.pricing-estimate-price {

    display: flex;

    align-items: flex-start;

    margin-top: 22px;

}


.pricing-estimate-price span {

    margin-top: 10px;

    font-family: "Poppins", sans-serif;

    font-size: 1.7rem;

    color: #BFD8CB;

}


.pricing-estimate-price strong {

    font-family: "Poppins", sans-serif;

    font-size: clamp(4rem, 7vw, 7rem);

    line-height: .9;

    letter-spacing: -4px;

    color: #FFFFFF;

}


.pricing-estimate-period {

    display: block;

    margin-top: 10px;

    font-family: "Inter", sans-serif;

    font-size: .78rem;

    color: rgba(255,255,255,.58);

}


.pricing-estimate-divider {

    height: 1px;

    margin: 30px 0;

    background:
        rgba(255,255,255,.15);

}


.pricing-estimate-summary {

    display: flex;

    flex-direction: column;

    gap: 17px;

}


.pricing-estimate-summary div {

    display: flex;

    justify-content: space-between;

    gap: 20px;

}


.pricing-estimate-summary span {

    font-family: "Inter", sans-serif;

    font-size: .8rem;

    color: rgba(255,255,255,.55);

}


.pricing-estimate-summary strong {

    font-family: "Poppins", sans-serif;

    font-size: .82rem;

    color: #FFFFFF;

}


.pricing-estimate-btn {

    margin-top: 35px;

    padding: 15px 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #BFD8CB;

    color: var(--pricing-charcoal);

    text-decoration: none;

    font-family: "Inter", sans-serif;

    font-size: .8rem;

    font-weight: 700;

    transition: .3s ease;

}


.pricing-estimate-btn:hover {

    background: #FFFFFF;

}


.pricing-estimate-btn i {

    transition: .3s ease;

}


.pricing-estimate-btn:hover i {

    transform: translateX(5px);

}


.pricing-estimate-note {

    display: block;

    margin-top: 20px;

    font-family: "Inter", sans-serif;

    font-size: .68rem;

    line-height: 1.6;

    color: rgba(255,255,255,.42);

}


/* =========================================================
   SECTION 03 — HOME SIZE
========================================================= */

.pricing-size {

    min-height: 720px;

    padding: 120px 6%;

    background: var(--pricing-light-sage);

    color: var(--pricing-charcoal);

}


.pricing-size-inner {

    width: min(1250px, 92%);

    margin: auto;

}


.pricing-size-heading {

    max-width: 700px;

}


.pricing-size-heading h2 {

    margin: 16px 0 20px;

    font-family: "Poppins", sans-serif;

    font-size:
        clamp(
            3rem,
            6vw,
            6rem
        );

    line-height: .95;

    letter-spacing: -4px;

}


.pricing-size-heading h2 span {

    color: var(--pricing-sage);

}


.pricing-size-heading p {

    max-width: 580px;

    font-family: "Inter", sans-serif;

    font-size: 1rem;

    line-height: 1.8;

    color: var(--pricing-muted);

}


/* Room track */

.pricing-room-track {

    position: relative;

    margin-top: 100px;

}


.pricing-room-line {

    position: absolute;

    left: 5%;

    right: 5%;

    top: 28px;

    height: 2px;

    background:
        rgba(38,51,45,.16);

}


.pricing-room-line span {

    display: block;

    width: 0%;

    height: 100%;

    background: var(--pricing-sage);

    transition: width .55s ease;

}


.pricing-room-points {

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    justify-items: center;

}


.pricing-room-point {

    width: 100px;

    height: 100px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    border:
        1px solid rgba(38,51,45,.18);

    border-radius: 50%;

    background: var(--pricing-light-sage);

    color: var(--pricing-charcoal);

    cursor: pointer;

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease;

}


.pricing-room-point strong {

    font-family: "Poppins", sans-serif;

    font-size: 1.15rem;

}


.pricing-room-point span {

    font-family: "Inter", sans-serif;

    font-size: .62rem;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.pricing-room-point-active {

    background: var(--pricing-sage);

    color: #FFFFFF;

    transform: scale(1.15);

}


.pricing-size-result {

    margin-top: 90px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid rgba(38,51,45,.2);

    border-bottom:
        1px solid rgba(38,51,45,.2);

}


.pricing-size-result div {

    min-height: 140px;

    padding: 28px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 10px;

    border-right:
        1px solid rgba(38,51,45,.2);

}


.pricing-size-result div:last-child {

    border-right: 0;

}


.pricing-size-result span {

    font-family: "Inter", sans-serif;

    font-size: .68rem;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: var(--pricing-muted);

}


.pricing-size-result strong {

    font-family: "Poppins", sans-serif;

    font-size: 1.4rem;

}


/* =========================================================
   SECTION 04 — FREQUENCY
========================================================= */

.pricing-frequency {

    min-height: 820px;

    padding: 120px 6%;

    background: var(--pricing-cream);

    color: var(--pricing-charcoal);

}


.pricing-frequency-heading {

    width: min(1200px, 92%);

    margin: 0 auto 80px;

}


.pricing-frequency-heading h2 {

    margin: 16px 0 0;

    font-family: "Poppins", sans-serif;

    font-size:
        clamp(
            3rem,
            7vw,
            7rem
        );

    line-height: .9;

    letter-spacing: -5px;

}


.pricing-frequency-heading h2 span {

    color: var(--pricing-sage);

}


.pricing-frequency-stage {

    width: min(1200px, 92%);

    margin: auto;

    display: grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap: 80px;

    align-items: center;

}


.pricing-frequency-copy {

    min-height: 400px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    border-left:
        4px solid var(--pricing-sage);

    padding-left: 45px;

}


.pricing-frequency-big-number {

    font-family: "Poppins", sans-serif;

    font-size: 5rem;

    line-height: .8;

    color: var(--pricing-light-sage);

    -webkit-text-stroke:
        1px var(--pricing-sage);

}


.pricing-frequency-copy h3 {

    margin: 30px 0 15px;

    font-family: "Poppins", sans-serif;

    font-size: 2.6rem;

}


.pricing-frequency-copy p {

    max-width: 460px;

    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 1rem;

    line-height: 1.8;

    color: var(--pricing-muted);

}


.pricing-frequency-selector {

    display: flex;

    flex-direction: column;

}


.pricing-frequency-large-option {

    min-height: 100px;

    display: grid;

    grid-template-columns: 55px 1fr 30px;

    align-items: center;

    gap: 20px;

    padding: 0 25px;

    border: 0;

    border-top:
        1px solid rgba(38,51,45,.2);

    background: transparent;

    color: var(--pricing-charcoal);

    text-align: left;

    cursor: pointer;

    transition:
        padding .35s ease,
        background .35s ease,
        color .35s ease;

}


.pricing-frequency-large-option:last-child {

    border-bottom:
        1px solid rgba(38,51,45,.2);

}


.pricing-frequency-large-option span {

    font-family: "Poppins", sans-serif;

    font-size: .72rem;

    color: var(--pricing-sage);

}


.pricing-frequency-large-option strong {

    font-family: "Poppins", sans-serif;

    font-size: 1.25rem;

}


.pricing-frequency-large-option i {

    opacity: 0;

    transition: .3s ease;

}


.pricing-frequency-large-active {

    padding-left: 38px;

    background: var(--pricing-charcoal);

    color: #FFFFFF;

}


.pricing-frequency-large-active i {

    opacity: 1;

}


/* =========================================================
   SECTION 05 — INCLUDED
========================================================= */

.pricing-included {

    min-height: 850px;

    padding: 120px 5%;

    background: var(--pricing-charcoal);

    color: #FFFFFF;

}


.pricing-included-heading {

    width: min(900px, 92%);

    margin: 0 auto 65px;

    text-align: center;

}


.pricing-included-heading .pricing-section-kicker {

    color: #BFD8CB;

}


.pricing-included-heading h2 {

    margin: 16px 0 20px;

    font-family: "Poppins", sans-serif;

    font-size:
        clamp(
            3rem,
            6vw,
            6rem
        );

    line-height: .95;

    letter-spacing: -4px;

}


.pricing-included-heading h2 span {

    color: #BFD8CB;

}


.pricing-included-heading p {

    max-width: 620px;

    margin: auto;

    font-family: "Inter", sans-serif;

    font-size: 1rem;

    line-height: 1.8;

    color: rgba(255,255,255,.7);

}


/* Comparison */

.pricing-comparison {

    width: min(1200px, 96%);

    margin: auto;

}


.pricing-comparison-head,
.pricing-comparison-row {

    display: grid;

    grid-template-columns:
        1.4fr repeat(4, 1fr);

}


.pricing-comparison-head {

    min-height: 70px;

    border-top:
        1px solid rgba(255,255,255,.2);

    border-bottom:
        1px solid rgba(255,255,255,.2);

}


.pricing-comparison-head div {

    display: flex;

    align-items: center;

    padding: 0 20px;

    border-right:
        1px solid rgba(255,255,255,.1);

    font-family: "Inter", sans-serif;

    font-size: .67rem;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: #BFD8CB;

}


.pricing-comparison-head div:not(:first-child) {

    justify-content: center;

    text-align: center;

}


.pricing-comparison-row {

    min-height: 82px;

    border-bottom:
        1px solid rgba(255,255,255,.12);

}


.pricing-comparison-row > div {

    display: flex;

    align-items: center;

    padding: 0 20px;

    border-right:
        1px solid rgba(255,255,255,.1);

    font-family: "Inter", sans-serif;

    font-size: .85rem;

    color: rgba(255,255,255,.76);

}


.pricing-comparison-row > div:not(:first-child) {

    justify-content: center;

}


.pricing-check {

    color: #BFD8CB;

}


.pricing-check i {

    opacity: 0;

    transform: scale(.5);

}


.pricing-visible .pricing-check i {

    animation:
        pricingCheckIn
        .45s ease forwards;

}


@keyframes pricingCheckIn {

    to {

        opacity: 1;

        transform: scale(1);

    }

}


.pricing-dash {

    color: rgba(255,255,255,.22);

}


/* =========================================================
   SECTION 06 — BREAKDOWN
========================================================= */

.pricing-breakdown {

    min-height: 850px;

    padding: 120px 6%;

    background: var(--pricing-light-sage);

    color: var(--pricing-charcoal);

}


.pricing-breakdown-inner {

    width: min(1150px, 92%);

    margin: auto;

    display: grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap: 100px;

    align-items: center;

}


.pricing-breakdown-heading h2 {

    margin: 16px 0 20px;

    font-family: "Poppins", sans-serif;

    font-size:
        clamp(
            3rem,
            6vw,
            6rem
        );

    line-height: .95;

    letter-spacing: -4px;

}


.pricing-breakdown-heading h2 span {

    display: block;

    color: var(--pricing-sage);

}


.pricing-breakdown-heading p {

    max-width: 470px;

    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 1rem;

    line-height: 1.8;

    color: var(--pricing-muted);

}


/* Receipt */

.pricing-receipt {

    padding: 42px;

    background: #FFFFFF;

    box-shadow:
        0 25px 70px rgba(38,51,45,.12);

}


.pricing-receipt-top {

    display: flex;

    justify-content: space-between;

    padding-bottom: 25px;

    border-bottom:
        1px solid rgba(38,51,45,.16);

    font-family: "Poppins", sans-serif;

    font-size: .75rem;

    font-weight: 700;

    letter-spacing: 1.5px;

}


.pricing-receipt-line {

    min-height: 55px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-bottom:
        1px solid rgba(38,51,45,.09);

}


.pricing-receipt-line span {

    font-family: "Inter", sans-serif;

    font-size: .8rem;

    color: var(--pricing-muted);

}


.pricing-receipt-line strong {

    font-family: "Poppins", sans-serif;

    font-size: .85rem;

}


.pricing-receipt-separator {

    height: 20px;

}


.pricing-receipt-saving strong {

    color: var(--pricing-sage);

}


.pricing-receipt-total {

    padding-top: 28px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

}


.pricing-receipt-total span {

    font-family: "Inter", sans-serif;

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: 1px;

}


.pricing-receipt-total strong {

    font-family: "Poppins", sans-serif;

    font-size: 3rem;

    line-height: .8;

    color: var(--pricing-sage);

}


/* =========================================================
   SECTION 07 — FINAL
========================================================= */

.pricing-final {

    position: relative;

    min-height: 720px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    isolation: isolate;

    background: var(--pricing-charcoal);

    color: #FFFFFF;

    text-align: center;

}


.pricing-final-pattern {

    position: absolute;

    inset: 0;

    z-index: -3;

    opacity: .35;

    background-image:
        radial-gradient(
            rgba(191,216,203,.25) 1px,
            transparent 1px
        );

    background-size: 28px 28px;

}


.pricing-final-kinetic {

    position: absolute;

    left: 50%;
    bottom: -9%;

    transform:
        translateX(
            calc(-50% + var(--pricing-final-x, 0px))
        );

    white-space: nowrap;

    font-family: "Poppins", sans-serif;

    font-size:
        clamp(
            8rem,
            22vw,
            24rem
        );

    font-weight: 800;

    line-height: .7;

    letter-spacing: -14px;

    color:
        rgba(255,255,255,.035);

    pointer-events: none;

    transition:
        transform .3s ease-out;

}


.pricing-final-content {

    position: relative;

    z-index: 3;

    width: min(900px, 90%);

}


.pricing-final-content .pricing-section-kicker {

    color: #BFD8CB;

}


.pricing-final-content h2 {

    margin: 18px 0 25px;

    font-family: "Poppins", sans-serif;

    font-size:
        clamp(
            3.2rem,
            7vw,
            7rem
        );

    line-height: .92;

    letter-spacing: -5px;

}


.pricing-final-content h2 span {

    display: block;

    color: #BFD8CB;

}


.pricing-final-content p {

    max-width: 620px;

    margin: 0 auto;

    font-family: "Inter", sans-serif;

    font-size: 1rem;

    line-height: 1.8;

    color: rgba(255,255,255,.72);

}


.pricing-final-actions {

    margin-top: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

}


.pricing-final-primary,
.pricing-final-secondary {

    padding: 15px 22px;

    font-family: "Inter", sans-serif;

    font-size: .82rem;

    font-weight: 700;

    text-decoration: none;

    transition: .3s ease;

}


.pricing-final-primary {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    background: #BFD8CB;

    color: var(--pricing-charcoal);

}


.pricing-final-primary:hover {

    background: #FFFFFF;

    transform: translateY(-4px);

}


.pricing-final-primary i {

    transition: .3s ease;

}


.pricing-final-primary:hover i {

    transform: translateX(5px);

}


.pricing-final-secondary {

    border:
        1px solid rgba(255,255,255,.3);

    color: #FFFFFF;

}


.pricing-final-secondary:hover {

    border-color: #BFD8CB;

    color: #BFD8CB;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1023px) {

    .pricing-hero {

        min-height: 680px;

    }


    .pricing-hero-inner {

        grid-template-columns: 1fr;

        gap: 30px;

        padding: 80px 0;

    }


    .pricing-hero-content {

        text-align: center;

    }


    .pricing-hero-content p {

        margin: auto;

    }


    .pricing-hero-actions {

        display: flex;

        justify-content: center;

    }


    .pricing-hero-visual {

        min-height: 360px;

    }


    .pricing-hero-price-orbit {

        width: 300px;

    }


    .pricing-builder-layout {

        grid-template-columns: 1fr;

        gap: 60px;

    }


    .pricing-estimate {

        position: relative;

        top: auto;

    }


    .pricing-breakdown-inner {

        grid-template-columns: 1fr;

        gap: 60px;

    }


    .pricing-frequency-stage {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .pricing-frequency-copy {

        min-height: auto;

        padding: 35px;

    }

}


/* =========================================================
   MOBILE-L
========================================================= */

@media (max-width: 767px) {

    .pricing-hero {

        min-height: auto;

    }


    .pricing-hero-inner {

        width: 88%;

        padding: 90px 0 70px;

    }


    .pricing-hero-content h1 {

        font-size:
            clamp(
                3rem,
                13vw,
                5rem
            );

        letter-spacing: -3px;

    }


    .pricing-hero-content p {

        font-size: .94rem;

    }


    .pricing-hero-orb {

        width: 190px;
        height: 190px;

    }


    .pricing-hero-visual {

        min-height: 310px;

    }


    .pricing-hero-floating-one {

        left: 0;

    }


    .pricing-hero-floating-two {

        right: 0;

    }


    .pricing-hero-floating-three {

        left: 5%;

    }


    .pricing-builder,
    .pricing-size,
    .pricing-frequency,
    .pricing-included,
    .pricing-breakdown {

        padding: 85px 6%;

    }


    .pricing-builder-heading h2,
    .pricing-size-heading h2,
    .pricing-frequency-heading h2,
    .pricing-included-heading h2,
    .pricing-breakdown-heading h2 {

        letter-spacing: -2.5px;

    }


    .pricing-service-options {

        grid-template-columns: 1fr 1fr;

    }


    .pricing-service-option {

        border-right:
            1px solid rgba(255,255,255,.16);

        border-bottom: 0;

    }


    .pricing-service-option:nth-child(3),
    .pricing-service-option:nth-child(4) {

        border-top: 0;

    }


    .pricing-room-options {

        flex-wrap: wrap;

    }


    .pricing-room-option {

        flex: 1 1 58px;

        width: auto;

    }


    .pricing-frequency-options {

        grid-template-columns: 1fr;

    }


    .pricing-estimate {

        padding: 30px;

    }


    .pricing-estimate-price strong {

        font-size: 4.7rem;

    }


    .pricing-room-track {

        margin-top: 70px;

    }


    .pricing-room-line {

        display: none;

    }


    .pricing-room-points {

        grid-template-columns:
            repeat(5, 1fr);

        gap: 8px;

    }


    .pricing-room-point {

        width: 62px;
        height: 62px;

    }


    .pricing-room-point strong {

        font-size: .9rem;

    }


    .pricing-room-point span {

        font-size: .48rem;

    }


    .pricing-size-result {

        grid-template-columns: 1fr;

    }


    .pricing-size-result div {

        min-height: 95px;

        border-right: 0;

        border-bottom:
            1px solid rgba(38,51,45,.2);

    }


    .pricing-size-result div:last-child {

        border-bottom: 0;

    }


    .pricing-frequency-copy {

        padding: 30px;

    }


    .pricing-frequency-large-option {

        min-height: 82px;

        grid-template-columns:
            40px 1fr 25px;

    }


    .pricing-comparison {

    overflow-x: auto;

    position: relative;

    -webkit-overflow-scrolling: touch;

}


.pricing-comparison-head,
.pricing-comparison-row {

    min-width: 620px;

}


.pricing-included-heading::after {

    content: "Swipe to compare \2192";

    display: block;

    margin-top: 18px;

    font-family: "Inter", sans-serif;

    font-size: .75rem;

    font-weight: 600;

    letter-spacing: .3px;

    color: #8FB5A1;

    opacity: .85;

}


    .pricing-breakdown-inner {

        width: 94%;

    }


    .pricing-receipt {

        padding: 28px 22px;

    }


    .pricing-receipt-total strong {

        font-size: 2.3rem;

    }


    .pricing-final {

        min-height: 620px;

    }


    .pricing-final-actions {

        flex-direction: column;

    }


    .pricing-final-primary,
    .pricing-final-secondary {

        width: min(280px, 100%);

        justify-content: center;

        text-align: center;

    }


    .pricing-final-kinetic {

        font-size: 9rem;

        letter-spacing: -7px;

    }

}


/* =========================================================
   MOBILE-M / SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .pricing-hero-inner {

        width: 90%;

    }


    .pricing-hero-content h1 {

        font-size: 2.85rem;

    }


    .pricing-hero-price-orbit {

        width: 245px;

    }


    .pricing-hero-floating {

        transform: scale(.85);

    }


    .pricing-builder,
    .pricing-size,
    .pricing-frequency,
    .pricing-included,
    .pricing-breakdown {

        padding-left: 5%;

        padding-right: 5%;

    }


    .pricing-service-option {

        min-height: 62px;

        padding: 0 12px;

        font-size: .78rem;

    }


    .pricing-room-points {

        gap: 4px;

    }


    .pricing-room-point {

        width: 53px;
        height: 53px;

    }


    .pricing-room-point span {

        display: none;

    }


    .pricing-frequency-big-number {

        font-size: 4rem;

    }


    .pricing-frequency-copy h3 {

        font-size: 2.1rem;

    }


    .pricing-comparison-head,
.pricing-comparison-row {

    min-width: 560px;

}


    .pricing-receipt-total {

        align-items: center;

    }


    .pricing-receipt-total strong {

        font-size: 2rem;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pricing-hero-price-orbit {

        animation: none;

    }


    .pricing-reveal {

        opacity: 1;

        transform: none;

        transition: none;

    }


    .pricing-hero-orb,
    .pricing-hero-pattern,
    .pricing-hero-numbers,
    .pricing-final-kinetic {

        transition: none;

    }


    .pricing-check i {

        animation: none;

        opacity: 1;

        transform: none;

    }

}


/* =========================================================
   CLEANORA — HOW IT WORKS PAGE
   Unique namespace: howworks-
   ========================================================= */


/* =========================================================
   BASE
   ========================================================= */

.howworks-page {
    overflow: hidden;
    background: var(--cleanora-cream);
    color: var(--cleanora-charcoal);
}

.howworks-page *,
.howworks-page *::before,
.howworks-page *::after {
    box-sizing: border-box;
}

.howworks-page h1,
.howworks-page h2,
.howworks-page h3 {
    font-family: "Poppins", sans-serif;
}

.howworks-page p {
    font-family: "Inter", sans-serif;
}


/* =========================================================
   SHARED
   ========================================================= */

.howworks-reveal {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.22, 1, .36, 1);
}

.howworks-reveal.howworks-visible {
    opacity: 1;
    transform: translateY(0);
}

.howworks-section-kicker {
    display: inline-block;
    margin-bottom: 20px;

    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;

    color: var(--cleanora-sage);
}


/* =========================================================
   SECTION 1 — HERO
   ========================================================= */

.howworks-hero {
    position: relative;

    min-height: calc(100vh - 80px);

    display: flex;
    align-items: center;

    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 72% 45%,
            rgba(107, 142, 123, 0.13),
            transparent 30%
        ),
        var(--cleanora-cream);

    --howworks-pointer-x: 50%;
    --howworks-pointer-y: 50%;
}


/* =========================================================
   UNIQUE ORGANIC PATTERN
   NOT A GRID
   ========================================================= */

.howworks-hero-pattern {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
    z-index: -4;
}


/* Large irregular contour circles */

.howworks-pattern-ring {
    position: absolute;

    border: 1px solid rgba(107, 142, 123, 0.16);

    border-radius: 48% 52% 46% 54%;

    transform:
        translate(
            calc((var(--howworks-pointer-x) - 50%) * -0.04),
            calc((var(--howworks-pointer-y) - 50%) * -0.04)
        );

    transition: transform 0.35s ease-out;

    animation: howworksOrganicFloat 12s ease-in-out infinite;
}

.howworks-pattern-ring-one {
    width: 720px;
    height: 720px;

    right: -220px;
    top: -170px;

    animation-delay: 0s;
}

.howworks-pattern-ring-two {
    width: 560px;
    height: 560px;

    right: -110px;
    top: -80px;

    border-style: dashed;

    animation-delay: -3s;
}

.howworks-pattern-ring-three {
    width: 400px;
    height: 400px;

    right: 10px;
    top: 5px;

    border-color: rgba(107, 142, 123, 0.11);

    animation-delay: -6s;
}


/* Organic wave lines */

.howworks-pattern-wave {
    position: absolute;

    width: 900px;
    height: 240px;

    border-top: 1px solid rgba(107, 142, 123, 0.12);
    border-radius: 50%;

    transform: rotate(-18deg);

    animation: howworksWaveFloat 15s ease-in-out infinite;
}

.howworks-pattern-wave-one {
    right: -260px;
    bottom: 60px;
}

.howworks-pattern-wave-two {
    right: -320px;
    bottom: 130px;

    transform: rotate(-18deg) scale(0.85);

    animation-delay: -5s;
}


/* =========================================================
   HERO BUBBLES
   ========================================================= */

.howworks-bubbles {
    position: absolute;
    inset: 0;

    pointer-events: none;
    z-index: -1;
}


.howworks-bubble {
    position: absolute;

    display: block;

    border: 1px solid rgba(107, 142, 123, 0.28);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255,255,255,0.8),
            rgba(107,142,123,0.05) 55%,
            transparent 72%
        );

    box-shadow:
        inset 0 0 18px rgba(255,255,255,0.5);

    animation:
        howworksBubbleFloat
        var(--howworks-bubble-speed, 8s)
        ease-in-out infinite;
}


.howworks-bubble-one {
    width: 82px;
    height: 82px;

    top: 16%;
    left: 7%;

    --howworks-bubble-speed: 8s;
}


.howworks-bubble-two {
    width: 34px;
    height: 34px;

    top: 28%;
    left: 39%;

    --howworks-bubble-speed: 6s;

    animation-delay: -2s;
}


.howworks-bubble-three {
    width: 54px;
    height: 54px;

    right: 9%;
    top: 17%;

    --howworks-bubble-speed: 9s;

    animation-delay: -4s;
}


.howworks-bubble-four {
    width: 22px;
    height: 22px;

    right: 34%;
    bottom: 21%;

    --howworks-bubble-speed: 5s;

    animation-delay: -1s;
}


.howworks-bubble-five {
    width: 70px;
    height: 70px;

    right: 4%;
    bottom: 14%;

    --howworks-bubble-speed: 10s;

    animation-delay: -6s;
}


.howworks-bubble-six {
    width: 16px;
    height: 16px;

    left: 31%;
    bottom: 14%;

    --howworks-bubble-speed: 7s;

    animation-delay: -3s;
}


/* Sparkles */

.howworks-sparkle {
    position: absolute;

    color: var(--cleanora-sage);

    font-family: "Poppins", sans-serif;
    font-size: 22px;

    animation:
        howworksSparkle
        4s
        ease-in-out
        infinite;
}

.howworks-sparkle-one {
    top: 15%;
    left: 46%;
}

.howworks-sparkle-two {
    right: 17%;
    bottom: 25%;

    font-size: 15px;

    animation-delay: -2s;
}


/* Plus signs */

.howworks-cross {
    position: absolute;

    color: rgba(38, 51, 45, 0.35);

    font-family: "Inter", sans-serif;
    font-size: 20px;

    animation:
        howworksCrossFloat
        6s
        ease-in-out
        infinite;
}

.howworks-cross-one {
    left: 12%;
    bottom: 22%;
}

.howworks-cross-two {
    right: 41%;
    top: 14%;

    animation-delay: -3s;
}


/* =========================================================
   HERO LAYOUT
   ========================================================= */

.howworks-hero-layout {
    width: min(1380px, 88%);

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 50px;

    align-items: center;

    position: relative;
    z-index: 2;
}


.howworks-hero-content {
    max-width: 650px;
}


.howworks-hero-kicker {
    display: inline-flex;

    align-items: center;
    gap: 12px;

    margin-bottom: 25px;

    font-family: "Poppins", sans-serif;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.18em;

    color: var(--cleanora-sage);
}


.howworks-hero-kicker::before {
    content: "";

    width: 34px;
    height: 1px;

    background: var(--cleanora-sage);
}


.howworks-hero h1 {
    margin: 0;

    font-size: clamp(48px, 5.4vw, 82px);

    line-height: 0.98;

    letter-spacing: -0.055em;

    color: var(--cleanora-charcoal);
}


.howworks-hero h1 span {
    display: block;

    color: var(--cleanora-sage);
}


.howworks-hero-content > p {
    max-width: 580px;

    margin: 30px 0 35px;

    font-size: 17px;
    line-height: 1.8;

    color: #53625B;
}


/* =========================================================
   HERO BUTTONS
   ========================================================= */

.howworks-hero-actions {
    display: flex;

    align-items: center;

    gap: 28px;

    flex-wrap: wrap;
}


.howworks-primary-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 16px;

    min-height: 56px;

    padding: 0 27px;

    background: var(--cleanora-charcoal);
    color: var(--cleanora-white);

    text-decoration: none;

    font-family: "Poppins", sans-serif;

    font-size: 13px;
    font-weight: 700;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


.howworks-primary-btn i {
    transition: transform 0.3s ease;
}


.howworks-primary-btn:hover {
    transform: translateY(-4px);

    background: var(--cleanora-dark-sage);
}


.howworks-primary-btn:hover i {
    transform: translateX(5px);
}


.howworks-hero-scroll {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 12px 20px;

    border: 1px solid rgba(38, 51, 45, 0.18);
    border-radius: 50px;

    color: var(--cleanora-charcoal);
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 600;

    transition: .3s ease;
}

.howworks-hero-scroll:hover {
    background: var(--cleanora-sage);
    border-color: var(--cleanora-sage);
    color: var(--cleanora-white);

    transform: translateY(-3px);
}

.howworks-hero-scroll i {
    color: var(--cleanora-sage);
    animation: howworksScrollArrow 1.8s ease-in-out infinite;
}

.howworks-hero-scroll:hover i {
    color: var(--cleanora-white);
}

/* =========================================================
   HERO ORBIT
   ========================================================= */

.howworks-hero-visual {
    min-height: 620px;

    display: flex;

    align-items: center;
    justify-content: center;

    position: relative;
}


.howworks-orbit-system {
    width: min(590px, 90vw);
    aspect-ratio: 1;

    position: relative;

    transform:
        translate(
            calc((var(--howworks-pointer-x) - 50%) * 0.04),
            calc((var(--howworks-pointer-y) - 50%) * 0.04)
        );

    transition: transform 0.4s ease-out;
}


/* Orbit rings */

.howworks-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    border: 1px solid rgba(107, 142, 123, 0.28);

    border-radius: 50%;

    transform: translate(-50%, -50%);
}


.orbit-one {
    width: 100%;
    height: 100%;

    animation:
        howworksOrbitRotate
        28s
        linear
        infinite;
}


.orbit-two {
    width: 76%;
    height: 76%;

    border-style: dashed;

    animation:
        howworksOrbitRotateReverse
        22s
        linear
        infinite;
}


.orbit-three {
    width: 52%;
    height: 52%;

    border-color: rgba(107, 142, 123, 0.18);
}


/* Center */

.howworks-orbit-center {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 205px;
    height: 205px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: var(--cleanora-charcoal);

    color: var(--cleanora-white);

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    text-align: center;

    box-shadow:
        0 30px 70px rgba(38, 51, 45, 0.18);

    animation: howworksCenterPulse 5s ease-in-out infinite;
}


.howworks-orbit-center small {
    font-family: "Poppins", sans-serif;

    font-size: 10px;
    letter-spacing: 0.25em;

    color: var(--cleanora-sage);

    margin-bottom: 10px;
}


.howworks-orbit-center strong {
    font-family: "Poppins", sans-serif;

    font-size: 28px;

    line-height: 1;

    letter-spacing: -0.03em;
}


.howworks-orbit-center > span {
    position: absolute;

    bottom: 17px;

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,0.2);

    border-radius: 50%;

    color: var(--cleanora-sage);
}


/* Orbit nodes */

.howworks-orbit-node {
    position: absolute;

    width: 90px;
    height: 90px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    border-radius: 50%;

    background: var(--cleanora-cream);

    border: 1px solid rgba(107, 142, 123, 0.4);

    box-shadow: 0 15px 40px rgba(38,51,45,0.08);

    animation: howworksNodeFloat 6s ease-in-out infinite;
}


.howworks-orbit-node span {
    font-family: "Poppins", sans-serif;

    font-size: 13px;
    font-weight: 700;

    color: var(--cleanora-sage);
}


.howworks-orbit-node small {
    margin-top: 4px;

    font-family: "Poppins", sans-serif;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.12em;

    color: var(--cleanora-charcoal);
}


.howworks-node-one {
    top: 7%;
    left: 45%;
}


.howworks-node-two {
    right: 5%;
    top: 47%;

    animation-delay: -2s;
}


.howworks-node-three {
    left: 8%;
    bottom: 10%;

    animation-delay: -4s;
}


/* Hero bottom */

.howworks-hero-bottom {
    position: absolute;

    bottom: 28px;
    left: 6%;

    display: flex;

    align-items: center;

    gap: 15px;

    font-family: "Poppins", sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.16em;

    color: rgba(38,51,45,0.55);
}


.howworks-hero-bottom div {
    width: 80px;
    height: 1px;

    background: rgba(38,51,45,0.2);
}


/* =========================================================
   SECTION 2
   ========================================================= */

.howworks-booking {
    padding: 150px 6%;

    background: var(--cleanora-white);
}


.howworks-section-intro {
    width: min(900px, 100%);

    margin: 0 auto 90px;

    text-align: center;
}


.howworks-section-intro h2,
.howworks-match-heading h2,
.howworks-visit-heading h2,
.howworks-after-heading h2 {
    margin: 0;

    font-size: clamp(38px, 4vw, 62px);

    line-height: 1.05;

    letter-spacing: -0.045em;
}


.howworks-section-intro h2 span,
.howworks-match-heading h2 span,
.howworks-visit-heading h2 span,
.howworks-after-heading h2 span {
    color: var(--cleanora-sage);
}


.howworks-section-intro p {
    max-width: 620px;

    margin: 25px auto 0;

    font-size: 16px;
    line-height: 1.8;

    color: #617068;
}


.howworks-booking-rail {
    width: min(1100px, 100%);

    margin: auto;

    position: relative;
}


.howworks-booking-line {
    position: absolute;

    left: 42px;
    top: 40px;
    bottom: 40px;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--cleanora-sage),
            transparent
        );

    transform-origin: top;

    animation: howworksLineGrow 2s ease forwards;
}


.howworks-booking-item {
    min-height: 175px;

    display: grid;

    grid-template-columns: 85px 1fr 80px;

    align-items: center;

    gap: 35px;

    position: relative;

    padding: 25px 0;

    border-bottom: 1px solid rgba(38,51,45,0.1);
}


.howworks-booking-number {
    width: 85px;
    height: 85px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid var(--cleanora-sage);

    border-radius: 50%;

    background: var(--cleanora-white);

    font-family: "Poppins", sans-serif;

    font-size: 15px;
    font-weight: 700;

    color: var(--cleanora-sage);

    position: relative;
    z-index: 2;
}


.howworks-booking-content > span {
    font-family: "Poppins", sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.2em;

    color: var(--cleanora-sage);
}


.howworks-booking-content h3 {
    margin: 8px 0;

    font-size: clamp(20px, 2vw, 28px);

    color: var(--cleanora-charcoal);
}


.howworks-booking-content p {
    margin: 0;

    max-width: 580px;

    font-size: 14px;
    line-height: 1.7;

    color: #68766F;
}


.howworks-booking-item > i {
    font-size: 25px;

    color: var(--cleanora-sage);

    transition:
        transform 0.3s ease;
}


.howworks-booking-item:hover > i {
    transform: rotate(-10deg) scale(1.15);
}


/* =========================================================
   SECTION 3 — MATCH
   ========================================================= */

.howworks-match {
    min-height: 900px;

    padding: 150px 6%;

    background: var(--cleanora-charcoal);

    color: var(--cleanora-white);

    position: relative;

    overflow: hidden;
}


.howworks-match::before {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(107,142,123,0.2);

    border-radius: 50%;
}


.howworks-match-heading {
    position: relative;

    z-index: 2;

    width: min(800px, 100%);

    margin: 0 auto;

    text-align: center;
}


.howworks-match-heading h2 {
    color: var(--cleanora-white);
}


.howworks-match-heading h2 span {
    color: var(--cleanora-sage);
}


.howworks-match-stage {
    width: min(1100px, 100%);

    height: 600px;

    margin: 70px auto 0;

    position: relative;
}


.howworks-match-center {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 230px;
    height: 230px;

    transform: translate(-50%, -50%);

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    text-align: center;

    border: 1px solid rgba(107,142,123,0.5);

    border-radius: 50%;

    background: rgba(38,51,45,0.8);

    box-shadow:
        0 0 0 25px rgba(107,142,123,0.04),
        0 0 0 55px rgba(107,142,123,0.025);
}


.howworks-match-center span {
    font-size: 9px;

    letter-spacing: 0.18em;

    color: rgba(255,255,255,0.55);
}


.howworks-match-center strong {
    margin-top: 8px;

    font-family: "Poppins", sans-serif;

    font-size: 25px;

    color: var(--cleanora-white);
}


.howworks-match-center i {
    margin-top: 16px;

    color: var(--cleanora-sage);

    animation: howworksArrowBounce 1.7s ease-in-out infinite;
}


/* Branches */

.howworks-match-path {
    position: absolute;

    display: flex;

    align-items: center;

    gap: 20px;
}


.howworks-match-dot {
    width: 15px;
    height: 15px;

    border-radius: 50%;

    background: var(--cleanora-sage);

    box-shadow:
        0 0 0 8px rgba(107,142,123,0.12);
}


.howworks-match-path::before {
    content: "";

    position: absolute;

    height: 1px;

    background: rgba(107,142,123,0.5);

    width: 190px;
}


.howworks-match-path div {
    min-width: 190px;
}


.howworks-match-path small {
    display: block;

    margin-bottom: 6px;

    font-family: "Poppins", sans-serif;

    font-size: 8px;

    letter-spacing: 0.15em;

    color: var(--cleanora-sage);
}


.howworks-match-path strong {
    display: block;

    font-family: "Poppins", sans-serif;

    font-size: 24px;

    color: var(--cleanora-white);
}


.howworks-match-path p {
    margin: 5px 0 0;

    font-size: 12px;

    line-height: 1.5;

    color: rgba(255,255,255,0.58);
}


.howworks-match-standard {
    left: 0;
    top: 18%;
}


.howworks-match-standard::before {
    right: -190px;
}


.howworks-match-deep {
    right: 0;
    top: 18%;
    flex-direction: row-reverse;

    text-align: right;
}


.howworks-match-deep::before {
    left: -190px;
}


.howworks-match-kitchen {
    left: 0;
    bottom: 17%;
}


.howworks-match-kitchen::before {
    right: -190px;
}


.howworks-match-move {
    right: 0;
    bottom: 17%;

    flex-direction: row-reverse;

    text-align: right;
}


.howworks-match-move::before {
    left: -190px;
}


/* =========================================================
   SECTION 4 — PREPARATION
   ========================================================= */

.howworks-prep {
    padding: 160px 6%;

    background: var(--cleanora-cream);
}


.howworks-prep-layout {
    width: min(1250px, 100%);

    margin: auto;

    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 100px;

    align-items: start;
}


.howworks-prep-title {
    position: sticky;

    top: 130px;
}


.howworks-prep-title > span {
    font-family: "Poppins", sans-serif;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.18em;

    color: var(--cleanora-sage);
}


.howworks-prep-title h2 {
    margin: 20px 0;

    font-size: clamp(40px, 4.3vw, 65px);

    line-height: 1.02;

    letter-spacing: -0.05em;
}


.howworks-prep-title h2 strong {
    display: block;

    color: var(--cleanora-sage);
}


.howworks-prep-title p {
    max-width: 470px;

    font-size: 15px;

    line-height: 1.8;

    color: #617068;
}


.howworks-prep-list {
    position: relative;
}


.howworks-prep-line {
    position: absolute;

    left: 24px;
    top: 30px;
    bottom: 30px;

    width: 1px;

    background: rgba(107,142,123,0.35);
}


.howworks-prep-item {
    position: relative;

    display: grid;

    grid-template-columns: 50px 1fr;

    gap: 28px;

    align-items: center;

    min-height: 125px;

    border-bottom: 1px solid rgba(38,51,45,0.1);
}


.howworks-prep-check {
    width: 49px;
    height: 49px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border: 1px solid var(--cleanora-sage);

    background: var(--cleanora-cream);

    color: var(--cleanora-sage);

    position: relative;

    z-index: 2;
}


.howworks-prep-check i {
    transform: scale(0);

    transition: transform 0.5s ease 0.15s;
}


.howworks-visible .howworks-prep-check i {
    transform: scale(1);
}


.howworks-prep-item > div:last-child span {
    font-family: "Poppins", sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.15em;

    color: var(--cleanora-sage);
}


.howworks-prep-item h3 {
    margin: 7px 0 0;

    font-size: 20px;

    color: var(--cleanora-charcoal);
}


/* =========================================================
   SECTION 5 — VISIT
   ========================================================= */

.howworks-visit {
    padding: 150px 6%;

    background: var(--cleanora-white);
}


.howworks-visit-heading {
    width: min(850px, 100%);

    margin: 0 auto 75px;

    text-align: center;
}


.howworks-visit-heading p {
    max-width: 620px;

    margin: 25px auto 0;

    line-height: 1.8;

    color: #65736B;
}


.howworks-status-interface {
    width: min(1100px, 100%);

    margin: auto;

    padding: 45px;

    border: 1px solid rgba(38,51,45,0.12);

    background: var(--cleanora-cream);

    position: relative;
}


.howworks-status-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-bottom: 30px;

    border-bottom: 1px solid rgba(38,51,45,0.1);
}


.howworks-status-top div span {
    display: block;

    font-family: "Poppins", sans-serif;

    font-size: 9px;

    letter-spacing: 0.17em;

    color: var(--cleanora-sage);
}


.howworks-status-top div strong {
    display: block;

    margin-top: 8px;

    font-family: "Poppins", sans-serif;

    font-size: 19px;

    color: var(--cleanora-charcoal);
}


.howworks-status-live {
    display: flex;

    align-items: center;

    gap: 8px;

    font-family: "Poppins", sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.15em;

    color: var(--cleanora-sage);
}


.howworks-status-live i {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--cleanora-sage);

    animation: howworksLivePulse 1.6s ease-in-out infinite;
}


.howworks-status-track {
    min-height: 240px;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    align-items: center;

    position: relative;
}


.howworks-status-progress {
    position: absolute;

    left: 8%;
    right: 8%;
    top: 50%;

    height: 2px;

    background: rgba(107,142,123,0.2);

    transform: translateY(-50%);
}


.howworks-status-progress::after {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 30%;
    height: 100%;

    background: var(--cleanora-sage);

    animation: howworksProgressMove 5s ease-in-out infinite;
}


.howworks-status-step {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;
}


.howworks-status-step > span {
    width: 68px;
    height: 68px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border: 1px solid rgba(107,142,123,0.35);

    background: var(--cleanora-cream);

    color: rgba(38,51,45,0.35);

    font-size: 18px;
}


.howworks-status-step.active > span {
    border-color: var(--cleanora-sage);

    color: var(--cleanora-sage);

    box-shadow:
        0 0 0 10px rgba(107,142,123,0.08);

    animation: howworksStatusPulse 2s ease-in-out infinite;
}


.howworks-status-step small {
    margin-top: 14px;

    font-family: "Poppins", sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.12em;

    color: var(--cleanora-charcoal);

    text-align: center;
}


.howworks-status-details {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    padding-top: 30px;

    border-top: 1px solid rgba(38,51,45,0.1);
}


.howworks-status-details div {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    padding-bottom: 8px;
}


.howworks-status-details span {
    font-size: 12px;

    color: #6C7872;
}


.howworks-status-details strong {
    font-family: "Poppins", sans-serif;

    font-size: 12px;

    color: var(--cleanora-charcoal);
}


/* =========================================================
   SECTION 6 — AFTER
   ========================================================= */

.howworks-after {
    padding: 160px 6%;

    background: var(--cleanora-cream);
}


.howworks-after-heading {
    width: min(850px, 100%);

    margin: 0 auto 90px;

    text-align: center;
}


.howworks-after-layout {
    width: min(1200px, 100%);

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 0.9fr;

    gap: 100px;

    align-items: center;
}


.howworks-after-loop {
    width: min(570px, 100%);

    aspect-ratio: 1;

    margin: auto;

    position: relative;
}


.howworks-after-ring {
    position: absolute;

    inset: 8%;

    border: 1px solid rgba(107,142,123,0.3);

    border-radius: 50%;

    animation:
        howworksAfterRotate
        22s
        linear
        infinite;
}


.howworks-after-ring::before,
.howworks-after-ring::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    border: 1px dashed rgba(107,142,123,0.25);
}


.howworks-after-ring::before {
    inset: 12%;
}


.howworks-after-ring::after {
    inset: 25%;
}


.howworks-after-center {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 190px;
    height: 190px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    text-align: center;

    background: var(--cleanora-charcoal);

    color: var(--cleanora-white);

    box-shadow:
        0 25px 60px rgba(38,51,45,0.16);
}


.howworks-after-center span {
    font-size: 9px;

    letter-spacing: 0.2em;

    color: var(--cleanora-sage);
}


.howworks-after-center strong {
    margin-top: 8px;

    font-family: "Poppins", sans-serif;

    font-size: 27px;

    line-height: 0.95;
}


/* After nodes */

.howworks-after-node {
    position: absolute;

    width: 85px;
    height: 85px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    border-radius: 50%;

    border: 1px solid var(--cleanora-sage);

    background: var(--cleanora-cream);

    animation: howworksAfterNode 6s ease-in-out infinite;
}


.howworks-after-node span {
    font-family: "Poppins", sans-serif;

    font-size: 11px;

    font-weight: 700;

    color: var(--cleanora-sage);
}


.howworks-after-node small {
    margin-top: 4px;

    font-family: "Poppins", sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.1em;

    color: var(--cleanora-charcoal);
}


.after-node-one {
    top: 2%;
    left: 43%;
}


.after-node-two {
    top: 43%;
    right: 1%;

    animation-delay: -1.5s;
}


.after-node-three {
    bottom: 2%;
    left: 43%;

    animation-delay: -3s;
}


.after-node-four {
    top: 43%;
    left: 1%;

    animation-delay: -4.5s;
}


.howworks-after-copy {
    display: flex;

    flex-direction: column;
}


.howworks-after-point {
    display: grid;

    grid-template-columns: 50px 1fr;

    gap: 20px;

    padding: 25px 0;

    border-bottom: 1px solid rgba(38,51,45,0.12);
}


.howworks-after-point > span {
    font-family: "Poppins", sans-serif;

    font-size: 12px;

    font-weight: 700;

    color: var(--cleanora-sage);
}


.howworks-after-point h3 {
    margin: 0 0 7px;

    font-size: 20px;

    color: var(--cleanora-charcoal);
}


.howworks-after-point p {
    margin: 0;

    font-size: 13px;

    line-height: 1.7;

    color: #69766F;
}


/* =========================================================
   SECTION 7 — CTA
   ========================================================= */

.howworks-cta {
    min-height: 680px;

    padding: 130px 6%;

    background: var(--cleanora-charcoal);

    color: var(--cleanora-white);

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;
}


.howworks-cta-line {
    position: absolute;

    left: -10%;
    top: 52%;

    width: 120%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(107,142,123,0.7),
            transparent
        );

    transform: rotate(-8deg);

    animation: howworksCtaSweep 6s ease-in-out infinite;
}


.howworks-cta-decor span {
    position: absolute;

    display: block;

    border: 1px solid rgba(107,142,123,0.2);

    border-radius: 50%;

    animation: howworksCtaCircle 15s linear infinite;
}


.howworks-cta-decor span:nth-child(1) {
    width: 500px;
    height: 500px;

    left: -260px;
    top: -180px;
}


.howworks-cta-decor span:nth-child(2) {
    width: 700px;
    height: 700px;

    right: -360px;
    bottom: -300px;

    animation-direction: reverse;
}


.howworks-cta-decor span:nth-child(3) {
    width: 300px;
    height: 300px;

    right: 8%;
    top: 8%;
}


.howworks-cta-content {
    position: relative;

    z-index: 3;

    width: min(900px, 100%);
}


.howworks-cta-content .howworks-section-kicker {
    color: var(--cleanora-sage);
}


.howworks-cta h2 {
    margin: 0;

    font-size: clamp(45px, 6vw, 82px);

    line-height: 0.98;

    letter-spacing: -0.055em;
}


.howworks-cta h2 strong {
    display: block;

    color: var(--cleanora-sage);
}


.howworks-cta p {
    max-width: 570px;

    margin: 30px auto;

    font-size: 16px;

    line-height: 1.8;

    color: rgba(255,255,255,0.62);
}


.howworks-cta-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 16px;

    min-height: 58px;

    padding: 0 30px;

    background: var(--cleanora-sage);

    color: var(--cleanora-white);

    text-decoration: none;

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    font-weight: 700;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


.howworks-cta-button:hover {
    transform: translateY(-5px);

    background: var(--cleanora-dark-sage);
}


.howworks-cta-button i {
    transition: transform 0.3s ease;
}


.howworks-cta-button:hover i {
    transform: translateX(6px);
}


.howworks-cta-route {
    position: absolute;

    bottom: 35px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 20px;

    font-family: "Poppins", sans-serif;

    font-size: 8px;

    letter-spacing: 0.18em;

    color: rgba(255,255,255,0.45);
}


.howworks-cta-route > div {
    display: flex;

    gap: 7px;
}


.howworks-cta-route i {
    display: block;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--cleanora-sage);

    animation: howworksRouteDot 2s ease-in-out infinite;
}


.howworks-cta-route i:nth-child(2) {
    animation-delay: .2s;
}

.howworks-cta-route i:nth-child(3) {
    animation-delay: .4s;
}

.howworks-cta-route i:nth-child(4) {
    animation-delay: .6s;
}


/* =========================================================
   HERO / GENERAL KEYFRAMES
   ========================================================= */

@keyframes howworksOrganicFloat {

    0%, 100% {
        margin-top: 0;
        margin-left: 0;
    }

    50% {
        margin-top: 18px;
        margin-left: -12px;
    }
}


@keyframes howworksWaveFloat {

    0%, 100% {
        margin-left: 0;
    }

    50% {
        margin-left: -35px;
    }
}


@keyframes howworksBubbleFloat {

    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    25% {
        transform: translate3d(12px, -20px, 0) scale(1.04);
    }

    50% {
        transform: translate3d(-10px, -35px, 0) scale(.96);
    }

    75% {
        transform: translate3d(15px, -15px, 0) scale(1.02);
    }
}


@keyframes howworksSparkle {

    0%, 100% {
        transform: scale(.8) rotate(0);
        opacity: .45;
    }

    50% {
        transform: scale(1.2) rotate(25deg);
        opacity: 1;
    }
}


@keyframes howworksCrossFloat {

    0%, 100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-18px) rotate(45deg);
    }
}


@keyframes howworksOrbitRotate {

    from {
        transform: translate(-50%, -50%) rotate(0);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}


@keyframes howworksOrbitRotateReverse {

    from {
        transform: translate(-50%, -50%) rotate(360deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(0);
    }
}


@keyframes howworksCenterPulse {

    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.025);
    }
}


@keyframes howworksNodeFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}


@keyframes howworksScrollArrow {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}


@keyframes howworksLineGrow {

    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}


@keyframes howworksArrowBounce {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}


@keyframes howworksLivePulse {

    0%, 100% {
        box-shadow: 0 0 0 0 rgba(107,142,123,0.3);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(107,142,123,0);
    }
}


@keyframes howworksProgressMove {

    0% {
        width: 10%;
    }

    50% {
        width: 62%;
    }

    100% {
        width: 30%;
    }
}


@keyframes howworksStatusPulse {

    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(107,142,123,0.12);
    }

    50% {
        box-shadow:
            0 0 0 12px rgba(107,142,123,0.03);
    }
}


@keyframes howworksAfterRotate {

    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes howworksAfterNode {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}


@keyframes howworksCtaSweep {

    0%, 100% {
        transform: translateX(-4%) rotate(-8deg);
    }

    50% {
        transform: translateX(4%) rotate(-8deg);
    }
}


@keyframes howworksCtaCircle {

    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes howworksRouteDot {

    0%, 100% {
        opacity: .25;
        transform: scale(.7);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (min-width: 1024px) and (max-width: 1199px) {

    .howworks-hero-layout {
        width: 91%;
        gap: 25px;
    }

    .howworks-hero h1 {
        font-size: 55px;
    }

    .howworks-hero-visual {
        min-height: 560px;
    }

    .howworks-orbit-system {
        width: 500px;
    }

    .howworks-orbit-center {
        width: 175px;
        height: 175px;
    }

    .howworks-orbit-node {
        width: 78px;
        height: 78px;
    }

    .howworks-prep-layout {
        gap: 65px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .howworks-hero {
        min-height: auto;

        padding: 90px 0 100px;
    }

    .howworks-hero-layout {
        width: 88%;

        grid-template-columns: 1fr;

        text-align: center;
    }

    .howworks-hero-content {
        max-width: 720px;

        margin: auto;
    }

    .howworks-hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .howworks-hero-actions {
        justify-content: center;
    }

    .howworks-hero-visual {
        min-height: 500px;
    }

    .howworks-orbit-system {
        width: min(500px, 75vw);
    }

    .howworks-hero-bottom {
        display: none;
    }

    .howworks-booking {
        padding: 110px 7%;
    }

    .howworks-match {
        padding: 110px 7%;
        min-height: 850px;
    }

    .howworks-match-stage {
        transform: scale(.9);
        width: 110%;
        margin-left: -5%;
    }

    .howworks-prep {
        padding: 110px 7%;
    }

    .howworks-prep-layout {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .howworks-prep-title {
        position: static;
        text-align: center;
    }

    .howworks-prep-title p {
        margin-left: auto;
        margin-right: auto;
    }

    .howworks-visit,
    .howworks-after {
        padding: 110px 7%;
    }

    .howworks-after-layout {
        gap: 60px;
    }

    .howworks-status-interface {
        padding: 30px;
    }
}


/* =========================================================
   MOBILE L
   ========================================================= */

@media (min-width: 425px) and (max-width: 767px) {

    .howworks-hero {
        min-height: auto;
        padding: 75px 0 85px;
    }

    .howworks-hero-layout {
        width: 88%;

        grid-template-columns: 1fr;

        text-align: center;

        gap: 15px;
    }

    .howworks-hero-kicker {
        justify-content: center;
    }

    .howworks-hero h1 {
        font-size: clamp(42px, 11vw, 58px);
    }

    .howworks-hero-content > p {
        font-size: 15px;

        margin-left: auto;
        margin-right: auto;
    }

    .howworks-hero-actions {
        justify-content: center;
        gap: 18px;
    }

    .howworks-hero-visual {
        min-height: 390px;
    }

    .howworks-orbit-system {
        width: min(390px, 86vw);
    }

    .howworks-orbit-center {
        width: 140px;
        height: 140px;
    }

    .howworks-orbit-center strong {
        font-size: 21px;
    }

    .howworks-orbit-node {
        width: 64px;
        height: 64px;
    }

    .howworks-orbit-node span {
        font-size: 10px;
    }

    .howworks-orbit-node small {
        font-size: 6px;
    }

    .howworks-bubble-one {
        width: 55px;
        height: 55px;
    }

    .howworks-bubble-five {
        width: 45px;
        height: 45px;
    }

    .howworks-hero-bottom {
        display: none;
    }

    .howworks-booking,
    .howworks-prep,
    .howworks-visit,
    .howworks-after {
        padding: 90px 6%;
    }

    .howworks-section-intro {
        margin-bottom: 60px;
    }

    .howworks-section-intro h2,
    .howworks-match-heading h2,
    .howworks-visit-heading h2,
    .howworks-after-heading h2 {
        font-size: 39px;
    }

    .howworks-booking-item {
        grid-template-columns: 62px 1fr;

        gap: 20px;

        min-height: 150px;
    }

    .howworks-booking-number {
        width: 62px;
        height: 62px;
    }

    .howworks-booking-item > i {
        display: none;
    }

    .howworks-booking-line {
        left: 30px;
    }

    .howworks-match {
        min-height: auto;

        padding: 100px 6%;
    }

    .howworks-match-stage {
        height: auto;

        margin-top: 55px;

        display: flex;

        flex-direction: column;

        gap: 18px;

        transform: none;
    }

    .howworks-match-center {
        position: relative;

        left: auto;
        top: auto;

        transform: none;

        margin: 0 auto 30px;

        width: 190px;
        height: 190px;
    }

    .howworks-match-path {
        position: relative;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        flex-direction: row !important;

        text-align: left !important;

        padding: 20px;

        border: 1px solid rgba(107,142,123,0.2);

        background: rgba(255,255,255,0.025);
    }

    .howworks-match-path::before {
        display: none;
    }

    .howworks-match-path div {
        min-width: 0;
    }

    .howworks-prep-layout {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .howworks-prep-title {
        position: static;

        text-align: center;
    }

    .howworks-prep-title p {
        margin-left: auto;
        margin-right: auto;
    }

    .howworks-status-interface {
        padding: 25px 18px;
    }

    .howworks-status-track {
        min-height: 210px;
    }

    .howworks-status-step > span {
        width: 52px;
        height: 52px;

        font-size: 14px;
    }

    .howworks-status-step small {
        font-size: 7px;
    }

    .howworks-status-details {
        grid-template-columns: 1fr;
    }

    .howworks-after-layout {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .howworks-after-loop {
        width: min(390px, 90vw);
    }

    .howworks-after-center {
        width: 145px;
        height: 145px;
    }

    .howworks-after-center strong {
        font-size: 21px;
    }

    .howworks-after-node {
        width: 62px;
        height: 62px;
    }

    .howworks-after-node small {
        font-size: 6px;
    }

    .howworks-cta {
        min-height: 600px;

        padding: 100px 6%;
    }

    .howworks-cta h2 {
        font-size: clamp(42px, 11vw, 58px);
    }

    .howworks-cta-route {
        bottom: 25px;
    }
}


/* =========================================================
   MOBILE S / M
   ========================================================= */

@media (max-width: 424px) {

    .howworks-hero {
        min-height: auto;

        padding: 65px 0 70px;
    }

    .howworks-hero-layout {
        width: 90%;

        grid-template-columns: 1fr;

        gap: 0;

        text-align: center;
    }

    .howworks-hero-kicker {
        justify-content: center;

        font-size: 9px;
    }

    .howworks-hero h1 {
        font-size: clamp(37px, 12vw, 48px);

        letter-spacing: -0.06em;
    }

    .howworks-hero-content > p {
        font-size: 14px;

        line-height: 1.7;

        margin-top: 24px;
    }

    .howworks-hero-actions {
        flex-direction: column;

        gap: 17px;

        width: 100%;
    }

    .howworks-primary-btn {
        width: 100%;

        min-height: 54px;
    }

    .howworks-hero-visual {
        min-height: 310px;

        margin-top: 15px;
    }

    .howworks-orbit-system {
        width: min(300px, 84vw);
    }

    .howworks-orbit-center {
        width: 112px;
        height: 112px;
    }

    .howworks-orbit-center strong {
        font-size: 17px;
    }

    .howworks-orbit-center small {
        font-size: 7px;
    }

    .howworks-orbit-center > span {
        width: 25px;
        height: 25px;

        bottom: 9px;

        font-size: 9px;
    }

    .howworks-orbit-node {
        width: 52px;
        height: 52px;
    }

    .howworks-orbit-node span {
        font-size: 8px;
    }

    .howworks-orbit-node small {
        font-size: 5px;
    }

    .howworks-node-one {
        top: 8%;
    }

    .howworks-node-two {
        right: 1%;
    }

    .howworks-node-three {
        left: 1%;
    }

    .howworks-bubble-one {
        width: 42px;
        height: 42px;
    }

    .howworks-bubble-three {
        width: 35px;
        height: 35px;
    }

    .howworks-bubble-five {
        width: 38px;
        height: 38px;
    }

    .howworks-sparkle-one {
        left: 10%;
        top: 16%;
    }

    .howworks-sparkle-two {
        right: 10%;
    }

    .howworks-hero-bottom {
        display: none;
    }

    .howworks-booking,
    .howworks-prep,
    .howworks-visit,
    .howworks-after {
        padding: 75px 5%;
    }

    .howworks-section-kicker {
        font-size: 9px;
    }

    .howworks-section-intro h2,
    .howworks-match-heading h2,
    .howworks-visit-heading h2,
    .howworks-after-heading h2 {
        font-size: clamp(34px, 10vw, 40px);
    }

    .howworks-section-intro p,
    .howworks-visit-heading p {
        font-size: 14px;
    }

    .howworks-booking-line {
        left: 26px;
    }

    .howworks-booking-item {
        grid-template-columns: 52px 1fr;

        gap: 15px;

        min-height: 145px;
    }

    .howworks-booking-number {
        width: 52px;
        height: 52px;

        font-size: 11px;
    }

    .howworks-booking-content > span {
        font-size: 8px;
    }

    .howworks-booking-content h3 {
        font-size: 18px;
    }

    .howworks-booking-content p {
        font-size: 12px;
    }

    .howworks-match {
        padding: 80px 5%;
    }

    .howworks-match-stage {
        height: auto;

        margin-top: 55px;

        display: flex;

        flex-direction: column;

        gap: 18px;

        transform: none;
    }

    .howworks-match-path {
        position: relative;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        flex-direction: row !important;

        text-align: left !important;

        border: 1px solid rgba(107,142,123,0.2);

        background: rgba(255,255,255,0.025);
    }

    .howworks-match-path::before {
        display: none;
    }

    .howworks-match-path div {
        min-width: 0;
    }

    .howworks-match-center {
        position: relative;

        left: auto;
        top: auto;

        transform: none;

        margin: 0 auto 30px;

        width: 165px;
        height: 165px;
    }


    .howworks-match-center strong {
        font-size: 20px;
    }

    .howworks-match-path {
        padding: 17px;

        gap: 14px;
    }

    .howworks-match-path strong {
        font-size: 19px;
    }

    .howworks-match-path p {
        font-size: 11px;
    }

    .howworks-prep-title h2 {
        font-size: clamp(36px, 10vw, 45px);
    }

    .howworks-prep-title p {
        font-size: 13px;
    }

    .howworks-prep-item {
        grid-template-columns: 42px 1fr;

        gap: 17px;

        min-height: 105px;
    }

    .howworks-prep-line {
        left: 20px;
    }

    .howworks-prep-check {
        width: 42px;
        height: 42px;
    }

    .howworks-prep-item h3 {
        font-size: 16px;
    }

    .howworks-status-top {
        align-items: flex-start;

        flex-direction: column;
    }

    .howworks-status-track {
        min-height: 270px;

        grid-template-columns: 1fr 1fr;

        gap: 20px;
    }

    .howworks-status-progress {
        display: none;
    }

    .howworks-status-step > span {
        width: 48px;
        height: 48px;
    }

    .howworks-status-details div {
        flex-direction: column;

        gap: 5px;
    }

    .howworks-after-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .howworks-after-loop {
        width: min(310px, 88vw);
    }

    .howworks-after-center {
        width: 120px;
        height: 120px;
    }

    .howworks-after-center strong {
        font-size: 18px;
    }

    .howworks-after-node {
        width: 52px;
        height: 52px;
    }

    .howworks-after-point {
        grid-template-columns: 35px 1fr;

        gap: 14px;
    }

    .howworks-after-point h3 {
        font-size: 17px;
    }

    .howworks-after-point p {
        font-size: 12px;
    }

    .howworks-cta {
        min-height: 550px;

        padding: 85px 5%;
    }

    .howworks-cta h2 {
        font-size: clamp(38px, 11vw, 50px);
    }

    .howworks-cta p {
        font-size: 14px;
    }

    .howworks-cta-button {
        width: 100%;
    }

    .howworks-cta-route {
        font-size: 6px;

        gap: 10px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .howworks-page *,
    .howworks-page *::before,
    .howworks-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .howworks-reveal {
        opacity: 1;
        transform: none;
    }
}


/* =========================================================
   CLEANORA COVERAGE PAGE
   ========================================================= */

.coverage-page {
    overflow: hidden;
    background: var(--cleanora-cream);
    color: var(--cleanora-charcoal);
}

.coverage-page *,
.coverage-page *::before,
.coverage-page *::after {
    box-sizing: border-box;
}

.coverage-page img {
    max-width: 100%;
    display: block;
}

.coverage-page a {
    text-decoration: none;
}

.coverage-page button,
.coverage-page input {
    font: inherit;
}


/* =========================================================
   SHARED COVERAGE ELEMENTS
   ========================================================= */

.coverage-reactive {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    --coverage-mouse-x: 50%;
    --coverage-mouse-y: 50%;
}

.coverage-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    font-family: "Poppins", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;

    color: var(--cleanora-sage);
}

.coverage-eyebrow i {
    font-size: 0.8rem;
}

.coverage-section-heading {
    width: min(900px, 92%);
    margin: 0 auto;
    text-align: center;
}

.coverage-section-heading h2 {
    margin: 18px 0 18px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(2.1rem, 4.5vw, 4.5rem);
    line-height: 1.05;
    font-weight: 700;

    color: var(--cleanora-charcoal);
}

.coverage-section-heading h2 span {
    color: var(--cleanora-sage);
}

.coverage-section-heading p {
    width: min(650px, 100%);
    margin: 0 auto;

    font-size: 1rem;
    line-height: 1.8;

    color: var(--cleanora-charcoal);
    opacity: 0.78;
}


/* =========================================================
   SECTION 01 — HERO
   ========================================================= */

.coverage-hero {
    min-height: 760px;
    padding: 140px 5% 100px;

    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(107, 142, 123, 0.25),
            transparent 25%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(107, 142, 123, 0.16),
            transparent 28%
        ),
        repeating-radial-gradient(
            circle at 50% 50%,
            transparent 0 35px,
            rgba(255, 255, 255, 0.055) 36px 38px
        ),
        var(--cleanora-charcoal);

    color: var(--cleanora-white);
}

.coverage-hero::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: -1;

    background:
        radial-gradient(
            circle at var(--coverage-mouse-x) var(--coverage-mouse-y),
            rgba(107, 142, 123, 0.3),
            transparent 18%
        );

    pointer-events: none;
}

.coverage-hero-wave {
    position: absolute;

    width: 110%;
    height: 260px;

    left: -5%;
    bottom: -160px;

    border-radius: 50% 50% 0 0;

    border-top: 2px solid rgba(228, 236, 231, 0.14);

    transform: rotate(-3deg);

    animation: coverageWaveFloat 8s ease-in-out infinite;
}

.coverage-hero-wave-two {
    bottom: -185px;
    transform: rotate(3deg);

    border-top-color: rgba(107, 142, 123, 0.3);

    animation-delay: -3s;
}

@keyframes coverageWaveFloat {
    0%,
    100% {
        transform: translateX(-2%) rotate(-3deg);
    }

    50% {
        transform: translateX(2%) rotate(-1deg);
    }
}


/* HERO LASERS */

.coverage-laser {
    position: absolute;

    width: 60%;
    height: 2px;

    left: var(--coverage-laser-x, 50%);
    top: var(--coverage-laser-y, 50%);

    background: linear-gradient(
        90deg,
        transparent,
        rgba(228, 236, 231, 0.25),
        #6B8E7B,
        rgba(228, 236, 231, 0.8),
        transparent
    );

    box-shadow:
        0 0 8px rgba(107, 142, 123, 0.8),
        0 0 25px rgba(107, 142, 123, 0.5);

    pointer-events: none;
    z-index: 0;

    transform-origin: center;
}

.coverage-laser-one {
    transform: translate(-50%, -50%) rotate(-18deg);
    animation: coverageLaserSweepOne 7s ease-in-out infinite;
}

.coverage-laser-two {
    width: 45%;

    transform: translate(-50%, -50%) rotate(22deg);

    opacity: 0.55;

    animation: coverageLaserSweepTwo 9s ease-in-out infinite;
}

@keyframes coverageLaserSweepOne {
    0%,
    100% {
        left: 10%;
        top: 22%;
        opacity: 0.25;
    }

    50% {
        left: 80%;
        top: 72%;
        opacity: 1;
    }
}

@keyframes coverageLaserSweepTwo {
    0%,
    100% {
        left: 85%;
        top: 25%;
    }

    50% {
        left: 15%;
        top: 80%;
    }
}


/* HERO CONTENT */

.coverage-hero-container {
    position: relative;
    z-index: 2;

    width: min(1400px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr);
    align-items: center;
    gap: clamp(40px, 7vw, 110px);
}

.coverage-hero-content {
    min-width: 0;
}

.coverage-hero-content h1 {
    max-width: 760px;
    margin: 20px 0;

    font-family: "Poppins", sans-serif;
    font-size: clamp(3rem, 6vw, 6.5rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    font-weight: 700;

    color: var(--cleanora-white);
}

.coverage-hero-content h1 span {
    display: block;
    color: var(--cleanora-sage);
}

.coverage-hero-content p {
    max-width: 650px;
    margin: 0 0 32px;

    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    line-height: 1.85;

    color: var(--cleanora-white);
    opacity: 0.8;
}

.coverage-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.coverage-primary-btn,
.coverage-secondary-btn {
    min-height: 52px;
    padding: 0 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    border-radius: 50px;

    font-family: "Poppins", sans-serif;
    font-size: 0.88rem;
    font-weight: 600;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.coverage-primary-btn {
    background: var(--cleanora-sage);
    color: var(--cleanora-white);
}

.coverage-primary-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(107, 142, 123, 0.3);
}

.coverage-secondary-btn {
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: var(--cleanora-white);
}

.coverage-secondary-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-4px);
}


/* HERO RADAR */

.coverage-hero-visual {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.coverage-radius-system {
    position: relative;

    width: min(480px, 80vw);
    aspect-ratio: 1;

    display: flex;
    align-items: center;
    justify-content: center;
}

.coverage-radius-ring {
    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(228, 236, 231, 0.2);

    box-shadow:
        0 0 30px rgba(107, 142, 123, 0.08);

    animation: coverageRingRotate 15s linear infinite;
}

.coverage-ring-outer {
    width: 100%;
    height: 100%;
}

.coverage-ring-middle {
    width: 72%;
    height: 72%;

    border-color: rgba(107, 142, 123, 0.45);

    animation-duration: 11s;
    animation-direction: reverse;
}

.coverage-ring-inner {
    width: 45%;
    height: 45%;

    border-color: rgba(228, 236, 231, 0.35);

    animation-duration: 8s;
}

@keyframes coverageRingRotate {
    to {
        transform: rotate(360deg);
    }
}

.coverage-radius-core {
    position: relative;
    z-index: 3;

    width: 145px;
    height: 145px;

    border-radius: 50%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: var(--cleanora-sage);

    color: var(--cleanora-white);

    box-shadow:
        0 0 30px rgba(107, 142, 123, 0.35),
        0 0 80px rgba(107, 142, 123, 0.15);

    animation: coverageCorePulse 3s ease-in-out infinite;
}

.coverage-radius-core i {
    font-size: 1.5rem;
    margin-bottom: 7px;
}

.coverage-radius-core strong {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
}

.coverage-radius-core small {
    margin-top: 3px;
    font-size: 0.65rem;
    opacity: 0.8;
}

@keyframes coverageCorePulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

.coverage-marker {
    position: absolute;
    z-index: 4;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(38, 51, 45, 0.85);
    border: 1px solid rgba(228, 236, 231, 0.3);

    color: var(--cleanora-light-sage);

    box-shadow:
        0 0 20px rgba(107, 142, 123, 0.3);

    animation: coverageMarkerPulse 3s ease-in-out infinite;
}

.coverage-marker-one {
    top: 12%;
    left: 50%;
}

.coverage-marker-two {
    right: 12%;
    top: 48%;

    animation-delay: -1s;
}

.coverage-marker-three {
    bottom: 14%;
    left: 26%;

    animation-delay: -2s;
}

.coverage-marker-four {
    left: 9%;
    top: 35%;

    animation-delay: -1.5s;
}

@keyframes coverageMarkerPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.18);
        opacity: 1;
    }
}


/* =========================================================
   SECTION 02 — REACH
   ========================================================= */

.coverage-reach {
    padding: 120px 5%;

    background: var(--cleanora-cream);
}

.coverage-section-wave {
    position: absolute;

    width: 100%;
    height: 220px;

    left: 0;
    top: -145px;

    border-radius: 50%;

    border-top: 2px solid rgba(107, 142, 123, 0.15);

    transform: rotate(-2deg);
}

.coverage-reach-layout {
    width: min(1200px, 100%);
    margin: 80px auto 0;

    display: grid;
    grid-template-columns: minmax(400px, 0.9fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(50px, 8vw, 120px);
}

.coverage-reach-visual {
    position: relative;

    width: min(480px, 90vw);
    aspect-ratio: 1;

    margin: auto;
}

.coverage-zone-circle {
    position: absolute;

    border-radius: 50%;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    padding-top: 24px;

    font-family: "Poppins", sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;

    transition:
        transform 0.5s ease,
        box-shadow 0.5s ease;
}

.coverage-zone-core {
    inset: 25%;

    background: rgba(107, 142, 123, 0.16);
    border: 1px solid rgba(107, 142, 123, 0.5);

    color: var(--cleanora-dark-sage);
}

.coverage-zone-extended {
    inset: 12%;

    border: 1px solid rgba(107, 142, 123, 0.28);

    color: var(--cleanora-sage);

    animation: coverageZoneFloat 6s ease-in-out infinite;
}

.coverage-zone-check {
    inset: 0;

    border: 1px dashed rgba(107, 142, 123, 0.28);

    color: var(--cleanora-sage);

    animation: coverageZoneFloat 8s ease-in-out infinite reverse;
}

@keyframes coverageZoneFloat {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.025);
    }
}

.coverage-zone-center {
    position: absolute;
    inset: 0;

    margin: auto;

    width: 115px;
    height: 115px;

    border-radius: 50%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: var(--cleanora-charcoal);

    color: var(--cleanora-white);

    box-shadow:
        0 15px 45px rgba(38, 51, 45, 0.18);
}

.coverage-zone-center i {
    color: var(--cleanora-sage);
    margin-bottom: 8px;
}

.coverage-zone-center strong {
    font-family: "Poppins", sans-serif;
    font-size: 0.8rem;
}

.coverage-reach-laser {
    position: absolute;

    width: 140%;
    height: 2px;

    left: -20%;
    top: 50%;

    background: linear-gradient(
        90deg,
        transparent,
        var(--cleanora-sage),
        transparent
    );

    box-shadow:
        0 0 15px rgba(107, 142, 123, 0.5);

    transform: rotate(-35deg);

    animation: coverageReachLaser 5s ease-in-out infinite;
}

@keyframes coverageReachLaser {
    0%,
    100% {
        opacity: 0.2;
        transform: rotate(-35deg) translateX(-25%);
    }

    50% {
        opacity: 1;
        transform: rotate(-35deg) translateX(25%);
    }
}

.coverage-reach-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.coverage-reach-item {
    display: grid;
    grid-template-columns: 65px minmax(0, 1fr);
    gap: 20px;

    padding: 28px 0;

    border-bottom: 1px solid rgba(38, 51, 45, 0.12);
}

.coverage-reach-item:first-child {
    border-top: 1px solid rgba(38, 51, 45, 0.12);
}

.coverage-number {
    font-family: "Poppins", sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cleanora-sage);
}

.coverage-reach-item h3 {
    margin: 0 0 8px;

    font-family: "Poppins", sans-serif;
    font-size: 1.3rem;

    color: var(--cleanora-charcoal);
}

.coverage-reach-item p {
    margin: 0;

    font-size: 0.92rem;
    line-height: 1.7;

    color: var(--cleanora-charcoal);
    opacity: 0.72;
}


/* =========================================================
   SECTION 03 — COVERAGE SIGNAL
   DARK EDITORIAL SECTION
========================================================= */

.coverage-signal {
    position: relative;
    width: 100%;
    min-height: 720px;
    padding: 120px 7%;
    overflow: hidden;
    isolation: isolate;

    /* SAME DARK BACKGROUND */
    background: #0d1511;

    color: #ffffff;
}


/* =========================================================
   SUBTLE BACKGROUND PATTERN
========================================================= */

.coverage-signal-honeycomb {
    position: absolute;
    inset: 0;
    z-index: -1;

    pointer-events: none;

    background-image:
        linear-gradient(
            30deg,
            rgba(107, 142, 123, 0.10) 12%,
            transparent 12.5%,
            transparent 87%,
            rgba(107, 142, 123, 0.10) 87.5%,
            rgba(107, 142, 123, 0.10)
        ),
        linear-gradient(
            150deg,
            rgba(107, 142, 123, 0.10) 12%,
            transparent 12.5%,
            transparent 87%,
            rgba(107, 142, 123, 0.10) 87.5%,
            rgba(107, 142, 123, 0.10)
        ),
        linear-gradient(
            30deg,
            rgba(107, 142, 123, 0.10) 12%,
            transparent 12.5%,
            transparent 87%,
            rgba(107, 142, 123, 0.10) 87.5%,
            rgba(107, 142, 123, 0.10)
        ),
        linear-gradient(
            150deg,
            rgba(107, 142, 123, 0.10) 12%,
            transparent 12.5%,
            transparent 87%,
            rgba(107, 142, 123, 0.10) 87.5%,
            rgba(107, 142, 123, 0.10)
        );

    background-position:
        0 0,
        0 0,
        30px 52px,
        30px 52px;

    background-size:
        60px 104px,
        60px 104px,
        60px 104px,
        60px 104px;

    opacity: 0.45;
}


/* =========================================================
   SECTION CONTENT LAYOUT
========================================================= */

.coverage-signal-layout {
    position: relative;

    width: min(1250px, 100%);
    min-height: 480px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(480px, 1.15fr);

    align-items: center;

    gap: 80px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.coverage-signal-intro {
    position: relative;
    z-index: 2;

    max-width: 520px;
}

.coverage-signal-intro .coverage-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 22px;

    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #8fb6a0;
}

.coverage-signal-intro .coverage-eyebrow::before {
    content: "";

    width: 34px;
    height: 1px;

    background: #6b8e7b;
}


.coverage-signal-intro h2 {
    margin: 0 0 24px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(42px, 5vw, 70px);
    line-height: 1.02;
    letter-spacing: -2.5px;
    font-weight: 800;

    color: #ffffff;
}

.coverage-signal-intro h2 span {
    display: block;

    color: #8fb6a0;
}


.coverage-signal-intro > p {
    max-width: 510px;

    margin: 0 0 30px;

    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.8;

    /* FIX: DESCRIPTION ALWAYS VISIBLE */
    color: rgba(255, 255, 255, 0.72);
}


/* =========================================================
   NOTE
========================================================= */

.coverage-signal-note {
    display: flex;
    align-items: center;
    gap: 13px;

    max-width: 430px;

    padding-top: 20px;

    border-top: 1px solid rgba(143, 182, 160, 0.25);

    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.6;

    color: rgba(255, 255, 255, 0.78);
}

.coverage-signal-note i {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(107, 142, 123, 0.18);

    color: #9bc2aa;

    font-size: 13px;
}


/* =========================================================
   RIGHT ROUTE
========================================================= */

.coverage-signal-route {
    position: relative;

    width: 100%;
    min-height: 500px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    gap: 18px;

    padding: 10px 0;
}


/* =========================================================
   CENTRAL VERTICAL VISUAL LINE
========================================================= */

.coverage-signal-route-line {
    position: absolute;

    top: 50px;
    bottom: 50px;

    /* THE LINE IS AT THE CENTER OF THE NUMBER COLUMN */
    left: 27px;

    width: 2px;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(107, 142, 123, 0.35) 8%,
            #6b8e7b 25%,
            #6b8e7b 75%,
            rgba(107, 142, 123, 0.35) 92%,
            transparent 100%
        );

    opacity: 0.9;
}


/* animated point travelling along line */

.coverage-signal-route-line::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 0;

    width: 8px;
    height: 8px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #a8cdb6;

    box-shadow:
        0 0 0 6px rgba(107, 142, 123, 0.10),
        0 0 18px rgba(143, 182, 160, 0.45);

    animation:
        coverageSignalRoutePulse 2.5s ease-in-out infinite;
}


/* =========================================================
   STEP CARDS
========================================================= */

.coverage-signal-step {
    position: relative;
    z-index: 2;

    width: 100%;

    min-height: 100px;

    display: grid;

    grid-template-columns:
        55px
        58px
        minmax(0, 1fr);

    align-items: center;

    gap: 18px;

    padding: 18px 24px;

    background:
        linear-gradient(
            105deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.035)
        );

    border: 1px solid rgba(143, 182, 160, 0.17);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.20);

    backdrop-filter: blur(10px);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}


/* =========================================================
   IMPORTANT ALIGNMENT FIX
   ALL FOUR CARDS USE THE SAME POSITION
========================================================= */

.coverage-signal-step-one,
.coverage-signal-step-two,
.coverage-signal-step-three,
.coverage-signal-step-four {
    transform: none;
}


/* same hover movement for all */

.coverage-signal-step-one:hover,
.coverage-signal-step-two:hover,
.coverage-signal-step-three:hover,
.coverage-signal-step-four:hover {
    transform: translateX(8px);
}


/* =========================================================
   STEP NUMBER
========================================================= */

.coverage-signal-step-number {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #0d1511;

    border:
        1px solid
        rgba(143, 182, 160, 0.55);

    color: #a8cdb6;

    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 800;

    box-shadow:
        0 0 0 5px rgba(107, 142, 123, 0.06);
}


/* =========================================================
   STEP ICON
========================================================= */

.coverage-signal-step-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: rgba(107, 142, 123, 0.17);

    color: #a8cdb6;

    font-size: 16px;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        color 0.35s ease;
}

.coverage-signal-step:hover .coverage-signal-step-icon {
    transform: scale(1.08) rotate(-5deg);

    background: #6b8e7b;

    color: #ffffff;
}


/* =========================================================
   STEP TEXT
========================================================= */

.coverage-signal-step-copy {
    min-width: 0;
}


.coverage-signal-step-copy strong {
    display: block;

    margin-bottom: 5px;

    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 700;

    /* TITLE */
    color: #ffffff;
}


/* =========================================================
   FIX #1 — DESCRIPTION TEXT
   ALWAYS LIGHT ON DARK BACKGROUND
========================================================= */

.coverage-signal-step-copy p {
    display: block;

    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.6;

    color: rgba(255, 255, 255, 0.70);
}


/* =========================================================
   CARD HOVER
========================================================= */

.coverage-signal-step:hover {
    background:
        linear-gradient(
            105deg,
            rgba(107, 142, 123, 0.16),
            rgba(255, 255, 255, 0.045)
        );

    border-color:
        rgba(143, 182, 160, 0.40);

    box-shadow:
        0 24px 55px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   ROUTE ANIMATION
========================================================= */

@keyframes coverageSignalRoutePulse {

    0%,
    100% {
        opacity: 0.35;

        transform:
            translateX(-50%)
            scale(0.8);
    }

    50% {
        opacity: 1;

        transform:
            translateX(-50%)
            scale(1.25);
    }
}


/* =========================================================
   TABLET — 768px to 1023px
========================================================= */

@media (max-width: 1023px) {

    .coverage-signal {
        min-height: auto;

        padding: 95px 6%;
    }

    .coverage-signal-layout {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .coverage-signal-intro {
        max-width: 720px;

        margin: 0 auto;

        text-align: center;
    }

    .coverage-signal-intro .coverage-eyebrow {
        justify-content: center;
    }

    .coverage-signal-intro > p {
        margin-left: auto;
        margin-right: auto;
    }

    .coverage-signal-note {
        margin-left: auto;
        margin-right: auto;

        text-align: left;
    }

    .coverage-signal-route {
        width: min(760px, 100%);

        margin: 0 auto;
    }

    /* SAME X POSITION FOR ALL CARDS */
    .coverage-signal-step-one,
    .coverage-signal-step-two,
    .coverage-signal-step-three,
    .coverage-signal-step-four {
        transform: none;
    }

    .coverage-signal-step-one:hover,
    .coverage-signal-step-two:hover,
    .coverage-signal-step-three:hover,
    .coverage-signal-step-four:hover {
        transform: translateX(8px);
    }
}


/* =========================================================
   MOBILE-L — 576px to 767px
========================================================= */

@media (max-width: 767px) {

    .coverage-signal {
        padding: 75px 5%;
    }

    .coverage-signal-layout {
        gap: 50px;
    }

    .coverage-signal-intro h2 {
        font-size: clamp(38px, 9vw, 55px);

        letter-spacing: -1.5px;
    }

    .coverage-signal-intro > p {
        font-size: 14px;
    }

    .coverage-signal-route {
        min-height: auto;

        gap: 15px;

        padding: 5px 0;
    }

    .coverage-signal-route-line {
        top: 38px;
        bottom: 38px;

        left: 23px;
    }

    .coverage-signal-step {
        grid-template-columns:
            46px
            45px
            minmax(0, 1fr);

        gap: 12px;

        min-height: 88px;

        padding: 14px 14px;
    }

    .coverage-signal-step-number {
        width: 40px;
        height: 40px;

        font-size: 10px;
    }

    .coverage-signal-step-icon {
        width: 40px;
        height: 40px;

        font-size: 14px;

        border-radius: 11px;
    }

    .coverage-signal-step-copy strong {
        font-size: 14px;
    }

    .coverage-signal-step-copy p {
        font-size: 12px;
    }

    .coverage-signal-step-one,
    .coverage-signal-step-two,
    .coverage-signal-step-three,
    .coverage-signal-step-four {
        transform: none;
    }

    .coverage-signal-step-one:hover,
    .coverage-signal-step-two:hover,
    .coverage-signal-step-three:hover,
    .coverage-signal-step-four:hover {
        transform: translateX(6px);
    }
}


/* =========================================================
   MOBILE-M — 401px to 575px
========================================================= */

@media (max-width: 575px) {

    .coverage-signal {
        padding: 65px 5%;
    }

    .coverage-signal-layout {
        gap: 42px;
    }

    .coverage-signal-intro h2 {
        font-size: 36px;
    }

    .coverage-signal-note {
        align-items: flex-start;

        font-size: 12px;
    }

    .coverage-signal-route {
        gap: 13px;
    }

    .coverage-signal-route-line {
        left: 21px;
    }

    .coverage-signal-step {
        grid-template-columns:
            40px
            40px
            minmax(0, 1fr);

        gap: 10px;

        min-height: 84px;

        padding: 12px 10px;
    }

    .coverage-signal-step-number {
        width: 36px;
        height: 36px;

        font-size: 10px;
    }

    .coverage-signal-step-icon {
        width: 36px;
        height: 36px;

        font-size: 13px;
    }

    .coverage-signal-step-copy strong {
        font-size: 13px;
    }

    .coverage-signal-step-copy p {
        font-size: 11px;

        line-height: 1.5;
    }

    .coverage-signal-step-one,
    .coverage-signal-step-two,
    .coverage-signal-step-three,
    .coverage-signal-step-four {
        transform: none;
    }

    .coverage-signal-step-one:hover,
    .coverage-signal-step-two:hover,
    .coverage-signal-step-three:hover,
    .coverage-signal-step-four:hover {
        transform: translateX(5px);
    }
}


/* =========================================================
   MOBILE-S — 400px AND BELOW
========================================================= */

@media (max-width: 400px) {

    .coverage-signal {
        padding: 55px 4%;
    }

    .coverage-signal-intro h2 {
        font-size: 33px;
    }

    .coverage-signal-intro > p {
        font-size: 13px;
    }

    .coverage-signal-step {
        grid-template-columns:
            36px
            36px
            minmax(0, 1fr);

        gap: 8px;

        padding: 11px 8px;
    }

    .coverage-signal-step-number {
        width: 32px;
        height: 32px;

        font-size: 9px;
    }

    .coverage-signal-step-icon {
        width: 32px;
        height: 32px;

        font-size: 12px;
    }

    .coverage-signal-step-copy strong {
        font-size: 12px;
    }

    .coverage-signal-step-copy p {
        font-size: 10px;
    }

    .coverage-signal-route-line {
        left: 19px;
    }
}


/* =========================================================
   RTL
========================================================= */

html[dir="rtl"] .coverage-signal-route-line {
    left: auto;
    right: 27px;
}

html[dir="rtl"] .coverage-signal-step-one:hover,
html[dir="rtl"] .coverage-signal-step-two:hover,
html[dir="rtl"] .coverage-signal-step-three:hover,
html[dir="rtl"] .coverage-signal-step-four:hover {
    transform: translateX(-8px);
}


@media (max-width: 767px) {

    html[dir="rtl"] .coverage-signal-route-line {
        right: 23px;
    }

    html[dir="rtl"] .coverage-signal-step-one:hover,
    html[dir="rtl"] .coverage-signal-step-two:hover,
    html[dir="rtl"] .coverage-signal-step-three:hover,
    html[dir="rtl"] .coverage-signal-step-four:hover {
        transform: translateX(-6px);
    }
}


@media (max-width: 575px) {

    html[dir="rtl"] .coverage-signal-route-line {
        right: 21px;
    }
}


@media (max-width: 400px) {

    html[dir="rtl"] .coverage-signal-route-line {
        right: 19px;
    }

}
/* =========================================================
   SECTION 04 — FINDER
   ========================================================= */

.coverage-finder {
    padding: 120px 5%;

    background: var(--cleanora-light-sage);
}

.coverage-finder-wave {
    position: absolute;

    width: 120%;
    height: 240px;

    left: -10%;
    top: -150px;

    border-radius: 50%;

    border-top: 2px solid rgba(107, 142, 123, 0.2);

    transform: rotate(2deg);
}

.coverage-finder-layout {
    width: min(1250px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(350px, 1.15fr);
    align-items: center;
    gap: clamp(50px, 8vw, 110px);
}

.coverage-finder-content {
    min-width: 0;
}

.coverage-finder-content h2 {
    margin: 18px 0;

    font-family: "Poppins", sans-serif;
    font-size: clamp(2.4rem, 5vw, 5rem);
    line-height: 1.05;

    color: var(--cleanora-charcoal);
}

.coverage-finder-content h2 span {
    color: var(--cleanora-sage);
}

.coverage-finder-content > p {
    max-width: 560px;

    line-height: 1.8;

    color: var(--cleanora-charcoal);
    opacity: 0.72;
}

.coverage-finder-form {
    margin-top: 35px;
}

.coverage-finder-form label {
    display: block;

    margin-bottom: 9px;

    font-family: "Poppins", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;

    color: var(--cleanora-charcoal);
}

.coverage-input-wrap {
    width: 100%;

    min-height: 64px;

    display: flex;
    align-items: center;

    padding: 7px 7px 7px 18px;

    border: 1px solid rgba(38, 51, 45, 0.16);
    border-radius: 50px;

    background: var(--cleanora-white);

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.coverage-input-wrap:focus-within {
    border-color: var(--cleanora-sage);

    box-shadow:
        0 0 0 4px rgba(107, 142, 123, 0.12),
        0 10px 35px rgba(38, 51, 45, 0.08);
}

.coverage-input-wrap > i {
    color: var(--cleanora-sage);
}

.coverage-input-wrap input {
    flex: 1;
    min-width: 0;

    padding: 0 13px;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--cleanora-charcoal);
}

.coverage-input-wrap input::placeholder {
    color: var(--cleanora-charcoal);
    opacity: 0.5;
}

.coverage-input-wrap button {
    flex: 0 0 auto;

    min-height: 50px;

    padding: 0 20px;

    border: 0;
    border-radius: 50px;

    background: var(--cleanora-charcoal);

    color: var(--cleanora-white);

    cursor: pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.coverage-input-wrap button:hover {
    transform: translateX(3px);

    box-shadow:
        0 0 20px rgba(107, 142, 123, 0.25);
}

.coverage-finder-result {
    min-height: 24px;

    margin: 14px 0 0;

    font-size: 0.82rem;
    line-height: 1.5;

    color: var(--cleanora-dark-sage);
}


/* ONLY PAGE IMAGE */

.coverage-finder-image {
    position: relative;

    min-width: 0;

    aspect-ratio: 1.18 / 1;

    overflow: hidden;

    border-radius: 32px;

    box-shadow:
        0 25px 70px rgba(38, 51, 45, 0.15);
}

.coverage-finder-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.7s ease;
}

.coverage-finder-image:hover img {
    transform: scale(1.05);
}

.coverage-image-laser {
    position: absolute;
    z-index: 3;

    width: 150%;
    height: 2px;

    left: -25%;
    top: 50%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(228, 236, 231, 0.9),
        var(--cleanora-sage),
        transparent
    );

    box-shadow:
        0 0 12px var(--cleanora-sage),
        0 0 35px rgba(107, 142, 123, 0.7);

    transform: rotate(-18deg);

    animation: coverageImageLaser 5s ease-in-out infinite;
}

@keyframes coverageImageLaser {
    0% {
        transform: translateX(-35%) rotate(-18deg);
        opacity: 0;
    }

    30%,
    70% {
        opacity: 1;
    }

    100% {
        transform: translateX(35%) rotate(-18deg);
        opacity: 0;
    }
}

.coverage-image-caption {
    position: absolute;
    z-index: 4;

    left: 25px;
    right: 25px;
    bottom: 25px;

    padding: 20px;

    border-radius: 18px;

    background: rgba(38, 51, 45, 0.82);

    backdrop-filter: blur(12px);

    color: var(--cleanora-white);
}

.coverage-image-caption span {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 6px;

    font-size: 0.65rem;
    letter-spacing: 0.12em;
}

.coverage-image-caption span i {
    color: var(--cleanora-light-sage);
}

.coverage-image-caption strong {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
}


/* =========================================================
   SECTION 05 — SERVICE COVERAGE
   ========================================================= */

.coverage-service {
    padding: 120px 5%;

    background: var(--cleanora-cream);
}

.coverage-service-pattern {
    position: absolute;
    width: 600px;
    height: 600px;

    right: -220px;
    top: -220px;

    border-radius: 50%;

    border: 1px solid rgba(107, 142, 123, 0.14);

    box-shadow:
        0 0 0 60px rgba(107, 142, 123, 0.025),
        0 0 0 120px rgba(107, 142, 123, 0.02);

    animation: coveragePatternCircle 14s linear infinite;
}

@keyframes coveragePatternCircle {
    to {
        transform: rotate(360deg);
    }
}

.coverage-service-interface {
    position: relative;

    width: min(1200px, 100%);
    margin: 70px auto 0;
}

.coverage-service-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 40px;
}

.coverage-service-tab {
    padding: 12px 22px;

    border: 1px solid rgba(38, 51, 45, 0.14);
    border-radius: 50px;

    background: transparent;

    color: var(--cleanora-charcoal);

    cursor: pointer;

    font-family: "Poppins", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.coverage-service-tab:hover {
    transform: translateY(-3px);
}

.coverage-service-tab-active {
    background: var(--cleanora-charcoal);
    color: var(--cleanora-white);
}

.coverage-service-display {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr) minmax(220px, 0.7fr);
    align-items: center;
    gap: 50px;

    padding: clamp(30px, 5vw, 60px);

    border-top: 1px solid rgba(38, 51, 45, 0.15);
    border-bottom: 1px solid rgba(38, 51, 45, 0.15);
}

.coverage-service-label {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    font-weight: 700;

    color: var(--cleanora-sage);
}

.coverage-service-info h3 {
    margin: 14px 0 12px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.7rem);

    color: var(--cleanora-charcoal);
}

.coverage-service-info p {
    margin: 0;

    line-height: 1.7;

    color: var(--cleanora-charcoal);
    opacity: 0.72;
}


/* RADAR */

.coverage-service-radar {
    position: relative;

    width: min(280px, 70vw);
    aspect-ratio: 1;

    margin: auto;

    border-radius: 50%;
}

.coverage-radar-ring {
    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(107, 142, 123, 0.3);

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);
}

.radar-one {
    width: 100%;
    height: 100%;
}

.radar-two {
    width: 72%;
    height: 72%;
}

.radar-three {
    width: 42%;
    height: 42%;
}

.coverage-radar-scan {
    position: absolute;

    width: 50%;
    height: 2px;

    left: 50%;
    top: 50%;

    transform-origin: left center;

    background: linear-gradient(
        90deg,
        var(--cleanora-sage),
        transparent
    );

    box-shadow: 0 0 15px rgba(107, 142, 123, 0.7);

    animation: coverageRadarScan 3s linear infinite;
}

@keyframes coverageRadarScan {
    to {
        transform: rotate(360deg);
    }
}

.coverage-radar-center {
    position: absolute;

    width: 60px;
    height: 60px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--cleanora-sage);

    color: var(--cleanora-white);

    box-shadow: 0 0 25px rgba(107, 142, 123, 0.35);
}

.coverage-radar-label {
    position: absolute;

    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: var(--cleanora-sage);
}

.radar-label-core {
    left: 50%;
    top: 25%;
    transform: translateX(-50%);
}

.radar-label-extended {
    right: 2%;
    top: 50%;
}

.radar-label-check {
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
}


/* STATUS */

.coverage-service-status {
    display: flex;
    flex-direction: column;
}

.coverage-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding: 18px 0;

    border-bottom: 1px solid rgba(38, 51, 45, 0.12);
}

.coverage-status-row span {
    font-size: 0.78rem;
    color: var(--cleanora-charcoal);
}

.coverage-status-row strong {
    font-family: "Poppins", sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.1em;

    color: var(--cleanora-sage);
}


/* =========================================================
   SECTION 06 — BOUNDARY
   ========================================================= */

.coverage-boundary {
    padding: 120px 5%;

    background: var(--cleanora-light-sage);
}

.coverage-boundary-layout {
    width: min(1200px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(350px, 0.9fr) minmax(0, 1fr);
    align-items: center;

    gap: clamp(50px, 8vw, 100px);
}

.coverage-boundary-visual {
    display: flex;
    justify-content: center;
}

.coverage-boundary-circle {
    position: relative;

    width: min(460px, 85vw);
    aspect-ratio: 1;

    border-radius: 50%;

    border: 2px dashed rgba(107, 142, 123, 0.35);

    animation: coverageBoundaryRotate 20s linear infinite;
}

@keyframes coverageBoundaryRotate {
    to {
        transform: rotate(360deg);
    }
}

.coverage-boundary-gap {
    position: absolute;

    width: 120px;
    height: 25px;

    right: -12px;
    top: 46%;

    background: var(--cleanora-light-sage);

    transform: rotate(-8deg);
}

.coverage-boundary-home {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 110px;
    height: 110px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--cleanora-charcoal);

    color: var(--cleanora-sage);

    box-shadow:
        0 20px 50px rgba(38, 51, 45, 0.18);
}

.coverage-boundary-inside,
.coverage-boundary-outside {
    position: absolute;

    font-family: "Poppins", sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.coverage-boundary-inside {
    left: 50%;
    top: 16%;

    transform: translateX(-50%);

    color: var(--cleanora-sage);
}

.coverage-boundary-outside {
    right: -40px;
    top: 50%;

    color: var(--cleanora-dark-sage);

    transform: rotate(90deg);
}

.coverage-boundary-content h2 {
    margin: 18px 0;

    font-family: "Poppins", sans-serif;
    font-size: clamp(2.3rem, 5vw, 5rem);
    line-height: 1.05;

    color: var(--cleanora-charcoal);
}

.coverage-boundary-content h2 span {
    color: var(--cleanora-sage);
}

.coverage-boundary-content > p {
    max-width: 600px;

    line-height: 1.8;

    color: var(--cleanora-charcoal);
    opacity: 0.75;
}

.coverage-boundary-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    margin: 35px 0;
}

.coverage-boundary-steps div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.coverage-boundary-steps span {
    font-family: "Poppins", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--cleanora-sage);
}

.coverage-boundary-steps strong {
    font-size: 0.8rem;
    line-height: 1.5;

    color: var(--cleanora-charcoal);
}

.coverage-outline-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    min-height: 50px;
    padding: 0 23px;

    border: 1px solid var(--cleanora-charcoal);
    border-radius: 50px;

    color: var(--cleanora-charcoal);

    font-family: "Poppins", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.coverage-outline-btn:hover {
    background: var(--cleanora-charcoal);
    color: var(--cleanora-white);

    transform: translateY(-3px);
}

.coverage-boundary-laser {
    position: absolute;

    width: 150%;
    height: 2px;

    left: -25%;
    top: 45%;

    background: linear-gradient(
        90deg,
        transparent,
        var(--cleanora-sage),
        rgba(255, 255, 255, 0.8),
        transparent
    );

    box-shadow:
        0 0 15px rgba(107, 142, 123, 0.7);

    transform: rotate(-14deg);

    animation: coverageBoundaryLaser 6s ease-in-out infinite;
}

@keyframes coverageBoundaryLaser {
    0%,
    100% {
        transform: translateX(-30%) rotate(-14deg);
        opacity: 0.15;
    }

    50% {
        transform: translateX(30%) rotate(-14deg);
        opacity: 1;
    }
}


/* =========================================================
   SECTION 07 — FINAL CTA
   ========================================================= */

.coverage-final {
    min-height: 650px;
    padding: 110px 5%;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    background: var(--cleanora-charcoal);

    color: var(--cleanora-white);
}

.coverage-final-pattern {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(107, 142, 123, 0.18),
            transparent 22%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(107, 142, 123, 0.14),
            transparent 24%
        ),
        repeating-radial-gradient(
            ellipse at center,
            transparent 0 40px,
            rgba(228, 236, 231, 0.035) 41px 43px
        );

    animation: coverageFinalPattern 18s linear infinite;
}

@keyframes coverageFinalPattern {
    from {
        transform: scale(1) rotate(0deg);
    }

    to {
        transform: scale(1.1) rotate(-4deg);
    }
}

.coverage-final-content {
    position: relative;
    z-index: 3;

    width: min(850px, 100%);
}

.coverage-final-content .coverage-eyebrow {
    color: var(--cleanora-light-sage);
}

.coverage-final-content h2 {
    margin: 20px 0;

    font-family: "Poppins", sans-serif;
    font-size: clamp(2.7rem, 6vw, 6rem);
    line-height: 1;

    color: var(--cleanora-white);
}

.coverage-final-content h2 span {
    color: var(--cleanora-sage);
}

.coverage-final-content p {
    width: min(650px, 100%);
    margin: 0 auto 35px;

    line-height: 1.8;

    color: var(--cleanora-white);
    opacity: 0.78;
}

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

.coverage-final-primary,
.coverage-final-secondary {
    min-height: 52px;
    padding: 0 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    border-radius: 50px;

    font-family: "Poppins", sans-serif;
    font-size: 0.82rem;
    font-weight: 600;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.coverage-final-primary {
    background: var(--cleanora-sage);
    color: var(--cleanora-white);
}

.coverage-final-secondary {
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--cleanora-white);
}

.coverage-final-primary:hover,
.coverage-final-secondary:hover {
    transform: translateY(-4px);
}

.coverage-final-primary:hover {
    box-shadow:
        0 15px 35px rgba(107, 142, 123, 0.3);
}


/* FINAL LASER BORDER */

.coverage-final-circle {
    position: absolute;

    width: min(850px, 90vw);
    height: min(450px, 70vw);

    border: 1px solid rgba(107, 142, 123, 0.35);

    border-radius: 50%;

    animation: coverageFinalCircle 7s ease-in-out infinite;
}

@keyframes coverageFinalCircle {
    0%,
    100% {
        transform: rotate(-4deg) scale(1);
        box-shadow: 0 0 10px rgba(107, 142, 123, 0.05);
    }

    50% {
        transform: rotate(4deg) scale(1.04);
        box-shadow:
            0 0 35px rgba(107, 142, 123, 0.15);
    }
}

.coverage-final-laser {
    position: absolute;

    width: 65%;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        var(--cleanora-sage),
        var(--cleanora-light-sage),
        transparent
    );

    box-shadow:
        0 0 12px var(--cleanora-sage),
        0 0 35px rgba(107, 142, 123, 0.6);

    z-index: 2;
}

.coverage-final-laser-one {
    top: 25%;
    left: 18%;

    transform: rotate(-8deg);

    animation: coverageFinalLaserOne 5s ease-in-out infinite;
}

.coverage-final-laser-two {
    bottom: 25%;
    right: 18%;

    transform: rotate(8deg);

    animation: coverageFinalLaserTwo 6s ease-in-out infinite;
}

@keyframes coverageFinalLaserOne {
    0%,
    100% {
        transform: translateX(-20%) rotate(-8deg);
        opacity: 0.15;
    }

    50% {
        transform: translateX(20%) rotate(-8deg);
        opacity: 1;
    }
}

@keyframes coverageFinalLaserTwo {
    0%,
    100% {
        transform: translateX(20%) rotate(8deg);
        opacity: 0.15;
    }

    50% {
        transform: translateX(-20%) rotate(8deg);
        opacity: 1;
    }
}


/* =========================================================
   REVEAL ANIMATION
   ========================================================= */

/*
   Important:
   Elements remain visible if JavaScript fails.
*/

.coverage-reveal {
    opacity: 1;
    transform: none;
}

.coverage-js-ready .coverage-reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.coverage-js-ready .coverage-reveal.coverage-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   MOBILE / TABLET / LAPTOP
   ========================================================= */

@media (max-width: 1023px) {

    .coverage-hero {
        min-height: auto;
        padding-top: 125px;
    }

    .coverage-hero-container {
        grid-template-columns: 1fr;
    }

    .coverage-hero-content {
        text-align: center;
    }

    .coverage-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .coverage-hero-actions {
        justify-content: center;
    }

    .coverage-hero-visual {
        margin-top: 20px;
    }

    .coverage-reach-layout,
    .coverage-finder-layout,
    .coverage-boundary-layout {
        grid-template-columns: 1fr;
    }

    .coverage-reach-content {
        width: min(700px, 100%);
        margin: auto;
    }

    .coverage-finder-content {
        text-align: center;
    }

    .coverage-finder-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .coverage-finder-form {
        text-align: left;
    }

    .coverage-service-display {
        grid-template-columns: 1fr;
    }

    .coverage-service-info {
        text-align: center;
    }

    .coverage-service-status {
        width: min(500px, 100%);
        margin: auto;
    }

    .coverage-boundary-content {
        text-align: center;
    }

    .coverage-boundary-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .coverage-boundary-steps {
        width: min(700px, 100%);
        margin-left: auto;
        margin-right: auto;
    }

    .coverage-outline-btn {
        margin-top: 5px;
    }
}


/* =========================================================
   MOBILE-L — 481px TO 767px
   ========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

    .coverage-hero,
    .coverage-reach,
    .coverage-signal,
    .coverage-finder,
    .coverage-service,
    .coverage-boundary,
    .coverage-final {
        padding-left: 6%;
        padding-right: 6%;
    }

    .coverage-hero-content h1 {
        font-size: clamp(3rem, 10vw, 4.5rem);
    }

    .coverage-radius-system {
        width: min(430px, 78vw);
    }

    .coverage-signal-system {
        width: min(650px, 92vw);
    }
}


/* =========================================================
   MOBILE-M — 361px TO 480px
   ========================================================= */

@media (min-width: 361px) and (max-width: 480px) {

    .coverage-hero {
        padding-top: 115px;
        padding-bottom: 75px;
    }

    .coverage-hero-content h1 {
        font-size: clamp(2.65rem, 12vw, 3.5rem);
    }

    .coverage-primary-btn,
    .coverage-secondary-btn {
        width: 100%;
    }

    .coverage-radius-system {
        width: 310px;
    }

    .coverage-radius-core {
        width: 105px;
        height: 105px;
    }

    .coverage-marker {
        width: 35px;
        height: 35px;
        font-size: 0.75rem;
    }

    .coverage-reach,
    .coverage-signal,
    .coverage-finder,
    .coverage-service,
    .coverage-boundary,
    .coverage-final {
        padding-top: 85px;
        padding-bottom: 85px;
    }

    .coverage-signal-system {
        width: 320px;
    }

    .coverage-signal-point {
        width: 105px;
        min-height: 90px;
        padding: 10px;
    }

    .coverage-signal-point span {
        font-size: 0.68rem;
    }

    .coverage-signal-point small {
        font-size: 0.55rem;
    }

    .coverage-boundary-circle {
        width: 320px;
    }

    .coverage-boundary-steps {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .coverage-input-wrap {
        border-radius: 25px;
        padding: 8px;
        flex-wrap: wrap;
    }

    .coverage-input-wrap input {
        min-height: 45px;
        width: calc(100% - 35px);
    }

    .coverage-input-wrap button {
        width: 100%;
        margin-top: 6px;
    }

    .coverage-image-caption {
        left: 15px;
        right: 15px;
        bottom: 15px;
    }

    .coverage-final-actions {
        flex-direction: column;
    }

    .coverage-final-primary,
    .coverage-final-secondary {
        width: 100%;
    }
}


/* =========================================================
   MOBILE-S — UP TO 360px
   ========================================================= */

@media (max-width: 360px) {

    .coverage-hero,
    .coverage-reach,
    .coverage-signal,
    .coverage-finder,
    .coverage-service,
    .coverage-boundary,
    .coverage-final {
        padding-left: 18px;
        padding-right: 18px;
    }

    .coverage-hero {
        padding-top: 105px;
        padding-bottom: 65px;
    }

    .coverage-hero-content h1 {
        font-size: 2.45rem;
    }

    .coverage-hero-content p {
        font-size: 0.88rem;
    }

    .coverage-radius-system {
        width: 275px;
    }

    .coverage-radius-core {
        width: 92px;
        height: 92px;
    }

    .coverage-radius-core strong {
        font-size: 0.72rem;
    }

    .coverage-radius-core small {
        font-size: 0.52rem;
    }

    .coverage-marker {
        width: 31px;
        height: 31px;
        font-size: 0.65rem;
    }

    .coverage-section-heading h2 {
        font-size: 2rem;
    }

    .coverage-reach {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .coverage-reach-visual {
        width: 275px;
    }

    .coverage-zone-center {
        width: 85px;
        height: 85px;
    }

    .coverage-zone-center strong {
        font-size: 0.65rem;
    }

    .coverage-reach-item {
        grid-template-columns: 45px minmax(0, 1fr);
        gap: 10px;
    }

    .coverage-signal {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .coverage-signal-system {
        width: 280px;
    }

    .coverage-signal-center {
        width: 100px;
        height: 100px;
    }

    .coverage-signal-point {
        width: 88px;
        min-height: 80px;
        padding: 7px;
        border-radius: 14px;
    }

    .coverage-signal-point i {
        font-size: 0.85rem;
    }

    .coverage-signal-point span {
        font-size: 0.58rem;
    }

    .coverage-signal-point small {
        display: none;
    }

    .coverage-signal-distance {
        left: -5px;
    }

    .coverage-signal-time {
        right: -5px;
    }

    .coverage-finder,
    .coverage-service,
    .coverage-boundary,
    .coverage-final {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .coverage-finder-content h2,
    .coverage-boundary-content h2 {
        font-size: 2.25rem;
    }

    .coverage-input-wrap {
        border-radius: 20px;
        padding: 8px;
        flex-wrap: wrap;
    }

    .coverage-input-wrap input {
        min-height: 42px;
        width: calc(100% - 35px);
    }

    .coverage-input-wrap button {
        width: 100%;
        margin-top: 5px;
    }

    .coverage-finder-image {
        border-radius: 22px;
    }

    .coverage-image-caption {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 14px;
    }

    .coverage-image-caption strong {
        font-size: 0.78rem;
    }

    .coverage-service-tabs {
        gap: 6px;
    }

    .coverage-service-tab {
        padding: 10px 13px;
        font-size: 0.65rem;
    }

    .coverage-service-display {
        padding: 25px 15px;
    }

    .coverage-service-radar {
        width: 230px;
    }

    .coverage-boundary-circle {
        width: 270px;
    }

    .coverage-boundary-home {
        width: 85px;
        height: 85px;
    }

    .coverage-boundary-outside {
        right: -30px;
        font-size: 0.5rem;
    }

    .coverage-boundary-steps {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .coverage-final-content h2 {
        font-size: 2.45rem;
    }

    .coverage-final-actions {
        flex-direction: column;
    }

    .coverage-final-primary,
    .coverage-final-secondary {
        width: 100%;
    }
}


/* =========================================================
   TABLET — 768px TO 1023px
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .coverage-hero {
        padding-top: 135px;
    }

    .coverage-hero-container {
        max-width: 850px;
    }

    .coverage-hero-content h1 {
        font-size: clamp(3.5rem, 8vw, 5.5rem);
    }

    .coverage-radius-system {
        width: 430px;
    }

    .coverage-signal-system {
        width: 650px;
    }

    .coverage-finder-layout,
    .coverage-boundary-layout {
        max-width: 850px;
    }
}


/* =========================================================
   LAPTOP — 1024px TO 1279px
   ========================================================= */

@media (min-width: 1024px) and (max-width: 1279px) {

    .coverage-hero {
        padding-left: 4%;
        padding-right: 4%;
    }

    .coverage-hero-container {
        gap: 45px;
    }

    .coverage-hero-content h1 {
        font-size: clamp(3.3rem, 5vw, 5rem);
    }

    .coverage-radius-system {
        width: 390px;
    }

    .coverage-reach-layout,
    .coverage-finder-layout,
    .coverage-boundary-layout {
        gap: 55px;
    }

    .coverage-service-display {
        gap: 30px;
        padding: 40px;
    }
}


/* =========================================================
   LAPTOP-L — 1280px TO 1439px
   ========================================================= */

@media (min-width: 1280px) and (max-width: 1439px) {

    .coverage-hero-container {
        width: min(1280px, 100%);
    }

    .coverage-hero-content h1 {
        font-size: clamp(4rem, 5.4vw, 5.8rem);
    }

    .coverage-radius-system {
        width: 440px;
    }
}


/* =========================================================
   DESKTOP — 1440px+
   ========================================================= */

@media (min-width: 1440px) {

    .coverage-hero {
        min-height: 820px;
    }

    .coverage-hero-container {
        width: min(1500px, 100%);
    }

    .coverage-hero-content h1 {
        font-size: clamp(5rem, 6vw, 7rem);
    }

    .coverage-radius-system {
        width: 520px;
    }

    .coverage-reach,
    .coverage-signal,
    .coverage-finder,
    .coverage-service,
    .coverage-boundary {
        padding-top: 145px;
        padding-bottom: 145px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .coverage-page *,
    .coverage-page *::before,
    .coverage-page *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }

}

/* =========================================================
   COVERAGE — FOUR SECTION TRANSFORMATION
   HERO + SECTION 03 + SECTION 06 + SECTION 07

   Honeycomb treatment
   No circle background
   No laser in these four sections
   ========================================================= */


/* =========================================================
   COVERAGE HERO — IMAGE CENTERED RADIUS SYSTEM
========================================================= */

.coverage-hero-visual {
    position: relative;
    width: min(100%, 650px);
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

.coverage-radius-system {
    position: relative;
    width: 560px;
    height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Layered circular/radius shapes ---------- */

.coverage-radius-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.coverage-radius-shape-outer {
    width: 550px;
    height: 550px;
    border: 1px solid rgba(107, 142, 123, 0.28);
    animation: coverageRadiusRotate 24s linear infinite;
}

.coverage-radius-shape-outer::before,
.coverage-radius-shape-outer::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    inset: 18px;
    border: 1px dashed rgba(107, 142, 123, 0.25);
}

.coverage-radius-shape-outer::after {
    inset: 45px;
    border: 1px solid rgba(38, 51, 45, 0.08);
}

.coverage-radius-shape-middle {
    width: 440px;
    height: 440px;
    border: 1px solid rgba(107, 142, 123, 0.35);
    animation: coverageRadiusRotateReverse 18s linear infinite;
}

.coverage-radius-shape-middle::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--cleanora-sage);
    box-shadow:
        0 0 0 8px rgba(107, 142, 123, 0.10),
        0 0 25px rgba(107, 142, 123, 0.35);
}

.coverage-radius-shape-inner {
    width: 365px;
    height: 365px;
    border: 1px solid rgba(107, 142, 123, 0.45);
    border-style: dashed;
    animation: coverageRadiusPulse 5s ease-in-out infinite;
}

/* ---------- Image core ---------- */

.coverage-radius-core {
    position: relative;
    width: 285px;
    height: 285px;
    border-radius: 50%;
    padding: 9px;
    background: var(--cleanora-cream);
    box-shadow:
        0 25px 70px rgba(38, 51, 45, 0.18),
        0 0 0 1px rgba(107, 142, 123, 0.18);
    z-index: 5;
}

.coverage-radius-image-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
}

.coverage-radius-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.04);
    animation: coverageHeroImageZoom 8s ease-in-out infinite alternate;
}

.coverage-radius-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            145deg,
            rgba(107, 142, 123, 0.10),
            transparent 45%,
            rgba(38, 51, 45, 0.20)
        );
    pointer-events: none;
}

.coverage-radius-image-label {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.90);
    color: var(--cleanora-charcoal);
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.14);
    z-index: 3;
}

.coverage-radius-image-label i {
    color: var(--cleanora-sage);
}

/* ---------- Scanning animation ---------- */

.coverage-radius-scan {
    position: absolute;
    width: 465px;
    height: 465px;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: rgba(107, 142, 123, 0.75);
    border-right-color: rgba(107, 142, 123, 0.18);
    z-index: 4;
    pointer-events: none;
    animation: coverageRadiusScan 4.5s linear infinite;
}

/* ---------- Location markers ---------- */

.coverage-marker {
    position: absolute;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cleanora-white);
    color: var(--cleanora-sage);
    border: 1px solid rgba(107, 142, 123, 0.35);
    box-shadow: 0 8px 25px rgba(38, 51, 45, 0.13);
    z-index: 7;
    animation: coverageMarkerFloat 4s ease-in-out infinite;
}

.coverage-marker i {
    font-size: 13px;
}

.coverage-marker-one {
    top: 82px;
    left: 118px;
}

.coverage-marker-two {
    top: 150px;
    right: 52px;
    animation-delay: -1s;
}

.coverage-marker-three {
    bottom: 112px;
    right: 95px;
    animation-delay: -2s;
}

.coverage-marker-four {
    bottom: 82px;
    left: 100px;
    animation-delay: -3s;
}

/* ---------- Data labels ---------- */

.coverage-radius-data {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--cleanora-charcoal);
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.2px;
    line-height: 1.3;
    z-index: 8;
}

.coverage-radius-data b {
    color: var(--cleanora-sage);
    font-size: 15px;
    font-weight: 800;
}

.coverage-radius-data-one {
    top: 45px;
    left: 15px;
}

.coverage-radius-data-two {
    top: 45px;
    right: 0;
    text-align: right;
}

.coverage-radius-data-three {
    bottom: 25px;
    right: 15px;
    text-align: right;
}

/* =========================================================
   HERO ANIMATIONS
========================================================= */

@keyframes coverageRadiusRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes coverageRadiusRotateReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes coverageRadiusPulse {
    0%,
    100% {
        transform: scale(0.96);
        opacity: 0.65;
    }

    50% {
        transform: scale(1.04);
        opacity: 1;
    }
}

@keyframes coverageRadiusScan {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes coverageHeroImageZoom {
    0% {
        transform: scale(1.04);
    }

    100% {
        transform: scale(1.12);
    }
}

@keyframes coverageMarkerFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}/* =========================================================
   COVERAGE HERO — IMAGE CENTERED RADIUS SYSTEM
========================================================= */

.coverage-hero-visual {
    position: relative;
    width: min(100%, 650px);
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

.coverage-radius-system {
    position: relative;
    width: 560px;
    height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Layered circular/radius shapes ---------- */

.coverage-radius-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.coverage-radius-shape-outer {
    width: 550px;
    height: 550px;
    border: 1px solid rgba(107, 142, 123, 0.28);
    animation: coverageRadiusRotate 24s linear infinite;
}

.coverage-radius-shape-outer::before,
.coverage-radius-shape-outer::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    inset: 18px;
    border: 1px dashed rgba(107, 142, 123, 0.25);
}

.coverage-radius-shape-outer::after {
    inset: 45px;
    border: 1px solid rgba(38, 51, 45, 0.08);
}

.coverage-radius-shape-middle {
    width: 440px;
    height: 440px;
    border: 1px solid rgba(107, 142, 123, 0.35);
    animation: coverageRadiusRotateReverse 18s linear infinite;
}

.coverage-radius-shape-middle::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--cleanora-sage);
    box-shadow:
        0 0 0 8px rgba(107, 142, 123, 0.10),
        0 0 25px rgba(107, 142, 123, 0.35);
}

.coverage-radius-shape-inner {
    width: 365px;
    height: 365px;
    border: 1px solid rgba(107, 142, 123, 0.45);
    border-style: dashed;
    animation: coverageRadiusPulse 5s ease-in-out infinite;
}

/* ---------- Image core ---------- */

.coverage-radius-core {
    position: relative;
    width: 285px;
    height: 285px;
    border-radius: 50%;
    padding: 9px;
    background: var(--cleanora-cream);
    box-shadow:
        0 25px 70px rgba(38, 51, 45, 0.18),
        0 0 0 1px rgba(107, 142, 123, 0.18);
    z-index: 5;
}

.coverage-radius-image-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
}

.coverage-radius-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.04);
    animation: coverageHeroImageZoom 8s ease-in-out infinite alternate;
}

.coverage-radius-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            145deg,
            rgba(107, 142, 123, 0.10),
            transparent 45%,
            rgba(38, 51, 45, 0.20)
        );
    pointer-events: none;
}

.coverage-radius-image-label {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.90);
    color: var(--cleanora-charcoal);
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.14);
    z-index: 3;
}

.coverage-radius-image-label i {
    color: var(--cleanora-sage);
}

/* ---------- Scanning animation ---------- */

.coverage-radius-scan {
    position: absolute;
    width: 465px;
    height: 465px;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: rgba(107, 142, 123, 0.75);
    border-right-color: rgba(107, 142, 123, 0.18);
    z-index: 4;
    pointer-events: none;
    animation: coverageRadiusScan 4.5s linear infinite;
}

/* ---------- Location markers ---------- */

.coverage-marker {
    position: absolute;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cleanora-white);
    color: var(--cleanora-sage);
    border: 1px solid rgba(107, 142, 123, 0.35);
    box-shadow: 0 8px 25px rgba(38, 51, 45, 0.13);
    z-index: 7;
    animation: coverageMarkerFloat 4s ease-in-out infinite;
}

.coverage-marker i {
    font-size: 13px;
}

.coverage-marker-one {
    top: 82px;
    left: 118px;
}

.coverage-marker-two {
    top: 150px;
    right: 52px;
    animation-delay: -1s;
}

.coverage-marker-three {
    bottom: 112px;
    right: 95px;
    animation-delay: -2s;
}

.coverage-marker-four {
    bottom: 82px;
    left: 100px;
    animation-delay: -3s;
}

/* ---------- Data labels ---------- */

.coverage-radius-data {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--cleanora-charcoal);
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.2px;
    line-height: 1.3;
    z-index: 8;
}

.coverage-radius-data b {
    color: var(--cleanora-sage);
    font-size: 15px;
    font-weight: 800;
}

.coverage-radius-data-one {
    top: 45px;
    left: 15px;
}

.coverage-radius-data-two {
    top: 45px;
    right: 0;
    text-align: right;
}

.coverage-radius-data-three {
    bottom: 25px;
    right: 15px;
    text-align: right;
}

/* =========================================================
   HERO ANIMATIONS
========================================================= */

@keyframes coverageRadiusRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes coverageRadiusRotateReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes coverageRadiusPulse {
    0%,
    100% {
        transform: scale(0.96);
        opacity: 0.65;
    }

    50% {
        transform: scale(1.04);
        opacity: 1;
    }
}

@keyframes coverageRadiusScan {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes coverageHeroImageZoom {
    0% {
        transform: scale(1.04);
    }

    100% {
        transform: scale(1.12);
    }
}

@keyframes coverageMarkerFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}
/* =========================================================
   COVERAGE SECTION 06 — NEW HEX STRUCTURE
   ========================================================= */

.coverage-boundary {
    position: relative;
    overflow: hidden;

    padding: 120px 5%;

    background: var(--cleanora-light-sage);
}


/* IMPORTANT:
   Your current HTML still contains this laser element.
   Hide it because Section 06 should have no laser.
*/
.coverage-boundary-laser {
    display: none !important;
}


/* Layout */
.coverage-boundary-layout {
    position: relative;
    z-index: 2;

    width: min(1180px, 100%);
    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(360px, 0.9fr)
        minmax(400px, 1.1fr);

    align-items: center;

    gap: 80px;
}


/* Hex visual */
.coverage-boundary-visual {
    min-height: 470px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* Main hexagon */
.coverage-boundary-hex {
    position: relative;

    width: min(420px, 90%);
    aspect-ratio: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(107,142,123,0.10);

    clip-path: polygon(
        25% 4%,
        75% 4%,
        100% 50%,
        75% 96%,
        25% 96%,
        0 50%
    );

    transition: transform 0.4s ease;
}

.coverage-boundary-hex:hover {
    transform: translateY(-8px);
}


/* Hex border effect */
.coverage-boundary-hex::before {
    content: "";

    position: absolute;
    inset: 12px;

    background: var(--cleanora-light-sage);

    clip-path: polygon(
        25% 4%,
        75% 4%,
        100% 50%,
        75% 96%,
        25% 96%,
        0 50%
    );

    z-index: 0;
}


/* Inner hex */
.coverage-boundary-hex-inner {
    position: relative;
    z-index: 2;

    width: 76%;
    aspect-ratio: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: var(--cleanora-white);

    clip-path: polygon(
        25% 4%,
        75% 4%,
        100% 50%,
        75% 96%,
        25% 96%,
        0 50%
    );

    text-align: center;
}


/* Home icon */
.coverage-boundary-hex-inner .coverage-boundary-home {
    position: static;

    width: 72px;
    height: 72px;

    margin-bottom: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--cleanora-charcoal);

    color: var(--cleanora-light-sage);
}

.coverage-boundary-hex-inner .coverage-boundary-home i {
    font-size: 1.45rem;
}


/* CHECK */
.coverage-boundary-hex-inner strong {
    font-family: "Poppins", sans-serif;

    font-size: 1rem;
    letter-spacing: 0.12em;

    color: var(--cleanora-charcoal);
}


/* SERVICE REACH */
.coverage-boundary-hex-inner > span {
    margin-top: 6px;

    font-size: 0.65rem;
    font-weight: 600;

    letter-spacing: 0.16em;

    color: var(--cleanora-sage);
}


/* Outer labels */
.coverage-boundary-label {
    position: absolute;
    z-index: 5;

    padding: 8px 14px;

    font-family: "Poppins", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;

    letter-spacing: 0.12em;

    color: var(--cleanora-charcoal);

    background: var(--cleanora-white);

    box-shadow: 0 8px 25px rgba(38,51,45,0.10);

    white-space: nowrap;
}


/* Regular reach */
.coverage-boundary-label-one {
    top: 14%;
    left: 2%;
}


/* Check first */
.coverage-boundary-label-two {
    right: 0;
    bottom: 16%;
}


/* Section 6 content */
.coverage-boundary-content {
    max-width: 600px;
}

.coverage-boundary-content h2 {
    margin: 18px 0 22px;

    font-family: "Poppins", sans-serif;

    font-size: clamp(2.5rem, 5vw, 4.7rem);

    line-height: 1.04;

    color: var(--cleanora-charcoal);
}

.coverage-boundary-content h2 span {
    display: block;
    color: var(--cleanora-sage);
}

.coverage-boundary-content > p {
    margin: 0;

    max-width: 570px;

    line-height: 1.8;

    color: var(--cleanora-charcoal);

    opacity: 0.70;
}


/* Steps */
.coverage-boundary-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    margin: 35px 0;
}

.coverage-boundary-steps > div {
    min-height: 100px;

    padding: 18px;

    border-left: 2px solid var(--cleanora-sage);

    background: rgba(255,255,255,0.38);
}

.coverage-boundary-steps span {
    display: block;

    margin-bottom: 9px;

    font-family: "Poppins", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;

    color: var(--cleanora-sage);
}

.coverage-boundary-steps strong {
    display: block;

    font-family: "Poppins", sans-serif;
    font-size: 0.78rem;
    line-height: 1.4;

    color: var(--cleanora-charcoal);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .coverage-signal {
        padding: 90px 6%;
    }

    .coverage-signal-layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .coverage-signal-intro {
        max-width: 700px;
    }

    .coverage-signal-route {
        max-width: 700px;
        margin: 0 auto;
    }


    .coverage-boundary {
        padding: 90px 6%;
    }

    .coverage-boundary-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .coverage-boundary-visual {
        min-height: 380px;
    }

    .coverage-boundary-content {
        max-width: 700px;
    }
}


@media (max-width: 600px) {

    /* SECTION 03 */

    .coverage-signal {
        padding: 75px 6%;
    }

    .coverage-signal-intro h2 {
        font-size: clamp(2.1rem, 10vw, 3rem);
    }

    .coverage-signal-route {
        gap: 12px;
    }

    .coverage-signal-route-line {
        left: 25px;
        top: 30px;
        bottom: 30px;
    }

    .coverage-signal-step {
        grid-template-columns: 42px 50px minmax(0,1fr);

        min-height: 95px;

        padding: 14px 12px;
    }

    .coverage-signal-step-number {
        font-size: 0.62rem;
    }

    .coverage-signal-step-icon {
        width: 40px;
        height: 40px;
    }

    .coverage-signal-step-copy strong {
        font-size: 0.82rem;
    }

    .coverage-signal-step-copy p {
        font-size: 0.67rem;
    }


    /* SECTION 06 */

    .coverage-boundary {
        padding: 75px 6%;
    }

    .coverage-boundary-visual {
        min-height: 300px;
    }

    .coverage-boundary-hex {
        width: min(300px, 90vw);
    }

    .coverage-boundary-label {
        font-size: 0.48rem;
        padding: 6px 9px;
    }

    .coverage-boundary-label-one {
        top: 13%;
        left: 0;
    }

    .coverage-boundary-label-two {
        right: 0;
        bottom: 14%;
    }

    .coverage-boundary-hex-inner .coverage-boundary-home {
        width: 58px;
        height: 58px;
        margin-bottom: 12px;
    }

    .coverage-boundary-hex-inner .coverage-boundary-home i {
        font-size: 1.15rem;
    }

    .coverage-boundary-hex-inner strong {
        font-size: 0.78rem;
    }

    .coverage-boundary-hex-inner > span {
        font-size: 0.48rem;
    }

    .coverage-boundary-content h2 {
        font-size: clamp(2.1rem, 10vw, 3rem);
    }

    .coverage-boundary-steps {
        grid-template-columns: 1fr;
    }

    .coverage-boundary-steps > div {
        min-height: auto;
    }
}


/* =========================================================
   RTL
   ========================================================= */

html[dir="rtl"] .coverage-signal-step {
    text-align: right;
}

html[dir="rtl"] .coverage-signal-route-line {
    left: auto;
    right: 31px;
}

html[dir="rtl"] .coverage-boundary-label-one {
    left: auto;
    right: 2%;
}

html[dir="rtl"] .coverage-boundary-label-two {
    right: auto;
    left: 0;
}

@media (max-width: 600px) {

    html[dir="rtl"] .coverage-signal-route-line {
        right: 25px;
        left: auto;
    }

    html[dir="rtl"] .coverage-boundary-label-one {
        right: 0;
        left: auto;
    }

    html[dir="rtl"] .coverage-boundary-label-two {
        left: 0;
        right: auto;
    }
}
/* =========================================================
   SECTION 07 — HONEYCOMB CTA
   ========================================================= */

.coverage-final {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    background-color: var(--cleanora-charcoal);

    background-image:
        linear-gradient(
            135deg,
            rgba(107, 142, 123, 0.07),
            transparent 52%
        ),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cpath d='M30 2h60l28 50-28 50H30L2 52 30 2Z' fill='none' stroke='%23E4ECE7' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E");

    background-size:
        100% 100%,
        120px 104px;
}


/* New subtle honeycomb layer */

.coverage-final-pattern {
    position: absolute;

    inset: -15%;

    z-index: -1;

    pointer-events: none;

    opacity: 0.65;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='156' viewBox='0 0 180 156'%3E%3Cpath d='M45 3h90l42 75-42 75H45L3 78 45 3Z' fill='none' stroke='%236B8E7B' stroke-opacity='.075' stroke-width='1'/%3E%3C/svg%3E");

    background-size: 180px 156px;

    animation:
        coverageFinalHoneycombMove 26s linear infinite;
}


@keyframes coverageFinalHoneycombMove {

    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-55px, 35px, 0);
    }

}


/* Remove old circular CTA element */

.coverage-final-circle {
    display: none !important;
}


/* Remove laser only from Section 07 */

.coverage-final .coverage-laser,
.coverage-final .coverage-final-laser {
    display: none !important;
}


/* =========================================================
   RESPONSIVE — TABLET / MOBILE
   ========================================================= */

@media (max-width: 1023px) {

    .coverage-hero,
    .coverage-signal,
    .coverage-boundary,
    .coverage-final {
        background-size:
            100% 100%,
            90px 78px;
    }


    .coverage-hero-honeycomb,
    .coverage-signal-honeycomb,
    .coverage-final-pattern {
        background-size: 120px 104px;
    }


    .coverage-boundary-hex {
        width: min(350px, 78vw);
    }


    .coverage-boundary-label-one {
        right: -4%;
    }


    .coverage-boundary-label-two {
        left: -4%;
    }

}


@media (max-width: 767px) {

    .coverage-hero,
    .coverage-signal,
    .coverage-boundary,
    .coverage-final {
        background-size:
            100% 100%,
            72px 62px;
    }


    .coverage-hero-honeycomb,
    .coverage-signal-honeycomb,
    .coverage-final-pattern {
        background-size: 100px 87px;
    }


    .coverage-boundary-hex {
        width: min(300px, 78vw);
    }


    .coverage-boundary-label {
        padding: 8px 11px;

        font-size: 0.55rem;
    }


    .coverage-boundary-label-one {
        top: 12%;
        right: -5%;
    }


    .coverage-boundary-label-two {
        bottom: 12%;
        left: -5%;
    }


    .coverage-boundary-home {
        width: 54px;
        height: 54px;

        font-size: 1.05rem;
    }

}


@media (max-width: 480px) {

    .coverage-hero,
    .coverage-signal,
    .coverage-boundary,
    .coverage-final {
        background-size:
            100% 100%,
            60px 52px;
    }


    .coverage-boundary-hex {
        width: min(260px, 78vw);
    }


    .coverage-boundary-label {
        font-size: 0.48rem;

        padding: 7px 9px;
    }


    .coverage-boundary-label-one {
        right: -7%;
    }


    .coverage-boundary-label-two {
        left: -7%;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .coverage-hero,
    .coverage-hero-honeycomb,
    .coverage-signal-honeycomb,
    .coverage-final-pattern {
        animation: none !important;
    }

    .coverage-boundary-hex {
        transition: none !important;
    }

}


/* =========================================================
   SECTION 06 — FINAL OVERRIDE
   HEX SERVICE REACH DESIGN
   ========================================================= */

.coverage-boundary {
    position: relative;
    overflow: hidden;

    padding: 130px 5%;

    background: var(--cleanora-light-sage);
}

.coverage-boundary-layout {
    position: relative;
    z-index: 2;

    width: min(1200px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(360px, 0.85fr) minmax(0, 1.15fr);
    align-items: center;

    gap: clamp(60px, 8vw, 120px);
}


/* =========================================================
   LEFT HEX VISUAL
   ========================================================= */

.coverage-boundary-visual {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.coverage-boundary-hex {
    position: relative;

    width: min(390px, 32vw);
    aspect-ratio: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    clip-path: polygon(
        25% 6%,
        75% 6%,
        100% 50%,
        75% 94%,
        25% 94%,
        0 50%
    );

    background: var(--cleanora-sage);

    filter:
        drop-shadow(0 25px 40px rgba(38, 51, 45, 0.16));

    animation: coverageBoundaryFloat 5s ease-in-out infinite;
}


/* Inner hex */

.coverage-boundary-hex::before {
    content: "";

    position: absolute;
    inset: 9%;

    clip-path: polygon(
        25% 6%,
        75% 6%,
        100% 50%,
        75% 94%,
        25% 94%,
        0 50%
    );

    background: var(--cleanora-cream);
}


/* Inner content */

.coverage-boundary-hex-inner {
    position: relative;
    z-index: 2;

    width: 72%;
    height: 72%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}


/* House icon */

.coverage-boundary-home {
    width: 82px;
    height: 82px;

    margin-bottom: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--cleanora-charcoal);
    color: var(--cleanora-sage);

    clip-path: polygon(
        25% 6%,
        75% 6%,
        100% 50%,
        75% 94%,
        25% 94%,
        0 50%
    );

    box-shadow:
        0 12px 30px rgba(38, 51, 45, 0.18);
}

.coverage-boundary-home i {
    font-size: 1.45rem;
}


/* CHECK */

.coverage-boundary-hex-inner strong {
    display: block;

    margin-bottom: 5px;

    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 800;

    letter-spacing: 0.18em;

    color: var(--cleanora-charcoal);
}


/* SERVICE REACH */

.coverage-boundary-hex-inner span {
    font-family: "Poppins", sans-serif;
    font-size: 0.58rem;
    font-weight: 700;

    letter-spacing: 0.16em;

    color: var(--cleanora-dark-sage);
}


/* =========================================================
   FLOATING LABELS
   ========================================================= */

.coverage-boundary-label {
    position: absolute;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 0 15px;

    background: var(--cleanora-charcoal);
    color: var(--cleanora-white);

    font-family: "Poppins", sans-serif;
    font-size: 0.56rem;
    font-weight: 700;

    letter-spacing: 0.12em;

    white-space: nowrap;

    box-shadow:
        0 10px 25px rgba(38, 51, 45, 0.18);
}


/* Regular reach */

.coverage-boundary-label-one {
    top: 20%;
    left: -18px;
}


/* Check first */

.coverage-boundary-label-two {
    right: -20px;
    bottom: 20%;

    background: var(--cleanora-sage);
    color: var(--cleanora-charcoal);
}


/* Small connector lines */

.coverage-boundary-label-one::after,
.coverage-boundary-label-two::before {
    content: "";

    position: absolute;

    width: 28px;
    height: 1px;

    background: var(--cleanora-sage);
}

.coverage-boundary-label-one::after {
    right: -28px;
}

.coverage-boundary-label-two::before {
    left: -28px;
}


/* =========================================================
   RIGHT CONTENT
   ========================================================= */

.coverage-boundary-content {
    min-width: 0;
}

.coverage-boundary-content h2 {
    margin: 18px 0;

    max-width: 650px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(2.8rem, 5vw, 5.2rem);
    font-weight: 700;

    line-height: 1.02;
    letter-spacing: -0.04em;

    color: var(--cleanora-charcoal);
}

.coverage-boundary-content h2 span {
    display: block;

    color: var(--cleanora-sage);
}

.coverage-boundary-content > p {
    max-width: 610px;

    margin: 0;

    font-size: 1rem;
    line-height: 1.85;

    color: var(--cleanora-charcoal);

    opacity: 0.72;
}


/* =========================================================
   THREE STEPS
   ========================================================= */

.coverage-boundary-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    margin: 38px 0;

    border-top: 1px solid rgba(38, 51, 45, 0.2);
    border-bottom: 1px solid rgba(38, 51, 45, 0.2);
}

.coverage-boundary-steps div {
    min-height: 115px;

    padding: 20px 18px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-right: 1px solid rgba(38, 51, 45, 0.16);
}

.coverage-boundary-steps div:last-child {
    border-right: 0;
}

.coverage-boundary-steps span {
    margin-bottom: 10px;

    font-family: "Poppins", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.12em;

    color: var(--cleanora-sage);
}

.coverage-boundary-steps strong {
    max-width: 120px;

    font-family: "Poppins", sans-serif;
    font-size: 0.78rem;
    line-height: 1.45;

    color: var(--cleanora-charcoal);
}


/* =========================================================
   BUTTON
   ========================================================= */

.coverage-outline-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    min-height: 52px;

    padding: 0 25px;

    border: 1px solid var(--cleanora-charcoal);

    border-radius: 50px;

    color: var(--cleanora-charcoal);

    font-family: "Poppins", sans-serif;
    font-size: 0.76rem;
    font-weight: 600;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.coverage-outline-btn i {
    transition: transform 0.3s ease;
}

.coverage-outline-btn:hover {
    background: var(--cleanora-charcoal);
    color: var(--cleanora-white);

    transform: translateY(-3px);
}

.coverage-outline-btn:hover i {
    transform: translateX(5px);
}


/* =========================================================
   REMOVE OLD LASER
   ========================================================= */

.coverage-boundary-laser {
    display: none !important;
}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes coverageBoundaryFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .coverage-boundary {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .coverage-boundary-layout {
        grid-template-columns: 1fr;
        gap: 70px;
        max-width: 780px;
    }

    .coverage-boundary-hex {
        width: 380px;
    }

    .coverage-boundary-content {
        text-align: center;
    }

    .coverage-boundary-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .coverage-boundary-steps {
        text-align: left;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .coverage-boundary {
        padding: 90px 6%;
    }

    .coverage-boundary-layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .coverage-boundary-hex {
        width: min(330px, 78vw);
    }

    .coverage-boundary-home {
        width: 68px;
        height: 68px;
    }

    .coverage-boundary-home i {
        font-size: 1.2rem;
    }

    .coverage-boundary-label {
        min-height: 30px;
        padding: 0 11px;

        font-size: 0.48rem;
    }

    .coverage-boundary-label-one {
        left: -5px;
    }

    .coverage-boundary-label-two {
        right: -5px;
    }

    .coverage-boundary-content h2 {
        font-size: clamp(2.4rem, 11vw, 3.7rem);
    }

    .coverage-boundary-content {
        text-align: center;
    }

    .coverage-boundary-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .coverage-boundary-steps {
        grid-template-columns: 1fr;

        text-align: left;

        border-bottom: 0;
    }

    .coverage-boundary-steps div {
        min-height: auto;

        padding: 18px 5px;

        border-right: 0;
        border-bottom: 1px solid rgba(38, 51, 45, 0.16);
    }

    .coverage-boundary-steps div:last-child {
        border-bottom: 0;
    }

    .coverage-boundary-steps strong {
        max-width: none;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .coverage-boundary {
        padding-left: 18px;
        padding-right: 18px;
    }

    .coverage-boundary-hex {
        width: 285px;
    }

    .coverage-boundary-label-one {
        left: -2px;
    }

    .coverage-boundary-label-two {
        right: -2px;
    }

    .coverage-boundary-content h2 {
        font-size: 2.35rem;
    }
}


/* =========================================================
   RTL
   ========================================================= */

[dir="rtl"] .coverage-boundary-label-one {
    left: auto;
    right: -18px;
}

[dir="rtl"] .coverage-boundary-label-two {
    right: auto;
    left: -20px;
}

[dir="rtl"] .coverage-boundary-label-one::after {
    right: auto;
    left: -28px;
}

[dir="rtl"] .coverage-boundary-label-two::before {
    left: auto;
    right: -28px;
}

[dir="rtl"] .coverage-boundary-steps div {
    border-right: 0;
    border-left: 1px solid rgba(38, 51, 45, 0.16);
}

[dir="rtl"] .coverage-boundary-steps div:last-child {
    border-left: 0;
}

[dir="rtl"] .coverage-outline-btn:hover i {
    transform: translateX(-5px);
}


/* =========================================================
   CLEANORA COVERAGE
   HERO + SECTION 06
   NEW VISUAL SYSTEM
========================================================= */


/* =========================================================
   SHARED REVEAL
========================================================= */

.coverage-reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.coverage-reveal.coverage-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   COVERAGE HERO
========================================================= */

.coverage-hero {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 80px);
    padding: 90px 6%;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(107, 142, 123, 0.14),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(107, 142, 123, 0.10),
            transparent 28%
        ),
        var(--cleanora-cream);
}

.coverage-hero::before {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    right: -300px;
    top: -280px;
    border-radius: 50%;
    border: 1px solid rgba(107, 142, 123, 0.14);
    box-shadow:
        0 0 0 40px rgba(107, 142, 123, 0.025),
        0 0 0 80px rgba(107, 142, 123, 0.02);
    pointer-events: none;
    z-index: -1;
}

.coverage-hero::after {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    left: -300px;
    bottom: -260px;
    border-radius: 50%;
    border: 1px dashed rgba(107, 142, 123, 0.16);
    pointer-events: none;
    z-index: -1;
}


/* =========================================================
   HERO LAYOUT
========================================================= */

.coverage-hero-layout {
    position: relative;
    width: min(1300px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(500px, 1.15fr);
    align-items: center;
    gap: 55px;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.coverage-hero-content {
    position: relative;
    z-index: 10;
    max-width: 570px;
}

.coverage-hero-content .coverage-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--cleanora-sage);
}

.coverage-hero-content .coverage-eyebrow::before {
    content: "";
    width: 35px;
    height: 1px;
    background: var(--cleanora-sage);
}

.coverage-hero-content h1 {
    margin: 0 0 25px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(48px, 5.5vw, 78px);
    line-height: 0.98;
    letter-spacing: -3px;
    font-weight: 800;
    color: var(--cleanora-charcoal);
}

.coverage-hero-content h1 span {
    display: block;
    color: var(--cleanora-sage);
}

.coverage-hero-content p {
    max-width: 500px;
    margin: 0 0 35px;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: rgba(38, 51, 45, 0.70);
}

.coverage-hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}


/* =========================================================
   HERO BUTTONS
========================================================= */

.coverage-primary-btn,
.coverage-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 700;
    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease;
}

.coverage-primary-btn {
    gap: 18px;
    padding: 0 22px;
    background: var(--cleanora-sage);
    color: var(--cleanora-white);
}

.coverage-primary-btn:hover {
    transform: translateY(-3px);
    background: var(--cleanora-dark-sage);
    color: var(--cleanora-white);
}

.coverage-primary-btn i {
    transition: transform 0.3s ease;
}

.coverage-primary-btn:hover i {
    transform: translateX(5px);
}

.coverage-secondary-btn {
    padding: 0 20px;
    color: var(--cleanora-charcoal);
    border-bottom: 1px solid var(--cleanora-sage);
}


/* =========================================================
   HERO VISUAL
========================================================= */

.coverage-hero-visual {
    position: relative;
    width: 100%;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   RADIUS SYSTEM
========================================================= */

.coverage-radius-system {
    position: relative;
    width: min(570px, 100%);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   RADIUS SHAPES
========================================================= */

.coverage-radius-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.coverage-radius-shape-outer {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(107, 142, 123, 0.24);
    animation: coverageHeroOuterRotate 24s linear infinite;
}

.coverage-radius-shape-outer::before {
    content: "";
    position: absolute;
    inset: 25px;
    border-radius: 50%;
    border: 1px dashed rgba(107, 142, 123, 0.22);
}

.coverage-radius-shape-outer::after {
    content: "";
    position: absolute;
    inset: 55px;
    border-radius: 50%;
    border: 1px solid rgba(38, 51, 45, 0.08);
}

.coverage-radius-shape-middle {
    width: 79%;
    height: 79%;
    border: 1px solid rgba(107, 142, 123, 0.35);
    animation: coverageHeroMiddleRotate 17s linear infinite;
}

.coverage-radius-shape-middle::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    left: 50%;
    top: 18px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--cleanora-sage);
    box-shadow:
        0 0 0 8px rgba(107, 142, 123, 0.10),
        0 0 25px rgba(107, 142, 123, 0.30);
}

.coverage-radius-shape-inner {
    width: 65%;
    height: 65%;
    border: 1px dashed rgba(107, 142, 123, 0.42);
    animation: coverageHeroInnerPulse 5s ease-in-out infinite;
}


/* =========================================================
   HERO IMAGE CORE
========================================================= */

.coverage-radius-core {
    position: relative;
    width: 52%;
    aspect-ratio: 1 / 1;
    padding: 9px;
    border-radius: 50%;
    background: var(--cleanora-cream);
    box-shadow:
        0 30px 80px rgba(38, 51, 45, 0.20),
        0 0 0 1px rgba(107, 142, 123, 0.22);
    z-index: 5;
}

.coverage-radius-image-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
}

.coverage-radius-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.04);
    animation: coverageHeroImageZoom 8s ease-in-out infinite alternate;
}

.coverage-radius-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            145deg,
            rgba(107, 142, 123, 0.08),
            transparent 45%,
            rgba(38, 51, 45, 0.28)
        );
    pointer-events: none;
}

.coverage-radius-image-label {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--cleanora-charcoal);
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    z-index: 3;
}

.coverage-radius-image-label i {
    color: var(--cleanora-sage);
}


/* =========================================================
   ROTATING SCAN
========================================================= */

.coverage-radius-scan {
    position: absolute;
    width: 84%;
    height: 84%;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: rgba(107, 142, 123, 0.85);
    border-right-color: rgba(107, 142, 123, 0.16);
    z-index: 6;
    pointer-events: none;
    animation: coverageHeroScan 4.5s linear infinite;
}


/* =========================================================
   HERO MARKERS
========================================================= */

.coverage-marker {
    position: absolute;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cleanora-white);
    color: var(--cleanora-sage);
    border: 1px solid rgba(107, 142, 123, 0.35);
    box-shadow: 0 10px 28px rgba(38, 51, 45, 0.14);
    z-index: 9;
    animation: coverageHeroMarker 4s ease-in-out infinite;
}

.coverage-marker i {
    font-size: 13px;
}

.coverage-marker-one {
    top: 14%;
    left: 16%;
}

.coverage-marker-two {
    top: 27%;
    right: 5%;
    animation-delay: -1s;
}

.coverage-marker-three {
    right: 13%;
    bottom: 18%;
    animation-delay: -2s;
}

.coverage-marker-four {
    bottom: 14%;
    left: 15%;
    animation-delay: -3s;
}


/* =========================================================
   HERO DATA
========================================================= */

.coverage-radius-data {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 10;
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: 1.3px;
    font-weight: 600;
    color: var(--cleanora-charcoal);
}

.coverage-radius-data b {
    font-size: 15px;
    font-weight: 800;
    color: var(--cleanora-sage);
}

.coverage-radius-data-one {
    left: 2%;
    top: 8%;
}

.coverage-radius-data-two {
    right: 0;
    top: 8%;
    text-align: right;
}

.coverage-radius-data-three {
    right: 4%;
    bottom: 5%;
    text-align: right;
}


/* =========================================================
   HERO ANIMATIONS
========================================================= */

@keyframes coverageHeroOuterRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes coverageHeroMiddleRotate {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes coverageHeroInnerPulse {
    0%,
    100% {
        transform: scale(0.96);
        opacity: 0.60;
    }

    50% {
        transform: scale(1.04);
        opacity: 1;
    }
}

@keyframes coverageHeroScan {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes coverageHeroImageZoom {
    from {
        transform: scale(1.04);
    }

    to {
        transform: scale(1.12);
    }
}

@keyframes coverageHeroMarker {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}


/* =========================================================
   SECTION 06
========================================================= */

.coverage-boundary {
    position: relative;
    width: 100%;
    padding: 125px 6%;
    overflow: hidden;
    isolation: isolate;
    background: var(--cleanora-cream);
}

.coverage-boundary::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    right: -300px;
    top: -280px;
    border-radius: 50%;
    border: 1px solid rgba(107, 142, 123, 0.12);
    box-shadow:
        0 0 0 35px rgba(107, 142, 123, 0.025),
        0 0 0 70px rgba(107, 142, 123, 0.018);
    pointer-events: none;
}

.coverage-boundary::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    left: -230px;
    bottom: -220px;
    border-radius: 50%;
    border: 1px dashed rgba(107, 142, 123, 0.15);
    pointer-events: none;
}


/* =========================================================
   SECTION 06 GRID
========================================================= */

.coverage-boundary-grid {
    position: relative;
    z-index: 2;
    width: min(1250px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.85fr);
    align-items: center;
    gap: 90px;
}


/* =========================================================
   SECTION 06 VISUAL
========================================================= */

.coverage-boundary-visual {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coverage-boundary-stage {
    position: relative;
    width: min(570px, 100%);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   SECTION 06 ORBITS
========================================================= */

.coverage-boundary-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.coverage-boundary-orbit-one {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(107, 142, 123, 0.25);
    animation: coverageBoundaryOrbitOne 22s linear infinite;
}

.coverage-boundary-orbit-one::before {
    content: "";
    position: absolute;
    inset: 25px;
    border-radius: 50%;
    border: 1px dashed rgba(107, 142, 123, 0.18);
}

.coverage-boundary-orbit-two {
    width: 82%;
    height: 82%;
    border: 1px dashed rgba(38, 51, 45, 0.18);
    animation: coverageBoundaryOrbitTwo 17s linear infinite;
}

.coverage-boundary-orbit-two::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--cleanora-sage);
    box-shadow:
        0 0 0 8px rgba(107, 142, 123, 0.10),
        0 0 25px rgba(107, 142, 123, 0.30);
}

.coverage-boundary-orbit-three {
    width: 66%;
    height: 66%;
    border: 1px solid rgba(107, 142, 123, 0.35);
    animation: coverageBoundaryOrbitThree 5s ease-in-out infinite;
}


/* =========================================================
   SECTION 06 IMAGE
========================================================= */

.coverage-boundary-frame {
    position: relative;
    width: 54%;
    height: 70%;
    padding: 8px;
    background: var(--cleanora-white);
    clip-path: polygon(
        0 8%,
        12% 0,
        88% 0,
        100% 8%,
        100% 92%,
        88% 100%,
        12% 100%,
        0 92%
    );
    box-shadow:
        0 35px 85px rgba(38, 51, 45, 0.20),
        0 0 0 1px rgba(107, 142, 123, 0.16);
    z-index: 5;
    transform: rotate(-3deg);
    transition: transform 0.5s ease;
}

.coverage-boundary-frame:hover {
    transform: rotate(0deg) scale(1.025);
}

.coverage-boundary-image-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    clip-path: inherit;
}

.coverage-boundary-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.05);
    transition: transform 0.8s ease;
}

.coverage-boundary-frame:hover .coverage-boundary-image {
    transform: scale(1.12);
}

.coverage-boundary-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            145deg,
            rgba(107, 142, 123, 0.08),
            transparent 42%,
            rgba(38, 51, 45, 0.32)
        );
    pointer-events: none;
}


/* =========================================================
   SECTION 06 LOCATION MARKERS
========================================================= */

.coverage-boundary-location {
    position: absolute;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cleanora-white);
    color: var(--cleanora-sage);
    border: 1px solid rgba(107, 142, 123, 0.35);
    box-shadow: 0 12px 30px rgba(38, 51, 45, 0.14);
    z-index: 9;
    animation: coverageBoundaryLocation 4s ease-in-out infinite;
}

.coverage-boundary-location i {
    font-size: 15px;
}

.coverage-boundary-location-one {
    left: 12%;
    top: 14%;
}

.coverage-boundary-location-two {
    right: 9%;
    bottom: 15%;
    animation-delay: -2s;
}


/* =========================================================
   SECTION 06 STATUS
========================================================= */

.coverage-boundary-status {
    position: absolute;
    right: 2%;
    top: 13%;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 15px;
    background: var(--cleanora-white);
    border-left: 3px solid var(--cleanora-sage);
    box-shadow: 0 12px 30px rgba(38, 51, 45, 0.12);
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.3px;
    color: var(--cleanora-charcoal);
}

.coverage-boundary-status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--cleanora-sage);
    box-shadow:
        0 0 0 5px rgba(107, 142, 123, 0.12);
    animation: coverageBoundaryStatus 1.8s ease-in-out infinite;
}


/* =========================================================
   SECTION 06 CAPTION
========================================================= */

.coverage-boundary-caption {
    position: absolute;
    left: 8%;
    bottom: 8%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.coverage-boundary-caption span {
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--cleanora-sage);
}

.coverage-boundary-caption strong {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--cleanora-white);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}


/* =========================================================
   SECTION 06 CONTENT
========================================================= */

.coverage-boundary-content {
    position: relative;
    max-width: 540px;
}

.coverage-boundary-content .coverage-eyebrow {
    display: inline-block;
    margin-bottom: 20px;
}

.coverage-boundary-content h2 {
    margin: 0 0 24px;
    font-family: "Poppins", sans-serif;
    font-size: clamp(44px, 5vw, 72px);
    line-height: 0.98;
    letter-spacing: -2.5px;
    font-weight: 800;
    color: var(--cleanora-charcoal);
}

.coverage-boundary-content h2 span {
    display: block;
    color: var(--cleanora-sage);
}

.coverage-boundary-content > p {
    max-width: 500px;
    margin: 0 0 38px;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: rgba(38, 51, 45, 0.70);
}


/* =========================================================
   SECTION 06 PROCESS
========================================================= */

.coverage-boundary-process {
    position: relative;
    margin-bottom: 36px;
    padding-left: 30px;
}

.coverage-boundary-process::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 15px;
    bottom: 15px;
    width: 1px;
    background: rgba(107, 142, 123, 0.25);
}

.coverage-boundary-process-item {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 24px;
}

.coverage-boundary-process-item:last-child {
    margin-bottom: 0;
}

.coverage-boundary-process-item > span {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cleanora-cream);
    border: 1px solid rgba(107, 142, 123, 0.42);
    color: var(--cleanora-sage);
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 800;
}

.coverage-boundary-process-item strong {
    display: block;
    margin-bottom: 5px;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--cleanora-charcoal);
}

.coverage-boundary-process-item small {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(38, 51, 45, 0.60);
}


/* =========================================================
   SECTION 06 BUTTON
========================================================= */

.coverage-outline-btn {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    min-height: 50px;
    padding: 0 22px;
    border: 1px solid var(--cleanora-sage);
    color: var(--cleanora-charcoal);
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 700;
    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease;
}

.coverage-outline-btn:hover {
    transform: translateY(-3px);
    background: var(--cleanora-sage);
    color: var(--cleanora-white);
}

.coverage-outline-btn i {
    color: var(--cleanora-sage);
    transition: transform 0.3s ease, color 0.3s ease;
}

.coverage-outline-btn:hover i {
    color: var(--cleanora-white);
    transform: translateX(5px);
}


/* =========================================================
   SECTION 06 ANIMATIONS
========================================================= */

@keyframes coverageBoundaryOrbitOne {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes coverageBoundaryOrbitTwo {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes coverageBoundaryOrbitThree {
    0%,
    100% {
        transform: scale(0.96);
        opacity: 0.55;
    }

    50% {
        transform: scale(1.04);
        opacity: 1;
    }
}

@keyframes coverageBoundaryLocation {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

@keyframes coverageBoundaryStatus {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}


/* =========================================================
   LAPTOP-L
========================================================= */

@media (max-width: 1200px) {

    .coverage-hero-layout {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(440px, 1.1fr);

        gap: 25px;
    }

    .coverage-hero {
        padding-left: 4%;
        padding-right: 4%;
    }

    .coverage-radius-system {
        width: 510px;
    }

    .coverage-hero-visual {
        min-height: 540px;
    }

    .coverage-boundary {
        padding-left: 4%;
        padding-right: 4%;
    }

    .coverage-boundary-grid {
        gap: 55px;
    }

    .coverage-boundary-stage {
        width: 510px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1023px) {

    .coverage-hero {
        min-height: auto;
        padding: 75px 6% 90px;
    }

    .coverage-hero-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .coverage-hero-content {
        max-width: 700px;
        margin: 0 auto;
        text-align: center;
    }

    .coverage-hero-content .coverage-eyebrow {
        justify-content: center;
    }

    .coverage-hero-content h1 {
        font-size: clamp(46px, 8vw, 70px);
    }

    .coverage-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .coverage-hero-actions {
        justify-content: center;
    }

    .coverage-hero-visual {
        min-height: 540px;
        margin-top: 10px;
    }

    .coverage-radius-system {
        width: min(520px, 90vw);
    }


    /* SECTION 06 */

    .coverage-boundary {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .coverage-boundary-grid {
        grid-template-columns: 1fr;
        gap: 75px;
    }

    .coverage-boundary-visual {
        min-height: 520px;
    }

    .coverage-boundary-stage {
        width: min(520px, 90vw);
    }

    .coverage-boundary-content {
        max-width: 700px;
        margin: 0 auto;
        text-align: center;
    }

    .coverage-boundary-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .coverage-boundary-process {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    .coverage-outline-btn {
        justify-content: center;
    }
}


/* =========================================================
   MOBILE-L
========================================================= */

@media (max-width: 767px) {

    .coverage-hero {
        padding: 60px 5% 75px;
    }

    .coverage-hero-content h1 {
        font-size: clamp(42px, 11vw, 60px);
        letter-spacing: -2px;
    }

    .coverage-hero-content p {
        font-size: 14px;
    }

    .coverage-hero-visual {
        min-height: 430px;
    }

    .coverage-radius-system {
        width: min(430px, 94vw);
    }

    .coverage-radius-image-label {
        bottom: 13px;
        padding: 7px 11px;
        font-size: 8px;
    }

    .coverage-marker {
        width: 31px;
        height: 31px;
    }

    .coverage-marker i {
        font-size: 11px;
    }

    .coverage-radius-data {
        font-size: 8px;
    }

    .coverage-radius-data b {
        font-size: 13px;
    }


    /* SECTION 06 */

    .coverage-boundary {
        padding: 80px 5%;
    }

    .coverage-boundary-visual {
        min-height: 430px;
    }

    .coverage-boundary-stage {
        width: min(430px, 94vw);
    }

    .coverage-boundary-status {
        top: 8%;
        right: 0;
        padding: 8px 11px;
        font-size: 8px;
    }

    .coverage-boundary-location {
        width: 35px;
        height: 35px;
    }

    .coverage-boundary-location-one {
        left: 7%;
    }

    .coverage-boundary-location-two {
        right: 6%;
    }

    .coverage-boundary-caption {
        left: 7%;
        bottom: 6%;
    }

    .coverage-boundary-caption strong {
        font-size: 13px;
    }

    .coverage-boundary-content h2 {
        font-size: clamp(40px, 10vw, 58px);
        letter-spacing: -1.5px;
    }

    .coverage-boundary-content > p {
        font-size: 14px;
    }
}


/* =========================================================
   MOBILE-M
========================================================= */

@media (max-width: 575px) {

    .coverage-hero {
        padding-top: 50px;
    }

    .coverage-hero-visual {
        min-height: 365px;
        margin-top: -15px;
        margin-bottom: -15px;
    }

    .coverage-radius-system {
        width: min(365px, 96vw);
    }

    .coverage-radius-shape-outer::before {
        inset: 17px;
    }

    .coverage-radius-shape-outer::after {
        inset: 36px;
    }

    .coverage-radius-shape-middle::before {
        width: 9px;
        height: 9px;
        top: 13px;
    }

    .coverage-marker {
        width: 28px;
        height: 28px;
    }

    .coverage-radius-data-one {
        left: 0;
    }

    .coverage-radius-data-two {
        right: 0;
    }

    .coverage-radius-data-three {
        right: 1%;
    }


    /* SECTION 06 */

    .coverage-boundary {
        padding: 70px 5%;
    }

    .coverage-boundary-visual {
        min-height: 365px;
    }

    .coverage-boundary-stage {
        width: min(365px, 96vw);
    }

    .coverage-boundary-frame {
        width: 55%;
        height: 70%;
    }

    .coverage-boundary-process {
        padding-left: 20px;
    }

    .coverage-boundary-process-item {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 13px;
        margin-bottom: 21px;
    }

    .coverage-boundary-process-item > span {
        width: 38px;
        height: 38px;
        font-size: 10px;
    }

    .coverage-boundary-process-item strong {
        font-size: 14px;
    }

    .coverage-boundary-process-item small {
        font-size: 12px;
    }
}


/* =========================================================
   MOBILE-S
========================================================= */

@media (max-width: 400px) {

    .coverage-hero {
        padding-left: 4%;
        padding-right: 4%;
    }

    .coverage-hero-content h1 {
        font-size: 38px;
    }

    .coverage-hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .coverage-primary-btn,
    .coverage-secondary-btn {
        width: 100%;
    }

    .coverage-hero-visual {
        min-height: 320px;
    }

    .coverage-radius-system {
        width: min(320px, 96vw);
    }

    .coverage-radius-data {
        font-size: 7px;
    }

    .coverage-radius-data b {
        font-size: 11px;
    }


    /* SECTION 06 */

    .coverage-boundary-visual {
        min-height: 315px;
    }

    .coverage-boundary-stage {
        width: min(315px, 96vw);
    }

    .coverage-boundary-status {
        font-size: 7px;
        padding: 7px 9px;
    }

    .coverage-boundary-status-dot {
        width: 6px;
        height: 6px;
        flex-basis: 6px;
    }

    .coverage-boundary-caption strong {
        font-size: 11px;
    }

    .coverage-boundary-content h2 {
        font-size: 34px;
    }

    .coverage-outline-btn {
        width: 100%;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .coverage-radius-shape-outer,
    .coverage-radius-shape-middle,
    .coverage-radius-shape-inner,
    .coverage-radius-scan,
    .coverage-radius-image,
    .coverage-marker,
    .coverage-boundary-orbit,
    .coverage-boundary-location,
    .coverage-boundary-status-dot {
        animation: none !important;
    }

    .coverage-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================================================
   COVERAGE PAGE STRUCTURE
   Keeps navbar independent from page content
========================================================= */

.coverage-page {
    width: 100%;
    overflow: visible;
}



/* =========================================================
   CLEANORA CONTACT PAGE
   ========================================================= */

.contact-page {
    width: 100%;
    overflow: hidden;
}


/* =========================================================
   COMMON CONTACT ELEMENTS
   ========================================================= */

.contact-reveal {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.contact-reveal.contact-visible {
    opacity: 1;
    transform: translateY(0);
}

.contact-eyebrow {
    display: inline-block;
    margin-bottom: 14px;

    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;

    color: var(--cleanora-sage);
}

.contact-section-heading {
    max-width: 700px;
}

.contact-section-heading h2,
.contact-faq-intro h2,
.contact-process-heading h2 {
    margin: 0 0 18px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.12;
    font-weight: 700;

    color: var(--cleanora-charcoal);
}

.contact-section-heading h2 span,
.contact-faq-intro h2 span,
.contact-process-heading h2 span {
    color: var(--cleanora-sage);
}

.contact-section-heading p,
.contact-faq-intro p {
    margin: 0;

    font-size: 16px;
    line-height: 1.8;

    color: var(--cleanora-charcoal);
    opacity: 0.72;
}


/* =========================================================
   SECTION 01 — HERO
   ========================================================= */

.contact-hero {
    position: relative;
    min-height: 720px;

    display: flex;
    align-items: center;

    background: var(--cleanora-charcoal);
    color: var(--cleanora-white);

    overflow: hidden;
}

.contact-hero-pattern {
    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            circle at 15% 25%,
            rgba(107, 142, 123, 0.25) 1px,
            transparent 1px
        );

    background-size: 34px 34px;
    opacity: 0.3;

    pointer-events: none;
}

.contact-hero-pattern::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -170px;
    top: -180px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;

    box-shadow:
        0 0 0 80px rgba(255, 255, 255, 0.025),
        0 0 0 160px rgba(255, 255, 255, 0.018);
}

.contact-hero-container {
    position: relative;
    z-index: 2;

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 0.9fr;
    align-items: center;
    gap: 70px;
}

.contact-hero-content {
    max-width: 650px;
}

.contact-hero .contact-eyebrow {
    color: var(--cleanora-light-sage);
}

.contact-hero-content h1 {
    margin: 0 0 25px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(48px, 6vw, 82px);
    line-height: 1.02;
    font-weight: 700;

    letter-spacing: -2px;
}

.contact-hero-content h1 span {
    display: block;
    color: var(--cleanora-light-sage);
}

.contact-hero-content > p {
    max-width: 580px;

    margin: 0 0 35px;

    font-size: 17px;
    line-height: 1.8;

    color: rgba(255, 255, 255, 0.76);
}

.contact-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-bottom: 28px;
}

.contact-primary-btn,
.contact-secondary-btn {
    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 0 25px;

    border-radius: 50px;

    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease;
}

.contact-primary-btn {
    background: var(--cleanora-sage);
    color: var(--cleanora-white);
}

.contact-primary-btn:hover {
    color: var(--cleanora-white);
    transform: translateY(-4px);
    background: var(--cleanora-dark-sage);
}

.contact-secondary-btn {
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--cleanora-white);
}

.contact-secondary-btn:hover {
    color: var(--cleanora-charcoal);
    background: var(--cleanora-white);
    transform: translateY(-4px);
}

.contact-hero-note {
    display: flex;
    align-items: center;
    gap: 10px;

    color: rgba(255, 255, 255, 0.65);

    font-size: 13px;
}

.contact-note-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;
    background: var(--cleanora-sage);

    box-shadow:
        0 0 0 5px rgba(107, 142, 123, 0.15);
}


/* Hero image */

.contact-hero-visual {
    position: relative;

    min-height: 530px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-hero-image-wrap {
    position: relative;

    width: min(100%, 470px);
    height: 520px;

    overflow: hidden;

    border-radius: 34px 34px 120px 34px;

    transform: rotate(2deg);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.3);

    animation: contactHeroImageFloat 6s ease-in-out infinite;
}

.contact-hero-image-wrap::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(38, 51, 45, 0.35)
        );

    pointer-events: none;
}

.contact-hero-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

@keyframes contactHeroImageFloat {

    0%,
    100% {
        transform: rotate(2deg) translateY(0);
    }

    50% {
        transform: rotate(2deg) translateY(-12px);
    }
}


/* Floating labels */

.contact-hero-floating {
    position: absolute;

    z-index: 4;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 13px 18px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.95);
    color: var(--cleanora-charcoal);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.22);

    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 600;

    animation: contactFloatingLabel 4s ease-in-out infinite;
}

.contact-hero-floating i {
    color: var(--cleanora-sage);
}

.contact-float-one {
    left: -25px;
    bottom: 90px;
}

.contact-float-two {
    right: -15px;
    top: 85px;

    animation-delay: -2s;
}

@keyframes contactFloatingLabel {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}


/* =========================================================
   SECTION 02 — CONTACT INFORMATION
   ========================================================= */

.contact-info-section {
    padding: 115px 0;

    background: var(--cleanora-cream);
}

.contact-info-container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

.contact-info-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;

    margin-top: 65px;

    border-top: 1px solid rgba(38, 51, 45, 0.12);
}

.contact-info-item {
    min-height: 210px;

    display: flex;
    gap: 25px;

    padding: 38px 35px;

    border-bottom: 1px solid rgba(38, 51, 45, 0.12);

    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

.contact-info-item:nth-child(odd) {
    border-right: 1px solid rgba(38, 51, 45, 0.12);
}

.contact-info-item:hover {
    background: var(--cleanora-light-sage);
    transform: translateY(-4px);
}

.contact-info-icon {
    width: 55px;
    height: 55px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background: var(--cleanora-light-sage);
    color: var(--cleanora-dark-sage);

    font-size: 20px;

    transition:
        transform 0.3s ease,
        background-color 0.3s ease;
}

.contact-info-item:hover .contact-info-icon {
    transform: scale(1.08) rotate(-5deg);
    background: var(--cleanora-sage);
    color: var(--cleanora-white);
}

.contact-info-label {
    display: block;

    margin-bottom: 8px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

    color: var(--cleanora-sage);
}

.contact-info-copy h3 {
    margin: 0 0 12px;

    font-family: "Poppins", sans-serif;
    font-size: 19px;
    font-weight: 600;

    color: var(--cleanora-charcoal);

    overflow-wrap: anywhere;
}

.contact-info-copy p {
    margin: 0;

    font-size: 14px;
    line-height: 1.8;

    color: var(--cleanora-charcoal);
    opacity: 0.68;
}


/* =========================================================
   SECTION 03 — MESSAGE US
   ========================================================= */

.contact-message-section {
    padding: 120px 0;

    background: var(--cleanora-white);
}

.contact-message-container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 85px;

    align-items: center;
}

.contact-message-content h2 {
    margin: 0 0 18px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.12;
    font-weight: 700;

    color: var(--cleanora-charcoal);
}

.contact-message-content h2 span {
    color: var(--cleanora-sage);
}

.contact-message-content > p {
    margin: 0 0 35px;

    max-width: 570px;

    font-size: 15px;
    line-height: 1.8;

    color: var(--cleanora-charcoal);
    opacity: 0.7;
}

.contact-message-form {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.contact-form-group label {
    display: block;

    margin-bottom: 8px;

    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 600;

    color: var(--cleanora-charcoal);
}

.contact-input-wrap {
    position: relative;
}

.contact-input-wrap i {
    position: absolute;

    left: 18px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--cleanora-sage);

    pointer-events: none;
}

.contact-input-wrap input,
.contact-textarea-wrap textarea {
    width: 100%;

    border: 1px solid rgba(38, 51, 45, 0.14);

    background: var(--cleanora-cream);
    color: var(--cleanora-charcoal);

    outline: none;

    font-family: "Inter", sans-serif;
    font-size: 14px;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}

.contact-input-wrap input {
    height: 52px;

    padding: 0 18px 0 48px;

    border-radius: 12px;
}

.contact-textarea-wrap textarea {
    min-height: 150px;

    padding: 16px 18px;

    resize: vertical;

    border-radius: 12px;
}

.contact-input-wrap input::placeholder,
.contact-textarea-wrap textarea::placeholder {
    color: var(--cleanora-charcoal);
    opacity: 0.45;
}

.contact-input-wrap input:focus,
.contact-textarea-wrap textarea:focus {
    border-color: var(--cleanora-sage);

    box-shadow:
        0 0 0 4px rgba(107, 142, 123, 0.12);

    background: var(--cleanora-white);
}

.contact-submit-btn {
    width: fit-content;

    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-top: 3px;

    padding: 0 26px;

    border: none;
    border-radius: 50px;

    background: var(--cleanora-charcoal);
    color: var(--cleanora-white);

    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background-color 0.3s ease;
}

.contact-submit-btn:hover {
    transform: translateY(-4px);
    background: var(--cleanora-sage);
}

.contact-submit-btn i {
    transition: transform 0.3s ease;
}

.contact-submit-btn:hover i {
    transform: translateX(4px);
}

.contact-form-status {
    min-height: 20px;

    margin: 0;

    font-size: 13px;
    font-weight: 600;

    color: var(--cleanora-sage);
}


/* Message image */

.contact-message-visual {
    position: relative;
}

.contact-message-image-wrap {
    position: relative;

    height: 570px;

    overflow: hidden;

    border-radius: 120px 28px 28px 28px;

    box-shadow:
        0 25px 55px rgba(38, 51, 45, 0.14);
}

.contact-message-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.8s ease;
}

.contact-message-image-wrap:hover .contact-message-image {
    transform: scale(1.04);
}

.contact-message-quote {
    position: absolute;

    left: -35px;
    bottom: 35px;

    max-width: 300px;

    padding: 25px;

    background: var(--cleanora-charcoal);
    color: var(--cleanora-white);

    border-radius: 18px;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.22);
}

.contact-message-quote i {
    margin-bottom: 14px;

    color: var(--cleanora-light-sage);

    font-size: 20px;
}

.contact-message-quote p {
    margin: 0 0 12px;

    font-family: "Poppins", sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

.contact-message-quote span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}


/* =========================================================
   SECTION 04 — MAP
   ========================================================= */

.contact-map-section {
    padding: 115px 0;

    background: var(--cleanora-light-sage);
}

.contact-map-container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 60px;

    align-items: center;
}

.contact-map-heading h2 {
    margin: 0 0 18px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.12;
    font-weight: 700;

    color: var(--cleanora-charcoal);
}

.contact-map-heading h2 span {
    color: var(--cleanora-sage);
}

.contact-map-heading > p {
    margin: 0 0 30px;

    font-size: 15px;
    line-height: 1.8;

    color: var(--cleanora-charcoal);
    opacity: 0.7;
}

.contact-map-address {
    display: flex;
    gap: 15px;

    margin-bottom: 30px;
}

.contact-map-address > i {
    color: var(--cleanora-sage);
    font-size: 20px;
    margin-top: 3px;
}

.contact-map-address div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.contact-map-address strong {
    font-family: "Poppins", sans-serif;
    font-size: 14px;

    color: var(--cleanora-charcoal);
}

.contact-map-address span {
    font-size: 13px;
    line-height: 1.6;

    color: var(--cleanora-charcoal);
    opacity: 0.65;
}

.contact-map-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-height: 48px;

    padding: 0 21px;

    border-radius: 50px;

    background: var(--cleanora-charcoal);
    color: var(--cleanora-white);

    text-decoration: none;

    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 600;

    transition:
        transform 0.3s ease,
        background-color 0.3s ease;
}

.contact-map-btn:hover {
    color: var(--cleanora-white);

    background: var(--cleanora-sage);

    transform: translateY(-4px);
}

.contact-map-frame {
    position: relative;

    min-height: 510px;

    overflow: hidden;

    border-radius: 28px;

    background: #dfe5e1;

    box-shadow:
        0 25px 55px rgba(38, 51, 45, 0.16);
}

.contact-map-frame iframe {
    width: 100%;
    height: 510px;

    display: block;

    border: 0;

    filter: saturate(0.8);
}


/* Pin */

.contact-map-pin {
    position: absolute;

    z-index: 3;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--cleanora-sage);
    color: var(--cleanora-white);

    font-size: 19px;

    pointer-events: none;
}

.contact-map-pulse {
    position: absolute;
    inset: -14px;

    border: 2px solid var(--cleanora-sage);
    border-radius: 50%;

    animation: contactMapPulse 2s ease-out infinite;
}

@keyframes contactMapPulse {

    0% {
        transform: scale(0.6);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}


/* =========================================================
   SECTION 05 — FAQ
   ========================================================= */

.contact-faq-section {
    padding: 120px 0;

    background: var(--cleanora-cream);
}

.contact-faq-container {
    width: min(1100px, calc(100% - 48px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 80px;

    align-items: start;
}

.contact-faq-intro {
    position: sticky;
    top: 120px;
}

.contact-faq-list {
    border-top: 1px solid rgba(38, 51, 45, 0.15);
}

.contact-faq-item {
    border-bottom: 1px solid rgba(38, 51, 45, 0.15);
}

.contact-faq-question {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 25px 0;

    border: none;
    background: transparent;

    text-align: left;

    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 600;

    color: var(--cleanora-charcoal);

    cursor: pointer;
}

.contact-faq-question i {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: var(--cleanora-light-sage);
    color: var(--cleanora-dark-sage);

    transition:
        transform 0.3s ease,
        background-color 0.3s ease;
}

.contact-faq-item.contact-faq-open
.contact-faq-question i {
    transform: rotate(45deg);

    background: var(--cleanora-sage);
    color: var(--cleanora-white);
}

.contact-faq-answer {
    max-height: 0;
    overflow: hidden;

    transition:
        max-height 0.45s ease,
        padding 0.45s ease;
}

.contact-faq-answer p {
    margin: 0;

    padding: 0 45px 0 0;

    font-size: 14px;
    line-height: 1.8;

    color: var(--cleanora-charcoal);
    opacity: 0.68;
}

.contact-faq-item.contact-faq-open
.contact-faq-answer {
    max-height: 180px;
}

.contact-faq-item.contact-faq-open
.contact-faq-answer p {
    padding-bottom: 25px;
}


/* =========================================================
   SECTION 06 — RESPONSE PROCESS
   ========================================================= */

.contact-process-section {
    padding: 115px 0;

    background: var(--cleanora-white);
}

.contact-process-container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

.contact-process-heading {
    max-width: 700px;
    margin-bottom: 75px;
}

.contact-process-track {
    position: relative;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
}

.contact-process-line {
    position: absolute;

    top: 31px;
    left: 16.5%;
    right: 16.5%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cleanora-sage),
            transparent
        );

    z-index: 0;
}

.contact-process-step {
    position: relative;
    z-index: 1;

    text-align: center;
}

.contact-process-number {
    display: block;

    margin-bottom: 17px;

    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;

    color: var(--cleanora-sage);
}

.contact-process-icon {
    width: 64px;
    height: 64px;

    margin: 0 auto 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 7px solid var(--cleanora-white);
    border-radius: 50%;

    background: var(--cleanora-sage);
    color: var(--cleanora-white);

    box-shadow:
        0 0 0 1px rgba(107, 142, 123, 0.25);

    font-size: 18px;

    transition:
        transform 0.3s ease,
        background-color 0.3s ease;
}

.contact-process-step:hover .contact-process-icon {
    transform: scale(1.1) rotate(6deg);
    background: var(--cleanora-dark-sage);
}

.contact-process-step h3 {
    margin: 0 0 10px;

    font-family: "Poppins", sans-serif;
    font-size: 19px;
    font-weight: 600;

    color: var(--cleanora-charcoal);
}

.contact-process-step p {
    max-width: 280px;

    margin: 0 auto;

    font-size: 14px;
    line-height: 1.8;

    color: var(--cleanora-charcoal);
    opacity: 0.68;
}


/* =========================================================
   SECTION 07 — CTA
   ========================================================= */

.contact-cta-section {
    position: relative;

    min-height: 470px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 90px 24px;

    overflow: hidden;

    background: var(--cleanora-charcoal);

    text-align: center;
}

.contact-cta-content {
    position: relative;
    z-index: 2;

    max-width: 750px;
}

.contact-cta-section .contact-eyebrow {
    color: var(--cleanora-light-sage);
}

.contact-cta-content h2 {
    margin: 0 0 20px;

    font-family: "Poppins", sans-serif;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.08;
    font-weight: 700;

    color: var(--cleanora-white);
}

.contact-cta-content h2 span {
    color: var(--cleanora-light-sage);
}

.contact-cta-content > p {
    max-width: 620px;

    margin: 0 auto 32px;

    font-size: 16px;
    line-height: 1.8;

    color: rgba(255, 255, 255, 0.68);
}

.contact-cta-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 13px;
}

.contact-cta-primary,
.contact-cta-secondary {
    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 0 25px;

    border-radius: 50px;

    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    transition:
        transform 0.3s ease,
        background-color 0.3s ease;
}

.contact-cta-primary {
    background: var(--cleanora-sage);
    color: var(--cleanora-white);
}

.contact-cta-primary:hover {
    color: var(--cleanora-white);

    background: var(--cleanora-dark-sage);

    transform: translateY(-4px);
}

.contact-cta-secondary {
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--cleanora-white);
}

.contact-cta-secondary:hover {
    color: var(--cleanora-charcoal);

    background: var(--cleanora-white);

    transform: translateY(-4px);
}


/* CTA decorative shapes */

.contact-cta-shape {
    position: absolute;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;

    pointer-events: none;
}

.contact-cta-shape-one {
    width: 450px;
    height: 450px;

    left: -230px;
    top: -160px;
}

.contact-cta-shape-two {
    width: 350px;
    height: 350px;

    right: -180px;
    bottom: -170px;
}


/* =========================================================
   DARK MODE — CONTACT
   ========================================================= */

html.dark-mode .contact-info-section,
html.dark-mode .contact-faq-section {
    background: #202a25;
}

html.dark-mode .contact-message-section,
html.dark-mode .contact-process-section {
    background: #18211d;
}

html.dark-mode .contact-section-heading h2,
html.dark-mode .contact-faq-intro h2,
html.dark-mode .contact-process-heading h2,
html.dark-mode .contact-message-content h2,
html.dark-mode .contact-map-heading h2,
html.dark-mode .contact-info-copy h3,
html.dark-mode .contact-process-step h3,
html.dark-mode .contact-faq-question,
html.dark-mode .contact-form-group label,
html.dark-mode .contact-map-address strong {
    color: #F4F7F5;
}

html.dark-mode .contact-section-heading p,
html.dark-mode .contact-faq-intro p,
html.dark-mode .contact-message-content > p,
html.dark-mode .contact-info-copy p,
html.dark-mode .contact-process-step p,
html.dark-mode .contact-map-heading > p,
html.dark-mode .contact-map-address span,
html.dark-mode .contact-faq-answer p {
    color: #E1E8E4;
    opacity: 0.78;
}

html.dark-mode .contact-info-layout,
html.dark-mode .contact-info-item,
html.dark-mode .contact-faq-list,
html.dark-mode .contact-faq-item {
    border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .contact-info-item:hover {
    background: #26332d;
}

html.dark-mode .contact-info-icon {
    background: #26332d;
}

html.dark-mode .contact-input-wrap input,
html.dark-mode .contact-textarea-wrap textarea {
    background: #202a25;
    border-color: rgba(255, 255, 255, 0.13);
    color: #F4F7F5;
}

html.dark-mode .contact-input-wrap input:focus,
html.dark-mode .contact-textarea-wrap textarea:focus {
    background: #26332d;
}

html.dark-mode .contact-input-wrap input::placeholder,
html.dark-mode .contact-textarea-wrap textarea::placeholder {
    color: #F4F7F5;
    opacity: 0.42;
}

html.dark-mode .contact-map-section {
    background: #26332d;
}

html.dark-mode .contact-faq-question i {
    background: #26332d;
}


/* =========================================================
   RTL CONTACT SUPPORT
   ========================================================= */

html[dir="rtl"] .contact-input-wrap i {
    left: auto;
    right: 18px;
}

html[dir="rtl"] .contact-input-wrap input {
    padding-left: 18px;
    padding-right: 48px;
}

html[dir="rtl"] .contact-hero-floating i,
html[dir="rtl"] .contact-map-address > i {
    margin-left: 0;
}

html[dir="rtl"] .contact-float-one {
    left: auto;
    right: -25px;
}

html[dir="rtl"] .contact-float-two {
    right: auto;
    left: -15px;
}

html[dir="rtl"] .contact-message-quote {
    left: auto;
    right: -35px;
}

html[dir="rtl"] .contact-faq-question {
    text-align: right;
}

html[dir="rtl"] .contact-faq-answer p {
    padding-right: 0;
    padding-left: 45px;
}

html[dir="rtl"] .contact-primary-btn:hover i,
html[dir="rtl"] .contact-submit-btn:hover i {
    transform: translateX(-4px);
}


/* =========================================================
   LAPTOP-L
   ========================================================= */

@media (min-width: 1440px) {

    .contact-hero-container,
    .contact-info-container,
    .contact-message-container,
    .contact-map-container,
    .contact-process-container {
        width: min(1280px, calc(100% - 80px));
    }

    .contact-hero {
        min-height: 760px;
    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1200px) {

    .contact-hero-container {
        gap: 45px;
    }

    .contact-message-container {
        gap: 55px;
    }

    .contact-map-container {
        gap: 40px;
    }

    .contact-faq-container {
        gap: 55px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .contact-hero {
        min-height: auto;

        padding: 100px 0 85px;
    }

    .contact-hero-container {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .contact-hero-content {
        max-width: 760px;
        text-align: center;
        margin: 0 auto;
    }

    .contact-hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-hero-actions,
    .contact-hero-note {
        justify-content: center;
    }

    .contact-hero-visual {
        min-height: 500px;
    }

    .contact-info-section,
    .contact-message-section,
    .contact-map-section,
    .contact-faq-section,
    .contact-process-section {
        padding: 90px 0;
    }

    .contact-message-container,
    .contact-map-container {
        grid-template-columns: 1fr;
    }

    .contact-message-content {
        max-width: 760px;
        margin: 0 auto;
    }

    .contact-message-visual {
        max-width: 650px;
        width: 100%;
        margin: 0 auto;
    }

    .contact-map-heading {
        max-width: 700px;
    }

    .contact-map-frame {
        min-height: 450px;
    }

    .contact-map-frame iframe {
        height: 450px;
    }

    .contact-faq-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .contact-faq-intro {
        position: static;
        max-width: 700px;
    }

}


/* =========================================================
   MOBILE-L
   ========================================================= */

@media (max-width: 767px) {

    .contact-hero-container,
    .contact-info-container,
    .contact-message-container,
    .contact-map-container,
    .contact-process-container,
    .contact-faq-container {
        width: min(100% - 32px, 600px);
    }

    .contact-hero {
        padding: 85px 0 70px;
    }

    .contact-hero-content h1 {
        font-size: clamp(40px, 11vw, 58px);
        letter-spacing: -1px;
    }

    .contact-hero-content > p {
        font-size: 15px;
    }

    .contact-hero-visual {
        min-height: 430px;
    }

    .contact-hero-image-wrap {
        width: min(100%, 390px);
        height: 430px;
    }

    .contact-float-one {
        left: -5px;
        bottom: 45px;
    }

    .contact-float-two {
        right: -5px;
        top: 40px;
    }

    .contact-info-layout {
        grid-template-columns: 1fr;
    }

    .contact-info-item:nth-child(odd) {
        border-right: none;
    }

    .contact-info-item {
        min-height: auto;
        padding: 30px 15px;
    }

    .contact-form-row {
        grid-template-columns: 1fr;
    }

    .contact-message-image-wrap {
        height: 440px;
    }

    .contact-message-quote {
        left: 15px;
        bottom: 20px;
    }

    .contact-map-frame {
        min-height: 400px;
    }

    .contact-map-frame iframe {
        height: 400px;
    }

    .contact-process-track {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .contact-process-line {
        top: 30px;
        bottom: 30px;

        left: 50%;
        right: auto;

        width: 1px;
        height: auto;

        background:
            linear-gradient(
                180deg,
                transparent,
                var(--cleanora-sage),
                transparent
            );
    }

    .contact-process-step {
        background: var(--cleanora-white);
    }

    .contact-cta-section {
        min-height: 430px;
    }

}


/* =========================================================
   MOBILE-M
   ========================================================= */

@media (max-width: 575px) {

    .contact-eyebrow {
        font-size: 10px;
        letter-spacing: 1.6px;
    }

    .contact-hero-content h1 {
        font-size: 40px;
    }

    .contact-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-primary-btn,
    .contact-secondary-btn {
        width: 100%;
    }

    .contact-hero-note {
        align-items: flex-start;
        text-align: left;
    }

    .contact-hero-visual {
        min-height: 380px;
    }

    .contact-hero-image-wrap {
        width: 100%;
        height: 380px;

        border-radius: 28px 28px 80px 28px;
    }

    .contact-hero-floating {
        padding: 10px 13px;
        font-size: 10px;
    }

    .contact-float-one {
        left: -4px;
        bottom: 25px;
    }

    .contact-float-two {
        right: -4px;
        top: 20px;
    }

    .contact-section-heading h2,
    .contact-faq-intro h2,
    .contact-process-heading h2,
    .contact-message-content h2,
    .contact-map-heading h2 {
        font-size: 34px;
    }

    .contact-info-item {
        gap: 16px;
    }

    .contact-info-icon {
        width: 48px;
        height: 48px;

        font-size: 17px;
    }

    .contact-info-copy h3 {
        font-size: 16px;
    }

    .contact-info-copy p {
        font-size: 13px;
    }

    .contact-message-image-wrap {
        height: 370px;

        border-radius: 80px 20px 20px 20px;
    }

    .contact-message-quote {
        position: relative;

        left: auto;
        right: auto;
        bottom: auto;

        max-width: 100%;

        margin-top: -45px;
        margin-left: 15px;
        margin-right: 15px;
    }

    html[dir="rtl"] .contact-message-quote {
        right: auto;
    }

    .contact-map-frame {
        min-height: 350px;
    }

    .contact-map-frame iframe {
        height: 350px;
    }

    .contact-map-pin {
        width: 45px;
        height: 45px;
        font-size: 16px;
    }

    .contact-faq-question {
        padding: 21px 0;
        font-size: 13px;
    }

    .contact-faq-question i {
        width: 29px;
        height: 29px;
    }

    .contact-process-step p {
        font-size: 13px;
    }

    .contact-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-cta-primary,
    .contact-cta-secondary {
        width: 100%;
    }

}


/* =========================================================
   MOBILE-S
   ========================================================= */

@media (max-width: 380px) {

    .contact-hero-content h1 {
        font-size: 35px;
    }

    .contact-hero-container,
    .contact-info-container,
    .contact-message-container,
    .contact-map-container,
    .contact-process-container,
    .contact-faq-container {
        width: calc(100% - 24px);
    }

    .contact-hero-floating {
        font-size: 9px;
    }

    .contact-info-item {
        padding-left: 8px;
        padding-right: 8px;
    }

    .contact-submit-btn {
        width: 100%;
    }

}

/* Contact button ripple */

.contact-primary-btn,
.contact-secondary-btn,
.contact-submit-btn,
.contact-map-btn,
.contact-cta-primary,
.contact-cta-secondary {
    position: relative;
    overflow: hidden;
}

.contact-button-ripple {
    position: absolute;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.20);

    pointer-events: none;

    transform: scale(0);

    animation: contactButtonRipple 0.65s ease-out;
}

@keyframes contactButtonRipple {

    0% {
        transform: scale(0);
        opacity: 0.8;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* =========================================================
   CLEANORA CONTACT PAGE
   LIGHT / BASE MODE
   ========================================================= */

/* ---------- CONTACT PAGE BASE ---------- */

.contact-page {
    width: 100%;
    background: var(--cleanora-cream);
    color: var(--cleanora-charcoal);
    overflow: hidden;
}

.contact-page h1,
.contact-page h2,
.contact-page h3,
.contact-page h4,
.contact-page h5,
.contact-page h6 {
    color: var(--cleanora-charcoal);
}

.contact-page p {
    color: #52605A;
}

.contact-page span,
.contact-page strong,
.contact-page label {
    color: inherit;
}


/* =========================================================
   CONTACT HERO
   Hero intentionally remains dark in LIGHT MODE
   ========================================================= */

.contact-hero {
    position: relative;
    background: #26332D;
    color: #FFFFFF;
}

.contact-hero h1,
.contact-hero h2,
.contact-hero h3,
.contact-hero p,
.contact-hero span,
.contact-hero strong {
    color: #FFFFFF;
}

.contact-hero h1 span {
    color: #BFD8CB;
}

.contact-eyebrow,
.contact-hero .contact-eyebrow {
    color: #BFD8CB;
}

.contact-hero-visual {
    color: #FFFFFF;
}

.contact-hero-label {
    background: rgba(255, 255, 255, 0.94);
    color: #26332D;
}

.contact-hero-label span {
    color: #26332D;
}

.contact-hero-label i {
    color: #527262;
}
.contact-hero-floating {
    background: rgba(255, 255, 255, 0.94);
    color: #26332D;
}

.contact-hero-floating span {
    color: #26332D;
}

.contact-hero-floating i {
    color: #527262;
}

/* =========================================================
   CONTACT INFORMATION
   ========================================================= */

.contact-info-section {
    background: var(--cleanora-cream);
    color: var(--cleanora-charcoal);
}

.contact-info-section h2,
.contact-info-section h3 {
    color: var(--cleanora-charcoal);
}

.contact-info-section p {
    color: #52605A;
}

.contact-info-section strong {
    color: var(--cleanora-charcoal);
}

.contact-info-section span {
    color: #52605A;
}

.contact-info-section a {
    color: var(--cleanora-dark-sage);
}

.contact-info-section a:hover {
    color: var(--cleanora-sage);
}

.contact-info-card {
    background: #FFFFFF;
    color: var(--cleanora-charcoal);
    border-color: rgba(38, 51, 45, 0.10);
}

.contact-info-card h3,
.contact-info-card strong {
    color: var(--cleanora-charcoal);
}

.contact-info-card p,
.contact-info-card span {
    color: #52605A;
}

.contact-info-icon {
    color: var(--cleanora-dark-sage);
}


/* =========================================================
   MESSAGE US
   ========================================================= */

.contact-message-section {
    background: #FFFFFF;
    color: var(--cleanora-charcoal);
}

.contact-message-section h2,
.contact-message-section h3 {
    color: var(--cleanora-charcoal);
}

.contact-message-section p {
    color: #52605A;
}

.contact-message-section label {
    color: var(--cleanora-charcoal);
}

.contact-message-section input,
.contact-message-section textarea,
.contact-message-section select {
    background: #FFFFFF;
    color: var(--cleanora-charcoal);
    border: 1px solid rgba(38, 51, 45, 0.18);
}

.contact-message-section input::placeholder,
.contact-message-section textarea::placeholder {
    color: #7A857F;
    opacity: 1;
}

.contact-message-section input:focus,
.contact-message-section textarea:focus,
.contact-message-section select:focus {
    color: var(--cleanora-charcoal);
    background: #FFFFFF;
    border-color: var(--cleanora-sage);
    outline: none;
    box-shadow: 0 0 0 3px rgba(107, 142, 123, 0.14);
}

.contact-input-icon {
    color: var(--cleanora-dark-sage);
}

.contact-form-status {
    color: var(--cleanora-charcoal);
}

.contact-form-success {
    color: #3F7256;
}


/* =========================================================
   CONTACT MAP
   ========================================================= */

.contact-map-section {
    background: var(--cleanora-cream);
    color: var(--cleanora-charcoal);
}

.contact-map-section h2,
.contact-map-section h3 {
    color: var(--cleanora-charcoal);
}

.contact-map-section p {
    color: #52605A;
}

.contact-map-details {
    color: var(--cleanora-charcoal);
}

.contact-map-details strong {
    color: var(--cleanora-charcoal);
}

.contact-map-details span {
    color: #52605A;
}

.contact-map-frame {
    background: #E4ECE7;
    border-color: rgba(38, 51, 45, 0.12);
}

.contact-map-btn {
    background: var(--cleanora-sage);
    color: #FFFFFF;
}

.contact-map-btn:hover {
    background: var(--cleanora-dark-sage);
    color: #FFFFFF;
}

.contact-map-pin {
    color: #FFFFFF;
    background: var(--cleanora-sage);
}


/* =========================================================
   FAQ
   ========================================================= */

.contact-faq-section {
    background: #FFFFFF;
    color: var(--cleanora-charcoal);
}

.contact-faq-section h2,
.contact-faq-section h3 {
    color: var(--cleanora-charcoal);
}

.contact-faq-section p {
    color: #52605A;
}

.contact-faq-item {
    background: #FFFFFF;
    border-bottom: 1px solid rgba(38, 51, 45, 0.15);
}

.contact-faq-question {
    color: var(--cleanora-charcoal);
    background: transparent;
}

.contact-faq-question span {
    color: var(--cleanora-charcoal);
}

.contact-faq-question i {
    color: var(--cleanora-dark-sage);
}

.contact-faq-answer {
    color: #52605A;
}

.contact-faq-answer p {
    color: #52605A;
}

.contact-faq-open .contact-faq-question {
    color: var(--cleanora-dark-sage);
}

.contact-faq-open .contact-faq-question span {
    color: var(--cleanora-dark-sage);
}


/* =========================================================
   WHAT HAPPENS NEXT
   ========================================================= */

.contact-process-section {
    background: var(--cleanora-cream);
    color: var(--cleanora-charcoal);
}

.contact-process-section h2,
.contact-process-section h3 {
    color: var(--cleanora-charcoal);
}

.contact-process-section p {
    color: #52605A;
}

.contact-process-step {
    color: var(--cleanora-charcoal);
}

.contact-process-step h3,
.contact-process-step strong {
    color: var(--cleanora-charcoal);
}

.contact-process-step p,
.contact-process-step span {
    color: #52605A;
}

.contact-process-icon {
    color: #FFFFFF;
    background: var(--cleanora-sage);
}

.contact-process-number {
    color: var(--cleanora-dark-sage);
}


/* =========================================================
   FINAL CTA
   CTA intentionally remains dark in LIGHT MODE
   ========================================================= */

.contact-final-cta {
    background: #26332D;
    color: #FFFFFF;
}

.contact-final-cta h2,
.contact-final-cta h3,
.contact-final-cta p,
.contact-final-cta span,
.contact-final-cta strong {
    color: #FFFFFF;
}

.contact-final-cta h2 span {
    color: #BFD8CB;
}

.contact-cta-primary {
    background: var(--cleanora-sage);
    color: #FFFFFF;
}

.contact-cta-primary:hover {
    background: var(--cleanora-dark-sage);
    color: #FFFFFF;
}

.contact-cta-secondary {
    border-color: rgba(255, 255, 255, 0.50);
    color: #FFFFFF;
}

.contact-cta-secondary:hover {
    background: #FFFFFF;
    color: #26332D;
}
.contact-cta-content h2,
.contact-cta-content h3,
.contact-cta-content > p {
    color: #FFFFFF;
}

/* =========================================================
   CONTACT BUTTONS
   ========================================================= */

.contact-primary-btn {
    background: var(--cleanora-sage);
    color: #FFFFFF;
}

.contact-primary-btn:hover {
    background: var(--cleanora-dark-sage);
    color: #FFFFFF;
}

.contact-secondary-btn {
    border: 1px solid var(--cleanora-sage);
    color: var(--cleanora-dark-sage);
    background: transparent;
}

.contact-secondary-btn:hover {
    background: var(--cleanora-sage);
    color: #FFFFFF;
}

.contact-submit-btn {
    background: var(--cleanora-sage);
    color: #FFFFFF;
}

.contact-submit-btn:hover {
    background: var(--cleanora-dark-sage);
    color: #FFFFFF;
}


/* =========================================================
   CONTACT REVEAL
   ========================================================= */

.contact-reveal.contact-visible {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   CONTACT RESPONSIVE TEXT SAFETY
   ========================================================= */

@media (max-width: 991px) {

    .contact-page h1,
    .contact-page h2,
    .contact-page h3,
    .contact-page p,
    .contact-page span,
    .contact-page strong,
    .contact-page label {
        text-shadow: none;
    }

}

@media (max-width: 575px) {

    .contact-page p {
        color: #52605A;
    }

    .contact-hero p,
    .contact-final-cta p {
        color: #FFFFFF;
    }

}

/* =========================================================
   CLEANORA USER DASHBOARD
   Base + Light Mode
   Dashboard-specific CSS only
   ========================================================= */

:root {
    --cleanora-sage: #6B8E7B;
    --cleanora-cream: #F7F3EA;
    --cleanora-charcoal: #26332D;
    --cleanora-white: #FFFFFF;
    --cleanora-light-sage: #E4ECE7;
    --cleanora-dark-sage: #527262;
    --cleanora-orange: #C87941;
    --cleanora-transition: .3s ease;

    --userdash-sidebar-width: 310px;
    --userdash-navbar-height: 76px;

    --userdash-bg: #F7F3EA;
    --userdash-panel-bg: #FFFFFF;
    --userdash-panel-soft: #F0F5F1;
    --userdash-line: rgba(38,51,45,.12);
    --userdash-muted: #64716B;
    --userdash-heading: #26332D;
    --userdash-shadow: 0 18px 55px rgba(38,51,45,.08);
    --userdash-radius: 24px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body.userdash-body {
    font-family: "Inter", sans-serif;
    background: var(--userdash-bg);
    color: var(--userdash-heading);
    overflow: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

.userdash-app {
    min-height: 100vh;
    background: var(--userdash-bg);
    color: var(--userdash-heading);
}

/* =========================================================
   NAVBAR
   ========================================================= */

.userdash-navbar {
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    left: var(--userdash-sidebar-width);
    height: var(--userdash-navbar-height);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 34px;
    background: rgba(247,243,234,.94);
    border-bottom: 1px solid var(--userdash-line);
    backdrop-filter: blur(14px);
}

.userdash-navbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.userdash-nav-action,
.userdash-hamburger {
    width: 44px;
    height: 44px;
    border: 1px solid var(--userdash-line);
    border-radius: 50%;
    background: var(--userdash-panel-bg);
    color: var(--userdash-heading);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--cleanora-transition);
}

.userdash-nav-action:hover {
    color: var(--cleanora-sage);
    border-color: var(--cleanora-sage);
    transform: translateY(-2px);
}

.cleanora-rtltext {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}

.userdash-hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
}

.userdash-hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 3px;
    background: currentColor;
    transition: .25s ease;
}

/* .userdash-hamburger.is-open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.userdash-hamburger.is-open span:nth-child(2) {
    opacity: 0;
}

.userdash-hamburger.is-open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
} */

/* =========================================================
   SIDEBAR
   ========================================================= */

.userdash-sidebar {
    position: fixed;
    z-index: 120;
    inset: 0 auto 0 0;
    width: var(--userdash-sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 26px 20px 20px;
    background: var(--cleanora-charcoal);
    color: var(--cleanora-white);
    overflow: hidden;
}

.userdash-sidebar-top {
    position: relative;
    flex-shrink: 0;
}

.userdash-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 6px 24px;
}

.userdash-brand-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--cleanora-sage);
    color: #fff;
}

.userdash-sidebar-brand strong {
    display: block;
    font-family: "Poppins", sans-serif;
    font-size: 17px;
    letter-spacing: .08em;
}

.userdash-sidebar-brand span {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.66);
    font-size: 11px;
}

.userdash-sidebar-close {
    display: none;
}

.userdash-profile {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px 12px;
    border-top: 1px solid rgba(255,255,255,.10);
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.userdash-profile-photo-wrap {
    position: relative;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
}

.userdash-profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.18);
}

.userdash-online-dot {
    position: absolute;
    right: 0;
    bottom: 2px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--cleanora-charcoal);
    border-radius: 50%;
    background: #71C58E;
}

.userdash-profile-copy strong {
    display: block;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.userdash-profile-copy span {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.65);
    font-size: 12px;
}

.userdash-sidebar-nav {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    padding: 22px 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}

.userdash-side-link {
    width: 100%;
    min-height: 72px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 13px;
    border: 1px solid transparent;
    border-radius: 17px;
    background: transparent;
    color: rgba(255,255,255,.72);
    text-align: left;
    transition: var(--cleanora-transition);
}

.userdash-side-link:hover {
    background: rgba(255,255,255,.07);
    color: #fff;
    transform: translateX(3px);
}

.userdash-side-link.is-active {
    background: rgba(107,142,123,.22);
    border-color: rgba(164,195,176,.22);
    color: #fff;
}

.userdash-side-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.76);
}

.userdash-side-link.is-active .userdash-side-icon {
    background: var(--cleanora-sage);
    color: #fff;
}

.userdash-side-copy {
    min-width: 0;
}

.userdash-side-copy strong {
    display: block;
    color: inherit;
    font-size: 14px;
    line-height: 1.3;
}

.userdash-side-copy small {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.50);
    font-size: 11px;
    line-height: 1.35;
}

.userdash-side-link.is-active .userdash-side-copy small {
    color: rgba(255,255,255,.70);
}

.userdash-sidebar-bottom {
    flex-shrink: 0;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.10);
}

.userdash-help-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.06);
}

.userdash-help-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(107,142,123,.24);
    color: #BBD2C3;
}

.userdash-help-note strong {
    display: block;
    color: #fff;
    font-size: 12px;
}

.userdash-help-note p {
    margin: 4px 0 0;
    color: rgba(255,255,255,.58);
    font-size: 10px;
    line-height: 1.45;
}

.userdash-sidebar-logout {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 14px;
    background: transparent;
    color: #fff;
}

/* =========================================================
   MAIN
   ========================================================= */

.userdash-main {
    position: fixed;
    inset: var(--userdash-navbar-height) 0 0 var(--userdash-sidebar-width);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.userdash-content-shell {
    width: 100%;
    min-height: 100%;
    padding: 38px 42px 70px;
}

.userdash-section {
    width: 100%;
}

.userdash-section[hidden] {
    display: none !important;
}

.userdash-section.is-visible {
    display: block;
    animation: userdashPanelIn .35s ease both;
}

@keyframes userdashPanelIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   TYPOGRAPHY / COMMON
   ========================================================= */

.userdash-eyebrow,
.userdash-panel-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--cleanora-sage);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.userdash-welcome h1,
.userdash-page-heading h1 {
    margin: 9px 0 10px;
    color: var(--userdash-heading);
    font-family: "Poppins", sans-serif;
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1.15;
}

.userdash-welcome p,
.userdash-page-heading p {
    max-width: 850px;
    margin: 0;
    color: var(--userdash-muted);
    font-size: 17px;
    line-height: 1.75;
}

.userdash-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 32px;
}

.userdash-heading-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 15px;
    border: 1px solid var(--userdash-line);
    border-radius: 999px;
    background: var(--userdash-panel-bg);
    color: var(--userdash-muted);
    font-size: 12px;
    font-weight: 700;
}

.userdash-heading-status i {
    color: var(--cleanora-sage);
    font-size: 8px;
}

.userdash-heading-status.is-live i {
    color: #68B985;
}

.userdash-primary-button,
.userdash-outline-button {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
    transition: var(--cleanora-transition);
}

.userdash-primary-button {
    border: 1px solid var(--cleanora-sage);
    background: var(--cleanora-sage);
    color: #fff;
}

.userdash-primary-button:hover {
    background: var(--cleanora-dark-sage);
    border-color: var(--cleanora-dark-sage);
    transform: translateY(-2px);
}

.userdash-outline-button {
    border: 1px solid var(--cleanora-sage);
    background: transparent;
    color: var(--cleanora-dark-sage);
}

.userdash-outline-button:hover {
    background: var(--cleanora-light-sage);
    transform: translateY(-2px);
}

/* =========================================================
   OVERVIEW
   ========================================================= */

.userdash-welcome {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 28px;
}

.userdash-welcome-copy {
    max-width: 900px;
}

.userdash-live-card {
    flex: 0 0 190px;
    padding: 18px;
    border-radius: 20px;
    background: var(--userdash-panel-bg);
    box-shadow: var(--userdash-shadow);
    border: 1px solid var(--userdash-line);
}

.userdash-live-card span,
.userdash-live-card small {
    display: block;
    color: var(--userdash-muted);
    font-size: 11px;
}

.userdash-live-card strong {
    display: block;
    margin: 5px 0;
    color: var(--userdash-heading);
    font-family: "Poppins", sans-serif;
    font-size: 25px;
}

.userdash-live-card small i {
    margin-right: 4px;
    color: #6BB983;
    font-size: 7px;
}

.userdash-overview-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 18px;
}

.userdash-stat-card {
    min-height: 128px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 21px;
    border: 1px solid var(--userdash-line);
    border-radius: 20px;
    background: var(--userdash-panel-bg);
    box-shadow: var(--userdash-shadow);
}

.userdash-stat-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--userdash-panel-soft);
    color: var(--cleanora-sage);
}

.userdash-stat-card small {
    display: block;
    color: var(--userdash-muted);
    font-size: 12px;
}

.userdash-stat-card strong {
    display: block;
    margin: 2px 0;
    color: var(--userdash-heading);
    font-family: "Poppins", sans-serif;
    font-size: 28px;
}

.userdash-stat-card p {
    margin: 0;
    color: var(--userdash-muted);
    font-size: 11px;
}

.userdash-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
    gap: 18px;
}

.userdash-large-panel {
    min-height: 290px;
    padding: 27px;
    border: 1px solid var(--userdash-line);
    border-radius: var(--userdash-radius);
    background: var(--userdash-panel-bg);
    box-shadow: var(--userdash-shadow);
}

.userdash-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.userdash-panel-heading h2,
.userdash-large-panel h2 {
    margin: 5px 0 0;
    color: var(--userdash-heading);
    font-family: "Poppins", sans-serif;
    font-size: 24px;
}

.userdash-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 999px;
    background: var(--userdash-panel-soft);
    color: var(--cleanora-dark-sage);
    font-size: 11px;
    font-weight: 800;
}

.userdash-status-badge i {
    color: #69B982;
    font-size: 7px;
}

.userdash-next-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 30px 0 26px;
}

.userdash-next-details > div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px;
    border-radius: 15px;
    background: var(--userdash-panel-soft);
}

.userdash-next-details > div > span {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--userdash-panel-bg);
    color: var(--cleanora-sage);
}

.userdash-next-details small,
.userdash-next-details strong {
    display: block;
}

.userdash-next-details small {
    color: var(--userdash-muted);
    font-size: 10px;
}

.userdash-next-details strong {
    margin-top: 2px;
    color: var(--userdash-heading);
    font-size: 13px;
}

.userdash-quick-panel {
    display: flex;
    flex-direction: column;
}

.userdash-heading-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--userdash-panel-soft);
    color: var(--cleanora-sage);
}

.userdash-quick-panel > p {
    margin: 22px 0 25px;
    color: var(--userdash-muted);
    font-size: 16px;
    line-height: 1.75;
}

.userdash-quick-panel .userdash-outline-button {
    margin-top: auto;
    align-self: flex-start;
}

.userdash-overview-extra {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.userdash-insight-panel {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    padding: 25px;
    border: 1px solid var(--userdash-line);
    border-radius: var(--userdash-radius);
    background: var(--userdash-panel-bg);
}

.userdash-insight-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.userdash-insight-number {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: var(--cleanora-sage);
}

.userdash-insight-top i {
    color: var(--cleanora-sage);
    font-size: 20px;
}

.userdash-insight-panel h3 {
    margin: 25px 0 9px;
    color: var(--userdash-heading);
    font-family: "Poppins", sans-serif;
    font-size: 19px;
    line-height: 1.4;
}

.userdash-insight-panel p {
    margin: 0;
    color: var(--userdash-muted);
    font-size: 15px;
    line-height: 1.7;
}

.userdash-insight-panel button {
    margin-top: auto;
    padding: 16px 0 0;
    border: 0;
    border-top: 1px solid var(--userdash-line);
    background: transparent;
    color: var(--cleanora-dark-sage);
    text-align: left;
    font-size: 13px;
    font-weight: 800;
}

.userdash-insight-panel button i {
    margin-left: 5px;
}

.userdash-care-panel {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 18px;
    padding: 28px;
    border-radius: var(--userdash-radius);
    background: var(--cleanora-charcoal);
    color: #fff;
}

.userdash-care-copy h2 {
    margin: 7px 0;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 25px;
}

.userdash-care-copy p {
    max-width: 800px;
    margin: 0;
    color: rgba(255,255,255,.70);
    font-size: 15px;
    line-height: 1.7;
}

.userdash-care-action {
    min-width: 250px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 17px;
    background: rgba(255,255,255,.06);
}

.userdash-care-action > span {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(107,142,123,.28);
    color: #BBD2C3;
}

.userdash-care-action strong,
.userdash-care-action small {
    display: block;
}

.userdash-care-action strong {
    color: #fff;
    font-size: 12px;
}

.userdash-care-action small {
    margin-top: 3px;
    color: rgba(255,255,255,.56);
    font-size: 10px;
}

/* =========================================================
   BOOKING
   ========================================================= */

.userdash-booking-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr);
    gap: 22px;
    align-items: stretch;
}

.userdash-form-panel,
.userdash-booking-summary {
    border: 1px solid var(--userdash-line);
    border-radius: var(--userdash-radius);
    background: var(--userdash-panel-bg);
    box-shadow: var(--userdash-shadow);
}

.userdash-form-panel {
    overflow: hidden;
}

.userdash-form-section {
    padding: 29px;
    border-bottom: 1px solid var(--userdash-line);
}

.userdash-form-title {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 22px;
}

.userdash-form-title > span {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--userdash-panel-soft);
    color: var(--cleanora-sage);
    font-size: 12px;
    font-weight: 800;
}

.userdash-form-title h2 {
    margin: 0;
    color: var(--userdash-heading);
    font-family: "Poppins", sans-serif;
    font-size: 20px;
}

.userdash-form-title p {
    margin: 4px 0 0;
    color: var(--userdash-muted);
    font-size: 14px;
    line-height: 1.55;
}

.userdash-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.userdash-choice-card {
    position: relative;
    min-height: 105px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px;
    border: 1px solid var(--userdash-line);
    border-radius: 17px;
    background: var(--userdash-panel-bg);
    transition: var(--cleanora-transition);
}

.userdash-choice-card:hover,
.userdash-choice-card.is-selected {
    border-color: var(--cleanora-sage);
    background: var(--userdash-panel-soft);
}

.userdash-choice-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.userdash-choice-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--userdash-panel-soft);
    color: var(--cleanora-sage);
}

.userdash-choice-card strong,
.userdash-choice-card small {
    display: block;
}

.userdash-choice-card strong {
    color: var(--userdash-heading);
    font-size: 14px;
}

.userdash-choice-card small {
    margin-top: 5px;
    color: var(--userdash-muted);
    font-size: 12px;
    line-height: 1.5;
}

.userdash-recurring-wrap {
    margin-top: 14px;
}

.userdash-recurring-wrap label,
.userdash-field {
    display: block;
}

.userdash-recurring-wrap span,
.userdash-field > span,
.userdash-review-field > span {
    display: block;
    margin-bottom: 8px;
    color: var(--userdash-heading);
    font-size: 13px;
    font-weight: 800;
}

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

.userdash-field select,
.userdash-field input,
.userdash-recurring-wrap select,
.userdash-review-field textarea,
.userdash-history-toolbar select {
    width: 100%;
    min-height: 50px;
    border: 1px solid var(--userdash-line);
    border-radius: 13px;
    outline: none;
    background: var(--userdash-panel-bg);
    color: var(--userdash-heading);
    padding: 0 14px;
    transition: var(--cleanora-transition);
}

.userdash-field select:focus,
.userdash-field input:focus,
.userdash-recurring-wrap select:focus,
.userdash-review-field textarea:focus {
    border-color: var(--cleanora-sage);
    box-shadow: 0 0 0 3px rgba(107,142,123,.10);
}

.userdash-room-control {
    min-height: 50px;
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    border: 1px solid var(--userdash-line);
    border-radius: 13px;
    overflow: hidden;
}

.userdash-room-control button {
    border: 0;
    background: var(--userdash-panel-soft);
    color: var(--cleanora-sage);
}

.userdash-room-control strong {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--userdash-heading);
    font-size: 16px;
}

.userdash-field-help {
    display: block;
    margin-top: 7px;
    color: var(--userdash-muted);
    font-size: 11px;
}

.userdash-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 23px 29px;
}

.userdash-form-footer p,
.userdash-rating-footer p {
    margin: 0;
    color: var(--cleanora-dark-sage);
    font-size: 13px;
    line-height: 1.5;
}

.userdash-booking-summary {
    min-height: 100%;
    padding: 29px;
    background: var(--cleanora-charcoal);
    color: #fff;
}

.userdash-summary-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.userdash-summary-top .userdash-panel-kicker {
    color: #AFC7B8;
}

.userdash-summary-top > i {
    color: #AFC7B8;
}

.userdash-booking-summary h2 {
    margin: 22px 0 10px;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 28px;
}

.userdash-booking-summary > p {
    margin: 0;
    color: rgba(255,255,255,.68);
    font-size: 15px;
    line-height: 1.75;
}

.userdash-summary-list {
    margin-top: 30px;
    border-top: 1px solid rgba(255,255,255,.12);
}

.userdash-summary-list > div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.userdash-summary-list span {
    color: rgba(255,255,255,.52);
    font-size: 11px;
}

.userdash-summary-list strong {
    color: #fff;
    font-size: 12px;
    text-align: right;
}

.userdash-summary-note {
    display: flex;
    gap: 10px;
    margin-top: 25px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
}

.userdash-summary-note i {
    color: #AFC7B8;
    margin-top: 2px;
}

.userdash-summary-note p {
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: 11px;
    line-height: 1.6;
}

/* =========================================================
   STATUS
   ========================================================= */

.userdash-status-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, .75fr);
    gap: 22px;
}

.userdash-status-main,
.userdash-status-side {
    border: 1px solid var(--userdash-line);
    border-radius: var(--userdash-radius);
    background: var(--userdash-panel-bg);
    box-shadow: var(--userdash-shadow);
}

.userdash-status-main {
    padding: 32px;
}

.userdash-status-main-top {
    display: flex;
    justify-content: space-between;
    gap: 25px;
}

.userdash-status-main-top h2,
.userdash-status-side h2 {
    margin: 6px 0 3px;
    color: var(--userdash-heading);
    font-family: "Poppins", sans-serif;
    font-size: 26px;
}

.userdash-status-main-top p {
    margin: 0;
    color: var(--userdash-muted);
    font-size: 14px;
}

.userdash-arrival-box {
    min-width: 240px;
    padding: 15px;
    border-radius: 16px;
    background: var(--userdash-panel-soft);
}

.userdash-arrival-box strong {
    display: block;
    color: var(--userdash-heading);
    font-size: 13px;
    line-height: 1.5;
}

.userdash-arrival-box span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    color: var(--cleanora-dark-sage);
    font-size: 11px;
    font-weight: 800;
}

.userdash-progress-wrap {
    margin: 40px 0 30px;
}

.userdash-progress-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 9px;
}

.userdash-progress-labels span,
.userdash-progress-labels strong {
    font-size: 12px;
}

.userdash-progress-labels span {
    color: var(--userdash-muted);
}

.userdash-progress-labels strong {
    color: var(--cleanora-sage);
}

.userdash-progress-track {
    height: 9px;
    overflow: hidden;
    border-radius: 99px;
    background: var(--userdash-panel-soft);
}

.userdash-progress-track span {
    display: block;
    width: 36%;
    height: 100%;
    border-radius: inherit;
    background: var(--cleanora-sage);
    transition: width .6s ease;
}

.userdash-tracking-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.userdash-track-step {
    position: relative;
    min-height: 145px;
    padding: 16px;
    border: 1px solid var(--userdash-line);
    border-radius: 16px;
    background: var(--userdash-panel-bg);
}

.userdash-track-step > span {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 11px;
    background: var(--userdash-panel-soft);
    color: var(--userdash-muted);
}

.userdash-track-step strong {
    display: block;
    color: var(--userdash-heading);
    font-size: 12px;
    line-height: 1.45;
}

.userdash-track-step p {
    margin: 6px 0 0;
    color: var(--userdash-muted);
    font-size: 11px;
    line-height: 1.55;
}

.userdash-track-step.is-complete > span {
    background: var(--cleanora-sage);
    color: #fff;
}

.userdash-track-step.is-current {
    border-color: var(--cleanora-sage);
    background: var(--userdash-panel-soft);
}

.userdash-track-step.is-current > span {
    background: var(--cleanora-sage);
    color: #fff;
}

.userdash-status-side {
    padding: 32px;
}

.userdash-status-side-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border-radius: 16px;
    background: var(--userdash-panel-soft);
    color: var(--cleanora-sage);
    font-size: 21px;
}

.userdash-status-side h2 {
    font-size: 25px;
}

.userdash-status-side > p {
    margin: 12px 0 25px;
    color: var(--userdash-muted);
    font-size: 15px;
    line-height: 1.75;
}

.userdash-status-side-detail {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 15px 0;
    border-top: 1px solid var(--userdash-line);
}

.userdash-status-side-detail > span {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--userdash-panel-soft);
    color: var(--cleanora-sage);
}

.userdash-status-side-detail strong,
.userdash-status-side-detail small {
    display: block;
}

.userdash-status-side-detail strong {
    color: var(--userdash-heading);
    font-size: 12px;
}

.userdash-status-side-detail small {
    margin-top: 3px;
    color: var(--userdash-muted);
    font-size: 10px;
}

/* =========================================================
   RATING
   ========================================================= */

.userdash-rating-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, .75fr);
    gap: 22px;
}

.userdash-rating-panel,
.userdash-rating-side {
    border: 1px solid var(--userdash-line);
    border-radius: var(--userdash-radius);
    background: var(--userdash-panel-bg);
    box-shadow: var(--userdash-shadow);
}

.userdash-rating-panel {
    padding: 32px;
}

.userdash-rating-service {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--userdash-line);
}

.userdash-rating-service-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--userdash-panel-soft);
    color: var(--cleanora-sage);
}

.userdash-rating-service h2 {
    margin: 5px 0 3px;
    color: var(--userdash-heading);
    font-family: "Poppins", sans-serif;
    font-size: 22px;
}

.userdash-rating-service p {
    margin: 0;
    color: var(--userdash-muted);
    font-size: 12px;
}

.userdash-rating-question {
    padding: 30px 0;
}

.userdash-rating-question h3 {
    margin: 0;
    color: var(--userdash-heading);
    font-family: "Poppins", sans-serif;
    font-size: 22px;
}

.userdash-rating-question p {
    margin: 6px 0 20px;
    color: var(--userdash-muted);
    font-size: 15px;
}

.userdash-stars {
    display: flex;
    gap: 10px;
}

.userdash-stars button {
    width: 52px;
    height: 52px;
    border: 1px solid var(--userdash-line);
    border-radius: 14px;
    background: var(--userdash-panel-bg);
    color: #D0A14B;
    font-size: 20px;
    transition: var(--cleanora-transition);
}

.userdash-stars button:hover,
.userdash-stars button.is-selected {
    border-color: #D0A14B;
    background: #FBF4E5;
    transform: translateY(-3px);
}

.userdash-rating-label {
    display: block;
    margin-top: 12px;
    color: var(--userdash-muted);
    font-size: 12px;
}

.userdash-review-field {
    position: relative;
    display: block;
}

.userdash-review-field textarea {
    min-height: 150px;
    resize: vertical;
    padding: 15px;
}

.userdash-review-field small {
    position: absolute;
    right: 12px;
    bottom: 10px;
    color: var(--userdash-muted);
    font-size: 10px;
}

.userdash-rating-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

.userdash-rating-side {
    padding: 32px;
    background: var(--cleanora-charcoal);
    color: #fff;
}

.userdash-rating-score {
    display: flex;
    gap: 15px;
    align-items: center;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.userdash-rating-score > strong {
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 52px;
}

.userdash-rating-score span,
.userdash-rating-score small {
    display: block;
}

.userdash-rating-score span {
    color: #D8A952;
    font-size: 11px;
    letter-spacing: 2px;
}

.userdash-rating-score small {
    margin-top: 6px;
    color: rgba(255,255,255,.55);
    font-size: 10px;
}

.userdash-rating-tip {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

.userdash-rating-tip > i {
    color: #D8A952;
    margin-top: 3px;
}

.userdash-rating-tip strong {
    color: #fff;
    font-size: 13px;
}

.userdash-rating-tip p {
    margin: 6px 0 0;
    color: rgba(255,255,255,.63);
    font-size: 12px;
    line-height: 1.65;
}

/* =========================================================
   HISTORY
   ========================================================= */

.userdash-history-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding: 20px 22px;
    border: 1px solid var(--userdash-line);
    border-radius: 18px;
    background: var(--userdash-panel-bg);
}

.userdash-history-toolbar strong,
.userdash-history-toolbar span {
    display: block;
}

.userdash-history-toolbar strong {
    color: var(--userdash-heading);
    font-size: 14px;
}

.userdash-history-toolbar span {
    margin-top: 4px;
    color: var(--userdash-muted);
    font-size: 12px;
}

.userdash-history-toolbar select {
    width: 210px;
    min-height: 44px;
}

.userdash-history-list {
    display: grid;
    gap: 12px;
}

.userdash-history-item {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--userdash-line);
    border-radius: 18px;
    background: var(--userdash-panel-bg);
    box-shadow: var(--userdash-shadow);
}

.userdash-history-date {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 62px;
    border-radius: 14px;
    background: var(--userdash-panel-soft);
}

.userdash-history-date strong {
    color: var(--cleanora-sage);
    font-family: "Poppins", sans-serif;
    font-size: 27px;
}

.userdash-history-date span {
    color: var(--userdash-muted);
    font-size: 8px;
    font-weight: 800;
    line-height: 1.25;
}

.userdash-history-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.userdash-history-type {
    color: var(--cleanora-sage);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.userdash-history-main h2 {
    margin: 5px 0 0;
    color: var(--userdash-heading);
    font-family: "Poppins", sans-serif;
    font-size: 16px;
}

.userdash-history-success {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #57906D;
    font-size: 11px;
    font-weight: 800;
}

.userdash-history-success i {
    font-size: 10px;
}

.userdash-history-actions {
    display: flex;
    gap: 8px;
}

.userdash-history-actions button {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--userdash-line);
    border-radius: 10px;
    background: var(--userdash-panel-bg);
    color: var(--userdash-heading);
    font-size: 11px;
    font-weight: 700;
}

.userdash-history-actions button:hover {
    border-color: var(--cleanora-sage);
    color: var(--cleanora-dark-sage);
}

/* =========================================================
   REVEAL
   ========================================================= */

[data-userdash-reveal] {
    opacity: 0;
    transform: translateY(12px);
}

[data-userdash-reveal].userdash-revealed {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .45s ease, transform .45s ease;
}

/* =========================================================
   TOAST
   ========================================================= */

.userdash-toast {
    position: fixed;
    z-index: 300;
    right: 28px;
    bottom: 28px;
    max-width: 360px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 17px;
    border: 1px solid var(--userdash-line);
    border-radius: 14px;
    background: var(--userdash-panel-bg);
    color: var(--userdash-heading);
    box-shadow: 0 18px 45px rgba(0,0,0,.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: .3s ease;
}

.userdash-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.userdash-toast i {
    color: var(--cleanora-sage);
}

/* =========================================================
   DESKTOP / LAPTOP
   ========================================================= */

@media (min-width: 1440px) {
    .userdash-content-shell {
        padding-left: 56px;
        padding-right: 56px;
    }

    .userdash-large-panel {
        min-height: 315px;
    }

    .userdash-stat-card {
        min-height: 140px;
    }
}
/* =========================================================
   LAPTOP (narrow desktop)
   The fixed 310px sidebar leaves too little room for the
   two-column grids below at these widths, which was causing
   the overview / booking / status-tracking panels to squeeze
   and overlap. Stack them to a single column here only.
   ========================================================= */

@media (min-width: 1024px) and (max-width: 1439px) {
    .userdash-overview-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .userdash-overview-grid,
    .userdash-booking-layout,
    .userdash-status-layout {
        grid-template-columns: 1fr;
    }

    .userdash-status-side,
    .userdash-booking-summary {
        min-height: auto;
    }
}
/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1023px) {
    body.userdash-body {
        overflow: hidden;
    }

    .userdash-navbar {
        left: 0;
        padding: 0 18px;
    }

    .userdash-hamburger {
        display: inline-flex;
    }

    .userdash-sidebar {
        transform: translateX(-105%);
        transition: transform .35s ease;
        box-shadow: 15px 0 50px rgba(0,0,0,.20);
    }

    .userdash-sidebar.is-open {
        transform: translateX(0);
    }

    .userdash-sidebar-close {
        position: absolute;
        top: 0;
        right: 0;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255,255,255,.13);
        border-radius: 50%;
        background: transparent;
        color: #fff;
    }

    .userdash-sidebar-logout {
        display: flex;
    }

    .userdash-sidebar-overlay {
        position: fixed;
        z-index: 110;
        inset: 0;
        display: block;
        background: rgba(0,0,0,.42);
        opacity: 0;
        visibility: hidden;
        transition: .3s ease;
    }

    .userdash-sidebar-overlay.is-visible {
        opacity: 1;
        visibility: visible;
    }

    .userdash-main {
        left: 0;
    }

    .userdash-content-shell {
        padding: 30px 24px 55px;
    }

    .userdash-overview-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .userdash-overview-extra {
        grid-template-columns: 1fr;
    }

    .userdash-booking-layout,
    .userdash-status-layout,
    .userdash-rating-layout {
        grid-template-columns: 1fr;
    }

    .userdash-status-side,
    .userdash-rating-side,
    .userdash-booking-summary {
        min-height: auto;
    }

    .userdash-tracking-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .userdash-history-item {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    .userdash-history-actions {
        grid-column: 2;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
    :root {
        --userdash-navbar-height: 68px;
    }

    .userdash-navbar {
        height: var(--userdash-navbar-height);
        padding: 0 13px;
    }

    .userdash-navbar-actions {
        gap: 7px;
    }

    .userdash-nav-action,
    .userdash-hamburger {
        width: 40px;
        height: 40px;
    }

    .userdash-sidebar {
        width: min(88vw, 330px);
        padding: 20px 15px 15px;
    }

    .userdash-main {
        top: var(--userdash-navbar-height);
    }

    .userdash-content-shell {
        padding: 24px 14px 45px;
    }

    .userdash-welcome,
    .userdash-page-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .userdash-welcome h1,
    .userdash-page-heading h1 {
        font-size: 29px;
    }

    .userdash-welcome p,
    .userdash-page-heading p {
        font-size: 15px;
        line-height: 1.7;
    }

    .userdash-live-card {
        width: 100%;
    }

    .userdash-overview-stats {
        grid-template-columns: 1fr;
    }

    .userdash-overview-grid {
        grid-template-columns: 1fr;
    }

    .userdash-large-panel {
        min-height: auto;
        padding: 22px;
    }

    .userdash-next-details {
        grid-template-columns: 1fr;
    }

    .userdash-care-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .userdash-care-action {
        min-width: 0;
    }

    .userdash-form-section,
    .userdash-form-footer,
    .userdash-booking-summary,
    .userdash-status-main,
    .userdash-status-side,
    .userdash-rating-panel,
    .userdash-rating-side {
        padding: 22px;
    }

    .userdash-choice-grid,
    .userdash-form-grid {
        grid-template-columns: 1fr;
    }

    .userdash-form-footer,
    .userdash-rating-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .userdash-primary-button,
    .userdash-outline-button {
        width: 100%;
    }

    .userdash-status-main-top {
        flex-direction: column;
    }

    .userdash-arrival-box {
        min-width: 0;
    }

    .userdash-tracking-steps {
        grid-template-columns: 1fr;
    }

    .userdash-track-step {
        min-height: auto;
    }

    .userdash-stars {
        gap: 6px;
    }

    .userdash-stars button {
        width: 47px;
        height: 47px;
    }

    .userdash-history-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .userdash-history-toolbar select {
        width: 100%;
    }

    .userdash-history-item {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .userdash-history-main {
        align-items: flex-start;
        flex-direction: column;
    }

    .userdash-history-actions {
        grid-column: auto;
    }

    .userdash-history-actions button {
        flex: 1;
    }

    .userdash-toast {
        right: 14px;
        left: 14px;
        bottom: 14px;
        max-width: none;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {
    .userdash-sidebar-brand span {
        font-size: 10px;
    }

    .userdash-side-link {
        min-height: 66px;
    }

    .userdash-side-copy strong {
        font-size: 13px;
    }

    .userdash-side-copy small {
        font-size: 10px;
    }

    .userdash-welcome h1,
    .userdash-page-heading h1 {
        font-size: 26px;
    }

    .userdash-stat-card {
        padding: 17px;
    }

    .userdash-stat-card strong {
        font-size: 25px;
    }
}
/* =========================================================
   USER DASHBOARD NAVBAR LOGOUT
   Desktop / Laptop / Laptop-L only
   ========================================================= */

.userdash-navbar-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 44px;
    padding: 0 18px;

    border: 1px solid rgba(107, 142, 123, 0.28);
    border-radius: 50px;

    background: var(--cleanora-white);
    color: var(--cleanora-charcoal);

    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;

    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.userdash-navbar-logout i {
    font-size: 15px;
}

.userdash-navbar-logout:hover {
    transform: translateY(-2px);
    background: var(--cleanora-charcoal);
    color: var(--cleanora-white);
    border-color: var(--cleanora-charcoal);
    box-shadow: 0 8px 20px rgba(38, 51, 45, 0.15);
}

.userdash-navbar-logout:focus-visible {
    outline: 3px solid rgba(107, 142, 123, 0.35);
    outline-offset: 3px;
}


/* =========================================================
   TABLET + MOBILE
   Logout disappears from navbar.
   Sidebar logout remains available.
   ========================================================= */

@media (max-width: 1023px) {

    .userdash-navbar-logout {
        display: none !important;
    }

}

/* =========================================================
   CLEANORA USER DASHBOARD — RTL
   ========================================================= */

html[dir="rtl"] .userdash-navbar {
    right: var(--userdash-sidebar-width);
    left: 0;
}

html[dir="rtl"] .userdash-sidebar {
    right: 0;
    left: auto;
}

html[dir="rtl"] .userdash-main {
    right: var(--userdash-sidebar-width);
    left: 0;
}

/* Sidebar enters from the correct side on mobile/tablet */

@media (max-width: 1023px) {

    html[dir="rtl"] .userdash-sidebar {
        right: 0;
        left: auto;
        transform: translateX(105%);
    }

    html[dir="rtl"] .userdash-sidebar.is-open {
        transform: translateX(0);
    }

    html[dir="ltr"] .userdash-sidebar {
        right: auto;
        left: 0;
        transform: translateX(-105%);
    }

    html[dir="ltr"] .userdash-sidebar.is-open {
        transform: translateX(0);
    }

}
/* =========================================================
   PREVENT SIDE-TO-SIDE MOVEMENT DURING RTL SWITCH
   ========================================================= */

html.cleanora-direction-changing .userdash-navbar,
html.cleanora-direction-changing .userdash-sidebar,
html.cleanora-direction-changing .userdash-main,
html.cleanora-direction-changing .userdash-content-shell,
html.cleanora-direction-changing .userdash-sidebar-nav,
html.cleanora-direction-changing .userdash-side-link,
html.cleanora-direction-changing .userdash-section,
html.cleanora-direction-changing .userdash-section.is-visible {
    transition: none !important;
}

/* =========================================================
   CLEANORA ADMIN DASHBOARD
   BASE + LIGHT MODE
   Unique admin-dashboard class names
========================================================= */

:root {

    --cleanora-sage: #6B8E7B;
    --cleanora-cream: #F7F3EA;
    --cleanora-charcoal: #26332D;
    --cleanora-white: #FFFFFF;
    --cleanora-light-sage: #E4ECE7;
    --cleanora-dark-sage: #527262;

    --admindash-bg: #F7F3EA;
    --admindash-surface: #FFFFFF;
    --admindash-surface-soft: #EFF4F0;

    --admindash-text: #26332D;
    --admindash-muted: #66746D;

    --admindash-line: #DDE5DF;

    --admindash-sidebar: #26332D;
    --admindash-sidebar-text: #F7F3EA;
    --admindash-sidebar-muted: #B8C4BE;

    --admindash-accent: #6B8E7B;
    --admindash-accent-dark: #527262;

    --admindash-radius: 26px;

    --admindash-navbar-height: 76px;
    --admindash-sidebar-width: 292px;

    --admindash-transition: 0.3s ease;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body.admindash-body {

    font-family: "Inter", sans-serif;

    background: var(--admindash-bg);

    color: var(--admindash-text);

    overflow: hidden;
}

button,
input,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
}


/* =========================================================
   APP
========================================================= */

.admindash-app {
    min-height: 100vh;
}


/* =========================================================
   NAVBAR
========================================================= */

.admindash-navbar {

    position: fixed;

    z-index: 1000;

    top: 0;
    right: 0;
    left: var(--admindash-sidebar-width);

    height: var(--admindash-navbar-height);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 0 34px;

    background: rgba(255, 255, 255, 0.94);

    border-bottom: 1px solid var(--admindash-line);

    backdrop-filter: blur(16px);
}


.admindash-navbar-title {

    font-family: "Poppins", sans-serif;

    font-size: 18px;

    font-weight: 700;
}


.admindash-navbar-actions {

    display: flex;

    align-items: center;

    gap: 10px;
}


/* =========================================================
   NAVBAR BUTTONS
========================================================= */

.admindash-action-btn,
.admindash-navbar-logout {

    min-width: 44px;

    height: 44px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 0 15px;

    border: 1px solid var(--admindash-line);

    border-radius: 50px;

    background: var(--admindash-surface);

    color: var(--admindash-text);

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    transition: var(--admindash-transition);
}


.admindash-action-btn:hover,
.admindash-navbar-logout:hover {

    transform: translateY(-2px);

    background: var(--admindash-text);

    color: #FFFFFF;

    border-color: var(--admindash-text);
}


.admindash-theme-btn {
    width: 44px;
}


/* =========================================================
   HAMBURGER
   IMPORTANT:
   Hamburger NEVER changes to X.
========================================================= */

.admindash-hamburger {

    display: none;

    width: 44px;
    height: 44px;

    border: 1px solid var(--admindash-line);

    border-radius: 50%;

    background: var(--admindash-surface);

    color: var(--admindash-text);

    padding: 0;
}


.admindash-hamburger span {

    display: block;

    width: 18px;

    height: 2px;

    margin: 4px auto;

    border-radius: 4px;

    background: currentColor;
}


/* =========================================================
   OVERLAY
========================================================= */

.admindash-overlay {
    display: none;
}


/* =========================================================
   SIDEBAR
========================================================= */

.admindash-sidebar {

    position: fixed;

    z-index: 1100;

    inset: 0 auto 0 0;

    width: var(--admindash-sidebar-width);

    height: 100vh;

    display: flex;

    flex-direction: column;

    padding: 24px 18px 18px;

    background: var(--admindash-sidebar);

    color: var(--admindash-sidebar-text);

    overflow: hidden;
}


/* =========================================================
   SIDEBAR TOP
========================================================= */

.admindash-sidebar-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 10px;

    padding: 4px 8px 22px;

    border-bottom: 1px solid rgba(247, 243, 234, 0.12);
}


.admindash-brand-name {

    font-family: "Poppins", sans-serif;

    font-size: 20px;

    font-weight: 800;

    letter-spacing: 0.04em;
}


.admindash-brand-tagline {

    margin-top: 4px;

    color: var(--admindash-sidebar-muted);

    font-size: 11px;
}


/* =========================================================
   ONLY SIDEBAR CLOSE BUTTON
========================================================= */

.admindash-sidebar-close {

    display: none;

    width: 40px;
    height: 40px;

    border: 1px solid rgba(247, 243, 234, 0.16);

    border-radius: 50%;

    background: transparent;

    color: var(--admindash-sidebar-text);
}


/* =========================================================
   PROFILE
========================================================= */

.admindash-profile {

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 20px 8px;
}


.admindash-profile-avatar {

    position: relative;

    flex: 0 0 52px;
}


.admindash-profile-avatar img {

    width: 52px;
    height: 52px;

    display: block;

    object-fit: cover;

    border-radius: 50%;

    border: 2px solid rgba(247, 243, 234, 0.25);
}


.admindash-profile-avatar span {

    position: absolute;

    right: 1px;
    bottom: 2px;

    width: 10px;
    height: 10px;

    border: 2px solid var(--admindash-sidebar);

    border-radius: 50%;

    background: #72B98B;
}


.admindash-profile-info {
    min-width: 0;
}


.admindash-profile-info h2 {

    margin: 0;

    font-family: "Poppins", sans-serif;

    font-size: 16px;

    color: #FFFFFF;
}


.admindash-profile-info p {

    margin: 3px 0;

    color: var(--admindash-sidebar-muted);

    font-size: 11px;

    overflow-wrap: anywhere;
}


.admindash-profile-info small {

    color: #9CC5AE;

    font-size: 10px;

    font-weight: 700;
}


/* =========================================================
   SIDEBAR NAV
========================================================= */

.admindash-sidebar-nav {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    overflow-x: hidden;

    padding: 4px 0 10px;

    scrollbar-width: thin;
}


.admindash-side-link {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 10px;

    margin: 3px 0;

    border: 1px solid transparent;

    border-radius: 18px;

    background: transparent;

    color: var(--admindash-sidebar-text);

    text-align: left;

    transition: var(--admindash-transition);
}


.admindash-side-link:hover {

    background: rgba(255, 255, 255, 0.08);
}


.admindash-side-link.is-active {

    background: #34443C;

    border-color: rgba(156, 197, 174, 0.18);
}


.admindash-side-icon {

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.07);

    color: #DCE8E1;
}


.admindash-side-link.is-active
.admindash-side-icon {

    background: #88B19A;

    color: #1D2923;
}


.admindash-side-link > span:last-child {

    min-width: 0;

    display: block;
}


.admindash-side-link strong {

    display: block;

    font-size: 13px;

    line-height: 1.3;
}


.admindash-side-link small {

    display: block;

    margin-top: 3px;

    color: var(--admindash-sidebar-muted);

    font-size: 10px;

    line-height: 1.3;
}


/* =========================================================
   SIDEBAR BOTTOM
========================================================= */

.admindash-sidebar-bottom {

    margin-top: auto;

    padding-top: 10px;

    border-top: 1px solid rgba(247, 243, 234, 0.12);
}


.admindash-help {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px;

    border-radius: 17px;

    background: #34443C;
}


.admindash-help > span {

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background: #D8E5DE;

    color: #527262;
}


.admindash-help strong {

    display: block;

    font-size: 12px;
}


.admindash-help p {

    margin: 2px 0 0;

    color: var(--admindash-sidebar-muted);

    font-size: 10px;
}


.admindash-sidebar-logout {

    height: 46px;

    margin-top: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border: 1px solid rgba(247, 243, 234, 0.18);

    border-radius: 15px;

    color: #FFFFFF;

    text-decoration: none;

    font-weight: 700;

    font-size: 13px;

    transition: var(--admindash-transition);
}


.admindash-sidebar-logout:hover {

    background: #F7F3EA;

    color: #26332D;
}


/* =========================================================
   MAIN
========================================================= */

.admindash-main {

    position: fixed;

    z-index: 1;

    top: var(--admindash-navbar-height);

    right: 0;

    bottom: 0;

    left: var(--admindash-sidebar-width);

    overflow-y: auto;

    overflow-x: hidden;

    padding: 38px 42px 48px;
}


/* =========================================================
   DYNAMIC PANELS
========================================================= */

.admindash-panel {

    display: none;

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    animation: admindashPanelIn 0.35s ease both;
}


.admindash-panel.is-visible {
    display: block;
}


@keyframes admindashPanelIn {

    from {

        opacity: 0;

        transform: translateY(10px);
    }

    to {

        opacity: 1;

        transform: none;
    }
}


/* =========================================================
   HEADINGS
========================================================= */

.admindash-heading,
.admindash-page-heading {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 28px;

    margin-bottom: 28px;
}


.admindash-page-heading {
    display: block;
}


.admindash-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--admindash-accent-dark);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.08em;
}


.admindash-heading h1,
.admindash-page-heading h1 {

    margin: 8px 0;

    font-family: "Poppins", sans-serif;

    font-size: clamp(32px, 4vw, 52px);

    line-height: 1.05;
}


.admindash-heading p,
.admindash-page-heading p {

    max-width: 760px;

    margin: 0;

    color: var(--admindash-muted);

    font-size: 17px;

    line-height: 1.75;
}


/* =========================================================
   LIVE BOX
========================================================= */

.admindash-live-box {

    min-width: 190px;

    padding: 18px 20px;

    border: 1px solid var(--admindash-line);

    border-radius: 22px;

    background: var(--admindash-surface);
}


.admindash-live-box span,
.admindash-live-box small {

    display: block;

    color: var(--admindash-muted);

    font-size: 11px;
}


.admindash-live-box strong {

    display: block;

    margin: 4px 0;

    font-family: "Poppins", sans-serif;

    font-size: 24px;
}


.admindash-live-box small i {
    color: #6EAF83;
}


/* =========================================================
   METRICS
========================================================= */

.admindash-metric-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin-bottom: 18px;
}


.admindash-metric {

    min-width: 0;

    display: flex;

    gap: 14px;

    padding: 22px;

    border: 1px solid var(--admindash-line);

    border-radius: var(--admindash-radius);

    background: var(--admindash-surface);
}


.admindash-metric-icon {

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: grid;

    place-items: center;

    border-radius: 16px;

    background: var(--admindash-surface-soft);

    color: var(--admindash-accent-dark);
}


.admindash-metric small,
.admindash-metric p {

    display: block;

    color: var(--admindash-muted);

    font-size: 12px;
}


.admindash-metric strong {

    display: block;

    margin: 3px 0;

    font-family: "Poppins", sans-serif;

    font-size: 29px;
}


.admindash-metric p {

    margin: 0;

    font-size: 11px;
}


/* =========================================================
   CONTENT GRIDS
========================================================= */

.admindash-overview-grid,
.admindash-analytics-grid {

    display: grid;

    grid-template-columns: 1.2fr 0.8fr;

    gap: 18px;
}


.admindash-content-card {

    min-width: 0;

    padding: 26px;

    border: 1px solid var(--admindash-line);

    border-radius: var(--admindash-radius);

    background: var(--admindash-surface);
}


/* =========================================================
   CARD HEADINGS
========================================================= */

.admindash-card-heading {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 18px;

    margin-bottom: 22px;
}


.admindash-card-heading span {

    color: var(--admindash-muted);

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.06em;
}


.admindash-card-heading h2 {

    margin: 5px 0 0;

    font-family: "Poppins", sans-serif;

    font-size: 21px;
}


.admindash-card-heading > b {

    color: var(--admindash-accent-dark);

    font-size: 13px;
}


.admindash-status {

    padding: 7px 11px;

    border-radius: 50px;

    background: var(--admindash-surface-soft);

    color: var(--admindash-accent-dark) !important;

    text-transform: none !important;

    letter-spacing: 0 !important;
}


/* =========================================================
   PROGRESS
========================================================= */

.admindash-progress-row {

    margin: 20px 0;
}


.admindash-progress-row > span {

    display: inline-block;

    width: 80%;

    color: var(--admindash-muted);

    font-size: 13px;
}


.admindash-progress-row > strong {
    font-size: 12px;
}


.admindash-progress-row > div {

    height: 8px;

    margin-top: 8px;

    overflow: hidden;

    border-radius: 50px;

    background: var(--admindash-surface-soft);
}


.admindash-progress-row i {

    display: block;

    height: 100%;

    border-radius: 50px;

    background: var(--admindash-accent);
}


/* =========================================================
   TEXT ACTION
========================================================= */

.admindash-text-action {

    border: 0;

    background: transparent;

    color: var(--admindash-accent-dark);

    font-weight: 700;
}


/* =========================================================
   ACTIVITY
========================================================= */

.admindash-activity-list > div {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 0;

    border-bottom: 1px solid var(--admindash-line);
}


.admindash-activity-list > div:last-child {
    border-bottom: 0;
}


.admindash-activity-list > div > span {

    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    background: var(--admindash-surface-soft);

    color: var(--admindash-accent-dark);
}


.admindash-activity-list div div {

    min-width: 0;

    flex: 1;
}


.admindash-activity-list strong,
.admindash-activity-list small {

    display: block;
}


.admindash-activity-list strong {
    font-size: 13px;
}


.admindash-activity-list small {

    margin-top: 3px;

    color: var(--admindash-muted);

    font-size: 11px;
}


.admindash-activity-list b {

    font-size: 11px;

    white-space: nowrap;
}


/* =========================================================
   ANALYTICS BARS
========================================================= */

.admindash-bars {

    height: 260px;

    display: flex;

    align-items: flex-end;

    gap: 12px;

    padding-top: 18px;
}


.admindash-bars > div {

    flex: 1;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    align-items: center;

    gap: 7px;
}


.admindash-bars i {

    width: min(38px, 70%);

    min-height: 18px;

    display: block;

    border-radius: 9px 9px 4px 4px;

    background: var(--admindash-accent);
}


.admindash-bars small {

    color: var(--admindash-muted);

    font-size: 10px;
}


/* =========================================================
   DEMAND
========================================================= */

.admindash-demand span {

    display: flex;

    justify-content: space-between;

    margin: 18px 0 7px;

    font-size: 13px;
}


.admindash-demand span b {
    color: var(--admindash-accent-dark);
}


.admindash-demand > div {

    height: 8px;

    overflow: hidden;

    border-radius: 50px;

    background: var(--admindash-surface-soft);
}


.admindash-demand i {

    display: block;

    height: 100%;

    border-radius: 50px;

    background: var(--admindash-accent);
}


/* =========================================================
   TOOLBAR
========================================================= */

.admindash-toolbar {

    display: flex;

    gap: 12px;

    margin-bottom: 18px;
}


.admindash-toolbar input,
.admindash-toolbar select,
.admindash-settings-grid input,
.admindash-settings-grid select {

    width: 100%;

    min-height: 48px;

    padding: 0 15px;

    border: 1px solid var(--admindash-line);

    border-radius: 14px;

    background: var(--admindash-surface);

    color: var(--admindash-text);

    outline: none;
}


.admindash-toolbar input:focus,
.admindash-toolbar select:focus,
.admindash-settings-grid input:focus,
.admindash-settings-grid select:focus {

    border-color: var(--admindash-accent);

    box-shadow:
        0 0 0 3px rgba(107, 142, 123, 0.13);
}


.admindash-toolbar input {
    max-width: 520px;
}


/* =========================================================
   USERS + BOOKINGS
========================================================= */

.admindash-user-list,
.admindash-booking-list {

    display: grid;

    gap: 10px;
}


.admindash-user-list article,
.admindash-booking-list article {

    display: flex;

    align-items: center;

    gap: 15px;

    min-width: 0;

    padding: 16px 18px;

    border: 1px solid var(--admindash-line);

    border-radius: 18px;

    background: var(--admindash-surface);
}


.admindash-user-list article > div {

    min-width: 0;

    flex: 1;
}


.admindash-user-list strong,
.admindash-user-list small,
.admindash-booking-list strong,
.admindash-booking-list span {

    display: block;
}


.admindash-user-list small,
.admindash-booking-list span {

    margin-top: 3px;

    color: var(--admindash-muted);

    font-size: 11px;
}


.admindash-user-list b {
    font-size: 11px;
}


.admindash-user-list em {

    padding: 7px 10px;

    border-radius: 50px;

    background: var(--admindash-surface-soft);

    color: var(--admindash-accent-dark);

    font-size: 10px;

    font-style: normal;

    font-weight: 700;
}


.admindash-user-avatar {

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--admindash-surface-soft);

    color: var(--admindash-accent-dark);

    font-size: 11px;

    font-weight: 800;
}


.admindash-booking-list article > div {

    min-width: 0;

    flex: 1;
}


/* =========================================================
   BOOKING STATUS
========================================================= */

.admindash-booking-status {

    padding: 8px 11px;

    border-radius: 50px;

    font-size: 10px;

    font-style: normal;

    font-weight: 700;

    white-space: nowrap;
}


.admindash-booking-status.scheduled {

    background: #E4ECE7;

    color: #527262;
}


.admindash-booking-status.assigned {

    background: #E8F1F3;

    color: #3E6871;
}


.admindash-booking-status.progress {

    background: #F2ECDD;

    color: #866A37;
}


.admindash-booking-status.pending {

    background: #F1E8E8;

    color: #805757;
}


/* =========================================================
   SERVICES + STATS
========================================================= */

.admindash-service-grid,
.admindash-stats-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;
}


.admindash-service-grid article,
.admindash-stats-grid article {

    padding: 24px;

    border: 1px solid var(--admindash-line);

    border-radius: 22px;

    background: var(--admindash-surface);
}


.admindash-service-grid article > span {

    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    background: var(--admindash-surface-soft);

    color: var(--admindash-accent-dark);
}


.admindash-service-grid h2 {

    margin: 18px 0 8px;

    font-family: "Poppins", sans-serif;

    font-size: 18px;
}


.admindash-service-grid p {

    min-height: 52px;

    margin: 0 0 14px;

    color: var(--admindash-muted);

    font-size: 13px;

    line-height: 1.6;
}


.admindash-service-grid strong {

    font-size: 12px;

    color: var(--admindash-accent-dark);
}


/* =========================================================
   STATS
========================================================= */

.admindash-stats-grid {

    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


.admindash-stats-grid small,
.admindash-stats-grid strong,
.admindash-stats-grid span {

    display: block;
}


.admindash-stats-grid small {

    color: var(--admindash-muted);

    font-size: 12px;
}


.admindash-stats-grid strong {

    margin: 7px 0;

    font-family: "Poppins", sans-serif;

    font-size: 30px;
}


.admindash-stats-grid span {

    color: var(--admindash-accent-dark);

    font-size: 11px;

    font-weight: 700;
}


/* =========================================================
   REVIEWS
========================================================= */

.admindash-review-summary {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 18px;

    padding: 22px 26px;

    border: 1px solid var(--admindash-line);

    border-radius: 22px;

    background: var(--admindash-surface);
}


.admindash-review-summary > strong {

    font-family: "Poppins", sans-serif;

    font-size: 42px;
}


.admindash-review-summary span {

    display: block;

    letter-spacing: 2px;
}


.admindash-review-summary small {

    display: block;

    margin-top: 4px;

    color: var(--admindash-muted);

    font-size: 12px;
}


.admindash-review-list {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;
}


.admindash-review-list article {

    padding: 24px;

    border: 1px solid var(--admindash-line);

    border-radius: 22px;

    background: var(--admindash-surface);
}


.admindash-review-list article > span {

    letter-spacing: 2px;

    color: #A37B36;
}


.admindash-review-list p {

    color: var(--admindash-muted);

    font-size: 13px;

    line-height: 1.7;
}


.admindash-review-list strong {
    font-size: 12px;
}


/* =========================================================
   SETTINGS
========================================================= */

.admindash-settings-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


.admindash-settings-grid label {

    display: block;

    padding: 20px;

    border: 1px solid var(--admindash-line);

    border-radius: 20px;

    background: var(--admindash-surface);
}


.admindash-settings-grid label > span {

    display: block;

    margin-bottom: 8px;

    font-size: 12px;

    font-weight: 700;
}


.admindash-save-btn {

    min-height: 48px;

    margin-top: 18px;

    padding: 0 20px;

    border: 0;

    border-radius: 50px;

    background: var(--admindash-accent);

    color: #FFFFFF;

    font-weight: 800;

    transition: var(--admindash-transition);
}


.admindash-save-btn:hover {

    transform: translateY(-2px);

    background: var(--admindash-accent-dark);
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {

    :root {
        --admindash-sidebar-width: 270px;
    }

    .admindash-navbar {
        padding: 0 24px;
    }

    .admindash-main {
        padding: 32px 26px 42px;
    }

    .admindash-metric-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .admindash-service-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   TABLET
   MOBILE-L
   MOBILE-M
   MOBILE-S
========================================================= */

@media (max-width: 1023px) {

    body.admindash-body {
        overflow: hidden;
    }


    .admindash-navbar {

        left: 0;

        padding: 0 18px;
    }


    .admindash-navbar-title {
        font-size: 15px;
    }


    /* Hide desktop logout */

    .admindash-navbar-logout {
        display: none;
    }


    /* Show hamburger */

    .admindash-hamburger {

        display: block;

        color: var(--admindash-text);
    }


    /* Mobile sidebar */

    .admindash-sidebar {

        width: min(88vw, 330px);

        transform: translateX(-105%);

        transition: transform 0.3s ease;

        box-shadow:
            20px 0 50px rgba(0, 0, 0, 0.12);
    }


    .admindash-sidebar.is-open {
        transform: translateX(0);
    }


    /* X appears only inside sidebar */

    .admindash-sidebar-close {
        display: block;
    }


    /* Overlay */

    .admindash-overlay {

        position: fixed;

        z-index: 1050;

        inset: 0;

        display: block;

        visibility: hidden;

        opacity: 0;

        background: rgba(10, 18, 14, 0.52);

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease;
    }


    .admindash-overlay.is-visible {

        visibility: visible;

        opacity: 1;
    }


    .admindash-main {

        left: 0;

        padding: 30px 20px 40px;
    }


    .admindash-heading {
        display: block;
    }


    .admindash-live-box {

        margin-top: 18px;
    }


    .admindash-overview-grid,
    .admindash-analytics-grid {

        grid-template-columns: 1fr;
    }


    .admindash-review-list {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   MOBILE-L / M
========================================================= */

@media (max-width: 767px) {

    :root {
        --admindash-navbar-height: 70px;
    }


    .admindash-navbar {
        height: 70px;
    }


    .admindash-action-btn {

        min-width: 40px;

        height: 40px;

        padding: 0 12px;
    }


    .admindash-theme-btn {

        width: 40px;

        padding: 0;
    }


    .admindash-hamburger {

        width: 40px;

        height: 40px;
    }


    .admindash-main {

        padding: 24px 14px 34px;
    }


    .admindash-heading h1,
    .admindash-page-heading h1 {

        font-size: 32px;
    }


    .admindash-heading p,
    .admindash-page-heading p {

        font-size: 15px;

        line-height: 1.65;
    }


    .admindash-metric-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    .admindash-metric {

        padding: 15px;

        gap: 9px;

        border-radius: 20px;
    }


    .admindash-metric-icon {

        width: 40px;
        height: 40px;

        flex-basis: 40px;

        border-radius: 12px;
    }


    .admindash-metric strong {
        font-size: 23px;
    }


    .admindash-metric small {
        font-size: 10px;
    }


    .admindash-metric p {
        font-size: 9px;
    }


    .admindash-content-card {

        padding: 20px;

        border-radius: 21px;
    }


    .admindash-toolbar {

        flex-direction: column;
    }


    .admindash-toolbar input {

        max-width: none;
    }


    .admindash-user-list article,
    .admindash-booking-list article {

        align-items: flex-start;

        flex-wrap: wrap;
    }


    .admindash-user-list article > div,
    .admindash-booking-list article > div {

        flex-basis:
            calc(100% - 60px);
    }


    .admindash-user-list b {

        margin-left: 54px;
    }


    .admindash-service-grid,
    .admindash-stats-grid {

        grid-template-columns: 1fr;
    }


    .admindash-review-list {

        grid-template-columns: 1fr;
    }


    .admindash-settings-grid {

        grid-template-columns: 1fr;
    }


    .admindash-bars {

        height: 210px;

        gap: 6px;
    }
}


/* =========================================================
   MOBILE-S
========================================================= */

@media (max-width: 479px) {

    .admindash-navbar {

        padding: 0 10px;

        gap: 8px;
    }


    .admindash-navbar-title {
        font-size: 13px;
    }


    .admindash-navbar-actions {
        gap: 5px;
    }


    .admindash-action-btn {

        height: 38px;

        min-width: 38px;

        padding: 0 9px;

        font-size: 12px;
    }


    .admindash-theme-btn,
    .admindash-hamburger {

        width: 38px;
    }


    .admindash-main {

        padding: 20px 10px 28px;
    }


    .admindash-heading h1,
    .admindash-page-heading h1 {

        font-size: 28px;
    }


    .admindash-metric-grid {

        grid-template-columns: 1fr;
    }


    .admindash-metric {
        align-items: center;
    }


    .admindash-live-box {
        min-width: 0;
    }


    .admindash-user-list article,
    .admindash-booking-list article {

        padding: 14px;
    }


    .admindash-card-heading h2 {
        font-size: 18px;
    }
}

/* =========================================================
   ADMIN DASHBOARD — SCROLLABLE CONTENT AREA
   Navbar + Sidebar remain fixed/sticky
   Only the dashboard content scrolls
   ========================================================= */

.admindash-main {
    height: calc(100vh - 80px);
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scroll-behavior: smooth;
}

/* Content wrapper must be allowed to grow */
.admindash-content-shell {
    min-height: 100%;
    height: auto;
    overflow: visible;
}

/* Active dashboard panel should grow naturally */
.admindash-panel {
    height: auto;
    min-height: 100%;
    overflow: visible;
}

/* Better scrollbar */
.admindash-main::-webkit-scrollbar {
    width: 8px;
}

.admindash-main::-webkit-scrollbar-track {
    background: transparent;
}

.admindash-main::-webkit-scrollbar-thumb {
    background: rgba(107, 142, 123, 0.45);
    border-radius: 20px;
}

.admindash-main::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 142, 123, 0.7);
}


/* =========================================================
   LAPTOP / DESKTOP
   ========================================================= */

@media (min-width: 1024px) {

    .admindash-main {
        height: calc(100vh - 80px);
        overflow-y: auto;
        overflow-x: hidden;
    }
     /* Desktop already shows the navbar logout button, so hide the
       duplicate logout button at the bottom of the sidebar. */
    .admindash-sidebar-logout {
        display: none;
    }

}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 1023px) {

    .admindash-main {
        height: calc(100vh - 80px);
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .admindash-content-shell {
        height: auto;
        min-height: 100%;
    }

    .admindash-panel {
        height: auto;
        min-height: 100%;
    }

}

/* Hide Admin Dashboard sidebar scrollbar */
.admindash-sidebar-nav {
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE / Edge */
}

.admindash-sidebar-nav::-webkit-scrollbar {
    display: none;              /* Chrome / Edge / Safari */
}
/* =========================================================
   CLEANORA 404 PAGE
   LIGHT MODE / BASE STYLES
========================================================= */

:root {

    --cleanora-sage: #6B8E7B;
    --cleanora-cream: #F7F3EA;
    --cleanora-charcoal: #26332D;
    --cleanora-white: #FFFFFF;
    --cleanora-light-sage: #E4ECE7;
    --cleanora-dark-sage: #527262;

    --cleanora-transition: 0.3s ease;

    --cleanora404-bg: #F7F3EA;
    --cleanora404-surface: #FFFFFF;
    --cleanora404-text: #26332D;
    --cleanora404-muted: #68766F;
    --cleanora404-line: #DCE5DF;

}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    min-height: 100%;
    scroll-behavior: smooth;
}


body.cleanora404-body {

    min-height: 100vh;

    font-family: "Inter", sans-serif;

    background: var(--cleanora404-bg);

    color: var(--cleanora404-text);

    overflow-x: hidden;

    display: flex;
    flex-direction: column;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}


button,
a {
    font-family: inherit;
}


/* =========================================================
   TOP ACTIONS
========================================================= */

.cleanora404-actions {

    position: fixed;

    top: 22px;
    right: 28px;

    z-index: 100;

    display: flex;
    align-items: center;
    gap: 10px;
}


.cleanora404-action-btn {

    width: 48px;
    height: 44px;

    border: 1px solid var(--cleanora404-line);

    border-radius: 50px;

    background: var(--cleanora404-surface);

    color: var(--cleanora404-text);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    font-size: 14px;
    font-weight: 700;

    transition:
        transform var(--cleanora-transition),
        background-color var(--cleanora-transition),
        color var(--cleanora-transition),
        border-color var(--cleanora-transition);
}


.cleanora404-action-btn:hover {

    transform: translateY(-3px);

    background: var(--cleanora-light-sage);

    border-color: var(--cleanora-sage);

}


.cleanora404-theme-btn {

    font-size: 16px;
}


/* =========================================================
   MAIN
========================================================= */

.cleanora404-main {

    flex: 1;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 100px 30px 40px;

    position: relative;
}


.cleanora404-section {

    width: min(1050px, 100%);

    min-height: 600px;

    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    overflow: hidden;

    border-radius: 36px;

    background: var(--cleanora404-surface);

    border: 1px solid var(--cleanora404-line);

    padding: 70px 50px;

    box-shadow:
        0 20px 60px rgba(38, 51, 45, 0.08);
}


/* =========================================================
   DECORATIONS
========================================================= */

.cleanora404-decoration {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    opacity: 0.6;
}


.cleanora404-decoration-one {

    width: 180px;
    height: 180px;

    top: -80px;
    left: -70px;

    background: var(--cleanora-light-sage);
}


.cleanora404-decoration-two {

    width: 120px;
    height: 120px;

    right: -45px;
    top: 90px;

    background: #E9EFEA;
}


.cleanora404-decoration-three {

    width: 200px;
    height: 200px;

    right: -100px;
    bottom: -110px;

    background: var(--cleanora-light-sage);
}


/* =========================================================
   404 VISUAL
========================================================= */

.cleanora404-visual {

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-bottom: 25px;

    z-index: 2;
}


.cleanora404-number {

    font-family: "Poppins", sans-serif;

    font-size: clamp(110px, 16vw, 190px);

    line-height: 0.8;

    font-weight: 800;

    color: var(--cleanora-sage);

    letter-spacing: -10px;
}


.cleanora404-cleaning-icon {

    width: 110px;
    height: 110px;

    border-radius: 32px;

    background: var(--cleanora-charcoal);

    color: var(--cleanora-white);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 50px;

    transform: rotate(-8deg);

    box-shadow:
        0 18px 35px rgba(38, 51, 45, 0.18);

    animation: cleanora404-float 3.5s ease-in-out infinite;
}


@keyframes cleanora404-float {

    0%,
    100% {
        transform: translateY(0) rotate(-8deg);
    }

    50% {
        transform: translateY(-10px) rotate(4deg);
    }

}


/* =========================================================
   CONTENT
========================================================= */

.cleanora404-content {

    position: relative;

    z-index: 3;

    max-width: 720px;
}


.cleanora404-eyebrow {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    color: var(--cleanora-dark-sage);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 14px;
}


.cleanora404-eyebrow i {
    font-size: 13px;
}


.cleanora404-content h1 {

    font-family: "Poppins", sans-serif;

    font-size: clamp(34px, 5vw, 58px);

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -1.5px;

    color: var(--cleanora404-text);

    margin-bottom: 18px;
}


.cleanora404-content p {

    max-width: 650px;

    margin: 0 auto;

    font-size: 17px;

    line-height: 1.8;

    color: var(--cleanora404-muted);
}


/* =========================================================
   BUTTONS
========================================================= */

.cleanora404-buttons {

    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 30px;
}


.cleanora404-primary-btn,
.cleanora404-secondary-btn {

    min-height: 52px;

    padding: 0 25px;

    border-radius: 50px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    font-size: 15px;

    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform var(--cleanora-transition),
        background-color var(--cleanora-transition),
        color var(--cleanora-transition),
        border-color var(--cleanora-transition);
}


.cleanora404-primary-btn {

    background: var(--cleanora-sage);

    color: var(--cleanora-white);

    border: 1px solid var(--cleanora-sage);
}


.cleanora404-primary-btn:hover {

    background: var(--cleanora-dark-sage);

    border-color: var(--cleanora-dark-sage);

    transform: translateY(-3px);
}


.cleanora404-secondary-btn {

    background: transparent;

    color: var(--cleanora404-text);

    border: 1px solid var(--cleanora404-line);
}


.cleanora404-secondary-btn:hover {

    background: var(--cleanora-light-sage);

    border-color: var(--cleanora-sage);

    transform: translateY(-3px);
}


/* =========================================================
   HELP BOX
========================================================= */

.cleanora404-help {

    position: relative;

    z-index: 3;

    margin-top: 42px;

    padding: 14px 20px;

    border-radius: 20px;

    background: var(--cleanora-light-sage);

    display: flex;

    align-items: center;

    gap: 13px;

    text-align: left;
}


.cleanora404-help-icon {

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border-radius: 14px;

    background: var(--cleanora-white);

    color: var(--cleanora-dark-sage);

    display: flex;
    align-items: center;
    justify-content: center;
}


.cleanora404-help div:last-child {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.cleanora404-help strong {

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    color: var(--cleanora404-text);
}


.cleanora404-help span {

    font-size: 12px;

    color: var(--cleanora404-muted);
}


/* =========================================================
   FOOTER
========================================================= */

.cleanora404-footer {

    width: 100%;

    padding: 18px 25px 25px;

    text-align: center;

    color: var(--cleanora404-muted);

    font-size: 13px;
}


.cleanora404-footer p {
    margin: 0;
}


.cleanora404-footer span:first-child {

    font-family: "Poppins", sans-serif;

    font-weight: 700;

    color: var(--cleanora404-text);
}


.cleanora404-footer-dot {

    margin: 0 7px;

    color: var(--cleanora-sage);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1023px) {

    .cleanora404-actions {

        top: 18px;
        right: 20px;

    }


    .cleanora404-main {

        padding:
            90px
            20px
            30px;

    }


    .cleanora404-section {

        min-height: 570px;

        padding: 60px 35px;

        border-radius: 30px;

    }

}


/* =========================================================
   MOBILE-L / MOBILE-M
========================================================= */

@media (max-width: 767px) {

    .cleanora404-actions {

        top: 14px;
        right: 14px;

        gap: 7px;

    }


    .cleanora404-action-btn {

        width: 43px;
        height: 40px;

        font-size: 12px;

    }


    .cleanora404-theme-btn {

        font-size: 15px;

    }


    .cleanora404-main {

        padding:
            75px
            14px
            20px;

    }


    .cleanora404-section {

        min-height: 600px;

        padding: 55px 20px 45px;

        border-radius: 26px;

    }


    .cleanora404-visual {

        gap: 7px;

        margin-bottom: 25px;

    }


    .cleanora404-number {

        font-size: clamp(80px, 24vw, 125px);

        letter-spacing: -6px;

    }


    .cleanora404-cleaning-icon {

        width: 78px;
        height: 78px;

        border-radius: 23px;

        font-size: 34px;

    }


    .cleanora404-content h1 {

        font-size: clamp(30px, 8vw, 42px);

        letter-spacing: -0.8px;

    }


    .cleanora404-content p {

        font-size: 15px;

        line-height: 1.7;

    }


    .cleanora404-buttons {

        flex-direction: column;

        width: 100%;

    }


    .cleanora404-primary-btn,
    .cleanora404-secondary-btn {

        width: 100%;

        max-width: 330px;

    }


    .cleanora404-help {

        width: 100%;

        max-width: 330px;

        margin-top: 35px;

    }

}


/* =========================================================
   MOBILE-S
========================================================= */

@media (max-width: 479px) {

    .cleanora404-actions {

        top: 10px;
        right: 10px;

    }


    .cleanora404-action-btn {

        width: 40px;
        height: 38px;

    }


    .cleanora404-main {

        padding:
            68px
            10px
            15px;

    }


    .cleanora404-section {

        min-height: 590px;

        padding:
            45px
            15px
            35px;

        border-radius: 22px;

    }


    .cleanora404-number {

        font-size: 78px;

    }


    .cleanora404-cleaning-icon {

        width: 65px;
        height: 65px;

        border-radius: 19px;

        font-size: 27px;

    }


    .cleanora404-content h1 {

        font-size: 29px;

    }


    .cleanora404-content p {

        font-size: 14px;

    }


    .cleanora404-help {

        padding: 12px 14px;

    }


    .cleanora404-footer {

        font-size: 12px;

        padding-bottom: 18px;

    }

}


/* =========================================================
   DIRECTION CHANGE
   Prevent sideways animation during RTL switch
========================================================= */

html.cleanora404-direction-changing .cleanora404-action-btn,
html.cleanora404-direction-changing .cleanora404-section,
html.cleanora404-direction-changing .cleanora404-main,
html.cleanora404-direction-changing .cleanora404-footer {

    transition: none !important;

}

/* =========================================================
   CLEANORA COMING SOON
   BASE / LIGHT MODE
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --cleanora-sage: #6B8E7B;
    --cleanora-cream: #F7F3EA;
    --cleanora-charcoal: #26332D;
    --cleanora-white: #FFFFFF;
    --cleanora-light-sage: #E4ECE7;
    --cleanora-dark-sage: #527262;

    --cleanora-coming-bg: #F7F3EA;
    --cleanora-coming-surface: #FFFFFF;
    --cleanora-coming-text: #26332D;
    --cleanora-coming-muted: #68766F;
    --cleanora-coming-line: #DCE5DF;

    --cleanora-coming-transition: 0.3s ease;

}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    min-height: 100%;
}


body.cleanora-coming-body {

    min-height: 100vh;

    font-family: "Inter", sans-serif;

    background: var(--cleanora-coming-bg);

    color: var(--cleanora-coming-text);

    display: flex;

    flex-direction: column;

    overflow-x: hidden;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;

}


button,
a {
    font-family: inherit;
}


/* =========================================================
   TOP ACTIONS
========================================================= */

.cleanora-coming-actions {

    position: fixed;

    top: 22px;
    right: 28px;

    z-index: 100;

    display: flex;

    align-items: center;

    gap: 10px;

}


.cleanora-coming-action-btn {

    width: 48px;
    height: 44px;

    border-radius: 50px;

    border: 1px solid var(--cleanora-coming-line);

    background: var(--cleanora-coming-surface);

    color: var(--cleanora-coming-text);

    display: flex;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    font-size: 14px;

    font-weight: 700;

    transition:
        transform var(--cleanora-coming-transition),
        background-color var(--cleanora-coming-transition),
        color var(--cleanora-coming-transition),
        border-color var(--cleanora-coming-transition);

}


.cleanora-coming-action-btn:hover {

    transform: translateY(-3px);

    background: var(--cleanora-light-sage);

    border-color: var(--cleanora-sage);

}


.cleanora-coming-theme-btn {

    font-size: 16px;

}


/* =========================================================
   MAIN
========================================================= */

.cleanora-coming-main {

    flex: 1;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 90px 30px 30px;

}


.cleanora-coming-section {

    width: min(1100px, 100%);

    min-height: 650px;

    position: relative;

    overflow: hidden;

    border-radius: 36px;

    border: 1px solid var(--cleanora-coming-line);

    background: var(--cleanora-coming-surface);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 65px 50px 45px;

    box-shadow:
        0 25px 70px rgba(38, 51, 45, 0.08);

}


/* =========================================================
   DECORATIONS
========================================================= */

.cleanora-coming-decoration {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

}


.cleanora-coming-decoration-one {

    width: 260px;
    height: 260px;

    left: -120px;
    top: -120px;

    background: var(--cleanora-light-sage);

}


.cleanora-coming-decoration-two {

    width: 170px;
    height: 170px;

    right: -70px;
    top: 80px;

    background: #EDF2EE;

}


.cleanora-coming-decoration-three {

    width: 250px;
    height: 250px;

    right: -120px;
    bottom: -140px;

    background: var(--cleanora-light-sage);

}


/* =========================================================
   CONTENT
========================================================= */

.cleanora-coming-content {

    width: 100%;

    max-width: 850px;

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

}


/* =========================================================
   COMING SOON TAG
========================================================= */

.cleanora-coming-tag {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 9px 17px;

    border-radius: 50px;

    background: var(--cleanora-light-sage);

    color: var(--cleanora-dark-sage);

    font-family: "Poppins", sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.4px;

    margin-bottom: 22px;

}


.cleanora-coming-tag-dot {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--cleanora-sage);

    animation: cleanora-coming-pulse 1.6s ease-in-out infinite;

}


@keyframes cleanora-coming-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.45;
    }

}


/* =========================================================
   BRAND
========================================================= */

.cleanora-coming-brand {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

}


.cleanora-coming-brand-icon {

    width: 43px;
    height: 43px;

    border-radius: 14px;

    background: var(--cleanora-charcoal);

    color: var(--cleanora-white);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

}


.cleanora-coming-brand > span {

    font-family: "Poppins", sans-serif;

    font-size: 22px;

    font-weight: 700;

    color: var(--cleanora-coming-text);

}


/* =========================================================
   HEADING
========================================================= */

.cleanora-coming-content h1 {

    font-family: "Poppins", sans-serif;

    font-size: clamp(42px, 6vw, 72px);

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -2px;

    color: var(--cleanora-coming-text);

    margin-bottom: 20px;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.cleanora-coming-description {

    max-width: 650px;

    font-size: 17px;

    line-height: 1.8;

    color: var(--cleanora-coming-muted);

}


/* =========================================================
   COUNTDOWN
========================================================= */

.cleanora-coming-countdown {

    width: 100%;

    max-width: 760px;

    margin-top: 38px;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 15px;

}


.cleanora-coming-time-box {

    min-height: 130px;

    padding: 20px 12px;

    border-radius: 25px;

    background: var(--cleanora-light-sage);

    border: 1px solid var(--cleanora-coming-line);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    transition:
        transform var(--cleanora-coming-transition),
        background-color var(--cleanora-coming-transition);

}


.cleanora-coming-time-box:hover {

    transform: translateY(-5px);

}


.cleanora-coming-time-box strong {

    font-family: "Poppins", sans-serif;

    font-size: clamp(36px, 5vw, 55px);

    line-height: 1;

    font-weight: 800;

    color: var(--cleanora-dark-sage);

    font-variant-numeric: tabular-nums;

}


.cleanora-coming-time-box span {

    margin-top: 10px;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: var(--cleanora-coming-muted);

}


/* =========================================================
   LIVE MESSAGE
========================================================= */

.cleanora-coming-live {

    margin-top: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    font-size: 13px;

    color: var(--cleanora-coming-muted);

}


.cleanora-coming-live-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--cleanora-sage);

    animation: cleanora-coming-pulse 1.5s ease-in-out infinite;

}


/* =========================================================
   HOME BUTTON
========================================================= */

.cleanora-coming-home-btn {

    margin-top: 27px;

    min-height: 52px;

    padding: 0 27px;

    border-radius: 50px;

    background: var(--cleanora-sage);

    border: 1px solid var(--cleanora-sage);

    color: var(--cleanora-white);

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-size: 15px;

    font-weight: 700;

    transition:
        transform var(--cleanora-coming-transition),
        background-color var(--cleanora-coming-transition);

}


.cleanora-coming-home-btn:hover {

    transform: translateY(-3px);

    background: var(--cleanora-dark-sage);

}


/* =========================================================
   BOTTOM FEATURES
========================================================= */

.cleanora-coming-bottom {

    position: relative;

    z-index: 2;

    width: min(720px, 100%);

    margin-top: 45px;

    padding-top: 25px;

    border-top: 1px solid var(--cleanora-coming-line);

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 30px;

}


.cleanora-coming-bottom-item {

    display: flex;

    align-items: center;

    gap: 12px;

    text-align: left;

}


.cleanora-coming-bottom-icon {

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border-radius: 13px;

    background: var(--cleanora-light-sage);

    color: var(--cleanora-dark-sage);

    display: flex;

    align-items: center;

    justify-content: center;

}


.cleanora-coming-bottom-item > div:last-child {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.cleanora-coming-bottom-item strong {

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    color: var(--cleanora-coming-text);

}


.cleanora-coming-bottom-item span {

    font-size: 11px;

    color: var(--cleanora-coming-muted);

}


.cleanora-coming-bottom-line {

    width: 1px;

    height: 35px;

    background: var(--cleanora-coming-line);

}


/* =========================================================
   FOOTER
========================================================= */

.cleanora-coming-footer {

    width: 100%;

    padding: 17px 20px 24px;

    text-align: center;

    color: var(--cleanora-coming-muted);

    font-size: 13px;

}


.cleanora-coming-footer p {
    margin: 0;
}


.cleanora-coming-footer-brand {

    font-family: "Poppins", sans-serif;

    font-weight: 700;

    color: var(--cleanora-coming-text);

}


.cleanora-coming-footer-dot {

    margin: 0 7px;

    color: var(--cleanora-sage);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1023px) {

    .cleanora-coming-actions {

        top: 18px;
        right: 20px;

    }


    .cleanora-coming-main {

        padding:
            85px
            20px
            25px;

    }


    .cleanora-coming-section {

        min-height: 620px;

        padding:
            60px
            35px
            40px;

        border-radius: 30px;

    }


    .cleanora-coming-bottom {

        margin-top: 38px;

    }

}


/* =========================================================
   MOBILE-L / MOBILE-M
========================================================= */

@media (max-width: 767px) {

    .cleanora-coming-actions {

        top: 14px;
        right: 14px;

        gap: 7px;

    }


    .cleanora-coming-action-btn {

        width: 43px;
        height: 40px;

        font-size: 12px;

    }


    .cleanora-coming-theme-btn {

        font-size: 15px;

    }


    .cleanora-coming-main {

        padding:
            72px
            14px
            18px;

    }


    .cleanora-coming-section {

        min-height: auto;

        padding:
            50px
            20px
            35px;

        border-radius: 25px;

    }


    .cleanora-coming-brand > span {

        font-size: 20px;

    }


    .cleanora-coming-content h1 {

        font-size: clamp(32px, 8vw, 45px);

        letter-spacing: -1px;

    }


    .cleanora-coming-description {

        font-size: 15px;

        line-height: 1.7;

    }


    .cleanora-coming-countdown {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 10px;

        margin-top: 30px;

    }


    .cleanora-coming-time-box {

        min-height: 105px;

        border-radius: 20px;

    }


    .cleanora-coming-time-box strong {

        font-size: 38px;

    }


    .cleanora-coming-bottom {

        grid-template-columns: 1fr;

        gap: 14px;

        width: 100%;

    }


    .cleanora-coming-bottom-line {

        display: none;

    }


    .cleanora-coming-bottom-item {

        justify-content: center;

        text-align: left;

    }

}


/* =========================================================
   MOBILE-S
========================================================= */

@media (max-width: 479px) {

    .cleanora-coming-actions {

        top: 10px;
        right: 10px;

    }


    .cleanora-coming-action-btn {

        width: 40px;
        height: 38px;

    }


    .cleanora-coming-main {

        padding:
            66px
            10px
            14px;

    }


    .cleanora-coming-section {

        padding:
            42px
            14px
            30px;

        border-radius: 21px;

    }


    .cleanora-coming-tag {

        font-size: 10px;

        padding: 8px 13px;

        letter-spacing: 1px;

    }


    .cleanora-coming-brand-icon {

        width: 39px;
        height: 39px;

        font-size: 16px;

    }


    .cleanora-coming-brand > span {

        font-size: 18px;

    }


    .cleanora-coming-content h1 {

        font-size: 30px;

    }


    .cleanora-coming-description {

        font-size: 14px;

    }


    .cleanora-coming-countdown {

        gap: 8px;

    }


    .cleanora-coming-time-box {

        min-height: 94px;

        padding: 15px 8px;

        border-radius: 17px;

    }


    .cleanora-coming-time-box strong {

        font-size: 32px;

    }


    .cleanora-coming-time-box span {

        font-size: 9px;

        letter-spacing: .7px;

    }


    .cleanora-coming-live {

        font-size: 11px;

        line-height: 1.5;

    }


    .cleanora-coming-home-btn {

        width: 100%;

        max-width: 280px;

    }


    .cleanora-coming-bottom {

        margin-top: 30px;

    }


    .cleanora-coming-footer {

        font-size: 11px;

    }

}


/* =========================================================
   RTL SWITCH TRANSITION LOCK
========================================================= */

html.cleanora-coming-direction-changing
.cleanora-coming-action-btn,
html.cleanora-coming-direction-changing
.cleanora-coming-section,
html.cleanora-coming-direction-changing
.cleanora-coming-main,
html.cleanora-coming-direction-changing
.cleanora-coming-footer,
html.cleanora-coming-direction-changing
.cleanora-coming-bottom {

    transition: none !important;

}


/* =========================================================
   CLEANORA LOGIN PAGE
   LIGHT / BASE STYLES
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

    --cleanora-sage: #6B8E7B;
    --cleanora-cream: #F7F3EA;
    --cleanora-charcoal: #26332D;
    --cleanora-white: #FFFFFF;
    --cleanora-light-sage: #E4ECE7;
    --cleanora-dark-sage: #527262;

    --cleanora-transition: 0.3s ease;

    --cleanora-login-control-size: 46px;

}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    min-height: 100%;
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    font-family: "Inter", sans-serif;

    background-color: var(--cleanora-cream);
    color: var(--cleanora-charcoal);

    overflow-x: hidden;
}


button,
input {
    font: inherit;
}


button {
    cursor: pointer;
}


a {
    text-decoration: none;
    color: inherit;
}


/* =========================================================
   TOP CONTROLS
   OUTSIDE LOGIN CONTAINER
========================================================= */

.cleanora-login-controls {

    position: fixed;

    top: 22px;
    right: 24px;

    z-index: 1000;

    display: flex;
    align-items: center;
    gap: 10px;
}


.cleanora-login-control-btn {

    min-width: var(--cleanora-login-control-size);
    height: var(--cleanora-login-control-size);

    padding: 0 13px;

    border: 1px solid rgba(107, 142, 123, 0.28);

    border-radius: 50px;

    background-color: rgba(255, 255, 255, 0.94);

    color: var(--cleanora-charcoal);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    font-size: 0.82rem;
    font-weight: 700;

    box-shadow: 0 8px 25px rgba(38, 51, 45, 0.10);

    transition:
        background-color var(--cleanora-transition),
        color var(--cleanora-transition),
        border-color var(--cleanora-transition),
        transform var(--cleanora-transition),
        box-shadow var(--cleanora-transition);
}


.cleanora-login-control-btn:hover {

    transform: translateY(-2px);

    background-color: var(--cleanora-sage);

    color: var(--cleanora-white);

    border-color: var(--cleanora-sage);

    box-shadow: 0 12px 28px rgba(82, 114, 98, 0.22);
}


.cleanora-login-control-btn i {
    font-size: 0.9rem;
}


/* =========================================================
   MAIN LOGIN PAGE
========================================================= */

.cleanora-login-page {

    width: 100%;
    min-height: 100vh;

    display: grid;

    grid-template-columns: 1fr 1fr;

    overflow: hidden;
}


/* =========================================================
   LEFT INFORMATION SECTION
========================================================= */

.cleanora-login-info {

    position: relative;

    min-width: 0;
    height: 100vh;

    overflow: hidden;

    background-color: var(--cleanora-dark-sage);

    isolation: isolate;

    animation: cleanoraLoginLeftReveal 0.8s ease both;
}


.cleanora-login-image-wrapper {

    position: absolute;

    inset: 0;

    z-index: -2;
}


.cleanora-login-image {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    animation: cleanoraLoginImageReveal 1.2s ease both;
}


.cleanora-login-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(38, 51, 45, 0.34) 0%,
            rgba(38, 51, 45, 0.58) 52%,
            rgba(38, 51, 45, 0.91) 100%
        );
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.cleanora-login-info-content {

    width: 100%;
    height: 100%;

    padding: 55px 65px 58px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    color: var(--cleanora-white);
}


/* =========================================================
   BRAND
========================================================= */

.cleanora-login-brand {

    width: fit-content;

    display: inline-flex;
    align-items: center;
    gap: 11px;

    color: var(--cleanora-white);

    font-family: "Poppins", sans-serif;

    font-size: 1.45rem;
    font-weight: 700;

    transition:
        opacity var(--cleanora-transition),
        transform var(--cleanora-transition);
}


.cleanora-login-brand:hover {

    opacity: 0.9;

    transform: translateY(-2px);
}


.cleanora-login-brand-icon {

    width: 40px;
    height: 40px;

    border-radius: 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background-color: rgba(255, 255, 255, 0.16);

    border: 1px solid rgba(255, 255, 255, 0.20);

    backdrop-filter: blur(8px);
}


.cleanora-login-brand-icon i {
    font-size: 1rem;
}


/* =========================================================
   INFORMATION TEXT
========================================================= */

.cleanora-login-info-text {

    max-width: 590px;

    margin-top: auto;
    margin-bottom: auto;

    padding-top: 40px;
    padding-bottom: 35px;
}


.cleanora-login-small-title {

    display: block;

    margin-bottom: 15px;

    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 0.16em;

    color: rgba(255, 255, 255, 0.78);
}


.cleanora-login-info-text h1 {

    max-width: 590px;

    margin-bottom: 22px;

    font-family: "Poppins", sans-serif;

    font-size: clamp(2.4rem, 4vw, 4.6rem);

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -0.035em;
}


.cleanora-login-info-text h1 span {

    display: block;

    color: #E4ECE7;
}


.cleanora-login-info-text p {

    max-width: 560px;

    font-size: 1.02rem;

    line-height: 1.8;

    color: rgba(255, 255, 255, 0.82);
}


/* =========================================================
   BENEFITS
========================================================= */

.cleanora-login-benefits {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

    max-width: 720px;
}


.cleanora-login-benefit {

    display: flex;
    align-items: flex-start;

    gap: 12px;

    min-width: 0;

    animation: cleanoraLoginBenefitReveal 0.7s ease both;
}


.cleanora-login-benefit:nth-child(1) {
    animation-delay: 0.2s;
}


.cleanora-login-benefit:nth-child(2) {
    animation-delay: 0.3s;
}


.cleanora-login-benefit:nth-child(3) {
    animation-delay: 0.4s;
}


.cleanora-login-benefit-icon {

    flex: 0 0 auto;

    width: 39px;
    height: 39px;

    border-radius: 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background-color: rgba(255, 255, 255, 0.15);

    border: 1px solid rgba(255, 255, 255, 0.18);
}


.cleanora-login-benefit-icon i {
    font-size: 0.9rem;
}


.cleanora-login-benefit h3 {

    margin-bottom: 4px;

    font-family: "Poppins", sans-serif;

    font-size: 0.84rem;

    line-height: 1.3;

    font-weight: 600;

}


.cleanora-login-benefit p {

    font-size: 0.73rem;

    line-height: 1.5;

    color: rgba(255, 255, 255, 0.70);
}


/* =========================================================
   RIGHT FORM SECTION
========================================================= */

.cleanora-login-form-side {

    min-width: 0;
    height: 100vh;

    overflow-y: auto;
    overflow-x: hidden;

    background-color: var(--cleanora-white);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 70px 55px 55px;

    animation: cleanoraLoginFormReveal 0.8s ease both;
}


.cleanora-login-form-wrapper {

    width: 100%;
    max-width: 490px;

    margin: auto;
}


/* =========================================================
   FORM HEADING
========================================================= */

.cleanora-login-heading {

    margin-bottom: 32px;
}


.cleanora-login-form-label {

    display: inline-block;

    margin-bottom: 10px;

    color: var(--cleanora-sage);

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.14em;
}


.cleanora-login-heading h2 {

    margin-bottom: 9px;

    font-family: "Poppins", sans-serif;

    font-size: clamp(2rem, 3vw, 2.75rem);

    line-height: 1.15;

    font-weight: 700;

    color: var(--cleanora-charcoal);
}


.cleanora-login-heading p {

    font-size: 0.92rem;

    line-height: 1.6;

    color: #64736C;
}


/* =========================================================
   FORM
========================================================= */

.cleanora-login-form {

    width: 100%;
}


.cleanora-login-field {

    margin-bottom: 20px;
}


.cleanora-login-field label {

    display: block;

    margin-bottom: 8px;

    font-size: 0.82rem;
    font-weight: 600;

    color: var(--cleanora-charcoal);
}


.cleanora-login-label-row {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 8px;
}


.cleanora-login-label-row label {
    margin-bottom: 0;
}


.cleanora-login-forgot {

    color: var(--cleanora-dark-sage);

    font-size: 0.75rem;
    font-weight: 600;

    transition: color var(--cleanora-transition);
}


.cleanora-login-forgot:hover {
    color: var(--cleanora-sage);
    text-decoration: underline;
}


/* =========================================================
   INPUT
========================================================= */

.cleanora-login-input-wrapper {

    position: relative;

    width: 100%;
}


.cleanora-login-input-wrapper > i {

    position: absolute;

    left: 17px;
    top: 50%;

    transform: translateY(-50%);

    color: #7E8B85;

    font-size: 0.9rem;

    pointer-events: none;

    transition: color var(--cleanora-transition);
}


.cleanora-login-input-wrapper input {

    width: 100%;
    height: 52px;

    padding: 0 48px 0 47px;

    border: 1px solid #D9E0DC;

    border-radius: 13px;

    outline: none;

    background-color: #FBFCFB;

    color: var(--cleanora-charcoal);

    font-size: 0.87rem;

    transition:
        border-color var(--cleanora-transition),
        box-shadow var(--cleanora-transition),
        background-color var(--cleanora-transition);
}


.cleanora-login-input-wrapper input::placeholder {
    color: #9AA59F;
}


.cleanora-login-input-wrapper input:focus {

    border-color: var(--cleanora-sage);

    background-color: var(--cleanora-white);

    box-shadow: 0 0 0 4px rgba(107, 142, 123, 0.10);
}


.cleanora-login-input-wrapper:focus-within > i {
    color: var(--cleanora-sage);
}


/* =========================================================
   PASSWORD BUTTON
========================================================= */

.cleanora-login-password-toggle {

    position: absolute;

    right: 14px;
    top: 50%;

    width: 32px;
    height: 32px;

    transform: translateY(-50%);

    border: none;

    background: transparent;

    color: #7E8B85;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    transition:
        color var(--cleanora-transition),
        background-color var(--cleanora-transition);
}


.cleanora-login-password-toggle:hover {

    color: var(--cleanora-dark-sage);

    background-color: var(--cleanora-light-sage);
}


/* =========================================================
   ERROR
========================================================= */

.cleanora-login-error {

    display: block;

    min-height: 17px;

    padding-top: 5px;

    color: #B34B4B;

    font-size: 0.72rem;
    line-height: 1.3;
}


/* =========================================================
   REMEMBER ME
========================================================= */

.cleanora-login-options {

    margin-top: -3px;
    margin-bottom: 20px;
}


.cleanora-login-checkbox {

    display: inline-flex;
    align-items: center;

    gap: 9px;

    cursor: pointer;

    color: #66746D;

    font-size: 0.78rem;
}


.cleanora-login-checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


.cleanora-login-checkmark {

    width: 17px;
    height: 17px;

    border: 1px solid #CBD5D0;

    border-radius: 5px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    transition:
        background-color var(--cleanora-transition),
        border-color var(--cleanora-transition);
}


.cleanora-login-checkbox input:checked + .cleanora-login-checkmark {

    background-color: var(--cleanora-sage);

    border-color: var(--cleanora-sage);
}


.cleanora-login-checkbox input:checked + .cleanora-login-checkmark::after {

    content: "\f00c";

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    color: var(--cleanora-white);

    font-size: 0.58rem;
}


/* =========================================================
   SIGN IN BUTTON
========================================================= */

.cleanora-login-submit {

    width: 100%;
    min-height: 53px;

    padding: 12px 18px;

    border: 1px solid var(--cleanora-sage);

    border-radius: 13px;

    background-color: var(--cleanora-sage);

    color: var(--cleanora-white);

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    font-size: 0.86rem;
    font-weight: 700;

    box-shadow: 0 10px 24px rgba(107, 142, 123, 0.20);

    transition:
        background-color var(--cleanora-transition),
        border-color var(--cleanora-transition),
        transform var(--cleanora-transition),
        box-shadow var(--cleanora-transition);
}


.cleanora-login-submit:hover {

    background-color: var(--cleanora-dark-sage);

    border-color: var(--cleanora-dark-sage);

    transform: translateY(-2px);

    box-shadow: 0 14px 28px rgba(82, 114, 98, 0.25);
}


.cleanora-login-submit i {

    font-size: 0.78rem;

    transition: transform var(--cleanora-transition);
}


.cleanora-login-submit:hover i {
    transform: translateX(3px);
}


/* =========================================================
   STATUS
========================================================= */

.cleanora-login-status {

    min-height: 20px;

    margin-top: 9px;

    text-align: center;

    font-size: 0.73rem;
    line-height: 1.4;
}


/* =========================================================
   DIVIDER
========================================================= */

.cleanora-login-divider {

    display: flex;
    align-items: center;

    gap: 13px;

    margin: 23px 0 18px;
}


.cleanora-login-divider span {

    flex: 1;

    height: 1px;

    background-color: #E2E7E4;
}


.cleanora-login-divider p {

    color: #8B9691;

    font-size: 0.68rem;
    font-weight: 600;
}


/* =========================================================
   SOCIAL LOGIN BUTTONS
========================================================= */

.cleanora-login-social {

    width: 78%;
    min-height: 46px;

    margin: 0 auto 11px;

    padding: 10px 17px;

    border: 1px solid #DCE2DF;

    border-radius: 12px;

    background-color: var(--cleanora-white);

    color: var(--cleanora-charcoal);

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    font-size: 0.80rem;
    font-weight: 600;

    transition:
        background-color var(--cleanora-transition),
        border-color var(--cleanora-transition),
        transform var(--cleanora-transition),
        box-shadow var(--cleanora-transition);
}


.cleanora-login-social:hover {

    background-color: #F7F9F7;

    border-color: #C7D2CC;

    transform: translateY(-2px);

    box-shadow: 0 8px 18px rgba(38, 51, 45, 0.08);
}


.cleanora-login-google i {
    color: #DB4437;
}


.cleanora-login-facebook i {
    color: #1877F2;
}


.cleanora-login-apple i {
    color: var(--cleanora-charcoal);
}
/* =========================================================
   SIGNUP
========================================================= */

.cleanora-login-signup {

    margin-top: 22px;

    text-align: center;
}


.cleanora-login-signup p {

    color: #78847E;

    font-size: 0.78rem;

    line-height: 1.5;
}


.cleanora-login-signup a {

    margin-left: 3px;

    color: var(--cleanora-dark-sage);

    font-weight: 700;

    transition: color var(--cleanora-transition);
}


.cleanora-login-signup a:hover {

    color: var(--cleanora-sage);

    text-decoration: underline;
}


/* =========================================================
   INVALID SHAKE
========================================================= */

.cleanora-login-shake {

    animation: cleanoraLoginShake 0.4s ease;
}


/* =========================================================
   RTL DIRECTION CHANGE
   Stops visual horizontal animation during direction change
========================================================= */

.cleanora-login-direction-changing,
.cleanora-login-direction-changing * {

    transition: none !important;

    animation: none !important;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes cleanoraLoginLeftReveal {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes cleanoraLoginFormReveal {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes cleanoraLoginImageReveal {

    from {
        opacity: 0;
        transform: scale(1.05);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


@keyframes cleanoraLoginBenefitReveal {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes cleanoraLoginShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}


/* =========================================================
   LARGE LAPTOP
========================================================= */

@media (max-width: 1440px) {

    .cleanora-login-info-content {
        padding: 48px 50px 50px;
    }

    .cleanora-login-form-side {
        padding: 70px 48px 50px;
    }

    .cleanora-login-info-text h1 {
        font-size: clamp(2.25rem, 4vw, 4rem);
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .cleanora-login-info-content {
        padding: 45px 40px 45px;
    }

    .cleanora-login-form-side {
        padding: 70px 38px 45px;
    }

    .cleanora-login-benefits {
        gap: 12px;
    }

    .cleanora-login-benefit {
        gap: 8px;
    }

    .cleanora-login-benefit h3 {
        font-size: 0.77rem;
    }

    .cleanora-login-benefit p {
        font-size: 0.68rem;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1023px) {

    body {
        overflow-y: auto;
    }

    .cleanora-login-controls {
        top: 16px;
        right: 18px;
    }


    .cleanora-login-page {

        min-height: auto;

        display: flex;
        flex-direction: column;

        overflow: visible;
    }


    .cleanora-login-info {

        width: 100%;
        height: auto;
        min-height: 430px;

        display: flex;
    }


    .cleanora-login-info-content {

        min-height: 430px;

        padding: 75px 45px 40px;
    }


    .cleanora-login-info-text {

        padding-top: 35px;
        padding-bottom: 25px;
    }


    .cleanora-login-info-text h1 {

        font-size: clamp(2.25rem, 6vw, 3.7rem);
    }


    .cleanora-login-info-text p {
        max-width: 680px;
    }


    .cleanora-login-benefits {
        max-width: 780px;
    }


    .cleanora-login-form-side {

        width: 100%;
        height: auto;

        min-height: 650px;

        overflow: visible;

        padding: 70px 45px 65px;
    }


    .cleanora-login-form-wrapper {
        max-width: 600px;
    }

}


/* =========================================================
   MOBILE LARGE
========================================================= */

@media (max-width: 767px) {

    .cleanora-login-controls {
        top: 12px;
        right: 13px;

        gap: 7px;
    }


    .cleanora-login-control-btn {

        height: 42px;
        min-width: 42px;

        padding: 0 11px;

        font-size: 0.73rem;
    }


    .cleanora-login-info {

        min-height: 470px;
    }


    .cleanora-login-info-content {

        min-height: 470px;

        padding: 68px 25px 30px;
    }


    .cleanora-login-brand {
        font-size: 1.2rem;
    }


    .cleanora-login-brand-icon {

        width: 36px;
        height: 36px;

        border-radius: 10px;
    }


    .cleanora-login-info-text {

        padding-top: 25px;
        padding-bottom: 22px;
    }


    .cleanora-login-small-title {
        font-size: 0.68rem;
    }


    .cleanora-login-info-text h1 {

        margin-bottom: 16px;

        font-size: clamp(2rem, 9vw, 3rem);
    }


    .cleanora-login-info-text p {

        font-size: 0.84rem;

        line-height: 1.7;
    }


    .cleanora-login-benefits {

        grid-template-columns: 1fr;

        gap: 12px;
    }


    .cleanora-login-benefit {

        align-items: center;
    }


    .cleanora-login-benefit h3 {
        font-size: 0.78rem;
    }


    .cleanora-login-benefit p {
        font-size: 0.68rem;
    }


    .cleanora-login-form-side {

        min-height: auto;

        padding: 55px 24px 50px;
    }


    .cleanora-login-heading {
        margin-bottom: 27px;
    }


    .cleanora-login-heading h2 {
        font-size: 2rem;
    }

}


/* =========================================================
   MOBILE MEDIUM
========================================================= */

@media (max-width: 575px) {

    .cleanora-login-info {

        min-height: 445px;
    }


    .cleanora-login-info-content {

        min-height: 445px;

        padding: 66px 20px 27px;
    }


    .cleanora-login-info-text h1 {
        font-size: 2rem;
    }


    .cleanora-login-info-text p {
        font-size: 0.8rem;
    }


    .cleanora-login-benefit-icon {

        width: 35px;
        height: 35px;
    }


    .cleanora-login-form-side {

        padding: 48px 19px 45px;
    }


    .cleanora-login-heading h2 {
        font-size: 1.85rem;
    }


    .cleanora-login-heading p {
        font-size: 0.82rem;
    }


    .cleanora-login-label-row {

        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }


    .cleanora-login-input-wrapper input {
        height: 50px;
    }

}


/* =========================================================
   MOBILE SMALL
========================================================= */

@media (max-width: 375px) {

    .cleanora-login-controls {
        top: 10px;
        right: 10px;
    }


    .cleanora-login-control-btn {

        height: 39px;
        min-width: 39px;

        padding: 0 9px;

        font-size: 0.68rem;
    }


    .cleanora-login-info {

        min-height: 430px;
    }


    .cleanora-login-info-content {

        min-height: 430px;

        padding: 61px 17px 23px;
    }


    .cleanora-login-info-text h1 {
        font-size: 1.8rem;
    }


    .cleanora-login-info-text p {
        font-size: 0.76rem;
    }


    .cleanora-login-form-side {

        padding-left: 16px;
        padding-right: 16px;
    }


    .cleanora-login-heading h2 {
        font-size: 1.7rem;
    }


    .cleanora-login-submit,
    .cleanora-login-social {
        font-size: 0.76rem;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
    }

}


/* =========================================================
   CLEANORA SIGNUP PAGE
========================================================= */

:root {

    --cleanora-sage: #6B8E7B;
    --cleanora-cream: #F7F3EA;
    --cleanora-charcoal: #26332D;
    --cleanora-white: #FFFFFF;
    --cleanora-light-sage: #E4ECE7;
    --cleanora-dark-sage: #527262;

    --cleanora-transition: 0.3s ease;

}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}


/* =========================================================
   BODY
========================================================= */

body {

    margin: 0;

    min-height: 100vh;

    font-family: "Inter", sans-serif;

    background-color: var(--cleanora-cream);

    color: var(--cleanora-charcoal);

    overflow-x: hidden;
}


button,
input {
    font: inherit;
}


button {
    cursor: pointer;
}


a {
    text-decoration: none;
}


/* =========================================================
   TOP CONTROLS
   OUTSIDE CONTAINER
========================================================= */

.cleanora-signup-controls {

    position: fixed;

    top: 22px;
    right: 24px;

    z-index: 1000;

    display: flex;
    align-items: center;

    gap: 10px;
}


.cleanora-signup-control-btn {

    min-width: 46px;
    height: 46px;

    padding: 0 13px;

    border: 1px solid rgba(107, 142, 123, 0.28);

    border-radius: 50px;

    background-color: rgba(255, 255, 255, 0.94);

    color: var(--cleanora-charcoal);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    font-size: 0.82rem;
    font-weight: 700;

    box-shadow: 0 8px 25px rgba(38, 51, 45, 0.10);

    transition:
        background-color var(--cleanora-transition),
        color var(--cleanora-transition),
        border-color var(--cleanora-transition),
        transform var(--cleanora-transition);
}


.cleanora-signup-control-btn:hover {

    background-color: var(--cleanora-sage);

    color: var(--cleanora-white);

    border-color: var(--cleanora-sage);

    transform: translateY(-2px);
}


/* =========================================================
   MAIN PAGE
========================================================= */

.cleanora-signup-page {

    width: 100%;
    min-height: 100vh;

    display: grid;

    grid-template-columns: 1fr 1fr;

    overflow: hidden;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.cleanora-signup-info {

    position: relative;

    height: 100vh;

    min-width: 0;

    overflow: hidden;

    background-color: var(--cleanora-dark-sage);

    isolation: isolate;

    animation: cleanoraSignupLeftReveal 0.8s ease both;
}


.cleanora-signup-image-wrapper {

    position: absolute;

    inset: 0;

    z-index: -2;
}


.cleanora-signup-image {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    animation: cleanoraSignupImageReveal 1.2s ease both;
}


.cleanora-signup-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(38, 51, 45, 0.34) 0%,
            rgba(38, 51, 45, 0.58) 52%,
            rgba(38, 51, 45, 0.91) 100%
        );
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.cleanora-signup-info-content {

    width: 100%;
    height: 100%;

    padding: 55px 65px 58px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    color: var(--cleanora-white);
}


/* =========================================================
   BRAND
========================================================= */

.cleanora-signup-brand {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 11px;

    color: var(--cleanora-white);

    font-family: "Poppins", sans-serif;

    font-size: 1.45rem;

    font-weight: 700;
}


.cleanora-signup-brand-icon {

    width: 40px;
    height: 40px;

    border-radius: 12px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    background-color: rgba(255, 255, 255, 0.16);

    border: 1px solid rgba(255, 255, 255, 0.20);

    backdrop-filter: blur(8px);
}


/* =========================================================
   LEFT TEXT
========================================================= */

.cleanora-signup-info-text {

    max-width: 590px;

    margin-top: auto;
    margin-bottom: auto;

    padding-top: 40px;
    padding-bottom: 35px;
}


.cleanora-signup-small-title {

    display: block;

    margin-bottom: 15px;

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 0.16em;

    color: rgba(255, 255, 255, 0.78);
}


.cleanora-signup-info-text h1 {

    max-width: 590px;

    margin: 0 0 22px;

    font-family: "Poppins", sans-serif;

    font-size: clamp(2.4rem, 4vw, 4.6rem);

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -0.035em;
}


.cleanora-signup-info-text h1 span {

    display: block;

    color: #E4ECE7;
}


.cleanora-signup-info-text p {

    max-width: 560px;

    margin: 0;

    font-size: 1.02rem;

    line-height: 1.8;

    color: rgba(255, 255, 255, 0.82);
}


/* =========================================================
   BENEFITS
========================================================= */

.cleanora-signup-benefits {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

    max-width: 720px;
}


.cleanora-signup-benefit {

    min-width: 0;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    animation: cleanoraSignupBenefitReveal 0.7s ease both;
}


.cleanora-signup-benefit:nth-child(1) {
    animation-delay: 0.2s;
}


.cleanora-signup-benefit:nth-child(2) {
    animation-delay: 0.3s;
}


.cleanora-signup-benefit:nth-child(3) {
    animation-delay: 0.4s;
}


.cleanora-signup-benefit-icon {

    flex: 0 0 auto;

    width: 39px;
    height: 39px;

    border-radius: 12px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    background-color: rgba(255, 255, 255, 0.15);

    border: 1px solid rgba(255, 255, 255, 0.18);
}


.cleanora-signup-benefit h3 {

    margin: 0 0 4px;

    font-family: "Poppins", sans-serif;

    font-size: 0.84rem;

    line-height: 1.3;

    font-weight: 600;
}


.cleanora-signup-benefit p {

    margin: 0;

    font-size: 0.73rem;

    line-height: 1.5;

    color: rgba(255, 255, 255, 0.70);
}


/* =========================================================
   RIGHT FORM SIDE
========================================================= */

.cleanora-signup-form-side {

    min-width: 0;

    height: 100vh;

    overflow-y: auto;

    overflow-x: hidden;

    background-color: var(--cleanora-white);

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 70px 55px 55px;

    animation: cleanoraSignupFormReveal 0.8s ease both;
}


.cleanora-signup-form-wrapper {

    width: 100%;

    max-width: 490px;

    margin: auto;
}


/* =========================================================
   HEADING
========================================================= */

.cleanora-signup-heading {

    margin-bottom: 27px;
}


.cleanora-signup-form-label {

    display: inline-block;

    margin-bottom: 9px;

    color: var(--cleanora-sage);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.14em;
}


.cleanora-signup-heading h2 {

    margin: 0 0 8px;

    font-family: "Poppins", sans-serif;

    font-size: clamp(1.9rem, 3vw, 2.65rem);

    line-height: 1.15;

    font-weight: 700;

    color: var(--cleanora-charcoal);
}


.cleanora-signup-heading p {

    margin: 0;

    font-size: 0.88rem;

    line-height: 1.6;

    color: #64736C;
}


/* =========================================================
   FORM
========================================================= */

.cleanora-signup-form {
    width: 100%;
}


.cleanora-signup-field {

    margin-bottom: 11px;
}


.cleanora-signup-field label {

    display: block;

    margin-bottom: 7px;

    color: var(--cleanora-charcoal);

    font-size: 0.80rem;

    font-weight: 600;
}


/* =========================================================
   INPUT
========================================================= */

.cleanora-signup-input-wrapper {

    position: relative;

    width: 100%;
}


.cleanora-signup-input-wrapper > i {

    position: absolute;

    top: 50%;
    left: 17px;

    transform: translateY(-50%);

    color: #7E8B85;

    font-size: 0.87rem;

    pointer-events: none;

    transition: color var(--cleanora-transition);
}


.cleanora-signup-input-wrapper input {

    width: 100%;

    height: 49px;

    padding: 0 47px;

    border: 1px solid #D9E0DC;

    border-radius: 13px;

    outline: none;

    background-color: #FBFCFB;

    color: var(--cleanora-charcoal);

    font-size: 0.84rem;

    transition:
        border-color var(--cleanora-transition),
        box-shadow var(--cleanora-transition),
        background-color var(--cleanora-transition);
}


.cleanora-signup-input-wrapper input::placeholder {
    color: #9AA59F;
}


.cleanora-signup-input-wrapper input:focus {

    border-color: var(--cleanora-sage);

    background-color: var(--cleanora-white);

    box-shadow: 0 0 0 4px rgba(107, 142, 123, 0.10);
}


.cleanora-signup-input-wrapper:focus-within > i {

    color: var(--cleanora-sage);
}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.cleanora-signup-password-toggle {

    position: absolute;

    top: 50%;
    right: 13px;

    width: 31px;
    height: 31px;

    transform: translateY(-50%);

    border: none;

    border-radius: 8px;

    background: transparent;

    color: #7E8B85;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    transition:
        color var(--cleanora-transition),
        background-color var(--cleanora-transition);
}


.cleanora-signup-password-toggle:hover {

    color: var(--cleanora-dark-sage);

    background-color: var(--cleanora-light-sage);
}


/* =========================================================
   PASSWORD HINT
========================================================= */

.cleanora-signup-password-hint {

    display: block;

    margin-top: 4px;

    color: #8A9690;

    font-size: 0.66rem;

    line-height: 1.3;
}


/* =========================================================
   ERROR
========================================================= */

.cleanora-signup-error {

    display: block;

    min-height: 0;

    margin-top: 4px;

    color: #C64D4D;

    font-size: 0.69rem;

    line-height: 1.3;
}


/* =========================================================
   TERMS
========================================================= */

.cleanora-signup-terms {

    margin-top: 5px;

    margin-bottom: 14px;
}


.cleanora-signup-checkbox {

    display: inline-flex;

    align-items: flex-start;

    gap: 8px;

    cursor: pointer;

    color: #68756F;

    font-size: 0.72rem;

    line-height: 1.5;
}


.cleanora-signup-checkbox input {

    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.cleanora-signup-checkmark {

    flex: 0 0 auto;

    width: 17px;
    height: 17px;

    margin-top: 1px;

    border: 1px solid #CBD5D0;

    border-radius: 5px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    transition:
        background-color var(--cleanora-transition),
        border-color var(--cleanora-transition);
}


.cleanora-signup-checkbox input:checked + .cleanora-signup-checkmark {

    background-color: var(--cleanora-sage);

    border-color: var(--cleanora-sage);
}


.cleanora-signup-checkbox input:checked + .cleanora-signup-checkmark::after {

    content: "\f00c";

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    color: var(--cleanora-white);

    font-size: 0.57rem;
}


.cleanora-signup-checkbox a {

    color: var(--cleanora-dark-sage);

    font-weight: 600;
}


.cleanora-signup-checkbox a:hover {
    text-decoration: underline;
}


/* =========================================================
   CREATE ACCOUNT
========================================================= */

.cleanora-signup-submit {

    width: 100%;

    min-height: 51px;

    padding: 11px 18px;

    border: 1px solid var(--cleanora-sage);

    border-radius: 13px;

    background-color: var(--cleanora-sage);

    color: var(--cleanora-white);

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    font-size: 0.83rem;

    font-weight: 700;

    box-shadow: 0 10px 24px rgba(107, 142, 123, 0.20);

    transition:
        background-color var(--cleanora-transition),
        border-color var(--cleanora-transition),
        transform var(--cleanora-transition),
        box-shadow var(--cleanora-transition);
}


.cleanora-signup-submit:hover {

    background-color: var(--cleanora-dark-sage);

    border-color: var(--cleanora-dark-sage);

    transform: translateY(-2px);

    box-shadow: 0 14px 28px rgba(82, 114, 98, 0.25);
}


.cleanora-signup-submit i {

    font-size: 0.75rem;

    transition: transform var(--cleanora-transition);
}


.cleanora-signup-submit:hover i {

    transform: translateX(3px);
}


/* =========================================================
   STATUS
========================================================= */

.cleanora-signup-status {

    min-height: 17px;

    margin-top: 7px;

    text-align: center;

    font-size: 0.70rem;

    line-height: 1.4;
}


/* =========================================================
   DIVIDER
========================================================= */

.cleanora-signup-divider {

    display: flex;

    align-items: center;

    gap: 13px;

    margin: 13px 0 12px;
}


.cleanora-signup-divider span {

    flex: 1;

    height: 1px;

    background-color: #E2E7E4;
}


.cleanora-signup-divider p {

    margin: 0;

    color: #8B9691;

    font-size: 0.65rem;

    font-weight: 600;
}


/* =========================================================
   SOCIAL BUTTONS
========================================================= */

.cleanora-signup-social {

    width: 78%;

    min-height: 43px;

    margin: 0 auto 8px;

    padding: 9px 17px;

    border: 1px solid #DCE2DF;

    border-radius: 12px;

    background-color: var(--cleanora-white);

    color: var(--cleanora-charcoal);

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    font-size: 0.76rem;

    font-weight: 600;

    transition:
        background-color var(--cleanora-transition),
        border-color var(--cleanora-transition),
        transform var(--cleanora-transition),
        box-shadow var(--cleanora-transition);
}


.cleanora-signup-social:hover {

    background-color: #F7F9F7;

    border-color: #C7D2CC;

    transform: translateY(-2px);

    box-shadow: 0 8px 18px rgba(38, 51, 45, 0.08);
}


.cleanora-signup-google i {
    color: #DB4437;
}


.cleanora-signup-facebook i {
    color: #1877F2;
}


.cleanora-signup-apple i {
    color: var(--cleanora-charcoal);
}


/* =========================================================
   LOGIN LINK
========================================================= */

.cleanora-signup-login {

    margin-top: 15px;

    text-align: center;
}


.cleanora-signup-login p {

    margin: 0;

    color: #78847E;

    font-size: 0.73rem;

    line-height: 1.5;
}


.cleanora-signup-login a {

    margin-left: 3px;

    color: var(--cleanora-dark-sage);

    font-weight: 700;
}


.cleanora-signup-login a:hover {
    text-decoration: underline;
}


/* =========================================================
   VALIDATION SHAKE
========================================================= */

.cleanora-signup-shake {

    animation: cleanoraSignupShake 0.4s ease;
}


/* =========================================================
   RTL CHANGE
========================================================= */

.cleanora-signup-direction-changing,
.cleanora-signup-direction-changing * {

    transition: none !important;

    animation: none !important;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes cleanoraSignupLeftReveal {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes cleanoraSignupFormReveal {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes cleanoraSignupImageReveal {

    from {
        opacity: 0;
        transform: scale(1.05);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


@keyframes cleanoraSignupBenefitReveal {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes cleanoraSignupShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1440px) {

    .cleanora-signup-info-content {
        padding: 48px 50px 50px;
    }

    .cleanora-signup-form-side {
        padding: 70px 48px 50px;
    }

}


/* =========================================================
   SMALL LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .cleanora-signup-info-content {
        padding: 45px 40px 45px;
    }

    .cleanora-signup-form-side {
        padding: 70px 38px 45px;
    }

    .cleanora-signup-benefits {
        gap: 12px;
    }

    .cleanora-signup-benefit {
        gap: 8px;
    }

    .cleanora-signup-benefit h3 {
        font-size: 0.77rem;
    }

    .cleanora-signup-benefit p {
        font-size: 0.68rem;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1023px) {

    body {
        overflow-y: auto;
    }


    .cleanora-signup-page {

        min-height: auto;

        display: flex;

        flex-direction: column;

        overflow: visible;
    }


    .cleanora-signup-info {

        width: 100%;

        height: auto;

        min-height: 410px;
    }


    .cleanora-signup-info-content {

        min-height: 410px;

        padding: 75px 45px 40px;
    }


    .cleanora-signup-info-text {

        padding-top: 35px;
        padding-bottom: 25px;
    }


    .cleanora-signup-info-text h1 {

        font-size: clamp(2.25rem, 6vw, 3.7rem);
    }


    .cleanora-signup-benefits {
        max-width: 780px;
    }


    .cleanora-signup-form-side {

        width: 100%;

        height: auto;

        min-height: 700px;

        overflow: visible;

        padding: 70px 45px 65px;
    }


    .cleanora-signup-form-wrapper {
        max-width: 600px;
    }

}


/* =========================================================
   MOBILE LARGE
========================================================= */

@media (max-width: 767px) {

    .cleanora-signup-controls {

        top: 12px;
        right: 13px;

        gap: 7px;
    }


    .cleanora-signup-control-btn {

        width: 42px;
        height: 42px;

        min-width: 42px;

        padding: 0 10px;

        font-size: 0.73rem;
    }


    .cleanora-signup-info {

        min-height: 460px;
    }


    .cleanora-signup-info-content {

        min-height: 460px;

        padding: 68px 25px 30px;
    }


    .cleanora-signup-brand {
        font-size: 1.2rem;
    }


    .cleanora-signup-brand-icon {

        width: 36px;
        height: 36px;

        border-radius: 10px;
    }


    .cleanora-signup-info-text {

        padding-top: 25px;
        padding-bottom: 22px;
    }


    .cleanora-signup-small-title {
        font-size: 0.68rem;
    }


    .cleanora-signup-info-text h1 {

        margin-bottom: 16px;

        font-size: clamp(2rem, 9vw, 3rem);
    }


    .cleanora-signup-info-text p {

        font-size: 0.84rem;

        line-height: 1.7;
    }


    .cleanora-signup-benefits {

        grid-template-columns: 1fr;

        gap: 11px;
    }


    .cleanora-signup-benefit {

        align-items: center;
    }


    .cleanora-signup-form-side {

        min-height: auto;

        padding: 52px 24px 50px;
    }


    .cleanora-signup-heading {
        margin-bottom: 25px;
    }


    .cleanora-signup-heading h2 {
        font-size: 1.95rem;
    }

}


/* =========================================================
   MOBILE MEDIUM
========================================================= */

@media (max-width: 575px) {

    .cleanora-signup-info {

        min-height: 435px;
    }


    .cleanora-signup-info-content {

        min-height: 435px;

        padding: 66px 20px 27px;
    }


    .cleanora-signup-info-text h1 {
        font-size: 2rem;
    }


    .cleanora-signup-info-text p {
        font-size: 0.8rem;
    }


    .cleanora-signup-form-side {

        padding: 47px 19px 45px;
    }


    .cleanora-signup-heading h2 {
        font-size: 1.8rem;
    }


    .cleanora-signup-heading p {
        font-size: 0.81rem;
    }


    .cleanora-signup-social {
        width: 88%;
    }

}


/* =========================================================
   MOBILE SMALL
========================================================= */

@media (max-width: 375px) {

    .cleanora-signup-controls {

        top: 10px;
        right: 10px;
    }


    .cleanora-signup-control-btn {

        width: 39px;
        height: 39px;

        min-width: 39px;

        padding: 0 9px;

        font-size: 0.68rem;
    }


    .cleanora-signup-info {

        min-height: 420px;
    }


    .cleanora-signup-info-content {

        min-height: 420px;

        padding: 61px 17px 23px;
    }


    .cleanora-signup-info-text h1 {
        font-size: 1.8rem;
    }


    .cleanora-signup-info-text p {
        font-size: 0.76rem;
    }


    .cleanora-signup-form-side {

        padding-left: 16px;
        padding-right: 16px;
    }


    .cleanora-signup-heading h2 {
        font-size: 1.65rem;
    }


    .cleanora-signup-social {
        width: 92%;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}

/* =========================================================
   BACK TO TOP BUTTON
   ========================================================= */

.cleanora-backtotop {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 999;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var(--cleanora-sage);
    color: var(--cleanora-white);

    border: 2px solid var(--cleanora-sage);
    border-radius: 50%;

    font-size: 1rem;
    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);

    box-shadow: 0 8px 20px rgba(38,51,45,0.25);

    transition:
        opacity var(--cleanora-transition),
        visibility var(--cleanora-transition),
        transform var(--cleanora-transition),
        background-color var(--cleanora-transition),
        color var(--cleanora-transition),
        border-color var(--cleanora-transition);
}

.cleanora-backtotop.cleanora-backtotop-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cleanora-backtotop:hover {
    background-color: transparent;
    color: var(--cleanora-sage);
    border-color: var(--cleanora-sage);
}

@media (max-width: 767px) {
    .cleanora-backtotop {
        right: 18px;
        bottom: 18px;
        width: 44px;
        height: 44px;
        font-size: .9rem;
    }
}