/* ═══ Digital Marketing hub (v2.88.0) — page-marketing.php ════════════════
   Layout for the hero visual, the service card grid and the channel map,
   plus every keyframe used by inc/marketing-svg.php. Motion stops under
   prefers-reduced-motion. Builds on the tokens in ui.css (--ui-*).        */

.mk-hero-visual { position: relative; width: 100%; max-width: 520px; margin-left: auto; }
.mk-hero-visual::before {
  content: ''; position: absolute; inset: 8% -4% -6% 6%; border-radius: 36px; z-index: 0;
  background: radial-gradient(60% 60% at 50% 40%, rgba(96,165,250,.28), transparent 70%);
}
.mk-svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }
.mk-hero-chip {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--ui-line);
  box-shadow: var(--ui-shadow-lg); font-size: .8rem; font-weight: 700; color: var(--ui-ink);
  animation: ui-float 5s ease-in-out infinite;
}
.mk-hero-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-blue); box-shadow: 0 0 0 4px rgba(37,99,235,.15); }
.mk-hero-chip.c1 { left: -4%; bottom: 10%; }
.mk-hero-chip.c2 { right: -2%; top: 4%; animation-delay: -2.5s; }
@media (max-width: 900px) { .mk-hero-visual { margin: 8px auto 0; } .mk-hero-chip.c1 { left: 0; } .mk-hero-chip.c2 { right: 0; } }

/* Service cards on the pillar */
.mk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mk-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 22px;
  background: #fff; border: 1px solid var(--ui-line); border-radius: var(--ui-r-md);
  box-shadow: var(--ui-shadow); color: inherit; text-decoration: none; overflow: hidden;
  transition: transform .4s var(--ui-ease), box-shadow .4s, border-color .4s;
}
.mk-card::before {
  content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--ui-blue-3), var(--ui-blue-2));
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ui-ease);
}
.mk-card:hover { transform: translateY(-5px); box-shadow: var(--ui-shadow-lg); border-color: var(--ui-mark); text-decoration: none; }
.mk-card:hover::before { transform: scaleX(1); }
.mk-card-ic {
  width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(140deg, var(--ui-blue), var(--ui-blue-2));
  box-shadow: 0 10px 22px rgba(37,99,235,.28);
}
.mk-card h3 { margin: 6px 0 0; font-size: 1.06rem; color: var(--ui-ink); }
.mk-card p { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--ui-muted); flex: 1; }
.mk-card-go { font-size: .86rem; font-weight: 700; color: var(--ui-blue-2); display: inline-flex; align-items: center; gap: 6px; }
.mk-card-go svg { transition: transform .3s var(--ui-ease); }
.mk-card:hover .mk-card-go svg { transform: translateX(4px); }
.mk-card.is-current { border-color: var(--ui-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12), var(--ui-shadow); pointer-events: none; }
@media (max-width: 1000px) { .mk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .mk-cards { grid-template-columns: 1fr; } }

/* Compact sibling strip on sub pages */
.mk-strip { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.mk-strip a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--ui-line); color: var(--ui-ink); font-weight: 600; font-size: .88rem;
  text-decoration: none; transition: border-color .3s, transform .3s var(--ui-ease), box-shadow .3s;
}
.mk-strip a svg { width: 16px; height: 16px; color: var(--ui-blue); }
.mk-strip a:hover { border-color: var(--ui-mark); transform: translateY(-2px); box-shadow: var(--ui-shadow); }
.mk-strip a.is-current { background: var(--ui-blue); border-color: var(--ui-blue); color: #fff; }
.mk-strip a.is-current svg { color: #fff; }

/* Channel map (pillar): website centre, channels around */
.mk-map { max-width: 620px; margin: 0 auto; }

/* ─── Keyframes and per-illustration motion ───────────────────────── */
@keyframes mk-type   { 0% { transform: scaleX(0); } 45%,85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes mk-blink  { 50% { opacity: 0; } }
@keyframes mk-climb  { 0%,30% { transform: translateY(0); } 45%,85% { transform: translateY(-76px); } 100% { transform: translateY(0); } }
@keyframes mk-sink   { 0%,30% { transform: translateY(0); } 45%,85% { transform: translateY(76px); } 100% { transform: translateY(0); } }
@keyframes mk-bar    { 0% { transform: scaleY(.15); } 50%,85% { transform: scaleY(1); } 100% { transform: scaleY(.15); } }
@keyframes mk-cursor { 0%,20% { transform: translate(60px,60px); opacity: 0; } 35% { opacity: 1; } 50%,60% { transform: translate(0,0); } 62% { transform: translate(0,0) scale(.9); } 66%,85% { transform: translate(0,0); opacity: 1; } 100% { transform: translate(0,0); opacity: 0; } }
@keyframes mk-ripple { 0%,60% { opacity: 0; transform: scale(.4); } 65% { opacity: 1; } 90%,100% { opacity: 0; transform: scale(2.4); } }
@keyframes mk-ring   { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes mk-like   { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; transform: translateY(-10px) scale(1); } 100% { transform: translateY(-130px) scale(.8); opacity: 0; } }
@keyframes mk-pop    { 0%,8% { transform: scale(0); opacity: 0; } 18%,88% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes mk-write  { 0% { transform: scaleX(0); } 12%,90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes mk-pen    { 0% { transform: translate(150px,126px); } 12% { transform: translate(370px,126px); } 24% { transform: translate(380px,156px); } 36% { transform: translate(340px,186px); } 48% { transform: translate(260px,228px); } 60% { transform: translate(376px,256px); } 72% { transform: translate(354px,286px); } 84% { transform: translate(320px,316px); } 100% { transform: translate(366px,346px); } }
@keyframes mk-dash   { to { stroke-dashoffset: -180; } }
@keyframes mk-fly    { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes mk-row    { 0%,6% { transform: translateX(14px); opacity: 0; } 16%,90% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes mk-msg    { 0%,4% { transform: translateY(14px) scale(.96); opacity: 0; } 12%,90% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes mk-dot    { 0%,60%,100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes mk-tick   { 0%,40% { stroke: #94A3B8; } 50%,100% { stroke: #2563EB; } }
@keyframes mk-drop   { 0% { transform: translate(var(--x), 70px); opacity: 0; } 10% { opacity: 1; } 80% { transform: translate(155px, 330px); opacity: 1; } 100% { transform: translate(155px, 346px); opacity: 0; } }
@keyframes mk-draw   { 0% { stroke-dashoffset: 1; } 45%,85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes mk-spin   { to { transform: rotate(360deg); } }
@keyframes mk-flow   { to { stroke-dashoffset: -64; } }
@keyframes mk-node   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes mk-cta    { 0%,100% { opacity: 1; } 50% { opacity: .65; } }

.mk-svg * { transform-box: fill-box; }
.mk-type { transform-origin: 0 50%; animation: mk-type 6s ease-in-out infinite; }
.mk-caret { animation: mk-blink 1s steps(1) infinite; }
.mk-res-b { animation: mk-climb 6s var(--ui-ease, ease) infinite; }
.mk-res-a { animation: mk-sink 6s var(--ui-ease, ease) infinite; }
.mk-float { animation: ui-float 5s ease-in-out infinite; }
.mk-bar { transform-origin: 50% 100%; animation: mk-bar 5s var(--ui-ease, ease) infinite; }
.mk-bar-2 { animation-delay: .2s; } .mk-bar-3 { animation-delay: .4s; } .mk-bar-4 { animation-delay: .6s; }
.mk-cursor { animation: mk-cursor 5s ease-in-out infinite; }
.mk-ripple { transform-origin: center; animation: mk-ripple 5s ease-out infinite; }
.mk-ring { transform-origin: center; animation: mk-ring 3s ease-out infinite; }
.mk-ring-2 { animation-delay: 1.5s; }
.mk-like { transform-origin: center; animation: mk-like 4s ease-out infinite; }
.mk-like-2 { animation-delay: 1.3s; } .mk-like-3 { animation-delay: 2.6s; }
.mk-cta { animation: mk-cta 2.4s ease-in-out infinite; }
.mk-post { transform-origin: center; animation: mk-pop 7s var(--ui-ease, ease) infinite both; animation-delay: var(--d); }
.mk-bubble { transform-origin: 20% 100%; animation: mk-pop 7s var(--ui-ease, ease) infinite; animation-delay: 2.4s; }
.mk-line { transform-origin: 0 50%; animation: mk-write 8s ease-in-out infinite both; animation-delay: var(--d); }
.mk-pen { transform-box: view-box; animation: mk-pen 8s ease-in-out infinite; }
.mk-dash { animation: mk-dash 6s linear infinite; }
.mk-env { transform-box: view-box; offset-path: path('M70 330 C 150 160, 260 360, 330 170'); offset-rotate: 0deg; animation: mk-fly 4.4s ease-in-out infinite; }
.mk-env-2 { animation-delay: 2.2s; }
.mk-row { animation: mk-row 7s var(--ui-ease, ease) infinite both; animation-delay: var(--d); }
.mk-msg { transform-origin: 0 100%; animation: mk-msg 7s var(--ui-ease, ease) infinite both; animation-delay: var(--d); }
.mk-tick { animation: mk-tick 7s linear infinite; }
.mk-typing circle { transform-origin: center; animation: mk-dot 1.2s ease-in-out infinite; }
.mk-dot2 { animation-delay: .15s !important; } .mk-dot3 { animation-delay: .3s !important; }
.mk-drop { transform-box: view-box; animation: mk-drop 2.7s ease-in infinite; animation-delay: var(--d); opacity: 0; }
.mk-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mk-draw 6s ease-in-out infinite; }
.mk-pop { transform-origin: center; animation: mk-pop 6s ease-in-out infinite; animation-delay: 2.4s; }
.mk-orbit { transform-box: view-box; transform-origin: 260px 212px; animation: mk-spin 60s linear infinite; }
.mk-flow { animation: mk-flow 1.6s linear infinite; animation-delay: var(--d); }
.mk-node { animation: mk-node 4s ease-in-out infinite; animation-delay: var(--d); }

@media (prefers-reduced-motion: reduce) {
  .mk-svg *, .mk-hero-chip { animation: none !important; }
  .mk-draw { stroke-dashoffset: 0; }
  .mk-drop, .mk-env, .mk-cursor { opacity: 0; }
}

/* Phones/tablets: headline first, illustration after the buttons */
@media (max-width: 1024px) {
  .wm-svc-hero-right.mk-hero-visual { order: 2; max-width: 440px; margin: 0 auto; }
}

/* Digital Marketing hub posts: the group's SVG as the post hero, five backdrop palettes */
.mk-post-fig { aspect-ratio: 520 / 420; border-radius: var(--ui-r-lg); overflow: hidden; background: linear-gradient(150deg, #EFF6FF, #DBEAFE); box-shadow: var(--ui-shadow-lg); }
.mk-post-fig .mk-svg { width: 100%; height: 100%; padding: 4%; box-sizing: border-box; }
.mk-post-fig.mk-v1 { background: linear-gradient(150deg, #0B1220, #1E3A8A); }
.mk-post-fig.mk-v2 { background: radial-gradient(120% 90% at 0% 0%, #BFDBFE, #EEF2F8 60%); }
.mk-post-fig.mk-v3 { background: linear-gradient(150deg, #1D4ED8, #60A5FA); }
.mk-post-fig.mk-v4 { background: linear-gradient(150deg, #F8FAFC, #E0E7FF); }

/* Hub video (pillar page only) */
.mk-video-sec { padding-block: 8px 48px; }
.mk-video-head { text-align: center; max-width: 720px; margin: 0 auto 22px; }
.mk-video-head h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 6px; }
.mk-video-head p { color: var(--wm-muted, #64748B); margin: 0; }
.mk-video { position: relative; max-width: 1000px; margin: 0 auto; border-radius: 22px; overflow: hidden; background: #EFF6FF; border: 1px solid #DBEAFE; box-shadow: 0 24px 64px rgba(15,23,42,.13); aspect-ratio: 16 / 9; }
.mk-video-el { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.mk-video-sound { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 9px 15px; font: 600 .85rem/1 inherit; font-family: inherit; color: #fff; background: rgba(15,23,42,.72); cursor: pointer; backdrop-filter: blur(6px); }
.mk-video-sound:hover { background: #0B5FFF; }
.mk-video-sound .mk-on { display: none; }
.mk-video-sound[aria-pressed="true"] .mk-on { display: inline; }
.mk-video-sound[aria-pressed="true"] .mk-off { display: none; }
@media (max-width: 600px) { .mk-video { border-radius: 14px; } .mk-video-sound { right: 8px; bottom: 8px; padding: 7px 11px; font-size: .78rem; } }