/* ==========================================================================
   Pages: about · quality & manufacturing · sectors
   (site/about, site/quality, site/sectors, partials/cta)
   --------------------------------------------------------------------------
   Shared bento pieces: story + lemon facts, a text card beside a photo
   card (.co-split, flips with --flip), numbered cards, the four steps
   card. (The closing CTA card: components/cta.css.)
   ========================================================================== */

.co-lead { margin-top: var(--s-4); font-size: var(--fs-lg); font-weight: 600; line-height: 1.6; }
.co-para { margin-top: var(--s-4); color: var(--ink-soft); font-size: var(--fs-md); }

/* ── Story + facts ───────────────────────────────────────────────────────── */
.co-story { grid-template-columns: 1.6fr 1fr; }
.co-facts { display: grid; align-content: space-between; gap: var(--s-5); }
.co-facts dt { font-family: var(--font-num); font-size: var(--fs-2xl); font-weight: 800; line-height: 1; color: var(--navy); }
.co-facts dd { margin-top: var(--s-1); color: rgb(32 57 74 / 0.8); font-weight: 600; font-size: var(--fs-sm); }
.co-facts > div + div { padding-top: var(--s-5); border-top: 1px solid rgb(32 57 74 / 0.15); }

/* ── Mission & vision ────────────────────────────────────────────────────── */
.co-pair { grid-template-columns: 1fr 1fr; }
.co-mv { min-height: 280px; padding-top: calc(var(--s-5) + 88px); display: flex; flex-direction: column; justify-content: flex-end; }
.co-mv h2 { font-size: var(--fs-xl); }
.co-mv p { margin-top: var(--s-3); color: var(--ink-soft); font-size: var(--fs-md); max-width: 34rem; }
.card--navy.co-mv p { color: var(--on-dark-soft); }
.co-mv__mark { position: absolute; top: var(--s-5); inset-inline-end: var(--s-5); width: 64px; color: var(--navy); opacity: 0.12; }
.card--navy .co-mv__mark { color: var(--lemon); opacity: 0.5; }

/* ── Numbered / icon cards ───────────────────────────────────────────────── */
.co-cards { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: var(--s-6); }
.co-cards--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.co-card { display: flex; flex-direction: column; gap: var(--s-3); min-height: 220px; }
.co-card h3 { margin-top: auto; font-size: var(--fs-lg); }
.co-card p { color: var(--ink-soft); font-size: var(--fs-sm); }
.card--navy.co-card p { color: var(--on-dark-soft); }
.co-card__no { font-family: var(--font-num); font-weight: 700; color: var(--teal); }
.co-card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--card-soft); color: var(--navy); font-size: 1.4rem; }
.card--navy .co-card__icon { background: var(--lemon); }

/* ── Text card + photo card ──────────────────────────────────────────────── */
.co-split { grid-template-columns: 1.15fr 1fr; }
.co-split--flip > .co-split__photo { order: -1; }
.co-split--flip { grid-template-columns: 1fr 1.15fr; }
.co-split__text { display: flex; flex-direction: column; align-items: flex-start; }
.co-split__text h2 { margin-top: var(--s-3); font-size: var(--fs-xl); }
.co-split__text > .tag + h2 { margin-top: var(--s-4); }
.co-split__text > .btn { margin-top: auto; }
.co-split__text > .co-para + .btn, .co-split__text > ul + .btn { margin-top: var(--s-6); }
.co-split__photo { min-height: 380px; }

.co-checks { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.co-checks li { display: flex; align-items: flex-start; gap: var(--s-2); font-weight: 600; }
.co-checks .icon { margin-top: 0.2em; padding: 3px; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--lemon); color: var(--navy); }

.co-materials { display: grid; gap: var(--s-3); margin-top: var(--s-5); width: 100%; }
.co-materials > div { display: grid; grid-template-columns: 64px 1fr; gap: var(--s-4); align-items: start; padding: var(--s-4); border-radius: var(--r-md); background: var(--card-soft); }
.co-materials dt { display: grid; place-items: center; height: 40px; border-radius: var(--r-pill); background: var(--navy); color: var(--lemon); font-family: var(--font-num); font-weight: 700; font-size: var(--fs-sm); }
.co-materials dd { color: var(--ink-soft); font-size: var(--fs-sm); }

/* ── Manufacturing steps ─────────────────────────────────────────────────── */
.co-steps__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: var(--s-6); counter-reset: none; }
.co-steps__list li { position: relative; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); border-radius: var(--r-lg); background: var(--card-soft); }
.co-steps__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--s-3); border-radius: var(--r-md); background: var(--navy); }
.co-steps__icon .mark { width: 38px; color: var(--lemon); }
.co-steps__no { position: absolute; top: var(--s-5); inset-inline-end: var(--s-5); font-family: var(--font-num); font-weight: 700; color: var(--teal); }
.co-steps__list h3 { font-size: var(--fs-md); }
.co-steps__list p { color: var(--ink-soft); font-size: var(--fs-sm); }

/* ── Sectors ─────────────────────────────────────────────────────────────── */
.co-sectors { display: grid; gap: var(--gap); }
.co-sectors > article { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.co-sector__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--lemon); color: var(--navy); font-size: 1.5rem; }
.co-sector__no { position: absolute; top: var(--s-6); inset-inline-end: var(--s-6); font-family: var(--font-num); font-size: var(--fs-xl); font-weight: 800; color: var(--card-soft); }

@media (max-width: 991.98px) {
    .co-story, .co-pair, .co-split, .co-split--flip { grid-template-columns: 1fr; }
    .co-split--flip > .co-split__photo { order: 0; }
    .co-split > .co-split__photo { order: -1; min-height: 260px; }
    .co-steps__list { grid-template-columns: 1fr 1fr; }
    .co-mv { min-height: 220px; }
}
@media (max-width: 575.98px) {
    .co-steps__list { grid-template-columns: 1fr; }
}