/* 622.digital accents: the amber dot from the logo, used as a recurring element. */
.m622-eb-dot::before {
  content: "";
  display: inline-block;
  width: .62em;
  height: .62em;
  margin-right: .7em;
  border-radius: 50%;
  background: var(--amber, #D98A17);
  vertical-align: .02em;
}
.m622-stop { color: var(--amber, #D98A17); display: inline-block; }
.m622-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  pointer-events: none; opacity: 0; transition: opacity .3s;
}
.m622-progress.on { opacity: 1; }
.m622-progress i {
  position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--amber, #D98A17);
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}
.m622-progress b {
  position: absolute; top: -4px; left: calc(var(--p, 0) * 100% - 5px);
  width: 10px; height: 10px; border-radius: 50%; background: var(--amber, #D98A17);
}

/* Desktop split layout: heading left, text right. Mobile and tablet stay stacked. */
@media (min-width: 1025px) {
  .m622-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
  .m622-split-head .heading-wide { max-width: none; }
  .m622-split-head > *:last-child { margin-bottom: 0; }
  .m622-split-body { padding-top: .5em; }
  .m622-split-body .body, .m622-split-body .lede-lg, .m622-split-body .lede { max-width: 62ch; }
  .svc-hero .m622-split { align-items: end; }
  .svc-hero .m622-split-body { padding-top: 0; padding-bottom: .6em; }
}

/* Movement: off for visitors who ask for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes m622pop { 0% { transform: scale(0); opacity: 0 } 70% { transform: scale(1.35); opacity: 1 } 100% { transform: scale(1) } }
  .m622-stop { transform-origin: 50% 80%; animation: m622pop .7s cubic-bezier(.2,.7,.2,1) .6s both; }
  .m622-eb-dot::before { animation: m622pop .6s cubic-bezier(.2,.7,.2,1) .2s both; }
  .m622-pre .m622-eb-dot::before, .m622-pre.m622-eb-dot::before { animation: none; transform: scale(0); }
  .m622-in .m622-eb-dot::before, .m622-in.m622-eb-dot::before { animation: m622pop .6s cubic-bezier(.2,.7,.2,1) calc(var(--m622-delay, 0ms) + .35s) both; }
  .card, .tile {
    transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
  }
  .card:hover, .tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(14, 35, 33, .09);
  }
  a.btn, .e-button-base.btn {
    transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  a.btn:hover, .e-button-base.btn:hover {
    transform: translateY(-2px);
  }
  .m622-pre {
    opacity: 0;
    transform: translateY(28px);
  }
  .m622-in {
    opacity: 1;
    transform: none;
    transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--m622-delay, 0ms);
  }
  .m622-frame {
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .m622-frame:hover {
    transform: translateY(-6px) scale(1.01);
  }
}