/* ============================================================
   Services hub (page-templates/service.php)
   Mirrors scratchpad/fa-capture/snapshots/services
   ============================================================ */

.svc-hero {
  padding-block: var(--section-pad-y) var(--space-2xl);
  background: var(--surface-page);
}

.svc-hero__inner {
  max-width: 46ch;
}

.svc-hero__h1 {
  font: var(--type-hero);
  letter-spacing: var(--ls-hero);
  margin: 0 0 var(--space-md);
}

.svc-hero__sub {
  font: var(--type-lead);
  color: var(--text-primary);
  margin: 0;
}

/* Optional hero photo (FAP-9): fills the empty right half beside the heading. */
.svc-hero--media .fa-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}

.svc-hero__media {
  min-width: 0;
}

.svc-hero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (max-width: 1023px) {
  .svc-hero--media .fa-container {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }
}

/* Phones (FAP-9 "looks poor on mobile"): the page already starts below the
   fixed header, so the desktop 120px top padding left an empty band; the 60px
   hero heading at 0.9 line height ran to nine cramped lines. */
@media (max-width: 639px) {
  .svc-hero {
    padding-block: var(--space-xl) var(--space-2xl);
  }

  .svc-hero__h1 {
    font-size: clamp(36px, 10.5vw, 44px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  .svc-hero__sub {
    font-size: 18px;
    line-height: 1.45;
  }
}

/* Pinned scroller: left stage stays sticky while the right column of
   .svc-block cards scrolls past; service.js toggles which mascot image
   (and which stage background colour) is active as each block crosses
   the middle of the viewport. */
.svc-scroll {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xl);
  padding-block: var(--space-xl);
}

.svc-stage {
  position: sticky;
  top: calc(var(--header-height, 88px) + var(--space-lg));
  flex: 0 0 44%;
  height: 70vh;
  min-height: 420px;
  border-radius: var(--radius-none);
  overflow: hidden;
  transition: background var(--dur-base) var(--ease-standard);
}

.svc-stage__inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.svc-mascot {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 68%;
  max-height: 68%;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
}

.svc-mascot.is-active {
  opacity: 1;
}

.svc-track {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.svc-block {
  position: relative;
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--divider-on-light, rgba(5, 14, 30, 0.12));
}

.svc-block:first-child {
  border-top: none;
}

.svc-block__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.svc-block__mascot-m {
  display: none;
}

.svc-block__h2 {
  font: var(--type-h3);
  margin: 0 0 var(--space-sm);
}

.svc-block__desc {
  font: var(--type-body);
  margin: 0 0 var(--space-md);
  max-width: 56ch;
}

.svc-block__list {
  margin: 0 0 var(--space-lg);
  padding-left: 1.1em;
  display: grid;
  gap: var(--space-xs);
  font: var(--type-body);
}

.svc-block .fa-btn {
  position: relative;
  z-index: 2;
}

@media (max-width: 1023px) {
  .svc-scroll {
    flex-direction: column;
    gap: var(--space-2xl);
  }

  .svc-stage {
    display: none;
  }

  .svc-block__mascot-m {
    display: block;
    width: 100%;
    aspect-ratio: 1.4;
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-none);
    overflow: hidden;
  }

  .svc-block__mascot-m img {
    max-width: 60%;
    max-height: 60%;
  }

  /* The scroller sits outside .fa-container, so on narrow screens its text
     ran edge to edge; give it the page gutter. */
  .svc-track {
    width: 100%;
    padding-inline: var(--sp-gutter, 16px);
  }
}

@media (max-width: 639px) {
  .svc-block__h2 {
    font-size: 32px;
    line-height: 1.1;
    text-wrap: balance;
  }
}

/* Remaining 8 real services, listed as a simple card grid below the
   headline scroller. */
.svc-more {
  padding-block: var(--space-2xl);
  background: var(--surface-muted, #f5f5f2);
}

.svc-more__title {
  font: var(--type-section);
  margin: 0 0 var(--space-lg);
}

.svc-more__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-card, 20px);
}

.svc-more__card {
  display: block;
  background: var(--fa-white, #fff);
  padding: var(--pad-card, 24px);
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-none);
  box-shadow: var(--border-ink, inset 0 0 0 1px rgba(5, 14, 30, 0.12));
  transition: opacity var(--dur-base) var(--ease-standard);
}

.svc-more__card:hover {
  opacity: var(--hover-opacity, 0.8);
}

.svc-more__cname {
  font: var(--type-card);
  margin: 0 0 var(--space-xs);
}

.svc-more__cdesc {
  font: var(--type-body);
  margin: 0 0 var(--space-md);
}

.svc-more__clink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  font: var(--type-link);
}

.svc-more__clink svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 1023px) {
  .svc-more__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .svc-more__grid {
    grid-template-columns: 1fr;
  }
}

/* Case-study teaser (shared visual pattern with the industries hub — kept
   page-local per the CSS isolation rule rather than a shared partial). */
.fa-morecs {
  padding-block: var(--space-2xl);
}

.fa-morecs__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.fa-morecs__title {
  font: var(--type-section);
  margin: 0;
}

.fa-morecs__all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  font: var(--type-link);
  text-decoration: none;
  color: inherit;
}

.fa-morecs__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.fa-morecs__name {
  font: var(--type-h3);
  margin: 0 0 var(--space-sm);
}

.fa-morecs__desc {
  font: var(--type-body);
  margin: 0 0 var(--space-md);
}

.fa-morecs__view {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  font: var(--type-link);
  text-decoration: none;
  color: inherit;
}

.fa-morecs__media img {
  width: 100%;
  border-radius: var(--radius-none);
}

@media (max-width: 1023px) {
  .fa-morecs__body {
    grid-template-columns: 1fr;
  }

  .fa-morecs__media {
    order: -1;
  }
}

/* Final CTA band. The redesign layers decorative cluster imagery here
   (cta-accent/large/small.png) that wasn't part of the curated asset set
   copied into this theme, so the left half is rendered as a flat accent
   panel instead of the layered illustration cluster. */
.fa-finalcta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
  background: var(--surface-dark, #050e1e);
  color: var(--text-on-dark, #fff);
}

.fa-finalcta__left {
  background: var(--fa-yellow, #fceb4e);
}

.fa-finalcta__right {
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fa-finalcta__title {
  font: var(--type-section);
  margin: 0 0 var(--space-md);
}

.fa-finalcta__sub {
  font: var(--type-lead);
  margin: 0 0 var(--space-lg);
}

.fa-finalcta__ctas {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.fa-finalcta__btn2 {
  color: inherit;
  text-decoration: underline;
  font: var(--type-link);
}

@media (max-width: 1023px) {
  .fa-finalcta {
    grid-template-columns: 1fr;
  }

  .fa-finalcta__left {
    min-height: 160px;
  }
}