html {
    font-size: 18px;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

::selection {
    background-color: #c7d2fe;
    color: #1e1b4b;
}

h1, h2 {
    color: #1e1b4b;
}

header {
    transition:
        top 250ms ease-out,
        margin 250ms ease-out,
        border-radius 250ms ease-out,
        box-shadow 250ms ease-out,
        border-color 250ms ease-out;
}
header.scrolled {
    top: 8px;
    margin-left: max(16px, calc((100% - 80rem) / 2));
    margin-right: max(16px, calc((100% - 80rem) / 2));
    border-radius: 16px;
    border-bottom-color: transparent;
    box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.18);
}
@media (prefers-reduced-motion: reduce) {
    header { transition: none; }
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms ease-out, transform 700ms ease-out;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.reviews-marquee {
    overflow: hidden;
    padding-top: 16px;
    padding-bottom: 40px;
}
.reviews-track {
    width: max-content;
    animation: reviewsMarquee 90s linear infinite;
}
.reviews-marquee:hover .reviews-track {
    animation-play-state: paused;
}
@keyframes reviewsMarquee {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .reviews-track { animation: none; }
}

.reviews-carousel {
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: 16px;
    padding-bottom: 40px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}
@media (min-width: 640px) {
    .reviews-carousel { scroll-padding-left: 1.5rem; }
}
@media (min-width: 1024px) {
    .reviews-carousel { scroll-padding-left: 2rem; }
}
.reviews-carousel::-webkit-scrollbar {
    display: none;
}
.reviews-carousel .reviews-track {
    width: max-content;
    animation: none;
}
.reviews-carousel.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
}
.reviews-carousel.is-dragging * {
    pointer-events: none;
    user-select: none;
}
.reviews-carousel .review-card {
    scroll-snap-align: start;
}

@keyframes dissolveIn {
    from { opacity: 0; filter: blur(10px); transform: scale(1.02); }
    to   { opacity: 1; filter: blur(0);    transform: scale(1); }
}

.dissolve-in {
    animation: dissolveIn 1.4s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .dissolve-in { animation: none; }
}

@keyframes baExtraFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 639px) {
    .ba-extra { display: none; }
    .ba-grid--expanded .ba-extra {
        display: block;
        animation: baExtraFadeIn 0.35s ease-out;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ba-grid--expanded .ba-extra { animation: none; }
}

.svc-icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-color: currentColor;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.svc-icon--prevent    { mask-image: url('icons/Prevent.svg');    -webkit-mask-image: url('icons/Prevent.svg'); }
.svc-icon--cosmetic   { mask-image: url('icons/Cosmetic.svg');   -webkit-mask-image: url('icons/Cosmetic.svg'); }
.svc-icon--restore    { mask-image: url('icons/Restore.svg');    -webkit-mask-image: url('icons/Restore.svg'); }
.svc-icon--pediatric  { mask-image: url('icons/Pediatric.svg');  -webkit-mask-image: url('icons/Pediatric.svg'); }
.svc-icon--ortho      { mask-image: url('icons/Ortho.svg');      -webkit-mask-image: url('icons/Ortho.svg'); }
.svc-icon--emergency  { mask-image: url('icons/Emergency.svg');  -webkit-mask-image: url('icons/Emergency.svg'); }