/* /assets/css/about.css */

/* 1) Toggle blocks */
.about-desktop { display: block; }
.about-mobile  { display: none; }

@media (max-width: 900px){
  .about-desktop { display: none; }
  .about-mobile  { display: block; }
}

/* 2) Mobile base layout */
.about-mobile{
  width: 100%;
}

.about-mobile .m-container{
  max-width: 680px;
  margin: 0 auto;
  padding: 0 20px;
}

.about-mobile .m-about-hero{
  padding: 80px 0 36px;
}

.about-mobile .m-title{
  font-family: "PP Neue Montreal", sans-serif;
  font-weight: 500;
  font-size: 34px;
  line-height: 1.05;
  margin: 0 0 16px;
}

.about-mobile .m-h2{
  font-family: "PP Neue Montreal", sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  margin: 0 0 14px;
}

.about-mobile .m-body p{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.about-mobile .m-block{
  padding: 10px 0;
}

/* CTA pill */
.about-mobile .m-cta{
  margin-top: 18px;
}

.about-mobile .m-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .02em;
}

/* Team cards */
.about-mobile .m-team{
  padding: 46px 0;
}

.about-mobile .m-team-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

.about-mobile .m-team-card{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  background: #fff;
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

.about-mobile .m-team-photo img{
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.about-mobile .m-name{
  margin: 2px 0 4px;
  font-size: 16px;
  line-height: 1.2;
}

.about-mobile .m-role{
  margin: 0;
  color: rgba(0,0,0,.65);
  font-size: 14px;
  line-height: 1.35;
}

/* Awards */
.about-mobile .m-awards{
  padding: 26px 0 70px;
}

.about-mobile .m-awards-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.about-mobile .m-award-card{
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

.about-mobile .m-award-top{
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 10px;
}

.about-mobile .m-award-year{
  font-weight: 600;
  font-size: 14px;
  opacity: .8;
}

.about-mobile .m-award-award{
  font-size: 14px;
  line-height: 1.35;
}

.about-mobile .m-award-lines{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.about-mobile .m-award-line{
  font-size: 13px;
  line-height: 1.35;
}

.about-mobile .m-k{
  font-weight: 600;
  margin-right: 6px;
}

/* ==========================================================
   ABOUT MOBILE — HERO (match your ✅ reference)
   ========================================================== */

/* keep your show/hide rules as-is */

/* Make the hero centered like the green tick */
@media (max-width: 900px){

  .about-mobile .m-about-hero{
    padding: 90px 0 44px; /* space under fixed navbar */
    background: #fff;
  }

  .about-mobile .m-about-hero .m-container{
    text-align: center;
    max-width: 560px;   /* tighter so text looks like the ✅ example */
  }

  .about-mobile .m-title{
    font-size: 34px;
    line-height: 1.08;
    margin: 0 0 18px;
  }

  .about-mobile .m-body p{
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
  }

  /* CTA: turn the pill into an underlined link */
  .about-mobile .m-cta{
    margin-top: 22px;
  }

  .about-mobile .m-pill{
    background: transparent;
    color: #111;
    height: auto;
    padding: 0;
    border-radius: 0;
    display: inline-block;
    font-size: 20px;
    text-decoration: none;
    border-bottom: 2px solid #111; /* underline style like ✅ */
    padding-bottom: 6px;
  }
}


/* ==========================================================
   ABOUT PAGE — MOBILE NAVBAR OFFSET
   ========================================================== */

@media (max-width: 900px){

  /* push content below fixed navbar */
  .about-mobile{
    padding-top: 90px; /* adjust if navbar height changes */
  }

}

/* ==========================================================
   ABOUT — MOBILE "OUR CLIENTS" typography fix
   ========================================================== */
@media (max-width: 900px){

  /* keep the whole clients block from inheriting desktop spacing */
  .about-mobile .m-clients{
    padding: 24px 0 10px;
  }

  /* shrink the giant heading + keep it in one line */
  .about-mobile .m-clients h2,
  .about-mobile .m-clients .title-Head h2{
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: 0.02em;
    margin: 0 0 16px;
    white-space: nowrap;     /* key: stops OUR / CLIENTS wrapping */
  }

  /* paragraph: readable + not too wide */
  .about-mobile .m-clients p,
  .about-mobile .m-clients .bodymain p{
    font-size: 18px;
    line-height: 1.6;
    max-width: 560px;
    margin: 0;
  }

  /* add breathing room before logos */
  .about-mobile .m-clients .bodymain,
  .about-mobile .m-clients .clients-text{
    margin-bottom: 22px;
  }
}



/* ==========================================================
   ABOUT — MOBILE TEAM TYPOGRAPHY (match ✅)
   ========================================================== */
@media (max-width: 900px){

  /* Section spacing */
  .about-mobile .m-team{
    padding: 46px 0;
  }

  /* Title: 34px */
  .about-mobile .m-team .m-h2,
  .about-mobile .m-team .title-Head h2,
  .about-mobile .m-team h2{
    font-size: 34px;
    line-height: 1.1;
    margin: 0 0 18px;
  }

  /* Body: 18px, line-height 1.6 */
  .about-mobile .m-team .m-body p,
  .about-mobile .m-team .bodymain p,
  .about-mobile .m-team p{
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
  }

  /* CTA underline (Join our team) */
  .about-mobile .m-team .m-pill{
    background: transparent;
    color: #111;
    height: auto;
    padding: 0 0 6px 0;
    border-radius: 0;
    display: inline-block;
    font-size: 18px;          /* matches body size */
    line-height: 1.2;
    text-decoration: none;
    border-bottom: 2px solid #111;
  }

  /* Keep CTA nicely separated from cards */
  .about-mobile .m-team .m-cta{
    margin-top: 18px;
    margin-bottom: 18px;
  }
}

@media (max-width: 900px){
  .about-mobile .m-team .m-h2,
  .about-mobile .m-team .title-Head h2{
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
}

/* ==========================================================
   ABOUT — MOBILE TEAM CARDS (big portrait style like ✅)
   ========================================================== */
@media (max-width: 900px){

  .about-mobile .m-team-list{
    display: flex;
    flex-direction: column;
    gap: 26px;
    margin-top: 18px;
  }

  .about-mobile .m-team-card--big{
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  /* big image */
  .about-mobile .m-team-photo--big img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;          /* square edges like ✅ */
    object-fit: cover;
  }

  /* name + role under image */
  .about-mobile .m-team-meta--big{
    padding-top: 14px;
  }

  .about-mobile .m-team-meta--big .m-name{
    font-size: 18px;
    line-height: 1.2;
    margin: 0 0 6px;
  }

  .about-mobile .m-team-meta--big .m-role{
    font-size: 16px;
    line-height: 1.35;
    margin: 0;
    opacity: 0.75;
  }

  /* IMPORTANT: kill the old 2-column thumbnail layout if still applied */
  .about-mobile .m-team-card{
    grid-template-columns: initial !important;
  }
  .about-mobile .m-team-photo img{
    height: auto !important;
    border-radius: 0 !important;
  }
}

/* ==========================================================
   ABOUT — MOBILE GALLERY (short strip like ✅)
   Since gallery is rendered only once (desktop block),
   target it by viewport, not .about-mobile.
   ========================================================== */
@media (max-width: 900px){

  .photo-slider{
    height: 240px;          /* ✅ short strip (adjust if you want) */
    overflow: hidden;
    margin: 0;
  }

  .photo-slider .slider-wrapper{
    height: 240px;
    overflow: hidden;
  }

  .photo-slider img.slide{
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
  }

}