/* Motion extends the existing Berg palette and photograph. */
.hero-art { height: clamp(340px, 33vw, 480px); isolation: isolate; }
.hero-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity .8s ease; }
.hero-art[data-renderer="webgl"] canvas { opacity: 1; }
.hero-art figcaption { pointer-events: none; }
.hero-art .scene-motion { position: absolute; z-index: 3; top: 22px; right: 24px; min-height: 40px; padding: 8px 15px; border: 1px solid #d5e9f440; border-radius: 30px; background: #0b121a70; backdrop-filter: blur(14px); color: #edf2f6; font-size: .8rem; }
.hero-art .scene-motion:hover { background: #0b121aa8; border-color: #d5e9f480; }
.hero-art .scene-motion:focus-visible { outline: 2px solid #bbd7ee; outline-offset: 4px; }
.hero-copy h1 em { background: linear-gradient(110deg, #a5b8c9 10%, #e5f2fc 42%, #98b8d1 62%, #a5b8c9 85%); color: #bbd7ee; background-size: 220% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy, .hero-aside { animation: berg-enter .85s cubic-bezier(.2,.65,.25,1) both; }
  .hero-aside { animation-delay: .12s; }
  .hero-copy h1 em { animation: berg-light 1.7s ease-out both; }
  .motion-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease var(--reveal-delay,0ms), transform .7s cubic-bezier(.2,.65,.25,1) var(--reveal-delay,0ms); }
  .motion-reveal.is-visible, .motion-reveal:focus-within { opacity: 1; transform: translateY(0); }
  .journey > div strong, .service-title h3 { transition: transform .35s ease, color .35s ease; }
  .journey > div:hover strong, .service-card:hover h3 { transform: translateX(5px); }
  .service-card:hover h3 { color: #bbd7ee; }
  .audit-demo { transition: box-shadow .4s ease, border-color .4s ease; }
  .audit-demo:hover { box-shadow: 0 18px 60px #06132015; }
}
@keyframes berg-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes berg-light { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (max-width:760px) {
  .hero-art { height: auto; }
  .hero-art img { display: block; height: auto; aspect-ratio: 3 / 1; object-fit: contain; object-position: center; }
  .hero-art canvas { inset: 0 0 auto; height: auto; aspect-ratio: 3 / 1; }
  .hero-art::after { display: none; }
  .hero-art figcaption { position: relative; inset: auto; padding: 16px 112px 18px 16px; border-top: 1px solid #ffffff15; }
  .hero-art figcaption .art-index { font-size: .48rem; margin-bottom: 8px; }
  .hero-art figcaption p { font-size: 1.15rem; }
  .hero-art .scene-motion { top: auto; bottom: 18px; right: 16px; min-height: 36px; padding: 8px 10px; font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-reveal { opacity: 1; transform: none; }
  .hero-art canvas { transition: none; }
}