/* ==========================================================================
   layout.css
   Structural, reusable layout primitives shared across components.
   No color, no typography decisions — geometry only.
   ========================================================================== */

.container {
  /* Mobile-first: a slightly wider percentage on small screens (set in
     responsive.css we tighten/loosen this at breakpoints), capped so
     lines of text never get unreadably wide on large monitors. */
  width: 92%;
  margin-inline: auto;
}

main {
  display: block;
}

/* Two-column layout used by the Company Overview and Contact sections.
   Mobile-first: stacked by default, promoted to a 2-column grid once
   there is enough width for both columns to breathe (see responsive.css). */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: center;
}