/* About Hero */
.about-hero {
    height: 60vh;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), 
                url('https://firebasestorage.googleapis.com/v0/b/instantcorp-2390d.firebasestorage.app/o/hero_about.webp?alt=media&token=976e42b6-c340-40c9-8daf-d1acb5ee4837') 
                center/cover no-repeat;
    display: flex;
    align-items: center; 
    justify-content: center; 
    text-align: center;
}

.about-title {
    font-size: clamp(5rem, 6vw, 5rem);
    line-height: 1.05;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: 1px;
}

/* Foundation Section */
.foundation {
    padding: 120px 0;
    background-color: var(--black);
}

.foundation-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 100px;
    align-items: start;
}

.foundation-left, .foundation-right {
    display: flex;
    flex-direction: column;
}

.foundation-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--white);
    padding-bottom: 32px;
}

.foundation-body-text p {
    color: var(--gray-text);
    margin-bottom: 25px;
    font-size: 1.05rem;
    line-height: 1.8;
}

.foundation-body-text p:first-child,
.info-block:first-child h4 {
    margin-top: 0 !important;
}

.info-block {
    margin-bottom: 50px;
    border-left: 3px solid var(--green); 
    padding-left: 30px;
}

.info-block h4 {
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    line-height: 1.2;
}

.info-block p {
    font-size: 0.95rem;
    color: var(--gray-text);
    line-height: 1.5;
}

/* Philosophy Section */
.philosophy {
    padding: 140px 0;
    background-color: var(--white);
    color: var(--black);
}

.philosophy-title {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 40px;
    letter-spacing: -2px;
}

.philosophy-p {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #444;
}

/* Vision Section */
.vision {
    padding: 120px 0;
    background-color: var(--black);
}

.vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.vision-img-content {
    width: 100%;
    filter: grayscale(20%);
    border: 1px solid var(--border);
}

.vision-title {
    font-family: var(--font-heading);
    padding-bottom: 20px;
    border-bottom: 3px solid var(--green);
    display: inline-block;
    margin-bottom: 30px;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.vision-p {
    color: var(--gray-text);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 40px;
}

.btn-outline-green {
    display: inline-block;
    padding: 12px 30px;
    border: 1px solid var(--green);
    color: var(--green);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    transition: var(--transition);
}

.btn-outline-green:hover {
    background-color: var(--green);
    color: var(--white);
}


/* About Page Mobile Overrides */
@media (max-width: 768px) {
    html, body { width: 100%; max-width: 100vw; overflow-x: hidden; position: relative; }
    .container { width: 100% !important; max-width: 100vw !important; padding-left: 20px !important; padding-right: 20px !important; margin: 0 auto !important; box-sizing: border-box; }
    .about-hero .container { padding-left: 0 !important; text-align: center; width: 100% !important; }
    .about-title { font-size: clamp(2rem, 8vw, 3rem) !important; padding-left: 20px !important; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100% !important; max-width: 100vw; text-align: center; }
    .about-hero { height: 50vh; }
    .foundation-grid, .vision-grid { display: flex; flex-direction: column; align-items: center; }
    .foundation-right { margin-top: 0 !important; }
    .foundation-title { font-size: 2rem !important; }
    .philosophy-title { font-size: 2.5rem !important; letter-spacing: -1px !important; }
    .philosophy-p { font-size: 1rem !important; }
    .vision-image { order: 2; }
    .vision-content { order: 1; text-align: center; }
    .vision-title { font-size: 2rem !important; width: 100%; text-align: center; }
}