/* ============================================================
   SERVICES PAGE
   ============================================================ */

/* Offset anchored sections below the fixed header */
.service-row {
  scroll-margin-top: 88px;
}

.service-grid {
  display: grid;
  grid-template-columns: 55% 1fr;
  gap: var(--sp-16);
  align-items: center;
}
.service-row--flipped .service-grid {
  grid-template-columns: 1fr 55%;
}
@media (max-width: 900px) {
  .service-grid,
  .service-row--flipped .service-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
  .service-row--flipped .service-media { order: -1; }
}

.service-numeral {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-h1);
  line-height: 1;
  color: var(--bc-gold);
  margin-bottom: var(--sp-4);
}
.service-summary {
  display: block;
  margin-block: var(--sp-3) var(--sp-5);
}
.service-content > p:not(.service-summary):not(.service-suits) {
  margin-bottom: var(--sp-4);
}
.service-content .feature-list {
  margin-block: var(--sp-6);
  columns: 2;
  column-gap: var(--sp-8);
}
@media (max-width: 640px) {
  .service-content .feature-list { columns: 1; }
}
.service-content .feature-list li {
  break-inside: avoid;
}
.service-suits {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-body-lg);
  color: var(--bc-mid);
  margin-bottom: var(--sp-8);
}
.service-placeholder {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-height: 560px;
}
@media (max-width: 900px) {
  .service-placeholder { aspect-ratio: 16 / 10; }
}

/* ── Support levels explainer ── */
.services-support-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
}
@media (max-width: 800px) {
  .services-support-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
}
.services-support-grid h3 {
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--bc-border-strong);
}
.services-support-grid p {
  margin-bottom: var(--sp-4);
  color: var(--bc-mid);
}