/* ── FIREFLY PARTICLES (hero only — footer uses canvas) ── */
/* ── ROOT VARIABLES ── */
:root {
  --tan:       #977347;
  --stone:     #9e9f98;
  --moss:      #7e7e5a;
  --silver:    #C5C7BD;
  --dark:      #3E3C2A;
  --cream:     #F7F1E1;
  --linen:     #E3D8C1;
  --gold:      #B4B33D;
  --rust:      #66371B;
  --warm:      #81754B;
  --deep:      #3F3F2C;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--dark);
  font-family: 'Libre Baskerville', Georgia, serif;
  overflow-x: hidden;
}

/* ── FIREFLY PARTICLE DOTS ── */
.ff {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe87a 0%, #B4B33D 40%, transparent 70%);
  animation: float linear infinite, glow ease-in-out infinite alternate;
}
@keyframes float {
  0%   { transform: translateY(100vh) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-10vh) translateX(var(--dx)); opacity: 0; }
}
@keyframes glow {
  from { box-shadow: 0 0 4px 2px rgba(180,179,61,0.5); }
  to   { box-shadow: 0 0 14px 6px rgba(255,232,122,0.9); }
}

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 3rem;
  background: rgba(63,60,42,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(180,179,61,0.25);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.nav-logo-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}
.nav-logo-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.nav-logo-text span {
  display: block;
  font-size: 0.65rem;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
}
.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}
.nav-links a {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--gold); }
.nav-cta {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--deep);
  background: var(--gold);
  border: none;
  padding: 0.55rem 1.4rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.nav-cta:hover { background: #ccc83f; transform: translateY(-1px); }

/* ── HERO ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 2rem 5rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 80%, rgba(102,55,27,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(127,126,90,0.12) 0%, transparent 60%),
    linear-gradient(175deg, #2e2d1e 0%, #3E3C2A 45%, #4a4735 100%);
  z-index: 1;
}

/* Silhouette tree line */
.hero::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 220px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath fill='%232a2919' d='M0,220 L0,160 Q20,100 40,150 Q55,90 70,140 Q85,60 100,130 Q110,80 120,140 Q140,70 160,145 Q175,95 190,150 Q210,85 230,155 Q250,100 265,158 Q280,88 295,152 Q315,75 335,150 Q355,95 370,148 Q388,82 405,150 Q420,90 435,152 Q455,72 475,148 Q492,88 510,152 Q528,76 545,148 Q560,92 578,155 Q595,82 612,152 Q632,70 652,148 Q670,90 688,152 Q710,78 730,148 Q748,88 768,152 Q786,74 805,148 Q825,90 840,152 Q858,78 875,148 Q895,88 912,152 Q928,72 945,148 Q962,90 978,152 Q998,76 1015,148 Q1030,88 1048,152 Q1068,74 1085,148 Q1102,90 1118,152 Q1138,76 1155,148 Q1172,90 1188,152 Q1208,74 1225,148 Q1242,90 1258,152 Q1278,76 1295,148 Q1312,90 1328,152 Q1348,74 1365,148 Q1382,90 1398,152 L1440,160 L1440,220 Z'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
  z-index: 2;
  pointer-events: none;
}

.hero-badge {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(180,179,61,0.4);
  padding: 0.4rem 1.2rem;
  margin-bottom: 1.8rem;
  opacity: 0;
  animation: fadeUp 0.8s 0.3s forwards;
}
.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 900;
  color: var(--cream);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: 0.15em;
  opacity: 0;
  animation: fadeUp 0.9s 0.5s forwards;
}
.hero h1 em {
  display: block;
  font-style: italic;
  color: var(--gold);
}
.hero-sub {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver);
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUp 0.9s 0.75s forwards;
}
.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.9s 0.95s forwards;
  position: relative;
  z-index: 3;
}
.btn-primary {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--deep);
  padding: 0.9rem 2.2rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-primary:hover {
  background: #ccc83f;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(180,179,61,0.35);
}
.btn-outline {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  color: var(--cream);
  padding: 0.9rem 2.2rem;
  border: 1px solid rgba(197,199,189,0.5);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, transform 0.15s;
}
.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── TRUST BAR ── */
.trust-bar {
  position: relative;
  z-index: 5;
  background: var(--rust);
  padding: 1rem 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}
.trust-item {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--linen);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.trust-dot {
  width: 5px; height: 5px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── SECTION BASE ── */
section { position: relative; z-index: 5; }

.section-label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--tan);
  display: block;
  margin-bottom: 0.75rem;
}
h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--dark);
}
h2 em { font-style: italic; color: var(--rust); }

/* ── ABOUT ── */
.about {
  background: var(--cream);
  padding: 7rem 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}
.about-text p {
  margin-top: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--warm);
}
.about-visual {
  position: relative;
}
.about-card {
  background: var(--dark);
  padding: 3rem;
  position: relative;
  overflow: hidden;
}
.about-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(180,179,61,0.2) 0%, transparent 70%);
}
.about-card-stat {
  font-family: 'Playfair Display', serif;
  font-size: 4.5rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}
.about-card-label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver);
  margin-top: 0.5rem;
}
.about-card-divider {
  height: 1px;
  background: rgba(197,199,189,0.2);
  margin: 1.5rem 0;
}
.accent-box {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  width: 80px;
  height: 80px;
  background: var(--gold);
  z-index: -1;
}

/* ── SERVICES ── */
.services-section {
  background:
    linear-gradient(180deg, var(--linen) 0%, #ddd2b5 100%);
  padding: 7rem 3rem;
}
.services-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 4rem;
}
.services-header p {
  margin-top: 1rem;
  color: var(--warm);
  font-size: 1rem;
  line-height: 1.7;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(151,115,71,0.2);
}
.service-card {
  background: var(--cream);
  padding: 2.8rem 2.2rem;
  transition: background 0.3s, transform 0.3s;
  cursor: default;
}
.service-card:hover {
  background: var(--dark);
  transform: translateY(-4px);
}
.service-card:hover .service-title { color: var(--gold); }
.service-card:hover .service-desc { color: var(--silver); }
.service-card:hover .service-num { color: rgba(180,179,61,0.25); }
.service-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1.5rem;
}
.service-num {
  font-family: 'Playfair Display', serif;
  font-size: 3.5rem;
  font-weight: 900;
  color: rgba(151,115,71,0.15);
  line-height: 1;
  margin-bottom: 0.5rem;
  transition: color 0.3s;
}
.service-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.75rem;
  transition: color 0.3s;
}
.service-desc {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--warm);
  transition: color 0.3s;
}

/* ── WHY US ── */
.why-section {
  background: var(--dark);
  padding: 7rem 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}
.why-section h2 { color: var(--cream); }
.why-list {
  list-style: none;
  margin-top: 2.5rem;
}
.why-item {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(197,199,189,0.12);
}
.why-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.why-number {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
  width: 2rem;
}
.why-content h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 0.4rem;
}
.why-content p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--stone);
}
.why-visual {
  background: var(--deep);
  padding: 3rem;
  border: 1px solid rgba(180,179,61,0.2);
  text-align: center;
}
.why-visual-paw {
  width: 120px;
  height: 120px;
  margin: 0 auto 2rem;
  opacity: 0.85;
}
.why-quote {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-style: italic;
  color: var(--cream);
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
.why-quote-attr {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ── LOCATION ── */
.location-section {
  background: var(--linen);
  padding: 7rem 3rem;
}
.location-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.location-details {
  margin-top: 2rem;
}
.location-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: flex-start;
}
.location-row-icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.location-row-label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 0.2rem;
}
.location-row-val {
  font-size: 0.95rem;
  color: var(--dark);
  line-height: 1.5;
}
.map-placeholder {
  background: var(--dark);
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border: 2px solid rgba(180,179,61,0.2);
  position: relative;
  overflow: hidden;
}
.map-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 60%, rgba(151,115,71,0.15) 0%, transparent 70%),
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(180,179,61,0.05) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(180,179,61,0.05) 40px);
}
.map-pin {
  position: relative;
  z-index: 1;
}
.map-placeholder p {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver);
  position: relative;
  z-index: 1;
}
.map-address-tag {
  font-family: 'Libre Baskerville', serif;
  font-size: 0.9rem;
  color: var(--cream);
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 2rem;
  line-height: 1.5;
}
.map-link {
  position: relative;
  z-index: 1;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(180,179,61,0.4);
  padding-bottom: 2px;
  transition: color 0.2s;
}
.map-link:hover { color: #ccc83f; }

/* ── CONTACT ── */
.contact-section {
  background: var(--rust);
  padding: 7rem 3rem;
  text-align: center;
}
.contact-section h2 { color: var(--cream); }
.contact-section h2 em { color: var(--gold); }
.contact-section .section-label { color: rgba(247,241,225,0.6); }
.contact-section > p {
  margin: 1rem auto 3rem;
  max-width: 520px;
  color: rgba(247,241,225,0.8);
  line-height: 1.7;
}
.contact-form-wrapper {
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-group {
  margin-bottom: 1rem;
}
.form-label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(247,241,225,0.7);
  display: block;
  margin-bottom: 0.4rem;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  background: rgba(63,60,42,0.5);
  border: 1px solid rgba(247,241,225,0.2);
  color: var(--cream);
  padding: 0.75rem 1rem;
  font-family: 'Libre Baskerville', serif;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.form-input::placeholder, .form-textarea::placeholder { color: rgba(247,241,225,0.35); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--gold);
  background: rgba(63,60,42,0.7);
}
.form-select option { background: var(--dark); }
.form-textarea { resize: vertical; min-height: 100px; }
.form-submit {
  width: 100%;
  margin-top: 0.5rem;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--gold);
  color: var(--deep);
  border: none;
  padding: 1rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.form-submit:hover { background: #ccc83f; transform: translateY(-1px); }

/* ── FOOTER ── */
footer {
  background: transparent;
  padding: 3rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.footer-wrapper {
  background: var(--deep);
  position: relative;
  overflow: hidden;
}
.footer-brand {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 0.5rem;
}
.footer-tagline {
  font-size: 0.85rem;
  color: var(--stone);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.footer-heading {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.footer-links {
  list-style: none;
}
.footer-links li { margin-bottom: 0.6rem; }
.footer-links a {
  font-size: 0.88rem;
  color: var(--stone);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--cream); }
.footer-bottom {
  background: transparent;
  border-top: 1px solid rgba(197,199,189,0.1);
  padding: 1.5rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}
.footer-copy {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  nav { padding: 1rem 1.5rem; }
  .nav-links { display: none; }
  .about, .why-section, .location-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .services-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  footer { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
}