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

.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #faf9f5;
    color: #092a3d;
    overflow: hidden;
}


/* -----------------------------------------
   HERO INNER
----------------------------------------- */

.hero-inner {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 48% 52%;
    align-items: stretch;
}


/* -----------------------------------------
   HERO CONTENT
----------------------------------------- */

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 120px 8vw 80px 10vw;
}


/* -----------------------------------------
   EYEBROW
----------------------------------------- */

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;

    color: #0b5275;
}

.hero-eyebrow span {
    color: #d6a23a;
}


/* -----------------------------------------
   SMALL GOLD LINE
----------------------------------------- */

.hero-line {
    width: 48px;
    height: 1px;
    margin-bottom: 28px;
    background: #d6a23a;
}


/* -----------------------------------------
   HERO HEADING
----------------------------------------- */

.hero-content h1 {
    max-width: 650px;
    margin: 0 0 28px;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(58px, 6vw, 92px);
    font-weight: 400;
    line-height: 0.94;
    letter-spacing: -2px;

    color: #092a3d;
}

.hero-content h1 em {
    font-weight: 400;
    font-style: italic;
    color: #b8862c;
}


/* -----------------------------------------
   HERO DESCRIPTION
----------------------------------------- */

.hero-content p {
    max-width: 410px;
    margin: 0 0 35px;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;

    color: #52636c;
}


/* -----------------------------------------
   HERO BUTTON
----------------------------------------- */

.hero-button {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    width: fit-content;
    padding: 14px 0;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: #092a3d;
    text-decoration: none;

    border-bottom: 1px solid #d6a23a;

    transition:
        color 0.35s ease,
        gap 0.35s ease,
        border-color 0.35s ease;
}

.hero-button span {
    font-size: 17px;
    font-weight: 400;
    color: #d6a23a;

    transition: transform 0.35s ease;
}

.hero-button:hover {
    gap: 22px;
    color: #0b5275;
}

.hero-button:hover span {
    transform: translateX(4px);
}


/* -----------------------------------------
   HERO IMAGE
----------------------------------------- */

.hero-image {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: #0b5275;
}


/* Subtle gold accent behind image */

.hero-image::before {
    content: "";
    position: absolute;

    width: 180px;
    height: 180px;

    top: 10%;
    right: -70px;

    border: 1px solid rgba(214, 162, 58, 0.45);
    border-radius: 50%;

    z-index: 1;
}


/* Image */

.hero-image img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 1.2s ease;
}


/* -----------------------------------------
   SIDE TEXT
----------------------------------------- */

.hero-side-text {
    position: absolute;
    right: 28px;
    top: 50%;

    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    gap: 12px;

    writing-mode: vertical-rl;

    font-family: "Manrope", sans-serif;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 2px;

    color: #0b5275;

    z-index: 5;
}

.hero-side-text span:nth-child(2) {
    color: #d6a23a;
}


/* -----------------------------------------
   SCROLL INDICATOR
----------------------------------------- */

.hero-scroll {
    position: absolute;
    left: 10vw;
    bottom: 35px;

    display: flex;
    align-items: center;
    gap: 14px;

    z-index: 5;
}

.hero-scroll span {
    font-family: "Manrope", sans-serif;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 2px;

    color: #6b7b82;
}

.scroll-line {
    width: 55px;
    height: 1px;
    background: #d6a23a;
}


/* =========================================
   LARGE TABLETS
========================================= */

@media (max-width: 1100px) {

    .hero-inner {
        grid-template-columns: 45% 55%;
    }

    .hero-content {
        padding-left: 7vw;
        padding-right: 5vw;
    }

    .hero-content h1 {
        font-size: clamp(52px, 6vw, 75px);
    }

}


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

@media (max-width: 800px) {

    .hero {
        min-height: auto;
    }

    .hero-inner {
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .hero-content {
        min-height: 58vh;
        padding: 140px 8vw 70px;
    }

    .hero-content h1 {
        max-width: 600px;
        font-size: clamp(52px, 10vw, 72px);
    }

    .hero-image {
        height: 65vh;
        min-height: 500px;
    }

    .hero-side-text {
        display: none;
    }

    .hero-scroll {
        left: 8vw;
        bottom: 25px;
    }

}


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

@media (max-width: 500px) {

    .hero-content {
        min-height: 65vh;
        padding: 125px 7vw 60px;
    }

    .hero-eyebrow {
        gap: 7px;
        font-size: 8px;
        letter-spacing: 2px;
        flex-wrap: wrap;
    }

    .hero-line {
        width: 35px;
        margin-bottom: 22px;
    }

    .hero-content h1 {
        margin-bottom: 22px;
        font-size: clamp(46px, 13vw, 62px);
        line-height: 0.96;
        letter-spacing: -1px;
    }

    .hero-content p {
        max-width: 340px;
        font-size: 12px;
        line-height: 1.7;
        margin-bottom: 28px;
    }

    .hero-button {
        font-size: 8px;
        letter-spacing: 1.7px;
    }

    .hero-image {
        height: 58vh;
        min-height: 420px;
    }

    .hero-scroll {
        display: none;
    }

}

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

.site-header {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background: rgba(250, 249, 245, 0.94);

    border-bottom: 1px solid rgba(9, 42, 61, 0.08);

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

    transition:
        background 0.4s ease,
        border-color 0.4s ease,
        backdrop-filter 0.4s ease;
}


/* -----------------------------------------
   NAVIGATION INNER
----------------------------------------- */

.site-nav {
    width: 100%;
    height: 82px;

    padding: 0 5.5vw;

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


/* -----------------------------------------
   LOGO
----------------------------------------- */

.nav-logo {
    display: flex;
    flex-direction: column;

    width: 170px;

    text-decoration: none;

    color: #092a3d;
}

.nav-logo-name {
    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 23px;
    font-weight: 500;

    line-height: 0.9;
    letter-spacing: 1px;
}

.nav-logo-sub {
    margin-top: 7px;

    font-family: "Manrope", sans-serif;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 2.5px;

    color: #b8862c;
}


/* -----------------------------------------
   NAV LINKS
----------------------------------------- */

.nav-links {
    display: flex;
    align-items: center;

    gap: 38px;
}

.nav-link {
    position: relative;

    padding: 8px 0;

    font-family: "Manrope", sans-serif;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 1.8px;

    text-transform: uppercase;

    text-decoration: none;

    color: #092a3d;

    transition: color 0.3s ease;
}


/* Gold active line */

.nav-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background: #d6a23a;

    transition: width 0.3s ease;
}

.nav-link:hover {
    color: #0b5275;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}


/* -----------------------------------------
   CONTACT BUTTON
----------------------------------------- */

.nav-contact {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 11px 17px;

    font-family: "Manrope", sans-serif;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    text-decoration: none;

    color: #ffffff;

    background: #092a3d;

    border: 1px solid #092a3d;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.nav-contact span {
    font-size: 13px;
    font-weight: 400;

    color: #d6a23a;

    transition: transform 0.3s ease;
}

.nav-contact:hover {
    background: #0b5275;
    border-color: #0b5275;
}

.nav-contact:hover span {
    transform: translate(3px, -3px);
}


/* -----------------------------------------
   MOBILE MENU BUTTON
----------------------------------------- */

.nav-menu-button {
    display: none;

    width: 38px;
    height: 38px;

    padding: 0;

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

    flex-direction: column;

    gap: 6px;

    background: transparent;

    border: 0;

    cursor: pointer;
}

.nav-menu-button span {
    display: block;

    width: 22px;
    height: 1px;

    background: #092a3d;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}


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

@media (max-width: 900px) {

    .site-nav {
        height: 76px;

        padding: 0 6vw;
    }

    .nav-links {
        gap: 22px;
    }

    .nav-link {
        font-size: 8px;
        letter-spacing: 1.4px;
    }

    .nav-contact {
        padding: 10px 13px;

        font-size: 7px;
    }

}


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

@media (max-width: 700px) {

    .site-nav {
        height: 72px;

        padding: 0 7vw;
    }


    /* Logo */

    .nav-logo {
        width: auto;
    }

    .nav-logo-name {
        font-size: 21px;
    }

    .nav-logo-sub {
        font-size: 5px;
        letter-spacing: 2px;
    }


    /* Hide desktop navigation */

    .nav-links,
    .nav-contact {
        display: none;
    }


    /* Show hamburger */

    .nav-menu-button {
        display: flex;
    }

}


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

@media (max-width: 400px) {

    .site-nav {
        padding: 0 6vw;
    }

    .nav-logo-name {
        font-size: 19px;
    }

}

/* =========================================
   NAVBAR WIDTH FIX
========================================= */

.site-header,
.site-nav,
.site-nav * {
    box-sizing: border-box;
}

.site-nav {
    width: 100%;
}

/* =========================================
   ABOUT / THE WOMAN BEHIND THE VISION
========================================= */

.about-section {
    position: relative;
    width: 100%;
    padding: 150px 8vw 130px;

    background: #ffffff;
    color: #092a3d;

    overflow: hidden;
}


/* -----------------------------------------
   MAIN ABOUT CONTAINER
----------------------------------------- */

.about-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 46% 54%;
    align-items: center;

    gap: 9vw;
}


/* -----------------------------------------
   ABOUT IMAGE
----------------------------------------- */

.about-image {
    position: relative;

    width: 100%;
    height: 680px;

    overflow: hidden;

    background: #8fa9b5;
}

.about-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 1.2s ease;
}

.about-image:hover img {
    transform: scale(1.025);
}


/* -----------------------------------------
   IMAGE LABEL
----------------------------------------- */

.about-image-label {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;

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

    padding: 18px 22px;

    background: rgba(9, 42, 61, 0.88);

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

.about-image-label span {
    font-family: "Manrope", sans-serif;

    font-size: 7px;
    font-weight: 600;

    letter-spacing: 1.8px;

    text-transform: uppercase;

    color: #ffffff;
}

.about-image-label span:last-child {
    color: #e8c875;
}


/* -----------------------------------------
   ABOUT CONTENT
----------------------------------------- */

.about-content {
    max-width: 620px;

    padding-right: 3vw;
}


.about-eyebrow {
    display: block;

    margin-bottom: 20px;

    font-family: "Manrope", sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: #0b5275;
}


.about-line {
    width: 48px;
    height: 1px;

    margin-bottom: 28px;

    background: #d6a23a;
}


/* -----------------------------------------
   ABOUT HEADING
----------------------------------------- */

.about-content h2 {
    max-width: 600px;

    margin: 0 0 38px;

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: clamp(54px, 5.5vw, 82px);

    font-weight: 400;

    line-height: 0.94;

    letter-spacing: -2px;

    color: #092a3d;
}

.about-content h2 em {
    display: block;

    font-style: italic;
    font-weight: 400;

    color: #b8862c;
}


/* -----------------------------------------
   ABOUT TEXT
----------------------------------------- */

.about-text {
    max-width: 510px;
}

.about-text p {
    margin: 0 0 22px;

    font-family: "Manrope", sans-serif;

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

    line-height: 1.9;

    color: #52636c;
}

.about-text p:last-child {
    margin-bottom: 0;
}


/* -----------------------------------------
   HIGHLIGHT STATEMENT
----------------------------------------- */

.about-highlight {
    max-width: 430px;

    margin-top: 30px !important;

    padding-left: 22px;

    font-family: "Cormorant Garamond", Georgia, serif !important;

    font-size: 25px !important;
    font-weight: 500 !important;

    line-height: 1.25 !important;

    color: #092a3d !important;

    border-left: 1px solid #d6a23a;
}


/* -----------------------------------------
   ABOUT VALUES
----------------------------------------- */

.about-values {
    width: 100%;
    max-width: 1320px;

    margin: 110px auto 0;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid #e5e1dc;
}


/* -----------------------------------------
   INDIVIDUAL VALUE
----------------------------------------- */

.about-value {
    position: relative;

    min-height: 170px;

    padding: 30px 35px 25px 0;

    border-right: 1px solid #e5e1dc;
}

.about-value:not(:first-child) {
    padding-left: 35px;
}

.about-value:last-child {
    border-right: none;
}


.about-value-number {
    display: block;

    margin-bottom: 22px;

    font-family: "Manrope", sans-serif;

    font-size: 8px;
    font-weight: 600;

    letter-spacing: 2px;

    color: #b8862c;
}


.about-value h3 {
    margin: 0;

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: clamp(38px, 4vw, 58px);

    font-weight: 400;

    line-height: 1;

    letter-spacing: -1px;

    color: #092a3d;
}


.about-value-line {
    display: block;

    width: 35px;
    height: 1px;

    margin-top: 25px;

    background: #d6a23a;
}


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

@media (max-width: 1100px) {

    .about-section {
        padding: 120px 7vw 110px;
    }

    .about-container {
        gap: 6vw;
    }

    .about-image {
        height: 590px;
    }

    .about-content h2 {
        font-size: clamp(50px, 6vw, 70px);
    }

}


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

@media (max-width: 800px) {

    .about-section {
        padding: 110px 8vw 90px;
    }

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

        gap: 65px;
    }


    /* Image */

    .about-image {
        height: 620px;
    }


    /* Content */

    .about-content {
        max-width: 650px;
        padding-right: 0;
    }

    .about-content h2 {
        max-width: 600px;

        font-size: clamp(50px, 10vw, 72px);
    }


    /* Values */

    .about-values {
        margin-top: 80px;
    }

    .about-value h3 {
        font-size: clamp(34px, 6vw, 48px);
    }

}


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

@media (max-width: 500px) {

    .about-section {
        padding: 90px 7vw 75px;
    }


    /* Image */

    .about-image {
        height: 500px;
    }

    .about-image-label {
        flex-direction: column;
        align-items: flex-start;

        gap: 7px;

        padding: 15px 16px;
    }

    .about-image-label span {
        font-size: 6px;
        letter-spacing: 1.5px;
    }


    /* Content */

    .about-container {
        gap: 50px;
    }

    .about-eyebrow {
        font-size: 8px;
        letter-spacing: 2.2px;
    }

    .about-line {
        width: 35px;
        margin-bottom: 22px;
    }

    .about-content h2 {
        margin-bottom: 28px;

        font-size: clamp(45px, 13vw, 60px);

        line-height: 0.96;

        letter-spacing: -1px;
    }

    .about-text p {
        font-size: 12px;
        line-height: 1.8;
    }

    .about-highlight {
        padding-left: 17px;

        font-size: 22px !important;
    }


    /* Values */

    .about-values {
        margin-top: 65px;

        grid-template-columns: 1fr;

        border-top: 1px solid #e5e1dc;
    }

    .about-value,
    .about-value:not(:first-child) {
        min-height: auto;

        padding: 25px 0;

        border-right: none;
        border-bottom: 1px solid #e5e1dc;
    }

    .about-value:last-child {
        border-bottom: none;
    }

    .about-value-number {
        margin-bottom: 13px;
    }

    .about-value h3 {
        font-size: 43px;
    }

    .about-value-line {
        margin-top: 18px;
    }

}

/* =========================================
   ABOUT IMAGE LABEL — FINAL FIX
========================================= */

.about-image-label {
    box-sizing: border-box;

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

    gap: 25px;

    width: 100%;
}

.about-image-label span {
    min-width: 0;
    line-height: 1.4;
}

.about-image-label span:first-child {
    flex: 1;
}

.about-image-label span:last-child {
    flex: 1;
    min-width: 0;
    text-align: right;
    font-size: 6px;
    letter-spacing: 1.5px;
}

/* =========================================
   GLOBAL HORIZONTAL OVERFLOW FIX
========================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* =========================================
   NAVBAR OVERFLOW FIX
========================================= */

.site-header,
.site-nav {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}


/* =========================================
   ABOUT IMAGE LABEL OVERFLOW FIX
========================================= */

.about-image-label {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.about-image-label span {
    max-width: 100%;
}


/* =========================================
   ABOUT SECTION OVERFLOW FIX
========================================= */

.about-section,
.about-container,
.about-values {
    max-width: 100%;
}

/* =========================================
   HERO IMAGE — EDITORIAL BLEND
========================================= */

.hero-image::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background: linear-gradient(
        90deg,
        #faf9f5 0%,
        rgba(250, 249, 245, 0.96) 4%,
        rgba(250, 249, 245, 0.78) 9%,
        rgba(250, 249, 245, 0.48) 15%,
        rgba(250, 249, 245, 0.20) 23%,
        rgba(250, 249, 245, 0.05) 30%,
        transparent 38%
    );

    z-index: 2;
}

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

.journey-section {
    position: relative;

    width: 100%;

    padding: 160px 8vw 150px;


    color: #092a3d;

    overflow: hidden;
}


/* -----------------------------------------
   JOURNEY HEADER
----------------------------------------- */

.journey-header {
    width: 100%;
    max-width: 1320px;

    margin: 0 auto 110px;
}

.journey-eyebrow {
    display: block;

    margin-bottom: 20px;

    font-family: "Manrope", sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: #0b5275;
}

.journey-line {
    width: 48px;
    height: 1px;

    margin-bottom: 28px;

    background: #d6a23a;
}

.journey-header h2 {
    max-width: 700px;

    margin: 0;

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: clamp(58px, 6vw, 88px);

    font-weight: 400;

    line-height: 0.92;

    letter-spacing: -2px;

    color: #092a3d;
}

.journey-header h2 em {
    display: block;

    font-style: italic;
    font-weight: 400;

    color: #b8862c;
}


/* -----------------------------------------
   TIMELINE
----------------------------------------- */

.journey-timeline {
    position: relative;

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

    margin: 0 auto;
}


/* Vertical timeline line */

.journey-timeline::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 112px;

    width: 1px;

    background: #dcd7d0;
}


/* -----------------------------------------
   JOURNEY ITEM
----------------------------------------- */

.journey-item {
    position: relative;

    display: grid;

    grid-template-columns: 80px 65px minmax(0, 1fr);

    column-gap: 20px;

    min-height: 220px;

    padding-bottom: 55px;
}


/* -----------------------------------------
   NUMBER
----------------------------------------- */

.journey-number {
    padding-top: 4px;

    font-family: "Manrope", sans-serif;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 2px;

    color: #b8862c;

    text-align: right;
}


/* -----------------------------------------
   TIMELINE MARKER
----------------------------------------- */

.journey-marker {
    position: relative;

    display: flex;

    justify-content: center;

    z-index: 2;
}

.journey-marker span {
    display: block;

    width: 9px;
    height: 9px;

    margin-top: 4px;

    border: 2px solid #d6a23a;

    border-radius: 50%;

    background: #faf9f5;
}


/* -----------------------------------------
   JOURNEY CONTENT
----------------------------------------- */

.journey-content {
    max-width: 600px;

    padding-bottom: 25px;
}

.journey-category {
    display: block;

    margin-bottom: 13px;

    font-family: "Manrope", sans-serif;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 2.5px;

    color: #0b5275;
}

.journey-content h3 {
    margin: 0 0 14px;

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: clamp(34px, 3.5vw, 48px);

    font-weight: 400;

    line-height: 1;

    letter-spacing: -0.8px;

    color: #092a3d;
}

.journey-content p {
    max-width: 520px;

    margin: 0;

    font-family: "Manrope", sans-serif;

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

    line-height: 1.85;

    color: #52636c;
}


/* -----------------------------------------
   FINAL ITEM
----------------------------------------- */

.journey-final {
    min-height: auto;

    padding-bottom: 0;
}


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

@media (max-width: 1100px) {

    .journey-section {
        padding: 130px 7vw 120px;
    }

    .journey-header {
        margin-bottom: 85px;
    }

    .journey-timeline::before {
        left: 92px;
    }

    .journey-item {
        grid-template-columns: 65px 55px minmax(0, 1fr);

        column-gap: 15px;
    }

}


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

@media (max-width: 800px) {

    .journey-section {
        padding: 110px 8vw 100px;
    }

    .journey-header {
        margin-bottom: 70px;
    }

    .journey-header h2 {
        font-size: clamp(50px, 10vw, 72px);
    }

    .journey-timeline::before {
        left: 51px;
    }

    .journey-item {
        grid-template-columns: 35px 32px minmax(0, 1fr);

        column-gap: 12px;

        min-height: 200px;

        padding-bottom: 45px;
    }

    .journey-number {
        font-size: 7px;
        letter-spacing: 1.5px;
    }

    .journey-marker span {
        width: 8px;
        height: 8px;
    }

    .journey-content h3 {
        font-size: clamp(32px, 6vw, 44px);
    }

}


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

@media (max-width: 500px) {

    .journey-section {
        padding: 90px 7vw 80px;
    }

    .journey-header {
        margin-bottom: 60px;
    }

    .journey-eyebrow {
        font-size: 8px;
        letter-spacing: 2.2px;
    }

    .journey-line {
        width: 35px;

        margin-bottom: 22px;
    }

    .journey-header h2 {
        font-size: clamp(45px, 13vw, 60px);

        line-height: 0.96;

        letter-spacing: -1px;
    }


    /* Timeline */

    .journey-timeline::before {
        left: 24px;
    }

    .journey-item {
        grid-template-columns: 18px 28px minmax(0, 1fr);

        column-gap: 7px;

        min-height: auto;

        padding-bottom: 48px;
    }

    .journey-number {
        display: none;
    }

    .journey-marker span {
        width: 8px;
        height: 8px;
    }


    /* Content */

    .journey-category {
        margin-bottom: 10px;

        font-size: 7px;

        letter-spacing: 1.8px;

        line-height: 1.5;
    }

    .journey-content h3 {
        margin-bottom: 12px;

        font-size: 34px;

        line-height: 0.98;
    }

    .journey-content p {
        font-size: 11px;

        line-height: 1.8;
    }

}

/* =========================================
   ABOUT / JOURNEY DIVIDER
========================================= */

.about-journey-divider {
    position: relative;

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

    display: flex;
    align-items: center;

    background: #092a3d;

    overflow: hidden;
}


/* -----------------------------------------
   SUBTLE GOLD ACCENT
----------------------------------------- */

.about-journey-divider::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background: #d6a23a;
}


/* -----------------------------------------
   DIVIDER INNER
----------------------------------------- */

.divider-inner {
    width: 100%;
    max-width: 1320px;

    margin: 0 auto;

    padding: 0 8vw;

    display: flex;
    align-items: center;

    gap: 16px;

    font-family: "Manrope", sans-serif;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 3px;

    color: #ffffff;
}


/* -----------------------------------------
   DOTS
----------------------------------------- */

.divider-inner i {
    font-style: normal;

    color: #d6a23a;

    font-size: 11px;
}


/* -----------------------------------------
   SEPARATOR LINE
----------------------------------------- */

.divider-line {
    width: 70px;
    height: 1px;

    margin: 0 12px;

    background: rgba(232, 200, 117, 0.65);
}


/* -----------------------------------------
   STATEMENT
----------------------------------------- */

.divider-statement {
    color: #e8c875;

    font-size: 7px;

    letter-spacing: 2.5px;
}


/* =========================================
   JOURNEY COLOR ADJUSTMENT
========================================= */

.journey-section {
    background: #f3f0eb;
}


/* Give the timeline a slightly stronger contrast */

.journey-timeline::before {
    background: #cfd4d3;
}


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

@media (max-width: 800px) {

    .about-journey-divider {
        min-height: 90px;
    }

    .divider-inner {
        padding: 0 8vw;

        gap: 10px;

        flex-wrap: wrap;

        font-size: 7px;

        letter-spacing: 2px;
    }

    .divider-line {
        width: 45px;

        margin: 0 5px;
    }

    .divider-statement {
        font-size: 6px;

        letter-spacing: 2px;
    }

}


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

@media (max-width: 500px) {

    .about-journey-divider {
        min-height: 115px;
    }

    .divider-inner {
        padding: 0 7vw;

        gap: 8px;

        font-size: 7px;

        letter-spacing: 1.8px;
    }

    .divider-inner i {
        font-size: 9px;
    }

    .divider-line {
        width: 35px;

        margin: 0 3px;
    }

    .divider-statement {
        width: 100%;

        margin-top: 5px;

        font-size: 6px;

        letter-spacing: 1.8px;
    }

}

/* =========================================
   HER VISION IN ACTION
========================================= */

.vision-section {
    position: relative;

    width: 100%;

    padding: 160px 8vw 130px;

    background: #ffffff;

    color: #092a3d;

    overflow: hidden;
}


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

.vision-header {
    width: 100%;
    max-width: 1320px;

    margin: 0 auto 90px;
}

.vision-eyebrow {
    display: block;

    margin-bottom: 20px;

    font-family: "Manrope", sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: #0b5275;
}

.vision-line {
    width: 48px;
    height: 1px;

    margin-bottom: 28px;

    background: #d6a23a;
}

.vision-header h2 {
    max-width: 720px;

    margin: 0 0 28px;

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: clamp(58px, 6vw, 88px);

    font-weight: 400;

    line-height: 0.92;

    letter-spacing: -2px;

    color: #092a3d;
}

.vision-header h2 em {
    display: block;

    font-style: italic;
    font-weight: 400;

    color: #b8862c;
}

.vision-header p {
    max-width: 470px;

    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: 12px;

    line-height: 1.85;

    color: #52636c;
}


/* =========================================
   VISION GRID
========================================= */

.vision-grid {
    width: 100%;
    max-width: 1320px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 26px;
}


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

.vision-card {
    position: relative;

    min-width: 0;

    background: #f3f0eb;

    overflow: hidden;
}


/* -----------------------------------------
   CARD IMAGE
----------------------------------------- */

.vision-card-image {
    width: 100%;

    height: 430px;

    overflow: hidden;

    background: #8fa9b5;
}

.vision-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 1s ease;
}

.vision-card:hover .vision-card-image img {
    transform: scale(1.035);
}


/* =========================================
   CARD CONTENT
========================================= */

.vision-card-content {
    position: relative;

    padding: 34px 35px 38px;
}

.vision-card-number {
    display: block;

    margin-bottom: 15px;

    font-family: "Manrope", sans-serif;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 2px;

    color: #b8862c;
}

.vision-card-category {
    display: block;

    margin-bottom: 13px;

    font-family: "Manrope", sans-serif;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 2.5px;

    color: #0b5275;
}

.vision-card h3 {
    max-width: 430px;

    margin: 0 0 15px;

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: clamp(38px, 4vw, 54px);

    font-weight: 400;

    line-height: 0.95;

    letter-spacing: -1px;

    color: #092a3d;
}

.vision-card h3 em {
    font-style: italic;

    font-weight: 400;

    color: #b8862c;
}

.vision-card p {
    max-width: 430px;

    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: 11px;

    line-height: 1.8;

    color: #52636c;
}


/* -----------------------------------------
   CARD ARROW
----------------------------------------- */

.vision-card-arrow {
    position: absolute;

    right: 35px;
    bottom: 35px;

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 26px;

    color: #d6a23a;

    transition: transform 0.35s ease;
}

.vision-card:hover .vision-card-arrow {
    transform: translateX(6px);
}


/* =========================================
   BLUE CARD
========================================= */

.vision-card-blue {
    display: flex;
    align-items: flex-end;

    min-height: 610px;

    background: #092a3d;
}

.vision-card-blue .vision-card-content {
    width: 100%;

    padding: 55px 45px;
}

.vision-card-blue .vision-card-number {
    color: #e8c875;
}

.vision-card-blue .vision-card-category {
    color: #8fa9b5;
}

.vision-card-blue h3 {
    color: #ffffff;
}

.vision-card-blue h3 em {
    color: #e8c875;
}

.vision-card-blue p {
    color: rgba(255, 255, 255, 0.68);
}

.vision-card-blue .vision-card-arrow {
    color: #e8c875;
}


/* =========================================
   FOOTER LINE
========================================= */

.vision-footer {
    width: 100%;
    max-width: 1320px;

    margin: 80px auto 0;

    padding-top: 22px;

    border-top: 1px solid #ded9d2;

    display: flex;
    align-items: center;

    gap: 25px;

    font-family: "Manrope", sans-serif;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #0b5275;
}

.vision-footer div {
    width: 60px;
    height: 1px;

    background: #d6a23a;
}

.vision-footer span:last-child {
    color: #b8862c;
}


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

@media (max-width: 1100px) {

    .vision-section {
        padding: 130px 7vw 110px;
    }

    .vision-header {
        margin-bottom: 75px;
    }

    .vision-card-image {
        height: 360px;
    }

    .vision-card-blue {
        min-height: 540px;
    }

}


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

@media (max-width: 800px) {

    .vision-section {
        padding: 110px 8vw 95px;
    }

    .vision-header {
        margin-bottom: 65px;
    }

    .vision-header h2 {
        font-size: clamp(50px, 10vw, 72px);
    }

    .vision-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .vision-card-image {
        height: 500px;
    }

    .vision-card-blue {
        min-height: 500px;
    }

}


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

@media (max-width: 500px) {

    .vision-section {
        padding: 90px 7vw 75px;
    }

    .vision-header {
        margin-bottom: 55px;
    }

    .vision-eyebrow {
        font-size: 8px;

        letter-spacing: 2.2px;
    }

    .vision-line {
        width: 35px;

        margin-bottom: 22px;
    }

    .vision-header h2 {
        margin-bottom: 22px;

        font-size: clamp(45px, 13vw, 60px);

        line-height: 0.96;

        letter-spacing: -1px;
    }

    .vision-header p {
        font-size: 11px;

        line-height: 1.8;
    }


    /* Cards */

    .vision-grid {
        gap: 16px;
    }

    .vision-card-image {
        height: 390px;
    }

    .vision-card-content {
        padding: 27px 23px 32px;
    }

    .vision-card h3 {
        font-size: 38px;
    }

    .vision-card p {
        font-size: 10px;
    }

    .vision-card-arrow {
        right: 23px;
        bottom: 28px;
    }

    .vision-card-blue {
        min-height: 430px;
    }

    .vision-card-blue .vision-card-content {
        padding: 35px 23px;
    }


    /* Footer */

    .vision-footer {
        margin-top: 55px;

        flex-wrap: wrap;

        gap: 10px;

        line-height: 1.5;
    }

    .vision-footer div {
        display: none;
    }

}

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

.impact-section {
    position: relative;

    width: 100%;

    padding: 160px 8vw 120px;

    background: #092a3d;

    color: #ffffff;

    overflow: hidden;
}


/* =========================================
   SUBTLE BACKGROUND ACCENT
========================================= */

.impact-section::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

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

    border: 1px solid rgba(214, 162, 58, 0.18);

    border-radius: 50%;

    pointer-events: none;
}

.impact-section::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    left: -160px;
    bottom: 80px;

    border: 1px solid rgba(143, 169, 181, 0.12);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================
   TOP AREA
========================================= */

.impact-top {
    position: relative;
    z-index: 2;

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

    margin: 0 auto 105px;

    display: grid;

    grid-template-columns: 1.25fr 0.75fr;

    gap: 80px;

    align-items: end;
}


/* =========================================
   HEADING
========================================= */

.impact-eyebrow {
    display: block;

    margin-bottom: 20px;

    font-family: "Manrope", sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 3px;

    color: #8fa9b5;
}

.impact-line {
    width: 48px;
    height: 1px;

    margin-bottom: 28px;

    background: #d6a23a;
}

.impact-heading h2 {
    max-width: 720px;

    margin: 0;

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: clamp(62px, 7vw, 100px);

    font-weight: 400;

    line-height: 0.88;

    letter-spacing: -2px;

    color: #ffffff;
}

.impact-heading h2 em {
    font-style: italic;

    color: #e8c875;
}


/* =========================================
   INTRO
========================================= */

.impact-intro {
    padding-bottom: 5px;
}

.impact-intro p {
    max-width: 360px;

    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: 12px;

    line-height: 1.9;

    color: rgba(255, 255, 255, 0.62);
}


/* =========================================
   IMPACT GRID
========================================= */

.impact-grid {
    position: relative;
    z-index: 2;

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

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    border-top: 1px solid rgba(255, 255, 255, 0.16);

    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}


/* =========================================
   IMPACT ITEM
========================================= */

.impact-item {
    position: relative;

    min-height: 340px;

    padding: 32px 30px 40px;

    border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.impact-item:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.impact-item:last-child {
    border-right: none;
}


/* -----------------------------------------
   NUMBER
----------------------------------------- */

.impact-number {
    display: block;

    font-family: "Manrope", sans-serif;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 2px;

    color: #e8c875;
}


/* -----------------------------------------
   PLUS
----------------------------------------- */

.impact-icon {
    margin-top: 55px;

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 48px;

    font-weight: 300;

    line-height: 1;

    color: #d6a23a;
}


/* -----------------------------------------
   TITLE
----------------------------------------- */

.impact-item h3 {
    margin: 20px 0 14px;

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 38px;

    font-weight: 400;

    line-height: 1;

    color: #ffffff;
}


/* -----------------------------------------
   DESCRIPTION
----------------------------------------- */

.impact-item p {
    max-width: 240px;

    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: 10px;

    line-height: 1.8;

    color: rgba(255, 255, 255, 0.55);
}


/* =========================================
   IMPACT STATEMENT
========================================= */

.impact-statement {
    position: relative;
    z-index: 2;

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

    margin: 105px auto 0;

    display: grid;

    grid-template-columns: 180px minmax(0, 700px);

    gap: 70px;

    align-items: start;
}

.impact-statement-label {
    padding-top: 9px;

    font-family: "Manrope", sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 3px;

    color: #8fa9b5;
}

.impact-statement p {
    margin: 0;

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: clamp(34px, 4vw, 52px);

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -0.8px;

    color: #ffffff;
}

.impact-statement p em {
    font-style: italic;

    color: #e8c875;
}


/* =========================================
   IMPACT FOOTER
========================================= */

.impact-footer {
    position: relative;
    z-index: 2;

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

    margin: 100px auto 0;

    padding-top: 22px;

    border-top: 1px solid rgba(255, 255, 255, 0.16);

    display: flex;

    align-items: center;

    gap: 14px;

    font-family: "Manrope", sans-serif;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 2.5px;

    color: #8fa9b5;
}

.impact-footer i {
    font-style: normal;

    color: #d6a23a;
}

.impact-footer span:last-child {
    color: #e8c875;
}


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

@media (max-width: 1100px) {

    .impact-section {
        padding: 130px 7vw 105px;
    }

    .impact-top {
        grid-template-columns: 1fr 0.65fr;

        gap: 50px;

        margin-bottom: 80px;
    }

    .impact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .impact-item:nth-child(2) {
        border-right: none;
    }

    .impact-item:nth-child(3),
    .impact-item:nth-child(4) {
        border-top: 1px solid rgba(255, 255, 255, 0.16);
    }

    .impact-statement {
        margin-top: 80px;
    }

}


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

@media (max-width: 800px) {

    .impact-section {
        padding: 110px 8vw 90px;
    }

    .impact-top {
        grid-template-columns: 1fr;

        gap: 35px;

        margin-bottom: 65px;
    }

    .impact-heading h2 {
        font-size: clamp(54px, 11vw, 78px);
    }

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

    .impact-item {
        min-height: 300px;

        padding: 28px 22px 35px;
    }

    .impact-icon {
        margin-top: 45px;
    }

    .impact-statement {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-top: 70px;
    }

}


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

@media (max-width: 500px) {

    .impact-section {
        padding: 90px 7vw 75px;
    }

    .impact-top {
        margin-bottom: 55px;
    }

    .impact-eyebrow {
        font-size: 8px;

        letter-spacing: 2.2px;
    }

    .impact-line {
        width: 35px;

        margin-bottom: 22px;
    }

    .impact-heading h2 {
        font-size: clamp(46px, 13vw, 62px);

        line-height: 0.94;

        letter-spacing: -1px;
    }

    .impact-intro p {
        font-size: 11px;

        line-height: 1.8;
    }


    /* Grid */

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

    .impact-item,
    .impact-item:nth-child(3),
    .impact-item:nth-child(4) {
        min-height: 250px;

        border-left: 1px solid rgba(255, 255, 255, 0.16);

        border-right: 1px solid rgba(255, 255, 255, 0.16);

        border-top: 1px solid rgba(255, 255, 255, 0.16);
    }

    .impact-item:first-child {
        border-top: none;
    }

    .impact-item:last-child {
        border-bottom: none;
    }

    .impact-icon {
        margin-top: 35px;

        font-size: 40px;
    }

    .impact-item h3 {
        font-size: 34px;
    }

    .impact-item p {
        font-size: 10px;
    }


    /* Statement */

    .impact-statement {
        margin-top: 60px;

        gap: 16px;
    }

    .impact-statement-label {
        font-size: 7px;
    }

    .impact-statement p {
        font-size: 34px;

        line-height: 1;
    }


    /* Footer */

    .impact-footer {
        margin-top: 65px;

        flex-wrap: wrap;

        line-height: 1.6;
    }

}

/* =========================================================
   NEW PRIMARY COLOR DIRECTION
   Deep Navy becomes the main website color
========================================================= */

:root {
    --primary-blue: #092A3D;
    --ocean-blue: #0B5275;
    --rich-blue: #146B91;
    --soft-blue: #8FA9B5;

    --gold: #D6A23A;
    --light-gold: #E8C875;

    --warm-white: #FAF9F5;
    --pure-white: #FFFFFF;

    --dark-text: #10232D;
}


/* =========================================================
   GLOBAL
========================================================= */

html,
body {
    background: var(--primary-blue);
    color: var(--pure-white);
}


/* =========================================================
   HERO
   Make the opening section deep navy
========================================================= */

.hero {
    background: var(--primary-blue);
    color: var(--pure-white);
}

.hero h1 {
    color: var(--pure-white);
}

.hero h1 em {
    color: var(--light-gold);
}

.hero-eyebrow {
    color: var(--soft-blue);
}

.hero-line {
    background: var(--gold);
}

.hero-content p {
    color: rgba(255, 255, 255, 0.68);
}

.hero-button {
    color: var(--pure-white);
    border-color: rgba(255, 255, 255, 0.35);
}

.hero-button:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--primary-blue);
}

.hero-side-text {
    color: var(--soft-blue);
}

.hero-scroll {
    color: var(--soft-blue);
}

.scroll-line {
    background: var(--gold);
}


/* =========================================================
   HERO IMAGE BLEND
========================================================= */

.hero-image::after {
    background: linear-gradient(
        90deg,
        #092A3D 0%,
        rgba(9, 42, 61, 0.96) 5%,
        rgba(9, 42, 61, 0.80) 11%,
        rgba(9, 42, 61, 0.52) 18%,
        rgba(9, 42, 61, 0.22) 27%,
        rgba(9, 42, 61, 0.05) 36%,
        transparent 45%
    );
}


/* =========================================================
   ABOUT
   Keep About light so the page can breathe
========================================================= */

.about-section {
    background: var(--warm-white);
    color: var(--dark-text);
}

.about-section h2,
.about-section h3 {
    color: var(--primary-blue);
}

.about-section p {
    color: rgba(16, 35, 45, 0.70);
}

.about-section em {
    color: var(--ocean-blue);
}

.about-eyebrow {
    color: var(--ocean-blue);
}

.about-line {
    background: var(--gold);
}


/* =========================================================
   ABOUT / JOURNEY DIVIDER
========================================================= */

.about-journey-divider {
    background: var(--primary-blue);
}

.about-journey-divider .divider-line {
    background: rgba(255, 255, 255, 0.18);
}

.about-journey-divider span {
    color: var(--soft-blue);
}

.about-journey-divider i {
    color: var(--gold);
}

.about-journey-divider .divider-statement {
    color: var(--light-gold);
}


/* =========================================================
   JOURNEY
   Deep navy primary section
========================================================= */

.journey-section {
    background: var(--primary-blue);
    color: var(--pure-white);
}

.journey-section h2 {
    color: var(--pure-white);
}

.journey-section h2 em {
    color: var(--light-gold);
}

.journey-eyebrow {
    color: var(--soft-blue);
}

.journey-line {
    background: var(--gold);
}

.journey-section p {
    color: rgba(255, 255, 255, 0.62);
}


/* Timeline */

.journey-timeline {
    border-color: rgba(255, 255, 255, 0.16);
}

.journey-item {
    border-color: rgba(255, 255, 255, 0.16);
}

.journey-number {
    color: var(--light-gold);
}

.journey-dot {
    background: var(--gold);
    border-color: var(--primary-blue);
}

.journey-item h3 {
    color: var(--pure-white);
}

.journey-item p {
    color: rgba(255, 255, 255, 0.55);
}


/* =========================================================
   IMPACT
   Already navy — just reinforce the palette
========================================================= */

.impact-section {
    background: var(--primary-blue);
}

.impact-heading h2 {
    color: var(--pure-white);
}

.impact-heading h2 em {
    color: var(--light-gold);
}

.impact-eyebrow {
    color: var(--soft-blue);
}

.impact-line {
    background: var(--gold);
}

.impact-item h3 {
    color: var(--pure-white);
}

.impact-number {
    color: var(--light-gold);
}

.impact-icon {
    color: var(--gold);
}

.impact-statement p {
    color: var(--pure-white);
}

.impact-statement p em {
    color: var(--light-gold);
}


/* =========================================================
   LINKS / GOLD ACCENTS
========================================================= */

a {
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease;
}


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

@media (max-width: 800px) {

    .hero {
        background: var(--primary-blue);
    }

    .hero-image::after {
        background: linear-gradient(
            180deg,
            rgba(9, 42, 61, 0) 45%,
            rgba(9, 42, 61, 0.35) 65%,
            rgba(9, 42, 61, 0.88) 100%
        );
    }

}

/* =========================================================
   NAVBAR + ABOUT SECTION
   DEEP NAVY PRIMARY COLOR
========================================================= */


/* =========================================================
   NAVBAR
========================================================= */

header,
.navbar,
.site-header,
nav {
    background: #092A3D;
    color: #FFFFFF;
}


/* Navbar links */

nav a,
.navbar a,
.nav-links a {
    color: rgba(255, 255, 255, 0.82);
}

nav a:hover,
.navbar a:hover,
.nav-links a:hover {
    color: #E8C875;
}


/* Active/current link */

nav a.active,
.navbar a.active,
.nav-links a.active {
    color: #E8C875;
}


/* Navbar logo */

.navbar-logo,
.logo {
    color: #FFFFFF;
}


/* If the logo is an image */

.navbar-logo img,
.logo img {
    display: block;
}


/* Navbar border */

header,
.navbar,
.site-header {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}


/* Hamburger */

.menu-toggle,
.hamburger,
.nav-toggle {
    color: #FFFFFF;
}

.menu-toggle span,
.hamburger span,
.nav-toggle span {
    background: #FFFFFF;
}


/* =========================================================
   ABOUT SECTION
   Deep Navy background
========================================================= */

.about-section {
    position: relative;
    background: #092A3D;
    color: #FFFFFF;
}


/* About heading */

.about-section h1,
.about-section h2,
.about-section h3 {
    color: #FFFFFF;
}


/* About italic/emphasis */

.about-section h1 em,
.about-section h2 em,
.about-section h3 em {
    color: #E8C875;
}


/* About body text */

.about-section p {
    color: rgba(255, 255, 255, 0.68);
}


/* About small labels */

.about-eyebrow,
.about-label,
.about-kicker {
    color: #8FA9B5;
}


/* About decorative line */

.about-line {
    background: #D6A23A;
}


/* About links/buttons */

.about-section a {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.35);
}

.about-section a:hover {
    color: #092A3D;
    background: #D6A23A;
    border-color: #D6A23A;
}


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

.about-image {
    position: relative;
}


/* Image label */

.about-image-label {
    background: #092A3D;
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.16);
}

.about-image-label span {
    color: #8FA9B5;
}

.about-image-label span:last-child {
    color: #E8C875;
}


/* =========================================================
   ABOUT DECORATIVE ELEMENTS
========================================================= */

.about-section::before {
    border-color: rgba(214, 162, 58, 0.16);
}

.about-section::after {
    border-color: rgba(143, 169, 181, 0.10);
}


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

@media (max-width: 800px) {

    .about-section {
        background: #092A3D;
    }

    .about-section p {
        color: rgba(255, 255, 255, 0.65);
    }

    .about-image-label {
        background: #092A3D;
    }

}

/* =========================================================
   FINAL COLOR DIRECTION
   PRIMARY  → DEEP NAVY
   SUPPORT  → BRIGHT BLUE
   ACCENT   → GOLD
========================================================= */

:root {
    --primary-blue: #092A3D;
    --deep-blue: #063B63;

    /* NEW BLUE — supporting color */
    --support-blue: #0B82E3;
    --rich-blue: #146B91;
    --soft-blue: #8FA9B5;

    --gold: #D6A23A;
    --light-gold: #E8C875;

    --warm-white: #FAF9F5;
    --white: #FFFFFF;

    --dark-text: #10232D;
}


/* =========================================================
   GLOBAL
========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background: var(--warm-white);
    color: var(--dark-text);
}


/* =========================================================
   NAVBAR
   PRIMARY DEEP NAVY
========================================================= */

header,
.navbar,
.site-header,
nav {
    background: var(--primary-blue);
    color: var(--white);
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

nav a,
.navbar a,
.nav-links a {
    color: rgba(255, 255, 255, 0.86);
}

nav a:hover,
.navbar a:hover,
.nav-links a:hover {
    color: var(--support-blue);
}

nav a.active,
.navbar a.active,
.nav-links a.active {
    color: var(--support-blue);
}

.logo,
.navbar-logo {
    color: var(--white);
}

.menu-toggle,
.hamburger,
.nav-toggle {
    color: var(--white);
}

.menu-toggle span,
.hamburger span,
.nav-toggle span {
    background: var(--white);
}


/* =========================================================
   HERO
   PRIMARY DEEP NAVY
========================================================= */

.hero {
    background: var(--primary-blue);
    color: var(--white);
}

.hero h1 {
    color: var(--white);
}

.hero h1 em {
    color: var(--support-blue);
}

.hero-eyebrow {
    color: var(--soft-blue);
}

.hero-eyebrow span {
    color: var(--support-blue);
}

.hero-line {
    background: var(--gold);
}

.hero-content p {
    color: rgba(255, 255, 255, 0.68);
}

.hero-button {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.35);
}

.hero-button:hover {
    background: var(--support-blue);
    border-color: var(--support-blue);
    color: var(--white);
}

.hero-side-text {
    color: rgba(255, 255, 255, 0.52);
}

.hero-scroll {
    color: rgba(255, 255, 255, 0.55);
}

.scroll-line {
    background: var(--support-blue);
}


/* =========================================================
   HERO IMAGE BLEND
========================================================= */

.hero-image {
    position: relative;
    overflow: hidden;
}

.hero-image::after {
    background: linear-gradient(
        90deg,
        #092A3D 0%,
        rgba(9, 42, 61, 0.96) 5%,
        rgba(9, 42, 61, 0.82) 11%,
        rgba(9, 42, 61, 0.55) 18%,
        rgba(9, 42, 61, 0.25) 27%,
        rgba(9, 42, 61, 0.06) 36%,
        transparent 45%
    );
}


/* =========================================================
   ABOUT
   LIGHT CONTRAST SECTION
========================================================= */

.about-section {
    background: var(--warm-white);
    color: var(--dark-text);
}

.about-section h1,
.about-section h2,
.about-section h3 {
    color: var(--primary-blue);
}

.about-section h1 em,
.about-section h2 em,
.about-section h3 em {
    color: var(--support-blue);
}

.about-section p {
    color: rgba(16, 35, 45, 0.70);
}

.about-eyebrow,
.about-label,
.about-kicker {
    color: var(--support-blue);
}

.about-line {
    background: var(--gold);
}

.about-section a {
    color: var(--primary-blue);
    border-color: rgba(9, 42, 61, 0.30);
}

.about-section a:hover {
    background: var(--support-blue);
    border-color: var(--support-blue);
    color: var(--white);
}


/* =========================================================
   ABOUT IMAGE LABEL
========================================================= */

.about-image-label {
    background: var(--primary-blue);
    color: var(--white);
}

.about-image-label span {
    color: var(--soft-blue);
}

.about-image-label span:last-child {
    color: var(--support-blue);
}


/* =========================================================
   ABOUT → JOURNEY DIVIDER
========================================================= */

.about-journey-divider {
    background: var(--primary-blue);
}

.about-journey-divider .divider-line {
    background: rgba(255, 255, 255, 0.18);
}

.about-journey-divider span {
    color: var(--soft-blue);
}

.about-journey-divider i {
    color: var(--support-blue);
}

.about-journey-divider .divider-statement {
    color: var(--white);
}


/* =========================================================
   JOURNEY
   DEEP NAVY
========================================================= */

.journey-section {
    background: var(--primary-blue);
    color: var(--white);
}

.journey-section h2 {
    color: var(--white);
}

.journey-section h2 em {
    color: var(--support-blue);
}

.journey-eyebrow {
    color: var(--soft-blue);
}

.journey-line {
    background: var(--gold);
}

.journey-section p {
    color: rgba(255, 255, 255, 0.62);
}

.journey-timeline {
    border-color: rgba(255, 255, 255, 0.15);
}

.journey-item {
    border-color: rgba(255, 255, 255, 0.15);
}

.journey-number {
    color: var(--support-blue);
}

.journey-dot {
    background: var(--support-blue);
    border-color: var(--primary-blue);
}

.journey-item h3 {
    color: var(--white);
}

.journey-item p {
    color: rgba(255, 255, 255, 0.55);
}


/* =========================================================
   IMPACT
   DEEP NAVY PRIMARY
========================================================= */

.impact-section {
    background: var(--primary-blue);
    color: var(--white);
}

.impact-heading h2 {
    color: var(--white);
}

.impact-heading h2 em {
    color: var(--support-blue);
}

.impact-eyebrow {
    color: var(--soft-blue);
}

.impact-line {
    background: var(--gold);
}

.impact-intro p {
    color: rgba(255, 255, 255, 0.64);
}

.impact-number {
    color: var(--support-blue);
}

.impact-icon {
    color: var(--gold);
}

.impact-item h3 {
    color: var(--white);
}

.impact-item p {
    color: rgba(255, 255, 255, 0.56);
}

.impact-statement-label {
    color: var(--soft-blue);
}

.impact-statement p {
    color: var(--white);
}

.impact-statement p em {
    color: var(--support-blue);
}

.impact-footer {
    color: var(--soft-blue);
}

.impact-footer i {
    color: var(--support-blue);
}

.impact-footer span:last-child {
    color: var(--support-blue);
}


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

@media (max-width: 800px) {

    .hero {
        background: var(--primary-blue);
    }

    .hero-image::after {
        background: linear-gradient(
            180deg,
            rgba(9, 42, 61, 0) 40%,
            rgba(9, 42, 61, 0.35) 62%,
            rgba(9, 42, 61, 0.92) 100%
        );
    }

    .about-section {
        background: var(--warm-white);
    }

    .journey-section {
        background: var(--primary-blue);
    }

    .impact-section {
        background: var(--primary-blue);
    }
}

/* =========================================================
   ABOUT IMAGE — SOFTER EDITORIAL FADE
========================================================= */

.about-image {
    position: relative;
    background: #FAF9F5;
    overflow: visible;
}

.about-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    -webkit-mask-image: radial-gradient(
        ellipse 65% 68% at 50% 45%,
        #000 28%,
        rgba(0, 0, 0, 0.96) 42%,
        rgba(0, 0, 0, 0.78) 56%,
        rgba(0, 0, 0, 0.45) 70%,
        rgba(0, 0, 0, 0.16) 84%,
        transparent 100%
    );

    mask-image: radial-gradient(
        ellipse 65% 68% at 50% 45%,
        #000 28%,
        rgba(0, 0, 0, 0.96) 42%,
        rgba(0, 0, 0, 0.78) 56%,
        rgba(0, 0, 0, 0.45) 70%,
        rgba(0, 0, 0, 0.16) 84%,
        transparent 100%
    );
}

/* =========================================================
   IMPACT ACCORDION — FINAL OVERRIDE
========================================================= */

.impact-item {
    cursor: pointer;
    position: relative;
}

/* Hidden dropdown */
.impact-item .impact-dropdown {
    height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;

    transition:
        height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s ease,
        margin-top 0.55s ease,
        padding-top 0.55s ease;
}

/* Dropdown text */
.impact-item .impact-dropdown p {
    margin: 0;
}

/* Open state */
.impact-item.is-open .impact-dropdown {
    margin-top: 25px;
    padding-top: 24px;
    opacity: 1;
}

/* Plus icon */
.impact-item .impact-icon {
    transition:
        transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.3s ease;
}

/* Rotate + into × */
.impact-item.is-open .impact-icon {
    transform: rotate(45deg);
    color: #0B82E3;
}

/* Keep dropdown hidden when closed */
.impact-item:not(.is-open) .impact-dropdown {
    opacity: 0;
}

/* Mobile */
@media (max-width: 500px) {

    .impact-item.is-open .impact-dropdown {
        margin-top: 20px;
        padding-top: 20px;
    }

}

/* =========================================================
   GLOBAL BODY TEXT — SLIGHTLY LARGER
   DOES NOT AFFECT HEADINGS OR NAVBAR
========================================================= */

/* General paragraph text */
p {
    font-size: 1.05rem;
    line-height: 1.75;
}

/* Hero body text */
.hero-content p {
    font-size: 1.05rem;
    line-height: 1.8;
}

/* About body text */
.about-text p {
    font-size: 1.05rem;
    line-height: 1.8;
}

/* Journey body text */
.journey-content p {
    font-size: 1.05rem;
    line-height: 1.8;
}

/* Vision body text */
.vision-header p,
.vision-card-content p {
    font-size: 1.05rem;
    line-height: 1.8;
}

/* Impact body text */
.impact-intro p,
.impact-dropdown p,
.impact-statement p {
    font-size: 1.05rem;
    line-height: 1.8;
}

/* Mobile readability */
@media (max-width: 700px) {

    .hero-content p,
    .about-text p,
    .journey-content p,
    .vision-header p,
    .vision-card-content p,
    .impact-intro p,
    .impact-dropdown p,
    .impact-statement p {
        font-size: 1rem;
        line-height: 1.75;
    }

}

/* =========================================================
   STORIES / GALLERY SECTION
========================================================= */

.stories-section {
    position: relative;
    width: 100%;
    background: #FAF9F5;
    color: #092A3D;
    padding: 130px 7% 120px;
    overflow: hidden;
}

.stories-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}


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

.stories-header {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 90px;
}

.stories-heading {
    position: relative;
}

.stories-eyebrow {
    display: block;
    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 4px;
    color: #0B82E3;
    margin-bottom: 18px;
}

.stories-line {
    width: 55px;
    height: 1px;
    background: #D6A23A;
    margin-bottom: 25px;
}

.stories-heading h2 {
    margin: 0;
    max-width: 600px;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(58px, 7vw, 100px);
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: -2px;
    color: #092A3D;
}

.stories-heading h2 em {
    font-style: italic;
    color: #0B82E3;
}

.stories-intro {
    padding-bottom: 5px;
}

.stories-intro p {
    max-width: 390px;
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.9;
    color: #52636C;
}


/* =========================================================
   GALLERY LAYOUT
========================================================= */

.stories-gallery {
    position: relative;
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    grid-template-rows: auto auto;
    column-gap: 55px;
    row-gap: 100px;
    align-items: start;
}


/* =========================================================
   STORY CARDS
========================================================= */

.story {
    position: relative;
    min-width: 0;
}

.story-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #E9E5DF;
}

.story-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}


/* =========================================================
   INDIVIDUAL IMAGE SIZES
========================================================= */

.story-featured {
    grid-column: 1;
    grid-row: 1;
}

.story-featured .story-image {
    height: 650px;
}


.story-secondary {
    grid-column: 2;
    grid-row: 1;
    margin-top: 120px;
}

.story-secondary .story-image {
    height: 460px;
}


.story-tertiary {
    grid-column: 2;
    grid-row: 2;
    margin-top: -15px;
}

.story-tertiary .story-image {
    height: 520px;
}


.story-fourth {
    grid-column: 1;
    grid-row: 2;
    margin-top: -45px;
    padding-right: 90px;
}

.story-fourth .story-image {
    height: 430px;
}


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

.story:hover .story-image img {
    transform: scale(1.045);
}


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

.story-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 22px 24px;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(9, 42, 61, 0.35) 0%,
            rgba(9, 42, 61, 0) 25%
        );

    color: #FFFFFF;
}

.story-overlay > span:first-child {
    font-family: "Cormorant Garamond", serif;
    font-size: 25px;
    font-weight: 500;
}

.story-category {
    font-family: "Manrope", sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2.5px;
    padding-top: 7px;
}


/* =========================================================
   STORY CAPTION
========================================================= */

.story-caption {
    padding-top: 23px;
    max-width: 430px;
}

.story-caption > span {
    display: block;
    font-family: "Manrope", sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #0B82E3;
    margin-bottom: 10px;
}

.story-caption h3 {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-size: 31px;
    font-weight: 500;
    line-height: 1.05;
    color: #092A3D;
}


/* =========================================================
   FEATURED CAPTION
========================================================= */

.story-featured .story-caption {
    max-width: 520px;
}

.story-featured .story-caption h3 {
    font-size: 38px;
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.stories-bottom {
    margin-top: 125px;
}

.stories-bottom-line {
    width: 100%;
    height: 1px;
    background: rgba(9, 42, 61, 0.18);
    margin-bottom: 35px;
}

.stories-bottom-content {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 60px;
    align-items: start;
}

.stories-bottom-content > span {
    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #0B82E3;
}

.stories-bottom-content p {
    max-width: 650px;
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(28px, 3.2vw, 45px);
    font-weight: 400;
    line-height: 1.08;
    color: #092A3D;
}

.stories-bottom-content p em {
    font-style: italic;
    color: #0B82E3;
}


/* =========================================================
   SUBTLE DECORATIVE DETAIL
========================================================= */

.stories-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -250px;
    top: 80px;
    border: 1px solid rgba(11, 130, 227, 0.10);
    border-radius: 50%;
    pointer-events: none;
}

.stories-section::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    left: -150px;
    bottom: 180px;
    border: 1px solid rgba(214, 162, 58, 0.12);
    border-radius: 50%;
    pointer-events: none;
}


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

@media (max-width: 900px) {

    .stories-section {
        padding: 100px 6% 90px;
    }

    .stories-header {
        grid-template-columns: 1fr;
        gap: 35px;
        margin-bottom: 65px;
    }

    .stories-heading h2 {
        font-size: clamp(58px, 11vw, 82px);
    }

    .stories-intro p {
        max-width: 500px;
        font-size: 14px;
    }

    .stories-gallery {
        grid-template-columns: 1fr 1fr;
        column-gap: 25px;
        row-gap: 70px;
    }

    .story-secondary {
        margin-top: 70px;
    }

    .story-featured .story-image {
        height: 500px;
    }

    .story-secondary .story-image {
        height: 370px;
    }

    .story-tertiary .story-image {
        height: 420px;
    }

    .story-fourth {
        padding-right: 30px;
        margin-top: -20px;
    }

    .story-fourth .story-image {
        height: 350px;
    }

    .story-featured .story-caption h3 {
        font-size: 34px;
    }

    .story-caption h3 {
        font-size: 28px;
    }

    .stories-bottom {
        margin-top: 90px;
    }

    .stories-bottom-content {
        grid-template-columns: 1fr 2fr;
        gap: 35px;
    }

}


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

@media (max-width: 600px) {

    .stories-section {
        padding: 80px 6% 75px;
    }

    .stories-header {
        gap: 28px;
        margin-bottom: 55px;
    }

    .stories-eyebrow {
        font-size: 9px;
        letter-spacing: 3px;
        margin-bottom: 15px;
    }

    .stories-line {
        width: 45px;
        margin-bottom: 20px;
    }

    .stories-heading h2 {
        font-size: clamp(52px, 15vw, 72px);
        line-height: 0.9;
        letter-spacing: -1px;
    }

    .stories-intro p {
        font-size: 13px;
        line-height: 1.8;
    }


    /* -----------------------------------------
       MOBILE GALLERY
    ----------------------------------------- */

    .stories-gallery {
        display: flex;
        flex-direction: column;
        gap: 65px;
    }

    .story-featured,
    .story-secondary,
    .story-tertiary,
    .story-fourth {
        width: 100%;
        margin: 0;
        padding: 0;
    }


    /* Featured */

    .story-featured .story-image {
        height: 470px;
    }


    /* Second */

    .story-secondary {
        padding-left: 10%;
    }

    .story-secondary .story-image {
        height: 390px;
    }


    /* Third */

    .story-tertiary {
        padding-right: 8%;
    }

    .story-tertiary .story-image {
        height: 420px;
    }


    /* Fourth */

    .story-fourth {
        padding-left: 5%;
    }

    .story-fourth .story-image {
        height: 350px;
    }


    /* Captions */

    .story-caption {
        padding-top: 18px;
    }

    .story-caption > span {
        font-size: 7px;
        letter-spacing: 2.5px;
        margin-bottom: 8px;
    }

    .story-caption h3,
    .story-featured .story-caption h3 {
        font-size: 28px;
        line-height: 1.05;
    }


    /* Overlay */

    .story-overlay {
        padding: 16px 17px;
    }

    .story-overlay > span:first-child {
        font-size: 21px;
    }

    .story-category {
        font-size: 7px;
        letter-spacing: 2px;
    }


    /* Bottom statement */

    .stories-bottom {
        margin-top: 80px;
    }

    .stories-bottom-line {
        margin-bottom: 25px;
    }

    .stories-bottom-content {
        display: block;
    }

    .stories-bottom-content > span {
        display: block;
        margin-bottom: 20px;
    }

    .stories-bottom-content p {
        font-size: 31px;
        line-height: 1.08;
    }

}


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

@media (max-width: 380px) {

    .stories-section {
        padding-left: 5%;
        padding-right: 5%;
    }

    .stories-heading h2 {
        font-size: 50px;
    }

    .story-featured .story-image {
        height: 420px;
    }

    .story-secondary {
        padding-left: 5%;
    }

    .story-secondary .story-image {
        height: 350px;
    }

    .story-tertiary {
        padding-right: 4%;
    }

    .story-tertiary .story-image {
        height: 370px;
    }

    .story-fourth {
        padding-left: 3%;
    }

    .story-fourth .story-image {
        height: 320px;
    }

    .story-caption h3,
    .story-featured .story-caption h3 {
        font-size: 25px;
    }

    .stories-bottom-content p {
        font-size: 28px;
    }

}

/* =========================================================
   MATTE BLURRY GLASS NAVBAR
   ========================================================= */

.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;

    /* THIS is the matte glass color */
    background: rgba(9, 42, 61, 0.62) !important;

    /* Makes the content underneath visible + blurry */
    backdrop-filter: blur(18px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(115%) !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;

    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.10) !important;
}

/* Remove any solid background sitting inside the navbar */
.site-nav {
    background: transparent !important;
}

/* Very subtle matte layer */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(255, 255, 255, 0.035);

    pointer-events: none;
}

/* Keep navbar contents above the glass layer */
.site-nav {
    position: relative;
    z-index: 2;
}

/* Logo */
.nav-logo,
.nav-logo-name {
    color: #FFFFFF !important;
}

.nav-logo-sub {
    color: #D6A23A !important;
}

/* Navigation text */
.nav-link {
    color: rgba(255, 255, 255, 0.90) !important;
}

.nav-link:hover,
.nav-link.active {
    color: #0B82E3 !important;
}

/* Gold underline */
.nav-link::after {
    background: #D6A23A !important;
}

/* Get in touch button */
.nav-contact {
    background: rgba(9, 42, 61, 0.50) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    border-radius: 6px !important;
    color: #FFFFFF !important;

    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.nav-contact:hover {
    background: rgba(11, 130, 227, 0.30) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}

/* Hamburger */
.nav-menu-button span {
    background: #FFFFFF !important;
}

/* =========================================================
   PROSPERITY DIANA OJESEBHOLO
   VISION DETAIL PAGE
   ========================================================= */

.pdo-detail-page {
    width: 100%;
    min-height: 100vh;
    background: #FAF9F5;
    color: #10232D;
}

.pdo-detail-variant {
    display: none;
    width: 100%;
}

.pdo-detail-variant.pdo-detail-active {
    display: block;
}


/* =========================================================
   HERO
   ========================================================= */

.pdo-detail-hero {
    min-height: 92vh;
    padding: 150px 7vw 80px;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 7vw;

    background: #FAF9F5;
}

.pdo-detail-hero-content {
    max-width: 650px;
}

.pdo-detail-eyebrow {
    display: block;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 4px;
    color: #0B82E3;

    margin-bottom: 18px;
}

.pdo-detail-line {
    width: 55px;
    height: 1px;
    background: #D6A23A;

    margin-bottom: 30px;
}

.pdo-detail-hero h1 {
    margin: 0;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(58px, 6.2vw, 105px);
    font-weight: 500;
    line-height: 0.88;
    letter-spacing: -2px;
    color: #092A3D;
}

.pdo-detail-hero h1 em {
    display: block;
    color: #0B82E3;
    font-style: italic;
    font-weight: 400;
}

.pdo-detail-tagline {
    max-width: 440px;

    margin: 35px 0 0;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    line-height: 1.8;
    font-weight: 400;
    color: #10232D;
}

.pdo-detail-hero-image {
    width: 100%;
    height: min(650px, 68vh);

    position: relative;
    overflow: hidden;

    background: #E9E5DD;
}


/* =========================================================
   IMAGE PLACEHOLDER
   Replace the placeholder div with your real image later.
   ========================================================= */

.pdo-image-placeholder {
    width: 100%;
    height: 100%;

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

    background:
        linear-gradient(
            135deg,
            rgba(9, 42, 61, 0.08),
            rgba(11, 130, 227, 0.06)
        );

    color: #092A3D;
    text-align: center;
}

.pdo-image-placeholder span {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 48px;
    font-weight: 500;
    letter-spacing: 2px;
}

.pdo-image-placeholder small {
    margin-top: 8px;

    font-family: "Manrope", sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 3px;
}


/* =========================================================
   INTRO
   ========================================================= */

.pdo-detail-intro {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding: 120px 6vw 130px;

    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 7vw;
}

.pdo-detail-intro-label {
    padding-top: 8px;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;

    color: #0B82E3;
}

.pdo-detail-intro-text {
    max-width: 790px;
}

.pdo-detail-intro-text p,
.pdo-detail-story-body p,
.pdo-detail-feature-content p,
.pdo-detail-editorial-block p,
.pdo-detail-final-inner p {
    margin: 0 0 24px;

    font-family: "Manrope", sans-serif;
    font-size: 15px;
    line-height: 1.95;
    font-weight: 400;
    color: #34434B;
}

.pdo-detail-intro-text p:first-child {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 31px;
    line-height: 1.35;
    color: #092A3D;
}


/* =========================================================
   STORY
   ========================================================= */

.pdo-detail-story {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding: 110px 6vw;

    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 8vw;

    border-top: 1px solid rgba(9, 42, 61, 0.12);
}

.pdo-detail-story-heading {
    align-self: start;
    position: sticky;
    top: 130px;
}

.pdo-detail-story-heading span,
.pdo-detail-editorial-block > span {
    display: block;

    margin-bottom: 18px;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #D6A23A;
}

.pdo-detail-story-heading h2,
.pdo-detail-editorial-block h2,
.pdo-detail-feature-content h2 {
    margin: 0;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(38px, 4vw, 60px);
    line-height: 0.98;
    font-weight: 500;
    letter-spacing: -1px;
    color: #092A3D;
}

.pdo-detail-story-heading h2 em,
.pdo-detail-editorial-block h2 em,
.pdo-detail-feature-content h2 em {
    color: #0B82E3;
    font-style: italic;
    font-weight: 400;
}

.pdo-detail-story-body {
    max-width: 700px;
}

.pdo-detail-story-body blockquote,
.pdo-detail-editorial-block blockquote {
    margin: 35px 0;
    padding-left: 25px;

    border-left: 2px solid #D6A23A;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 30px;
    line-height: 1.3;
    font-style: italic;
    color: #092A3D;
}


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

.pdo-detail-feature {
    width: 100%;

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

    background: #092A3D;
    color: #FFFFFF;
}

.pdo-detail-feature-image {
    min-height: 650px;
}

.pdo-detail-feature-content {
    padding: 100px 8vw;

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

    max-width: 750px;
}

.pdo-detail-feature-content h2 {
    color: #FFFFFF;
    margin-bottom: 42px;
}

.pdo-detail-feature-content p {
    color: rgba(255, 255, 255, 0.78);
}

.pdo-detail-feature-content .pdo-detail-section-number {
    display: block;

    margin-bottom: 20px;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #D6A23A;
}

.pdo-detail-feature-reverse .pdo-detail-feature-content {
    order: 1;
}

.pdo-detail-feature-reverse .pdo-detail-feature-image {
    order: 2;
}


/* =========================================================
   EDITORIAL TWO-COLUMN CONTENT
   ========================================================= */

.pdo-detail-editorial {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding: 130px 6vw;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8vw;
}

.pdo-detail-editorial-single {
    grid-template-columns: 1fr;
}

.pdo-detail-editorial-block {
    max-width: 550px;
}

.pdo-detail-editorial-block h2 {
    margin-bottom: 40px;
}

.pdo-detail-highlight {
    margin: 35px 0 !important;

    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 30px !important;
    line-height: 1.3 !important;

    color: #0B82E3 !important;
}


/* =========================================================
   FINAL NAVY SECTION
   ========================================================= */

.pdo-detail-final {
    width: 100%;

    padding: 130px 7vw 150px;

    background: #092A3D;
    color: #FFFFFF;
}

.pdo-detail-final-inner {
    max-width: 900px;
    margin: 0 auto;
}

.pdo-detail-final-inner > span {
    display: block;

    margin-bottom: 25px;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 4px;
    color: #D6A23A;
}

.pdo-detail-final-inner h2 {
    margin: 0 0 55px;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(48px, 6vw, 85px);
    line-height: 0.92;
    font-weight: 500;
    letter-spacing: -2px;
    color: #FFFFFF;
}

.pdo-detail-final-inner h2 em {
    color: #0B82E3;
    font-style: italic;
    font-weight: 400;
}

.pdo-detail-final-inner p {
    color: rgba(255, 255, 255, 0.75);
    max-width: 700px;
}

.pdo-detail-final-inner blockquote {
    margin: 50px 0;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 38px;
    line-height: 1.25;
    font-style: italic;
    color: #FFFFFF;
}

.pdo-detail-final-words {
    margin-bottom: 8px !important;

    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 32px !important;
    line-height: 1.1 !important;

    color: #FFFFFF !important;
}

.pdo-detail-highlight-light {
    margin: 45px 0 !important;

    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 32px !important;
    font-style: italic;

    color: #D6A23A !important;
}


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

@media (max-width: 900px) {

    .pdo-detail-hero {
        grid-template-columns: 1fr;
        gap: 55px;

        padding: 140px 7vw 80px;
    }

    .pdo-detail-hero-image {
        height: 600px;
    }

    .pdo-detail-intro {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .pdo-detail-story {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .pdo-detail-story-heading {
        position: static;
    }

    .pdo-detail-feature {
        grid-template-columns: 1fr;
    }

    .pdo-detail-feature-image {
        min-height: 550px;
    }

    .pdo-detail-feature-content {
        padding: 85px 8vw;
    }

    .pdo-detail-feature-reverse .pdo-detail-feature-content,
    .pdo-detail-feature-reverse .pdo-detail-feature-image {
        order: initial;
    }

    .pdo-detail-editorial {
        grid-template-columns: 1fr;
        gap: 80px;
    }

}


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

@media (max-width: 600px) {

    .pdo-detail-hero {
        min-height: auto;

        padding: 125px 6vw 65px;

        gap: 45px;
    }

    .pdo-detail-eyebrow {
        font-size: 8px;
        letter-spacing: 3px;
    }

    .pdo-detail-hero h1 {
        font-size: clamp(50px, 15vw, 75px);
        letter-spacing: -1.5px;
    }

    .pdo-detail-tagline {
        font-size: 13px;
        line-height: 1.75;
        margin-top: 28px;
    }

    .pdo-detail-hero-image {
        height: 480px;
    }

    .pdo-detail-intro,
    .pdo-detail-story,
    .pdo-detail-editorial {
        padding-left: 6vw;
        padding-right: 6vw;
    }

    .pdo-detail-intro {
        padding-top: 75px;
        padding-bottom: 80px;
    }

    .pdo-detail-intro-text p:first-child {
        font-size: 26px;
    }

    .pdo-detail-intro-text p,
    .pdo-detail-story-body p,
    .pdo-detail-feature-content p,
    .pdo-detail-editorial-block p,
    .pdo-detail-final-inner p {
        font-size: 14px;
        line-height: 1.85;
    }

    .pdo-detail-story {
        padding-top: 75px;
        padding-bottom: 80px;
        gap: 45px;
    }

    .pdo-detail-story-heading h2,
    .pdo-detail-editorial-block h2,
    .pdo-detail-feature-content h2 {
        font-size: 42px;
    }

    .pdo-detail-story-body blockquote,
    .pdo-detail-editorial-block blockquote {
        font-size: 26px;
        margin: 30px 0;
    }

    .pdo-detail-feature-image {
        min-height: 430px;
    }

    .pdo-detail-feature-content {
        padding: 70px 7vw;
    }

    .pdo-detail-editorial {
        padding-top: 80px;
        padding-bottom: 85px;
        gap: 65px;
    }

    .pdo-detail-highlight {
        font-size: 27px !important;
    }

    .pdo-detail-final {
        padding: 85px 7vw 100px;
    }

    .pdo-detail-final-inner h2 {
        font-size: 52px;
        margin-bottom: 40px;
    }

    .pdo-detail-final-inner blockquote {
        font-size: 29px;
        margin: 35px 0;
    }

    .pdo-detail-final-words {
        font-size: 27px !important;
    }

    .pdo-detail-highlight-light {
        font-size: 28px !important;
    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 400px) {

    .pdo-detail-hero {
        padding-top: 115px;
    }

    .pdo-detail-hero h1 {
        font-size: 48px;
    }

    .pdo-detail-hero-image {
        height: 400px;
    }

    .pdo-detail-feature-image {
        min-height: 380px;
    }

    .pdo-detail-story-heading h2,
    .pdo-detail-editorial-block h2,
    .pdo-detail-feature-content h2 {
        font-size: 37px;
    }

}

/* =========================================================
   SUBTLE GLOBAL SMOOTH SCROLL
   ========================================================= */

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}


/* =========================================================
   PROSPERITY DIANA OJESEBHOLO
   JOURNAL / BLOG PAGE
========================================================= */


/* =========================================================
   PAGE BASE
========================================================= */

.journal-page {
    width: 100%;
    background: #FAF9F5;
    color: #10232D;
    overflow: hidden;
}


/* =========================================================
   JOURNAL HERO
========================================================= */

.journal-hero {
    position: relative;
    min-height: 82vh;
    padding: 170px 7vw 100px;

    display: flex;
    align-items: center;

    background: #FAF9F5;
}

.journal-hero-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 80px;
}

.journal-hero-content {
    max-width: 850px;
}

.journal-eyebrow {
    display: block;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 4px;

    color: #0B82E3;

    margin-bottom: 18px;
}

.journal-line {
    width: 55px;
    height: 1px;

    background: #D6A23A;

    margin-bottom: 28px;
}

.journal-hero h1 {
    margin: 0;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(60px, 8vw, 120px);
    line-height: .87;
    font-weight: 500;
    letter-spacing: -3px;

    color: #092A3D;
}

.journal-hero h1 em {
    display: block;

    color: #0B82E3;

    font-style: italic;
    font-weight: 400;
}

.journal-hero-content p {
    max-width: 560px;

    margin: 38px 0 0;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    line-height: 1.9;

    color: #52636C;
}

.journal-hero-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;

    padding-bottom: 12px;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;

    color: #092A3D;
}

.journal-hero-side-line {
    width: 1px;
    height: 75px;

    background: #D6A23A;
}


/* =========================================================
   FEATURED ARTICLE
========================================================= */

.journal-featured-section {
    max-width: 1250px;
    margin: 0 auto;

    padding: 100px 5vw 130px;
}

.journal-section-label {
    margin-bottom: 35px;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 4px;

    color: #0B82E3;
}

.journal-featured-card {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    min-height: 560px;

    background: #FFFFFF;
}

.journal-featured-image {
    position: relative;
    min-height: 560px;

    overflow: hidden;
}

.journal-featured-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .8s ease;
}

.journal-featured-card:hover
.journal-featured-image img {
    transform: scale(1.035);
}

.journal-image-number {
    position: absolute;
    top: 28px;
    left: 28px;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #FFFFFF;

    background: rgba(9, 42, 61, .78);

    padding: 9px 12px;
}

.journal-featured-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 70px 65px;
}

.journal-category {
    display: block;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;

    color: #0B82E3;

    margin-bottom: 20px;
}

.journal-featured-content h2 {
    margin: 0;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(42px, 5vw, 72px);
    line-height: .92;
    font-weight: 500;
    letter-spacing: -1.5px;

    color: #092A3D;
}

.journal-featured-content p {
    max-width: 430px;

    margin: 28px 0 0;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    line-height: 1.85;

    color: #52636C;
}

.journal-read-more {
    width: fit-content;

    margin-top: 35px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    gap: 14px;

    border: none;
    background: transparent;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #092A3D;

    cursor: pointer;

    transition: gap .3s ease,
                color .3s ease;
}

.journal-read-more span {
    font-size: 18px;
    font-weight: 400;
}

.journal-read-more:hover {
    gap: 20px;
    color: #0B82E3;
}


/* =========================================================
   LATEST JOURNAL
========================================================= */

.journal-latest-section {
    max-width: 1250px;
    margin: 0 auto;

    padding: 30px 5vw 140px;
}

.journal-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 60px;

    margin-bottom: 65px;
}

.journal-section-heading h2 {
    margin: 0;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(48px, 5vw, 76px);
    line-height: .9;
    font-weight: 500;

    color: #092A3D;
}

.journal-section-heading h2 em {
    color: #0B82E3;
    font-style: italic;
    font-weight: 400;
}

.journal-section-heading > p {
    max-width: 350px;

    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    line-height: 1.8;

    color: #52636C;
}

.journal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.journal-card {
    background: #FFFFFF;
}

.journal-card-image {
    position: relative;

    width: 100%;
    height: 350px;

    overflow: hidden;
}

.journal-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .8s ease;
}

.journal-card:hover
.journal-card-image img {
    transform: scale(1.035);
}

.journal-card-number {
    position: absolute;
    top: 20px;
    left: 20px;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #FFFFFF;

    background: rgba(9, 42, 61, .78);

    padding: 8px 10px;
}

.journal-card-content {
    padding: 35px 30px 40px;
}

.journal-card-content h3 {
    margin: 0;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 35px;
    line-height: .95;
    font-weight: 500;

    color: #092A3D;
}

.journal-card-content p {
    margin: 20px 0 0;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    line-height: 1.8;

    color: #52636C;
}


/* =========================================================
   PERSPECTIVE
========================================================= */

.journal-perspective {
    width: 100%;

    background: #092A3D;

    color: #FFFFFF;
}

.journal-perspective-inner {
    max-width: 1000px;
    margin: 0 auto;

    padding: 130px 6vw;

    text-align: center;
}

.journal-perspective-label {
    display: block;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 4px;

    color: #D6A23A;

    margin-bottom: 20px;
}

.journal-perspective-mark {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 90px;
    line-height: .5;

    color: #0B82E3;

    margin-bottom: 20px;
}

.journal-perspective blockquote {
    max-width: 850px;
    margin: 0 auto;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(38px, 5vw, 65px);
    line-height: 1;
    font-weight: 400;
    font-style: italic;

    color: #FFFFFF;
}

.journal-perspective-author {
    display: block;

    margin-top: 35px;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;

    color: #8FA9B5;
}


/* =========================================================
   TOPICS
========================================================= */

.journal-topics {
    max-width: 1250px;
    margin: 0 auto;

    padding: 130px 5vw 150px;
}

.journal-topics-heading h2 {
    margin: 0;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(55px, 6vw, 85px);
    line-height: .9;
    font-weight: 500;

    color: #092A3D;
}

.journal-topics-heading h2 em {
    color: #0B82E3;
    font-style: italic;
}

.journal-topic-list {
    margin-top: 65px;

    border-top: 1px solid #D9E0E3;
}

.journal-topic {
    display: grid;
    grid-template-columns: 70px 1fr 30px;
    align-items: center;

    min-height: 78px;

    border-bottom: 1px solid #D9E0E3;

    text-decoration: none;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #092A3D;

    transition: padding .3s ease,
                color .3s ease,
                background .3s ease;
}

.journal-topic > span:first-child {
    font-size: 9px;
    color: #8FA9B5;
}

.journal-topic > span:last-child {
    font-size: 16px;
    font-weight: 400;
}

.journal-topic:hover {
    padding-left: 15px;

    color: #0B82E3;

    background: rgba(11, 130, 227, .035);
}


/* =========================================================
   FULL ARTICLE VIEW
========================================================= */

.journal-article-view {
    display: none;

    width: 100%;

    background: #FAF9F5;
}

.journal-article-view.is-visible {
    display: block;
}

.journal-listing.is-hidden {
    display: none;
}

.journal-full-article {
    display: none;
}

.journal-full-article.is-active {
    display: block;
}


/* =========================================================
   ARTICLE TOP
========================================================= */

.journal-article-top {
    max-width: 1250px;
    margin: 0 auto;

    padding: 145px 5vw 35px;
}

.journal-back-button {
    border: none;
    background: transparent;

    padding: 0;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #092A3D;

    cursor: pointer;

    transition: color .3s ease;
}

.journal-back-button:hover {
    color: #0B82E3;
}


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

.journal-article-header {
    max-width: 1100px;
    margin: 0 auto;

    padding: 50px 5vw 80px;
}

.journal-article-header h1 {
    max-width: 1000px;

    margin: 0;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(58px, 8vw, 115px);
    line-height: .86;
    font-weight: 500;
    letter-spacing: -3px;

    color: #092A3D;
}

.journal-date {
    display: block;

    margin-top: 30px;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;

    color: #8FA9B5;
}


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

.journal-article-image {
    width: min(1250px, 90%);
    height: 620px;

    margin: 0 auto;

    overflow: hidden;
}

.journal-article-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================================
   ARTICLE BODY
========================================================= */

.journal-article-body {
    max-width: 1050px;
    margin: 0 auto;

    padding: 100px 5vw 150px;

    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 60px;
}

.journal-article-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-height: 160px;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;

    color: #0B82E3;
}

.journal-article-side span:last-child {
    color: #D6A23A;
}

.journal-article-text {
    max-width: 700px;
}

.journal-article-text p {
    margin: 0 0 28px;

    font-family: "Manrope", sans-serif;
    font-size: 15px;
    line-height: 2;

    color: #30444E;
}

.journal-article-text .article-lead {
    margin-bottom: 45px;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 31px;
    line-height: 1.25;
    font-weight: 500;

    color: #092A3D;
}

.journal-article-text h2 {
    margin: 65px 0 25px;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 45px;
    line-height: 1;
    font-weight: 500;

    color: #092A3D;
}

.journal-article-text .article-closing {
    margin-top: 55px;

    padding-top: 35px;

    border-top: 1px solid #D9E0E3;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 27px;
    line-height: 1.35;
    font-style: italic;

    color: #092A3D;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    width: 100%;

    background: #092A3D;
    color: #FFFFFF;
}

.footer-main {
    max-width: 1250px;
    margin: 0 auto;

    padding: 90px 5vw 75px;

    display: grid;
    grid-template-columns: 2fr 1fr 1.4fr 1fr;
    gap: 50px;
}

.footer-brand {
    max-width: 300px;
}

.footer-logo {
    display: inline-flex;
    flex-direction: column;

    text-decoration: none;
}

.footer-logo span {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 1px;

    color: #FFFFFF;
}

.footer-logo small {
    margin-top: -2px;

    font-family: "Manrope", sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 3px;

    color: #D6A23A;
}

.footer-brand p {
    margin-top: 22px;

    font-family: "Manrope", sans-serif;
    font-size: 12px;

    color: #8FA9B5;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-title {
    margin-bottom: 20px;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;

    color: #D6A23A;
}

.footer-column a {
    margin-bottom: 11px;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    line-height: 1.5;

    color: rgba(255,255,255,.72);

    text-decoration: none;

    transition: color .3s ease;
}

.footer-column a:hover {
    color: #0B82E3;
}

.footer-bottom {
    max-width: 1250px;
    margin: 0 auto;

    padding: 22px 5vw;

    display: flex;
    justify-content: space-between;
    gap: 30px;

    border-top: 1px solid rgba(255,255,255,.12);

    font-family: "Manrope", sans-serif;
    font-size: 8px;
    letter-spacing: 1.5px;

    color: #8FA9B5;
}


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

@media (max-width: 900px) {

    .journal-hero {
        padding: 150px 7vw 90px;
    }

    .journal-featured-card {
        grid-template-columns: 1fr;
    }

    .journal-featured-image {
        min-height: 500px;
    }

    .journal-featured-content {
        padding: 60px 50px;
    }

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

    .journal-card:last-child {
        grid-column: 1 / -1;
    }

    .journal-card:last-child .journal-card-image {
        height: 430px;
    }

    .journal-article-image {
        height: 500px;
    }

    .footer-main {
        grid-template-columns: 1.5fr 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

}


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

@media (max-width: 700px) {

    .journal-hero {
        min-height: auto;

        padding: 145px 6vw 75px;
    }

    .journal-hero-inner {
        display: block;
    }

    .journal-hero h1 {
        font-size: clamp(52px, 16vw, 78px);
        letter-spacing: -2px;
    }

    .journal-hero-content p {
        font-size: 13px;
        line-height: 1.8;
    }

    .journal-hero-side {
        display: none;
    }


    .journal-featured-section,
    .journal-latest-section {
        padding-left: 6vw;
        padding-right: 6vw;
    }

    .journal-featured-section {
        padding-top: 65px;
        padding-bottom: 90px;
    }

    .journal-featured-image {
        min-height: 400px;
    }

    .journal-featured-content {
        padding: 45px 28px 50px;
    }

    .journal-featured-content h2 {
        font-size: 48px;
    }

    .journal-featured-content p {
        font-size: 13px;
    }


    .journal-section-heading {
        display: block;

        margin-bottom: 45px;
    }

    .journal-section-heading h2 {
        font-size: 55px;
    }

    .journal-section-heading > p {
        margin-top: 25px;
    }


    .journal-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .journal-card:last-child {
        grid-column: auto;
    }

    .journal-card-image,
    .journal-card:last-child .journal-card-image {
        height: 390px;
    }

    .journal-card-content {
        padding: 30px 25px 35px;
    }

    .journal-card-content h3 {
        font-size: 34px;
    }


    .journal-perspective-inner {
        padding: 100px 7vw;
    }

    .journal-perspective blockquote {
        font-size: 40px;
    }


    .journal-topics {
        padding: 90px 6vw 100px;
    }

    .journal-topic {
        grid-template-columns: 45px 1fr 25px;

        min-height: 70px;

        font-size: 11px;
        letter-spacing: 1.5px;
    }


    .journal-article-top {
        padding: 130px 6vw 25px;
    }

    .journal-article-header {
        padding: 35px 6vw 55px;
    }

    .journal-article-header h1 {
        font-size: clamp(52px, 15vw, 78px);
        letter-spacing: -2px;
    }

    .journal-article-image {
        width: 88%;
        height: 390px;
    }

    .journal-article-body {
        display: block;

        padding: 70px 8vw 100px;
    }

    .journal-article-side {
        min-height: auto;

        flex-direction: row;
        justify-content: space-between;

        margin-bottom: 40px;
    }

    .journal-article-text .article-lead {
        font-size: 27px;
    }

    .journal-article-text p {
        font-size: 14px;
        line-height: 1.9;
    }

    .journal-article-text h2 {
        font-size: 38px;
        margin-top: 50px;
    }


    .footer-main {
        grid-template-columns: 1fr 1fr;

        padding: 70px 7vw 55px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        flex-direction: column;
        padding: 20px 7vw;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 430px) {

    .journal-hero h1 {
        font-size: 51px;
    }

    .journal-featured-image {
        min-height: 330px;
    }

    .journal-featured-content h2 {
        font-size: 43px;
    }

    .journal-card-image,
    .journal-card:last-child .journal-card-image {
        height: 320px;
    }

    .journal-perspective blockquote {
        font-size: 34px;
    }

    .journal-article-image {
        height: 300px;
    }

    .journal-article-header h1 {
        font-size: 50px;
    }

}


/* =========================================================
   LETTER FROM THE FOUNDER
========================================================= */

.founder-letter-preview {
    max-width: 1250px;
    margin: 0 auto;

    padding: 0 5vw 130px;
}


.founder-letter-preview-inner {
    position: relative;

    background: #092A3D;

    overflow: hidden;
}


.founder-letter-preview-inner::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 32%;
    height: 100%;

    border-left: 1px solid rgba(255,255,255,.08);

    pointer-events: none;
}


.founder-letter-label {
    position: absolute;

    top: 32px;
    left: 35px;
    right: 35px;

    display: flex;
    justify-content: space-between;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;

    color: #D6A23A;
}


.founder-letter-preview-content {
    position: relative;

    display: grid;
    grid-template-columns: 1.2fr .8fr;

    gap: 60px;

    padding: 110px 70px 85px;
}


.founder-letter-preview-heading {
    max-width: 650px;
}


.founder-letter-preview-heading .journal-category {
    color: #D6A23A;

    margin-bottom: 25px;
}


.founder-letter-preview-heading h2 {
    margin: 0;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(50px, 6vw, 82px);
    line-height: .9;
    font-weight: 500;
    letter-spacing: -2px;

    color: #FFFFFF;
}


.founder-letter-preview-heading h2 em {
    color: #D6A23A;
}


.founder-letter-preview-text {
    align-self: end;

    max-width: 430px;

    padding-bottom: 5px;
}


.founder-letter-preview-text p {
    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    line-height: 1.9;

    color: rgba(255,255,255,.72);
}


.founder-letter-preview-text .journal-read-more {
    color: #FFFFFF;
}


.founder-letter-preview-text .journal-read-more:hover {
    color: #D6A23A;
}


/* =========================================================
   FOUNDER LETTER — FULL VIEW
========================================================= */

.founder-letter-header h1 em {
    color: #D6A23A;

    font-style: italic;
}


.founder-letter-introduction {
    max-width: 900px;
    margin: 0 auto;

    padding: 0 5vw 30px;

    display: grid;
    grid-template-columns: 100px 1fr;

    align-items: start;

    gap: 45px;
}


.founder-letter-introduction-mark {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 120px;
    line-height: .65;

    color: #D6A23A;
}


.founder-letter-introduction p {
    max-width: 650px;

    margin: 0;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 30px;
    line-height: 1.3;
    font-weight: 500;

    color: #092A3D;
}


.founder-letter-text {
    max-width: 720px;
}


.founder-signature {
    margin-top: 70px !important;

    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 24px !important;
    line-height: 1.4 !important;

    color: #092A3D !important;
}


.founder-signature strong {
    font-weight: 600;

    color: #092A3D;
}


/* =========================================================
   FOUNDER LETTER
   ISOLATED STYLES — DO NOT AFFECT OTHER JOURNAL SECTIONS
========================================================= */

.founder-letter-full {
    display: none;
    width: 100%;
    min-height: 100vh;
    background: #F3EEE3;
    padding-bottom: 120px;
}

.founder-letter-full.is-active {
    display: block;
}


/* =========================================================
   BACK TO JOURNAL
========================================================= */

.founder-letter-full .journal-article-top {
    max-width: 1120px;
    margin: 0 auto;
    padding: 125px 5vw 25px;
}

.founder-letter-full .journal-back-button {
    border: none;
    background: transparent;
    padding: 0;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #092A3D;

    cursor: pointer;
}

.founder-letter-full .journal-back-button:hover {
    color: #0B82E3;
}


/* =========================================================
   FOUNDER LETTER HEADER
========================================================= */

.founder-letter-full .founder-letter-header {
    max-width: 1120px;
    margin: 0 auto;

    padding:
        30px 5vw 60px;
}

.founder-letter-full .founder-letter-header h1 {
    max-width: 950px;

    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(58px, 7vw, 105px);

    line-height: .88;

    font-weight: 500;

    letter-spacing: -3px;

    color: #092A3D;
}

.founder-letter-full .founder-letter-header h1 em {
    font-style: italic;
    font-weight: 400;
    color: #315A69;
}


/* =========================================================
   LETTER PANEL
========================================================= */

.founder-letter-full .founder-letter-panel {

    width: min(1120px, calc(100% - 10vw));

    margin: 0 auto;

    padding:
        85px
        clamp(45px, 8vw, 110px)
        100px;

    background: #FBF9F3;

    border: 1px solid rgba(9, 42, 61, .08);

    box-shadow:
        0 25px 80px rgba(9, 42, 61, .07);

    position: relative;
}


/* =========================================================
   QUOTE MARK
========================================================= */

.founder-letter-full .founder-letter-quote-mark {

    position: absolute;

    top: 55px;
    left: 50%;

    transform: translateX(-50%);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 90px;

    line-height: .5;

    color: #D6A23A;
}


/* =========================================================
   OPENING LINE
========================================================= */

.founder-letter-full .founder-letter-opening {

    max-width: 820px;

    margin:
        55px auto 70px;

    text-align: center;
}

.founder-letter-full .founder-letter-opening p {

    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(28px, 3vw, 40px);

    line-height: 1.2;

    font-weight: 500;

    font-style: italic;

    color: #092A3D;
}


/* =========================================================
   IMPORTANT:
   DO NOT USE THE NORMAL ARTICLE GRID
========================================================= */

.founder-letter-full .journal-article-body {

    display: block;

    width: 100%;
    max-width: none;

    margin: 0;

    padding: 0;
}


/* Remove normal article sidebar */

.founder-letter-full .journal-article-side {
    display: none;
}


/* =========================================================
   LETTER TEXT
========================================================= */

.founder-letter-full .founder-letter-text {

    display: block;

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

    margin: 0 auto;
}


.founder-letter-full .founder-letter-text p {

    margin:
        0 0 24px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 17px;

    line-height: 1.78;

    font-weight: 400;

    color: #30444E;
}


/* Opening paragraph */

.founder-letter-full .founder-letter-text > p:first-child {

    font-size: 19px;

    font-weight: 500;

    color: #092A3D;

    margin-bottom: 30px;
}


/* =========================================================
   SHORT REFLECTIVE LINES
========================================================= */

.founder-letter-full .founder-letter-text p:nth-of-type(10),
.founder-letter-full .founder-letter-text p:nth-of-type(13),
.founder-letter-full .founder-letter-text p:nth-of-type(14),
.founder-letter-full .founder-letter-text p:nth-of-type(15),
.founder-letter-full .founder-letter-text p:nth-of-type(16),
.founder-letter-full .founder-letter-text p:nth-of-type(17),
.founder-letter-full .founder-letter-text p:nth-of-type(18),
.founder-letter-full .founder-letter-text p:nth-of-type(19),
.founder-letter-full .founder-letter-text p:nth-of-type(20),
.founder-letter-full .founder-letter-text p:nth-of-type(21),
.founder-letter-full .founder-letter-text p:nth-of-type(22),
.founder-letter-full .founder-letter-text p:nth-of-type(23),
.founder-letter-full .founder-letter-text p:nth-of-type(24),
.founder-letter-full .founder-letter-text p:nth-of-type(25) {

    margin-bottom: 9px;
}


/* =========================================================
   FINAL THOUGHT
========================================================= */

.founder-letter-full .founder-letter-text p:last-of-type {

    margin-top: 38px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 27px;

    line-height: 1.35;

    font-weight: 500;

    color: #092A3D;
}


/* =========================================================
   SIGNATURE
========================================================= */

.founder-letter-full .founder-letter-signature {

    margin-top: 65px;

    padding-top: 32px;

    border-top:
        1px solid rgba(9, 42, 61, .12);
}


.founder-letter-full .founder-letter-closing {

    margin-bottom: 15px !important;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif !important;

    font-size: 23px !important;

    font-style: italic;

    color: #30444E !important;
}


.founder-letter-full .founder-name {

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 38px;

    line-height: 1;

    font-style: italic;

    font-weight: 500;

    color: #092A3D;
}


.founder-letter-full .founder-role {

    margin-top: 14px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #8FA9B5;
}


/* =========================================================
   GOLD CORNER
========================================================= */

.founder-letter-full .founder-letter-panel::after {

    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 150px;
    height: 150px;

    border-right:
        1px solid rgba(214, 162, 58, .35);

    border-bottom:
        1px solid rgba(214, 162, 58, .35);

    pointer-events: none;
}


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

@media (max-width: 700px) {

    .founder-letter-full {
        padding-bottom: 70px;
    }

    .founder-letter-full .journal-article-top {
        padding:
            105px
            6vw
            25px;
    }

    .founder-letter-full .founder-letter-header {
        padding:
            25px
            6vw
            45px;
    }

    .founder-letter-full .founder-letter-header h1 {
        font-size:
            clamp(48px, 14vw, 72px);

        letter-spacing: -2px;
    }

    .founder-letter-full .founder-letter-panel {

        width: calc(100% - 8vw);

        padding:
            70px
            7vw
            65px;
    }

    .founder-letter-full .founder-letter-quote-mark {
        top: 45px;
        font-size: 70px;
    }

    .founder-letter-full .founder-letter-opening {
        margin:
            35px auto 50px;
    }

    .founder-letter-full .founder-letter-opening p {
        font-size: 28px;
    }

    .founder-letter-full .founder-letter-text {
        max-width: none;
    }

    .founder-letter-full .founder-letter-text p {
        font-size: 16px;
        line-height: 1.78;
        margin-bottom: 21px;
    }

    .founder-letter-full .founder-letter-text > p:first-child {
        font-size: 18px;
    }

    .founder-letter-full .founder-letter-text p:last-of-type {
        font-size: 24px;
    }

    .founder-letter-full .founder-name {
        font-size: 30px;
    }

}

/* =========================================================
   FOUNDER LETTER PREVIEW — ONLY
   Do not affect PERSPECTIVES, TOPICS, or other pages
========================================================= */

/* Remove the large dark-blue panel */
.founder-letter-preview-inner {
    background: transparent !important;
    overflow: visible !important;
}

/* Remove the vertical divider */
.founder-letter-preview-inner::before {
    display: none !important;
    content: none !important;
}

/* Remove "FROM THE FOUNDER / 01" */
.founder-letter-label {
    display: none !important;
}

/* Remove the extra small "LETTER FROM THE FOUNDER" label */
.founder-letter-preview-heading .journal-category {
    display: none !important;
}

/* Make the preview a clean editorial block */
.founder-letter-preview {
    width: 100%;
    background: transparent !important;
}

.founder-letter-preview-content {
    display: grid !important;
    grid-template-columns: 1.15fr .85fr !important;
    gap: 80px !important;

    max-width: 1250px;
    margin: 0 auto;

    padding: 100px 6vw !important;
    box-sizing: border-box;
    align-items: end;
}

/* Main title */
.founder-letter-preview-heading h2 {
    margin: 0 !important;

    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(58px, 7vw, 92px) !important;
    line-height: .88 !important;
    font-weight: 500 !important;
    letter-spacing: -2px !important;

    color: #092A3D !important;
}

.founder-letter-preview-heading h2 em {
    color: #0B82E3 !important;
    font-style: italic !important;
    font-weight: 400 !important;
}

/* Description on the right */
.founder-letter-preview-text {
    max-width: 470px !important;
}

.founder-letter-preview-text p {
    margin: 0 0 30px !important;

    font-family: "Manrope", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.8 !important;

    color: #092A3D !important;
}

/* Read Letter button */
.founder-letter-preview-text .journal-read-more {
    color: #092A3D !important;
}

/* Mobile */
@media (max-width: 800px) {

    .founder-letter-preview-content {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        padding: 80px 7vw !important;
    }

    .founder-letter-preview-heading h2 {
        font-size: 56px !important;
    }

}

/* =========================================================
   PROSPERITY DIANA OJESEBHOLO
   CONTACT SECTION
   UNIQUE PREFIX: pdo-contact-
========================================================= */

.pdo-contact-section {
    position: relative;
    width: 100%;
    padding: 150px 7vw 0;

    background: #092A3D;
    color: #FAF9F5;

    overflow: hidden;
}


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

.pdo-contact-container {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;

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

    column-gap: 100px;
    row-gap: 90px;
}


/* =========================================================
   CONTACT INTRO
========================================================= */

.pdo-contact-intro {
    padding-top: 5px;
}


.pdo-contact-eyebrow {
    display: block;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 4px;

    color: #D6A23A;

    margin-bottom: 20px;
}


.pdo-contact-line {
    width: 55px;
    height: 1px;

    background: #D6A23A;

    margin-bottom: 28px;
}


.pdo-contact-intro h2 {
    margin: 0;

    max-width: 650px;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(58px, 7vw, 100px);

    font-weight: 400;

    line-height: 0.92;

    letter-spacing: -2px;

    color: #FFFFFF;
}


.pdo-contact-intro h2 em {
    display: block;

    font-style: italic;

    color: #D6A23A;
}


.pdo-contact-lead {
    max-width: 500px;

    margin: 38px 0 0;

    font-family: "Manrope", sans-serif;

    font-size: 15px !important;

    line-height: 1.9 !important;

    font-weight: 400;

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


.pdo-contact-note {
    max-width: 450px;

    margin: 28px 0 0;

    padding-left: 20px;

    border-left: 1px solid rgba(214, 162, 58, 0.65);

    font-family: "Cormorant Garamond", serif;

    font-size: 22px !important;

    line-height: 1.45 !important;

    font-style: italic;

    color: rgba(255, 255, 255, 0.88);
}


/* =========================================================
   CONTACT DETAILS
========================================================= */

.pdo-contact-details {
    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    gap: 0;

    border-top: 1px solid rgba(255, 255, 255, 0.16);
}


.pdo-contact-detail {
    padding: 27px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}


.pdo-contact-detail-label {
    display: block;

    margin-bottom: 10px;

    font-family: "Manrope", sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 3px;

    color: #D6A23A;
}


.pdo-contact-detail-link,
.pdo-contact-detail-text {
    font-family: "Cormorant Garamond", serif;

    font-size: 28px;

    line-height: 1.2;

    color: #FFFFFF;

    text-decoration: none;
}


.pdo-contact-detail-link {
    transition:
        color 0.3s ease,
        padding-left 0.3s ease;
}


.pdo-contact-detail-link:hover {
    color: #D6A23A;

    padding-left: 6px;
}


/* =========================================================
   SOCIAL LINKS
========================================================= */

.pdo-contact-socials {
    display: flex;

    flex-wrap: wrap;

    gap: 24px;
}


.pdo-contact-socials a {
    position: relative;

    font-family: "Manrope", sans-serif;

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 1px;

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

    text-decoration: none;

    transition:
        color 0.3s ease;
}


.pdo-contact-socials a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -5px;

    width: 0;
    height: 1px;

    background: #D6A23A;

    transition: width 0.3s ease;
}


.pdo-contact-socials a:hover {
    color: #FFFFFF;
}


.pdo-contact-socials a:hover::after {
    width: 100%;
}


/* =========================================================
   CONTACT FORM
========================================================= */

.pdo-contact-form-wrap {
    grid-column: 1 / -1;

    width: 100%;

    padding-top: 10px;
}


.pdo-contact-form-label {
    display: block;

    margin-bottom: 30px;

    font-family: "Manrope", sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;

    color: #D6A23A;
}


.pdo-contact-form {
    width: 100%;
}


.pdo-contact-form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 35px;
}


.pdo-contact-field {
    width: 100%;

    margin-bottom: 30px;
}


.pdo-contact-field label {
    display: block;

    margin-bottom: 11px;

    font-family: "Manrope", sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2.5px;

    color: rgba(255, 255, 255, 0.58);
}


.pdo-contact-field input,
.pdo-contact-field textarea {
    display: block;

    width: 100%;

    padding: 15px 0;

    border: 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.25);

    border-radius: 0;

    outline: none;

    background: transparent;

    font-family: "Manrope", sans-serif;

    font-size: 14px;

    color: #FFFFFF;

    transition:
        border-color 0.3s ease;
}


.pdo-contact-field input::placeholder,
.pdo-contact-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.38);
}


.pdo-contact-field input:focus,
.pdo-contact-field textarea:focus {
    border-bottom-color: #D6A23A;
}


.pdo-contact-field textarea {
    resize: vertical;

    min-height: 145px;

    line-height: 1.7;
}


/* =========================================================
   SEND BUTTON
========================================================= */

.pdo-contact-submit {
    display: inline-flex;

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

    gap: 22px;

    min-width: 190px;

    padding: 15px 24px;

    border: 1px solid #D6A23A;

    background: #D6A23A;

    color: #092A3D;

    font-family: "Manrope", sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

    cursor: pointer;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}


.pdo-contact-submit span {
    font-size: 17px;

    line-height: 1;

    transition:
        transform 0.3s ease;
}


.pdo-contact-submit:hover {
    background: transparent;

    color: #D6A23A;

    border-color: #D6A23A;
}


.pdo-contact-submit:hover span {
    transform: translate(4px, -4px);
}


/* =========================================================
   CONTACT CLOSING
========================================================= */

.pdo-contact-closing {
    width: 100%;

    max-width: 1250px;

    margin: 120px auto 0;

    padding: 22px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.13);

    text-align: center;
}


.pdo-contact-closing span {
    font-family: "Manrope", sans-serif;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 4px;

    color: rgba(255, 255, 255, 0.4);
}


/* =========================================================
   TABLET
   DESKTOP/TABLET DESIGN REMAINS INTACT
========================================================= */

@media (max-width: 900px) {

    .pdo-contact-section {
        padding-left: 6vw;
        padding-right: 6vw;
    }

    .pdo-contact-container {
        column-gap: 60px;
    }

}


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

@media (max-width: 700px) {

    .pdo-contact-section {
        padding: 100px 7vw 0;
    }


    .pdo-contact-container {
        display: block;
    }


    .pdo-contact-intro {
        margin-bottom: 65px;
    }


    .pdo-contact-intro h2 {
        font-size: clamp(52px, 15vw, 78px);

        letter-spacing: -1.5px;
    }


    .pdo-contact-lead {
        margin-top: 30px;

        font-size: 15px !important;

        line-height: 1.8 !important;
    }


    .pdo-contact-note {
        font-size: 21px !important;
    }


    .pdo-contact-details {
        margin-bottom: 75px;
    }


    .pdo-contact-detail-link,
    .pdo-contact-detail-text {
        font-size: 25px;
    }


    .pdo-contact-form-row {
        display: block;
    }


    .pdo-contact-form-label {
        margin-bottom: 25px;
    }


    .pdo-contact-field {
        margin-bottom: 28px;
    }


    .pdo-contact-submit {
        width: 100%;

        min-height: 52px;
    }


    .pdo-contact-closing {
        margin-top: 90px;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 400px) {

    .pdo-contact-section {
        padding-left: 6vw;
        padding-right: 6vw;
    }


    .pdo-contact-intro h2 {
        font-size: 50px;

        line-height: 0.95;
    }


    .pdo-contact-lead {
        font-size: 14px !important;
    }


    .pdo-contact-note {
        font-size: 19px !important;
    }


    .pdo-contact-detail-link,
    .pdo-contact-detail-text {
        font-size: 23px;
    }


    .pdo-contact-socials {
        gap: 17px;
    }


    .pdo-contact-socials a {
        font-size: 11px;
    }

}

/* =========================================================
   FULL ARTICLE HEADER — FIX FOR FIXED NAVIGATION
========================================================= */

.journal-full-article-header {
    max-width: 1250px;
    margin: 0 auto;

    /*
       Your navigation is 82px tall.
       This gives the article header enough breathing room
       so the title never sits underneath the fixed nav.
    */
    padding: 145px 5vw 80px;
}


/* -----------------------------------------
   ARTICLE CATEGORY
----------------------------------------- */

.journal-full-article-header .journal-category {
    display: block;

    margin-bottom: 28px;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;

    color: #0B82E3;
}


/* -----------------------------------------
   ARTICLE TITLE
----------------------------------------- */

.journal-full-article-header h1 {
    max-width: 1050px;

    margin: 0;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(58px, 8vw, 115px);
    line-height: .88;
    font-weight: 500;
    letter-spacing: -3px;

    color: #092A3D;
}


/* -----------------------------------------
   ARTICLE DATE
----------------------------------------- */

.journal-full-article-header .journal-date {
    display: block;

    margin-top: 30px;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;

    color: #8FA9B5;
}


/* =========================================================
   BACK BUTTON — KEEP IT BELOW THE NAV
========================================================= */

.journal-full-article .journal-back-button {
    position: relative;
    z-index: 1;

    display: block;

    margin: 0 auto;
    padding: 115px 5vw 0;

    max-width: 1250px;

    font-family: "Manrope", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #092A3D;

    cursor: pointer;

    transition: color .3s ease;
}

.journal-full-article .journal-back-button:hover {
    color: #0B82E3;
}


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

@media (max-width: 800px) {

    .journal-full-article .journal-back-button {
        padding: 115px 8vw 0;
    }

    .journal-full-article-header {
        padding: 70px 8vw 65px;
    }

    .journal-full-article-header h1 {
        font-size: clamp(52px, 10vw, 78px);
        line-height: .9;
        letter-spacing: -2px;
    }

}


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

@media (max-width: 500px) {

    .journal-full-article .journal-back-button {
        padding: 105px 7vw 0;
    }

    .journal-full-article-header {
        padding: 55px 7vw 60px;
    }

    .journal-full-article-header .journal-category {
        margin-bottom: 20px;

        font-size: 8px;
        letter-spacing: 2.5px;
    }

    .journal-full-article-header h1 {
        font-size: clamp(46px, 13vw, 65px);
        line-height: .92;
        letter-spacing: -1.5px;
    }

    .journal-full-article-header .journal-date {
        margin-top: 25px;

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

}

/* =========================================================
   FOUNDER LETTER — IMAGE BACKGROUND
========================================================= */

.founder-letter-full .founder-letter-panel {

    position: relative;

    /*
       IMPORTANT:
       Change this filename to the image you want to use.
       The image should be inside your /images/ folder.
    */
    background-image:
        url("../IMG/");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    overflow: hidden;
}


/* -----------------------------------------
   DARK IMAGE OVERLAY
----------------------------------------- */

.founder-letter-full .founder-letter-panel::before {

    content: "";

    position: absolute;

    inset: 0;

    background: rgba(9, 42, 61, 0.42);

    pointer-events: none;

    z-index: 0;
}


/* -----------------------------------------
   KEEP ALL LETTER CONTENT ABOVE IMAGE
----------------------------------------- */

.founder-letter-full .founder-letter-panel > * {

    position: relative;

    z-index: 1;
}


/* -----------------------------------------
   QUOTE MARK
----------------------------------------- */

.founder-letter-full .founder-letter-quote-mark {

    z-index: 2;
}


/* -----------------------------------------
   OPENING LINE
----------------------------------------- */

.founder-letter-full .founder-letter-opening p {

    color: #FFFFFF;
}


/* -----------------------------------------
   QUOTED STATEMENT
----------------------------------------- */

.founder-letter-full .founder-letter-highlight {

    position: relative;

    margin: 0 auto 55px;

    max-width: 760px;

    padding: 35px 45px;

    border-left: 2px solid #D6A23A;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(27px, 3vw, 42px);

    line-height: 1.2;

    font-weight: 500;

    font-style: italic;

    text-align: left;

    color: #FFFFFF;
}


/* -----------------------------------------
   LETTER BODY TEXT
----------------------------------------- */

.founder-letter-full .founder-letter-text p {

    color: rgba(255, 255, 255, 0.88);
}


/* -----------------------------------------
   RESPONSIVE — TABLET
----------------------------------------- */

@media (max-width: 800px) {

    .founder-letter-full .founder-letter-highlight {

        padding: 28px 30px;

        font-size: 32px;

    }

}


/* -----------------------------------------
   RESPONSIVE — MOBILE
----------------------------------------- */

@media (max-width: 500px) {

    .founder-letter-full .founder-letter-panel {

        width: calc(100% - 10vw);

        padding:
            70px
            7vw
            80px;
    }


    .founder-letter-full .founder-letter-highlight {

        padding: 25px 22px;

        margin-bottom: 45px;

        font-size: 27px;

        line-height: 1.2;
    }

}

/* =========================================================
   DIVINE HOME CANADA — FULL IMAGE BACKGROUND OVERRIDE
   Only affects the Canada card
========================================================= */

.vision-card-blue {
    position: relative;
    overflow: hidden;

    min-height: 610px;

    display: flex;
    align-items: flex-end;

    background: #092a3d;
}


/* Make the Canada image cover the ENTIRE card */

.vision-card-blue .vision-card-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;
    overflow: hidden;
}


/* Make the actual image fill the card */

.vision-card-blue .vision-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 1s ease;
}


/* Dark gradient over the image so the text remains readable */

.vision-card-blue::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            to top,
            rgba(9, 42, 61, 0.92) 0%,
            rgba(9, 42, 61, 0.68) 32%,
            rgba(9, 42, 61, 0.18) 65%,
            rgba(9, 42, 61, 0.05) 100%
        );

    pointer-events: none;
}


/* Put the Canada text ON TOP of the image */

.vision-card-blue .vision-card-content {
    position: relative;
    z-index: 2;

    width: 100%;

    padding: 55px 45px;

    background: transparent;
}


/* Keep all Canada text styling */

.vision-card-blue .vision-card-number {
    color: #e8c875;
}

.vision-card-blue .vision-card-category {
    color: #ffffff;
}

.vision-card-blue h3 {
    color: #ffffff;
}

.vision-card-blue h3 em {
    color: #e8c875;
}

.vision-card-blue p {
    color: rgba(255, 255, 255, 0.82);
}

.vision-card-blue .vision-card-arrow {
    color: #e8c875;
}


/* Keep the existing image hover effect */

.vision-card-blue:hover .vision-card-image img {
    transform: scale(1.035);
}


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

@media (max-width: 1100px) {

    .vision-card-blue {
        min-height: 540px;
    }

    .vision-card-blue .vision-card-image {
        height: 100%;
    }

}


@media (max-width: 800px) {

    .vision-card-blue {
        min-height: 540px;
    }

    .vision-card-blue .vision-card-content {
        padding: 45px 35px;
    }

}

/* =========================================================
   VISION PAGE — SIDE-BY-SIDE IMAGE FADE
   Only affects images beside text sections
   ========================================================= */

/* Side-by-side image sections */
.pdo-detail-feature-image {
    position: relative;
    overflow: hidden;
}

/* Make sure the image itself fills its section */
.pdo-detail-feature-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Remove any older image overlay inside these sections */
.pdo-detail-feature-image .pdo-image-placeholder::after {
    display: none;
}

/* Fade image into the navy text background */
.pdo-detail-feature-image::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;

    width: 18%;

    pointer-events: none;
    z-index: 5;

    background: linear-gradient(
        to right,
        rgba(9, 42, 61, 0) 0%,
        rgba(9, 42, 61, 0.18) 25%,
        rgba(9, 42, 61, 0.55) 60%,
        #092A3D 100%
    );
}

/* When the image is on the RIGHT and text is on the LEFT */
.pdo-detail-feature-reverse .pdo-detail-feature-image::after {
    right: auto;
    left: 0;

    background: linear-gradient(
        to left,
        rgba(9, 42, 61, 0) 0%,
        rgba(9, 42, 61, 0.18) 25%,
        rgba(9, 42, 61, 0.55) 60%,
        #092A3D 100%
    );
}


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

@media (max-width: 900px) {

    /*
       On mobile the image and text stack vertically,
       so remove the side fade.
    */

    .pdo-detail-feature-image::after,
    .pdo-detail-feature-reverse .pdo-detail-feature-image::after {
        display: none;
    }

}

/* =========================================================
   DIVINE HOME CANADA — HERO IMAGE ONLY
   Make the full image fit inside the existing box
   ========================================================= */

[data-vision="divine-home-care"] .pdo-detail-hero-image .pdo-image-placeholder {
    background: #FAF9F5;
}

[data-vision="divine-home-care"] .pdo-detail-hero-image .pdo-image-placeholder img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    display: block;
}

/* =========================================================
   DIVINE HOME CANADA — HERO SPACING ONLY
   ========================================================= */

[data-vision="divine-home-care"] .pdo-detail-hero {
    min-height: 760px;
}

/* Give the image a little more presence */
[data-vision="divine-home-care"] .pdo-detail-hero-image {
    transform: scale(1.08);
}

/* Slightly strengthen the left-side composition */
[data-vision="divine-home-care"] .pdo-detail-hero-content {
    transform: translateY(-10px);
}

/* Add a subtle breathing-space detail beneath the tagline */
[data-vision="divine-home-care"] .pdo-detail-tagline {
    margin-top: 42px;
    max-width: 500px;
}

/* =========================================================
   INDEX MOBILE — HERO IMAGE BEHIND TEXT
   ========================================================= */

@media (max-width: 800px) {

    .hero {
        position: relative;
        min-height: 760px;

        overflow: hidden;

        background: #092A3D;
    }

    /* Turn the existing image into the hero background */
    .hero-image {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        z-index: 0;

        min-height: 0;
    }

    .hero-image img {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;

        display: block;

        opacity: 0.72;
    }

    /* Dark overlay so the text remains readable */
    .hero-image::after {
        content: "";

        position: absolute;
        inset: 0;

        background:
            linear-gradient(
                to right,
                rgba(9, 42, 61, 0.94) 0%,
                rgba(9, 42, 61, 0.78) 38%,
                rgba(9, 42, 61, 0.42) 72%,
                rgba(9, 42, 61, 0.28) 100%
            );

        z-index: 1;
    }

    /* Remove the desktop two-column layout */
    .hero-inner {
        position: relative;

        min-height: 760px;

        display: block !important;

        width: 100%;

        padding: 0;
    }

    /* Put all hero text above the image */
    .hero-content {
        position: relative;

        z-index: 3;

        min-height: 760px;

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

        width: 100%;

        padding:
            110px
            9vw
            90px;

        box-sizing: border-box;
    }

    .hero-content h1 {
        max-width: 600px;

        font-size: clamp(48px, 12vw, 70px);

        line-height: 0.96;
    }

    .hero-content p {
        max-width: 390px;

        font-size: 14px;

        line-height: 1.75;
    }

    .hero-eyebrow {
        font-size: 8px;

        letter-spacing: 3px;
    }

    .hero-line {
        margin-bottom: 25px;
    }

    .hero-button {
        width: fit-content;
    }

    /* Hide desktop-only side information */
    .hero-side-text {
        display: none;
    }

    /* Hide desktop scroll indicator */
    .hero-scroll {
        display: none;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 400px) {

    .hero {
        min-height: 700px;
    }

    .hero-inner {
        min-height: 700px;
    }

    .hero-content {
        min-height: 700px;

        padding:
            100px
            8vw
            75px;
    }

    .hero-content h1 {
        font-size: 46px;
    }

    .hero-content p {
        max-width: 330px;

        font-size: 12px;
    }

    .hero-image img {
        object-position: center center;
    }
}

/* =========================================================
   MOBILE NAVIGATION MENU
========================================================= */

@media (max-width: 800px) {

    .site-header {
        z-index: 1000;
    }

    .site-nav {
        position: relative;

        height: 82px;

        padding: 0 7vw;
    }

    /* Show hamburger */
    .nav-menu-button {
        display: flex !important;

        flex-direction: column;
        justify-content: center;
        align-items: flex-end;

        gap: 7px;

        width: 38px;
        height: 38px;

        padding: 0;

        border: none;
        background: transparent;

        cursor: pointer;

        z-index: 1002;
    }

    .nav-menu-button span {
        display: block;

        height: 1px;

        background: #FFFFFF;

        transition:
            width 0.3s ease,
            transform 0.3s ease,
            opacity 0.3s ease;
    }

    .nav-menu-button span:first-child {
        width: 34px;
    }

    .nav-menu-button span:last-child {
        width: 25px;
    }


    /* Hide desktop links until hamburger is clicked */
    .nav-links {
        display: flex !important;

        position: absolute;

        top: 82px;
        left: 0;
        right: 0;

        flex-direction: column;

        align-items: flex-start;

        gap: 0;

        padding: 20px 7vw 25px;

        background: #092A3D;

        border-top: 1px solid rgba(255,255,255,0.10);
        border-bottom: 1px solid rgba(255,255,255,0.10);

        opacity: 0;
        visibility: hidden;

        transform: translateY(-10px);

        transition:
            opacity 0.3s ease,
            visibility 0.3s ease,
            transform 0.3s ease;

        z-index: 1001;
    }

    /* OPEN MENU */
    .nav-links.mobile-open {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);
    }

    .nav-link {
        display: block !important;

        width: 100%;

        padding: 13px 0;

        font-size: 9px;

        color: #FFFFFF !important;
    }

    .nav-link::after {
        display: none;
    }


    /* GET IN TOUCH inside mobile menu */
    .nav-contact {
        position: absolute;

        top: 82px;
        right: 7vw;

        transform: translateY(0);

        display: none !important;

        z-index: 1003;
    }


    /* Hamburger becomes X */
    .nav-menu-button.is-open span:first-child {
        width: 30px;

        transform:
            translateY(4px)
            rotate(45deg);
    }

    .nav-menu-button.is-open span:last-child {
        width: 30px;

        transform:
            translateY(-4px)
            rotate(-45deg);
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 400px) {

    .site-nav {
        padding: 0 6vw;
    }

    .nav-links {
        padding-left: 6vw;
        padding-right: 6vw;
    }

    .nav-link {
        font-size: 8px;
    }

}

/* =========================================================
   JOURNEY — MOBILE WIDTH FIX
   Prevent journey text from becoming cramped
   ========================================================= */

@media (max-width: 500px) {

    .journey-section {
        width: 100%;
        box-sizing: border-box;

        padding-left: 7vw;
        padding-right: 7vw;
    }

    .journey-timeline {
        width: 100%;
        max-width: none;

        box-sizing: border-box;
    }

    .journey-item {
        width: 100%;

        display: grid !important;

        /*
           Marker area + content area
           The content gets all remaining space.
        */
        grid-template-columns: 28px minmax(0, 1fr) !important;

        column-gap: 18px;

        box-sizing: border-box;

        min-width: 0;
    }

    /* Hide the old number column */
    .journey-number {
        display: none !important;
    }

    /* Keep the timeline marker */
    .journey-marker {
        width: 28px;

        position: relative;
    }

    .journey-content {
        width: 100%;
        max-width: none;

        min-width: 0;

        padding-bottom: 25px;

        box-sizing: border-box;
    }

    .journey-category {
        display: block;

        width: 100%;

        white-space: normal;
    }

    .journey-content h3 {
        width: 100%;
        max-width: 100%;

        margin-bottom: 16px;

        font-size: 38px;

        line-height: 1.02;

        letter-spacing: -0.5px;

        white-space: normal;

        overflow-wrap: normal;

        word-break: normal;
    }

    .journey-content p {
        width: 100%;
        max-width: 100%;

        font-size: 13px;

        line-height: 1.75;

        white-space: normal;

        overflow-wrap: normal;

        word-break: normal;
    }

    /* Keep the timeline line aligned with the marker */
    .journey-timeline::before {
        left: 13px;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .journey-section {
        padding-left: 6vw;
        padding-right: 6vw;
    }

    .journey-item {
        grid-template-columns: 24px minmax(0, 1fr) !important;

        column-gap: 16px;
    }

    .journey-marker {
        width: 24px;
    }

    .journey-timeline::before {
        left: 11px;
    }

    .journey-content h3 {
        font-size: 35px;
        line-height: 1.02;
    }

    .journey-content p {
        font-size: 12px;
        line-height: 1.75;
    }

}

/* =========================================================
   VISION SECTION — TWO CARDS SIDE BY SIDE ON MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .vision-grid {
        display: grid !important;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 12px;

        width: 100%;
    }


    /* Every card gets the same width */
    .vision-card,
    .vision-card-large,
    .vision-card-blue {
        width: 100% !important;

        min-width: 0;

        min-height: 0 !important;

        margin: 0 !important;

        box-sizing: border-box;
    }


    /* Image */
    .vision-card-image {
        width: 100%;

        height: 180px;

        overflow: hidden;
    }

    .vision-card-image img {
        width: 100%;
        height: 100%;

        object-fit: cover;

        display: block;
    }


    /* Card text */
    .vision-card-content {
        position: relative;

        padding: 18px 14px 24px !important;

        min-height: 210px;

        box-sizing: border-box;
    }


    .vision-card-number {
        font-size: 8px;

        letter-spacing: 1.5px;
    }


    .vision-card-category {
        display: block;

        margin-top: 12px;

        font-size: 6px;

        letter-spacing: 1.8px;
    }


    .vision-card h3 {
        margin-top: 14px;

        font-size: 27px !important;

        line-height: 0.98;

        letter-spacing: -0.4px;
    }


    .vision-card p {
        margin-top: 14px;

        font-size: 9px !important;

        line-height: 1.6;
    }


    /* Arrow */
    .vision-card-arrow {
        right: 14px !important;

        bottom: 15px !important;

        font-size: 18px;
    }


    /* Blue card */
    .vision-card-blue .vision-card-content {
        padding: 18px 14px 24px !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .vision-grid {
        gap: 9px;
    }

    .vision-card-image {
        height: 150px;
    }

    .vision-card-content {
        padding: 15px 11px 22px !important;

        min-height: 195px;
    }

    .vision-card-number {
        font-size: 7px;
    }

    .vision-card-category {
        font-size: 5.5px;

        letter-spacing: 1.4px;
    }

    .vision-card h3 {
        font-size: 23px !important;
    }

    .vision-card p {
        font-size: 8px !important;

        line-height: 1.55;
    }

    .vision-card-arrow {
        right: 11px !important;
        bottom: 12px !important;
    }

}

/* =========================================================
   FINAL GLOBAL HORIZONTAL SCROLL FIX
   Applies to ALL pages
   ========================================================= */

/* Never allow the document itself to become wider than the screen */
html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: clip;
}


/* Make every element respect the viewport */
*,
*::before,
*::after {
    box-sizing: border-box;
}


/* Prevent images, videos and other media from creating overflow */
img,
video,
iframe,
svg,
canvas {
    max-width: 100%;
}


/* Prevent sections/containers from becoming wider than viewport */
section,
header,
footer,
main,
article,
aside,
nav,
div {
    max-width: 100%;
}


/* Flex and grid children must be allowed to shrink */
.flex,
[class*="container"],
[class*="inner"],
[class*="content"],
[class*="grid"],
[class*="row"] {
    min-width: 0;
}


/* Prevent long text/links from forcing horizontal scrolling */
p,
a,
span,
h1,
h2,
h3,
h4,
h5,
h6,
li {
    max-width: 100%;
    overflow-wrap: break-word;
}


/* Tables should never push the page wider */
table {
    max-width: 100%;
}


/* =========================================================
   MOBILE — EXTRA PROTECTION
   ========================================================= */

@media (max-width: 900px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    main,
    section,
    article,
    header,
    footer {
        width: 100%;
        max-width: 100%;
    }

    img {
        max-width: 100%;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 500px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

}

/* =========================================================
   VISION CARDS — IMAGE AS FULL CARD BACKGROUND
   First 3 cards only
   Divine Home Canada is NOT affected
   ========================================================= */

.vision-card:not(.vision-card-blue) {
    position: relative;
    overflow: hidden;

    min-height: 520px;

    background: #0b2d3d;
}


/* Make the existing image fill the entire card */
.vision-card:not(.vision-card-blue) .vision-card-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;

    overflow: hidden;
}


/* Make the actual image cover the card */
.vision-card:not(.vision-card-blue) .vision-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    position: absolute;
    inset: 0;
}


/* Darken the image slightly so text can sit on top */
.vision-card:not(.vision-card-blue) .vision-card-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        to bottom,
        rgba(5, 24, 34, 0.12) 0%,
        rgba(5, 24, 34, 0.20) 45%,
        rgba(5, 24, 34, 0.72) 100%
    );

    z-index: 1;

    pointer-events: none;
}


/* Put the text over the image */
.vision-card:not(.vision-card-blue) .vision-card-content {
    position: relative;

    z-index: 2;

    min-height: 520px;

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

    background: transparent !important;

    color: #ffffff;

    padding: 45px 40px 40px !important;

    box-sizing: border-box;
}


/* Number */
.vision-card:not(.vision-card-blue) .vision-card-number {
    color: #d5a43b;
}


/* Category */
.vision-card:not(.vision-card-blue) .vision-card-category {
    color: #ffffff;
}


/* Main title */
.vision-card:not(.vision-card-blue) .vision-card-content h3 {
    color: #ffffff;
}


/* Description */
.vision-card:not(.vision-card-blue) .vision-card-content p {
    color: rgba(255, 255, 255, 0.82);
}


/* Arrow */
.vision-card:not(.vision-card-blue) .vision-card-arrow {
    color: #d5a43b;
}


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

@media (max-width: 700px) {

    .vision-card:not(.vision-card-blue) {
        min-height: 430px;
    }

    .vision-card:not(.vision-card-blue) .vision-card-content {
        min-height: 430px;

        padding: 25px 18px 24px !important;

        justify-content: flex-end;
    }

    .vision-card:not(.vision-card-blue) .vision-card-content h3 {
        font-size: 25px !important;

        line-height: 1.05;
    }

    .vision-card:not(.vision-card-blue) .vision-card-content p {
        font-size: 10px !important;

        line-height: 1.5;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .vision-card:not(.vision-card-blue) {
        min-height: 390px;
    }

    .vision-card:not(.vision-card-blue) .vision-card-content {
        min-height: 390px;

        padding: 20px 14px 20px !important;
    }

    .vision-card:not(.vision-card-blue) .vision-card-content h3 {
        font-size: 21px !important;
    }

}

.story-fourth .story-image img {
    object-position: center 15%;
}

/* Gold accent for founder signature title */
.founder-role {
    color: #0B82E3 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em;
    line-height: 1.6;
    margin-top: 10px;
}

/* =========================================================
   MOBILE HERO — MORE TRANSPARENT BLUE OVERLAY
   ========================================================= */

@media (max-width: 800px) {

    .hero-image::after {
        background: linear-gradient(
            to right,
            rgba(9, 42, 61, 0.45) 0%,
            rgba(9, 42, 61, 0.32) 33%,
            rgba(9, 42, 61, 0.16) 70%,
            rgba(9, 42, 61, 0.08) 99%
        );
    }

}

/* =========================================================
   MOBILE HERO — MATCH REFERENCE TEXT LAYOUT
========================================================= */

@media (max-width: 800px) {

    .hero-content {
        padding-left: 9vw;
        padding-right: 9vw;
    }

    .hero-content h1 {
        width: 290px;
        max-width: 290px;

        font-size: 60px;
        line-height: 0.96;

        letter-spacing: -0.02em;
    }

    .hero-content h1 em {
        display: inline;
    }

    .hero-content p {
        max-width: 350px;
        margin-top: 38px;

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

}