.canine-services-page {
  background: var(--paper-50);
  color: var(--ink-900);
}

/* Deliberately no overflow:hidden here (unlike .studio-canvas/.resources-canvas) — an
   overflow:hidden ancestor becomes the containing block for position:sticky, which caps a
   sticky element's stick range to that ancestor's own box instead of the real viewport,
   breaking .services-stack's pin-and-cover effect entirely. Nothing on this page actually needs
   the clip: the marquee that would have needed it isn't here, and .media-gallery__stage already
   clips its own drag-track locally. */

/* Four full-viewport statements, each pinned via plain CSS position:sticky (no ScrollTrigger
   needed — this page's Lenis instance smooths native window scroll rather than transforming a
   wrapper, so native sticky positioning tracks it with no desync risk). Stacked directly in
   document flow: each later panel is a later sibling, so it paints over the previous one by
   default — the explicit z-index below just makes that stacking order unambiguous rather than
   relying on paint-order alone. As you scroll, each panel sticks at the top of the viewport
   until the next one arrives and covers it completely.

   min-height is a plain 100svh, not (100svh - header height) like .page-hero uses — the header
   is position:sticky with height:0 and floats over content via z-index:50, it never actually
   needs the panel to leave room for it. Subtracting the header's height here previously left
   each panel 62px short of the true viewport, letting the next panel peek through at the
   bottom on initial load. */
.services-stack {
  position: relative;
  /* base.css's generic `section { padding: var(--space-5) 0; }` applies to every bare <section>
     by default — every other full-bleed section on the site (.page-hero, .snap-panel, etc.)
     explicitly overrides it with its own padding, but this one never did, so it silently
     inherited 64px of top/bottom padding. That's what was pushing the first panel down 64px on
     load (and would have left the same gap at the bottom, after the last panel). */
  padding: 0;
}

.services-stack__panel {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: clamp(2rem, 6vw, 4rem);
  background-size: cover;
  background-position: center;
  color: var(--paper-50);
}

.services-stack__panel .eyebrow {
  position: relative;
  z-index: 1;
  color: var(--paper-50);
  opacity: 0.8;
}

.services-stack__lede {
  position: relative;
  z-index: 1;
  max-width: 55ch;
  margin: 0 auto;
  color: rgba(245, 243, 236, 0.86);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.6;
}

/* Full-bleed photo + a color-tinted gradient (same technique as .page-hero__bg::after) so the
   heading stays legible over any image while the tint still carries each panel's own color
   meaning — ink-neutral for the two opening panels, photo-only for Studio and Adventures. */
.services-stack__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}

.services-stack__panel h1,
.services-stack__panel h2 {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  max-width: 20ch;
  margin: 0 auto;
}

.services-stack__panel--hero {
  z-index: 1;
  background-image: url('../../assets/images/working-dogs.webp');
  background-position: 40% 25%;
}

.services-stack__panel--hero::before {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ink-900) 55%, transparent) 0%,
    color-mix(in srgb, var(--ink-900) 72%, transparent) 100%
  );
}

.services-stack__panel--statement {
  z-index: 2;
  background-image: url('../../assets/images/caroline-ralph-kiss.webp');
  background-position: 60% 8%;
}

.services-stack__panel--statement::before {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ink-900) 55%, transparent) 0%,
    color-mix(in srgb, var(--ink-900) 72%, transparent) 100%
  );
}

.services-stack__panel--studio {
  z-index: 3;
  background-image: url('../../assets/images/blueprint-studio-ai-kitchen.webp');
  background-position: 55% 60%;
}

/* No tint here (unlike the hero/statement/outdoors panels) — the photo itself carries this
   panel, shown as-is. */
.services-stack__panel--studio::before {
  background: none;
}

.services-stack__panel--outdoors {
  z-index: 4;
  background-image: url('../../assets/images/jbwo-weight-pull.webp');
  background-position: 50% 40%;
}

/* No tint here either — same as the Studio panel, image shown as-is. */
.services-stack__panel--outdoors::before {
  background: none;
}

/* Three alternating feature rows — image one side, copy the other, flipping per row. Built
   fresh for this page rather than reusing .equipment-row, which is hand-tuned column-by-column
   for six specific pieces of equipment and doesn't generalise to three new items cleanly. */
.services-features {
  border-top: 1px solid rgba(19, 128, 154, 0.18);
}

.services-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(3rem, 8svh, 6rem);
  border-bottom: 1px solid rgba(19, 128, 154, 0.18);
}

/* Flips visual order without duplicating markup order — image/copy just swap sides on every
   other row. Children are set back to ltr so their own inline content still reads normally. */
.services-feature:nth-child(even) {
  direction: rtl;
}

.services-feature > * {
  direction: ltr;
}

.services-feature__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.services-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.04);
}

.services-feature__index {
  display: block;
  color: var(--teal-500);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 0.75em;
}

/* Homepage "Our Story" — one .services-feature row, with the Blueprint badge pinned to the photo. */
.home-story .services-feature {
  border-bottom: 0;
}

.home-story__media {
  position: relative;
  overflow: visible;
}

.home-story__media > img:first-child {
  display: block;
}

.home-story .home-story__badge {
  position: absolute;
  right: clamp(-1.5rem, -2vw, -0.75rem);
  bottom: clamp(-1.5rem, -2vw, -0.75rem);
  width: clamp(6.5rem, 11vw, 9.5rem);
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(11, 31, 75, 0.28));
}

.services-feature__logo {
  display: block;
  width: clamp(11rem, 20vw, 16rem);
  height: auto;
  margin-bottom: 1.25rem;
}

.services-feature__soon {
  display: inline-block;
  margin-left: 0.6em;
  padding: 0.2em 0.7em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.68rem;
  vertical-align: middle;
}

.services-feature h3 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.6vw, 4.4rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 0.4em;
}

.services-feature p {
  max-width: 42ch;
  color: #45505e;
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.6;
  margin: 0 0 1.4em;
}

@media (max-width: 780px) {
  .services-feature,
  .services-feature:nth-child(even) {
    grid-template-columns: 1fr;
    direction: ltr;
    padding-block: 2.5rem;
  }
}

/* The first panel opens like every other brand hero: blueprint grid (from components.css,
   painted beneath the text here) and the Blueprint badge above the eyebrow. */
.services-stack__panel--hero::after {
  z-index: 0;
}

.services-stack__badge {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}