/* Who We Are Page Styles */

/* Wrapper */
.who-we-are-wrapper {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    overflow-x: hidden;
}

/* Base Layout */
.who-we-are-container {
    width: 100%;
    margin: 0 auto;
    padding: 64px 16px 80px;
    /* Mobile Padding */
    box-sizing: border-box;
}

/* Header */
.who-we-are-header {
    margin-bottom: 48px;
}

.final-statement-bold {
    font-weight: 700;
}

.page-label {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--color-charcoal);
    /* Use variable with fallback */
    text-transform: uppercase;
    margin-bottom: 16px;
    font-weight: 500;
}

.who-we-are-header h1 {
    font-family: 'loew-variable', sans-serif;
    font-size: 34px;
    font-weight: 700;
    font-stretch: 10%;
    letter-spacing: 0;
    /* Mobile size */
    line-height: 90%;
    color: var(--color-charcoal, #000);
    text-transform: uppercase;
    margin: 0;
}

/* Text Layout */
.who-we-are-text-grid {
    display: flex;
    flex-direction: column;
    /* Mobile: Stacked */
    gap: 32px;
}

.text-column p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-charcoal, #000);
    margin: 0 0 24px 0;
}

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

/* Left Column Styling (Bold) */
.left-column p {
    font-weight: 700;
    /* Bold/Heavy */
    font-family: 'Inter', sans-serif;
    /* Keep inter or maybe Loew if design implies? Visually looks like bold sans-serif. Inter Bold is mostly safe. */
    font-size: 18px;
    /* Slightly larger maybe? */
}

/* Right Column Styling */
.right-column .final-statement {
    font-weight: 400;
    margin-top: 24px;
}

/* Video Grid */
.who-we-are-video-grid {
    display: flex;
    flex-direction: row;
    /* Always row */
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow-x: hidden;
    gap: 8px;
    margin-top: 0;
}

.video-item {
    flex: 0 0 50vw;
    /* 50vw allows exactly half of side videos to be visible (100-50)/2 = 25vw visible side */
    height: 300px;
    border-radius: 4px;
    overflow: hidden;
}

.video-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* =========================================
   NAVBAR OVERRIDES (Black on White)
   ========================================= */
.who-we-are-navbar-wrapper .navbar .navbar-logo.white {
    opacity: 0 !important;
}

.who-we-are-navbar-wrapper .navbar .navbar-logo.black {
    opacity: 1 !important;
}

.who-we-are-navbar-wrapper .navbar .navbar-link {
    color: #000000 !important;
}

.who-we-are-navbar-wrapper .navbar .navbar-menu-icon {
    filter: invert(1);
}

.who-we-are-navbar-wrapper .navbar .navbar-mobile-toggle {
    color: #000000 !important;
}

.who-we-are-navbar-wrapper .navbar .navbar-dropdown {
    z-index: 29;
}


/* =========================================
   MEDIA QUERIES
   ========================================= */

/* Tablet */
@media (min-width: 481px) {
    .who-we-are-container {
        padding: 80px 40px;
    }

    .who-we-are-header h1 {
        font-size: 54px;
    }

    .page-label {
        font-size: 11px;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    .who-we-are-container {
        padding: 64px;
        max-width: 1440px;
    }

    .page-label {
        font-size: 12px;
        margin-bottom: 16px;
    }

    .who-we-are-header h1 {
        font-size: 54px;
        /* Large desktop impact */
        margin-bottom: 64px;
        max-width: 1200px;
        /* Prevent it getting too wide if lines are short */
    }

    .who-we-are-text-grid {
        flex-direction: row;
        gap: 32px;
        align-items: flex-start;
    }

    .text-column {
        flex: 1;
        /* Equal width */
    }

    .left-column p {
        font-size: 24px;
        line-height: 1;
        font-family: Arial, Helvetica, sans-serif;
        /* Or bold Inter - design looks like a standard grotesque bold */
        font-weight: 700;
        color: var(--color-charcoal);
        /* Slightly lighter than pure black if needed, or charcoal */
    }

    .right-column p {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 24px;
        line-height: 1;
        font-weight: 400;
        letter-spacing: -0.48px;
    }

    .right-column .final-statement {
        font-size: 24px;
        font-weight: 400;
        letter-spacing: -0.48px;
        line-height: 1;
    }

    /* Desktop Video Grid */
    .who-we-are-video-grid {
        display: flex;
        /* Override mobile display:none */
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 16px;
        width: 100%;
        overflow-x: hidden;
        margin-top: 0;
        padding-bottom: 64px;
    }

    .video-item {
        flex: 0 0 45vw;
        /* Fixed width > 33% to force cut-off */
        height: 600px;
        aspect-ratio: auto;
        border-radius: 0;
    }

    .video-item video {
        object-fit: cover;
    }
}


/* =========================================
   VALUES SECTION
   ========================================= */
.who-we-are-values-section {
    width: 100%;
    /* linear-gradient(148.36deg, #FFFFFF 33.34%, #E2FC53 100.84%) */
    background: linear-gradient(148.36deg, #FFFFFF 33.34%, #E2FC53 100.84%);
    padding: 80px 16px;
    box-sizing: border-box;
}

.values-container {
    /* Constrain width inside section */
    margin: 0 auto;
    width: 100%;
}

/* 3 Cards Grid */
.values-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 80px;
}

.values-card {
    background: #F0F0F0;
    border-radius: 8px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.values-badge {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.values-card-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--color-charcoal);
}

.values-card-text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1;
    color: var(--color-charcoal);
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.48px;
}

/* Intro */
.values-intro {
    margin-bottom: 48px;
}

.values-label {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--color-charcoal);
    margin-bottom: 16px;
    font-weight: 400;
}

.values-heading {
    font-family: 'Inter', sans-serif;
    font-family: Arial, Helvetica, sans-serif;
    /* Matching design clean look */
    font-size: 24px;
    font-weight: 400;
    /* Regular */
    line-height: 1;
    color: var(--color-charcoal);
    margin: 0;
    max-width: 800px;
}

/* Split Layout */
.values-split-layout {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.values-image-wrapper {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.values-main-image {
    width: 100%;
    height: auto;
    display: block;
    max-width: 784px;
    max-height: 715px;
    object-fit: cover;
    object-position: top center;
}

/* Accordion */
.values-accordion-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.values-accordion-item {
    background: #FFFFFF;
    border-radius: 4px;
    overflow: hidden;
}

.values-accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    background: #fff;
    border: none;
    cursor: pointer;
    text-align: left;
    margin-bottom: 24px;
}

.accordion-title {
    font-family: 'loew-variable', sans-serif;
    font-weight: 700;
    font-stretch: 10%;
    font-size: 24px;
    /* Mobile size */
    text-transform: uppercase;
    color: var(--color-charcoal);
    line-height: 1;
    padding-right: 16px;
}

.accordion-icon {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-charcoal);
}

.values-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.values-accordion-item {
    padding: 32px;
}

.accordion-desc {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1;
    color: var(--color-charcoal);
    margin-bottom: 24px;
}

.accordion-sublabel {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--color-charcoal);
}

.accordion-list {
    margin: 0 0 24px 0;
    padding-left: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--color-charcoal);
}

.accordion-list li {
    margin-bottom: 10px;
}

.accordion-steps {
    display: flex;
    flex-direction: column;
    /* Stack on mobile */
    gap: 16px;
    margin-bottom: 24px;
}

.step-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.step-item img {
    width: 32px;
    height: 32px;
}

.step-text {
    display: flex;
    flex-direction: column;
}

.step-num {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.step-name {
    font-size: 14px;
    line-height: 1.1;
    font-weight: 400;
}

.accordion-footer-text {
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-charcoal);
    margin: 0;
    letter-spacing: -0.12px;
}


/* Tablet+ / Desktop */
@media (min-width: 768px) {
    .values-cards-grid {
        flex-direction: row;
    }

    .values-card {
        flex: 1;
    }
}

@media (min-width: 1025px) {
    .who-we-are-values-section {
        padding: 0 64px 80px;
    }

    .values-split-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 32px;
    }

    .values-image-wrapper {
        flex: 1;
    }

    .values-accordion-wrapper {
        flex: 1;
    }

    .values-heading {
        font-size: 32px;
        line-height: 1;
    }

    .accordion-title {
        font-size: 24px;
        font-weight: 700;
        line-height: 1;
    }

    .accordion-steps {
        flex-direction: row;
        justify-content: space-between;
    }

    .step-item {
        flex: 1;
    }
}


/* =========================================
   PHILOSOPHY SECTION
   ========================================= */
.who-we-are-philosophy-section {
    background-color: #262626;
    /* Dark charcoal/black match design */
    padding: 80px 16px;
    width: 100%;
    color: #FFFFFF;
}

.philosophy-container {
    margin: 0 auto;
    width: 100%;
}

.philosophy-header {
    margin-bottom: 48px;
}

.philosophy-label {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #E2FC53;
    /* Fluoro yellow/green */
    margin-bottom: 32px;
    font-weight: 400;
}

.philosophy-heading {
    font-family: 'loew-variable', sans-serif;
    font-stretch: 10%;
    font-size: 48px;
    line-height: 90%;
    font-weight: 700;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0;
}

/* Philosophy Grid */
.philosophy-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 24px;
}

/* Removed images, so we can remove .philosophy-image-large and .philosophy-image-small styles */

.philosophy-content-col {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.philosophy-text-block p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.4;
    /* Increased line-height for better readability */
    margin-bottom: 24px;
    color: #F5F5F7;
    max-width: 800px;
    /* Constrain width for readability */
}

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

/* Beliefs Sub-section */
.philosophy-beliefs-row {
    display: flex;
    flex-direction: column;
    gap: 32px;
    /* Gap between heading and list on mobile */
    margin-top: 48px;
}

.beliefs-intro-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.beliefs-label {
    font-size: 10px;
    font-family: Arial, sans-serif;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--color-fluoro);
    text-transform: uppercase;
}

.beliefs-heading {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    line-height: 1.3;
    color: #FFFFFF;
    margin: 0;
    max-width: 400px;
    font-weight: 400;
}

.beliefs-list-col {
    display: flex;
    flex-direction: column;
}

.beliefs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.beliefs-list li {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: 'loew-variable', sans-serif;
    font-weight: 700;
    font-stretch: 10%;
    font-size: 20px;
    text-transform: uppercase;
    color: #FFFFFF;
}

.belief-icon {
    width: 48px;
    height: 48px;
}


/* Desktop Layout */
@media (min-width: 1025px) {
    .who-we-are-philosophy-section {
        padding: 80px 64px;
    }

    .philosophy-grid {
        /* No longer grid, just text block */
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .philosophy-content-col {
        /* Full width */
        flex-direction: column;
        justify-content: flex-start;
        gap: 0;
    }

    .philosophy-text-block p {
        font-size: 24px;
        /* Larger text on desktop */
        line-height: 1.4;
    }

    /* Beliefs Alignment Match */
    /* Beliefs Alignment Match */
    .philosophy-beliefs-row {
        flex-direction: row;
        align-items: flex-start;
        /* Match grid strictly */
        gap: 64px;
        padding-top: 64px;
    }

    .beliefs-intro-col {
        gap: 24px;
        flex: 1;
        /* Max-width removed to ensure equal column split matches row above */
    }

    .beliefs-list-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* Align vertically if needed, but top is fine */
        align-items: flex-start;
        /* Align list to left of its column */
        padding-top: 8px;
        /* Optical alignment with heading text */
    }

    .beliefs-heading {
        max-width: 100%;
        /* Increased from 320px to match 2-line wrap */
        font-size: 32px;
        line-height: 1;
        letter-spacing: -0.64px;
        /* Larger to match screenshot importance */
    }

    .beliefs-list li {
        font-size: 26px;
        /* Slightly larger for readability */
        margin-bottom: 40px;
        /* More space between items */
    }

    .values-cards-grid {
        gap: 32px;
    }

    .values-card-title {
        font-size: 12px;
    }

    .values-card-text {
        font-size: 24px;
    }

    .values-label {
        font-size: 12px;
    }

    .values-intro {
        margin-bottom: 64px;
    }

}

@media screen and (min-width: 1440px) {
    .accordion-title {
        font-size: 32px;
        line-height: 100%;
        letter-spacing: 0;
    }

    .accordion-desc {
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1.1;
    }

    .accordion-sublabel {
        font-size: 12px;
    }

    .accordion-list {
        font-size: 18px;
    }

    .accordion-list li {
        line-height: 1.1;
        font-weight: 400;
    }

    .step-num {
        font-size: 12px;
    }

    .step-name {
        font-size: 18px;
    }

    .accordion-footer-text {
        font-size: 18px;
        letter-spacing: -0.18px;
    }

    .philosophy-label {
        font-size: 12px;
        letter-spacing: 0;
    }

    .philosophy-text-block p {
        max-width: 650px;
        font-size: 32px;
    }

    .beliefs-label {
        font-size: 12px;
    }

    .who-we-are-header h1 {
        font-size: 96px;
        line-height: 90%;
        letter-spacing: 0;
    }

    .philosophy-heading {
        font-size: 64px;
        line-height: 90%;
        letter-spacing: 0;
    }

    .beliefs-list li {
        font-size: 32px;
    }

    .who-we-are-container {
        max-width: none;
        margin: 0;
    }
}