:root {
  --primary: #2c3e50;
  --primary-dark: #1f2c39;
  --accent: #e67e22;
  --accent-dark: #c66610;
  --hero-overlay: rgba(10, 16, 22, 0.55);
  --text: #1a1a1a;
  --text-light: #ffffff;
  --muted: #5a5f63;
  --bg: #ffffff;
  --bg-soft: #f6f8f8;
  --bg-band: #eef3f3;
  --border: #e3e7e8;
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.18);
  --radius: 10px;
  --radius-lg: 16px;
  --max-width: 1200px;
  --header-h: 70px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

/* Header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.0);
  transition: background 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--header-h); }
.brand {
  font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em;
  color: var(--text-light); text-decoration: none; white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.site-header.scrolled .brand { color: var(--primary); }
.nav { display: flex; gap: 28px; }
.nav a { color: var(--text-light); text-decoration: none; font-weight: 600; font-size: 0.95rem; opacity: 0.92; transition: opacity 150ms ease, color 150ms ease; }
.nav a:hover { opacity: 1; }
.site-header.scrolled .nav a { color: var(--text); }
.site-header.scrolled .nav a:hover { color: var(--primary); }
.cta-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--text); padding: 10px 18px; border-radius: 999px;
  text-decoration: none; font-weight: 700; font-size: 0.92rem; box-shadow: var(--shadow-sm);
  transition: transform 120ms ease, box-shadow 200ms ease, background 200ms ease;
  flex: 0 0 auto; white-space: nowrap;
}
.cta-pill svg { flex: 0 0 auto; }
.cta-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); background: var(--accent-dark); }

/* Hero */
.hero {
  min-height: 85vh; background-size: cover; background-position: center;
  color: var(--text-light); display: flex; align-items: center;
  position: relative; padding: calc(var(--header-h) + 36px) 0 60px;
}
.hero-inner { max-width: 820px; }
.hero h1 {
  font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 800; line-height: 1.05;
  letter-spacing: -0.02em; margin-bottom: 20px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.hero-sub {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem); margin-bottom: 32px; max-width: 680px;
  opacity: 0.95; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.hero-rating {
  font-size: 0.98rem; display: inline-block;
  background: rgba(0, 0, 0, 0.32); padding: 9px 18px; border-radius: 999px;
  backdrop-filter: blur(4px); line-height: 1.5; max-width: 100%;
}
.hero-rating .stars { color: var(--accent); letter-spacing: 2px; margin-right: 8px; vertical-align: middle; }
.hero-rating .hero-rating-text { vertical-align: middle; }
.hero-rating strong { font-weight: 800; }
.hero-rating .dot-sep { margin: 0 6px; opacity: 0.55; }

/* Buttons */
.btn {
  display: inline-block; padding: 15px 30px; border-radius: var(--radius);
  text-decoration: none; font-weight: 700; font-size: 1rem; line-height: 1;
  border: 2px solid transparent;
  transition: transform 120ms ease, box-shadow 200ms ease, background 200ms ease, color 200ms ease;
}
.btn-primary { background: var(--accent); color: var(--text); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--text); }
.btn-ghost { background: transparent; color: var(--text-light); border-color: rgba(255, 255, 255, 0.7); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); color: var(--text-light); }
.btn-block { display: block; text-align: center; }

/* Sections */
section { padding: 80px 0; }
section h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 800;
  letter-spacing: -0.01em; color: var(--text); text-align: center; line-height: 1.15;
}
.section-sub { text-align: center; color: var(--muted); font-size: 1.05rem; margin-top: 10px; margin-bottom: 48px; }
.stars { color: var(--accent-dark); letter-spacing: 2px; }

/* Trust ribbon */
.trust-ribbon { background: var(--bg-band); padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 36px; }
.badge { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.badge svg { color: var(--primary); flex: 0 0 auto; }

/* Services */
.services { background: var(--bg); }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.service-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px 26px; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  opacity: 0; transform: translateY(20px);
}
.service-card.in { opacity: 1; transform: translateY(0); }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.service-icon {
  width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-band); color: var(--primary); border-radius: 12px; margin-bottom: 18px;
}
.service-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.service-card p { color: var(--muted); font-size: 0.97rem; margin-bottom: 16px; }
.service-link { color: var(--primary); font-weight: 700; text-decoration: none; font-size: 0.95rem; }
.service-link:hover { color: var(--primary-dark); }

/* About */
.about { background: var(--bg-soft); }
.about-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.about-copy h2 { text-align: left; margin-bottom: 18px; }
.about-copy p { color: var(--muted); margin-bottom: 14px; font-size: 1.02rem; }
.about-process strong { color: var(--text); }
.about-rating { font-size: 1.05rem; color: var(--text); margin-top: 8px; }
.about-photo img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; height: 100%; max-height: 460px; object-fit: cover; }

/* Reviews (static 3-up grid) */
.reviews { background: var(--bg); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.reviews-grid .review {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 32px 28px; text-align: left;
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 320ms ease, transform 320ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.reviews-grid .review.in { opacity: 1; transform: translateY(0); }
.reviews-grid .review:hover { box-shadow: var(--shadow-md); border-color: var(--primary); }
.reviews-grid .review p { font-size: 1rem; font-style: italic; color: var(--text); line-height: 1.55; margin: 0; }
.reviews-grid .review .reviewer { color: var(--muted); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; margin-top: auto; }

/* FAQ */
.faq { background: var(--bg-soft); }
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-list details {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0; transition: border-color 200ms ease, box-shadow 200ms ease;
}
.faq-list details[open] { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.faq-list summary {
  cursor: pointer; padding: 18px 22px; font-weight: 700; font-size: 1.02rem; color: var(--text);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 1.4rem; color: var(--primary); transition: transform 200ms ease; line-height: 1; }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list details p { padding: 0 22px 20px; color: var(--muted); font-size: 0.98rem; }

/* Contact */
.contact { background: var(--primary); color: var(--text-light); }
.contact h2 { color: var(--text-light); }
.contact .section-sub { color: rgba(255, 255, 255, 0.85); }
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  background: rgba(255, 255, 255, 0.06); padding: 28px;
  border-radius: var(--radius-lg); border: 1px solid rgba(255, 255, 255, 0.1);
}
.contact-map { border-radius: var(--radius); overflow: hidden; min-height: 380px; background: rgba(0, 0, 0, 0.2); }
.contact-map iframe { width: 100%; height: 100%; min-height: 380px; }
.contact-details { display: flex; flex-direction: column; gap: 18px; }
.contact-line { color: var(--text-light); font-size: 1rem; line-height: 1.4; }
.contact-line strong { display: inline-block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.contact-line a:not(.btn) { color: var(--text-light); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 3px; }
.contact-line a:not(.btn):hover { text-decoration-color: var(--accent); }
.contact-rating .stars { color: var(--accent); }
.contact-rating strong { font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--text-light); display: inline; }
.hours-table { width: 100%; border-collapse: collapse; background: rgba(255, 255, 255, 0.08); border-radius: var(--radius); overflow: hidden; }
.hours-table th, .hours-table td { padding: 9px 14px; text-align: left; font-size: 0.94rem; color: var(--text-light); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: none; }
.hours-table th { font-weight: 600; }
.hours-table td { text-align: right; opacity: 0.92; }
/* Lead form */
.lead-form { display: flex; flex-direction: column; gap: 13px; margin-top: 4px; }
.lead-form-title { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.lf-row { display: flex; flex-direction: column; gap: 6px; }
.lf-row label { font-size: 0.9rem; font-weight: 600; color: var(--text-light); }
.lf-opt { font-weight: 400; opacity: 0.6; }
.lf-row input, .lf-row textarea {
  width: 100%; font: inherit; font-size: 0.97rem; color: var(--text-light);
  background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius); padding: 12px 14px;
  transition: border-color 150ms ease, background 150ms ease;
}
.lf-row textarea { resize: vertical; min-height: 92px; }
.lf-row input:focus, .lf-row textarea:focus { outline: none; border-color: var(--accent); background: rgba(255, 255, 255, 0.14); }
.lf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lf-turnstile { min-height: 65px; }
.lead-form .btn-block { margin-top: 2px; }
.lead-form button[disabled] { opacity: 0.65; cursor: default; }
.lf-status { font-size: 0.92rem; line-height: 1.45; }
.lf-status.lf-ok { color: #b8f0c8; }
.lf-status.lf-err { color: #ffc9c9; }

.contact .btn-primary { color: var(--text); }
.contact .btn-primary:hover { color: var(--text); }

/* Call FAB */
.call-fab {
  display: none; position: fixed; bottom: 18px; right: 18px;
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--accent); color: var(--text);
  align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg); z-index: 60; text-decoration: none;
  transition: transform 150ms ease;
}
.call-fab:hover { transform: scale(1.05); }

/* Footer */
.site-footer { background: #0a1a1a; color: rgba(255, 255, 255, 0.65); padding: 28px 0; text-align: center; font-size: 0.9rem; }

.about-inner > * { opacity: 0; transform: translateY(16px); transition: opacity 320ms ease, transform 320ms ease; }
.about-inner > *.in { opacity: 1; transform: translateY(0); }

/* Laptop widths: tighten the nav so a long brand keeps its full text instead of
   ellipsising next to a roomy nav. Buys roughly 60px, which is the difference
   between "Southern Arizona Landscaping and Irrigation LLC" and "...Irrigation L...". */
/* Long email addresses and the hours table must not push the page wider than
   the viewport on a 320px phone. Found 2026-08-07 while verifying the header fix. */
.contact-details, .contact-line, .contact-details a { overflow-wrap: anywhere; }
.hours-table { width: 100%; table-layout: fixed; }
.hours-table td, .hours-table th { overflow-wrap: anywhere; }
/* Same min-width:auto trap as the header, one level down: the contact panel is a
   grid item, so it could not shrink below its min-content width either. */
.contact-grid > *, .contact-details { min-width: 0; }

@media (max-width: 1100px) {
  .nav { gap: 20px; }
  .nav a { font-size: 0.9rem; }
}
@media (max-width: 900px) {
  /* Header: the nav goes away and the brand is allowed to wrap here, not at 720px.
     Between 721px and 900px the nav, a long brand and the pill cannot all fit, and
     the brand is the item that loses, so it ellipsised to something like
     "Southern Ariz...". The business name is the one thing in the header that must
     survive, so the nav is dropped at the same breakpoint the content grids collapse. */
  .nav { display: none; }
  .brand {
    font-size: 0.95rem; line-height: 1.2; white-space: normal; overflow: hidden;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  }
  .about-inner { grid-template-columns: 1fr; gap: 32px; }
  .about-copy h2 { text-align: center; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-map { min-height: 280px; }
  .reviews-grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 720px) {
  .container.header-inner { padding-left: 16px; padding-right: 16px; }
  section { padding: 64px 0; }
  .hero { min-height: 78vh; padding: calc(var(--header-h) + 24px) 0 44px; }
  .hero h1 { font-size: clamp(2rem, 8vw, 2.6rem); margin-bottom: 16px; }
  .hero-sub { font-size: 1rem; margin-bottom: 24px; }
  .hero-cta { margin-bottom: 18px; }
  .hero-rating { font-size: 0.88rem; padding: 7px 14px; }
  .hero-rating .stars { margin-right: 6px; font-size: 0.95em; }
  .hero-rating .dot-sep { margin: 0 5px; }
  .reviews-grid .review p { font-size: 0.97rem; }
  .call-fab { display: inline-flex; }
  .trust-inner { gap: 16px 22px; }
  .badge { font-size: 0.85rem; }
  .badge svg { width: 18px; height: 18px; }
}
/* Phone widths: the header pill drops its label and becomes a round icon button,
   so the brand always has room no matter how long the business name is.
   The tel: link and its aria-label are unchanged, and .call-fab still covers the
   bottom-right sticky call action. */
@media (max-width: 480px) {
  .brand { font-size: 0.9rem; }
  .cta-pill { padding: 0; gap: 0; min-width: 44px; min-height: 44px; }
  .cta-pill .cta-label { display: none; }
  .cta-pill svg { width: 18px; height: 18px; }
}
@media (max-width: 360px) { .trust-ribbon { display: none; } }

/* Ghost button variant for use over the dark .contact background */
.btn-ghost-dark { background: transparent; color: var(--text-light); border-color: rgba(255,255,255,0.6); }
.btn-ghost-dark:hover { background: rgba(255,255,255,0.1); color: var(--text-light); border-color: rgba(255,255,255,0.9); }
.contact .btn-block + .btn-block { margin-top: 0; }