/* ============================================================
   UNIQUE HOME LANDSCAPING — Global Stylesheet
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,900;1,700&family=DM+Sans:wght@300;400;500;600&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --green:#5FAF3A;--green-dk:#4a8e2c;--green-lt:#e8f5e0;--green-xlt:#f4faf0;
  --dark:#4A4A4A;--dark2:#1e1e1e;--white:#fff;--off:#f9f9f9;
  --g100:#f4f4f4;--g200:#e8e8e8;--g400:#a0a0a0;--g600:#686868;
  --shsm:0 2px 16px rgba(0,0,0,.06);
  --shmd:0 8px 32px rgba(0,0,0,.09);
  --shlg:0 20px 64px rgba(0,0,0,.11);
  --shg:0 8px 32px rgba(95,175,58,.22);
  --r:16px;--rsm:8px;--rlg:24px;
  --tr:all .34s cubic-bezier(.4,0,.2,1);
  --fd:'Playfair Display',serif;
  --fb:'DM Sans',sans-serif;
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--fb);color:var(--dark);background:var(--white);line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--fd);line-height:1.22;color:var(--dark2)}
h1{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:700}
h2{font-size:clamp(1.6rem,3vw,2.5rem);font-weight:700}
h3{font-size:clamp(1.05rem,2vw,1.45rem);font-weight:600}
h4{font-size:1rem;font-weight:600}
p{color:var(--g600);font-size:.97rem;line-height:1.78}

/* ---- UTILITIES ---- */
.hl{color:var(--green)}
.container{max-width:1200px;margin:0 auto;padding:0 28px}
.section{padding:96px 0}
.section-alt{background:var(--off)}
.section-grn{background:var(--green-xlt)}
.lbl{font-family:var(--fb);font-size:.72rem;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--green);display:inline-flex;align-items:center;gap:10px;margin-bottom:14px}
.lbl::before{content:'';width:28px;height:2px;background:var(--green);border-radius:2px;flex-shrink:0}
.sec-head{text-align:center;max-width:600px;margin:0 auto 60px}
.sec-head h2{margin-top:8px}
.btn-pri{display:inline-flex;align-items:center;gap:10px;background:var(--green);color:var(--white);padding:14px 30px;border-radius:50px;font-weight:600;font-size:.9rem;transition:var(--tr);box-shadow:var(--shg);border:none;cursor:pointer;font-family:var(--fb)}
.btn-pri:hover{background:var(--green-dk);transform:translateY(-2px);box-shadow:0 14px 32px rgba(95,175,58,.35)}
.btn-out{display:inline-flex;align-items:center;gap:10px;background:transparent;color:var(--white);padding:14px 30px;border-radius:50px;font-weight:600;font-size:.9rem;border:1.5px solid rgba(255,255,255,.5);transition:var(--tr);cursor:pointer;font-family:var(--fb)}
.btn-out:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}
.btn-grn-out{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--green);padding:12px 26px;border-radius:50px;font-weight:600;font-size:.88rem;border:1.5px solid var(--green);transition:var(--tr);cursor:pointer;font-family:var(--fb)}
.btn-grn-out:hover{background:var(--green);color:#fff;transform:translateY(-2px)}

/* ---- LOADER ---- */
#loader{position:fixed;inset:0;background:var(--white);z-index:99999;display:flex;align-items:center;justify-content:center;transition:opacity .6s ease}
#loader.done{opacity:0;pointer-events:none}
.ld-logo img{height:52px;margin:0 auto 20px;animation:fdUp .5s ease}
.ld-bar{width:180px;height:2px;background:var(--g200);border-radius:2px;overflow:hidden;margin:0 auto}
.ld-prog{height:100%;background:var(--green);animation:ldProg 1.3s ease forwards}
@keyframes ldProg{from{width:0}to{width:100%}}
@keyframes fdUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ---- NAVBAR ---- */
#navbar{position:fixed;top:0;left:0;right:0;z-index:1000;transition:var(--tr)}
#navbar.scrolled{background:rgba(255,255,255,.97);box-shadow:0 1px 0 rgba(0,0,0,.06),var(--shsm);backdrop-filter:blur(14px)}
#navbar.solid{background:var(--white);box-shadow:var(--shsm)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:80px;padding:0 44px}
.nav-logo img{height:46px;width:auto;display:block;transition:var(--tr)}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none}
.nav-links a{font-size:.87rem;font-weight:500;color:var(--dark2);position:relative;transition:color .25s;white-space:nowrap}
.nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:2px;background:var(--green);border-radius:2px;transition:width .28s}
.nav-links a:hover,.nav-links a.nav-active{color:var(--green)}
.nav-links a:hover::after,.nav-links a.nav-active::after{width:100%}
.nav-drop{position:relative}
.nav-drop .dm{position:absolute;top:calc(100%+18px);left:50%;transform:translateX(-50%) translateY(8px);background:var(--white);min-width:200px;border-radius:10px;box-shadow:var(--shlg);border:1px solid var(--g200);padding:8px 0;opacity:0;visibility:hidden;transition:var(--tr);z-index:200}
.nav-drop:hover .dm{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dm a{display:block;padding:10px 20px;font-size:.84rem;color:var(--dark)!important;transition:background .2s}
.dm a:hover{background:var(--green-xlt);color:var(--green)!important}
.dm a::after{display:none!important}
.nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:var(--white)!important;padding:11px 26px;border-radius:50px;font-weight:600;font-size:.84rem;transition:var(--tr);box-shadow:var(--shg)}
.nav-cta:hover{background:var(--green-dk);transform:translateY(-2px)}
.nav-cta::after{display:none!important}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none}
.hamburger span{display:block;width:24px;height:2px;background:var(--dark2);border-radius:2px;transition:var(--tr)}
.mob-nav{display:none;flex-direction:column;position:fixed;top:80px;left:0;right:0;background:var(--white);padding:16px 24px 28px;box-shadow:var(--shmd);z-index:999;border-top:1px solid var(--g200)}
.mob-nav a{font-size:.95rem;font-weight:500;color:var(--dark2);padding:12px 0;border-bottom:1px solid var(--g100);display:block}
.mob-nav .nav-cta{border-bottom:none;margin-top:14px;justify-content:center}
#navbar.open .mob-nav{display:flex}

/* ---- PAGE HERO (inner pages) ---- */
.page-hero{padding:160px 0 80px;position:relative;overflow:hidden;background:linear-gradient(135deg,#0d1f08 0%,#1a3a0f 40%,#2d6e18 100%)}
.page-hero-img{position:absolute;inset:0}
.page-hero-img img{width:100%;height:100%;object-fit:cover}
.page-hero-img::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,rgba(5,20,3,.85) 0%,rgba(10,40,8,.72) 60%,rgba(15,55,12,.55) 100%)}
.page-hero-content{position:relative;z-index:2;color:#fff;max-width:680px}
.page-hero-content .lbl{color:#a8e08a}
.page-hero-content .lbl::before{background:#a8e08a}
.page-hero-content h1{color:#fff;margin-top:10px;text-shadow:0 2px 20px rgba(0,0,0,.25)}
.page-hero-content p{color:rgba(255,255,255,.8);margin-top:16px;font-size:1.05rem;max-width:520px}
.breadcrumb{display:flex;align-items:center;gap:8px;margin-top:24px;font-size:.8rem;color:rgba(255,255,255,.55)}
.breadcrumb a{color:rgba(255,255,255,.55);transition:color .2s}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{color:rgba(255,255,255,.35)}
.breadcrumb strong{color:rgba(255,255,255,.85)}

/* ---- SCROLL TOP ---- */
#stbtn{position:fixed;bottom:28px;right:28px;width:44px;height:44px;background:var(--green);color:#fff;border:none;border-radius:50%;font-size:1rem;cursor:pointer;box-shadow:var(--shg);transition:var(--tr);opacity:0;visibility:hidden;z-index:998;display:flex;align-items:center;justify-content:center}
#stbtn.vis{opacity:1;visibility:visible}
#stbtn:hover{background:var(--green-dk);transform:translateY(-3px)}
#stbtn svg{width:18px;height:18px;stroke:#fff;stroke-width:2.5;fill:none}

/* ---- ANIMATIONS ---- */
.anim{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.anim.vis{opacity:1;transform:translateY(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ---- FOOTER ---- */
footer{background:#111;color:rgba(255,255,255,.55);padding:80px 0 0}
.ft-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:44px;padding-bottom:60px}
.ft-logo{margin-bottom:16px}
.ft-logo img{height:42px;width:auto;filter:brightness(0) invert(1);opacity:.9}
.ft-brand p{font-size:.84rem;line-height:1.85;margin-bottom:24px}
.ft-soc{display:flex;gap:10px}
.soc-lnk{width:36px;height:36px;background:rgba(255,255,255,.08);border-radius:8px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);transition:var(--tr)}
.soc-lnk:hover{background:var(--green);color:#fff;transform:translateY(-2px)}
.soc-lnk svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}
.ft-col h4{font-family:var(--fb);font-size:.75rem;font-weight:700;color:rgba(255,255,255,.85);letter-spacing:1.8px;text-transform:uppercase;margin-bottom:20px}
.ft-links{list-style:none;display:grid;gap:9px}
.ft-links a{font-size:.83rem;color:rgba(255,255,255,.45);transition:color .22s,padding-left .22s}
.ft-links a:hover{color:var(--green);padding-left:4px}
.ft-ci{display:flex;align-items:flex-start;gap:10px;font-size:.83rem;color:rgba(255,255,255,.45);margin-bottom:11px;line-height:1.5}
.ft-ci svg{width:15px;height:15px;stroke:var(--green);stroke-width:2;fill:none;flex-shrink:0;margin-top:2px}
.ft-bot{border-top:1px solid rgba(255,255,255,.08);padding:22px 0;display:flex;align-items:center;justify-content:space-between;font-size:.76rem;flex-wrap:wrap;gap:10px}
.ft-bot a{color:var(--green)}

/* ---- CONTACT FORM (shared) ---- */
.ct-form{background:var(--white);border-radius:var(--rlg);padding:44px;box-shadow:var(--shmd)}
.ct-form h3{margin-bottom:6px}
.ct-form>p{margin-bottom:28px;font-size:.88rem}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fg{margin-bottom:18px}
.fg label{display:block;font-size:.8rem;font-weight:600;color:var(--dark2);margin-bottom:7px}
.fg input,.fg select,.fg textarea{width:100%;padding:12px 15px;border:1.5px solid var(--g200);border-radius:var(--rsm);font-family:var(--fb);font-size:.88rem;color:var(--dark2);background:var(--off);transition:border-color .25s,box-shadow .25s;outline:none;-webkit-appearance:none}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--green);background:var(--white);box-shadow:0 0 0 3px rgba(95,175,58,.1)}
.fg textarea{resize:vertical;min-height:120px}
.f-msg{padding:12px 16px;border-radius:var(--rsm);font-size:.86rem;margin-bottom:16px;display:none}
.f-msg.ok{background:#e8f5e0;color:#2e7a1c;border:1px solid #a5d88a;display:block}
.f-msg.err{background:#fdecea;color:#b71c1c;border:1px solid #f5c6c6;display:block}

/* ---- CHECK LIST ---- */
.check-list{list-style:none;display:grid;gap:13px}
.check-list li{display:flex;align-items:flex-start;gap:13px;font-size:.92rem;color:var(--g600);line-height:1.65}
.chk{width:22px;height:22px;background:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.chk svg{width:11px;height:11px;stroke:#fff;stroke-width:2.5;fill:none}

/* ---- RESPONSIVE ---- */
@media(max-width:1024px){
  .ft-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:768px){
  .nav-links,.nav-cta{display:none}
  .hamburger{display:flex}
  .nav-inner{padding:0 20px}
  .section{padding:70px 0}
  .f-row{grid-template-columns:1fr}
  .ct-form{padding:28px 20px}
  .page-hero{padding:130px 0 60px}
}
@media(max-width:480px){
  .ft-grid{grid-template-columns:1fr}
  .ft-bot{flex-direction:column;text-align:center}
}
