/* =========================================================
   IONEX ENGINEERS — CLIENTS PAGE
   Fonts  : Rubik (headings) + Poppins (body)
   Colors : #0091DD · #029340 · #0b1620 · #071019 · #ffffff · #0a0a0a
========================================================= */

:root{
  --blue:   #0091DD;
  --green:  #029340;
  --dark:   #0b1620;
  --dark-2: #071019;
  --white:  #ffffff;
  --black:  #0a0a0a;
  --text:   #4a5a63;
  --light:  #f4f8f9;

  --font-head: 'Rubik', sans-serif;
  --font-body: 'Poppins', sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
html{ overflow-x:hidden; }
body{ font-family: var(--font-body); color: var(--text); overflow-x:hidden; }

/* ---- shared eyebrow / heading ---- */
.section-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-head);
  font-weight:700;
  font-size: 13.5px;
  letter-spacing: 1px;
  color: var(--green);
  text-transform:uppercase;
  margin-bottom: 14px;
}
.section-eyebrow i{ width:28px; height:2px; background: var(--green); display:inline-block; }
.section-eyebrow.light{ color:#7fe0a3; }
.section-eyebrow.light i{ background:#7fe0a3; }

.section-heading{
  font-family: var(--font-head);
  font-weight:800;
  font-size: clamp(24px, 3.6vw, 34px);
  color: var(--dark);
}
.section-heading span{ color: var(--green); }
.section-heading.light{ color: var(--white); }
.section-heading.light span{ color:#4fd487; }

/* =========================================================
   HERO
========================================================= */
.page-hero{
  position:relative;
  min-height: clamp(240px, 32vw, 340px);
  display:flex;
  align-items:center;
  background-size: cover;
  background-position:center;
}
.page-hero-overlay{
  position:absolute; inset:0;
  /* background: linear-gradient(100deg, rgba(11,22,32,.94) 0%, rgba(2,147,64,.8) 75%); */
}
.page-hero-inner{
  position:relative;
  z-index:2;
  font-family: var(--font-body);
  
  max-width: 1300px;
  margin:0 auto;
  padding: 0 clamp(18px, 4vw, 30px);
  width:100%;
}
.breadcrumb{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-head);
  font-weight:500;
  font-size: clamp(12.5px, 1.6vw, 14px);
  color: rgba(12, 12, 12, 0.8);
  margin-bottom: 14px;
}
.breadcrumb a:hover{ color:#0c1811; }
.breadcrumb i{ font-size:10px; color: rgba(29, 28, 28, 0.5); }
.breadcrumb span{ color:#044e11; font-weight:600; }

.page-hero-inner h1{
  font-family: var(--font-head);
  font-weight:800;
  font-size: clamp(28px, 5vw, 44px);
  color: var(--green);
  margin-bottom: 10px;
}
.page-hero-inner p{
  font-size: clamp(13.5px, 1.8vw, 15px);
  color:#0b1620;
  max-width: 560px;
  font-family: var(--font-body);


  font-weight:bold;
}

/* =========================================================
   STATS STRIP
========================================================= */
.stats-strip{
  background:#0b1620;
  padding: clamp(30px, 5vw, 44px) clamp(18px, 4vw, 30px);
}
.stats-inner{
  max-width: 1300px;
  margin:0 auto;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.stat-box{ text-align:center; color: var(--white); }
.stat-num, .stat-box > span:not(.stat-num){
  font-family: var(--font-head);
  font-weight:800;
  font-size: clamp(28px, 4.5vw, 40px);
}
.stat-box p{
  font-family: var(--font-head);
  font-weight:500;
  font-size: clamp(12px, 1.6vw, 13.5px);
  letter-spacing: .5px;
  text-transform:uppercase;
  color: rgba(255,255,255,.85);
  margin-top: 4px;
}

/* =========================================================
   CLIENTS SECTION
========================================================= */
.clients-section{
  padding: clamp(50px, 7vw, 90px) clamp(18px, 4vw, 30px);
  background: var(--white);
}
.clients-inner{ max-width: 1300px; margin:0 auto; }

.clients-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 20px;
  margin-bottom: clamp(30px, 4vw, 44px);
}

.search-box{
  display:flex;
  align-items:center;
  gap:10px;
  background: var(--light);
  border: 1px solid #e2e8ea;
  border-radius: 30px;
  padding: 12px 20px;
  min-width: 280px;
  max-width: 100%;
}
.search-box i{ color: var(--text); font-size:14px; }
.search-box input{
  border:none;
  outline:none;
  background:transparent;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--dark);
  width:100%;
}
.search-box input::placeholder{ color: #93a3aa; }

/* ---- grid ---- */
.clients-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.client-card{
  position:relative;
  background: var(--white);
  border: 1px solid #e5ebec;
  border-left: 4px solid var(--green);
  border-radius: 8px;
  padding: 26px 24px 22px;
  transition:.3s;
}
.client-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 45px rgba(11,22,32,.1);
  border-left-color: var(--blue);
}

.card-num{
  position:absolute;
  top: 16px; right: 18px;
  font-family: var(--font-head);
  font-weight:800;
  font-size: 22px;
  color: #eaf0f1;
}

.client-card h3{
  font-family: var(--font-head);
  font-weight:700;
  font-size: 15.5px;
  color: var(--dark);
  margin-bottom: 8px;
  padding-right: 30px;
}

.card-location{
  display:flex;
  align-items:center;
  gap:7px;
  font-family: var(--font-head);
  font-weight:500;
  font-size: 12px;
  color: var(--green);
  margin-bottom: 12px;
}
.card-location i{ font-size:11px; }

.client-card p{
  font-size: 13px;
  line-height: 1.65;
  font-family: var(--font-body);
font-weight: 600;
  color: var(--text);
}

.no-results{
  display:none;
  text-align:center;
  padding: 40px 0;
  font-family: var(--font-head);
  font-weight:500;
  color: var(--text);
}

/* ---- load more ---- */
.load-more-wrap{ text-align:center; margin-top: 44px; }
.load-more-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background: var(--white);
  border: 2px solid var(--green);
  color: var(--green);
  font-family: var(--font-head);
  font-weight:700;
  font-size: 14.5px;
  padding: 13px 30px;
  border-radius: 30px;
  cursor:pointer;
  transition:.3s;
}
.load-more-btn:hover{ background: var(--green); color: var(--white); }
.load-more-btn i{ font-size:12px; }

/* =========================================================
   CONSULTANTS SECTION
========================================================= */
.consultants-section{
  background: linear-gradient(120deg, var(--dark) 0%, #06222f 60%, var(--dark-2) 100%);
  padding: clamp(50px, 7vw, 90px) clamp(18px, 4vw, 30px);
}
.consultants-inner{ max-width: 1300px; margin:0 auto; }
.consultants-head{ text-align:center; margin-bottom: clamp(30px, 4vw, 44px); }
.consultants-head .section-eyebrow{ justify-content:center; }

.consultants-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 14px;
}

.consultant-chip{
  display:flex;
  align-items:center;
  gap:10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--white);
  font-family: var(--font-head);
  font-weight:500;
  font-size: 13.5px;
  padding: 12px 20px;
  border-radius: 30px;
  transition:.3s;
}
.consultant-chip i{ color:#4fd487; font-size:13px; }
.consultant-chip:hover{
  background: var(--green);
  border-color: var(--green);
  transform: translateY(-3px);
}

/* =========================================================
   RESPONSIVE — LAPTOP (≤1199px)
========================================================= */
@media (max-width: 1199px){
  .clients-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   RESPONSIVE — TABLET (≤991px)
========================================================= */
@media (max-width: 991px){
  .stats-inner{ gap: 14px; }
  .clients-head{ flex-direction:column; align-items:stretch; }
  .search-box{ min-width:0; width:100%; }
  .clients-grid{ grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* =========================================================
   RESPONSIVE — MOBILE (≤575px)
========================================================= */
@media (max-width: 575px){
  .stats-inner{ grid-template-columns: 1fr; gap: 22px; }
  .stats-strip{ padding: 36px 18px; }

  .clients-section{ padding: 44px 16px; }
  .clients-grid{ grid-template-columns: 1fr; }
  .client-card{ padding: 22px 20px 20px; }

  .consultants-section{ padding: 44px 16px; }
  .consultant-chip{ font-size: 12.8px; padding: 10px 16px; }
}