/* Myrtle Improve List (mck-improve): ported from site/services/website-dtc/v1/style.css (.improve). */
.mck-improve { --display: "Sunset Serial", Georgia, serif; } /* Elementor containers set --display: flex */
.mck-improve.improve { background: var(--ink); color: rgba(255, 254, 253, .78); overflow: hidden; }
.mck-improve.improve::before { content: ""; position: absolute; inset: 0; background: url("../../patterns/Pattern-Line-White-Tile.svg") 0 0 / 70px 105px repeat; opacity: .05; -webkit-mask-image: linear-gradient(90deg, #000, transparent 60%); mask-image: linear-gradient(90deg, #000, transparent 60%); pointer-events: none; }
.mck-improve .wrap { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(48px, 7vw, 120px); align-items: start; }
.mck-improve .improve-head { position: sticky; top: 150px; }
.mck-improve .improve-head h2 { color: var(--white); }
.mck-improve .improve-head .lead { margin-top: 28px; color: rgba(255, 254, 253, .75); max-width: 46ch; }
.mck-improve .loop { margin-top: 48px; width: 150px; height: 150px; }
.mck-improve .loop circle { fill: none; stroke: rgba(255, 254, 253, .14); stroke-width: 1.5; }
.mck-improve .loop .arc { stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 60 314; transform-origin: 75px 75px; }
@media (prefers-reduced-motion: no-preference) { .mck-improve .loop .arc { animation: mckSpin 6s linear infinite; } }
@keyframes mckSpin { to { transform: rotate(360deg); } }
.mck-improve .loop image { opacity: .9; }
.mck-improve .imp-list li { display: grid; grid-template-columns: 56px 1fr; gap: 24px; padding-block: 30px; border-top: 1px solid var(--hair-light); transition: padding-left .7s var(--ease); }
.mck-improve .imp-list li:last-child { border-bottom: 1px solid var(--hair-light); }
.mck-improve .imp-list li:hover { padding-left: 10px; }
.mck-improve .imp-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 254, 253, .08); border: 1px solid var(--hair-light); transition: background-color .5s var(--ease), border-color .5s; }
.mck-improve .imp-ic img { width: 28px; }
.mck-improve .imp-list li:hover .imp-ic { background: var(--orange); border-color: var(--orange); }
.mck-improve .imp-list li:hover .imp-ic img { filter: brightness(0); }
.mck-improve .imp-list h3 { color: var(--white); font-size: clamp(22px, 1.9vw, 28px); font-weight: 300; margin-bottom: 8px; }
.mck-improve .imp-list p { font-weight: 300; font-size: 16.5px; max-width: 46ch; }
@media (max-width: 1080px) {
  .mck-improve .wrap { grid-template-columns: 1fr; }
  .mck-improve .improve-head { position: static; }
  .mck-improve .loop { display: none; }
}
@media (max-width: 767px) {
  .mck-improve .imp-list li { grid-template-columns: 44px 1fr; gap: 16px; padding-block: 24px; }
  .mck-improve .imp-ic { width: 44px; height: 44px; }
  .mck-improve .imp-ic img { width: 22px; }
}
