/* ══════════════════════════════════════════════════
   INTRO VISUAL SPLIT
   Shared layout for every page's descriptive intro
   section (About, Features, Services grid, Portfolio,
   Contact, and all 9 service detail pages): body text
   ~60% on the left, a matching design-system brand
   object ~40% on the right. Reverses to icon-first on
   mobile.
   Depends on: tokens.css
   ══════════════════════════════════════════════════ */

.site-intro-visual {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  column-gap: var(--space-7);
  align-items: center;
}

.site-intro-visual__icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-intro-visual__icon img {
  display: block;
  width: 100%;
  max-width: 15rem;
  height: auto;
}

/* ── RESPONSIVE ───────────────────────────────────── */

@media (max-width: 900px) {
  .site-intro-visual {
    grid-template-columns: 1fr;
    row-gap: var(--space-6);
  }

  .site-intro-visual__icon {
    order: -1;
    justify-content: flex-start;
  }

  .site-intro-visual__icon img {
    max-width: 9rem;
    margin-inline: 0;
  }
}