/* ==========================================================================
   MASH TRADE DESIGN SYSTEM — MODULE: about (scope: .m-about, .mash-m-about)
   Custom Engineered for SIX-H TEXTILE by MASH TRADE
   PDF পেজ ২ — Who We Are: Dynamic, High-Impact Industrial Presentation
   ========================================================================== */

.m-about__split,
.mash-m-about__split{
  display:grid;
  gap:clamp(1.5rem, 3.2vw, 3.2rem);
  align-items:start;
  grid-template-columns:1fr;
}
@media (min-width:880px){
  .m-about__split,
  .mash-m-about__split{
    grid-template-columns:1.06fr 0.94fr;
  }
}

/* ---------------- Text Column ---------------- */
.m-about__p{
  color:var(--mash-muted, #5d6b63);
  font-size:clamp(0.96rem, 1.05vw, 1.04rem);
  line-height:1.62;
  margin-bottom:0.85rem;
}
.m-about__p:first-child{
  color:var(--mash-ink-2, #26332c);
  font-size:clamp(1.05rem, 1.25vw, 1.16rem);
  font-weight:500;
  line-height:1.55;
  margin-bottom:0.75rem;
}

/* 2x2 Capabilities Matrix (Fills whitespace with interactive industrial specs) */
.m-about__features{
  display:grid;
  grid-template-columns:1fr;
  gap:0.75rem;
  margin-top:1.25rem;
}
@media (min-width:540px){
  .m-about__features{
    grid-template-columns:repeat(2, 1fr);
  }
}
.m-about__feat-card{
  display:flex;
  align-items:center;
  gap:0.7rem;
  padding:0.75rem 0.9rem;
  border-radius:12px;
  background:#ffffff;
  border:1px solid rgba(13, 44, 34, 0.08);
  box-shadow:0 2px 10px rgba(0, 0, 0, 0.02);
  transition:all 0.3s var(--mash-ease);
}
.m-about__feat-card:hover{
  border-color:rgba(164, 204, 60, 0.6);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(13, 44, 34, 0.06);
}
.m-about__feat-icon{
  width:34px;
  height:34px;
  border-radius:9px;
  background:linear-gradient(135deg, rgba(164, 204, 60, 0.22) 0%, rgba(18, 62, 47, 0.08) 100%);
  color:var(--mash-green-800, #123e2f);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:transform 0.3s ease;
}
.m-about__feat-card:hover .m-about__feat-icon{
  transform:scale(1.08);
  background:var(--mash-lime, #a4cc3c);
  color:var(--mash-green-950, #071b15);
}
.m-about__feat-info{
  display:flex;
  flex-direction:column;
  line-height:1.22;
  min-width:0;
}
.m-about__feat-info strong{
  font-size:0.83rem;
  font-weight:700;
  color:var(--mash-ink, #0f1613);
  letter-spacing:0.01em;
}
.m-about__feat-info span{
  font-size:0.72rem;
  color:var(--mash-muted, #5d6b63);
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Location Status Chip */
.m-about__location-chip{
  display:inline-flex;
  align-items:center;
  gap:0.55rem;
  margin-top:1.2rem;
  padding:0.45rem 1rem;
  border-radius:999px;
  background:rgba(7, 27, 21, 0.04);
  border:1px solid rgba(7, 27, 21, 0.09);
  font-size:0.77rem;
  transition:all 0.25s ease;
}
.m-about__location-chip:hover{
  background:rgba(164, 204, 60, 0.12);
  border-color:rgba(164, 204, 60, 0.4);
}
.m-about__live-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#10b981;
  box-shadow:0 0 0 3px rgba(16, 185, 129, 0.25);
  animation:aboutLivePulse 2s infinite ease-in-out;
}
@keyframes aboutLivePulse{
  0%, 100%{transform:scale(1); opacity:1;}
  50%{transform:scale(1.25); opacity:0.7;}
}
.m-about__loc-text{
  font-weight:700;
  color:var(--mash-green-900, #0d2c22);
}
.m-about__loc-sub{
  color:var(--mash-muted, #5d6b63);
  padding-left:0.5rem;
  border-left:1px solid rgba(0, 0, 0, 0.12);
  font-size:0.71rem;
}

/* ---------------- Media Column ---------------- */
.m-about__media{
  position:relative;
  isolation:isolate;
}
.m-about__media-glow{
  position:absolute;
  inset:-16px;
  border-radius:32px;
  background:radial-gradient(circle at 75% 30%, rgba(164, 204, 60, 0.25) 0%, rgba(18, 62, 47, 0.08) 60%, transparent 80%);
  filter:blur(24px);
  z-index:-2;
  pointer-events:none;
}
.m-about__frame{
  border-radius:calc(var(--mash-radius, 16px) + 8px);
  box-shadow:0 22px 50px -16px rgba(7, 27, 21, 0.26);
  border:1px solid rgba(255, 255, 255, 0.9);
  overflow:hidden;
  position:relative;
  background:var(--mash-sand, #efeee7);
}
.m-about__frame img{
  aspect-ratio:5/4;
  width:100%;
  max-height:clamp(220px, 36vh, 480px);
  object-fit:cover;
  display:block;
  transition:transform 0.7s var(--mash-ease);
}
.m-about__media:hover .m-about__frame img{
  transform:scale(1.035);
}

/* Top Floating Badge */
.m-about__float-top{
  position:absolute;
  top:-12px;
  left:-8px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 13px;
  border-radius:999px;
  background:rgba(7, 27, 21, 0.92);
  color:#ffffff;
  font-size:0.71rem;
  font-weight:600;
  letter-spacing:0.02em;
  backdrop-filter:blur(8px);
  border:1px solid rgba(164, 204, 60, 0.4);
  box-shadow:0 12px 28px rgba(0, 0, 0, 0.24);
  z-index:2;
  pointer-events:none;
  animation:aboutFloatTop 5s ease-in-out infinite alternate;
}
.m-about__sparkle{
  color:var(--mash-lime, #a4cc3c);
  font-size:0.8rem;
}
@keyframes aboutFloatTop{
  0%{transform:translateY(0);}
  100%{transform:translateY(-6px);}
}

/* Bottom Floating Badge */
.m-about__float{
  position:absolute;
  right:-10px;
  bottom:-18px;
  display:flex;
  align-items:center;
  gap:0.75rem;
  background:linear-gradient(135deg, var(--mash-green-950, #071b15) 0%, var(--mash-green-900, #0d2c22) 100%);
  color:#fff;
  padding:0.85rem 1.25rem;
  border-radius:18px;
  box-shadow:0 24px 48px -20px rgba(7, 27, 21, 0.95);
  border:1px solid rgba(164, 204, 60, 0.45);
  z-index:2;
  animation:aboutFloatBottom 5.5s ease-in-out infinite alternate;
}
.m-about__float strong{
  font-family:var(--mash-font-display);
  font-size:1.65rem;
  font-weight:800;
  color:var(--mash-lime, #a4cc3c);
  line-height:1;
  text-shadow:0 0 16px rgba(164, 204, 60, 0.4);
}
.m-about__float span{
  font-size:0.68rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#cfe0d6;
  line-height:1.35;
  font-weight:600;
}
@keyframes aboutFloatBottom{
  0%{transform:translateY(0);}
  100%{transform:translateY(-10px);}
}

@media (max-width:640px){
  .m-about__float-top{left:4px; top:-10px; font-size:0.65rem;}
  .m-about__float{right:6px; bottom:-14px; padding:0.65rem 0.95rem;}
  .m-about__float strong{font-size:1.35rem;}
}

/* ---------------- Integrated Executive Benchmarks Strip ---------------- */
.m-about__benchmarks{
  display:flex;
  align-items:center;
  justify-content:space-around;
  background:#ffffff;
  border:1px solid rgba(13, 44, 34, 0.1);
  border-radius:16px;
  padding:clamp(0.75rem, 1.2vw, 1rem) clamp(0.9rem, 1.6vw, 1.4rem);
  margin-top:clamp(0.9rem, 1.5vh, 1.4rem);
  box-shadow:0 12px 28px -12px rgba(7, 27, 21, 0.1);
}
.m-about__benchmark-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:2px;
}
.m-about__benchmark-item strong{
  font-family:var(--mash-font-display, inherit);
  font-size:clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight:800;
  color:var(--mash-green-950, #071b15);
  line-height:1;
}
.m-about__benchmark-item span{
  font-size:clamp(0.68rem, 0.8vw, 0.74rem);
  font-weight:700;
  color:var(--mash-muted, #5d6b63);
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.m-about__benchmark-sep{
  width:1px;
  height:32px;
  background:rgba(13, 44, 34, 0.1);
}

/* ---------------- Responsive Tweaks ---------------- */
@media (max-width:768px){
  .m-about__split{gap:1.6rem;}
  .m-about__benchmarks{padding:0.75rem 0.6rem;}
}