/* ===== Services =====
   A scroll-scrubbed sequence. The section is taller than the viewport and
   the stage inside is sticky, so scrolling through the section scrubs the
   animation in place instead of moving content past the screen.

   Title and cards are stacked LAYERS in the same stage, not columns side
   by side — they are never on screen together:

     hold        SERVICES centred, alone
     phase 1     SERVICES exits completely off the left edge
     phase 2     the three cards enter from the right and settle centred
     hold        cards sit centred, then the page moves on to "Why Us?"

   --services-scroll controls how much scrolling the whole sequence takes. */

.band--services {
  --services-scroll: 220vh;
  position: relative;
  height: calc(100vh + var(--services-scroll));
  background: var(--cream);
}

.services__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* Both layers are centred in the stage; the script slides them in and out
   horizontally from there. Neither is ever scaled, so type never distorts. */

/* Hugs the text rather than setting a measure: SERVICES takes its size from
   the hero headline (data-fit-match in the markup), so the box just needs to
   wrap whatever that produces and centre on it. */
.services__titlewrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max-content;
  padding: 30px;
  will-change: transform;
}

/* Drawn frame. Replaces the CSS border so the line can animate. Default
   state is fully drawn, so the frame is still there if GSAP never loads or
   the scrub is skipped (mobile, reduced motion). */
.services__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.services__frame rect {
  fill: none;
  stroke: #1a4c54;
  stroke-width: 1;
}

.services__cards {
  position: absolute;
  top: 50%;
  left: calc(var(--gap) * 4);
  right: calc(var(--gap) * 4);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1vw;
  max-width: 1000px;
  /* With position:absolute, setting left + right AND a width constraint
     over-constrains the box — CSS resolves it by ignoring `right`, so the
     group pinned to the left edge. Auto margins centre it in the gutters. */
  margin-inline: auto;
}

.band--services .band__inner {
  width: 100%;
  text-align: left;
}

.band--services .hero__title { color: var(--brown-dark); }

.band--services .line2 {
  --line2-ratio: 0.26;
  margin-top: 0.5em;
}

/* ===== Cards ===== */

.service-card {
  min-width: 0;
  will-change: transform, opacity;
}

.service-card__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 1.1em;
}

.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-card__title {
  font-family: var(--font-display);
  /* Benton ships only 400 and 700, so there is no true middle weight here. */
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 2rem);
  letter-spacing: -0.01em;
  color: var(--brown-dark);
  margin-bottom: 0.5em;
}

.service-card__copy {
  font-size: clamp(0.72rem, 0.9vw, 0.95rem);
  line-height: 1.55;
  color: var(--brown-text);
}

/* ===== Small screens =====
   No room to slide things sideways: unstack the layers and let it flow. */

@media (max-width: 860px) {
  .band--services { height: auto; }

  .services__stage {
    position: static;
    height: auto;
    overflow: visible;
    padding: 12vh var(--gap);
  }

  .services__titlewrap,
  .services__cards {
    position: static;
    width: 100%;
    left: auto;
    right: auto;
    top: auto;
    transform: none !important;
    opacity: 1 !important;
  }

  .services__cards {
    grid-template-columns: 1fr;
    gap: 8vh;
    margin-top: 10vh;
  }

  .service-card {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Sits with the cards and slides in with them as the final beat. */
/* Occupies the first column only, so its width matches the card above it
   and the block stays on the same grid as everything else. */
.services__more {
  grid-column: 1;
  justify-self: stretch;
  margin-top: 3vh;
}

.services__more .btn {
  width: 100%;
  justify-content: space-between;
}

@media (max-width: 860px) {
  .services__more { margin-top: 2vh; }
}

/* The services button keeps the original outlined treatment: brown border
   and text on cream, filling brown on hover. Only the form buttons use the
   filled-by-default style. */
.services__more .btn {
  background: transparent;
  color: var(--brown-dark);
}

.services__more .btn::before { background: var(--brown-dark); }

.services__more .btn:hover,
.services__more .btn:focus-visible { color: var(--cream); }