/* ==========================================================================
   UTXplore Case Study Page Styles
   Follows Figma design: node-id 2404:106
   Fluid/Responsive - All sizes scale with viewport
   ========================================================================== */

.utxplore-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    min-height: 100vh;
    background-color: var(--color-opal-white);
    position: relative;
    overflow-x: hidden;
    opacity: 0;
    animation: utxplore-fadeIn 0.8s ease-out forwards;
}

@keyframes utxplore-fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Page Title Section
   Figma: 122px side padding, 130px vertical padding
   ========================================================================== */
.utxplore-page-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 20px clamp(40px, 13.1vw, 150px) 60px;
}

.utxplore-page-title__heading {
    font-family: var(--font-proxima);
    font-weight: var(--font-weight-black);
    font-size: clamp(28px, 3.33vw, 48px);
    line-height: 1.01;
    letter-spacing: -0.01em;
    color: #00366a;
    margin: 0 0 clamp(6px, 0.7vw, 10px) 0;
    padding-top: 20px;
}

.utxplore-page-title__subtitle {
    font-family: var(--font-proxima);
    font-weight: var(--font-weight-black);
    font-size: clamp(16px, 1.67vw, 24px);
    line-height: 1.202;
    letter-spacing: -0.005em;
    color: #00366a;
    margin: 0;
}

/* ==========================================================================
   Hero Section
   Figma: #141845 bg, 550px tall, centered logo
   ========================================================================== */
.utxplore-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: clamp(230px, 31.5vw, 454px);
    background-color: #141845;
    padding: clamp(20px, 3vw, 43px) clamp(80px, 16vw, 231px);
}

.utxplore-hero__logo-container {
    width: clamp(400px, 64.7vw, 932px);
    max-width: 100%;
}

.utxplore-hero__logo-container img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ==========================================================================
   Scope & Client Bar
   Figma: #141845 bg, white text, 162px height, gap 193px
   ========================================================================== */
.utxplore-scope-bar {
    width: 100%;
    min-height: clamp(100px, 11.25vw, 162px);
    background-color: #141845;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(25px, 2.8vw, 40px) 0;
}

.utxplore-scope-bar__content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(60px, 13.4vw, 193px);
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 clamp(40px, 10vw, 144px);
    color: #ffffff;
}

.utxplore-scope-bar__scope,
.utxplore-scope-bar__client {
    display: flex;
    flex-direction: column;
}

.utxplore-scope-bar__leads {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
}

.utxplore-scope-bar__heading {
    font-family: var(--font-proxima);
    font-weight: var(--font-weight-extrabold);
    font-size: clamp(22px, 2.5vw, 36px);
    line-height: 1.202;
    color: #ffffff;
    margin: 0 0 clamp(4px, 0.4vw, 6px) 0;
}

.utxplore-scope-bar__item {
    font-family: var(--font-proxima);
    font-weight: 400;
    font-size: clamp(14px, 1.67vw, 24px);
    line-height: 0.99;
    color: #ffffff;
    margin: 0;
}

/* ==========================================================================
   Two-Column Content Section
   Figma: Left 502px, Right 932px, side by side
   ========================================================================== */
.utxplore-content {
    display: flex;
    width: 100%;
}

/* Left Column */
.utxplore-content__left {
    display: flex;
    flex-direction: column;
    width: 35%;
    flex-shrink: 0;
}

.utxplore-content__left-img1 {
    width: 100%;
    overflow: hidden;
    position: relative;
    aspect-ratio: 627 / 897;
}

.utxplore-content__left-img1 img {
    position: absolute;
    top: -1.6%;
    width: 110%;
    height: 103.5%;
    display: block;
    object-fit: cover;
}

.utxplore-content__left-img2 {
    width: 100%;
    overflow: hidden;
}

.utxplore-content__left-img2 img {
    width: 140%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Right Column */
.utxplore-content__right {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.utxplore-content__right-poster {
    flex: 1;
    overflow: hidden;
}

.utxplore-content__right-poster img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.utxplore-content__right-quote {
    background-color: #00366a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(30px, 4vw, 60px) clamp(20px, 3vw, 40px);
    min-height: clamp(120px, 15.6vw, 225px);
}

.utxplore-content__right-quote p {
    font-family: var(--font-proxima);
    font-weight: var(--font-weight-bold);
    font-size: clamp(18px, 2.78vw, 40px);
    line-height: normal;
    color: #69e5ff;
    text-align: center;
    margin: 0;
    max-width: clamp(400px, 62vw, 892px);
}

/* ==========================================================================
   Project Introduction / Body Section
   Figma: 189px side padding, 103px vertical padding, 37px gap
   ========================================================================== */
.utxplore-body {
    width: 100%;
    padding: clamp(50px, 5.8vw, 83px) clamp(40px, 13.2vw, 190px);
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 5.5vw, 80px);
    overflow: hidden;
}

.utxplore-body__block {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.2vw, 17px);
}

.utxplore-body__heading {
    font-family: var(--font-proxima);
    font-weight: var(--font-weight-black);
    font-size: clamp(28px, 3.33vw, 48px);
    line-height: 1.01;
    letter-spacing: -0.01em;
    color: #00366a;
    margin: 0 0 clamp(6px, 0.7vw, 10px) 0;
    padding-top: clamp(-20px, -5.5vw, -40px);
}

.utxplore-body__text {
    font-family: var(--font-proxima);
    font-weight: var(--font-weight-medium);
    font-size: clamp(14px, 1.39vw, 20px);
    line-height: 1.35;
    color: #00366a;
    margin: 0;
    max-width: clamp(500px, 73.6vw, 1060px);
}

/* ==========================================================================
   What We Made Section
   ========================================================================== */
.utxplore-whatwemade {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Header: Teal bg, white text */
.utxplore-whatwemade__header {
    width: 100%;
    background-color: #11decd;
    padding: clamp(25px, 3vw, 43px) clamp(40px, 7.4vw, 106px);
    display: flex;
    align-items: center;
    min-height: clamp(80px, 9.7vw, 139px);
}

.utxplore-whatwemade__title {
    font-family: var(--font-proxima);
    font-weight: var(--font-weight-black);
    font-size: clamp(28px, 3.33vw, 48px);
    line-height: 1.202;
    color: #f6fffc;
    margin: 0;
}

/* Content: Two columns */
.utxplore-whatwemade__content {
    display: flex;
    width: 100%;
    min-height: clamp(550px, 71.6vw, 1031px);
}

/* Left column */
.utxplore-whatwemade__left {
    display: flex;
    flex-direction: column;
    width: clamp(350px, 48.5vw, 699px);
    flex-shrink: 0;
}

.utxplore-whatwemade__left-logo {
    width: 100%;
    overflow: hidden;
}

.utxplore-whatwemade__left-logo img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.utxplore-whatwemade__left-flyers {
    width: 100%;
    overflow: hidden;
}

.utxplore-whatwemade__left-flyers img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.utxplore-whatwemade__left-colors {
    display: flex;
    height: clamp(40px, 5.2vw, 75px);
    flex-shrink: 0;

}



/* Right column */
.utxplore-whatwemade__right {
    display: flex;
    flex-direction: column;
    flex: 1;

}

.utxplore-whatwemade__right-astand {
    flex: 1;
    overflow: hidden;
    display: flex;

}

.utxplore-whatwemade__right-astand img {
    width: 100%;
    height: 90%;
    display: block;
    object-fit: cover;
    object-position: center top;

}

.utxplore-whatwemade__right-colors {
    display: flex;
    height: clamp(40px, 5.2vw, 75px);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    top: clamp(-96px, -6.7vw, -40px);
}

/* Color blocks */
.utxplore-whatwemade__color-block {
    flex: 1;
    min-width: 0;
}

.utxplore-whatwemade__color-block--red {
    background-color: #c5412a;
}

.utxplore-whatwemade__color-block--teal-blue {
    background-color: #45a6b6;
}

.utxplore-whatwemade__color-block--soft-blue {
    background-color: #7090c5;
}

.utxplore-whatwemade__color-block--dark-navy {
    background-color: #141845;
}

/* ==========================================================================
   Outcome / Footer Section
   Figma: 188px side padding, 61px top padding, 58px gap
   ========================================================================== */
.utxplore-outcome {
    width: 100%;
    padding: clamp(50px, 5.5vw, 80px) clamp(40px, 13.2vw, 190px);
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 4vw, 58px);
    overflow: hidden;
}

.utxplore-outcome__heading {
    font-family: var(--font-proxima);
    font-weight: var(--font-weight-black);
    font-size: clamp(28px, 3.33vw, 48px);
    line-height: 1.01;
    letter-spacing: -0.01em;
    color: #00366a;
    margin: 0;
}

.utxplore-outcome__paragraph {
    font-family: var(--font-proxima);
    font-weight: var(--font-weight-medium);
    font-size: clamp(14px, 1.39vw, 20px);
    line-height: 1.35;
    color: #00366a;
    margin: 0;
}

.utxplore-outcome__closing {
    font-family: var(--font-proxima);
    font-weight: var(--font-weight-extrabold);
    font-size: clamp(14px, 1.39vw, 20px);
    line-height: 1;
    color: #00366a;
    margin: 0;
    max-width: clamp(500px, 67.1vw, 966px);
}

/* ==========================================================================
   Mobile Responsive Adjustments
   ========================================================================== */
@media (max-width: 768px) {
    .utxplore-page-title {
        padding: 40px 20px;
    }

    .utxplore-hero {
        min-height: 200px;
        padding: 20px;
    }

    .utxplore-hero__logo-container {
        width: 100%;
    }

    .utxplore-content {
        flex-direction: column;
    }

    .utxplore-content__left {
        width: 100%;
    }

    .utxplore-content__right-quote {
        min-height: 120px;
        padding: 30px 20px;
    }

    .utxplore-scope-bar__content {
        flex-direction: column;
        gap: 20px;
        padding: 0 20px;
    }

    .utxplore-body {
        padding: 40px 20px;
    }

    .utxplore-whatwemade__header {
        padding: 20px;
    }

    .utxplore-whatwemade__content {
        flex-direction: column;
        min-height: auto;
    }

    .utxplore-whatwemade__left {
        width: 100%;
    }

    .utxplore-whatwemade__right-colors {
        height: 50px;
    }

    .utxplore-whatwemade__left-colors {
        height: 50px;
    }

    .utxplore-outcome {
        padding: 40px 20px;
    }
}