/* Hero Section */
.hero {
    margin-top: 80px;
    min-height: calc(100vh - 80px);
    padding: 120px 0 clamp(350px, 40vh, 550px);
    background: linear-gradient(
        178deg,
        #0f1217 6%,
        #1c2028 14%,
        #39424e 25%,
        #525c69 31%,
        #636d7b 35%,
        #7e8794 44%,
        #8a939f 49%,
        #9ba3ad 59%,
        #c8cdd3 80%,
        #e9ebef 95%
    );
    position: relative;
    overflow: hidden;
}

.hero .container {
    position: relative;
    z-index: 1;
    text-align: center;
}

.hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 56px;
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 20px;
    color: var(--white);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.arrow-separator {
    height: 1ex;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    margin: 0 8px;
}

.hero-subtitle {
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    font-weight: 500;
    color: var(--light-gray);
    margin-bottom: 52px;
    max-width: 700px;
    line-height: 1.3;
    margin-left: auto;
    margin-right: auto;
}

.hero-description {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 20px;
    max-width: 800px;
    line-height: 1.7;
    font-weight: 400;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: 16px;
    margin-top: 80px;
    margin-bottom: 80px;
    justify-content: center;
}

.cta-buttons a {
    min-width: 220px;
}

/* Trust Strip */
.trust-strip {
    text-align: center;
    padding: 40px 0;
    margin-top: 20px;
}

.trust-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--light-gray);
    margin-bottom: 32px;
    font-weight: 600;
}

.logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 56px;
    flex-wrap: wrap;
    margin-bottom: 32px;
    min-height: 50px;
}

.logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-text {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

.logo-text:hover {
    color: rgba(255, 255, 255, 1);
}

.trust-note {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.25);
    font-style: italic;
    margin-top: 32px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
    font-weight: 300;
}

/* What We Do Section with Wave Overlap */
.hero + .section-light {
    position: relative;
    margin-top: clamp(-400px, -48vh, -220px);
    padding-top: clamp(350px, calc(48vh + 60px), 550px);
    padding-bottom: clamp(150px, 20vh, 300px);
    overflow: hidden;
    background: transparent;
}


.hero + .section-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/backgrounds/wave backround dark.svg') no-repeat center top;
    background-size: cover;
    z-index: 0;
}

.hero + .section-light .container {
    position: relative;
    z-index: 1;
}

.hero + .section-light h2 {
    color: white;
}

.hero + .section-light .section-intro {
    color: var(--light-gray);
    font-size: 17px;
}

/* Contact Section */
.contact-section {
    position: relative;
    margin-top: clamp(-350px, -45vh, -200px);
    padding-top: clamp(250px, calc(45vh + 20px), 450px);
    padding-bottom: clamp(80px, 12vh, 150px);
    min-height: 600px;
    color: white;
    text-align: center;
    overflow: hidden;
    background: transparent;
    z-index: 8;
}

.contact-section::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100% + 10px);
    background: url('../images/backgrounds/wave backround dark.svg') no-repeat center top;
    background-size: cover;
    transform: scaleX(-1);
    z-index: 0;
}

.contact-section .container {
    position: relative;
    z-index: 1;
    max-width: 1000px;
}


.contact-section h2 {
    color: white;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 30px;
}

.contact-section .section-intro {
    all: unset;  /* Resets ALL inherited styles */

    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    font-weight: 400;
    color: var(--light-gray);
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.3;
    text-decoration: none;  /* Add this line */
}


/* Section with Wave Background */
.section-wave-bg {
    background: var(--white);
    position: relative;
    overflow: hidden;
    padding-top: 240px;
}

/* Industries Section with Wave Overlap */
#industries.section-wave-bg {
    margin-top: clamp(-100px, -15vh, -80px);
    padding-top: clamp(140px, calc(15vh + 40px), 240px);
    padding-bottom: clamp(150px, 20vh, 300px);
    background: transparent;
}

#industries.section-wave-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 0;
}

#industries.section-wave-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e6eaef;
    z-index: 1;
}

#industries.section-wave-bg .container {
    position: relative;
    z-index: 2;
    padding-top: 0;
}

#industries.section-wave-bg h2 {
    color: var(--dark);
}

#industries.section-wave-bg .section-intro {
    color: var(--gray);
    font-size: 20px;
}

/* Outcomes Section with Wave Overlap */
#industries + .section-light {
    position: relative;
    margin-top: clamp(-100px, -15vh, -80px);
    padding-top: clamp(160px, calc(15vh + 60px), 260px);
    padding-bottom: clamp(150px, 20vh, 300px);
    background: transparent;
    overflow: hidden;
    z-index: 3;
}

#industries + .section-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/backgrounds/background_rsn_dark gradient.svg') no-repeat center top;
    background-size: cover;
    transform: scaleY(-1);
    z-index: 0;
}

#industries + .section-light .container {
    position: relative;
    z-index: 1;
}

#industries + .section-light h2 {
    color: white;
}

#industries + .section-light .section-intro {
    color: var(--light-gray);
    font-size: 20px;
}

/* How We Work Section with Wave Overlap */
#process.section-wave-bg {
    position: relative;
    margin-top: 20px;
    padding-top: clamp(100px, 15vh, 180px);
    padding-bottom: clamp(200px, 30vh, 400px);
    background: transparent;
    z-index: 5;
}

#process.section-wave-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 3;
}

#process.section-wave-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/backgrounds/background_rsn_dark gradient.svg') no-repeat center top;
    background-size: cover;
    z-index: 4;
}

#process.section-wave-bg .container {
    position: relative;
    z-index: 5;
    padding-top: 0;
}

#process.section-wave-bg h2 {
    color: white;
}

#process.section-wave-bg .section-intro {
    color: var(--light-gray);
    font-size: 20px;
}

#process.section-wave-bg .step h3 {
    color: #2a2f33;
}

#process.section-wave-bg .step p {
    color: rgba(255, 255, 255, 0.75);
}

#process.section-wave-bg .step-number {
    display: none;
}


.section-wave-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/backgrounds/background_rsn_dark_wave.svg') no-repeat center;
    background-size: cover;
    z-index: 0;
}

.section-wave-bg-right::before {
    background: url('../images/backgrounds/background_rsn_dark_wave_right.svg') no-repeat center;
    background-size: cover;
}

.section-wave-bg .container {
    position: relative;
    z-index: 1;
    padding-top: 240px;
}

.section-wave-bg-right .container {
    padding-top: 120px;
}

/* Case Studies Section with Overlap */
#cases.section-light {
    position: relative;
    margin-top: clamp(-180px, -25vh, -120px);
    padding-top: clamp(240px, calc(25vh + 60px), 360px);
    padding-bottom: clamp(120px, 15vh, 220px);
    background: transparent;
    overflow: hidden;
    z-index: 6;
}

#cases.section-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/backgrounds/background rsn outcomes wave center.svg') no-repeat center top;
    background-size: cover;
    z-index: 0;
}

#cases.section-light .container {
    position: relative;
    z-index: 1;
}

#cases.section-light h2 {
    color: white;
}

#cases.section-light .section-intro {
    color: var(--light-gray);
    font-size: 20px;
}

/* Services Section */
#services.section-wave-bg {
    position: relative;
    background: transparent;
    padding-top: 0px;
    padding-bottom: clamp(400px, 50vh, 600px);
    z-index: 7;
}

#services.section-wave-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 0;
}

#services.section-wave-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e6eaef;
    z-index: 5;
}

#services.section-wave-bg .container {
    position: relative;
    z-index: 6;
}

#services.section-wave-bg h2 {
    color: var(--dark);
}

#services.section-wave-bg .section-intro {
    color: var(--gray);
    font-size: 20px;
}

/* Footer */
footer {
    background: var(--black);
    color: white;
    padding: 40px 0;
    text-align: center;
}

footer p {
    color: #94a3b8;
}

/* Ultra-wide Monitor Constraints */
@media (min-width: 1920px) {
    .hero {
        min-height: 900px;
        padding-bottom: 450px;
    }

    .hero + .section-light {
        margin-top: -350px;
        padding-top: 410px;
        padding-bottom: 250px;
    }

    #industries.section-wave-bg {
        margin-top: -90px;
        padding-top: 190px;
        padding-bottom: 250px;
    }

    #industries + .section-light {
        margin-top: -90px;
        padding-top: 210px;
        padding-bottom: 250px;
    }

    #process.section-wave-bg {
        padding-top: 150px;
        padding-bottom: 350px;
    }

    #cases.section-light {
        margin-top: -150px;
        padding-top: 300px;
        padding-bottom: 180px;
    }

    #services.section-wave-bg {
        padding-bottom: 550px;
    }

    .contact-section {
        margin-top: -300px;
        padding-top: 350px;
        padding-bottom: 120px;
        min-height: 700px;
    }
}