/* ==========================================================================
   Commercial Solutions page
   ========================================================================== */

/* ---------- Intro, projects and service cards ---------- */
.cs-main { padding: 1em 0; }
.cs-main-inner { padding: 10px; }
.cs-intro { max-width: 720px; margin: 0 auto; padding: 2em; text-align: center; }
.cs-lead { text-align: center; margin-bottom: 0; }
.cs-projects { margin-top: 34.4px; padding: 10px; } /* 14.4px paragraph gap + 20px widget gap */

/* Project accordion: the commercial list keeps its desktop sizes on every width */
.cs-projects .acc-title { font-size: inherit; letter-spacing: 0; }
.cs-projects .acc-head { font-weight: 700; gap: 2px; }
.cs-projects .acc-head .icon { font-size: 24px; margin: 0 -4px; }
.cs-projects .acc-body { padding: 30px 85px 20px 65px; }
.cs-projects .project-table { font-size: 14.4px; line-height: 1.5; border-color: rgba(128, 128, 128, .502); }
.cs-projects .project-table th, .cs-projects .project-table td { padding: 15px; border-color: rgba(128, 128, 128, .502); }
.cs-projects .project-table tr:nth-child(odd) { background: rgba(128, 128, 128, .071); }
.cs-projects .project-table th { width: 21.5%; font-weight: 700; }
.cs-projects .project-table td p { margin: 0 0 14.4px; }
.cs-projects .project-table td p:last-child { margin-bottom: 0; }
.cs-projects .project-figure { max-width: var(--w, 100%); margin: 15px 0 0; }
.cs-projects .project-figure figcaption { line-height: 1.6; margin: 0 0 8px; }
.cs-photo { margin-top: 15px; max-width: 100%; height: auto; }
.cs-photo + .cs-photo { margin-top: 14.4px; }
.cs-photo-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 15px; }
.cs-photo-row img { width: 481px; max-width: 100%; }
.cs-exp-title { margin-top: 20px; padding-bottom: 10px; color: var(--c-red); }

.cs-cards { display: grid; grid-template-columns: 1fr 1fr; }
.cs-card {
  min-width: 0; margin: 1em; padding: 3em 2em;
  display: flex; flex-direction: column; align-items: flex-start;
  border: 1px dashed var(--c-blue); border-radius: var(--radius-lg);
  transition: box-shadow .3s, border-color .3s;
}
.cs-card:hover { box-shadow: 0 12px 40px -18px rgba(13, 30, 70, .35); }
.cs-card > img {
  width: 100%; height: 300px; object-fit: cover;
  border-radius: var(--radius);
}
.cs-card > .btn { margin-top: 20px; gap: 5px; }
.cs-card > .btn .icon { font-size: 12px; }
.cs-card > h3 { margin: 28px 0 16px; }
.cs-card-body { margin-top: 20px; width: 100%; }
.cs-card-body ul { padding-left: 40px; }

/* ---------- We handle plumbing projects (photo + counters) ---------- */
.cs-services { padding: 5em 0 0; overflow: hidden; }
.cs-services-grid { display: flex; }
.cs-services-grid > * { width: 33.333%; }
.cs-services-text { padding: 3em 5em 3em 1em; display: flex; flex-direction: column; justify-content: center; }
.cs-services-text h2 { margin-bottom: 20px; }
.cs-services-media { background: url(../../img/2023/10/memphis_img2.png) center no-repeat; align-self: flex-start; }
.cs-services-media img { width: 100%; }
.cs-services-counters { padding: 3em 1em 3em 5em; justify-content: center; }

@media (max-width: 1024px) {
  .cs-main { padding: 1em 0 0; }
  .cs-card { margin: 10px; padding: 2em; }
  .cs-projects .project-table th { width: 23.7%; }
  .cs-services { padding-top: 1em; }
  .cs-services-grid { flex-wrap: wrap; }
  .cs-services-text { width: 100%; padding: 2em; }
  .cs-services-media { width: 60%; }
  .cs-services-counters { width: 40%; padding: 2em; }
}
@media (max-width: 767px) {
  .cs-main { padding: 0; }
  .cs-intro { padding: 21px; }
  .cs-projects .acc-head { padding: 15px 31px; font-size: 16px; }
  .cs-projects .acc-body { padding: 30px 85px 20px 65px; }
  .cs-projects .project-table { font-size: 14.4px; }
  .cs-projects .project-table th, .cs-projects .project-table td { padding: 15px; }
  .cs-projects .project-table th { width: auto; }
  .cs-cards { grid-template-columns: 1fr; }
  .cs-services-text, .cs-services-media, .cs-services-counters { width: 100%; }
  .cs-services-text, .cs-services-counters { padding: 21px; }
}

/* ---------- Call-to-action band: icon box spacing as in the original (2em of the body text, not of the icon) ---------- */