/* ═══════════════════════════════════════
   JOI — CSS Global v3 Final
   ═══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Lato',sans-serif;color:#1a1a1a;background:#f8f5f0;overflow-x:hidden;line-height:1.6;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}

:root{
  --forest:#3d5c35;
  --sage-l:#dde8d8;
  --sage-m:#c8d8bf;
  --sage-d:#7a9a6e;
  --dark:#1a1a1a;
  --mid:#4a4a4a;
  --stone:#888;
  --cream:#f8f5f0;
  --white:#ffffff;
  --line:rgba(0,0,0,0.08);
  --shadow:0 12px 48px rgba(0,0,0,0.10);
}

/* NAV */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 72px;height:72px;
  transition:background .4s,box-shadow .4s;
}
.nav.scrolled{
  background:rgba(221,232,216,0.96);
  backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(61,92,53,0.12);
}
.nav-logo img{
  height:38px;width:auto;
  filter:brightness(0) saturate(100%) invert(28%) sepia(20%) saturate(800%) hue-rotate(85deg) brightness(70%);
}
.nav-links{display:flex;align-items:center;gap:40px;}
.nav-links a{
  font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dark);transition:color .2s;
  position:relative;
}
.nav-links a:hover{color:var(--forest);}
.nav-links a.active{color:var(--forest);}
.nav-cta{
  font-size:.73rem!important;font-weight:700!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;
  background:var(--dark)!important;color:white!important;
  padding:12px 28px;border-radius:50px;
  transition:background .25s!important;
}
.nav-cta:hover{background:var(--forest)!important;color:white!important;}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:6px;cursor:pointer;}
.nav-burger span{display:block;width:24px;height:2px;background:var(--dark);border-radius:2px;transition:.3s;}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-mobile{
  display:none;position:fixed;top:72px;left:0;right:0;
  background:rgba(221,232,216,.97);backdrop-filter:blur(16px);
  padding:24px 28px 32px;z-index:999;
  border-bottom:1px solid rgba(61,92,53,.12);
  flex-direction:column;gap:0;
}
.nav-mobile.open{display:flex;}
.nav-mobile a{
  font-size:.9rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dark);
  padding:14px 0;border-bottom:1px solid var(--line);
  transition:color .2s;
}
.nav-mobile a:hover{color:var(--forest);}
.nav-mobile a:last-child{border-bottom:none;}

/* REVEAL */
.rv{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s ease;}
.rv.on{opacity:1;transform:translateY(0);}
.d1{transition-delay:.1s;}.d2{transition-delay:.2s;}.d3{transition-delay:.3s;}.d4{transition-delay:.4s;}

/* BUTTONS */
.btn{
  display:inline-block;font-family:'Lato',sans-serif;
  font-size:.76rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:16px 40px;
  border-radius:2px;cursor:pointer;transition:all .25s;text-align:center;
}
.btn-dark{background:var(--dark);color:#fff;border:2px solid var(--dark);}
.btn-dark:hover{background:var(--forest);border-color:var(--forest);color:#fff;}
.btn-pill{border-radius:50px;}

/* SECTION TAG */
.s-tag{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.66rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--forest);margin-bottom:14px;
}
.s-tag::before{content:'';width:20px;height:1px;background:var(--forest);flex-shrink:0;}
.s-tag.inv{color:var(--sage-d);}
.s-tag.inv::before{background:var(--sage-d);}

/* SCROLL TOP */
.scroll-top{
  position:fixed;bottom:32px;right:32px;
  width:44px;height:44px;border-radius:50%;
  background:var(--forest);color:white;border:none;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;cursor:pointer;z-index:500;
  opacity:0;transform:translateY(16px);transition:all .3s;
}
.scroll-top.on{opacity:1;transform:translateY(0);}
.scroll-top:hover{background:var(--dark);}

/* FOOTER */
.footer{background:var(--dark);padding:72px 72px 36px;}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:60px;padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:28px;
}
.footer-logo{height:36px;margin-bottom:18px;filter:brightness(0) invert(1);opacity:.7;}
.footer-about{font-size:.8rem;font-weight:300;color:rgba(255,255,255,.38);line-height:1.85;max-width:250px;}
.footer-col h5{font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:20px;}
.footer-col ul{display:flex;flex-direction:column;gap:11px;}
.footer-col ul li a{font-size:.8rem;font-weight:300;color:rgba(255,255,255,.42);transition:color .2s;}
.footer-col ul li a:hover{color:white;}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.footer-copy{font-size:.7rem;color:rgba(255,255,255,.18);}
.footer-tagline{font-size:.7rem;font-style:italic;color:rgba(255,255,255,.18);}

@media(max-width:1100px){.nav{padding:0 40px;}.footer{padding:56px 40px 28px;}.footer-grid{gap:32px;}}
@media(max-width:860px){
  .nav-links,.nav-cta{display:none!important;}
  .nav-burger{display:flex;}
  .nav{padding:0 24px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px;}
  .footer{padding:48px 28px 24px;}
}
@media(max-width:560px){
  .nav{padding:0 16px;}
  .footer{padding:40px 16px 20px;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
}