.content-image-overlap-content-padding.none {
    background-color: transparent;
}

.content-image-overlap-content-padding.accent {
    background-color: #e4dcd3;
}

.content-image-overlap-content-padding.primary {
    background-color: #fff;
}

.content-image-overlap-content-padding.brand {
    background-color: #002c5f;
}

.content-image-overlap-content-padding.subtle {
    background-color: #f6f3f2;
}

.content-image-overlap-content-padding.brand .content-image-overlap-eyebrow,
.content-image-overlap-content-padding.brand .content-image-overlap-title,
.content-image-overlap-content-padding.brand
    .content-image-overlap-description {
    color: #fff;
}

.content-image-overlap-content-padding.brand
    .content-image-overlap-button
    button {
    border: 1px solid white;
}

.content-image-overlap-content-padding.brand .content-image-overlap-button {
    border: 1px solid #fff;
}

/* Base Container */
.content-image-overlap-specs-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0;
    padding: 64px 80px;
    max-width: 1912px;
    margin: 0 auto;
    overflow: hidden;
}

.content-image-overlap-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 740px;
}

.content-image-overlap-upper-content {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Wrapper to control layout */
.content-image-overlap-inner {
    display: flex;
    position: relative;
    width: 100%;
    max-width: 1400px;
    height: auto;
}

/* Media (Image) */
.content-image-overlap-media {
    flex: 1;
    position: relative;
    z-index: 1;
}

.content-image-overlap-media img {
    width: 80%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Content Overlay */
.content-image-overlap-content-padding {
    position: absolute;
    transform: translateY(-50%);
    background-color: rgb(255 255 255 / 90%);
    z-index: 2;
    padding: 40px 64px;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 440px;
}

/* Typography */
.content-image-overlap-eyebrow-title-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.content-image-overlap-eyebrow {
    font-family: "HyundaiSansText-Bold";
    font-weight: 700;
    font-size: 16px;
    line-height: 125%;
    color: #5d5d5c;
    font-style: normal;
}

.content-image-overlap-title {
    font-family: "HyundaiSansHead-Medium";
    font-weight: 500;
    font-size: 40px;
    line-height: 120%;
    color: #000;
    font-style: normal;
}

.content-image-overlap-description {
    font-family: "HyundaiSansText-Regular";
    font-weight: 400;
    font-size: 16px;
    line-height: 125%;
    color: #000;
}

.content-image-overlap-title-options {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.content-image-overlap-button {
    background-color: #002c5f;
    color: #fff;
    border: none;
    padding: 16px 24px;
    height: 48px;
    min-width: 140px;
    cursor: pointer;
    font-family: "HyundaiSansHead-Medium";
    line-height: 125%;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    align-items: center;
    display: flex;
    text-decoration: none;
    gap: 8px;
    justify-content: center;
}

.content-image-overlap-button.left {
    width: fit-content;
    align-self: flex-start;
}

.content-image-overlap-button.twocolumn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-image-overlap-button.center {
    align-self: center;
    display: flex;
}

.content-image-overlap-button a {
    color: unset;
    display: flex;
    gap: 8px;
    align-items: center;
    text-decoration: none;
}

/* ====== Layout Variants ====== */

/* IMAGE LEFT */
.content-image-overlap-specs-container.imageleft img {
    margin-left: auto;
}

.content-image-overlap-specs-container.imageleft
    .content-image-overlap-content-padding {
    left: 0%;
    right: auto;
}

/* IMAGE RIGHT */
.content-image-overlap-specs-container.imageright .content-image-overlap-inner {
    flex-direction: row-reverse;
}

.content-image-overlap-specs-container.imageright
    .content-image-overlap-content-padding {
    right: 0%;
    left: auto;
    align-items: flex-end;
}

/* IMAGE TOP */
.content-image-overlap-specs-container.imagetop img {
    width: 100%;
}

.content-image-overlap-specs-container.imagetop
    .content-image-overlap-content-padding {
    align-items: center;
    transform: translateY(-40px); /* was -80px → reduce overlap */
    width: calc(100% - 120px); /* keeps 60px margin on left/right */
    max-width: 100%;
    min-height: unset;
    position: relative;
    top: -40px; /* was -80px → match translate reduction */
    z-index: 4;
    margin: 0 60px -80px; /* was -160px → less bottom pull */
    box-sizing: border-box;
}

.content-image-overlap-specs-container.imagetop
    .content-image-overlap-upper-content {
    flex-direction: column;
}

.content-image-overlap-specs-container.imagetop .content-image-overlap-media {
    width: 100%;
    position: unset;
}

.content-image-overlap-specs-container.imagetop {
    padding: 64px 80px;
}

/* IMAGE STACKED — NO OVERLAP */

/* IMAGE STACKED — OVERLAPPING IMAGE ABOVE FULL-WIDTH CONTENT */

.content-image-overlap-specs-container.imagestack
    .content-image-overlap-upper-content {
    flex-direction: column-reverse;
    width: 100%;
    align-items: unset;
}

.content-image-overlap-specs-container.imagestack {
    display: flex;
    justify-content: center;
    padding: 0 0 64px;
    position: relative;
    background-color: #fff;
}

.content-image-overlap-specs-container.imagestack
    .content-image-overlap-eyebrow-title-container {
    text-align: center;
}

.content-image-overlap-specs-container.imagestack .content-image-overlap-inner {
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* IMAGE OVERLAPPING FROM TOP */
.content-image-overlap-specs-container.imagestack .content-image-overlap-media {
    position: unset;
    aspect-ratio: 2 / 1;
    width: 100%;
    overflow: hidden;
    max-height: 641px;
}

.content-image-overlap-specs-container.imagestack.video .content-image-overlap-media {
    aspect-ratio: none;
    overflow: hidden;
    max-height: none;
}

.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media
    img {
    width: 100%;
    display: block;
    padding: 0 80px;
    aspect-ratio: 2 / 1;
}

/* ✅ Gradient background variations — top 30% color fade */
.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.none
    img,
.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.none
    iframe,
.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.none
    video,
.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.none
    .content-image-media-video-wrapper-container {
    background: linear-gradient(
        to bottom,
        transparent 0% 30%,
        transparent 30% 100%
    );
}

.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.accent
    img,
.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.accent
    iframe,
.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.accent
    video,
.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.accent
    .content-image-media-video-wrapper-container {
    background: linear-gradient(
        to bottom,
        #e4dcd3 0% 30%,
        transparent 30% 100%
    );
}

.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.primary
    img,
.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.primary
    iframe,
.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.primary
    video,
.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.primary
    .content-image-media-video-wrapper-container {
    background: linear-gradient(to bottom, #fff 0% 30%, transparent 30% 100%);
}

.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.brand
    img,
.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.brand
    iframe,
.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.brand
    video,
.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.brand
    .content-image-media-video-wrapper-container {
    background: linear-gradient(
        to bottom,
        #002c5f 0% 30%,
        transparent 30% 100%
    );
}

.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.subtle
    img,
.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.subtle
    iframe,
.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.subtle
    video,
.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.subtle
    .content-image-media-video-wrapper-container {
    background: linear-gradient(
        to bottom,
        #f6f3f2 0% 30%,
        transparent 30% 100%
    );
}

.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.nline-theme
    img,
.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.nline-theme
    iframe,
.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.nline-theme
    video,
.content-image-overlap-specs-container.imagestack
    .content-image-overlap-media.nline-theme
    .content-image-media-video-wrapper-container {
    background: linear-gradient(
        to bottom,
        #d7e6f3 0% 30%,
        transparent 30% 100%
    );
}

/* image satcked */
.content-image-overlap-specs-container.imagestack
    .content-image-overlap-content-padding {
    transform: none;
    position: unset;
    max-width: unset;
    min-height: unset;
    padding: 64px 80px;
    width: 100%;
}

/* INTERNAL CONTENT STYLING */
.content-image-overlap-specs-container.imagestack
    .content-image-overlap-content-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    gap: 32px;
}

.content-image-overlap-content-block {
    max-width: 740px;
    gap: 32px;
    display: flex;
    flex-direction: column;
}

.content-image-overlap-specs-container.imagetop .content-image-overlap-media,
.content-image-overlap-specs-container.imageleft .content-image-overlap-media,
.content-image-overlap-specs-container.imageright .content-image-overlap-media {
    aspect-ratio: 3 / 2;
    width: 100%;
    max-height: 520px;
    overflow: hidden;
}

.content-image-overlap-specs-container.imagestack
    .content-imageoverlap-media--vwrapper {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
}

.content-image-overlap-specs-container.imagestack iframe {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.content-image-media-video-wrapper-container {
    padding-left: 80px;
    padding-right: 80px;
}

.content-image-overlap-specs-container.imageleft
    .content-imageoverlap-media--vwrapper {
    width: 100%;
    max-height: 641px;
    aspect-ratio: 3/2;
    position: relative;
}

.content-image-overlap-specs-container.imageleft
    .content-imageoverlap-media--vwrapper
    iframe {
    height: 100%;
    width: 75%;
    position: absolute;
    right: 0;
}

.content-image-overlap-specs-container.imageright
    .content-imageoverlap-media--vwrapper {
    width: 100%;
    max-height: 641px;
    aspect-ratio: 3/2;
    position: relative;
}

.content-image-overlap-specs-container.imageright
    .content-imageoverlap-media--vwrapper
    iframe {
    height: 100%;
    width: 75%;
    position: absolute;
    left: 0;
}

.content-image-overlap-specs-container.imageleft
    .content-image-media-video-wrapper {
    position: absolute;
    right: 0;
    height: 100%;
    width: 75%;
}

.content-image-overlap-specs-container.imageright
    .content-image-media-video-wrapper {
    position: absolute;
    left: 0;
    height: 100%;
    width: 75%;
}

.content-image-overlap-specs-container.imageleft
    .content-image-media-video-wrapper
    video,
.content-image-overlap-specs-container.imageright
    .content-image-media-video-wrapper
    video {
    display: block;
    height: 100%;
    min-width: 100%;
}

.content-image-overlap-wrapper .video-controls {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 3;
}

.content-image-overlap-wrapper .video-controls .icon-video-play-circle {
    font-size: 64px;
    color: rgba(255 255 255 90%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-image-overlap-specs-container.imagestack
    .content-image-media-video-wrapper {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
}

.content-image-overlap-specs-container.imagestack
    .content-image-media-video-wrapper
    video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-image-overlap-button-container.buttongroup-container {
    display: flex;
    gap: 16px;
}

.content-image-overlap-wrapper .button-secondary {
    display: flex;
    height: 48px;
    min-width: 140px;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border: 1px solid #002c5f;
    text-decoration: none;
    color: #002c5f;
    text-align: center;
    font-family: "HyundaiSansHead-Medium";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.content-image-overlap-content-padding.nline-theme {
    background: #d7e6f3;
}

.content-image-overlap-content-padding.nline-theme .button-secondary {
    border: 1px solid #000;
    color: #000;
}

.content-image-overlap-content-padding.nline-theme .button-primary {
    background: #000;
}

.content-image-overlap-content-block .content-image-overlap-title.subsection {
    font-size: 32px;
    line-height: 125%;
}

.content-image-overlap-wrapper
    .content-image-overlap-button-caretlink-container
    a {
    text-decoration: none;
    display: flex;
    gap: 4px;
    align-items: center;
}

.content-image-overlap-wrapper .content-image-overlap-button-text {
    color: #002c5f;
    font-family: "HyundaiSansText-Medium";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.content-image-overlap-wrapper
    .content-image-overlap-button-caretlink-container
    .icon-Chevron-right-16 {
    color: #002c5f;
}

.content-image-overlap-wrapper .content-image-overlap-single-button-container {
    display: flex;
}

/* alignment */

.content-image-overlap-wrapper .content-image-overlap-content-block.center {
    align-items: center;
}

.content-image-overlap-wrapper
    .content-image-overlap-content-block.center
    .content-image-overlap-eyebrow-title-container {
    text-align: center;
}

.content-image-overlap-wrapper .content-image-overlap-content-block.left,
.content-image-overlap-wrapper
    .content-image-overlap-content-block.left
    .content-image-overlap-eyebrow-title-container {
    align-items: flex-start;
    text-align: left;
}

.content-image-overlap-content-padding.brand .button-secondary {
    border: 1px solid #fff;
    color: #fff;
}

.content-image-overlap-content-padding.brand  .content-image-overlap-button-text,
.content-image-overlap-content-padding.brand .content-image-overlap-button-caretlink-container .icon-chevron-forward-light
 {
       color: #fff;
}

.content-image-overlap-wrapper .content-image-overlap-eyebrow-title-container a {
     color: #002C5F;
    font-family: "HyundaiSansText-Medium";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}

/* Mobile and Tablet styles */
@media (max-width: 1199px) and (min-width: 768px) {
    .content-image-overlap-specs-container.imagetop,
    .content-image-overlap-specs-container.imageleft,
    .content-image-overlap-specs-container.imageright {
        padding:  32px 40px ;
    }

    .content-image-overlap-specs-container.imagetop
        .content-image-overlap-content-padding {
        align-items: center;
        transform: translateY(-40px);
        max-width: 100%;
        min-height: unset;
        position: relative;
        top: -40px;
        z-index: 4;
        margin: 0 40px -80px;
        box-sizing: border-box;
        width: 100%;
    }

    .content-image-overlap-specs-container.imagetop
        .content-image-overlap-title-options {
        max-width: 740px;
    }

    /* imageleft */
    .content-image-overlap-specs-container.imageleft img {
        margin-left: unset;
        width: 100%;
    }

    .content-image-overlap-specs-container.imageleft
        .content-image-overlap-content-padding {
        padding: 40px 32px;
        min-height: 320px;
        text-align: left;
        max-width: unset;
        left: unset;
        position: unset;
        transform: translateY(-13%);
        margin-top: -5%;
    }

    .content-image-overlap-specs-container.imageleft
        .content-image-overlap-upper-content {
        flex-direction: column;
    }

    .content-image-overlap-specs-container.imageleft
        .content-image-overlap-media {
        width: 111%;
    }

    /* imageright */
    .content-image-overlap-specs-container.imageright img {
        margin-left: unset;
        width: 100%;
    }

    .content-image-overlap-specs-container.imageright
        .content-image-overlap-content-padding {
        padding: 40px 32px;
        min-height: 320px;
        text-align: left;
        max-width: unset;
        left: unset;
        position: unset;
        transform: translateY(-13%);
        margin-top: -5%;
    }

    .content-image-overlap-specs-container.imageright
        .content-image-overlap-upper-content {
        flex-direction: column;
    }

    .content-image-overlap-specs-container.imageright
        .content-image-overlap-media {
        width: 111%;
    }

    .content-image-overlap-specs-container.imagestack {
              padding: 32px 0;
    }

    .content-image-overlap-specs-container.imagestack
        .content-image-overlap-content-block {
        margin: unset;
        text-align: left;
    }

    .content-image-overlap-specs-container.imagestack
        .content-image-overlap-media
        img {
        padding: 0 40px;
    }

    .content-image-overlap-content-block {
        max-width: unset;
    }

    .content-image-overlap-specs-container.imagestack
        .content-image-overlap-content-padding {
        padding: 32px 40px;
    }

    .content-image-overlap-specs-container.imagetop
        .content-image-overlap-media {
        width: 112%;
        overflow: hidden;
    }

    .content-image-overlap-specs-container.imageright
        .content-image-media-video-wrapper,
        .content-image-overlap-specs-container.imageleft .content-image-media-video-wrapper {
        width: 100%;
    }

    .content-image-overlap-specs-container.imageright
        .content-imageoverlap-media--vwrapper
        iframe {
        width: 100%;
    }

    .content-image-overlap-specs-container.imagestack
        .content-image-overlap-media.nline-theme
        iframe,
    .content-image-overlap-specs-container.imagestack
        .content-image-overlap-media.nline-theme
        video {
        background: linear-gradient(
            to bottom,
            #d7e6f3 0% 30%,
            transparent 30% 100%
        );
    }

    .content-image-media-video-wrapper-container {
        padding-left: 40px;
        padding-right: 40px;
    }

    .content-image-overlap-specs-container.imagestack
        .content-imageoverlap-media--vwrapper {
        height: unset;
    }

   .content-image-overlap-specs-container.imageright 
    .content-imageoverlap-media--vwrapper:has(iframe) {
        position: unset;
    }

     .content-image-overlap-specs-container.imagestack .content-image-media-video-wrapper video {
        padding-left: 40px;
     padding-right: 40px;
    }
}

/* Responsive */
@media (max-width: 767px) {
    /* image top */
    .content-image-overlap-specs-container.imagetop,
    .content-image-overlap-specs-container.imageleft,
    .content-image-overlap-specs-container.imageright {
        padding: 32px 16px 24px;
    }

    .content-image-overlap-specs-container.imagetop
        .content-image-overlap-content-padding {
        align-items: center;
        transform: translateY(-32px);
        max-width: 100%;
        min-height: unset;
        position: relative;
        top: -32px;
        z-index: 4;
        margin: 0 16px -64px;
        box-sizing: border-box;
        left: 0;
        text-align: left;
        width: 100%;
        padding: 32px 24px;
    }

    .content-image-overlap-title-options {
        gap: 24px;
    }

    .content-image-overlap-title {
        font-size: 32px;
        line-height: 125%;
        margin-bottom: 0;
    }

    .content-image-overlap-description {
        font-size: 14px;
        line-height: 128.571%;
        font-style: normal;
    }

    .content-image-overlap-eyebrow-title-container {
        gap: 4px;
    }

    .content-image-overlap-copy {
        gap: 4px;
    }

    /* imageleft */
    .content-image-overlap-specs-container.imageleft img {
        margin-left: unset;
        width: 100%;
    }

    .content-image-overlap-specs-container.imageleft
        .content-image-overlap-content-padding {
        padding: 32px 24px;
        min-height: 240px;
        text-align: left;
        max-width: 740px;
        left: unset;
        position: unset;
        transform: translateY(-9%);
        width: 100%;
        margin-top: -5%;
    }

    .content-image-overlap-specs-container.imageleft
        .content-image-overlap-upper-content {
        flex-direction: column;
    }

    .content-image-overlap-specs-container.imageleft
        .content-image-overlap-media {
        width: 110%;
        overflow: hidden;
    }

    /* image right */

    .content-image-overlap-specs-container.imageright img {
        margin-left: unset;
        width: 100%;
        object-fit: contain;
    }

    .content-image-overlap-specs-container.imageright
        .content-image-overlap-content-padding {
        padding: 32px 24px;
        min-height: 320px;
        text-align: left;
        max-width: 740px;
        left: unset;
        position: unset;
        transform: translateY(-7%);
        width: 100%;
        margin-top: -12%;
    }

    .content-image-overlap-specs-container.imageright
        .content-image-overlap-upper-content {
        flex-direction: column;
    }

    .content-image-overlap-specs-container.imageright
        .content-image-overlap-media {
        width: 110%;
        overflow: hidden;
    }

    .content-image-overlap-specs-container.imagestack {
        padding: 0 0 24px;
    }

    .content-image-overlap-specs-container.imagestack
        .content-image-overlap-media
        img {
        padding: 0 16px;
    }

    .content-image-overlap-specs-container.imagestack
        .content-image-overlap-content-padding {
        padding: 24px 16px;
    }

    .content-image-overlap-specs-container.imagestack
        .content-image-overlap-eyebrow-title-container {
        text-align: center;
    }

    .content-image-overlap-content-padding {
        width: 90%;
        padding: 32px;
        text-align: center;
        align-items: center;
        left: 50%;
        transform: translateX(-50%);
    }

    .content-image-overlap-eyebrow {
        font-size: 14px;
        line-height: 128.571%;
    }

    .content-image-overlap-content-block {
        gap: 24px;
    }

    .content-image-overlap-specs-container.imagetop
        .content-image-overlap-media {
        width: 110%;
        overflow: hidden;
    }

    .content-image-overlap-wrapper .content-image-overlap-button {
        padding: 12px 16px;
    }

    .content-image-overlap-content-block
        .content-image-overlap-title.subsection {
        font-size: 28px;
        line-height: 128.571%;
    }

    .content-image-overlap-specs-container.imageright
        .content-image-media-video-wrapper ,
        .content-image-overlap-specs-container.imageleft 
        .content-image-media-video-wrapper{
        width: 100%;
    }

    .content-image-overlap-specs-container.imageright
        .content-imageoverlap-media--vwrapper
        iframe {
        width: 100%;
    }

    .content-image-overlap-specs-container.imagestack
        .content-image-overlap-media.nline-theme
        iframe {
        background: linear-gradient(
            to bottom,
            #d7e6f3 0% 30%,
            transparent 30% 100%
        );
    }

    .content-image-media-video-wrapper-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .content-image-overlap-specs-container.imagestack
        .content-imageoverlap-media--vwrapper {
        height: unset;
    }
    
    .content-image-overlap-specs-container.imagestack .content-image-media-video-wrapper video {
        padding-left: 16px;
        padding-right: 16px;
    }

    .content-image-overlap-button-container.buttongroup-container {
    flex-direction: column;
    width: 100%;
    }
}