@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

    /* ==========================================================================
   0. Global Resets & Design System Variable Manifest
   ========================================================================== */
    :root {
        /* Fonts */
        --font-primary: "Urbanist", sans-serif;

        /* Theme Colors */
        --color-primary: #BE2031;
        --color-secondary: #071846;

        /* Grayscale Base */
        --color-white: #ffffff;
        --color-black: #000000;

        /* Standardized opacity colors */
        --color-white-95: rgba(255, 255, 255, 0.95);
        --color-white-92: rgba(255, 255, 255, 0.92);
        --color-white-90: rgba(255, 255, 255, 0.9);
        --color-white-85: rgba(255, 255, 255, 0.85);
        --color-white-75: rgba(255, 255, 255, 0.75);
        --color-white-70: rgba(255, 255, 255, 0.7);
        --color-white-65: rgba(255, 255, 255, 0.65);
        --color-white-60: rgba(255, 255, 255, 0.6);
        --color-white-55: rgba(255, 255, 255, 0.55);
        --color-white-50: rgba(255, 255, 255, 0.5);
        --color-white-40: rgba(255, 255, 255, 0.4);
        --color-white-35: rgba(255, 255, 255, 0.35);
        --color-white-28: rgba(255, 255, 255, 0.28);
        --color-white-25: rgba(255, 255, 255, 0.25);
        --color-white-24: var(--color-white-24);
        --color-white-20: rgba(255, 255, 255, 0.2);
        --color-white-18: rgba(255, 255, 255, 0.18);
        --color-white-15: rgba(255, 255, 255, 0.15);
        --color-white-10: var(--color-white-10);
        --color-white-08: rgba(255, 255, 255, 0.08);
        --color-white-06: var(--color-white-06);
        --color-white-05: rgba(255, 255, 255, 0.05);
        --color-white-04: rgba(255, 255, 255, 0.04);
        --color-white-03: rgba(255, 255, 255, 0.03);
        --color-white-02: rgba(255, 255, 255, 0.02);
        --color-white-01: rgba(255, 255, 255, 0.01);
        --color-white-00: rgba(255, 255, 255, 0);

        --color-black-85: rgba(0, 0, 0, 0.85);
        --color-black-70: rgba(0, 0, 0, 0.7);
        --color-black-68: rgba(0, 0, 0, 0.68);
        --color-black-60: rgba(0, 0, 0, 0.6);
        --color-black-56: rgba(0, 0, 0, 0.56);
        --color-black-55: rgba(0, 0, 0, 0.55);
        --color-black-45: rgba(0, 0, 0, 0.45);
        --color-black-44: rgba(0, 0, 0, 0.44);
        --color-black-40: rgba(0, 0, 0, 0.4);
        --color-black-38: var(--color-black-38);
        --color-black-35: rgba(0, 0, 0, 0.35);
        --color-black-25: rgba(0, 0, 0, 0.25);
        --color-black-20: rgba(0, 0, 0, 0.2);
        --color-black-18: rgba(0, 0, 0, 0.18);
        --color-black-15: rgba(0, 0, 0, 0.15);
        --color-black-12: rgba(0, 0, 0, 0.12);
        --color-black-08: rgba(0, 0, 0, 0.08);
        --color-black-05: rgba(0, 0, 0, 0.05);
        --color-black-03: rgba(0, 0, 0, 0.03);
        --color-black-02: rgba(0, 0, 0, 0.02);

        /* Primary opacity variants */
        --color-primary-30: rgba(190, 32, 49, 0.3);
        --color-primary-15: rgba(190, 32, 49, 0.15);
        --color-primary-12: rgba(190, 32, 49, 0.12);

        /* Secondary opacity variants */
        --color-secondary-85: var(--color-secondary-85);
        --color-secondary-68: rgba(7, 24, 70, 0.68);
        --color-secondary-60: rgba(7, 24, 70, 0.6);
        --color-secondary-45: var(--color-secondary-45);
        --color-secondary-44: rgba(7, 24, 70, 0.44);
        --color-secondary-15: rgba(7, 24, 70, 0.15);
        --color-secondary-08: rgba(7, 24, 70, 0.08);
        --color-secondary-00: rgba(7, 24, 70, 0);

        /* Animation and Grid settings */
        --cols: 6;
        --exit-dur: 1.1s;
        --step-delay: 0.09s;
        --ease-smooth: cubic-bezier(0.76, 0, 0.24, 1);
    }

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

    html,
    body {
        width: 100%;
        /* overflow-x: hidden; */
        background: var(--color-white);
        font-family: var(--font-primary);
    }

    /* ==========================================================================
   1. Staircase Preloader Styles
   ========================================================================== */
    .loader {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: flex;
    }

    .loader.done {
        pointer-events: none;
    }

    .loader__col {
        position: relative;
        flex: 1 1 0;
        height: 100%;
        background-image: url("assets/loader.png");
        background-size: 100vw 100vh;
        background-repeat: no-repeat;
        transform: translateY(0);
        will-change: transform;
    }

    .loader.exit .loader__col {
        animation: stepUp var(--exit-dur) var(--ease-smooth) forwards;
        animation-delay: calc(var(--i) * var(--step-delay));
    }

    @keyframes stepUp {
        0% {
            transform: translateY(0);
        }

        100% {
            transform: translateY(-101%);
        }
    }

    .loader__ui {
        position: fixed;
        inset: 0;
        z-index: 101;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding: 4vh 4vw;
        color: var(--color-white);
        pointer-events: none;
        transition: opacity 0.5s ease, transform 0.6s var(--ease-smooth);
    }

    .loader__ui.hide {
        opacity: 0;
        transform: translateY(-30px);
    }

    .loader__label {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.35em;
        text-transform: uppercase;
        color: var(--color-white-70);
        align-self: flex-end;
    }

    .loader__count {
        font-family: "Urbanist", system-ui, sans-serif;
        font-size: 72px;
        font-weight: 300;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .loader__bar {
        position: fixed;
        left: 0;
        bottom: 0;
        height: 3px;
        width: 100%;
        transform-origin: left;
        transform: scaleX(0);
        background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
        z-index: 102;
        transition: opacity 0.4s ease;
    }

    /* ==========================================================================
   2. Hero Video Section Styles
   ========================================================================== */
    .hero-video {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .hero-video__bg {
        position: absolute;
        inset: 0;
        /* transform: scale(1.18); */
        transition: transform 1.8s var(--ease-smooth);
        will-change: transform;
    }

    .hero-video__bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, var(--color-black-35) 0%, var(--color-black-05) 40%, var(--color-black-45) 100%);
    }

    body.revealed .hero-video__bg {
        transform: scale(1);
    }

    /* Announcement Bar */
    .announce {
        position: relative;
        z-index: 5;
        background: var(--color-primary);
        color: var(--color-white);
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.01em;
        padding: 0.85em 3.5em;
        transform: translateY(-100%);
        transition: transform 0.9s var(--ease-smooth) 0.45s;
    }

    body.revealed .announce {
        transform: translateY(0);
    }

    .announce.closed {
        display: none;
    }

    .announce__close {
        position: absolute;
        right: 1.4em;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: var(--color-white);
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        opacity: 0.9;
    }

    .announce__close:hover {
        opacity: 1;
    }

    /* Header & Logo */
    .header {
        position: relative;
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2.4vh 3.8vw 0;
        color: var(--color-white);
        opacity: 0;
        transform: translateY(-18px);
        transition: opacity 0.9s ease 0.6s, transform 0.9s var(--ease-smooth) 0.6s;
    }

    body.revealed .header {
        opacity: 1;
        transform: translateY(0);
    }

    .logo {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        user-select: none;
    }

    .logo__mark {
        font-size: 72px;
        font-weight: 700;
        font-style: italic;
        letter-spacing: -0.06em;
        line-height: 1;
        position: relative;
        padding-right: 0.45rem;
        border-right: 3px solid var(--color-white);
    }

    .logo__mark i {
        font-style: italic;
        color: var(--color-primary);
        position: absolute;
        left: -0.12em;
        bottom: -0.18em;
        font-size: 14px;
    }

    .logo__text {
        line-height: 1.05;
    }

    .logo__name {
        font-size: 14px;
        font-weight: 700;
        font-style: italic;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .logo__tag {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: var(--color-white-85);
        margin-top: 0.25em;
    }

    /* Interactive Navigation Grid */
    .nav {
        position: relative;
        z-index: 4;
        display: flex;
        gap: 2.6vw;
        padding: 3.2vh 3.8vw 0;
    }

    .nav a {
        flex: 1 1 0;
        color: var(--color-white);
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
        padding-top: 1.4em;
        border-top: 1px solid var(--color-white-35);
        opacity: 0;
        transform: translateY(-14px);
        transition: opacity 0.8s ease calc(0.7s + var(--n) * 0.07s),
            transform 0.8s var(--ease-smooth) calc(0.7s + var(--n) * 0.07s),
            color 0.3s ease;
    }

    body.revealed .nav a {
        opacity: 1;
        transform: translateY(0);
    }

    .nav a:hover {
        color: var(--color-primary);
    }

    /* Hero Content & CTA Layout */
    .hero-video__main {
        position: relative;
        z-index: 3;
        flex: 1;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding: 0 3.8vw 7vh;
        color: var(--color-white);
    }

    .hero-video__copy {
        max-width: 62vw;
    }

    .line {
        overflow: hidden;
    }

    .line>span {
        display: block;
        transform: translateY(115%);
        transition: transform 1.1s var(--ease-smooth);
        will-change: transform;
    }

    body.revealed .line:nth-of-type(1)>span {
        transition-delay: 0.55s;
    }

    body.revealed .line:nth-of-type(2)>span {
        transition-delay: 0.66s;
    }

    body.revealed .line>span {
        transform: translateY(0);
    }

    .hero-video__copy h1 {
        font-size: 64px;
        font-weight: 500;
        letter-spacing: -0.015em;
        line-height: 1.12;
    }

    .hero-video__copy p {
        margin-top: 2.4vh;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.55;
        color: var(--color-white-92);
        max-width: 42rem;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.9s ease 0.85s, transform 0.9s var(--ease-smooth) 0.85s;
    }

    body.revealed .hero-video__copy p {
        opacity: 1;
        transform: translateY(0);
    }

    .hero-video .button-pair {
        margin-top: 10px;
        display: flex;
        align-items: stretch;
        gap: 0;
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.9s ease 1s, transform 0.9s var(--ease-smooth) 1s;
    }

    body.revealed .hero-video .button-pair {
        opacity: 1;
        transform: translateY(0);
    }

    /* Glass & Brand Buttons */
    .header__actions {
        display: flex;
        align-items: center;
        gap: 1.6rem;
    }

    .brochure {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        color: var(--color-white);
        text-decoration: none;
        font-size: 18px;
        font-weight: 400;
        padding-top: 24px;
    }

    .brochure svg {
        width: 1em;
        height: 1em;
    }

    .brochure:hover {
        text-decoration: underline;
        text-underline-offset: 4px;
    }


    /* ==========================================================================
       Global Unified Button Component Styling
       ========================================================================== */
    .button-pair {
        display: inline-flex;
        align-items: center;
        /* gap: 6px; */
        width: fit-content;
    }

    .button-glass {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: var(--color-white-15);
        backdrop-filter: blur(24px) saturate(120%);
        -webkit-backdrop-filter: blur(24px) saturate(120%);
        border: 1px solid var(--color-white-20);
        color: var(--color-white);
        padding: 0 32px;
        border-radius: 20px;
        font-family: var(--font-primary);
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        height: 56px;
        box-sizing: border-box;
        transition: background-color 0.3s ease, transform 0.2s ease;
        border: none;
        cursor: pointer;
    }

    .button-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: var(--color-primary);
        color: var(--color-white);
        padding: 0 32px;
        border-radius: 20px;
        font-family: var(--font-primary);
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        height: 56px;
        box-sizing: border-box;
        transition: background-color 0.3s ease, transform 0.2s ease;
        border: none;
        cursor: pointer;
    }

    .button-primary:hover {
        background-color: var(--color-secondary);
    }

    .button-glass-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: var(--color-white-15);
        backdrop-filter: blur(24px) saturate(120%);
        -webkit-backdrop-filter: blur(24px) saturate(120%);
        border: 1px solid var(--color-white-20);
        width: 56px;
        height: 56px;
        border-radius: 20px;
        cursor: pointer;
        transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
        text-decoration: none;
        box-sizing: border-box;
    }

    .button-glass-arrow img {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }

    .button-glass-arrow:hover {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }

    /* Light background contrast adaptations */
    .recommend-section .button-glass-arrow,
    .deals-section .button-glass-arrow,
    .contact-section .button-glass-arrow,
    .privacy-page .button-glass-arrow,
    .hero-form__cta .button-glass-arrow {
        background-color: var(--color-black-12);
        border-color: var(--color-black-12);
    }

    .recommend-section .button-glass-arrow img,
    .deals-section .button-glass-arrow img,
    .contact-section .button-glass-arrow img,
    .privacy-page .button-glass-arrow img,
    .hero-form__cta .button-glass-arrow img {
        filter: invert(1);
    }

    .recommend-section .button-glass-arrow:hover img,
    .deals-section .button-glass-arrow:hover img,
    .contact-section .button-glass-arrow:hover img,
    .privacy-page .button-glass-arrow:hover img,
    .hero-form__cta .button-glass-arrow:hover img {
        filter: none;
    }

    .recommend-section .button-glass-arrow:hover,
    .deals-section .button-glass-arrow:hover,
    .contact-section .button-glass-arrow:hover,
    .privacy-page .button-glass-arrow:hover,
    .hero-form__cta .button-glass-arrow:hover {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }

    /* Dial Overlay Graphic */
    .dial {
        flex-shrink: 0;
        width: clamp(180px, 20vw, 380px);
        aspect-ratio: 1;
        border: 1px solid var(--color-white-90);
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-self: flex-end;
        margin-bottom: -2vh;
        opacity: 0;
        transform: scale(0.85);
        transition: opacity 1s ease 1.05s, transform 1.2s var(--ease-smooth) 1.05s;
    }

    body.revealed .dial {
        opacity: 1;
        transform: scale(1);
    }

    .dial__num {
        font-size: 80px;
        font-weight: 300;
        line-height: 1;
    }

    .dial__total {
        font-size: 18px;
        font-weight: 300;
        margin-top: 1.4em;
        color: var(--color-white-95);
    }

    /* ==========================================================================
   3. Why Choose Us (Vehicle Showcase) Styles
   ========================================================================== */
    .vehicle-bg {
        width: 100%;
        height: 100vh;
        background-image: url("assets/bg.png");
        background-position: center center;
        background-size: cover;
    }

    .vehicle-bg .container {
        width: 100%;
        height: 75%;
        background-image: url("assets/vehicle.png");
        background-position-x: 162%;
        background-position-y: 38%;
        background-size: 94%;
        background-repeat: no-repeat;
        animation: vehicleMoveIn 8s ease-in-out;
    }

    @keyframes vehicleMoveIn {
        0% {
            background-size: 0;
        }

        100% {
            background-size: 94%;
        }
    }

    @keyframes vehicleMoveBackwards {
        0% {
            background-size: 94%;
        }

        100% {
            background-size: 92%;
        }
    }

    /* ==========================================================================
   4. Global Reach (Rotating Globe) Styles
   ========================================================================== */
    .globe-bg {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        /* background-color: white; */
        background-image: url("assets/global-reach-bg2.png");
        background-position: center bottom;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .globe-bg .globe {
        width: 25%;
        height: 50%;
        border-radius: 50%;
        position: relative;
        box-shadow: inset -26.94px 19.24px 145.71px 24px var(--color-black-70);
        background-image: url("assets/globe.png");
        background-position-x: 0%;
        background-position-y: center;
        background-size: 600%;
        animation: globeSpin 10s linear infinite;
        z-index: 2;
        background-color: var(--color-white);
    }

    @keyframes globeSpin {
        0% {
            background-position-x: 0%;
        }

        100% {
            background-position: 66.6%;
        }
    }

    /* ==========================================================================
   5. Gallery Section Styles
   ========================================================================== */
    .gallery-container {
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        background-color: var(--color-white);
    }

    .page-background {
        /* position: absolute; */
        top: 0;
        left: 0;
        /* width: 100%; */
        /* height: 100%; */
        object-fit: cover;
        object-position: center center;
        z-index: 1;
        pointer-events: none;
    }

    .carousel-track {
        position: absolute;
        top: 65%;
        left: 0;
        transform: translateY(-50%);
        width: 100%;
        overflow: hidden;
        height: 400px;
        z-index: 2;
    }

    .carousel-slides {
        display: flex;
        width: max-content;
        animation: scroll-carousel 22s linear infinite;
    }

    .carousel-slide {
        width: 33.33vw;
        padding: 0 10px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }

    .carousel-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: 2px solid var(--color-white);
    }

    @keyframes scroll-carousel {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-133.32vw);
        }
    }

    /* ==========================================================================
   6. Brands Section Styles
   ========================================================================== */
    .brands-section {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        padding-top: 60px;
        background-color: var(--color-white);
    }

    .brands-header {
        padding: 0 40px;
        margin-bottom: 24px;
    }

    .header-tag {
        display: inline-flex;
        align-items: center;
        background-color: var(--color-white-95);
        padding: 10px 24px;
        border-radius: 12px 12px 0 0;
        font-weight: 600;
        font-size: 16px;
        color: var(--color-black);
        gap: 10px;
    }

    .tag-icon {
        display: inline-block;
        width: 12px;
        height: 12px;
        background-color: var(--color-primary);
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }

    .brands-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        border-top: 1px solid var(--color-white-90);
        /* border-bottom: 1px solid var(--color-white-90); */
        gap: 0;
        width: 100%;
    }

    .brand-card {
        position: relative;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--color-white);
        overflow: hidden;
        cursor: pointer;
        box-sizing: border-box;
    }

    .brand-card:not(:last-child) {
        border-right: 1px solid var(--color-white-90);
    }

    .brand-card::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0;
        background-color: var(--color-primary);
        transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        z-index: 1;
    }

    .brand-card:hover::before {
        height: 100%;
    }

    .brand-logo {
        position: relative;
        max-width: 50%;
        max-height: 45%;
        object-fit: contain;
        z-index: 2;
        transform: translateY(0) scale(1);
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .brand-card:hover .brand-logo {
        transform: translateY(-8px) scale(1.05);
    }

    .brands-footer-line {
        width: 100%;
        height: 12px;
        background-color: var(--color-primary);
    }

    /* ==========================================================================
   7. Media & Screen Adjustments
   ========================================================================== */
    @media (max-width: 1024px) {
        .brands-grid {
            grid-template-columns: repeat(3, 1fr);
        }

        .brand-card:nth-child(3) {
            border-right: none;
        }

        .brand-card {
            height: 200px;
            border-bottom: 1px solid var(--color-white-90);
        }

        .carousel-slide {
            width: 50vw;
        }

        @keyframes scroll-carousel {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-200vw);
            }
        }
    }

    @media (max-width: 900px) {
        .nav {
            flex-wrap: wrap;
            gap: 1rem 1.4rem;
        }

        .nav a {
            flex: 1 1 28%;
        }

        .hero-video__main {
            flex-direction: column;
            align-items: flex-start;
            gap: 4vh;
        }

        .hero-video__copy {
            max-width: 100%;
        }

        .dial {
            align-self: flex-end;
            margin-bottom: 0;
        }
    }

    @media (max-width: 640px) {
        .brands-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .brand-card:nth-child(even) {
            border-right: none;
        }

        .brand-card {
            height: 160px;
        }

        .carousel-slide {
            width: 100vw;
        }

        @keyframes scroll-carousel {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-400vw);
            }
        }
    }

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

        .hero-video__bg,
        .line>span,
        .loader__col,
        .announce,
        .header,
        .nav a,
        .hero-video__copy p,
        .hero-video .button-pair,
        .dial {
            transition: none;
            animation: none !important;
        }
    }

    /* ---------- FOOTER SECTION ---------- */
    .site-footer {
        position: relative;
        width: 100%;
        background-image: url("/assets/footer-bg.png");
        background-position: center bottom;
        background-size: cover;
        background-repeat: no-repeat;
        padding: 100px 8vw 40px;
        overflow: hidden;
        border-top: 1px solid var(--color-white-05);
    }

    /* --- Shipping Vessel Diagonal Animation --- */
    .footer-ship {
        position: absolute;
        top: 0;
        left: 0;
        /* width: clamp(280px, 35vw, 600px); */
        height: auto;
        pointer-events: none;
        z-index: 1;
        mix-blend-mode: lighten;
        transform: translate(-30%, -30%);
        opacity: 0;
        transition: transform 6s var(--ease-smooth) 0.3s, opacity 1.8s ease 0.2s;
    }

    /* Reveal state when section is active in viewport */
    .site-footer.active .footer-ship {
        transform: translate(0, 0);
        opacity: 1;
    }

    /* --- Footer Layout Grid --- */
    .footer__container {
        position: relative;
        z-index: 2;
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 80px;
    }

    /* --- CTA Cards --- */
    .footer__cta-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .cta-card {
        position: relative;
        /* border-radius: 18px; */
        border: 1px solid var(--color-white-15);
        /* background: linear-gradient(135deg, var(--color-secondary-45) 0%, var(--color-secondary-85) 100%); */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 35px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 280px;
        cursor: pointer;
        overflow: hidden;
        transition: border-color 0.4s ease, box-shadow 0.4s ease;
    }

    .cta-card::before {
        content: "";
        position: absolute;
        bottom: -50px;
        left: -50px;
        width: 250px;
        height: 250px;
        pointer-events: none;
        z-index: 1;
    }

    .cta-card:hover {
        background: var(--color-white-03);
        backdrop-filter: blur(20px);

    }

    .cta-card__title {
        font-size: 64px;
        font-weight: 300;
        color: var(--color-white);
        letter-spacing: -0.02em;
        line-height: 1.1;
        z-index: 2;
    }

    /* Card interactive button */
    .cta-card__btn {
        align-self: flex-end;
        width: 78px;
        height: 78px;
        border-radius: 20px;
        border: 1px solid var(--color-white-25);
        background: var(--color-white-05);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-white);
        transition: all 0.4s var(--ease-smooth);
        z-index: 2;
    }

    .cta-card__btn svg {
        width: 30px;
        height: 30px;
        transition: transform 0.4s var(--ease-smooth);
    }

    /* Hover states matching Reference Image 4 */
    .cta-card:hover .cta-card__btn {
        background: var(--color-primary);
        border-color: var(--color-primary);
    }

    /* --- Mid Navigation & Branding Bar --- */
    .footer__middle-bar {
        border-top: 1px solid var(--color-white-40);
        padding-top: 50px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 40px;
    }

    .footer__actions {
        display: flex;
        gap: 12px;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        font-weight: 600;
        padding: 14px 28px;
        border-radius: 12px;
        text-decoration: none;
        cursor: pointer;
        transition: background 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
    }

    .btn--red {
        background: var(--color-primary);
        color: var(--color-white);
        border: none;
    }

    .btn--red:hover {
        background: var(--color-primary);
    }

    .btn--outline {
        background: var(--color-white-04);
        border: 1px solid var(--color-white-18);
        color: var(--color-white);
    }

    .btn--outline:hover {
        background: var(--color-white-08);
        border-color: var(--color-white-35);
    }

    /* Quick Links */
    .footer__links-col {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .footer__links-title {
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--color-white);
    }

    .footer__links-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .footer__links-list a {
        color: var(--color-white);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: color 0.25s ease;
    }

    .footer__links-list a:hover {
        color: var(--color-primary);
    }

    /* Branding Logo Box */
    .footer__logo-col {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
    }

    .footer__logo {
        height: 48px;
        width: auto;
        object-fit: contain;
    }

    /* --- Footer Bottom Meta Info --- */
    .footer__bottom {
        border-top: 1px solid var(--color-white-06);
        padding-top: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: var(--color-white-50);
    }

    .footer__meta-links {
        display: flex;
        gap: 24px;
    }

    .footer__meta-links a {
        color: var(--color-white);
        text-decoration: none;
        transition: color 0.25s ease;
    }

    .footer__meta-links a:hover {
        color: var(--color-white);
    }

    .footer__credits a {
        color: var(--color-primary);
        text-decoration: none;
        font-weight: 600;
    }

    /* ---------- RESPONSIVE LAYOUTS ---------- */
    @media (max-width: 1024px) {
        .footer__cta-grid {
            grid-template-columns: 1fr;
        }

        .footer__middle-bar {
            flex-direction: column;
            align-items: stretch;
            gap: 50px;
        }

        .footer__logo-col {
            align-items: flex-start;
        }
    }

    @media (max-width: 768px) {
        .site-footer {
            padding: 80px 5vw 30px;
        }

        .footer__bottom {
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
        }

        .footer__meta-links {
            flex-wrap: wrap;
            gap: 10px 20px;
        }
    }

    /* ==========================================================================
   8. Recommended Section Styles
   ========================================================================== */
    .recommend-section {
        position: relative;
        width: 100%;
        background-color: var(--color-white);
        padding: 100px 4vw;
        overflow: hidden;
    }

    .recommend-container {
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    /* Header Area styling */
    .recommend-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 30px;
        border-bottom: 1px solid var(--color-white-90);
        padding-bottom: 24px;
    }

    .recommend-header-right {
        margin-top: 4.5vh;
        display: flex;
        align-items: stretch;
        gap: 0;
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.9s ease 1s, transform 0.9s var(--ease-smooth) 1s;
    }

    .recommend-tag {
        display: inline-flex;
        align-items: center;
        background-color: var(--color-white-95);
        padding: 8px 18px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 14px;
        color: var(--color-black);
        gap: 8px;
        margin-bottom: 14px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .recommend-tag__icon {
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: var(--color-primary);
        /* Accent Yellow/Orange */
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }

    .recommend-title {
        font-size: 64px;
        font-weight: 500;
        color: var(--color-secondary);
        line-height: 1.1;
        letter-spacing: -0.01em;
    }

    /* Header Button with Icon container */
    .btn-view-all {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        background: var(--color-primary);
        border: 1px solid var(--color-primary);
        padding: 14px 28px;
        border-radius: 14px;
        color: var(--color-white);
        font-weight: 600;
        text-decoration: none;
        transition: background 0.3s ease, border-color 0.3s ease;
    }

    .btn-view-all:hover {
        background: var(--color-primary);
        border-color: var(--color-primary);
    }

    .btn-view-all__arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
    }

    .btn-view-all__arrow svg {
        width: 100%;
        height: 100%;
    }

    /* Recommended Cards Grid */
    .recommend-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }

    .recommend-card {
        position: relative;
        background-color: var(--color-white);
        border: 1px solid var(--color-primary);
        overflow: hidden;
        padding: 35px;
        min-height: 380px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: border-color 0.4s ease, box-shadow 0.4s ease;
    }

    /* Default card layout shadow */
    .recommend-card:hover {
        border-color: transparent;
        box-shadow: 0 20px 40px var(--color-secondary-15);
    }

    .recommend-card__body {
        margin-top: 120px;
    }

    /* Relative content wrapper to sit cleanly above animated backdrops */
    .recommend-card__content {
        position: relative;
        z-index: 5;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* Icon Container & Rotation */
    .recommend-card__icon-wrap {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.75s var(--ease-smooth);
    }

    .recommend-card__icon {
        object-fit: contain;
    }

    .recommend-card:hover .recommend-card__icon-wrap {
        transform: rotate(-180deg);
        filter: invert(1);
    }


    /* Text elements transitions */
    .recommend-card__title {
        font-size: 22px;
        font-weight: 500;
        color: var(--color-secondary);
        margin-bottom: 12px;
        transition: color 0.4s ease;
    }

    .recommend-card__desc {
        font-size: 16px;
        color: var(--color-black-60);
        line-height: 1.6;
        transition: color 0.4s ease;
    }

    .recommend-card:hover .recommend-card__title {
        color: var(--color-white);
    }

    .recommend-card:hover .recommend-card__desc {
        color: var(--color-white-85);
    }

    /* ==========================================================================
   Multi-layered Curved Wave Animation
   ========================================================================== */
    .card-wave-layer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Create beautiful upward curves starting from below the card */
        border-radius: 50% 50% 0 0 / 15% 15% 0 0;
        transform: translateY(110%);
        will-change: transform;
    }

    /* Layer 1: Orange/Yellow Accent */
    .wave-layer--1 {
        background-color: var(--color-black);
        z-index: 1;
        transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
    }

    /* Layer 2: Brand Red */
    .wave-layer--2 {
        background-color: var(--color-secondary);
        z-index: 2;
        transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1);
    }

    /* Layer 3: Main Dark Indigo Theme Backing */
    .wave-layer--3 {
        background-color: var(--color-primary);
        z-index: 3;
        transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
    }

    /* HOVER TRIGGERS (Staggered Entrance Animation) */
    .recommend-card:hover .wave-layer--1 {
        transform: translateY(0) scale(1.2);
        transition-delay: 0s;
    }

    .recommend-card:hover .wave-layer--2 {
        transform: translateY(0) scale(1.2);
        transition-delay: 0.08s;
    }

    .recommend-card:hover .wave-layer--3 {
        transform: translateY(0) scale(1.2);
        transition-delay: 0.16s;
    }

    /* EXIT ANIMATIONS (Reverse Staggered delay when mouse leaves) */
    .recommend-card .wave-layer--1 {
        transition-delay: 0.16s;
    }

    .recommend-card .wave-layer--2 {
        transition-delay: 0.08s;
    }

    .recommend-card .wave-layer--3 {
        transition-delay: 0s;
    }

    /* ==========================================================================
   Media Queries
   ========================================================================== */
    @media (max-width: 1024px) {
        .recommend-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .recommend-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
        }

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

        .recommend-card {
            min-height: auto;
            gap: 30px;
        }
    }

    /* ==========================================================================
   Benefits Section Styles
   ========================================================================== */


    .benefits-section {
        position: relative;
        width: 100%;
        background-color: var(--color-white);
        padding: 120px 4vw;
        overflow: hidden;
        font-family: var(--font-primary);
    }

    .benefits-container {
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 60px;
    }

    /* --- Section Header Layout --- */
    .benefits-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 40px;
    }

    .benefits-tag {
        display: inline-flex;
        align-items: center;
        background-color: var(--color-white-95);
        padding: 8px 16px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 14px;
        color: var(--color-secondary);
        gap: 10px;
        margin-bottom: 18px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .benefits-tag__dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: var(--color-primary);
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }

    .benefits-title {
        font-size: 64px;
        font-weight: 500;
        color: var(--color-black);
        line-height: 1.15;
        letter-spacing: -0.02em;
    }

    .benefits-header__right {
        max-width: 480px;
    }

    .benefits-intro {
        font-size: 20px;
        line-height: 1.5;
        color: var(--color-black);
        font-weight: 400;
    }

    /* --- Benefits Grid System --- */
    .benefits-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .benefit-card {
        position: relative;
        background-color: var(--color-white-95);
        border: 1px solid var(--color-black-35);
        padding: 30px;
        min-height: 320px;
        cursor: pointer;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: transform 0.3s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    }

    /* Keep structural content above absolute color layers */
    .benefit-card__content {
        position: relative;
        z-index: 5;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* --- Card Typography & Values --- */
    .benefit-card__number {
        font-size: 51px;
        font-weight: 700;
        color: var(--color-primary);
        line-height: 1;
        display: block;
        margin-bottom: 40px;
        transition: color 0.4s ease-out;
    }

    .benefit-card__title {
        font-size: 27px;
        font-weight: 500;
        color: var(--color-black-85);
        margin-bottom: 16px;
        transition: color 0.4s ease-out;
    }

    .benefit-card__desc {
        font-size: 16px;
        color: var(--color-black-60);
        line-height: 1.6;
        font-weight: 500;
        transition: color 0.4s ease-out;
    }

    /* --- Diagonal Radial Sweep Layers (Transform Origin Bottom-Left Corner) --- */
    .benefit-radial-layer {
        position: absolute;
        bottom: -20%;
        left: -15%;
        top: 20%;
        width: 85%;
        height: 115%;
        border-radius: 50%;
        transform: scale(0);
        transform-origin: bottom left;
        will-change: transform;
    }

    .radial-layer--charcoal {
        background-color: var(--color-black);
        z-index: 1;
        transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
    }

    .radial-layer--navy {
        background-color: var(--color-secondary);
        z-index: 2;
        transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1);
    }

    .radial-layer--red {
        background-color: var(--color-primary);
        z-index: 3;
        transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
    }

    /* --- Staggered Active Hover State Transitions --- */
    .benefit-card:hover .radial-layer--charcoal {
        transform: scale(1.5);
        transition-delay: 0s;
    }

    .benefit-card:hover .radial-layer--navy {
        transform: scale(1.5);
        transition-delay: 0.04s;
    }

    .benefit-card:hover .radial-layer--red {
        transform: scale(1.5);
        transition-delay: 0.08s;
    }

    /* --- Reverse Exit State Transition Delays --- */
    .benefit-card .radial-layer--charcoal {
        transition-delay: 0.08s;
    }

    .benefit-card .radial-layer--navy {
        transition-delay: 0.04s;
    }

    .benefit-card .radial-layer--red {
        transition-delay: 0s;
    }

    /* --- Color Transition to White On Active Hover --- */
    .benefit-card:hover .benefit-card__number {
        color: var(--color-white-60);
        transition-delay: 0.2s;
    }

    .benefit-card:hover .benefit-card__title {
        color: var(--color-white);
        transition-delay: 0.2s;
    }

    .benefit-card:hover .benefit-card__desc {
        color: var(--color-white-85);
        transition-delay: 0.2s;
    }

    .benefit-card:hover {
        border-color: transparent;
        box-shadow: 0 25px 50px var(--color-primary-15);
    }

    /* --- Responsiveness Media Queries --- */
    @media (max-width: 1024px) {
        .benefits-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .benefits-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
        }
    }

    @media (max-width: 768px) {
        .benefits-grid {
            grid-template-columns: 1fr;
        }

        .benefit-card {
            padding: 50px 30px;
            min-height: auto;
        }
    }

    /* ==========================================================================
   Presence Section Styles
   ========================================================================== */
    .presence-section {
        position: relative;
        width: 100%;
        background-color: var(--color-white-95);
        /* Light gray base matching reference */
        padding: 120px 4vw;
        font-family: var(--font-primary);
        overflow: hidden;
    }

    .presence-container {
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 80px;
    }

    /* --- Section Header Layout --- */
    .presence-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 40px;
    }

    .presence-tag {
        display: inline-flex;
        align-items: center;
        background-color: var(--color-white-90);
        padding: 8px 16px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 14px;
        color: var(--color-secondary);
        gap: 10px;
        margin-bottom: 18px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .presence-tag__dot {
        display: inline-block;
        width: 12px;
        height: 12px;
        background-color: var(--color-primary);
        /* Brand Red */
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }

    .presence-title {
        font-size: 64px;
        font-weight: 500;
        color: var(--color-black);
        line-height: 1.15;
        letter-spacing: -0.02em;
    }

    .presence-header__right {
        max-width: 480px;
    }

    .presence-intro {
        font-size: 20px;
        line-height: 1.6;
        color: var(--color-black);
        font-weight: 400;
    }

    /* --- Grid & Dividers Layout --- */
    .presence-grid {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        width: 100%;
    }

    .presence-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 18px;
    }

    .presence-num-wrapper {
        display: inline-block;
    }

    .presence-number {
        font-size: 64px;
        font-weight: 500;
        color: var(--color-primary);
        /* Brand Red */
        line-height: 1;
        letter-spacing: -0.01em;
    }

    .presence-label {
        font-size: 18px;
        font-weight: 600;
        color: var(--color-black-85);
    }

    /* Vertical separator line */
    .presence-divider {
        width: 1px;
        height: 100px;
        background-color: var(--color-black-12);
    }

    /* --- Responsiveness Media Queries --- */
    @media (max-width: 1024px) {
        .presence-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
        }

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

        .presence-divider {
            display: none;
            /* Hide dividing lines on tablet & mobile */
        }
    }

    @media (max-width: 550px) {
        .presence-grid {
            grid-template-columns: 1fr;
            gap: 50px;
        }
    }

    /* ==========================================================================
   Journey Section Styles
   ========================================================================== */
    .journey-section {
        position: relative;
        width: 100%;
        padding: 120px 4vw;
        font-family: var(--font-primary);
        overflow: hidden;
    }

    /* Background Image Layer */
    .journey-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("/assets/bg.png");
        /* Swap with your PNG path */
        background-size: cover;
        background-position: center;
        pointer-events: none;
        z-index: 1;
    }

    .journey-container {
        position: relative;
        max-width: 1400px;
        margin: 0 auto;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 45px;
    }

    /* --- Header & Title --- */
    .journey-header {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 12px;
    }

    .journey-tag {
        display: inline-flex;
        align-items: center;
        /* background-color: var(--color-white-05); */
        /* border: 1px solid var(--color-white-08); */
        padding: 8px 18px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 14px;
        color: var(--color-white);
        gap: 10px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .journey-tag__dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: var(--color-primary);
        /* Brand Orange-Red */
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }

    .journey-title {
        font-size: 64px;
        font-weight: 400;
        color: var(--color-white);
        line-height: 1.15;
        letter-spacing: -0.02em;
    }

    /* --- Filter Pills --- */
    .journey-pills {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    .pill-btn {
        background: var(--color-white-03);
        border: 1px solid var(--color-white-08);
        color: var(--color-white-60);
        padding: 12px 24px;
        border-radius: 100px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .pill-btn:hover,
    .pill-btn.active {
        background: var(--color-white);
        color: var(--color-secondary);
        border-color: var(--color-white);
        box-shadow: 0 10px 25px var(--color-white-10);
    }

    /* --- Journey Cards Grid --- */
    .journey-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .journey-card {
        position: relative;
        border: 1px solid var(--color-primary);
        background: linear-gradient(135deg, var(--color-white-02) 0%, var(--color-white-05) 100%);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(10px);
        padding: 45px 35px;
        min-height: 320px;
        overflow: hidden;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: border-color 0.4s ease, box-shadow 0.4s ease;
    }

    .journey-card:hover {
        border-color: var(--color-primary-30);
        box-shadow: 0 20px 40px var(--color-black-40);
    }

    .journey-card__content {
        position: relative;
        z-index: 5;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* --- Icon Header Wrapper --- */
    .journey-card__icon-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 50px;
    }

    .journey-card__icon-circle {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        background: var(--color-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-white);
        transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
    }

    .journey-icon {
        width: 32px;
        height: 32px;
        color: var(--color-white);
    }

    .journey-card__step {
        font-size: 14px;
        font-weight: 700;
        color: var(--color-white-40);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        transition: color 0.4s ease;
    }

    /* --- Content Text Layout --- */
    .journey-card__title {
        font-size: 24px;
        font-weight: 500;
        color: var(--color-white);
        margin-bottom: 12px;
        transition: color 0.4s ease;
    }

    .journey-card__desc {
        font-size: 16px;
        color: var(--color-white);
        line-height: 1.6;
        transition: color 0.4s ease;
    }

    /* ==========================================================================
   Staged Hover Animations
   ========================================================================== */

    /* --- Animation 1: Expanding Color Background --- */
    .journey-card__color-grow {
        position: absolute;
        /* Center it precisely where the icon container rests */
        top: 40px;
        left: 25px;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: var(--color-primary);
        transform: scale(0);
        transform-origin: center center;
        z-index: 2;
        pointer-events: none;
        will-change: transform;
        transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
    }

    .journey-card:hover .journey-card__color-grow {
        /* Scale up wide enough to mask the entire rectangular boundaries */
        transform: scale(12);
    }

    /* When expand finishes, shift icon circle slightly up */
    .journey-card:hover .journey-card__icon-circle {
        transform: scale(1.05);
    }

    /* --- Animation 2: Glint/Shine Sweep Layer with Staggered Delay --- */
    .journey-card__shine {
        position: absolute;
        top: 0;
        left: -150%;
        /* Position off-screen to start */
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,
                var(--color-white-00) 0%,
                var(--color-white-25) 50%,
                var(--color-white-00) 100%);
        transform: skewX(-25deg);
        z-index: 3;
        pointer-events: none;
        transition: none;
        /* No transition on standard state */
    }

    /* Activate shine sweep only on hover with 0.5s delay (matching color completion) */
    .journey-card:hover .journey-card__shine {
        left: 150%;
        transition: left 1s cubic-bezier(0.3, 1, 0.3, 1);
        transition-delay: 1s;
    }

    /* --- Hover text color changes to pure high-contrast white --- */
    .journey-card:hover .journey-card__title {
        color: var(--color-white);
    }

    .journey-card:hover .journey-card__desc {
        color: var(--color-white-90);
    }

    .journey-card:hover .journey-card__step {
        color: var(--color-white-70);
    }

    /* ==========================================================================
   Media Queries
   ========================================================================== */
    @media (max-width: 1024px) {
        .journey-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .journey-grid {
            grid-template-columns: 1fr;
        }

        .journey-card {
            padding: 40px 30px;
            min-height: auto;
        }
    }

    /* ==========================================================================
   Deals Section Base Configurations
   ========================================================================== */
    .deals-section {
        position: relative;
        width: 100%;
        background-color: var(--color-white);
        padding: 100px 4vw;
        font-family: var(--font-primary);
        overflow: hidden;
    }

    .deals-container {
        max-width: 1440px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    /* --- Header Layout Elements --- */
    .deals-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 30px;
    }

    .deals-tag {
        display: inline-flex;
        align-items: center;
        background-color: var(--color-white-95);
        padding: 8px 16px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 14px;
        color: var(--color-secondary);
        gap: 10px;
        margin-bottom: 18px;
        text-transform: uppercase;
    }

    .deals-tag__dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: var(--color-primary);
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }

    .deals-title {
        font-size: 64px;
        font-weight: 500;
        color: var(--color-black);
        line-height: 1.15;
        letter-spacing: -0.02em;
    }

    /* Top View All Button Group Split */
    /* --- Reusable Carousel Component Structure --- */
    .deals-carousel-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .deals-carousel-track {
        display: flex;
        gap: 30px;
        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
        width: 100%;
    }

    /* --- Generic Class Product Cards Design System --- */
    .product-card {
        flex: 0 0 calc(33.333% - 60px);
        min-width: 320px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        background-color: var(--color-white);
    }

    .product-card__media {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

    .product-card__img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0s;
    }

    .product-card__img.active {
        opacity: 1;
        z-index: 1;
    }

    /* Top Left Pill Badge Elements */
    .product-card__pill {
        position: absolute;
        top: 25px;
        left: 25px;
        background-color: var(--color-white-15);
        border: 1px solid var(--color-white-25);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: var(--color-white);
        padding: 10px 20px;
        border-radius: 100px;
        font-size: 15px;
        font-weight: 400;
        z-index: 10;
    }

    /* Dynamic Page Slide Indicator Layout inside Cards */
    .product-card__indicators {
        position: absolute;
        bottom: 25px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        z-index: 10;
    }

    .product-card__indicators .dot {
        width: 28px;
        height: 6px;
        background-color: var(--color-white-40);
        border-radius: 100px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .product-card__indicators .dot.active {
        background-color: var(--color-white);
    }

    /* --- Meta Info Text Blocks --- */
    .product-card__info {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 15px;
        padding-top: 5px;
    }

    .product-card__tagline {
        font-size: 15px;
        color: var(--color-black-60);
        font-weight: 600;
        display: block;
        margin-bottom: 8px;
    }

    .product-card__title {
        font-size: 22px;
        font-weight: 700;
        color: var(--color-black-85);
        line-height: 1.3;
    }

    .product-card__action-arrow {
        background: none;
        border: none;
        color: var(--color-black-85);
        width: 32px;
        height: 32px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin-top: 25px;
    }

    .product-card__action-arrow svg {
        width: 24px;
        height: 24px;
        transition: transform 0.3s ease;
    }

    .product-card:hover .product-card__action-arrow svg {
        transform: translateX(5px);
    }

    /* ==========================================================================
   3-Layer Slanted Slide Transition Overlay Core Engine
   ========================================================================== */
    .product-card__transition-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        pointer-events: none;
        display: flex;
    }

    .layer-wipe {
        position: absolute;
        top: 0;
        right: -150%;
        /* Rest hidden off-canvas to the right */
        width: 140%;
        height: 100%;
        /* transform: skewX(-25deg); */
        will-change: transform;
    }

    .layer-wipe--red {
        background-color: var(--color-primary);
        z-index: 3;
    }

    .layer-wipe--navy {
        background-color: var(--color-secondary);
        z-index: 2;
    }

    .layer-wipe--charcoal {
        background-color: var(--color-black-85);
        z-index: 1;
    }

    /* --- Overlay Trigger Keyframe Timelines --- */
    .product-card__media.animating .layer-wipe--red {
        animation: slideWipe 1.7s cubic-bezier(0.76, 0, 0.24, 1) forwards;
    }

    .product-card__media.animating .layer-wipe--navy {
        animation: slideWipe 1.7s cubic-bezier(0.76, 0, 0.24, 1) forwards;
        animation-delay: 0.04s;
    }

    .product-card__media.animating .layer-wipe--charcoal {
        animation: slideWipe 1.7s cubic-bezier(0.76, 0, 0.24, 1) forwards;
        animation-delay: 0.08s;
    }

    @keyframes slideWipe {
        0% {
            right: -140%;
        }

        50% {
            right: -10%;
            /* Covers the midframe area fully skewed */
        }

        100% {
            right: 150%;
            /* Sweeps off-screen to the left boundary completely */
        }
    }

    /* ==========================================================================
   Footer Control Progress Bars & Panels
   ========================================================================== */
    .deals-footer-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-top: 10px;
    }

    .deals-pagination {
        font-size: 21px;
        font-weight: 700;
        color: var(--color-black-85);
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 60px;
    }

    .deals-pagination__divider {
        color: var(--color-black-20);
    }

    .deals-progressbar {
        flex: 1;
        height: 4px;
        background-color: var(--color-white-90);
        margin: 0 40px;
        position: relative;
        border-radius: 10px;
        overflow: hidden;
    }

    .deals-progressbar__fill {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 50%;
        /* Reflects 1 / 2 total pagination */
        background-color: var(--color-primary);
        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
        transform-origin: left center;
    }

    .deals-nav-buttons {
        display: flex;
        gap: 12px;
    }

    .deals-nav-btn {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        border: 1px solid var(--color-white-90);
        background-color: var(--color-white-95);
        color: var(--color-black-85);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    .deals-nav-btn:hover {
        background-color: var(--color-primary);
        color: var(--color-white);
        border-color: var(--color-primary);
    }

    .deals-nav-btn svg {
        width: 22px;
        height: 22px;
    }

    /* Responsive Overrides */
    @media (max-width: 1024px) {
        .product-card {
            flex: 0 0 calc(50% - 15px);
        }
    }

    @media (max-width: 680px) {
        .product-card {
            flex: 0 0 100%;
        }

        .deals-progressbar {
            display: none;
        }
    }

    /* ==========================================================================
   Testimonial Stepper System - Stack Overlay Layout
   ========================================================================== */
    .testimonial-section {
        /* background: radial-gradient(circle at 0% 100%, var(--color-white-15) 0%, transparent 40%),
                radial-gradient(circle at 100% 0%, var(--color-primary-12) 0%, transparent 50%),
                var(--color-secondary); */
        background-image: url('/assets/testimonial-bg.png');
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        padding: 100px 0;
        font-family: var(--font-primary);
        overflow: visible;
    }

    .testimonial-container {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 4vw;
    }

    /* Header Content Alignment */
    .testimonial-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
        margin-bottom: 60px;
    }

    .testimonial-header__title-block {
        position: relative;
        padding-left: 30px;
    }

    .testimonial-hexagon-tag {
        position: absolute;
        left: 15px;
        top: 30px;
        width: 12px;
        height: 12px;
        background-color: var(--color-primary);
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }

    .testimonial-title {
        font-family: var(--font-primary);
        font-size: 64px;
        font-weight: 500;
        color: var(--color-white);
        line-height: 1.15;
        margin: 0 0 0 15px;
        letter-spacing: -0.01em;
    }

    /* Metadata pills alignment */
    .testimonial-tags-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        max-width: 500px;
        justify-content: flex-start;
        padding-top: 10px;
    }

    .testimonial-pill {
        color: var(--color-white-60);
        border: 1px solid var(--color-white-15);
        padding: 10px 22px;
        border-radius: 100px;
        font-size: 14px;
        font-weight: 500;
        background: var(--color-white-02);
        white-space: nowrap;
    }

    /* --- Webflow Clone Style Sticky Track --- */
    .testimonial-track {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .testimonial-stepper-card {
        position: sticky;
        top: 120px;
        padding-bottom: 20px;
        background: transparent;
    }

    /* Exact Glass Frame Configurations */
    .testimonial-stepper-card__inner {
        background: var(--color-white-10);
        backdrop-filter: blur(10px) saturate(120%);
        -webkit-backdrop-filter: blur(24px) saturate(120%);
        border: 1px solid var(--color-primary);
        /* border-radius: 24px; */
        padding: 20px;
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 40px;
        align-items: center;
        box-shadow: 0 15px 30px var(--color-black-02);
    }

    /* Profile Row Structure */
    .testimonial-profile-row {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 28px;
    }

    .testimonial-avatar {
        width: 68px;
        height: 68px;
        /* border-radius: 12px; */
        object-fit: cover;
        /* border: 1px solid var(--color-white-20); */
    }

    .testimonial-username {
        font-size: 20px;
        font-weight: 600;
        color: var(--color-white);
        margin: 0 0 4px 0;
        letter-spacing: 0.03em;
    }

    .testimonial-verified {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--color-primary);
        font-size: 14px;
        font-weight: 500;
    }

    .testimonial-verified i {
        font-size: 14px;
    }

    .testimonial-verified span {
        color: var(--color-white-55);
    }

    .testimonial-quote {
        font-size: 18px;
        line-height: 1.6;
        color: var(--color-white);
        margin: 0 0 35px 85px;
        font-weight: 300;
    }

    /* Right Side Graphic Framing */
    .testimonial-stepper-card__right {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .testimonial-product-img {
        width: 100%;
        max-height: 280px;
        object-fit: cover;
        /* border-radius: 16px; */
    }

    /* --- Redesigned Button Cluster Refinement --- */
    .testimonial-stepper-card .testimonial-stepper-card .arrow-icon-img {
        width: 30px;
        height: 30px;
        object-fit: contain;
        filter: invert(0);
    }

    /* Responsive Structural Breakpoints */
    @media (max-width: 991px) {
        .testimonial-header {
            flex-direction: column;
            gap: 20px;
        }

        .testimonial-stepper-card__inner {
            grid-template-columns: 1fr;
            padding: 30px;
            gap: 30px;
        }

        .testimonial-stepper-card__right {
            order: -1;
        }
    }

    /* --- Stack Overlay Scroll Animation --- */
    .testimonial-track {
        position: relative;
        gap: 0;
        /* remove the existing 10px gap so cards sit flush */
    }

    .testimonial-stepper-card {
        top: 120px;
        /* same top for every card - keep this identical on all */
    }

    .testimonial-stepper-card:nth-child(1) {
        z-index: 1;
    }

    .testimonial-stepper-card:nth-child(2) {
        z-index: 2;
    }

    .testimonial-stepper-card:nth-child(3) {
        z-index: 3;
    }

    .testimonial-stepper-card:nth-child(4) {
        z-index: 4;
    }

    .testimonial-stepper-card:nth-child(5) {
        z-index: 5;
    }

    .testimonial-stepper-card__inner {
        will-change: transform;
        transition: transform 0.1s linear;
    }

    /* buffer so the last card has room to fully settle before the section ends */
    .testimonial-track::after {
        content: "";
        display: block;
        height: 60vh;
    }

    /* ==========================================================================
   9. Shared Hero Image Section Styles (About, Brands, Shop, Product Detail)
   ========================================================================== */
    .hero-image {
        position: relative;
        width: 100%;
        min-height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background: var(--color-secondary);
    }

    .hero-image__bg {
        position: absolute;
        inset: 0;
        background: url("/assets/hero-image.png") center / cover no-repeat;
        transform: scale(1.1);
    }

    .hero-image__bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, var(--color-black-38) 0%, var(--color-black-08) 42%, var(--color-black-56) 100%);
    }

    .hero-image__main {
        position: relative;
        z-index: 3;
        flex: 1;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 32px;
        color: var(--color-white);
        padding: 0 3.8vw 7vh;
    }

    .hero-image__copy {
        max-width: 62vw;
    }

    .hero-image__copy h1 {
        margin: 0;
        font-size: 64px;
        font-weight: 500;
        letter-spacing: -0.015em;
        line-height: 1.12;
    }

    .hero-image__copy .line {
        overflow: hidden;
    }

    .hero-image__copy .line>span {
        display: block;
        transform: translateY(0);
    }

    .hero-image__copy p {
        margin-top: 2.4vh;
        max-width: 42rem;
        font-size: 16px;
        line-height: 1.55;
        color: var(--color-white-92);
    }

    .hero-image__cta {
        margin-top: 4.5vh;
        display: flex;
        align-items: stretch;
        gap: 0;
    }


    /* ==========================================================================
   10. About Page Specific Styles
   ========================================================================== */
    .about-section {
        width: 100%;
        background-color: var(--color-white);
        padding: 100px 0;
        font-family: var(--font-primary);
        overflow: hidden;
    }

    .about-container {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 40px;
        box-sizing: border-box;
    }

    /* --- HEADER AREA --- */
    .about-header {
        margin-bottom: 24px;
    }

    .about-tag {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 15px;
        font-weight: 700;
        color: var(--color-black-85);
        text-transform: uppercase;
        margin-bottom: 16px;
        letter-spacing: 0.5px;
    }


    .about-heading-block .about-heading {
        font-size: 48px;
        font-weight: 300;
        color: var(--color-secondary);
        line-height: 1.15;
        letter-spacing: -1.5px;
        margin: 0;
    }

    /* --- GRID LAYOUT --- */
    .about-grid {
        display: grid;
        grid-template-columns: 1.7fr 1fr;
        /* Custom visual ratio for left and right columns */
        gap: 40px;
        align-items: start;
    }

    /* --- LEFT COLUMN: VIDEO CARD --- */
    .about-left-col {
        width: 100%;
    }

    .video-card-wrapper {
        width: 100%;
        position: relative;
        aspect-ratio: 16 / 10;
        /* Perfect widescreen container framing */
        overflow: hidden;
        background-color: var(--color-secondary);
        box-shadow: 0 10px 30px var(--color-black-03);
    }

    .about-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }


    .video-play-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 64px;
        color: var(--color-white-85);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .video-card-wrapper:hover .video-play-overlay {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }

    /* --- RIGHT COLUMN: IMAGE & TEXT --- */
    .about-right-col {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .about-image-wrapper {
        width: 100%;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        box-shadow: 0 10px 30px var(--color-black-03);
    }

    .about-side-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* --- NARRATIVE DESCRIPTION --- */
    .about-description-block {
        width: 100%;
    }

    .about-narrative {
        font-size: 16px;
        line-height: 1.6;
        color: var(--color-secondary);
        font-weight: 500;
        margin: 0;
        text-align: justify;
        /* Matches the formal editorial layout of the reference image */
    }

    /* --- RESPONSIVE BREAKPOINTS --- */
    @media (max-width: 1024px) {
        .about-header h2 {
            font-size: 38px;
        }

        .about-grid {
            grid-template-columns: 1fr;
            /* Switch to single-column stack on tablets */
            gap: 30px;
        }

        .video-card-wrapper {
            aspect-ratio: 16 / 9;
        }
    }

    @media (max-width: 768px) {
        .about-section {
            padding: 60px 0;
        }

        .about-container {
            padding: 0 24px;
        }

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

        .about-narrative {
            text-align: left;
            /* Reset to natural reading alignment on narrow screens */
        }
    }


    /* ==========================================================================
   11. Brands Page Specific Styles
   ========================================================================== */
    .brands-page .brand-card {
        border: 1px solid var(--color-white-90);
        margin: 10px;
    }

    .brands-page .brands-grid {
        border: none;
    }

    .brands-page .brand-card::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 19px;
        background-color: var(--color-primary);
        transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        z-index: 1;
    }


    /* ==========================================================================
   12. Contact Page Specific Styles
   ========================================================================== */
    .hero-form {
        position: relative;
        height: 1100px;
        width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .hero-form__bg {
        position: absolute;
        inset: 0;
        background: url("/assets/hero-form.png") center top / cover no-repeat;
        /* transform: scale(1.08); */
    }

    .hero-form__bg::after {
        content: "";
        position: absolute;
        inset: 0;
        /* background:
                linear-gradient(180deg, var(--color-secondary-44) 0%, var(--color-secondary-08) 40%, var(--color-secondary-68) 100%),
                radial-gradient(circle at top left, var(--color-primary-15), transparent 38%); */
    }

    .hero-form__main {
        position: relative;
        z-index: 3;
        flex: 1;
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: clamp(2rem, 4vw, 3rem);
        align-items: end;
        padding: 5vh 3.8vw 7vh;
        color: var(--color-white);
    }

    .hero-form__copy {
        max-width: 50rem;
        display: flex;
        flex-direction: column;
        gap: 10rem;
    }

    .hero-form__title {
        display: flex;
        flex-direction: column;
    }

    .hero-form__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .hero-form__eyebrow::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 2px;
        background: var(--color-primary);
    }

    .hero-form__copy h1 {
        margin: 1.2rem 0 0;
        font-size: 64px;
        font-weight: 500;
        line-height: 1.08;
        letter-spacing: -0.02em;
    }

    .hero-form__copy p {
        margin: 1.4rem 0 0;
        max-width: 40rem;
        font-size: 16px;
        font-weight: 300;
        line-height: 1.6;
        color: var(--color-white-92);
    }

    .hero-form__detail-list {
        display: flex;
        flex-direction: column;
        /* width: fit-content; */
        gap: 10px;
        margin-top: 2rem;
        font-size: 18px;
    }

    .hero-form__detail-item {
        padding: 0.9rem 1rem;
        width: fit-content;
        border-radius: 24px;
        background: var(--color-white-01);
        border: 1px solid var(--color-white-20);
        backdrop-filter: blur(8px);
        font-weight: 300;
    }

    .hero-form__card {
        /* background: var(--color-secondary-60); */
        background: var(--color-white-10);
        border: 1px solid var(--color-white-24);
        /* border-radius: 26px; */
        padding: 1.5rem;
        backdrop-filter: blur(16px) saturate(130%);
        box-shadow: 0 22px 80px var(--color-black-25);
    }

    .hero-form__card-title {
        margin: 0 0 2rem;
        font-size: 24px;
        font-weight: 400;
    }

    .hero-form__form {
        margin-top: 80px;
        display: grid;
        gap: 0.95rem;
    }

    .hero-form__row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px;
    }

    .hero-form__field {
        display: grid;
        gap: 0.4rem;
    }

    .hero-form__field--wide {
        grid-column: span 2;
    }

    .hero-form__field input,
    .hero-form__field textarea,
    .hero-form__field select {
        width: 100%;
        border: none;
        border-bottom: 1px solid var(--color-white-25);
        background: var(--color-secondary-00);
        color: var(--color-white);
        padding: 0.95rem 1rem;
        font: inherit;
        outline: none;
        border-radius: 4px;
        margin-top: 25px;
    }


    .hero-form__field input::placeholder,
    .hero-form__field textarea::placeholder {
        color: var(--color-white-65);
    }

    .hero-form__field textarea {
        min-height: 140px;
        resize: vertical;
    }

    .hero-form__bottom {
        display: flex;
        align-items: center;
        justify-content: end;
        gap: 1rem;
        flex-wrap: wrap;
        margin-top: 0.35rem;
    }

    .hero-form__options {
        display: flex;
        flex-wrap: wrap;
        gap: 0.9rem;
    }

    .hero-form__radio {
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        color: var(--color-white-92);
        font-size: 15px;
        font-weight: 600;
    }

    .hero-form__radio input {
        accent-color: var(--color-primary);
        width: 1rem;
        height: 1rem;
        margin: 0;
    }

    .hero-form__cta {
        display: flex;
        align-items: stretch;
        gap: 0;
    }

    .hero-form__cta .btn-red,
    .hero-form__cta .btn-red,
    .hero-form__cta .btn-red {
        width: 100px;
    }

    @media (max-width: 1024px) {
        .hero-form__main {
            grid-template-columns: 1fr;
            align-items: start;
        }

        .hero-form__copy {
            max-width: none;
        }
    }

    @media (max-width: 760px) {
        .hero-form__row {
            grid-template-columns: 1fr;
        }

        .hero-form__main {
            padding-bottom: 3rem;
        }
    }


    /* ==========================================================================
   13. Privacy Policy Page Specific Styles
   ========================================================================== */
    /* ==========================================================================
           Pixel-Perfect Layout Elements & Global Component Overrides
           ========================================================================== */
    .privacy-page {
        background-color: var(--color-white);
        margin: 0;
        padding: 0;
        font-family: var(--font-primary);
        color: var(--color-black-85);
    }

    /* Hero Wrapper Box Setup */
    .privacy-page .hero-empty {
        position: relative;
        width: 100%;
        background: var(--color-white);
        display: flex;
        flex-direction: column;
        padding-bottom: 20px;
    }

    /* Top Announcement Strip banner modification */
    .privacy-page .announce {
        background-color: var(--color-primary);
        color: var(--color-white);
        text-align: center;
        padding: 12px 20px;
        font-size: 14px;
        font-weight: 500;
        position: relative;
        letter-spacing: 0.02em;
    }

    .privacy-page .announce__close {
        position: absolute;
        right: 24px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: var(--color-white);
        cursor: pointer;
        font-size: 14px;
        opacity: 0.8;
    }

    /* Alignment Fixes matching design image */
    .privacy-page .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30px 4vw 20px;
        background: var(--color-white);
    }

    .privacy-page .logo img {
        height: 48px;
        object-fit: contain;
    }

    .privacy-page .header__actions {
        display: flex;
        align-items: center;
        gap: 32px;
    }

    .privacy-page .brochure {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--color-black-85);
        text-decoration: none;
        font-weight: 600;
        font-size: 15px;
        transition: opacity 0.2s;
    }

    .privacy-page .brochure svg {
        width: 16px;
        height: 16px;
    }

    /* Header Right CTA Action Pill Frame styling */
    .privacy-page .privacy-page

    /* Full Width Flat Navigation styling rows */
    .privacy-page .nav {
        display: flex;
        justify-content: space-between;
        padding: 15px 4vw;
        border-bottom: 1px solid var(--color-white-90);
        border-top: 1px solid var(--color-white-90);
        background: var(--color-white);
        margin: 0 4vw;
    }

    .privacy-page .nav a {
        color: var(--color-black-85);
        text-decoration: none;
        font-weight: 700;
        font-size: 15px;
        position: relative;
        transition: color 0.2s;
    }

    /* ==========================================================================
           Privacy Content Section - Pure Accurate Mirroring
           ========================================================================== */
    .privacy-page .privacy-container {
        max-width: 1440px;
        margin: 0 auto;
        padding: 60px 4vw 100px;
    }

    /* Header block structure inside privacy block template wrapper */
    .privacy-page .privacy-hero-block {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 40px;
        padding-bottom: 45px;
        border-bottom: 1px solid var(--color-white-90);
        margin-bottom: 50px;
    }

    .privacy-page .privacy-tag {
        display: inline-flex;
        align-items: center;
        font-weight: 700;
        font-size: 15px;
        color: var(--color-black-85);
        gap: 12px;
        margin-bottom: 20px;
    }

    .privacy-page .privacy-tag__dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: var(--color-primary);
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }

    .privacy-page .privacy-main-title {
        font-size: 64px;
        font-weight: 500;
        color: var(--color-black-85);
        line-height: 1.1;
        margin: 0;
        letter-spacing: -0.02em;
    }



    /* Typography & Spacing Blocks Content Rules */
    .privacy-page .privacy-content-flow {
        max-width: 100%;
    }

    .privacy-page .privacy-section-block {
        margin-bottom: 45px;
    }

    .privacy-page .privacy-section-block h2 {
        font-size: 48px;
        font-weight: 700;
        color: var(--color-black-85);
        margin: 0 0 18px 0;
        letter-spacing: -0.01em;
    }

    .privacy-page .privacy-section-block p {
        font-size: 16px;
        line-height: 1.6;
        color: var(--color-black-60);
        margin: 0 0 16px 0;
    }

    .privacy-page .privacy-section-block ul {
        margin: 0 0 20px 0;
        padding-left: 20px;
        list-style-type: none;
    }

    .privacy-page .privacy-section-block ul li {
        font-size: 16px;
        line-height: 1.6;
        color: var(--color-black-60);
        position: relative;
        margin-bottom: 8px;
        padding-left: 15px;
    }

    .privacy-page .privacy-section-block ul li::before {
        content: "•";
        position: absolute;
        left: 0;
        color: var(--color-black-60);
        font-size: 16px;
    }


    /* ==========================================================================
   14. Shop Page Specific Styles
   ========================================================================== */
    /* --- SHOP PAGE MAIN LAYOUT --- */
    .shop-main-section {
        width: 100%;
        background-color: var(--color-white);
        padding: 60px 0 100px 0;
        font-family: var(--font-primary);
    }

    .shop-main-container {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 40px;
        box-sizing: border-box;
    }

    .shop-layout {
        display: flex;
        gap: 40px;
        align-items: start;
    }

    /* --- SIDEBAR PANEL --- */
    .shop-sidebar {
        width: 320px;
        background-color: #f3f3f3;
        border: 1px solid var(--color-black-08);
        border-radius: 16px;
        padding: 24px;
        flex-shrink: 0;
        box-sizing: border-box;
    }

    .sidebar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--color-white-90);
        padding-bottom: 16px;
        margin-bottom: 20px;
    }

    .sidebar-header h3 {
        font-size: 18px;
        font-weight: 700;
        color: var(--color-black-85);
        margin: 0;
    }

    .reset-filters-btn {
        font-size: 14px;
        font-weight: 600;
        color: var(--primary-color);
        text-decoration: none;
        transition: opacity 0.3s ease;
    }

    .reset-filters-btn:hover {
        opacity: 0.8;
    }

    /* --- SEARCH BAR --- */
    .filter-search-box {
        display: flex;
        background-color: var(--color-white);
        border: 1px solid var(--color-black-20);
        border-radius: 30px;
        padding: 6px 6px 6px 16px;
        margin-bottom: 24px;
        align-items: center;
    }

    .filter-search-box input {
        border: none;
        outline: none;
        font-size: 14px;
        font-family: var(--font-primary);
        color: var(--color-black-85);
        flex-grow: 1;
    }

    .filter-search-box button {
        background-color: var(--color-secondary);
        color: var(--color-white);
        border: none;
        border-radius: 30px;
        padding: 8px 16px;
        font-size: 14px;
        font-weight: 600;
        font-family: var(--font-primary);
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .filter-search-box button:hover {
        background-color: var(--primary-color);
    }

    /* --- COLLAPSIBLE GROUPS --- */
    .filter-group {
        border-bottom: 1px solid var(--color-white-90);
        padding: 16px 0;
    }

    .filter-group:last-child {
        border-bottom: none;
    }

    .filter-group-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        user-select: none;
    }

    .filter-group-header span {
        font-size: 14px;
        font-weight: 700;
        color: var(--color-black-85);
    }

    .filter-group-header i {
        font-size: 14px;
        color: var(--color-black-35);
        transition: transform 0.3s ease;
    }

    .filter-group-content {
        margin-top: 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Dropdown select inside filters */
    .filter-select {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid var(--color-black-20);
        background-color: var(--color-white);
        border-radius: 20px;
        font-family: var(--font-primary);
        font-size: 14px;
        font-weight: 500;
        color: var(--color-black-60);
        outline: none;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e04a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 16px;
    }

    /* Checkbox design */
    .filter-checkbox-label {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        font-weight: 600;
        color: var(--color-black-60);
        cursor: pointer;
    }

    .filter-checkbox-label input[type="checkbox"] {
        accent-color: var(--primary-color);
        width: 16px;
        height: 16px;
    }

    /* Sliders elements styling */
    .slider-track-bar {
        position: relative;
        width: 100%;
        height: 4px;
        background-color: var(--color-white-90);
        border-radius: 2px;
        margin: 15px 0;
    }

    .slider-track-highlight {
        position: absolute;
        height: 100%;
        background-color: var(--primary-color);
        left: 0;
        right: 0;
    }

    .slider-handle {
        position: absolute;
        top: 50%;
        width: 14px;
        height: 14px;
        background-color: var(--color-white);
        border: 2px solid var(--primary-color);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
    }

    .slider-handle.min {
        left: 0%;
    }

    .slider-handle.max {
        left: 100%;
    }

    .slider-inputs {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

    .slider-inputs span {
        font-size: 14px;
        font-weight: 700;
        color: var(--color-black-35);
        text-transform: uppercase;
    }

    .slider-val-box {
        width: 65px;
        padding: 6px 8px;
        border: 1px solid var(--color-white-90);
        background-color: var(--color-white);
        border-radius: 8px;
        font-family: var(--font-primary);
        font-size: 14px;
        font-weight: 700;
        color: var(--color-black-85);
        text-align: center;
        outline: none;
    }

    /* --- MAIN CONTENT AREA --- */
    .shop-content-area {
        flex-grow: 1;
    }

    .shop-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
    }

    .view-toggle-buttons {
        display: flex;
        gap: 12px;
    }

    .toggle-btn {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 1px solid var(--color-white-90);
        background-color: var(--color-white);
        color: var(--color-black-85);
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .toggle-btn.active {
        background-color: var(--color-secondary);
        color: var(--color-white);
        border-color: var(--color-secondary);
    }

    .toggle-btn:hover:not(.active) {
        background-color: var(--color-white-95);
    }

    .shop-sort-wrapper {
        display: flex;
        align-items: center;
        border: 1px solid var(--color-white-90);
        background-color: var(--color-white);
        border-radius: 30px;
        padding: 10px 20px;
        gap: 10px;
    }

    .shop-sort-wrapper i {
        font-size: 14px;
        color: var(--color-black-35);
    }

    .shop-sort-select {
        border: none;
        outline: none;
        background-color: transparent;
        font-family: var(--font-primary);
        font-size: 15px;
        font-weight: 600;
        color: var(--color-black-85);
        cursor: pointer;
    }

    /* Grid columns for shop */
    .shop-products-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* --- LIST VIEW OVERRIDES --- */
    .shop-products-grid.list-view {
        grid-template-columns: 1fr;
    }

    .shop-products-grid.list-view .product-card {
        flex-direction: row;
        align-items: center;
        gap: 24px;
        padding: 20px;
    }

    .shop-products-grid.list-view .card-image-wrapper {
        width: 280px;
        height: 180px;
        flex-shrink: 0;
    }

    .shop-products-grid.list-view .product-details {
        padding-top: 0;
        flex-grow: 1;
    }

    .shop-products-grid.list-view .product-meta-row {
        margin-bottom: 12px;
    }

    .shop-products-grid.list-view .specs-row {
        padding: 8px 0;
        margin-bottom: 12px;
    }

    .shop-products-grid.list-view .view-details-btn {
        align-self: flex-start;
        padding: 12px 30px;
    }



    /* --- RESPONSIVE ADAPTATIONS --- */
    @media (max-width: 1200px) {
        .shop-products-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 991px) {
        .shop-layout {
            flex-direction: column;
            align-items: stretch;
        }

        .shop-sidebar {
            width: 100%;
        }

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

    @media (max-width: 768px) {
        .shop-main-container {
            padding: 0 24px;
        }

        .shop-products-grid.list-view .product-card {
            flex-direction: column;
            align-items: stretch;
        }

        .shop-products-grid.list-view .card-image-wrapper {
            width: 100%;
            height: auto;
        }
    }

    @media (max-width: 576px) {
        .shop-products-grid {
            grid-template-columns: 1fr;
        }

        .shop-toolbar {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        }
    }


    /* ==========================================================================
   15. Product Detail Page Specific Styles
   ========================================================================== */
    /* --- PRODUCT DETAIL SECTION --- */
    .product-detail-section {
        width: 100%;
        background-color: var(--color-white);
        padding: 60px 0 100px 0;
        font-family: var(--font-primary);
    }

    .product-detail-container {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 40px;
        box-sizing: border-box;
    }

    /* --- BACK BUTTON --- */
    .back-to-listing-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 17px;
        font-weight: 600;
        color: var(--color-black-85);
        text-decoration: none;
        border-bottom: 1px solid var(--color-black-85);
        padding-bottom: 4px;
        margin-bottom: 30px;
        transition: opacity 0.3s ease;
    }

    .back-to-listing-link:hover {
        border-bottom: 1px solid var(--primary-color);
    }

    /* --- LAYOUT SPLIT --- */
    .product-detail-layout {
        display: grid;
        grid-template-columns: 1.8fr 1fr;
        gap: 50px;
        align-items: start;
    }

    /* --- LEFT DETAIL COLUMN --- */
    .detail-main-content {
        display: flex;
        flex-direction: column;
    }

    .detail-main-image-wrapper {
        width: 100%;
        aspect-ratio: 16 / 10;
        /* border-radius: 12px; */
        overflow: hidden;
        background-color: var(--color-white-95);
        margin-bottom: 16px;
        box-shadow: 0 10px 30px var(--color-black-05);
    }

    .detail-main-image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Thumbnail slider */
    .detail-thumbnails-row {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 10px;
        margin-bottom: 40px;
    }

    /* Webkit scrollbar for clean horizontal scrolling */
    .detail-thumbnails-row::-webkit-scrollbar {
        height: 6px;
    }

    .detail-thumbnails-row::-webkit-scrollbar-track {
        background: var(--color-white-90);
        border-radius: 10px;
    }

    .detail-thumbnails-row::-webkit-scrollbar-thumb {
        background: var(--color-black-35);
        border-radius: 10px;
    }

    .detail-thumbnails-row::-webkit-scrollbar-thumb:hover {
        background: var(--color-black-60);
    }

    .detail-thumbnail-item {
        width: 80px;
        height: 50px;
        /* border-radius: 6px; */
        overflow: hidden;
        flex-shrink: 0;
        cursor: pointer;
        border: 2px solid transparent;
        transition: border-color 0.3s ease;
    }

    .detail-thumbnail-item.active,
    .detail-thumbnail-item:hover {
        border-color: var(--primary-color);
    }

    .detail-thumbnail-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Title & Meta Header */
    .detail-title-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 10px;
    }

    .detail-title-block h1 {
        font-size: 64px;
        font-weight: 500;
        line-height: 1.1;
        margin: 0 0 8px 0;
        color: var(--color-secondary);
        letter-spacing: -1px;
    }

    .detail-origin {
        font-size: 24px;
        font-weight: 400;
        color: var(--color-black-60);
        margin: 0;
    }

    .detail-ref-no {
        font-size: 14px;
        font-weight: 600;
        color: var(--color-black-35);
        background-color: var(--color-white-95);
        padding: 6px 12px;
        border-radius: 6px;
    }

    /* Price */
    .detail-price-tag {
        font-size: 64px;
        font-weight: 500;
        color: var(--color-secondary);
        margin: 20px 0;
    }

    .detail-divider {
        border: 0;
        height: 1px;
        background-color: var(--color-white-90);
        margin: 30px 0;
    }

    /* Badges */
    .detail-badges-row {
        display: flex;
        gap: 16px;
    }

    .detail-badge-pill {
        font-size: 17px;
        font-weight: 600;
        color: var(--color-black-85);
        border: 1px solid var(--color-black-20);
        background-color: var(--color-primary-15);
        padding: 10px 28px;
        border-radius: 100px;
    }

    /* Action buttons */
    .detail-actions-row {
        display: flex;
        gap: 20px;
        margin-top: 40px;
    }

    .detail-btn-contact {
        flex: 2;
        background-color: var(--color-secondary);
        color: var(--color-white);
        border: none;
        border-radius: 100px;
        padding: 15px 0;
        font-family: var(--font-primary);
        font-size: 18px;
        font-weight: 500;
        cursor: pointer;
        text-align: center;
    }

    /* .detail-btn-contact:hover {
    background-color: var(--primary-color);
} */

    .detail-btn-print {
        flex: 1;
        background-color: var(--color-black-85);
        color: var(--color-white);
        border: none;
        border-radius: 100px;
        padding: 15px 0;
        font-family: var(--font-primary);
        font-size: 18px;
        font-weight: 500;
        cursor: pointer;
        text-align: center;
    }

    /* .detail-btn-print:hover {
    background-color: var(--color-secondary);
} */

    /* --- SIDEBAR COLUMN --- */
    .detail-sidebar {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    /* Quick Info Box */
    .info-box-card {
        background-color: var(--color-white);
        border: 1px solid var(--color-white-90);
        border-radius: 16px;
        padding: 30px;
        box-shadow: 0 5px 15px var(--color-black-02);
    }

    .info-box-card h3 {
        font-size: 20px;
        font-weight: 700;
        color: var(--color-black-85);
        margin: 0 0 24px 0;
    }

    .info-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .info-list-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 15px;
    }

    .info-list-label {
        font-weight: 600;
        color: var(--color-secondary);
    }

    .info-list-value {
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .info-status-badge {
        background-color: var(--color-secondary);
        color: var(--color-white);
        font-size: 14px;
        font-weight: 700;
        padding: 6px 12px;
        border-radius: 6px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Send Inquiry Box */
    .inquiry-box-card {
        background-color: var(--color-white);
        border: 1px solid var(--color-white-90);
        border-radius: 16px;
        padding: 30px;
        box-shadow: 0 5px 15px var(--color-black-02);
    }

    .inquiry-box-card h3 {
        font-size: 20px;
        font-weight: 700;
        color: var(--color-black-85);
        margin: 0 0 24px 0;
    }

    .inquiry-form-wrapper {
        background-color: var(--color-white-95);
        border: 1px solid var(--color-black-08);
        border-radius: 16px;
        padding: 24px;
    }

    .inquiry-input-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 16px;
    }

    .inquiry-input-group label {
        font-size: 14px;
        font-weight: 600;
        color: var(--color-black-60);
    }

    .inquiry-input-group input,
    .inquiry-input-group textarea {
        width: 100%;
        box-sizing: border-box;
        background-color: var(--color-white);
        border: 1px solid var(--color-black-20);
        border-radius: 30px;
        padding: 14px 20px;
        font-family: var(--font-primary);
        font-size: 14px;
        font-weight: 600;
        color: var(--color-black-85);
        outline: none;
        transition: border-color 0.3s ease;
    }

    .inquiry-input-group textarea {
        border-radius: 16px;
        resize: vertical;
    }

    .inquiry-input-group input:focus,
    .inquiry-input-group textarea:focus {
        border-color: var(--color-black-85);
    }

    .inquiry-submit-btn {
        width: 100%;
        background-color: var(--color-secondary);
        color: var(--color-white);
        border: none;
        border-radius: 100px;
        padding: 16px 0;
        font-family: var(--font-primary);
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s ease;
        margin-top: 8px;
    }


    /* --- RESPONSIVE DETAIL PAGE --- */
    @media (max-width: 991px) {
        .product-detail-layout {
            grid-template-columns: 1fr;
            gap: 40px;
        }
    }

    @media (max-width: 768px) {
        .product-detail-container {
            padding: 0 24px;
        }
    }

    @media (max-width: 576px) {
        .detail-title-block h1 {
            font-size: 64px;
        }

        .detail-price-tag {
            font-size: 38px;
        }

        .detail-actions-row {
            flex-direction: column;
            gap: 16px;
        }

        .detail-btn-contact,
        .detail-btn-print {
            width: 100%;
        }
    }


    /* ==========================================================================
   16. Gallery & Brands Showcase (home2) Page Specific Styles
   ========================================================================== */
    /* ==========================================
           1. Core Reset & Global Styles
           ========================================== */


    body,
    .home2-page {
        margin: 0;
        padding: 0;
        width: 100%;
        overflow-x: hidden;
        font-family: var(--font-primary);
        background-color: var(--color-white);
    }

    /* ==========================================
           2. Gallery Section Styles
           ========================================== */
    .home2-page .gallery-container {
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        background-color: var(--color-white);
    }

    .home2-page .page-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        z-index: 1;
        pointer-events: none;
    }

    .home2-page .carousel-track {
        position: absolute;
        top: 61%;
        left: 0;
        transform: translateY(-50%);
        width: 100%;
        overflow: hidden;
        height: 400px;
        z-index: 2;
    }

    .home2-page .carousel-slides {
        display: flex;
        width: max-content;
        animation: scroll-carousel-home2 25s linear infinite;
    }

    .home2-page .carousel-slide {
        width: 33.33vw;
        padding: 0 10px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }

    .home2-page .carousel-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: 2px solid var(--color-white);
    }

    @keyframes scroll-carousel-home2 {
        0% {
            transform: translateX(0);
        }

        100% {
            /* Translates by half of the duplicated elements to create a perfect loop */
            transform: translateX(-133.32vw);
        }
    }

    /* ==========================================
           3. Brands Section Styles
           ========================================== */
    .home2-page .brands-section {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        padding-top: 60px;
        background-color: var(--color-white);
    }

    .home2-page .brands-header {
        padding: 0 40px;
        margin-bottom: 24px;
    }

    .home2-page .header-tag {
        display: inline-flex;
        align-items: center;
        background-color: var(--color-white-95);
        padding: 10px 24px;
        border-radius: 12px 12px 0 0;
        font-weight: 600;
        font-size: 16px;
        color: var(--color-black);
        gap: 10px;
    }

    .home2-page .tag-icon {
        display: inline-block;
        width: 12px;
        height: 12px;
        background-color: var(--color-primary);
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }

    .home2-page .brands-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        border-top: 1px solid var(--color-white-90);
        gap: 0;
        width: 100%;
    }

    .home2-page .brand-card {
        position: relative;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--color-white);
        overflow: hidden;
        cursor: pointer;
        box-sizing: border-box;
    }

    .home2-page .brand-card:not(:last-child) {
        border-right: 1px solid var(--color-white-90);
    }

    .home2-page .brand-card::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0;
        background-color: var(--color-primary);
        transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        z-index: 1;
    }

    .home2-page .brand-card:hover::before {
        height: 100%;
    }

    .home2-page .brand-logo {
        position: relative;
        max-width: 50%;
        max-height: 45%;
        object-fit: contain;
        z-index: 2;
        transform: translateY(0) scale(1);
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .home2-page .brand-card:hover .brand-logo {
        transform: translateY(-8px) scale(1.05);
    }

    .home2-page .brands-footer-line {
        width: 100%;
        height: 12px;
        background-color: var(--color-primary);
    }

    /* ==========================================
           4. Responsive Queries
           ========================================== */
    @media (max-width: 1024px) {
        .home2-page .brands-grid {
            grid-template-columns: repeat(3, 1fr);
        }

        .home2-page .brand-card:nth-child(3) {
            border-right: none;
        }

        .home2-page .brand-card {
            height: 200px;
            border-bottom: 1px solid var(--color-white-90);
        }

        .home2-page .carousel-slide {
            width: 50vw;
        }

        @keyframes scroll-carousel-home2 {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-200vw);
            }
        }
    }

    @media (max-width: 640px) {
        .home2-page .brands-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .home2-page .brand-card:nth-child(even) {
            border-right: none;
        }

        .home2-page .brand-card {
            height: 160px;
        }

        .home2-page .carousel-slide {
            width: 100vw;
        }

        @keyframes scroll-carousel-home2 {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-400vw);
            }
        }
    }