/* Myrtle About Hero (mck-about-hero): from site/about/v1/style.css (.aa Founder Arch). */
/* .elementor img forces height:auto; restore the fixed icon heights from mc.css. */
.mck-about-hero .tag img, .mck-about-hero .ulink img { height: 18px; }

.mck-about-hero.aa { position: relative; min-height: 100dvh; display: flex; align-items: center; overflow: hidden; background: var(--white); color: var(--slate); }
.mck-about-hero.aa::before { content: ""; position: absolute; inset: 0; background: url("../../patterns/Pattern-Line-Black-Tile.svg") 0 0 / 88px 131px repeat; opacity: .045; -webkit-mask-image: radial-gradient(55% 70% at 78% 50%, #000, transparent 75%); mask-image: radial-gradient(55% 70% at 78% 50%, #000, transparent 75%); pointer-events: none; }
.mck-about-hero .aa-main { position: relative; z-index: 1; display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(40px, 6vw, 104px); align-items: center; padding-block: 150px 96px; }
.mck-about-hero h1 { margin-top: 28px; max-width: 17ch; font-size: clamp(38px, 3.6vw, 56px); line-height: 1.03; letter-spacing: -.03em; font-weight: 300; color: var(--ink); }
.mck-about-hero h1 .mark-u { color: var(--teal); background-size: 0% .07em; background-position: 0 94%; transition-delay: 1.2s; }
.mck-about-hero h1.is-in .mark-u { background-size: 100% .07em; }
.mck-about-hero .aa-sub { margin-top: 30px; max-width: 50ch; font-weight: 300; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.65; }
.mck-about-hero .aa-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 40px; }
.mck-about-hero .aa-cta .ulink { color: var(--teal); }
.mck-about-hero .aa-cta .ulink img { width: 18px; }

.mck-about-hero .aa-art { position: relative; justify-self: center; width: min(100%, 460px); }
.mck-about-hero .aa-arch { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 36px 36px; padding: 8px; background: rgba(13, 99, 110, .045); border: 1px solid rgba(13, 99, 110, .08); }
.mck-about-hero .aa-arch-core { position: absolute; inset: 8px; border-radius: 999px 999px 30px 30px; overflow: hidden; background: linear-gradient(180deg, var(--arch-a, var(--aqua-soft)) 0%, var(--arch-b, #D3F1F0) 100%); }
.mck-about-hero .aa-arch-core::before { content: ""; position: absolute; inset: 0; background: url("../../patterns/Pattern-Line-Black-Tile.svg") 0 0 / 70px 105px repeat; opacity: .06; }
.mck-about-hero .aa-sprout { position: absolute; width: 92%; max-width: none; left: 4%; bottom: -8%; opacity: .7; }
.mck-about-hero .aa-photo { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 112%; clip-path: inset(-40% 0 0 0 round 0 0 30px 30px); }
.mck-about-hero .aa-photo img { position: absolute; left: 50%; bottom: 0; width: 98%; height: auto; transform: translateX(-50%) translateY(var(--py, 0)); }
.mck-about-hero .aa-name { position: absolute; z-index: 3; left: -12%; bottom: 12%; display: flex; align-items: center; gap: 14px; padding: 10px 22px 10px 10px; border-radius: 999px; background: var(--white); box-shadow: 0 24px 48px -24px rgba(13, 99, 110, .45), inset 0 1px 0 #fff; }
.mck-about-hero .aa-name .dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--teal); }
.mck-about-hero .aa-name .dot img { width: 24px; }
.mck-about-hero .aa-name b { display: block; font-family: var(--display); font-weight: 400; font-size: 19px; color: var(--ink); line-height: 1.1; }
.mck-about-hero .aa-name small { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); margin-top: 3px; }
.mck-about-hero .float { z-index: 3; }
.mck-about-hero .aa-f1 { width: 17%; right: -7%; top: 20%; --depth: -28; }
.mck-about-hero .aa-f2 { width: 13%; right: 6%; bottom: -4%; --depth: 22; --bd: -3s; }
.mck-about-hero .aa-f3 { width: 15%; left: -9%; top: 8%; --depth: 34; --bd: -5s; }
@media (prefers-reduced-motion: no-preference) {
  .js .mck-about-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-about-hero .hl { opacity: 1; transform: none; }
  .js .mck-about-hero .aa-arch-core { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease) .35s; }
  .js.loaded .mck-about-hero .aa-arch-core { clip-path: inset(0); }
  .js .mck-about-hero .aa-photo img { --py: 60px; opacity: 0; transition: transform 1.6s var(--ease) .7s, opacity 1.2s var(--ease) .7s; }
  .js.loaded .mck-about-hero .aa-photo img { --py: 0px; opacity: 1; }
  .js .mck-about-hero .aa-name { opacity: 0; translate: -24px 0; transition: opacity .9s var(--ease) 1.3s, translate 1.1s var(--spring) 1.3s; }
  .js.loaded .mck-about-hero .aa-name { opacity: 1; translate: 0 0; animation: bob 9s ease-in-out -2s infinite; }
}
@media (max-width: 1080px) {
  .mck-about-hero .aa-main { grid-template-columns: 1fr; padding-block: 130px 88px; }
  .mck-about-hero .aa-art { width: min(80%, 420px); margin-top: 24px; }
}
@media (max-width: 767px) {
  .mck-about-hero.aa { min-height: 0; }
  .mck-about-hero .aa-main { padding-bottom: 24px; }
  .mck-about-hero .aa-name { left: -6%; bottom: 8%; padding: 8px 18px 8px 8px; }
  .mck-about-hero .aa-name .dot { width: 38px; height: 38px; }
  .mck-about-hero .aa-name b { font-size: 17px; }
  .mck-about-hero .aa-f1 { right: -3%; }
  .mck-about-hero .aa-f3 { left: -4%; }
}