/* =========================================================================
   IRA BIOTECH — Homepage sections
   Every section uses a different composition (no repeated hero/3-card/
   stats/CTA template). No glassmorphism, no pill cards, no stock photos —
   typography, real content and restrained inline SVG carry the design.
   ========================================================================= */

/* ---- Hero (full-bleed background video, no abstract elements) ------------- */
.hero {
  position: relative;
  min-height: min(100vh, 880px);
  display: flex;
  align-items: flex-end;
  padding-top: clamp(7rem, 14vw, 10rem);
  padding-bottom: var(--s-24);
  overflow: hidden;
  background: var(--charcoal);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,32,25,.55) 0%, rgba(16,32,25,.35) 45%, rgba(16,32,25,.82) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 760px; }
.hero .eyebrow, .hero h1 { color: var(--on-dark); }
.hero h1 { margin-block: var(--s-6); }
.hero .lede { font-size: 1.15rem; max-width: 46ch; margin-bottom: var(--s-10); color: var(--on-dark-soft); }
.hero-actions { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
.hero .link-arrow { color: var(--on-dark); border-color: rgba(239,243,238,.4); }
.hero .link-arrow:hover { color: var(--white); border-color: var(--white); }
.scroll-cue {
  position: absolute; left: var(--gutter); bottom: var(--s-8); z-index: 2;
  display: flex; align-items: center; gap: var(--s-3);
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-soft);
}
.scroll-cue .line { width: 32px; height: 1px; background: rgba(239,243,238,.4); }
/* Header-text-on-dark rule now lives in tokens.css (shared by every page with
   a dark top section, not just the homepage's video hero). */
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
@media (max-width: 640px) { .hero { padding-bottom: var(--s-16); } .scroll-cue { display: none; } }
@media (max-width: 640px) { .hero-overlay { background: linear-gradient(180deg, rgba(16,32,25,.72) 0%, rgba(16,32,25,.66) 50%, rgba(16,32,25,.9) 100%); } .hero .lede { color: var(--on-dark); } }

/* ---- Credibility strip ---------------------------------------------------- */
.credibility { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.credibility-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.credibility-row .cell { padding: var(--s-10) var(--s-6); border-left: 1px solid var(--line); }
.credibility-row .cell:first-child { border-left: none; }
.credibility-row .num { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 500; letter-spacing: -.02em; }
.credibility-row .cap { font-size: .82rem; color: var(--ink-soft); margin-top: var(--s-2); max-width: 22ch; }
@media (max-width: 860px) {
  .credibility-row { grid-template-columns: 1fr 1fr; }
  .credibility-row .cell:nth-child(3) { border-left: none; }
}
@media (max-width: 520px) { .credibility-row { grid-template-columns: 1fr; } .credibility-row .cell { border-left: none !important; border-top: 1px solid var(--line); } .credibility-row .cell:first-child { border-top: none; } }

/* ---- Ecosystem (alternating rows) ------------------------------------------ */
.ecosystem-row {
  display: grid; grid-template-columns: 90px 1fr 1fr; gap: var(--s-10);
  padding-block: var(--s-12);
  border-top: 1px solid var(--line);
  align-items: center;
}
.ecosystem-row:last-child { border-bottom: 1px solid var(--line); }
.ecosystem-row .num { font-family: var(--font-serif); font-size: 2.6rem; color: var(--ink-faint); font-style: italic; grid-column: 1; grid-row: 1; }
.ecosystem-row h3 { margin-bottom: var(--s-3); }
.ecosystem-row .icon { width: 34px; height: 34px; margin-bottom: var(--s-4); color: var(--accent); }
.ecosystem-row > div:nth-child(2) { grid-column: 2; grid-row: 1; }
.ecosystem-row > .visual { grid-column: 3; grid-row: 1; }
.ecosystem-row:nth-child(even) > div:nth-child(2) { grid-column: 3; }
.ecosystem-row:nth-child(even) > .visual { grid-column: 2; }
.ecosystem-row .visual { display: flex; align-items: center; justify-content: center; }
.visual-photo {
  position: relative; width: 100%; max-width: 420px; aspect-ratio: 4 / 3;
  border-radius: var(--radius); overflow: hidden;
  background: var(--sage);
}
.visual-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(30%) contrast(1.05);
  transition: filter var(--dur-slow) var(--ease);
}
.visual-photo::after { content: ""; position: absolute; inset: 0; background: var(--green); mix-blend-mode: multiply; opacity: .2; pointer-events: none; }
.ecosystem-row:hover .visual-photo img { filter: grayscale(0%) contrast(1.05); }
@media (max-width: 900px) {
  .ecosystem-row { grid-template-columns: 1fr; gap: var(--s-4); }
  .ecosystem-row > * { grid-column: 1 !important; grid-row: auto !important; }
  .ecosystem-row .visual { order: 0 !important; margin-top: var(--s-4); }
  .visual-photo { max-width: 320px; }
}

/* ---- Technology process rail ----------------------------------------------- */
.process-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-6); position: relative; margin-top: var(--s-10); }
.process-rail::before { content: ""; position: absolute; top: 22px; left: 0; right: 0; height: 1px; background: var(--line); }
.process-step { position: relative; padding-top: var(--s-10); }
.process-step .dot { position: absolute; top: 14px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); }
.process-step .n { font-size: .82rem; font-weight: 700; color: var(--precision); display: block; margin-bottom: var(--s-2); }
.process-step h4 { font-size: 1rem; font-weight: 700; margin-bottom: var(--s-2); }
.process-step p { font-size: .86rem; }
@media (max-width: 900px) {
  .process-rail { grid-template-columns: 1fr; gap: var(--s-8); }
  .process-rail::before { top: 0; bottom: 0; left: 14px; right: auto; width: 1px; height: auto; }
  .process-step { padding-top: 0; padding-left: var(--s-10); }
  .process-step .dot { top: 4px; left: 6px; }
}

/* ---- R&D split ---------------------------------------------------------- */
.credential-list { margin-top: var(--s-8); display: grid; gap: var(--s-4); }
.credential-list .row { display: flex; gap: var(--s-4); padding-block: var(--s-3); border-top: 1px solid var(--line); }
.credential-list .row:first-child { border-top: none; }
/* ---- Manufacturing (facility index) -------------------------------------- */
.facility-index { margin-top: var(--s-8); }
.facility-row {
  display: grid; grid-template-columns: 40px 1fr 1fr 1fr; gap: var(--s-8);
  padding-block: var(--s-6);
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.facility-index .facility-row:last-child { border-bottom: 1px solid var(--line); }
.facility-row .fi-num { font-weight: 700; color: var(--precision); }
.facility-row h4 { font-size: 1.05rem; font-weight: 700; }
.facility-row .loc { font-size: .88rem; color: var(--ink-soft); }
.facility-row .cap { font-size: .86rem; color: var(--ink-faint); }
@media (max-width: 780px) { .facility-row { grid-template-columns: 1fr; gap: var(--s-2); } .facility-row .fi-num { display: none; } }

/* ---- Solutions (large typographic nav) ------------------------------------ */
.solutions-nav { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.solutions-nav a {
  display: block; padding: var(--s-10) var(--s-8);
  border-left: 1px solid var(--line-strong);
  transition: background-color var(--dur-fast) var(--ease);
}
.solutions-nav a:first-child { border-left: none; }
.solutions-nav a:hover { background: var(--sage); }
.solutions-nav .tag { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.solutions-nav h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-block: var(--s-4); }
.solutions-nav p { font-size: .92rem; max-width: 34ch; margin-bottom: var(--s-6); }
@media (max-width: 780px) { .solutions-nav { grid-template-columns: 1fr; } .solutions-nav a { border-left: none; border-top: 1px solid var(--line-strong); } .solutions-nav a:first-child { border-top: none; } }

/* ---- Export markets (dark, typographic route) ----------------------------- */
.export-section { background: var(--charcoal); color: var(--on-dark); }
.export-section h2, .export-section p.lede-dark { color: var(--on-dark); }
.export-section p.lede-dark { color: var(--on-dark-soft); }
.route { margin-top: var(--s-10); }
.route-origin { display: inline-flex; align-items: center; gap: var(--s-3); font-weight: 700; font-size: 1.1rem; padding-bottom: var(--s-3); border-bottom: 1px solid rgba(239,243,238,.25); margin-bottom: var(--s-8); }
.route-origin .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--precision); }
.route-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); }
.route-item { border-left: 1px solid rgba(239,243,238,.2); padding-left: var(--s-6); }
.route-item .status { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--precision); margin-bottom: var(--s-2); }
.route-item h4 { color: var(--on-dark); font-size: 1.3rem; margin-bottom: var(--s-2); }
.route-item p { color: var(--on-dark-soft); font-size: .9rem; }
@media (max-width: 780px) { .route-list { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---- Why IRA (numbered list) ------------------------------------------- */
.reasons-list { margin-top: var(--s-8); }
.reason-row { display: grid; grid-template-columns: 90px 1fr; gap: var(--s-8); padding-block: var(--s-10); border-top: 1px solid var(--line); }
.reasons-list .reason-row:last-child { border-bottom: 1px solid var(--line); }
.reason-row .rn { font-family: var(--font-serif); font-style: italic; font-size: 2.2rem; color: var(--ink-faint); }
.reason-row h4 { font-size: 1.3rem; margin-bottom: var(--s-2); }
.reason-row p { max-width: 60ch; }
@media (max-width: 700px) { .reason-row { grid-template-columns: 1fr; gap: var(--s-2); } }

/* ---- Sustainability (cause/effect chain) --------------------------------- */
.chain { margin-top: var(--s-10); display: grid; gap: 0; max-width: 640px; }
.chain-step { display: grid; grid-template-columns: 28px 1fr; gap: var(--s-5); position: relative; padding-bottom: var(--s-10); }
.chain-step:last-child { padding-bottom: 0; }
.chain-step .node { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-top: 8px; position: relative; z-index: 2; }
.chain-step:not(:last-child)::before { content:""; position:absolute; left: 4px; top: 22px; bottom: -4px; width: 1px; background: var(--line-strong); }
.chain-step h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: var(--s-1); }
.chain-step p { font-size: .92rem; }

/* ---- Certifications strip -------------------------------------------------- */
.cert-row { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-10); align-items: baseline; }
.cert-row span { font-weight: 700; font-size: 1rem; color: var(--ink); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.partner-note { margin-top: var(--s-6); font-size: .88rem; color: var(--ink-soft); }

/* ---- Final CTA ------------------------------------------------------------ */
.final-cta { background: var(--sage); text-align: center; }
.final-cta h2 { max-width: 18ch; margin-inline: auto; }
.final-cta .btn { margin-top: var(--s-8); }

/* R&D band, facilities, platforms, reasons, shift, certs, CTA live in sections.css */