/* ============================================================
   MAJHAIL — ABOUT PAGE STYLES
   ============================================================ */

/* === ABOUT HERO — horizontal split layout === */
.about-hero {
    display: grid; grid-template-columns: 1fr 1fr;
    min-height: 100vh; background-color: var(--color-text-main);
}
.about-hero-media { position: relative; overflow: hidden; }
.about-hero-media img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0.70;
    transform: scale(1.05); transition: transform 2.5s var(--ease-out-expo);
}
body.loaded .about-hero-media img { transform: scale(1); }

.about-hero-text {
    background-color: var(--color-bg);
    display: flex; flex-direction: column;
    justify-content: flex-end;
    padding: clamp(60px, 10vw, 140px) clamp(36px, 6vw, 100px);
    isolation: isolate;
}
.about-kicker {
    font-family: var(--font-body); font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 4px;
    color: var(--color-accent); margin-bottom: 24px;
}
.about-headline {
    font-size: clamp(3rem, 6vw, 7.5rem);
    font-weight: 500; color: var(--color-text-main);
    letter-spacing: -2.5px; line-height: 0.95;
}
.about-hero-sub {
    font-size: clamp(0.95rem, 1.2vw, 1.1rem); color: var(--color-text-muted);
    line-height: 1.7; margin-top: 36px; max-width: 380px;
    border-top: 1px solid var(--color-border); padding-top: 28px;
}

/* === STORY ===  */
.story-section { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 8vw, 110px); align-items: start; }
.story-block { border-top: 1px solid var(--color-border); padding-top: 36px; }
.story-block h3 { font-size: clamp(1.6rem, 2.2vw, 2.6rem); letter-spacing: -1px; margin-bottom: 22px; line-height: 1.1; }
.story-block p { font-size: clamp(0.95rem, 1.15vw, 1.05rem); color: var(--color-text-muted); line-height: 1.9; margin-bottom: 16px; }
.story-block p:last-child { margin-bottom: 0; }

/* === PHILOSOPHY BANNER === */
.philosophy-banner {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    color: #ffffff;
    padding: var(--space-lg) 0; text-align: center;
}
.philosophy-statement {
    font-family: var(--font-head); font-size: clamp(1.8rem, 3.5vw, 4rem);
    font-weight: 500; line-height: 1.2; letter-spacing: -1px;
    max-width: 1200px; margin: 0 auto; padding: 0 var(--edge-padding);
}
.philosophy-statement span { color: rgba(255,255,255,0.7); font-weight: 400; font-family: var(--font-body); }

/* === CORE TENETS === */
.values-section { padding: var(--space-lg) var(--edge-padding); max-width: 1920px; margin: 0 auto; }
.values-header {
    margin-bottom: clamp(50px, 7vw, 90px);
    display: flex; align-items: flex-end; justify-content: space-between;
    border-bottom: 1px solid var(--color-border); padding-bottom: 28px;
}
.values-header .section-title { flex: 1; }
.values-header-note { font-size: 0.95rem; color: var(--color-text-muted); max-width: 300px; text-align: right; line-height: 1.6; }

.values-list { display: flex; flex-direction: column; gap: 0; }
.value-row {
    display: grid; grid-template-columns: 110px 1fr 2fr;
    gap: clamp(28px, 5vw, 70px); align-items: baseline;
    padding: clamp(30px, 4.5vw, 50px) 0; border-bottom: 1px solid var(--color-border);
}
.value-num { font-family: var(--font-head); font-size: 0.8rem; font-weight: 700; color: var(--color-accent); letter-spacing: 2px; text-transform: uppercase; }
.value-title { font-family: var(--font-head); font-size: clamp(1.3rem, 2vw, 2rem); font-weight: 500; letter-spacing: -0.5px; line-height: 1.15; }
.value-desc { font-size: clamp(0.95rem, 1.15vw, 1.05rem); color: var(--color-text-muted); line-height: 1.8; max-width: 560px; }

/* Stats Row */
.stats-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
    text-align: center; margin-top: var(--space-lg);
    padding: 72px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
.stat-item h3 { font-size: clamp(2.8rem, 4.5vw, 5.5rem); color: var(--color-accent); font-weight: 400; line-height: 1; letter-spacing: -2px; margin-bottom: 10px; }
.stat-item p { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 0.8rem; color: var(--color-text-muted); }


/* === ABOUT PAGE — Image aligned to text bottom === */
/* On about hero: text aligns bottom, image also bottom-aligned */
.about-hero {
    align-items: stretch;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
    .about-hero { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
    .about-hero-media { height: 55vh; position: relative; }
    .about-hero-media img { position: absolute; }
    /* Mobile: text first (top), image below */
    .about-hero-text { order: -1; justify-content: flex-start; padding-top: calc(var(--nav-height) + 40px); }
    .about-hero-media { order: 1; }
    .story-grid { grid-template-columns: 1fr; }
    .value-row { grid-template-columns: 80px 1fr; }
    .value-desc { grid-column: 2; }
    .values-header-note { display: none; }
    .stats-row { grid-template-columns: repeat(2, 1fr); gap: 50px 16px; }
}
@media (max-width: 768px) {
    .value-row { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
    .value-num { font-size: 0.75rem; }
    .stats-row { grid-template-columns: 1fr; }
    /* Fixed mobile padding to prevent text from hiding under nav */
    .about-hero-text { padding: calc(var(--nav-height) + 30px) clamp(20px, 5vw, 36px) 50px; }
    .about-headline { letter-spacing: -2px; font-size: clamp(2.4rem, 9vw, 3.8rem); }
}