/* ============ HERO (650px image) ============ */
.svc-hero { position: relative; height: 650px; overflow: hidden; }
.svc-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============ INTRO (black panel 1200x556, overlaps hero + svc1) ============ */
.svc-intro {
  position: relative;
  width: 1200px;
  height: 556px;
  margin: -217px auto 0;           /* panel top at page 566 */
  background: var(--black);
  color: var(--white);
  padding: 80px;
  z-index: 2;
}
.svc-intro .kicker {
  display: inline-block;
  height: 27px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  padding: 0;
  font-size: var(--fs-title);
}
.svc-intro h1 {
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.05;
  text-align: center;
  margin-top: 40px;
}
.svc-intro .body {
  margin-top: 40px;
  text-align: center;
  white-space: pre-line;
  line-height: 1.1;
}

/* ============ SERVICE SECTIONS ============ */
.svc { position: relative; height: 565px; background: #fff; overflow: hidden; }
.svc--first { height: 1105px; margin-top: -339px; background: #fff; background-image: var(--grad-tint); z-index: 1; }
/* v3.0: same vertical line + tick ornament as the why-us gap band, desktop.
   Offset +339px because the black intro panel overlaps svc--first's top 339px
   (same visible geometry: 92px tucks under the panel, 150px shows below it). */
.svc--first::before { content: ''; position: absolute; left: 50%; top: 247px; width: 1px; height: 242px; background: rgba(0,0,0,.5); }
.svc--first::after { content: ''; position: absolute; left: calc(50% - 30px); top: 489px; width: 60px; height: 1px; background: rgba(0,0,0,.5); }
.svc--white { background: #fff; background-image: var(--grad-tint); }
.svc__photo { position: absolute; top: 0; height: 565px; overflow: hidden; }
.svc--first .svc__photo { top: 539px; }
.svc__photo img { width: 100%; height: 100%; object-fit: cover; }
.svc__photo--right { right: calc(var(--edge) - 120px); width: 574px; }
.svc__photo--left { left: calc(var(--edge) - 120px); width: 531px; }
.svc__body { position: absolute; width: 657px; }
.svc__body--left { left: var(--edge); }
.svc__body--right { left: calc(var(--edge) + 491px); }
.svc--first .svc__body--left { top: 639px; }
.svc:not(.svc--first) .svc__body--left { top: 119px; }
.svc:not(.svc--first) .svc__body--right { top: 100px; }
.svc__body .icon { width: 100px; height: 100px; flex: none; overflow: visible; }
.svc__body .icon .svc-animation { max-width: 100%; max-height: 100%; } /* v2.8: flex row, no negative-margin hack */
.svc__body .icon img,
.svc__body .icon .svc-animation { width: 100px; height: 100px; display: block; border: 0; }
.svc__body .icon .svc-animation { pointer-events: none; }
.svc__head { display: flex; align-items: center; gap: 40px; } /* v2.8 */
.svc__head h2 { margin: 0; }
.svc__body h2 { font-size: var(--fs-h2); color: var(--black); } /* v2.8: aligned via .svc__head flex */
.svc__body p { margin-top: 33px; white-space: pre-line; }

/* ============ CTA BAND (437px) ============ */
.svc-cta { height: 437px; background: #fff; background-image: linear-gradient(90deg, rgba(0,0,0,0.10), rgba(0,0,0,0.21)); text-align: center; }
.svc-cta h2 { width: 596px; margin: 0 auto; font-size: var(--fs-h2); padding-top: 120px; color: var(--black); }
.svc-cta p { width: 596px; margin: 40px auto 0; }
.svc-cta .btn { margin-top: 40px; }

/* ============ COMPACT DESKTOP (768–1439px) ============ */
@media (min-width: 768px) and (max-width: 1439px) {
  .svc-hero { height: clamp(500px, 45vw, 650px); }
  .svc-intro {
    width: calc(100% - (2 * var(--chrome-edge)));
    max-width: 1200px;
    height: auto;
    min-height: 470px;
    margin: clamp(-190px, -13vw, -150px) auto 0;
    padding: clamp(58px, 6vw, 80px);
  }
  .svc-intro h1 { font-size: clamp(38px, 4vw, var(--fs-display)); line-height: 1.08; }
  .svc-intro .body { line-height: 1.25; }

  .svc {
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
  }
  .svc--first {
    height: auto;
    min-height: 0;
    margin-top: 0;
    padding-top: clamp(190px, 16vw, 230px);
  }
  .svc--first::before { top: 0; height: clamp(132px, 11vw, 158px); }
  .svc--first::after { top: clamp(132px, 11vw, 158px); }
  .svc__photo,
  .svc--first .svc__photo {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    height: auto;
    min-height: clamp(640px, 52vw, 748px);
  }
  .svc__photo--right { grid-column: 2; grid-row: 1; }
  .svc__photo--left { grid-column: 1; grid-row: 1; }
  .svc__photo img { display: block; }
  .svc__body,
  .svc--first .svc__body--left,
  .svc:not(.svc--first) .svc__body--left,
  .svc:not(.svc--first) .svc__body--right {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    min-width: 0;
    min-height: clamp(640px, 52vw, 748px);
    padding-top: clamp(64px, 6vw, 88px);
    padding-bottom: clamp(64px, 6vw, 88px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .svc__body--left {
    grid-column: 1;
    grid-row: 1;
    padding-left: var(--chrome-edge);
    padding-right: clamp(28px, 4vw, 58px);
  }
  .svc__body--right {
    grid-column: 2;
    grid-row: 1;
    padding-left: clamp(28px, 4vw, 58px);
    padding-right: var(--chrome-edge);
  }
  .svc__head { gap: clamp(20px, 2.8vw, 40px); }
  .svc__body .icon,
  .svc__body .icon img,
  .svc__body .icon .svc-animation { width: clamp(68px, 7vw, 100px); height: clamp(68px, 7vw, 100px); }
  .svc__body h2 { font-size: clamp(30px, 3.15vw, var(--fs-h2)); line-height: 1.15; }
  .svc__body p { margin-top: clamp(28px, 2.8vw, 40px); line-height: 1.32; }

  .svc-cta { height: auto; min-height: 400px; padding: clamp(92px, 8.35vw, 120px) var(--chrome-edge); }
  .svc-cta h2 { width: min(100%, 596px); padding-top: 0; font-size: clamp(34px, 3.2vw, var(--fs-h2)); }
  .svc-cta p { width: min(100%, 596px); }
}

/* ============ MOBILE (≤767px) ============ */
@media (max-width: 767px) {
  html, body { width: 100%; overflow-x: hidden; }
  html::-webkit-scrollbar { display: none; }
  body { font-size: 16px; }
  .shell { width: 100%; margin: 0; }

  .svc-hero { height: 400px; }
  .svc-hero__bg { width: 890px; max-width: none; left: 50%; transform: translateX(-50%); object-fit: cover; }
  .svc-intro { width: 100%; height: 238px; margin: 0; padding: 40px 20px; }
  .svc-intro .kicker { display: block; height: 36px; border: 0; font-size: 0; line-height: 24px; }
  .svc-intro .kicker::after { content: 'Everything you can imagine\A when you think print on paper'; white-space: pre; font-size: 16px; color: rgba(255,255,255,.5); }
  .svc-intro h1 { height: 70px; margin-top: 32px; font-size: 0; line-height: 1.21; }
  .svc-intro h1::after { content: 'Hi-Tech\A The offset specialists'; white-space: pre; font-size: 30px; letter-spacing: .72px; }
  .svc-intro .body { display: none; }

  .svc { width: 100%; height: 710px; margin: 0; overflow: visible; background: #fff; background-image: var(--grad-tint); }
  .svc--first { height: 898px; margin: 0; }
  .svc--first::before { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 128px; background: rgba(0,0,0,.55); }
  .svc--first::after { content: ''; position: absolute; left: calc(50% - 20px); top: 128px; width: 40px; height: 1px; background: rgba(0,0,0,.55); }
  .svc__body, .svc__body--left, .svc__body--right,
  .svc--first .svc__body--left,
  .svc:not(.svc--first) .svc__body--left,
  .svc:not(.svc--first) .svc__body--right { position: absolute; left: 20px; top: 0; width: calc(100% - 40px); text-align: center; }
  .svc--first .svc__body { top: 188px; }
  .svc__head { flex-direction: column; gap: 0; } /* v2.8: stack icon over title on mobile */
  .svc__body .icon { width: 100px; height: 100px; margin: 0 auto; }
  .svc__body .icon img,
  .svc__body .icon .svc-animation { width: 100px; height: 100px; max-width: 100%; max-height: 100%; }
  .svc__head h2 { height: 70px; margin: 40px 0 0; font-size: 30px; line-height: 1.21; letter-spacing: .72px; }
  .svc__body p { display: none; }
  .svc__photo, .svc--first .svc__photo { position: absolute; left: 20px; right: auto; top: 250px; width: calc(100% - 40px); height: 400px; }
  .svc--first .svc__photo { top: 438px; }
  .svc__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }

  .svc-cta { height: 326px; padding: 60px 20px; }
  .svc-cta h2 { width: 100%; padding: 0; font-size: 30px; line-height: 1.21; }
  .svc-cta p { width: 100%; margin-top: 32px; font-size: 16px; }
  .svc-cta .btn { width: 100%; height: 52px; margin-top: 40px; justify-content: center; }

  /* V4 mobile: service rows use normal flow instead of fixed coordinates. */
  .svc-hero { height: clamp(320px, 82vw, 400px); }
  .svc-intro { height: auto; min-height: 238px; }

  .svc {
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    gap: 38px;
    overflow: hidden;
  }
  .svc--first { height: auto; min-height: 0; padding-top: 188px; }
  .svc__body, .svc__body--left, .svc__body--right,
  .svc--first .svc__body--left,
  .svc:not(.svc--first) .svc__body--left,
  .svc:not(.svc--first) .svc__body--right {
    position: relative;
    order: -1;
    left: auto;
    top: auto;
    width: 100%;
    min-height: 0;
    padding: 0;
  }
  .svc__head h2 { height: auto; margin-top: 32px; font-size: clamp(28px, 7.7vw, 32px); }
  .svc__photo, .svc--first .svc__photo {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    height: clamp(300px, 100vw, 400px);
  }

  .svc-cta { height: auto; min-height: 326px; }

}