/* Botani Exteriors — hand-written stylesheet, no framework dependency */

:root {
  --green-900: #1e3a10;
  --green-800: #2e5517;
  --green-700: #3a6b1e;
  --green-100: #eaf1e4;
  --accent: #61ce70;
  --danger: #de1402;
  --white: #ffffff;
  --off-white: #fbfbfb;
  --gray-100: #f4f5f4;
  --gray-200: #dcdddc;
  --gray-600: #5b5f5a;
  --text: #1a1d19;
  --radius: 10px;
  --container: 1200px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  --font-head: "Oswald", sans-serif;
  --font-body: "Lato", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.6;
  background: var(--white);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p a:not(.btn) {
  color: var(--green-800);
  text-decoration: underline;
  text-underline-offset: 2px;
}
p a:not(.btn):hover { color: var(--green-900); }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  text-transform: uppercase;
  line-height: 1.25;
  margin: 0 0 16px;
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
p { margin: 0 0 16px; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--white); color: var(--green-800);
  padding: 12px 20px; z-index: 1000;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 14px 28px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 0.95rem;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--danger); color: var(--white); }
.btn-primary:hover { background: #b60f01; }
.btn-outline { background: transparent; color: var(--white); border-color: var(--white); }
.btn-outline:hover { background: var(--white); color: var(--green-800); }
.btn-dark { background: var(--green-800); color: var(--white); }
.btn-dark:hover { background: var(--green-900); }

/* Top bar */
.topbar {
  background: var(--green-900);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  padding: 8px 0;
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; }
.topbar a { display: inline-flex; align-items: center; gap: 6px; }

/* Header / nav */
.site-header {
  background: var(--green-800);
  position: sticky;
  top: 0;
  z-index: 500;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 11px;
  padding-bottom: 11px;
  gap: 24px;
}
.logo img { height: 52px; width: auto; }
.main-nav ul { display: flex; gap: 4px; flex-wrap: wrap; }
.main-nav a {
  display: block;
  font-family: var(--font-head);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  padding: 10px 14px;
  border-radius: 6px;
  color: var(--white);
}
.main-nav a:hover, .main-nav a[aria-current="page"] { background: rgba(255,255,255,0.15); color: var(--white); }
.header-cta { display: flex; align-items: center; gap: 14px; }
.header-phone {
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--white);
  white-space: nowrap;
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--white);
  border-radius: 2px;
  position: relative;
  transition: 0.2s;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; }
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after { top: 8px; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    box-shadow: var(--shadow);
    display: none;
    padding: 12px;
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; }
  .main-nav a { color: var(--green-900); }
  .main-nav a:hover, .main-nav a[aria-current="page"] { background: var(--green-100); color: var(--green-800); }
  .header-phone { display: none; }
  .logo img { height: 46px; }
}

/* Hero */
.hero {
  background: var(--green-800);
  color: var(--white);
  padding: 60px 0;
  position: relative;
  background-size: cover;
  background-position: center;
}
/* Background photo shows immediately (it's the .hero background-image so it
   never blocks first paint). The video is a progressive enhancement: it has
   no src on page load, so nothing is fetched until main.js sets it after the
   window "load" event, then fades in over the photo once playable. If it
   never loads (slow connection, JS disabled), the photo stays as-is. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-video.is-loaded { opacity: 1; }

.hero.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* No backdrop-filter here - this layer sits directly over the actual
     photo/video, so blurring it made the real background content look
     blurry/low-quality. The frosted "glass" look lives only on the
     floating panels below (.hero-glass-panel, .hero-bg .estimate-card),
     which blur what's behind THEM, not the photo/video itself. */
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(97,206,112,0.08), rgba(46,85,23,0.16));
}
.hero.hero-bg .container { position: relative; z-index: 2; }

/* Frosted glass panel behind the hero heading - keeps text legible now that
   the background wash above is light/bright rather than a dark tint. */
.hero-glass-panel {
  background: rgba(10,20,6,0.38);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px;
  padding: 28px 32px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.hero.hero-bg h1,
.hero.hero-bg .lede { text-shadow: 0 2px 10px rgba(0,0,0,0.4); }
.hero .container {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero h1 { color: var(--white); margin-bottom: 12px; font-size: clamp(1.25rem, 1.9vw, 1.65rem); line-height: 1.3; }
.hero .lede { font-size: 0.92rem; opacity: 0.95; margin-bottom: 0; }
@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; }
}

/* Estimate form card */
.estimate-card {
  background: var(--white);
  color: var(--text);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.estimate-card h2 { color: var(--green-800); font-size: 1.3rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.form-row.single { grid-template-columns: 1fr; }
.form-field label { display: block; font-size: 0.85rem; margin-bottom: 4px; font-weight: 600; }
.form-field input, .form-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 1rem;
}
.form-consent { font-size: 0.75rem; color: var(--gray-600); margin: 12px 0; }
.form-consent a { text-decoration: underline; }
.estimate-card .btn { width: 100%; text-align: center; }

/* Glass version of the card, used only where it sits over the hero photo -
   keeps the "glass" look consistent without weakening the plain card used
   on pages with a solid-color hero (contact page etc). */
.hero-bg .estimate-card {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.5);
}

/* Section spacing + variants */
.section { padding: 64px 0; }
.section-tight { padding: 40px 0; }
.section-dark { background: var(--green-800); color: var(--white); }
.section-dark h2, .section-dark h3 { color: var(--white); }
.section-light-green { background: var(--green-100); }
.section-gray { background: var(--gray-100); }
.eyebrow {
  font-family: var(--font-head);
  color: var(--danger);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  display: block;
}
.section-dark .eyebrow { color: var(--accent); }
.section-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }

/* Two-col media + text */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.split.reverse .split-media { order: 2; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
}
.split-media img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}

/* Card grids */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.card-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-100);
  border-radius: 50%;
  margin-bottom: 16px;
  color: var(--green-800);
}
.card-dark { background: var(--green-800); color: var(--white); }
.card-dark h3 { color: var(--white); }

.process-step {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  box-shadow: var(--shadow);
  position: relative;
}
.process-step .step-num {
  font-family: var(--font-head);
  font-size: 2rem;
  color: var(--accent);
  display: block;
  margin-bottom: 8px;
}

.image-card { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--white); }
.image-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.image-card .image-card-body { padding: 16px; }

/* CTA banner */
.cta-banner {
  background: var(--green-800);
  color: var(--white);
  text-align: center;
  padding: 56px 0;
}
.cta-banner h2 { color: var(--white); }
.cta-banner .btn-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* Financing highlight */
.financing-banner {
  background: linear-gradient(135deg, var(--green-800), var(--green-700));
  color: var(--white);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.financing-banner .big-number { font-family: var(--font-head); font-size: 2.5rem; color: var(--accent); }

/* Service area list */
.area-list { columns: 2; gap: 24px; }
@media (max-width: 600px) { .area-list { columns: 1; } }
.area-list li { padding: 6px 0; border-bottom: 1px solid var(--gray-200); }

/* Logo strip / trust marks */
.logo-strip {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 24px 0;
}
.logo-strip img { height: 48px; width: auto; filter: grayscale(1); opacity: 0.75; }

/* FAQ accordion */
.faq-item { border-bottom: 1px solid var(--gray-200); }
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 0;
  font-family: var(--font-head);
  font-size: 1.05rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--green-900);
}
.faq-question::after { content: "+"; font-size: 1.4rem; color: var(--danger); }
.faq-item.open .faq-question::after { content: "\2212"; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faq-item.open .faq-answer { max-height: 400px; }
.faq-answer p { padding-bottom: 16px; }

/* Footer */
.site-footer { background: var(--green-900); color: var(--white); padding: 56px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; margin-bottom: 40px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--white); font-size: 1rem; }
.site-footer .logo img { height: 68px; margin-bottom: 12px; }
.footer-links li { padding: 4px 0; }
.footer-links a:hover { text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 20px;
  font-size: 0.85rem;
  opacity: 0.8;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* Emergency banner (used on emergency + sitewide callout) */
.emergency-banner {
  background: var(--danger);
  color: var(--white);
  text-align: center;
  padding: 14px 0;
  font-family: var(--font-head);
  letter-spacing: 0.03em;
}
.emergency-banner a { text-decoration: underline; }

/* Simple utility */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap;
}