/* Myrtle Services Hero (mck-services-hero): from site/services/v1/style.css (.s-hero). Network (.net) styles live in mc.css. */
/* .elementor img forces height:auto; restore the fixed icon heights from mc.css. */
.mck-services-hero .tag img, .mck-services-hero .ulink img { height: 18px; }
.mck-services-hero.s-hero { position: relative; min-height: 94dvh; display: flex; align-items: center; overflow: hidden; background: radial-gradient(110% 90% at 85% 20%, #11727E 0%, var(--teal) 40%, var(--teal-night) 100%); color: rgba(255, 254, 253, .82); }
.mck-services-hero.s-hero::before { content: ""; position: absolute; inset: 0; background: url("../../patterns/Pattern-Line-White-Tile.svg") 0 0 / 88px 131px repeat; opacity: .06; -webkit-mask-image: radial-gradient(60% 70% at 80% 50%, #000, transparent 75%); mask-image: radial-gradient(60% 70% at 80% 50%, #000, transparent 75%); pointer-events: none; }
.mck-services-hero .s-hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 88px); align-items: center; padding-block: 150px 96px; }
.mck-services-hero h1 { color: var(--white); margin-top: 28px; font-size: clamp(36px, 3.9vw, 56px); text-wrap: balance; }
.mck-services-hero .mark-u { background-size: 0% .07em; background-position: 0 94%; transition-delay: 1.1s; }
.mck-services-hero h1.is-in .mark-u { background-size: 100% .07em; }
.mck-services-hero .s-hero-copy p { max-width: 50ch; font-weight: 300; font-size: clamp(17px, 1.25vw, 19px); }
.mck-services-hero .s-hero-copy p:first-of-type { margin-top: 36px; }
.mck-services-hero .s-hero-copy p + p { margin-top: 18px; }
.mck-services-hero .s-hero-copy .ulink { margin-top: 40px; color: var(--white); }
.mck-services-hero .s-hero-copy .ulink img { transform: rotate(90deg); }
.mck-services-hero .s-hero-copy .ulink:hover img { transform: rotate(90deg) translateX(4px); }
@media (prefers-reduced-motion: no-preference) {
  .js .mck-services-hero .hl { opacity: 0; transform: translateY(24px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d); }
  .js.loaded .mck-services-hero .hl { opacity: 1; transform: none; }
}
@media (max-width: 1080px) {
  .mck-services-hero .s-hero-grid { grid-template-columns: 1fr; padding-top: 130px; gap: 64px; }
}
@media (max-width: 767px) {
  .mck-services-hero.s-hero { min-height: 0; }
  .mck-services-hero .s-hero-grid { padding-block: 120px 72px; }
}