/* ============================================
   Benny and the Pets - Stylesheet
   A fun, playful design for dog boarding
   ============================================ */

/* --- CSS Variables --- */
:root {
  --primary: #FF6B35;
  --primary-dark: #E5551F;
  /* Text-bearing surfaces need a darker orange. #FF6B35 gives only 2.84:1
     against white — well under the 4.5:1 WCAG AA minimum — so it is kept for
     decorative accents (borders, icons, hover glows) while filled buttons and
     orange-on-white text use --primary-strong (5.18:1). */
  --primary-strong: #C2410C;
  --primary-strong-dark: #9A3412;
  --secondary: #4ECDC4;
  --secondary-dark: #3AB5AD;
  /* #4ECDC4 carries white text at only 1.93:1. Filled secondary surfaces use
     --secondary-strong (4.8:1); the bright teal stays decorative. */
  --secondary-strong: #217F79;
  --secondary-strong-dark: #146B66;
  --accent: #FFE66D;
  --dark: #2C3E50;
  --dark-light: #34495E;
  --text: #333333;
  --text-light: #666666;
  --bg: #FFFDF7;
  --bg-alt: #FFF8EE;
  --white: #FFFFFF;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
  --radius: 16px;
  --radius-sm: 8px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Fredoka One', 'Trebuchet MS', 'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height: 1.2;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

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

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Floating Paw Prints --- */
.paw-prints {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.paw-print {
  position: absolute;
  font-size: 24px;
  opacity: 0;
  animation: floatPaw 8s ease-in-out infinite;
}

@keyframes floatPaw {
  0% { opacity: 0; transform: translateY(100vh) rotate(0deg); }
  10% { opacity: 0.15; }
  90% { opacity: 0.15; }
  100% { opacity: 0; transform: translateY(-100px) rotate(360deg); }
}

/* --- Navbar --- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 253, 247, 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 2px solid transparent;
  transition: var(--transition);
  padding: 16px 0;
}

.navbar.scrolled {
  border-bottom-color: var(--accent);
  box-shadow: var(--shadow);
  padding: 10px 0;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: 'Fredoka One', 'Trebuchet MS', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 10px;
  /* The wordmark is a single unit: letting it wrap turned a 48px-tall navbar
     into a 122px one and dropped the links out of horizontal alignment. */
  flex: 0 0 auto;
  white-space: nowrap;
}

.logo-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: transform var(--transition);
}

.logo:hover .logo-img {
  transform: scale(1.1) rotate(-5deg);
}

.logo-text {
  display: flex;
  align-items: center;
}

.logo-amp {
  color: var(--primary);
  margin: 0 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  /* Fixed 32px gaps forced every label to wrap below ~1200px ("How it
     works" over three lines, the CTA into a circle). The gap now gives way
     before the text does. */
  gap: clamp(12px, 1.6vw, 22px);
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--dark);
  position: relative;
  white-space: nowrap;
  transition: color var(--transition);
}

.nav-links a:not(.nav-cta):hover {
  color: var(--primary);
}

.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
  transition: width var(--transition);
}

.nav-links a:not(.nav-cta):hover::after {
  width: 100%;
}

.nav-cta {
  background: var(--primary-strong);
  color: var(--white) !important;
  padding: 10px 24px;
  border-radius: 50px;
  transition: all var(--transition);
  font-weight: 800;
}

.nav-cta:hover {
  background: var(--primary-strong-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  width: 28px;
  height: 3px;
  background: var(--dark);
  border-radius: 2px;
  transition: var(--transition);
}

/* The control sits above the open drawer, so it has to read as "close" while
   the drawer is open rather than staying an ambiguous three-bar icon. */
.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 50px;
  font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.25;
  text-align: center;
  justify-content: center;
  cursor: pointer;
  /* Transparent rather than absent: .btn-secondary's 3px border used to make
     it 6px taller and wider than the .btn-primary beside it, so a pair of
     buttons never lined up on either edge. Every variant now shares one box. */
  border: 3px solid transparent;
  transition: all var(--transition);
}

.btn-primary {
  background: var(--primary-strong);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--primary-strong-dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
}

.btn-secondary {
  background: transparent;
  color: var(--dark);
  border: 3px solid var(--dark);
}

.btn-secondary:hover {
  background: var(--dark);
  color: var(--white);
  transform: translateY(-3px);
}

.btn-full {
  width: 100%;
  justify-content: center;
  padding: 16px;
  font-size: 1.1rem;
}

/* --- Hero Section --- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 80px;
  position: relative;
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-alt) 50%, #FFF0DB 100%);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(78, 205, 196, 0.15) 0%, transparent 70%);
  border-radius: 50%;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -200px;
  left: -200px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 107, 53, 0.1) 0%, transparent 70%);
  border-radius: 50%;
}

.hero-content {
  max-width: 600px;
  z-index: 1;
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  color: var(--dark);
  margin-bottom: 20px;
}

.highlight {
  background: linear-gradient(135deg, var(--primary), #FF8F65);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wiggle-emoji {
  display: inline-block;
  animation: wiggle 1s ease-in-out infinite;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

.hero-subtitle {
  font-size: 1.2rem;
  color: var(--text-light);
  margin-bottom: 32px;
  line-height: 1.8;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.hero-stats {
  display: flex;
  gap: 40px;
}

.stat {
  text-align: center;
  font-family: 'Fredoka One', 'Trebuchet MS', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 1.8rem;
  color: var(--dark);
}

.stat-label {
  display: block;
  font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-light);
}

.hero-visual {
  z-index: 1;
  margin-left: 60px;
}

.bouncing-dog {
  font-size: 10rem;
  animation: bounce 2s ease-in-out infinite;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.1));
  cursor: pointer;
  transition: transform 0.2s;
  user-select: none;
}

.bouncing-dog:hover {
  animation-play-state: paused;
  transform: scale(1.1);
}

.dog-shadow {
  width: 120px;
  height: 20px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  margin: 0 auto;
  animation: shadowPulse 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

@keyframes shadowPulse {
  0%, 100% { transform: scaleX(1); opacity: 0.3; }
  50% { transform: scaleX(0.7); opacity: 0.15; }
}

.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: var(--text-light);
  font-size: 0.85rem;
  font-weight: 600;
  animation: fadeInOut 2s ease-in-out infinite;
}

.scroll-arrow {
  width: 20px;
  height: 20px;
  border-right: 3px solid var(--primary);
  border-bottom: 3px solid var(--primary);
  transform: rotate(45deg);
  margin: 8px auto 0;
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50% { transform: rotate(45deg) translateY(8px); }
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* --- Section Headers --- */
.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header.light h2,
.section-header.light .section-desc {
  color: var(--white);
}

.section-header.light .section-tag {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
}

.section-tag {
  display: inline-block;
  background: var(--accent);
  color: var(--dark);
  padding: 6px 18px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.section-header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--dark);
  margin-bottom: 12px;
}

.section-desc {
  font-size: 1.1rem;
  color: var(--text-light);
  max-width: 600px;
  margin: 0 auto;
}

/* --- About Section --- */
.about {
  padding: 100px 0;
  background: var(--white);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.about-image-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--bg-alt), #FFE5D0);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 4px dashed var(--primary);
}

.about-image-placeholder span {
  font-size: 6rem;
  margin-bottom: 12px;
}

.about-image-placeholder p {
  font-weight: 700;
  color: var(--text-light);
}

.about-content h3 {
  font-size: 1.8rem;
  color: var(--dark);
  margin-bottom: 16px;
}

.about-content p {
  margin-bottom: 16px;
  color: var(--text-light);
}

.about-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
}

.about-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  transition: transform var(--transition);
}

.about-feature:hover {
  transform: translateX(8px);
}

.feature-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.about-feature strong {
  display: block;
  color: var(--dark);
  margin-bottom: 2px;
}

.about-feature p {
  font-size: 0.9rem;
  margin: 0;
}

/* --- Services Section --- */
.services {
  padding: 100px 0;
  background: var(--bg);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.service-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 36px 28px;
  box-shadow: var(--shadow);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--secondary);
}

.service-card.featured {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--white) 0%, #FFF5EE 100%);
}

.featured-badge {
  position: absolute;
  top: 16px;
  right: -30px;
  background: var(--primary);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 40px;
  transform: rotate(45deg);
  text-transform: uppercase;
}

.service-icon {
  font-size: 3rem;
  margin-bottom: 16px;
}

.service-card h3 {
  font-size: 1.3rem;
  color: var(--dark);
  margin-bottom: 12px;
}

.service-card p {
  color: var(--text-light);
  font-size: 0.95rem;
  margin-bottom: 16px;
}

.service-perks {
  margin-bottom: 20px;
}

.service-perks li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: var(--text-light);
}

.service-perks li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--secondary);
  font-weight: 800;
}

.service-price {
  display: inline-block;
  background: var(--accent);
  color: var(--dark);
  padding: 8px 20px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 0.95rem;
}

/* --- Fun / Boop Section --- */
.fun-section {
  padding: 100px 0;
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-light) 100%);
  text-align: center;
}

.boop-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.boop-dog {
  position: relative;
  cursor: pointer;
  user-select: none;
}

.boop-target {
  font-size: 8rem;
  transition: transform 0.15s;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.boop-dog:hover .boop-target {
  transform: scale(1.1);
}

.boop-dog:active .boop-target {
  transform: scale(0.9);
}

.boop-dog.booped .boop-target {
  animation: boopBounce 0.4s ease;
}

@keyframes boopBounce {
  0% { transform: scale(1); }
  30% { transform: scale(0.85); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.boop-reaction {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  opacity: 0;
  pointer-events: none;
}

.boop-reaction.show {
  animation: reactionFloat 1s ease-out forwards;
}

@keyframes reactionFloat {
  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-80px); }
}

.boop-counter {
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
}

.boop-count {
  font-family: 'Fredoka One', 'Trebuchet MS', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 2.5rem;
  color: var(--accent);
}

.boop-milestones {
  color: var(--accent);
  font-weight: 800;
  font-size: 1.1rem;
  min-height: 30px;
}

/* --- Gallery Section --- */
.gallery {
  padding: 100px 0;
  background: var(--white);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 250px;
  gap: 16px;
}

.gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition);
}

.gallery-item:hover {
  transform: scale(1.03);
}

.gallery-item.large {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-item.tall {
  grid-row: span 2;
}

.gallery-placeholder {
  width: 100%;
  height: 100%;
  background: hsl(var(--hue, 30), 70%, 90%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

.gallery-placeholder:hover {
  background: hsl(var(--hue, 30), 80%, 85%);
}

.gallery-placeholder span {
  font-size: 4rem;
  margin-bottom: 8px;
}

.gallery-placeholder p {
  font-weight: 700;
  color: hsl(var(--hue, 30), 40%, 40%);
  font-size: 0.9rem;
}

/* --- Testimonials Section --- */
.testimonials {
  padding: 100px 0;
  background: var(--bg);
  overflow: hidden;
}

.testimonials-carousel {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
}

.testimonial-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-card {
  min-width: 100%;
  padding: 40px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
  margin: 0 12px;
}

.testimonial-stars {
  font-size: 1.5rem;
  margin-bottom: 16px;
}

.testimonial-card p {
  font-size: 1.15rem;
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 24px;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.author-avatar {
  font-size: 2.5rem;
}

.testimonial-author strong {
  display: block;
  color: var(--dark);
}

.testimonial-author span {
  font-size: 0.85rem;
  color: var(--text-light);
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.carousel-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--dark);
  background: var(--white);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.carousel-btn:hover {
  background: var(--dark);
  color: var(--white);
}

.carousel-dots {
  display: flex;
  gap: 8px;
}

.carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ddd;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
}

.carousel-dot.active {
  background: var(--primary);
  transform: scale(1.3);
}

/* --- Review Submission Form --- */
.review-submit {
  max-width: 700px;
  margin: 56px auto 0;
  padding: 40px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
}

.review-submit h3 {
  color: var(--dark);
  margin-bottom: 8px;
}

.review-submit > p {
  color: var(--text-light);
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.review-form-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.review-form-row input,
.review-submit textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 16px;
  font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.95rem;
  background: #fafafa;
  transition: border-color var(--transition);
}

.review-form-row input {
  flex: 1;
}

.review-form-row input:focus,
.review-submit textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.review-submit textarea {
  resize: vertical;
  margin-bottom: 16px;
}

.review-rating {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
}

.review-star {
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  filter: grayscale(1);
  opacity: 0.45;
  transition: all var(--transition);
  padding: 2px;
}

.review-star.active {
  filter: none;
  opacity: 1;
  transform: scale(1.1);
}

.review-form-msg {
  margin-top: 14px;
  font-weight: 700;
  font-size: 0.9rem;
  display: none;
}

.review-form-msg.success { display: block; color: #27ae60; }
.review-form-msg.error { display: block; color: #e74c3c; }

@media (max-width: 600px) {
  .review-form-row {
    flex-direction: column;
  }
  .review-submit {
    padding: 28px 20px;
  }
}

/* --- Contact Section --- */
.contact {
  padding: 100px 0;
  background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: start;
}

.contact-form {
  background: var(--white);
  padding: 40px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.contact-booking-cta {
  background: var(--white);
  padding: 40px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.form-group {
  margin-bottom: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group label {
  display: block;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: var(--radius-sm);
  font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  transition: border-color var(--transition);
  background: var(--bg);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.form-group textarea {
  resize: vertical;
}

.contact-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  padding: 24px;
  border-radius: var(--radius);
  color: var(--white);
  transition: transform var(--transition);
}

.info-card:hover {
  transform: translateY(-4px);
}

.info-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 8px;
}

.info-card h4 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.info-card p {
  font-size: 0.95rem;
  opacity: 0.9;
  line-height: 1.5;
}

/* --- Footer --- */
.footer {
  background: var(--dark);
  color: var(--white);
  padding: 60px 0 0;
}

.footer-grid {
  display: grid;
  /* Five children, so five tracks. A four-track grid dropped the newsletter
     onto a second row beneath the brand and left the right two thirds of the
     footer empty. */
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr 1.4fr;
  gap: 40px 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand h3 {
  font-size: 1.4rem;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-logo-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: white;
  padding: 2px;
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
}

.social-links {
  display: flex;
  gap: 12px;
}

.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.8rem;
  transition: all var(--transition);
}

.social-link:hover {
  background: var(--primary);
  transform: translateY(-3px);
}

.footer-links h4 {
  font-size: 1.1rem;
  margin-bottom: 16px;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.87);
  transition: color var(--transition);
}

.footer-links a:hover {
  color: var(--accent);
}

.footer-newsletter h4 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.footer-newsletter p {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.newsletter-form {
  /* The form holds a field, a consent row, a submit and a status line — it is
     a stack, not the input+button row this used to be. As a row it squeezed
     the submit to its minimum width and broke "Subscribe" over nine lines. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.newsletter-form input {
  flex: 1;
  padding: 10px 16px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.9rem;
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.newsletter-form input:focus {
  outline: none;
  border-color: var(--primary);
}

.newsletter-form .btn {
  padding: 10px 24px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.newsletter-consent {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
  line-height: 1.4;
}

.footer-bottom {
  text-align: center;
  padding: 20px 0;
  /* 0.5 alpha over the dark footer measured 4.05:1 — below AA for this
     13.6px text. 0.82 gives 8.1:1. */
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.85rem;
}

/* --- Modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--white);
  padding: 48px;
  border-radius: var(--radius);
  text-align: center;
  max-width: 400px;
  transform: scale(0.8);
  transition: transform var(--transition);
}

.modal-overlay.active .modal {
  transform: scale(1);
}

.modal-icon {
  font-size: 4rem;
  margin-bottom: 16px;
}

.modal h3 {
  font-size: 1.8rem;
  color: var(--dark);
  margin-bottom: 12px;
}

.modal p {
  color: var(--text-light);
  margin-bottom: 24px;
}

/* --- Scroll Reveal Animation --- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Responsive Design --- */
@media (max-width: 968px) {
  .hero {
    flex-direction: column;
    text-align: center;
    padding-top: 120px;
  }

  .hero-visual {
    margin-left: 0;
    margin-top: 40px;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-stats {
    justify-content: center;
  }

  .bouncing-dog {
    font-size: 7rem;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }

  .gallery-item.large {
    grid-column: span 2;
    grid-row: span 1;
  }

  .gallery-item.tall {
    grid-row: span 1;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .hero-stats {
    flex-direction: column;
    gap: 16px;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-item.large {
    grid-column: span 1;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .bouncing-dog {
    font-size: 5rem;
  }

  .contact-info {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Accessibility and new components (WCAG 2.2 AA remediation)
   ========================================================================== */

/* --- Skip link ---------------------------------------------------------
   Present on every page as the first focusable element. It is off-screen
   until focused rather than display:none, because a hidden element cannot
   receive focus at all. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 10001;
  padding: 12px 20px;
  background: var(--white, #fff);
  color: var(--text, #2d2a26);
  border: 2px solid var(--primary, #ff8c42);
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 8px;
}

/* Visually hidden but available to assistive technology. Used for the long
   form of every price, star rating and icon-only control. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Focus visibility --------------------------------------------------
   A single, high-contrast focus ring applied to everything focusable. The
   previous stylesheet relied on the browser default, which disappears
   entirely against the orange and cream backgrounds used here. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #1b4dd8;
  outline-offset: 3px;
  border-radius: 4px;
}
/* On dark sections the blue ring loses contrast; invert it there. */
.footer :where(a, button, input, textarea):focus-visible,
.contact :where(a, button, input, textarea):focus-visible,
.fun-section :where(a, button):focus-visible {
  outline-color: #ffd166;
}

/* --- Target size (WCAG 2.2 AA, 24x24 minimum; 44x44 comfortable) ------- */
.nav-links a,
.footer-links a,
.social-link,
.carousel-btn,
.review-star,
.btn {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* The pill CTA sets its own, wider padding; :not() keeps this rule from
   flattening it to 8px and squeezing the label against the pill edge. */
.footer-links a {
  padding: 10px 8px;
}
.nav-links a:not(.nav-cta) {
  padding: 10px 6px;
}
.social-link {
  width: 44px;
  height: 44px;
}
/* The dots stay visually small but carry a 44px transparent hit area. */
.carousel-dot {
  position: relative;
  width: 12px;
  height: 12px;
}
.carousel-dot::after {
  content: '';
  position: absolute;
  inset: -16px;
}
.carousel-dots {
  gap: 20px;
}
.review-star {
  background: none;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.35;
  padding: 6px;
}
.review-star.active {
  opacity: 1;
}
.review-rating-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
}
.review-rating-fieldset legend {
  font-weight: 700;
  margin-bottom: 4px;
}

/* --- Form fields with visible labels ----------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  text-align: left;
  width: 100%;
}
.field label {
  font-weight: 700;
  font-size: 0.95rem;
}
.field .optional {
  font-weight: 400;
  opacity: 0.75;
}
.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  min-height: 44px;
  border: 2px solid rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  font: inherit;
  background: var(--white, #fff);
  color: var(--text, #2d2a26);
}
.field-help {
  font-size: 0.85rem;
  opacity: 0.85;
  margin: 0;
}
.consent-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 16px;
  text-align: left;
}
.consent-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex: 0 0 auto;
}
.consent-row label {
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Status messages. Never colour-only: success and error also differ by the
   leading symbol supplied in ::before. */
.form-msg,
.review-form-msg,
.newsletter-msg {
  margin: 12px 0 0;
  font-weight: 700;
  min-height: 1.4em;
}
.form-msg.success::before,
.review-form-msg.success::before {
  content: '\2713\00a0';
}
.form-msg.error::before,
.review-form-msg.error::before {
  content: '\26A0\00a0';
}
.form-msg.success,
.review-form-msg.success {
  color: #1c6b3d;
}
.form-msg.error,
.review-form-msg.error {
  color: #a3231b;
}
.footer .form-msg.success { color: #8ce0ac; }
.footer .form-msg.error { color: #ffb3ad; }

/* --- Boop button -------------------------------------------------------
   Was a click-handled <div>; now a real button, so the browser default
   chrome has to be reset rather than the semantics discarded. */
button.boop-dog {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}

/* --- Service status and catalog notes ---------------------------------- */
.service-status {
  font-weight: 700;
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-block;
  margin: 8px 0;
}
.service-status-inquiry {
  background: #fdf0d5;
  color: #6b4a00;
}
.service-status-unavailable {
  background: #f2e6e5;
  color: #7a1f18;
}
.service-cta {
  margin-top: 12px;
}
.services-note,
.empty-state {
  max-width: 640px;
  margin: 24px auto 0;
  text-align: center;
  opacity: 0.9;
}

.hero-eyebrow {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.hero-assurances {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 8px;
}
.hero-assurances li {
  padding-left: 28px;
  position: relative;
}
.hero-assurances li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  font-weight: 800;
  color: var(--secondary, #4ecdc4);
}

.about-credentials {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 10px;
}
.about-credentials li {
  display: flex;
  flex-direction: column;
}
.about-credentials span {
  opacity: 0.85;
  font-size: 0.9rem;
}

/* --- How-it-works steps ------------------------------------------------ */
.how-it-works {
  padding: 80px 0;
}
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.steps li {
  background: var(--white, #fff);
  border-radius: var(--radius, 20px);
  padding: 24px;
  box-shadow: var(--shadow, 0 10px 30px rgba(0, 0, 0, 0.08));
}
.steps h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

/* --- Document pages (policies, service detail) ------------------------- */
.doc-page {
  padding: 120px 0 80px;
}
.container-narrow {
  max-width: 760px;
}
.doc-page h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 8px;
}
.doc-page h2 {
  font-size: 1.3rem;
  margin: 32px 0 8px;
}
.doc-page p {
  margin-bottom: 12px;
  line-height: 1.7;
}
.doc-meta {
  font-size: 0.9rem;
  opacity: 0.8;
}
.doc-summary {
  font-size: 1.1rem;
  font-weight: 600;
}
.doc-draft-notice {
  border: 3px solid #b3540f;
  background: #fff4e6;
  color: #5a2c00;
  border-radius: 12px;
  padding: 20px;
  margin: 24px 0;
}
.doc-draft-notice h2 {
  margin-top: 0;
  font-size: 1.1rem;
}
.doc-index {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
}
.doc-index-cards li {
  background: var(--white, #fff);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: var(--shadow, 0 10px 30px rgba(0, 0, 0, 0.08));
  display: grid;
  gap: 4px;
}
.doc-index-summary {
  font-size: 0.95rem;
}
.doc-index-meta {
  font-size: 0.8rem;
  opacity: 0.75;
}
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 20px;
  font-size: 0.9rem;
}
.breadcrumb li + li::before {
  content: '/\00a0';
  opacity: 0.6;
}
.navbar-solid {
  background: var(--white, #fff);
  box-shadow: var(--shadow, 0 10px 30px rgba(0, 0, 0, 0.08));
}
.service-detail-price .service-price {
  font-size: 1.4rem;
}

/* --- Gallery figures --------------------------------------------------- */
.gallery-item figcaption {
  padding: 8px 12px;
  font-size: 0.9rem;
  background: var(--white, #fff);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-photo,
.about-photo {
  max-width: 100%;
  border-radius: 16px;
  display: block;
}
.about-photo {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.hero-photo {
  max-height: 500px;
  object-fit: contain;
}

/* --- Layout safety ----------------------------------------------------
   Two defects this prevents: long unbroken strings (uploaded file names,
   customer-supplied dog names) pushing the page wider than the viewport,
   and any single element establishing a horizontal scrollbar on the body. */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
body {
  overflow-wrap: break-word;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
img, video, table, pre {
  max-width: 100%;
}
.testimonial-card blockquote {
  margin: 0;
}

/* --- Reduced motion ----------------------------------------------------
   Anything decorative stops. Note the carousel's transform transition is
   included: an unexpected slide is motion too. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .paw-prints {
    display: none;
  }
}

/* --- Forced colours / high contrast ------------------------------------ */
@media (forced-colors: active) {
  .btn,
  .carousel-dot,
  .social-link {
    border: 1px solid currentColor;
  }
}

/* --- Portal consent controls ------------------------------------------- */
.consent-fieldset {
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 18px;
}
.consent-fieldset legend {
  font-weight: 700;
  padding: 0 6px;
  font-size: 0.95rem;
}
.required-marker {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: #7a1f18;
  color: #fff;
}

/* Footer body links (policies, accessibility) inherit the footer's own text
   colour rather than the faint 50%-alpha the copyright line used to set. */
.footer p a,
.footer-bottom a {
  color: #ffffff;
  text-decoration: underline;
}
.footer p a:hover,
.footer-bottom a:hover {
  color: var(--accent);
}

/* --- Mobile navigation ---------------------------------------------------
   The drawer breakpoint was 768px, so 769-968px viewports — landscape phones
   and portrait tablets — kept the horizontal nav, whose links wrapped onto
   three rows and produced a 197px tall navbar over a 375px tall viewport. It
   was raised to 968px to match the layout breakpoint.

   It is now 1200px. Seven links plus the wordmark need ~1120px of the
   1152px content box; below that the row either wrapped or ran off the
   right edge, clipping the "Request a booking" CTA. The drawer takes over
   while the horizontal row still fits comfortably rather than after it has
   already broken. */
@media (max-width: 1200px) {
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(280px, 80vw);
    height: 100vh;
    height: 100dvh;
    background: var(--white);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 8px;
    /* Scrollable, and clear of the notch/home indicator: at 375px tall the
       links do not fit and must not be unreachable. */
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(72px + env(safe-area-inset-top)) 32px calc(32px + env(safe-area-inset-bottom));
    box-shadow: var(--shadow-lg);
    transition: right var(--transition);
  }

  .nav-links.active {
    right: 0;
  }

  .nav-links a::after {
    display: none;
  }

  /* Label left edges line up down the drawer: the pill carries a 24px inset
     of its own, so the plain links have to match it rather than sit at the
     6px they use in the horizontal row. */
  .nav-links a:not(.nav-cta) {
    padding: 12px 24px;
  }

  .nav-links .nav-cta {
    margin-top: 6px;
  }

  /* The close affordance must stay above the drawer it controls. */
  .nav-toggle {
    position: relative;
    z-index: 1002;
  }
  .nav-links {
    z-index: 1001;
  }
}

/* --- Mobile form controls ------------------------------------------------
   iOS Safari zooms the viewport whenever a focused input renders below 16px,
   which then leaves the rest of the page scrolled sideways. Every text control
   is held at 16px on small screens. */
@media (max-width: 968px) {
  input,
  textarea,
  select {
    font-size: 16px;
  }
}

/* --- Small-screen hero ---------------------------------------------------
   At 320x568 the hero's 120px top padding plus a 2.5rem title pushed the
   primary "Request a booking" button below the fold, so the one action the
   page exists for was invisible on the smallest supported phone. Tightening
   the vertical rhythm on short viewports brings it back above the fold
   without changing the desktop composition. */
@media (max-width: 480px), (max-height: 600px) {
  .hero {
    min-height: auto;
    padding: 84px 20px 40px;
  }
  .hero-title {
    font-size: clamp(1.9rem, 8vw, 2.4rem);
    margin-bottom: 12px;
  }
  .hero-subtitle {
    font-size: 0.98rem;
    margin-bottom: 16px;
  }
  .hero-eyebrow {
    margin-bottom: 6px;
  }
  .hero-buttons {
    gap: 10px;
  }
  .hero-assurances {
    margin-top: 18px;
    font-size: 0.9rem;
  }
}

/* --- Enquiry form ------------------------------------------------------
   The contact section used to render contact DETAILS only, so while the
   owner's verified details are absent a visitor had no way to reach the
   business at all. This form is the guest route in — no account required. */
.contact-grid {
  align-items: start;
}
.contact-form-wrap {
  background: var(--white, #fff);
  border-radius: var(--radius, 20px);
  padding: 28px;
  box-shadow: var(--shadow-lg, 0 10px 40px rgba(0, 0, 0, 0.12));
  color: var(--text, #2d2a26);
  text-align: left;
}
.contact-form-wrap h3 {
  margin-bottom: 8px;
}
.contact-form-wrap select {
  width: 100%;
  padding: 12px 14px;
  min-height: 44px;
  border: 2px solid rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  font: inherit;
  background: var(--white, #fff);
  color: var(--text, #2d2a26);
}
.contact-side {
  display: grid;
  gap: 20px;
}

/* Honeypot. Kept out of sight and out of the accessibility tree without
   display:none, which some bots detect and skip. */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}