/* ================================================
   ABOUT HERO
=================================================== */

.about-hero {
  position: relative;
  height: 42vh;
  min-height: 320px;
  background: #cfd8dc;
  overflow: hidden;
}

.about-hero-media {
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  opacity: .55;
}

.about-hero::after {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
}

.about-hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display:flex;
  align-items:center;
}

.about-hero h1 {
  font-size: clamp(36px, 4vw, 56px);
  color: #fff;
  margin: 25px;
}


/* ============================================================
   REFERENCE-STYLE ABOUT INTRO SECTION
============================================================ */

.about-intro {
  padding: 80px 0;
}

.intro-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 60px;
}

.intro-text {
  max-width: 460px;
}

.intro-text h2 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.25;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 16px;
}

.intro-text p {
  color: var(--ink-2);
  margin-bottom: 22px;
}

/* Avatars row */
.about-clients {
  display: flex;
  align-items: center;
  gap: 10px;
}

.about-clients img {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
}

.about-clients span {
  font-size: .9rem;
  color: var(--ink-2);
}


/* =================== IMAGE COLUMN ====================== */

.intro-photos {
  position: relative;
  display: flex;
  gap: 16px;
}

/* Left tall image */
.photo-a {
  width: 55%;
  height: auto;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

/* Right overlapping image */
.photo-b {
  width: 45%;
  height: auto;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transform: translateY(20px);
}

/* Responsive */
@media (max-width: 860px) {
  .intro-grid {
    grid-template-columns: 1fr;
  }

  .intro-photos {
    justify-content: start;
  }

  .photo-b {
    transform: translateY(10px);
  }
}




/* ================================================
   VIDEO SECTION
=================================================== */

.about-video { 
  padding:80px 0; 
}

.video-card {
  background:var(--bg-soft);
  padding:40px;
  border-radius:var(--radius);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:center;
}

.video-thumb { 
  position:relative; 
  border-radius:var(--radius); 
  overflow:hidden; 
}

.video-thumb img { 
  width:100%; height:auto; display:block; 
}

.play-btn {
  position:absolute; inset:0; margin:auto;
  width:62px; height:62px; 
  border-radius:999px;
  background:#fff; 
  display:flex; 
  align-items:center; 
  justify-content:center;
  font-size:24px; 
  box-shadow:var(--shadow-md);
}



/* ================================================
   STATS SECTION
=================================================== */

.about-stats { 
  padding:40px 0 60px; 
}

.about-stats .stats-row {
  display:grid; 
  grid-template-columns:repeat(4,1fr); 
  gap:20px; 
  text-align:center;
}

.about-stats .stat {
  background:#fff; 
  border:1px solid var(--line); 
  border-radius:var(--radius);
  padding:26px; 
  box-shadow:var(--shadow-sm);
}

.about-stats .stat b { 
  font-size:28px; 
  display:block; 
  margin-bottom:6px; 
}


/* ================================================
   PREMIUM TESTIMONIAL SECTION (CENTERED CARD)
=================================================== */

.about-testimonial {
  padding: 80px 0;
}

.testimonial-card {
  max-width: 650px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  padding: 50px 40px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.t-photo {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
  margin: 0 auto 20px auto;
  display: block;
}

.testimonial-card blockquote {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--ink);
  font-style: italic;
  margin-bottom: 20px;
}

.t-name {
  margin: 10px 0 4px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
}

.t-role {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-2);
}




/* ================================================
   CASE STUDIES (You will add section markup later)
=================================================== */

.about-cases { 
  padding:60px 0; 
}

.about-cases .cards {
  max-width: 960px;
  margin-inline: auto;
}

.about-cases img {
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}



/* ================================================
   RESPONSIVE FIXES
=================================================== */

@media (max-width:860px) {
  .about-intro .grid,
  .video-card,
  .about-testimonial .grid {
    grid-template-columns:1fr;
  }

  .about-intro .photos img:first-child {
    transform: none;
  }
}