/* ==========================================================================
   St. George Turf — design system
   Desert/southwest palette, editorial local-service trust, WCAG AA, responsive.
   ========================================================================== */

:root {
  /* Direction A — "winning turf look": vibrant turf-green foreground,
     fresh neutral surfaces, warm sandstone retained as a secondary accent.
     WCAG-AA: green-on-white and white-on-green both ≥ 4.5:1. */
  --clr-green-400: #3fa55a;   /* brighter hover/semantic */
  --clr-green-500: #2e8a4a;   /* primary turf green (AA on white: ~5.5:1) */
  --clr-green-600: #257a3f;   /* primary button green (white text AA: ~6.3:1) */
  --clr-green-700: #1d6132;   /* hover / deep */
  --clr-green-800: #164a26;   /* deep footer green */
  --clr-ink:       #17241c;   /* near-black green-tinted text */
  --clr-ink-muted: #46554c;
  --clr-sand-50:  #fbfaf7;    /* warm off-white surface */
  --clr-sand-100: #f4efe6;
  --clr-sand-200: #e7ddcb;
  --clr-sand-300: #d6c7ab;
  --clr-rock:      #a6622e;   /* sandstone CTA accent; AA with white text */
  --clr-line:      #e5decf;

  /* Typography — Playfair Display (premium serif display) + Outfit (modern sans body) */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing scale (intentional, not AI-generous) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Radii (subtle, hierarchy-aware) */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 3px rgba(23, 36, 28, 0.08);
  --shadow-md: 0 6px 18px rgba(23, 36, 28, 0.10);

  --maxw: 1120px;
}

/* Reset / base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--clr-ink);
  background: var(--clr-sand-50);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--clr-green-700); text-underline-offset: 3px; }
a:hover { color: var(--clr-green-800); }
ul, ol { padding-left: 1.25rem; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  color: var(--clr-ink);
  margin: 0 0 var(--space-4);
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); margin-top: var(--space-12); }
h3 { font-size: 1.25rem; margin-top: var(--space-6); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 var(--space-4); }
small { color: var(--clr-ink-muted); }

/* Layout */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-4); }
.section { padding: var(--space-12) 0; }
.section--tint { background: var(--clr-sand-100); }

/* Header */
.site-header {
  border-bottom: 1px solid var(--clr-line);
  background: rgba(250, 247, 242, 0.96);
  position: sticky; top: 0; z-index: 40;
}
.header-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6);
}
.brand { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--clr-ink); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
.brand .brand-accent { color: var(--clr-green-600); }
.site-nav ul {
  list-style: none; display: flex; gap: var(--space-4); margin: 0; padding: 0; align-items: center;
}
.site-nav a { text-decoration: none; color: var(--clr-ink); font-weight: 500; font-size: 0.95rem; white-space: nowrap; }
.site-nav a:hover { color: var(--clr-green-700); }
.header-cta { white-space: nowrap; }
/* Between ~860px and ~1020px the nav must not wrap: tighten label size/gaps only. */
@media (max-width: 1020px) and (min-width: 861px) {
  .site-nav ul { gap: var(--space-3); }
  .site-nav a { font-size: 0.84rem; }
  .brand { font-size: 1.1rem; }
  .header-inner { gap: var(--space-3); padding-left: var(--space-3); padding-right: var(--space-3); }
}

/* Buttons */
.btn {
  display: inline-block; padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm); text-decoration: none;
  font-weight: 600; font-size: 1rem; cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease; border: 1px solid transparent;
  text-align: center;
}
.btn--primary { background: var(--clr-green-600); color: #fff; }
.btn--primary:hover { background: var(--clr-green-700); color: #fff; }
.btn--outline { border-color: var(--clr-green-600); color: var(--clr-green-700); background: transparent; }
.btn--outline:hover { background: var(--clr-sand-100); }
.btn--call { background: var(--clr-rock); color: #fff; }
.btn--call:hover { background: #8f5127; color: #fff; }
.btn--block { display: block; width: 100%; }

/* Representative service photography — not presented as completed local projects. */
.fig-illus { margin: var(--space-6) 0; }
.fig-illus img { width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.fig-illus figcaption { font-size: 0.9rem; color: var(--clr-ink-muted); margin-top: var(--space-2); }
.two-col { display: grid; gap: var(--space-8); grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }

/* Hero */
.hero {
  background:
    linear-gradient(90deg, rgba(18,31,23,0.88) 0%, rgba(18,31,23,0.72) 48%, rgba(18,31,23,0.30) 100%),
    url("../images/home-desert-backyard.jpg") center/cover;
  color: #fff; padding: var(--space-16) 0;
  position: relative;
}
.hero h1 { color: #fff; margin-bottom: var(--space-4); font-weight: 800; }
.hero p.lede { font-size: 1.3rem; max-width: 60ch; color: var(--clr-sand-100); line-height: 1.5; }
.hero .cta-row { display: flex; gap: var(--space-4); margin-top: var(--space-8); flex-wrap: wrap; }
.hero .btn--primary { font-size: 1.05rem; padding: var(--space-4) var(--space-8); box-shadow: var(--shadow-md); border: 1px solid rgba(255,255,255,0.25); }
.hero .btn--call { font-size: 1.05rem; padding: var(--space-4) var(--space-8); background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.5); color: #fff; }
.hero .btn--call:hover { background: rgba(255,255,255,0.24); color: #fff; }

/* Trust strip below hero — designed reassurance chips, not a raw inline line */
.hero-trust { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-8); }
.hero-trust span { display: inline-flex; align-items: center; gap: var(--space-2); background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; padding: var(--space-2) var(--space-4); color: #fff; font-size: 0.88rem; font-weight: 500; }
.hero-trust .tick { color: var(--clr-green-400); font-weight: 800; }

/* Pricing anchor under the hero trust strip — clear cost signal, ties to the cost page */
.hero-price { margin-top: var(--space-5); font-size: 1.15rem; color: #fff; max-width: 72ch; line-height: 1.4; }
.hero-price a { color: var(--clr-green-400); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.hero-price a:hover { color: #fff; }
.hero-price strong { color: #fff; }

/* Service-page hero: useful copy and conversion actions first, paired with
   representative licensed photography rather than claimed project work. */
.service-hero {
  overflow: hidden;
  padding: 0 0 var(--space-12);
  background:
    radial-gradient(circle at 82% 14%, rgba(63, 165, 90, 0.15), transparent 32%),
    linear-gradient(145deg, #fbfaf7 0%, #f4efe6 62%, #ecdfcb 100%);
  border-bottom: 1px solid var(--clr-line);
}
.service-hero .breadcrumbs { margin: var(--space-6) 0 var(--space-6); }
.service-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(430px, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.service-hero__content { padding: var(--space-4) 0; }
.service-hero h1 {
  max-width: 15ch;
  font-size: clamp(2.25rem, 4.3vw, 3.6rem);
  margin-bottom: var(--space-6);
}
.service-hero .lede {
  max-width: 58ch;
  color: var(--clr-ink-muted);
  font-size: clamp(1.08rem, 1.7vw, 1.28rem);
  line-height: 1.55;
}
.eyebrow {
  color: var(--clr-green-700);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.3;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-8) 0 var(--space-6);
}
.hero-actions .btn { padding: var(--space-4) var(--space-6); }
.service-points {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--clr-ink-muted);
  font-size: 0.95rem;
  font-weight: 600;
}
.service-points li { position: relative; padding-left: 1.25rem; }
.service-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--clr-green-600);
  font-weight: 800;
}
.service-hero__visual {
  margin: 0;
  position: relative;
}
.service-hero__visual::before {
  content: "";
  position: absolute;
  inset: 8% -5% -7% 8%;
  border-radius: 30% 18% 24% 20%;
  background: rgba(201, 124, 61, 0.16);
  transform: rotate(3deg);
}
.service-hero__visual img {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 8px solid rgba(255, 255, 255, 0.76);
  border-radius: 32% 12% 28% 10%;
  box-shadow: 0 22px 55px rgba(23, 36, 28, 0.18);
}
.service-hero__visual figcaption {
  position: relative;
  margin-top: var(--space-3);
  color: var(--clr-ink-muted);
  font-size: 0.78rem;
  text-align: right;
}
.content-shell { max-width: var(--maxw); }
.service-content > .container > h2:first-child { margin-top: 0; }
.quote-panel {
  scroll-margin-top: 92px;
  margin-top: var(--space-8);
  padding: clamp(1.25rem, 4vw, 2rem);
  background: #fff;
  border: 1px solid var(--clr-line);
  border-top: 5px solid var(--clr-green-600);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* Cards */
.card-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card {
  background: #fff; border: 1px solid var(--clr-line);
  border-radius: var(--radius-md); padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-top: 0; }
.card a { font-weight: 600; }

/* Process steps */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps li { position: relative; padding: 0 0 var(--space-6) var(--space-12); }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--clr-green-600); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.95rem;
}

/* FAQ */
.faq details { border-bottom: 1px solid var(--clr-line); padding: var(--space-4) 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; }
.faq details[open] summary { color: var(--clr-green-700); }
.faq details p { margin-top: var(--space-3); }

/* Comparison/table */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--clr-line); vertical-align: top; }
th { background: var(--clr-sand-100); font-family: var(--font-display); font-size: 1rem; }

/* Callout (rebate, disclosure) */
.callout {
  border-left: 4px solid var(--clr-green-500);
  background: var(--clr-sand-100);
  padding: var(--space-4) var(--space-6);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: var(--space-6) 0;
}
.callout--rock { border-left-color: var(--clr-rock); }

/* Key-takeaways / answer-first block (goal-completion per creator guidance) */
.key-takeaways {
  background: var(--clr-sand-100);
  border: 1px solid var(--clr-line);
  border-left: 5px solid var(--clr-green-500);
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-6) 0 var(--space-8);
}
.key-takeaways h2,
.key-takeaways h3 {
  margin-top: 0;
  font-size: 1.15rem;
}
.key-takeaways ul {
  margin: var(--space-3) 0 0;
  padding-left: 0;
  list-style: none;
}
.key-takeaways li {
  padding-left: var(--space-6);
  position: relative;
  margin-bottom: var(--space-3);
}
.key-takeaways li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--clr-green-500);
  font-weight: 700;
}

/* Form */
.form-grid { display: grid; gap: var(--space-4); }
.form-field { display: flex; flex-direction: column; gap: var(--space-1); }
.form-field label { font-weight: 600; font-size: 0.95rem; }
.form-field input, .form-field select, .form-field textarea {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--clr-sand-300); border-radius: var(--radius-sm);
  font: inherit; background: #fff; color: var(--clr-ink);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 2px solid var(--clr-green-500); outline-offset: 1px;
}
.form-note { font-size: 0.85rem; color: var(--clr-ink-muted); }
.form-success { display: none; background: var(--clr-green-500); color: #fff; padding: var(--space-4); border-radius: var(--radius-sm); margin-top: var(--space-4); }

/* Footer */
.site-footer { background: var(--clr-green-800); color: var(--clr-sand-100); padding: var(--space-12) 0 var(--space-8); }
.site-footer a { color: var(--clr-sand-100); text-decoration: underline; text-underline-offset: 3px; }
.footer-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.site-footer h4 { color: #fff; font-size: 1rem; }
.footer-bottom { border-top: 1px solid rgba(250,247,242,0.15); margin-top: var(--space-8); padding-top: var(--space-6); font-size: 0.85rem; }
.cities-list a { display: inline-block; margin: 0 var(--space-4) var(--space-2) 0; }

/* Mobile sticky call */
.sticky-call {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  padding: var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--clr-ink);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 180ms ease, visibility 180ms ease;
}
.sticky-call.is-visible { transform: translateY(0); visibility: visible; }
.sticky-call a { display: block; text-align: center; }
.breadcrumbs { font-size: 0.9rem; color: var(--clr-ink-muted); margin: var(--space-6) 0 0; }
.breadcrumbs a { color: var(--clr-ink-muted); }
.breadcrumbs span { margin: 0 var(--space-1); }

/* Responsive */
@media (max-width: 860px) {
  .site-nav { display: none; }
  .sticky-call { display: block; }
  body { padding-bottom: 64px; }
  .service-hero { padding-bottom: var(--space-8); }
  .service-hero__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .service-hero__content { padding: 0; }
  .service-hero h1 { max-width: 18ch; }
  .service-hero__visual { max-width: 680px; }
}
@media (max-width: 540px) {
  .service-hero .breadcrumbs { margin: var(--space-4) 0 var(--space-6); }
  .service-hero h1 { font-size: clamp(2rem, 11vw, 3rem); }
  .hero-actions { display: grid; }
  .hero-actions .btn { width: 100%; }
  .service-points { display: grid; }
  .service-hero__visual img { border-width: 5px; border-radius: 24% 8% 20% 8%; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top:0; background:#fff; padding: var(--space-2) var(--space-4); z-index:100; }
.skip-link:focus { left: 0; }

/* Scroll-reveal safety: content is visible by default; GSAP animates it only when
   JS confirms readiness (html.js-anim). If JS/CDN fails, nothing is hidden. */
html:not(.js-anim) .section > .container { opacity: 1 !important; transform: none !important; }
html:not(.js-anim) .hero .container { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .section > .container, .hero .container { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sticky-call { transition: none; }
}