/* Blue Door Websites - Master Benefit Page CSS v2 */

.benefit-hero{padding:72px 0 78px;background:linear-gradient(135deg,#f7f9fc 0%,#fff 70%);border-bottom:1px solid #e8edf5}
.benefit-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,1fr);align-items:center;gap:70px}
.benefit-hero-copy{max-width:610px}
.benefit-kicker{display:inline-flex;align-items:center;gap:9px;color:#0b5ea8;font-size:.82rem;font-weight:800;letter-spacing:.08em;margin-bottom:16px}
.benefit-hero h1{color:#16264a;font-size:clamp(3rem,5vw,5rem);line-height:1.02;font-weight:800;margin-bottom:25px}
.benefit-hero h1 span{color:#0b5ea8}
.benefit-lead{max-width:600px;color:#555;font-size:1.18rem;line-height:1.7;margin-bottom:32px}
.benefit-hero .primary-button i{margin-left:8px}
.benefit-hero-image{border-radius:22px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.13);background:#fff}
.benefit-hero-image img{width:100%;aspect-ratio:4/3;object-fit:cover}

.benefit-intro{padding:65px 0 72px;background:#fff;text-align:center}
.benefit-intro-inner{max-width:850px;margin:auto}
.benefit-highlight{display:inline-block;color:#0b5ea8;font-size:.92rem;font-weight:800;letter-spacing:.09em;line-height:1.3}
.benefit-intro h2{color:#16264a;font-size:2.45rem;line-height:1.18;margin:12px auto 18px}
.benefit-intro p{max-width:760px;margin:0 auto 13px;color:#555;font-size:1.04rem;line-height:1.75}

.benefit-story{padding:78px 0}
.benefit-story-light{background:#f7f9fc}
.benefit-story-white{background:#fff}
.benefit-story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:78px}
.benefit-story-grid.reverse .benefit-story-copy{order:1}
.benefit-story-grid.reverse .benefit-story-image{order:2}
.benefit-story-image{overflow:hidden;border-radius:20px;box-shadow:0 12px 32px rgba(0,0,0,.11)}
.benefit-story-image img{width:100%;aspect-ratio:4/3;object-fit:cover}
.benefit-story-copy{max-width:570px}
.benefit-story-copy .benefit-highlight{margin-bottom:12px}
.benefit-story-copy h2{color:#16264a;font-size:2.25rem;line-height:1.2;margin-bottom:20px}
.benefit-story-copy p{color:#555;font-size:1.02rem;line-height:1.78;margin-bottom:16px}
.benefit-points{margin-top:23px;display:grid;gap:11px}
.benefit-points div{display:flex;align-items:flex-start;gap:11px;color:#26334f;font-weight:600}
.benefit-points i{color:#28a745;margin-top:5px}

.benefit-business{padding:78px 0 82px;background:#f7f9fc}
.benefit-business-heading{text-align:center;max-width:820px;margin:0 auto 42px}
.benefit-business-heading h2{color:#16264a;font-size:2.25rem;line-height:1.2;margin:12px 0 13px}
.benefit-business-heading p{color:#666;font-size:1.02rem;line-height:1.7}
.benefit-business-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.benefit-business-grid article{background:#fff;border-radius:18px;padding:32px 27px;text-align:center;box-shadow:0 7px 22px rgba(0,0,0,.07)}
.business-icon{width:60px;height:60px;margin:0 auto 17px;border-radius:50%;background:#0d4fd7;color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px}
.benefit-business-grid h3{color:#16264a;font-size:1.16rem;margin-bottom:9px}
.benefit-business-grid p{color:#666;font-size:.92rem;line-height:1.62}

.benefit-why{padding:72px 0;background:#fff}
.benefit-why-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:65px;align-items:center;padding:44px 55px;border-radius:20px;background:#eef4fb;border-left:6px solid #0b5ea8}
.benefit-why h2{color:#16264a;font-size:2rem;line-height:1.25;margin:10px 0 0}
.benefit-why p{color:#555;font-size:1rem;line-height:1.75;margin:0}

@media(max-width:1020px){
  .benefit-hero-grid{grid-template-columns:1fr;gap:45px}
  .benefit-hero-copy{max-width:760px;margin:auto;text-align:center}
  .benefit-lead{margin-left:auto;margin-right:auto}
  .benefit-hero-image{max-width:760px;width:100%;margin:auto}
  .benefit-story-grid{gap:45px}
  .benefit-story-copy h2{font-size:2rem}
  .benefit-why-inner{grid-template-columns:1fr;gap:24px}
}
@media(max-width:768px){
  .benefit-hero{padding:45px 0 55px}
  .benefit-hero h1{font-size:2.7rem}
  .benefit-lead{font-size:1rem;line-height:1.65}
  .benefit-intro{padding:50px 0 55px}
  .benefit-intro h2{font-size:1.9rem}
  .benefit-intro p{font-size:.95rem}
  .benefit-story{padding:58px 0}
  .benefit-story-grid,.benefit-story-grid.reverse{grid-template-columns:1fr;gap:32px}
  .benefit-story-grid.reverse .benefit-story-copy,.benefit-story-grid.reverse .benefit-story-image{order:initial}
  .benefit-story-copy{max-width:none}
  .benefit-story-copy h2{font-size:1.75rem}
  .benefit-business{padding:58px 0 62px}
  .benefit-business-heading h2{font-size:1.8rem}
  .benefit-business-grid{grid-template-columns:1fr;max-width:430px;margin:auto}
  .benefit-why{padding:52px 0}
  .benefit-why-inner{padding:30px 24px}
  .benefit-why h2{font-size:1.6rem}
}


/* Compact header for benefit pages */
.benefit-page header .container{
  padding:8px 0;
}
.benefit-page header .logo img{
  height:48px;
}
.benefit-page .header-menu{
  gap:1.45rem;
}
.benefit-page nav ul{
  gap:1.45rem;
}
.benefit-page .header-button{
  padding:10px 21px;
}
@media (max-width:768px){
  .benefit-page header .container{
    height:60px;
    min-height:60px;
    padding:0 4%;
  }
  .benefit-page .header-menu{
    top:60px;
  }
}

/* V4 image treatment */
.benefit-hero-image img{
  aspect-ratio:auto;
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
.benefit-story-image img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
}