/* ===== Homepage-only styles (index.php); shared full-width layout lives in fullwidth.css ===== */
body{ color:#4a4a55; }

/* --- Hero slider --- */
.hero-section .flexslider{ border:0; border-radius:0; box-shadow:none; background:#111; }
.hero-section .flexslider .slides > li{ overflow:hidden; }
.hero-section .flexslider .slides img{
    width:100%;
    height:calc(100vh - 96px);
    min-height:460px;
    max-height:860px;
    object-fit:cover;
}
.hero-section .flexslider .slides > li:after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(10,12,40,.78) 0%, rgba(10,12,40,.35) 45%, rgba(10,12,40,0) 75%),
               linear-gradient(0deg, rgba(10,12,40,.55) 0%, rgba(10,12,40,0) 40%);
    pointer-events:none;
}
.hero-section .flex-caption{
    background:none;
    z-index:2;
    width:auto;
    max-width:760px;
    left:8%;
    right:8%;
    margin-left:0;
    bottom:18%;
    padding:0 0 0 28px;
    text-align:left;
    border-left:4px solid #fff;
}
.hero-section .flex-caption h1{ margin:0; }

/* --- Intro --- */
.intro-content h3{ margin:0 0 6px; }
.intro-content h3:after{
    content:"";
    display:block;
    width:64px; height:3px;
    background:rgba(255,255,255,.7);
    margin:24px auto 0;
}
.intro-content p{ margin:0 auto 18px; color:rgba(255,255,255,.88); }

/* --- Two feature blocks --- */
.hotspot-blocks .container{ padding:90px 48px 40px; }
.hotspot-blocks .row{ display:flex; flex-wrap:wrap; }
.hotspot-blocks .block{
    padding:0 24px 50px !important;
    border-bottom:0;
}
.hotspot-blocks .block:before{ display:none; }
.hotspot-blocks .block span{ margin-bottom:18px; }
.hotspot-blocks .block span + br{ display:none; }
.hotspot-blocks .block img{
    display:block;
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    border-radius:6px;
    box-shadow:0 18px 40px rgba(20,24,80,.14);
    transition:transform .5s ease, box-shadow .5s ease;
}
.hotspot-blocks .block:hover img{ transform:translateY(-6px); box-shadow:0 26px 50px rgba(20,24,80,.2); }
.hotspot-blocks .block p{ padding-top:24px !important; }
.hotspot-blocks .block:hover,
.hotspot-blocks .block:focus{ text-decoration:none; color:#707070; }

/* --- Featured projects --- */
.featured-projects .container{ padding:80px 48px 100px; background:#f5f6fa; }
.featured-projects h2{ margin-bottom:20px; }
.featured-projects h2:after{
    content:"";
    display:block;
    width:64px; height:3px;
    background:#2f3483;
    margin:22px auto 0;
}
.featured-projects .project-list{ display:flex; flex-wrap:wrap; }
.featured-projects .project-list > div{ margin-top:30px; }
.featured-projects .project-list a{ height:100%; }
.featured-projects .project-list a{
    display:block;
    background:#fff;
    border-radius:6px;
    overflow:hidden;
    padding-bottom:22px;
    box-shadow:0 6px 22px rgba(20,24,80,.07);
    transition:transform .35s ease, box-shadow .35s ease;
}
.featured-projects .project-list a:hover{
    text-decoration:none;
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(20,24,80,.16);
}
.featured-projects .img-block{ margin:0 0 20px; padding-bottom:72%; }
.img-block:after{ background:none; }
.featured-projects a:hover .img-block img{ opacity:1; transform:scale(1.06); }
.featured-projects .project-list h3{ margin-left:16px; margin-right:16px; }
.featured-projects a p{ margin-left:16px; margin-right:16px; }
.featured-projects > .container > .more-btn{
    margin-top:56px;
    border-radius:40px;
}

/* --- Responsive --- */
@media (max-width:1199px){
    .hero-section .flex-caption{ bottom:14%; width:auto; margin-left:0; }
}
@media (max-width:991px){
    .hero-section .flexslider .slides img{ height:60vh; min-height:380px; }
    .hero-section .flex-caption{ width:auto; margin-left:0; padding:0 0 0 28px; }
    .hotspot-blocks .container,
    .featured-projects .container{ padding-left:24px; padding-right:24px; }
}
@media (max-width:767px){
    .hero-section .flexslider .slides img{ height:62vh; min-height:340px; }
    .hero-section .flex-caption{
        left:20px; right:20px; bottom:28px;
        width:auto; padding:0 0 0 16px; border-left-width:3px;
    }
    .hotspot-blocks .container{ padding:56px 8px 10px; }
    .hotspot-blocks .block{ padding:0 12px 40px !important; }
    .featured-projects .container{ padding:56px 12px 70px; }
}