/* Myrtle Service Hero (mck-svc-hero): base styles are .svc-hero / .stage / .tile in mc.css and the visuals in visuals.css.
   These rules port the per-page extras from site/services/<slug>/v1/style.css. */
.mck-svc-hero { --display: "Sunset Serial", Georgia, serif; } /* Elementor containers set --display: flex */

/* Two or more paragraphs (Brand & Creative, Website & DTC): slightly smaller, tighter text */
.mck-svc-hero.svc-hero--multi p.sub { margin-top: 0; font-size: clamp(17px, 1.25vw, 19px); max-width: 50ch; }
.mck-svc-hero.svc-hero--multi p.sub:first-of-type { margin-top: 32px; }
.mck-svc-hero.svc-hero--multi p.sub + p.sub { margin-top: 16px; }
.mck-svc-hero.svc-hero--multi .cta-row { margin-top: 40px; }

/* Tile stage: dashed customer-journey path (Website & DTC) */
.mck-svc-hero .journey { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mck-svc-hero .journey path { fill: none; stroke: var(--teal); stroke-width: .5; stroke-linecap: round; stroke-dasharray: 1.4 1.6; opacity: .45; }
@media (prefers-reduced-motion: no-preference) { .mck-svc-hero .journey path { animation: mckMarch 3s linear infinite; } }
@keyframes mckMarch { to { stroke-dashoffset: -6; } }

/* Tile stage: spokes drawing out from the centre (Marketplace Expansion) */
.mck-svc-hero .spokes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mck-svc-hero .spokes path { fill: none; stroke: var(--teal); stroke-width: .45; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .5; }
.mck-svc-hero .stage-wrap.is-in .spokes path { animation: mckSpokeOut 1.2s var(--ease) forwards; animation-delay: calc(.5s + var(--k) * 110ms); }
@keyframes mckSpokeOut { to { stroke-dashoffset: 0; } }
.reduced .mck-svc-hero .spokes path, .mck-svc-hero .stage-wrap:not([data-reveal]) .spokes path { stroke-dashoffset: 0; }

/* Tile badges */
.mck-svc-hero .tile > span { position: relative; }
.mck-svc-hero .tile .step { position: absolute; left: -6px; top: -6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: var(--ink); font: 500 11px var(--body); box-shadow: 0 4px 10px -4px rgba(18, 26, 33, .4); }
.mck-svc-hero .tile .new { position: absolute; right: -8px; top: -8px; padding: 4px 7px; border-radius: 999px; background: var(--orange); color: var(--ink); font: 500 9px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.mck-svc-hero .tile .word { font: 500 clamp(12px, 1.1vw, 15px)/1 var(--body); }
.mck-svc-hero .tag img { height: 18px; } /* Elementor sets img { height: auto } */