/* ─────────────────────────────────────────────────────────────────────────
   About Us — page-local stylesheet
   Loaded only on about.html (versioned via ?v=1).
   Brand tokens (--brand-navy, --brand-cream) come from styles-v2.css.
   ─────────────────────────────────────────────────────────────────────── */

.about-page {
    --ab-navy: #0a2f52;
    --ab-navy-deep: #061f38;
    --ab-cream: #F4EBD0;
    --ab-cream-soft: #eeebe3;
    --ab-cream-warm: #efe7d0;
    --ab-ink: #102a3e;
    --ab-ink-dim: rgba(16, 42, 62, 0.62);
    --ab-rule-light: rgba(16, 42, 62, 0.14);
    --ab-rule-dim: rgba(16, 42, 62, 0.08);
    --ab-red: #db4a2b;
    --ab-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --ab-body: 'Inter', system-ui, sans-serif;
    --ab-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ════════════════════════════════════════════════
   ACT 1 — HERO (navy)
   ════════════════════════════════════════════════ */

.about-hero {
    position: relative;
    background: var(--ab-navy);
    color: var(--ab-cream);
    overflow: hidden;
    /* Extra bottom padding to clear the curve SVG (clamp 60–90px) without
       crowding the thesis paragraph. */
    padding: clamp(6rem, 14vh, 10rem) 1.5rem clamp(7rem, 14vh, 11rem);
    isolation: isolate;
}

/* Concave navy curve bridging the dark hero into the cream act below.
   -1px bottom hides any sub-pixel hairline at the section boundary. */
.about-hero__curve {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: clamp(60px, 7vw, 90px);
    display: block;
    pointer-events: none;
    z-index: 1;
}

.about-hero__inner {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
}

.about-hero__eyebrow {
    font-family: var(--ab-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ab-cream);
    opacity: 0.55;
    margin: 0 0 1.6rem;
}

.about-hero__title-wrap {
    position: relative;
    display: inline-block;
    line-height: 1;
}

.about-hero__title {
    font-family: var(--ab-display);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(3.2rem, 11vw, 8rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ab-cream);
    margin: 0;
}

.about-hero__mission {
    font-family: var(--ab-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.25rem, 2.8vw, 1.75rem);
    line-height: 1.45;
    color: var(--ab-cream);
    max-width: 740px;
    margin: 2.6rem auto 1.4rem;
}

.about-hero__thesis {
    font-family: var(--ab-body);
    font-size: clamp(0.92rem, 1.4vw, 1rem);
    line-height: 1.78;
    color: var(--ab-cream);
    opacity: 0.72;
    max-width: 620px;
    margin: 0 auto;
}

.about-hero__scroll-hint {
    margin-top: clamp(3rem, 6vh, 4.5rem);
    font-family: var(--ab-body);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ab-cream);
    opacity: 0.32;
}

/* ════════════════════════════════════════════════
   ACT — shared scaffolding (cream-side acts)
   ════════════════════════════════════════════════ */

.about-act {
    padding: clamp(5rem, 12vh, 8rem) 1.5rem;
    background: var(--ab-cream);
    color: var(--ab-ink);
}

/* Kept as a class alias for legacy hooks — same colour as the base act so
   every cream section reads as one continuous surface. */
.about-act--soft {
    background: var(--ab-cream);
}

.about-act__inner {
    max-width: 1080px;
    margin: 0 auto;
}

.about-act__eyebrow {
    font-family: var(--ab-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ab-red);
    margin: 0 0 1.4rem;
}

.about-act__title {
    font-family: var(--ab-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(2rem, 4.6vw, 3.2rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--ab-navy);
    margin: 0;
    max-width: 880px;
}

.about-act__title--centered {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* ════════════════════════════════════════════════
   ACT 2 — DRONA (cream)
   ════════════════════════════════════════════════ */

/* Single-column editorial container — no more two-column grid, no mindmap.
   Matrix sits centred at the heart of the act. */
.about-drona__inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.about-drona__lead {
    font-family: var(--ab-body);
    font-size: clamp(1rem, 1.6vw, 1.1rem);
    line-height: 1.78;
    color: var(--ab-ink);
    margin: 2rem auto 0;
    text-align: center;
}

.about-drona__lead strong {
    color: var(--ab-navy);
    font-weight: 600;
}

.about-drona__close {
    font-family: var(--ab-body);
    font-size: 1rem;
    line-height: 1.78;
    color: var(--ab-ink);
    margin: 2rem auto 0;
    text-align: center;
}

.about-drona__close strong {
    color: var(--ab-navy);
    font-weight: 600;
}

/* The defensibility-tier matrix — redesigned as a CSS-Grid heatmap of chip
   cells.  Same surface colour family as the cream act so the unit reads as
   data carved out of the page, not a separate utilitarian table. */
.about-drona__matrix-wrap {
    margin: clamp(2.4rem, 5vw, 3.2rem) auto 0;
    padding: 1.6rem 1.4rem 1.2rem;
    background: rgba(10, 47, 82, 0.04);
    border: 1px solid var(--ab-rule-light);
    border-radius: 6px;
    text-align: left;
}

.about-drona__matrix-eyebrow {
    font-family: var(--ab-body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ab-red);
    margin: 0 0 0.9rem;
    text-align: center;
}

.about-drona__heatmap {
    display: grid;
    grid-template-columns: 1.2fr repeat(4, 1fr);
    gap: 6px;
    margin: 1.4rem 0 0.4rem;
}

.about-drona__heatmap-cell {
    border-radius: 6px;
    padding: 0.9rem 0.6rem;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--ab-body);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
}

/* Axis / row / column labels — editorial italic Cormorant, no shape */
.heatmap-cell--axis,
.heatmap-cell--corner {
    background: transparent;
    color: var(--ab-ink-dim);
    font-family: var(--ab-display);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
}

/* Heatmap data cells — cream → red gradient across X axis */
.heatmap-cell--non {
    background: rgba(244, 235, 208, 0.6);
    color: var(--ab-ink-dim);
}

.heatmap-cell--litig {
    background: rgba(219, 74, 43, 0.10);
    color: var(--ab-navy);
}

.heatmap-cell--partial {
    background: rgba(219, 74, 43, 0.22);
    color: var(--ab-navy);
}

.heatmap-cell--full {
    background: rgba(219, 74, 43, 0.42);
    color: var(--ab-navy);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(219, 74, 43, 0.55);
}

.about-drona__matrix-foot {
    font-family: var(--ab-body);
    font-size: 0.75rem;
    color: var(--ab-ink-dim);
    margin: 0.9rem 0 0;
    font-style: italic;
    text-align: center;
}

.about-drona__matrix-foot em {
    color: var(--ab-navy);
}

/* ════════════════════════════════════════════════
   ACT 3 — SERVICE MODEL (cream-soft)
   ════════════════════════════════════════════════ */

.about-service__lead {
    font-family: var(--ab-body);
    font-size: clamp(1rem, 1.6vw, 1.1rem);
    line-height: 1.78;
    color: var(--ab-ink);
    max-width: 720px;
    margin: 2rem auto 0;
    text-align: center;
}

.about-service__lead strong {
    color: var(--ab-navy);
    font-weight: 600;
}

.about-service__compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    margin: clamp(3rem, 6vw, 5rem) auto 0;
    max-width: 880px;
}

/* Stack only below iPad portrait so 768 keeps the side-by-side compare */
@media (max-width: 720px) {
    .about-service__compare {
        grid-template-columns: 1fr;
        max-width: 480px;
    }
}

.about-service__card {
    /* Transparent so the unified cream backdrop carries through; subtle
       border + 1px shadow give the chip a quiet boundary without white fill. */
    background: transparent;
    border: 1px solid var(--ab-rule-light);
    border-radius: 6px;
    padding: clamp(1.5rem, 3vw, 2.2rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 1px 0 rgba(10, 47, 82, 0.04);
}

.about-service__card--us {
    border-left: 3px solid var(--ab-red);
}

.about-service__card-eyebrow {
    font-family: var(--ab-body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ab-ink-dim);
}

.about-service__card--us .about-service__card-eyebrow {
    color: var(--ab-red);
}

.about-service__card-title {
    font-family: var(--ab-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.25;
    color: var(--ab-navy);
    margin: 0;
}

.about-service__card-diagram {
    width: 100%;
    height: auto;
    display: block;
    margin: 0.4rem 0 0.2rem;
}

.about-service__card p {
    font-family: var(--ab-body);
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--ab-ink);
    margin: 0;
}

.about-service__close {
    font-family: var(--ab-body);
    font-size: 1rem;
    line-height: 1.78;
    color: var(--ab-ink);
    max-width: 720px;
    margin: clamp(3rem, 6vw, 4rem) auto 0;
    text-align: center;
}

.about-service__close strong {
    color: var(--ab-navy);
    font-weight: 600;
}

.about-service__close em {
    color: var(--ab-navy);
    font-style: italic;
}

/* ════════════════════════════════════════════════
   ACT 4 — FOUNDER (cream)
   ════════════════════════════════════════════════ */

.about-founder {
    padding-top: clamp(5rem, 12vh, 8rem);
    padding-bottom: clamp(6rem, 14vh, 9rem);
}

.about-founder__inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.about-founder__eyebrow {
    font-family: var(--ab-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ab-red);
    margin: 0 0 2rem;
}

.about-founder__note {
    border: none;
    margin: 0;
    padding: 0;
}

.about-founder__note p {
    font-family: var(--ab-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.15rem, 1.9vw, 1.35rem);
    line-height: 1.55;
    color: var(--ab-navy);
    margin: 0 0 1.6rem;
    text-align: left;
}

.about-founder__note p:last-child {
    margin-bottom: 0;
}

.about-founder__signature {
    margin: 2.5rem 0 0;
    text-align: left;
    border-top: 1px solid var(--ab-rule-light);
    padding-top: 1.4rem;
}

.about-founder__name {
    font-family: var(--ab-display);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--ab-navy);
    margin: 0 0 0.2rem;
    letter-spacing: 0.01em;
}

.about-founder__role {
    font-family: var(--ab-body);
    font-style: italic;
    font-weight: 400;
    font-size: 0.92rem;
    color: var(--ab-ink-dim);
    margin: 0 0 0.6rem;
}

.about-founder__disciplines {
    font-family: var(--ab-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ab-ink-dim);
    margin: 0;
}

.about-founder__divider {
    border: none;
    border-top: 1px solid var(--ab-rule-light);
    margin: clamp(3rem, 5vw, 4rem) 0;
}

.about-founder__believe-label {
    font-family: var(--ab-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ab-ink-dim);
    margin: 0 0 2rem;
    text-align: center;
}

.about-founder__tenets {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    counter-reset: tenet;
}

.about-founder__tenet {
    display: grid;
    grid-template-columns: 2.8rem 1fr;
    gap: 0.6rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--ab-rule-dim);
    counter-increment: tenet;
}

.about-founder__tenet:last-child {
    border-bottom: none;
}

.about-founder__tenet::before {
    content: counter(tenet, decimal-leading-zero);
    font-family: var(--ab-body);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--ab-red);
    padding-top: 0.45rem;
    line-height: 1;
}

.about-founder__tenet p {
    font-family: var(--ab-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1rem, 1.6vw, 1.1rem);
    line-height: 1.5;
    color: var(--ab-navy);
    margin: 0;
}

/* ════════════════════════════════════════════════
   Responsive — tablet & mobile portrait tightening
   ════════════════════════════════════════════════ */

/* Tablet portrait (≤ 900px) — tighten hero padding so the headline isn't
   marooned at the bottom of a tall navy slab on iPad-class screens. */
@media (max-width: 900px) {
    .about-hero {
        padding-top: clamp(4rem, 9vh, 6.5rem);
        padding-bottom: clamp(5rem, 10vh, 8rem);
    }
}

/* Phone portrait (≤ 600px) */
@media (max-width: 600px) {
    .about-hero {
        padding-top: clamp(3rem, 7vh, 4.5rem);
        padding-bottom: clamp(4rem, 9vh, 6rem);
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .about-hero__eyebrow {
        margin-bottom: 1.2rem;
    }

    .about-hero__mission {
        font-size: clamp(1.1rem, 4.4vw, 1.35rem);
        margin-top: 1.8rem;
        margin-bottom: 1.2rem;
    }

    .about-hero__thesis {
        font-size: 0.9rem;
        line-height: 1.7;
    }

    .about-act {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .about-act__title {
        font-size: clamp(1.7rem, 7.4vw, 2.4rem);
        line-height: 1.18;
    }

    /* Drona — tighter matrix wrap so chips have more breathing room */
    .about-drona__matrix-wrap {
        padding: 1.2rem 0.8rem 1rem;
    }

    .about-drona__heatmap {
        grid-template-columns: 0.95fr repeat(4, 1fr);
        gap: 4px;
    }

    /* Heatmap chip tightening at narrow widths — axis labels lose one font
       step, data chips lose half their inline padding so the 5-col grid
       still reads at 360px. */
    .about-drona__heatmap-cell {
        padding: 0.55rem 0.2rem;
        min-height: 44px;
        font-size: 0.55rem;
        letter-spacing: 0.08em;
    }

    .heatmap-cell--axis,
    .heatmap-cell--corner {
        font-size: 0.78rem;
        padding: 0.55rem 0.1rem;
    }

    .about-drona__matrix-foot {
        font-size: 0.7rem;
    }

    .about-founder__inner {
        text-align: left;
    }

    .about-founder__eyebrow,
    .about-founder__believe-label {
        text-align: center;
    }

    .about-founder__note p {
        font-size: clamp(1.05rem, 4.4vw, 1.2rem);
    }

    .about-founder__tenet {
        grid-template-columns: 2.2rem 1fr;
        padding: 1rem 0;
    }
}

/* Very small phones — squeeze type once more so the title doesn't
   overflow and the heatmap chips stay legible. */
@media (max-width: 380px) {
    .about-hero__title {
        font-size: clamp(2.6rem, 14vw, 3.6rem);
    }

    .about-hero__mission {
        font-size: 1.05rem;
    }

    .about-drona__heatmap-cell {
        font-size: 0.5rem;
        padding: 0.5rem 0.15rem;
    }

    .heatmap-cell--axis,
    .heatmap-cell--corner {
        font-size: 0.72rem;
    }
}