/* ============================================================
   PETSPOILER — shared design system
   Palette keyed to brand logo (teal dog/wordmark, coral heart,
   cream ground). Mobile-first, premium, warm.
   ============================================================ */

:root{
  --bg:        #FBF7F0;  /* warm cream page background */
  --bg-2:      #F4ECDF;  /* slightly deeper cream band */
  --surface:   #FFFFFF;  /* cards, panels */
  --text:      #1F393E;  /* deep teal-charcoal body text */
  --muted:     #5E7479;  /* secondary text, captions */
  --primary:   #2E9598;  /* teal — primary actions, brand spine */
  --primary-d: #0E6E72;  /* deep teal — headings, hovers, footer */
  --primary-soft:#E3F1F0; /* teal wash for soft fills */
  --accent:    #F2876B;  /* warm coral — the single loud CTA */
  --accent-d:  #D8674B;  /* coral pressed/hover (darker for text) */
  --accent-soft:#FBE3DB; /* coral wash */
  --border:    #E7DFD2;  /* warm hairline */
  --border-2:  #EFE8DC;
  --focus:     #F2876B;

  --shadow-sm: 0 1px 2px rgba(31,57,62,.05), 0 2px 8px rgba(31,57,62,.05);
  --shadow-md: 0 6px 24px rgba(31,57,62,.08), 0 2px 8px rgba(31,57,62,.05);
  --shadow-lg: 0 20px 50px rgba(31,57,62,.13), 0 6px 18px rgba(31,57,62,.07);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 56px);

  --font-head: "Poppins", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:var(--primary-d); text-decoration:none; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:6px; }

h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--primary-d);
  line-height:1.1;
  margin:0 0 .4em;
  letter-spacing:-.01em;
  font-weight:700;
  text-wrap:balance;
}
h1{ font-size:clamp(2.3rem, 6vw, 4rem); }
h2{ font-size:clamp(1.9rem, 4.2vw, 3rem); }
h3{ font-size:clamp(1.25rem, 2.4vw, 1.6rem); }
p{ margin:0 0 1rem; text-wrap:pretty; }
.lead{ font-size:clamp(1.08rem,1.6vw,1.3rem); color:var(--muted); line-height:1.6; }

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(56px, 9vw, 120px); }
.section-sm{ padding-block:clamp(40px, 6vw, 72px); }
.eyebrow{
  font-family:var(--font-head);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary);
  display:inline-flex; align-items:center; gap:.55em;
  margin-bottom:.9rem;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); border-radius:2px; }
.center{ text-align:center; }
.center .eyebrow{ justify-content:center; }
.measure{ max-width:62ch; }
.measure-center{ max-width:60ch; margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--primary);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-head); font-weight:600; font-size:1rem;
  line-height:1; min-height:52px; padding:0 1.5em;
  border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s;
  white-space:nowrap; text-align:center;
}
.btn svg{ width:1.15em; height:1.15em; flex:none; }
.btn--accent{ background:var(--accent); color:#fff; box-shadow:0 8px 20px rgba(242,135,107,.35); }
.btn--accent:hover{ background:var(--accent-d); transform:translateY(-2px); box-shadow:0 12px 26px rgba(242,135,107,.42); }
.btn--primary{ background:var(--primary); color:#fff; box-shadow:0 8px 20px rgba(46,149,152,.28); }
.btn--primary:hover{ background:var(--primary-d); transform:translateY(-2px); }
.btn--ghost{ background:var(--surface); color:var(--primary-d); border-color:var(--border); }
.btn--ghost:hover{ border-color:var(--primary); color:var(--primary-d); transform:translateY(-2px); }
.btn--wa{ background:#25D366; color:#063d1d; box-shadow:0 8px 20px rgba(37,211,102,.28); }
.btn--wa:hover{ background:#1eb958; transform:translateY(-2px); }
.btn--lg{ min-height:60px; font-size:1.08rem; padding:0 1.9em; }
.btn--block{ width:100%; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(251,247,240,.82);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--border);
}
.site-header__bar{
  display:flex; align-items:center; gap:1.5rem;
  height:132px;
  max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter);
}
.brand{ display:flex; align-items:center; flex:none; }
.brand img{ height:116px; width:auto; }
.nav{ display:flex; align-items:center; gap:.35rem; margin-left:auto; }
.nav a{
  font-family:var(--font-head); font-weight:500; font-size:.97rem;
  color:var(--text); padding:.55em .85em; border-radius:999px;
  transition:background .15s, color .15s;
}
.nav a:hover{ background:var(--primary-soft); color:var(--primary-d); }
.nav a.active{ color:var(--primary-d); font-weight:600; }
.header-cta{ display:flex; align-items:center; gap:.6rem; margin-left:.5rem; }
.header-cta .btn{ min-height:46px; }
.nav-toggle{ display:none; }

@media (max-width:980px){
  .site-header__bar{ height:96px; }
  .brand img{ height:78px; }
  .nav, .header-cta{ display:none; }
  .nav-toggle{
    display:inline-flex; margin-left:auto; align-items:center; justify-content:center;
    width:48px; height:48px; border-radius:14px; border:1px solid var(--border);
    background:var(--surface); cursor:pointer; color:var(--primary-d);
  }
  .nav-toggle svg{ width:24px; height:24px; }
}

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:100; display:none;
}
.drawer[data-open="true"]{ display:block; }
.drawer__scrim{ position:absolute; inset:0; background:rgba(15,40,42,.45); }
.drawer__panel{
  position:absolute; top:0; right:0; height:100%; width:min(86vw, 340px);
  background:var(--surface); padding:24px; box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; gap:.3rem;
  transform:translateX(100%); transition:transform .28s ease;
  overflow-y:auto;
}
.drawer[data-open="true"] .drawer__panel{ transform:translateX(0); }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.drawer__head img{ height:68px; }
.drawer__close{ width:44px;height:44px;border-radius:12px;border:1px solid var(--border);background:var(--bg);cursor:pointer;color:var(--primary-d);font-size:1.4rem;line-height:1; }
.drawer a.dlink{
  font-family:var(--font-head); font-weight:500; font-size:1.1rem;
  color:var(--text); padding:.85em .6em; border-bottom:1px solid var(--border-2);
}
.drawer a.dlink:hover{ color:var(--primary-d); }
.drawer__cta{ display:grid; gap:.6rem; margin-top:1.2rem; }

/* ---------- cards & grids ---------- */
.grid{ display:grid; gap:clamp(18px,2.4vw,28px); }
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }

/* pill / chip */
.chip{
  display:inline-flex; align-items:center; gap:.5em;
  background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:.5em 1em; font-size:.92rem; font-weight:600;
  font-family:var(--font-head); color:var(--primary-d);
}
.chip svg{ width:1.1em; height:1.1em; color:var(--primary); }

/* tick list */
.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.ticks li{ display:flex; gap:.7rem; align-items:flex-start; }
.ticks li svg{ flex:none; width:22px; height:22px; color:var(--primary); margin-top:2px; }

/* ---------- blob art helpers ---------- */
.blob{ position:absolute; border-radius:50%; filter:blur(2px); z-index:0; }
.media-blob{ position:relative; }
.media-blob::before{
  content:""; position:absolute; inset:-6% -4% -10% -4%;
  background:var(--primary-soft); border-radius:46% 54% 58% 42% / 52% 44% 56% 48%;
  z-index:0;
}
.media-blob img{ position:relative; z-index:1; }

/* ---------- footer ---------- */
.site-footer{ background:var(--primary-d); color:#D7E8E8; padding-block:clamp(48px,7vw,80px) 0; }
.site-footer a{ color:#D7E8E8; }
.site-footer a:hover{ color:#fff; }
.footer-grid{ display:grid; gap:40px; grid-template-columns:1.4fr 1fr 1fr 1.2fr; }
.footer-brand img{ height:150px; width:auto; background:#fff; padding:16px; border-radius:24px; }
.footer-col h4{ color:#fff; font-size:1rem; letter-spacing:.04em; text-transform:uppercase; margin-bottom:1rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.footer-col a{ font-size:.97rem; }
.footer-note{ font-size:.95rem; color:#9FBcbc; line-height:1.6; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14); margin-top:48px;
  padding-block:24px; display:flex; flex-wrap:wrap; gap:12px 28px;
  align-items:center; justify-content:space-between; font-size:.85rem; color:#9FBCBC;
}
.social{ display:flex; gap:.6rem; }
.social a{ width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:background .15s;}
.social a:hover{ background:rgba(255,255,255,.22); }
.social svg{ width:20px;height:20px; }

@media (max-width:840px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ---------- sticky mobile action bar ---------- */
.mobile-bar{ display:none; }
@media (max-width:980px){
  .mobile-bar{
    display:grid; grid-template-columns:repeat(3,1fr);
    position:fixed; left:0; right:0; bottom:0; z-index:80;
    background:var(--surface); border-top:1px solid var(--border);
    box-shadow:0 -6px 24px rgba(31,57,62,.1);
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    gap:8px;
  }
  .mobile-bar a{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; min-height:54px; border-radius:14px; font-family:var(--font-head);
    font-weight:600; font-size:.78rem; line-height:1; text-align:center;
  }
  .mobile-bar a svg{ width:21px; height:21px; }
  .mobile-bar .mb-book{ background:var(--accent); color:#fff; }
  .mobile-bar .mb-wa{ background:#25D366; color:#063d1d; }
  .mobile-bar .mb-call{ background:var(--primary-soft); color:var(--primary-d); }
  body{ padding-bottom:80px; }
}

/* ---------- misc reveal (transform-only: never hides content) ---------- */
.reveal{ transform:translateY(16px); }
.revealed{ transform:none; }
@media (prefers-reduced-motion:no-preference){
  .reveal{ transition:transform .7s cubic-bezier(.2,.7,.2,1); }
}
@media (prefers-reduced-motion:reduce){
  .reveal{ transform:none; transition:none; }
}

/* labelled placeholder for missing photography */
.ph{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:
    repeating-linear-gradient(135deg, var(--bg-2) 0 14px, #efe6d6 14px 28px);
  border:1.5px dashed var(--border);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--muted); min-height:200px;
}
.ph span{
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  font-size:.8rem; letter-spacing:.04em; background:rgba(255,255,255,.8);
  padding:.5em .9em; border-radius:8px; max-width:80%;
}

/* ---------- shared cross-page components ---------- */
.cat-chips{ display:flex; flex-wrap:wrap; gap:.6rem; }

.why-ic{ width:54px;height:54px;border-radius:16px;background:var(--accent-soft);color:var(--accent-d);display:flex;align-items:center;justify-content:center;margin-bottom:.9rem; }
.why-ic svg{ width:26px;height:26px; }

.nap{ display:grid; gap:.9rem; }
.nap-row{ display:flex; gap:.8rem; align-items:flex-start; font-size:.98rem; }
.nap-row svg{ width:20px;height:20px;color:var(--primary);flex:none;margin-top:3px; }

/* info note band */
.note-band{ background:var(--primary-soft); border-radius:var(--r-md); padding:clamp(18px,2.4vw,26px) clamp(20px,3vw,32px); display:flex; gap:1rem; align-items:flex-start; }
.note-band > svg{ width:26px;height:26px;color:var(--primary-d);flex:none;margin-top:2px; }
.note-band p{ margin:0; color:var(--primary-d); font-weight:600; }
.note-band p > span{ display:block; font-weight:400; color:var(--text); font-size:.97rem; margin-top:.2rem; }

/* final CTA band */
.cta-band{ position:relative; overflow:hidden; }
.cta-inner{
  background:linear-gradient(150deg, var(--accent), var(--accent-d));
  border-radius:var(--r-xl); padding:clamp(36px,6vw,72px) clamp(28px,5vw,64px);
  text-align:center; color:#fff; position:relative; overflow:hidden; box-shadow:var(--shadow-lg);
}
.cta-inner h2{ color:#fff; }
.cta-inner p{ color:rgba(255,255,255,.92); max-width:50ch; margin-inline:auto; }
.cta-inner .btn--ghost{ background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.5); }
.cta-inner .btn--ghost:hover{ background:rgba(255,255,255,.26); }
.cta-paw{ position:absolute; opacity:.12; pointer-events:none; }