/* Myrtle Services Chapters (mck-services-chapters): from site/services/v1/style.css (intro, sticky tabs, chapters, chips).
   The square stages (.stage-wrap, .stage, .tile) live in mc.css; the service visuals in visuals.css. */
/* .elementor img forces height:auto; restore the fixed icon heights from mc.css. */
.mck-services-chapters .tag img, .mck-services-chapters .ulink img { height: 18px; }
.mck-services-chapters .s-intro { padding-top: var(--section); text-align: center; }
.mck-services-chapters .tabs-bar { position: sticky; z-index: 30; top: 104px; margin-top: 48px; display: flex; justify-content: center; pointer-events: none; }
.mck-services-chapters .tabs { position: relative; display: flex; gap: 2px; padding: 6px; border-radius: 999px; background: rgba(255, 254, 253, .82); border: 1px solid var(--hair); box-shadow: 0 14px 40px -24px rgba(13, 99, 110, .4); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); pointer-events: auto; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.mck-services-chapters .tabs::-webkit-scrollbar { display: none; }
.mck-services-chapters .tabs a { position: relative; z-index: 1; padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--slate); transition: color .5s var(--ease); }
.mck-services-chapters .tabs a.is-active { color: var(--white); }
.mck-services-chapters .tabs a:not(.is-active):hover { color: var(--teal); }
.mck-services-chapters .tabs-ind { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 0; width: var(--w, 0); border-radius: 999px; background: var(--teal); transform: translateX(var(--l, 0)); transition: transform .7s var(--ease), width .7s var(--ease), opacity .4s; opacity: 0; }
.mck-services-chapters .tabs.has-active .tabs-ind { opacity: 1; }

.mck-services-chapters .chapters { padding-bottom: var(--section); }
.mck-services-chapters .chapter { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 110px); align-items: start; padding-top: clamp(96px, 10vw, 150px); scroll-margin-top: 120px; }
.mck-services-chapters.is-alt .chapter:nth-child(even) .ch-stage { order: -1; }
.mck-services-chapters .ch-num { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--hair); font: 500 13px var(--body); letter-spacing: .06em; color: var(--teal); }
.mck-services-chapters .ch-copy h2 { margin-top: 28px; }
.mck-services-chapters .ch-copy > p { margin-top: 24px; max-width: 54ch; font-weight: 300; font-size: clamp(17px, 1.25vw, 19px); }
.mck-services-chapters .ch-copy > p + p { margin-top: 16px; }
.mck-services-chapters .ch-copy h3 { margin-top: 44px; font-size: clamp(22px, 1.8vw, 27px); font-weight: 400; }
.mck-services-chapters .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; max-width: 600px; }
.mck-services-chapters .chips li { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 12px; border-radius: 999px; background: var(--white); border: 1px solid var(--hair); font-size: 14.5px; color: var(--ink); transition: border-color .4s var(--ease), background-color .4s var(--ease), transform .5s var(--ease); }
.mck-services-chapters .chips li::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--chip-shape, url("../../shapes/Myrtle-Commerce-Shape-Star-Oval-Teal.svg")) center / contain no-repeat; transition: transform .7s var(--spring); }
.mck-services-chapters .chips li:hover { border-color: var(--teal); background: var(--aqua-soft); transform: translateY(-2px); }
.mck-services-chapters .chips li:hover::before { transform: rotate(90deg) scale(1.15); }
@media (prefers-reduced-motion: no-preference) {
  .js .mck-services-chapters .chips li { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .4s, background-color .4s; transition-delay: calc(var(--i) * 55ms + 150ms), calc(var(--i) * 55ms + 150ms), 0s, 0s; }
  .js .mck-services-chapters .chips.is-in li { opacity: 1; transform: none; }
  .js .mck-services-chapters .chips.is-in li:hover { transform: translateY(-2px); transition-delay: 0s; }
}
.mck-services-chapters .ch-copy .btn { margin-top: 44px; }
.mck-services-chapters .ch-stage { position: sticky; top: 180px; }

@media (max-width: 1080px) {
  .mck-services-chapters .chapter { grid-template-columns: 1fr; gap: 48px; }
  .mck-services-chapters.is-alt .chapter:nth-child(even) .ch-stage { order: 0; }
  .mck-services-chapters .ch-stage { position: relative; top: 0; max-width: 560px; }
  .mck-services-chapters .tabs-bar { top: 92px; }
}
@media (max-width: 767px) {
  .mck-services-chapters .tabs-bar { top: 84px; justify-content: flex-start; margin-inline: calc(var(--gutter) * -1); padding-inline: 12px; }
  .mck-services-chapters .tabs a { padding: 10px 14px; font-size: 13px; }
  .mck-services-chapters .chapter { padding-top: 88px; scroll-margin-top: 150px; }
  .mck-services-chapters .chips li { font-size: 13.5px; padding: 9px 14px 9px 10px; }
  .mck-services-chapters .ch-copy .btn { width: 100%; justify-content: space-between; }
}