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

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            font-family: 'Sora', sans-serif;
            background: #f4f4f1;
            color: #111;
        }

        img {
            max-width: 100%;
        }


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

        .hero-shell {
            background: #ffffff;
            padding: 48px;
        }

        .hero-card {
            position: relative;
            overflow: hidden;
            border-radius: 24px;
            height: calc(100vh - 96px);
            min-height: 600px;
            background: #090909;
        }


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

        .hero-card>header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;

            z-index: 20;

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

            padding: 25px 35px;

            background: transparent;
        }

        .logo {
            display: flex;
            align-items: center;

            text-decoration: none;

            flex-shrink: 0;
        }

        .logo-img {
            width: 130px;
            height: auto;
            display: block;
        }

        .hero-card nav {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        .hero-card nav ul {
            display: flex;
            align-items: center;

            gap: 34px;

            margin: 0;
            padding: 0;

            list-style: none;
        }

        .hero-card nav ul li {
            margin: 0;
            padding: 0;
        }

        .hero-card nav ul li a {
            position: relative;

            display: block;

            padding: 8px 0;

            color: #b8b8b8;

            text-decoration: none;

            font-size: 14px;
            font-weight: 600;

            white-space: nowrap;

            transition: color .3s ease;
        }

        .hero-card nav ul li a:hover {
            color: #fff;
        }

        .hero-card nav ul li.active a {
            color: #f7941d;
        }

        .hero-card nav ul li.active a::after {
            content: "";

            position: absolute;

            left: 50%;
            bottom: -5px;

            width: 18px;
            height: 2px;

            background: #f7941d;

            transform: translateX(-50%);
        }

        .btn-book {
            margin-left: auto;

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

            min-width: 182px;
            height: 42px;

            padding: 0 22px;

            border: 1px solid #f7941d;
            border-radius: 4px;

            background: transparent;
            color: #fff;

            text-decoration: none;

            font-size: 13px;
            font-weight: 600;

            white-space: nowrap;

            transition:
                background .3s ease,
                color .3s ease,
                transform .3s ease;
        }

        .btn-book:hover {
            background: #f7941d;
            color: #050505;
            transform: translateY(-2px);
        }


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

        .services-hero {
            position: relative;
            min-height: 760px;
            height: 100%;
            display: flex;
            align-items: center;
            overflow: hidden;

            /* 4 SIDE RADIUS */
            border-radius: 24px;

            background: #090909;
            color: #fff;
        }

        .services-hero-image {
            position: absolute;
            inset: 0 0 0 42%;
        }

        .services-hero-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .services-hero-image::after {
            content: "";
            position: absolute;
            inset: 0;

            background:
                linear-gradient(90deg,
                    #090909 0%,
                    rgba(9, 9, 9, .92) 18%,
                    rgba(9, 9, 9, .42) 55%,
                    rgba(9, 9, 9, .12) 100%);
        }

        .services-hero-content {
            position: relative;
            z-index: 2;
            width: 55%;
            padding-left: 8%;
            padding-top: 60px;
        }

        .services-eyebrow {
            display: block;
            margin-bottom: 24px;

            font-size: 10px;
            font-weight: 600;
            letter-spacing: 5px;

            color: #8d8d8d;
        }

        .services-hero h1 {
            max-width: 750px;
            margin: 0 0 32px;

            font-size: clamp(58px, 7vw, 105px);
            line-height: .9;
            font-weight: 400;
            letter-spacing: -5px;
        }

        .services-hero h1 strong {
            font-weight: 700;
        }

        .services-hero-text {
            max-width: 500px;
            margin: 0 0 40px;

            color: #9b9b9b;
            font-size: 14px;
            line-height: 1.9;
        }

        .services-hero-btn {
            display: inline-flex;
            align-items: center;
            gap: 30px;

            padding: 16px 22px;

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

            color: #fff;
            text-decoration: none;

            font-size: 10px;
            letter-spacing: 1.5px;

            transition: .35s ease;
        }

        .services-hero-btn span {
            font-size: 17px;
        }

        .services-hero-btn:hover {
            background: #fff;
            color: #111;
            border-color: #fff;
        }


        /* =========================================================
           SCROLL INDICATOR
        ========================================================= */

        .scroll-cue {
            position: absolute;

            left: 50%;
            bottom: 34px;

            transform: translateX(-50%);

            z-index: 10;

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

            gap: 10px;
        }

        .scroll-cue .dot-line {
            width: 1px;
            height: 46px;

            position: relative;

            background:
                linear-gradient(180deg,
                    #F68B20 0%,
                    rgba(246, 139, 32, 0) 100%);
        }

        .scroll-cue .dot-line::after {
            content: "";

            position: absolute;

            bottom: 0;
            left: 50%;

            transform: translateX(-50%);

            width: 6px;
            height: 6px;

            border-radius: 50%;

            background: #F68B20;

            animation: dotPulse 1.8s ease-in-out infinite;
        }

        @keyframes dotPulse {

            0%,
            100% {
                transform: translate(-50%, 0);
                opacity: 1;
            }

            50% {
                transform: translate(-50%, 10px);
                opacity: .4;
            }
        }

        .scroll-cue span {
            font-size: 11px;
            letter-spacing: 3px;

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

            font-weight: 600;
        }


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

        .dluxe-services-page {
            margin: 0;
            background: #f4f4f1;
            color: #111;
        }

        .services-intro {
            max-width: 900px;

            margin: auto;

            padding: 150px 30px 110px;

            text-align: center;
        }

        .services-intro h2 {
            margin: 0 0 25px;

            font-size: clamp(44px, 5vw, 72px);
            line-height: .98;

            font-weight: 400;
            letter-spacing: -3px;
        }

        .services-intro h2 strong {
            font-weight: 700;
        }

        .services-intro p {
            max-width: 620px;

            margin: auto;

            color: #777;

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


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

        .services-wrapper {
            max-width: 1240px;

            margin: auto;

            padding: 0 30px 150px;
        }


        /* =========================================================
           FADE ANIMATION
        ========================================================= */

        .fade-up {
            opacity: 0;
            transform: translateY(28px);

            transition:
                opacity .7s cubic-bezier(.16, .84, .44, 1),
                transform .7s cubic-bezier(.16, .84, .44, 1);
        }

        .fade-up.visible {
            opacity: 1;
            transform: translateY(0);
        }


        /* =========================================================
           CATEGORY
        ========================================================= */

        .category-block {
            margin-bottom: 70px;
        }

        .category-header-card {
            position: relative;

            background: #0b0b0b;
            color: #fff;

            border-radius: 22px;

            padding: 50px 60px;

            margin-bottom: 28px;

            overflow: hidden;
        }

        .category-header-card::before {
            content: attr(data-num);

            position: absolute;

            top: -30px;
            right: 20px;

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

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

            pointer-events: none;
        }

        .category-header-inner {
            position: relative;
            z-index: 2;

            display: flex;

            align-items: flex-end;
            justify-content: space-between;

            gap: 40px;

            flex-wrap: wrap;
        }

        .category-header-label {
            display: block;

            margin-bottom: 16px;

            font-size: 9px;
            font-weight: 600;

            letter-spacing: 4px;

            color: #f7941d;
        }

        .category-header-title {
            font-size: clamp(30px, 3.4vw, 46px);

            font-weight: 400;

            letter-spacing: -1.5px;

            line-height: 1;

            margin: 0 0 14px;
        }

        .category-header-title strong {
            font-weight: 700;
        }

        .category-header-desc {
            max-width: 480px;

            color: #999;

            font-size: 13px;

            line-height: 1.8;

            margin: 0;
        }


        /* =========================================================
           SERVICE GRID
        ========================================================= */

        .sub-services-grid {
            display: grid;

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

            gap: 22px;
        }

        .sub-service-card {
            position: relative;

            background: #fff;

            border-radius: 18px;

            overflow: hidden;

            box-shadow:
                0 15px 40px -20px rgba(0, 0, 0, .18);

            transition:
                transform .5s cubic-bezier(.16, .84, .44, 1),
                box-shadow .5s ease;
        }

        .sub-service-card:hover {
            transform: translateY(-8px);

            box-shadow:
                0 30px 60px -20px rgba(0, 0, 0, .28);
        }

        .sub-service-image {
            position: relative;

            aspect-ratio: 4 / 3;

            overflow: hidden;
        }

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

            object-fit: cover;

            display: block;

            transition:
                transform .8s cubic-bezier(.16, .84, .44, 1);
        }

        .sub-service-card:hover .sub-service-image img {
            transform: scale(1.1);
        }

        .sub-service-image::after {
            content: "";

            position: absolute;

            inset: 0;

            background:
                linear-gradient(180deg,
                    transparent 50%,
                    rgba(0, 0, 0, .55) 100%);
        }

        .sub-service-number {
            position: absolute;

            top: 14px;
            left: 14px;

            z-index: 2;

            width: 30px;
            height: 30px;

            border-radius: 50%;

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

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

            font-size: 9px;
            font-weight: 700;

            letter-spacing: .5px;

            color: #111;
        }

        .sub-service-content {
            padding: 22px 22px 24px;
        }

        .sub-service-title {
            font-size: 15px;

            font-weight: 700;

            color: #111;

            margin: 0 0 8px;

            letter-spacing: -.1px;
        }

        .sub-service-desc {
            font-size: 12px;

            line-height: 1.65;

            color: #777;

            margin: 0 0 16px;
        }

        .sub-service-link {
            display: inline-flex;

            align-items: center;

            gap: 8px;

            font-size: 10px;

            font-weight: 600;

            letter-spacing: .5px;

            color: #111;

            text-decoration: none;

            text-transform: uppercase;
        }

        .sub-service-link span {
            font-size: 14px;

            transition: transform .3s ease;
        }

        .sub-service-card:hover .sub-service-link {
            color: #f7941d;
        }

        .sub-service-card:hover .sub-service-link span {
            transform: translateX(4px);
        }


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

        .services-cta {
            position: relative;

            padding: 170px 30px;

            background: #050505;

            color: #fff;

            text-align: center;

            overflow: hidden;
        }

        .services-cta-glow {
            position: absolute;

            top: 50%;
            left: 50%;

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

            width: 900px;
            height: 900px;

            background:
                radial-gradient(circle,
                    rgba(247, 148, 29, .16) 0%,
                    rgba(247, 148, 29, .04) 45%,
                    transparent 70%);

            pointer-events: none;
        }

        .services-cta-content {
            position: relative;
            z-index: 2;
        }

        .services-cta-logo {
            height: 42px;
            width: auto;

            margin: 0 auto 36px;

            display: block;

            opacity: .95;
        }

        .services-cta-eyebrow {
            display: block;

            margin-bottom: 22px;

            font-size: 10px;
            font-weight: 600;

            letter-spacing: 5px;

            color: #f7941d;
        }

        .services-cta h2 {
            margin: 0 0 25px;

            font-size: clamp(45px, 6vw, 82px);

            line-height: .95;

            font-weight: 400;

            letter-spacing: -4px;
        }

        .services-cta h2 .accent {
            color: #f7941d;
            font-weight: 700;
        }

        .services-cta p {
            max-width: 520px;

            margin: 0 auto 40px;

            color: #999;

            font-size: 14px;

            line-height: 1.8;
        }

        .services-cta-button {
            display: inline-flex;

            align-items: center;

            gap: 22px;

            padding: 18px 34px;

            border-radius: 50px;

            background:
                linear-gradient(135deg,
                    #f7941d 0%,
                    #e07800 100%);

            color: #0a0a0a;

            text-decoration: none;

            font-size: 11px;

            font-weight: 700;

            letter-spacing: 1.5px;

            text-transform: uppercase;

            box-shadow:
                0 15px 40px -12px rgba(247, 148, 29, .5);

            transition:
                transform .35s cubic-bezier(.16, .84, .44, 1),
                box-shadow .35s ease;
        }

        .services-cta-button span {
            font-size: 17px;

            transition: transform .35s ease;
        }

        .services-cta-button:hover {
            transform: translateY(-5px);

            box-shadow:
                0 25px 55px -12px rgba(247, 148, 29, .65);
        }

        .services-cta-button:hover span {
            transform: translate(4px, -4px);
        }