*{box-sizing:border-box}
:root{
    --purple:#31206f;
    --purple-dark:#251358;
    --turquoise:#5bc7c9;
    --pink:#d45aa8;
    --text:#31206f;
    --muted:#6b6388;
    --line:#ded8ef;
    --bg:#f8f8fb;
    --card:#fff;
}
html,body{
    margin:0;
    padding:0;
    min-height:100%;
    font-family:Arial,Helvetica,sans-serif;
    background:var(--bg);
    color:var(--text);
}
body{display:flex;justify-content:center}
a{color:inherit}
.page{
    width:min(100%,1400px);
    padding:50px 78px 34px;
    background:linear-gradient(180deg,#fff 0%,#fff 42%,#fbfbfd 100%);
    overflow:hidden;
}
.header{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:36px;
    text-align:center;
}
.logo{
    display:block;
    width:min(620px,52vw);
    height:auto;
    filter:none!important;
    box-shadow:none!important;
    background:transparent!important;
    border:0!important;
    margin:0 auto;
}
.hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(420px,560px);
    gap:54px;
    align-items:center;
    margin-bottom:8px;
}
.hero-text{min-width:0}
h1{
    margin:0 0 22px;
    font-size:clamp(58px,6vw,86px);
    line-height:.98;
    letter-spacing:-2px;
    font-weight:900;
    color:var(--purple);
}
.hero-text p{
    margin:0;
    max-width:720px;
    font-size:clamp(28px,2.3vw,36px);
    line-height:1.25;
    color:var(--purple);
    font-weight:500;
}
.hero-image-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    min-width:0;
}
.animals{
    display:block;
    width:100%;
    max-width:560px;
    height:auto;
    object-fit:contain;
}
.hours-card{
    display:grid;
    grid-template-columns:210px 1fr 1fr;
    gap:30px;
    align-items:center;
    margin:34px 0 54px;
    padding:32px 38px;
    border-radius:30px;
    background:var(--purple);
    color:#fff;
}
.hours-card h2{
    margin:0;
    font-size:44px;
    line-height:1;
    font-weight:850;
    color:#fff;
    letter-spacing:.2px;
}
.hours-box{
    min-height:110px;
    border:1px solid rgba(255,255,255,.55);
    border-radius:20px;
    padding:22px 26px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    white-space:nowrap;
}
.hours-box span{
    display:block;
    margin-bottom:11px;
    text-transform:none;
    font-size:21px;
    line-height:1.1;
    font-weight:650;
    color:rgba(255,255,255,.9);
    letter-spacing:.2px;
}
.hours-box strong{
    display:block;
    font-size:36px;
    line-height:1;
    font-weight:850;
    color:#fff;
    letter-spacing:.4px;
}
.services{margin:0 0 34px;text-align:center}
.services h2,.contact-card h2,.social-card h2{
    margin:0;
    color:var(--purple);
    font-size:46px;
    line-height:1.05;
    font-weight:900;
    letter-spacing:-1px;
}
.services h2{margin-bottom:24px;text-align:center}
.services-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px 28px;
    text-align:left;
}
.service{
    min-height:112px;
    border:2px solid var(--line);
    border-radius:22px;
    background:#fff;
    display:flex;
    align-items:center;
    gap:18px;
    padding:20px 24px;
    overflow:hidden;
}
.service-icon{
    flex:0 0 58px;
    width:58px;
    height:58px;
    border:2px solid var(--line);
    border-radius:18px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}
.service-icon img{display:block;width:42px;height:42px;object-fit:contain}
.service strong{font-size:24px;line-height:1.16;font-weight:900;color:var(--purple)}
.bottom-row{
    display:grid;
    grid-template-columns:1fr 420px;
    gap:34px;
    align-items:stretch;
    margin-top:26px;
}
.contact-card,.social-card{
    min-height:176px;
    border:2px solid var(--line);
    border-radius:26px;
    background:#fff;
    padding:28px 34px;
    box-shadow:0 5px 16px rgba(49,32,111,.04);
}
.contact-card{
    display:grid;
    grid-template-columns:minmax(0,1fr) 260px;
    gap:28px;
    align-items:center;
}
.contact-card p{
    margin:8px 0 10px;
    font-size:24px;
    line-height:1.22;
    color:var(--muted);
    font-weight:500;
}
.email-link{
    display:inline-block;
    font-size:24px;
    line-height:1.2;
    color:var(--purple);
    font-weight:700;
    text-decoration:none;
    border-bottom:2px solid rgba(49,32,111,.18);
}
.email-link:hover{border-bottom-color:var(--purple)}
.phone-box{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:112px;
    padding:18px 20px;
    border-radius:22px;
    background:var(--purple);
    color:#fff;
    text-decoration:none;
    text-align:center;
    box-shadow:0 12px 24px rgba(49,32,111,.14);
}
.phone-box span{
    display:block;
    margin-bottom:8px;
    font-size:19px;
    line-height:1;
    font-weight:750;
    letter-spacing:.3px;
}
.phone-box strong{
    display:block;
    font-size:29px;
    line-height:1;
    font-weight:900;
    white-space:nowrap;
}
.social-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px;
    text-align:center;
}
.social-card h2{font-size:38px}
.social-icons{display:flex;gap:22px;align-items:center;justify-content:center}
.social-icons a{display:block;width:78px;height:78px}
.social-icons img{display:block;width:100%;height:100%}
.footer{
    margin-top:30px;
    padding-top:18px;
    border-top:2px solid var(--line);
    color:var(--purple);
    text-align:center;
}
.footer-love{
    font-family:"Segoe Script","Brush Script MT","Comic Sans MS",cursive;
    font-size:31px;
    line-height:1.15;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
}
.footer-paw{color:var(--pink);font-family:Arial,Helvetica,sans-serif;font-size:28px;line-height:1}
.footer-copy{margin-top:10px;font-size:16px;line-height:1.3;font-weight:700;color:var(--muted)}

@media(max-width:1160px){
    .page{padding:42px 46px 30px}
    .hero{grid-template-columns:1fr 410px;gap:34px}
    .hours-card{grid-template-columns:1fr 1fr;gap:22px}
    .hours-card h2{grid-column:1/-1;text-align:center}
    .bottom-row{grid-template-columns:1fr;gap:22px}
    .contact-card,.social-card{width:100%}
}

@media(max-width:768px){
    body{display:block}
    .page{
        width:100%;
        padding:18px 16px 24px;
        background:linear-gradient(180deg,#fff 0%,#f8f8fb 58%,#fff 100%);
    }
    .header{
        justify-content:center;
        margin-bottom:20px;
        padding-bottom:12px;
        border-bottom:2px solid var(--purple);
    }
    .logo{width:min(88vw,365px);margin:0 auto}
    .hero{
        display:flex;
        flex-direction:column;
        gap:14px;
        text-align:center;
        margin-bottom:18px;
    }
    .hero-text{width:100%}
    h1{
        font-size:clamp(38px,12vw,58px);
        line-height:.96;
        letter-spacing:-1px;
        margin-bottom:12px;
    }
    .hero-text p{
        font-size:17px;
        line-height:1.42;
        font-weight:700;
        max-width:36rem;
        margin:0 auto;
    }
    .animals{max-width:430px;width:100%}
    .hours-card{
        grid-template-columns:1fr;
        gap:12px;
        margin:18px 0 24px;
        padding:22px 18px;
        border-radius:22px;
    }
    .hours-card h2{font-size:31px;margin-bottom:2px;text-align:center}
    .hours-box{
        min-height:0;
        padding:16px 14px;
        border-radius:16px;
        align-items:center;
        text-align:center;
        white-space:normal;
    }
    .hours-box span{
        font-size:17px;
        margin-bottom:8px;
        font-weight:650;
        letter-spacing:0;
    }
    .hours-box strong{font-size:28px;letter-spacing:.2px}
    .services{margin-bottom:18px;text-align:center}
    .services h2,.contact-card h2{font-size:31px;text-align:center}
    .services h2{margin-bottom:14px}
    .services-grid{grid-template-columns:1fr 1fr;gap:11px;text-align:left}
    .service{
        min-height:96px;
        padding:14px 12px;
        border-radius:16px;
        gap:10px;
        flex-direction:column;
        justify-content:center;
        text-align:center;
    }
    .service-icon{width:44px;height:44px;flex:0 0 44px;border-radius:14px}
    .service-icon img{width:31px;height:31px}
    .service strong{font-size:15px;line-height:1.2}
    .bottom-row{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
    .contact-card,.social-card{
        min-height:0;
        border-radius:20px;
        padding:20px;
    }
    .contact-card{
        display:grid;
        grid-template-columns:1fr;
        gap:16px;
        text-align:center;
    }
    .contact-card p{font-size:16px;line-height:1.35;margin:8px 0 10px}
    .email-link{font-size:16px;font-weight:800}
    .phone-box{width:100%;min-height:92px;border-radius:18px;padding:16px 14px}
    .phone-box span{font-size:17px;margin-bottom:7px}
    .phone-box strong{font-size:25px}
    .social-card{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:14px;
        text-align:center;
    }
    .social-card h2{font-size:31px;text-align:center}
    .social-icons{gap:16px;justify-content:center}
    .social-icons a{width:58px;height:58px}
    .footer{
        margin-top:20px;
        padding:18px 14px;
        border-radius:18px;
        background:var(--purple);
        color:#fff;
        text-align:center;
        border-top:0;
    }
    .footer-love{font-size:23px;gap:8px;flex-wrap:wrap}
    .footer-paw{color:var(--pink);font-size:22px}
    .footer-copy{margin-top:8px;font-size:12px;color:rgba(255,255,255,.82)}
}

@media(max-width:420px){
    .page{padding-left:12px;padding-right:12px}
    .services-grid{grid-template-columns:1fr}
    .hours-box strong{font-size:25px}
    .footer-love{font-size:21px}
}