/* Myrtle Services Index (mck-home-services): ported from site/home/v2/style.css (SERVICES index). */
.mck-home-services { --display: "Sunset Serial", Georgia, serif; } /* Elementor containers set --display: flex */
.mck-home-services .svc-list { margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--hair); }
.mck-home-services .svc-row { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.05fr) 64px; gap: 32px; align-items: center; padding: 38px 28px; border-bottom: 1px solid var(--hair); isolation: isolate; overflow: hidden; }
.mck-home-services .svc-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--teal); transform: scaleY(0); transform-origin: bottom; transition: transform .7s var(--ease); }
.mck-home-services .svc-row:hover::before, .mck-home-services .svc-row:focus-visible::before { transform: none; transform-origin: top; }
.mck-home-services .svc-num { font: 400 14px var(--body); color: var(--teal); letter-spacing: .08em; transition: color .5s var(--ease); }
.mck-home-services .svc-title { font-family: var(--display); font-weight: 300; font-size: clamp(30px, 2.7vw, 40px); line-height: 1.02; letter-spacing: -.02em; color: var(--ink); transition: color .5s var(--ease), transform .7s var(--ease); }
.mck-home-services .svc-desc { font-size: 16px; font-weight: 300; line-height: 1.6; max-width: 46ch; transition: color .5s var(--ease); }
.mck-home-services .svc-go { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--hair); transition: background-color .5s var(--ease), border-color .5s var(--ease), transform .7s var(--ease); }
.mck-home-services .svc-go img { width: 22px; transition: transform .7s var(--ease); }
.mck-home-services .svc-row:hover .svc-num { color: var(--aqua); }
.mck-home-services .svc-row:hover .svc-title { color: var(--white); transform: translateX(10px); }
.mck-home-services .svc-row:hover .svc-desc { color: rgba(255, 254, 253, .85); }
.mck-home-services .svc-row:hover .svc-go { background: var(--orange); border-color: var(--orange); transform: rotate(-45deg); }
.mck-home-services .svc-row--main .svc-title { font-size: clamp(38px, 3.7vw, 56px); }
.mck-home-services .svc-note { display: flex; align-items: center; gap: 16px; margin-top: 40px; max-width: 900px; font-size: 16px; font-weight: 300; }
.mck-home-services .svc-note img { width: 26px; flex: none; }

/* Cursor-following preview card */
.mck-home-services .svc-preview { position: fixed; z-index: 40; left: 0; top: 0; width: 220px; height: 270px; pointer-events: none; border-radius: 28px; overflow: hidden; opacity: 0; transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(.6) rotate(-8deg); transition: opacity .5s var(--ease), transform .7s var(--ease), background-color .5s var(--ease); display: grid; place-items: center; background: var(--yellow); }
.mck-home-services .svc-preview.is-on { opacity: 1; transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1) rotate(-4deg); }
.mck-home-services .svc-preview img { position: absolute; width: 60%; opacity: 0; transform: scale(.7) rotate(-20deg); transition: opacity .5s var(--ease), transform .7s var(--spring); }
.mck-home-services .svc-preview img.is-on { opacity: 1; transform: none; }
@media (hover: none), (pointer: coarse) { .mck-home-services .svc-preview { display: none; } }

@media (max-width: 1080px) {
  .mck-home-services .svc-row { grid-template-columns: 52px 1fr 56px; }
  .mck-home-services .svc-desc { grid-column: 2 / 3; }
  .mck-home-services .svc-go { grid-column: 3; grid-row: 1; }
}
@media (max-width: 767px) {
  .mck-home-services .svc-row { grid-template-columns: 1fr 48px; gap: 14px 16px; padding: 28px 4px; }
  .mck-home-services .svc-num { grid-column: 1 / -1; }
  .mck-home-services .svc-title { grid-column: 1; }
  .mck-home-services .svc-desc { grid-column: 1 / -1; }
  .mck-home-services .svc-go { grid-column: 2; grid-row: 2; width: 48px; height: 48px; }
}