/* Restrained corner hierarchy from the approved reference design. */
:root {
  --radius-sm: 3px;
  --radius-md: 8px;
}

.button,
.service-card {
  border-radius: var(--radius-sm);
}

.arch-box,
.contact-panel {
  border-radius: var(--radius-md);
}

.contact-panel input,
.contact-panel textarea {
  border-radius: var(--radius-sm);
}

/* The service grid collapses its borders with a -1px margin, so rounding every
   card notches the seams. Round the outer corners of the row only. */
.service-grid .service-card {
  border-radius: 0;
}

.service-grid .service-card:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.service-grid .service-card:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

@media (max-width: 900px) {
  .service-grid .service-card:first-child,
  .service-grid .service-card:last-child {
    border-radius: 0;
  }
}

@media (max-width: 520px) {
  .service-grid .service-card:first-child {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }

  .service-grid .service-card:last-child {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  }
}