.elementor-1357 .elementor-element.elementor-element-720b98b{width:100%;max-width:100%;}.elementor-1357 .elementor-element.elementor-element-720b98b > .elementor-widget-container{margin:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-0850638 *//* =========================================
   SECTION 2 — ABOUT INTRO
========================================= */

.sa-about-intro {
    position: relative;
    overflow: hidden;

    padding: 105px 20px;

    background: #ece8e2;
    color: #071a2d;
}


/* BACKGROUND DECORATION */

.sa-about-intro::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -190px;
    top: -190px;

    border: 1px solid rgba(185,150,85,.15);
    border-radius: 50%;
}

.sa-about-intro::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -160px;
    bottom: -170px;

    border: 1px solid rgba(7,26,45,.06);
    border-radius: 50%;
}


/* =========================================
   CONTAINER
========================================= */

.sa-about-intro-container {
    position: relative;
    z-index: 2;

    width: min(1150px, 100%);
    margin: auto;

    display: grid;

    /* REDUCED COLUMN GAP */
    grid-template-columns: 1.25fr .75fr;

    align-items: center;

    gap: 55px;
}


/* =========================================
   LEFT CONTENT
========================================= */

.sa-about-intro-content {
    max-width: 720px;

    animation: saAboutIntroReveal .9s ease both;
}


.sa-about-intro-label {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: #a78343;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 3px;
}


.sa-about-intro-label::before {
    content: "";

    width: 32px;
    height: 2px;

    background: #b99655;
}


/* HEADING */

.sa-about-intro-content h2 {
    margin: 0 0 23px;

    font-size: clamp(42px, 5vw, 62px);

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -2.5px;
}


.sa-about-intro-content h2 span {
    display: block;

    position: relative;

    width: fit-content;

    color: #a78343;
}


/* UNDERLINE */

.sa-about-intro-content h2 span::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 55px;
    height: 2px;

    background: #b99655;

    transition: width .4s ease;
}


.sa-about-intro-content:hover h2 span::after {
    width: 100px;
}


/* DESCRIPTION */

.sa-about-intro-content > p {
    max-width: 650px;

    margin: 0;

    color: #59676f;

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================
   NEW LEADERSHIP FOCUS
========================================= */

.sa-about-intro-focus {
    margin-top: 30px;
}


.sa-about-intro-focus > span {
    display: block;

    margin-bottom: 11px;

    color: #071a2d;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


/* TAGS */

.sa-about-intro-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.sa-about-intro-tags div {
    padding: 9px 15px;

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

    border: 1px solid rgba(7,26,45,.13);

    border-radius: 3px;

    color: #071a2d;

    font-size: 11px;

    font-weight: 600;

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


.sa-about-intro-tags div:hover {
    transform: translateY(-3px);

    background: #071a2d;

    border-color: #071a2d;

    color: #ffffff;
}


/* =========================================
   RIGHT — LEADERSHIP PHILOSOPHY
========================================= */

.sa-about-intro-philosophy {
    position: relative;

    display: flex;

    gap: 18px;

    /* REDUCED INTERNAL PADDING */
    padding: 25px 20px;

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

    border: 1px solid rgba(7,26,45,.08);

    box-shadow:
        10px 15px 35px rgba(7,26,45,.06);

    animation: saAboutPhilosophyReveal 1s .2s ease both;

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


.sa-about-intro-philosophy:hover {
    transform: translateY(-5px);

    box-shadow:
        15px 22px 45px rgba(7,26,45,.1);
}


/* GOLD LINE */

.sa-about-intro-philosophy-line {
    width: 3px;

    min-height: 145px;

    flex-shrink: 0;

    background: #b99655;
}


/* PHILOSOPHY CONTENT */

.sa-about-intro-philosophy-content {
    position: relative;
}


.sa-about-intro-philosophy-content > span {
    display: block;

    margin-bottom: 15px;

    color: #a78343;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.2px;
}


.sa-about-intro-philosophy h3 {
    margin: 0;

    color: #071a2d;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(22px, 2.5vw, 29px);

    line-height: 1.4;

    font-weight: 400;
}


.sa-about-intro-philosophy h3 strong {
    display: block;

    color: #a78343;

    font-weight: 600;
}


/* STAR */

.sa-about-intro-philosophy-mark {
    margin-top: 18px;

    color: #b99655;

    font-size: 17px;

    transition: transform .5s ease;
}


.sa-about-intro-philosophy:hover
.sa-about-intro-philosophy-mark {
    transform: rotate(90deg);
}
/* =========================================
   REMOVE GAP BETWEEN SECTIONS
========================================= */

.elementor-section,
.e-con {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* Remove Elementor container gaps */
.elementor > .e-con,
.elementor > .elementor-element {
    gap: 0 !important;
}


/* Make sections sit directly against each other */
.elementor-section + .elementor-section,
.e-con + .e-con {
    margin-top: 0 !important;
}

/* =========================================
   ANIMATIONS
========================================= */

@keyframes saAboutIntroReveal {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

}


@keyframes saAboutPhilosophyReveal {

    from {
        opacity: 0;
        transform: translateX(25px);
    }

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

}


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

@media (max-width: 900px) {

    .sa-about-intro-container {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .sa-about-intro-philosophy {
        max-width: 600px;
    }

}


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

@media (max-width: 600px) {

    .sa-about-intro {
        padding: 75px 20px;
    }

    .sa-about-intro-content h2 {
        font-size: 40px;
    }

    .sa-about-intro-content > p {
        font-size: 15px;
    }

    .sa-about-intro-philosophy {
        padding: 22px 18px;
    }

    .sa-about-intro-philosophy h3 {
        font-size: 22px;
    }

}


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

@media (max-width: 400px) {

    .sa-about-intro-content h2 {
        font-size: 35px;
    }

    .sa-about-intro-label {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .sa-about-intro-tags div {
        padding: 8px 11px;
        font-size: 10px;
    }

}


/* =========================================
   ACCESSIBILITY
========================================= */

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

    .sa-about-intro-content,
    .sa-about-intro-philosophy {
        animation: none;
    }

    .sa-about-intro-tags div,
    .sa-about-intro-philosophy,
    .sa-about-intro-philosophy-mark {
        transition: none;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ef76f93 *//* =========================================
   SECTION 3 — TERRASPARK VISION
========================================= */

.sa-about-quote {
    position: relative;
    overflow: hidden;

    padding: 105px 20px;

    background: #071a2d;
    color: #ffffff;
}


/* =========================================
   BACKGROUND DETAILS
========================================= */

.sa-about-quote::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -260px;
    top: -260px;

    border: 1px solid rgba(185,150,85,.18);

    border-radius: 50%;
}


.sa-about-quote::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -190px;
    bottom: -180px;

    border: 1px solid rgba(255,255,255,.05);

    border-radius: 50%;
}


/* =========================================
   CONTAINER
========================================= */

.sa-about-quote-container {
    position: relative;
    z-index: 2;

    width: min(1000px, 100%);

    margin: auto;
}


/* =========================================
   LABEL
========================================= */

.sa-about-quote-label {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-bottom: 40px;

    color: #c5a15a;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;

    text-align: center;
}


.sa-about-quote-label span {
    width: 35px;
    height: 1px;

    background: #b99655;
}


/* =========================================
   QUOTE CONTENT
========================================= */

.sa-about-quote-content {
    position: relative;

    padding: 0 55px;

    text-align: center;
}


/* QUOTE SYMBOL */

.sa-about-quote-symbol {
    position: absolute;

    left: 0;
    top: -45px;

    color: #b99655;

    font-family: Georgia, serif;

    font-size: 105px;

    line-height: 1;

    opacity: .65;
}


/* QUOTE */

.sa-about-quote blockquote {
    position: relative;
    z-index: 2;

    max-width: 900px;

    margin: 0 auto;

    color: #f4f5f6;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(24px, 3vw, 36px);

    line-height: 1.55;

    font-weight: 400;

    letter-spacing: -.3px;
}


/* =========================================
   BOTTOM AUTHOR
========================================= */

.sa-about-quote-bottom {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-top: 35px;

    color: #b99655;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.sa-about-quote-line {
    width: 45px;
    height: 1px;

    background: #b99655;
}


/* =========================================
   HOVER EFFECT
========================================= */

.sa-about-quote-content {
    transition: transform .5s ease;
}


.sa-about-quote-content:hover {
    transform: translateY(-4px);
}


.sa-about-quote-content:hover
.sa-about-quote-symbol {
    opacity: 1;
}


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

@keyframes saAboutQuoteReveal {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

}


.sa-about-quote-content {
    animation: saAboutQuoteReveal 1s ease both;
}


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

@media (max-width: 800px) {

    .sa-about-quote {
        padding: 90px 20px;
    }

    .sa-about-quote-content {
        padding: 0 35px;
    }

    .sa-about-quote-symbol {
        font-size: 85px;
        top: -35px;
    }

}


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

@media (max-width: 600px) {

    .sa-about-quote {
        padding: 75px 20px;
    }

    .sa-about-quote-label {
        margin-bottom: 30px;

        font-size: 9px;

        letter-spacing: 2px;
    }

    .sa-about-quote-label span {
        width: 20px;
    }

    .sa-about-quote-content {
        padding: 0 10px;
    }

    .sa-about-quote-symbol {
        left: -5px;
        top: -35px;

        font-size: 70px;
    }

    .sa-about-quote blockquote {
        font-size: 23px;
        line-height: 1.5;
    }

    .sa-about-quote-bottom {
        margin-top: 28px;

        font-size: 9px;
        letter-spacing: 2px;
    }

}


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

@media (max-width: 400px) {

    .sa-about-quote blockquote {
        font-size: 21px;
    }

    .sa-about-quote-symbol {
        font-size: 60px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

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

    .sa-about-quote-content {
        animation: none;
        transition: none;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-adde67d *//* =========================================================
   MSA LEADERSHIP JOURNEY
   PREMIUM EXECUTIVE CAROUSEL
========================================================= */


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

.msa-leadership {

    width: 100%;

    padding: 105px 20px;

    background: #EDE8E0;

    box-sizing: border-box;

    overflow: hidden;

}


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

.msa-leadership-header {

    width: 100%;

    max-width: 1260px;

    margin: 0 auto 48px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

}


.msa-leadership-heading {

    flex: 1;

}


.msa-leadership-eyebrow {

    position: relative;

    display: inline-block;

    margin-bottom: 16px;

    padding-left: 35px;

    color: #927113;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.8px;

}


.msa-leadership-eyebrow::before {

    content: "";

    position: absolute;

    left: 0;

    top: 50%;

    width: 24px;

    height: 2px;

    background: #D4AF37;

    transform: translateY(-50%);

}


.msa-leadership-heading h2 {

    margin: 0;

    color: #071A2D;

    font-size: clamp(38px, 5vw, 60px);

    line-height: 1.04;

    font-weight: 800;

    letter-spacing: -1.5px;

}


.msa-leadership-heading h2 span {

    color: #B28B1B;

}


.msa-leadership-intro {

    max-width: 430px;

    margin: 0;

    color: #53616C;

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   CAROUSEL
========================================================= */

.msa-carousel {

    position: relative;

    width: 100%;

    max-width: 1400px;

    height: 620px;

    margin: 0 auto;

    overflow: hidden;

    background: #071A2D;

    border-radius: 22px;

    box-shadow:
        0 30px 70px rgba(7,26,45,.16);

}


/* =========================================================
   SLIDE
========================================================= */

.msa-slide {

    position: absolute;

    inset: 0;

    display: grid;

    grid-template-columns: 62% 38%;

    opacity: 0;

    visibility: hidden;

    transform: translateX(35px);

    transition:
        opacity .65s ease,
        transform .65s ease,
        visibility .65s ease;

}


.msa-slide.active {

    opacity: 1;

    visibility: visible;

    transform: translateX(0);

}


/* =========================================================
   IMAGE
========================================================= */

.msa-slide-image {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

}


.msa-slide-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transform: scale(1.06);

    transition:
        transform 1.5s cubic-bezier(.2,.7,.2,1);

}


.msa-slide.active
.msa-slide-image img {

    transform: scale(1);

}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.msa-image-shade {

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(7,26,45,0) 65%,
            rgba(7,26,45,.16) 100%
        );

}


/* =========================================================
   CONTENT PANEL
========================================================= */

.msa-slide-content {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 50px;

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            #F9F6F0 0%,
            #EEE9E1 100%
        );

}


/* GOLD VERTICAL LINE */

.msa-slide-content::before {

    content: "";

    position: absolute;

    left: 0;

    top: 14%;

    width: 3px;

    height: 72%;

    background:
        linear-gradient(
            180deg,
            transparent,
            #D4AF37 20%,
            #D4AF37 80%,
            transparent
        );

}


/* =========================================================
   META
========================================================= */

.msa-slide-meta {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 24px;

}


.msa-slide-number {

    color: #B28B1B;

    font-size: 58px;

    font-weight: 800;

    line-height: .85;

    letter-spacing: -2px;

}


.msa-slide-category {

    color: #8D6E18;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.7px;

    line-height: 1.5;

}


/* =========================================================
   TITLE
========================================================= */

.msa-slide-content h3 {

    max-width: 500px;

    margin: 0 0 19px;

    color: #071A2D;

    font-size: clamp(29px, 3.2vw, 45px);

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -.7px;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.msa-slide-content p {

    max-width: 500px;

    margin: 0;

    color: #4D5B66;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   GOLD LINE
========================================================= */

.msa-content-line {

    width: 55px;

    height: 2px;

    margin-top: 27px;

    background: #D4AF37;

}


/* =========================================================
   MILESTONE
========================================================= */

.msa-milestone {

    margin-top: 12px;

    color: #7B858B;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.7px;

}


/* =========================================================
   PREMIUM ARROWS
========================================================= */

.msa-arrow {

    position: absolute;

    z-index: 50;

    top: 50%;

    width: 58px;

    height: 58px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(212,175,55,.8);

    border-radius: 50%;

    background: rgba(7,26,45,.9);

    color: #FFFFFF;

    cursor: pointer;

    transform: translateY(-50%);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    box-shadow:
        0 8px 25px rgba(7,26,45,.25);

    transition:
        all .35s cubic-bezier(.2,.7,.2,1);

}


.msa-prev {

    left: 25px;

}


.msa-next {

    right: 25px;

}


.msa-arrow-symbol {

    display: block;

    font-family: Arial, sans-serif;

    font-size: 36px;

    font-weight: 300;

    line-height: 1;

    margin-top: -4px;

    transition:
        transform .35s ease;

}


/* HOVER */

.msa-arrow:hover {

    background: #D4AF37;

    border-color: #D4AF37;

    color: #071A2D;

    transform:
        translateY(-50%)
        scale(1.1);

    box-shadow:
        0 12px 32px rgba(7,26,45,.3);

}


.msa-prev:hover
.msa-arrow-symbol {

    transform: translateX(-4px);

}


.msa-next:hover
.msa-arrow-symbol {

    transform: translateX(4px);

}


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

.msa-carousel-navigation {

    position: absolute;

    z-index: 60;

    left: 50px;

    right: 50px;

    bottom: 24px;

    display: flex;

    align-items: center;

    gap: 20px;

}


/* =========================================================
   NUMBER INDICATORS
========================================================= */

.msa-slide-indicators {

    display: flex;

    gap: 5px;

}


.msa-indicator {

    width: 39px;

    height: 27px;

    padding: 0;

    border: 1px solid rgba(7,26,45,.2);

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

    color: #071A2D;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;

    transition:
        all .3s ease;

}


.msa-indicator:hover {

    border-color: #D4AF37;

}


.msa-indicator.active {

    background: #D4AF37;

    border-color: #D4AF37;

    color: #071A2D;

}


/* =========================================================
   PROGRESS
========================================================= */

.msa-progress {

    flex: 1;

    height: 2px;

    overflow: hidden;

    background: rgba(7,26,45,.15);

}


.msa-progress-bar {

    width: 20%;

    height: 100%;

    background: #D4AF37;

    transition:
        width .5s ease;

}


/* =========================================================
   COUNTER
========================================================= */

.msa-counter {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #7B858B;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

}


.msa-current {

    color: #071A2D;

}


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

@media (max-width: 1000px) {

    .msa-leadership {

        padding: 80px 18px;

    }


    .msa-leadership-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

    }


    .msa-carousel {

        height: 570px;

    }


    .msa-slide {

        grid-template-columns: 55% 45%;

    }


    .msa-slide-content {

        padding: 40px;

    }


    .msa-slide-number {

        font-size: 48px;

    }


    .msa-slide-content h3 {

        font-size: 34px;

    }

}


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

@media (max-width: 650px) {

    .msa-leadership {

        padding: 65px 14px;

    }


    .msa-leadership-header {

        margin-bottom: 30px;

    }


    .msa-leadership-heading h2 {

        font-size: 34px;

        letter-spacing: -.8px;

    }


    .msa-leadership-intro {

        font-size: 14px;

    }


    .msa-carousel {

        height: 680px;

        border-radius: 16px;

    }


    .msa-slide {

        display: flex;

        flex-direction: column;

    }


    .msa-slide-image {

        width: 100%;

        height: 310px;

        flex-shrink: 0;

    }


    .msa-slide-content {

        width: 100%;

        flex: 1;

        padding: 28px 24px 85px;

        justify-content: flex-start;

    }


    .msa-slide-content::before {

        top: 0;

        left: 10%;

        width: 60px;

        height: 3px;

        background: #D4AF37;

    }


    .msa-slide-meta {

        margin-bottom: 14px;

        gap: 7px;

    }


    .msa-slide-number {

        font-size: 40px;

    }


    .msa-slide-category {

        font-size: 9px;

        letter-spacing: 1.3px;

    }


    .msa-slide-content h3 {

        margin-bottom: 12px;

        font-size: 27px;

        line-height: 1.12;

    }


    .msa-slide-content p {

        font-size: 13px;

        line-height: 1.65;

    }


    /* MOBILE ARROWS */

    .msa-arrow {

        top: 285px;

        width: 46px;

        height: 46px;

    }


    .msa-arrow-symbol {

        font-size: 30px;

    }


    .msa-prev {

        left: 14px;

    }


    .msa-next {

        right: 14px;

    }


    /* NAVIGATION */

    .msa-carousel-navigation {

        left: 24px;

        right: 24px;

        bottom: 20px;

        gap: 10px;

    }


    .msa-indicator {

        width: 28px;

        height: 25px;

        font-size: 8px;

    }


    .msa-counter {

        display: none;

    }

}


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

@media (max-width: 380px) {

    .msa-carousel {

        height: 700px;

    }


    .msa-slide-image {

        height: 270px;

    }


    .msa-slide-content {

        padding:
            25px
            20px
            85px;

    }


    .msa-slide-content h3 {

        font-size: 25px;

    }


    .msa-slide-content p {

        font-size: 12.5px;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0c0cb18 *//* =========================================================
   SECTION 7 — MEDIA & INTERVIEWS
========================================================= */

.sa-media {
    position: relative;
    width: 100%;
    padding: 105px 20px;
    background: #071A2D;
    overflow: hidden;
}


/* =========================================================
   BACKGROUND DECORATIONS
========================================================= */

.sa-media::before {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    top: -300px;
    right: -180px;

    border: 1px solid rgba(212, 175, 55, 0.10);
    border-radius: 50%;

    pointer-events: none;
}

.sa-media::after {
    content: "";
    position: absolute;

    width: 300px;
    height: 300px;

    bottom: -190px;
    left: -150px;

    background: rgba(212, 175, 55, 0.035);
    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.sa-media-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1120px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 0.9fr;

    gap: 90px;

    align-items: center;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.sa-media-content {
    max-width: 580px;
}


/* Section Label */

.sa-media-label {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 24px;

    color: #D4AF37;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.sa-media-label span {
    width: 35px;
    height: 2px;

    background: #D4AF37;
}


/* Heading */

.sa-media-content h2 {
    margin: 0 0 22px;

    color: #FFFFFF;

    font-size: clamp(42px, 5vw, 62px);

    line-height: 1.05;
    font-weight: 800;

    letter-spacing: -2px;
}

.sa-media-content h2 strong {
    color: #D4AF37;
    font-weight: 800;
}


/* Description */

.sa-media-content p {
    max-width: 530px;

    margin: 0 0 35px;

    color: rgba(255, 255, 255, 0.68);

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


/* =========================================================
   SEE ALL INTERVIEWS BUTTON
========================================================= */

.sa-media-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    padding: 14px 22px;

    color: #071A2D;
    background: #D4AF37;

    border: 1px solid #D4AF37;
    border-radius: 3px;

    text-decoration: none;

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

    letter-spacing: 0.5px;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}

.sa-media-btn span {
    font-size: 18px;
    line-height: 1;

    transition: transform 0.35s ease;
}

.sa-media-btn:hover {
    color: #D4AF37;
    background: transparent;

    transform: translateY(-3px);
}

.sa-media-btn:hover span {
    transform: translate(3px, -3px);
}


/* =========================================================
   RIGHT VIDEO AREA
========================================================= */

.sa-media-visual {
    position: relative;

    width: 100%;
    min-height: 350px;

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


/* =========================================================
   VIDEO CARD
========================================================= */

.sa-media-card {
    position: relative;

    width: 100%;
    max-width: 430px;

    min-height: 290px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 30px;

    background: #071A2D;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;

    overflow: hidden;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.28);

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


/* =========================================================
   VIDEO THUMBNAIL
========================================================= */

.sa-video-thumbnail {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 1;

    transition:
        transform 0.55s ease,
        filter 0.4s ease;
}


/* =========================================================
   VIDEO OVERLAY
========================================================= */

.sa-video-overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            to bottom,
            rgba(7, 26, 45, 0.12) 0%,
            rgba(7, 26, 45, 0.25) 35%,
            rgba(7, 26, 45, 0.94) 100%
        );

    pointer-events: none;
}


/* =========================================================
   GOLD TOP LINE
========================================================= */

.sa-media-card::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: #D4AF37;

    z-index: 5;
}


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

.sa-media-card .sa-play {
    position: absolute;

    top: 50%;
    left: 50%;

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

    z-index: 4;

    width: 68px;
    height: 68px;

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

    padding-left: 3px;

    color: #071A2D;
    background: #D4AF37;

    border-radius: 50%;

    text-decoration: none;

    font-size: 18px;
    line-height: 1;

    box-shadow:
        0 0 0 10px rgba(212, 175, 55, 0.13),
        0 10px 30px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}


/* =========================================================
   VIDEO TEXT
========================================================= */

.sa-media-card-text {
    position: relative;
    z-index: 4;
}


.sa-media-card-text span {
    display: block;

    margin-bottom: 8px;

    color: #D4AF37;

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

    letter-spacing: 1.7px;
    text-transform: uppercase;
}


.sa-media-card-text h3 {
    max-width: 340px;

    margin: 0;

    color: #FFFFFF;

    font-size: 22px;
    line-height: 1.35;

    font-weight: 700;
}


/* =========================================================
   VIDEO CARD HOVER
========================================================= */

.sa-media-card:hover {
    transform: translateY(-8px);

    border-color: rgba(212, 175, 55, 0.45);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.34);
}


.sa-media-card:hover .sa-video-thumbnail {
    transform: scale(1.05);

    filter: brightness(0.85);
}


.sa-media-card:hover .sa-play {
    transform: translate(-50%, -50%) scale(1.10);

    background: #E0BD45;

    box-shadow:
        0 0 0 15px rgba(212, 175, 55, 0.10),
        0 12px 35px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   DECORATIVE QUOTE
========================================================= */

.sa-media-mark {
    position: absolute;

    right: -5px;
    top: -35px;

    z-index: 1;

    color: rgba(212, 175, 55, 0.12);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 180px;
    line-height: 1;

    pointer-events: none;
}


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

@media (max-width: 850px) {

    .sa-media {
        padding: 80px 20px;
    }

    .sa-media-container {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .sa-media-content {
        max-width: 700px;
    }

    .sa-media-visual {
        width: 100%;
        max-width: 650px;

        min-height: 330px;

        margin: 0 auto;
    }

    .sa-media-card {
        max-width: 500px;

        margin: 0 auto;
    }
}


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

@media (max-width: 480px) {

    .sa-media {
        padding: 65px 18px;
    }


    /* Label */

    .sa-media-label {
        gap: 9px;

        font-size: 10px;
        letter-spacing: 1.8px;
    }

    .sa-media-label span {
        width: 25px;
    }


    /* Heading */

    .sa-media-content h2 {
        font-size: 38px;

        letter-spacing: -1.2px;
    }


    /* Paragraph */

    .sa-media-content p {
        margin-bottom: 28px;

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


    /* Button */

    .sa-media-btn {
        padding: 13px 18px;

        font-size: 12px;
    }


    /* Video */

    .sa-media-visual {
        min-height: 290px;
    }

    .sa-media-card {
        min-height: 250px;

        padding: 23px;
    }


    /* Video Label */

    .sa-media-card-text span {
        font-size: 9px;
        letter-spacing: 1.4px;
    }


    /* Video Title */

    .sa-media-card-text h3 {
        font-size: 19px;
        line-height: 1.4;
    }


    /* Play Button */

    .sa-media-card .sa-play {
        width: 58px;
        height: 58px;

        font-size: 16px;

        box-shadow:
            0 0 0 8px rgba(212, 175, 55, 0.13);
    }


    /* Quote */

    .sa-media-mark {
        top: -20px;

        font-size: 120px;
    }
}


/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
========================================================= */

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

    .sa-media-card,
    .sa-video-thumbnail,
    .sa-media-card .sa-play,
    .sa-media-btn,
    .sa-media-btn span {
        transition: none;
    }
}/* End custom CSS */