.services-editorial {
  position: relative;
  height: 400svh;
  color: var(--black);
  background: #f6f3ed;
}

.services-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 620px;
  overflow: clip;
}

.services-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  margin: auto;
  isolation: isolate;
}

.services-masthead {
  position: absolute;
  z-index: 8;
  top: 5.1%;
  right: 3.2%;
  left: 3.2%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.services-masthead p {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .28em;
}

.services-masthead p:first-child { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.services-masthead p:first-child span { display: block; width: 54px; height: 1px; background: #8b8781; }
.services-masthead p:last-child { color: #514d47; text-align: right; }
.services-masthead b { padding: 0 14px; color: #a29d95; font-weight: 400; }

.services-scenes,
.service-scene { position: absolute; inset: 0; }
.service-scene { pointer-events: none; }
.service-scene.is-current { pointer-events: auto; }
.service-scene[data-service-index="0"] { --service-backword-size: 20.35vw; }
.service-scene[data-service-index="1"] { --service-backword-size: 19.2vw; }
.service-scene[data-service-index="2"] { --service-backword-size: 19.2vw; --service-backword-tracking: 0; }
.service-scene[data-service-index="3"] { --service-backword-size: 14.4vw; }

.service-backword {
  position: absolute;
  z-index: 0;
  top: 7.7%;
  left: 1.5%;
  display: block;
  width: max-content;
  color: #171511;
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--service-backword-size);
  font-weight: 900;
  line-height: .83;
  letter-spacing: var(--service-backword-tracking, -.09em);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.service-head,
.service-detail { position: absolute; z-index: 4; left: 3.2%; }
.service-head { top: 28.5%; width: 91%; }
.service-detail { top: 60.5%; width: min(450px, 30%); }
.service-count-clip,
.service-title-clip { overflow: hidden; }
.service-count-clip { height: clamp(37px, 4.2vw, 64px); margin-bottom: clamp(10px, 1.4vw, 24px); }
.service-count {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: max-content;
  font-size: clamp(37px, 4.1vw, 64px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.075em;
}
.service-count small { font-size: .53em; font-weight: 300; letter-spacing: -.04em; }
.service-count small::before { content: '/'; padding-right: 11px; font-size: .87em; }
.service-title-clip { width: 100%; padding: 2px 0 8px; }
.service-title {
  width: max-content;
  max-width: 92vw;
  margin: 0;
  font-size: clamp(62px, 7.05vw, 116px);
  font-weight: 900;
  line-height: .84;
  letter-spacing: -.069em;
}
.service-title span { display: block; }
.service-scene[data-service-index="3"] .service-title { font-size: clamp(46px, 4.6vw, 80px); }

.service-tagline {
  max-width: 450px;
  margin: 0 0 19px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(27px, 2.6vw, 42px);
  font-style: italic;
  line-height: 1.08;
  letter-spacing: -.045em;
}
.service-description {
  max-width: 270px;
  margin: 0 0 20px;
  color: #58534d;
  font-size: clamp(14px, 1.08vw, 17px);
  line-height: 1.46;
}
.service-action {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-width: 192px;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 7px;
  color: #fff;
  background: #111;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.service-action:hover { background: #37322d; }
.service-action:focus-visible { outline: 2px solid #111; outline-offset: 4px; }
.service-action svg { width: 19px; height: 19px; stroke-width: 1.5; }

.service-photo-slot {
  position: absolute;
  z-index: 2;
  top: 14%;
  left: 32%;
  width: min(60vw, 930px, calc(115svh - 135px));
  aspect-ratio: 4 / 3;
}
.service-photo-frame {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #e7e1d9;
  box-shadow: 0 20px 46px rgba(33, 28, 23, .09);
  opacity: 0;
}
.service-photo-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.service-photo-frame figcaption {
  position: absolute;
  right: 17px;
  bottom: 17px;
  min-width: 175px;
  padding: 12px 16px;
  border: 1px solid rgba(16,16,16,.13);
  border-radius: 10px;
  background: #f8f7f3;
  box-shadow: 0 5px 18px rgba(0,0,0,.16);
  color: #171512;
  font-size: 10px;
  line-height: 1.55;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.service-photo-frame figcaption strong { display: block; font-size: 11px; letter-spacing: .06em; }
.service-image-target { position: absolute; top: 13%; right: 15%; width: 73px; height: 73px; border: 1px solid rgba(22,22,22,.48); border-radius: 50%; }
.service-image-target::before,
.service-image-target::after { content: ''; position: absolute; background: rgba(22,22,22,.36); }
.service-image-target::before { top: 50%; left: -15px; width: calc(100% + 30px); height: 1px; }
.service-image-target::after { top: -15px; left: 50%; width: 1px; height: calc(100% + 30px); }
.service-image-target i { position: absolute; z-index: 1; top: 50%; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #111; transform: translate(-50%,-50%); }
.service-image-side-note { position: absolute; top: 14%; right: 2.8%; padding: 8px 10px; border: 1px solid rgba(16,16,16,.12); border-radius: 5px; color: #171512; background: rgba(248,247,243,.96); box-shadow: 0 5px 18px rgba(0,0,0,.12); font-size: 9px; font-weight: 700; line-height: 1.5; letter-spacing: .12em; text-align: left; }

.services-progress { position: absolute; z-index: 7; top: 35%; right: 3.2%; display: grid; grid-template-columns: 1px 24px; gap: 18px; height: 34%; }
.services-progress-line { width: 1px; height: 100%; background: #d7d0c7; }
.services-progress-line i { display: block; width: 2px; height: var(--service-progress, 0%); background: #181715; }
.services-progress-numbers { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.services-progress-numbers b { color: #aaa49b; font-size: 17px; font-weight: 300; line-height: 1; transition: color .2s ease, font-weight .2s ease; }
.services-progress-numbers b.is-active { color: #111; font-weight: 700; }
.services-scroll-label { position: absolute; top: calc(100% + 20px); left: 0; width: 84px; font-size: 9px; line-height: 1.5; letter-spacing: .14em; }
.services-scroll-label span { display: grid; place-items: center; width: 34px; height: 34px; margin-top: 11px; border: 1px solid #24211e; border-radius: 50%; font-size: 20px; font-weight: 300; line-height: 1; }

.services-filmstrip { position: absolute; z-index: 8; right: 8%; bottom: 1.3%; left: 3.2%; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(8px, 1.5vw, 26px); }
.services-filmstrip button { position: relative; display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 58px; padding: 0 0 6px; border: 0; border-bottom: 1px solid transparent; color: #655f57; background: transparent; text-align: left; opacity: .82; transition: opacity .2s ease, color .2s ease; }
.services-filmstrip button::after { content: ''; position: absolute; bottom: 0; left: 0; width: 70px; height: 2px; background: #111; transform: scaleX(0); transform-origin: left; transition: transform .28s ease; }
.services-filmstrip button:hover,
.services-filmstrip button.is-active { color: #111; opacity: 1; }
.services-filmstrip button.is-active::after { transform: scaleX(1); }
.services-filmstrip img { display: block; flex: none; width: clamp(54px, 5vw, 72px); height: clamp(42px, 3.6vw, 49px); border-radius: 5px; object-fit: cover; }
.services-filmstrip-copy { display: block; min-width: 0; font-size: 9px; font-weight: 700; line-height: 1.35; letter-spacing: .04em; text-transform: uppercase; }
.services-filmstrip-copy b { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; }
@media (max-width: 1100px) {
  .service-photo-slot { left: 32%; width: 57vw; top: 22%; }
  .service-head { top: 29%; }
  .service-detail { top: 56%; }
  .service-title { font-size: clamp(61px, 7vw, 90px); }
  .service-scene[data-service-index="3"] .service-title { font-size: clamp(42px, 4.55vw, 60px); }
  .service-image-target, .service-image-side-note { display: none; }
  .services-filmstrip { right: 15%; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .service-head { top: 28%; width: 43%; }
  .service-title { font-size: clamp(48px, 6vw, 58px); }
  .service-scene[data-service-index="3"] .service-title { font-size: clamp(42px, 5.2vw, 48px); }
  .service-photo-slot { top: 23%; left: 43%; width: 49%; }
  .service-detail { top: 52%; width: 34%; }
}

@media (max-width: 760px) {
  .services-editorial { height: 340svh; }
  .services-sticky { min-height: 0; }
  .services-masthead { top: 3.2%; right: 5%; left: 5%; }
  .services-masthead p { font-size: 8px; }
  .services-masthead p:last-child { max-width: 52%; line-height: 1.8; }
  .services-masthead b { padding: 0 4px; }
  .service-backword { top: 15%; left: 1%; font-size: clamp(108px, 26vw, 220px); }
  .service-head { top: 12%; left: 5%; width: 90%; }
  .service-count-clip { height: 36px; margin-bottom: 8px; }
  .service-count { font-size: 34px; }
  .service-title { font-size: clamp(53px, 10vw, 76px); }
  .service-scene[data-service-index="3"] .service-title { font-size: clamp(47px, 9vw, 68px); }
  .service-photo-slot { top: 31%; left: 50%; width: min(87vw, calc(42svh * 4 / 3)); transform: translateX(-50%); }
  .service-detail { top: 74%; left: 5%; width: 78%; }
  .service-tagline { max-width: 400px; margin-bottom: 9px; font-size: clamp(27px, 4vw, 36px); }
  .service-description { max-width: 360px; margin-bottom: 11px; font-size: 13px; line-height: 1.35; }
  .service-action { min-height: 42px; min-width: 150px; padding: 0 14px; font-size: 9px; }
  .service-photo-frame figcaption { right: 10px; bottom: 10px; min-width: 0; padding: 8px 10px; font-size: 7px; }
  .service-photo-frame figcaption strong { font-size: 8px; }
  .services-progress { top: 58%; right: 4%; height: 19%; }
  .services-progress-numbers b { font-size: 12px; }
  .services-scroll-label { display: none; }
  .services-filmstrip { right: 5%; bottom: 2%; left: 5%; gap: 10px; }
  .services-filmstrip button { min-height: 28px; padding: 0 0 5px; }
  .services-filmstrip img, .services-filmstrip-copy span { display: none; }
  .services-filmstrip-copy b { margin: 0; font-size: 10px; }
  .services-filmstrip button::after { width: 100%; }
}

@media (max-width: 520px) {
  .services-masthead p:last-child { display: none; }
  .service-backword { top: 16%; font-size: clamp(100px, 30vw, 165px); }
  .service-head { top: 11%; }
  .service-count-clip { height: 29px; margin-bottom: 7px; }
  .service-count { font-size: 29px; }
  .service-title { font-size: clamp(46px, 12.4vw, 65px); }
  .service-scene[data-service-index="3"] .service-title { font-size: clamp(40px, 11vw, 57px); }
  .service-photo-slot { top: 29%; width: min(88vw, calc(37svh * 4 / 3)); }
  .service-detail { top: 67%; width: 90%; }
  .service-tagline { font-size: clamp(25px, 6.6vw, 33px); }
  .service-description { font-size: 12px; }
  .services-progress { display: none; }
}

@media (max-height: 700px) and (max-width: 760px) {
  .service-tagline { font-size: 25px; }
  .service-description { margin-bottom: 8px; }
  .service-action { min-height: 38px; }
}

@media (max-height: 700px) and (min-width: 521px) and (max-width: 760px) {
  .service-head { top: 10%; }
  .service-title { font-size: clamp(49px, 8vw, 60px); }
  .service-scene[data-service-index="3"] .service-title { font-size: clamp(42px, 7.5vw, 56px); }
  .service-photo-slot { top: 34%; width: min(84vw, calc(36svh * 4 / 3)); }
  .service-detail { top: 72%; }
}

@media (max-height: 700px) and (max-width: 520px) {
  .service-photo-slot { top: 31%; width: min(84vw, calc(31svh * 4 / 3)); }
  .service-detail { top: 64%; }
}

@media (prefers-reduced-motion: reduce) {
  .services-editorial { height: auto; }
  .services-sticky { position: relative; height: auto; min-height: 0; overflow: hidden; }
  .services-canvas { height: auto; }
  .services-masthead { position: relative; padding: 35px 0 0; }
  .services-scenes { position: relative; }
  .service-scene { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 50px 5% 80px; border-bottom: 1px solid #ded9d1; pointer-events: auto; }
  .service-backword { top: 8%; left: 0; transform: none !important; opacity: .07 !important; }
  .service-head, .service-detail, .service-photo-slot { position: relative; top: auto; left: auto; width: 100%; transform: none !important; }
  .service-head { order: 1; }
  .service-photo-slot { order: 2; width: min(100%, 850px); margin: 30px auto; }
  .service-detail { order: 3; }
  .service-count, .service-title, .service-photo-frame, .service-tagline, .service-description, .service-action { transform: none !important; opacity: 1 !important; }
  .service-photo-frame { clip-path: none !important; }
  .service-title { max-width: 100%; }
  .service-detail { max-width: 600px; }
  .services-progress, .services-filmstrip { display: none; }
}