/* ==========================================================================
   Service pages
   Shared by every page built from the service-page template —
   managed-it-services.html is the first. Everything else on those pages is a
   homepage component from styles.css; only what those components do not
   already cover lives here. Keep it that way: if a rule here starts looking
   like something the homepage needs too, it belongs in styles.css.
   ========================================================================== */

/* ----------------------------------------------------------- response -- */
/* The section head sits beside a proof photo, with the client quotes below.
   The photo slot is a fixed name at a fixed 4:3 ratio, so aspect-ratio is set
   here rather than trusted to whatever file is dropped in: a replacement shot
   at a different ratio crops cleanly instead of reshaping the layout. */

.response {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 48px;
  align-items: center;
}

.response__photo { margin: 0; }
.response__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
}

/* ------------------------------------------------------ scope cards -- */
/* The homepage's .service cards expand on click, so styles.css gives them a
   pointer cursor and a hover lift. Service pages use the same card as a static
   one-liner — no data-service, no toggle — and a card that looks clickable but
   does nothing is the broken promise the nav already removed from its column
   heads. So a static card drops both. */

.service:not([data-service]) { cursor: default; }
.service:not([data-service]):hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(255, 255, 255, .14);
}

/* ------------------------------------------------------- consultation -- */
/* The consultation band's background IS --green-700, which is also the site's
   default link colour — so a plain link here would be green on green, 1:1,
   literally invisible. Gold-400 measures 5.1:1 on that green and is what the
   band's phone number already uses. */

.consultation__sub a {
  color: var(--gold-400);
  font-weight: 600;
  text-decoration: none;
}
.consultation__sub a:hover { color: var(--gold-500); text-decoration: underline; }

/* -------------------------------------------------------- breakpoints -- */

@media (max-width: 900px) {
  .response { grid-template-columns: 1fr; gap: 28px; }
}