/* Original SVG illustrations, composed as product views rather than framed cards. */
.hero { grid-template-columns: minmax(0, .87fr) minmax(0, 1.13fr); gap: clamp(32px, 4vw, 64px); }
.hero-wrap { background: radial-gradient(ellipse at 85% 20%, #f5f7f980, transparent 60%); }
.hero-artwork { min-width: 0; margin: -26px -16px -20px; align-self: center; }
.hero-artwork img { width: 100%; height: auto; }
.hero-artwork figcaption { margin: 2px 36px 0; color: #6d737c; font-size: 9px; line-height: 1.7; text-align: right; }
.system-section { background-color: #282b30; background-image: radial-gradient(ellipse at 72% 45%, #282b302b, transparent 58%); }
.system-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; }
.system-artwork { min-width: 0; width: 100%; margin: -20px 0; }
.system-artwork img { width: 100%; height: auto; }
.module-panel { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: center; gap: clamp(32px, 5vw, 72px); padding: 48px 0 0; border: 0; background: transparent; }
.module-copy { padding-inline: 0 12px; }
.module-copy h3 { font-size: 30px; }
.module-copy p { font-size: 15px; }
.module-artwork { min-width: 0; width: 100%; margin: 0; }
.module-artwork img { width: 100%; height: auto; border: 1px solid #e4e7ec; border-radius: 9px; background: #fdfdfe; }
.module-artwork figcaption { padding-top: 12px; color: #6d737c; font-size: 9px; line-height: 1.7; }
/* The artwork supplies the fine detail. Other surfaces stay deliberately quiet. */
.fit-section { background-image: none; background-color: #fdfdfe; }
.contact-section { background-image: none; background-color: #282b30; }
@media (min-width: 1600px) {
  .hero-artwork { margin-inline: -24px; }
}
@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 24px; }
  .hero-artwork { margin-inline: -8px; }
  .system-layout { gap: 40px; }
  .module-panel { gap: 36px; padding-top: 40px; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero-artwork { max-width: 760px; width: 100%; margin: 0; justify-self: center; }
  .hero-artwork figcaption { margin-inline: 7.5%; }
  .system-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .system-artwork { max-width: 700px; margin: 0; justify-self: center; }
  .module-panel { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .module-copy { max-width: 590px; padding: 0; }
  .module-copy h3 br { display: none; }
  .module-artwork { max-width: 720px; justify-self: center; }
}
@media (max-width: 640px) {
  .hero-artwork { margin-top: -16px; }
  .hero-artwork figcaption { margin-inline: 7.5%; font-size: 9px; text-align: left; }
  .module-panel { padding-top: 32px; gap: 24px; }
  .module-copy h3 { font-size: 28px; }
  .module-copy p { font-size: 14px; }
  .module-artwork figcaption { font-size: 9px; }
}

/* Portrait source replaces the former wide, low-resolution photo crop. */
.problem-visual img { object-position: 50% 42%; }
@media (max-width: 640px) {
  .problem-visual { min-height: 0; aspect-ratio: 4 / 5; }
}