/* CSS Document */

 
/* =========================
   APPROACH – SIMPLE OVERLAP (container-lg)
   Logo aligned with left image (outside panel)
   ========================= */

.approach-intro{
  padding: clamp(28px, 4vw, 60px) 0;
}

/* two columns */
.approach-intro__row{
  display: flex;
  align-items: stretch;
}

/* left image */
.approach-intro__media{
  width: 58%;
  min-height: clamp(420px, 46vw, 860px);
  overflow: hidden;
}

.approach-intro__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* right side column */
.approach-intro__side{
  width: 42%;
  position: relative;
}

/* logo at top-right, same top level as image */
.approach-intro__logo{
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(140px, 14vw, 240px);
  opacity: .65;
  pointer-events: none;
  z-index: 3;
}

.approach-intro__logo img{
  width: 100%;
  height: auto;
  display: block;
}

/* panel overlaps image */
.approach-intro__panel{
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  padding: clamp(18px, 2.2vw, 34px);

  position: relative;
  left: clamp(-110px, -6vw, -70px);
  margin-top: clamp(70px, 6.5vw, 120px);
  z-index: 2;
}

/* stack */
@media (max-width: 991px){
  .approach-intro__row{ display: block; }

  .approach-intro__media{
    width: 100%;
    min-height: 360px;
  }

  .approach-intro__side{
    width: 100%;
  }

  .approach-intro__logo{
    position: relative;
    margin: 12px 0 10px auto;
    top: auto;
    right: auto;
  }

  .approach-intro__panel{
    left: 0;
    margin-top: -26px;
  }
}

@media (max-width: 520px){
  .approach-intro__panel{
    margin-top: -16px;
    padding: 18px;
  }
}

/* =========================
   APPROACH – FLOAT BOX + ABS BG
   (no flex / no grid)
   Image height follows box automatically
   ========================= */

section.approach-a .container-lg{padding: 0 50px 0 0;}

.approach-a__wrap{
  position: relative;
  padding: 0;
  margin-bottom: 5px;
}

/* clearfix so wrapper height includes the floated box */
.approach-a__wrap::after{
  content:"";
  display: table;
  clear: both;
}

/* LEFT image behind: fills wrapper height */
.approach-a__bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 59%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.approach-a__bgimg{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Logo top-right (outside box) */
.approach-a__mark{
  position: absolute;
  top: 50px;
  right: 0;
  width: 268px;
  z-index: 3;
  pointer-events: none;
}

.approach-a__mark img{
  width: 100%;
  height: auto;
  display: block;
}

 
.approach-a__box{
  float: right;
  position: relative;
  z-index: 2;
  width: 58%;
  background: #fff;
  padding: 50px;

  
  margin-top: 218px;

  
  margin-bottom: 120px;
  margin-left: -140px;
  margin-right: 41px;
}
.approach-a__box p {
    margin-bottom: 50px;
}
.approach-a__box p:last-child {
    margin-bottom: 00px;
}

/* smoother resize BEFORE mobile (ex: around 1500px/1200px) */
@media (max-width: 1500px){
  .approach-a__bg{ width: 66%; }
  .approach-a__box{ width: 58%; margin-left: -120px; }
  .approach-a__mark{ width: 240px; }
}

@media (max-width: 1200px){
  .approach-a__bg{ width: 70%; }
  .approach-a__box{ width: 64%; margin-left: -90px; }
  .approach-a__mark{ top: 32px; right: 32px; width: 220px; }
}

/* stack (tablet/mobile) */
@media (max-width: 991px){
  .approach-a__bg{
    position: relative;
    width: 100%;
    height: 360px;
  }
section.approach-a .container-lg{padding: 0 0 0 0;}

  .approach-a__mark{
    position: absolute;
    top: 18px;
    right: 18px;
    width: 220px;
  }

  .approach-a__box{
    float: none;
    width: 100%;
    margin: -28px 0 0 0; /* small overlap over the image */
    padding: 28px;
  }
}

@media (max-width: 520px){
  .approach-a__bg{ height: 320px; }
  .approach-a__box{
    margin-top: -18px;
    padding: 18px;
  }
}

/* =========================
   APPROACH – INVERTED (text left / image right)
   (no flex / no grid)
   ========================= */

section.approach-b .container-lg{ padding: 0 0 0 50px; }

.approach-b__wrap{
  position: relative;
  padding: 0;
}

/* clearfix so wrapper height includes floated box */
.approach-b__wrap::after{
  content:"";
  display: table;
  clear: both;
}

/* RIGHT image behind: fills wrapper height */
.approach-b__bg{
  position: absolute;
  top: 0;
  right: 0;
  width: 70%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.approach-b__bgimg{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top;
}

/* “caption” bar above the image (shape seen in the print) */
.approach-b__cap{
  position: absolute;
  top: 0;
  right: 0;
  width: 78%;
  height: 92px;
  z-index: 2;
  /* background: linear-gradient(90deg, #0A4F8F 0%, #0B6DB5 100%); */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 62% 54%, 0 54%);
}

/* BOX: in flow (float), so wrapper height matches it */
.approach-b__box{
  float: left;
  position: relative;
  z-index: 3;
  width: 58%;
  background: #fff;
  padding: 50px;

  /* vertical placement like your reference */
  margin-top: 110px;

  /* overlap into the image (inverted) */
  margin-right: -140px;
  /* margin-left: 41px; */

  
  margin-bottom: 290px;
}

.approach-b__box p{ margin-bottom: 50px; }
.approach-b__box p:last-of-type{ margin-bottom: 0; }

 
.approach-b__big{
  margin: 50px 0 0;
  color: var(--main, #0071BA);
  font-family: Poppins;
  font-size: 32px;
  text-transform: math-auto;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-align: left;
}

/* bottom quote ribbon */
.approach-b__quote{
  position: absolute;
  right: 0;
  bottom: 59px;
  z-index: 4;
  width: 62%;
  padding: 40px 50px;
  padding-left: 170px;
  color: #fff;
  background: #0071BA;
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
}

.approach-b__quote p{
  margin: 0;
  align-self: stretch;
  color: #FFF;
  font-family: Poppins;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}

/* smoother resize BEFORE mobile */
@media (max-width: 1500px){
  .approach-b__bg{ width: 66%; }
  .approach-b__box{ width: 58%; margin-right: -120px; }
  .approach-b__quote{ width: 68%; }
}

@media (max-width: 1200px){
  .approach-b__bg{ width: 70%; }
  .approach-b__box{ width: 64%; margin-right: -90px; margin-left: 32px; }
  .approach-b__quote{ width: 74%; }
}

/* stack (tablet/mobile) */
@media (max-width: 991px){
  section.approach-b .container-lg{ padding: 0; }

  .approach-b__bg{
    position: relative;
    width: 100%;
    height: 360px;
  }

  .approach-b__cap{
    width: 100%;
    height: 70px;
    clip-path: none;
  }

  .approach-b__box{
    float: none;
    width: 100%;
    margin: -28px 0 0 0;
    padding: 28px;
  }

  .approach-b__quote{
    position: relative;
    width: 100%;
    right: auto;
    bottom: auto;
    margin-top: 18px;
    clip-path: none;
  }
}

@media (max-width: 520px){
  .approach-b__bg{ height: 320px; }
  .approach-b__box{
    margin-top: -18px;
    padding: 18px;
  }
  .approach-b__quote{ padding: 18px; }
}


@media (max-width: 1200px) {}
@media (max-width: 991px) {
}
@media (max-width: 768px) {}