.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* ── Section wrappers ── */
.section {
  padding-block: clamp(60px, 8vw, 100px);
}

.section--bg-default { background-color: var(--color-bg); }
.section--bg-light   { background-color: var(--color-light); }

.section__header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: clamp(40px, 6vw, 64px);
}

.section__title  { margin-bottom: 14px; }
.section__intro  { font-size: clamp(1rem, 1.6vw, 1.1rem); }

/* ── Cards grid ── */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* ── References grid ── */
.ref-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* ── About split ── */
.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

/* ── Contact two-col ── */
.contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

/* ── Breakpoints ── */
@media (min-width: 480px) {
  .container { padding-inline: 24px; }
}

@media (min-width: 768px) {
  .container  { padding-inline: 28px; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .ref-grid   { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .contact    { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .container  { padding-inline: 32px; }
  .cards-grid { grid-template-columns: repeat(3, 1fr); }
  .ref-grid   { grid-template-columns: repeat(3, 1fr); }
  .about      { grid-template-columns: 55fr 45fr; gap: 64px; }
}

@media (min-width: 1280px) {
  .container { padding-inline: 40px; }
}