/* =========================================
   Homepage Hero
========================================= */

.chp-hero{

padding:90px 0;

background:#F8FAFC;

}

.chp-hero .chp-container{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:70px;

}

.hero-badge{

display:inline-block;

background:#E8F5E9;

color:#16A34A;

padding:8px 16px;

border-radius:30px;

font-weight:600;

margin-bottom:20px;

}

.chp-hero h1{

font-size:58px;

line-height:1.15;

margin-bottom:25px;

}

.chp-hero p{

font-size:20px;

color:#6B7280;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:35px;

}

.chp-btn-outline{

display:inline-block;

padding:15px 28px;

border:2px solid #12355B;

border-radius:12px;

font-weight:700;

color:#12355B;

transition:.3s;

}

.chp-btn-outline:hover{

background:#12355B;

color:#fff;

}

.hero-features{

display:flex;

gap:30px;

flex-wrap:wrap;

font-weight:600;

color:#12355B;

}

.chp-hero-image img{

width:100%;

border-radius:20px;

box-shadow:0 20px 40px rgba(0,0,0,.08);

}

/* ===========================================
   Services Section
===========================================*/

.chp-services{

background:#ffffff;

}

.section-heading{

text-align:center;

max-width:760px;

margin:0 auto 60px;

}

.section-tag{

display:inline-block;

padding:8px 18px;

background:#E8F5E9;

color:#16A34A;

font-weight:700;

border-radius:30px;

margin-bottom:20px;

}

.section-heading h2{

font-size:42px;

margin-bottom:20px;

}

.section-heading p{

font-size:19px;

color:#6B7280;

}

.services-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

margin-bottom:50px;

}

.service-card{

background:#fff;

border:1px solid #E5E7EB;

border-radius:16px;

padding:30px;

transition:.3s;

box-shadow:0 6px 20px rgba(0,0,0,.05);

text-decoration:none;

color:#1F2937;

}

.service-card:hover{

transform:translateY(-8px);

box-shadow:0 18px 40px rgba(0,0,0,.10);

}

.service-icon{

font-size:42px;

margin-bottom:20px;

}

.service-card h3{

margin-bottom:15px;

font-size:24px;

color:#12355B;

}

.service-card p{

font-size:16px;

line-height:1.6;

color:#6B7280;

}

.section-button{

text-align:center;

}

@media(max-width:992px){

.services-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.services-grid{

grid-template-columns:1fr;

}

.section-heading h2{

font-size:32px;

}

}

/*=========================================
  Cities Section
=========================================*/

.chp-cities{

background:#F8FAFC;

}

.cities-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

margin-bottom:50px;

}

.city-card{

background:#fff;

border:1px solid #E5E7EB;

border-radius:16px;

padding:30px;

text-align:center;

transition:.3s;

box-shadow:0 6px 18px rgba(0,0,0,.05);

text-decoration:none;

}

.city-card:hover{

transform:translateY(-6px);

box-shadow:0 15px 35px rgba(0,0,0,.10);

}

.city-card h3{

margin-bottom:10px;

font-size:24px;

color:#12355B;

}

.city-card span{

display:inline-block;

font-size:15px;

color:#6B7280;

}

@media(max-width:992px){

.cities-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.cities-grid{

grid-template-columns:1fr;

}

}

/*=========================================
  Cost Guides
=========================================*/

.chp-cost-guides{

background:#ffffff;

}

.cost-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:30px;

margin-bottom:50px;

}

.cost-card{

background:#ffffff;

border:1px solid #E5E7EB;

border-radius:18px;

padding:35px;

transition:.3s;

box-shadow:0 8px 20px rgba(0,0,0,.05);

text-decoration:none;

color:#1F2937;

}

.cost-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 40px rgba(0,0,0,.10);

}

.cost-icon{

font-size:48px;

margin-bottom:20px;

}

.cost-card h3{

font-size:28px;

margin-bottom:15px;

color:#12355B;

}

.cost-card p{

font-size:17px;

line-height:1.7;

color:#6B7280;

margin-bottom:25px;

}

.cost-badge{

display:inline-block;

padding:10px 18px;

background:#E8F5E9;

color:#16A34A;

border-radius:30px;

font-weight:700;

}

@media(max-width:992px){

.cost-grid{

grid-template-columns:1fr;

}

}

/*=========================================
  Trust Section
=========================================*/

.chp-trust-bar{

padding:80px 0;

background:#12355B;

color:#ffffff;

}

.trust-heading{

text-align:center;

max-width:760px;

margin:0 auto 60px;

}

.trust-heading h2{

font-size:42px;

color:#ffffff;

margin-bottom:15px;

}

.trust-heading p{

font-size:18px;

color:#D1D5DB;

}

.trust-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.trust-card{

background:rgba(255,255,255,.08);

padding:35px 30px;

border-radius:18px;

text-align:center;

transition:.3s;

border:1px solid rgba(255,255,255,.12);

}

.trust-card:hover{

transform:translateY(-6px);

background:rgba(255,255,255,.12);

}

.trust-icon{

width:70px;

height:70px;

margin:0 auto 20px;

background:#16A34A;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

font-weight:700;

}

.trust-card h3{

font-size:22px;

margin-bottom:15px;

color:#ffffff;

}

.trust-card p{

font-size:16px;

line-height:1.7;

color:#E5E7EB;

}

@media(max-width:992px){

.trust-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.trust-grid{

grid-template-columns:1fr;

}

.trust-heading h2{

font-size:32px;

}

}

/*=========================================
  Featured Contractors
=========================================*/

.chp-contractors{

background:#F8FAFC;

}

.contractor-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-bottom:50px;

}

.contractor-card{

background:#fff;

border-radius:18px;

overflow:hidden;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.3s;

border:1px solid #E5E7EB;

}

.contractor-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.contractor-image img{

width:100%;

height:220px;

object-fit:cover;

}

.contractor-content{

padding:30px;

}

.contractor-category{

display:inline-block;

padding:6px 14px;

background:#E8F5E9;

color:#16A34A;

border-radius:20px;

font-size:14px;

font-weight:700;

margin-bottom:15px;

}

.contractor-rating{

margin:15px 0;

font-size:15px;

font-weight:600;

}

.contractor-rating span{

color:#6B7280;

margin-left:8px;

}

.contractor-features{

margin:20px 0;

padding:0;

list-style:none;

}

.contractor-features li{

margin-bottom:10px;

color:#4B5563;

}

.contractor-features li:last-child{

margin-bottom:0;

}

@media(max-width:992px){

.contractor-grid{

grid-template-columns:1fr;

}

}

/*=========================================
  Latest Blog Posts
=========================================*/

.chp-latest-posts{

background:#ffffff;

}

.blog-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-bottom:50px;

}

.blog-card{

background:#fff;

border-radius:18px;

overflow:hidden;

box-shadow:0 10px 30px rgba(0,0,0,.06);

transition:.3s;

border:1px solid #E5E7EB;

}

.blog-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(0,0,0,.10);

}

.blog-image img{

width:100%;

height:240px;

object-fit:cover;

}

.blog-content{

padding:30px;

}

.blog-meta{

font-size:14px;

color:#6B7280;

margin-bottom:15px;

}

.blog-content h3{

font-size:24px;

margin-bottom:15px;

line-height:1.4;

}

.blog-content h3 a{

color:#12355B;

text-decoration:none;

}

.blog-content p{

margin-bottom:20px;

}

.read-more{

font-weight:700;

color:#16A34A;

}

.read-more:hover{

color:#12355B;

}

.no-posts{

text-align:center;

padding:60px;

background:#F8FAFC;

border-radius:16px;

}

@media(max-width:992px){

.blog-grid{

grid-template-columns:1fr;

}

}

/*=========================================
  CTA Section
=========================================*/

.chp-cta{

padding:100px 0;

background:#12355B;

}

.cta-box{

background:linear-gradient(135deg,#12355B,#1E4A7A);

border-radius:24px;

padding:70px;

display:grid;

grid-template-columns:2fr 1fr;

gap:60px;

align-items:center;

}

.cta-content h2{

color:#fff;

font-size:46px;

margin-bottom:20px;

}

.cta-content p{

color:#E5E7EB;

font-size:18px;

margin-bottom:35px;

max-width:650px;

}

.cta-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.cta-stats{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

}

.stat-card{

background:rgba(255,255,255,.10);

border:1px solid rgba(255,255,255,.15);

border-radius:16px;

padding:25px;

text-align:center;

}

.stat-card h3{

font-size:38px;

color:#fff;

margin-bottom:10px;

}

.stat-card p{

color:#D1D5DB;

margin:0;

}

@media(max-width:992px){

.cta-box{

grid-template-columns:1fr;

text-align:center;

padding:50px 35px;

}

.cta-buttons{

justify-content:center;

}

}

@media(max-width:768px){

.cta-stats{

grid-template-columns:1fr 1fr;

}

.cta-content h2{

font-size:34px;

}

}

/* =========================================================
   LATEST POSTS - MODERN EDITORIAL LAYOUT
========================================================= */

.chp-latest-posts {
    padding: 110px 0;
    background: #f8fafc;
}

.chp-latest-posts .section-heading {
    max-width: 820px;
    margin: 0 auto 55px;
    text-align: center;
}


/* Main Layout */

.latest-posts-layout {
    display: grid;
    grid-template-columns: 1.3fr .9fr;
    gap: 30px;
    align-items: stretch;
}


/* Featured Article */

.featured-post-card {
    background: #ffffff;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.07);
    transition: transform .25s ease, box-shadow .25s ease;
}

.featured-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.11);
}

.featured-post-image {
    display: block;
    height: 330px;
    overflow: hidden;
}

.featured-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.featured-post-card:hover .featured-post-image img {
    transform: scale(1.03);
}

.featured-post-content {
    padding: 34px;
}

.featured-post-content h3 {
    margin: 12px 0 14px;
    font-size: 30px;
    line-height: 1.25;
    color: #173b63;
}

.featured-post-content h3 a {
    color: inherit;
    text-decoration: none;
}

.featured-post-content p {
    margin: 0 0 22px;
    color: #64748b;
    font-size: 16px;
    line-height: 1.75;
}


/* Supporting Articles */

.supporting-posts {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    gap: 24px;
}

.supporting-post-card {
    display: grid;
    grid-template-columns: 180px 1fr;
    min-height: 220px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
    transition: transform .25s ease, box-shadow .25s ease;
}

.supporting-post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.09);
}

.supporting-post-image {
    display: block;
    overflow: hidden;
}

.supporting-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.supporting-post-card:hover .supporting-post-image img {
    transform: scale(1.04);
}

.supporting-post-content {
    padding: 24px;
}

.supporting-post-content h3 {
    margin: 10px 0 11px;
    font-size: 20px;
    line-height: 1.35;
    color: #173b63;
}

.supporting-post-content h3 a {
    color: inherit;
    text-decoration: none;
}

.supporting-post-content p {
    margin: 0 0 15px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}


/* Meta */

.post-top-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.post-category {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    background: #ecfdf3;
    color: #15803d;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.post-date {
    color: #94a3b8;
    font-size: 13px;
}


/* Read More Link */

.post-read-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #15803d;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.post-read-link span {
    transition: transform .2s ease;
}

.post-read-link:hover span {
    transform: translateX(4px);
}


/* Bottom Button */

.chp-latest-posts .section-button {
    margin-top: 45px;
    text-align: center;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .latest-posts-layout {
        grid-template-columns: 1fr;
    }

    .supporting-posts {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .supporting-post-card {
        grid-template-columns: 1fr;
    }

    .supporting-post-image {
        height: 200px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .chp-latest-posts {
        padding: 75px 0;
    }

    .featured-post-image {
        height: 230px;
    }

    .featured-post-content {
        padding: 26px;
    }

    .featured-post-content h3 {
        font-size: 25px;
    }

    .supporting-posts {
        grid-template-columns: 1fr;
    }

    .supporting-post-card {
        grid-template-columns: 1fr;
    }

    .supporting-post-image {
        height: 210px;
    }

}