/* Small visual changes only: preserve the existing frame sizes and layout. */
.hero { animation: none; }
.hero-photo, .about-photo, .service-media { overflow: hidden; }
.hero-photo::before { content: ""; position: absolute; inset: 0 0 auto; height: 42px; background: linear-gradient(to bottom, #fff, #ffffff00); z-index: 1; pointer-events: none; }
.service-media { border-radius: 6px; }
.about-photo img { object-position: 50% 58%; }
.services .service-home .service-media img { object-position: 50% 72%; }
.services .service-garden .service-media img { object-position: 50% 65%; }
.services .service-season .service-media img { object-position: center; }
h1 > span { position: relative; isolation: isolate; background: transparent; border-radius: 14px; }
h1 > span::before { content: ""; position: absolute; inset: 0; width: auto; border-radius: inherit; background: rgba(255,255,250,.88); z-index: -1; }
.hero-copy { font: inherit; letter-spacing: inherit; }
/* Retire the older reveal styles; the new observer handles entrance motion. */
.reveal.pending, .about-content.reveal.pending { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  h1 > span::before { animation: copy-panel .8s ease both; animation-delay: 1.55s; }
  .hero-copy { animation: copy-words .8s ease both; animation-delay: 1.75s; }
  .hero-photo > img { animation: hero-zoom 1s ease-out both; animation-delay: 1.4s; }
  [data-motion], .about-content[data-motion] { transition: opacity .8s ease, translate .8s cubic-bezier(.2,.65,.3,1); }
  [data-motion].motion-pending { opacity: 0; translate: 0 16px; }
  .service-heading[data-motion] { transition-delay: .06s; }
  .service-copy[data-motion] { transition-delay: .12s; }
  .about-photo img, .service-media img { transition: transform 1s cubic-bezier(.2,.65,.3,1); }
  figure.motion-pending img { transform: scale(1.035); }
  [data-motion].motion-pending:focus-within { opacity: 1; translate: none; }
  a, button { transition: color .6s, background-color .6s, opacity .6s, border-color .6s; }
}
@keyframes copy-panel { from { opacity: 0; } to { opacity: 1; } }
@keyframes copy-words { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-zoom { from { transform: scale(1.025); } to { transform: scale(1); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .about-photo:hover img, .service-media:hover img { transform: scale(1.025); }
  #works .work-photo-button img { transition: transform .9s ease; }
  #works .work-photo-button:hover img { transform: scale(1.02); }
}
@media (max-width: 800px) {
  h1 > span::before { left: calc(-1 * var(--hero-inset, 20px)); }
  h1 > span:first-child::before { border-bottom-left-radius: 0; }
  h1 > span + span::before { border-top-left-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-motion].motion-pending { opacity: 1; translate: none; }
}