/* Homepage scroll cards — composed from the supplied separate assets.
   The three article transforms remain owned by the existing scroll engine. */

#svcStage {
  --svc-card-w: min(87vw, 1640px);
  --svc-card-h: min(73svh, 730px);
}

#svcStage .svc-card {
  padding: clamp(22px, min(3.5vw, 5vh), 56px);
  justify-content: flex-start;
  overflow: hidden;
  isolation: isolate;
}

#svcStage .svc-card-inner,
#svcStage .svc-card-actions {
  position: relative;
  z-index: 5;
}

#svcStage .svc-card-inner {
  width: min(48%, 690px);
  margin-top: clamp(2px, 0.9vh, 12px);
}

#svcStage .svc-card-actions {
  width: 100%;
  margin-top: auto;
  gap: 18px;
  justify-content: flex-end;
}

.svc-visual-kicker {
  display: flex;
  align-items: baseline;
  gap: clamp(8px, .7vw, 13px);
  margin: 0 0 clamp(17px, 3vh, 31px);
  color: #101311;
  font-size: clamp(11px, min(1.08vw, 2.1vh), 17px);
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1.2;
  text-transform: uppercase;
}

.svc-visual-kicker-num {
  color: #19d827;
  font-size: 1.26em;
  font-weight: 900;
}

.svc-visual-kicker-slash { opacity: .62; }
.svc-card--2 .svc-visual-kicker { color: #fff; }

.svc-visual-emphasis {
  margin: clamp(8px, 1.4vh, 17px) 0 0;
  color: #171a17;
  font-size: clamp(13px, min(1.08vw, 2.15vh), 18px);
  font-weight: 900;
  line-height: 1.32;
}

.svc-visual-feature-list {
  position: absolute;
  z-index: 6;
  left: clamp(22px, min(3.5vw, 5vh), 56px);
  bottom: clamp(22px, min(3.5vw, 5vh), 56px);
  display: flex;
  align-items: center;
  gap: clamp(5px, .85vw, 14px);
  max-width: 62%;
}

.svc-visual-feature {
  display: inline-flex;
  align-items: center;
  gap: clamp(5px, .55vw, 9px);
  min-width: 0;
  white-space: nowrap;
  font-size: clamp(10px, min(.9vw, 1.8vh), 15px);
  font-weight: 800;
  line-height: 1.08;
}

.svc-visual-feature-icon,
.svc-visual-offer-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: clamp(28px, min(3.4vw, 5.2vh), 49px);
  height: clamp(28px, min(3.4vw, 5.2vh), 49px);
  border-radius: 50%;
  background: #6aff55;
  color: #0a150a;
}

.svc-visual-feature-icon svg,
.svc-visual-offer-icon svg { width: 52%; height: 52%; }

.svc-card--1 .svc-visual-feature {
  padding: 3px clamp(7px, .75vw, 12px) 3px 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: #171a17;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .11);
}

.svc-card--2 .svc-visual-feature { color: #fff; text-transform: uppercase; }
.svc-card--2 .svc-visual-feature-list { max-width: 64%; gap: clamp(8px, 1vw, 18px); }
.svc-card--3 .svc-visual-feature-list {
  bottom: clamp(80px, 13vh, 118px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: clamp(4px, .8vw, 12px);
  width: min(46%, 540px);
  max-width: none;
}
.svc-card--3 .svc-visual-feature {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(6px, .8vh, 10px);
  width: 100%;
  color: #111;
  text-align: center;
  white-space: normal;
}
.svc-visual-offer {
  position: absolute;
  z-index: 6;
  left: clamp(22px, min(3.5vw, 5vh), 56px);
  bottom: clamp(22px, min(3.5vw, 5vh), 56px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #151515;
  font-size: clamp(12px, min(1.03vw, 2.15vh), 18px);
  font-weight: 900;
  line-height: 1.2;
}

.svc-visual-offer-icon {
  width: clamp(29px, 3vw, 42px);
  height: clamp(29px, 3vw, 42px);
}

#svcStage .svc-card-num {
  display: block;
  margin: 0 0 clamp(14px, 2.6vh, 30px);
  color: #0b0d10;
  font-size: clamp(13px, min(1.35vw, 2.5vh), 21px);
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1.1;
  opacity: 1;
  text-transform: uppercase;
}

#svcStage .svc-card-title,
#svcStage .svc-card--1 .svc-card-title {
  margin: 0 0 clamp(12px, 2vh, 22px);
  font-size: clamp(40px, min(5.45vw, 10vh), 90px);
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: 0.91;
  text-wrap: balance;
}

#svcStage .svc-card-lead {
  max-width: 100%;
  margin: 0 0 clamp(5px, 1.1vh, 11px);
  font-size: clamp(16px, min(1.48vw, 2.9vh), 24px);
  font-weight: 900;
  line-height: 1.22;
}

#svcStage .svc-card-desc {
  max-width: 100%;
  font-size: clamp(13px, min(1.08vw, 2.25vh), 18px);
  line-height: 1.48;
}

#svcStage .svc-card--1 {
  background: #f4fff0;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 24px 76px rgba(0, 0, 0, 0.48);
}

#svcStage .svc-card--1 .svc-card-title,
#svcStage .svc-card--1 .svc-card-lead { color: #111214; }

#svcStage .svc-card--1 .svc-card-desc { color: #5b6260; }

#svcStage .svc-card--2 {
  background: radial-gradient(circle at 69% 42%, #173a1a 0%, #111613 25%, #101210 65%);
  border-color: rgba(255, 255, 255, 0.08);
}

#svcStage .svc-card--2 .svc-card-num,
#svcStage .svc-card--2 .svc-card-title,
#svcStage .svc-card--2 .svc-card-lead { color: #fff; }

#svcStage .svc-card--2 .svc-card-title { font-size: clamp(42px, min(4.65vw, 8.8vh), 78px); }
#svcStage .svc-card--2 .svc-t-b { color: #6aff55; }
#svcStage .svc-card--2 .svc-card-desc { color: rgba(255, 255, 255, 0.8); }

#svcStage .svc-card--3 {
  background: var(--accent, #00ff00);
  border-color: rgba(17, 105, 17, 0.25);
}

#svcStage .svc-card--3 .svc-card-num,
#svcStage .svc-card--3 .svc-card-title,
#svcStage .svc-card--3 .svc-card-lead { color: #111214; }

#svcStage .svc-card--3 .svc-t-b { color: #09330b; }
#svcStage .svc-card--3 .svc-card-desc { color: #173d19; }
#svcStage .svc-card--3 .svc-visual-kicker-num { color: #073e08; }
#svcStage .svc-card--3 .svc-visual-feature-icon,
#svcStage .svc-card--3 .svc-visual-offer-icon {
  background: #101410;
  color: var(--accent, #00ff00);
}
@media (min-width: 701px) {
  /* White accents need a dark edge on the brand's bright green surface. */
  #svcStage .svc-card--3 .svc-t-b {
    color: #fff;
    -webkit-text-stroke: clamp(2px, .17vw, 3px) #101410;
    paint-order: stroke fill;
    text-shadow: 0 3px 0 #101410;
  }
  #svcStage .svc-card--3 .svc-visual-kicker-num {
    display: inline;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    -webkit-text-stroke: 1px #101410;
    paint-order: stroke fill;
    text-shadow: 0 2px 0 #101410;
  }
}
#svcStage .svc-card--3 .svc-btn-cta {
  background: #111214;
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .19);
}

#svcStage .svc-btn-cta {
  justify-content: center;
  min-height: clamp(44px, 6.5vh, 64px);
  padding: 11px clamp(18px, 2.3vw, 34px);
  background: #5af044;
  color: #101410;
  box-shadow: 0 12px 32px rgba(28, 190, 20, 0.2);
  font-size: clamp(12px, min(1.02vw, 2.25vh), 17px);
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

#svcStage .svc-btn-cta:hover,
#svcStage .svc-btn-cta:focus-visible {
  box-shadow: 0 15px 36px rgba(28, 190, 20, 0.3);
}

#svcStage .svc-card--1 .svc-btn-icon {
  flex: none;
  background: rgba(255, 255, 255, 0.82);
}

/* Card 01: stage lights, cut-out performer and a separate audience foreground. */
.svc-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}

.svc-visual--show {
  pointer-events: none;
  background: #ecffe7;
}

.svc-visual-show-audience {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.15);
}

.svc-visual--show::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(ellipse at 0% 2%, rgba(103, 255, 67, .88), transparent 42%),
    linear-gradient(90deg, #f2ffed 0%, rgba(250, 255, 248, .98) 30%, rgba(250, 255, 248, .89) 43%, rgba(250, 255, 248, .06) 68%, transparent 100%);
}

.svc-visual-show-christian {
  position: absolute;
  z-index: 2;
  right: 5%;
  bottom: -14%;
  width: auto;
  height: 100%;
  max-width: none;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .38));
}

.svc-visual-show-children {
  position: absolute;
  z-index: 3;
  right: -5%;
  bottom: -20%;
  width: 69%;
  height: auto;
  max-width: none;
  pointer-events: none;
}

/* Card 02: independent event photos. No shape or sphere artwork is loaded. */
.svc-visual--program { pointer-events: none; }

.svc-visual--program::before {
  content: "";
  position: absolute;
  inset: 0 0 0 44%;
  background: radial-gradient(ellipse at 50% 63%, rgba(0, 255, 0, .24), transparent 62%);
}

.svc-visual-events {
  position: absolute;
  inset: 0 0 0 43%;
}

.svc-visual-event {
  position: absolute;
  z-index: 1;
  width: clamp(70px, 10vw, 154px);
  margin: 0;
  padding: 4px;
  background: #e6ffe4;
  border: 1px solid #6aff55;
  border-radius: 13px;
  box-shadow: 0 0 20px rgba(0, 255, 0, .18), 0 10px 25px rgba(0, 0, 0, .34);
}

.svc-visual-event img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 9px;
}

.svc-visual-event figcaption {
  position: absolute;
  left: 50%;
  bottom: -12px;
  max-width: 120%;
  padding: 5px 9px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #6aff55;
  color: #111;
  font-size: clamp(7px, .66vw, 10px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.svc-visual-event:nth-child(1) { right: 20%; top: 35%; transform: rotate(8deg); }
.svc-visual-event:nth-child(2) { right: 2%; top: 44%; transform: rotate(7deg); }
.svc-visual-event:nth-child(3) { right: 23%; top: 6%; transform: rotate(8deg); }
.svc-visual-event:nth-child(4) { right: 3%; top: 15%; transform: rotate(10deg); }
.svc-visual-event:nth-child(5) { left: 12%; top: 24%; transform: rotate(-11deg); }
.svc-visual-event:nth-child(6) { left: 10%; top: 53%; transform: rotate(-9deg); }
.svc-visual-event:nth-child(7) { left: 26%; top: 3%; transform: rotate(-9deg); }

.svc-visual-program-christian {
  position: absolute;
  z-index: 2;
  right: 10%;
  bottom: -19%;
  width: auto;
  height: 100%;
  max-width: none;
  filter: drop-shadow(0 9px 20px rgba(0, 0, 0, .52));
}

/* Card 03: three actual, independently clickable social previews. */
.svc-visual--social {
  z-index: 3;
  inset: 8% 3% 16% 48%;
  overflow: visible;
  border-radius: 0;
}

.svc-visual-social-cards { position: relative; width: 100%; height: 100%; }

.svc-visual-social-card {
  position: absolute;
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, .6vw, 11px);
  width: 40%;
  padding: clamp(8px, .9vw, 14px);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: clamp(12px, 1.3vw, 20px);
  background: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
  color: #151515;
  text-decoration: none;
  transform: translateY(-50%) rotate(var(--svc-social-rotate, 0deg));
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}

.svc-visual-social-card:hover,
.svc-visual-social-card:focus-visible {
  transform: translateY(calc(-50% - 9px)) rotate(var(--svc-social-rotate, 0deg));
  box-shadow: 0 20px 48px rgba(0, 0, 0, .26), 0 0 0 2px #43e836;
  outline: none;
}

.svc-visual-social-card--instagram { --svc-social-rotate: -4deg; left: 0; z-index: 1; }
.svc-visual-social-card--facebook { --svc-social-rotate: 0deg; left: 30%; z-index: 3; }
.svc-visual-social-card--tiktok { --svc-social-rotate: 4deg; right: 0; z-index: 2; }

.svc-visual-social-head {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: clamp(8px, .77vw, 13px);
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.svc-visual-social-head svg { flex: none; width: clamp(19px, 2vw, 29px); height: auto; }
.svc-visual-social-card--tiktok .svc-visual-social-head { justify-content: flex-end; }

.svc-visual-social-card > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: clamp(6px, .7vw, 10px);
}

.svc-visual-social-arrow {
  color: #19d428;
  font-size: clamp(16px, 1.6vw, 24px);
  font-weight: 800;
  line-height: 1;
}

@media (min-width: 1025px) {
  #svcStage .svc-card--3 .svc-visual-feature-list {
    bottom: calc(clamp(80px, 13vh, 118px) + 18px);
  }
  #svcStage .svc-card--3 .svc-visual-feature-icon {
    width: clamp(34px, min(4.15vw, 6.35vh), 60px);
    height: clamp(34px, min(4.15vw, 6.35vh), 60px);
  }
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
  /* The static fallback uses narrower cards, so retain room below the lead. */
  #svcStage .svc-card--3 .svc-visual-feature-list {
    bottom: clamp(80px, 13vh, 118px);
  }
}

@media (min-width: 1025px) and (max-height: 700px) {
  #svcStage .svc-card-num { margin-bottom: 9px; }
  #svcStage .svc-card-title,
  #svcStage .svc-card--1 .svc-card-title { font-size: clamp(36px, min(4.6vw, 8vh), 70px); }
  #svcStage .svc-card-desc { font-size: clamp(12px, 1vw, 15px); line-height: 1.35; }
  .svc-visual-event { width: clamp(66px, 8vw, 116px); }
}

@media (min-width: 1025px) and (max-width: 1350px) {
  #svcStage .svc-card--2 .svc-card-title { font-size: clamp(38px, 4.5vw, 62px); }
  .svc-card--2 .svc-visual-feature { font-size: 11px; }
  .svc-visual-show-christian { height: min(100%, 52vw); right: -5%; bottom: -7%; }
  .svc-visual-show-children { right: -16%; bottom: -13%; width: 64%; }
  .svc-visual-program-christian { height: min(100%, 55vw); right: 7%; bottom: -13%; }
  .svc-visual-event { width: clamp(72px, 9vw, 116px); }
}

@media (max-width: 1024px) {
  #svcStage .svc-card {
    min-height: clamp(610px, 75svh, 760px);
    padding: clamp(22px, 4vw, 42px);
  }
  #svcStage .svc-card-inner { width: min(54%, 500px); }
  #svcStage .svc-card-title,
  #svcStage .svc-card--1 .svc-card-title { font-size: clamp(38px, 6vw, 64px); }
  .svc-visual-show-christian { right: -10%; height: min(72%, 50vw); bottom: -8%; }
  .svc-visual-show-children { right: -11%; width: 72%; bottom: -11%; }
  .svc-visual-program-christian { right: 2%; height: min(74%, 52vw); bottom: -9%; }
  .svc-visual-events { left: 40%; }
  .svc-visual-event { width: clamp(70px, 11vw, 105px); }
  .svc-visual--social { inset: 17% 4% 24% 42%; }
}

@media (max-width: 700px) {
  #svcStage .svc-card {
    min-height: 690px;
    padding: 24px;
  }
  #svcStage .svc-card-inner { width: 100%; margin-top: 0; }
  #svcStage .svc-card-num { margin-bottom: 13px; font-size: 12px; }
  #svcStage .svc-card-title,
  #svcStage .svc-card--1 .svc-card-title { font-size: clamp(35px, 8.3vw, 56px); }
  #svcStage .svc-card-lead { font-size: clamp(15px, 3.7vw, 20px); }
  #svcStage .svc-card-desc { font-size: 13px; line-height: 1.42; }
  .svc-visual--show::after {
    background: linear-gradient(180deg, #f6fff3 0%, #f6fff3 28%, rgba(246,255,243,.92) 45%, rgba(246,255,243,.08) 75%);
  }
  .svc-visual-show-christian { height: 57%; right: 4%; bottom: -2%; }
  .svc-visual-show-children { width: 92%; right: -13%; bottom: 0; }
  #svcStage .svc-card--2 { background: radial-gradient(circle at 55% 64%, #1a461d, #101210 62%); }
  .svc-visual--program { inset: 42% 0 7%; }
  .svc-visual-events { inset: 0; }
  .svc-visual-event { width: clamp(72px, 20vw, 100px); }
  .svc-visual-event:nth-child(n+5) { display: none; }
  .svc-visual-event:nth-child(1) { left: 6%; right: auto; top: 48%; }
  .svc-visual-event:nth-child(2) { right: 1%; top: 59%; }
  .svc-visual-event:nth-child(3) { right: 35%; top: 35%; }
  .svc-visual-event:nth-child(4) { right: 2%; top: 34%; }
  .svc-visual-program-christian { height: 83%; right: 4%; bottom: -15%; }
  .svc-visual--social { inset: 43% 5% 15%; }
  .svc-visual-social-card { width: 40%; padding: 7px; }
  .svc-visual-social-card--facebook { left: 30%; }
  .svc-visual-social-head { gap: 3px; font-size: 8px; }
  .svc-visual-social-head svg { width: 18px; }
  .svc-visual-social-arrow { font-size: 15px; }
  #svcStage .svc-card-actions { gap: 9px; }
  #svcStage .svc-btn-cta { min-height: 43px; padding: 9px 13px; font-size: 11px; white-space: normal; }
  .svc-card--1 .svc-visual-feature-list,
  .svc-card--2 .svc-visual-feature-list { bottom: 91px; max-width: calc(100% - 48px); }
  .svc-card--1 .svc-visual-feature-list { flex-wrap: wrap; gap: 4px; }
  .svc-card--1 .svc-visual-feature { font-size: 10px; padding-right: 7px; }
  .svc-card--2 .svc-visual-feature-list { gap: 6px; }
  .svc-card--2 .svc-visual-feature { font-size: 8px; }
  .svc-card--3 .svc-visual--social { inset: 35% 5% 35%; }
  .svc-card--3 .svc-visual-feature-list { bottom: 155px; width: calc(100% - 48px); gap: 9px; }
  .svc-card--3 .svc-visual-feature { font-size: 9px; }
  .svc-card--3 .svc-visual-offer { bottom: 95px; max-width: calc(100% - 48px); font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-visual-social-card { transition: none; }
}

/* Phone artwork refresh. The card stack's position/transform and scroll
   controller are intentionally not changed here. */
.svc-mobile-price { display: none; }
@media (max-width: 700px) {
  #svcStage .svc-card {
    border-radius: 26px;
    padding: 22px;
    min-height: clamp(540px, 73svh, 660px);
  }
  #svcStage .svc-card--1 { background: #fff; }
  #svcStage .svc-card--2 { background: #0b0d10; }
  #svcStage .svc-card--3 {
    background: linear-gradient(130deg, #00ef00 0%, #5dff52 64%, #c7ffc1 100%);
    border-color: #21e91d;
  }
  #svcStage .svc-card--3 .svc-t-b { color: #09330b; }
  #svcStage .svc-card--3 .svc-card-desc { color: #173d19; }
  #svcStage .svc-card--3 .svc-visual-kicker-num { color: #073e08; }
  #svcStage .svc-card--3 .svc-mobile-price--promo span {
    background: #111214;
    color: #fff;
  }
  #svcStage .svc-card--3 .svc-btn-cta {
    background: #111214;
    color: #fff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .19);
  }
  #svcStage .svc-card-inner { width: 100%; z-index: 5; }
  #svcStage .svc-visual-kicker { margin-bottom: 14px; font-size: 11px; }
  #svcStage .svc-card-title,
  #svcStage .svc-card--1 .svc-card-title {
    margin-bottom: 12px;
    font-size: clamp(39px, 10.5vw, 58px);
    line-height: .91;
  }
  #svcStage .svc-card--2 .svc-card-title { font-size: clamp(35px, 9.5vw, 53px); }
  #svcStage .svc-card-lead { max-width: 29ch; font-size: 14px; line-height: 1.28; }
  #svcStage .svc-card-desc { max-width: 33ch; font-size: 12px; line-height: 1.38; }
  #svcStage .svc-card--2 .svc-card-desc { max-width: 26ch; }
  #svcStage .svc-card--1 .svc-visual-emphasis { display: none; }
  #svcStage .svc-visual-feature-list,
  #svcStage .svc-visual-offer { display: none; }
  .svc-mobile-price {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 13px 0 0;
    padding: 7px 11px;
    border-radius: 8px;
    background: #00ef00;
    color: #0b0d10;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
  }
  .svc-mobile-price--promo {
    position: absolute;
    top: calc(clamp(540px, 73svh, 660px) - 160px);
    left: 0;
    display: flex;
    flex-wrap: wrap;
    width: calc(100vw - 78px);
    max-width: 390px;
    padding: 0;
    background: none;
    font-size: 12px;
  }
  .svc-mobile-price--promo span {
    display: inline-block;
    padding: 7px 10px;
    border-radius: 999px;
    background: #00ef00;
    font-size: 11px;
    text-transform: none;
  }
  .svc-card--1 .svc-visual--show { inset: 42% 0 60px; }
  .svc-card--1 .svc-visual--show::after {
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.82) 12%, rgba(255,255,255,0) 37%);
  }
  .svc-visual-show-christian { right: 1%; bottom: -6%; height: 83%; }
  .svc-visual-show-children { right: -20%; bottom: -5%; width: 106%; }
  .svc-card--2 .svc-visual--program { inset: 38% 0 58px; }
  .svc-card--2 .svc-visual--program::before { inset: 0; background: radial-gradient(ellipse at 52% 60%, #176a20 0%, transparent 68%); }
  .svc-card--2 .svc-visual-program-christian { right: 5%; bottom: -16%; height: 94%; }
  .svc-card--2 .svc-visual-event { width: clamp(64px, 19vw, 88px); }
  .svc-card--2 .svc-visual-event:nth-child(1) { left: 2%; top: 43%; }
  .svc-card--2 .svc-visual-event:nth-child(2) { right: 1%; top: 52%; }
  .svc-card--2 .svc-visual-event:nth-child(3) { right: 37%; top: 7%; }
  .svc-card--2 .svc-visual-event:nth-child(4) { right: 1%; top: 14%; }
  .svc-card--3 .svc-visual--social { inset: 43% 3% 27%; }
  .svc-card--3 .svc-visual-social-card { width: 43%; }
  #svcStage .svc-card-actions { z-index: 8; width: 100%; justify-content: stretch; }
  #svcStage .svc-btn-cta { width: 100%; min-height: 50px; font-size: 12px; }
}
@media (max-width: 380px) {
  #svcStage .svc-card { padding: 18px; }
  #svcStage .svc-btn-cta { font-size: 10px; white-space: nowrap; }
  #svcStage .svc-card-title,
  #svcStage .svc-card--1 .svc-card-title { font-size: 37px; }
  #svcStage .svc-card--2 .svc-card-title { font-size: 34px; }
  .svc-mobile-price--promo { top: calc(clamp(540px, 73svh, 660px) - 164px); }
}

/* Mobile artwork alignment only; the sticky stack's transforms and scroll
   progress remain owned by main.js. */
@media (max-width: 700px) {
  .svc-card--1 .svc-visual--show {
    inset: 41% 0 0;
    border-radius: 22px 22px 0 0;
  }
  .svc-card--1 .svc-visual-show-christian {
    left: 50%;
    right: auto;
    bottom: -4%;
    height: 91%;
    transform: translateX(-50%);
  }
  .svc-card--1 .svc-visual-show-children {
    left: 50%;
    right: auto;
    bottom: -2%;
    width: 112%;
    transform: translateX(-50%);
  }

  #svcStage .svc-card--2 .svc-card-desc {
    max-width: 100%;
    line-height: 1.34;
  }
  .svc-card--2 .svc-visual--program { inset: 38% 0 58px; }
  .svc-card--2 .svc-visual-program-christian {
    left: 50%;
    right: auto;
    bottom: -10%;
    height: 103%;
    transform: translateX(-50%);
  }
  .svc-card--2 .svc-visual-events { inset: 0; }
  .svc-card--2 .svc-visual-event { width: clamp(66px, 19vw, 88px); }
  .svc-card--2 .svc-visual-event:nth-child(1) {
    left: 2%; right: auto; top: 42%; transform: rotate(-10deg);
  }
  .svc-card--2 .svc-visual-event:nth-child(2) {
    left: auto; right: 2%; top: 42%; transform: rotate(10deg);
  }
  .svc-card--2 .svc-visual-event:nth-child(3) {
    left: 5%; right: auto; top: 3%; transform: rotate(-8deg);
  }
  .svc-card--2 .svc-visual-event:nth-child(4) {
    left: auto; right: 5%; top: 3%; transform: rotate(8deg);
  }
  .svc-card--2 .svc-visual-event:nth-child(n+5) { display: none; }
}