.commercial-intro {
  display: grid; grid-template-columns: 1fr 1fr;
}
.commercial-intro-left {
  padding: 80px 48px;
  border-right: 0.5px solid var(--border);
}
.commercial-intro-right {
  padding: 80px 48px;
  background: var(--cream-dark);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.intro-body {
  font-size: 12px; line-height: 1.95;
  color: var(--mid); margin-top: 24px;
}
.intro-body + .intro-body { margin-top: 16px; }
.services-list { display: flex; flex-direction: column; }
.services-list-item {
  padding: 20px 0;
  border-bottom: 0.5px solid var(--border);
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 400;
  color: var(--charcoal);
  display: flex; justify-content: space-between; align-items: center;
}
.services-list-item:first-child { border-top: 0.5px solid var(--border); }

@media (max-width: 1080px) {
  .commercial-intro-left, .commercial-intro-right { padding: 64px 28px; }
}

@media (max-width: 860px) {
  .commercial-intro { grid-template-columns: 1fr; }
  .commercial-intro-left { border-right: none; border-bottom: 0.5px solid var(--border); }
}

@media (max-width: 560px) {
  .commercial-intro-left, .commercial-intro-right { padding: 56px 20px; }
  .services-list-item { font-size: 19px; }
}

.commercial-projects { padding: 80px 48px; }
.comm-grid {
  /* Two columns, like the residential grid, so the site has one rhythm and so
     an odd last card has a rule that already works. Three columns left a third
     or two thirds of a row showing the grid behind it at every count that was
     not a multiple of three. */
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2px; background: var(--border);
}
/* No filter on this page, so the last-of-an-odd-number case is pure CSS. */
.comm-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 861px) {
  .comm-card:last-child:nth-child(odd) .comm-img,
  .comm-card:last-child:nth-child(odd) .comm-meta {
    max-width: calc(50% - 1px);
    margin-left: auto; margin-right: auto;
  }
}
.comm-card {
  background: var(--cream); overflow: hidden;
  display: block; text-decoration: none; color: inherit;
  transition: background 0.2s;
}
.comm-card:hover { background: var(--cream-dark); }
.comm-card:hover .comm-img-inner { transform: scale(1.04); }
.comm-img {
  width: 100%; aspect-ratio: 3/2; overflow: hidden;
  background: var(--panel);
}
.comm-img-inner {
  width: 100%; height: 100%;
  transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}
.comm-img-inner img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.comm-meta {
  padding: 24px 28px;
  border-top: 0.5px solid var(--border);
}
.comm-type {
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-dark); margin-bottom: 6px;
}
.comm-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 400;
  color: var(--charcoal); line-height: 1.2;
}
.comm-loc { font-size: 11px; color: var(--muted); margin-top: 4px; }

@media (max-width: 1080px) {
  .commercial-projects { padding: 64px 28px; }
}

@media (max-width: 860px) {
  .comm-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .commercial-projects { padding: 56px 20px; }
}