/* ==========================================================================
   CLIENTS PAGE — additional styles
   Loaded after style.css
   ========================================================================== */

/* ---------- PAGE HERO ---------- */
.page-hero{
  position:relative;
  padding:96px 0 84px;
  background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 100%);
  overflow:hidden;
}
.page-hero::after{
  content:'';
  position:absolute; right:-120px; top:-120px;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,rgba(230,57,70,.22),transparent 68%);
  pointer-events:none;
}
.page-hero__inner{ position:relative; z-index:1; max-width:800px; }
.page-hero h1{ color:#fff; margin-bottom:16px; font-size:clamp(2rem,4.4vw,3.4rem); font-weight:800; line-height:1.15; }
.page-hero p{ color:rgba(255,255,255,.80); font-size:1.06rem; margin:0; max-width:62ch; }

.breadcrumb{
  display:flex; align-items:center; gap:10px;
  font-size:.82rem; color:rgba(255,255,255,.62); margin-bottom:18px;
}
.breadcrumb a{ color:rgba(255,255,255,.78); transition:color var(--t-fast); }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb span[aria-hidden]{ color:var(--accent); font-size:1.05rem; }

/* =========================================================
   CLIENT STATS STRIP
   ========================================================= */
.client-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}
.client-stat{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:34px 28px;
  text-align:center;
  overflow:hidden;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.client-stat::before{
  content:'';
  position:absolute;
  top:0; left:50%;
  width:0; height:3px;
  background:var(--accent);
  transform:translateX(-50%);
  transition:width var(--t-slow);
}
.client-stat:hover{
  transform:translateY(-8px);
  box-shadow:var(--sh);
  border-color:transparent;
}
.client-stat:hover::before{ width:100%; }
.client-stat__value{
  font-family:var(--font-head);
  font-size:clamp(2rem,3.4vw,2.8rem);
  font-weight:800;
  color:var(--navy);
  line-height:1;
  letter-spacing:-.03em;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:2px;
  margin-bottom:12px;
}
.client-stat__value sup{
  font-size:.5em;
  color:var(--accent);
  font-weight:800;
  top:-.15em;
  position:relative;
}
.client-stat__label{
  font-family:var(--font-head);
  font-size:.95rem;
  font-weight:700;
  color:var(--navy-2);
  margin:0 0 6px;
}
.client-stat p{
  font-size:.83rem;
  color:var(--muted);
  margin:0;
  line-height:1.55;
}

/* =========================================================
   FEATURED CLIENTS GRID
   ========================================================= */
.clients-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}
.client-card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:34px 24px 28px;
  text-align:center;
  overflow:hidden;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.client-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(230,57,70,.06), transparent 70%);
  opacity:0;
  transition:opacity var(--t-slow);
  pointer-events:none;
}
.client-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--sh-lg);
  border-color:transparent;
}
.client-card:hover::before{ opacity:1; }

.client-card__logo{
  display:grid;
  place-items:center;
  height:110px;
  padding:8px 8px 12px;
  margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
.client-card__logo img{
  max-width:100%;
  max-height:80px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  filter:grayscale(.15);
  transition:filter var(--t), transform var(--t);
}
.client-card:hover .client-card__logo img{
  filter:grayscale(0);
  transform:scale(1.05);
}
.client-card__name{
  font-family:var(--font-head);
  font-size:1.05rem;
  font-weight:700;
  color:var(--navy);
  margin:0 0 6px;
  line-height:1.3;
}
.client-card__desc{
  font-size:.83rem;
  color:var(--muted);
  margin:0;
  line-height:1.5;
}

/* =========================================================
   BRANDS MARQUEE (reuse on this page)
   ========================================================= */
.brands-marquee{
  position:relative;
  overflow:hidden;
  padding:20px 0;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);
}
.brands-marquee__track{
  display:flex;
  align-items:center;
  gap:40px;
  width:max-content;
  animation:brandsScroll 38s linear infinite;
  will-change:transform;
}
.brands-marquee:hover .brands-marquee__track{ animation-play-state:paused; }

.brand-logo{
  flex:none;
  display:grid;
  place-items:center;
  width:170px;
  height:110px;
  padding:24px;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 2px 8px rgba(11,31,51,.04);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.brand-logo img{
  max-width:100%;
  max-height:52px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  filter:grayscale(.65);
  opacity:.78;
  transition:filter var(--t), opacity var(--t), transform var(--t);
}
.brand-logo:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 38px rgba(11,31,51,.14);
  border-color:transparent;
}
.brand-logo:hover img{
  filter:grayscale(0);
  opacity:1;
  transform:scale(1.08);
}

@keyframes brandsScroll{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

.logo-note{
  text-align:center;
  font-size:.82rem;
  color:var(--muted-light);
  margin-top:34px;
  font-style:italic;
}

/* =========================================================
   INDUSTRIES WE SERVE
   ========================================================= */
.client-industries{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}
.client-industry{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:32px 24px;
  text-align:left;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.client-industry:hover{
  transform:translateY(-8px);
  box-shadow:var(--sh-lg);
  border-color:transparent;
}
.client-industry__icon{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  margin-bottom:20px;
  border-radius:16px;
  background:rgba(18,59,93,.08);
  transition:background var(--t), transform var(--t);
}
.client-industry:hover .client-industry__icon{
  background:linear-gradient(150deg,var(--accent),#A81F2B);
  transform:rotate(-6deg) scale(1.06);
}
.client-industry__icon svg{
  width:26px; height:26px;
  fill:none;
  stroke:var(--navy-2);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke var(--t);
}
.client-industry:hover .client-industry__icon svg{ stroke:#fff; }
.client-industry h3{
  font-size:1rem;
  font-weight:700;
  color:var(--navy);
  margin:0 0 10px;
  line-height:1.3;
}
.client-industry p{
  font-size:.86rem;
  color:var(--muted);
  margin:0;
  line-height:1.65;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1200px){
  .client-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .clients-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .client-industries{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .brands-marquee__track{ gap:32px; }
  .brand-logo{ width:150px; height:96px; padding:20px; }
  .brand-logo img{ max-height:44px; }
}

@media (max-width:1024px){
  .page-hero{ padding:84px 0 72px; }
  .clients-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .client-industries{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
}

@media (max-width:768px){
  .page-hero{ padding:72px 0 62px; }
  .page-hero h1{ font-size:clamp(1.6rem,6vw,2.2rem); }
  .page-hero p{ font-size:.96rem; }

  .client-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .client-stat{ padding:26px 20px; }

  .brands-marquee__track{ gap:24px; animation-duration:30s; }
  .brand-logo{ width:130px; height:84px; padding:18px; border-radius:var(--r-sm); }
  .brand-logo img{ max-height:38px; }

  .client-industry{ padding:26px 20px; }
}

@media (max-width:560px){
  .page-hero{ padding:62px 0 54px; }
  .breadcrumb{ font-size:.76rem; margin-bottom:14px; }

  .client-stats{ grid-template-columns:1fr; }
  .clients-grid{ grid-template-columns:1fr; }
  .client-industries{ grid-template-columns:1fr; }

  .brands-marquee__track{ gap:18px; animation-duration:26s; }
  .brand-logo{ width:110px; height:72px; padding:14px; }
  .brand-logo img{ max-height:32px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .brands-marquee__track{ animation:none; }
}