@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Handlee&display=swap');

:root {
  --green: #0b2f4f;
  --green-2: #16476f;
  --cream: #f7f1e8;
  --tan: #e8ddcc;
  --text: #1e241e;
  --muted: #6a6f65;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, Arial, sans-serif; color: var(--text); background: #fffaf4; }

.mockup-bar { background: var(--green); color: white; text-align: center; padding: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }

.site-header { height: 96px; background: white; display: flex; justify-content: space-between; align-items: center; padding: 0 7%; box-shadow: 0 8px 30px rgba(0,0,0,.08); position: sticky; top: 0; z-index: 10; }
.brand-wrap { display: flex; align-items: center; gap: 18px; }
.client-logo { width: 72px; height: 72px; object-fit: contain; }
.brand-wrap h1 { margin: 0; color: var(--green); font-size: 42px; line-height: .9; }
.brand-wrap p { margin: 5px 0 0; font-family: Handlee, cursive; font-size: 20px; }
nav { display: flex; gap: 28px; }
nav a { color: #111; text-decoration: none; text-transform: uppercase; font-weight: 800; font-size: 13px; }
nav a:hover { color: var(--green-2); }
.book-nav { padding: 12px 16px; border-radius: 8px; background: var(--green); color: white; box-shadow: 0 8px 18px rgba(11,47,79,.22); }
nav .book-nav:hover { color: white; background: var(--green-2); transform: translateY(-1px); }

.hero { min-height: 720px; background: linear-gradient(90deg, rgba(255,250,244,.96) 0%, rgba(255,250,244,.86) 38%, rgba(255,250,244,.42) 62%, rgba(255,250,244,.1) 100%), url('assets/710098167_122178172424600083_1392008586316661476_n.jpg'); background-size: cover; background-position: center 35%; background-repeat: no-repeat; display: flex; align-items: center; padding: 70px 7%; }
.hero-content { max-width: 540px; }
.hero h2 { color: var(--green); font-size: clamp(70px, 12vw, 135px); margin: 0; line-height: .8; font-weight: 900; }
.hero h3 { font-family: Handlee, cursive; font-size: clamp(32px, 5vw, 54px); margin: 16px 0; font-weight: 400; }
.hero span { display: block; font-size: 24px; margin: 22px 0; }
.hero-tag { font-size: 28px; line-height: 1.35; }
.note-card { background: rgba(239,231,218,.92); border-radius: 18px; padding: 20px 24px; max-width: 430px; box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.book-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 22px; padding: 16px 26px; border-radius: 8px; background: var(--green); color: white; text-decoration: none; text-transform: uppercase; font-weight: 900; letter-spacing: .5px; box-shadow: 0 12px 24px rgba(11,47,79,.26); }
.book-btn:hover { background: var(--green-2); transform: translateY(-1px); }

.split-section { display: grid; grid-template-columns: 1.05fr 1.2fr .9fr; gap: 48px; padding: 70px 7%; align-items: center; background: #fff; }
.image-card { min-height: 280px; border-radius: 22px; background-size: cover; background-position: center; box-shadow: 0 16px 36px rgba(0,0,0,.11); }
.dog-photo { aspect-ratio: 3 / 2; min-height: auto; background-image: url('assets/D759CB8F-D00D-42A3-A224-B8560F141B4B.png'); background-position: center; }
.eyebrow { text-transform: uppercase; color: var(--green); font-weight: 900; letter-spacing: 1px; }
.about-copy h2, .area-section h2 { font-size: 36px; margin: 0 0 18px; }
.about-copy p:not(.eyebrow), .area-section p { line-height: 1.7; color: #303630; }
.about-copy p:not(.eyebrow) { margin: 0 0 14px; }
.about-copy p:last-child { margin-bottom: 0; }
.services-list { border-left: 1px solid var(--tan); padding-left: 45px; }
.service-accordion { display: grid; gap: 10px; }
.service-accordion details { border-bottom: 1px solid var(--tan); }
.service-accordion summary { position: relative; list-style: none; cursor: pointer; padding: 15px 34px 15px 0; font-size: 20px; font-weight: 800; color: var(--green); }
.service-accordion summary::-webkit-details-marker { display: none; }
.service-accordion summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--cream); color: var(--green); display: grid; place-items: center; font-size: 20px; line-height: 1; }
.service-accordion details[open] summary::after { content: '-'; }
.service-accordion p { margin: 0; padding: 0 0 16px; color: var(--muted); line-height: 1.6; }

.pricing-section { padding: 70px 7%; background: #fffaf4; border-top: 1px solid var(--tan); }
.section-heading { max-width: 720px; margin-bottom: 34px; }
.section-heading h2 { margin: 0 0 12px; color: var(--green); font-size: 42px; line-height: 1.1; }
.section-heading p:last-child { margin: 0; color: #303630; line-height: 1.7; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.pricing-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 235px; padding: 24px; border: 1px solid var(--tan); border-radius: 8px; background: #fff; box-shadow: 0 12px 28px rgba(11,47,79,.08); }
.pricing-card div { display: grid; gap: 8px; }
.price-label { margin: 0; color: var(--text); font-weight: 900; line-height: 1.25; }
.pricing-card h3 { margin: 0; color: var(--green); font-size: 54px; line-height: .95; }
.pricing-card span { display: inline-flex; width: fit-content; padding: 7px 10px; border-radius: 999px; background: rgba(11,47,79,.13); color: var(--green); font-size: 13px; font-weight: 900; text-transform: uppercase; }
.pricing-card p:last-child { margin: 22px 0 0; color: var(--muted); line-height: 1.55; }
.featured-price { background: linear-gradient(180deg, #ffffff 0%, #edf2f6 100%); border-color: rgba(11,47,79,.35); box-shadow: 0 16px 34px rgba(11,47,79,.15); }
.overnight-card { border-width: 2px; }
.overnight-highlights { display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; margin-top: 28px; padding: 30px; border: 1px solid rgba(11,47,79,.28); border-radius: 8px; background: #fff; box-shadow: 0 14px 32px rgba(11,47,79,.1); }
.overnight-highlights h3 { margin: 0 0 12px; color: var(--green); font-size: 30px; line-height: 1.15; }
.overnight-highlights p:last-child { margin: 0; color: #303630; line-height: 1.65; }
.overnight-highlights ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 22px; margin: 0; padding: 0; list-style: none; }
.overnight-highlights li { position: relative; padding-left: 26px; color: var(--text); line-height: 1.45; font-weight: 600; }
.overnight-highlights li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 900; }
.pricing-cta { margin-top: 28px; text-align: center; }

.area-section { display: grid; grid-template-columns: .75fr 1.45fr; gap: 45px; padding: 70px 7%; background: var(--cream); align-items: center; }
.area-section h2 span { display: block; font-family: Handlee, cursive; color: var(--green-2); font-size: 42px; font-weight: 400; }
.area-list { padding-left: 20px; line-height: 2; }
.area-list li::marker { content: '🐾 '; }
.map-embed { height: 320px; border-radius: 22px; overflow: hidden; background: #e4ebf2; box-shadow: 0 16px 34px rgba(11,47,79,.14), inset 0 0 0 1px #c9d6e2; }
.map-embed iframe { display: block; width: 100%; height: 100%; border: 0; }

.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 34px 7%; background: #fff; border-top: 1px solid var(--tan); border-bottom: 1px solid var(--tan); }
.feature-card { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; padding: 22px; border: 1px solid var(--tan); border-radius: 8px; background: #fffaf4; text-align: left; box-shadow: 0 8px 22px rgba(11,47,79,.08); }
.feature-icon { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(11,47,79,.13); color: var(--green); font-size: 22px; }
.features strong { display: block; color: var(--green); font-size: 16px; line-height: 1.2; }
.features p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }

.gallery { padding: 48px 7% 64px; background: #fffaf4; text-align: center; }
.gallery h2 { margin-top: 0; letter-spacing: 1px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gallery-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,.1); background: var(--tan); }

.reviews-section { padding: 64px 7%; background: #fff; border-top: 1px solid var(--tan); text-align: center; }
.reviews-section .section-heading { margin: 0 auto 28px; }
.review-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 8px; text-align: left; }
.review-panels article { padding: 24px; border: 1px solid var(--tan); border-radius: 8px; background: #fffaf4; box-shadow: 0 10px 24px rgba(11,47,79,.08); }
.review-panels span { display: inline-block; margin-bottom: 12px; color: var(--green); font-size: 12px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.review-panels strong { display: block; color: var(--green); font-size: 18px; line-height: 1.25; }
.review-panels p { margin: 12px 0 0; color: var(--muted); line-height: 1.6; }
.reviews-note { margin: 22px 0 0; color: var(--muted); font-size: 14px; font-weight: 700; }

footer { display: grid; grid-template-columns: .85fr 1.35fr .8fr; gap: 42px; align-items: center; padding: 58px 7%; background: linear-gradient(135deg, #ffffff 0%, #fff7ed 55%, #eaf2e5 100%); border-top: 1px solid var(--tan); }
.footer-brand { display: flex; gap: 18px; align-items: center; min-width: 0; }
.footer-brand img { width: 96px; height: 96px; object-fit: contain; }
.footer-brand strong { color: var(--green); font-size: 46px; line-height: .9; }
.footer-brand p { font-family: Handlee, cursive; margin: 6px 0 0; font-size: 20px; }
.footer-message h2 { margin: 0 0 14px; color: var(--green); font-size: 32px; line-height: 1.15; }
.footer-message p:last-child { margin: 0; color: #303630; line-height: 1.65; }
.footer-actions { display: grid; gap: 14px; justify-items: stretch; }
.footer-actions span, .phone-link { display: block; padding: 14px 16px; border: 1px solid var(--tan); border-radius: 8px; background: rgba(255,255,255,.7); color: var(--text); text-decoration: none; font-weight: 800; text-align: center; }
.facebook-btn { background: var(--green); color: white; text-decoration: none; padding: 16px 20px; border-radius: 8px; text-transform: uppercase; font-weight: 900; text-align: center; box-shadow: 0 10px 20px rgba(11,47,79,.25); }
.facebook-btn:hover, .phone-link:hover { transform: translateY(-1px); }

@media (max-width: 900px) {
  .site-header { height: auto; padding: 20px; flex-direction: column; gap: 15px; }
  nav { flex-wrap: wrap; justify-content: center; gap: 14px; }
  .book-nav { padding: 10px 14px; }
  .split-section, .area-section, footer { grid-template-columns: 1fr; }
  .services-list { border-left: 0; padding-left: 0; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .overnight-highlights { grid-template-columns: 1fr; }
  .overnight-highlights ul { grid-template-columns: 1fr; }
  .features, .gallery-grid, .review-panels { grid-template-columns: repeat(2, 1fr); }
  footer { padding: 42px 20px; text-align: center; }
  .footer-brand { justify-content: center; }
}

@media (max-width: 560px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  .site-header, .hero, .split-section, .pricing-section, .area-section, .features, .gallery, .reviews-section, footer { width: 100vw; max-width: 100vw; }
  .site-header { padding: 18px 14px; }
  .brand-wrap { gap: 12px; }
  .client-logo { width: 62px; height: 62px; }
  .brand-wrap h1 { font-size: 38px; }
  .brand-wrap p { font-size: 18px; }
  nav { display: grid; grid-template-columns: repeat(4, auto); gap: 10px 12px; justify-content: center; width: 100%; }
  nav a { font-size: 12px; }
  .book-nav { grid-column: span 2; justify-self: center; padding: 10px 16px; }
  .hero { min-height: 615px; padding: 46px 28px; background-size: cover; background-position: 58% center; }
  .hero-content { max-width: 100%; }
  .hero h3 { font-size: 30px; line-height: 1.15; }
  .hero-tag { font-size: 25px; }
  .book-btn { width: 100%; max-width: 280px; }
  .split-section > *, .pricing-grid > *, .features > *, .section-heading, .hero-content { min-width: 0; }
  .about-copy h2, .area-section h2 { font-size: 32px; }
  .hero h3, .hero-tag, .about-copy p:not(.eyebrow), .area-section p, .pricing-card p, .section-heading p, .section-heading h2 { overflow-wrap: anywhere; }
  .pricing-section { padding: 48px 20px; }
  .section-heading h2 { font-size: 30px; }
  .pricing-card h3 { font-size: 50px; }
  .overnight-highlights { padding: 22px; }
  .overnight-highlights h3 { font-size: 25px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card { min-height: 0; }
  .features { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .reviews-section { padding: 48px 20px; }
  .review-panels { grid-template-columns: 1fr; }
}