/* ============================================================
   Coughlin Lawns — styles.css
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --gd:#1a3a1a;--gm:#2d5a27;--gf:#4a8c3f;--gl:#7cbd6e;--gp:#e8f5e4;
  --cream:#f9f6ef;--tan:#e4ddd0;--text:#1a2412;--muted:#5a6b52;
}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;color:var(--text);background:var(--cream)}

/* NAV */
nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0.6rem 2.5rem;background:rgba(26,58,26,0.98);
}
.logo{display:flex;align-items:center}
.nav-links{display:flex;gap:1.75rem;list-style:none}
.nav-links a{color:rgba(255,255,255,0.75);text-decoration:none;font-size:0.88rem;font-weight:500;transition:color 0.2s}
.nav-links a:hover{color:#fff}
.nav-cta{background:var(--gf);color:#fff;border:none;padding:0.5rem 1.2rem;border-radius:6px;font-size:0.88rem;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background 0.2s}
.nav-cta:hover{background:var(--gl)}

/* HERO */
.hero{
  background:linear-gradient(150deg,#1a3a1a 0%,#2d5a27 60%,#3a6e30 100%);
  padding:7rem 2.5rem 8rem;position:relative;overflow:hidden;
}
.hero::after{
  content:'';position:absolute;bottom:-70px;left:-5%;right:-5%;height:140px;
  background:var(--cream);border-radius:50% 50% 0 0/100% 100% 0 0;
}
.hero-in{max-width:660px;position:relative;z-index:1}
.badge{
  display:inline-block;border:1px solid rgba(122,189,110,0.4);
  color:var(--gl);font-size:0.76rem;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  padding:0.3rem 0.9rem;border-radius:20px;margin-bottom:1.4rem;
}
.hero h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.5rem,5vw,3.8rem);font-weight:900;color:#fff;
  line-height:1.1;margin-bottom:1.1rem;
}
.hero h1 em{color:var(--gl);font-style:normal}
.hero p{font-size:1rem;color:rgba(255,255,255,0.76);line-height:1.72;max-width:490px;margin-bottom:2rem}
.btns{display:flex;gap:0.9rem;flex-wrap:wrap}
.bp{background:var(--gf);color:#fff;padding:0.78rem 1.7rem;border-radius:8px;font-size:0.94rem;font-weight:600;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.2s}
.bp:hover{background:var(--gl);transform:translateY(-1px)}
.bo{background:transparent;color:#fff;padding:0.78rem 1.7rem;border-radius:8px;font-size:0.94rem;font-weight:600;border:2px solid rgba(255,255,255,0.32);cursor:pointer;font-family:'DM Sans',sans-serif;transition:border-color 0.2s}
.bo:hover{border-color:#fff}

/* SHARED */
section{padding:5rem 2.5rem}
.inner{max-width:1040px;margin:0 auto}
.ey{font-size:0.73rem;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--gf);margin-bottom:0.55rem}
.st{font-family:'Playfair Display',serif;font-size:clamp(1.85rem,2.8vw,2.5rem);font-weight:700;color:var(--gd);line-height:1.2;margin-bottom:0.85rem}
.ss{font-size:0.97rem;color:var(--muted);line-height:1.7;max-width:530px}

/* SERVICES */
.svc-hd{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.25rem;margin-bottom:2.25rem}
.main-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.25rem}
@media(max-width:600px){.main-grid{grid-template-columns:1fr}}
.card{background:#fff;border-radius:14px;border:1.5px solid var(--gl);padding:1.85rem;transition:transform 0.22s,box-shadow 0.22s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(26,58,26,0.1)}
.tag{display:inline-block;font-size:0.7rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:0.22rem 0.7rem;border-radius:20px;background:var(--gp);color:var(--gm);margin-bottom:0.9rem}
.tag-a{background:#f0ece3;color:#7a6540}
.card h3{font-size:1.1rem;font-weight:700;color:var(--gd);margin-bottom:0.65rem}
.card .d{font-size:0.88rem;color:var(--muted);line-height:1.65;margin-bottom:0.9rem}
.ul{list-style:none;display:flex;flex-direction:column;gap:0.42rem}
.ul li{font-size:0.87rem;color:var(--muted);display:flex;align-items:center;gap:0.55rem}
.ul li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gf);flex-shrink:0}
.addon{background:#fff;border-radius:14px;border:1px solid var(--tan);padding:1.6rem 1.85rem}
.addon h3{font-size:1rem;font-weight:600;color:var(--gd);margin-bottom:0.5rem}
.pills{display:flex;flex-wrap:wrap;gap:0.45rem;margin-top:0.65rem}
.pill{font-size:0.82rem;color:var(--muted);background:#f5f2eb;border:1px solid var(--tan);border-radius:20px;padding:0.28rem 0.82rem}

/* ABOUT */
.about{background:#fff}
.about-body{max-width:620px}
.about-body .ss{margin-top:0.5rem}

/* GALLERY */
.gal{background:var(--gd)}
.gal .ey{color:var(--gl)}.gal .st{color:#fff}.gal .ss{color:rgba(255,255,255,0.6)}
.gal-header{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}
.gal-select-wrap{display:flex;flex-direction:column;gap:0.3rem}
.gal-select-wrap label{font-size:0.68rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.5)}
.gal-select{appearance:none;background:rgba(255,255,255,0.08);border:1px solid rgba(122,189,110,0.35);color:#fff;font-family:'DM Sans',sans-serif;font-size:0.85rem;font-weight:500;padding:0.55rem 2.2rem 0.55rem 0.9rem;border-radius:8px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237cbd6e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.75rem center;outline:none}
.gal-select option{background:#1a3a1a;color:#fff}
.gal-filtered{display:none}
.gal-filtered.active{display:block}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:580px){.proj-grid{grid-template-columns:1fr 1fr}}
.proj-card{border-radius:12px;overflow:hidden;background:rgba(255,255,255,0.05);border:1px solid rgba(122,189,110,0.2);cursor:pointer;transition:background 0.2s,transform 0.2s}
.proj-card:hover{background:rgba(255,255,255,0.1);transform:translateY(-2px)}
.proj-thumb{height:160px;background:var(--gm);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.proj-thumb img{width:100%;height:100%;object-fit:cover}
.proj-thumb-placeholder{font-size:2.5rem}
.proj-info{padding:0.8rem 1rem}
.proj-cat{font-size:0.62rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gl);margin-bottom:0.25rem}
.proj-name{font-size:0.92rem;font-weight:600;color:#fff}
.proj-cta{font-size:0.75rem;color:rgba(255,255,255,0.45);margin-top:0.2rem}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:1000;align-items:center;justify-content:center;padding:1.5rem}
.modal-overlay.open{display:flex}
.modal{background:#1a3a1a;border-radius:16px;width:100%;max-width:860px;max-height:90vh;overflow-y:auto;position:relative}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(255,255,255,0.08)}
.modal-title{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:700;color:#fff}
.modal-cat{font-size:0.68rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--gl);margin-top:0.15rem}
.modal-close{background:rgba(255,255,255,0.1);border:none;color:#fff;width:32px;height:32px;border-radius:50%;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.modal-body{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:none}
@media(max-width:560px){.modal-body{grid-template-columns:1fr}}
.modal-col{padding:1.25rem 1.5rem}
.modal-col+.modal-col{border-left:1px solid rgba(255,255,255,0.08)}
.modal-col-label{font-size:0.68rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:0.75rem;padding:0.25rem 0.65rem;border-radius:20px;display:inline-block}
.modal-col-label.before{background:rgba(0,0,0,0.4);color:rgba(255,255,255,0.7)}
.modal-col-label.after{background:rgba(74,140,63,0.5);color:#a8e09e}
.photo-collage{display:grid;gap:6px}
.photo-collage.count-1{grid-template-columns:1fr}
.photo-collage.count-2{grid-template-columns:1fr 1fr}
.photo-collage.count-3{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
.photo-collage.count-3 .photo-slot:first-child{grid-column:span 2}
.photo-collage.count-4{grid-template-columns:1fr 1fr}
.photo-slot{border-radius:8px;overflow:hidden;background:var(--gm);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.3);font-size:0.72rem}
.photo-slot img{width:100%;height:100%;object-fit:cover}

/* CONTACT */
.cg{display:grid;grid-template-columns:1fr 1.35fr;gap:4rem;align-items:start}
@media(max-width:660px){.cg{grid-template-columns:1fr}}
.ci{display:flex;align-items:flex-start;gap:0.9rem;margin-bottom:1.2rem}
.ci-ic{width:41px;height:41px;background:var(--gp);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0}
.ci h4{font-size:0.86rem;font-weight:600;color:var(--gd);margin-bottom:0.12rem}
.ci p{font-size:0.86rem;color:var(--muted)}
.fc{background:#fff;border-radius:14px;padding:2.1rem;border:1px solid var(--tan)}
.fc h3{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;color:var(--gd);margin-bottom:1.4rem}
.fg{margin-bottom:1rem}
.fg label{display:block;font-size:0.78rem;font-weight:600;color:var(--muted);letter-spacing:0.3px;margin-bottom:0.32rem}
.fg input,.fg select,.fg textarea{
  width:100%;padding:0.62rem 0.85rem;border:1.5px solid var(--tan);border-radius:7px;
  font-size:0.91rem;font-family:'DM Sans',sans-serif;color:var(--text);background:#fff;
  outline:none;transition:border-color 0.2s;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--gf)}
.fg textarea{min-height:82px;resize:vertical}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:0.9rem}
.fs{width:100%;padding:0.88rem;background:var(--gm);color:#fff;border:none;border-radius:8px;font-size:0.93rem;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;margin-top:0.2rem;transition:background 0.2s}
.fs:hover{background:var(--gf)}

/* LIGHTBOX */
.lightbox{
  display:none;
  position:fixed;
  top:0;left:0;
  width:100vw;height:100vh;
  z-index:9999;
  background:rgba(0,0,0,0.95);
  align-items:center;
  justify-content:center;
  flex-direction:column;
}
.lightbox.open{display:flex}
.lb-img{
  max-width:90vw;
  max-height:85vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 8px 48px rgba(0,0,0,0.8);
  display:block;
}
.lb-close{
  position:fixed;top:1.2rem;right:1.4rem;
  background:rgba(255,255,255,0.15);border:none;color:#fff;
  width:42px;height:42px;border-radius:50%;font-size:1.2rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background 0.2s;z-index:10000;
}
.lb-close:hover{background:rgba(255,255,255,0.3)}
.lb-arrow{
  position:fixed;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,0.15);border:none;color:#fff;
  width:50px;height:50px;border-radius:50%;font-size:2.2rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background 0.2s;z-index:10000;line-height:1;
}
.lb-arrow:hover{background:rgba(255,255,255,0.3)}
.lb-prev{left:1.2rem}
.lb-next{right:1.2rem}
.lb-counter{
  position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%);
  font-size:0.85rem;color:rgba(255,255,255,0.6);
  letter-spacing:0.5px;z-index:10000;
}

/* FOOTER */
footer{background:var(--gd);padding:2.5rem;text-align:center}
.fl{display:flex;align-items:center;justify-content:center}
footer p{font-size:0.8rem;color:rgba(255,255,255,0.38);margin-top:0.9rem}

/* ============================================================
   MOBILE NAVIGATION
   ============================================================ */
.nav-right{display:flex;align-items:center;gap:0.75rem}

.hamburger{
  display:none;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;background:transparent;border:none;cursor:pointer;
  padding:6px;width:36px;height:36px;
}
.hamburger span{
  display:block;width:22px;height:2px;background:#fff;border-radius:2px;
  transition:transform 0.25s,opacity 0.25s;transform-origin:center;
}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   MOBILE — max-width: 768px
   ============================================================ */
@media(max-width:768px){

  /* Nav */
  nav{padding:0.6rem 1.25rem;flex-wrap:wrap;position:relative}
  .hamburger{display:flex}
  .nav-links{
    display:none;flex-direction:column;gap:0;
    width:100%;order:3;
    background:rgba(20,46,20,0.98);
    border-top:1px solid rgba(255,255,255,0.08);
    margin:0 -1.25rem;padding:0.5rem 0;
  }
  .nav-links.open{display:flex}
  .nav-links li a{
    display:block;padding:0.75rem 1.5rem;
    font-size:0.95rem;color:rgba(255,255,255,0.82);
  }
  .nav-links li a:hover{color:#fff;background:rgba(255,255,255,0.05)}
  .nav-cta{font-size:0.82rem;padding:0.45rem 1rem}

  /* Hero */
  .hero{padding:4rem 1.5rem 6rem}
  .hero h1{font-size:2.3rem}
  .hero p{font-size:0.94rem}
  .btns{flex-direction:column;gap:0.7rem}
  .bp,.bo{width:100%;text-align:center;padding:0.85rem 1.4rem}

  /* Sections */
  section{padding:3.5rem 1.25rem}

  /* Services */
  .svc-hd{flex-direction:column;align-items:flex-start;gap:0.75rem}
  .ss{max-width:100%}
  .main-grid{grid-template-columns:1fr}
  .card{padding:1.4rem}

  /* Gallery */
  .gal-header{flex-direction:column;align-items:flex-start;gap:1.25rem}
  .gal-select{width:100%}
  .proj-grid{grid-template-columns:1fr 1fr;gap:0.75rem}
  .proj-thumb{height:130px}

  /* Modal */
  .modal{border-radius:12px}
  .modal-head{padding:1rem 1.1rem}
  .modal-title{font-size:1rem}
  .modal-body{grid-template-columns:1fr}
  .modal-col{padding:1rem 1.1rem}
  .modal-col+.modal-col{border-left:none;border-top:1px solid rgba(255,255,255,0.08)}

  /* Contact */
  .cg{gap:2.5rem}
  .fr{grid-template-columns:1fr}
  .fc{padding:1.5rem 1.1rem}

  /* Footer */
  footer{padding:2rem 1.25rem}
}

/* ============================================================
   MOBILE — max-width: 420px (small phones)
   ============================================================ */
@media(max-width:420px){
  .hero h1{font-size:1.95rem}
  .proj-grid{grid-template-columns:1fr}
  .proj-thumb{height:160px}
  .pills{gap:0.35rem}
  .pill{font-size:0.78rem;padding:0.24rem 0.65rem}
}