/* ============================================================
   Wag & Wash Grooming — claymorphism
   Tokens sourced from ui-ux-pro-max design-system search:
   style: Claymorphism (soft 3D, chunky, double shadows, 16-24px radii)
   palette: warm orange pastel + trust blue accent
   type: Nunito (display) / DM Sans (body) + Caveat (handwritten accent)
   ============================================================ */

:root {
  /* -- color: committed warm peach clay -- */
  --clay-bg:          #FBDDC2;   /* page surface — committed peach, not neutral cream */
  --clay-bg-deep:     #F8CBA4;   /* deeper band for framing sections */
  --clay-card:        #FFF6EC;   /* raised clay card face */
  --clay-card-soft:   #FFEEDD;   /* pressed / secondary card face */
  --ink:              #4A2410;   /* primary text — deep rust-brown, AA on all surfaces */
  --ink-soft:         #6E3D1E;   /* secondary text */
  --primary:          #E8620E;   /* brand orange (buttons use darker mix for contrast) */
  --primary-deep:     #B84A05;   /* CTA surface, 4.6:1 with white */
  --primary-pastel:   #FFC98F;   /* puffy pastel button face */
  --accent-blue:      #1D4ED8;   /* trust blue, links + focus */
  --mint:             #C9EEDC;
  --sky:              #C7E5F8;
  --butter:           #FFE9A8;
  --pink:             #FFD3E0;
  --white:            #FFFFFF;

  /* -- clay shadow recipe: soft outer drop + inner top light + inner bottom shade -- */
  --clay-shadow:
      0 10px 24px rgba(154, 82, 30, 0.18),
      inset 0 6px 12px rgba(255, 255, 255, 0.85),
      inset 0 -8px 14px rgba(184, 106, 44, 0.14);
  --clay-shadow-small:
      0 6px 14px rgba(154, 82, 30, 0.16),
      inset 0 4px 8px rgba(255, 255, 255, 0.8),
      inset 0 -5px 9px rgba(184, 106, 44, 0.12);
  --clay-shadow-pressed:
      0 2px 6px rgba(154, 82, 30, 0.14),
      inset 0 4px 10px rgba(184, 106, 44, 0.16),
      inset 0 -3px 6px rgba(255, 255, 255, 0.6);

  /* -- shape -- */
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --border-clay: 3px solid rgba(255, 255, 255, 0.65);

  /* -- type -- */
  --font-display: "Nunito", "Trebuchet MS", sans-serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;
  --font-hand: "Caveat", "Segoe Script", cursive;

  /* -- spacing scale (4pt) -- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px;

  --ease-clay: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint-ish */
}

/* ============ reset & base ============ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--clay-bg);
  /* subtle clay speckle */
  background-image: radial-gradient(rgba(184, 106, 44, 0.07) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.12;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

p { margin: 0 0 var(--s-4); text-wrap: pretty; }

h1 { font-size: clamp(2.4rem, 5.5vw + 1rem, 4.25rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.7rem, 2.6vw + 0.9rem, 2.6rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.15rem, 0.9vw + 1rem, 1.45rem); font-weight: 800; }

a { color: var(--accent-blue); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }

:focus-visible {
  outline: 3px solid var(--accent-blue);
  outline-offset: 3px;
  border-radius: 6px;
}

img, svg { max-width: 100%; display: block; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s-4); top: -60px;
  background: var(--ink); color: var(--white);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
  z-index: 100; transition: top 200ms var(--ease-clay);
}
.skip-link:focus { top: var(--s-4); }

/* ============ shared clay surfaces ============ */
.clay {
  background: var(--clay-card);
  border: var(--border-clay);
  border-radius: var(--r-lg);
  box-shadow: var(--clay-shadow);
}

.clay-deep {
  background: var(--clay-card);
  border: var(--border-clay);
  border-radius: var(--r-lg);
  box-shadow: var(--clay-shadow);
}

/* ============ buttons ============ */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  padding: 14px 28px;
  min-height: 44px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.55);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform 200ms var(--ease-clay), box-shadow 200ms var(--ease-clay);
}
.btn:hover  { transform: translateY(-3px) scale(1.035); }
.btn:active { transform: translateY(1px) scale(0.93); box-shadow: var(--clay-shadow-pressed); transition-duration: 90ms; }

.btn-primary {
  background: var(--primary-deep);
  color: var(--white);
  box-shadow:
      0 8px 18px rgba(184, 74, 5, 0.35),
      inset 0 4px 8px rgba(255, 255, 255, 0.28),
      inset 0 -6px 10px rgba(74, 26, 2, 0.3);
}
.btn-primary:hover {
  box-shadow:
      0 12px 24px rgba(184, 74, 5, 0.4),
      inset 0 4px 8px rgba(255, 255, 255, 0.3),
      inset 0 -6px 10px rgba(74, 26, 2, 0.3);
}

.btn-soft {
  background: var(--primary-pastel);
  color: var(--ink);
  box-shadow: var(--clay-shadow-small);
}

.btn-small { font-size: 0.95rem; padding: 11px 22px; }
.btn-wide  { width: 100%; font-size: 1.15rem; padding: 16px 28px; }

/* ============ header ============ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 221, 194, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid rgba(255, 255, 255, 0.6);
}

.header-inner {
  max-width: 1120px; margin: 0 auto;
  padding: var(--s-3) var(--s-6);
  display: flex; align-items: center; gap: var(--s-6);
}

.brand {
  display: flex; align-items: center; gap: var(--s-3);
  text-decoration: none; color: var(--ink);
}
.brand-mark {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  background: var(--sky);
  border: var(--border-clay);
  border-radius: 18px;
  box-shadow: var(--clay-shadow-small);
}
.brand-name {
  font-family: var(--font-display); font-weight: 900;
  font-size: 1.35rem; letter-spacing: -0.01em;
}
.brand-name em { font-style: normal; color: var(--primary); }

.site-nav { margin-left: auto; }
.site-nav ul {
  display: flex; gap: var(--s-6);
  list-style: none; margin: 0; padding: 0;
}
.site-nav a {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1rem; color: var(--ink); text-decoration: none;
  padding: var(--s-2) var(--s-1); border-radius: var(--r-sm);
}
.site-nav a:hover { color: var(--primary-deep); }

.btn-header { white-space: nowrap; }

.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px;
  background: var(--clay-card);
  border: var(--border-clay); border-radius: var(--r-sm);
  box-shadow: var(--clay-shadow-small);
  cursor: pointer;
  padding: 0 12px;
}
.nav-toggle-bar {
  height: 3px; border-radius: 2px; background: var(--ink);
  transition: transform 200ms var(--ease-clay), opacity 200ms var(--ease-clay);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============ hero ============ */
.hero { position: relative; overflow: hidden; }

.hero-inner {
  max-width: 1120px; margin: 0 auto;
  padding: var(--s-16) var(--s-6) var(--s-24);
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: var(--s-12); align-items: center;
  position: relative; z-index: 1;
}

.hero-hand {
  font-family: var(--font-hand); font-weight: 700;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
  color: var(--primary-deep);
  margin-bottom: var(--s-2);
  transform: rotate(-2deg);
}

.hero-sub {
  font-size: 1.125rem; color: var(--ink-soft);
  max-width: 52ch; margin-bottom: var(--s-8);
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-4); }

.hero-phone { font-size: 1rem; color: var(--ink-soft); }
.hero-phone a { font-weight: 700; }

.hero-art { position: relative; }

.hero-blob {
  background: var(--sky);
  border: 4px solid rgba(255, 255, 255, 0.7);
  border-radius: 46% 54% 55% 45% / 48% 44% 56% 52%;
  box-shadow: var(--clay-shadow);
  padding: var(--s-6);
  aspect-ratio: 1;
  display: grid; place-items: center;
}

/* floating soap bubbles */
.hero-bubbles { position: absolute; inset: 0; pointer-events: none; }
.bubble {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.95), rgba(199,229,248,0.55) 62%, rgba(199,229,248,0.25));
  border: 2px solid rgba(255, 255, 255, 0.7);
  animation: bubble-float 7s ease-in-out infinite;
  will-change: transform, opacity;
}
.b1 { width: 54px; height: 54px; top: 14%; left: 6%;  animation-delay: 0s;   animation-duration: 8.5s; }
.b2 { width: 30px; height: 30px; top: 30%; left: 15%; animation-delay: 1.4s; animation-duration: 6.5s; }
.b3 { width: 42px; height: 42px; top: 12%; right: 9%; animation-delay: 0.7s; animation-duration: 7.5s; }
.b4 { width: 24px; height: 24px; bottom: 24%; left: 44%; animation-delay: 2.2s; animation-duration: 5.5s; }
.b5 { width: 36px; height: 36px; bottom: 14%; right: 20%; animation-delay: 3s;  animation-duration: 9s; }

@keyframes bubble-float {
  0%   { transform: translateY(0) translateX(0) scale(1);       opacity: 0.65; }
  30%  { opacity: 1; }
  50%  { transform: translateY(-32px) translateX(10px) scale(1.1); opacity: 0.9; }
  70%  { opacity: 1; }
  100% { transform: translateY(0) translateX(0) scale(1);       opacity: 0.65; }
}

/* pastel paw stamps around the hero art */
.paw {
  position: absolute; width: 34px; height: 34px;
  background-color: var(--pink);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21c-3 0-5.5-2-5.5-4.7 0-2.4 2.3-3.6 3.4-4.9C11 10 11.3 8.5 12 8.5s1 1.5 2.1 2.9c1.1 1.3 3.4 2.5 3.4 4.9C17.5 19 15 21 12 21ZM6.2 9.8c1 .5 1.4 1.8.9 2.9-.6 1-1.8 1.5-2.8 1s-1.4-1.8-.9-2.9c.5-1 1.8-1.5 2.8-1Zm11.6 0c1-.5 2.3 0 2.8 1 .5 1.1.1 2.4-.9 2.9-1 .5-2.2 0-2.8-1-.5-1.1-.1-2.4.9-2.9ZM9.5 3.2c1.1.2 1.9 1.4 1.7 2.6-.2 1.2-1.3 2-2.4 1.8C7.7 7.4 7 6.2 7.2 5c.2-1.2 1.2-2 2.3-1.8Zm5 0c1.1-.2 2.1.6 2.3 1.8.2 1.2-.5 2.4-1.6 2.6-1.1.2-2.2-.6-2.4-1.8-.2-1.2.6-2.4 1.7-2.6Z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21c-3 0-5.5-2-5.5-4.7 0-2.4 2.3-3.6 3.4-4.9C11 10 11.3 8.5 12 8.5s1 1.5 2.1 2.9c1.1 1.3 3.4 2.5 3.4 4.9C17.5 19 15 21 12 21ZM6.2 9.8c1 .5 1.4 1.8.9 2.9-.6 1-1.8 1.5-2.8 1s-1.4-1.8-.9-2.9c.5-1 1.8-1.5 2.8-1Zm11.6 0c1-.5 2.3 0 2.8 1 .5 1.1.1 2.4-.9 2.9-1 .5-2.2 0-2.8-1-.5-1.1-.1-2.4.9-2.9ZM9.5 3.2c1.1.2 1.9 1.4 1.7 2.6-.2 1.2-1.3 2-2.4 1.8C7.7 7.4 7 6.2 7.2 5c.2-1.2 1.2-2 2.3-1.8Zm5 0c1.1-.2 2.1.6 2.3 1.8.2 1.2-.5 2.4-1.6 2.6-1.1.2-2.2-.6-2.4-1.8-.2-1.2.6-2.4 1.7-2.6Z"/></svg>') center / contain no-repeat;
}
.paw-1 { top: -8px; right: 12%; transform: rotate(18deg); background-color: var(--butter); }
.paw-2 { bottom: 4%; left: -14px; transform: rotate(-24deg); }
.paw-3 { bottom: -18px; right: 6%; transform: rotate(10deg); background-color: var(--mint); width: 26px; height: 26px; }

/* ============ section scaffolding ============ */
.services, .pups { max-width: 1120px; margin: 0 auto; padding: var(--s-12) var(--s-6) var(--s-16); }
.gentle, .book   { padding: var(--s-8) var(--s-6); max-width: 1120px; margin: 0 auto; }
.visit           { max-width: 1120px; margin: 0 auto; padding: var(--s-12) var(--s-6); }

.section-head { max-width: 60ch; margin-bottom: var(--s-8); }
.section-sub { color: var(--ink-soft); font-size: 1.05rem; }

/* ============ services ============ */
.services-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--s-8);
  align-items: start;
}

.service-featured {
  background: var(--butter);
  padding: var(--s-8);
  transform: rotate(-1deg);
}
.service-hand {
  font-family: var(--font-hand); font-weight: 700;
  font-size: 1.6rem; color: var(--primary-deep);
  margin-bottom: var(--s-1);
}
.service-desc { color: var(--ink-soft); }
.service-price {
  font-family: var(--font-display); font-weight: 900;
  font-size: 2.6rem; margin: var(--s-4) 0 var(--s-2);
}
.price-from {
  font-family: var(--font-body); font-weight: 500;
  font-size: 1rem; color: var(--ink-soft); margin-right: var(--s-1);
}
.service-includes {
  list-style: none; margin: 0 0 var(--s-6); padding: 0;
  display: flex; flex-direction: column; gap: var(--s-2);
}
.service-includes li { padding-left: var(--s-6); position: relative; font-weight: 500; }
.service-includes li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--primary); box-shadow: inset 0 -2px 3px rgba(74, 26, 2, 0.35), inset 0 2px 2px rgba(255,255,255,0.5);
}

.service-menu { padding: var(--s-6) var(--s-8); }

.menu-list { list-style: none; margin: 0; padding: 0; }

.menu-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-6) 0;
}
.menu-item + .menu-item { border-top: 2px dashed rgba(184, 106, 44, 0.25); }

.menu-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 16px;
  border: var(--border-clay);
  box-shadow: var(--clay-shadow-small);
  color: var(--ink);
}
.menu-icon-mint   { background: var(--mint); }
.menu-icon-sky    { background: var(--sky); }
.menu-icon-butter { background: var(--butter); }
.menu-icon-pink   { background: var(--pink); }

.menu-text h3 { margin-bottom: var(--s-1); }
.menu-text p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; max-width: 44ch; }

.menu-dots {
  align-self: center;
  border-bottom: 2px dotted rgba(184, 106, 44, 0.4);
  min-width: var(--s-6);
}

.menu-price {
  align-self: center;
  font-family: var(--font-display); font-weight: 900;
  font-size: 1.35rem; white-space: nowrap;
}

.menu-note {
  margin: var(--s-4) 0 var(--s-2);
  font-family: var(--font-hand); font-weight: 600;
  font-size: 1.35rem; color: var(--ink-soft);
  transform: rotate(-0.5deg);
}

/* ============ gentle handling ============ */
.gentle-inner {
  background: var(--mint);
  padding: var(--s-12);
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: var(--s-12);
}
.gentle-hand {
  font-family: var(--font-hand); font-weight: 700;
  font-size: 1.7rem; color: var(--primary-deep);
  margin-bottom: var(--s-2);
}
.gentle-copy p:last-child { color: var(--ink-soft); margin-bottom: 0; }

.gentle-points {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-6);
}
.gentle-points li { display: flex; gap: var(--s-4); align-items: flex-start; }
.gentle-points h3 { font-size: 1.1rem; margin-bottom: var(--s-1); }
.gentle-points p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

.point-icon {
  flex: none;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  background: var(--clay-card);
  border: var(--border-clay); border-radius: 16px;
  box-shadow: var(--clay-shadow-small);
  color: var(--primary-deep);
}

/* ============ happy pups strip ============ */
.pup-strip {
  list-style: none; margin: 0; padding: var(--s-2);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  padding-bottom: var(--s-6);
}

@media (max-width: 1099px) {
  .pup-strip {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(270px, 80%);
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
}

.pup-card {
  scroll-snap-align: start;
  padding: var(--s-6);
  display: flex; flex-direction: column;
  transition: transform 250ms var(--ease-clay);
}
.pup-card:hover { transform: translateY(-4px) rotate(0.5deg); }
.pup-card:nth-child(even) { transform: rotate(0.6deg); }
.pup-card:nth-child(odd)  { transform: rotate(-0.6deg); }
.pup-card:nth-child(even):hover, .pup-card:nth-child(odd):hover { transform: translateY(-4px); }

.pup-avatar {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: var(--border-clay);
  box-shadow: var(--clay-shadow-small);
  font-family: var(--font-display); font-weight: 900; font-size: 1.4rem;
  margin-bottom: var(--s-4);
}
.pup-avatar-butter { background: var(--butter); }
.pup-avatar-mint   { background: var(--mint); }
.pup-avatar-pink   { background: var(--pink); }
.pup-avatar-sky    { background: var(--sky); }

.pup-quote { font-size: 1rem; flex-grow: 1; }
.pup-quote em { font-style: italic; }
.pup-meta { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: var(--s-1); }
.pup-name { font-weight: 700; color: var(--ink); }
.pup-stars { color: var(--primary); letter-spacing: 3px; margin: 0; }

/* ============ visit / hours ============ */
.visit-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-8); }

.visit-card, .hours-card { padding: var(--s-8); }
.hours-card { background: var(--sky); transform: rotate(0.6deg); }
.visit-card { transform: rotate(-0.4deg); }

.visit-address { font-style: normal; font-weight: 700; font-size: 1.15rem; line-height: 1.5; margin-bottom: var(--s-4); }
.visit-note { color: var(--ink-soft); }
.visit-phone a, .visit-mail a { font-weight: 700; }
.visit-phone { margin-bottom: var(--s-1); }

.hours-table { width: 100%; border-collapse: collapse; margin-bottom: var(--s-4); }
.hours-table th, .hours-table td { text-align: left; padding: var(--s-3) 0; border-bottom: 2px dashed rgba(74, 36, 16, 0.2); }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: none; }
.hours-table th { font-family: var(--font-display); font-weight: 800; }
.hours-table td { text-align: right; font-weight: 500; }
.hours-note { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

/* ============ booking ============ */
.book { padding-bottom: var(--s-16); }

.book-inner {
  padding: var(--s-12);
  display: grid; grid-template-columns: 0.8fr 1.2fr;
  gap: var(--s-12);
  position: relative;
}
.book-hand {
  font-family: var(--font-hand); font-weight: 700;
  font-size: 1.7rem; color: var(--primary-deep);
  margin-bottom: var(--s-2);
}
.book-copy p:last-child { color: var(--ink-soft); }

.book-form { display: flex; flex-direction: column; gap: var(--s-4); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

.form-field { display: flex; flex-direction: column; gap: var(--s-2); }

.form-field label {
  font-family: var(--font-display); font-weight: 800; font-size: 0.98rem;
}
.label-soft { font-family: var(--font-body); font-weight: 400; color: var(--ink-soft); }

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--clay-card-soft);
  border: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  min-height: 48px;
  box-shadow: inset 0 3px 7px rgba(184, 106, 44, 0.14), inset 0 -2px 4px rgba(255, 255, 255, 0.7);
  transition: border-color 200ms var(--ease-clay), box-shadow 200ms var(--ease-clay);
}
.form-field textarea { resize: vertical; min-height: 88px; }

.form-field input:hover, .form-field select:hover, .form-field textarea:hover {
  border-color: rgba(232, 98, 14, 0.35);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 3px solid var(--accent-blue); outline-offset: 2px;
}

.form-field input::placeholder, .form-field textarea::placeholder { color: #9C6A45; }

.form-field.field-invalid input,
.form-field.field-invalid select {
  border-color: #C21807;
  box-shadow: inset 0 3px 7px rgba(194, 24, 7, 0.16), inset 0 -2px 4px rgba(255, 255, 255, 0.7);
}

.field-error {
  margin: 0; font-size: 0.88rem; font-weight: 500; color: #A31200;
}

.form-fine { font-size: 0.88rem; color: var(--ink-soft); margin: 0; text-align: center; }

/* success state */
.book-success {
  grid-column: 2;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  gap: var(--s-2);
  padding: var(--s-8);
  background: var(--mint);
  border: var(--border-clay); border-radius: var(--r-md);
  box-shadow: var(--clay-shadow-small);
}
.book-success[hidden] { display: none; }
.success-paw { color: var(--primary-deep); animation: paw-pop 500ms var(--ease-clay); }
.book-success h3 { margin-bottom: var(--s-1); }
.book-success p { color: var(--ink-soft); max-width: 42ch; }

@keyframes paw-pop {
  0%   { transform: scale(0.4) rotate(-14deg); opacity: 0; }
  70%  { transform: scale(1.12) rotate(4deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ============ footer ============ */
.site-footer {
  background: var(--clay-bg-deep);
  border-top: 3px solid rgba(255, 255, 255, 0.6);
  padding: var(--s-12) var(--s-6);
}
.footer-inner { max-width: 1120px; margin: 0 auto; text-align: center; }
.footer-brand {
  font-family: var(--font-display); font-weight: 900; font-size: 1.3rem;
  margin-bottom: var(--s-2);
}
.footer-brand em { font-style: normal; color: var(--primary-deep); }
.footer-line { color: var(--ink-soft); margin-bottom: var(--s-2); }
.footer-fine { color: var(--ink-soft); font-size: 0.88rem; margin: 0; }

/* ============ entrance arming ============
   Motion is opt-in: the inline head script adds .anim to <html> ONLY when JS is
   live and the visitor welcomes motion. GSAP then owns every entrance. If .anim
   is never set (reduced motion, no JS, GSAP failed to load), nothing below is
   hidden and the whole page renders fully visible. Only above-the-fold pieces
   are pre-hidden here — everything below the fold is armed by GSAP's own
   immediateRender before it can paint, so no CSS hide is needed there. */
html.anim .brand,
html.anim .site-nav li,
html.anim .btn-header,
html.anim .hero-hand,
html.anim .hero-copy h1,
html.anim .hero-sub,
html.anim .hero-ctas .btn,
html.anim .hero-phone,
html.anim .hero-art,
html.anim .paw { opacity: 0; }

/* confetti paws for the booking celebration */
.confetti-paw {
  position: absolute;
  width: 26px; height: 26px;
  z-index: 5;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ============ tactile squish — hover lifts, press deforms ============
   Interaction feedback is deliberately kept in reduced motion too: it is
   discrete, only fires on the visitor's own action, and is what keeps the clay
   feeling squeezable when ambient motion is off. */
.service-featured, .service-menu, .pup-card,
.visit-card, .hours-card, .gentle-inner, .book-inner, .menu-item {
  transition: transform 260ms var(--ease-clay), box-shadow 260ms var(--ease-clay);
}

/* lift + swell on hover (rotation kept so the clay tilt survives) */
.service-featured:hover {
  transform: rotate(-1deg) translateY(-5px) scale(1.02);
  box-shadow: 0 18px 34px rgba(154, 82, 30, 0.24), inset 0 6px 12px rgba(255,255,255,0.85), inset 0 -8px 14px rgba(184,106,44,0.16);
}
.service-menu:hover, .gentle-inner:hover, .book-inner:hover {
  transform: translateY(-4px) scale(1.008);
  box-shadow: 0 18px 34px rgba(154, 82, 30, 0.22), inset 0 6px 12px rgba(255,255,255,0.85), inset 0 -8px 14px rgba(184,106,44,0.16);
}
.visit-card:hover { transform: rotate(-0.4deg) translateY(-5px) scale(1.02); }
.hours-card:hover { transform: rotate(0.6deg) translateY(-5px) scale(1.02); }

/* press: clay squashes down + shadow tightens */
.service-featured:active, .service-menu:active, .pup-card:active,
.visit-card:active, .hours-card:active, .gentle-inner:active,
.book-inner:active, .menu-item:active {
  transform: scale(0.975);
  box-shadow: var(--clay-shadow-pressed);
  transition-duration: 110ms;
}

/* menu rows: swell + tint, icon kicks over */
.menu-item { border-radius: var(--r-md); padding-left: var(--s-3); padding-right: var(--s-3); }
.menu-item:hover { transform: scale(1.015); background: rgba(255, 233, 168, 0.28); }
.menu-icon, .point-icon, .pup-avatar, .success-paw {
  transition: transform 280ms var(--ease-clay);
}
.menu-item:hover .menu-icon { transform: rotate(-9deg) scale(1.12); }
.gentle-points li:hover .point-icon { transform: rotate(9deg) scale(1.12); }

/* pup cards: bounce up, avatar tips its head */
.pup-card:hover { transform: translateY(-6px) scale(1.03); }
.pup-card:nth-child(even):hover, .pup-card:nth-child(odd):hover { transform: translateY(-6px) scale(1.03); }
.pup-card:hover .pup-avatar { transform: rotate(-7deg) scale(1.1); }

/* nav + brand: small squishy responses */
.site-nav a { transition: transform 200ms var(--ease-clay), color 200ms var(--ease-clay); display: inline-block; }
.site-nav a:hover { transform: scale(1.08); }
.brand { transition: transform 240ms var(--ease-clay); }
.brand:hover { transform: scale(1.04); }
.brand-mark { transition: transform 300ms var(--ease-clay); }
.brand:hover .brand-mark { transform: rotate(-10deg) scale(1.06); }

/* form fields settle in slightly on focus */
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  transform: scale(1.01);
}

/* ============ reduced motion ============
   Owner runs prefers-reduced-motion: reduce, and this branch must still feel
   designed. Ambient loops and entrances are dropped (content shows immediately,
   never hidden), but every tactile hover/press response above is retained as a
   fast, discrete change — the clay still squishes when you touch it. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bubble { animation: none; opacity: 0.8; }
  .success-paw { animation: none; }

  /* nothing stays hidden if motion is off */
  html.anim .brand, html.anim .site-nav li, html.anim .btn-header,
  html.anim .hero-hand, html.anim .hero-copy h1, html.anim .hero-sub,
  html.anim .hero-ctas .btn, html.anim .hero-phone, html.anim .hero-art,
  html.anim .paw { opacity: 1; }

  /* keep interaction feedback, just make it snappy and non-floaty */
  .service-featured, .service-menu, .pup-card, .visit-card, .hours-card,
  .gentle-inner, .book-inner, .menu-item, .btn, .site-nav a, .brand,
  .brand-mark, .menu-icon, .point-icon, .pup-avatar {
    transition-duration: 140ms;
  }
}

/* ============ responsive ============ */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; padding-top: var(--s-12); padding-bottom: var(--s-16); }
  .hero-art { max-width: 420px; margin: 0 auto; }
  .services-layout { grid-template-columns: 1fr; }
  .service-featured { transform: none; }
  .gentle-inner { grid-template-columns: 1fr; padding: var(--s-8); gap: var(--s-8); }
  .visit-grid { grid-template-columns: 1fr; }
  .book-inner { grid-template-columns: 1fr; padding: var(--s-8); gap: var(--s-6); }
  .book-success { grid-column: auto; }
}

@media (max-width: 720px) {
  .site-nav {
    position: absolute; top: 100%; left: var(--s-4); right: var(--s-4);
    background: var(--clay-card);
    border: var(--border-clay); border-radius: var(--r-md);
    box-shadow: var(--clay-shadow);
    padding: var(--s-4);
    display: none;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: var(--s-2); }
  .site-nav a { display: block; padding: var(--s-3) var(--s-4); }
  .nav-toggle { display: flex; margin-left: auto; }
  .site-nav { margin-left: 0; }
  .btn-header { display: none; }

  .menu-item { grid-template-columns: auto 1fr; }
  .menu-dots { display: none; }
  .menu-price { grid-column: 2; justify-self: start; }

  .form-row { grid-template-columns: 1fr; }
  .service-menu { padding: var(--s-4) var(--s-6); }
}