/* Progressive enhancement: content is never hidden by the motion stylesheet. */
[data-motion-region]{position:relative}
.section-motion-rule{position:absolute;z-index:2;top:27px;left:var(--gutter);width:84px;height:1px;background:linear-gradient(90deg,var(--clay),rgba(160,109,82,.12));pointer-events:none;transform-origin:left center}
.hero>.section-motion-rule{top:auto;bottom:23px}
.technology>.section-motion-rule,.appointment>.section-motion-rule,footer>.section-motion-rule{background:linear-gradient(90deg,#e7c7a9,rgba(231,199,169,.12))}
footer>.section-motion-rule{top:0;width:calc(100% - var(--gutter)*2)}

/* Existing ambient movement runs only in sections currently on screen. */
.hero-copy h1 em{animation:none!important}
body.motion-enhanced [data-motion-region]:not(.motion-in-view) .hero-backdrop img,
body.motion-enhanced [data-motion-region]:not(.motion-in-view) .clinic-orbit,
body.motion-enhanced [data-motion-region]:not(.motion-in-view) .appointment-image img,
body.motion-enhanced .technology:not(.motion-in-view)::before{animation-play-state:paused}
body.motion-page-hidden *,body.motion-page-hidden *::before,body.motion-page-hidden *::after{animation-play-state:paused!important}

.button .icon,.mobile-whatsapp .icon{transition:transform .24s var(--ease)}
.button:hover .icon,.button:focus-visible .icon{transform:translate3d(3px,-3px,0)}
.card-number{transition:transform .25s var(--ease),background-color .25s var(--ease)}
.care-card:focus-within .card-number{transform:scale(1.08);background:var(--paper-strong)}
.care-card:focus-within,.professional:focus-within{outline:1px solid var(--clay);outline-offset:3px}
.principles-list li>span,.integration-copy li>span{transition:transform .25s var(--ease)}
.principles-list li:hover>span,.integration-copy li:hover>span{transform:translateX(3px)}

/* FAQ feedback also works on touch and with a keyboard. */
.faq details{transition:background-color .2s var(--ease)}
.faq details[open]{background:rgba(181,142,119,.08)}
.faq details[open] p{animation:faqAnswerIn .32s var(--ease) both}
.faq details[open] .faq-toggle{background:var(--clay-dark);border-color:var(--clay-dark);transform:rotate(180deg)}
.faq details[open] .faq-toggle::before,.faq details[open] .faq-toggle::after{background:var(--white)}
.faq-toggle{transition:transform .3s var(--ease),background-color .2s var(--ease)}
.faq summary:focus-visible{outline-offset:2px}
.footer-social a,.appointment-phone{position:relative}
.footer-social a::after,.appointment-phone::after{position:absolute;right:0;bottom:-1px;left:0;height:1px;background:currentColor;content:"";transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.footer-social a:hover::after,.footer-social a:focus-visible::after,.appointment-phone:hover::after,.appointment-phone:focus-visible::after{transform:scaleX(1)}

@media (hover:hover){
  .care-card:hover .card-number{transform:scale(1.08);background:var(--paper-strong)}
  .equipment-card:hover .equipment-copy h3{color:var(--clay-dark)}
  .equipment-copy h3{transition:color .2s var(--ease)}
}
@media (max-width:760px){
  .section-motion-rule{top:21px;width:64px}
  .hero>.section-motion-rule{bottom:18px}
  .faq details[open]{padding-inline:0}
  .faq details[open] summary{color:var(--clay-dark)}
}
@media (prefers-reduced-motion:reduce){
  .section-motion-rule{transform:none!important;opacity:1!important}
  .faq details[open] p{animation:none}
  .button .icon,.mobile-whatsapp .icon,.card-number,.principles-list li>span,.integration-copy li>span{transform:none!important}
}
body.motion-low-power .hero-backdrop img,
body.motion-low-power .clinic-orbit,
body.motion-low-power .appointment-image img,
body.motion-low-power .technology::before{animation:none!important}