:root {
  --green:#284135;
  --cream:#eee4d3;
  --gold:#C9A66B;
  --dark:#2F2F2F;
  --white:#FFFFFF;
}

html, body {
  height:100%;
}

body {
  background:var(--cream);
  color:var(--dark);
  font-family:"Lato", sans-serif;
  line-height:1.6;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

h1,
h2,
h3 {
  font-family:"Playfair Display", serif;
}

main {
  width:min(1200px,90%);
  margin:auto;
  flex:1 0 auto;
}

main.main-full {
  width: 100%;
  max-width: 1600px;
}

.container {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.navbar {
  background:var(--green);
  padding:1.5rem 5%;
  display:flex;
  justify-space:between;
  align-items:center;
}
.logo {
  color:white;
  font-family:"Playfair Display", serif;
  font-size:1.5rem;
}
.nav-links {
  display:flex;
  gap:1.5rem;
  align-items:center;
}
.nav-links a {
  color:white;
}
.nav-links a:hover {
  color:var(--gold);
}
.nav-social {
  display:flex;
  align-items:center;
  color:white;
}
.nav-social svg {
  transition:stroke .2s;
}
.nav-social:hover {
  color:var(--gold);
}

.hero {
  min-height:80vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:center;
  margin-top:-40px;
}
.eyebrow {
  color:var(--green);
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:2px;
}
.hero h1 {
  font-size:clamp(2.5rem,5vw,4.5rem);
  line-height:1.1;
  margin:1rem 0;
}
.hero-description {
  font-size:1.2rem;
  margin-bottom:2rem;
}
.hero-photo img {
  width:100%;
  border-radius:20px;
}

.button {
  display:inline-block;
  background:var(--green);
  color:white;
  padding:.9rem 2rem;
  border-radius:8px;
}
.button:hover {
  background:var(--gold);
}

.trust {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  padding:4rem 0;
  margin-top: -80px;
  margin-bottom: -30px;
}
.trust-item {
  background:white;
  padding:2rem;
  border-radius:13px;
}

.booking-banner {
  padding:0 0 3rem;
  text-align:center;
}
.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}
.card {
  background:white;
  padding:2rem;
  border-radius:15px;
}
.services-preview {
  padding:3rem 0;
}
.services-preview h2 {
  margin-bottom:1.5rem;
}
.footer {
  background:var(--green);
  color:white;
  text-align:center;
  padding:3rem;
  flex-shrink:0;
}

@media(max-width:800px) {
  .hero {
    grid-template-columns:1fr;
    text-align:center;
  }
  .trust {
    grid-template-columns:1fr;
  }
  .cards {
    grid-template-columns:1fr;
  }
  .navbar {
    flex-direction:column;
    gap:1rem;
  }
  .nav-links {
    flex-wrap:wrap;
    justify-content:center;
  }
}

.about-preview {
  padding: 5rem 0 0;
}
.about-card {
  background:white;
  border-radius:20px;
  padding:4rem;
  display:flex;
  align-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}
.about-text {
  max-width:none;
}
.about-text h2 {
  font-size:2.5rem;
  margin-bottom:1rem;
}
.about-text p {
  font-size:1.1rem;
  margin-bottom:2rem;
}
.about-text a {
  color:var(--green);
  font-weight:bold;
}
.about-text a:hover {
  color:var(--gold);
}

.plan-intro {
  text-align:center;
  padding:4rem 0 2rem;
}
.plan-intro h1 {
  font-size:clamp(2rem,4vw,3rem);
  margin-bottom:.75rem;
}
.plan-intro p {
  font-size:1.1rem;
  max-width:600px;
  margin:0 auto;
  color:var(--dark);
}

.plan-builder {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:2.5rem;
  align-items:start;
  padding-bottom:5rem;
}

.plan-form {
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.plan-section {
  background:var(--white);
  border-radius:20px;
  padding:2rem;
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
}
.plan-section h2 {
  font-size:1.4rem;
  margin-bottom:1.25rem;
  color:var(--green);
}

.pet-card {
  border:1px solid rgba(40,65,53,0.15);
  border-radius:15px;
  padding:1.5rem;
  margin-bottom:1.25rem;
  position:relative;
}
.pet-card:last-of-type {
  margin-bottom:0;
}
.pet-card-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1rem;
}
.pet-card-header h3 {
  font-size:1.1rem;
  color:var(--green);
}
.remove-pet {
  background:none;
  border:none;
  color:var(--dark);
  opacity:.5;
  cursor:pointer;
  font-size:.9rem;
  text-decoration:underline;
}
.remove-pet:hover {
  opacity:1;
  color:#b23b3b;
}

.form-row {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
  margin-bottom:1rem;
}
.form-field {
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.form-field label {
  font-weight:bold;
  font-size:.9rem;
}
.form-field input[type="text"],
.form-field select,
.form-field input[type="date"] {
  padding:.7rem .9rem;
  border:1px solid rgba(40,65,53,0.25);
  border-radius:8px;
  font-family:"Lato", sans-serif;
  font-size:1rem;
  background:var(--white);
  color:var(--dark);
}
.form-field input:focus,
.form-field select:focus {
  outline:2px solid var(--gold);
  outline-offset:1px;
}

.needs-group {
  margin-bottom:1rem;
}
.needs-group p {
  font-weight:bold;
  font-size:.9rem;
  margin-bottom:.5rem;
}
.needs-checkboxes {
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}
.needs-checkboxes label {
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.95rem;
}

.inquiry-note {
  background:var(--cream);
  border-left:4px solid var(--gold);
  padding:.75rem 1rem;
  border-radius:8px;
  font-size:.9rem;
  margin-top:.5rem;
  display:none;
}
.inquiry-note.visible {
  display:block;
}

.btn-add-pet {
  background:none;
  border:2px dashed var(--green);
  color:var(--green);
  padding:.9rem;
  width:100%;
  border-radius:12px;
  font-weight:bold;
  cursor:pointer;
  font-size:1rem;
  transition:background .2s, color .2s;
}
.btn-add-pet:hover {
  background:var(--green);
  color:white;
}

.date-range {
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
.date-range .form-field {
  flex:1;
  min-width:150px;
}
.date-range-arrow {
  font-size:1.3rem;
  color:var(--gold);
  padding-top:1.5rem;
}

.toggle-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 0;
  border-top:1px solid rgba(40,65,53,0.1);
}
.toggle-row:first-child {
  border-top:none;
  padding-top:0;
}
.toggle-row-label strong {
  display:block;
  margin-bottom:.15rem;
}
.toggle-row-label span {
  font-size:.85rem;
  opacity:.75;
}

.switch {
  position:relative;
  display:inline-block;
  width:48px;
  height:26px;
  flex-shrink:0;
}
.switch input {
  opacity:0;
  width:0;
  height:0;
}
.switch-track {
  position:absolute;
  cursor:pointer;
  inset:0;
  background:#ccc;
  border-radius:999px;
  transition:.2s;
}
.switch-track::before {
  content:"";
  position:absolute;
  height:20px;
  width:20px;
  left:3px;
  bottom:3px;
  background:white;
  border-radius:50%;
  transition:.2s;
}
.switch input:checked + .switch-track {
  background:var(--green);
}
.switch input:checked + .switch-track::before {
  transform:translateX(22px);
}

.stepper {
  display:flex;
  align-items:center;
  gap:.75rem;
}
.stepper button {
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid var(--green);
  background:white;
  color:var(--green);
  font-size:1.1rem;
  cursor:pointer;
  line-height:1;
}
.stepper button:hover {
  background:var(--green);
  color:white;
}
.stepper span {
  min-width:90px;
  text-align:center;
  font-weight:bold;
}

.estimate-panel {
  background:var(--green);
  color:white;
  border-radius:20px;
  padding:2rem;
  position:sticky;
  top:2rem;
}
.estimate-panel h2 {
  color:white;
  font-size:1.4rem;
  margin-bottom:.25rem;
}

.estimate-line {
  display:flex;
  justify-content:space-between;
  font-size:.9rem;
  padding:.4rem 0;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.estimate-line.discount {
  color:var(--gold);
}

.estimate-total {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-top:1.25rem;
  padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,0.25);
}
.estimate-total span:first-child {
  font-size:1rem;
}
.estimate-price {
  font-family:"Playfair Display", serif;
  font-size:2.5rem;
}

.btn-request {
  display:block;
  width:100%;
  text-align:center;
  background:var(--gold);
  color:var(--green);
  font-weight:bold;
  padding:1rem;
  border:none;
  border-radius:10px;
  margin-top:1.5rem;
  cursor:pointer;
  font-size:1rem;
  transition:background .2s, transform .15s;
}
.btn-request:hover {
  background:white;
}
.btn-request:disabled {
  background:rgba(255,255,255,0.3);
  color:rgba(255,255,255,0.6);
  cursor:not-allowed;
}

.estimate-note {
  font-size:.8rem;
  opacity:.7;
  text-align:center;
  margin-top:.75rem;
}

.availability-warning {
  color:var(--gold);
  font-size:.85rem;
  text-align:center;
  margin-top:.75rem;
}
.availability-warning a {
  color:white;
  text-decoration:underline;
}

.request-section {
  background:var(--white);
  border-radius:20px;
  padding:2rem;
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
  margin-top:1.5rem;
  display:none;
}
.request-section.visible {
  display:block;
}
.request-section h2 {
  color:var(--green);
  margin-bottom:.5rem;
}
.request-section p {
  margin-bottom:1.25rem;
  font-size:.95rem;
}
.request-section textarea {
  width:100%;
  padding:.9rem;
  border:1px solid rgba(40,65,53,0.25);
  border-radius:8px;
  font-family:"Lato", sans-serif;
  font-size:1rem;
  resize:vertical;
  min-height:100px;
}
.hp-field {
  position:absolute;
  left:-9999px;
  top:-9999px;
}
.checkbox-field {
  margin-top:1.25rem;
  padding:.75rem;
  border-radius:8px;
  transition:box-shadow .2s;
}
.checkbox-label {
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  font-size:.9rem;
  cursor:pointer;
}
.checkbox-label input {
  margin-top:.2rem;
  flex-shrink:0;
}
.checkbox-field.highlight {
  box-shadow:0 0 0 2px #b23b3b;
}

@media(max-width:900px) {
  .plan-builder {
    grid-template-columns:1fr;
  }
  .estimate-panel {
    position:static;
  }
  .form-row {
    grid-template-columns:1fr;
  }
}

.services-intro {
  text-align:center;
  padding:4rem 0 1rem;
}
.services-intro h1 {
  font-size:clamp(2rem,4vw,3rem);
  margin-bottom:.75rem;
}
.services-intro p {
  font-size:1.1rem;
  max-width:650px;
  margin:0 auto;
}

.rate-cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  padding:3rem 0;
}
.rate-card {
  background:var(--white);
  border-radius:20px;
  padding:2.5rem 2rem;
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
  text-align:center;
}
.rate-card.featured {
  border:2px solid var(--gold);
}
.rate-card h3 {
  font-size:1.3rem;
  color:var(--green);
  margin-bottom:.5rem;
}
.rate-price {
  font-family:"Playfair Display", serif;
  font-size:2.25rem;
  color:var(--dark);
  margin-bottom:.25rem;
}
.rate-price span {
  font-size:1rem;
  font-family:"Lato", sans-serif;
  color:var(--dark);
  opacity:.7;
}
.rate-card ul {
  list-style:none;
  margin-top:1.25rem;
  text-align:left;
}
.rate-card ul li {
  padding:.4rem 0;
  border-bottom:1px solid rgba(40,65,53,0.08);
  font-size:.95rem;
}
.rate-card ul li:last-child {
  border-bottom:none;
}
.rate-card.quote-only .rate-price {
  font-size:1.6rem;
  color:var(--green);
}

.extras-section {
  background:var(--white);
  border-radius:20px;
  padding:3rem;
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
  margin-bottom:3rem;
}
.extras-section h2 {
  color:var(--green);
  margin-bottom:1.5rem;
  text-align:center;
}
.extras-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2rem;
}
.extra-item h4 {
  color:var(--green);
  margin-bottom:.35rem;
  font-size:1.05rem;
}
.extra-item p {
  font-size:.95rem;
}

.discount-banner {
  background:var(--green);
  color:white;
  border-radius:20px;
  padding:2.5rem;
  text-align:center;
  margin-bottom:3rem;
}
.discount-banner h2 {
  color:var(--gold);
  margin-bottom:.5rem;
}
.discount-banner p {
  max-width:600px;
  margin:0 auto;
}

@media(max-width:800px) {
  .rate-cards {
    grid-template-columns:1fr;
  }
  .extras-grid {
    grid-template-columns:1fr;
  }
}

.calendar-legend {
  display:flex;
  gap:1.5rem;
  justify-content:center;
  margin-bottom:2rem;
  flex-wrap:wrap;
}
.legend-item {
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.9rem;
}
.legend-swatch {
  width:16px;
  height:16px;
  border-radius:4px;
  display:inline-block;
}
.legend-swatch.green { background:#4c8c5c; }
.legend-swatch.yellow { background:#d9a441; }
.legend-swatch.red { background:#b23b3b; }
.legend-swatch.unknown { background:#ddd; }

.calendar-nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1.5rem;
}
.calendar-nav button {
  background:var(--green);
  color:white;
  border:none;
  padding:.6rem 1.2rem;
  border-radius:8px;
  cursor:pointer;
  font-family:"Lato", sans-serif;
}
.calendar-nav button:hover {
  background:var(--gold);
}
.calendar-month-label {
  font-family:"Playfair Display", serif;
  font-size:1.5rem;
  color:var(--green);
}

.calendar-grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:.5rem;
}
.calendar-day-name {
  text-align:center;
  font-weight:bold;
  font-size:.8rem;
  opacity:.7;
  padding-bottom:.5rem;
}
.calendar-day {
  aspect-ratio:1;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  background:white;
}
.calendar-day.empty {
  background:transparent;
}
.calendar-day.green { background:#e3f0e6; border:2px solid #4c8c5c; }
.calendar-day.yellow { background:#fbf1de; border:2px solid #d9a441; }
.calendar-day.red { background:#f6e3e3; border:2px solid #b23b3b; }
.calendar-day.unknown { background:#f4f4f4; border:2px solid #ddd; color:#999; }

.calendar-status-note {
  text-align:center;
  margin-top:1.5rem;
  font-size:.9rem;
  opacity:.75;
}

.placeholder-image {
  background:repeating-linear-gradient(45deg,#ddd,#ddd 10px,#eee 10px,#eee 20px);
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#888;
  font-weight:bold;
  min-height:250px;
  width:100%;
}
.about-photo {
  width:100%;
  min-height:250px;
  object-fit:cover;
  border-radius:15px;
  display:block;
}
.photo-frame {
  --frame-color: var(--cream);
  background:var(--frame-color);
  border-radius:20px;
  padding:1.25rem;
  display:flex;
}
.photo-frame img {
  width:100%;
  min-height:250px;
  object-fit:cover;
  border-radius:12px;
  display:block;
}
.about-gallery {
  margin-top:2rem;
  margin-bottom:2rem;
}
.policies-section {
  background:var(--white);
  border-radius:20px;
  padding:2.5rem;
  margin:3rem 0;
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
}
.policies-section h2 {
  color:var(--green);
  margin-bottom:1rem;
}
.policies-section ul {
  padding-left:1.2rem;
}
.policies-section li {
  margin-bottom:.6rem;
}

.about-hero-text {
  width: 90%;
  max-width: 2200px; 
  margin: 0 auto;
  padding: 3rem 1.5rem 1.5rem;
}

.about-hero-text h1 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  text-align: center;
  margin-bottom: 2rem;
}

.about-hero-text p {
  font-size: 1.15rem;
  line-height: 1.6;
  margin-bottom: 0.25rem; 
  text-align: justify;     
}

.about-hero-text p + p {
  text-indent: 2rem;
}

@media (max-width: 768px) {
  .about-hero-text {
    width: 95%;
    padding: 2rem 1rem 1rem;
  }
  
  .about-hero-text p {
    text-align: left;
  }
}