/* ============ Vetsss — pastel-green Corporate Memphis ============ */
:root{
  --ink:#1F4D38;
  --ink-soft:#33614C;
  --paper:#F2FAF3;
  --mint:#BFE8D2;
  --mint-deep:#8FD4AA;
  --mint-pale:#DFF3E4;
  --pink:#F4B8D1;
  --pink-pale:#FBE0EC;
  --lav:#CDBDF2;
  --lav-pale:#EAE3FA;
  --peach:#FFD9A3;
  --peach-pale:#FFEED6;
  --white:#FDFDF9;
  --shadow:6px 6px 0 var(--ink);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:'Nunito',system-ui,sans-serif;
  font-size:1.05rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
}
h1,h2,h3{font-family:'Baloo 2',cursive;line-height:1.12;margin:0 0 .5em}
img{max-width:100%;display:block}
a{color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}

/* ---------- preview banner ---------- */
.preview-banner{
  background:var(--ink);color:var(--mint-pale);
  text-align:center;padding:.6rem 1rem;font-weight:800;font-size:.95rem;
  position:relative;z-index:50;
}

/* ---------- fixed parallax confetti ---------- */
.memphis-sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.memphis-sky .shape{position:absolute;opacity:.85}
.s1{width:64px;top:12%;left:4%}
.s2{width:90px;top:38%;right:5%}
.s3{width:46px;top:62%;left:7%;transform:rotate(-14deg)}
.s4{width:50px;top:80%;right:9%;transform:rotate(20deg)}
.s5{width:34px;top:24%;right:14%}
.s6{width:80px;top:88%;left:14%}
.s7{width:52px;top:50%;left:46%;opacity:.4}
@media (max-width:720px){.s7,.s5{display:none}}

main, .site-header, .site-footer{position:relative;z-index:1}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem clamp(1rem,4vw,3rem);
  background:var(--paper);
  border-bottom:3px solid var(--ink);
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand-logo{height:42px;width:auto}
.brand-mark{display:inline-flex;width:42px;height:42px}
.brand-mark svg{width:100%;height:100%}
.brand-name{font-family:'Baloo 2',cursive;font-weight:800;font-size:1.5rem;letter-spacing:.5px}
.nav-list{display:flex;gap:.4rem;list-style:none;margin:0;padding:0;align-items:center;flex-wrap:wrap}
.nav-list a{
  text-decoration:none;font-weight:800;padding:.45rem .9rem;border-radius:999px;
  border:3px solid transparent;
}
.nav-list a:hover{border-color:var(--ink);background:var(--mint-pale)}
.nav-cta{background:var(--pink);border:3px solid var(--ink) !important;box-shadow:3px 3px 0 var(--ink)}
.nav-cta:hover{background:var(--pink-pale)}

/* ---------- buttons ---------- */
.btn-primary,.btn-ghost,.btn-secondary{
  display:inline-block;font-family:'Baloo 2',cursive;font-weight:700;font-size:1.05rem;
  padding:.65rem 1.4rem;border-radius:999px;text-decoration:none;cursor:pointer;
  border:3px solid var(--ink);transition:transform .12s ease, box-shadow .12s ease;
}
.btn-primary{background:var(--mint-deep);color:var(--ink);box-shadow:var(--shadow)}
.btn-primary:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn-ghost{background:var(--white);color:var(--ink)}
.btn-ghost:hover{background:var(--lav-pale)}
.btn-secondary{background:var(--pink);color:var(--ink);box-shadow:var(--shadow)}
.btn-secondary:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}

/* ---------- hero ---------- */
.hero{
  display:grid;gap:2rem;align-items:center;
  grid-template-columns:1fr;
  padding:clamp(2.5rem,7vw,5.5rem) clamp(1rem,5vw,4rem) clamp(2rem,5vw,4rem);
  max-width:1180px;margin:0 auto;
}
@media (min-width:860px){.hero{grid-template-columns:1.1fr .9fr}}
.eyebrow{
  display:inline-block;font-weight:800;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--lav-pale);border:2px solid var(--ink);border-radius:999px;
  padding:.3rem .9rem;margin:0 0 1rem;
}
.hero h1{font-size:clamp(2.3rem,5.5vw,4rem);font-weight:800}
.squiggle-under{
  background-image:linear-gradient(transparent 72%, var(--pink) 72%, var(--pink) 96%, transparent 96%);
}
.lede{font-size:1.15rem;max-width:34rem;color:var(--ink-soft)}
.hero-actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.4rem}
.hero-art svg{width:100%;height:auto;max-width:460px;margin:0 auto;display:block}

/* ---------- highlights ticker ---------- */
.ticker{
  background:var(--ink);color:var(--mint-pale);overflow:hidden;
  border-block:3px solid var(--ink);
}
.ticker-track{
  display:flex;gap:2.5rem;list-style:none;margin:0;padding:.8rem 1.5rem;
  flex-wrap:wrap;justify-content:center;font-weight:800;font-size:1rem;
}
.ticker-track li{display:flex;align-items:center;gap:.6rem;white-space:nowrap}
.tick-dot{color:var(--pink)}

/* ---------- care section ---------- */
.care{max-width:1180px;margin:0 auto;padding:clamp(3rem,7vw,5rem) clamp(1rem,5vw,4rem)}
.h-chip{
  display:inline-block;font-size:clamp(1.6rem,3.4vw,2.3rem);
  background:var(--mint);border:3px solid var(--ink);border-radius:18px;
  padding:.25em .7em;box-shadow:var(--shadow);transform:rotate(-1deg);
}
.h-chip-pink{background:var(--pink-pale);transform:rotate(1deg)}
.h-chip-lav{background:var(--lav-pale)}
.section-lede{max-width:42rem;font-size:1.1rem;color:var(--ink-soft);margin:1.2rem 0 2.2rem}
.care-grid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.care-card{
  border:3px solid var(--ink);border-radius:var(--radius);padding:1.4rem;
  box-shadow:var(--shadow);background:var(--white);
  transition:transform .15s ease;
}
.care-card:hover{transform:translateY(-4px) rotate(-.5deg)}
.c-mint{background:var(--mint-pale)}
.c-pink{background:var(--pink-pale)}
.c-lav{background:var(--lav-pale)}
.c-peach{background:var(--peach-pale)}
.care-icon{width:64px;height:64px;margin-bottom:.8rem}
.care-icon svg{width:100%;height:100%}
.care-card h3{font-size:1.25rem}
.care-card p{margin:0;font-size:.98rem;color:var(--ink-soft)}

/* ---------- parallax band (fixed-attachment) ---------- */
.parallax-band{
  background-image:
    radial-gradient(circle at 20% 30%, var(--pink) 0 14px, transparent 15px),
    radial-gradient(circle at 70% 60%, var(--lav) 0 11px, transparent 12px),
    radial-gradient(circle at 45% 80%, var(--peach) 0 9px, transparent 10px),
    radial-gradient(circle at 88% 22%, var(--mint-deep) 0 13px, transparent 14px),
    linear-gradient(135deg,#A9DFC0,#CFEEDD);
  background-attachment:fixed;
  background-size:340px 340px,300px 300px,260px 260px,380px 380px,cover;
  border-block:3px solid var(--ink);
  padding:3.2rem 1rem;overflow:hidden;
}
@media (prefers-reduced-motion: reduce){.parallax-band{background-attachment:scroll}}
.band-words{
  margin:0;text-align:center;font-family:'Baloo 2',cursive;font-weight:800;
  font-size:clamp(1.2rem,3vw,1.9rem);color:var(--ink);opacity:.75;letter-spacing:.06em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- shop ---------- */
.shop{max-width:1180px;margin:0 auto;padding:clamp(3rem,7vw,5rem) clamp(1rem,5vw,4rem)}
.product-grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card.product{
  display:flex;flex-direction:column;background:var(--white);
  border:3px solid var(--ink);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);transition:transform .15s ease;
}
.card.product:hover{transform:translateY(-5px)}
.product-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:3px solid var(--ink)}
.product-swatch{
  width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  border-bottom:3px solid var(--ink);
  background:
    radial-gradient(circle at 15% 20%, rgba(253,253,249,.55) 0 10px, transparent 11px),
    radial-gradient(circle at 80% 70%, rgba(253,253,249,.55) 0 14px, transparent 15px),
    linear-gradient(140deg,var(--mint),var(--mint-deep));
}
.product-swatch svg{width:38%;max-width:120px}
.sw-pink{background:radial-gradient(circle at 15% 20%, rgba(253,253,249,.55) 0 10px, transparent 11px),radial-gradient(circle at 80% 70%, rgba(253,253,249,.55) 0 14px, transparent 15px),linear-gradient(140deg,var(--pink-pale),var(--pink))}
.sw-lav{background:radial-gradient(circle at 15% 20%, rgba(253,253,249,.55) 0 10px, transparent 11px),radial-gradient(circle at 80% 70%, rgba(253,253,249,.55) 0 14px, transparent 15px),linear-gradient(140deg,var(--lav-pale),var(--lav))}
.sw-peach{background:radial-gradient(circle at 15% 20%, rgba(253,253,249,.55) 0 10px, transparent 11px),radial-gradient(circle at 80% 70%, rgba(253,253,249,.55) 0 14px, transparent 15px),linear-gradient(140deg,var(--peach-pale),var(--peach))}
.product-body{display:flex;flex-direction:column;gap:.35rem;padding:1.2rem 1.3rem 1.4rem;flex:1}
.product-brand{
  margin:0;font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);
}
.product-title{font-size:1.25rem;margin:0}
.product-desc{margin:0;font-size:.95rem;color:var(--ink-soft);flex:1}
.product-meta{margin:.2rem 0 0;font-size:.8rem;font-weight:800;text-transform:capitalize;color:var(--ink-soft)}
.product-price{
  font-family:'Baloo 2',cursive;font-weight:800;font-size:1.4rem;margin:.3rem 0 .6rem;
  display:inline-block;
  background:var(--peach-pale);border:2px solid var(--ink);border-radius:12px;
  padding:.1em .55em;align-self:flex-start;
}
.product-link{align-self:flex-start;font-size:.95rem;padding:.5rem 1.1rem}

/* ---------- contact ---------- */
.contact{padding:clamp(3rem,7vw,5rem) clamp(1rem,5vw,4rem);background:var(--mint-pale);border-block:3px solid var(--ink)}
.contact-card{
  max-width:760px;margin:0 auto;background:var(--white);
  border:3px solid var(--ink);border-radius:28px;box-shadow:8px 8px 0 var(--ink);
  padding:clamp(1.6rem,4vw,3rem);
}
.contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem;font-weight:800;font-size:1.1rem}
.contact-list li{display:flex;align-items:center;gap:.8rem}
.contact-list a{text-decoration-thickness:3px;text-decoration-color:var(--pink)}
.c-ic{display:inline-flex;width:38px;height:38px;flex:none;align-items:center;justify-content:center;background:var(--mint);border:2px solid var(--ink);border-radius:12px;padding:6px}
.c-ic svg{width:100%;height:100%}
.contact-note{
  margin:1.6rem 0 0;font-style:italic;color:var(--ink-soft);
  border-left:5px solid var(--pink);padding-left:.9rem;
}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--mint-pale);text-align:center;padding:2.2rem 1rem 2.6rem}
.site-footer p{margin:.3rem 0;font-weight:600}
.foot-squiggle{width:130px;margin:0 auto .8rem;display:block}
.foot-domain{color:var(--pink)}
.foot-tag{font-size:.9rem;opacity:.85}