/* =====================================================================
   ASTRO INTEGRATED SERVICES AND CONSULT LIMITED (AISCL)
   Brand tokens are drawn straight from the company logo:
   the dark green wordmark + border, and the six-triangle "roof" mark
   (lime, green, magenta, orange, red, blue, purple, and a pale grey
   "sky" panel). Used deliberately, not decoratively: triangles recur
   as the site's structural motif, echoing the roof/site-plan shape.
   ===================================================================== */

:root{
  --forest:   #17422F;   /* AISCL wordmark green */
  --green:    #4C9A2A;   /* mid green triangle */
  --lime:     #A8CC3A;   /* top-left triangle */
  --pink:     #D6247A;   /* magenta triangle */
  --orange:   #F0871E;   /* orange triangle */
  --red:      #D62828;   /* red triangle */
  --blue:     #1C7FBE;   /* blue triangle */
  --purple:   #6A3E9C;   /* purple triangle */
  --grey-sky: #D9D9E3;   /* pale house-roof panel */

  --cream:    #F6F7F1;
  --ink:      #16211A;
  --slate:    #55635A;
  --line:     #E1E3D8;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
}

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
}

h1,h2,h3,h4,h5,.font-display{
  font-family:var(--font-display);
  color:var(--forest);
  font-weight:700;
  letter-spacing:-0.01em;
}

a{ color:var(--forest); text-decoration:none; }
a:hover{ color:var(--green); }

.text-slate{ color:var(--slate); }
.bg-forest{ background:var(--forest) !important; }
.bg-cream{ background:var(--cream) !important; }
.text-forest{ color:var(--forest) !important; }

/* Buttons ------------------------------------------------------- */
.btn-brand{
  background:var(--forest);
  color:#fff;
  border:none;
  padding:.75rem 1.75rem;
  border-radius:2px;
  font-weight:600;
  letter-spacing:.02em;
  transition:transform .15s ease, background .2s ease;
}
.btn-brand:hover{ background:var(--green); color:#fff; transform:translateY(-2px); }

.btn-outline-brand{
  border:2px solid var(--forest);
  color:var(--forest);
  padding:.7rem 1.75rem;
  border-radius:2px;
  font-weight:600;
  background:transparent;
}
.btn-outline-brand:hover{ background:var(--forest); color:#fff; }

.btn-accent{
  background:var(--orange);
  color:#fff;
  border:none;
  padding:.75rem 1.75rem;
  border-radius:2px;
  font-weight:600;
}
.btn-accent:hover{ background:#d6740f; color:#fff; }

/* Eyebrow / section label ---------------------------------------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-display);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:.75rem;
}
.eyebrow::before{
  content:"";
  width:0; height:0;
  border-left:9px solid var(--green);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}

/* Navbar ---------------------------------------------------------- */
.navbar-aiscl{
  background:#fff;
  box-shadow:0 2px 14px rgba(23,66,47,.08);
  padding:.6rem 0;
}
.navbar-aiscl .navbar-brand img{ height:46px; }
.navbar-aiscl .nav-link{
  color:var(--ink);
  font-weight:600;
  font-size:.95rem;
  margin:0 .4rem;
  padding:.5rem .3rem !important;
  position:relative;
}
.navbar-aiscl .nav-link.active,
.navbar-aiscl .nav-link:hover{ color:var(--forest); }
.navbar-aiscl .nav-link.active::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:3px;
  background:var(--orange);
}
.navbar-topbar{
  background:var(--forest);
  color:#e9efe7;
  font-size:.82rem;
  padding:.4rem 0;
}
.navbar-topbar a{ color:#e9efe7; }
.navbar-topbar a:hover{ color:var(--lime); }

/* Hero -------------------------------------------------------------
   Signature element: a diagonal "roof line" cut across the hero,
   in the same triangular language as the logo mark, instead of a
   generic gradient blob. */
.hero{
  position:relative;
  background:linear-gradient(120deg, var(--forest) 0%, #1f5a3f 60%, var(--green) 130%);
  color:#fff;
  padding:6.5rem 0 8.5rem;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:90px;
  background:var(--cream);
  clip-path:polygon(0 100%, 100% 100%, 100% 40%, 70% 100%, 45% 10%, 20% 100%, 0 55%);
}
.hero .hero-eyebrow{
  color:var(--lime);
  font-family:var(--font-display);
  letter-spacing:.16em;
  font-weight:700;
  font-size:.82rem;
  text-transform:uppercase;
}
.hero h1{
  color:#fff;
  font-size:clamp(2.1rem, 4vw, 3.4rem);
  line-height:1.12;
  margin:1rem 0 1.4rem;
}
.hero p.lead{
  color:#dce8dd;
  max-width:640px;
  font-size:1.08rem;
}
.hero-tri{
  position:absolute;
  width:0;height:0;
  opacity:.85;
}

/* Stats strip ------------------------------------------------------ */
.stats-strip{
  background:#fff;
  border-bottom:1px solid var(--line);
}
.stat-item{ text-align:center; padding:2.2rem 1rem; border-right:1px solid var(--line); }
.stat-item:last-child{ border-right:none; }
.stat-value{
  font-family:var(--font-display);
  font-size:2.4rem;
  font-weight:700;
  color:var(--forest);
}
.stat-label{
  color:var(--slate);
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* Section spacing --------------------------------------------------- */
section{ padding:5rem 0; }
.section-title{ font-size:clamp(1.6rem, 2.6vw, 2.2rem); }

/* Triangle accent chip used on service/value cards, cycling through
   the logo's tangram palette so each card gets a distinct color. */
.tri-accent{
  width:0; height:0;
  border-left:22px solid transparent;
  border-right:22px solid transparent;
  border-bottom:38px solid var(--green);
  margin-bottom:1rem;
}
.c-green   .tri-accent{ border-bottom-color:var(--green); }
.c-lime    .tri-accent{ border-bottom-color:var(--lime); }
.c-pink    .tri-accent{ border-bottom-color:var(--pink); }
.c-orange  .tri-accent{ border-bottom-color:var(--orange); }
.c-red     .tri-accent{ border-bottom-color:var(--red); }
.c-blue    .tri-accent{ border-bottom-color:var(--blue); }
.c-purple  .tri-accent{ border-bottom-color:var(--purple); }

/* Service cards ------------------------------------------------------ */
.service-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  padding:2rem 1.6rem;
  height:100%;
  transition:box-shadow .2s ease, transform .2s ease;
}
.service-card:hover{ box-shadow:0 16px 32px rgba(23,66,47,.1); transform:translateY(-4px); }
.service-card h3{ font-size:1.15rem; }
.service-card p{ color:var(--slate); font-size:.94rem; margin-bottom:0; }

/* Core values --------------------------------------------------------- */
.value-card{
  border-left:4px solid var(--green);
  padding:1.2rem 1.4rem;
  background:#fff;
  height:100%;
  border-radius:0 6px 6px 0;
}
.value-card:nth-child(5n+1){ border-left-color:var(--green); }
.value-card:nth-child(5n+2){ border-left-color:var(--pink); }
.value-card:nth-child(5n+3){ border-left-color:var(--orange); }
.value-card:nth-child(5n+4){ border-left-color:var(--blue); }
.value-card:nth-child(5n+5){ border-left-color:var(--purple); }

/* Project / gallery cards ---------------------------------------------- */
.proj-card{
  border-radius:6px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  height:100%;
}
.proj-card img{ height:220px; width:100%; object-fit:cover; }
.proj-card .body{ padding:1.3rem 1.4rem; }
.proj-card .tag{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--forest);
  background:#eef3e9;
  padding:.25rem .6rem;
  border-radius:3px;
  margin-bottom:.5rem;
}

.gallery-item{
  border-radius:6px;
  overflow:hidden;
  position:relative;
  margin-bottom:1.5rem;
  cursor:pointer;
}
.gallery-item img{ width:100%; height:230px; object-fit:cover; transition:transform .35s ease; }
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-item .cap{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(0deg, rgba(23,66,47,.88), transparent);
  color:#fff; font-size:.85rem; padding:1.4rem .8rem .6rem;
}

.filter-btn{
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  padding:.45rem 1.1rem;
  border-radius:20px;
  font-size:.85rem;
  font-weight:600;
  margin:.2rem;
}
.filter-btn.active, .filter-btn:hover{ background:var(--forest); color:#fff; border-color:var(--forest); }

/* Team ------------------------------------------------------------------ */
.team-card{ text-align:center; }
.team-card .photo{
  width:150px; height:150px; border-radius:50%; object-fit:cover;
  margin:0 auto 1rem; border:4px solid #fff; box-shadow:0 8px 20px rgba(23,66,47,.15);
}
.team-card h3{ font-size:1.05rem; margin-bottom:.15rem; }
.team-card .role{ color:var(--green); font-weight:600; font-size:.88rem; }

/* Timeline (experience) ---------------------------------------------- */
.timeline-badge{
  width:64px; height:64px; border-radius:50%;
  background:var(--forest); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700;
}

/* CTA band -------------------------------------------------------------- */
.cta-band{
  background:var(--forest);
  color:#fff;
  border-radius:10px;
  padding:3rem;
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:"";
  position:absolute; right:-40px; top:-40px;
  width:0;height:0;
  border-left:140px solid transparent;
  border-bottom:140px solid var(--green);
  opacity:.5;
}

/* Footer ------------------------------------------------------------------ */
footer.site-footer{
  background:#0F2A1D;
  color:#c9d4c8;
  padding:4rem 0 1.5rem;
}
footer.site-footer h5{ color:#fff; font-family:var(--font-display); }
footer.site-footer a{ color:#c9d4c8; }
footer.site-footer a:hover{ color:var(--lime); }
footer.site-footer .footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:2.5rem; padding-top:1.4rem;
  font-size:.85rem;
}
.social-dot{
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.08);
  display:inline-flex; align-items:center; justify-content:center;
  margin-right:.5rem;
}
.social-dot:hover{ background:var(--green); }

/* Contact page ------------------------------------------------------------ */
.contact-info-card{
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:1.6rem; height:100%;
}
.contact-info-card .icn{
  width:46px;height:46px;border-radius:50%;
  background:#eef3e9; color:var(--forest);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:.8rem;
}
.form-control:focus{ border-color:var(--green); box-shadow:0 0 0 .2rem rgba(76,154,42,.15); }

/* Breadcrumb header on inner pages ----------------------------------------- */
.page-head{
  background:var(--forest);
  color:#fff;
  padding:3.2rem 0 2.6rem;
  position:relative;
}
.page-head h1{ color:#fff; font-size:clamp(1.7rem,3vw,2.4rem); }
.page-head .crumbs a{ color:#cfe0cf; }
.page-head .crumbs span{ color:#fff; }

@media (max-width:767px){
  .stat-item{ border-right:none; border-bottom:1px solid var(--line); }
}