/* ===================================================================
   Our Story page (slug: our-story)
   Sections reuse the shared front-page components (fp-changes,
   fp-capacity, fp-pillars, fp-about). This file only carries the
   page-specific deltas. Figma node 2305:756.
   =================================================================== */

/* Hero and .os-rich typography are handled by the shared inner-page
   patterns in front-page.css. */

/* ── Section 3 — The Pattern ─────────────────────────── */
/* fp-pillars styles the first two rows via :nth-child. Provide a
   sensible fallback so any additional repeater rows still render
   as an image-left / text-right grid. */

.os-pattern .fp-pillars__row:nth-child(n+3) {
    display: grid;
    grid-template-columns: 57fr 43fr;
    align-items: center;
    margin-top: var(--space-12);
}

/* ── Section 4 — A Note from Michael ─────────────────── */
/* Design places this section on white (fp-about defaults to grey)
   and adds a portrait image beneath the gold tagline. */

.os-note {
    background: var(--color-white);
}

.os-note__media {
    width: 100%;
    max-width: 294px;
    aspect-ratio: 294 / 325;
    overflow: hidden;
    background: var(--color-gray-400);
}

.os-note__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 900px) {
    .os-pattern .fp-pillars__row:nth-child(n+3) {
        grid-template-columns: 1fr;
    }
}