/* Motion is an enhancement; content stays readable before and without JavaScript. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
.motion-preview-bar { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 20px; padding:10px 20px; background:var(--sand); color:var(--ink); font-size:12px; }
.motion-preview-bar strong { font-weight:600; }
.motion-preview-bar button { border:1px solid #ddcfb6; border-radius:30px; background:#fff; padding:7px 13px; font-size:11px; min-height:36px; }
.motion-preview-bar button:hover { border-color:var(--accent); }
.motion-preview-bar button:disabled { opacity:.55; cursor:default; }
.hero h1 em { position:relative; display:inline-block; }
.hero h1 em::after { content:""; position:absolute; left:0; bottom:-9px; width:42%; height:3px; background:#ae8535; border-radius:4px; transform-origin:left; }
.hero-portrait { isolation:isolate; }
.header { transition:box-shadow .35s ease; }
.header.is-scrolled { box-shadow:0 7px 25px #28251f0a; }
.service, .button, .text-link span, .business-link span, .service-link b,
.hero-portrait figcaption a, .team-photo img, .family-photo img {
  transition:transform .45s var(--motion-ease), background .3s, border-color .3s, box-shadow .3s;
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html:not(.motion-off) .service:hover { transform:translateY(-6px); box-shadow:0 14px 28px #28251f09; }
  html:not(.motion-off) .service:hover .service-link b,
  html:not(.motion-off) .button:hover span[aria-hidden],
  html:not(.motion-off) .text-link:hover span[aria-hidden] { transform:translate(3px,-2px); }
  html:not(.motion-off) .hero-portrait figcaption a:hover { transform:rotate(8deg); }
  html:not(.motion-off) .team-photo:hover img, html:not(.motion-off) .family-photo:hover img { transform:scale(1.025); }
}
.button span { display:inline-block; transition:transform .35s var(--motion-ease); }
html.motion-off { scroll-behavior:auto; }
html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
html.motion-off .button:hover, html.motion-off .service:hover { transform:none; }
@media (prefers-reduced-motion:reduce) {
  .button:hover, .service:hover, .team-photo:hover img, .family-photo:hover img { transform:none!important; }
}
@media (max-width:600px) {
  .motion-preview-bar { gap:5px 9px; padding:8px 12px; font-size:10px; }
  .motion-preview-bar strong { width:100%; text-align:center; }
  .hero h1 em::after { bottom:-7px; height:2px; }
}
@media print { .motion-preview-bar { display:none!important; } }

/* A quiet response to the pointer, with no automatic loops or moving text. */
.ml-link span[aria-hidden], .exec-button span[aria-hidden], .p-button span[aria-hidden] {
  display:inline-block; transition:transform .35s var(--motion-ease);
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html:not(.motion-off) .ml-link:hover span[aria-hidden],
  html:not(.motion-off) .exec-button:hover span[aria-hidden],
  html:not(.motion-off) .p-button:hover span[aria-hidden] { transform:translate(3px,-2px); }
}
html.motion-off :is(.button, .service, .ml-button, .ml-rate-card, .hp-steps > a, .a-card, .exec-scenario):hover,
html.motion-off :is(.ml-story:hover .ml-story-image img, .family-photo:hover img, .team-photo:hover img),
html.motion-off :is(.ml-link, .exec-button, .p-button):hover span[aria-hidden] { transform:none!important; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto!important; }
  .hero h1 em::after { animation:none!important; }
}