/* /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 (3:4 ratio + NO GAP below)
   ========================================================== */
@media (max-width: 900px){

  /* Kill any spacing the include might introduce */
  .photo-slider,
  .photo-slider *{
    margin: 0;
  }

  /* Make the gallery a fixed 3:4 window */
  .photo-slider{
    aspect-ratio: 3 / 4;     /* ✅ 3:4 portrait */
    width: 100%;
    overflow: hidden;
    background: #fff;        /* prevents black flash if images fade */
    display: block;
  }

  .photo-slider .slider-wrapper{
    width: 100%;
    height: 100%;
  }

  .photo-slider img,
  .photo-slider img.slide{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;          /* removes inline-image baseline gap */
  }

  /* IMPORTANT: remove the padding that your mobile blocks add */
  .about-mobile .m-block{
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Ensure the next section starts immediately */
  .about-mobile .m-block + .m-block{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}













@media (max-width: 768px){

  body.about-page .m-about-hero{
    padding-top: 50px;   /* try 20–40 */
  }

}



@media (max-width: 768px){

  /* Remove bottom space under gallery block */
  body.about-page .m-block{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

}







/* ==========================================================
   ABOUT — MOBILE: MEET THE TEAM spacing fixes
   (top padding + CTA-to-first-card gap)
   ========================================================== */
@media (max-width: 900px){

  /* 1) Reduce the TOP space of the whole TEAM section */
  .about-mobile .m-team{
    padding-top: 0px !important;   /* was 46px total block padding */
    padding-bottom: 46px !important;
  }

  /* 2) Add more space between "Join our team" and first card */
  .about-mobile .m-team .m-cta{
    margin-bottom: 46px !important; /* increase gap under CTA */
  }

  /* 3) Prevent the list from adding extra/hidden spacing */
  .about-mobile .m-team-list{
    margin-top: 0 !important;       /* was 18px */
    gap: 26px !important;           /* keep your nicer spacing */
  }
}







/* ==========================================================
   ABOUT — MOBILE: Fix desktop CTA underline being full width
   Targets: .see-services-wrap + .see-work-btn (desktop markup)
   ========================================================== */
@media (max-width: 900px){

  /* Remove any full-width line coming from the wrapper */
  body.about-page .see-services-wrap{
    border-bottom: 0 !important;
    background: none !important;
    text-align: center !important;
  }
  body.about-page .see-services-wrap::after{
    content: none !important;
  }

  /* Make underline only as wide as the text */
  body.about-page .see-services-wrap .see-work-btn{
    display: inline-block !important;
    width: auto !important;
    max-width: fit-content !important;

    border-bottom: 2px solid currentColor !important;
    padding-bottom: 6px !important;

    text-decoration: none !important; /* just in case */
  }
}