/* =====================================================
           ROOT
        ====================================================== */

        :root {

            --blue: #2563eb;

            --blue-dark: #1d4ed8;

            --blue-light: #eff6ff;

            --black: #0f172a;

            --dark: #20242d;

            --text: #667085;

            --light: #f7f9fc;

            --white: #ffffff;

            --border: #e7eaf0;

            --green: #16a34a;

            --orange: #f59e0b;

            --radius: 18px;

            --shadow:
                0 20px 60px rgba(17, 17, 17, .08);

        }


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

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


        html {
            scroll-behavior: smooth;
        }


        body {

            margin: 0;

            font-family:
                "DM Sans",
                Arial,
                sans-serif;

            color: var(--dark);

            background: var(--white);

            line-height: 1.6;

            overflow-x: hidden;

        }


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


        a {
            text-decoration: none;
            color: inherit;
        }


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


        h1,
        h2,
        h3,
        h4 {

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

            line-height: 1.15;

            color: var(--black);

        }


        ul {
            list-style: none;
        }


        .container {

            width: min(1180px, 92%);

            margin: auto;

        }


        /* =====================================================
           BUTTONS
        ====================================================== */

        .btn {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 9px;

            min-height: 52px;

            padding: 13px 24px;

            border-radius: 9px;

            border: 2px solid transparent;

            font-size: 14px;

            font-weight: 800;

            cursor: pointer;

            transition:
                .3s ease;

        }


        .btn-primary {

            background: var(--blue);

            color: var(--white);

        }


        .btn-primary:hover {

            background: var(--blue-dark);

            transform:
                translateY(-2px);

            box-shadow:
                0 10px 25px
                rgba(37,99,235,.25);

        }


        .btn-dark {

            background: var(--black);

            color: var(--white);

        }


        .btn-dark:hover {

            background: #000;

            transform:
                translateY(-2px);

        }


        .btn-outline {

            border-color:
                var(--black);

            color: var(--black);

            background:
                transparent;

        }


        .btn-outline:hover {

            background:
                var(--black);

            color:
                var(--white);

        }


        .btn-white {

            background:
                var(--white);

            color:
                var(--black);

        }


        .btn-white:hover {

            transform:
                translateY(-2px);

        }


        /* =====================================================
           TOP BAR
        ====================================================== */

        .topbar {

            background:
                var(--black);

            color:
                var(--white);

            font-size:
                13px;

        }


        .topbar-inner {

            min-height:
                42px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            gap:
                20px;

        }


        .topbar-left {

            display:
                flex;

            align-items:
                center;

            gap:
                22px;

        }


        .topbar a {

            color:
                #d6d6d6;

            transition:
                .25s;

        }


        .topbar a:hover {

            color:
                var(--white);

        }


        .topbar-right {

            color:
                #c7c7c7;

        }


        /* =====================================================
           HEADER
        ====================================================== */

        .header {

            position:
                sticky;

            top:
                0;

            z-index:
                1000;

            background:
                rgba(255,255,255,.96);

            backdrop-filter:
                blur(15px);

            border-bottom:
                1px solid
                var(--border);

        }


        .navbar {

            height:
                82px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            gap:
                30px;

        }


        /* LOGO */

        .brand {

            display:
                flex;

            align-items:
                center;

            gap:
                11px;

        }


        .brand-mark {

            width:
                55px;

            height:
                55px;

            border-radius:
                12px;

            background:
                var(--blue);

            color:
                var(--white);

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            font-family:
                "Outfit";

            font-size:
                23px;

            font-weight:
                800;

        }


        .brand-name {

            font-family:
                "Outfit";

            font-size:
                19px;

            font-weight:
                800;

            line-height:
                1;

        }


        .brand-name span {

            display:
                block;

            color:
                var(--blue);

            font-size:
                11px;

            letter-spacing:
                1px;

            margin-top:
                5px;

        }


        /* NAV */

        .nav {

            display:
                flex;

            align-items:
                center;

            gap:
                26px;

        }


        .nav a {

            font-size:
                14px;

            font-weight:
                700;

            transition:
                .25s;

        }


        .nav a:hover {

            color:
                var(--blue);

        }


        .nav .btn {

            min-height:
                45px;

            padding:
                10px 19px;

        }


        .mobile-toggle {

            display:
                none;

            border:
                none;

            background:
                transparent;

            font-size:
                28px;

            cursor:
                pointer;

        }


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

        .hero {

            position:
                relative;

            padding:
                85px 0 90px;

            background:

                radial-gradient(
                    circle at 5% 20%,
                    rgba(37,99,235,.12),
                    transparent 28%
                ),

                radial-gradient(
                    circle at 95% 80%,
                    rgba(37,99,235,.07),
                    transparent 25%
                ),

                #ffffff;

        }


        .hero-grid {

            display:
                grid;

            grid-template-columns:
                1.05fr .95fr;

            gap:
                70px;

            align-items:
                center;

        }


        .eyebrow {

            display:
                inline-flex;

            align-items:
                center;

            gap:
                8px;

            color:
                var(--blue);

            text-transform:
                uppercase;

            letter-spacing:
                1.4px;

            font-size:
                12px;

            font-weight:
                800;

            margin-bottom:
                17px;

        }


        .eyebrow::before {

            content:
                "";

            width:
                25px;

            height:
                2px;

            background:
                var(--blue);

        }


        .hero h1 {

            font-size:
                clamp(45px, 5.3vw, 72px);

            letter-spacing:
                -2.5px;

            max-width:
                700px;

            margin-bottom:
                23px;

        }


        .hero h1 span {

            color:
                var(--blue);

        }


        .hero-text {

            max-width:
                610px;

            color:
                var(--text);

            font-size:
                18px;

            margin-bottom:
                29px;

        }


        .hero-actions {

            display:
                flex;

            flex-wrap:
                wrap;

            gap:
                12px;

        }


        .hero-benefits {

            display:
                flex;

            flex-wrap:
                wrap;

            gap:
                18px;

            margin-top:
                28px;

        }


        .benefit {

            display:
                flex;

            align-items:
                center;

            gap:
                7px;

            font-size:
                13px;

            font-weight:
                700;

        }


        .benefit-check {

            width:
                21px;

            height:
                21px;

            border-radius:
                50%;

            background:
                var(--blue-light);

            color:
                var(--blue);

            display:
                grid;

            place-items:
                center;

            font-size:
                12px;

        }


        /* HERO IMAGE */

        .hero-visual {

            position:
                relative;

        }


        .hero-image {

            height:
                560px;

            border-radius:
                28px;

            overflow:
                hidden;

            background:
                linear-gradient(
                    180deg,
                    transparent,
                    rgba(17,17,17,.25)
                ),

                url("https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=1200&q=85");

            background-size:
                cover;

            background-position:
                center;

        }


        .price-badge {

            position:
                absolute;

            left:
                -25px;

            bottom:
                40px;

            background:
                var(--white);

            border-radius:
                17px;

            padding:
                20px 25px;

            box-shadow:
                var(--shadow);

            min-width:
                190px;

        }


        .price-badge small {

            display:
                block;

            color:
                var(--text);

            font-size:
                12px;

        }


        .price-badge strong {

            display:
                block;

            font-family:
                "Outfit";

            font-size:
                34px;

            color:
                var(--blue);

        }


        .price-badge span {

            font-size:
                12px;

            color:
                var(--text);

        }


        .rating-badge {

            position:
                absolute;

            top:
                30px;

            right:
                -25px;

            background:
                var(--black);

            color:
                var(--white);

            padding:
                17px 21px;

            border-radius:
                14px;

            box-shadow:
                var(--shadow);

        }


        .rating-badge strong {

            display:
                block;

            font-size:
                19px;

        }


        .rating-badge span {

            color:
                #fbbf24;

            letter-spacing:
                2px;

        }


        /* =====================================================
           QUOTE FORM
        ====================================================== */

        .quote-section {

            margin-top:
                -10px;

            position:
                relative;

            z-index:
                10;

        }


        .quote-box {

            background:
                var(--white);

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

            border-radius:
                22px;

            padding:
                35px;

            box-shadow:
                0 25px 70px
                rgba(17,17,17,.09);

        }


        .quote-header {

            display:
                flex;

            align-items:
                flex-start;

            justify-content:
                space-between;

            gap:
                25px;

            margin-bottom:
                25px;

        }


        .quote-header h2 {

            font-size:
                30px;

            margin-bottom:
                5px;

        }


        .quote-header p {

            color:
                var(--text);

            font-size:
                14px;

        }





       


        .quote-grid {

            display:
                grid;

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

            gap:
                14px;

        }


        .form-group.wide {

            grid-column:
                span 2;

        }


        .form-label {

            display:
                block;

            font-size:
                12px;

            font-weight:
                800;

            margin-bottom:
                7px;

            color:
                var(--black);

        }


        input,
        select,
        textarea {

            width:
                100%;

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

            border-radius:
                9px;

            padding:
                13px 14px;

            outline:
                none;

            font-size:
                14px;

            background:
                var(--white);

            transition:
                .25s;

        }


        input:focus,
        select:focus,
        textarea:focus {

            border-color:
                var(--blue);

            box-shadow:
                0 0 0 3px
                rgba(37,99,235,.08);

        }


        textarea {

            resize:
                vertical;

            min-height:
                auto;

        }


        .quote-submit {

            grid-column:
                1 / -1;

            display:
                flex;

            justify-content:
                space-between;

            align-items:
                center;

            gap:
                20px;

            margin-top:
                7px;

        }


        .quote-note {

            font-size:
                12px;

            color:
                var(--text);

        }


        .quote-note strong {

            color:
                var(--black);

        }


        .form-success {

            display:
                none;

            padding:
                12px 15px;

            background:
                #ecfdf3;

            color:
                #15803d;

            border-radius:
                8px;

            font-size:
                13px;

            font-weight:
                700;

            margin-top:
                15px;

        }


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

        .trust-strip {

            padding:
                45px 0;

            background:
                var(--light);

        }


        .trust-grid {

            display:
                grid;

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

            gap:
                20px;

        }


        .trust-card {

            display:
                flex;

            align-items:
                center;

            gap:
                14px;

        }


        .trust-icon {

            width:
                45px;

            height:
                45px;

            flex-shrink:
                0;

            border-radius:
                12px;

            background:
                var(--blue-light);

            color:
                var(--blue);

            display:
                grid;

            place-items:
                center;

            font-size:
                19px;

        }


        .trust-card strong {

            display:
                block;

            font-size:
                14px;

        }


        .trust-card span {

            display:
                block;

            color:
                var(--text);

            font-size:
                12px;

        }


        /* =====================================================
           SECTIONS
        ====================================================== */

        .section {

            padding:
                105px 0;

        }


        .section-light {

            background:
                var(--light);

        }


        .section-head {

            max-width:
                700px;

            margin-bottom:
                55px;

        }


        .section-head.center {

            text-align:
                center;

            margin-left:
                auto;

            margin-right:
                auto;

        }


        .section-head h2 {

            font-size:
                clamp(35px,4vw,52px);

            letter-spacing:
                -1.5px;

            margin-bottom:
                16px;

        }


        .section-head p {

            color:
                var(--text);

            font-size:
                16px;

        }


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

        .services-grid {

            display:
                grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap:
                24px;

        }


        .service-card {

            background:
                var(--white);

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

            border-radius:
                18px;

            overflow:
                hidden;

            transition:
                .35s;

        }


        .service-card:hover {

            transform:
                translateY(-7px);

            box-shadow:
                var(--shadow);

            border-color:
                rgba(37,99,235,.2);

        }


        .service-img {

            height:
                225px;

            overflow:
                hidden;

        }


        .service-img img {

            width:
                100%;

            height:
                100%;

            object-fit:
                cover;

            transition:
                .6s;

        }


        .service-card:hover
        .service-img img {

            transform:
                scale(1.08);

        }


        .service-content {

            padding:
                27px;

        }


        .service-price {

            color:
                var(--blue);

            font-size:
                12px;

            font-weight:
                800;

            text-transform:
                uppercase;

            letter-spacing:
                .8px;

            margin-bottom:
                11px;

        }


        .service-content h3 {

            font-size:
                23px;

            margin-bottom:
                10px;

        }


        .service-content p {

            color:
                var(--text);

            font-size:
                14px;

            margin-bottom:
                20px;

        }


        .service-link {

            color:
                var(--blue);

            font-weight:
                800;

            font-size:
                13px;

        }


        /* =====================================================
           ABOUT / WHY
        ====================================================== */

        .two-column {

            display:
                grid;

            grid-template-columns:
                .9fr 1.1fr;

            gap:
                75px;

            align-items:
                center;

        }


        .about-photo {

            min-height:
                540px;

            border-radius:
                25px;

            overflow:
                hidden;

            background:
                url("https://images.unsplash.com/photo-1556911220-bff31c812dba?auto=format&fit=crop&w=1100&q=85");

            background-size:
                cover;

            background-position:
                center;

        }


        .content h2 {

            font-size:
                clamp(35px,4vw,50px);

            margin-bottom:
                20px;

        }


        .content > p {

            color:
                var(--text);

            margin-bottom:
                17px;

        }


        .check-list {

            display:
                grid;

            grid-template-columns:
                1fr 1fr;

            gap:
                13px;

            margin:
                28px 0;

        }


        .check-list li {

            font-size:
                14px;

            font-weight:
                700;

        }


        .check-list span {

            color:
                var(--blue);

            margin-right:
                7px;

        }


        /* =====================================================
           HOW IT WORKS
        ====================================================== */

        .process-grid {

            display:
                grid;

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

            gap:
                25px;

        }


        .process-card {

            position:
                relative;

            padding:
                10px;

        }


        .process-number {

            font-family:
                "Outfit";

            font-size:
                68px;

            font-weight:
                800;

            line-height:
                1;

            color:
                rgba(37,99,235,.13);

            margin-bottom:
                -12px;

        }


        .process-card h3 {

            font-size:
                20px;

            margin-bottom:
                9px;

        }


        .process-card p {

            color:
                var(--text);

            font-size:
                14px;

        }


        /* =====================================================
           PRICING
        ====================================================== */

        .pricing-grid {

            display:
                grid;

            grid-template-columns:
                repeat(3,1fr);

            gap:
                25px;

            align-items:
                stretch;

        }


        .pricing-card {

            position:
                relative;

            display:
                flex;

            flex-direction:
                column;

            padding:
                36px 31px;

            background:
                var(--white);

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

            border-radius:
                20px;

            transition:
                .3s;

        }


        .pricing-card:hover {

            transform:
                translateY(-7px);

            box-shadow:
                var(--shadow);

        }


        .pricing-card.featured {

            border:
                2px solid
                var(--blue);

            box-shadow:
                0 20px 55px
                rgba(37,99,235,.12);

        }


        .popular {

            position:
                absolute;

            top:
                -14px;

            left:
                50%;

            transform:
                translateX(-50%);

            background:
                var(--blue);

            color:
                var(--white);

            border-radius:
                30px;

            padding:
                6px 16px;

            font-size:
                10px;

            letter-spacing:
                1px;

            font-weight:
                800;

            white-space:
                nowrap;

        }


        .pricing-label {

            color:
                var(--blue);

            font-size:
                11px;

            font-weight:
                800;

            text-transform:
                uppercase;

            letter-spacing:
                1px;

        }


        .pricing-card h3 {

            font-size:
                30px;

            margin:
                9px 0 5px;

        }


        .pricing-subtitle {

            color:
                var(--text);

            font-size:
                13px;

        }


        .price-area {

            padding:
                24px 0;

            margin:
                20px 0;

            border-top:
                1px solid
                var(--border);

            border-bottom:
                1px solid
                var(--border);

        }


        .from {

            color:
                var(--text);

            font-size:
                12px;

        }


        .price {

            font-family:
                "Outfit";

            font-size:
                51px;

            font-weight:
                800;

            line-height:
                1;

            color:
                var(--black);

            margin:
                4px 0;

        }


        .per {

            color:
                var(--text);

            font-size:
                12px;

        }


        .features {

            flex:
                1;

            margin-bottom:
                27px;

        }


        .features li {

            padding:
                10px 0;

            border-bottom:
                1px solid
                #f0f1f4;

            font-size:
                13px;

        }


        .features li span {

            color:
                var(--blue);

            font-weight:
                800;

            margin-right:
                7px;

        }


        .pricing-note {

            max-width:
                950px;

            margin:
                35px auto 0;

            padding:
                17px 22px;

            border-radius:
                10px;

            background:
                var(--blue-light);

            color:
                var(--text);

            text-align:
                center;

            font-size:
                13px;

        }


        /* =====================================================
           SERVICE AREAS
        ====================================================== */

        .areas-section {

            background:
                var(--black);

            color:
                var(--white);

        }


        .areas-section .eyebrow {

            color:
                #60a5fa;

        }


        .areas-section .eyebrow::before {

            background:
                #60a5fa;

        }


        .areas-section h2 {

            color:
                var(--white);

        }


        .areas-section .section-head p {

            color:
                #a7adb8;

        }


        .areas-layout {

            display:
                grid;

            grid-template-columns:
                .8fr 1.2fr;

            gap:
                70px;

            align-items:
                center;

        }


        .area-intro h2 {

            font-size:
                clamp(36px,4vw,52px);

            margin-bottom:
                17px;

        }


        .area-intro p {

            color:
                #a7adb8;

            font-size:
                16px;

        }


        .area-tag-list {

            display:
                flex;

            flex-wrap:
                wrap;

            gap:
                10px;

        }


        .area-tag {

            padding:
                12px 16px;

            border:
                1px solid
                #333842;

            border-radius:
                9px;

            color:
                #e7e9ed;

            font-size:
                13px;

            background:
                #17191d;

            transition:
                .25s;

        }


        .area-tag:hover {

            background:
                var(--blue);

            border-color:
                var(--blue);

            transform:
                translateY(-2px);

        }


        .area-bottom {

            margin-top:
                30px;

            padding:
                18px 20px;

            border-radius:
                12px;

            background:
                #191c21;

            color:
                #a7adb8;

            font-size:
                13px;

        }


        .area-bottom strong {

            color:
                var(--white);

        }


        /* =====================================================
           REVIEWS
        ====================================================== */

        .reviews-grid {

            display:
                grid;

            grid-template-columns:
                repeat(3,1fr);

            gap:
                24px;

        }


        .review-card {

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

            border-radius:
                18px;

            padding:
                29px;

            background:
                var(--white);

        }


        .stars {

            color:
                #f59e0b;

            letter-spacing:
                2px;

            font-size:
                16px;

            margin-bottom:
                17px;

        }


        .review-card p {

            color:
                var(--text);

            font-size:
                14px;

            margin-bottom:
                22px;

        }


        .reviewer {

            display:
                flex;

            align-items:
                center;

            gap:
                12px;

        }


        .avatar {

            width:
                43px;

            height:
                43px;

            border-radius:
                50%;

            background:
                var(--blue);

            color:
                var(--white);

            display:
                grid;

            place-items:
                center;

            font-weight:
                800;

        }


        .reviewer strong {

            display:
                block;

            font-size:
                13px;

        }


        .reviewer span {

            display:
                block;

            color:
                var(--text);

            font-size:
                11px;

        }


        /* =====================================================
           FAQ
        ====================================================== */

        .faq {

            max-width:
                850px;

            margin:
                auto;

        }


        .faq-item {

            border-bottom:
                1px solid
                var(--border);

        }


        .faq-question {

            width:
                100%;

            border:
                none;

            background:
                transparent;

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            gap:
                20px;

            padding:
                22px 0;

            text-align:
                left;

            font-size:
                16px;

            font-weight:
                800;

            cursor:
                pointer;

            color:
                var(--black);

        }


        .faq-plus {

            width:
                29px;

            height:
                29px;

            flex-shrink:
                0;

            border-radius:
                50%;

            background:
                var(--blue-light);

            color:
                var(--blue);

            display:
                grid;

            place-items:
                center;

            font-size:
                20px;

            transition:
                .25s;

        }


        .faq-answer {

            max-height:
                0;

            overflow:
                hidden;

            color:
                var(--text);

            font-size:
                14px;

            transition:
                .35s ease;

        }


        .faq-item.active
        .faq-answer {

            max-height:
                300px;

            padding-bottom:
                22px;

        }


        .faq-item.active
        .faq-plus {

            transform:
                rotate(45deg);

        }


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

        .cta {

            padding:
                105px 0;

        }


        .cta-box {

            position:
                relative;

            overflow:
                hidden;

            padding:
                70px;

            border-radius:
                28px;

            background:
                var(--blue);

            color:
                var(--white);

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            gap:
                40px;

        }


        .cta-box::after {

            content:
                "";

            position:
                absolute;

            width:
                400px;

            height:
                400px;

            border-radius:
                50%;

            background:
                rgba(255,255,255,.08);

            right:
                -160px;

            top:
                -200px;

        }


        .cta-box h2 {

            color:
                var(--white);

            font-size:
                clamp(35px,4vw,52px);

            max-width:
                700px;

        }


        .cta-box p {

            margin-top:
                12px;

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

        }


        .cta-box .btn {

            position:
                relative;

            z-index:
                2;

            white-space:
                nowrap;

        }


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

        .contact-grid {

            display:
                grid;

            grid-template-columns:
                1fr 1fr;

            gap:
                24px;

        }


        .contact-card {

            padding:
                30px;

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

            border-radius:
                18px;

        }


        .contact-card h3 {

            font-size:
                24px;

            margin-bottom:
                17px;

        }


        .contact-row {

            padding:
                14px 0;

            border-bottom:
                1px solid
                var(--border);

            font-size:
                14px;

            color:
                var(--text);

        }


        .contact-row:last-child {

            border-bottom:
                none;

        }


        .contact-row strong {

            color:
                var(--black);

        }


        .contact-row a {

            color:
                var(--blue);

        }


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

        footer {

            background:
                var(--black);

            color:
                var(--white);

            padding-top:
                75px;

        }


        .footer-grid {

            display:
                grid;

            grid-template-columns:
                1.5fr 1fr 1fr 1.3fr;

            gap:
                45px;

            padding-bottom:
                55px;

        }


        .footer-brand {

            font-family:
                "Outfit";

            font-size:
                24px;

            font-weight:
                800;

            margin-bottom:
                15px;

        }


        .footer-brand span {

            color:
                #60a5fa;

        }


        .footer-description {

            color:
                #9097a2;

            font-size:
                13px;

            max-width:
                330px;

        }


        .footer-title {

            font-size:
                16px;

            margin-bottom:
                19px;
                color: #fff;

        }


        .footer-links li {

            margin-bottom:
                10px;

        }


        .footer-links a {

            color:
                #9097a2;

            font-size:
                13px;

            transition:
                .25s;

        }


        .footer-links a:hover {

            color:
                var(--white);

        }


        .footer-contact li {

            color:
                #9097a2;

            font-size:
                13px;

            margin-bottom:
                12px;

        }


        .footer-bottom {

            border-top:
                1px solid
                #292c31;

            padding:
                21px 0;

            color:
                #777d86;

            font-size:
                12px;

            text-align:
                center;

        }


        /* =====================================================
           WHATSAPP FLOAT
        ====================================================== */

        .whatsapp {

            position:
                fixed;

            right:
                22px;

            bottom:
                22px;

            width:
                57px;

            height:
                57px;

            border-radius:
                50%;

            background:
                #25d366;

            color:
                white;

            display:
                grid;

            place-items:
                center;

            font-size:
                27px;

            z-index:
                998;

            box-shadow:
                0 10px 30px
                rgba(0,0,0,.2);

            transition:
                .3s;

        }


        .whatsapp:hover {

            transform:
                scale(1.08);

        }


        /* =====================================================
           SCROLL REVEAL
        ====================================================== */

        .reveal {

            opacity:
                0;

            transform:
                translateY(25px);

            transition:
                .7s ease;

        }


        .reveal.show {

            opacity:
                1;

            transform:
                translateY(0);

        }


        /* =====================================================
           RESPONSIVE
        ====================================================== */

        @media(max-width:1050px) {


            .hero-grid {

                grid-template-columns:
                    1fr;

            }


            .hero-image {

                height:
                    480px;

            }


            .quote-grid {

                grid-template-columns:
                    repeat(2,1fr);

            }


            .form-group.wide {

                grid-column:
                    span 1;

            }


            .services-grid {

                grid-template-columns:
                    repeat(2,1fr);

            }


            .pricing-grid {

                grid-template-columns:
                    1fr;

                max-width:
                    600px;

                margin:
                    auto;

            }


            .process-grid {

                grid-template-columns:
                    repeat(2,1fr);

            }


            .trust-grid {

                grid-template-columns:
                    repeat(2,1fr);

            }


            .reviews-grid {

                grid-template-columns:
                    1fr 1fr;

            }


            .two-column {

                grid-template-columns:
                    1fr;

            }


            .about-photo {

                min-height:
                    450px;

            }


            .areas-layout {

                grid-template-columns:
                    1fr;

            }


            .footer-grid {

                grid-template-columns:
                    1fr 1fr;

            }

        }


        @media(max-width:768px) {


            .topbar-right {

                display:
                    none;

            }


            .topbar-inner {

                justify-content:
                    center;

            }


            .mobile-toggle {

                display:
                    block;

            }


            .nav {

                display:
                    none;

                position:
                    absolute;

                top:
                    82px;

                left:
                    0;

                width:
                    100%;

                padding:
                    25px 4%;

                background:
                    var(--white);

                border-bottom:
                    1px solid
                    var(--border);

                flex-direction:
                    column;

                align-items:
                    stretch;

            }


            .nav.active {

                display:
                    flex;

            }


            .nav .btn {

                width:
                    100%;

            }


            .section {

                padding:
                    80px 0;

            }


            .hero {

                padding:
                    65px 0 70px;

            }


            .hero h1 {

                font-size:
                    47px;

            }


            .quote-section {

                margin-top:
                    0;

            }


            .quote-box {

                padding:
                    27px 20px;

            }


            .quote-header {

                flex-direction:
                    column;

            }


            .quote-grid {

                grid-template-columns:
                    1fr;

            }


            .form-group.wide {

                grid-column:
                    auto;

            }


            .quote-submit {

                flex-direction:
                    column;

                align-items:
                    stretch;

            }


            .quote-submit .btn {

                width:
                    100%;

            }


            .services-grid {

                grid-template-columns:
                    1fr;

            }


            .trust-grid {

                grid-template-columns:
                    1fr;

            }


            .process-grid {

                grid-template-columns:
                    1fr;

            }


            .reviews-grid {

                grid-template-columns:
                    1fr;

            }


            .contact-grid {

                grid-template-columns:
                    1fr;

            }


            .cta-box {

                flex-direction:
                    column;

                align-items:
                    flex-start;

                padding:
                    45px 28px;

            }


            .footer-grid {

                grid-template-columns:
                    1fr;

            }


            .price-badge {

                left:
                    15px;

            }


            .rating-badge {

                right:
                    15px;

            }

        }


        @media(max-width:520px) {


            .brand-name {

                font-size:
                    17px;

            }


            .brand-mark {

                width:
                    42px;

                height:
                    42px;

            }


            .hero h1 {

                font-size:
                    41px;

                letter-spacing:
                    -1.7px;

            }


            .hero-text {

                font-size:
                    16px;

            }


            .hero-actions {

                flex-direction:
                    column;

            }


            .hero-actions .btn {

                width:
                    100%;

            }


            .hero-image {

                height:
                    390px;

            }


            .hero-benefits {

                flex-direction:
                    column;

                gap:
                    9px;

            }


            .check-list {

                grid-template-columns:
                    1fr;

            }


            .area-tag {

                padding:
                    10px 13px;

            }


            .cta {

                padding:
                    75px 0;

            }


            .whatsapp {

                right:
                    16px;

                bottom:
                    16px;

            }

        }
        




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

.contact-main {
    padding: 100px 0;
    background: #f8fafc;
}


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

.contact-form-top {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.contact-form-top .contact-kicker {
    display: inline-block;
    margin-bottom: 12px;
}

.contact-form-top h2 {
    margin: 0 0 18px;
    font-size: 44px;
    line-height: 1.15;
    font-weight: 700;
    color: #0f172a;
}

.contact-form-top h2 span {
    color: #2563eb;
}

.contact-form-top p {
    max-width: 680px;
    margin: 0 auto;
    color: #64748b;
    font-size: 17px;
    line-height: 1.75;
}


/* =========================================================
   CONTACT INFORMATION GRID
========================================================= */

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 55px;
}

.contact-info-grid .contact-info-item {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 24px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    text-decoration: none;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.contact-info-grid .contact-info-item:hover {
    transform: translateY(-4px);
    border-color: #2563eb;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}


/* =========================================================
   CONTACT INFO ICON
========================================================= */

.contact-info-grid .contact-info-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    border-radius: 12px;
}

.contact-info-grid .contact-info-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #2563eb;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   CONTACT INFO TEXT
========================================================= */

.contact-info-grid .contact-info-item > div:last-child {
    min-width: 0;
}

.contact-info-grid .contact-info-item span {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.contact-info-grid .contact-info-item strong {
    display: block;
    color: #0f172a;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    word-break: break-word;
}

.contact-info-grid .contact-info-item small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 13px;
}


/* =========================================================
   FULL WIDTH FORM BOX
========================================================= */

.contact-form-full {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 55px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 15px 45px rgba(15, 23, 42, 0.07);
}


/* =========================================================
   FORM HEADER
========================================================= */

.contact-form-header {
    max-width: 650px;
    margin: 0 auto 35px;
    text-align: center;
}

.contact-form-header .contact-kicker {
    display: inline-block;
    margin-bottom: 10px;
}

.contact-form-header h2 {
    margin: 0 0 14px;
    color: #0f172a;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
}

.contact-form-header h2 span {
    color: #2563eb;
}

.contact-form-header p {
    margin: 0;
    color: #64748b;
    font-size: 16px;
    line-height: 1.6;
}


/* =========================================================
   QUOTE FORM
========================================================= */

.contact-form {
    width: 100%;
}

.contact-form form {
    width: 100%;
    margin: 0;
}


/* Form fields */

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

.contact-form input,
.contact-form select {
    min-height: 52px;
}

.contact-form textarea {
    min-height: 150px;
    resize: vertical;
}


/* =========================================================
   COMMON FORM FIELD STYLING
========================================================= */

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="number"],
.contact-form input[type="date"],
.contact-form select,
.contact-form textarea {
    padding: 14px 16px;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    outline: none;
    font-size: 15px;
    transition: all 0.25s ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}


/* Placeholder */

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #94a3b8;
}


/* =========================================================
   FORM LABELS
========================================================= */

.contact-form label {
    display: block;
    margin-bottom: 7px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 600;
}


/* =========================================================
   FORM BUTTON
========================================================= */

.contact-form button,
.contact-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 13px 28px;
    color: #ffffff;
    background: #2563eb;
    border: 1px solid #2563eb;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.contact-form button:hover,
.contact-form input[type="submit"]:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.20);
}


/* =========================================================
   FORM ROW SUPPORT
   Works with most short-code generated forms
========================================================= */

.contact-form .form-row,
.contact-form .row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.contact-form .form-row > *,
.contact-form .row > * {
    flex: 1 1 250px;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1100px) {

    .contact-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-form-full {
        max-width: 100%;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 767px) {

    .contact-main {
        padding: 70px 0;
    }

    .contact-form-top {
        margin-bottom: 40px;
    }

    .contact-form-top h2 {
        font-size: 34px;
    }

    .contact-form-top p {
        font-size: 15px;
    }

    .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-bottom: 40px;
    }

    .contact-info-grid .contact-info-item {
        padding: 20px;
    }

    .contact-form-full {
        padding: 35px 20px;
        border-radius: 15px;
    }

    .contact-form-header {
        margin-bottom: 28px;
    }

    .contact-form-header h2 {
        font-size: 30px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .contact-form-top h2 {
        font-size: 30px;
    }

    .contact-form-header h2 {
        font-size: 27px;
    }

    .contact-info-grid .contact-info-item {
        padding: 18px 16px;
    }

    .contact-info-grid .contact-info-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    .contact-form-full {
        padding: 30px 16px;
    }

    .contact-form button,
    .contact-form input[type="submit"] {
        width: 100%;
    }

}        
        
    
    
    
    /* =========================================================
   ADELAIDE CLEANING COMPANY
   ABOUT PAGE ONLY
   No external images / no external icon libraries
========================================================= */


/* =========================================================
   GLOBAL ABOUT PAGE
========================================================= */

.about-hero,
.about-story,
.about-belief,
.about-difference,
.about-values,
.about-experience,
.about-customers,
.about-local,
.about-cta {
    position: relative;
    width: 100%;
}

.about-hero *,
.about-story *,
.about-belief *,
.about-difference *,
.about-values *,
.about-experience *,
.about-customers *,
.about-local *,
.about-cta * {
    box-sizing: border-box;
}


/* =========================================================
   SMALL LABELS
========================================================= */

.about-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;

    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.about-kicker::before {
    content: "";
    width: 24px;
    height: 2px;
    display: inline-block;
    background: #2563eb;
}


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

.about-hero {
    background: #0f172a;
    color: #ffffff;
    overflow: hidden;
}

.about-hero::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -220px;
    top: -260px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
}

.about-hero::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    right: -140px;
    bottom: -200px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 50%;
}

.about-hero-inner {
    position: relative;
    z-index: 2;

    min-height: 610px;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    align-items: center;
    gap: 80px;

    padding-top: 90px;
    padding-bottom: 90px;
}

.about-hero-content {
    max-width: 720px;
}

.about-hero .about-kicker {
    color: #60a5fa;
}

.about-hero .about-kicker::before {
    background: #60a5fa;
}

.about-hero h1 {
    max-width: 720px;
    margin: 0 0 26px;

    color: #ffffff;
    font-size: clamp(48px, 5vw, 76px);
    line-height: 1.02;
    letter-spacing: -3px;
    font-weight: 700;
}

.about-hero h1 span {
    display: block;
    color: #60a5fa;
}

.about-hero p {
    max-width: 650px;
    margin: 0;

    color: #cbd5e1;
    font-size: 18px;
    line-height: 1.75;
}

.about-hero-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 35px;
}

.about-hero .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 27px;

    background: #2563eb;
    color: #ffffff;
    border-radius: 8px;

    font-weight: 700;
    text-decoration: none;

    transition:
        transform .2s ease,
        background .2s ease;
}

.about-hero .btn-primary:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
}

.about-text-link {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.about-text-link:hover {
    color: #60a5fa;
}


/* =========================================================
   HERO RIGHT PANEL
========================================================= */

.about-hero-visual {
    position: relative;

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

    min-height: 390px;
}

.about-hero-visual::before {
    content: "";
    position: absolute;

    width: 310px;
    height: 310px;

    border: 1px solid rgba(96,165,250,.25);
    border-radius: 50%;
}

.about-hero-icon-wrap {
    position: relative;
    z-index: 2;

    width: 210px;
    height: 210px;

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

    border-radius: 50%;

    background: rgba(37,99,235,.12);
    border: 1px solid rgba(96,165,250,.35);

    color: #60a5fa;
}

.about-hero-icon {
    width: 90px;
    height: 90px;
}


/* philosophy card */

.about-hero-floating-card {
    position: absolute;
    z-index: 5;

    right: -10px;
    bottom: 15px;

    width: 290px;

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

    padding: 20px;

    background: #ffffff;
    color: #0f172a;

    border-radius: 10px;

    box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

.about-floating-icon {
    flex: 0 0 44px;

    width: 44px;
    height: 44px;

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

    border-radius: 50%;

    background: #eff6ff;
    color: #2563eb;
}

.about-floating-icon svg {
    width: 20px;
    height: 20px;
}

.about-hero-floating-card span {
    display: block;
}

.about-hero-floating-card .about-card-label {
    margin-bottom: 5px;

    color: #2563eb;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.about-hero-floating-card strong {
    display: block;

    font-size: 14px;
    line-height: 1.4;
}


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

.about-story {
    padding: 120px 0;
    background: #ffffff;
}

.about-story-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 90px;
    align-items: center;
}

.about-story-visual {
    position: relative;
}

.story-icon-panel {
    position: relative;

    min-height: 500px;

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

    overflow: hidden;

    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.story-icon-panel::before {
    content: "";
    position: absolute;

    width: 360px;
    height: 360px;

    border: 1px solid #dbeafe;
    border-radius: 50%;
}

.story-icon-panel::after {
    content: "";
    position: absolute;

    width: 250px;
    height: 250px;

    border: 1px solid #e5e7eb;
    border-radius: 50%;
}

.story-main-icon {
    position: relative;
    z-index: 2;

    width: 150px;
    height: 150px;

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

    background: #ffffff;
    border-radius: 50%;

    color: #2563eb;

    box-shadow: 0 20px 45px rgba(15,23,42,.10);
}

.story-main-icon svg {
    width: 75px;
    height: 75px;
}

.story-small-icons {
    position: absolute;
    z-index: 4;

    top: 55px;
    right: 55px;

    display: flex;
    gap: 10px;
}

.story-small-icon {
    width: 44px;
    height: 44px;

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

    background: #ffffff;
    border-radius: 50%;

    color: #2563eb;

    box-shadow: 0 10px 25px rgba(15,23,42,.10);
}

.story-small-icon svg {
    width: 20px;
    height: 20px;
}

.story-caption {
    position: absolute;
    z-index: 5;

    left: 25px;
    bottom: 25px;

    padding: 16px 20px;

    background: #0f172a;
    border-radius: 8px;
}

.story-caption span {
    display: block;

    margin-bottom: 3px;

    color: #60a5fa;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.story-caption strong {
    color: #ffffff;
    font-size: 14px;
}

.about-story-content {
    max-width: 680px;
}

.about-story-content h2 {
    margin: 0 0 28px;

    color: #0f172a;

    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.05;
    letter-spacing: -2px;
}

.about-story-content h2 span {
    color: #2563eb;
}

.about-story-content p {
    margin: 0 0 20px;

    color: #475569;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   BELIEF
========================================================= */

.about-belief {
    padding: 100px 0;
    background: #f8fafc;
}

.about-belief-inner {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 60px;

    max-width: 1000px;
    margin: auto;
}

.about-belief-number {
    color: #2563eb;

    font-size: 58px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: -3px;
}

.about-belief-content {
    max-width: 760px;
}

.about-belief-content h2 {
    margin: 0 0 25px;

    color: #0f172a;

    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.05;
    letter-spacing: -2px;
}

.about-belief-content h2 span {
    color: #2563eb;
}

.about-belief-content p {
    margin: 0 0 18px;

    color: #475569;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   DIFFERENCE
========================================================= */

.about-difference {
    padding: 120px 0;
    background: #ffffff;
}

.about-section-heading {
    max-width: 700px;
    margin-bottom: 55px;
}

.about-section-heading h2 {
    margin: 0 0 18px;

    color: #0f172a;

    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -2px;
}

.about-section-heading h2 span {
    color: #2563eb;
}

.about-section-heading p {
    max-width: 620px;
    margin: 0;

    color: #64748b;

    font-size: 16px;
    line-height: 1.7;
}

.difference-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.difference-card {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 22px;

    padding: 35px;

    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.difference-card:hover {
    transform: translateY(-4px);

    border-color: #bfdbfe;

    box-shadow: 0 18px 40px rgba(15,23,42,.07);
}

.difference-icon {
    width: 55px;
    height: 55px;

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

    background: #eff6ff;
    color: #2563eb;

    border-radius: 50%;
}

.difference-icon svg {
    width: 25px;
    height: 25px;
}

.difference-card h3 {
    margin: 0 0 10px;

    color: #0f172a;
    font-size: 20px;
}

.difference-card p {
    margin: 0;

    color: #64748b;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   VALUES
========================================================= */

.about-values {
    padding: 120px 0;

    background: #0f172a;
    color: #ffffff;
}

.about-values-layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 100px;
}

.about-values .about-kicker {
    color: #60a5fa;
}

.about-values .about-kicker::before {
    background: #60a5fa;
}

.about-values-intro h2 {
    margin: 0 0 20px;

    color: #ffffff;

    font-size: clamp(38px, 4vw, 55px);
    line-height: 1.05;
    letter-spacing: -2px;
}

.about-values-intro h2 span {
    display: block;
    color: #60a5fa;
}

.about-values-intro p {
    max-width: 440px;
    margin: 0;

    color: #94a3b8;

    font-size: 16px;
    line-height: 1.8;
}

.about-values-list {
    border-top: 1px solid rgba(255,255,255,.12);
}

.about-value-item {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 20px;

    padding: 28px 0;

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

.about-value-item > span {
    color: #60a5fa;

    font-size: 12px;
    font-weight: 700;
}

.about-value-item h3 {
    margin: 0 0 7px;

    color: #ffffff;
    font-size: 20px;
}

.about-value-item p {
    margin: 0;

    color: #94a3b8;

    font-size: 15px;
    line-height: 1.65;
}


/* =========================================================
   EXPERIENCE
========================================================= */

.about-experience {
    padding: 120px 0;
    background: #ffffff;
}

.about-experience-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 90px;
    align-items: center;
}

.about-experience-content {
    max-width: 680px;
}

.about-experience-content h2 {
    margin: 0 0 28px;

    color: #0f172a;

    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -2px;
}

.about-experience-content h2 span {
    color: #2563eb;
}

.about-experience-content p {
    margin: 0 0 18px;

    color: #475569;

    font-size: 16px;
    line-height: 1.8;
}

.about-experience-box {
    padding: 50px;

    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 14px;
}

.experience-box-icon {
    width: 60px;
    height: 60px;

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

    margin-bottom: 25px;

    background: #2563eb;
    color: #ffffff;

    border-radius: 50%;
}

.experience-box-icon svg {
    width: 28px;
    height: 28px;
}

.about-experience-box h3 {
    margin: 15px 0 0;

    color: #0f172a;

    font-size: 30px;
    line-height: 1.25;
    letter-spacing: -1px;
}

.about-experience-box h3 span {
    color: #2563eb;
}


/* =========================================================
   CUSTOMERS
========================================================= */

.about-customers {
    padding: 120px 0;
    background: #f8fafc;
}

.customer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.customer-card {
    min-height: 300px;

    padding: 30px;

    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.customer-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(15,23,42,.08);
}

.customer-icon {
    width: 50px;
    height: 50px;

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

    margin-bottom: 28px;

    background: #eff6ff;
    color: #2563eb;

    border-radius: 50%;
}

.customer-icon svg {
    width: 24px;
    height: 24px;
}

.customer-number {
    display: block;

    margin-bottom: 15px;

    color: #94a3b8;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.customer-card h3 {
    margin: 0 0 12px;

    color: #0f172a;

    font-size: 20px;
}

.customer-card p {
    margin: 0;

    color: #64748b;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   LOCAL ADELAIDE
========================================================= */

.about-local {
    padding: 110px 0;

    background: #ffffff;
}

.about-local-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 70px;
}

.about-local-content {
    max-width: 720px;
}

.about-local-content h2 {
    margin: 0 0 22px;

    color: #0f172a;

    font-size: clamp(38px, 4vw, 55px);
    line-height: 1.05;
    letter-spacing: -2px;
}

.about-local-content h2 span {
    display: block;
    color: #2563eb;
}

.about-local-content p {
    margin: 0 0 17px;

    color: #64748b;

    font-size: 16px;
    line-height: 1.8;
}

.about-local-mark {
    flex: 0 0 230px;

    width: 230px;
    height: 230px;

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

    border: 1px solid #dbeafe;
    border-radius: 50%;

    color: #2563eb;

    background: #f8fafc;
}

.local-mark-icon {
    margin-bottom: 8px;
}

.local-mark-icon svg {
    width: 40px;
    height: 40px;
}

.about-local-mark > span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.about-local-mark > strong {
    margin-top: 2px;

    color: #0f172a;

    font-size: 38px;
    line-height: 1;
}


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

.about-cta {
    padding: 85px 0;

    background: #2563eb;
    color: #ffffff;
}

.about-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 50px;
}

.about-cta .about-kicker {
    color: #dbeafe;
}

.about-cta .about-kicker::before {
    background: #dbeafe;
}

.about-cta h2 {
    margin: 0 0 15px;

    color: #ffffff;

    font-size: clamp(38px, 4vw, 55px);
    line-height: 1.05;
    letter-spacing: -2px;
}

.about-cta h2 span {
    color: #bfdbfe;
}

.about-cta p {
    max-width: 600px;
    margin: 0;

    color: #dbeafe;

    font-size: 16px;
    line-height: 1.7;
}

.about-cta .btn-white {
    flex: 0 0 auto;

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

    min-height: 54px;
    padding: 0 28px;

    background: #ffffff;
    color: #0f172a;

    border-radius: 8px;

    font-weight: 700;
    text-decoration: none;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.about-cta .btn-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .about-hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;

        min-height: auto;
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .about-hero-content {
        max-width: 800px;
    }

    .about-hero-visual {
        min-height: 350px;
    }

    .about-story-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .about-story-content {
        max-width: 800px;
    }

    .about-values-layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .about-experience-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .customer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .about-hero-inner {
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .about-hero h1 {
        font-size: 43px;
        letter-spacing: -2px;
    }

    .about-hero p {
        font-size: 16px;
    }

    .about-hero-buttons {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .about-hero-visual {
        min-height: 300px;
    }

    .about-hero-visual::before {
        width: 250px;
        height: 250px;
    }

    .about-hero-icon-wrap {
        width: 170px;
        height: 170px;
    }

    .about-hero-icon {
        width: 72px;
        height: 72px;
    }

    .about-hero-floating-card {
        right: 0;
        bottom: 0;

        width: 250px;

        padding: 15px;
    }


    .about-story,
    .about-difference,
    .about-values,
    .about-experience,
    .about-customers {
        padding: 80px 0;
    }

    .about-belief {
        padding: 75px 0;
    }

    .about-local {
        padding: 75px 0;
    }


    .about-story-grid {
        gap: 40px;
    }

    .story-icon-panel {
        min-height: 360px;
    }

    .story-icon-panel::before {
        width: 270px;
        height: 270px;
    }

    .story-icon-panel::after {
        width: 190px;
        height: 190px;
    }

    .story-main-icon {
        width: 120px;
        height: 120px;
    }

    .story-main-icon svg {
        width: 60px;
        height: 60px;
    }

    .story-small-icons {
        top: 30px;
        right: 25px;
    }

    .story-caption {
        left: 18px;
        bottom: 18px;
    }


    .about-story-content h2,
    .about-belief-content h2,
    .about-section-heading h2,
    .about-experience-content h2,
    .about-local-content h2 {
        font-size: 38px;
    }


    .about-belief-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .about-belief-number {
        font-size: 42px;
    }


    .difference-grid {
        grid-template-columns: 1fr;
    }

    .difference-card {
        grid-template-columns: 50px 1fr;
        padding: 25px;
        gap: 17px;
    }

    .difference-icon {
        width: 48px;
        height: 48px;
    }


    .about-values-layout {
        gap: 40px;
    }


    .about-experience-box {
        padding: 32px;
    }

    .about-experience-box h3 {
        font-size: 27px;
    }


    .customer-grid {
        grid-template-columns: 1fr;
    }

    .customer-card {
        min-height: auto;
    }


    .about-local-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .about-local-mark {
        align-self: center;

        width: 190px;
        height: 190px;
    }


    .about-cta {
        padding: 65px 0;
    }

    .about-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

}
        


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


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

.services-hero {
    padding: 100px 0;
    background: #f8fafc;
}

.services-hero-inner {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 80px;
    align-items: center;
}

.services-hero-content {
    max-width: 720px;
}

.services-kicker {
    display: inline-block;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.services-hero-content h1 {
    margin: 15px 0 22px;
    color: #0f172a;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.08;
    font-weight: 700;
}

.services-hero-content h1 span {
    display: block;
    color: #2563eb;
}

.services-hero-content > p {
    max-width: 650px;
    margin: 0;
    color: #64748b;
    font-size: 17px;
    line-height: 1.8;
}

.services-hero-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 35px;
}

.services-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.services-text-link span {
    color: #2563eb;
    font-size: 18px;
    transition: transform 0.3s ease;
}

.services-text-link:hover span {
    transform: translateY(4px);
}


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

.services-hero-card {
    position: relative;
    padding: 50px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}

.services-hero-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 65px;
    height: 5px;
    background: #2563eb;
    border-radius: 22px 0 5px 0;
}

.services-hero-icon {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    background: #eff6ff;
    border-radius: 16px;
}

.services-hero-icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: #2563eb;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.services-hero-card > span {
    display: block;
    margin-bottom: 12px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.services-hero-card h2 {
    margin: 0 0 15px;
    color: #0f172a;
    font-size: 30px;
    line-height: 1.25;
}

.services-hero-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}


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

.services-section-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.services-section-heading h2 {
    margin: 12px 0 18px;
    color: #0f172a;
    font-size: 42px;
    line-height: 1.2;
}

.services-section-heading h2 span {
    color: #2563eb;
}

.services-section-heading p {
    max-width: 680px;
    margin: 0 auto;
    color: #64748b;
    font-size: 16px;
    line-height: 1.75;
}


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

.services-intro {
    padding: 100px 0 30px;
    background: #ffffff;
}


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

.services-list {
    padding: 50px 0 110px;
    background: #ffffff;
}

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


/* =========================================================
   SERVICE CARD
========================================================= */

.service-card {
    position: relative;
    padding: 32px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.service-card::after {
    content: "";
    position: absolute;
    right: -35px;
    bottom: -35px;
    width: 100px;
    height: 100px;
    background: #eff6ff;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    border-color: #bfdbfe;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.service-card:hover::after {
    opacity: 1;
}

.service-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.service-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    border-radius: 14px;
}

.service-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: #2563eb;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.service-number {
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 700;
}

.service-card h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 13px;
    color: #0f172a;
    font-size: 22px;
    line-height: 1.3;
}

.service-card > p {
    position: relative;
    z-index: 2;
    margin: 0 0 22px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}

.service-card ul {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-card li {
    position: relative;
    margin-bottom: 9px;
    padding-left: 20px;
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
}

.service-card li:last-child {
    margin-bottom: 0;
}

.service-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #2563eb;
    font-weight: 700;
}


/* =========================================================
   WHAT'S INCLUDED
========================================================= */

.services-included {
    padding: 110px 0;
    background: #f8fafc;
}

.services-included-inner {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 90px;
    align-items: center;
}

.services-included-content {
    max-width: 550px;
}

.services-included-content h2 {
    margin: 12px 0 20px;
    color: #0f172a;
    font-size: 44px;
    line-height: 1.15;
}

.services-included-content h2 span {
    color: #2563eb;
}

.services-included-content > p {
    margin: 0 0 30px;
    color: #64748b;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   INCLUDED LIST
========================================================= */

.services-included-list {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
}

.included-item {
    display: flex;
    gap: 25px;
    padding: 27px 30px;
    border-bottom: 1px solid #e2e8f0;
}

.included-item:last-child {
    border-bottom: 0;
}

.included-item > span {
    width: 35px;
    min-width: 35px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
}

.included-item h3 {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 18px;
}

.included-item p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   WHY CHOOSE US
========================================================= */

.services-why {
    padding: 110px 0;
    background: #ffffff;
}

.services-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.services-benefit-card {
    padding: 32px 25px;
    text-align: center;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.services-benefit-card:hover {
    transform: translateY(-5px);
    border-color: #bfdbfe;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.07);
}

.services-benefit-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    background: #eff6ff;
    border-radius: 14px;
}

.services-benefit-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: #2563eb;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.services-benefit-card h3 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 18px;
}

.services-benefit-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}


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

.services-process {
    padding: 110px 0;
    background: #f8fafc;
}

.services-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.services-process-card {
    position: relative;
    padding: 32px 27px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
}

.services-process-card > strong {
    position: absolute;
    top: 25px;
    right: 25px;
    color: #cbd5e1;
    font-size: 14px;
}

.services-process-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    background: #eff6ff;
    border-radius: 13px;
}

.services-process-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: #2563eb;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.services-process-card h3 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 18px;
}

.services-process-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}


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

.services-cta {
    padding: 90px 0;
    background: #2563eb;
}

.services-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.services-cta-inner .services-kicker {
    color: #bfdbfe;
}

.services-cta-inner h2 {
    max-width: 700px;
    margin: 12px 0 15px;
    color: #ffffff;
    font-size: 42px;
    line-height: 1.2;
}

.services-cta-inner h2 span {
    color: #bfdbfe;
}

.services-cta-inner p {
    max-width: 650px;
    margin: 0;
    color: #cbd5e1;
    font-size: 16px;
    line-height: 1.7;
}

.services-cta-inner .btn-white {
    flex-shrink: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .services-hero-inner {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .services-hero-content {
        max-width: 800px;
    }

    .services-hero-card {
        max-width: 650px;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-included-inner {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .services-included-content {
        max-width: 750px;
    }

    .services-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .services-hero {
        padding: 70px 0;
    }

    .services-hero-content h1 {
        font-size: 42px;
    }

    .services-hero-content > p {
        font-size: 15px;
    }

    .services-hero-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .services-hero-card {
        padding: 32px 25px;
    }

    .services-hero-card h2 {
        font-size: 26px;
    }

    .services-intro {
        padding: 75px 0 20px;
    }

    .services-list {
        padding: 35px 0 75px;
    }

    .services-section-heading {
        margin-bottom: 40px;
    }

    .services-section-heading h2 {
        font-size: 32px;
    }

    .services-section-heading p {
        font-size: 15px;
    }

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

    .service-card {
        padding: 27px;
    }

    .services-included {
        padding: 75px 0;
    }

    .services-included-content h2 {
        font-size: 34px;
    }

    .included-item {
        padding: 23px 20px;
        gap: 18px;
    }

    .services-why {
        padding: 75px 0;
    }

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

    .services-process {
        padding: 75px 0;
    }

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

    .services-cta {
        padding: 70px 0;
    }

    .services-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .services-cta-inner h2 {
        font-size: 32px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .services-hero-content h1 {
        font-size: 36px;
    }

    .services-hero-card {
        padding: 28px 22px;
    }

    .services-section-heading h2 {
        font-size: 29px;
    }

    .services-included-content h2 {
        font-size: 30px;
    }

    .services-cta-inner h2 {
        font-size: 29px;
    }

}


/* =========================================================
   HOW IT WORKS PAGE
========================================================= */


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

.hiw-hero {
    padding: 100px 0;
    background: #f8fafc;
}

.hiw-hero-inner {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 80px;
    align-items: center;
}

.hiw-hero-content {
    max-width: 720px;
}

.hiw-kicker {
    display: inline-block;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.hiw-hero-content h1 {
    margin: 15px 0 22px;
    color: #0f172a;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.08;
    font-weight: 700;
}

.hiw-hero-content h1 span {
    display: block;
    color: #2563eb;
}

.hiw-hero-content > p {
    max-width: 650px;
    margin: 0;
    color: #64748b;
    font-size: 17px;
    line-height: 1.8;
}

.hiw-hero-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 35px;
}

.hiw-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.hiw-text-link span {
    color: #2563eb;
    font-size: 18px;
    transition: transform 0.3s ease;
}

.hiw-text-link:hover span {
    transform: translateY(4px);
}


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

.hiw-hero-card {
    position: relative;
    padding: 50px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}

.hiw-hero-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 65px;
    height: 5px;
    background: #2563eb;
    border-radius: 22px 0 5px 0;
}

.hiw-hero-icon {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    background: #eff6ff;
    border-radius: 16px;
}

.hiw-hero-icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: #2563eb;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hiw-hero-card > span {
    display: block;
    margin-bottom: 12px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.hiw-hero-card h2 {
    margin: 0 0 15px;
    color: #0f172a;
    font-size: 30px;
    line-height: 1.25;
}

.hiw-hero-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}


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

.hiw-section-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.hiw-section-heading h2 {
    margin: 12px 0 18px;
    color: #0f172a;
    font-size: 42px;
    line-height: 1.2;
}

.hiw-section-heading h2 span {
    color: #2563eb;
}

.hiw-section-heading p {
    max-width: 680px;
    margin: 0 auto;
    color: #64748b;
    font-size: 16px;
    line-height: 1.75;
}


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

.hiw-intro {
    padding: 100px 0 35px;
    background: #ffffff;
}


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

.hiw-process {
    padding: 40px 0 110px;
    background: #ffffff;
}

.hiw-process-list {
    max-width: 1050px;
    margin: 0 auto;
}


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

.hiw-process-item {
    position: relative;
    display: grid;
    grid-template-columns: 85px 1fr 90px;
    gap: 35px;
    align-items: center;
    padding: 45px 0;
    border-bottom: 1px solid #e2e8f0;
}

.hiw-process-item:first-child {
    border-top: 1px solid #e2e8f0;
}

.hiw-process-number {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    border-radius: 50%;
}

.hiw-process-number span {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

.hiw-process-content {
    max-width: 650px;
}

.hiw-step-label {
    display: block;
    margin-bottom: 9px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.hiw-process-content h2 {
    margin: 0 0 14px;
    color: #0f172a;
    font-size: 32px;
    line-height: 1.2;
}

.hiw-process-content h2 span {
    color: #2563eb;
}

.hiw-process-content > p {
    margin: 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.75;
}

.hiw-step-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 22px;
}

.hiw-step-points div {
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
}

.hiw-step-points span {
    margin-right: 5px;
    color: #2563eb;
    font-weight: 700;
}

.hiw-process-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    background: #eff6ff;
    border-radius: 17px;
}

.hiw-process-icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: #2563eb;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   WHAT TO EXPECT
========================================================= */

.hiw-expect {
    padding: 110px 0;
    background: #f8fafc;
}

.hiw-expect-inner {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 90px;
    align-items: center;
}

.hiw-expect-content {
    max-width: 550px;
}

.hiw-expect-content h2 {
    margin: 12px 0 20px;
    color: #0f172a;
    font-size: 44px;
    line-height: 1.15;
}

.hiw-expect-content h2 span {
    color: #2563eb;
}

.hiw-expect-content > p {
    margin: 0 0 30px;
    color: #64748b;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   EXPECT LIST
========================================================= */

.hiw-expect-list {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
}

.hiw-expect-item {
    display: flex;
    gap: 20px;
    padding: 28px 30px;
    border-bottom: 1px solid #e2e8f0;
}

.hiw-expect-item:last-child {
    border-bottom: 0;
}

.hiw-expect-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    border-radius: 13px;
}

.hiw-expect-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #2563eb;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hiw-expect-item h3 {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 18px;
}

.hiw-expect-item p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   BEFORE YOUR CLEAN
========================================================= */

.hiw-before {
    padding: 110px 0;
    background: #ffffff;
}

.hiw-before-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.hiw-before-card {
    padding: 32px 27px;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.hiw-before-card:hover {
    transform: translateY(-5px);
    border-color: #bfdbfe;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.07);
}

.hiw-before-card > span {
    display: block;
    margin-bottom: 22px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
}

.hiw-before-card h3 {
    margin: 0 0 12px;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.4;
}

.hiw-before-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}


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

.hiw-cta {
    padding: 90px 0;
    background: #2563eb;
}

.hiw-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.hiw-cta-inner .hiw-kicker {
    color: #93c5fd;
}

.hiw-cta-inner h2 {
    max-width: 750px;
    margin: 12px 0 15px;
    color: #ffffff;
    font-size: 42px;
    line-height: 1.2;
}

.hiw-cta-inner h2 span {
    color: #60a5fa;
}

.hiw-cta-inner p {
    max-width: 650px;
    margin: 0;
    color: #cbd5e1;
    font-size: 16px;
    line-height: 1.7;
}

.hiw-cta-inner .btn-white {
    flex-shrink: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .hiw-hero-inner {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .hiw-hero-content {
        max-width: 800px;
    }

    .hiw-hero-card {
        max-width: 650px;
    }

    .hiw-expect-inner {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .hiw-expect-content {
        max-width: 750px;
    }

    .hiw-before-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .hiw-hero {
        padding: 70px 0;
    }

    .hiw-hero-content h1 {
        font-size: 42px;
    }

    .hiw-hero-content > p {
        font-size: 15px;
    }

    .hiw-hero-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .hiw-hero-card {
        padding: 32px 25px;
    }

    .hiw-hero-card h2 {
        font-size: 26px;
    }

    .hiw-intro {
        padding: 75px 0 25px;
    }

    .hiw-section-heading {
        margin-bottom: 40px;
    }

    .hiw-section-heading h2 {
        font-size: 32px;
    }

    .hiw-section-heading p {
        font-size: 15px;
    }

    .hiw-process {
        padding: 25px 0 75px;
    }

    .hiw-process-item {
        grid-template-columns: 60px 1fr;
        gap: 22px;
        padding: 35px 0;
    }

    .hiw-process-number {
        width: 55px;
        height: 55px;
    }

    .hiw-process-icon {
        display: none;
    }

    .hiw-process-content h2 {
        font-size: 27px;
    }

    .hiw-step-points {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .hiw-expect {
        padding: 75px 0;
    }

    .hiw-expect-content h2 {
        font-size: 34px;
    }

    .hiw-expect-item {
        padding: 22px 20px;
    }

    .hiw-before {
        padding: 75px 0;
    }

    .hiw-before-grid {
        grid-template-columns: 1fr;
    }

    .hiw-cta {
        padding: 70px 0;
    }

    .hiw-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .hiw-cta-inner h2 {
        font-size: 32px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .hiw-hero-content h1 {
        font-size: 36px;
    }

    .hiw-hero-card {
        padding: 28px 22px;
    }

    .hiw-section-heading h2 {
        font-size: 29px;
    }

    .hiw-process-item {
        grid-template-columns: 48px 1fr;
        gap: 17px;
    }

    .hiw-process-number {
        width: 48px;
        height: 48px;
    }

    .hiw-process-number span {
        font-size: 13px;
    }

    .hiw-process-content h2 {
        font-size: 24px;
    }

    .hiw-expect-content h2 {
        font-size: 30px;
    }

    .hiw-cta-inner h2 {
        font-size: 29px;
    }

}




/* =========================================================
   PRICING PAGE
========================================================= */


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

.pricing-hero {
    padding: 100px 0;
    background: #f8fafc;
}

.pricing-hero-inner {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 80px;
}

.pricing-hero-content {
    max-width: 720px;
}

.pricing-kicker {
    display: inline-block;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.pricing-hero-content h1 {
    margin: 15px 0 22px;
    color: #0f172a;
    font-size: clamp(44px, 5vw, 68px);
    line-height: 1.06;
}

.pricing-hero-content h1 span {
    display: block;
    color: #2563eb;
}

.pricing-hero-content > p {
    max-width: 650px;
    margin: 0;
    color: #64748b;
    font-size: 17px;
    line-height: 1.8;
}

.pricing-hero-actions {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 35px;
}

.pricing-call-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #0f172a;
    text-decoration: none;
}

.pricing-call-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    background: #eff6ff;
    border-radius: 50%;
}

.pricing-call-link small {
    display: block;
    margin-bottom: 3px;
    color: #64748b;
    font-size: 11px;
}

.pricing-call-link strong {
    font-size: 15px;
}


/* =========================================================
   HERO PRICE CARD
========================================================= */

.pricing-hero-card {
    position: relative;
    padding: 48px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .08);
}

.pricing-hero-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    height: 5px;
    background: #2563eb;
    border-radius: 20px 0 5px 0;
}

.pricing-hero-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    background: #eff6ff;
    border-radius: 15px;
}

.pricing-hero-icon svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: #2563eb;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pricing-card-kicker {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.pricing-hero-price {
    color: #2563eb;
    font-size: 54px;
    font-weight: 700;
    line-height: 1;
}

.pricing-hero-card h2 {
    margin: 15px 0 10px;
    color: #0f172a;
    font-size: 26px;
}

.pricing-hero-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}


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

.pricing-section-heading {
    max-width: 750px;
    margin: 0 auto 55px;
    text-align: center;
}

.pricing-section-heading h2 {
    margin: 12px 0 17px;
    color: #0f172a;
    font-size: 42px;
    line-height: 1.2;
}

.pricing-section-heading h2 span {
    color: #2563eb;
}

.pricing-section-heading p {
    margin: 0 auto;
    color: #64748b;
    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   MAIN PRICING
========================================================= */

.pricing-main {
    padding: 105px 0 90px;
    background: #fff;
}

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


/* =========================================================
   PRICING CARD
========================================================= */

.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 35px 32px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    transition: all .3s ease;
}

.pricing-card:hover {
    transform: translateY(-6px);
    border-color: #bfdbfe;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .08);
}

.pricing-card-featured {
    border: 2px solid #2563eb;
    box-shadow: 0 15px 40px rgba(37, 99, 235, .12);
}

.pricing-popular {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 7px 18px;
    color: #fff;
    background: #2563eb;
    border-radius: 30px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
}


/* =========================================================
   CARD HEADER
========================================================= */

.pricing-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.pricing-label {
    display: block;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.pricing-card h3 {
    margin: 0 0 5px;
    color: #0f172a;
    font-size: 25px;
}

.pricing-card-header p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

.pricing-small-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    border-radius: 13px;
}

.pricing-small-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: #2563eb;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   PRICE
========================================================= */

.pricing-price {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 30px;
}

.pricing-price small {
    color: #64748b;
    font-size: 13px;
}

.pricing-price strong {
    color: #0f172a;
    font-size: 48px;
    line-height: 1;
}

.pricing-price span {
    color: #64748b;
    font-size: 13px;
}


/* =========================================================
   FEATURES
========================================================= */

.pricing-divider {
    height: 1px;
    margin: 27px 0;
    background: #e2e8f0;
}

.pricing-card h4 {
    margin: 0 0 18px;
    color: #0f172a;
    font-size: 14px;
}

.pricing-features {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.pricing-features li {
    display: flex;
    gap: 10px;
    color: #475569;
    font-size: 14px;
}

.pricing-features li span {
    color: #2563eb;
    font-weight: 700;
}


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

.pricing-card-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: auto;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all .3s ease;
}

.pricing-card-button-outline {
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.pricing-card-button-outline:hover {
    color: #fff;
    background: #2563eb;
    border-color: #2563eb;
}

.pricing-card-button-filled {
    color: #fff;
    background: #2563eb;
    border: 1px solid #2563eb;
}

.pricing-card-button-filled:hover {
    background: #1d4ed8;
}


/* =========================================================
   PRICE NOTE
========================================================= */

.pricing-note {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-top: 35px;
    padding: 25px 30px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

.pricing-note-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    border-radius: 11px;
}

.pricing-note-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: #2563eb;
    stroke-width: 1.6;
}

.pricing-note strong {
    display: block;
    margin-bottom: 5px;
    color: #0f172a;
    font-size: 14px;
}

.pricing-note p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.7;
}


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

.pricing-services {
    padding: 105px 0;
    background: #f8fafc;
}

.pricing-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.pricing-service-card {
    padding: 30px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    transition: all .3s ease;
}

.pricing-service-card:hover {
    transform: translateY(-5px);
    border-color: #bfdbfe;
    box-shadow: 0 15px 35px rgba(15, 23, 42, .07);
}

.pricing-service-card-highlight {
    border-color: #bfdbfe;
}

.pricing-service-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: #eff6ff;
    border-radius: 13px;
}

.pricing-service-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: #2563eb;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pricing-service-card > div:nth-child(2) {
    margin-bottom: 13px;
}

.pricing-service-card > div:nth-child(2) span {
    display: block;
    color: #64748b;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.pricing-service-card > div:nth-child(2) strong {
    display: block;
    margin-top: 3px;
    color: #2563eb;
    font-size: 25px;
}

.pricing-service-card h3 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 19px;
}

.pricing-service-card p {
    margin: 0 0 20px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}

.pricing-service-card > a {
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}


/* =========================================================
   FACTORS
========================================================= */

.pricing-factors {
    padding: 105px 0;
    background: #fff;
}

.pricing-factor-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.pricing-factor-card {
    position: relative;
    padding: 30px 25px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
}

.pricing-factor-card > span {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
}

.pricing-factor-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: #eff6ff;
    border-radius: 13px;
}

.pricing-factor-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: #2563eb;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pricing-factor-card h3 {
    margin: 0 0 9px;
    color: #0f172a;
    font-size: 18px;
}

.pricing-factor-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}


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

.pricing-cta {
    padding: 90px 0;
    background: #2563eb;
}

.pricing-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.pricing-cta-inner h2 {
    max-width: 700px;
    margin: 12px 0 15px;
    color: #fff;
    font-size: 42px;
    line-height: 1.2;
}

.pricing-cta-inner h2 span {
    color: #60a5fa;
}

.pricing-cta-inner p {
    max-width: 620px;
    margin: 0;
    color: #cbd5e1;
    line-height: 1.7;
}

.pricing-cta-inner .pricing-kicker {
    color: #93c5fd;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .pricing-hero-inner {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .pricing-hero-card {
        max-width: 600px;
    }

    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-factor-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .pricing-hero {
        padding: 70px 0;
    }

    .pricing-hero-content h1 {
        font-size: 42px;
    }

    .pricing-hero-content > p {
        font-size: 15px;
    }

    .pricing-hero-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .pricing-hero-card {
        padding: 35px 27px;
    }

    .pricing-hero-price {
        font-size: 47px;
    }

    .pricing-main {
        padding: 75px 0;
    }

    .pricing-section-heading {
        margin-bottom: 40px;
    }

    .pricing-section-heading h2 {
        font-size: 32px;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .pricing-card {
        padding: 32px 27px;
    }

    .pricing-service-grid {
        grid-template-columns: 1fr;
    }

    .pricing-services {
        padding: 75px 0;
    }

    .pricing-factors {
        padding: 75px 0;
    }

    .pricing-factor-grid {
        grid-template-columns: 1fr;
    }

    .pricing-cta {
        padding: 70px 0;
    }

    .pricing-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .pricing-cta-inner h2 {
        font-size: 33px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .pricing-hero-content h1 {
        font-size: 36px;
    }

    .pricing-section-heading h2 {
        font-size: 29px;
    }

    .pricing-price strong {
        font-size: 42px;
    }

    .pricing-note {
        padding: 22px;
    }

    .pricing-cta-inner h2 {
        font-size: 29px;
    }

}



/* =========================================================
   SERVICE AREAS PAGE
   Adelaide Cleaning Company
========================================================= */


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

.areas-page-hero {
    padding: 110px 0 100px;
    background: #f8fafc;
    overflow: hidden;
}

.areas-page-hero-inner {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 80px;
    align-items: center;
}

.areas-page-hero-content {
    max-width: 720px;
}

.areas-page-kicker {
    display: inline-block;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #2563eb;
}

.areas-page-hero h1 {
    margin: 0 0 25px;
    font-size: clamp(42px, 5vw, 70px);
    line-height: 1.05;
    letter-spacing: -2px;
    color: #0f172a;
}

.areas-page-hero h1 span {
    color: #2563eb;
}

.areas-page-hero-content > p {
    max-width: 650px;
    margin: 0 0 32px;
    font-size: 18px;
    line-height: 1.75;
    color: #64748b;
}

.areas-page-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}


/* =========================================================
   CALL LINK
========================================================= */

.areas-page-call {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #0f172a;
    text-decoration: none;
}

.areas-page-call-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf1ff;
    color: #2563eb;
    font-size: 19px;
}

.areas-page-call small {
    display: block;
    margin-bottom: 3px;
    color: #64748b;
    font-size: 12px;
}

.areas-page-call strong {
    display: block;
    font-size: 16px;
}


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

.areas-page-hero-card {
    position: relative;
    padding: 55px 45px;
    border-radius: 24px;
    background: #0f172a;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(15, 23, 42, .12);
}

.areas-page-hero-card::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -70px;
    bottom: -70px;
    border-radius: 50%;
    background: rgba(37, 99, 235, .25);
}

.areas-page-hero-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #2563eb;
}

.areas-page-hero-icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.areas-page-hero-card > span {
    display: block;
    margin-bottom: 12px;
    color: #93c5fd;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.areas-page-hero-card strong {
    position: relative;
    z-index: 2;
    display: block;
    margin-bottom: 20px;
    font-size: 32px;
    line-height: 1.2;
}

.areas-page-hero-card p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #cbd5e1;
    line-height: 1.7;
}


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

.areas-page-intro {
    padding: 100px 0;
    background: #fff;
}

.areas-page-intro-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;
    align-items: start;
}

.areas-page-intro h2 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.12;
    letter-spacing: -1.5px;
}

.areas-page-intro h2 span {
    color: #2563eb;
}

.areas-page-intro-grid > div:last-child {
    padding-top: 5px;
}

.areas-page-intro p {
    margin: 0 0 20px;
    color: #64748b;
    font-size: 17px;
    line-height: 1.8;
}


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

.areas-page-section-heading {
    max-width: 720px;
    margin-bottom: 55px;
}

.areas-page-section-heading.center {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.areas-page-section-heading h2 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.12;
    letter-spacing: -1.5px;
}

.areas-page-section-heading h2 span {
    color: #2563eb;
}

.areas-page-section-heading p {
    margin: 18px 0 0;
    color: #64748b;
    line-height: 1.75;
    font-size: 17px;
}


/* =========================================================
   SERVICE AREA / SUBURBS
========================================================= */

.areas-page-suburbs {
    padding: 100px 0;
    background: #f8fafc;
}

.areas-page-suburb-list {
    max-width: 1050px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 13px;
}

.areas-page-suburb-list span {
    padding: 14px 21px;
    border: 1px solid #e2e8f0;
    border-radius: 100px;
    background: #fff;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
    transition: all .25s ease;
}

.areas-page-suburb-list span:hover {
    color: #2563eb;
    border-color: #bfdbfe;
    background: #eff6ff;
    transform: translateY(-2px);
}


/* =========================================================
   SUBURB NOTE
========================================================= */

.areas-page-suburb-note {
    max-width: 920px;
    margin: 50px auto 0;
    padding: 25px 30px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
}

.areas-page-suburb-note-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-weight: 800;
}

.areas-page-suburb-note strong {
    display: block;
    margin-bottom: 5px;
    color: #0f172a;
}

.areas-page-suburb-note p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}


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

.areas-page-services {
    padding: 100px 0;
    background: #fff;
}

.areas-page-services-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;
    align-items: center;
}

.areas-page-services-content h2 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.12;
    letter-spacing: -1.5px;
}

.areas-page-services-content h2 span {
    color: #2563eb;
}

.areas-page-services-content > p {
    max-width: 540px;
    margin: 25px 0 30px;
    color: #64748b;
    font-size: 17px;
    line-height: 1.8;
}


/* SERVICE LIST */

.areas-page-service-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.areas-page-service-item {
    display: flex;
    gap: 18px;
    padding: 25px;
    background: #f8fafc;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    transition: all .25s ease;
}

.areas-page-service-item:hover {
    background: #fff;
    border-color: #bfdbfe;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
}

.areas-page-service-item > span {
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
}

.areas-page-service-item h3 {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 16px;
}

.areas-page-service-item p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}


/* =========================================================
   WHY CHOOSE US
========================================================= */

.areas-page-why {
    padding: 100px 0;
    background: #f8fafc;
}

.areas-page-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
}

.areas-page-why-content h2 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.12;
    letter-spacing: -1.5px;
}

.areas-page-why-content h2 span {
    color: #2563eb;
}

.areas-page-why-content > p {
    margin: 22px 0 0;
    color: #64748b;
    font-size: 17px;
    line-height: 1.8;
}


/* BENEFITS */

.areas-page-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.areas-page-benefit {
    padding: 28px;
    display: flex;
    gap: 16px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    transition: all .25s ease;
}

.areas-page-benefit:hover {
    border-color: #bfdbfe;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
}

.areas-page-benefit-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-weight: 800;
}

.areas-page-benefit strong {
    display: block;
    margin-bottom: 5px;
    color: #0f172a;
}

.areas-page-benefit p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}


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

.areas-page-cta {
    padding: 80px 0;
    background: #2563eb;
}

.areas-page-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.areas-page-cta-inner .areas-page-kicker {
    margin-bottom: 12px;
    color: #bfdbfe;
}

.areas-page-cta h2 {
    margin: 0 0 15px;
    color: #fff;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    letter-spacing: -1px;
}

.areas-page-cta h2 span {
    display: block;
    color: #dbeafe;
}

.areas-page-cta p {
    max-width: 650px;
    margin: 0;
    color: #dbeafe;
    line-height: 1.7;
}

.areas-page-cta .btn-white {
    flex-shrink: 0;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .areas-page-hero-inner {
        gap: 50px;
    }

    .areas-page-intro-grid,
    .areas-page-services-grid,
    .areas-page-why-grid {
        gap: 60px;
    }

}


@media (max-width: 850px) {

    .areas-page-hero {
        padding: 80px 0;
    }

    .areas-page-hero-inner,
    .areas-page-intro-grid,
    .areas-page-services-grid,
    .areas-page-why-grid {
        grid-template-columns: 1fr;
    }

    .areas-page-hero-card {
        max-width: 600px;
    }

    .areas-page-intro,
    .areas-page-suburbs,
    .areas-page-services,
    .areas-page-why {
        padding: 75px 0;
    }

    .areas-page-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width: 650px) {

    .areas-page-hero h1 {
        font-size: 42px;
        letter-spacing: -1.5px;
    }

    .areas-page-hero-content > p,
    .areas-page-intro p,
    .areas-page-services-content > p,
    .areas-page-why-content > p {
        font-size: 15px;
    }

    .areas-page-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .areas-page-hero-card {
        padding: 38px 30px;
    }

    .areas-page-hero-card strong {
        font-size: 27px;
    }

    .areas-page-suburb-list {
        justify-content: flex-start;
    }

    .areas-page-suburb-list span {
        font-size: 13px;
        padding: 11px 16px;
    }

    .areas-page-suburb-note {
        padding: 20px;
    }

    .areas-page-service-list {
        grid-template-columns: 1fr;
    }

    .areas-page-benefits {
        grid-template-columns: 1fr;
    }

    .areas-page-cta {
        padding: 65px 0;
    }

    .areas-page-cta h2 {
        font-size: 34px;
    }

}



/* =========================================================
   REGULAR HOME CLEANING PAGE
   Adelaide Cleaning Company
========================================================= */


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

.regular-cleaning-hero {
    padding: 110px 0 100px;
    background: #f8fafc;
    overflow: hidden;
}

.regular-cleaning-hero-inner {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 80px;
    align-items: center;
}

.regular-cleaning-hero-content {
    max-width: 700px;
}

.regular-cleaning-kicker {
    display: inline-block;
    margin-bottom: 17px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.regular-cleaning-hero h1 {
    margin: 0 0 25px;
    color: #0f172a;
    font-size: clamp(44px, 5vw, 70px);
    line-height: 1.04;
    letter-spacing: -2.5px;
}

.regular-cleaning-hero h1 span {
    color: #2563eb;
}

.regular-cleaning-hero-content > p {
    max-width: 650px;
    margin: 0 0 28px;
    color: #64748b;
    font-size: 18px;
    line-height: 1.75;
}


/* =========================================================
   PRICE
========================================================= */

.regular-cleaning-price {
    display: inline-block;
    margin-bottom: 30px;
    padding: 16px 24px;
    border-left: 4px solid #2563eb;
    background: #fff;
    border-radius: 0 12px 12px 0;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}

.regular-cleaning-price small {
    display: block;
    margin-bottom: 2px;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.regular-cleaning-price strong {
    display: block;
    color: #0f172a;
    font-size: 30px;
    line-height: 1.1;
}

.regular-cleaning-price span {
    color: #64748b;
    font-size: 12px;
}


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

.regular-cleaning-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.regular-cleaning-call {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #0f172a;
    text-decoration: none;
}

.regular-cleaning-call-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf1ff;
    color: #2563eb;
    font-size: 18px;
}

.regular-cleaning-call small {
    display: block;
    margin-bottom: 3px;
    color: #64748b;
    font-size: 11px;
}

.regular-cleaning-call strong {
    display: block;
    font-size: 16px;
}


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

.regular-cleaning-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 25px;
    margin-top: 30px;
}

.regular-cleaning-trust span {
    color: #475569;
    font-size: 13px;
    font-weight: 600;
}


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

.regular-cleaning-hero-visual {
    position: relative;
    min-height: 540px;
}

.regular-cleaning-hero-image {
    position: absolute;
    inset: 0 0 25px 25px;
    min-height: 500px;
    border-radius: 28px;
    background-image:
        linear-gradient(
            180deg,
            rgba(15, 23, 42, .02),
            rgba(15, 23, 42, .15)
        ),
        url("https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=1200&q=85");
    background-size: cover;
    background-position: center;
    box-shadow: 0 25px 60px rgba(15, 23, 42, .12);
}

.regular-cleaning-hero-badge {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 260px;
    padding: 25px;
    border-radius: 18px;
    background: #0f172a;
    color: #fff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .2);
}

.regular-cleaning-hero-badge span {
    display: block;
    margin-bottom: 10px;
    color: #93c5fd;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.regular-cleaning-hero-badge strong {
    display: block;
    font-size: 23px;
    line-height: 1.25;
}


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

.regular-cleaning-intro {
    padding: 100px 0;
    background: #fff;
}

.regular-cleaning-intro-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;
}

.regular-cleaning-intro-heading h2 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(35px, 4vw, 52px);
    line-height: 1.12;
    letter-spacing: -1.5px;
}

.regular-cleaning-intro-heading h2 span {
    color: #2563eb;
}

.regular-cleaning-intro-content p {
    margin: 0 0 20px;
    color: #64748b;
    font-size: 17px;
    line-height: 1.8;
}


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

.regular-cleaning-section-heading {
    max-width: 720px;
    margin-bottom: 55px;
}

.regular-cleaning-section-heading.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.regular-cleaning-section-heading h2 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(35px, 4vw, 52px);
    line-height: 1.12;
    letter-spacing: -1.5px;
}

.regular-cleaning-section-heading h2 span {
    color: #2563eb;
}

.regular-cleaning-section-heading p {
    margin: 18px 0 0;
    color: #64748b;
    font-size: 17px;
    line-height: 1.75;
}


/* =========================================================
   INCLUDED
========================================================= */

.regular-cleaning-included {
    padding: 100px 0;
    background: #f8fafc;
}

.regular-cleaning-included-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.regular-cleaning-included-card {
    position: relative;
    padding: 32px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    transition: .25s ease;
}

.regular-cleaning-included-card:hover {
    transform: translateY(-5px);
    border-color: #bfdbfe;
    box-shadow: 0 15px 40px rgba(15, 23, 42, .07);
}

.regular-cleaning-included-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eff6ff;
    color: #2563eb;
}

.regular-cleaning-included-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.regular-cleaning-included-card > span {
    display: block;
    margin-bottom: 6px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
}

.regular-cleaning-included-card h3 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 21px;
}

.regular-cleaning-included-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   FREQUENCY
========================================================= */

.regular-cleaning-frequency {
    padding: 100px 0;
    background: #fff;
}

.regular-cleaning-frequency-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 100px;
    align-items: center;
}

.regular-cleaning-frequency-content h2 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(35px, 4vw, 52px);
    line-height: 1.12;
    letter-spacing: -1.5px;
}

.regular-cleaning-frequency-content h2 span {
    color: #2563eb;
}

.regular-cleaning-frequency-content > p {
    max-width: 520px;
    margin: 22px 0 30px;
    color: #64748b;
    font-size: 17px;
    line-height: 1.8;
}

.regular-cleaning-frequency-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.regular-cleaning-frequency-card {
    display: flex;
    gap: 18px;
    padding: 25px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
}

.frequency-number {
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
}

.regular-cleaning-frequency-card h3 {
    margin: 0 0 7px;
    color: #0f172a;
    font-size: 18px;
}

.regular-cleaning-frequency-card p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   PRICING
========================================================= */

.regular-cleaning-pricing {
    padding: 100px 0;
    background: #f8fafc;
}

.regular-cleaning-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.regular-cleaning-pricing-card {
    position: relative;
    padding: 38px 32px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
}

.regular-cleaning-pricing-card.featured {
    border: 2px solid #2563eb;
    box-shadow: 0 20px 50px rgba(37, 99, 235, .12);
}

.pricing-popular {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 7px 14px;
    border-radius: 50px;
    background: #2563eb;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    white-space: nowrap;
}

.pricing-card-label {
    display: block;
    margin-bottom: 10px;
    color: #2563eb;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.regular-cleaning-pricing-card h3 {
    margin: 0;
    color: #0f172a;
    font-size: 28px;
}

.pricing-card-size {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
}

.regular-cleaning-price-box {
    margin: 28px 0;
    padding-bottom: 25px;
    border-bottom: 1px solid #e5e7eb;
}

.regular-cleaning-price-box small {
    color: #64748b;
    font-size: 12px;
}

.regular-cleaning-price-box strong {
    display: inline-block;
    margin: 0 5px;
    color: #0f172a;
    font-size: 46px;
    line-height: 1;
}

.regular-cleaning-price-box span {
    color: #64748b;
    font-size: 12px;
}

.regular-cleaning-pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
}

.regular-cleaning-pricing-card li {
    padding: 8px 0;
    color: #475569;
    font-size: 14px;
}


/* =========================================================
   PRICING NOTE
========================================================= */

.regular-cleaning-pricing-note {
    max-width: 850px;
    margin: 35px auto 0;
    text-align: center;
    color: #64748b;
    font-size: 13px;
    line-height: 1.7;
}

.regular-cleaning-pricing-note strong {
    color: #0f172a;
}


/* =========================================================
   WHY REGULAR CLEANING
========================================================= */

.regular-cleaning-why {
    padding: 100px 0;
    background: #fff;
}

.regular-cleaning-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
}

.regular-cleaning-why-content h2 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(35px, 4vw, 52px);
    line-height: 1.12;
    letter-spacing: -1.5px;
}

.regular-cleaning-why-content h2 span {
    color: #2563eb;
}

.regular-cleaning-why-content > p {
    margin: 22px 0 0;
    color: #64748b;
    font-size: 17px;
    line-height: 1.8;
}

.regular-cleaning-why-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.regular-cleaning-why-item {
    padding: 24px;
    display: flex;
    gap: 14px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 15px;
}

.regular-cleaning-why-item > span {
    width: 35px;
    height: 35px;
    min-width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
}

.regular-cleaning-why-item strong {
    display: block;
    margin-bottom: 5px;
    color: #0f172a;
    font-size: 14px;
}

.regular-cleaning-why-item p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   BEFORE CLEAN
========================================================= */

.regular-cleaning-before {
    padding: 100px 0;
    background: #f8fafc;
}

.regular-cleaning-before-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.regular-cleaning-before-card {
    padding: 30px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 17px;
}

.regular-cleaning-before-card > span {
    display: block;
    margin-bottom: 22px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
}

.regular-cleaning-before-card h3 {
    margin: 0 0 12px;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.3;
}

.regular-cleaning-before-card p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.65;
}


/* =========================================================
   SERVICE AREAS
========================================================= */

.regular-cleaning-areas {
    padding: 90px 0;
    background: #fff;
}

.regular-cleaning-areas-inner {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 70px;
    align-items: center;
}

.regular-cleaning-areas h2 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.12;
}

.regular-cleaning-areas h2 span {
    color: #2563eb;
}

.regular-cleaning-areas p {
    margin: 20px 0 0;
    color: #64748b;
    line-height: 1.7;
}

.regular-cleaning-area-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.regular-cleaning-area-tags span {
    padding: 12px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}


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

.regular-cleaning-cta {
    padding: 80px 0;
    background: #2563eb;
}

.regular-cleaning-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.regular-cleaning-cta .regular-cleaning-kicker {
    color: #bfdbfe;
}

.regular-cleaning-cta h2 {
    margin: 0 0 15px;
    color: #fff;
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.12;
}

.regular-cleaning-cta h2 span {
    display: block;
    color: #dbeafe;
}

.regular-cleaning-cta p {
    max-width: 650px;
    margin: 0;
    color: #dbeafe;
    line-height: 1.7;
}

.regular-cleaning-cta .btn-white {
    flex-shrink: 0;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .regular-cleaning-hero-inner {
        gap: 50px;
    }

    .regular-cleaning-intro-grid,
    .regular-cleaning-frequency-grid,
    .regular-cleaning-why-grid {
        gap: 60px;
    }

    .regular-cleaning-before-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 850px) {

    .regular-cleaning-hero {
        padding: 80px 0;
    }

    .regular-cleaning-hero-inner,
    .regular-cleaning-intro-grid,
    .regular-cleaning-frequency-grid,
    .regular-cleaning-why-grid,
    .regular-cleaning-areas-inner {
        grid-template-columns: 1fr;
    }

    .regular-cleaning-hero-visual {
        min-height: 450px;
    }

    .regular-cleaning-hero-image {
        min-height: 420px;
    }

    .regular-cleaning-included-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .regular-cleaning-pricing-grid {
        grid-template-columns: 1fr;
        max-width: 550px;
        margin-left: auto;
        margin-right: auto;
    }

    .regular-cleaning-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .regular-cleaning-hero h1 {
        font-size: 42px;
        letter-spacing: -1.5px;
    }

    .regular-cleaning-hero-content > p {
        font-size: 15px;
    }

    .regular-cleaning-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .regular-cleaning-trust {
        flex-direction: column;
        gap: 9px;
    }

    .regular-cleaning-hero-visual {
        min-height: 390px;
    }

    .regular-cleaning-hero-image {
        min-height: 360px;
        inset: 0 0 20px 15px;
    }

    .regular-cleaning-hero-badge {
        width: 220px;
        padding: 20px;
    }

    .regular-cleaning-hero-badge strong {
        font-size: 20px;
    }

    .regular-cleaning-included,
    .regular-cleaning-frequency,
    .regular-cleaning-pricing,
    .regular-cleaning-why,
    .regular-cleaning-before {
        padding: 75px 0;
    }

    .regular-cleaning-included-grid {
        grid-template-columns: 1fr;
    }

    .regular-cleaning-frequency-options {
        grid-template-columns: 1fr;
    }

    .regular-cleaning-why-list {
        grid-template-columns: 1fr;
    }

    .regular-cleaning-before-grid {
        grid-template-columns: 1fr;
    }

    .regular-cleaning-area-tags {
        gap: 8px;
    }

    .regular-cleaning-area-tags span {
        padding: 10px 14px;
        font-size: 12px;
    }

    .regular-cleaning-cta {
        padding: 65px 0;
    }

}


/* =========================================================
   SPRING & DEEP CLEANING PAGE
========================================================= */

.deep-cleaning-hero,
.deep-cleaning-overview,
.deep-cleaning-included,
.deep-cleaning-detail,
.deep-cleaning-when,
.deep-cleaning-pricing,
.deep-cleaning-why,
.deep-cleaning-areas,
.deep-cleaning-cta {
    position: relative;
}


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

.deep-cleaning-kicker {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: #2563eb;
}

.deep-cleaning-hero h1,
.deep-cleaning-overview h2,
.deep-cleaning-section-heading h2,
.deep-cleaning-detail h2,
.deep-cleaning-pricing h2,
.deep-cleaning-why h2,
.deep-cleaning-areas h2,
.deep-cleaning-cta h2 {
    margin: 0;
    color: #0f172a;
    line-height: 1.15;
}

.deep-cleaning-hero h1 span,
.deep-cleaning-overview h2 span,
.deep-cleaning-section-heading h2 span,
.deep-cleaning-detail h2 span,
.deep-cleaning-pricing h2 span,
.deep-cleaning-why h2 span,
.deep-cleaning-areas h2 span,
.deep-cleaning-cta h2 span {
    color: #2563eb;
}


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

.deep-cleaning-hero {
    padding: 110px 0 100px;
    background: #f8fafc;
    overflow: hidden;
}

.deep-cleaning-hero-inner {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 80px;
    align-items: center;
}

.deep-cleaning-hero-content h1 {
    max-width: 700px;
    font-size: clamp(42px, 5vw, 68px);
}

.deep-cleaning-hero-content > p {
    max-width: 650px;
    margin: 25px 0 32px;
    font-size: 18px;
    line-height: 1.8;
    color: #64748b;
}

.deep-cleaning-hero-actions {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}

.deep-cleaning-call {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #0f172a;
    text-decoration: none;
}

.deep-cleaning-call-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #2563eb;
    font-size: 20px;
}

.deep-cleaning-call small,
.deep-cleaning-call strong {
    display: block;
}

.deep-cleaning-call small {
    margin-bottom: 3px;
    color: #64748b;
}

.deep-cleaning-call strong {
    font-size: 16px;
}

.deep-cleaning-hero-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 25px;
    margin-top: 40px;
}

.deep-cleaning-hero-benefits div {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
}

.deep-cleaning-hero-benefits span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2563eb;
    color: #ffffff;
    font-size: 12px;
}


/* HERO PRICE CARD */

.deep-cleaning-price-card {
    padding: 45px;
    border-radius: 24px;
    background: #0f172a;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18);
}

.deep-cleaning-price-label {
    display: inline-block;
    margin-bottom: 30px;
    color: #93c5fd;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.deep-cleaning-price-card small {
    display: block;
    color: #cbd5e1;
    font-size: 14px;
}

.deep-cleaning-price-card strong {
    display: block;
    margin: 5px 0 10px;
    color: #ffffff;
    font-size: 58px;
    line-height: 1;
}

.deep-cleaning-price-card p {
    margin: 0 0 30px;
    color: #cbd5e1;
    line-height: 1.7;
}

.deep-cleaning-price-card .btn {
    width: 100%;
    text-align: center;
}


/* =========================================================
   OVERVIEW
========================================================= */

.deep-cleaning-overview {
    padding: 110px 0;
    background: #ffffff;
}

.deep-cleaning-overview-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 90px;
    align-items: center;
}

.deep-cleaning-overview-content h2 {
    font-size: clamp(34px, 4vw, 52px);
}

.deep-cleaning-overview-content > p {
    margin: 22px 0;
    color: #64748b;
    line-height: 1.8;
}

.deep-cleaning-overview-content .btn {
    margin-top: 15px;
}


/* OVERVIEW CARDS */

.deep-cleaning-overview-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.deep-cleaning-overview-card {
    padding: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    transition: 0.3s ease;
}

.deep-cleaning-overview-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.deep-cleaning-overview-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 22px;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 20px;
    font-weight: 700;
}

.deep-cleaning-overview-card h3 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 19px;
}

.deep-cleaning-overview-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
    font-size: 14px;
}


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

.deep-cleaning-section-heading {
    max-width: 700px;
    margin-bottom: 55px;
}

.deep-cleaning-section-heading h2 {
    font-size: clamp(34px, 4vw, 52px);
}

.deep-cleaning-section-heading p {
    margin: 20px 0 0;
    color: #64748b;
    line-height: 1.8;
}

.deep-cleaning-center {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}


/* =========================================================
   WHAT'S INCLUDED
========================================================= */

.deep-cleaning-included {
    padding: 110px 0;
    background: #f8fafc;
}

.deep-cleaning-included-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.deep-cleaning-included-card {
    padding: 38px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.deep-cleaning-included-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 25px;
    border-radius: 14px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 22px;
    font-weight: 700;
}

.deep-cleaning-included-card h3 {
    margin: 0 0 22px;
    color: #0f172a;
    font-size: 23px;
}

.deep-cleaning-included-card ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.deep-cleaning-included-card li {
    margin-bottom: 14px;
    color: #64748b;
    font-size: 15px;
}

.deep-cleaning-included-card li:last-child {
    margin-bottom: 0;
}

.deep-cleaning-extra-note {
    max-width: 850px;
    margin: 50px auto 0;
    padding: 25px 30px;
    border-left: 4px solid #2563eb;
    border-radius: 0 12px 12px 0;
    background: #eff6ff;
}

.deep-cleaning-extra-note strong {
    color: #0f172a;
}

.deep-cleaning-extra-note p {
    margin: 7px 0 0;
    color: #64748b;
    line-height: 1.7;
}


/* =========================================================
   EXTRA ATTENTION
========================================================= */

.deep-cleaning-detail {
    padding: 110px 0;
    background: #ffffff;
}

.deep-cleaning-detail-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 100px;
    align-items: start;
}

.deep-cleaning-detail-content {
    position: sticky;
    top: 100px;
}

.deep-cleaning-detail-content h2 {
    font-size: clamp(34px, 4vw, 52px);
}

.deep-cleaning-detail-content p {
    margin: 20px 0 0;
    color: #64748b;
    line-height: 1.8;
}

.deep-cleaning-detail-list {
    display: grid;
    gap: 0;
}

.deep-cleaning-detail-item {
    display: flex;
    gap: 25px;
    padding: 28px 0;
    border-bottom: 1px solid #e2e8f0;
}

.deep-cleaning-detail-item:first-child {
    padding-top: 0;
}

.deep-cleaning-detail-item > span {
    color: #2563eb;
    font-size: 14px;
    font-weight: 700;
}

.deep-cleaning-detail-item h3 {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 20px;
}

.deep-cleaning-detail-item p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}


/* =========================================================
   WHEN YOU NEED A DEEP CLEAN
========================================================= */

.deep-cleaning-when {
    padding: 110px 0;
    background: #f8fafc;
}

.deep-cleaning-when-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.deep-cleaning-when-card {
    padding: 32px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
}

.deep-cleaning-when-card > span {
    display: block;
    margin-bottom: 35px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
}

.deep-cleaning-when-card h3 {
    margin: 0 0 12px;
    color: #0f172a;
    font-size: 19px;
}

.deep-cleaning-when-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   PRICING
========================================================= */

.deep-cleaning-pricing {
    padding: 100px 0;
    background: #ffffff;
}

.deep-cleaning-pricing-box {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 70px;
    align-items: center;
    padding: 60px;
    border-radius: 25px;
    background: #0f172a;
}

.deep-cleaning-pricing-box .deep-cleaning-kicker {
    color: #93c5fd;
}

.deep-cleaning-pricing-box h2 {
    max-width: 650px;
    color: #ffffff;
    font-size: clamp(32px, 4vw, 50px);
}

.deep-cleaning-pricing-box h2 span {
    color: #60a5fa;
}

.deep-cleaning-pricing-box p {
    max-width: 650px;
    margin: 20px 0 0;
    color: #cbd5e1;
    line-height: 1.8;
}

.deep-cleaning-pricing-action {
    min-width: 250px;
    text-align: center;
}

.deep-cleaning-pricing-action strong {
    display: block;
    margin-bottom: 8px;
    color: #ffffff;
    font-size: 42px;
}

.deep-cleaning-pricing-action span {
    display: block;
    margin-bottom: 25px;
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.5;
}

.deep-cleaning-pricing-action .btn {
    width: 100%;
}


/* =========================================================
   WHY CHOOSE US
========================================================= */

.deep-cleaning-why {
    padding: 110px 0;
    background: #f8fafc;
}

.deep-cleaning-why-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 100px;
}

.deep-cleaning-why-heading h2 {
    font-size: clamp(34px, 4vw, 52px);
}

.deep-cleaning-why-heading > p {
    margin: 22px 0 0;
    color: #64748b;
    line-height: 1.8;
}

.deep-cleaning-why-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px 30px;
}

.deep-cleaning-why-list > div {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.deep-cleaning-why-list > div > span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #2563eb;
    color: #ffffff;
    font-size: 13px;
}

.deep-cleaning-why-list p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
    font-size: 14px;
}

.deep-cleaning-why-list strong {
    display: block;
    margin-bottom: 4px;
    color: #0f172a;
    font-size: 16px;
}


/* =========================================================
   SERVICE AREAS
========================================================= */

.deep-cleaning-areas {
    padding: 80px 0;
    background: #ffffff;
}

.deep-cleaning-areas-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 50px 60px;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
}

.deep-cleaning-areas h2 {
    font-size: clamp(30px, 3vw, 42px);
}

.deep-cleaning-areas p {
    max-width: 650px;
    margin: 15px 0 0;
    color: #64748b;
    line-height: 1.8;
}


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

.deep-cleaning-cta {
    padding: 100px 0;
    background: #2563eb;
}

.deep-cleaning-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.deep-cleaning-cta .deep-cleaning-kicker {
    color: #bfdbfe;
}

.deep-cleaning-cta h2 {
    max-width: 750px;
    color: #ffffff;
    font-size: clamp(34px, 4vw, 54px);
}

.deep-cleaning-cta h2 span {
    color: #dbeafe;
}

.deep-cleaning-cta p {
    max-width: 650px;
    margin: 18px 0 0;
    color: #dbeafe;
    line-height: 1.8;
}

.deep-cleaning-cta .btn {
    flex-shrink: 0;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .deep-cleaning-hero-inner,
    .deep-cleaning-overview-grid,
    .deep-cleaning-detail-grid,
    .deep-cleaning-why-grid {
        gap: 60px;
    }

    .deep-cleaning-when-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 900px) {

    .deep-cleaning-hero {
        padding: 80px 0;
    }

    .deep-cleaning-hero-inner,
    .deep-cleaning-overview-grid,
    .deep-cleaning-detail-grid,
    .deep-cleaning-why-grid,
    .deep-cleaning-pricing-box {
        grid-template-columns: 1fr;
    }

    .deep-cleaning-detail-content {
        position: static;
    }

    .deep-cleaning-included-grid {
        grid-template-columns: 1fr;
    }

    .deep-cleaning-pricing-action {
        text-align: left;
    }

    .deep-cleaning-pricing-action .btn {
        width: auto;
    }

    .deep-cleaning-cta-inner,
    .deep-cleaning-areas-inner {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 650px) {

    .deep-cleaning-hero,
    .deep-cleaning-overview,
    .deep-cleaning-included,
    .deep-cleaning-detail,
    .deep-cleaning-when,
    .deep-cleaning-why {
        padding: 70px 0;
    }

    .deep-cleaning-price-card,
    .deep-cleaning-pricing-box,
    .deep-cleaning-areas-inner {
        padding: 30px;
    }

    .deep-cleaning-hero-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .deep-cleaning-hero-benefits {
        flex-direction: column;
        align-items: flex-start;
    }

    .deep-cleaning-overview-cards,
    .deep-cleaning-why-list,
    .deep-cleaning-when-grid {
        grid-template-columns: 1fr;
    }

    .deep-cleaning-included-card {
        padding: 30px;
    }

    .deep-cleaning-pricing-action .btn {
        width: 100%;
    }

    .deep-cleaning-cta {
        padding: 75px 0;
    }

}



/* =========================================================
   END OF LEASE CLEANING PAGE
========================================================= */

/* HERO */
.eol-hero {
    padding: 120px 0 90px;
    background: #f8fafc;
    overflow: hidden;
}

.eol-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}

.eol-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #2563eb;
    margin-bottom: 18px;
}

.eol-hero h1,
.eol-intro h2,
.eol-section-heading h2,
.eol-pricing h2,
.eol-faq-heading h2,
.eol-cta h2 {
    color: #0f172a;
    line-height: 1.15;
    margin: 0 0 22px;
}

.eol-hero h1 {
    font-size: clamp(40px, 5vw, 68px);
}

.eol-hero h1 span,
.eol-intro h2 span,
.eol-section-heading h2 span,
.eol-pricing h2 span,
.eol-faq-heading h2 span,
.eol-cta h2 span {
    color: #2563eb;
}

.eol-hero-content > p {
    max-width: 620px;
    font-size: 17px;
    line-height: 1.8;
    color: #64748b;
}

.eol-hero-actions {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 32px;
}

.eol-call-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #0f172a;
    text-decoration: none;
}

.eol-call-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dbeafe;
    color: #2563eb;
    font-size: 18px;
}

.eol-call-link small,
.eol-call-link strong {
    display: block;
}

.eol-call-link small {
    color: #64748b;
    margin-bottom: 3px;
}

.eol-call-link strong {
    font-size: 15px;
}

.eol-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 25px;
    margin-top: 35px;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
}

.eol-hero-points div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.eol-hero-points span {
    color: #2563eb;
    font-weight: 800;
}


/* HERO IMAGE */

.eol-hero-visual {
    position: relative;
    min-height: 520px;
}

.eol-hero-image {
    width: 100%;
    height: 100%;
    min-height: 520px;
    border-radius: 28px;
    background-image:
        linear-gradient(
            rgba(15, 23, 42, 0.08),
            rgba(15, 23, 42, 0.08)
        ),
        url('https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=1200&q=85');
    background-size: cover;
    background-position: center;
}

.eol-price-card {
    position: absolute;
    left: -30px;
    bottom: 35px;
    max-width: 280px;
    padding: 25px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
}

.eol-price-card small,
.eol-price-card span {
    display: block;
    color: #64748b;
}

.eol-price-card small {
    font-size: 13px;
    margin-bottom: 8px;
}

.eol-price-card strong {
    display: block;
    font-size: 36px;
    color: #0f172a;
    margin-bottom: 7px;
}

.eol-price-card span {
    font-size: 12px;
    line-height: 1.5;
}


/* INTRO */

.eol-intro {
    padding: 100px 0;
}

.eol-intro-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: center;
}

.eol-intro-content h2,
.eol-section-heading h2,
.eol-pricing h2,
.eol-faq-heading h2 {
    font-size: clamp(32px, 4vw, 52px);
}

.eol-intro-content p {
    color: #64748b;
    line-height: 1.8;
    margin-bottom: 18px;
}

.eol-intro-content .btn {
    margin-top: 15px;
}

.eol-intro-checks {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.eol-check-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
}

.eol-check-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 800;
}

.eol-check-card h3 {
    margin: 0 0 6px;
    color: #0f172a;
}

.eol-check-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}


/* SECTION HEADING */

.eol-section-heading {
    max-width: 720px;
    margin-bottom: 55px;
}

.eol-section-heading p {
    color: #64748b;
    line-height: 1.8;
}

.eol-center-heading {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


/* WHAT WE CLEAN */

.eol-cleaning-section {
    padding: 100px 0;
    background: #f8fafc;
}

.eol-cleaning-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.eol-clean-card {
    padding: 32px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    transition: 0.3s ease;
}

.eol-clean-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);
}

.eol-clean-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 14px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 22px;
    font-weight: 700;
}

.eol-clean-card h3 {
    color: #0f172a;
    margin: 0 0 20px;
    font-size: 21px;
}

.eol-clean-card ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.eol-clean-card li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

.eol-clean-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #2563eb;
    font-weight: 700;
}


/* PROCESS */

.eol-process {
    padding: 100px 0;
}

.eol-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.eol-process-card {
    position: relative;
    padding: 32px 26px;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

.eol-process-card > span {
    display: block;
    margin-bottom: 40px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 800;
}

.eol-process-card h3 {
    margin: 0 0 14px;
    color: #0f172a;
    font-size: 19px;
}

.eol-process-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}


/* PRICING */

.eol-pricing {
    padding: 100px 0;
    background: #f8fafc;
}

.eol-pricing-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 80px;
}

.eol-pricing-content p {
    color: #64748b;
    line-height: 1.8;
}

.eol-pricing-content .btn {
    margin-top: 15px;
}

.eol-pricing-card {
    padding: 50px;
    border-radius: 24px;
    background: #0f172a;
    color: #ffffff;
}

.eol-pricing-label {
    display: inline-block;
    padding: 8px 13px;
    margin-bottom: 25px;
    border-radius: 50px;
    background: rgba(255,255,255,0.1);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.eol-price small {
    display: block;
    margin-bottom: 5px;
    color: #cbd5e1;
}

.eol-price strong {
    display: block;
    margin-bottom: 20px;
    font-size: clamp(52px, 7vw, 80px);
    line-height: 1;
}

.eol-pricing-card > p {
    color: #cbd5e1;
    line-height: 1.8;
}

.eol-price-note {
    margin-top: 28px;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,0.12);
    font-size: 14px;
    color: #ffffff;
}


/* WHY */

.eol-why {
    padding: 100px 0;
}

.eol-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.eol-why-card {
    padding: 30px;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

.eol-why-card > div {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 800;
}

.eol-why-card h3 {
    margin: 0 0 12px;
    color: #0f172a;
    font-size: 19px;
}

.eol-why-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}


/* FAQ */

.eol-faq {
    padding: 100px 0;
    background: #f8fafc;
}

.eol-faq-wrap {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 80px;
    align-items: start;
}

.eol-faq-heading {
    position: sticky;
    top: 100px;
}

.eol-faq-heading p {
    color: #64748b;
    line-height: 1.8;
}

.eol-faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.eol-faq-item {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
}

.eol-faq-question {
    width: 100%;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 0;
    background: transparent;
    color: #0f172a;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.eol-faq-question span {
    color: #2563eb;
    font-size: 24px;
    transition: 0.3s ease;
}

.eol-faq-answer {
    display: none;
    padding: 0 24px 24px;
    color: #64748b;
    line-height: 1.8;
    font-size: 15px;
}

.eol-faq-item.active .eol-faq-answer {
    display: block;
}

.eol-faq-item.active .eol-faq-question span {
    transform: rotate(45deg);
}


/* CTA */

.eol-cta {
    padding: 80px 0;
}

.eol-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 60px;
    border-radius: 28px;
    background: #2563eb;
}

.eol-cta .eol-kicker {
    color: #bfdbfe;
}

.eol-cta h2 {
    max-width: 650px;
    margin-bottom: 15px;
    color: #ffffff;
    font-size: clamp(34px, 4vw, 55px);
}

.eol-cta h2 span {
    color: #dbeafe;
}

.eol-cta p {
    max-width: 620px;
    margin: 0;
    color: #dbeafe;
    line-height: 1.8;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .eol-cleaning-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .eol-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .eol-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .eol-faq-wrap {
        gap: 50px;
    }

}


@media (max-width: 900px) {

    .eol-hero {
        padding: 90px 0 70px;
    }

    .eol-hero-grid,
    .eol-intro-grid,
    .eol-pricing-grid,
    .eol-faq-wrap {
        grid-template-columns: 1fr;
    }

    .eol-hero-grid,
    .eol-intro-grid,
    .eol-pricing-grid {
        gap: 50px;
    }

    .eol-hero-visual {
        min-height: 450px;
    }

    .eol-hero-image {
        min-height: 450px;
    }

    .eol-price-card {
        left: 20px;
        bottom: 20px;
    }

    .eol-faq-heading {
        position: static;
    }

}


@media (max-width: 650px) {

    .eol-hero,
    .eol-intro,
    .eol-cleaning-section,
    .eol-process,
    .eol-pricing,
    .eol-why,
    .eol-faq {
        padding: 70px 0;
    }

    .eol-hero h1 {
        font-size: 42px;
    }

    .eol-hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .eol-hero-visual,
    .eol-hero-image {
        min-height: 380px;
    }

    .eol-cleaning-grid,
    .eol-process-grid,
    .eol-why-grid {
        grid-template-columns: 1fr;
    }

    .eol-check-card {
        align-items: flex-start;
    }

    .eol-pricing-card {
        padding: 35px 25px;
    }

    .eol-cta-inner {
        padding: 40px 25px;
        flex-direction: column;
        align-items: flex-start;
    }

    .eol-price-card {
        right: 15px;
        left: 15px;
        max-width: none;
    }

}


/* =========================================================
   MOVE-IN CLEANING PAGE
========================================================= */

.movein-hero,
.movein-intro,
.movein-included,
.movein-benefits,
.movein-process,
.movein-options,
.movein-faq,
.movein-cta {
    position: relative;
}

.movein-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    color: #2563eb;
}

.movein-kicker::before {
    content: "";
    width: 28px;
    height: 2px;
    background: #2563eb;
}

.movein-hero h1,
.movein-intro h2,
.movein-section-heading h2,
.movein-benefits h2,
.movein-options h2,
.movein-cta h2 {
    margin: 0;
    color: #0f172a;
    line-height: 1.12;
}

.movein-hero h1 span,
.movein-intro h2 span,
.movein-section-heading h2 span,
.movein-benefits h2 span,
.movein-options h2 span,
.movein-cta h2 span {
    color: #2563eb;
}


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

.movein-hero {
    padding: 115px 0 90px;
    background: #f8fafc;
    overflow: hidden;
}

.movein-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}

.movein-hero-content {
    max-width: 650px;
}

.movein-hero h1 {
    font-size: clamp(42px, 5vw, 68px);
    letter-spacing: -2px;
    margin-bottom: 24px;
}

.movein-hero-content > p {
    max-width: 590px;
    font-size: 17px;
    line-height: 1.8;
    color: #64748b;
    margin-bottom: 32px;
}

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

.movein-call-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #0f172a;
    text-decoration: none;
}

.movein-call-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    font-size: 20px;
}

.movein-call-btn small,
.movein-call-btn strong {
    display: block;
}

.movein-call-btn small {
    color: #64748b;
    margin-bottom: 3px;
}

.movein-call-btn strong {
    font-size: 15px;
}

.movein-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 35px;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
}

.movein-hero-points span {
    color: #475569;
}

.movein-hero-points span::first-letter {
    color: #2563eb;
}

.movein-hero-visual {
    position: relative;
    min-height: 550px;
}

.movein-hero-image {
    width: 100%;
    height: 550px;
    border-radius: 24px;
    background:
        linear-gradient(
            rgba(15, 23, 42, 0.08),
            rgba(15, 23, 42, 0.08)
        ),
        url("https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=1200&q=85")
        center/cover no-repeat;
}

.movein-floating-card {
    position: absolute;
    left: -35px;
    bottom: 35px;
    width: 280px;
    padding: 28px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14);
}

.movein-floating-card span {
    display: block;
    margin-bottom: 10px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.movein-floating-card strong {
    display: block;
    font-size: 23px;
    line-height: 1.35;
    color: #0f172a;
}

.movein-floating-card em {
    color: #2563eb;
    font-style: normal;
}


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

.movein-intro {
    padding: 110px 0;
    background: #fff;
}

.movein-intro-grid {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 100px;
    align-items: center;
}

.movein-intro-content {
    max-width: 650px;
}

.movein-intro h2 {
    font-size: clamp(34px, 4vw, 52px);
    margin-bottom: 24px;
}

.movein-intro-content > p {
    color: #64748b;
    line-height: 1.8;
    margin-bottom: 18px;
}

.movein-intro-content .btn {
    margin-top: 18px;
}

.movein-intro-checks {
    display: grid;
    gap: 18px;
}

.movein-check-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 24px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
}

.movein-check-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #dbeafe;
    color: #2563eb;
    font-weight: 800;
}

.movein-check-card h3 {
    margin: 0 0 7px;
    color: #0f172a;
    font-size: 18px;
}

.movein-check-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
    font-size: 14px;
}


/* =========================================================
   INCLUDED
========================================================= */

.movein-included {
    padding: 110px 0;
    background: #f8fafc;
}

.movein-section-heading {
    max-width: 700px;
    margin-bottom: 55px;
}

.movein-section-heading h2 {
    font-size: clamp(34px, 4vw, 52px);
    margin-bottom: 18px;
}

.movein-section-heading > p {
    color: #64748b;
    line-height: 1.8;
    font-size: 16px;
}

.movein-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.movein-center .movein-kicker::before {
    display: none;
}

.movein-included-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.movein-included-card {
    padding: 32px 27px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    transition: 0.3s ease;
}

.movein-included-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
}

.movein-service-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 25px;
    border-radius: 12px;
    background: #dbeafe;
    color: #2563eb;
    font-size: 21px;
    font-weight: 700;
}

.movein-included-card h3 {
    margin: 0 0 20px;
    color: #0f172a;
    font-size: 19px;
}

.movein-included-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.movein-included-card li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 11px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
}

.movein-included-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #2563eb;
    font-weight: 800;
}


/* =========================================================
   BENEFITS
========================================================= */

.movein-benefits {
    padding: 110px 0;
    background: #fff;
}

.movein-benefits-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: 100px;
}

.movein-benefits-content {
    max-width: 680px;
}

.movein-benefits h2 {
    font-size: clamp(34px, 4vw, 52px);
    margin-bottom: 24px;
}

.movein-benefits-content > p {
    color: #64748b;
    line-height: 1.8;
    margin-bottom: 16px;
}

.movein-benefit-list {
    display: grid;
    gap: 16px;
    margin-top: 35px;
}

.movein-benefit-list > div {
    display: flex;
    align-items: center;
    gap: 18px;
}

.movein-benefit-list span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 800;
}

.movein-benefit-list p {
    margin: 0;
    color: #475569;
    line-height: 1.6;
}

.movein-benefits-card {
    padding: 55px 45px;
    background: #0f172a;
    border-radius: 24px;
    color: #fff;
}

.movein-benefits-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    font-size: 25px;
}

.movein-benefits-card > span {
    display: block;
    margin-bottom: 16px;
    color: #93c5fd;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.movein-benefits-card h3 {
    margin: 0 0 22px;
    font-size: clamp(35px, 4vw, 52px);
    line-height: 1.05;
}

.movein-benefits-card p {
    margin: 0;
    color: #cbd5e1;
    line-height: 1.8;
}


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

.movein-process {
    padding: 110px 0;
    background: #f8fafc;
}

.movein-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.movein-process-card {
    position: relative;
    padding: 32px 28px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
}

.movein-process-card strong {
    display: block;
    margin-bottom: 40px;
    color: #2563eb;
    font-size: 15px;
    letter-spacing: 1px;
}

.movein-process-card h3 {
    margin: 0 0 12px;
    color: #0f172a;
    font-size: 19px;
}

.movein-process-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
    font-size: 14px;
}


/* =========================================================
   OPTIONS
========================================================= */

.movein-options {
    padding: 90px 0;
    background: #fff;
}

.movein-options-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    padding: 65px;
    border-radius: 25px;
    background: #eff6ff;
}

.movein-options h2 {
    font-size: clamp(34px, 4vw, 48px);
    margin-bottom: 18px;
}

.movein-options p {
    color: #64748b;
    line-height: 1.8;
}

.movein-options-list {
    display: grid;
    align-content: center;
    gap: 15px;
}

.movein-options-list > div {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    background: #fff;
    border-radius: 10px;
}

.movein-options-list span {
    color: #2563eb;
    font-weight: 800;
}

.movein-options-list p {
    margin: 0;
    color: #334155;
    font-weight: 600;
}


/* =========================================================
   FAQ
========================================================= */

.movein-faq {
    padding: 110px 0;
    background: #f8fafc;
}

.movein-faq-list {
    max-width: 900px;
}

.movein-faq-item {
    padding: 28px 0;
    border-bottom: 1px solid #e2e8f0;
}

.movein-faq-item:first-child {
    border-top: 1px solid #e2e8f0;
}

.movein-faq-item h3 {
    margin: 0 0 12px;
    color: #0f172a;
    font-size: 19px;
}

.movein-faq-item p {
    max-width: 760px;
    margin: 0;
    color: #64748b;
    line-height: 1.8;
}


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

.movein-cta {
    padding: 90px 0;
    background: #2563eb;
}

.movein-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.movein-cta .movein-kicker {
    color: #bfdbfe;
}

.movein-cta .movein-kicker::before {
    background: #bfdbfe;
}

.movein-cta h2 {
    max-width: 650px;
    color: #fff;
    font-size: clamp(35px, 4vw, 52px);
    margin-bottom: 18px;
}

.movein-cta h2 span {
    color: #dbeafe;
}

.movein-cta p {
    max-width: 620px;
    margin: 0;
    color: #dbeafe;
    line-height: 1.8;
}

.movein-cta .btn-white {
    flex: 0 0 auto;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .movein-included-grid,
    .movein-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .movein-hero-grid,
    .movein-intro-grid,
    .movein-benefits-grid {
        gap: 60px;
    }

}


@media (max-width: 850px) {

    .movein-hero {
        padding: 85px 0 70px;
    }

    .movein-hero-grid,
    .movein-intro-grid,
    .movein-benefits-grid,
    .movein-options-inner {
        grid-template-columns: 1fr;
    }

    .movein-hero-visual {
        min-height: auto;
    }

    .movein-hero-image {
        height: 460px;
    }

    .movein-floating-card {
        left: 20px;
        bottom: 20px;
    }

    .movein-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 600px) {

    .movein-hero,
    .movein-intro,
    .movein-included,
    .movein-benefits,
    .movein-process,
    .movein-faq {
        padding: 75px 0;
    }

    .movein-options,
    .movein-cta {
        padding: 65px 0;
    }

    .movein-hero h1 {
        letter-spacing: -1.5px;
    }

    .movein-hero-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .movein-hero-image {
        height: 390px;
    }

    .movein-floating-card {
        width: calc(100% - 40px);
        padding: 22px;
    }

    .movein-included-grid,
    .movein-process-grid {
        grid-template-columns: 1fr;
    }

    .movein-options-inner {
        gap: 40px;
        padding: 35px 25px;
    }

    .movein-benefits-card {
        padding: 42px 30px;
    }

    .movein-check-card {
        padding: 20px;
    }

    .movein-section-heading {
        margin-bottom: 40px;
    }

}

/* =========================================================
   MOVE-IN PRICE
========================================================= */

.movein-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 5px 0 22px;
}

.movein-price span {
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
}

.movein-price strong {
    color: #2563eb;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -1.5px;
}

.movein-price small {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
}




/* =========================================================
   AIRBNB & SHORT STAY CLEANING
========================================================= */

.airbnb-hero,
.airbnb-intro,
.airbnb-included,
.airbnb-features,
.airbnb-options,
.airbnb-pricing,
.airbnb-process,
.airbnb-who,
.airbnb-faq,
.airbnb-cta {
    position: relative;
}

.airbnb-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.airbnb-kicker::before {
    content: "";
    width: 28px;
    height: 2px;
    background: #2563eb;
}

.airbnb-hero h1,
.airbnb-intro h2,
.airbnb-section-heading h2,
.airbnb-features h2,
.airbnb-options h2,
.airbnb-who h2,
.airbnb-cta h2 {
    margin: 0;
    color: #0f172a;
    line-height: 1.12;
}

.airbnb-hero h1 span,
.airbnb-intro h2 span,
.airbnb-section-heading h2 span,
.airbnb-features h2 span,
.airbnb-options h2 span,
.airbnb-who h2 span,
.airbnb-cta h2 span {
    color: #2563eb;
}


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

.airbnb-hero {
    padding: 115px 0 90px;
    background: #f8fafc;
    overflow: hidden;
}

.airbnb-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}

.airbnb-hero-content {
    max-width: 650px;
}

.airbnb-hero h1 {
    font-size: clamp(42px, 5vw, 68px);
    letter-spacing: -2px;
    margin-bottom: 20px;
}

.airbnb-price {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 5px 0 22px;
}

.airbnb-price span {
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
}

.airbnb-price strong {
    color: #2563eb;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -1.5px;
}

.airbnb-price small {
    color: #64748b;
    font-size: 13px;
}

.airbnb-hero-content > p {
    max-width: 590px;
    margin-bottom: 32px;
    color: #64748b;
    font-size: 17px;
    line-height: 1.8;
}

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

.airbnb-call-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #0f172a;
    text-decoration: none;
}

.airbnb-call-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    background: #fff;
    font-size: 20px;
}

.airbnb-call-btn small,
.airbnb-call-btn strong {
    display: block;
}

.airbnb-call-btn small {
    margin-bottom: 3px;
    color: #64748b;
}

.airbnb-call-btn strong {
    font-size: 15px;
}

.airbnb-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 35px;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
}

.airbnb-hero-visual {
    position: relative;
    min-height: 550px;
}

.airbnb-hero-image {
    width: 100%;
    height: 550px;
    border-radius: 24px;
    background:
        linear-gradient(
            rgba(15, 23, 42, 0.08),
            rgba(15, 23, 42, 0.08)
        ),
        url("https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1200&q=85")
        center/cover no-repeat;
}

.airbnb-floating-card {
    position: absolute;
    left: -35px;
    bottom: 35px;
    width: 285px;
    padding: 28px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14);
}

.airbnb-floating-card span {
    display: block;
    margin-bottom: 10px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.airbnb-floating-card strong {
    display: block;
    color: #0f172a;
    font-size: 23px;
    line-height: 1.35;
}

.airbnb-floating-card em {
    color: #2563eb;
    font-style: normal;
}


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

.airbnb-intro {
    padding: 110px 0;
    background: #fff;
}

.airbnb-intro-grid {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    align-items: center;
    gap: 100px;
}

.airbnb-intro-content {
    max-width: 650px;
}

.airbnb-intro h2 {
    margin-bottom: 24px;
    font-size: clamp(34px, 4vw, 52px);
}

.airbnb-intro-content > p {
    margin-bottom: 18px;
    color: #64748b;
    line-height: 1.8;
}

.airbnb-intro-content .btn {
    margin-top: 18px;
}

.airbnb-intro-checks {
    display: grid;
    gap: 18px;
}

.airbnb-check-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 24px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
}

.airbnb-check-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #dbeafe;
    color: #2563eb;
    font-weight: 800;
}

.airbnb-check-card h3 {
    margin: 0 0 7px;
    color: #0f172a;
    font-size: 18px;
}

.airbnb-check-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   INCLUDED
========================================================= */

.airbnb-included {
    padding: 110px 0;
    background: #f8fafc;
}

.airbnb-section-heading {
    max-width: 720px;
    margin-bottom: 55px;
}

.airbnb-section-heading h2 {
    margin-bottom: 18px;
    font-size: clamp(34px, 4vw, 52px);
}

.airbnb-section-heading > p {
    color: #64748b;
    font-size: 16px;
    line-height: 1.8;
}

.airbnb-center {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.airbnb-center .airbnb-kicker::before {
    display: none;
}

.airbnb-included-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.airbnb-included-card {
    padding: 32px 27px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #fff;
    transition: .3s ease;
}

.airbnb-included-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(15, 23, 42, .08);
}

.airbnb-service-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 25px;
    border-radius: 12px;
    background: #dbeafe;
    color: #2563eb;
    font-size: 21px;
    font-weight: 700;
}

.airbnb-included-card h3 {
    margin: 0 0 20px;
    color: #0f172a;
    font-size: 19px;
}

.airbnb-included-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.airbnb-included-card li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 11px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
}

.airbnb-included-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #2563eb;
    font-weight: 800;
}


/* =========================================================
   FEATURES
========================================================= */

.airbnb-features {
    padding: 110px 0;
    background: #fff;
}

.airbnb-features-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    align-items: center;
    gap: 100px;
}

.airbnb-features-content {
    max-width: 680px;
}

.airbnb-features h2 {
    margin-bottom: 24px;
    font-size: clamp(34px, 4vw, 52px);
}

.airbnb-features-content > p {
    margin-bottom: 16px;
    color: #64748b;
    line-height: 1.8;
}

.airbnb-feature-list {
    display: grid;
    gap: 16px;
    margin-top: 35px;
}

.airbnb-feature-list > div {
    display: flex;
    align-items: center;
    gap: 18px;
}

.airbnb-feature-list span {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 800;
}

.airbnb-feature-list p {
    margin: 0;
    color: #475569;
    line-height: 1.6;
}

.airbnb-features-card {
    padding: 55px 45px;
    border-radius: 24px;
    background: #0f172a;
    color: #fff;
}

.airbnb-features-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    font-size: 24px;
}

.airbnb-features-card > span {
    display: block;
    margin-bottom: 16px;
    color: #93c5fd;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.airbnb-features-card h3 {
    margin: 0 0 22px;
    font-size: clamp(35px,4vw,52px);
    line-height: 1.05;
}

.airbnb-features-card p {
    margin: 0;
    color: #cbd5e1;
    line-height: 1.8;
}


/* =========================================================
   OPTIONAL OPTIONS
========================================================= */

.airbnb-options {
    padding: 110px 0;
    background: #f8fafc;
}

.airbnb-options-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
}

.airbnb-option-card {
    padding: 30px 25px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
}

.airbnb-option-card > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 10px;
    background: #dbeafe;
    color: #2563eb;
    font-weight: 800;
}

.airbnb-option-card h3 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 18px;
}

.airbnb-option-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   PRICING
========================================================= */

.airbnb-pricing {
    padding: 110px 0;
    background: #fff;
}

.airbnb-pricing-card {
    display: grid;
    grid-template-columns: 1.1fr .7fr 1.2fr .8fr;
    align-items: center;
    gap: 35px;
    padding: 42px;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #f8fafc;
}

.airbnb-pricing-label {
    display: inline-block;
    margin-bottom: 12px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.airbnb-pricing-main h3 {
    margin: 0 0 12px;
    color: #0f172a;
    font-size: 28px;
}

.airbnb-pricing-main p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}

.airbnb-price-large {
    padding: 0 25px;
    text-align: center;
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
}

.airbnb-price-large span,
.airbnb-price-large small {
    display: block;
    color: #64748b;
}

.airbnb-price-large span {
    font-size: 13px;
}

.airbnb-price-large strong {
    display: block;
    color: #2563eb;
    font-size: 48px;
    line-height: 1;
    letter-spacing: -2px;
}

.airbnb-price-large small {
    margin-top: 7px;
    font-size: 12px;
}

.airbnb-pricing-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px 20px;
}

.airbnb-pricing-features div {
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
}

.airbnb-pricing-features span {
    margin-right: 5px;
    color: #2563eb;
    font-weight: 800;
}

.airbnb-pricing-action {
    text-align: center;
}

.airbnb-pricing-action .btn {
    white-space: nowrap;
}

.airbnb-pricing-action small {
    display: block;
    margin-top: 12px;
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.5;
}

.airbnb-pricing-note {
    max-width: 850px;
    margin: 22px auto 0;
    padding: 18px 22px;
    border-radius: 10px;
    background: #eff6ff;
    color: #475569;
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
}

.airbnb-pricing-note strong {
    color: #0f172a;
}


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

.airbnb-process {
    padding: 110px 0;
    background: #f8fafc;
}

.airbnb-process-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 22px;
}

.airbnb-process-card {
    padding: 32px 28px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #fff;
}

.airbnb-process-card strong {
    display: block;
    margin-bottom: 40px;
    color: #2563eb;
    font-size: 15px;
    letter-spacing: 1px;
}

.airbnb-process-card h3 {
    margin: 0 0 12px;
    color: #0f172a;
    font-size: 19px;
}

.airbnb-process-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   WHO WE HELP
========================================================= */

.airbnb-who {
    padding: 90px 0;
    background: #fff;
}

.airbnb-who-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
    padding: 65px;
    border-radius: 25px;
    background: #eff6ff;
}

.airbnb-who h2 {
    margin-bottom: 18px;
    font-size: clamp(34px,4vw,48px);
}

.airbnb-who p {
    margin: 0;
    color: #64748b;
    line-height: 1.8;
}

.airbnb-who-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.airbnb-who-list div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px;
    border-radius: 10px;
    background: #fff;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
}

.airbnb-who-list span {
    color: #2563eb;
    font-weight: 800;
}


/* =========================================================
   FAQ
========================================================= */

.airbnb-faq {
    padding: 110px 0;
    background: #f8fafc;
}

.airbnb-faq-list {
    max-width: 900px;
}

.airbnb-faq-item {
    padding: 28px 0;
    border-bottom: 1px solid #e2e8f0;
}

.airbnb-faq-item:first-child {
    border-top: 1px solid #e2e8f0;
}

.airbnb-faq-item h3 {
    margin: 0 0 12px;
    color: #0f172a;
    font-size: 19px;
}

.airbnb-faq-item p {
    max-width: 780px;
    margin: 0;
    color: #64748b;
    line-height: 1.8;
}


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

.airbnb-cta {
    padding: 90px 0;
    background: #2563eb;
}

.airbnb-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.airbnb-cta .airbnb-kicker {
    color: #bfdbfe;
}

.airbnb-cta .airbnb-kicker::before {
    background: #bfdbfe;
}

.airbnb-cta h2 {
    max-width: 650px;
    margin-bottom: 18px;
    color: #fff;
    font-size: clamp(35px,4vw,52px);
}

.airbnb-cta h2 span {
    color: #dbeafe;
}

.airbnb-cta p {
    max-width: 620px;
    margin: 0;
    color: #dbeafe;
    line-height: 1.8;
}

.airbnb-cta .btn-white {
    flex: 0 0 auto;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .airbnb-included-grid,
    .airbnb-options-grid,
    .airbnb-process-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .airbnb-hero-grid,
    .airbnb-intro-grid,
    .airbnb-features-grid {
        gap: 60px;
    }

    .airbnb-pricing-card {
        grid-template-columns: 1fr .7fr;
    }

    .airbnb-pricing-features {
        grid-column: 1 / 2;
    }

    .airbnb-pricing-action {
        grid-column: 2 / 3;
    }

}


@media (max-width: 850px) {

    .airbnb-hero {
        padding: 85px 0 70px;
    }

    .airbnb-hero-grid,
    .airbnb-intro-grid,
    .airbnb-features-grid,
    .airbnb-who-inner {
        grid-template-columns: 1fr;
    }

    .airbnb-hero-visual {
        min-height: auto;
    }

    .airbnb-hero-image {
        height: 460px;
    }

    .airbnb-floating-card {
        left: 20px;
        bottom: 20px;
    }

    .airbnb-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .airbnb-hero,
    .airbnb-intro,
    .airbnb-included,
    .airbnb-features,
    .airbnb-options,
    .airbnb-pricing,
    .airbnb-process,
    .airbnb-faq {
        padding: 75px 0;
    }

    .airbnb-who {
        padding: 60px 0;
    }

    .airbnb-cta {
        padding: 65px 0;
    }

    .airbnb-hero h1 {
        letter-spacing: -1.5px;
    }

    .airbnb-hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .airbnb-hero-image {
        height: 390px;
    }

    .airbnb-floating-card {
        width: calc(100% - 40px);
        padding: 22px;
    }

    .airbnb-included-grid,
    .airbnb-options-grid,
    .airbnb-process-grid {
        grid-template-columns: 1fr;
    }

    .airbnb-pricing-card {
        grid-template-columns: 1fr;
        padding: 30px 24px;
        gap: 28px;
    }

    .airbnb-price-large {
        padding: 25px 0;
        border-top: 1px solid #e2e8f0;
        border-bottom: 1px solid #e2e8f0;
        border-left: 0;
        border-right: 0;
        text-align: left;
    }

    .airbnb-pricing-features {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .airbnb-pricing-action {
        grid-column: auto;
        text-align: left;
    }

    .airbnb-who-inner {
        gap: 40px;
        padding: 35px 25px;
    }

    .airbnb-who-list {
        grid-template-columns: 1fr;
    }

    .airbnb-features-card {
        padding: 42px 30px;
    }

    .airbnb-price strong {
        font-size: 36px;
    }

}



/* =========================================================
   CARPET STEAM CLEANING PAGE
========================================================= */

.csc-hero,
.csc-intro,
.csc-services,
.csc-process,
.csc-why,
.csc-pricing,
.csc-faq,
.csc-cta {
    width: 100%;
    overflow: hidden;
}


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

.csc-kicker {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #2563eb;
}

.csc-hero h1,
.csc-intro h2,
.csc-section-heading h2,
.csc-why h2,
.csc-pricing h2,
.csc-cta h2 {
    margin: 0;
    color: #0f172a;
    line-height: 1.08;
    letter-spacing: -1.5px;
}

.csc-hero h1 span,
.csc-intro h2 span,
.csc-section-heading h2 span,
.csc-why h2 span,
.csc-pricing h2 span,
.csc-cta h2 span {
    color: #2563eb;
}

.csc-section-heading {
    max-width: 760px;
    margin-bottom: 55px;
}

.csc-section-heading.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.csc-section-heading p {
    max-width: 650px;
    margin: 20px auto 0;
    color: #64748b;
    line-height: 1.8;
}


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

.csc-hero {
    padding: 95px 0 90px;
    background: #f8fafc;
}

.csc-hero-inner {
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    gap: 70px;
    align-items: center;
}

.csc-hero-content h1 {
    max-width: 720px;
    font-size: clamp(44px, 5vw, 72px);
}

.csc-hero-content > p {
    max-width: 650px;
    margin: 25px 0 0;
    font-size: 18px;
    line-height: 1.8;
    color: #64748b;
}

.csc-hero-price {
    display: inline-flex;
    flex-direction: column;
    margin-top: 28px;
    padding: 15px 20px;
    border-left: 3px solid #2563eb;
    background: #ffffff;
}

.csc-hero-price small {
    margin-bottom: 3px;
    color: #64748b;
    font-size: 12px;
}

.csc-hero-price strong {
    color: #0f172a;
    font-size: 20px;
}

.csc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.csc-trust-points {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 25px;
    margin-top: 28px;
}

.csc-trust-points span {
    font-size: 13px;
    color: #475569;
}

.csc-trust-points b {
    color: #2563eb;
    margin-right: 5px;
}


/* Hero Image */

.csc-hero-visual {
    position: relative;
    min-height: 560px;
}

.csc-hero-image {
    width: 100%;
    height: 560px;
    border-radius: 24px;
    background:
        linear-gradient(
            rgba(15, 23, 42, 0.08),
            rgba(15, 23, 42, 0.08)
        ),
        url("https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=1200&q=85")
        center / cover no-repeat;
}

.csc-floating-card {
    position: absolute;
    left: -30px;
    bottom: 35px;
    min-width: 220px;
    padding: 22px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16);
}

.csc-floating-card span {
    display: block;
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #2563eb;
}

.csc-floating-card strong {
    display: block;
    margin-bottom: 5px;
    color: #0f172a;
    font-size: 20px;
}

.csc-floating-card small {
    color: #64748b;
}


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

.csc-intro {
    padding: 110px 0;
    background: #ffffff;
}

.csc-intro-grid {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 90px;
    align-items: center;
}

.csc-intro-content h2 {
    max-width: 600px;
    font-size: clamp(38px, 4vw, 58px);
}

.csc-intro-content p {
    max-width: 650px;
    margin: 20px 0 0;
    color: #64748b;
    line-height: 1.8;
}

.csc-intro-content .btn {
    margin-top: 28px;
}

.csc-intro-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.csc-stat-card {
    display: flex;
    gap: 18px;
    padding: 25px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
    transition: .25s ease;
}

.csc-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
}

.csc-stat-icon {
    display: flex;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 800;
}

.csc-stat-card strong {
    display: block;
    margin-bottom: 6px;
    color: #0f172a;
}

.csc-stat-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}


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

.csc-services {
    padding: 110px 0;
    background: #f8fafc;
}

.csc-section-heading h2 {
    font-size: clamp(38px, 4vw, 58px);
}

.csc-service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.csc-service-card {
    position: relative;
    min-height: 290px;
    padding: 32px 28px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    transition: .3s ease;
}

.csc-service-card:hover {
    transform: translateY(-6px);
    border-color: #bfdbfe;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
}

.csc-service-number {
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 12px;
    font-weight: 800;
    color: #cbd5e1;
}

.csc-service-icon {
    display: flex;
    width: 48px;
    height: 48px;
    margin-bottom: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 800;
}

.csc-service-card h3 {
    margin: 0 0 12px;
    color: #0f172a;
    font-size: 21px;
}

.csc-service-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.75;
}


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

.csc-process {
    padding: 110px 0;
    background: #ffffff;
}

.csc-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.csc-process-card {
    padding: 30px;
    border-top: 3px solid #2563eb;
    background: #f8fafc;
}

.csc-process-number {
    margin-bottom: 30px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
}

.csc-process-card h3 {
    margin: 0 0 12px;
    color: #0f172a;
    font-size: 20px;
}

.csc-process-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.75;
}


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

.csc-why {
    padding: 110px 0;
    background: #f8fafc;
}

.csc-why-grid {
    display: grid;
    grid-template-columns: .9fr 1fr;
    gap: 90px;
    align-items: center;
}

.csc-why-visual {
    position: relative;
}

.csc-why-image {
    height: 570px;
    border-radius: 22px;
    background:
        linear-gradient(
            rgba(15, 23, 42, 0.08),
            rgba(15, 23, 42, 0.08)
        ),
        url("https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=1100&q=85")
        center / cover no-repeat;
}

.csc-why-badge {
    position: absolute;
    right: -25px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    padding: 22px 25px;
    border-radius: 15px;
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 15px 35px rgba(37, 99, 235, .25);
}

.csc-why-badge strong {
    font-size: 24px;
}

.csc-why-badge span {
    font-size: 13px;
}

.csc-why-content h2 {
    font-size: clamp(38px, 4vw, 58px);
}

.csc-why-content > p {
    margin: 25px 0;
    color: #64748b;
    line-height: 1.8;
}

.csc-check-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.csc-check-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #334155;
    font-size: 14px;
    line-height: 1.5;
}

.csc-check-list li span {
    color: #2563eb;
    font-weight: 800;
}


/* =========================================================
   PRICING
========================================================= */

.csc-pricing {
    padding: 110px 0 80px;
    background: #ffffff;
}

.csc-pricing-box {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 70px;
    align-items: center;
    padding: 55px;
    border-radius: 24px;
    background: #f8fafc;
}

.csc-pricing-content h2 {
    font-size: clamp(38px, 4vw, 56px);
}

.csc-pricing-content p {
    max-width: 650px;
    margin: 20px 0 0;
    color: #64748b;
    line-height: 1.8;
}

.csc-price-card {
    padding: 35px 30px;
    text-align: center;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);
}

.csc-price-card small {
    display: block;
    color: #64748b;
}

.csc-price-card strong {
    display: block;
    margin: 5px 0;
    color: #0f172a;
    font-size: 44px;
}

.csc-price-card > span {
    display: block;
    margin-bottom: 22px;
    color: #64748b;
}

.csc-pricing-note {
    margin-top: 25px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.7;
}

.csc-pricing-note strong {
    color: #0f172a;
}


/* =========================================================
   FAQ
========================================================= */

.csc-faq {
    padding: 110px 0;
    background: #f8fafc;
}

.csc-faq-list {
    max-width: 850px;
    margin: 0 auto;
    border-top: 1px solid #e2e8f0;
}

.csc-faq-item {
    border-bottom: 1px solid #e2e8f0;
}

.csc-faq-question {
    display: flex;
    width: 100%;
    padding: 23px 5px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 0;
    background: transparent;
    color: #0f172a;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.csc-faq-question span {
    display: flex;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    color: #2563eb;
    font-size: 20px;
    transition: .25s ease;
}

.csc-faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: .3s ease;
}

.csc-faq-answer p {
    overflow: hidden;
    margin: 0;
    color: #64748b;
    line-height: 1.8;
}

.csc-faq-item.active .csc-faq-answer {
    grid-template-rows: 1fr;
}

.csc-faq-item.active .csc-faq-question span {
    transform: rotate(45deg);
}


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

.csc-cta {
    padding: 80px 0;
    background: #0f172a;
}

.csc-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.csc-cta .csc-kicker {
    color: #93c5fd;
}

.csc-cta h2 {
    max-width: 700px;
    color: #ffffff;
    font-size: clamp(38px, 4vw, 58px);
}

.csc-cta h2 span {
    color: #60a5fa;
}

.csc-cta p {
    max-width: 600px;
    margin: 20px 0 0;
    color: #cbd5e1;
    line-height: 1.7;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .csc-hero-inner,
    .csc-intro-grid,
    .csc-why-grid {
        gap: 50px;
    }

    .csc-service-grid,
    .csc-process-grid {
        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 900px) {

    .csc-hero-inner,
    .csc-intro-grid,
    .csc-why-grid,
    .csc-pricing-box {
        grid-template-columns: 1fr;
    }

    .csc-hero-content {
        order: 1;
    }

    .csc-hero-visual {
        order: 2;
    }

    .csc-hero-image {
        height: 480px;
    }

    .csc-floating-card {
        left: 20px;
    }

    .csc-why-image {
        height: 480px;
    }

    .csc-price-card {
        max-width: 380px;
    }

    .csc-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width: 650px) {

    .csc-hero,
    .csc-intro,
    .csc-services,
    .csc-process,
    .csc-why,
    .csc-pricing,
    .csc-faq {
        padding: 75px 0;
    }

    .csc-hero-content h1 {
        font-size: 43px;
    }

    .csc-hero-content > p {
        font-size: 16px;
    }

    .csc-hero-visual {
        min-height: 400px;
    }

    .csc-hero-image {
        height: 400px;
        border-radius: 16px;
    }

    .csc-floating-card {
        left: 15px;
        bottom: 20px;
    }

    .csc-service-grid,
    .csc-process-grid,
    .csc-check-list {
        grid-template-columns: 1fr;
    }

    .csc-section-heading {
        margin-bottom: 35px;
    }

    .csc-pricing-box {
        padding: 30px 22px;
    }

    .csc-why-image {
        height: 400px;
    }

    .csc-why-badge {
        right: 15px;
        bottom: 20px;
    }

    .csc-cta {
        padding: 65px 0;
    }

    .csc-cta-inner {
        gap: 30px;
    }

    .csc-trust-points {
        flex-direction: column;
        gap: 10px;
    }

}