/* Myrtle Contact Hero (mck-contact-ways): from site/contact/v1/style.css (.c-hero / .ways). */
/* .elementor img forces height:auto; restore the fixed icon heights from mc.css. */
.mck-contact-ways .tag img { height: 18px; }

.mck-contact-ways.c-hero { position: relative; overflow: hidden; background: radial-gradient(110% 100% at 85% 0%, #11727E 0%, var(--teal) 42%, var(--teal-night) 100%); color: rgba(255, 254, 253, .82); }
.mck-contact-ways.c-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: linear-gradient(160deg, transparent 20%, #000 80%); mask-image: linear-gradient(160deg, transparent 20%, #000 80%); pointer-events: none; }
.mck-contact-ways .c-hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 110px); align-items: end; padding-block: 170px clamp(80px, 9vw, 130px); }
.mck-contact-ways h1 { color: var(--white); margin-top: 30px; max-width: 15ch; }
.mck-contact-ways .mark-u { background-size: 0% .07em; background-position: 0 94%; transition-delay: 1s; }
.mck-contact-ways h1.is-in .mark-u { background-size: 100% .07em; }
@media (prefers-reduced-motion: no-preference) {
  .js .mck-contact-ways .hl { opacity: 0; transform: translateY(24px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d); }
  .js.loaded .mck-contact-ways .hl { opacity: 1; transform: none; }
}
.mck-contact-ways .ways { display: grid; gap: 12px; }
.mck-contact-ways .way { position: relative; display: grid; grid-template-columns: 56px 1fr 48px; gap: 20px; align-items: center; padding: 22px; border-radius: 26px; background: rgba(255, 254, 253, .06); border: 1px solid rgba(255, 254, 253, .14); overflow: hidden; isolation: isolate; transition: border-color .5s var(--ease), transform .7s var(--ease); }
.mck-contact-ways .way::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--white); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.mck-contact-ways .way:hover::before, .mck-contact-ways .way:focus-visible::before { transform: none; }
.mck-contact-ways .way:hover { border-color: var(--white); }
.mck-contact-ways .way-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 254, 253, .1); transition: background-color .5s var(--ease); }
.mck-contact-ways .way-ic img { width: 28px; }
.mck-contact-ways .way-ic .ic-dark { display: none; }
.mck-contact-ways .way:hover .way-ic { background: var(--aqua-soft); }
.mck-contact-ways .way:hover .ic-light { display: none; }
.mck-contact-ways .way:hover .ic-dark { display: block; }
.mck-contact-ways .way h2 { font-size: clamp(22px, 1.9vw, 28px); font-weight: 300; color: var(--white); line-height: 1.15; transition: color .5s var(--ease); }
.mck-contact-ways .way p { margin-top: 4px; font-size: 15px; font-weight: 300; line-height: 1.5; transition: color .5s var(--ease); }
.mck-contact-ways .way:hover h2 { color: var(--ink); }
.mck-contact-ways .way:hover p { color: var(--slate); }
.mck-contact-ways .way-go { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 254, 253, .25); transition: background-color .5s var(--ease), border-color .5s, transform .7s var(--ease); }
.mck-contact-ways .way-go img { width: 20px; transform: rotate(90deg); }
.mck-contact-ways .way:hover .way-go { background: var(--orange); border-color: var(--orange); transform: rotate(-90deg); }
.mck-contact-ways .way:hover .way-go img { filter: brightness(0); }
@media (max-width: 1080px) {
  .mck-contact-ways .c-hero-grid { grid-template-columns: 1fr; padding-top: 140px; }
}
@media (max-width: 767px) {
  .mck-contact-ways .c-hero-grid { padding-block: 124px 64px; gap: 40px; }
  .mck-contact-ways .way { grid-template-columns: 44px 1fr 40px; gap: 14px; padding: 16px; border-radius: 22px; }
  .mck-contact-ways .way-ic { width: 44px; height: 44px; }
  .mck-contact-ways .way-ic img { width: 22px; }
  .mck-contact-ways .way-go { width: 40px; height: 40px; }
  .mck-contact-ways .way h2 { font-size: 20px; }
  .mck-contact-ways .way p { font-size: 14px; }
}