/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE — Scoped under body.page-about
   ═══════════════════════════════════════════════════════════════ */


/* ── Story Blocks ── */
body.page-about .about-stories { padding: 5rem 0 3rem; }

body.page-about .story-block {
    display: flex; align-items: center; gap: 3.5rem;
    margin-bottom: 6rem;
}
body.page-about .story-block:last-child { margin-bottom: 0; }
body.page-about .story-block--reverse { flex-direction: row-reverse; }

body.page-about .story-block__text { flex: 1; }
body.page-about .story-block__text h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700;
    color: #0f172a; margin-bottom: 1.25rem; line-height: 1.3;
}
body.page-about .story-block__text p {
    font-size: 1.0625rem; color: #475569; line-height: 1.85;
    margin-bottom: 1.25rem;
}

/* Quote highlight */
body.page-about .story-quote {
    font-size: 1.25rem; color: #1d4ed8; font-weight: 600;
    border-left: 4px solid #3b82f6; padding-left: 1.25rem;
    margin: 2rem 0; line-height: 1.6; font-style: italic;
}

/* Image */
body.page-about .story-block__image { flex: 1; }
body.page-about .story-img {
    width: 100%; height: 24rem; border-radius: 1rem;
    background-size: cover; background-position: center;
    box-shadow: 0 20px 48px rgba(0,0,0,.1);
    position: relative; overflow: hidden;
}
body.page-about .story-img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(15,23,42,.25), transparent 60%);
}

/* ── Epilogue ── */
body.page-about .about-epilogue {
    background: #f8fafc; padding: 6rem 0; text-align: center;
}
body.page-about .about-epilogue h2 {
    font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 700;
    color: #0f172a; margin-bottom: 1.5rem;
}
body.page-about .about-epilogue p {
    font-size: 1.125rem; color: #475569;
    max-width: 40rem; margin: 0 auto 2rem; line-height: 1.8;
}

/* g-text gradient (may already be global; safe to scope) */
body.page-about .g-text {
    background: linear-gradient(135deg, #1d4ed8, #3b82f6, #8B5CF6);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* btn-gradient (may already be global; scope for safety) */
body.page-about .btn-gradient {
    background: linear-gradient(135deg, #0EA5E9, #8B5CF6);
    position: relative; overflow: hidden; transition: opacity .25s;
    display: inline-flex; align-items: center;
    color: #fff; font-weight: 600; border: none; cursor: pointer;
    border-radius: .75rem; max-width: 100%; box-sizing: border-box;
}
body.page-about .btn-gradient::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, #38BDF8, #A78BFA);
    opacity: 0; transition: opacity .25s;
}
body.page-about .btn-gradient:hover::after { opacity: 1; }
body.page-about .btn-gradient span { position: relative; z-index: 1; }
body.page-about .btn-gradient--lg { padding: .875rem 2rem; font-size: 1rem; gap: .625rem; }

/* sec-label: unified in hero.css */

/* ═══════════════════════════════════════
   Responsive
   ═══════════════════════════════════════ */
@media (max-width: 767px) {
    body.page-about .story-block,
    body.page-about .story-block--reverse { flex-direction: column; gap: 2rem; margin-bottom: 4rem; }
    body.page-about .story-img { height: 18rem; }
}
@media (min-width: 1024px) {
    body.page-about .about-stories .container { padding: 0 2rem; }
}