:root {
--rose:#e8c4c8;
--tan:#e0c7ad;
--brown:#3d2a22;
--cream:#fffaf8;
}

* { box-sizing:border-box; margin:0; padding:0; }

body {
font-family:"Poppins",sans-serif;
color:var(--brown);
background:var(--cream);
line-height:1.6;
overflow-x:hidden;
}

header {
position:fixed; top:0; width:100%;
background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.1);
z-index:100;
}
nav {
max-width:1100px; margin:auto;
display:flex; justify-content:space-between; align-items:center;
padding:.8rem 1rem;
}
nav .logo { font-weight:700; color:var(--rose); }
nav ul { display:flex; gap:1rem; list-style:none; }
nav a {
text-decoration:none; color:var(--brown); font-weight:600;
}
nav a:hover { color:var(--rose); }
#menu-btn { display:none; border:none; background:none; font-size:1.6rem; color:var(--rose); }

@media(max-width:768px){
nav ul { display:none; flex-direction:column; width:100%; background:#fff; }
nav ul.open { display:flex; }
#menu-btn { display:block; }
}

.hero {
height:90vh;
display:flex; flex-direction:column; justify-content:center; align-items:center;
text-align:center; color:#fff;
background:url('../media/hero-dog.jpg') center/cover no-repeat;
position:relative;
}
.hero::after {
content:""; position:absolute; inset:0; background:rgba(0,0,0,.45);
}
.hero h1, .hero p, .btn { position:relative; z-index:1; }
.hero h1 { font-size:2.5rem; margin-bottom:.5rem; }
.btn {
background:var(--rose); color:#fff; border:none;
padding:.8rem 1.4rem; border-radius:30px; font-weight:600;
margin-top:1rem; cursor:pointer;
}
.btn:hover { background:var(--tan); }

section { padding:4rem 1rem; max-width:1000px; margin:auto; }
h2 { text-align:center; color:var(--rose); margin-bottom:1.5rem; }

.about { display:flex; flex-wrap:wrap; align-items:center; gap:2rem; }
.about img { width:320px; max-width:100%; border-radius:12px; }
.about p { flex:1 1 300px; }

.gallery {
position:relative; height:280px; overflow:hidden; border-radius:12px;
}
.gallery img {
position:absolute; width:100%; height:100%;
object-fit:cover; opacity:0; transition:opacity 1s ease;
}
.gallery img.active { opacity:1; }

.services {
display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem;
}
.card {
flex:1 1 280px; background:#fff;
border-radius:12px; padding:1.3rem;
box-shadow:0 4px 10px rgba(0,0,0,.05);
transition:.3s;
}
.card:hover { transform:translateY(-5px); }
.card h3 { color:var(--rose); margin-bottom:.5rem; }

.contact form {
display:grid; gap:1rem; max-width:500px; margin:auto;
}
.contact input, .contact textarea {
width:100%; padding:.8rem;
border:2px solid var(--tan); border-radius:8px;
}
.contact button {
background:var(--rose); color:#fff; border:none;
padding:.8rem 1.5rem; border-radius:30px; cursor:pointer;
}
.contact button:hover { background:var(--tan); }

.toggle-audio {
position:fixed; bottom:1rem; right:1rem;
background:var(--rose); color:#fff;
border:none; border-radius:50%;
width:48px; height:48px;
font-size:1.2rem; cursor:pointer;
box-shadow:0 4px 10px rgba(0,0,0,.2);
z-index:50;
}

footer {
background:var(--tan); color:#fff;
text-align:center; padding:1.2rem; font-size:.9rem;
}