/* ===================================================================
   Bay Area Interior Plants — design tokens
   Display: Fraunces (organic serif) / Body: Inter / Labels: Space Mono
=================================================================== */
:root{
  --ink:        #142117;
  --forest:     #1F3324;
  --forest-2:   #2F4E36;
  --sage:       #8FA888;
  --sage-light: #BFE0AE;
  --stone:      #E7E3D3;
  --stone-dark: #DAD5C0;
  --paper:      #F6F4EA;
  --brass:      #B98D34;
  --brass-dark: #93701F;

  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'Space Mono', monospace;

  --max-w: 1180px;
  --radius: 14px;
  --ease: cubic-bezier(.22,.9,.32,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3{ font-family: var(--font-display); color: var(--forest); margin: 0 0 .5em; font-weight: 600; }
h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -0.01em; }
h1 em{ font-style: italic; color: var(--brass-dark); }
h2{ font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.15; }
h3{ font-size: 1.2rem; margin-bottom: .4em; }
p{ margin: 0 0 1em; line-height: 1.65; color: #33402f; }
a{ color: inherit; }
ul{ list-style: none; margin:0; padding:0; }
img, svg{ display:block; max-width:100%; }

.wrap{ max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

.eyebrow{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .74rem;
  color: var(--brass-dark);
  margin: 0 0 .9em;
}
.section-head{ max-width: 640px; margin-bottom: 2.4rem; }
.section-head.light .eyebrow{ color: var(--sage-light); }
.section-sub{ font-size: 1.05rem; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .85em 1.6em;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  text-decoration:none;
  border: 1.5px solid transparent;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
  cursor:pointer;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--forest); color: var(--stone); }
.btn-primary:hover{ background: var(--brass-dark); }
.btn-ghost{ border-color: var(--forest); color: var(--forest); }
.btn-ghost:hover{ background: var(--forest); color: var(--stone); }
.btn-small{ padding: .55em 1.2em; font-size: .85rem; }
.btn-full{ width:100%; }

.text-link{
  display:inline-block; font-weight:600; color: var(--forest);
  border-bottom: 1.5px solid var(--brass);
  padding-bottom: 2px;
  text-decoration: none;
}
.text-link:hover{ color: var(--brass-dark); }

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(246,244,234,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stone-dark);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.brand{ display:flex; align-items:center; gap:.6em; text-decoration:none; }
.brand-text{ font-family: var(--font-display); font-weight:600; font-size:1.05rem; color: var(--forest); }
.brand-text em{ font-style: italic; }

.main-nav{ display:flex; align-items:center; gap: 2rem; }
.main-nav a{ text-decoration:none; font-weight:500; color: var(--ink); font-size:.95rem; }
.main-nav a:not(.btn):hover{ color: var(--brass-dark); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width: 40px; height:40px; border:none; background:none; cursor:pointer;
}
.nav-toggle span{ height:2px; width:100%; background: var(--forest); border-radius:2px; transition: transform .25s, opacity .25s; }

/* ---------- scroll vine ---------- */
.vine{
  position: fixed; left: 18px; top: 90px; bottom: 24px; width: 40px;
  z-index: 40; display:flex; justify-content:center;
}
.vine-svg{ width:6px; height:100%; }
.vine-track{ stroke: var(--stone-dark); stroke-width: 3; fill:none; }
.vine-fill{
  stroke: var(--forest-2); stroke-width: 3; fill:none;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  transition: stroke-dashoffset .1s linear;
}
.vine-leaves{ position:absolute; inset:0; }
.vine-leaf{
  position:absolute; left: 50%; transform: translate(-50%,-50%) scale(0);
  width:10px; height:10px; border-radius: 0 60% 0 60%;
  background: var(--stone-dark);
  transition: transform .4s var(--ease), background .4s var(--ease);
}
.vine-leaf.lit{ background: var(--brass); transform: translate(-50%,-50%) scale(1); }
@media (max-width: 1050px){ .vine{ display:none; } }

/* ---------- hero ---------- */
.hero{ padding: 4.5rem 0 5rem; }
.hero-inner{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items:center;
}
.lede{ font-size: 1.1rem; max-width: 46ch; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin: 1.6rem 0 2.4rem; }
.hero-stats{ display:flex; gap: 2.2rem; flex-wrap:wrap; }
.hero-stats li{ display:flex; flex-direction:column; }
.hero-stats strong{ font-family: var(--font-display); font-size:1.4rem; color: var(--forest); }
.hero-stats span{ font-size:.8rem; color:#5c6a54; }

.hero-art{ position:relative; }
.hero-illustration{
  width:100%; height: 480px; display:block;
  border-radius: 20px;
  box-shadow: 0 30px 60px -25px rgba(20,33,23,.45);
  border: 6px solid var(--paper);
  outline: 1px solid var(--stone-dark);
  background: var(--stone);
}

/* ---------- about ---------- */
.about{ padding: 5rem 0; }
.about-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items:start; }
.about-cards{ display:flex; flex-direction:column; gap:1.2rem; }
.about-card{
  background: var(--stone); border-radius: var(--radius); padding: 1.4rem 1.5rem;
  border: 1px solid var(--stone-dark);
}
.about-card-icon{ font-size:1.5rem; display:block; margin-bottom:.4rem; }
.about-card p{ margin:0; font-size:.92rem; }

/* ---------- services ---------- */
.services{ padding: 5rem 0; background: var(--stone); }
.service-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.8rem; }
.service-card{
  background: var(--paper); border-radius: var(--radius); padding: 2rem 1.8rem;
  border: 1px solid var(--stone-dark);
}
.service-index{
  font-family: var(--font-mono); color: var(--brass); font-size: .85rem;
  letter-spacing: .1em; margin-bottom: .8rem;
}
.service-list{ display:flex; flex-wrap:wrap; gap: .5rem; margin-top: .8rem; }
.service-list li{
  font-size: .8rem; font-family: var(--font-mono);
  background: var(--stone); border-radius: 999px; padding: .3em .8em;
}

/* ---------- benefits ---------- */
.benefits{ padding: 5.5rem 0; background: var(--forest); color: var(--stone); }
.benefits h2{ color: var(--stone); }
.benefits .section-sub{ color: #cfd8c9; }
.benefits .section-sub a{ color: var(--sage-light); text-decoration: underline; }
.benefit-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }
.benefit-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
}
.benefit-card h3{ color: var(--stone); }
.benefit-card p{ color:#cfd8c9; font-size: .92rem; }
.benefit-stat{
  font-family: var(--font-display); font-size: 2.4rem; color: var(--sage-light);
  margin-bottom: .3rem;
}

/* ---------- contact ---------- */
.contact{ padding: 5.5rem 0; }
.contact-inner{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 3.5rem; }
.contact-details{ margin: 1.6rem 0; display:flex; flex-direction:column; gap: 1rem; }
.contact-details li{ display:flex; flex-direction:column; gap:.15rem; }
.contact-label{ font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color: var(--brass-dark); }
.contact-details a{ text-decoration:none; font-weight:600; }
.contact-details a:hover{ color: var(--brass-dark); }

.social-links{ display:flex; gap:.7rem; }
.social-links a{
  width:38px; height:38px; border-radius:50%; background: var(--forest); color: var(--stone);
  display:flex; align-items:center; justify-content:center; text-decoration:none; font-weight:700; font-size:.85rem;
  transition: background .2s;
}
.social-links a:hover{ background: var(--brass-dark); }

.contact-form{
  background: var(--stone); border: 1px solid var(--stone-dark);
  border-radius: var(--radius); padding: 2rem;
  display:flex; flex-direction:column; gap: 1.1rem;
}
.form-row{ display:flex; flex-direction:column; gap:.4rem; }
.form-row.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-row.two-col > div{ display:flex; flex-direction:column; gap:.4rem; }
label{ font-size:.85rem; font-weight:600; color: var(--forest); }
input, select, textarea{
  font-family: var(--font-body); font-size: .95rem;
  padding: .75em .9em; border-radius: 8px; border: 1.5px solid var(--stone-dark);
  background: var(--paper); color: var(--ink); resize: vertical;
}
input:focus, select:focus, textarea:focus{ outline: 2px solid var(--forest-2); outline-offset:1px; }
input.invalid, textarea.invalid{ border-color:#b03a2e; }
.field-error{ font-size:.78rem; color:#b03a2e; min-height: 1em; }
.form-status{ font-size:.9rem; font-weight:600; min-height:1.2em; margin:0; }
.form-status.success{ color: var(--forest); }
.form-status.error{ color:#b03a2e; }

/* ---------- footer ---------- */
.site-footer{ background: var(--ink); color: var(--stone); padding: 2.4rem 0; }
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: 1.2rem; }
.footer-brand .brand-text{ color: var(--stone); }
.footer-nav{ display:flex; gap: 1.4rem; }
.footer-nav a{ text-decoration:none; font-size:.88rem; color:#cfd8c9; }
.footer-nav a:hover{ color: var(--sage-light); }
.footer-copy{ font-size:.8rem; color:#8a9583; margin:0; width:100%; text-align:center; order:3; }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .leaf-group{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ===================================================================
   Responsive
=================================================================== */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-art{ order:-1; }
  .hero-illustration{ height: 320px; }
  .about-grid{ grid-template-columns: 1fr; }
  .service-grid{ grid-template-columns: 1fr 1fr; }
  .benefit-grid{ grid-template-columns: 1fr 1fr; }
  .contact-inner{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .main-nav{
    position: fixed; inset: 76px 0 0 0; height: calc(100dvh - 76px);
    background: var(--paper); flex-direction:column; align-items:flex-start;
    padding: 2rem 24px; gap: 1.4rem;
    transform: translateX(100%); transition: transform .3s var(--ease);
    overflow-y:auto;
  }
  .main-nav.open{ transform: translateX(0); }
  .main-nav a{ font-size:1.1rem; }
  .main-nav .btn{ margin-top: .5rem; }
  .nav-toggle{ display:flex; }
  .nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  .service-grid{ grid-template-columns: 1fr; }
  .benefit-grid{ grid-template-columns: 1fr; }
  .form-row.two-col{ grid-template-columns: 1fr; }
  .hero-stats{ gap: 1.4rem; }
}