/* ============================================================
   Cards — rectilinear "cargo" language throughout
   ============================================================ */

/* Generic feature/value card (Why Choose Us, About values, Home features) */
.feature-card{
  background:color-mix(in srgb, var(--paper-raised) 72%, transparent);
  backdrop-filter: blur(21px);
  -webkit-backdrop-filter: blur(21px);
  border:1px solid var(--line);
  padding:var(--sp-6);
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  transition: border-color var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.feature-card:hover{ transform:translateY(-3px); border-color:rgba(var(--jodhpur-rgb),.4); box-shadow:0 0 0 1px rgba(var(--jodhpur-rgb),.15), 0 16px 40px -20px rgba(var(--jodhpur-rgb),.25); }
.feature-card .icon-tile{ margin-bottom:var(--sp-1); }
.feature-card h3{ font-size:1.1875rem; }
.feature-card p{ color:var(--slate); font-size:var(--fs-sm); }

.icon-tile{
  width:52px; height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--black-950);
  color:var(--jodhpur-400);
  flex:none;
}
.icon-tile svg{ width:26px; height:26px; }
.icon-tile.on-paper{ background:var(--jodhpur-100); color:var(--jodhpur-700); }

/* Product category card */
.product-card{
  background:color-mix(in srgb, var(--paper-raised) 72%, transparent);
  backdrop-filter: blur(21px);
  -webkit-backdrop-filter: blur(21px);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  transition: transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.product-card:hover{ transform:translateY(-4px); border-color:rgba(var(--jodhpur-rgb),.4); box-shadow:0 0 0 1px rgba(var(--jodhpur-rgb),.15), 0 20px 48px -24px rgba(var(--jodhpur-rgb),.3); }
.product-media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--black-950);
}
.product-media img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .7s var(--ease);
}
.product-card:hover .product-media img{ transform:scale(1.06); }
.product-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(6,7,10,.72) 0%, transparent 55%);
}
.product-media .p-index{
  position:absolute; right:var(--sp-4); bottom:var(--sp-4); z-index:2;
  font-family:var(--font-mono); color:var(--on-black-soft); font-size:var(--fs-xs);
}
.product-body{
  padding:var(--sp-5) var(--sp-5) var(--sp-6);
  display:flex; flex-direction:column; gap:var(--sp-3);
  flex:1;
}
.product-body h3{ font-size:1.25rem; }
.product-body p{ color:var(--slate); font-size:var(--fs-sm); flex:1; }
.product-items{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-block:2px var(--sp-2);
}
.product-items span{
  font-size:11px; font-weight:600;
  color:var(--ink);
  background:var(--paper-sunk);
  border:1px solid var(--line);
  padding:4px 9px;
}
.product-items span.more{ color:var(--slate-soft); background:transparent; border-style:dashed; }
.product-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3);
  padding-top:var(--sp-3);
  border-top:1px solid var(--line);
}
.product-origin{
  font-size:var(--fs-xs); color:var(--slate);
  display:flex; align-items:center; gap:6px;
}
.product-origin svg{ width:14px; height:14px; color:var(--jodhpur-600); flex:none; }

/* Filter chips */
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:var(--sp-8);
}
.filter-chip{
  padding:9px 18px;
  font-size:var(--fs-xs);
  font-weight:600;
  border:1px solid var(--line-strong);
  color:var(--slate);
  background:color-mix(in srgb, var(--paper-raised) 64%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.filter-chip:hover{ border-color:var(--ink); color:var(--ink); }
.filter-chip[aria-pressed="true"]{
  background:var(--black-950);
  border-color:var(--black-950);
  color:var(--on-black);
}

/* Numbered process step (used only where sequence is real: quality process, export process) */
.step-card{
  position:relative;
  padding:var(--sp-6) var(--sp-5) var(--sp-5);
  background:color-mix(in srgb, var(--paper-raised) 70%, transparent);
  backdrop-filter: blur(21px);
  -webkit-backdrop-filter: blur(21px);
  border:1px solid var(--line);
  display:flex; flex-direction:column; gap:var(--sp-3);
}
.step-card .step-no{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--jodhpur-600);
  letter-spacing:.06em;
}
.step-card h3{ font-size:1.0625rem; font-family:var(--font-body); font-weight:700; }
.step-card p{ font-size:var(--fs-sm); color:var(--slate); }
.step-connector{
  display:none;
}

/* Testimonial card */
.testimonial-card{
  background:color-mix(in srgb, var(--black-900) 66%, transparent);
  backdrop-filter: blur(23px) saturate(1.75);
  -webkit-backdrop-filter: blur(23px) saturate(1.75);
  color:var(--on-black);
  padding:var(--sp-6);
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
  height:100%;
}
.testimonial-card .quote-mark{
  font-family:var(--font-display);
  font-style:italic;
  font-size:3rem;
  color:var(--jodhpur-400);
  line-height:.6;
  height:1.4rem;
}
.testimonial-card blockquote{
  font-family:var(--font-display);
  font-size:1.125rem;
  font-weight:500;
  font-style:italic;
  line-height:1.5;
  flex:1;
}
.testimonial-card figcaption{
  display:flex; align-items:center; gap:12px;
  padding-top:var(--sp-4);
  border-top:1px solid var(--line-on-black);
}
.t-avatar{
  width:40px; height:40px; border-radius:50%;
  background:var(--black-700);
  color:var(--jodhpur-300);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  flex:none;
  border:1px solid var(--line-on-black-strong);
}
.t-who b{ display:block; font-size:var(--fs-sm); font-weight:700; }
.t-who span{ display:block; font-size:12.5px; color:var(--on-black-soft); }

/* Stat / trust strip */
.stat-strip{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border:1px solid var(--line);
  border-bottom:none;
}
.stat-strip .stat{
  padding:var(--sp-6) var(--sp-5);
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  text-align:center;
}
.stat-strip .stat:nth-child(even){ border-right:none; }
.stat .num{
  font-family:var(--font-mono);
  font-size:clamp(1.75rem,1.4rem + 1vw,2.5rem);
  color:var(--ink);
  font-weight:500;
  display:block;
}
.stat .label{
  font-size:var(--fs-xs);
  color:var(--slate);
  margin-top:4px;
}

/* Value / mission-vision panel */
.value-card{
  padding:var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  border-left:2px solid var(--jodhpur-500);
  background:color-mix(in srgb, var(--paper-raised) 70%, transparent);
  backdrop-filter: blur(21px);
  -webkit-backdrop-filter: blur(21px);
}
.value-card h3{ font-size:1.0625rem; font-family:var(--font-body); font-weight:700; margin-bottom:6px; }
.value-card p{ color:var(--slate); font-size:var(--fs-sm); }