/* ===================================================
   ALTIUS SERVICES
   Premium Contractor Theme v2
=================================================== */

:root{

--navy:#0f2942;
--navy-light:#1f4367;
--gold:#c79b38;
--gold-light:#ddb75b;

--white:#ffffff;
--offwhite:#f7f8fa;

--text:#2b2b2b;
--gray:#777;
--border:#e8e8e8;

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

--radius:14px;

--transition:.35s ease;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{

scroll-behavior:smooth;

}

body{

font-family:'Montserrat',sans-serif;

background:#fff;

color:var(--text);

line-height:1.7;

overflow-x:hidden;

}

img{

max-width:100%;

display:block;

}

.container{

width:min(1200px,92%);

margin:auto;

}

section{

padding:110px 0;

}

h1,h2,h3,h4{

font-weight:700;

line-height:1.15;

}

h1{

font-size:clamp(3rem,7vw,5.4rem);

}

h2{

font-size:clamp(2rem,5vw,3rem);

margin-bottom:20px;

}

h3{

font-size:1.4rem;

margin-bottom:12px;

}

p{

color:#555;

font-size:1.05rem;

}

.section-title{

text-align:center;

max-width:760px;

margin:auto auto 70px;

}

.section-title p{

margin-top:15px;

}

/* ================= NAVIGATION ================= */

header{

position:fixed;

top:0;
left:0;
width:100%;

background:#d3aa42;

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

z-index:1000;

padding:10px 0;

}

.nav{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{
    display:flex;
    align-items:center;
}

.logo img{

height:90px;

width:auto;

display:block;

}

nav{
    display:flex;
    gap:34px;
}

nav a{

margin-left:32px;

font-weight:700;

font-size:1.15rem;

color:#17345b;

text-decoration:none;

transition:.25s;

}

nav a:hover{

opacity:.7;

}

/* =========================
   HERO
========================= */

.hero{

    position:relative;
    display:flex;
    align-items:center;
    min-height:100vh;

    background:
    linear-gradient(
        90deg,
        rgba(8,18,32,.92) 0%,
        rgba(8,18,32,.85) 35%,
        rgba(8,18,32,.55) 60%,
        rgba(8,18,32,.20) 100%
    ),
    url("images/hero-mike.jpg") center center / cover no-repeat;

    color:#fff;

}

.hero-content{

    display:flex;
    align-items:center;
    min-height:100vh;

}

.hero-text{

    max-width:760px;
    position:relative;
    z-index:2;

}

.hero-tag{

    display:inline-block;

    padding:10px 22px;

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

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

    backdrop-filter:blur(8px);

    border-radius:999px;

    color:#fff;

    font-size:.82rem;

    letter-spacing:3px;

    font-weight:700;

    margin-bottom:30px;

}

.hero h1{

    font-size:clamp(4.5rem,8vw,6.8rem);

    line-height:.92;

    font-weight:800;

    letter-spacing:-3px;

    color:#fff;

    margin-bottom:10px;

    text-shadow:0 5px 25px rgba(0,0,0,.45);

}

.hero-motto{

    font-size:2rem;

    color:#d4af37;

    font-weight:600;

    margin-bottom:28px;

}

.hero-subtitle{

    font-size:1.3rem;

    line-height:1.8;

    max-width:700px;

    color:rgba(255,255,255,.95);

    margin-bottom:40px;

}

.hero-highlights{

    display:grid;

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

    gap:18px 30px;

    margin-bottom:45px;

}

.hero-highlights div{

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

    border-left:4px solid #d4af37;

    padding:16px 18px;

    border-radius:10px;

    font-weight:600;

    color:#fff;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

@media(max-width:900px){

.hero{

    text-align:center;

}

.hero-content{

    justify-content:center;

}

.hero-text{

    margin:auto;

}

.hero h1{

    font-size:3.2rem;

}

.hero-motto{

    font-size:1.5rem;

}

.hero-highlights{

    grid-template-columns:1fr;

}

.hero-buttons{

    justify-content:center;

}

}

/* =========================
   BUTTONS
========================= */

.primary-button,
.secondary-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:18px 38px;
    border-radius:999px;
    text-decoration:none;
    font-weight:700;
    font-size:1rem;
    transition:all .25s ease;
    cursor:pointer;
}

.primary-button{
    background:var(--gold);
    color:#fff;
    border:2px solid var(--gold);
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.primary-button:hover{
    background:#b98c21;
    border-color:#b98c21;
    transform:translateY(-3px);
    box-shadow:0 18px 35px rgba(0,0,0,.22);
}

.secondary-button{
    background:transparent;
    color:#fff;
    border:2px solid rgba(255,255,255,.9);
}

.secondary-button:hover{
    background:#fff;
    color:var(--navy);
    transform:translateY(-3px);
}

/* ===================================
   SERVICES
=================================== */

.services{
    background:#fff;
    padding:120px 0;
    scroll-margin-top:145px;
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:36px;
    margin-top:50px;
}

.service-card{
    position:relative;
    overflow:hidden;
    background:#fff;
    padding:46px;
    border-radius:20px;
    border:1px solid #ececec;
    box-shadow:0 18px 55px rgba(0,0,0,.08);
    transition:transform .3s ease, box-shadow .3s ease;
}

.service-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,var(--gold),#e5c76c);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .3s ease;
}

.service-card:hover{
    transform:translateY(-10px);
    box-shadow:0 28px 65px rgba(0,0,0,.14);
}

.service-card:hover::before{
    transform:scaleX(1);
}

.service-card h3{

    position:relative;
    padding-top:24px;
    margin-bottom:18px;

}

.service-card h3::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:60px;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--gold),
        #e7c96d
    );

    border-radius:999px;

}


.service-card h3{
    margin:0 0 18px;
    color:var(--navy);
    font-size:1.45rem;
    line-height:1.3;
}

.service-card p{
    margin:0;
    color:#555;
    line-height:1.8;
    font-size:1rem;
}

@media (max-width:900px){

    .service-grid{
        grid-template-columns:1fr;
    }

    .service-card{
        padding:38px;
    }

}

/* =========================
ABOUT
========================= */

.about{
    background:var(--offwhite);
    scroll-margin-top:120px;
    padding:100px 0;
}

.about-grid{
    display:grid;
    grid-template-columns:52% 48%;
    gap:70px;
    align-items:center;
}

.about-image{
    display:flex;
    align-items:center;
    justify-content:center;
}

.about-image img{
    display:block;
    width:100%;
    max-height:540px;
    object-fit:cover;
    object-position:center top;
    border-radius:20px;
    box-shadow:0 18px 45px rgba(0,0,0,.18);
}

.about-content h2{
    margin-bottom:10px;
}

.about-content h4{
    margin:10px 0 24px;
    color:var(--gold);
    font-size:1.05rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    line-height:1.35;
}

.about-content p{
    margin-bottom:22px;
    font-size:1.08rem;
    line-height:1.8;
}

.experience-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
    margin-top:70px;
    margin-bottom:40px;
}

.experience-grid div{
    background:#fff;
    padding:30px 20px;
    text-align:center;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    transition:.25s ease;
}

.experience-grid div:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.experience-grid h3{
    color:var(--gold);
    font-size:2.3rem;
    font-weight:800;
    margin-bottom:8px;
}

.experience-grid span{
    color:var(--navy);
    font-weight:600;
    font-size:1rem;
}

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

@media (max-width:768px){

header{
    position:relative;
}

.nav{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    padding:15px 0;
}

.logo img{
    height:80px;
}

nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px 22px;
}

nav a{
    font-size:1.1rem;
}

.hero{
    min-height:65vh;
}

.hero-overlay{
    padding:30px 0;
}

.hero-content{
    max-width:100%;
    padding:0 20px;
    text-align:center;
}

.hero h1{
    font-size:clamp(2.8rem,10vw,4rem);
    line-height:1.08;
}

.hero p{
    font-size:1.15rem;
    line-height:1.6;
    margin:25px auto 35px;
}

.hero-buttons{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
}

.primary-button,
.secondary-button{
    width:100%;
    max-width:320px;
}

.about-grid,
.contact-grid,
.footer-grid,
.service-grid,
.portfolio-grid,
.testimonial-grid,
.feature-grid{
    grid-template-columns:1fr;
}

section{
    padding:75px 0;
}

}

/* ===================================
   EXPERIENCE STATS
=================================== */

.experience-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin-top:60px;
}

.experience-grid div{
    background:#fff;
    padding:28px 20px;
    text-align:center;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.experience-grid h3{
    color:var(--gold);
    font-size:2rem;
    margin-bottom:8px;
}

.experience-grid span{
    font-weight:600;
    color:var(--navy);
}

/* ===================================
   FEATURE STRIP
=================================== */

.feature-strip{

background:linear-gradient(135deg,var(--navy),var(--navy-light));

color:#fff;

}

.feature-grid{

display:grid;

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

gap:45px;

text-align:center;

}

.feature-grid h3{

color:#fff;

margin-bottom:16px;

}

.feature-grid p{

color:rgba(255,255,255,.82);

line-height:1.8;

}

/* =========================
PORTFOLIO
========================= */

.portfolio{
    background:#fff;
    padding:100px 0;
}

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:32px;
}

.project{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    height:340px;
    box-shadow:0 12px 35px rgba(0,0,0,.12);
}

.project img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
}

.project:hover img{
    transform:scale(1.06);
}
.project-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:28px;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.45) 45%,
        rgba(0,0,0,.08) 100%
    );
    color:#fff;
    opacity:0;
    transition:.3s ease;

    pointer-events:none;
}

.project:hover .project-overlay{
    opacity:1;
}

.project-overlay h3{
    font-size:1.9rem;
    margin-bottom:10px;
    color:#fff;
}

.project-overlay p{
    font-size:1rem;
    line-height:1.6;
    margin:0;
}

/* ===================================
   COMMERCIAL EXPERIENCE
=================================== */

.experience{

background:var(--offwhite);

}

.center{

text-align:center;

max-width:850px;

margin:auto;

font-size:1.1rem;

}

.brand-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:22px;

margin-top:60px;

}

.brand-grid div{

background:#fff;

padding:24px;

border-radius:14px;

font-weight:700;

text-align:center;

box-shadow:0 12px 35px rgba(0,0,0,.08);

transition:.3s;

}

.brand-grid div:hover{

background:var(--navy);

color:#fff;

transform:translateY(-8px);

}

/* ===================================
   TESTIMONIALS
=================================== */

.testimonials{
    background:#fff;
}

.testimonial-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:35px;
}

.testimonial{
    background:#fff;
    padding:40px;
    border-radius:18px;
    box-shadow:0 18px 50px rgba(0,0,0,.08);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:340px;
    transition:.3s;
}

.testimonial:hover{
    transform:translateY(-8px);
}

.stars{
    color:var(--gold);
    font-size:1.25rem;
    letter-spacing:4px;
    margin-bottom:20px;
}

.testimonial p{
    flex:1;
    font-size:1.05rem;
    line-height:1.8;
    color:#555;
    font-style:italic;
}

.testimonial strong{
    display:block;
    margin-top:25px;
    color:var(--navy);
    font-weight:700;
}

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

.cta{

background:linear-gradient(135deg,var(--navy),var(--navy-light));

text-align:center;

color:#fff;

}

.cta h2{

color:#fff;

margin-bottom:25px;

}

.cta p{

max-width:760px;

margin:auto auto 40px;

color:rgba(255,255,255,.85);

font-size:1.15rem;

line-height:1.9;

}

.cta .primary-button{

font-size:1.1rem;

padding:20px 52px;

box-shadow:0 20px 60px rgba(0,0,0,.30);

}

/* ===================================
   CONTACT
=================================== */

.contact{

background:#fff;

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:start;

}

.contact-info{

padding-right:20px;

}

.contact-info h3{

margin-bottom:25px;

color:var(--navy);

}

.contact-info p{

margin-bottom:14px;

}

.contact-form{

background:#fff;

padding:40px;

border-radius:18px;

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

}

.contact-form form{

display:flex;

flex-direction:column;

gap:18px;

}

.contact-form input,
.contact-form select,
.contact-form textarea{

width:100%;

padding:18px;

border:1px solid #ddd;

border-radius:12px;

font-size:1rem;

font-family:inherit;

transition:.3s;

background:#fff;

}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

outline:none;

border-color:var(--gold);

box-shadow:0 0 0 4px rgba(199,155,56,.15);

}

.contact-form textarea{

resize:vertical;

min-height:170px;

}

/* ===================================
   SERVICE AREA
=================================== */

.service-area{

background:var(--offwhite);

}

.area-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(170px,1fr));

gap:18px;

margin-top:40px;

}

.area-grid div{

background:#fff;

padding:18px;

text-align:center;

font-weight:600;

border-radius:12px;

box-shadow:0 10px 25px rgba(0,0,0,.05);

transition:.3s;

}

.area-grid div:hover{

background:var(--navy);

color:#fff;

transform:translateY(-5px);

}

/* ===================================
   FOOTER
=================================== */

footer{

background:#081624;

color:#fff;

padding:80px 0 30px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:50px;

}

footer h3{

margin-bottom:20px;

color:#fff;

}

footer p{

color:rgba(255,255,255,.75);

margin-bottom:10px;

}

footer a{

color:rgba(255,255,255,.75);

text-decoration:none;

display:inline-block;

margin-bottom:10px;

transition:.3s;

}

footer a:hover{

color:var(--gold-light);

}

.copyright{

text-align:center;

margin-top:60px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.10);

color:rgba(255,255,255,.55);

font-size:.95rem;

}

/* ===================================
   CONSTRUCTION BANNER
=================================== */

.construction-banner{

    max-width:760px;

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

    padding:40px 45px;

    border-left:8px solid var(--gold);

    border-radius:20px;

    box-shadow:0 30px 80px rgba(0,0,0,.25);

    margin-bottom:60px;

}

.construction-banner h3{

    color:var(--navy);

    font-size:2rem;

    margin-bottom:20px;

}

.construction-banner p{

    color:#444;

    font-size:1.1rem;

    line-height:1.9;

    margin-bottom:20px;

}

.construction-banner strong{

    color:var(--navy);

}

/* ===================================
   RESPONSIVE
=================================== */

@media (max-width:992px){

.about-grid,
.contact-grid,
.footer-grid{

grid-template-columns:1fr;

}

.hero-stats{

grid-template-columns:1fr;

}

.feature-grid{

grid-template-columns:1fr;

}

}

/* EXPERIENCE PREVIEW */

.experience-preview{
padding:90px 20px;
background:#fff;
}

.experience-preview-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
margin-top:50px;
margin-bottom:50px;
}

.preview-item{
overflow:hidden;
border-radius:18px;
box-shadow:0 15px 40px rgba(0,0,0,.12);
}

.preview-item img{
width:100%;
height:300px;
object-fit:cover;
display:block;
transition:.4s;
}

.preview-item:hover img{
transform:scale(1.05);
}

.experience-stats{
display:grid;
grid-template-columns:repeat(4,1fr);
text-align:center;
gap:30px;
margin-top:30px;
}

.experience-stats h3{
font-size:46px;
color:#c89b32;
margin-bottom:8px;
}

.experience-stats span{
font-weight:600;
color:#1d3557;
}

@media(max-width:900px){

.experience-preview-grid{
grid-template-columns:1fr 1fr;
}

.experience-stats{
grid-template-columns:1fr 1fr;
}

}

@media(max-width:600px){

.experience-preview-grid,
.experience-stats{
grid-template-columns:1fr;
}

}

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

@media (max-width:1024px){

.hero{

background-position:80% center;

}

}

@media (max-width:768px){

.hero{

background-position:84% center;
min-height:75vh;

}

.hero-content{

justify-content:center;
text-align:center;
padding:0 24px;

}

.hero-text{

margin:auto;
max-width:600px;

}

.hero-buttons{

justify-content:center;

}

}

/* =======================================
   LIGHTBOX
======================================= */

.lightbox{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.94);

    z-index:999999;

    justify-content:center;

    align-items:center;

}

.lightbox.show{

    display:flex;

}

.lightbox img{

    max-width:88vw;

    max-height:88vh;

    width:auto;

    height:auto;

    border-radius:14px;

    box-shadow:0 30px 80px rgba(0,0,0,.60);

    cursor:default;

}

.lightbox-close{

    position:fixed;

    top:20px;

    right:30px;

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:54px;

    color:#ffffff;

    background:rgba(0,0,0,.45);

    border-radius:50%;

    cursor:pointer;

    z-index:1000001;

    user-select:none;

    transition:.25s;

}

.lightbox-close:hover{

    background:rgba(199,155,56,.95);

    transform:scale(1.08);

}