/* =========================================================
   EJADA — Design Tokens
   ========================================================= */
:root{
  --ej-navy:        #0B2239;
  --ej-navy-deep:   #081A2C;
  --ej-navy-soft:   #12314E;
  --ej-green:       #A6C339;
  --ej-green-dark:  #8FAB27;
  --ej-cream:       #F4F2EA;
  --ej-white:       #FFFFFF;
  --ej-ink:         #22303E;
  --ej-muted:       #5C6B7A;
  --ej-line:        rgba(11,34,57,.10);
  --ej-radius:      14px;
  --ej-radius-lg:   22px;
  --ej-shadow:      0 18px 45px rgba(11,34,57,.10);
  --ej-shadow-lg:   0 28px 70px rgba(8,26,44,.22);
}

/* =========================================================
   Base
   ========================================================= */
html{ scroll-behavior:smooth; }
body{
  font-family:'Roboto', system-ui, -apple-system, sans-serif;
  color:var(--ej-ink);
  background:var(--ej-white);
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{ font-weight:700; color:var(--ej-navy); letter-spacing:-.01em; }
.text-green{ color:var(--ej-green) !important; }
.bg-navy{ background:var(--ej-navy); }
.bg-cream{ background:var(--ej-cream); }
img{ max-width:100%; }
a{ text-decoration:none; }
::selection{ background:var(--ej-green); color:var(--ej-navy); }

.section{ padding:96px 0; }
@media (max-width: 991px){ .section{ padding:64px 0; } }

/* Eyebrow label */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}
.eyebrow::before{
  content:""; width:34px; height:2px; background:currentColor; opacity:.85; border-radius:2px;
}
.eyebrow.no-rule::before{ display:none; }

/* Buttons */
.btn-ej{
  --bs-btn-padding-x:1.4rem; --bs-btn-padding-y:.75rem;
  background:var(--ej-green); color:var(--ej-navy);
  font-weight:700; font-size:.92rem; border:none; border-radius:8px;
  display:inline-flex; align-items:center; gap:.6rem;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-ej:hover{
  background:var(--ej-green-dark); color:var(--ej-navy);
  transform:translateY(-2px); box-shadow:0 12px 26px rgba(166,195,57,.35);
}
.btn-ej .bi{ transition:transform .25s ease; }
.btn-ej:hover .bi{ transform:translateX(4px); }

.btn-ej-outline{
  --bs-btn-padding-x:1.4rem; --bs-btn-padding-y:.75rem;
  background:transparent; color:var(--ej-white);
  font-weight:600; font-size:.92rem; border:1.5px solid rgba(255,255,255,.35); border-radius:8px;
  display:inline-flex; align-items:center; gap:.6rem;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.btn-ej-outline:hover{ border-color:var(--ej-green); color:var(--ej-green); transform:translateY(-2px); }

.link-underline-ej{
  color:var(--ej-white); font-weight:600; font-size:.92rem;
  border-bottom:1.5px solid var(--ej-green); padding-bottom:3px;
  display:inline-flex; align-items:center; gap:.5rem;
  transition:color .25s ease, gap .25s ease;
}
.link-underline-ej:hover{ color:var(--ej-green); gap:.8rem; }

/* =========================================================
   Navbar
   ========================================================= */
.navbar-ej{
  position:absolute; top:0; left:0; right:0; z-index:1000;
  padding:1.1rem 0; transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.navbar-ej.scrolled{
  position:fixed; background:rgba(8,26,44,.94); backdrop-filter:blur(10px);
  padding:.65rem 0; box-shadow:0 8px 30px rgba(0,0,0,.25);
  animation:navDrop .35s ease;
}
@keyframes navDrop{ from{ transform:translateY(-100%);} to{ transform:translateY(0);} }

.navbar-ej .nav-link{
  color:rgba(255,255,255,.82); font-size:.92rem; font-weight:500;
  margin:0 .8rem; padding:.4rem 0; position:relative; transition:color .25s ease;
}
.navbar-ej .nav-link::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--ej-green); border-radius:2px; transition:width .3s ease;
}
.navbar-ej .nav-link:hover,
.navbar-ej .nav-link.active{ color:var(--ej-green); }
.navbar-ej .nav-link.active::after,
.navbar-ej .nav-link:hover::after{ width:100%; }

.brand-logo{ display:flex; align-items:center; gap:.7rem; color:var(--ej-white); }
.brand-mark{
  width:46px; height:46px; border-radius:10px; flex:0 0 auto;
  background:linear-gradient(135deg, var(--ej-green), var(--ej-green-dark));
  display:grid; place-items:center; color:var(--ej-navy);
  font-weight:900; font-size:1.15rem;
}
.brand-text{ line-height:1.05; }
.brand-text .name{ font-weight:900; letter-spacing:.14em; font-size:1.05rem; }
.brand-text .tag{ font-size:.58rem; letter-spacing:.28em; color:var(--ej-green); text-transform:uppercase; }

.navbar-toggler{ border-color:rgba(255,255,255,.4); }
.navbar-toggler .bi{ color:#fff; font-size:1.4rem; }

/* =========================================================
   Hero
   ========================================================= */
.hero-wrap{
  background:var(--ej-green);
  border-radius:0 0 44% 44% / 0 0 70px 70px;
  padding-bottom:6px;
}
.hero{
  position:relative; overflow:hidden;
  background:
    linear-gradient(100deg, rgba(8,26,44,.94) 20%, rgba(8,26,44,.75) 50%, rgba(8,26,44,.30) 100%),
    url('images/ejada-hero') center/cover no-repeat;
  border-radius:0 0 44% 44% / 0 0 66px 66px;
  padding:180px 0 150px;
  color:var(--ej-white);
}
/* decorative arabesque glow */
.hero::before{
  content:""; position:absolute; inset:auto -180px -220px auto;
  width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle, rgba(166,195,57,.16), transparent 65%);
  pointer-events:none;
}
.hero::after{
  content:""; position:absolute; top:-160px; left:-160px;
  width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle, rgba(166,195,57,.08), transparent 60%);
  pointer-events:none;
}
.hero h1{
  color:var(--ej-white); font-weight:900; letter-spacing:-.02em;
  font-size:clamp(2.2rem, 4.2vw, 3.4rem); line-height:1.12;
}
.hero .lead-copy{ color:rgba(255,255,255,.82); font-size:1.05rem; max-width:520px; }

/* Hero entrance animation */
.hero-enter{ opacity:0; transform:translateY(28px); animation:heroIn .8s ease forwards; }
.hero-enter.d1{ animation-delay:.10s; } .hero-enter.d2{ animation-delay:.25s; }
.hero-enter.d3{ animation-delay:.40s; } .hero-enter.d4{ animation-delay:.55s; }
@keyframes heroIn{ to{ opacity:1; transform:translateY(0);} }

/* =========================================================
   Stats bar
   ========================================================= */
.stats{ padding:64px 0 26px; }
.stat-item{ display:flex; align-items:center; gap:1rem; }
.stat-icon{
  width:58px; height:58px; flex:0 0 auto; border-radius:50%;
  border:1.6px solid var(--ej-navy); color:var(--ej-navy);
  display:grid; place-items:center; font-size:1.35rem;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.stat-item:hover .stat-icon{ background:var(--ej-green); border-color:var(--ej-green); transform:rotate(-8deg) scale(1.05); }
.stat-num{ font-size:1.35rem; font-weight:900; color:var(--ej-navy); }
.stat-num small{ font-size:.72rem; font-weight:700; letter-spacing:.08em; color:var(--ej-muted); margin-left:.3rem; text-transform:uppercase; }
.stat-sub{ font-size:.85rem; color:var(--ej-muted); }

/* =========================================================
   Process (How we create impact)
   ========================================================= */
.process-steps{ position:relative; }
.process-steps::before{
  content:""; position:absolute; left:118px; top:34px; bottom:34px;
  border-left:2px dashed rgba(11,34,57,.18);
}
.step{
  display:flex; align-items:center; gap:1.4rem; padding:1.15rem 0; position:relative;
}
.step .ghost-num{
  width:86px; flex:0 0 auto; text-align:right;
  font-size:3rem; font-weight:900; letter-spacing:-.03em;
  color:rgba(11,34,57,.12); line-height:1;
  transition:color .35s ease, transform .35s ease;
}
.step:hover .ghost-num{ color:rgba(166,195,57,.85); transform:translateX(-4px); }
.step .step-icon{
  width:64px; height:64px; flex:0 0 auto; border-radius:50%;
  background:var(--ej-navy); color:var(--ej-green); font-size:1.4rem;
  display:grid; place-items:center; position:relative; z-index:1;
  outline:2px solid rgba(166,195,57,.55); outline-offset:5px;
  transition:transform .35s ease, background .35s ease;
}
.step:hover .step-icon{ transform:scale(1.08); background:var(--ej-navy-soft); }
.step h5{ margin:0 0 .2rem; font-size:1.05rem; }
.step p{ margin:0; font-size:.9rem; color:var(--ej-muted); max-width:300px; }

/* =========================================================
   Pillars (Why choose Ejada)
   ========================================================= */
.pillar-card{
  border:none; border-radius:var(--ej-radius); overflow:hidden;
  background:var(--ej-white); box-shadow:0 6px 22px rgba(11,34,57,.07);
  transition:transform .35s ease, box-shadow .35s ease; height:100%;
}
.pillar-card:hover{ transform:translateY(-8px); box-shadow:var(--ej-shadow); }
.pillar-media{ position:relative; overflow:hidden; }
.pillar-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .6s ease; }
.pillar-card:hover .pillar-media img{ transform:scale(1.07); }
.pillar-media .overlay-title{
  position:absolute; left:0; right:0; bottom:0; padding:2.2rem 1.1rem .9rem;
  background:linear-gradient(to top, rgba(8,26,44,.88), transparent);
  color:#fff; font-weight:700; font-size:1.02rem; line-height:1.25;
}
.pillar-media .overlay-title span{ display:block; font-weight:400; }
.pillar-card .card-body p{ font-size:.88rem; color:var(--ej-muted); margin:0; }
.pillar-card .accent-bar{
  height:3px; width:0; background:var(--ej-green); transition:width .4s ease;
}
.pillar-card:hover .accent-bar{ width:100%; }

/* =========================================================
   Services (dark)
   ========================================================= */
.services{
  background:
    radial-gradient(700px 420px at 92% 10%, rgba(166,195,57,.10), transparent 60%),
    var(--ej-navy);
  color:var(--ej-white);
  border-radius:56px; margin:0 18px;
}
@media (max-width:767px){ .services{ margin:0 8px; border-radius:32px; } }
.services h2{ color:var(--ej-white); }
.services .section-copy{ color:rgba(255,255,255,.72); font-size:.95rem; }

.service-card{
  position:relative; border-radius:var(--ej-radius); overflow:hidden;
  height:230px; display:block;
  transition:transform .35s ease, box-shadow .35s ease;
}
.service-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.35); }
.service-card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.service-card:hover img{ transform:scale(1.08); }
.service-card .sc-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.1rem; color:#fff;
  background:linear-gradient(to top, rgba(8,26,44,.92) 8%, rgba(8,26,44,.25) 55%, transparent);
}
.service-card h5{ color:#fff; font-size:1rem; margin:0 0 .25rem; }
.service-card p{ font-size:.8rem; color:rgba(255,255,255,.75); margin:0; max-height:0; opacity:0; overflow:hidden; transition:max-height .4s ease, opacity .4s ease; }
.service-card:hover p{ max-height:80px; opacity:1; }
.service-card .sc-arrow{
  position:absolute; top:.9rem; right:.9rem; width:34px; height:34px; border-radius:50%;
  background:var(--ej-green); color:var(--ej-navy); display:grid; place-items:center;
  opacity:0; transform:translate(6px,-6px) rotate(-45deg); transition:opacity .35s ease, transform .35s ease;
}
.service-card:hover .sc-arrow{ opacity:1; transform:translate(0,0) rotate(-45deg); }

/* =========================================================
   Clients
   ========================================================= */
.clients{
  background:
    radial-gradient(600px 400px at 96% 40%, rgba(166,195,57,.10), transparent 62%),
    var(--ej-white);
}
.client-card{
  background:var(--ej-white); border:1px solid var(--ej-line); border-radius:12px;
  height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  color:var(--ej-navy); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  filter:grayscale(.35); 
}
.client-card:hover{
  transform:translateY(-5px); box-shadow:var(--ej-shadow);
  border-color:rgba(166,195,57,.6); filter:grayscale(0);
}
.client-card .bi{ font-size:1.6rem; }
.client-card .cname{ font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; text-align:center; }
.client-card .csub{ font-size:.58rem; letter-spacing:.3em; color:var(--ej-muted); text-transform:uppercase; margin-top:-4px; }

/* =========================================================
   CTA
   ========================================================= */
.cta{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(100deg, var(--ej-navy-deep) 30%, rgba(8,26,44,.55) 70%, rgba(8,26,44,.15)),
             url('https://placehold.co/1600x700/12314e/a6c339?text=Sustainable+Community') center/cover no-repeat;
  border-radius:56px; margin:0 18px;
}
@media (max-width:767px){ .cta{ margin:0 8px; border-radius:32px; } }
.cta h2{ color:#fff; font-weight:900; font-size:clamp(2rem, 3.6vw, 3rem); }
.cta p{ color:rgba(255,255,255,.78); max-width:480px; }
.cta::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:5px;
  background:linear-gradient(90deg, transparent, var(--ej-green), transparent);
}

/* =========================================================
   Footer
   ========================================================= */
.footer{ background:var(--ej-cream); color:var(--ej-muted); padding:80px 0 0; border-top:1px solid var(--ej-line); }
.footer h6{
  color:var(--ej-navy); font-size:.8rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1.1rem;
}
.footer a{ color:var(--ej-muted); font-size:.88rem; transition:color .25s ease, padding-left .25s ease; }
.footer a:hover{ color:var(--ej-green-dark); padding-left:4px; }
.footer ul{ list-style:none; padding:0; margin:0; }
.footer ul li{ margin-bottom:.55rem; }
.footer .brand-text .name{ color:var(--ej-navy); }
.footer .brand-text .tag{ color:var(--ej-green-dark); }
.footer .contact-line{ display:flex; gap:.7rem; font-size:.85rem; margin-bottom:.8rem; }
.footer .contact-line .bi{ color:var(--ej-green-dark); margin-top:2px; }
.social-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(11,34,57,.22);
  display:inline-flex; align-items:center; justify-content:center; color:var(--ej-navy); margin-right:.5rem;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.social-btn:hover{ background:var(--ej-green); border-color:var(--ej-green); color:var(--ej-navy); transform:translateY(-3px); padding-left:0; }
.footer-bottom{
  border-top:1px solid rgba(11,34,57,.10); margin-top:56px; padding:1.2rem 0;
  font-size:.8rem; color:var(--ej-muted);
}
.footer-bottom a{ font-size:.8rem; }

/* Back to top */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:1100;
  width:46px; height:46px; border-radius:50%; border:none;
  background:var(--ej-green); color:var(--ej-navy); font-size:1.2rem;
  display:grid; place-items:center; box-shadow:0 10px 24px rgba(166,195,57,.4);
  opacity:0; pointer-events:none; transform:translateY(14px);
  transition:opacity .3s ease, transform .3s ease;
}
.to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* =========================================================
   Scroll reveal
   ========================================================= */
.reveal{ opacity:0; transform:translateY(32px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal[data-delay="1"]{ transition-delay:.12s; }
.reveal[data-delay="2"]{ transition-delay:.24s; }
.reveal[data-delay="3"]{ transition-delay:.36s; }
.reveal[data-delay="4"]{ transition-delay:.48s; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* Navbar: collapsed (mobile) spacing for the CTA button */
@media (max-width: 991.98px){
  .navbar-ej .btn-ej{ margin-top:.75rem; align-self:flex-start; }
}