/* ───────────── PERFORMANCE OPTIMIZATIONS ─────────────
   Loaded AFTER styles.css. Pure performance hints — no layout changes.
   Safe to remove this file entirely; site falls back to base behavior. */

/* Header: lighter blur + promote to its own GPU layer so scrolling
   doesn't force a full backdrop recalc on every frame */
.top-header {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translateZ(0);
    will-change: transform;
}

/* Skip rendering offscreen sections until they're near the viewport.
   Cuts initial render cost dramatically and smooths scrolling. */
.services-sec,
.drop-off-sec,
.welcome-sec,
.scheduling-sec,
.why-sec,
.payment-sec,
.reviews-sec,
.doctor-sec,
.faq-sec,
.footer-sec {
    content-visibility: auto;
    contain-intrinsic-size: auto 1200px;
}

/* Cards: isolate layout/paint so hover or fade-up doesn't reflow neighbors */
.srv-card, .pay-card, .rev-card, .why-item, .faq-item, .doff-item {
    contain: layout paint;
}

/* Wave divider tuning. The wave SVGs are designed for desktop widths where
   the wave + its background strip together read as one smooth element.
   On narrower viewports (tablets) the background strip becomes a visible
   horizontal band. Shrink wave heights below desktop so the strip is
   imperceptible. Desktop (>1400px) keeps the original full-size waves. */
.grass {
    margin: -2px 0;
    line-height: 0;
    font-size: 0;
}
.grass svg {
    display: block;
    vertical-align: top;
    width: 100%;
}

@media (max-width: 1400px) and (min-width: 769px) {
    /* Keep waves visible but shrunken at tablet widths so the wave's
       background strip is small enough to read as part of the transition.
       Tiny residual line possible due to SVG anti-aliasing — accepted
       tradeoff to keep the wave design. */
    .grass {
        margin: -3px 0 !important;
    }
    .grass svg[style*="height:60px"] { height: 14px !important; }
    .grass svg[style*="height:50px"] { height: 12px !important; }
    .grass svg[style*="height:40px"] { height: 10px !important; }
}