.home-menu-toggle { display: none; }
.home-mobile-menu { border: 0; padding: 0; color: #123d2d; }
.home-mobile-menu::backdrop { background: rgb(20 25 20 / 55%); }
.home-mobile-menu .mobile-menu-signin,
.home-mobile-menu .mobile-menu-signin:hover,
.home-mobile-menu .mobile-menu-signin:focus,
.home-mobile-menu .mobile-menu-signin:visited { text-decoration: none; }
.home-menu-open { overflow: hidden; }
/* Scale the desktop layout within the available laptop or monitor width. */
@media (min-width: 769px) {
    .home-page > header { padding-inline: clamp(24px, 4vw, 80px); }
    .home-page .header-container { gap: clamp(16px, 2vw, 32px); }
    .home-page .header-container > * { min-width: 0; }
    .home-page .header-container nav { gap: clamp(14px, 2vw, 32px); }
    .home-page .header-container > .btn { flex-shrink: 0; padding-inline: clamp(12px, 1.6vw, 24px); }
    .home-page section > .container { width: 100%; padding-inline: clamp(24px, 4vw, 48px); }
    .home-page #home {
        min-height: calc(100dvh - var(--home-header-height, 80px));
        padding-block: clamp(20px, 5vh, 64px);
        box-sizing: border-box;
    }
    .home-page #home > .container { flex-wrap: nowrap !important; gap: clamp(20px, 3vw, 48px); }
    .home-page .hero-content { min-width: 0; padding-right: 0; }
    .home-page .hero-content h1 { font-size: clamp(2.5rem, 4.2vw, 4rem); }
    .home-page .hero-buttons { flex-wrap: wrap; }
    .home-page .hero-image-wrapper { min-width: 0; }
    .home-page .hero-image-wrapper img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: calc(100dvh - var(--home-header-height, 80px) - 128px);
        transform: none;
        object-fit: contain;
    }
    .home-page .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
    .home-page .service-card { min-width: 0; padding: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 30px); }
    .home-page .contact-card { min-width: 0; overflow-wrap: anywhere; }
}
@media (min-width: 769px) and (max-height: 700px) {
    .home-page .hero-content h1 { font-size: clamp(2rem, 6vh, 3rem); margin-bottom: 16px; }
    .home-page .hero-content > p { font-size: 1rem; margin-bottom: 20px; }
    .home-page .hero-buttons { gap: 12px; }
}
@media (min-width: 769px) and (max-width: 1000px) {
    .home-page > header { padding-inline: 20px; }
    .home-page .header-container { gap: 14px; }
    .home-page .header-container nav { gap: 14px; font-size: .85rem; }
    .home-page .header-container > .btn { font-size: .8rem; padding-inline: 12px; }
    .home-page .logo { font-size: 24px; }
}
@media (max-width: 768px) {
    .home-page { background: #f5f8f5; }
    .home-page header { height: 76px; padding: 0 20px; background: #fff; border-bottom: 1px solid #e5ece6; z-index: 20; }
    .home-page .header-container { width: 100%; gap: 12px; justify-content: flex-start; }
    .home-page header nav, .home-page header .btn { display: none; }
    .home-page .logo { font-size: 24px; gap: 10px; line-height: 1.2; }
    .home-page .logo-sub { font-size: 10px; letter-spacing: 1.6px; margin-top: 4px; }
    .home-page .header-paw-image { width: 38px; height: 44px; object-fit: contain; }
    .home-menu-toggle, .home-menu-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: #123d2d; font-size: 23px; cursor: pointer; }
    .home-menu-toggle { order: -1; margin: 0; flex-shrink: 0; }
    .home-mobile-menu { margin: 0; width: min(82vw, 340px); max-width: 100%; height: 100dvh; max-height: 100dvh; background: #fff; padding: 16px; }
    .mobile-menu-header { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-height: 52px; }
    .home-mobile-menu nav { display: grid; gap: 9px; margin: 34px 0 26px; padding-bottom: 26px; border-bottom: 1px solid #dce6df; }
    .home-mobile-menu nav a { display: flex; align-items: center; gap: 20px; padding: 16px; border-bottom: 0; border-left: 3px solid transparent; border-radius: 8px; font-size: 16px; color: #123d2d; }
    .home-mobile-menu nav a.active { background: #e8f0e9; border-left-color: #f1b932; }
    .home-mobile-menu nav i { width: 24px; font-size: 22px; text-align: center; }
    .mobile-menu-signin { width: 100%; padding: 14px 8px; }
    .home-page #home { padding: 28px 0 20px; min-height: calc(100svh - var(--home-header-height, 76px)); }
    .home-page #home > .container { display: flex; flex-direction: column; align-items: stretch !important; width: 100%; padding: 0 clamp(20px, 6vw, 24px); margin-block: auto; flex-shrink: 0; }
    .home-page .hero-content { display: contents; }
    .home-page .badge { align-self: flex-start; order: 0; font-size: 11px; padding: 6px 12px; margin-bottom: 14px; letter-spacing: 0; }
    .home-page .hero-content h1 { order: 1; font-size: clamp(32px, 9vw, 48px); line-height: 1.12; text-align: left; margin-bottom: 12px; max-width: 100%; text-wrap: balance; }
    .home-page .hero-content h1 span { display: inline; }
    .home-page .hero-content h1 > i { font-size: .65em !important; vertical-align: baseline; white-space: nowrap; }
    .home-page .hero-content > p { order: 2; font-size: 16px; line-height: 1.55; text-align: left; margin: 0; max-width: 100%; }
    .home-page .hero-image-wrapper { order: 3; width: 100%; flex: none; margin: 16px 0; display: flex; justify-content: center; }
    .home-page .hero-image-wrapper img { width: 100%; max-width: 390px; height: auto; transform: none; object-fit: contain; }
    .home-page .hero-buttons { order: 4; display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; width: 100%; gap: 12px; margin: 0; }
    .home-page .hero-buttons .btn { width: 100%; min-height: 48px; padding: 10px; font-size: 14px; border-radius: 10px; justify-content: center; text-align: center; }
    .home-page .hero-info-bar { order: 5; display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; width: 100%; margin: 0; gap: 8px; }
    .home-page .info-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 3px 12px #173b2910; gap: 6px; text-align: center; }
    .home-page .info-item .icon { flex-shrink: 0; }
    .home-page .info-item h4 { font-size: 13px; }
    .home-page .info-item p { font-size: 12px; margin: 0; line-height: 1.4; }
    .home-page #services { padding: 30px 0; }
    .home-page #services .container { padding: 0 12px; }
    .home-page .section-header { margin-bottom: 18px; }
    .home-page .section-header h4 { font-size: 10px; letter-spacing: 1.5px; }
    .home-page .section-header h2 { font-size: 28px; line-height: 1.2; margin: 8px 0; }
    .home-page .section-header p { font-size: 13px; line-height: 1.5; }
    .home-page .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px; }
    .home-page .service-card { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 15px 10px; border-radius: 13px; background: #f8faf8; }
    .home-page .service-icon { width: 56px; height: 56px; font-size: 26px; margin-bottom: 12px; }
    .home-page .service-card h3 { font-family: 'Nunito', sans-serif; font-size: 14px; line-height: 1.3; margin-bottom: 8px; }
    .home-page .service-card p { font-size: 12px; line-height: 1.4; margin-bottom: 0; }
    .home-page #about { padding: 20px 0 0; }
    .home-page #about .container { padding: 0 14px; }
    .home-page .about-banner { display: grid; grid-template-columns: minmax(0, 1fr); padding: 16px; border-radius: 20px; }
    .home-page .about-content { display: contents; }
    .home-page .about-content h4 { order: 0; font-size: 10px; margin: 0 0 6px; }
    .home-page .about-content h2 { order: 1; font-size: 25px; line-height: 1.1; margin-bottom: 10px; }
    .home-page .about-content > p { order: 2; font-size: 12px; line-height: 1.4; margin-bottom: 12px; }
    .home-page .about-image { order: 3; width: 100%; height: 140px; min-height: 0; border-radius: 9px; margin-bottom: 12px; }
    .home-page .about-features { order: 4; display: grid; gap: 12px; margin: 0; width: 100%; justify-items: stretch; text-align: left; }
    .home-page .feature { gap: 14px; justify-content: flex-start; text-align: left; }
    .home-page .feature > i { font-size: 23px; width: 24px; flex-shrink: 0; }
    .home-page .feature h5 { font-size: 13px; }
    .home-page .feature p { font-size: 12px; line-height: 1.3; }
    .home-page #contact { padding: 24px 0; margin-top: 24px; }
    .home-page #contact .container { display: flex; flex-direction: column; padding: 0 16px; }
    .home-page #contact .contact-intro { margin-bottom: 18px; }
    .home-page #contact .section-header { display: block; text-align: left; }
    .home-page #contact .section-header > h2 { font-size: 26px; }
    .home-page #contact .contact-hours { justify-self: stretch; padding: 14px 16px; }
    .home-page .contact-grid { order: 3; grid-template-columns: 1fr; gap: 8px; }
    .home-page .contact-card { display: grid; grid-template-columns: 26px minmax(0, 1fr) 12px; column-gap: 12px; row-gap: 2px; padding: 12px; border-radius: 12px; }
    .home-page .contact-card > i { grid-column: 1; grid-row: 1 / 3; align-self: center; font-size: 22px; }
    .home-page .contact-card h3 { grid-column: 2; font-family: 'Nunito', sans-serif; font-size: 13px; }
    .home-page .contact-card p { grid-column: 2; font-size: 11px; line-height: 1.4; }
    .home-page .contact-card span { display: none; }
    .home-page .contact-card::after { content: '›'; grid-column: 3; grid-row: 1 / 3; align-self: center; font-size: 24px; }
}

/* Mobile/tablet text alignment and natural section spacing. */
@media (max-width: 1024px) {
    .home-page .hero-content h1 {
        text-align: center;
        max-width: 560px;
        margin-inline: auto;
        text-wrap: balance;
    }
    .home-page .hero-content > p {
        text-align: center;
        max-width: 520px;
        margin-inline: auto;
        text-wrap: pretty;
    }
    .home-page #contact {
        border-top: 0;
        margin-top: 0;
        padding-top: 20px;
        scroll-margin-top: var(--home-header-height, 80px);
    }
    .home-page #about {
        min-height: 0;
        box-sizing: border-box;
        padding-block: 20px;
    }
}
/* Tablet first-screen sizing; larger desktop rules remain unchanged. */
@media (min-width: 769px) and (max-width: 1024px) {
    .home-page #home { min-height: calc(100svh - var(--home-header-height, 80px)); }
}