/* City pages. They build on service.css and installation.css (type, sections, heads, intro, FAQ) and add only their
   own layouts: the contract band, the services as a ruled list, the kinds of business as photos with captions. */

/* Maintenance contract: the page's one navy band, text beside the three terms, lines like the header's */
.cy-contract { padding: clamp(4.5rem, 3rem + 4vw, 7rem) 0; background: linear-gradient(100deg, var(--navy) 0%, #0b4a93 100%); color: #fff; }
.cy-contract .sv-h2 { color: #fff; }
.cy-contract .sv-duo > div > p { color: rgb(255 255 255 / .82); }
.cy-contract a { color: #8fdcff; text-decoration: underline; text-underline-offset: 3px; }
.cy-contract a:focus-visible { outline: 3px solid #8fdcff; outline-offset: 2px; }
.cy-contract__list li { padding: 22px 0 24px; border-top: 1px solid rgb(255 255 255 / .15); }
.cy-contract__list li:last-child { border-bottom: 1px solid rgb(255 255 255 / .15); }
.cy-contract__list h3 { font-family: "Poppins", sans-serif; font-size: 1.1rem; font-weight: 600; line-height: 1.35; color: #fff; }
.cy-contract__list p { margin-top: 8px; line-height: 1.65; color: rgb(255 255 255 / .8); }

/* Services: three columns of ruled entries, the name links to the service page */
.cy-svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3.5rem); }
.cy-svc li { padding: 22px 0 28px; border-top: 1px solid #c9d8e8; }
.cy-svc h3, .cy-clients h3 { font-family: "Poppins", sans-serif; font-size: 1.1rem; font-weight: 600; line-height: 1.35; color: var(--navy); }
.cy-svc h3 a { display: inline-block; margin: -10px 0; padding: 10px 0; color: var(--navy); text-decoration: underline; text-decoration-color: rgb(0 45 95 / .25); text-underline-offset: 4px; }
.cy-svc h3 a:hover { text-decoration-color: currentColor; }
.cy-svc p, .cy-clients p { margin-top: 10px; line-height: 1.65; color: var(--muted); }

/* Kinds of business: a photo of the place over its name and a line on what the air conditioning faces there */
.cy-clients { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem clamp(1.25rem, 2.5vw, 2rem); }
.cy-clients img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.cy-clients h3 { margin-top: 18px; }

@media (max-width: 1024px) {
  .cy-svc, .cy-clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .cy-svc, .cy-clients { grid-template-columns: minmax(0, 1fr); }
  /* On phones each kind of business is a row: a small photo beside its text */
  .cy-clients { row-gap: 24px; }
  .cy-clients li { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .cy-clients img { aspect-ratio: 1; border-radius: 10px; }
  .cy-clients h3 { margin-top: 0; }
  .cy-clients p { margin-top: 6px; line-height: 1.55; }
}