/* BestAutoService layout — containers, sections */
.bas-container {
  width: 100%;
  max-width: var(--bas-container);
  margin: 0 auto;
  padding: 0 var(--bas-gutter);
}

.bas-section {
  padding: 80px 0;
}

.bas-section--surface-2 { background: var(--bas-surface-2); }
.bas-section--dark {
  background: var(--bas-dark);
  color: var(--bas-fg-inverse);
}

.bas-grid {
  display: grid;
  gap: var(--bas-gap);
}

.bas-grid--services {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.bas-grid--2 {
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.bas-section-head {
  margin-bottom: 40px;
}

.bas-section-head .bas-cap {
  position: relative;
  top: -2px;
}

/* Type scale steps down per the pen's tablet (768) and mobile (390) frames:
   hero h1 64 → 54 → 44, section title 52 → 38 → 32. */
@media (max-width: 1024px) {
  :root {
    --bas-fs-h1: var(--bas-p-fs-54);
    --bas-fs-h2: var(--bas-p-fs-38);
  }

  .bas-grid--services { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  :root {
    --bas-fs-h1: var(--bas-p-fs-44);
    --bas-fs-h2: var(--bas-p-fs-32);
    --bas-fs-h3: var(--bas-p-fs-20);
  }

  .bas-grid--services,
  .bas-grid--2 { grid-template-columns: 1fr; }

  .bas-section { padding: 48px 0; }
}