/* Suvichar Editorial v0.1: Vision, mission and values on the About page.
   Three equal cards in one row (stacked on narrower screens), with the same size, edge, icon and
   headline treatment, so no one of them carries more visual weight than the others. */

.vmv .sec-head { margin-bottom: 2.5rem; }

.vmv-grid { display: grid; gap: 20px; }
@media (min-width: 1000px) { .vmv-grid { grid-template-columns: repeat(3, 1fr); } }

.vmv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 30px 34px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: 20px;
    box-shadow: 0 18px 40px -32px rgba(24, 19, 16, 0.4);
    transition: transform .25s ease, box-shadow .25s ease;
}
.vmv-card:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -30px rgba(24, 19, 16, 0.5); }

.vmv-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.vmv-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
}
.vmv-icon svg { width: 23px; height: 23px; }
.vmv-head .lp-tag { font-size: 0.8rem; }

.vmv-card h3 {
    font-size: clamp(1.6rem, 2.7vw, 2.15rem);
    line-height: 1.25;
    margin: 0 0 18px;
    text-wrap: balance;
}
.vmv-card p { color: var(--gray); font-size: 0.98rem; margin: 0; }

/* Values: six items inside the third card. Each shows its name and opens to its full line,
   so the card is about the same size as Vision and Mission instead of a long column. */
.vmv-values { margin-top: 6px; border-top: 1px solid var(--line); }
.vmv-value { border-bottom: 1px solid var(--line); }
.vmv-value summary {
    display: grid;
    grid-template-columns: 30px 1fr 18px;
    align-items: baseline;
    padding: 10px 0;
    list-style: none;
    cursor: pointer;
}
.vmv-value summary::-webkit-details-marker { display: none; }
.vmv-value summary::after { content: "+"; font-family: var(--font-mono); color: var(--gray); text-align: right; }
.vmv-value[open] summary::after { content: "\2212"; }
.vmv-value .n { font-family: var(--font-mono); font-size: 0.74rem; color: var(--gray); }
.vmv-value b { font-weight: 600; font-size: 0.98rem; line-height: 1.3; color: var(--dark); }
.vmv-value p { margin: 0 0 14px 30px; font-size: 0.9rem; line-height: 1.55; color: var(--gray); }

@media (prefers-reduced-motion: reduce) {
    .vmv-card { transition: none; }
    .vmv-card:hover { transform: none; }
}

/* =====================================================================
   About page layout (every rule is scoped to .about-page, so no other page changes)
   ===================================================================== */

/* 1. Tighter vertical rhythm. The shared theme uses 112px above and below every section on desktop. */
.about-page .page-hero { padding: 48px 0 56px; }
.about-page .section { padding: 60px 0; }
.about-page .cta-band { padding: 64px 0; }
.about-page .sec-head { margin-bottom: 2.25rem; }
@media (min-width: 880px) {
    .about-page .page-hero { padding: 64px 0 72px; }
    .about-page .section { padding: 80px 0; }
    .about-page .cta-band { padding: 80px 0; }
    .about-page .sec-head { margin-bottom: 2.5rem; }
}

/* 2. Alternating backgrounds, so sections separate without big gaps:
      hero paper, proof strip alt, founder paper, values alt, principles paper, call to action dark. */
.about-page .vmv { background: var(--paper-2); border-block: 1px solid var(--line); }
.about-page .vmv-card { background: #fff; }

/* 3. Hero: a more compact story panel, so the copy sits level with it and the button stays near the fold. */
.about-page .page-hero-grid { gap: 32px; }
@media (min-width: 980px) {
    .about-page .page-hero-grid { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
    /* Top-aligned, with the eyebrow level with the panel's "Our story" label, so the button rises above the fold. */
    .about-page .page-hero-copy { padding-top: 26px; }
}
.about-page .page-hero .panel { padding: 28px 28px 22px; }
.about-page .panel-steps li { padding: 11px 0; }
.about-page .panel-steps span { line-height: 1.5; }

@media (max-width: 879px) {
    /* Phones and small tablets: the story panel stacks under the copy, so keep it as compact as it can be. */
    .about-page .page-hero .panel { padding: 22px 20px 14px; }
    .about-page .panel-steps li { padding: 9px 0; }
    .about-page .panel-steps span { font-size: 0.84rem; }
}

/* 4. Section headings use the full row (no half-empty row, no one-word second line). */
.about-page .sec-head { display: block; }
.about-page .sec-head h2 { text-wrap: balance; max-width: 22em; }

/* Proof strip: five facts. Phones: 2 columns, the odd one out spans both. Tablets: 3 + 2 filling the row.
   Desktop: one row of five. No layout leaves an empty slot. */
.about-page .proof-strip {
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    padding: 34px 0;
}
.proof-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
.proof-grid li { display: flex; flex-direction: column; gap: 6px; }
.proof-grid li:last-child:nth-child(odd) { grid-column: span 2; }
.proof-grid b {
    font-family: var(--font-display);
    font-weight: 450;
    font-size: clamp(2rem, 3.4vw, 2.7rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--dark);
}
.proof-grid span { font-size: 0.88rem; line-height: 1.4; color: var(--gray); max-width: 17em; }
@media (min-width: 640px) {
    .proof-grid { grid-template-columns: repeat(6, 1fr); }
    .proof-grid li { grid-column: span 2; }
    .proof-grid li:nth-child(n + 4),
    .proof-grid li:last-child:nth-child(odd) { grid-column: span 3; }
}
@media (min-width: 1000px) {
    .about-page .proof-strip { padding: 38px 0; }
    .proof-grid { grid-template-columns: repeat(5, 1fr); gap: 0; }
    .proof-grid li,
    .proof-grid li:nth-child(n + 4),
    .proof-grid li:last-child:nth-child(odd) { grid-column: auto; }
    .proof-grid li + li { border-left: 1px solid var(--line); padding-left: 24px; }
}