:root {
  /* Lakewood Palette (Hex) */
  --lw-bg: #cdd4c0;
  --lw-dark-green: #373d20;
  --lw-mid-green: #617043;
  --lw-light-green: #acb894;
  --lw-gray: #747c92; /* Not actively used based on previous feedback, but defined */

  /* Semantic mapping */
  --background: var(--lw-bg);
  --foreground: var(--lw-dark-green);
  --primary: var(--lw-mid-green);
  --primary-foreground: var(--lw-bg);
  --secondary: var(--lw-light-green);
  --secondary-foreground: var(--lw-dark-green);
  --card-bg: #fff;
  --card-foreground: var(--lw-dark-green);
  --muted-foreground: var(
    --lw-dark-green
  ); /* Using dark green for muted text */
  --border-color: var(--lw-light-green);

  /* Fonts (Example: Lato) */
  --font-family: "Markazi Text", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif;
}

/* Base Styles & Smooth Scroll */
html {
  scroll-behavior: smooth;
  font-size: 16px; /* Base font size */
}

body {
  margin: 0;
  padding-top: 40px; /* Account for fixed banner height */
  font-family: var(--font-family);
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.6;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1,
h2,
h3 {
  margin-top: 0;
  margin-bottom: 0.5em;
  line-height: 1.3;
  font-weight: 700; /* Bold headings */
}

h1 {
  font-size: 2.5rem; /* Approx text-4xl */
}

h2 {
  font-size: 2rem; /* Approx text-3xl */
}

h3 {
  font-size: 1.5rem; /* Approx text-2xl */
}

p {
  margin-top: 0;
  margin-bottom: 1em;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a:hover {
  text-decoration: underline;
  color: var(--foreground);
}

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

/* Layout Utilities */
.container {
  width: 100%;
  max-width: 1280px; /* Example max-width, adjust as needed */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
}

section {
  padding-top: 4rem; /* py-16 */
  padding-bottom: 4rem; /* py-16 */
}

.block {
  display: block;
}
.rounded {
  border-radius: 0.5rem;
} /* rounded-lg */
.shadow {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
} /* shadow-xl */
.text-primary {
  color: var(--primary);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem; /* px-6 py-3 */
  border-radius: 0.375rem; /* rounded-md */
  font-size: 1rem; /* text-base */
  font-weight: 500; /* font-medium */
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out,
    color 0.2s ease-in-out;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
}

.btn-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

.btn-primary:hover {
  background-color: rgba(113, 119, 68, 0.9); /* primary/90 */
  border-color: rgba(113, 119, 68, 0.9);
  color: var(--primary-foreground);
  text-decoration: none;
}

.btn-secondary {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  border-color: var(--border-color);
}

.btn-secondary:hover {
  background-color: rgba(188, 189, 139, 0.8); /* secondary/80 */
  border-color: rgba(188, 189, 139, 0.8);
  color: var(--secondary-foreground);
  text-decoration: none;
}

.full-width {
  width: 100%;
}

/* Banner */
.banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  padding: 0.5rem 1rem; /* py-2 */
  text-align: center;
  font-size: 1.25rem; /* text-sm */
  font-weight: 500; /* font-medium */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* shadow-md */
}

.banner-link {
  text-decoration: underline;
  color: var(--secondary-foreground);
}

.banner-link:hover {
  color: var(--primary);
}

.main-content {
  /* Optional: could be used if further layout adjustments needed */
}

/* Hero Section */
.hero-section {
  background-color: var(--background);
  padding-top: 5rem; /* Adjusted padding due to fixed banner */
  padding-bottom: 5rem;
}

.hero-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  gap: 2rem;
}

.hero-text {
  flex: 1 1 50%; /* Take half width, allow shrinking/growing */
  min-width: 300px; /* Prevent text getting too squished */
}

.hero-text h1 {
  /* Already styled by base h1 */
}

.hero-text p {
  font-size: 1.25rem; /* text-xl */
  color: var(--foreground);
  max-width: 36rem; /* max-w-lg */
  margin-top: 1rem;
}

.hero-buttons {
  margin-top: 2rem;
}

.hero-buttons .btn + .btn {
  margin-left: 1rem; /* ml-4 */
}

.hero-image {
  flex: 1 1 40%; /* Take slightly less than half */
  min-width: 300px;
  margin-top: 2.5rem; /* mt-10 on small screens */
}

/* Showcase Section */
.showcase-section {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header h2 {
  /* Use base h2 */
}

.section-header p {
  max-width: 42rem; /* max-w-2xl */
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  font-size: 1.25rem; /* text-xl */
  color: var(--secondary); /* Lighter text on dark bg */
}

.showcase-grid {
  display: grid;
  gap: 2rem; /* gap-8 */
  grid-template-columns: repeat(
    auto-fit,
    minmax(300px, 1fr)
  ); /* Responsive grid */
}

/* Card Styles (Showcase & Pricing) */
.card {
  background-color: var(--card-bg);
  color: var(--card-foreground);
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-img {
  width: 100%;
  height: 16rem; /* h-64 */
  object-fit: cover;
}

.card-header {
  padding: 1.5rem; /* p-6 */
}

.card-header h3 {
  font-size: 1.5rem; /* Approx text-2xl */
}

.card-header p {
  color: var(--muted-foreground);
  margin-bottom: 0;
}

.card-content {
  padding: 1.5rem; /* p-6 */
  flex-grow: 1; /* Allows footer to stick to bottom */
}

.card-content h3 {
  font-size: 1.5rem; /* Approx text-2xl */
  margin-bottom: 0.5rem;
}

.card-content p {
  color: var(--muted-foreground);
  font-size: 1.125rem; /* text-xl */
  margin-bottom: 0;
}

.card-footer {
  padding: 1.5rem; /* p-6 */
  margin-top: auto; /* Pushes footer down in flex column */
}

/* Pricing Section Specifics */
.pricing-section {
  background-color: var(--background);
}

.pricing-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 2.5rem; /* mt-10 */
}

.pricing-card .card-header p {
  font-size: 1rem; /* Smaller description */
  margin-bottom: 0;
}

.pricing-card .price-info {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: baseline;
}

.pricing-card .price {
  font-size: 2.25rem; /* text-3xl */
  font-weight: 700; /* font-bold */
}

.pricing-card .price-term {
  margin-left: 0.25rem; /* ml-1 */
  color: #6b7280; /* gray-500 */
}

.pricing-card .price-original {
  color: #6b7280; /* gray-500 */
  margin-bottom: 1.5rem;
}

.pricing-card .price-strike {
  text-decoration: line-through;
  font-size: 1.125rem; /* text-xl */
  font-weight: 600; /* font-semibold */
}

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

.amenities-list li {
  margin-bottom: 0.5rem; /* Approx space-y-2 */
  display: flex;
  align-items: center;
}

.amenities-list li:last-child {
  margin-bottom: 0;
}

.amenities-list li::before {
  content: "✓"; /* Using text checkmark */
  color: var(--primary);
  margin-right: 0.5rem; /* mr-2 */
  font-weight: bold;
}

/* Contact Section */
.contact-section {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.contact-section .section-header p {
  color: var(--secondary); /* Lighter text on dark bg */
}

.contact-container {
  max-width: 56rem; /* max-w-3xl */
}

.tally-embed-container {
  margin-top: 3rem; /* mt-12 */
  background-color: var(
    --lw-mid-green
  ); /* Tally might need white bg if not truly transparent */
  border-radius: 0.5rem;
  padding: 1px; /* Contain iframe */
}

.tally-embed-container iframe {
  border-radius: 0.5rem;
}

/* Footer */
.footer {
  background-color: var(--primary);
  color: var(--primary-foreground);
  padding: 3rem 1rem; /* py-12 px-4 */
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.social-links {
  display: flex;
  gap: 1.5rem; /* space-x-6 */
  order: 2; /* Default order */
}

.social-links a {
  color: var(--primary-foreground);
}

.social-links a:hover {
  color: var(--secondary);
}

.copyright {
  text-align: center;
  order: 1; /* Default order */
  width: 100%; /* Take full width initially */
}

/* Responsive Adjustments */
@media (min-width: 768px) {
  /* md breakpoint */
  .hero-image {
    margin-top: 0;
  }
  .footer-container {
    flex-wrap: nowrap;
  }
  .social-links {
    order: 2;
  }
  .copyright {
    order: 1;
    width: auto; /* Allow social links to take space */
    margin-top: 0;
    text-align: left;
  }
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr); /* Force 2 columns */
  }
}