/* Lawn Robert, LLC — Global styles and responsive layout */

:root {
  --forest:#073b2b;
  --dark:#092d22;
  --green:#79b93d;
  --cream:#f7f8f3;
  --gold:#c6a667;
  --text:#26352e}

* {
  box-sizing:border-box}

html {
  scroll-behavior:smooth}

body {
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:#fff}

a {
  color:inherit;
  text-decoration:none}

button,input,textarea,select {
  font:inherit}

button {
  cursor:pointer}

.header {
  position:sticky;
  top:0;
  z-index:20;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 6%;
  box-shadow:0 2px 16px #0000000b;
  gap:20px}

.brand {
  font-family:Georgia,serif;
  font-weight:bold;
  font-size:21px;
  white-space:nowrap;
  color:var(--forest)}

.brand small {
  font-size:12px}

.leaf {
  color:#75a83a}

nav {
  display:flex;
  gap:25px;
  font-size:14px;
  font-weight:bold}

nav a:hover,.text-link:hover {
  color:#4c872b}

.head-actions {
  display:flex;
  gap:10px}

#lang,#menu {
  border:1px solid #d7dfd4;
  background:white;
  padding:10px;
  border-radius:7px;
  font-weight:bold}

#menu {
  display:none}

.hero {
  min-height:590px;
  background:linear-gradient(90deg,rgba(3,37,23,.91),rgba(4,39,24,.64) 52%,rgba(4,39,24,.13)),url('images/brand.jpeg') center 49%/cover;
  display:flex;
  align-items:center;
  color:white}

.hero-overlay {
  padding:90px 8%;
  max-width:820px}

.eyebrow,.overline {
  letter-spacing:3px;
  font-size:12px;
  font-weight:800;
  color:#83b94c}

.hero h1 {
  font:normal clamp(42px,6vw,78px)/1.07 Georgia,serif;
  margin:20px 0}

.hero p {
  font-size:19px;
  line-height:1.65;
  max-width:580px}

.buttons {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px}

.btn {
  border:0;
  border-radius:5px;
  padding:16px 24px;
  display:inline-block;
  font-weight:800;
  font-size:14px}

.primary {
  background:var(--green);
  color:#112d18}

.primary:hover {
  background:#95d054}

.outline {
  border:1px solid white;
  color:white}

.outline:hover {
  background:#ffffff25}

.intro {
  text-align:center;
  padding:90px 20px;
  max-width:750px;
  margin:auto}

.intro h2,.section h2 {
  font:normal clamp(31px,4vw,49px)/1.15 Georgia,serif;
  color:var(--forest);
  margin:13px 0 22px}

.intro>p:last-child {
  line-height:1.8;
  color:#607067}

.section {
  padding:90px 7%}

.services {
  background:var(--cream)}

.section-heading {
  text-align:center;
  margin-bottom:40px}

.grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  max-width:1200px;
  margin:auto}

.card {
  background:white;
  padding:32px;
  border:1px solid #e6eae2;
  border-radius:8px;
  transition:transform .2s}

.card:hover {
  transform:translateY(-4px)}

.card span {
  font-size:37px;
  color:#5d9739}

.card h3 {
  color:var(--forest);
  font:normal 24px Georgia,serif}

.card p {
  line-height:1.65;
  color:#657168}

.about {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7%;
  align-items:center}

.about-image {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.about-image img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 490px;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

.about-text p:not(.overline) {
  line-height:1.85;
  color:#617166}

.text-link {
  font-weight:bold;
  color:#427e32}

.areas {
  text-align:center;
  background:var(--dark);
  color:#e5f0e5}

.areas h2 {
  color:white}

.areas p:last-child {
  line-height:1.9}

.contact {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8%;
  background:#f7f8f3}

.contact>div>p:not(.overline) {
  line-height:1.8}

.social a {
  font-weight:bold;
  color:var(--forest)}

form {
  display:flex;
  flex-direction:column;
  gap:9px;
  background:white;
  padding:32px;
  border-radius:8px;
  box-shadow:0 10px 35px #0000000a}

label {
  font-size:13px;
  font-weight:bold;
  margin-top:10px}

input,select,textarea {
  width:100%;
  padding:13px;
  border:1px solid #d5dfd5;
  border-radius:5px;
  background:white}

textarea {
  resize:vertical}

form .btn {
  margin-top:14px}

.form-note {
  font-size:12px;
  line-height:1.5;
  color:#66756b}

#formStatus {
  font-size:13px;
  color:#225b31}

footer {
  padding:32px 7%;
  background:#04291e;
  color:white;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap}

footer span,footer small {
  font-size:12px;
  color:#c4d3c9}

@media(max-width:850px) {
  nav {
  display:none;
  position:absolute;
  top:68px;
  left:0;
  right:0;
  background:white;
  flex-direction:column;
  padding:24px 7%;
  box-shadow:0 10px 20px #0002}

nav.open {
  display:flex}

#menu {
  display:block}

.grid {
  grid-template-columns:repeat(2,1fr)}

.about,.contact {
  grid-template-columns:1fr}

.about-image img {
  max-height: 420px;
}

}

@media(max-width:560px) {
  .header {
  padding:13px 4%}

.brand {
  font-size:16px}

.hero {
  min-height:540px;
  background-position:center}

.hero-overlay {
  padding:70px 6%}

.hero h1 {
  font-size:43px}

.hero p {
  font-size:16px}

.grid {
  grid-template-columns:1fr}

.section {
  padding:65px 6%}

.intro {
  padding:65px 6%}

form {
  padding:20px}

footer {
  flex-direction:column;
  align-items:flex-start}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}

.card {
  transition:none}

}

/* ==========================================================
   HOME / HERO V1.1
   Original artwork is displayed in full; CTA sits below it.
   Edit banner image in index.html and spacing here.
   ========================================================== */
.home {
  background: #fff;
}

.home-banner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 5% 0;
}

.home-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  /* Hide the top 6px dark line embedded in the original banner image. */
  clip-path: inset(6px 0 0 0 round 12px);
}

.home-content {
  max-width: 980px;
  margin: 0 auto;
  padding: 36px 6% 58px;
  text-align: center;
}

.home-content h1 {
  color: var(--forest);
  font: normal clamp(30px, 4.2vw, 53px)/1.15 Georgia, serif;
  margin: 14px 0;
}

.home-subtitle {
  color: #516257;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.65;
  margin: 0 auto;
  max-width: 680px;
}

.home-buttons {
  justify-content: center;
  margin-top: 24px;
}

.btn.secondary {
  border: 1px solid var(--forest);
  color: var(--forest);
  background: transparent;
}

.btn.secondary:hover {
  background: #edf3e9;
}

section[id] {
  scroll-margin-top: 90px;
}

@media (max-width: 560px) {
  .home-banner {
    padding: 12px 3% 0;
  }

  .home-banner img {
    border-radius: 8px;
    clip-path: inset(6px 0 0 0 round 8px);
  }

  .home-content {
    padding: 28px 6% 44px;
  }

  .home-buttons .btn {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================
   SERVICES V1.3 — visual cards; does not alter Home/banner
   Replace images/service-N.svg with your own photos later.
   ========================================================== */
.services .card { padding: 0 0 24px; overflow: hidden; display: flex; flex-direction: column; }
.services .service-image-wrap { position: relative; aspect-ratio: 5 / 3; overflow: hidden; background: #dfe9dc; }
.services .service-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.services .service-placeholder { position: absolute; right: 12px; top: 12px; background: rgba(22,61,42,.88); color: white; padding: 6px 10px; border-radius: 20px; font: 600 11px Arial,sans-serif; letter-spacing: .03em; }
.services .card > span:not(.service-placeholder) { display: none; }
.services .card h3 { margin: 22px 24px 8px; }
.services .card p { margin: 0 24px 18px; flex: 1; }
.services .service-link { display: inline-block; align-self: flex-start; margin: 0 24px; color: #245b36; font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.services .service-link:hover, .services .service-link:focus-visible { color: #122d1c; }

/* ==========================================================
   OUR WORK — V1.7 (independent gallery section)
   ========================================================== */
.gallery { background: #f7f8f3; }
.gallery-intro { max-width: 620px; margin: 12px auto 28px; line-height: 1.6; text-align: center; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.gallery-item { position: relative; display: block; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #dfe9dc; text-align: left; min-height: 220px; }
.gallery-item img { display: block; width: 100%; height: 290px; object-fit: cover; transition: transform .25s ease; }
.gallery-item span { position: absolute; bottom: 0; left: 0; right: 0; padding: 26px 18px 16px; background: linear-gradient(transparent, rgba(0,0,0,.78)); color: #fff; font-weight: 700; }
.gallery-item:focus-visible { outline: 3px solid #79b93d; outline-offset: 3px; }
@media (hover: hover) { .gallery-item:hover img { transform: scale(1.035); } }
.gallery-dialog { position: fixed; max-width: min(900px, 94vw); max-height: 90vh; padding: 18px; border: 0; border-radius: 14px; background: #fff; }
.gallery-dialog::backdrop { background: rgba(0, 0, 0, .82); }
.gallery-dialog img { display: block; max-width: 100%; max-height: 72vh; width: auto; height: auto; margin: auto; object-fit: contain; }
.gallery-dialog p { margin: 12px 42px 0 0; font-weight: 700; }
.gallery-close { position: absolute; right: 12px; top: 8px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #073b2b; color: white; font-size: 27px; }
@media (max-width: 640px) { .gallery-grid { grid-template-columns: 1fr; } .gallery-item img { height: 250px; } }
@media (prefers-reduced-motion: reduce) { .gallery-item img { transition: none; } }

/* OUR WORK V2.0 — compact accessible carousel */
.gallery{background:#f7f8f3}.gallery-intro{max-width:620px;margin:12px auto 22px;line-height:1.6;text-align:center}
.gallery-tabs,.gallery-filters{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin:0 auto 18px}
.gallery-tab,.gallery-filter{border:1px solid #cbd9cd;background:#fff;color:#17402d;border-radius:999px;padding:11px 17px;cursor:pointer;font:inherit;font-weight:650}
.gallery-tab.active,.gallery-filter.active{background:#073b2b;color:#fff;border-color:#073b2b}
.gallery-carousel{display:flex;align-items:center;gap:10px;max-width:1100px;margin:auto}
.gallery-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px)/3);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;min-width:0;flex:1}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-item{position:relative;scroll-snap-align:start;border:0;padding:0;border-radius:14px;overflow:hidden;background:#dfe9dc;text-align:left;cursor:pointer;min-width:0}
.gallery-item[hidden]{display:none}.gallery-item img{display:block;width:100%;height:255px;object-fit:cover;transition:transform .25s ease}
.gallery-item span{position:absolute;inset:auto 0 0;padding:26px 14px 13px;background:linear-gradient(transparent,rgba(0,0,0,.82));color:#fff;font-weight:700}
.gallery-arrow,.gallery-modal-arrow{border:0;border-radius:50%;width:44px;height:44px;flex:0 0 44px;background:#073b2b;color:#fff;cursor:pointer;font-size:20px}
.gallery-arrow:disabled,.gallery-modal-arrow:disabled{opacity:.35;cursor:default}.gallery-counter{text-align:center;color:#45604e;margin:13px 0 0;font-size:.9rem}
.gallery-cta{text-align:center;margin-top:20px}.gallery-coming{max-width:700px;margin:15px auto;padding:35px 25px;text-align:center;border:1px dashed #a8bda8;border-radius:16px;background:#fff}.gallery-coming strong{display:block;font-size:1.25rem;color:#073b2b}.gallery-coming p{line-height:1.6}
.gallery-dialog{position:fixed;max-width:min(980px,95vw);max-height:90vh;padding:18px;border:0;border-radius:14px;background:#fff}.gallery-dialog::backdrop{background:rgba(0,0,0,.82)}
.gallery-modal-body{display:flex;align-items:center;gap:10px}.gallery-dialog img{display:block;max-width:calc(100% - 108px);max-height:70vh;min-width:0;width:auto;height:auto;margin:auto;object-fit:contain}.gallery-dialog p{margin:12px 46px 0 0;font-weight:700}
.gallery-close{position:absolute;right:10px;top:8px;width:42px;height:42px;border:0;border-radius:50%;background:#073b2b;color:#fff;font-size:27px;z-index:2}
.gallery-tab:focus-visible,.gallery-filter:focus-visible,.gallery-arrow:focus-visible,.gallery-item:focus-visible,.gallery-modal-arrow:focus-visible{outline:3px solid #78b93c;outline-offset:3px}
@media(hover:hover){.gallery-item:hover img{transform:scale(1.04)}}
@media(max-width:850px){.gallery-track{grid-auto-columns:calc((100% - 16px)/2)}}
@media(max-width:600px){.gallery-track{grid-auto-columns:100%}.gallery-item img{height:250px}.gallery-carousel{gap:5px}.gallery-arrow{width:38px;flex-basis:38px;height:42px}.gallery-dialog{padding:10px}.gallery-modal-body{gap:4px}.gallery-modal-arrow{width:34px;height:38px;flex-basis:34px}.gallery-dialog img{max-width:calc(100% - 76px)}}
@media(prefers-reduced-motion:reduce){.gallery-track{scroll-behavior:auto}.gallery-item img{transition:none}}

/* Our Work V2.1: large filtered photo library and before/after comparisons */
.gallery-filters{max-width:1100px}.gallery-filter{font-size:.85rem;padding:9px 13px}
.compare-list{max-width:820px;margin:0 auto}.compare-project[hidden]{display:none}.compare-project h3{text-align:center;color:#073b2b;margin:0 0 14px}
.compare-stage{position:relative;overflow:hidden;aspect-ratio:16/10;border-radius:16px;background:#dfe9dc;isolation:isolate}
.compare-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare-stage .compare-after{clip-path:inset(0 calc(100% - var(--reveal)) 0 0)}
.compare-divider{position:absolute;left:var(--reveal);top:0;bottom:0;width:3px;background:white;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 3px #333}
.compare-divider:after{content:'↔';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#073b2b;color:#fff;border:3px solid white;border-radius:50%;width:45px;height:45px;display:grid;place-items:center;font-size:22px}
.compare-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare-range:focus-visible{opacity:1;outline:3px solid #79b93d;outline-offset:-4px}
.compare-tag{position:absolute;top:14px;padding:7px 12px;border-radius:999px;background:#073b2b;color:white;font-weight:700;font-size:.8rem;pointer-events:none}
.compare-tag-before{left:14px}.compare-tag-after{right:14px}
.compare-navigation{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:15px;color:#073b2b;font-weight:700}
.compare-navigation button{width:44px;height:44px;border:0;border-radius:50%;background:#073b2b;color:white;cursor:pointer}

/* V2.3 — lightweight, one-time section-heading reveal.
   Elements remain visible without JavaScript and for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal-ready .scroll-reveal:not(.is-revealed) {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  .js-reveal-ready .scroll-reveal {
    transition: opacity 950ms ease-out, transform 950ms cubic-bezier(.2,.75,.25,1);
  }
  .js-reveal-ready .scroll-reveal-delay { transition-delay: 140ms; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* V2.6 — estimate form */
.service-options{border:1px solid #d8e3d9;border-radius:12px;padding:14px;margin:12px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.service-options legend{font-weight:700;padding:0 6px}
.service-options label{display:flex;align-items:center;gap:9px;margin:0;font-size:.9rem;line-height:1.35;cursor:pointer}
.service-options input{width:17px;height:17px;flex:none;accent-color:#07503a}
.quote-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.quote-actions .btn{flex:1 1 200px;text-align:center;cursor:pointer}
.whatsapp-btn{background:#e7f5ec;color:#07503a;border:1px solid #9bc9a9}
#photos{padding:10px;background:white}
@media(max-width:550px){.service-options{grid-template-columns:1fr}.quote-actions{flex-direction:column}}