/* =====================================
   UNIVERSAL STYLES (Shared by both pages)
   ===================================== */

/* Navbar Logo Hover Effect */
a[data-name="logo"]:hover p {
    color: #ff2525 !important;
    text-decoration: underline;
    transition: color 0.3s ease;
}

/* Wireframing Video Background */
.process-section[data-node-id="144:520-additional1"] .process-image-container {
    background-color: #e8e8e8;
    border-radius: 16px;
}

/* Next Project Navigation */
.next-project-nav {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

.next-project-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

.next-project-link {
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: -0.56px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.next-project-link:hover {
    color: #ff2525 !important;
}

/* Note: Hamburger and mobile menu styles are centralized in home-style.css */

/* Eye Candy Section */
.eye-candy-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
}

.eye-candy-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    width: 100%;
}

.eye-candy-image {
    height: 60vh;
    position: relative;
    border-radius: 16px;
    width: 100%;
}

.bg-white .eye-candy-image {
    aspect-ratio: 16/9;
}

.bg-black .eye-candy-image {
    aspect-ratio: 1920/1080;
    max-width: 1920px;
    max-height: 1080px;
}

.eye-candy-image img,
.eye-candy-image video {
    position: absolute;
    inset: 0;
    max-width: none;
    object-fit: cover;
    object-position: 50% 50%;
    pointer-events: none;
    border-radius: 16px;
    width: 100%;
    height: 100%;
}

/* Intro Title Section */
.intro-title-section {
    display: flex;
    flex-direction: column;
    gap: 90px;
    align-items: flex-start;
    position: relative;
    width: 100%;
    height: 100%;
}

.bg-white .intro-title-text {
    color: #000000;
}

.bg-black .intro-title-text {
    color: #f6f6f6;
}

.intro-title-text {
    font-family: 'Geist', sans-serif;
    font-weight: 600;
    line-height: normal;
    position: relative;
    flex-shrink: 0;
    font-size: 88px;
    letter-spacing: -1.76px;
    width: 813px;
}

.intro-details {
    display: flex;
    gap: 219px;
    align-items: flex-start;
    position: relative;
    flex-shrink: 0;
    width: 100%;
}

.impact-section {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: flex-start;
    line-height: normal;
    position: relative;
    flex-shrink: 0;
}

.bg-white .impact-label {
    color: #000000;
}

.bg-black .impact-label {
    color: white;
}

.impact-label {
    font-family: 'Geist Mono', monospace;
    font-weight: 300;
    position: relative;
    flex-shrink: 0;
    font-size: 20px;
    letter-spacing: 5px;
    text-transform: uppercase;
    width: 100%;
}

.bg-white .impact-value {
    color: #000000;
}

.bg-black .impact-value {
    color: #f6f6f6;
}

.impact-value {
    font-family: 'Geist', sans-serif;
    font-weight: 700;
    position: relative;
    flex-shrink: 0;
    font-size: 24px;
    width: 100%;
}

.weapons-section {
    display: flex;
    flex-direction: column;
    gap: 26px;
    align-items: flex-start;
    line-height: normal;
    position: relative;
    flex-shrink: 0;
    width: 300px;
}

.bg-white .weapons-label {
    color: #000000;
}

.bg-black .weapons-label {
    color: white;
}

.weapons-label {
    font-family: 'Geist Mono', monospace;
    font-weight: 300;
    position: relative;
    flex-shrink: 0;
    font-size: 20px;
    letter-spacing: 5px;
    text-transform: uppercase;
    width: 100%;
}

.bg-white .weapon-item {
    color: #000000;
}

.bg-black .weapon-item {
    color: #f6f6f6;
}

.weapon-item {
    font-family: 'Geist', sans-serif;
    font-weight: 700;
    font-style: normal;
    position: relative;
    flex-shrink: 0;
    font-size: 24px;
    width: 100%;
}

/* Timeframe Section */
.timeframe-section {
    display: flex;
    flex-direction: column;
    gap: 26px;
    align-items: flex-start;
    line-height: normal;
    position: relative;
    flex-shrink: 0;
}

.bg-white .timeframe-label {
    color: #000000;
}

.bg-black .timeframe-label {
    color: white;
}

.timeframe-label {
    font-family: 'Geist Mono', monospace;
    font-weight: 300;
    position: relative;
    flex-shrink: 0;
    font-size: 20px;
    letter-spacing: 5px;
    text-transform: uppercase;
    width: 100%;
}

.bg-white .timeframe-value {
    color: #000000;
}

.bg-black .timeframe-value {
    color: #f6f6f6;
}

.timeframe-value {
    font-family: 'Geist', sans-serif;
    font-weight: 700;
    position: relative;
    flex-shrink: 0;
    font-size: 24px;
    width: 100%;
}

/* Problem Statement Section */
.problem-statement-section {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-end;
    position: relative;
    width: 100%;
    height: 100%;
}

.problem-content {
    display: flex;
    flex-direction: column;
    gap: 181px;
    align-items: flex-start;
    position: relative;
    flex-shrink: 0;
    width: 774px;
}

.intro-info {
    display: flex;
    flex-direction: column;
    gap: 42px;
    align-items: flex-start;
    position: relative;
    flex-shrink: 0;
    width: 100%;
}

.description-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex-shrink: 0;
    width: 100%;
}

.bg-white .square-divide {
    background-color: #000000;
}

.bg-black .square-divide {
    background-color: white;
}

.square-divide {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

.bg-white .description-label {
    color: #000000;
}

.bg-black .description-label {
    color: white;
}

.description-label {
    font-family: 'Geist Mono', monospace;
    font-weight: 300;
    line-height: normal;
    position: relative;
    flex-shrink: 0;
    font-size: 20px;
    text-align: right;
    letter-spacing: 5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.bg-white .description-label {
    width: 280px;
}

.bg-black .description-label {
    width: 250px;
}

.bg-white .description-text {
    color: #000000;
}

.bg-black .description-text {
    color: #f6f6f6;
}

.description-text {
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    line-height: normal;
    font-style: normal;
    position: relative;
    flex-shrink: 0;
    font-size: 48px;
    width: 100%;
}

.description-text .highlight-number {
    letter-spacing: -2.4px;
}

.description-text .highlight-percent {
    letter-spacing: -0.96px;
}

.description-text .highlight-text {
    letter-spacing: -0.96px;
}

/* Divider Section */
.divider-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    height: 100%;
}

.bg-white .divider-square {
    background-color: #000000;
}

.bg-black .divider-square {
    background-color: #f6f6f6;
}

.divider-square {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

/* Solution Section */
.solution-section {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    width: 100%;
    height: 100%;
}

.bg-white .solution-number {
    color: #000000;
}

.bg-black .solution-number {
    color: white;
}

.solution-number {
    font-family: 'Geist Mono', monospace;
    font-weight: 300;
    line-height: 100px;
    position: relative;
    flex-shrink: 0;
    font-size: 210px;
    white-space: nowrap;
    letter-spacing: -4.2px;
}

.solution-text-container {
    display: inline-grid;
    grid-template-columns: max-content;
    grid-template-rows: max-content;
    place-items: end;
    position: relative;
    flex-shrink: 0;
}

.bg-white .solution-text {
    color: #ff2525;
}

.bg-black .solution-text {
    color: white;
}

.solution-text {
    grid-area: 1 / 1;
    font-family: 'Geist', sans-serif;
    font-weight: 600;
    line-height: 100px;
    margin-left: 0;
    margin-top: 0;
    position: relative;
    font-size: 88px;
    white-space: nowrap;
    letter-spacing: -1.76px;
}

.solution-text p {
    margin-bottom: 0;
}

/* Section 01 - Defining The Problem */
.section-01 {
    box-sizing: border-box;
    display: flex;
    gap: 355px;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    width: 100%;
    height: 100%;
}

.bg-white .section-01-number {
    color: #000000;
}

.bg-black .section-01-number {
    color: white;
}

.section-01-number {
    font-family: 'Geist Mono', monospace;
    font-weight: 300;
    line-height: 100px;
    position: relative;
    flex-shrink: 0;
    font-size: 210px;
    letter-spacing: -4.2px;
    width: 248px;
}

.section-01-text-container {
    display: inline-grid;
    grid-template-columns: max-content;
    grid-template-rows: max-content;
    place-items: end;
    position: relative;
    flex-shrink: 0;
}

.bg-white .section-01-text {
    color: #ff2525;
}

.bg-black .section-01-text {
    color: white;
}

.section-01-text {
    grid-area: 1 / 1;
    font-family: 'Geist', sans-serif;
    font-weight: 600;
    line-height: 100px;
    margin-left: 0;
    margin-top: 0;
    position: relative;
    font-size: 88px;
    white-space: nowrap;
    letter-spacing: -1.76px;
}

.section-01-text p {
    margin-bottom: 0;
}

/* Research Content Section */
.research-content {
    display: flex;
    flex-direction: column;
    gap: 153px;
    align-items: flex-start;
    position: relative;
    width: 100%;
    height: 100%;
}

.research-item {
    display: flex;
    flex-direction: column;
    gap: 26px;
    align-items: flex-start;
    position: relative;
    flex-shrink: 0;
}

.research-item-right {
    align-items: flex-end;
}

.research-item-full {
    width: 100%;
}

.research-item-left {
    width: 583px;
}

.research-item-center {
    width: 1182px;
}

.research-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex-shrink: 0;
    width: 100%;
}

.research-header-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex-shrink: 0;
    width: 100%;
}

.bg-white .research-label {
    color: #000000;
}

.bg-black .research-label {
    color: white;
}

.research-label {
    font-family: 'Geist Mono', monospace;
    font-weight: 300;
    line-height: normal;
    position: relative;
    flex-shrink: 0;
    font-size: 20px;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.research-label-broad {
    width: 222.426px;
}

.research-label-interviews {
    width: 293.103px;
}

.bg-white .research-square {
    background-color: #000000;
}

.bg-black .research-square {
    background-color: white;
}

.research-square {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

.research-square-right {
    width: 10.426px;
    height: 12px;
}

.research-square-interviews {
    width: 12px;
    height: 12px;
}

.bg-white .research-text {
    color: #000000;
}

.bg-black .research-text {
    color: #f6f6f6;
}

.research-text {
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    line-height: normal;
    font-style: normal;
    position: relative;
    flex-shrink: 0;
    font-size: 48px;
    letter-spacing: -0.96px;
}

.research-text-broad {
    width: 567px;
}

.research-text-interviews {
    width: 100%;
}

.research-text-insights {
    width: 784px;
}

.research-squares-container {
    grid-area: 1 / 1;
    display: inline-grid;
    grid-template-columns: max-content;
    grid-template-rows: max-content;
    place-items: start;
    margin-left: 0;
    margin-top: 0;
    position: relative;
}

.bg-white .research-square-left {
    background-color: #000000;
}

.bg-black .research-square-left {
    background-color: white;
}

.research-square-left {
    grid-area: 1 / 1;
    height: 12px;
    margin-left: 0;
    margin-top: 0;
    width: 11.804px;
}

.bg-white .research-square-right-insights {
    background-color: #000000;
}

.bg-black .research-square-right-insights {
    background-color: white;
}

.research-square-right-insights {
    grid-area: 1 / 1;
    height: 12px;
    margin-left: 770.196px;
    margin-top: 0;
    width: 11.804px;
}

.bg-white .research-text-positioned {
    color: #000000;
}

.bg-black .research-text-positioned {
    color: #f6f6f6;
}

.research-text-positioned {
    grid-area: 1 / 1;
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    line-height: normal;
    margin-left: 0;
    margin-top: 132.859px;
    font-style: normal;
    position: relative;
    font-size: 48px;
    letter-spacing: -0.96px;
    width: 784px;
}

/* Section 02 - Ideation Techniques */
.section-02 {
    display: flex;
    gap: 481px;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
}

.section-02-text-container {
    display: inline-grid;
    grid-template-columns: max-content;
    grid-template-rows: max-content;
    place-items: end;
    position: relative;
    flex-shrink: 0;
}

.bg-white .section-02-text {
    color: #ff2525;
}

.bg-black .section-02-text {
    color: white;
}

.section-02-text {
    grid-area: 1 / 1;
    font-family: 'Geist', sans-serif;
    font-weight: 600;
    line-height: 100px;
    margin-left: 0;
    margin-top: 0;
    position: relative;
    font-size: 88px;
    white-space: nowrap;
    letter-spacing: -1.76px;
}

.section-02-text p {
    margin-bottom: 0;
}

.bg-white .section-02-number {
    color: #000000;
}

.bg-black .section-02-number {
    color: white;
}

.section-02-number {
    font-family: 'Geist Mono', monospace;
    font-weight: 300;
    line-height: 100px;
    position: relative;
    flex-shrink: 0;
    font-size: 210px;
    text-align: right;
    letter-spacing: -4.2px;
    width: 248px;
}

/* Process Section */
.process-section {
    display: flex;
    flex-direction: column;
    gap: 51px;
    align-items: flex-start;
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.process-row {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

.process-item {
    display: flex;
    flex-direction: column;
    gap: 27px;
    align-items: flex-start;
    position: relative;
    flex-shrink: 0;
    width: calc(50% - 24px);
    box-sizing: border-box;
}

/* Full width process item for additional work */
.process-item-full-width {
    width: 100%;
    max-width: 100%;
}

.process-item-full-width .process-image-container {
    width: 100%;
}

.process-item-full-width .process-image {
    width: 100%;
    aspect-ratio: 21/9;
    object-fit: cover;
    object-position: center;
    max-width: 100%;
    height: auto;
}

.process-item-right {
    align-items: flex-start;
}

.process-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex-shrink: 0;
    width: 100%;
    min-height: 0;
    min-width: 0;
    flex-basis: 0;
    flex-grow: 1;
}

.process-item-right .process-header {
    flex-direction: row;
    justify-content: space-between;
}

.bg-white .process-label {
    color: #000000;
}

.bg-black .process-label {
    color: white;
}

.process-label {
    font-family: 'Geist Mono', monospace;
    font-weight: 300;
    line-height: normal;
    position: relative;
    flex-shrink: 0;
    font-size: 20px;
    text-align: right;
    letter-spacing: 5px;
    text-transform: uppercase;
    width: 449px;
}

.process-label-left {
    text-align: left;
}

/* Force User Flow Testing to left align */
.process-label[data-node-id="144:525-userflow"] {
    text-align: left !important;
}

.bg-white .process-square {
    background-color: #000000;
}

.bg-black .process-square {
    background-color: white;
}

.process-square {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

.process-image-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    flex-shrink: 0;
    width: 100%;
}

.process-square-placeholder {
    background-color: #d9d9d9;
    border-radius: 16px;
    flex-shrink: 0;
    border: 2px solid #666;
    width: 100%;
    aspect-ratio: 1;
}

.process-item-right .process-square-placeholder {
    width: 100%;
    max-width: 100%;
}

/* Process images and videos - match placeholder dimensions */
.process-image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 16px;
    flex-shrink: 0;
}

.process-item-right .process-image {
    width: 100%;
    max-width: 100%;
}

/* Video elements in process containers */
.process-image-container video {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 16px;
    flex-shrink: 0;
}

/* Black background for noti.mp4 container */
.process-image-container:has(video[src*="noti.mp4"]) {
    background-color: #000000;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Scale down and center noti.mp4 video specifically */
.process-image-container video[src*="noti.mp4"] {
    width: 70%;
    height: 70%;
    object-fit: contain;
    margin: auto;
    display: block;
    border-radius: 16px;
}

/* Show right side of Team Collaboration image */
.process-image-container img[src*="meeting.avif"] {
    object-position: right center;
}

.process-bottom-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex-shrink: 0;
    width: 100%;
}

.bg-white .process-bottom-label {
    color: #000000;
}

.bg-black .process-bottom-label {
    color: white;
}

.process-bottom-label {
    font-family: 'Geist Mono', monospace;
    font-weight: 300;
    line-height: normal;
    position: relative;
    flex-shrink: 0;
    font-size: 20px;
    white-space: nowrap;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.bg-white .process-description {
    color: #000000;
}

.bg-black .process-description {
    color: #f6f6f6;
}

.process-description {
    font-family: 'Geist', sans-serif;
    font-weight: 600;
    line-height: 1.5;
    position: relative;
    flex-shrink: 0;
    font-size: 20px;
    margin-top: 16px;
    width: 100%;
}

/* Section 03 - Final Prototype */
.section-03 {
    box-sizing: border-box;
    display: flex;
    gap: 355px;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    width: 100%;
    height: 100%;
}

.bg-white .section-03-number {
    color: #000000;
}

.bg-black .section-03-number {
    color: white;
}

.section-03-number {
    font-family: 'Geist Mono', monospace;
    font-weight: 300;
    line-height: 100px;
    position: relative;
    flex-shrink: 0;
    font-size: 210px;
    letter-spacing: -4.2px;
    width: 248px;
}

.section-03-text-container {
    display: inline-grid;
    grid-template-columns: max-content;
    grid-template-rows: max-content;
    place-items: end;
    position: relative;
    flex-shrink: 0;
}

.bg-white .section-03-text {
    color: #ff2525;
}

.bg-black .section-03-text {
    color: white;
}

.section-03-text {
    grid-area: 1 / 1;
    font-family: 'Geist', sans-serif;
    font-weight: 600;
    line-height: 100px;
    margin-left: 0;
    margin-top: 0;
    position: relative;
    font-size: 88px;
    white-space: nowrap;
    letter-spacing: -1.76px;
}

.section-03-text p {
    margin-bottom: 0;
}

/* =====================================
   MEDIA QUERIES - Tablet (600px to 999px)
   ===================================== */
@media screen and (min-width: 600px) and (max-width: 999px) {
    /* Show hamburger on tablet */
    .hamburger {
        display: block !important;
    }
    
    /* Hide desktop nav links and email on tablet */
    nav > div > div:nth-child(2),
    nav > div > button#email-copy {
        display: none !important;
    }
    
    /* Adjust navbar for tablet */
    nav > div {
        justify-content: space-between !important;
    }
    
    .eye-candy-image {
        height: 50vh;
        width: 100%;
    }
    
    /* Adjust section alignment for tablet - match desktop behavior */
    .section-01 {
        gap: 0;
        justify-content: space-between;
    }
    
    .solution-section {
        gap: 0;
        justify-content: space-between;
        display: flex;
        align-items: center;
    }
    
    .section-02 {
        gap: 0;
        justify-content: space-between;
        flex-direction: row-reverse;
    }
    
    .section-03 {
        gap: 0;
        justify-content: space-between;
    }
    
    /* Adjust font sizes for tablet */
    .section-01-number,
    .section-02-number,
    .section-03-number,
    .solution-number {
        font-size: 160px;
        line-height: 80px;
        width: 180px;
    }
    
    .section-01-text,
    .section-02-text,
    .section-03-text,
    .solution-text {
        font-size: 64px;
        line-height: 80px;
        white-space: normal;
        width: 100%;
        max-width: 100%;
    }
    
    .section-01-text-container,
    .section-02-text-container,
    .section-03-text-container,
    .solution-text-container {
        display: flex !important;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        max-width: 100%;
        flex-shrink: 1 !important;
        flex-grow: 1;
    }
    
    .solution-text {
        width: auto !important;
        max-width: none !important;
    }
    
    .section-01-text,
    .section-02-text,
    .section-03-text {
        width: auto !important;
        max-width: none !important;
    }
    
    /* Adjust process sections for tablet */
    .process-row {
        flex-direction: column;
        gap: 40px;
    }
    
    .process-item {
        width: 100%;
    }
    
    .process-item-right {
        align-items: flex-start;
    }
    
    .process-item-right .process-header {
        flex-direction: row;
        justify-content: space-between;
    }
    
    /* Adjust intro info sections for tablet */
    .intro-info {
        gap: 30px;
        width: 100%;
        max-width: 100%;
    }
    
    .problem-content {
        width: 100%;
        max-width: 100%;
        gap: 120px;
    }
    
    .description-text {
        font-size: 48px;
        line-height: normal;
        width: 100%;
    }
    
    /* Adjust research sections for tablet */
    .research-item {
        width: 100%;
    }
    
    .research-item-left {
        width: 100%;
    }
    
    .research-item-center {
        width: 100%;
    }
    
    .research-item-right {
        align-items: flex-start;
        width: 100%;
    }
    
    /* Adjust research text for tablet */
    .research-text-broad,
    .research-text-interviews,
    .research-text-insights,
    .research-text-positioned {
        width: 100%;
    }
    
    .research-label-broad,
    .research-label-interviews {
        width: auto;
    }
    
    /* Adjust intro title for tablet */
    .intro-title-text {
        width: 100%;
        font-size: 88px;
        line-height: normal;
        letter-spacing: -1.76px;
    }
    
    /* Adjust process labels for tablet */
    .process-label {
        width: auto;
    }
    
    /* Fix weapons section for tablet */
    .weapons-section {
        width: 100%;
        max-width: 100%;
    }
    
    /* Fix impact section for tablet */
    .impact-section {
        width: 100%;
        max-width: 100%;
    }
    
    /* Fix timeframe section for tablet */
    .timeframe-section {
        width: 100%;
        max-width: 100%;
    }
    
    /* Fix intro details container for tablet */
    .intro-details {
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        gap: 40px;
    }
    
    /* Ensure all containers respect margins */
    .problem-statement-section,
    .research-content,
    .process-section {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* =====================================
   MEDIA QUERIES - Mini-Tablet (600px to 730px)
   ===================================== */
@media screen and (min-width: 600px) and (max-width: 730px) {
    .eye-candy-image {
        height: 40vh;
        width: 100%;
    }
    
    /* Further reduce section gaps for mini-tablet */
    .section-01,
    .solution-section,
    .section-02,
    .section-03 {
        gap: 100px;
        justify-content: space-between;
    }
    
    /* Hide big numbers on mini-tablet */
    .section-01-number,
    .section-02-number,
    .section-03-number,
    .solution-number {
        display: none;
    }
    
    .section-01-text,
    .section-02-text,
    .section-03-text,
    .solution-text {
        font-size: 64px;
        line-height: 80px;
        white-space: normal;
        width: 100%;
        max-width: 100%;
    }
    
    .section-01-text-container,
    .section-02-text-container,
    .section-03-text-container,
    .solution-text-container {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
    }
    
    /* Adjust intro title for mini-tablet */
    .intro-title-text {
        width: 100%;
        font-size: 64px;
        line-height: 70px;
        letter-spacing: -1.28px;
    }
    
    /* Adjust description text for mini-tablet */
    .description-text {
        font-size: 36px;
        line-height: normal;
        width: 100%;
    }
    
    /* Adjust process sections for mini-tablet */
    .process-row {
        flex-direction: column;
        gap: 30px;
    }
    
    .process-item {
        width: 100%;
    }
    
    .process-item-right {
        align-items: flex-start;
    }
    
    .process-item-right .process-header {
        flex-direction: row;
        justify-content: flex-start;
    }
    
    /* Adjust intro info sections for mini-tablet */
    .intro-info {
        gap: 20px;
        width: 100%;
        max-width: 100%;
    }
    
    .problem-content {
        width: 100%;
        max-width: 100%;
        gap: 80px;
    }
    
    /* Fix weapons and impact sections for mini-tablet */
    .weapons-section,
    .impact-section,
    .timeframe-section {
        width: 100%;
        max-width: 100%;
    }
    
    .intro-details {
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        gap: 30px;
    }
    
    /* Adjust research sections for mini-tablet */
    .research-item,
    .research-item-left,
    .research-item-center,
    .research-item-right {
        width: 100%;
    }
    
    .research-text-broad,
    .research-text-interviews,
    .research-text-insights,
    .research-text-positioned {
        width: 100%;
    }
    
    .research-label-broad,
    .research-label-interviews {
        width: auto;
    }
    
    .process-label {
        width: auto;
    }
    
    /* Ensure all containers respect margins */
    .problem-statement-section,
    .research-content,
    .process-section {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* =====================================
   MEDIA QUERIES - Mobile (below 600px)
   ===================================== */
@media screen and (max-width: 599px) {
    /* Show hamburger on mobile */
    .hamburger {
        display: block !important;
    }
    
    /* Hide desktop nav links and email on mobile */
    nav > div > div:nth-child(2),
    nav > div > button#email-copy {
        display: none !important;
    }
    
    /* Adjust navbar for mobile */
    nav {
        padding: 1.5rem 1rem !important;
    }
    
    nav > div {
        justify-content: space-between !important;
    }
    
    .eye-candy-image {
        height: 30vh;
        width: 100%;
    }
    
    /* Mobile section layout - stack vertically */
    .section-01,
    .solution-section,
    .section-02,
    .section-03 {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    /* Hide numbers on mobile */
    .section-01-number,
    .section-02-number,
    .section-03-number,
    .solution-number {
        display: none;
    }
    
    /* Mobile typography */
    .section-01-text,
    .section-02-text,
    .section-03-text,
    .solution-text {
        font-size: 64px;
        line-height: 80px;
        white-space: normal;
        width: 100%;
        max-width: 100%;
    }
    
    .section-01-text-container,
    .section-02-text-container,
    .section-03-text-container,
    .solution-text-container {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
    }
    
    /* Mobile intro title */
    .intro-title-text {
        width: 100%;
        font-size: 64px;
        line-height: 80px;
        letter-spacing: -1.28px;
    }
    
    /* Mobile description text */
    .description-text {
        font-size: 28px;
        line-height: 1.4;
        width: 100%;
    }
    
    /* Mobile intro details */
    .intro-details {
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        gap: 20px;
    }
    
    .weapons-section,
    .impact-section,
    .timeframe-section {
        width: 100%;
        max-width: 100%;
    }
    
    /* Mobile process sections */
    .process-row {
        flex-direction: column;
        gap: 20px;
    }
    
    .process-item {
        width: 100%;
    }
    
    .process-item-right {
        align-items: flex-start;
    }
    
    .process-item-right .process-header {
        flex-direction: row;
        justify-content: space-between;
    }
    
    .process-label {
        width: auto;
        font-size: 14px;
    }
    
    /* Mobile intro info sections */
    .intro-info {
        gap: 15px;
        width: 100%;
        max-width: 100%;
    }
    
    .problem-content {
        width: 100%;
        max-width: 100%;
        gap: 40px;
    }
    
    /* Mobile research sections */
    .research-item,
    .research-item-left,
    .research-item-center,
    .research-item-right {
        width: 100%;
    }
    
    .research-text-broad {
        width: 100%;
        font-size: 28px;
        line-height: 1.4;
    }
    
    .research-text-interviews,
    .research-text-insights,
    .research-text-positioned {
        width: 100%;
        font-size: 16px;
        line-height: 1.5;
    }
    
    .research-label-broad,
    .research-label-interviews {
        width: auto;
        font-size: 14px;
    }
    
    .description-label {
        font-size: 14px;
        letter-spacing: 5px;
        text-transform: uppercase;
    }
    
    .impact-label,
    .weapons-label,
    .timeframe-label,
    .process-bottom-label {
        font-size: 14px;
    }
    
    /* Mobile divider sections */
    .divider-section {
        gap: 0;
        justify-content: space-between;
        align-items: center;
    }
    
    .divider-square {
        width: 12px;
        height: 12px;
    }
    
    /* Ensure all containers respect margins */
    .problem-statement-section,
    .research-content,
    .process-section {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Mobile container fixes */
    .intro-title-section,
    .problem-statement-section,
    .solution-section,
    .section-01,
    .section-02,
    .section-03,
    .research-item,
    .process-section {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Mobile body and container reset */
    body {
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }
    
    .container,
    main {
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }
    
    /* Mobile text overflow fixes */
    .intro-title-text,
    .description-text,
    .research-text-broad,
    .research-text-interviews,
    .research-text-insights,
    .research-text-positioned,
    .process-description {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: none;
    }
    
    /* Mobile square elements */
    .square-divide,
    .process-square,
    .research-square,
    .divider-square {
        flex-shrink: 0;
    }
    
    /* Mobile spacing adjustments */
    .my-24 {
        margin-top: 16px;
        margin-bottom: 16px;
    }
    
    .mt-24 {
        margin-top: 16px;
    }
    
    /* Mobile body and html fixes */
    body, html {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
}

/* =====================================
   MEDIA QUERIES - Desktop (1000px and up)
   ===================================== */
@media screen and (min-width: 1000px) {
    .eye-candy-image {
        height: 70vh;
        width: 100%;
    }
    
    .section-01 {
        justify-content: space-between;
        gap: 0;
    }
    
    .solution-section {
        justify-content: space-between;
        gap: 0;
    }
    
    .section-02 {
        justify-content: space-between;
        flex-direction: row-reverse;
        gap: 0;
    }
    
    .section-03 {
        justify-content: space-between;
        gap: 0;
    }
}

/* =====================================
   MEDIA QUERIES - Large Desktop (1400px+)
   ===================================== */
@media screen and (min-width: 1400px) {
    .eye-candy-image {
        height: 80vh;
    }
}

@media screen and (min-width: 1800px) {
    .eye-candy-image {
        height: 90vh;
    }
}