#dlf-hero {
    color: #ffffff;
}

#dlf-hero .dlf-info-label,
#dlf-hero .dlf-info-value,
#dlf-hero .dlf-info-projects__title,
#dlf-hero .dlf-info-projects ul li {
    color: #ffffff;
}

/* ═══════════════════════════════════════════════════
   SECTION 3 — COLOR PALETTE STRIP
   ════════════════════════════════════════════════════ */
.vmn-palette {
    display: flex;
    width: 100%;
    height: 12vw;
    min-height: 80px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.vmn-palette__color {
    flex: 1;
    height: 100%;
    transition: flex 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

.vmn-palette__color:hover {
    flex: 1.3;
}

/* ═══════════════════════════════════════════════════
   SECTION 4 — SYMBOL MEANING
   ════════════════════════════════════════════════════ */
.vmn-meaning {
    background-color: #ffffff;
    width: 100%;
    padding: 100px 0;
    display: flex;
    justify-content: center;
}

.vmn-meaning__container {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1440px;
    gap: 6rem;
    padding-left: 0;
    box-sizing: border-box;
}

.vmn-meaning__logo {
    flex: 0 0 27%;
}

.vmn-meaning__logo img {
    width: 100%;
    height: auto;
    display: block;
}

.vmn-meaning__text {
    flex: 1;
    padding-right: 20%;
    box-sizing: border-box;
}

.vmn-meaning__title {
    font-size: 20px;
    font-weight: 800;
    color: #66380b;
    /* Brand dark brown */
    margin-bottom: 30px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vmn-meaning__text p {
    font-size: 15px;
    line-height: 1.8;
    color: #444444;
    margin-bottom: 25px;
}

.vmn-meaning__text p:last-child {
    margin-bottom: 0;
}

.vmn-meaning__text p strong {
    font-weight: 700;
    color: #66380b;
    /* Brand dark brown for highlight */
}

@media (max-width: 1024px) {
    .vmn-meaning {
        padding: 60px 0;
    }

    .vmn-meaning__container {
        gap: 4rem;
    }

    .vmn-meaning__title {
        font-size: 18px;
    }

    .vmn-meaning__text {
        padding-right: 5%;
    }
}

@media (max-width: 768px) {
    #dlf-hero {
        background-color: #c9b3a0;
    }

    .vmn-meaning__container {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0;
        padding: 0 20px;
    }

    .vmn-meaning__logo {
        position: absolute;
        left: -10px;
        width: 55%;
        opacity: 0.18; /* Softer opacity for overlay text legibility */
        z-index: 1;
        pointer-events: none;
        flex: none;
    }

    .vmn-meaning__text {
        position: relative;
        z-index: 2;
        width: 100%;
        padding-left: 5%;
        padding-right: 5%;
        flex: none;
    }

    .vmn-meaning__title {
        text-align: left;
        font-size: 18px;
    }
}

/* ═══════════════════════════════════════════════════
   SECTION 5 — CONCEPT GRID
   ════════════════════════════════════════════════════ */
.vmn-concept {
    width: 100%;
    background-color: #ffffff;
    padding: 0;
    margin: 0;
}

.vmn-concept__container {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.vmn-concept__row-top,
.vmn-concept__row-bottom {
    display: flex;
    width: 100%;
}

.vmn-concept__col-left {
    width: 53.7%;
    flex-shrink: 0;
}

.vmn-concept__col-right {
    width: 46.3%;
    flex-shrink: 0;
}

.vmn-concept__row-top .vmn-concept__box {
    height: 18.65vw;
    min-height: 150px;
}

.vmn-concept__subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 18.65vw 18.65vw;
}

.vmn-concept__showcase {
    height: 37.3vw;
    min-height: 300px;
    margin: 0;
    padding: 0;
    display: flex;
    background-color: #b7a18a;
    /* Blends with the mockup background */
}

.vmn-concept__showcase img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.vmn-concept__box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    box-sizing: border-box;
}

.vmn-concept__box img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.vmn-concept__box:hover img {
    transform: scale(1.08);
}

.vmn-concept__box span {
    font-size: 30px;
    font-weight: 500;
    color: #66380b;
    /* Brand dark brown */
    text-transform: lowercase;
    letter-spacing: 0.5px;
}

.vmn-concept__box--bg-brown {
    background-color: #745a43;
    /* Medium Brown */
}

.vmn-concept__box--bg-white {
    background-color: #ffffff;
}

.vmn-concept__box--bg-light {
    background-color: #f0e4d8;
    /* Light Beige */
}

.vmn-concept__box--bg-tan {
    background-color: #b7a18a;
    /* Warm Tan */
}

@media (max-width: 1024px) {
    .vmn-concept__box span {
        font-size: 20px;
    }
}

@media (max-width: 768px) {

    .vmn-concept__row-top,
    .vmn-concept__row-bottom {
        flex-direction: column;
    }

    .vmn-concept__col-left,
    .vmn-concept__col-right {
        width: 100%;
    }

    .vmn-concept__row-top .vmn-concept__box {
        height: 150px;
    }

    .vmn-concept__subgrid {
        grid-template-rows: 150px 150px;
    }

    .vmn-concept__showcase {
        height: 300px;
    }

    .vmn-concept__box span {
        font-size: 18px;
    }
}

/* ═══════════════════════════════════════════════════
   SECTION 6 — BRAND IDENTITY SHOWCASE
   ════════════════════════════════════════════════════ */
.vmn-identity {
    width: 100%;
    background-color: #ffffff;
    padding: 0;
    margin: 0;
}

.vmn-identity__container {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    position: relative; /* Coordinate system for center ornament */
    overflow: hidden; /* Prevent horizontal overflow from shifted ornament */
}

.vmn-identity__row {
    display: flex;
    width: 100%;
}

.vmn-identity__col-left {
    width: 60%;
    flex-shrink: 0;
}

.vmn-identity__col-right {
    width: 40%;
    flex-shrink: 0;
}

/* Row 1 Styles */
.vmn-identity__store {
    height: 50vw;
    position: relative;
    z-index: 3; /* Photo overlaying ornament */
}

.vmn-identity__store img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vmn-identity__row1-right {
    height: 50vw;
    display: flex;
    flex-direction: column;
}

.vmn-identity__hand-top {
    height: 30vw;
    position: relative;
    z-index: 3; /* Photo overlaying ornament */
}

.vmn-identity__hand-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vmn-identity__crescent-box {
    height: 20vw;
    background-color: #ffffff;
    position: relative;
    z-index: 1; /* White box under ornament */
}

/* Row 2 Styles */
.vmn-identity__row2-left {
    height: 70vw;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
}

.vmn-identity__text-box {
    flex: 1;
    background-color: #ffffff;
    padding: 5vw 5vw 0 5vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    position: relative;
    z-index: 1; /* White box under ornament */
}

.vmn-identity__quote-title {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 2.5vw;
    font-weight: 500;
    color: #66380b; /* Brand dark brown */
    line-height: 1.4;
    letter-spacing: 0.5px;
    margin: 0;
    position: relative;
    z-index: 3; /* Text on top of ornament */
}

.vmn-identity__palette-dots {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 5.5vw; /* Increased spacing from text */
    margin-bottom: 1.5vw; /* Reduced bottom spacing by 50% */
    position: relative;
    z-index: 3; /* Dots on top of ornament */
}

.vmn-identity__dot {
    width: 7.5vw; /* Larger dots to span matching width */
    height: 7.5vw;
    min-width: 25px;
    min-height: 25px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.vmn-identity__business-cards {
    height: auto;
    padding: 0 5vw 5vw 5vw;
    box-sizing: border-box;
    background-color: #ffffff;
    position: relative;
    z-index: 3; /* Photo overlaying ornament */
}

.vmn-identity__business-cards img {
    width: 100%;
    height: auto;
    display: block;
}

.vmn-identity__tall-hand {
    height: 70vw;
    position: relative;
    z-index: 3; /* Photo overlaying ornament */
}

.vmn-identity__tall-hand img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Center ornament placed exactly at the intersection of the 4 cells */
.vmn-identity__center-ornament {
    position: absolute;
    left: 60%;
    top: 50vw;
    width: 32vw;
    height: 32vw;
    transform: translate(-50%, -50%);
    z-index: 2; /* Sandwiched between white boxes (1) and photos/text (3) */
    pointer-events: none;
}

.vmn-identity__center-ornament img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 768px) {
    .vmn-identity__row {
        flex-direction: column;
    }

    .vmn-identity__col-left,
    .vmn-identity__col-right {
        width: 100%;
    }

    .vmn-identity__store {
        height: 320px;
    }

    .vmn-identity__row1-right {
        height: auto;
    }

    .vmn-identity__hand-top {
        height: 250px;
    }

    .vmn-identity__crescent-box {
        display: none;
    }

    .vmn-identity__row2-left {
        height: auto;
        background-color: #ffffff;
    }

    .vmn-identity__text-box {
        height: auto;
        padding: 40px 25px 0 25px;
        gap: 0;
        position: relative;
    }

    .vmn-identity__quote-title {
        font-size: 28px;
    }

    .vmn-identity__quote-title br {
        display: block !important;
    }

    .vmn-identity__palette-dots {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-top: 40px; /* Increased top spacing */
        margin-bottom: 15px; /* Reduced bottom spacing by 50% */
    }

    .vmn-identity__dot {
        width: 16%;
        height: auto;
        aspect-ratio: 1 / 1;
        min-width: auto;
        min-height: auto;
    }

    .vmn-identity__business-cards {
        height: auto;
        padding: 0 25px 40px 25px;
        background-color: #ffffff;
    }

    .vmn-identity__business-cards img {
        width: 100%;
        height: auto;
    }

    .vmn-identity__tall-hand {
        height: 480px;
    }

    /* Hide center ornament on mobile to keep layout clean and avoid clashing with text */
    .vmn-identity__center-ornament {
        display: none;
    }

    /* Section 8 Mobile layout */
    .vmn-inspiration__container {
        padding: 6vw 4vw;
        gap: 6vw;
    }

    .vmn-inspiration__grid {
        flex-direction: column;
        gap: 6vw;
    }

    .vmn-inspiration__col {
        gap: 6vw;
    }

    .vmn-inspiration__col--left,
    .vmn-inspiration__col--right {
        width: 100% !important;
    }

    .vmn-inspiration__outro-banner {
        margin-top: 6vw;
    }
}

/* ═══════════════════════════════════════════════════
   SECTION 7 — BRAND GALLERY
   ════════════════════════════════════════════════════ */
.vmn-gallery {
    width: 100%;
    background-color: #ffffff;
    padding: 0;
    margin-top: -5px; /* Pull up by 5px to eliminate sub-pixel white line gap from viewport rounding and make sections completely flush */
    overflow: hidden;
}

.vmn-gallery__container {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.vmn-gallery__row {
    display: flex;
    width: 100%;
}

.vmn-gallery__col {
    width: 50%;
    flex-shrink: 0;
}

.vmn-gallery__col--crop {
    overflow: hidden;
}

.vmn-gallery__col img {
    width: 100%;
    height: auto;
    display: block;
}

.vmn-gallery__img--crop {
    transform: scale(1.3);
}

.vmn-gallery__billboard {
    width: 100%;
}

.vmn-gallery__billboard img {
    width: 100%;
    height: auto;
    display: block;
}

/* ═══════════════════════════════════════════════════
   SECTION 8 — BRAND INSPIRATION
   ════════════════════════════════════════════════════ */
.vmn-inspiration {
    width: 100%;
    background-color: #f0e4d8; /* Light Beige background */
    padding: 0;
    margin: 0;
}

.vmn-inspiration__container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 5vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4vw; /* gap between billboard and grid */
}

.vmn-inspiration__billboard {
    width: 100%;
}

.vmn-inspiration__billboard img {
    width: 100%;
    height: auto;
    display: block;
}

.vmn-inspiration__grid {
    display: flex;
    width: 100%;
    gap: 4vw; /* column gap */
}

.vmn-inspiration__col {
    display: flex;
    flex-direction: column;
    gap: 4vw; /* gap between stacked images */
}

.vmn-inspiration__col img {
    width: 100%;
    height: auto;
    display: block;
}

.vmn-inspiration__col--left {
    width: calc(56.3% - 2vw);
    flex-shrink: 0;
}

.vmn-inspiration__col--right {
    width: calc(43.7% - 2vw);
    flex-shrink: 0;
}

.vmn-inspiration__outro-banner {
    width: 100%;
    margin-top: 4vw; /* spacing from container grid above */
}

.vmn-inspiration__outro-banner img {
    width: 100%;
    height: auto;
    display: block;
}