/* =========================================================================
   IRA BIOTECH — Section components (v3.1 redesign pass)
   Shared by index, about, why-bio, manufacturing, export, contact, blog.
   Design language, taken from the homepage R&D band: hairline rules, serif
   for statements and names, mint (#8FD19E) on charcoal, no card chrome, no
   decorative numbering unless the content is genuinely a sequence.
   Loaded AFTER pages.css / home.css. Product-detail pages do not load it.
   ========================================================================= */

:root {
  --mint: #8FD19E;
  --on-dark-line: rgba(239, 243, 238, .16);
}

/* ---- Serif heading helper (names, places, statements) -------------------- */
.serif-h {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.08;
}

/* ---- Section head: statement left, supporting paragraph right ------------ */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--s-6) var(--s-20);
  align-items: end;
}
.sec-head h2 { margin-top: var(--s-4); max-width: 18ch; }
.sec-head .sec-lede { max-width: 46ch; padding-bottom: .35rem; }
@media (max-width: 900px) {
  .sec-head { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* =========================================================================
   Dark research band (moved from home.css so About can use it too)
   ========================================================================= */
.rd-section {
  position: relative; isolation: isolate; color: var(--on-dark);
  background:
    linear-gradient(90deg, var(--charcoal) 0%, rgba(16,32,25,.94) 42%, rgba(16,32,25,.78) 100%),
    url('../img/micro/hero-colonies.jpg') right center / cover no-repeat,
    var(--charcoal);
  padding-block: var(--s-24);
}
.rd-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-20); align-items: end; }
.rd-intro h2 { margin-top: var(--s-4); color: var(--white); font-size: clamp(1.9rem, 3.2vw, 3rem); max-width: 16ch; }
.rd-intro p { margin-top: var(--s-6); max-width: 46ch; color: var(--on-dark-soft); }
.rd-intro .eyebrow { color: var(--on-dark); }
.rd-quote { margin: 0; padding-top: var(--s-6); border-top: 2px solid var(--accent); }
.rd-quote p {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.9rem, 3.3vw, 3.1rem); line-height: 1.18; letter-spacing: -.005em;
  color: var(--white); max-width: 20ch; text-wrap: balance;
}
.rd-ledger {
  margin-top: var(--s-20);
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  border-top: 1px solid rgba(239,243,238,.22);
}
.rd-cell { padding: var(--s-6) var(--s-6) var(--s-6) 0; display: grid; align-content: start; gap: var(--s-3); }
.rd-cell + .rd-cell { padding-left: var(--s-6); border-left: 1px solid rgba(239,243,238,.14); }
.rd-cell dt { font-family: var(--font-serif); font-size: clamp(1.7rem, 2.3vw, 2.2rem); line-height: 1; color: var(--mint); }
.rd-lead dt { font-family: var(--font); font-size: .85rem; font-weight: 700; color: var(--on-dark-soft); line-height: 1.4; }
.rd-cell dd { margin: 0; display: grid; gap: var(--s-2); }
.rd-cell dd strong { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.5rem, 2vw, 1.9rem); line-height: 1.15; color: var(--white); }
.rd-cell dd span { font-size: .92rem; line-height: 1.6; color: var(--on-dark-soft); max-width: 36ch; }
@media (max-width: 1000px) {
  .rd-head { grid-template-columns: 1fr; gap: var(--s-12); align-items: start; }
  .rd-ledger { grid-template-columns: 1fr 1fr; }
  .rd-lead { grid-column: 1 / -1; padding-bottom: var(--s-6); }
  .rd-cell + .rd-cell { border-left: none; padding-left: 0; }
  .rd-cell:not(.rd-lead) { border-top: 1px solid rgba(239,243,238,.14); padding-top: var(--s-6); }
}
@media (max-width: 640px) {
  .rd-section { padding-block: var(--s-16); }
  .rd-ledger { grid-template-columns: 1fr; margin-top: var(--s-12); }
}

/* Stacked variant (About): statement left, ledger rows right */
.rd-stack { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-20); align-items: start; }
.rd-rows { margin: 0; border-top: 1px solid rgba(239,243,238,.22); }
.rd-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s-6); padding-block: var(--s-6); border-bottom: 1px solid var(--on-dark-line); }
.rd-row dt { font-family: var(--font-serif); font-size: clamp(1.5rem, 2vw, 1.9rem); line-height: 1.1; color: var(--mint); }
.rd-row dd { margin: 0; display: grid; gap: var(--s-2); color: var(--on-dark-soft); font-size: .98rem; line-height: 1.6; }
.rd-row dd strong { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.5rem, 2vw, 1.9rem); line-height: 1.15; color: var(--white); }
.rd-row dd span { font-size: .9rem; max-width: 52ch; }
@media (max-width: 1000px) { .rd-stack { grid-template-columns: 1fr; gap: var(--s-10); } }
@media (max-width: 560px) { .rd-row { grid-template-columns: 1fr; gap: var(--s-2); } }

/* =========================================================================
   Facilities — one component for Home, About, Manufacturing
   ========================================================================= */
.fac-grid { margin-top: var(--s-12); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-10); }
.fac { border-top: 2px solid var(--accent); padding-top: var(--s-6); display: grid; gap: var(--s-3); align-content: start; }
.fac .fac-tag { font-size: .9rem; font-weight: 700; color: var(--accent-ink); }
.fac h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.9rem, 2.6vw, 2.5rem); line-height: 1.05; letter-spacing: -.005em; }
.fac .fac-state { font-size: .92rem; font-weight: 700; color: var(--ink); }
.fac p { font-size: .96rem; max-width: 34ch; }
@media (max-width: 900px) { .fac-grid { gap: var(--s-6); } }
@media (max-width: 700px) { .fac-grid { grid-template-columns: 1fr; gap: var(--s-8); margin-top: var(--s-10); } .fac p { max-width: 52ch; } }

/* Home: photo beside the facility stack */
.mfg-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-16); align-items: stretch; }
.mfg-photo { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; min-height: 460px; background: var(--charcoal); }
.mfg-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mfg-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-12) var(--s-6) var(--s-6);
  background: linear-gradient(0deg, rgba(16,32,25,.88), rgba(16,32,25,0));
  color: var(--on-dark); font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; line-height: 1.25;
}
.mfg-body h2 { margin-top: var(--s-4); max-width: 15ch; }
.mfg-body .fac-list { margin-top: var(--s-10); display: grid; gap: 0; }
.mfg-body .fac { padding-block: var(--s-6); border-top-width: 1px; border-top-color: var(--line-strong); grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-2) var(--s-6); align-items: baseline; }
.mfg-body .fac:last-child { border-bottom: 1px solid var(--line-strong); }
.mfg-body .fac .fac-tag { grid-row: 1 / span 3; }
.mfg-body .fac h3 { font-size: clamp(1.7rem, 2.2vw, 2.1rem); }
@media (max-width: 1000px) {
  .mfg-split { grid-template-columns: 1fr; gap: var(--s-10); }
  .mfg-photo { min-height: 0; aspect-ratio: 16 / 10; }
  .mfg-body { order: -1; }
}
@media (max-width: 560px) {
  .mfg-body .fac { grid-template-columns: 1fr; }
  .mfg-body .fac .fac-tag { grid-row: auto; }
  .mfg-photo { aspect-ratio: 4 / 3; }
}

/* =========================================================================
   Platforms (home Solutions): two photographic panels
   ========================================================================= */
.platform-grid { margin-top: var(--s-12); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.platform {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius);
  min-height: clamp(380px, 36vw, 500px);
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-3);
  padding: var(--s-10); color: var(--on-dark);
  background: var(--charcoal) center / cover no-repeat;
}
.platform::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(16,32,25,.94) 0%, rgba(16,32,25,.62) 48%, rgba(16,32,25,.12) 100%); }
.platform .tag { font-size: .9rem; font-weight: 700; color: var(--mint); }
.platform h3 { font-family: var(--font-serif); font-weight: 400; color: var(--white); font-size: clamp(2.3rem, 3.8vw, 3.5rem); line-height: 1; }
.platform p { color: var(--on-dark-soft); max-width: 40ch; font-size: .98rem; }
@media (min-width: 781px) { .platform p { min-height: calc(1.65em * 3); } }
.platform .link-arrow { align-self: flex-start; margin-top: var(--s-3); color: var(--white); border-color: rgba(255,255,255,.5); }
.platform:hover .link-arrow, .platform:focus-visible .link-arrow { gap: var(--s-3); border-color: var(--white); }
.platform:focus-visible { outline-offset: 4px; }
@media (max-width: 780px) {
  .platform-grid { grid-template-columns: 1fr; margin-top: var(--s-10); }
  .platform { min-height: 340px; padding: var(--s-8) var(--s-6); }
}

/* =========================================================================
   Reasons / outcomes grid (replaces numbered single-column lists)
   ========================================================================= */
.reason-grid { margin-top: var(--s-12); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.reason { padding: var(--s-8) var(--s-8) var(--s-10) 0; border-bottom: 1px solid var(--line); display: grid; gap: var(--s-3); align-content: start; }
.reason:nth-child(even) { padding-left: var(--s-8); padding-right: 0; border-left: 1px solid var(--line); }
.reason h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.7rem, 2.3vw, 2.2rem); line-height: 1.1; }
.reason p { font-size: .98rem; max-width: 46ch; }
.reason-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reason-grid.cols-3 .reason:nth-child(even) { padding-left: 0; border-left: none; padding-right: var(--s-8); }
.reason-grid.cols-3 .reason + .reason { padding-left: var(--s-8); border-left: 1px solid var(--line); }
.reason-grid.cols-3 .reason:last-child { padding-right: 0; }
@media (max-width: 900px) {
  .reason-grid, .reason-grid.cols-3 { grid-template-columns: 1fr; margin-top: var(--s-10); }
  .reason, .reason:nth-child(even), .reason-grid.cols-3 .reason + .reason, .reason-grid.cols-3 .reason:nth-child(even) { padding: var(--s-6) 0 var(--s-8); border-left: none; }
  .reason p { max-width: 56ch; }
}

/* =========================================================================
   Shift: a four-step change of state, light to deep green (sustainability)
   ========================================================================= */
.shift { margin-top: var(--s-12); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--radius); overflow: hidden; }
.shift-step { padding: var(--s-8) var(--s-6) var(--s-10); display: grid; gap: var(--s-4); align-content: start; min-height: 270px; position: relative; }
.shift-step:nth-child(1) { background: #E3E7E1; }
.shift-step:nth-child(2) { background: var(--sage); }
.shift-step:nth-child(3) { background: #C3DEC9; }
.shift-step:nth-child(4) { background: var(--green-dark); color: var(--on-dark); }
.shift-step:nth-child(4) h3 { color: var(--white); }
.shift-step:nth-child(4) p { color: rgba(239,243,238,.82); }
.shift-step svg { width: 28px; height: 28px; color: var(--accent-ink); }
.shift-step:nth-child(1) svg { color: var(--ink-faint); }
.shift-step:nth-child(4) svg { color: var(--mint); }
.shift-step h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.6rem, 2vw, 2rem); line-height: 1.1; }
.shift-step p { font-size: .95rem; color: var(--ink-soft); }
.shift-step:nth-child(2) p, .shift-step:nth-child(3) p { color: #35453B; }
@media (max-width: 980px) { .shift { grid-template-columns: 1fr 1fr; } .shift-step { min-height: 0; } }
@media (max-width: 560px) { .shift { grid-template-columns: 1fr; margin-top: var(--s-10); } .shift-step { padding: var(--s-6) var(--s-6) var(--s-8); } }

/* =========================================================================
   Certifications: six registrations, each with what it is
   ========================================================================= */
.cert-grid { margin-top: var(--s-10); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.cert { padding: var(--s-6) var(--s-6) var(--s-6) 0; border-bottom: 1px solid var(--line); display: grid; gap: var(--s-2); align-content: start; }
.cert:not(:nth-child(3n+1)) { padding-left: var(--s-6); border-left: 1px solid var(--line); }
.cert strong { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.6rem, 2.1vw, 2rem); line-height: 1.1; color: var(--ink); }
.cert span { font-size: .9rem; color: var(--ink-soft); line-height: 1.5; }
.cert-note { margin-top: var(--s-6); font-size: .92rem; color: var(--ink-soft); max-width: 70ch; }
@media (max-width: 860px) {
  .cert-grid { grid-template-columns: 1fr 1fr; }
  .cert:not(:nth-child(3n+1)) { padding-left: 0; border-left: none; }
  .cert:nth-child(even) { padding-left: var(--s-6); border-left: 1px solid var(--line); }
}
@media (max-width: 480px) { .cert-grid { grid-template-columns: 1fr; } .cert:nth-child(even) { padding-left: 0; border-left: none; } }

/* =========================================================================
   Closing band
   ========================================================================= */
.cta-band { background: var(--sage); padding-block: var(--s-24); }
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8) var(--s-16); align-items: end; }
.cta-band h2 { max-width: 14ch; }
.cta-band p { max-width: 44ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-6); }
@media (max-width: 900px) { .cta-band { padding-block: var(--s-16); } .cta-band .wrap { grid-template-columns: 1fr; gap: var(--s-5); align-items: start; } }
@media (max-width: 480px) { .cta-actions .btn { width: 100%; justify-content: center; } }

/* =========================================================================
   About
   ========================================================================= */
.story-photo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--charcoal) center / cover no-repeat; }
.story-photo::after { content: ""; position: absolute; inset: 0; background: var(--green); mix-blend-mode: multiply; opacity: .12; pointer-events: none; }
@media (max-width: 900px) { .story-photo { aspect-ratio: 16 / 10; } }

.roster { margin-top: var(--s-12); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-10); }
.person { display: grid; gap: var(--s-3); align-content: start; }
.person-photo {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; margin-bottom: var(--s-3);
  background: linear-gradient(160deg, #1B3A27 0%, var(--charcoal) 100%);
  display: grid; place-items: center;
}
.person-photo .mono { font-family: var(--font-serif); font-size: clamp(4rem, 7vw, 6rem); color: var(--mint); line-height: 1; letter-spacing: .02em; }
.person-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(55%) contrast(1.05); }
.person-photo::after { content: ""; position: absolute; inset: 0; background: var(--green); mix-blend-mode: multiply; opacity: .12; pointer-events: none; }
.person h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.7rem, 2.2vw, 2.1rem); line-height: 1.1; }
.person .role { font-size: .95rem; font-weight: 700; color: var(--accent-ink); }
.person p { font-size: .95rem; max-width: 36ch; }
@media (max-width: 900px) {
  .roster { grid-template-columns: 1fr; gap: var(--s-10); }
  .person { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); column-gap: var(--s-6); align-items: start; }
  .person-photo { grid-row: 1 / span 4; margin-bottom: 0; aspect-ratio: 4 / 5; }
}
@media (max-width: 520px) {
  .person { grid-template-columns: 1fr; }
  .person-photo { grid-row: auto; aspect-ratio: 16 / 11; margin-bottom: var(--s-3); }
}

/* =========================================================================
   Why Bio
   ========================================================================= */
.cost-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-20); align-items: start; }
.cost-split h2 { margin-top: var(--s-4); max-width: 16ch; }
.cost-split .lede-s { margin-top: var(--s-5); max-width: 40ch; }
.cost-list { border-top: 1px solid var(--line-strong); }
.cost-list li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: var(--s-5); align-items: baseline; padding-block: var(--s-5); border-bottom: 1px solid var(--line); font-size: 1.12rem; line-height: 1.5; color: var(--ink); }
.cost-list li::before { content: ""; width: 7px; height: 7px; background: var(--precision); transform: translateY(-2px); }
@media (max-width: 900px) { .cost-split { grid-template-columns: 1fr; gap: var(--s-8); } }

.sector-grid { margin-top: var(--s-12); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.sector { padding: var(--s-8); border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); display: grid; gap: var(--s-3); align-content: start; }
.sector h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.8rem, 2.4vw, 2.3rem); line-height: 1.05; }
.sector p { font-size: .98rem; max-width: 48ch; }
.sector.is-wide { grid-column: 1 / -1; background: var(--green-dark); border-color: var(--green-dark); grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-3) var(--s-16); align-items: center; padding: var(--s-10); }
.sector.is-wide h3 { color: var(--white); }
.sector.is-wide p { color: rgba(239,243,238,.85); max-width: 56ch; }
@media (max-width: 900px) { .sector-grid { grid-template-columns: 1fr; margin-top: var(--s-10); gap: var(--s-4); } .sector.is-wide { grid-template-columns: 1fr; padding: var(--s-8); } .sector { padding: var(--s-6); } }

.faq-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-20); align-items: start; }
.faq-split h2 { margin-top: var(--s-4); max-width: 12ch; }
.faq-split .faq-aside { position: sticky; top: 7rem; }
.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: var(--s-5); align-items: center;
  padding-block: var(--s-6); font-weight: 700; font-size: 1.1rem; line-height: 1.35; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  background:
    linear-gradient(var(--ink), var(--ink)) center / 10px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px 10px no-repeat;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--sage); }
.faq summary:hover { color: var(--accent-ink); }
.faq summary:focus-visible { outline-offset: -2px; }
.faq .faq-a { padding: 0 var(--s-12) var(--s-8) 0; max-width: 62ch; }
@media (max-width: 900px) { .faq-split { grid-template-columns: 1fr; gap: var(--s-8); } .faq-split .faq-aside { position: static; } .faq .faq-a { padding-right: 0; } }

/* =========================================================================
   Manufacturing
   ========================================================================= */


/* =========================================================================
   Export page: markets and range
   ========================================================================= */

/* =========================================================================
   Contact and Blog
   ========================================================================= */
.addr-grid { margin-top: var(--s-12); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-10); }
.addr { padding: var(--s-6) 0 var(--s-8); border-top: 1px solid var(--line-strong); display: grid; gap: var(--s-2); align-content: start; }
.addr .addr-tag { font-size: .9rem; font-weight: 700; color: var(--accent-ink); }
.addr h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.7rem, 2.2vw, 2.1rem); line-height: 1.08; }
.addr address { font-style: normal; font-size: .96rem; line-height: 1.6; color: var(--ink-soft); margin-top: var(--s-2); max-width: 36ch; }
@media (max-width: 980px) { .addr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .addr-grid { grid-template-columns: 1fr; margin-top: var(--s-10); } }

.contact-direct { display: grid; gap: var(--s-2); }
.contact-direct a.big-link { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.1; overflow-wrap: anywhere; }
.contact-direct a.big-link:hover { color: var(--accent-ink); }

/* =========================================================================
   Home specifics
   ========================================================================= */
/* Hero copy aligns to the same left edge as every other section */
.hero-content { max-width: var(--content-max); width: 100%; }
.hero-content > .lede { max-width: 46ch; }
.hero-content > h1 { max-width: none; }

.credibility-row .cell:first-child { padding-left: 0; }
.credibility-row .num { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.6rem, 4.4vw, 3.8rem); line-height: 1; }
@media (max-width: 860px) { .credibility-row .cell { padding: var(--s-8) var(--s-5); } .credibility-row .cell:nth-child(odd) { padding-left: 0; } }
@media (max-width: 520px) { .credibility-row .cell { padding-inline: 0; } }

/* Export band on home: statement + markets side by side */
.export-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-20); align-items: start; }
.export-split h2 { margin-top: var(--s-4); max-width: 14ch; }
.export-split .lede-dark { margin-top: var(--s-6); max-width: 46ch; }
.export-split .btn { margin-top: var(--s-8); }
.export-split .route { margin-top: 0; }
.export-split .route-origin { display: flex; }
.export-split .route-list { grid-template-columns: 1fr; gap: 0; }
.export-split .route-item { border-left: none; border-top: 1px solid rgba(239,243,238,.2); padding: var(--s-6) 0; display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-2) var(--s-6); align-items: baseline; }
.export-split .route-item:last-child { border-bottom: 1px solid rgba(239,243,238,.2); }
.export-split .route-item .status { grid-column: 1; grid-row: 1; margin: 0; font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--mint); }
.export-split .route-item h4 { grid-column: 2; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.8rem, 2.4vw, 2.3rem); margin: 0; line-height: 1.05; }
.export-split .route-item p { grid-column: 2; margin-top: var(--s-2); }
@media (max-width: 1000px) { .export-split { grid-template-columns: 1fr; gap: var(--s-12); } }
@media (max-width: 560px) {
  .export-split .route-item { grid-template-columns: 1fr; }
  .export-split .route-item .status, .export-split .route-item h4, .export-split .route-item p { grid-column: 1; grid-row: auto; }
}

/* Export range facts: values in serif so the spec strip reads as figures */
.export-facts .v { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.15; color: var(--ink); }
.export-facts .k { font-size: .85rem; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
@media (max-width: 860px) { .export-facts .v { font-size: 1.35rem; } }

/* Contact: dark details panel + paired fields */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.contact-panel {
  background: var(--charcoal); color: var(--on-dark); border-radius: var(--radius);
  padding: var(--s-10); align-self: start; position: sticky; top: 7rem;
}
.contact-panel .block { border-color: var(--on-dark-line); }
.contact-panel h4 { color: var(--mint); font-size: .9rem; letter-spacing: 0; text-transform: none; font-weight: 700; margin-bottom: var(--s-3); }
.contact-panel a.big-link { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.15; color: var(--white); overflow-wrap: anywhere; }
.contact-panel a.big-link:hover { color: var(--mint); }
.contact-panel address { font-style: normal; color: var(--on-dark-soft); font-size: .98rem; line-height: 1.65; }
.contact-panel .social-list { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
.contact-panel .social-list a { color: var(--on-dark-soft); font-size: .98rem; font-weight: 600; border-bottom: 1px solid rgba(239,243,238,.3); padding-bottom: 2px; }
.contact-panel .social-list a:hover { color: var(--white); border-color: var(--white); }
@media (max-width: 900px) { .contact-panel { position: static; padding: var(--s-8) var(--s-6); } }

/* =========================================================================
   Legal pages: sibling nav + clause index beside the text
   ========================================================================= */
.legal-intro { padding-bottom: var(--s-6); }
.legal-intro h1 { max-width: none; font-size: clamp(2.4rem, 4.4vw, 4rem); }
.legal-body { padding-top: var(--s-10); }
.legal-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: var(--s-16); align-items: start; }
.legal-aside { position: sticky; top: 7rem; display: grid; gap: var(--s-10); }
.legal-nav { display: grid; gap: 0; }
.legal-nav a { display: block; padding: .5rem 0 .5rem var(--s-4); border-left: 2px solid var(--line); font-size: .95rem; line-height: 1.4; color: var(--ink-soft); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.legal-nav a:hover { color: var(--ink); border-color: var(--ink-faint); }
.legal-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; border-color: var(--accent); }
.legal-toc-h { font-size: .9rem; font-weight: 700; color: var(--accent-ink); margin-bottom: var(--s-3); }
.legal-layout .legal-content { max-width: 70ch; counter-reset: clause; }
.legal-layout .legal-content h2 {
  counter-increment: clause; scroll-margin-top: 7rem;
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: baseline;
  margin-top: var(--s-12); margin-bottom: var(--s-4); font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 600;
  padding-top: var(--s-6); border-top: 1px solid var(--line);
}
.legal-layout .legal-content h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal-layout .legal-content h2::before { content: counter(clause); font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.5rem; color: var(--ink-faint); }
.legal-layout .legal-content p { padding-left: 2.4rem; font-size: 1rem; line-height: 1.7; }
.legal-layout .legal-content .note-box { margin-left: 2.4rem; max-width: none; }
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; gap: var(--s-8); }
  .legal-aside { position: static; }
  .legal-toc { display: none; }
  .legal-aside .legal-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .legal-aside .legal-nav a { border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1rem; font-size: .9rem; }
  .legal-aside .legal-nav a[aria-current="page"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
  .legal-layout .legal-content p, .legal-layout .legal-content .note-box { padding-left: 0; margin-left: 0; }
  .legal-layout .legal-content p { }
  .legal-layout .legal-content .note-box { padding: var(--s-6); }
}

/* =========================================================================
   Responsive refinements (v3.1)
   ========================================================================= */

/* Platform panels: stronger scrim so copy stays readable over the petri photo */
@media (max-width: 780px) {
  .platform { min-height: 400px; }
  .platform::before { background: linear-gradient(0deg, rgba(16,32,25,.96) 0%, rgba(16,32,25,.84) 55%, rgba(16,32,25,.3) 100%); }
}

/* Home stats: 2 x 2 on phones instead of four tall rows */
@media (max-width: 520px) {
  .credibility-row { grid-template-columns: 1fr 1fr; }
  .credibility-row .cell { padding: var(--s-6) var(--s-4) var(--s-6) 0; border-top: 1px solid var(--line) !important; }
  .credibility-row .cell:nth-child(-n+2) { border-top: none !important; }
  .credibility-row .cell:nth-child(even) { padding-left: var(--s-4); border-left: 1px solid var(--line) !important; }
  .credibility-row .num { font-size: 2.4rem; }
}

/* Smaller type and shorter portraits on phones */
@media (max-width: 560px) {
  .mfg-photo figcaption { font-size: 1.05rem; padding-top: var(--s-10); }
  .person-photo { aspect-ratio: 2 / 1; }
  .person-photo .mono { font-size: 3.6rem; }
  .platform h3 { font-size: 2.4rem; }
}

/* Export thumbnails: initials sit underneath, pack photo covers them once loaded */
.er-thumb { position: relative; background: linear-gradient(160deg, #1B3A27 0%, var(--charcoal) 100%); border-color: transparent; }
.er-thumb::before {
  content: attr(data-mono); position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-serif); font-size: 1.9rem; line-height: 1; color: var(--mint); letter-spacing: .02em;
}
.er-thumb img { position: relative; z-index: 1; }
.er-thumb.has-img { background: var(--white); border-color: var(--line); }
.er-thumb.has-img::before { display: none; }
.er-thumb.is-fallback::after { content: none; }
@media (max-width: 860px) { .er-thumb::before { font-size: 1.5rem; } }

/* R&D ledger on tablets: three partner cells in one row under the lead */
@media (min-width: 641px) and (max-width: 1000px) {
  .rd-ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rd-lead { grid-column: 1 / -1; }
  .rd-cell:not(.rd-lead) { padding-right: var(--s-5); }
  .rd-cell:not(.rd-lead) + .rd-cell { padding-left: var(--s-5); border-left: 1px solid rgba(239,243,238,.14); }
}


/* =========================================================================
   Product films (homepage) — a rail of ten portrait films, one per product.
   Markup is the contract for the PHP build: one <li class="film"> per row of
   assets/data/product-films.json. No card chrome; the poster carries the card.
   ========================================================================= */
.films { --gap: var(--s-6); --cols: 4; }
.films-bar {
  margin-top: var(--s-12);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--line-strong);
}
.films-count { font-size: .9rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.films-count strong { color: var(--ink); font-weight: 700; }
.films-nav { display: flex; gap: var(--s-2); }
.films-nav button {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.films-nav button:hover:not(:disabled) { background: var(--charcoal); color: var(--white); }
.films-nav button:disabled { opacity: .3; cursor: default; }
.films-nav button:focus-visible, .film-poster:focus-visible, .film-link:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.films-rail {
  list-style: none; margin: var(--s-8) 0 0; padding: 0;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0;
  overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.films-rail::-webkit-scrollbar { display: none; }
.film { position: relative; scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column; }

.film-poster {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--radius);
  background: var(--charcoal); color: var(--white); text-align: left; font: inherit;
  isolation: isolate;
}
.film-poster img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.film-poster:hover img { transform: scale(1.04); }
.film-poster::after {            /* legibility scrim under the name */
  content: ""; position: absolute; inset: 45% 0 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(16,32,25,0), rgba(16,32,25,.88));
}
.film-type {
  position: absolute; z-index: 2; top: var(--s-4); left: var(--s-4);
  font-size: .78rem; font-weight: 700; color: var(--mint);
  border: 1px solid rgba(143,209,158,.55); border-radius: 99px; padding: .3rem .7rem;
  background: rgba(16,32,25,.35); backdrop-filter: blur(4px);
}
.film-dur {
  position: absolute; z-index: 2; top: var(--s-4); right: var(--s-4);
  font-size: .78rem; font-weight: 600; color: var(--on-dark); font-variant-numeric: tabular-nums;
  padding: .3rem 0;
}
.film-name {
  position: absolute; z-index: 2; left: var(--s-4); right: 4.75rem; bottom: var(--s-4);
  font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.6rem, 2.1vw, 2.15rem);
  line-height: 1.02; letter-spacing: -.005em; text-wrap: balance;
}
.film-play {
  position: absolute; z-index: 2; right: var(--s-4); bottom: var(--s-4);
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--mint); color: var(--charcoal); display: grid; place-items: center;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), background .2s;
}
.film-play svg { margin-left: 2px; }
.film-poster:hover .film-play { transform: scale(1.1); background: var(--white); }

.film-meta { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.film-meta p { font-size: .92rem; line-height: 1.45; color: var(--ink-soft); max-width: 30ch; }
.film-link {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem;
  font-size: .9rem; font-weight: 700; color: var(--ink);
  border-bottom: 1.5px solid var(--green); padding-bottom: .2rem; text-decoration: none;
}
.film-link svg { transition: transform .2s; }
.film-link:hover svg { transform: translateX(3px); }
.film-link:hover { color: var(--green-dark); }

@media (max-width: 1099px) { .films { --cols: 3; --gap: var(--s-5); } }
@media (max-width: 799px)  { .films { --cols: 2.25; --gap: var(--s-4); } .films-bar { margin-top: var(--s-8); } }
@media (max-width: 559px)  { .films { --cols: 1.35; } .film-name { font-size: 1.7rem; } }

/* ---- Player dialog ------------------------------------------------------- */
.film-dialog {
  border: 0; padding: 0; color: var(--on-dark); background: var(--charcoal);
  width: min(920px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem);
  border-radius: calc(var(--radius) * 1.5); overflow: hidden; margin: auto;
}
.film-dialog::backdrop { background: rgba(8, 16, 12, .82); }
.fd { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.fd-frame { position: relative; height: min(88dvh, 840px); aspect-ratio: 9 / 16; background: #000; }
.fd-frame video { width: 100%; height: 100%; object-fit: contain; display: block; }
.fd-error { position: absolute; inset: 0; display: none; place-items: center; padding: var(--s-8); text-align: center; color: var(--on-dark-soft); font-size: .95rem; background: rgba(0,0,0,.7); }
.fd-frame.is-error .fd-error { display: grid; }
.fd-side { padding: var(--s-10); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-8); min-width: 0; }
.fd-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); }
.fd-type { font-size: .85rem; font-weight: 700; color: var(--mint); }
.fd-close {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; flex: none; cursor: pointer;
  border: 1px solid var(--on-dark-line); background: transparent; color: var(--on-dark);
  display: grid; place-items: center; transition: background .2s;
}
.fd-close:hover { background: rgba(255,255,255,.1); }
.fd-body h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 1.02; color: var(--white); text-wrap: balance; }
.fd-body p { margin-top: var(--s-4); color: var(--on-dark-soft); max-width: 34ch; }
.fd-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.fd-next { background: none; border: 0; color: var(--on-dark); font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; padding: .6rem .2rem; border-bottom: 1.5px solid var(--mint); }
.fd-close:focus-visible, .fd-next:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
@media (max-width: 760px) {
  .film-dialog { width: calc(100vw - 1.5rem); max-height: calc(100dvh - 1.5rem); overflow-y: auto; }
  .fd { grid-template-columns: 1fr; }
  .fd-frame { height: auto; width: min(100%, calc(66dvh * 9 / 16)); margin-inline: auto; }
  .fd-side { padding: var(--s-6); gap: var(--s-5); }
  .fd-close { position: absolute; top: .3rem; right: .3rem; width: 2.25rem; height: 2.25rem; z-index: 3; background: rgba(16,32,25,.6); }
  .fd-body h3 { font-size: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .film-poster img, .film-play, .film-link svg { transition: none; }
  .film-poster:hover img { transform: none; }
}

/* Manufacturing process: step-by-step infographic */
.mfg-figs { list-style: none; padding: 0; margin: var(--s-10) 0 var(--s-8); display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); background: var(--charcoal); color: var(--on-dark); border-radius: var(--radius); overflow: hidden; }
.mfg-figs li { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); border-left: 1px solid rgba(239,243,238,.14); }
.mfg-figs li:first-child { border-left: 0; }
.mfg-figs strong { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.2rem, 3.6vw, 3.1rem); line-height: 1; color: var(--mint); }
.mfg-figs span { font-size: .88rem; line-height: 1.4; color: var(--on-dark-soft); }
.mfg-phases { list-style: none; padding: 0; margin: 0 0 var(--s-12); display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-3); counter-reset: none; }
.mfg-phases li { position: relative; }
.mfg-phases li + li::before { content: ""; position: absolute; left: calc(var(--s-3) * -1); top: 50%; width: var(--s-3); height: 2px; background: var(--accent); opacity: .6; }
.mfg-phases a { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-3); align-items: center; padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-decoration: none; height: 100%; }
.mfg-phases a:hover, .mfg-phases a:focus-visible { border-color: var(--accent); }
.mp-n { grid-row: span 2; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--white); font-weight: 700; font-size: .95rem; }
.mfg-phases strong { font-size: .98rem; line-height: 1.2; color: var(--accent-ink); }
.mfg-phases small { font-size: .78rem; color: var(--ink-faint); }
.mfg-flow { display: flex; flex-direction: column; }
.mfg-block { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-10); align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) * 1.3); padding: var(--s-8); scroll-margin-top: 6rem; }
.mfg-block.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.mfg-block.is-flip .mfg-pic { order: 2; }
.mfg-block.no-pic, .mfg-block.is-flip.no-pic { grid-template-columns: minmax(0, 1fr); }
.mfg-pic { position: relative; margin: 0; min-height: 22rem; border-radius: var(--radius); overflow: hidden; isolation: isolate; color: var(--on-dark);
  background: radial-gradient(circle at 72% 30%, rgba(143,209,158,.20) 0 17%, rgba(143,209,158,.08) 17.5% 25%, transparent 25.5%), linear-gradient(165deg, #1B3A27 0%, var(--charcoal) 100%); }
.mfg-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.mfg-pic::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(16,32,25,.82) 0%, rgba(16,32,25,0) 55%); }
.mfg-pic figcaption { position: absolute; left: var(--s-6); right: var(--s-6); bottom: var(--s-6); display: grid; gap: var(--s-2); }
.mp-big { font-family: var(--font-serif); font-size: clamp(3.4rem, 5vw, 4.6rem); line-height: .9; color: var(--mint); }
.mp-note { font-size: .92rem; line-height: 1.45; color: rgba(239,243,238,.88); }
.mfg-kicker { display: block; font-size: .8rem; font-weight: 600; color: var(--accent); margin-bottom: var(--s-2); }
.mfg-head h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.1; color: var(--accent-ink); margin-bottom: var(--s-6); }
.mfg-rail { list-style: none; padding: 0; margin: 0; position: relative; display: grid; gap: var(--s-4); }
.mfg-rail::before { content: ""; position: absolute; left: 1.45rem; top: 1.5rem; bottom: 1.5rem; width: 2px; background: repeating-linear-gradient(to bottom, var(--accent) 0 8px, transparent 8px 15px); opacity: .5; }
.mfg-step { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--s-4); align-items: start; }
.mfg-node { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--white); box-shadow: 0 0 0 5px var(--surface); position: relative; z-index: 1; }
.mfg-card { background: var(--bg-alt); border-radius: var(--radius); padding: var(--s-4) var(--s-5); }
.mfg-n { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--accent); margin-bottom: var(--s-1); }
.mfg-card h4 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin-bottom: var(--s-2); }
.mfg-card p { font-size: .95rem; max-width: 52ch; }
.mfg-card .mfg-chip { display: inline-flex; align-items: baseline; gap: var(--s-2); margin-top: var(--s-3); padding: var(--s-1) var(--s-3); border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .82rem; color: var(--ink-soft); }
.mfg-chip strong { font-size: .95rem; color: var(--accent-ink); }
.mfg-link { display: grid; place-items: center; height: 3rem; color: var(--accent); }
.mfg-end { display: flex; justify-content: center; margin-top: var(--s-6); }
.mfg-end span { border: 2px solid var(--accent); color: var(--accent-ink); background: var(--surface); font-weight: 700; padding: var(--s-3) var(--s-6); border-radius: 999px; }
@media (max-width: 960px) {
  .mfg-block, .mfg-block.is-flip { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding: var(--s-5); }
  .mfg-block.is-flip .mfg-pic { order: 0; }
  .mfg-pic { min-height: 0; aspect-ratio: 16 / 10; align-self: start; }
  .mfg-phases li + li::before { display: none; }
  .mfg-figs li { border-left: 0; border-top: 1px solid rgba(239,243,238,.14); }
  .mfg-figs li:first-child { border-top: 0; }
}
@media (max-width: 520px) {
  .mfg-step { grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: var(--s-3); }
  .mfg-node { width: 2.4rem; height: 2.4rem; } .mfg-node svg { width: 18px; height: 18px; }
  .mfg-rail::before { left: 1.15rem; }
  .mfg-card { padding: var(--s-4); }
}
}


.css-sync { }
/* About: people — clear, evenly sized portraits, no stretched thumbnails */
.roster { margin-top: var(--s-12); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--s-6); max-width: 60rem; }
.roster .person { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: var(--s-6); row-gap: var(--s-2); align-items: start; align-content: start; padding: var(--s-6); background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.roster .person-photo { grid-row: 1 / span 3; width: 9.5rem; height: 9.5rem; aspect-ratio: 1 / 1; margin: 0; border-radius: 50%; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--line); }
.roster .person-photo img { filter: none; object-fit: cover; object-position: center 12%; }
.roster .person-photo::after { display: none; }
.roster .person-photo .mono { font-size: 2.6rem; }
.roster .person h3 { grid-column: 2; margin: 0; font-size: clamp(1.45rem, 2vw, 1.8rem); }
.roster .person .role { grid-column: 2; }
.roster .person p { grid-column: 2; max-width: none; margin: 0; }
@media (max-width: 560px) {
  .roster .person { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: var(--s-6) var(--s-5); }
  .roster .person-photo { grid-row: auto; margin-bottom: var(--s-2); }
  .roster .person h3, .roster .person .role, .roster .person p { grid-column: 1; }
}