/*
Theme Name: LivingStone Landscaping V3
Theme URI: https://livingstoneusa.com/
Author: LivingStone Landscaping
Description: Custom lightweight landscaping theme with Jobber integration and local SEO structure.
Version: 3.0.0
Text Domain: livingstone-landscaping
*/

:root {
  --forest: #0c2b1e;
  --forest-2: #123b29;
  --green: #68a934;
  --lime: #8bc34a;
  --cream: #f5f2e9;
  --paper: #fffdf8;
  --ink: #142019;
  --muted: #667169;
  --line: rgba(20,32,25,.13);
  --radius: 22px;
  --shadow: 0 20px 60px rgba(10,32,22,.13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
img { display:block; max-width:100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.container { width: min(1180px, calc(100% - 36px)); margin-inline:auto; }
.eyebrow {
  margin: 0 0 12px;
  color: var(--green);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
h1,h2,h3 { margin-top:0; line-height:1.08; }
h1 { font-family: Georgia, serif; font-size: clamp(2.8rem,7vw,6.2rem); font-weight:500; letter-spacing:-.045em; }
h2 { font-family: Georgia, serif; font-size: clamp(2.1rem,4vw,4rem); font-weight:500; letter-spacing:-.035em; }
h3 { font-size:1.25rem; }
.lead { max-width: 700px; color: var(--muted); font-size: clamp(1.05rem,2vw,1.25rem); }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding: 0 22px; border-radius:999px;
  border:1px solid transparent; font-weight:800; transition:.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { color:white; background:var(--green); box-shadow:0 12px 30px rgba(104,169,52,.27); }
.btn-primary:hover { background:#5b982d; }
.btn-secondary { color:white; border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.07); backdrop-filter: blur(8px); }
.btn-dark { color:white; background:var(--forest); }
.section { padding: clamp(70px,9vw,125px) 0; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:42px; }
.section-head > * { margin-bottom:0; }

.site-header {
  position:absolute; z-index:20; top:0; left:0; width:100%;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.nav {
  min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:25px;
}
.brand img, .brand .custom-logo { width:245px; height:auto; max-height:72px; object-fit:contain; filter:none; }
.nav-links { display:flex; align-items:center; gap:26px; color:white; font-weight:700; font-size:.93rem; }
.nav-links a:hover { color:#b7e58e; }
.menu-toggle { display:none; color:white; background:transparent; border:1px solid rgba(255,255,255,.4); padding:9px 12px; border-radius:12px; }

.hero {
  min-height: 820px; display:grid; align-items:end; color:white;
  background:
    linear-gradient(90deg,rgba(5,23,15,.92) 0%,rgba(5,23,15,.65) 46%,rgba(5,23,15,.2) 100%),
    linear-gradient(0deg,rgba(5,23,15,.68),transparent 42%),
    url("assets/images/owner-laying-sod.jpg") center/cover no-repeat;
}
.hero-inner { padding: 180px 0 96px; max-width:880px; }
.hero h1 { max-width:900px; margin-bottom:24px; }
.hero-copy { max-width:700px; margin:0 0 34px; font-size:clamp(1.05rem,2vw,1.25rem); color:rgba(255,255,255,.86); }
.actions { display:flex; flex-wrap:wrap; gap:14px; }
.trust-row { display:flex; flex-wrap:wrap; gap:14px 28px; margin-top:42px; color:rgba(255,255,255,.9); font-weight:700; font-size:.93rem; }
.trust-row span { display:flex; align-items:center; gap:8px; }

.stats { background:var(--forest); color:white; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.stat { padding:30px 26px; border-right:1px solid rgba(255,255,255,.12); }
.stat:last-child { border-right:0; }
.stat strong { display:block; font-family:Georgia,serif; font-size:2rem; font-weight:500; }
.stat span { color:rgba(255,255,255,.67); font-size:.9rem; }

.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.service-card {
  min-height:250px; padding:30px; border:1px solid var(--line); border-radius:var(--radius);
  background:white; transition:.25s ease;
}
.service-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:transparent; }
.service-number { color:var(--green); font-weight:900; letter-spacing:.12em; font-size:.8rem; }
.service-card p { color:var(--muted); margin-bottom:0; }

.projects { background:var(--cream); }
.project-stack { display:grid; gap:26px; }
.project {
  display:grid; grid-template-columns:1.55fr .75fr; overflow:hidden;
  background:white; border-radius:var(--radius); box-shadow:var(--shadow);
}
.project-info { padding:34px; align-self:center; }
.project-info p { color:var(--muted); }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.tag { padding:6px 11px; border-radius:999px; background:#edf4e8; color:#38611e; font-size:.78rem; font-weight:800; }

.compare {
  position:relative; min-height:470px; overflow:hidden; background:#ddd;
}
.compare img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compare .after { clip-path: inset(0 0 0 50%); }
.compare input {
  position:absolute; inset:0; z-index:3; width:100%; height:100%; opacity:0; cursor:ew-resize;
}
.compare-line { position:absolute; z-index:2; top:0; bottom:0; left:50%; width:3px; background:white; transform:translateX(-50%); box-shadow:0 0 0 1px rgba(0,0,0,.1); }
.compare-line::after {
  content:"↔"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:white; color:var(--forest); font-weight:900;
}
.photo-label {
  position:absolute; z-index:2; bottom:18px; padding:8px 13px; border-radius:999px;
  color:white; background:rgba(7,27,18,.72); font-weight:900; font-size:.75rem; letter-spacing:.08em;
}
.photo-label.before { left:18px; }
.photo-label.after-label { right:18px; background:rgba(87,143,42,.9); }

.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:55px; align-items:center; }
.about-photo { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.about-photo img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.check-list { display:grid; gap:12px; padding:0; list-style:none; }
.check-list li { display:flex; gap:10px; }
.check-list li::before { content:"✓"; color:var(--green); font-weight:900; }

.area-section { color:white; background:var(--forest); overflow:hidden; }
.area-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:center; }
.city-list { display:flex; flex-wrap:wrap; gap:9px; margin:25px 0 32px; }
.city-list span { padding:7px 12px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(255,255,255,.06); font-size:.84rem; }
.map-card { padding:18px; border:1px solid rgba(255,255,255,.13); border-radius:var(--radius); background:rgba(255,255,255,.05); }
.map-card svg { display:block; width:100%; height:auto; }
.map-note { color:rgba(255,255,255,.62); font-size:.8rem; margin:12px 4px 0; }

.reviews-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:stretch; }
.review-card, .cta-card { border-radius:var(--radius); padding:38px; }
.review-card { border:1px solid var(--line); background:white; }
.stars { color:#d9a928; font-size:1.4rem; letter-spacing:.12em; }
.review-score { font-family:Georgia,serif; font-size:4rem; line-height:1; margin:12px 0; }
.cta-card { background:var(--forest); color:white; display:flex; flex-direction:column; justify-content:center; }
.cta-card p { color:rgba(255,255,255,.7); }

.site-footer { padding:55px 0 100px; color:white; background:#071b12; }
.footer-grid { display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:40px; }
.footer-logo { width:250px; height:auto; max-height:86px; object-fit:contain; filter:none; margin-bottom:18px; }
.footer-muted { color:rgba(255,255,255,.62); }
.footer-links { display:grid; gap:9px; }
.footer-title { color:#a8d884; font-weight:900; text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; }

.mobile-cta {
  display:none; position:fixed; z-index:50; left:12px; right:12px; bottom:12px;
  background:var(--green); color:white; border-radius:999px; padding:15px 20px; text-align:center; font-weight:900;
  box-shadow:0 12px 40px rgba(0,0,0,.28);
}

@media (max-width: 900px) {
  .menu-toggle { display:block; }
  .nav-links {
    display:none; position:absolute; top:88px; left:18px; right:18px; padding:22px;
    flex-direction:column; align-items:stretch; background:rgba(7,27,18,.98); border-radius:18px;
  }
  .nav-links.open { display:flex; }
  .nav-links .btn { width:100%; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2) { border-right:0; }
  .stat:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.12); }
  .services-grid { grid-template-columns:1fr 1fr; }
  .project, .about-grid, .area-grid, .reviews-grid, .footer-grid { grid-template-columns:1fr; }
  .project-info { order:2; }
  .compare { min-height:430px; }
}
@media (max-width: 620px) {
  .brand img { width:185px; }
  .hero { min-height:730px; background-position:62% center; }
  .hero-inner { padding-bottom:70px; }
  .stats-grid, .services-grid { grid-template-columns:1fr; }
  .stat { border-right:0; border-bottom:1px solid rgba(255,255,255,.12); }
  .section-head { display:block; }
  .compare { min-height:360px; }
  .mobile-cta { display:block; }
}

.service-map{height:440px;border-radius:16px;overflow:hidden;background:#e8eee6;position:relative}
.map-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;background:radial-gradient(circle at 40% 30%,#f5f7f1,#dfe9db);color:var(--forest)}
.map-fallback strong{font-family:Georgia,serif;font-size:clamp(1.6rem,3vw,2.5rem);font-weight:500}.map-fallback span{margin-top:10px;color:#4d6255}
.address-checker{margin-top:16px;padding:18px;border-radius:16px;background:rgba(255,255,255,.08)}
.address-checker label{display:block;margin-bottom:9px;font-weight:800}.address-row{display:flex;gap:10px}.address-row input{flex:1;min-width:0;border:0;border-radius:999px;padding:0 18px;min-height:52px;color:var(--ink);background:white}.address-result{margin:12px 4px 0;font-weight:700}.address-result.yes{color:#baf18e}.address-result.no{color:#ffd0c8}.address-result.neutral{color:rgba(255,255,255,.75)}.address-result a{text-decoration:underline}
@media(max-width:620px){.address-row{flex-direction:column}.service-map{height:360px}.brand img,.brand .custom-logo{width:205px}}
/* V3 reliability fixes */
.brand img,.brand .custom-logo{background:transparent!important;mix-blend-mode:normal!important}
.service-map .leaflet-control-attribution{font-size:10px}
.address-result{min-height:1.6em;margin:.85rem 0 0;font-weight:700}
.address-result.yes{color:#d8ffbd}.address-result.no{color:#ffd7cd}.address-result.neutral{color:#f2eadb}
.address-result a{color:inherit;text-decoration:underline;text-underline-offset:3px}
