/* Verant Studio — semantic heading compatibility
   Keeps the approved service-page visuals unchanged while allowing the
   primary service hero heading to be a real H1 for document structure. */

.service-page .service-hero h1 {
  max-width: 760px;
  margin: 0 0 24px;
  padding: 0;
  color: #fffaf7;
  font-family: "DM Serif Display", serif;
  font-size: clamp(2.65rem, 5.4vw, 5rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.service-page--development .service-hero h1 { color: var(--development-ink); }
.service-page--research .service-hero h1 { color: var(--research-ink); }

/* Related case-study proof cards use direct H3 headings. Keep them readable
   against the dark brown card surface on UX audit and Strategy & research. */
.service-page .service-proof-card > h3 {
  color: #fffaf7;
}

/* Direct fallback for the actual legacy card markup used on UX audit and
   Strategy & research. This intentionally overrides styl.css. */
.service-page--audit .related-case-study--simple > h3,
.service-page--research .related-case-study--simple > h3 {
  color: #fffaf7 !important;
}

@media (min-width: 901px) {
  .service-page--audit .service-hero > h1,
  .service-page--development .service-hero > h1,
  .service-page--research .service-hero > h1 {
    grid-column: 1;
    grid-row: 2;
    max-width: 650px;
    margin: 0 0 26px;
    font-size: clamp(3.25rem, 4.35vw, 4.85rem);
    line-height: .96;
    text-wrap: balance;
  }
}

@media (max-width: 900px) {
  .service-page .service-hero h1 { max-width: 850px; }
}

@media (max-width: 650px) {
  .service-page .service-hero h1 {
    font-size: clamp(2.35rem, 11.6vw, 3.35rem);
    line-height: .99;
  }
}