.services-story {
  --header-height:88px;
  --services-navy: #031b2b;
  --services-cyan: #28c8dd;
  --services-orange: #ff7a36;
  --type-service-title: var(--type-display-md);
  --type-service-number: clamp(150px, 14vw, 220px);
  position: relative;
  z-index: 1;
  background: #fff;
  color: var(--services-navy);
}

.services-intro__content,
.services-stage__grid {
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max-width));
  margin-inline: auto;
}

.services-kicker {
  margin: 0;
  color: var(--services-navy);
  font-size: var(--type-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  line-height: 1;
}

.services-kicker span { color: #078be8; }

.services-intro__content {
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max-width));
  margin-inline: auto;
}

.services-intro__title {
  max-width: none;
  margin: var(--section-heading-gap) 0 0;
  white-space: nowrap;
  font: var(--weight-medium) var(--section-title-size)/var(--section-title-line-height) var(--font-heading);
  letter-spacing: var(--section-title-letter-spacing);
  overflow: visible;
}

.services-intro__copy {
  max-width: 580px;
  margin: var(--section-copy-gap) 0 0;
  color: rgba(3,27,43,.68);
  font-size: var(--type-body-lg);
  line-height: var(--leading-body);
}

.services-story {
  height: calc(360svh - 220px);
  min-height: 2230px;
  margin-top: 0;
  margin-bottom: 112px;
}

.services-stage {
  --header-height: 88px;
  --services-header-top-gap: clamp(22px, 3vh, 34px);
  --services-header-gap: clamp(56px, 6vh, 72px);
  --services-section-header-height: 180px;
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
}

.services-section__header {
  position: absolute;
  z-index: 20;
  top: calc(var(--header-height) + var(--services-header-top-gap));
  left: 50%;
  right: auto;
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max-width));
  margin: 0;
  overflow: visible;
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
  pointer-events: none;
}

.services-stage__grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(36px, 3.3vw, 48px);
  align-items: start;
  padding-block: calc(var(--header-height) + var(--services-header-top-gap) + var(--services-section-header-height) + var(--services-header-gap)) 24px;
  box-sizing: border-box;
}

.services-copy {
  position: relative;
  z-index: 4;
  grid-column: 1 / 5;
  min-width: 0;
  max-width: 100%;
  height: min(58svh, 560px);
  min-height: 410px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.services-copy__viewport { position: relative; height: 300px; }

.service-panel {
  position: absolute;
  inset: 0;
  isolation: isolate;
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.service-panel::before {
  content: attr(data-service-number);
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  transform: translateY(-70%);
  color: rgba(3,27,43,.075);
  font: var(--weight-medium) var(--type-service-number)/.8 var(--font-heading);
  letter-spacing: -.08em;
  pointer-events: none;
  user-select: none;
}

.service-panel.is-active { visibility: visible; opacity: 1; }

.service-panel .service-title {
  position: relative;
  z-index: 1;
  max-width: 100%;
  margin: 0;
  font: var(--weight-semibold) var(--type-service-title)/.98 var(--font-heading);
  letter-spacing: -.035em;
  overflow-wrap: normal;
  word-break: normal;
}

.service-panel .service-title span { display: block; }

.service-panel__description {
  position: relative;
  z-index: 1;
  max-width: 390px;
  margin: 24px 0 0;
  color: rgba(3,27,43,.72);
  font-size: var(--type-body-lg);
  line-height: var(--leading-body);
}

.services-media-window {
  position: relative;
  z-index: 2;
  grid-column: 5 / 13;
  min-width: 0;
  width: 100%;
  height: min(58svh, 560px);
  min-height: 410px;
  margin: 0;
  display:grid;
  grid-template-rows:minmax(0, 1fr) 110px;
  overflow: visible;
}

.services-media-window__clip {
  position:relative;
  inset:auto;
  grid-row:1;
  width:100%;
  height:100%;
  overflow: hidden;
  clip-path: url(#servicesMediaWindowClip);
  background: #031222;
  contain: paint;
}

.service-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 0, 0) scale(1.1);
  transform-origin: center;
  will-change: transform, clip-path;
}

.service-media.is-active { opacity: 1; visibility: visible; }

.services-media-window__grade {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3,27,43,.03), transparent 56%, rgba(3,27,43,.22));
}

.services-wave-wipe {
  position: absolute;
  z-index: 6;
  top: -5%;
  bottom: -5%;
  left: -10%;
  width: 20%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(88,215,232,.35) 48%, rgba(255,255,255,.72) 50%, transparent 53%);
  clip-path: polygon(0 0, 72% 0, 94% 18%, 66% 36%, 100% 56%, 70% 76%, 92% 100%, 0 100%);
}

.services-navigation {
  position:relative;
  grid-row:2;
  width:100%;
  height:110px;
  overflow:visible;
}
.services-curve {
  position:absolute;
  z-index:5;
  inset:-28px 0 auto;
  display:block;
  width:100%;
  height:92px;
  overflow:visible;
  pointer-events:none;
}
.services-curve path {
  fill:none;
  stroke:var(--services-cyan);
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.services-navigation__nodes circle {
  fill:#fff;
  stroke:rgba(3,27,43,.34);
  stroke-width:1.25;
  vector-effect:non-scaling-stroke;
  transform-box:fill-box;
  transform-origin:center;
  transition:fill .24s ease,stroke .24s ease,transform .24s ease;
}
.services-navigation__nodes circle.is-active {
  fill:var(--services-cyan);
  stroke:var(--services-cyan);
  transform:scale(1.35);
}
.services-navigation__count {
  position:absolute;
  z-index:7;
  left:0;
  bottom:0;
  margin:0;
  padding-right:12px;
  color:rgba(3,27,43,.48);
  background:#fff;
  font:var(--weight-medium) var(--type-caption)/1 var(--font-body);
  letter-spacing:.1em;
}
.services-navigation__count b { color:var(--services-cyan); font-weight:var(--weight-semibold); }
.services-navigation__count span { font-weight:var(--weight-medium); }

@media (max-width: 980px) {
  .services-story {
    --type-service-title:clamp(38px,5vw,52px);
    --type-service-number:clamp(120px,16vw,170px);
  }
  .services-intro__content,
  .services-stage__grid { width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max-width)); }
  .services-stage__grid { column-gap: 36px; }
  .services-copy { grid-column: 1 / 6; }
  .services-media-window { grid-column: 6 / 13; }
}

@media (max-width: 820px) {
  .services-story {
    --type-service-title:clamp(34px,8vw,48px);
  }
  .services-intro__content,
  .services-stage__grid { width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max-width)); }
  .services-stage { --services-header-top-gap:18px; --services-header-gap:clamp(44px,6vh,56px); }
  .services-intro__title { max-width: 620px; margin-top:var(--section-heading-gap); white-space: normal; }
  .services-intro__title span { display: block; white-space: nowrap; }
  .services-intro__copy { max-width: 480px; margin-top:var(--section-copy-gap); }

  .services-story { height: calc(250svh - 90px); min-height: 1710px; margin-top: 48px; margin-bottom:72px; }
  .services-stage { min-height: 620px; }
  .services-stage__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding:calc(var(--header-height) + var(--services-header-top-gap) + var(--services-section-header-height) + var(--services-header-gap)) 0 28px;
  }
  .services-copy {
    flex: 0 0 auto;
    height: 210px;
    min-height: 0;
    justify-content: flex-end;
  }
  .services-copy__viewport { height: 225px; }
  .service-panel { justify-content: flex-end; }
  .service-panel__description { max-width: 560px; margin-top: 24px; }
  .services-media-window {
    flex: 0 0 auto;
    width: 100%;
    height: min(36svh, 330px);
    min-height: 240px;
    margin-top: 16px;
  }
}

@media (max-width: 520px) {
  .services-story {
    --type-service-title:clamp(33px,10.2vw,43px);
    --type-service-number:clamp(100px,31vw,140px);
  }
  .services-stage { --services-header-gap:clamp(32px,4.5vh,40px); }
  .services-intro__title { max-width: 350px; }
  .services-story { height: calc(245svh - 90px); min-height: 1590px; margin-bottom:56px; }
  .services-stage__grid { padding-top:calc(var(--header-height) + var(--services-header-top-gap) + var(--services-section-header-height) + var(--services-header-gap)); padding-bottom:24px; }
  .services-copy { height: 205px; }
  .services-copy__viewport { height: 200px; }
  .service-panel__description { margin-top:22px; }
  .services-media-window { height:min(34svh,300px); min-height:230px; margin-top:8px; }
}

/* Laptop-only fit: keep the fixed header, slide copy, media and navigation separated. */
@media (min-width: 1024px) and (max-width: 1440px) and (max-height: 820px) {
  .services-story {
    --header-height:76px;
    --type-service-title:clamp(36px,3.2vw,50px);
    --type-service-number:clamp(120px,12vw,172px);
    margin-bottom:92px;
  }

  .services-stage {
    --header-height: 76px;
    --services-header-top-gap: 12px;
    --services-section-header-height: 150px;
    --services-header-gap: 28px;
    min-height: 0;
  }

  .services-stage__grid {
    padding-top: calc(var(--header-height) + var(--services-header-top-gap) + var(--services-section-header-height) + var(--services-header-gap));
    padding-bottom: 24px;
  }

  .services-media-window {
    height: clamp(410px, 58svh, 480px);
    min-height: 410px;
  }

  .services-copy__viewport { height: 280px; }
  .service-panel__description { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .services-story { height: auto; min-height: 0; }
  .services-stage { position: relative; height: auto; min-height: 0; overflow: visible; }
  .services-section__header { opacity:1; visibility:visible; transform:translateX(-50%); }
  .services-stage__grid { min-height: 100svh; align-items: start; }
  .services-copy { height: auto; min-height: 0; }
  .services-copy__viewport { height: auto; }
  .service-panel {
    position: relative;
    visibility: visible;
    opacity: 1 !important;
    transform: none !important;
    padding-block: 36px;
  }
  .service-panel + .service-panel { border-top: 1px solid rgba(3,27,43,.12); }
  .services-media-window { align-self: start; }
  .service-media { transition: none !important; }
  .services-navigation__nodes circle { transition:none!important; }
}