/* ====== Theme ====== */
:root{
  --brand:#0f8972;
  --brand-2:#0b6f5d;
  --ink:#17222a;
  --muted:#6b7a86;
  --bg:#f6fbfa;
  --card:#ffffff;
  --ring: rgba(15,137,114,.25);
  --radius: 16px;
  --shadow: 0 10px 25px rgba(17,24,39,0.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
  color:var(--ink); background:var(--bg); line-height:1.6;
}
a{color:var(--brand); text-decoration:none}
a:focus-visible, button:focus-visible{outline:3px solid var(--ring); outline-offset:2px; border-radius:10px}
.container{max-width:1100px; margin-inline:auto; padding:0 20px}

/* ====== Header / Hero ====== */
header{
  position:relative; overflow:hidden; isolation:isolate;
  background: radial-gradient(1200px 400px at 10% 0%, #11a88e 0%, #0f8972 55%, #0b6f5d 100%);
  color:white;
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; font-family:Nunito, Inter; letter-spacing:.2px}
.brand__logo{width:40px; height:40px; border-radius:11px; background:white; display:grid; place-items:center; box-shadow: var(--shadow)}
.logo-emoji{font-size:22px; line-height:1}
.nav a{color:white; opacity:.95}

.hero{display:grid; grid-template-columns: 1.15fr .85fr; gap:42px; align-items:center; padding:44px 0 68px}
.hero h1{font-family:Nunito, Inter; font-size:clamp(32px, 5vw, 48px); line-height:1.1; margin:0 0 12px}
.hero p{font-size:clamp(16px, 2.2vw, 18px); opacity:.95; margin:0 0 22px}

.cta{display:flex; gap:14px; flex-wrap:wrap}
.btn{appearance:none; border:0; cursor:pointer; font-weight:700; border-radius:999px; padding:14px 18px; transition:.2s transform ease, .25s box-shadow ease; box-shadow:0 6px 20px rgba(0,0,0,.12)}
.btn--primary{background:white; color:var(--brand-2)}
.btn--ghost{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.6)}
.btn:hover{transform:translateY(-1px)}


/* Center the single hero illustration */
.hero-art{
  position: relative;
  display: grid;
  place-items: center;             /* centers horizontally & vertically */
  min-height: 340px;
  padding-bottom: 84px;            /* space for the bubble */
}

/* Scales nicely desktop → mobile */
.hero-illustration{
  width: min(72vw, 560px);         /* responsive width cap */
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.18));
  z-index: 2;                      /* above the bubble */
}

/* Center the bubble under the art */
.bubble{
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);     /* centers it */
  background: rgba(255,255,255,.9);
  color: var(--ink);
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 600;
  box-shadow: var(--shadow);
  z-index: 1;
}


/* ====== Sections ====== */
section{margin:36px 0}
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow)}
.services{padding:28px}
.services h2{font-size:28px; margin:0 0 14px}
.grid{display:grid; gap:16px}
@media (min-width: 720px){ .grid--3{grid-template-columns: repeat(3, 1fr);} }
.service{padding:18px; border:1px solid #e7efed; border-radius:14px}
.service .icon{font-size:28px; display:inline-block; margin-bottom:6px}
.service h3{margin:6px 0 6px; font-size:18px}
.muted{color:var(--muted)}


/* Shared framing for illustrations */
.inline-art,
.contact-art {
  margin: 6px 0 14px;
}
.inline-art img,
.contact-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;              /* professional, friendly */
  border: 1px solid #e7efed;        /* subtle frame */
  box-shadow: var(--shadow);        /* soft depth */
  background: #fff;                 /* looks good even if png is transparent */
}

/* Cats block sits centered in Services */
.inline-art {
  max-width: 560px;
  margin-inline: auto;              /* center */
}





/* Pricing */
.pricing{margin-top:10px}
.tier{padding:18px; border:1px solid #e7efed; border-radius:14px; background:#fff}
.tier h4{margin:2px 0 4px; font-size:18px}
.price{font-weight:800; font-size:22px; margin:6px 0 6px}
.price span{font-size:28px}
.addon{color:var(--muted); margin:-2px 0 8px}
.fine{margin:8px 0 0; padding-left:18px; color:var(--muted)}
.fine li{margin:4px 0}
.notes{margin-top:12px}

/* Areas */
.areas{padding:24px}
.pillrow{display:flex; flex-wrap:wrap; gap:10px}
.pill{background:#e8f6f3; border:1px solid #cdebe6; color:#0b5e4e; padding:8px 12px; border-radius:999px; font-weight:600}

/* Contact */
.contact{padding:26px; display:grid; gap:12px}
.ways{display:flex; flex-wrap:wrap; gap:12px}
.ways a{display:inline-flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; border:1px solid #e5ecea; background:#fff; font-weight:700}

/* Make the Contact section a 2-column grid with art on the right */
.contact{
  padding: 26px;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 320px; /* text | art */
  align-items: start;
}
.contact-art{
  grid-column: 2;
  grid-row: 1 / span 3;             /* top-right, spanning content */
}
.contact-art img{
  max-width: 320px;
}




.pet-panel {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 2rem 0;
  flex-wrap: wrap;
}

.pet-card {
  background: white;
  border-radius: 1rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  max-width: 300px;
  flex: 1 1 300px;
}

.pet-card img {
  display: block;
  width: 100%;
  height: auto;
}





/* Footer */
footer{padding:24px 0 40px; color:#5e6b75}
.foot{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}

/* ====== Responsiveness ====== */

@media (max-width: 860px){
  .hero-art{ min-height: 300px; padding-bottom: 78px; }
  .hero-illustration{ width: min(88vw, 520px); }
  .container {
    padding-left: 16px;
    padding-right:16px;
  }
  .contact{
    grid-template-columns: 1fr;     /* single column */
  }
  .contact-art{
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
    margin-top: 8px;
  }
  .contact-art img{
    max-width: min(88vw, 420px);
  }
}




/* ===== Mobile hero layout (≤768px) ===== */
@media (max-width: 768px){

  /* One column, everything centered */
  .hero{
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center;
    justify-items: center;
    padding: 28px 0 56px;               /* room for bubble under art */
  }

  .hero h1{
    font-size: clamp(26px, 7vw, 34px);
    line-height: 1.15;
    margin: 0;
    max-width: 20ch;                    /* keeps lines readable */
  }
  .hero p{
    font-size: 16px;
    margin: 6px 0 4px;
    max-width: 38ch;
  }
  .cta{ justify-content: center; }

  /* Art centered with bubble under it */
  .hero-art{
    position: relative;
    display: grid;
    place-items: center;
    min-height: 260px;
    width: 100%;
    padding-bottom: 72px;               /* space for bubble */
  }

  /* If you’re using the single illustration */
  .hero-illustration{
    width: min(82vw, 440px);
    height: auto;
    filter: drop-shadow(0 14px 30px rgba(0,0,0,.18));
    z-index: 2;
  }

  /* Bubble centered below the art */
  .bubble{
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    padding: 10px 14px;
    font-size: 14px;
    z-index: 1;
  }

  /* Container breathing room on small screens */
  .container{ padding-left:16px; padding-right:16px; }
}


@media (max-width: 480px){
  .hero-art{ min-height: 260px; padding-bottom: 72px; }
  .hero-illustration{ width: min(92vw, 460px); }
  .bubble{ bottom: 16px; }
}