:root {
    --cream: #F8F6F0;
    --ink: #2B2D42;
    --primary: #52B7B5;
    --secondary: #81B29A;
    --line: #E5E0D8
}

html {
    scroll-behavior: smooth
}

body {
    background: var(--cream);
    color: var(--ink);
    font-family: 'Nunito Sans', sans-serif
}

h1,
h2,
h3,
h4 {
    font-family: 'Nunito Sans', sans-serif
}

.header-scrolled {
    background: var(--primary) !important;
    box-shadow: 0 8px 30px rgba(43, 45, 66, .14) !important;
    border-color: rgba(255, 255, 255, .2) !important
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .75s ease, transform .75s ease
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0)
}

.btn {
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(43, 45, 66, .12)
}

.service-card {
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease
}

.service-card:hover {
    transform: translateY(-7px);
    border-color: var(--primary);
    box-shadow: 0 18px 40px rgba(43, 45, 66, .08)
}

.pet-image {
    transition: transform .6s cubic-bezier(.2, .8, .2, 1)
}

.gallery-card:hover .pet-image {
    transform: scale(1.045)
}

.no-scrollbar::-webkit-scrollbar {
    display: none
}

.no-scrollbar {
    scrollbar-width: none
}

.header-scrolled nav a {
    color: rgba(255, 255, 255, .9) !important
}

.header-scrolled nav a:hover {
    color: #fff !important
}

.logo-image {
    transform: scale(1.14);
    mix-blend-mode: multiply
}

.floating-action {
    position: fixed;
    right: 20px;
    z-index: 45;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: 0 8px 24px rgba(43, 45, 66, .16);
    transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease
}

.floating-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(43, 45, 66, .22)
}

.whatsapp-float {
    bottom: 22px;
    background: #25D366;
    font-size: 19px
}

.top-float {
    bottom: 78px;
    right: 20px;
    background: var(--primary);
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px)
}

.top-float.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

@media(max-width:1023px) {
    #site-header .font-display {
        color: #fff
    }

    #site-header .text-terracotta {
        color: #fff
    }
}

@media(max-width:480px) {
    .floating-action {
        width: 42px;
        height: 42px;
        right: 14px
    }

    .whatsapp-float {
        bottom: 16px
    }

    .top-float {
        bottom: 68px;
        right: 14px
    }
}

.footer-icon svg {
    width: 20px;
    height: 20px
}

.footer-icon {
    transition: transform .25s ease, border-color .25s ease, color .25s ease
}

.footer-icon:hover {
    transform: translateY(-2px)
}
:root{--cream:#F8F6F0;--ink:#2B2D42;--primary:#52B7B5;--secondary:#81B29A;--line:#E5E0D8}html{scroll-behavior:smooth}body{background:var(--cream);color:var(--ink);font-family:'Nunito Sans',sans-serif}h1,h2,h3,h4{font-family:'Nunito Sans',sans-serif}.header-scrolled{background:var(--primary)!important;box-shadow:0 8px 30px rgba(43,45,66,.14)!important;border-color:rgba(255,255,255,.2)!important}.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s ease}.reveal.is-visible{opacity:1;transform:translateY(0)}.btn{transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease}.btn:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(43,45,66,.12)}.service-card{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}.service-card:hover{transform:translateY(-7px);border-color:var(--primary);box-shadow:0 18px 40px rgba(43,45,66,.08)}.pet-image{transition:transform .6s cubic-bezier(.2,.8,.2,1)}.gallery-card:hover .pet-image{transform:scale(1.045)}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{scrollbar-width:none}.header-scrolled nav a{color:rgba(255,255,255,.9)!important}.header-scrolled nav a:hover{color:#fff!important}.logo-image{transform:scale(1.14);mix-blend-mode:multiply}.floating-action{position:fixed;right:20px;z-index:45;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.25);box-shadow:0 8px 24px rgba(43,45,66,.16);transition:transform .25s ease,opacity .25s ease,box-shadow .25s ease}.floating-action:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(43,45,66,.22)}.whatsapp-float{bottom:22px;background:#25D366;font-size:19px}.top-float{bottom:78px;right:20px;background:var(--primary);font-size:20px;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px)}.top-float.is-visible{opacity:1;visibility:visible;transform:translateY(0)}@media(max-width:1023px){#site-header .font-display{color:#fff}#site-header .text-terracotta{color:#fff}}@media(max-width:480px){.floating-action{width:42px;height:42px;right:14px}.whatsapp-float{bottom:16px}.top-float{bottom:68px;right:14px}}.footer-icon svg{width:20px;height:20px}.footer-icon{transition:transform .25s ease,border-color .25s ease,color .25s ease}.footer-icon:hover{transform:translateY(-2px)}
/* UX/UI contrast and readability */
body{font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
p{color:inherit}
h1,h2,h3,h4{letter-spacing:-.025em}
.service-card p,.reveal p{max-width:65ch}
.footer-icon{will-change:transform}
@media(max-width:640px){h1{letter-spacing:-.035em}.btn{min-height:48px}}