@import url('/responsive-v46.css');

/* Responsive cellular visual storytelling using the supplied imagery. */
.organism-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); align-items: center; gap: clamp(32px, 6vw, 88px); }
.organism-intro-grid .section-heading { margin: 0; }
.cell-image-card { position: relative; margin: 0; overflow: hidden; border: 1px solid rgba(213,235,244,.32); border-radius: 24px; background: #064B70; box-shadow: inset 0 1px rgba(255,255,255,.12), 0 20px 50px rgba(3,45,68,.24); }
.cell-image-card img { display: block; width: 100%; height: auto; object-fit: contain; }
.organism-section .organism-map { margin-top: clamp(38px, 6vw, 72px); }
.cell-balance-section { background: radial-gradient(circle at 82% 20%, rgba(101,190,218,.2), transparent 27%), radial-gradient(circle at 15% 70%, rgba(245,130,32,.11), transparent 27%), linear-gradient(180deg, #075985, #086A96); }
.cell-balance-copy { max-width: 820px; margin: 0 auto; text-align: center; }
.cell-balance-copy .section-heading { margin-bottom: 0; }
.cell-balance-copy .section-description { max-width: 690px; margin-right: auto; margin-left: auto; }
.cell-balance-image { width: min(1080px, 100%); margin: clamp(30px, 5vw, 52px) auto 0; }

@media (max-width: 760px) {
  .organism-intro-grid { grid-template-columns: 1fr; gap: 24px; }
  .cell-image-card { border-radius: 18px; }
  .organism-section .organism-map { margin-top: 34px; }
  .cell-balance-copy { text-align: left; }
  .cell-balance-copy .section-description { margin-right: 0; margin-left: 0; }
  .cell-balance-image { margin-top: 24px; }
}