/* ==========================================================================
   Happiness Pet House — premium redesign (concept by Cybergate)
   ========================================================================== */

:root {
  --teal:#0e9aa7; --teal-dark:#0b7e8a; --teal-deep:#075661;
  --coral:#ff7a59; --coral-dark:#ec5a37;
  --gold:#ffb23e;
  --cream:#fffdf9; --sand:#fdf1e6; --mint:#eaf7f6; --peach:#fff1ea;
  --ink:#1f2f36; --body:#4d5f66; --muted:#7b8b90;
  --white:#fff; --line:rgba(31,47,54,.08);
  --sh-sm:0 4px 14px rgba(31,47,54,.06);
  --sh:0 16px 40px rgba(31,47,54,.10);
  --sh-lg:0 30px 70px rgba(31,47,54,.16);
  --r:22px; --r-sm:14px; --r-lg:30px;
  --wa:#25d366;
  --maxw:1180px;
  --font:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--font); color:var(--body);
  background:var(--cream); line-height:1.7; font-size:17px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { font-family:var(--font); color:var(--ink); font-weight:800; line-height:1.12; letter-spacing:-.02em; margin:0 0 .5em; }
h1 { font-size:clamp(2.3rem,5.2vw,3.7rem); }
h2 { font-size:clamp(1.7rem,3.4vw,2.5rem); }
h3 { font-size:1.2rem; letter-spacing:-.01em; }
p { margin:0 0 1em; }
a { color:var(--teal-dark); text-decoration:none; }
img { max-width:100%; display:block; }

.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.section { padding:88px 0; }
.section--sand { background:linear-gradient(180deg,var(--peach),var(--cream)); }
.section--mint { background:linear-gradient(180deg,var(--mint),var(--cream)); }
.center { text-align:center; }
.lead { font-size:1.16rem; color:var(--muted); max-width:660px; margin:0 auto 2.4rem; }

/* Eyebrow pill */
.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--peach); color:var(--coral-dark);
  padding:.4rem .9rem; border-radius:50px;
  font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:1rem;
}
.eyebrow--light { background:rgba(255,255,255,.2); color:#fff; backdrop-filter:blur(4px); }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.95rem 1.75rem; border-radius:50px; font-weight:800; font-size:1rem;
  cursor:pointer; border:2px solid transparent; transition:.2s ease; letter-spacing:-.01em;
}
.btn:hover { transform:translateY(-3px); }
.btn--primary { background:linear-gradient(135deg,var(--coral),var(--coral-dark)); color:#fff; box-shadow:0 10px 24px rgba(255,122,89,.4); }
.btn--primary:hover { color:#fff; box-shadow:0 16px 32px rgba(255,122,89,.5); }
.btn--teal { background:linear-gradient(135deg,var(--teal),var(--teal-dark)); color:#fff; box-shadow:0 10px 24px rgba(14,154,167,.35); }
.btn--teal:hover { color:#fff; }
.btn--ghost { background:#fff; color:var(--ink); border-color:var(--line); box-shadow:var(--sh-sm); }
.btn--ghost:hover { border-color:var(--teal); color:var(--teal-dark); }
.btn--wa { background:var(--wa); color:#fff; box-shadow:0 8px 20px rgba(37,211,102,.35); }
.btn--wa:hover { background:#1eb457; color:#fff; }
.btn--lg { padding:1.05rem 2rem; font-size:1.05rem; }

/* Header */
.site-header {
  position:sticky; top:0; z-index:50;
  background:rgba(255,253,249,.8); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent; transition:.25s ease;
}
.site-header.scrolled { background:rgba(255,253,249,.96); box-shadow:0 6px 24px rgba(31,47,54,.08); border-bottom-color:var(--line); }
.nav { display:flex; align-items:center; justify-content:space-between; padding:12px 22px; max-width:var(--maxw); margin:0 auto; }
.brand { display:flex; align-items:center; gap:.7rem; font-weight:800; font-size:1.18rem; color:var(--ink); letter-spacing:-.02em; }
.brand small { display:block; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.brand-logo { width:48px; height:48px; border-radius:14px; object-fit:cover; box-shadow:var(--sh-sm); }
.nav-links { display:flex; align-items:center; gap:1.4rem; list-style:none; margin:0; padding:0; }
.nav-links a { color:var(--ink); font-weight:700; font-size:.97rem; }
.nav-links a:hover, .nav-links a.active { color:var(--teal-dark); }
.nav-cta { margin-left:.3rem; }
.nav-toggle { display:none; background:none; border:0; font-size:1.7rem; cursor:pointer; color:var(--ink); }

/* ---------- Full-bleed HERO ---------- */
.hero-full { position:relative; overflow:hidden; }
.hero-media { position:absolute; inset:0; z-index:0; }
.hero-media img { width:100%; height:100%; object-fit:cover; object-position:75% center; }
.hero-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(7,86,97,.94) 0%, rgba(11,126,138,.82) 38%, rgba(14,154,167,.35) 64%, rgba(14,154,167,0) 88%);
}
.hero-inner { position:relative; z-index:1; padding:120px 22px 110px; max-width:var(--maxw); margin:0 auto; }
.hero-copy { max-width:640px; color:#fff; }
.hero-copy h1 { color:#fff; }
.hero-copy h1 .hl { color:var(--gold); }
.hero-copy .lead { color:rgba(255,255,255,.92); margin:0 0 1.8rem; max-width:560px; }
.hero-cta { display:flex; gap:.9rem; flex-wrap:wrap; }
.hero-chips { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:2rem; }
.chip {
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25);
  color:#fff; padding:.5rem 1rem; border-radius:50px; font-size:.9rem; font-weight:700;
  backdrop-filter:blur(6px);
}

/* Stat strip */
.statbar { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh); }
.stat { background:#fff; padding:26px 18px; text-align:center; }
.stat b { display:block; font-size:1.9rem; color:var(--teal-dark); font-weight:800; letter-spacing:-.02em; }
.stat span { font-size:.9rem; color:var(--muted); font-weight:600; }

/* Section heads */
.sec-head { max-width:640px; margin:0 auto 44px; text-align:center; }
.sec-head .lead { margin-bottom:0; }

/* Service image cards */
.grid { display:grid; gap:26px; }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.scard {
  background:#fff; border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-sm);
  border:1px solid var(--line); transition:.22s ease; display:flex; flex-direction:column;
}
.scard:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); }
.scard-media { position:relative; aspect-ratio:4/3; overflow:hidden; }
.scard-media img { width:100%; height:100%; object-fit:cover; transition:.4s ease; }
.scard:hover .scard-media img { transform:scale(1.07); }
.scard-badge { position:absolute; top:12px; left:12px; background:#fff; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:1.4rem; box-shadow:var(--sh-sm); }
.scard-body { padding:20px 22px 24px; }
.scard-body h3 { margin-bottom:.35rem; }
.scard-body p { color:var(--muted); font-size:.97rem; margin-bottom:.8rem; }
.scard-body a, .scard-body span { font-weight:800; color:var(--teal-dark); }

/* Generic card */
.card { background:#fff; border-radius:var(--r); padding:30px; box-shadow:var(--sh-sm); border:1px solid var(--line); transition:.2s ease; }
.card:hover { transform:translateY(-5px); box-shadow:var(--sh); }
.card .ico { font-size:2.3rem; margin-bottom:.5rem; }
.card h3 { margin-bottom:.35rem; }
.card p { color:var(--muted); }
.card .price { font-weight:800; color:var(--teal-dark); }

/* Two-column feature rows */
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.photo-img { width:100%; border-radius:var(--r); box-shadow:var(--sh); object-fit:cover; }
.photo-img.tall { height:440px; }
.hero-photo-img { width:100%; height:440px; object-fit:cover; border-radius:var(--r); box-shadow:var(--sh); }

/* Checklist */
.checks { list-style:none; padding:0; margin:0 0 1.4rem; }
.checks li { padding-left:2rem; position:relative; margin-bottom:.7rem; font-weight:600; color:var(--ink); }
.checks li::before {
  content:"✓"; position:absolute; left:0; top:1px;
  width:1.35rem; height:1.35rem; background:var(--mint); color:var(--teal-dark);
  border-radius:50%; display:grid; place-items:center; font-size:.8rem; font-weight:900;
}

/* Reviews */
.review { background:#fff; border-radius:var(--r); padding:30px; box-shadow:var(--sh-sm); border:1px solid var(--line); position:relative; }
.review::before { content:"\201C"; position:absolute; top:6px; right:22px; font-size:5rem; line-height:1; color:var(--peach); font-family:Georgia,serif; }
.review p { position:relative; color:var(--ink); font-weight:500; }
.stars { color:var(--gold); letter-spacing:3px; margin-bottom:.5rem; font-size:1.05rem; }
.review .who { font-weight:800; margin-top:.7rem; color:var(--ink); }
.review .who small { display:block; color:var(--muted); font-weight:600; }

/* Photo strip / gallery */
.gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.gimg { width:100%; height:250px; object-fit:cover; border-radius:var(--r-sm); box-shadow:var(--sh-sm); transition:.3s ease; cursor:zoom-in; }
.gimg:hover { transform:scale(1.03) rotate(-.5deg); box-shadow:var(--sh); }

/* CTA band */
.cta-band { position:relative; overflow:hidden; background:linear-gradient(120deg,var(--teal-deep),var(--teal)); color:#fff; border-radius:var(--r-lg); padding:60px; text-align:center; box-shadow:var(--sh-lg); }
.cta-band::after { content:"🐾"; position:absolute; font-size:14rem; right:-1rem; bottom:-3rem; opacity:.08; }
.cta-band h2 { color:#fff; }
.cta-band p { color:rgba(255,255,255,.9); }

/* Contact */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.info-row { display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1.1rem; }
.info-row .ico { font-size:1.3rem; width:44px; height:44px; background:var(--mint); border-radius:12px; display:grid; place-items:center; flex:none; }
.map-embed { width:100%; height:340px; border:0; border-radius:var(--r); box-shadow:var(--sh); }
.field { margin-bottom:1.1rem; }
.field label { font-weight:700; display:block; margin-bottom:.35rem; font-size:.92rem; color:var(--ink); }
.field input, .field textarea, .field select { width:100%; padding:.85rem 1rem; border:1.5px solid var(--line); border-radius:12px; font-family:inherit; font-size:1rem; background:#fff; transition:.15s; }
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(14,154,167,.12); }
.field textarea { min-height:120px; resize:vertical; }
.contact-card { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:34px; box-shadow:var(--sh-sm); }

/* Page hero (inner pages) */
.page-hero { position:relative; background:linear-gradient(120deg,var(--teal-deep),var(--teal)); color:#fff; padding:76px 0 70px; text-align:center; overflow:hidden; }
.page-hero::after { content:"🐾"; position:absolute; font-size:12rem; right:2%; top:-2rem; opacity:.08; }
.page-hero .eyebrow { background:rgba(255,255,255,.16); color:#fff; }
.page-hero h1 { color:#fff; }
.page-hero p { color:rgba(255,255,255,.9); max-width:640px; margin:.4rem auto 0; }

.seo-intro { max-width:760px; }
.seo-intro h2 { margin-top:1.4rem; }

/* Footer */
.site-footer { background:var(--ink); color:#c5d2d6; padding:64px 0 28px; }
.foot-grid { display:grid; grid-template-columns:1.5fr 1fr 1.2fr; gap:36px; }
.site-footer h4 { color:#fff; margin-bottom:.7rem; }
.site-footer a { color:#c5d2d6; }
.site-footer a:hover { color:#fff; }
.foot-links { list-style:none; padding:0; margin:0; }
.foot-links li { margin-bottom:.55rem; }
.foot-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:38px; padding-top:20px; font-size:.85rem; color:#8ba0a6; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* Floating WhatsApp */
.wa-float { position:fixed; right:22px; bottom:22px; z-index:60; background:var(--wa); color:#fff; border-radius:50px; padding:.85rem 1.3rem; font-weight:800; box-shadow:0 10px 30px rgba(37,211,102,.5); display:flex; align-items:center; gap:.5rem; }
.wa-float::before { content:""; position:absolute; inset:0; border-radius:50px; box-shadow:0 0 0 0 rgba(37,211,102,.5); animation:pulse 2.2s infinite; }
.wa-float:hover { background:#1eb457; color:#fff; transform:translateY(-2px); }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.45);} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} }

/* Demo banner */
.demo-banner { background:var(--ink); color:#fff; text-align:center; font-size:.83rem; padding:.5rem 1rem; }
.demo-banner strong { color:var(--gold); }

/* Reveal on scroll — content is ALWAYS visible; animation only enhances */
.reveal { transition:.6s cubic-bezier(.2,.7,.2,1); }
.js .reveal { opacity:0; transform:translateY(22px); }
.js .reveal.in { opacity:1; transform:none; }

/* Dropdown submenu */
.has-sub { position:relative; }
.has-sub > a::after { content:"⌄"; margin-left:.3rem; font-size:.9em; opacity:.7; }
.submenu {
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(8px);
  background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh-lg);
  padding:10px; min-width:250px; list-style:none; margin:0;
  opacity:0; visibility:hidden; transition:.18s ease; z-index:60;
}
.submenu::before { content:""; position:absolute; top:-16px; left:0; right:0; height:16px; }
.has-sub:hover .submenu, .has-sub:focus-within .submenu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.submenu li { margin:0; }
.submenu a { display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; border-radius:10px; font-size:.95rem; font-weight:700; color:var(--ink); white-space:nowrap; }
.submenu a:hover { background:var(--mint); color:var(--teal-dark); }
.submenu a b { font-size:1.1rem; }

/* How it works — steps */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.step { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:32px 26px; text-align:center; box-shadow:var(--sh-sm); position:relative; }
.step-num { width:52px; height:52px; margin:0 auto 14px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--teal-dark)); color:#fff; display:grid; place-items:center; font-weight:800; font-size:1.3rem; box-shadow:0 8px 18px rgba(14,154,167,.3); }
.step h3 { margin-bottom:.3rem; }
.step p { color:var(--muted); margin:0; font-size:.97rem; }

/* Full-width banner */
.band { background:#fff; }
.band img { width:100%; height:auto; display:block; }
.band-wrap { text-align:center; }
.band-wrap h2 { margin-bottom:.2rem; }
.band-wrap p { color:var(--muted); margin-bottom:1.6rem; }

/* FAQ */
.faq { max-width:820px; margin:0 auto; }
.faq details { background:#fff; border:1px solid var(--line); border-radius:16px; padding:0 22px; margin-bottom:14px; box-shadow:var(--sh-sm); overflow:hidden; }
.faq summary { list-style:none; cursor:pointer; padding:20px 0; font-weight:800; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:1.5rem; color:var(--teal); font-weight:400; transition:.2s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { margin:0 0 20px; color:var(--body); }

/* Split feature band with image bg */
.spotlight { display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg); background:linear-gradient(135deg,var(--teal-deep),var(--teal)); }
.spotlight-media img { width:100%; height:100%; object-fit:cover; min-height:340px; }
.spotlight-body { padding:48px; color:#fff; align-self:center; }
.spotlight-body h2 { color:#fff; }
.spotlight-body p { color:rgba(255,255,255,.9); }
.spotlight-body .eyebrow { background:rgba(255,255,255,.16); color:#fff; }
@media (max-width:960px){ .spotlight, .steps { grid-template-columns:1fr; } .spotlight-body { padding:34px; } }
@media (max-width:620px){
  .submenu { position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:0; padding:.2rem 0 .2rem 1rem; min-width:0; }
  .has-sub > a::after { display:none; }
}

/* Responsive */
@media (max-width:960px){
  .hero-grid, .contact-grid { grid-template-columns:1fr; gap:32px; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
  .gallery { grid-template-columns:repeat(3,1fr); }
  .statbar { grid-template-columns:repeat(2,1fr); }
  .foot-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .section { padding:60px 0; }
  .nav-links { display:none; position:absolute; top:70px; left:0; right:0; flex-direction:column; align-items:flex-start; background:var(--cream); padding:18px 22px; border-bottom:1px solid var(--line); gap:1rem; box-shadow:var(--sh); }
  .nav-links.open { display:flex; }
  .nav-toggle { display:block; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns:1fr; }
  .gallery { grid-template-columns:repeat(2,1fr); }
  .gimg { height:180px; }
  .foot-grid { grid-template-columns:1fr; }
  .cta-band { padding:40px 24px; }
  .hero-inner { padding:80px 22px 76px; }
  .photo-img.tall, .hero-photo-img { height:320px; }
}

/* ============================ MOTION & ANIMATION ============================ */
.js .reveal { transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.from-left { transform:translateX(-32px); }
.js .reveal.from-right { transform:translateX(32px); }
.js .reveal.from-left.in, .js .reveal.from-right.in { transform:none; }
.js .reveal.pop { transform:scale(.94); }
.js .reveal.pop.in { transform:none; }

/* Hero slow Ken Burns zoom */
.hero-media img { animation:kenburns 24s ease-out both; }
@keyframes kenburns { from{transform:scale(1.06)} to{transform:scale(1.18)} }

/* Floating hero chips */
.hero-chips .chip { animation:floaty 4.5s ease-in-out infinite; }
.hero-chips .chip:nth-child(2){ animation-delay:.7s; }
.hero-chips .chip:nth-child(3){ animation-delay:1.4s; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* Animated nav underline (skip dropdown parent + buttons) */
.nav-links > li:not(.has-sub) > a:not(.btn) { position:relative; }
.nav-links > li:not(.has-sub) > a:not(.btn)::after {
  content:""; position:absolute; left:0; right:100%; bottom:-5px; height:2px;
  background:var(--teal); border-radius:2px; transition:right .28s ease;
}
.nav-links > li:not(.has-sub) > a:not(.btn):hover::after,
.nav-links > li:not(.has-sub) > a.active::after { right:0; }

/* Button shine sweep on hover */
.btn { position:relative; overflow:hidden; }
.btn::after {
  content:""; position:absolute; top:0; left:-125%; width:55%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg); transition:left .55s ease; pointer-events:none;
}
.btn:hover::after { left:150%; }

/* WhatsApp float bounces in */
.wa-float { animation:waIn .5s .9s both; }
@keyframes waIn { from{transform:translateY(90px);opacity:0} to{transform:none;opacity:1} }

/* Service card badge pop on hover */
.scard:hover .scard-badge { transform:scale(1.12) rotate(-6deg); }
.scard-badge { transition:transform .25s ease; }

/* Section headings subtle rise handled by .reveal; links arrow nudge */
.scard-body span, .card a, .seo-intro a { transition:.2s ease; }
.scard:hover .scard-body span { letter-spacing:.3px; }

/* Count-up numbers keep tabular width */
.stat b { font-variant-numeric:tabular-nums; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .js .reveal { opacity:1 !important; transform:none !important; }
  .hero-media img { animation:none !important; }
}