:root {
  /* Bee Texas Landscaping brand palette.
     Gold and black are sampled from the final logo file (see Brand Assets).
     --gold is a FILL only: #D2A550 under white text is 2.3:1 and fails.
     Use --ink on gold (7.5:1) and --gold-ink for gold-toned text on white (5.3:1). */
  --gold: #D2A550;
  --gold-ink: #8A6520;
  --gold-soft: #f0e6d2;
  --ink: #1C1C1C;
  --ink-soft: #4a4238;
  --black: #161616;
  --cream: #faf7f1;
  --white: #ffffff;
  --gray: #5b5b5b;
  --max-width: 1100px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--black);
  background: var(--white);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.2;
  color: var(--ink);
}

a { color: var(--gold-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

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

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

/* Header */
header.site-header {
  background: var(--white);
  border-bottom: 1px solid #e5e5e5;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The header lockup is a 2:1 badge + stacked wordmark, so it needs more height
   than the old square-ish mark did or the "BEE TEXAS LANDSCAPING" text is unreadable. */
.brand img { height: 64px; width: auto; }
@media (max-width: 600px) { .brand img { height: 52px; } }

.brand-text {
  font-family: Georgia, serif;
  font-weight: bold;
  font-size: 1.1rem;
  color: var(--ink);
  letter-spacing: 0.5px;
}

nav.main-nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
}

nav.main-nav a {
  color: var(--black);
  font-weight: 600;
  font-size: 0.95rem;
}

nav.main-nav a.active,
nav.main-nav a:hover {
  color: var(--gold-ink);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--ink);
}

.header-cta {
  background: var(--gold);
  color: var(--ink) !important;
  padding: 8px 18px;
  border-radius: 4px;
  font-weight: 700;
  text-decoration: none !important;
}
.header-cta:hover { background: var(--ink); color: var(--white) !important; }

/* Hero */
.hero {
  background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
  padding: 64px 0 56px;
}

.hero .container {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}

.hero-text { flex: 1 1 420px; }
.hero-image { flex: 1 1 320px; text-align: center; }
.hero-image img { max-height: 320px; margin: 0 auto; }

.hero h1 {
  font-size: 2.4rem;
  margin-bottom: 16px;
}

.hero p.lead {
  font-size: 1.15rem;
  color: var(--gray);
  margin-bottom: 24px;
  max-width: 520px;
}

.tagline {
  color: var(--gold-ink);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  padding: 14px 28px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 1.05rem;
}
.btn:hover { background: var(--ink); color: var(--white); text-decoration: none; }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}
.btn-secondary:hover { background: var(--ink); color: var(--white); }

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.trust-line {
  margin-top: 20px;
  font-size: 0.95rem;
  color: var(--gray);
}
.trust-line strong { color: var(--ink); }

/* Sections */
section { padding: 56px 0; }
section.alt { background: var(--cream); }

.section-heading { text-align: center; margin-bottom: 40px; }
.section-heading h2 { font-size: 1.9rem; }
.section-heading p { color: var(--gray); max-width: 600px; margin: 12px auto 0; }

/* Cards */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.card {
  background: var(--white);
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 28px;
}

.card h3 { font-size: 1.2rem; margin-bottom: 10px; color: var(--ink); }
.card p { color: var(--gray); }

/* Service card icons. These are inline SVG, not emoji: an emoji is drawn by the
   visitor's own operating system, so it looks different on every device and
   cannot take the brand colour. --gold-ink rather than --gold because #D2A550
   on white is washed out at 2.3:1; the darker bronze reads cleanly at 5.3:1. */
.card-icon {
  margin-bottom: 14px;
  color: var(--gold-ink);
  line-height: 0;
}
.card-icon svg {
  width: 40px;
  height: 40px;
  display: block;
}

/* Benefit list */
.benefits { list-style: none; }
.benefits li {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  gap: 12px;
}
.benefits li:last-child { border-bottom: none; }
.benefits .mark { color: var(--gold-ink); font-weight: 700; }

/* CTA band */
.cta-band {
  background: var(--ink);
  color: var(--white);
  text-align: center;
}
.cta-band h2 { color: var(--white); margin-bottom: 12px; }
.cta-band p { color: #e8e0d2; margin-bottom: 24px; }
.cta-band .btn { background: var(--gold); color: var(--ink); }
.cta-band .btn:hover { background: var(--cream); }

/* Footer */
footer.site-footer {
  background: var(--black);
  color: #ccc;
  padding: 40px 0 24px;
  font-size: 0.9rem;
}
footer.site-footer .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
footer.site-footer h4 { color: var(--white); margin-bottom: 10px; font-family: inherit; }
footer.site-footer a { color: #ccc; }
footer.site-footer a:hover { color: var(--gold); }
.footer-bottom {
  text-align: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #333;
  color: #777;
  font-size: 0.8rem;
}

/* Page header (non-home pages) */
.page-header {
  background: var(--ink);
  color: var(--white);
  padding: 48px 0;
  text-align: center;
}
.page-header h1 { color: var(--white); }
.page-header p { color: #d9ead9; margin-top: 10px; }

/* Service detail blocks */
.service-block {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  padding: 32px 0;
  border-bottom: 1px solid #eee;
  flex-wrap: wrap;
}
.service-block:last-child { border-bottom: none; }
.service-block .service-label {
  flex: 0 0 200px;
  font-weight: 700;
  color: var(--ink);
  font-size: 1.1rem;
}
.service-block .service-detail { flex: 1 1 400px; }
.service-detail ul { padding-left: 20px; color: var(--gray); }
.service-detail ul li { margin-bottom: 6px; }

.coming-soon-badge {
  display: inline-block;
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-left: 10px;
  vertical-align: middle;
}

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.gallery-placeholder {
  aspect-ratio: 4 / 3;
  background: var(--cream);
  border: 2px dashed #c9c2b3;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-align: center;
  padding: 16px;
}

/* ---- Real photos ---------------------------------------------------------
   Applied by gallery.js only once gallery-data.js actually has entries in it,
   so an empty list keeps the dashed "coming soon" tiles above. */
.gallery-live {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  align-items: start;
}

.gallery-card { margin: 0; }

/* A before/after card carries two photos, so it earns two columns. It falls
   back to one column on narrow screens through the media query below. */
.gallery-card-pair { grid-column: span 2; }

.gallery-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.gallery-shot {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  background: var(--cream);
}

/* Fixing the frame and cropping into it is what lets real phone photos, shot
   at whatever angle and resolution, sit in a tidy grid. It also reserves the
   space before the image loads, so nothing jumps as you scroll. */
.gallery-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.25s ease;
}
.gallery-shot img:hover { transform: scale(1.04); }
.gallery-shot img:focus-visible {
  outline: 3px solid var(--gold-ink);
  outline-offset: -3px;
}

.gallery-label {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--gold);
  color: var(--ink);          /* black on gold is 7.5:1; white on gold fails */
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
}

.gallery-caption {
  margin-top: 10px;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
}

@media (max-width: 700px) {
  .gallery-card-pair { grid-column: span 1; }
}

/* ---- Lightbox ------------------------------------------------------------ */
body.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(12, 12, 12, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
}
.lightbox[hidden] { display: none; }

.lightbox-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  text-align: center;
}

.lightbox-img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  border-radius: 8px;
  margin: 0 auto;
}

.lightbox-caption {
  color: #f3efe6;
  margin-top: 14px;
  font-size: 1rem;
}

.lightbox-close,
.lightbox-nav {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  line-height: 1;
  flex: 0 0 auto;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  font-size: 1.7rem;
}
.lightbox-nav {
  width: 48px;
  height: 48px;
  font-size: 2rem;
}
.lightbox-nav[hidden] { display: none; }

@media (max-width: 600px) {
  .lightbox { padding: 12px; gap: 6px; }
  .lightbox-nav { width: 40px; height: 40px; font-size: 1.6rem; }
  .lightbox-img { max-height: 66vh; }
}

/* Contact page */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
}
@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-card {
  background: var(--cream);
  border-radius: 8px;
  padding: 32px;
}
.contact-card h3 { margin-bottom: 16px; }
.contact-item { margin-bottom: 18px; }
.contact-item .label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray);
  font-weight: 700;
}
.contact-item .value { font-size: 1.15rem; font-weight: 600; color: var(--ink); }

.service-area-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.service-area-list span {
  background: var(--white);
  border: 1px solid #ddd;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
}

/* Mobile nav */
@media (max-width: 720px) {
  .nav-toggle { display: block; }
  nav.main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid #e5e5e5;
  }
  nav.main-nav.open { display: block; }
  nav.main-nav ul {
    flex-direction: column;
    padding: 16px 24px;
    gap: 16px;
  }
  header.site-header { position: sticky; }
  .hero .container { flex-direction: column-reverse; text-align: center; }
  .hero p.lead { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .service-block { flex-direction: column; gap: 12px; }
}

/* ---- Pre-deploy blockers -------------------------------------------------
   Bee Texas has no business phone or email on record yet. These placeholders
   are styled to be impossible to miss so the site cannot be published with
   the old company's contact details or with a dead contact block. */
.tbd {
  display: inline-block;
  background: #ffe9e9;
  border: 1px dashed #c0392b;
  color: #a5281b;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 2px 8px;
  border-radius: 4px;
}

/* ---- Quote form fallback -------------------------------------------------
   Shown after submit so a visitor with no mail client still has a way to
   reach us. The old build failed silently here and lost the lead. */
.quote-fallback {
  margin-top: 24px;
  padding: 20px;
  background: var(--cream);
  border: 2px solid var(--gold);
  border-radius: 8px;
}
.quote-fallback[hidden] { display: none; }
.quote-fallback textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--white);
  resize: vertical;
}