/* intro-duo — charcoal panel that rides up over the hero. */

.introduo { position: relative; z-index: 2; }

.introduo__panel {
  margin-top: -64px;           /* measured overlap: hero ends 1197, panel
                                * starts 1133 */
  padding: var(--space-md) var(--space-2xl);
  background: var(--color-charcoal);
  color: var(--color-text-inv);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xl);
}


/* Both headings run long — "Manufacturing Skill Solutions Delivered in
 * Forty-Six Countries Across a Wide Variety of Manufacturing Platforms" is
 * three lines at every width. Balancing stops a one-word last line. */
.introduo__heading { text-wrap: balance; }

.introduo__body { margin-top: var(--space-sm); font-size: var(--step--1); }

.introduo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

@media (max-width: 992px) {
  .introduo__panel {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding: var(--space-lg) var(--space-md);
    margin-top: calc(clamp(1.75rem, 0.625rem + 3.750vw, 4rem) * -1);
  }
}
@media (max-width: 768px) {
  .introduo__panel { margin-top: 0; }
  .introduo__actions .btn { width: 100%; }
}

/* min-width:0 — without it a long unbroken string in either column forces
 * the 1fr tracks wider than the panel. */
.introduo__col { min-width: 0; }

/* -- Enclosure ----------------------------------------------------------
 * Tray and plate: an outer shell with a hairline and the tray padding, and
 * two inner cores with their own ground and an inset highlight.
 *
 * Rob's change 2026-08-21: the panel used to ride ~64px up over the hero.
 * It now clears it by a little instead — the overlap fought the hero's
 * rounded bottom corners.
 * ---------------------------------------------------------------------- */
.introduo__panel {
  /* Rides up over the hero again — Rob 2026-08-21. The hero is 70vh now, so
   * there is room for the overlap without the panel colliding with the
   * headline. Negative on the panel, not a positive margin on the container,
   * so the hero's rounded bottom corners stay visible behind it. */
  margin-top: calc(var(--hero-overlap) * -1);
  padding: var(--tray-pad);
  gap: 0;
  background: var(--enclosure-bg);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-shell);
  box-shadow: var(--shadow-md);
}
.introduo__col {
  padding: clamp(1.5rem, 1rem + 1.667vw, 2.5rem);
  background: var(--color-charcoal);
  box-shadow: var(--shadow-inner);
}
.introduo__col:first-child { border-radius: var(--radius-core) 0 0 var(--radius-core); }
.introduo__col:last-child  { border-radius: 0 var(--radius-core) var(--radius-core) 0; }

@media (max-width: 992px) {
  .introduo__col:first-child,
  .introduo__col:last-child { border-radius: var(--radius-core); }
  .introduo__panel { gap: var(--tray-pad); }
}