/* ===========================================================
   pages.css — supplementary styles for About / Services / Contact
   Add-on only. Does not replace your existing style.css.
   =========================================================== */

.page-banner{
  position:relative;
  background-size:cover;
  background-position:center;
  padding:110px 0 60px;
  color:#fff;
}
.page-banner-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,20,35,.75), rgba(10,20,35,.85));
}
.page-banner-content{
  position:relative;z-index:1;text-align:center;
}
.page-banner-content h1{
  font-size:clamp(28px,4vw,44px);
  font-weight:800;letter-spacing:1px;margin-bottom:8px;
}
.page-banner-content p{opacity:.85;font-size:14px}

.about-page-grid{
  display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:flex-start;
}
.about-page-image img{
  width:100%;border-radius:14px;object-fit:cover;
}
.about-list{list-style:none;padding:0;margin:14px 0;}
.about-list li{margin-bottom:10px;font-size:15px}
.about-list i{color:#e2a020;margin-right:8px}

.service-detail{padding:50px 0}
.service-detail.alt{background:#f6f7f9}
.service-detail-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
}
.service-detail-grid.reverse .service-detail-image{order:2}
.service-detail-grid.reverse .service-detail-text{order:1}
.service-detail-image img{width:100%;border-radius:14px;object-fit:cover}
.service-detail-text h2{font-size:24px;margin-bottom:14px}

@media (max-width:860px){
  .about-page-grid, .service-detail-grid, .service-detail-grid.reverse{
    grid-template-columns:1fr;
  }
  .service-detail-grid.reverse .service-detail-image,
  .service-detail-grid.reverse .service-detail-text{order:initial}
}