/* ─── B'S TREES · SHARED STYLESHEET ────────────────────────────
   Design Direction: Local Character / Hand-Crafted
   Brand anchor: The purple truck. Ownable. Confident. Warm.
──────────────────────────────────────────────────────────────── */

/* ─── BRAND TOKENS ──────────────────────────────────────────── */
:root {
  --purple:        #3c245a;   /* matched to logo */
  --purple-dark:   #261540;
  --purple-mid:    #6b4a9a;
  --purple-pale:   #ede5f5;
  --amber:         #b87d2e;
  --amber-light:   #d4a050;
  --cream:         #f2ebe0;
  --cream-dark:    #e8dfd0;
  --parchment:     #f9f5ee;
  --bark:          #1c1814;
  --bark-mid:      #3a2e26;
  --bark-light:    #6b5a4e;
  --bark-muted:    #9a8878;
  --white:         #fdfaf5;
  --sage:          #4a7a5a;
  --border:        #d8cfc2;

  /* Legacy aliases (used in inline page styles) */
  --green:         #1e3d28;
  --green-mid:     #2d5a3d;
  --green-light:   #4a8a5a;
  --green-pale:    #edf4ef;
  --gold:          var(--amber);
  --gold-light:    var(--amber-light);
  --text:          var(--bark);
  --text-mid:      var(--bark-light);
  --text-muted:    var(--bark-muted);
}

/* ─── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Lato', 'Helvetica Neue', sans-serif;
  background: var(--parchment);
  color: var(--bark);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Paper grain — the texture that makes it hand-crafted */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── TYPOGRAPHY ────────────────────────────────────────────── */
.eyebrow, .section-eyebrow {
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 0.7rem;
}

.section-heading {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  color: var(--bark);
  line-height: 1.1;
  font-weight: 700;
  margin-bottom: 1.2rem;
}
.section-heading em { font-style: italic; color: var(--purple); }

/* ─── NAV ───────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--purple);
  height: 64px;
  display: flex; align-items: center;
  padding: 0 2rem;
  box-shadow: 0 2px 12px rgba(92,45,140,0.25);
  overflow: visible;
}
.nav-inner {
  max-width: 1160px; width: 100%; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; line-height: 0; position: relative; z-index: 310; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3)); }
.nav-logo img { height: 100px; width: auto; display: block; background: #fff; padding: 5px; clip-path: polygon(50% 0%, 97% 25%, 97% 75%, 50% 100%, 3% 75%, 3% 25%); transition: transform 0.3s ease; }
.nav-logo:hover img { transform: scale(1.05); }
.nav-links { display: flex; list-style: none; gap: 0; align-items: center; }
.nav-links a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0 1rem;
  transition: color 0.2s;
}
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: var(--amber-light); }
.nav-quote, .nav-cta {
  background: var(--amber) !important;
  color: var(--bark) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 0.55rem 1.3rem !important;
  border-radius: 2px !important;
  transition: background 0.2s !important;
  white-space: nowrap !important;
}
.nav-quote:hover, .nav-cta:hover { background: var(--amber-light) !important; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: rgba(255,255,255,0.85); transition: all 0.3s; }

/* ─── PAGE HERO (inner pages) ───────────────────────────────── */
.page-hero {
  padding: 130px 2rem 70px;
  background: var(--purple);
  text-align: center;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -45deg, transparent, transparent 40px,
    rgba(255,255,255,0.03) 40px, rgba(255,255,255,0.03) 80px
  );
}
.page-hero .section-eyebrow { color: rgba(212,160,80,0.75); }
.page-hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: var(--white); font-weight: 900;
  line-height: 1.1; margin-bottom: 1rem;
  position: relative;
}
.page-hero h1 em { font-style: italic; color: var(--amber-light); }
.page-hero p {
  color: rgba(253,250,245,0.62);
  font-size: 1.05rem; max-width: 540px;
  margin: 0 auto; line-height: 1.7;
  position: relative;
}

/* ─── BUTTONS ───────────────────────────────────────────────── */
.btn-primary, .btn-gold {
  background: var(--purple);
  color: #fff !important;
  padding: 0.9rem 2rem;
  text-decoration: none;
  font-size: 0.88rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 2px; display: inline-block;
  border: 2px solid var(--purple);
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.btn-primary:hover, .btn-gold:hover {
  background: var(--purple-dark);
  border-color: var(--purple-dark);
  transform: translateY(-1px);
}
.btn-amber {
  background: var(--amber); color: var(--bark);
  padding: 0.9rem 2rem;
  text-decoration: none;
  font-size: 0.88rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 2px; display: inline-block;
  transition: background 0.2s, transform 0.15s;
}
.btn-amber:hover { background: var(--amber-light); transform: translateY(-1px); }
.btn-outline {
  border: 2px solid rgba(255,255,255,0.4); color: var(--white);
  padding: 0.9rem 2rem;
  text-decoration: none;
  font-size: 0.88rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 2px; display: inline-block;
  transition: all 0.2s;
}
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.btn-cream {
  background: var(--cream); color: var(--purple);
  padding: 1rem 2.5rem;
  text-decoration: none;
  font-size: 0.88rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 2px; display: inline-block;
  transition: background 0.2s, transform 0.15s;
}
.btn-cream:hover { background: var(--white); transform: translateY(-1px); }

/* ─── CTA BANNER ────────────────────────────────────────────── */
.cta-banner {
  background: var(--purple);
  padding: 80px 2rem; text-align: center;
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -45deg, transparent, transparent 40px,
    rgba(255,255,255,0.025) 40px, rgba(255,255,255,0.025) 80px
  );
}
.cta-banner h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: var(--white); font-weight: 700;
  margin-bottom: 0.5rem; position: relative;
}
.cta-banner p {
  color: rgba(255,255,255,0.55);
  margin-bottom: 2rem; font-size: 1rem;
  position: relative;
}
.cta-banner .btn-gold, .cta-banner .btn-primary { display: inline-block; position: relative; }
.cta-phone-line {
  margin-top: 1.2rem; font-size: 0.85rem;
  color: rgba(255,255,255,0.4); position: relative;
}
.cta-phone-line a { color: var(--amber-light); text-decoration: none; font-weight: 700; }
.cta-phone-line a:hover { color: #fff; }

/* ─── FOOTER ────────────────────────────────────────────────── */
footer {
  background: var(--bark);
  color: rgba(253,250,245,0.5);
  padding: 60px 2rem 28px;
  border-top: 3px solid var(--purple);
}
.footer-inner { max-width: 1160px; margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem; margin-bottom: 3rem;
}
.footer-logo img { height: 52px; width: auto; filter: brightness(0) invert(1) opacity(0.7); margin-bottom: 1rem; display: block; }
.footer-tagline {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic; font-size: 0.95rem;
  color: rgba(253,250,245,0.3); margin-bottom: 1.2rem; line-height: 1.5;
}
.footer-contact { font-size: 0.875rem; line-height: 2.1; }
.footer-contact a { color: rgba(253,250,245,0.5); text-decoration: none; transition: color 0.2s; }
.footer-contact a:hover { color: var(--amber-light); }
.footer-col h4 {
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(253,250,245,0.25); margin-bottom: 1rem;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.6rem; }
.footer-col a {
  color: rgba(253,250,245,0.5); text-decoration: none;
  font-size: 0.88rem; transition: color 0.2s;
}
.footer-col a:hover { color: var(--amber-light); }
.footer-bottom {
  border-top: 1px solid rgba(253,250,245,0.07);
  padding-top: 1.5rem;
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 0.5rem;
  font-size: 0.78rem;
}
.footer-isa { display: flex; align-items: center; gap: 0.6rem; }
.isa-badge {
  background: rgba(92,45,140,0.4);
  border: 1px solid rgba(122,74,170,0.4);
  color: var(--purple-mid);
  font-size: 0.65rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.18rem 0.5rem; border-radius: 2px;
}

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 960px) {
  .nav-logo img { height: 80px; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: fixed; top: 64px; left: 0; right: 0;
    background: var(--purple-dark);
    padding: 1.2rem 2rem 2rem;
    gap: 0; border-bottom: 2px solid rgba(92,45,140,0.5);
    z-index: 199;
  }
  .nav-links.open a {
    font-size: 1rem; padding: 0.9rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: block;
  }
  .nav-toggle { display: flex; }
  .nav-quote, .nav-cta { display: none !important; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 580px) {
  .footer-grid { grid-template-columns: 1fr; }
}