/* ==========================================================
   OURSTORY.CSS
   Applies ONLY to /ourstory/ via body.ourstory-page
   ========================================================== */


/* ==========================================================
   PART 1 — DESKTOP (default)
   ========================================================== */

/* Hero section (desktop defaults) */
body.ourstory-page .ourstory-hero{
  background:#fff;
  text-align:center;
}

/* Grey section begins 90px AFTER hero */
body.ourstory-page .ourstory-gray{
  background:#efefef;
  margin-top:90px;
  padding:90px 0;
}

/* Centered width for story content */
body.ourstory-page .ourstory-container{
  width:88%;
  max-width:1150px;
  margin:0 auto;
}

/* Strict vertical gap between image rows */
body.ourstory-page .os-block{ margin:0; }
body.ourstory-page .os-block.os-image{ margin-bottom:20px; }
body.ourstory-page .os-block.os-image:last-child{ margin-bottom:0; }

/* Medium title blocks (desktop) */
body.ourstory-page .ourstory-mediumtitle{
  padding-top:30px;
  padding-bottom:0;
}
body.ourstory-page .ourstory-mediumtitle .bodymain p{
  max-width:860px;
  margin:0 auto;
  line-height:1.7;
  font-family:"PPNeueMontrealBold", sans-serif;
  font-size:24px;
  font-weight:700;
  text-transform:uppercase;
  padding-bottom:30px;
}

/* Body text blocks (desktop) */
body.ourstory-page .ourstory-body{
  padding-top:0;
  padding-bottom:60px;
}
body.ourstory-page .ourstory-body .bodymain p{
  font-size:22px;
  line-height:1.45;
  max-width:700px;
  margin:0;
  font-family:"PPNeueMontrealBook", sans-serif;
  color:#000;
}

/* Images */
body.ourstory-page .os-img-single img{
  width:100%;
  height:auto;
  display:block;
  margin:0;
}

body.ourstory-page .os-img-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
body.ourstory-page .os-img-two img{
  width:100%;
  height:auto;
  display:block;
  margin:0;
}

/* Reveal hooks (page-only) */
body.ourstory-page .os-block,
body.ourstory-page .os-img-single,
body.ourstory-page .os-img-two{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .5s ease, transform .5s ease;
}
body.ourstory-page .os-block.reveal-visible,
body.ourstory-page .os-img-single.reveal-visible,
body.ourstory-page .os-img-two.reveal-visible{
  opacity:1;
  transform:translateY(0);
}



/* ==========================================================
   PART 2 — MOBILE (override only)
   ========================================================== */

@media (max-width: 820px){

  /* stack the two-image rows */
  body.ourstory-page .os-img-two{
    grid-template-columns:1fr;
    gap:14px;
  }

  /* MOBILE HERO typography you requested */
  body.ourstory-page .ourstory-hero .title-Head h2{
    font-size:36px;
    line-height:1.2;
  }

  body.ourstory-page .ourstory-hero .bodymain p{
    font-size:18px;
    line-height:1.6;
  }

}

@media (max-width: 820px){

  /* Push Our Story content down from fixed navbar (MOBILE ONLY) */
  body.ourstory-page .ourstory-hero{
    padding-top: 180px; /* tweak 110–130px if needed */
  }

}

@media (max-width: 820px){

  /* Our Story – CTA font size (MOBILE ONLY) */
  body.ourstory-page .ourstory-hero .see-work-btn{
    font-size: 20px;
  }

}


@media (max-width: 820px){

  body.ourstory-page .ourstory-hero .bodymain{
    margin-bottom: 0;
  }

  body.ourstory-page .ourstory-hero .see-services-wrap{
    margin-top: 0px;
  }

}



@media (max-width: 820px){

  /* Kill extra gap between paragraph and CTA (mobile only) */
  body.ourstory-page .os-mobile-only .ourstory-hero .bodymain p{
    margin-bottom: 15px !important;
  }

  body.ourstory-page .os-mobile-only .ourstory-hero .see-services-wrap{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

}