/* ==========================================================
   TygerLabs.ai · Service pages and the services index
   ========================================================== */

.service-hero { isolation: isolate; }
.service-hero-stripes {
  position: absolute;
  z-index: -1;
  inset: 0 0 0 35%;
  background: url("../../assets/brand/stripes-tiger.svg") center / cover no-repeat;
  opacity: 0.1;
  mask-image: var(--fade-in-right);
  -webkit-mask-image: var(--fade-in-right);
  pointer-events: none;
}
.service-hero .eyebrow .ph { font-size: 1.25em; }
/* With the form beside it the headline has seven columns, not twelve. */
@media (min-width: 992px) {
  .service-hero h1 { font-size: clamp(2.75rem, 1rem + 4vw, 5rem); }
}


.service-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.service-price { font-size: var(--text-md); padding: 0.55rem 1rem; }

/* Also from: the homepage's service tiles on phones, icon beside the text in
   one tight list, instead of seven full-height stacked cards. */
@media (max-width: 767.98px) {
  .service-others .row.g-4 { --bs-gutter-y: var(--s-2); }
  .service-others .related-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--s-4);
    row-gap: var(--s-1);
    padding: var(--s-4);
  }
  .service-others .related-card .card-icon { grid-row: span 2; }
}

.service-gets { gap: var(--s-4); font-size: var(--text-xl); color: var(--ink); }
.service-gets .ph-fill { font-size: 1.5rem; margin-top: 0.2rem; }

.service-steps-head { margin-bottom: var(--s-6); }
/* Steps carry no numerals; an arrow after the name points to the next
   card, as on the homepage, and turns down once the cards stack. */
.service-step-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.service-step-head h3 { font-size: var(--text-xl); }
.service-step-arrow { flex: none; font-size: 1.5rem; color: var(--tiger); }
@media (max-width: 767.98px) { .service-step-arrow { transform: rotate(90deg); } }
.service-edge { margin-top: var(--s-6); padding: var(--s-6); }
.service-edge p:last-child { font-size: var(--text-xl); color: var(--ink); max-width: none; }

.services-card-title { font-size: var(--text-xl); }

.service-cta { margin-top: var(--section-y); }