```css
/*
==================================================
 GARY & SON CONSTRUCTION
 Premium Construction CSS Framework
 Version 2026
==================================================
*/


/* ==================================================
   ROOT VARIABLES
================================================== */

:root{

--blue:#0B4F8A;
--blue-dark:#07345D;
--blue-light:#EAF3FA;

--gold:#D5A62A;
--gold-light:#F5E8BD;

--charcoal:#18212B;
--charcoal-dark:#101820;

--white:#FFFFFF;

--bg:#F5F7F9;
--bg-alt:#EDF1F5;

--text:#26313B;
--muted:#65717C;

--border:#DCE3E9;

--shadow:
0 15px 40px rgba(16,24,32,.10);

--shadow-lg:
0 25px 60px rgba(16,24,32,.15);

--radius:10px;

--transition:.3s ease;

}


/* ==================================================
   RESET
================================================== */

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

html{
scroll-behavior:smooth;
}

html,
body{
overflow-x:hidden;
}

body{

font-family:'Manrope',
Arial,
sans-serif;

background:var(--bg);

color:var(--text);

line-height:1.7;

font-size:16px;

}

#site{
width:100%;
max-width:100%;
overflow:hidden;
}


img{
display:block;
max-width:100%;
height:auto;
}


a{

text-decoration:none;

color:var(--blue-dark);

transition:var(--transition);

}

a:hover{
color:var(--blue);
}


/* ==================================================
   TYPOGRAPHY
================================================== */

h1,
h2,
h3,
h4{

font-family:'DM Serif Display',
Georgia,
serif;

color:var(--charcoal-dark);

font-weight:400;

line-height:1.15;

margin-bottom:20px;

}

h1{

font-size:
clamp(2.4rem,6vw,4.5rem);

}

h2{

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

}

h3{

font-size:
clamp(1.5rem,4vw,2rem);

}

h4{

font-size:
clamp(1.2rem,3vw,1.4rem);

}

p{

margin-bottom:20px;

color:var(--muted);

}


.container{

width:100%;

max-width:1200px;

margin:0 auto;

padding-left:20px;

padding-right:20px;

}


/* ==================================================
   HEADER
================================================== */

.site-header{

position:fixed;

top:0;
left:0;

width:100%;

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

backdrop-filter:
blur(12px);

border-bottom:
1px solid #E7EBEF;

z-index:999;

transition:var(--transition);

}

.site-header.scrolled{

box-shadow:var(--shadow);

}

.header-flex{

display:flex;

align-items:center;

justify-content:space-between;

height:92px;

}

.logo img{

height:72px;

width:auto;

}

.header-right{

display:flex;

align-items:center;

gap:18px;

}


/* ==================================================
   DESKTOP NAV
================================================== */

.desktop-nav ul{

display:flex;

list-style:none;

gap:30px;

}

.desktop-nav a{

font-weight:700;

font-size:15px;

position:relative;

padding-bottom:8px;

color:var(--charcoal);

}

.desktop-nav a:after{

content:"";

position:absolute;

left:0;

bottom:0;

width:0;

height:3px;

background:var(--gold);

transition:var(--transition);

}

.desktop-nav a:hover:after{

width:100%;

}


/* ==================================================
   PHONE BUTTON
================================================== */

.phone-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:13px 22px;

    background:#07345D !important;
    color:#FFFFFF !important;

    border-radius:5px;

    font-weight:800;
    font-size:15px;

    white-space:nowrap;

    box-shadow:0 8px 20px rgba(7,52,93,.18);

    transition:.3s ease;
}

.phone-button:hover{
    background:#0B4F8A !important;
    color:#FFFFFF !important;
    transform:translateY(-2px);
}


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

.nav-toggle{

display:none;

font-size:30px;

cursor:pointer;

color:var(--charcoal);

}

.mobile-menu{

display:none;

background:#fff;

padding:20px;

box-shadow:var(--shadow);

}

.mobile-menu.show{

display:flex;

flex-direction:column;

}

.mobile-menu a{

padding:14px 0;

border-bottom:
1px solid var(--border);

font-weight:700;

}


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

.hero{
    position:relative;

    margin-top:92px;

    min-height:620px;

    display:flex;
    align-items:center;

    background:
    linear-gradient(
        90deg,
        rgba(7,24,40,.88),
        rgba(7,24,40,.60),
        rgba(7,24,40,.35)
    ),
    url("../images/banner.jpg")
    center/cover no-repeat;

    overflow:hidden;
}

.hero-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
135deg,
rgba(7,52,93,.20),
transparent
);

}

.hero-content{
    position:relative;
    z-index:2;

    max-width:760px;

    padding-top:20px;
    padding-bottom:20px;
}

.hero h1{
    color:#fff;

    font-size:clamp(2.8rem,5vw,4.5rem);

    line-height:1.05;

    letter-spacing:-1px;

    margin-bottom:24px;
}

.hero p{

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

font-size:18px;

max-width:680px;

}

.hero-tag{

display:inline-block;

padding:
9px 18px;

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

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

color:#fff;

font-weight:700;

letter-spacing:.4px;

margin-bottom:28px;

backdrop-filter:blur(8px);

}


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

.hero-buttons{

display:flex;

gap:15px;

margin-top:32px;

}

.btn-primary,
.btn-secondary{

display:inline-block;

padding:
15px 30px;

font-weight:800;

border-radius:5px;

transition:var(--transition);

}

.btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    
    padding:16px 32px;
    
    background:#D5A62A !important;
    color:#101820 !important;
    
    border:2px solid #D5A62A;
    border-radius:5px;
    
    font-weight:800;
    font-size:16px;
    
    box-shadow:
        0 8px 22px rgba(0,0,0,.28);
    
    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.btn-primary:hover{
    background:#E8BC3D !important;
    color:#101820 !important;
    
    transform:translateY(-3px);
    
    box-shadow:
        0 12px 28px rgba(0,0,0,.35);
}
.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    
    padding:16px 32px;
    
    background:rgba(7,24,40,.35);
    color:#fff !important;
    
    border:2px solid rgba(255,255,255,.85);
    border-radius:5px;
    
    font-weight:800;
    font-size:16px;
    
    backdrop-filter:blur(6px);
    
    transition:.3s ease;
}

.btn-secondary:hover{
    background:#fff;
    color:#101820 !important;
    border-color:#fff;
}

/* ==================================================
   TRUST BAR
================================================== */

.trust-bar{

background:
var(--charcoal-dark);

color:#fff;

padding:24px 0;

border-bottom:
4px solid var(--gold);

}

.trust-grid{

display:grid;

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

gap:20px;

text-align:center;

font-size:15px;

font-weight:800;

}

.trust-grid div{

padding:
5px 10px;

}


/* ==================================================
   MAIN PAGE LAYOUT
================================================== */

.page-layout{

display:grid;

grid-template-columns:
2fr 1fr;

gap:40px;

padding:
70px 0;

align-items:start;

}

.content-area{

background:#fff;

padding:50px;

border:
1px solid #E6EBEF;

border-radius:
var(--radius);

box-shadow:
var(--shadow);

min-width:0;

}

.content-area h1{

margin-bottom:25px;

}

.content-area h2{

margin-top:40px;

}

.content-area h3{

margin-top:30px;

}


/* ==================================================
   SIDEBAR
================================================== */

.sidebar-card{

background:#fff;

padding:32px;

position:sticky;

top:115px;

border:
1px solid #E2E8ED;

border-top:
5px solid var(--gold);

border-radius:
var(--radius);

box-shadow:
var(--shadow);

}

.sidebar-label{

font-size:12px;

font-weight:800;

letter-spacing:1.5px;

color:var(--blue);

margin-bottom:10px;

}

.sidebar-card h3{

margin-bottom:12px;

}

.sidebar-card hr{

border:0;

border-top:
1px solid var(--border);

margin:
25px 0;

}

.sidebar-btn{

display:block;

width:100%;

padding:
14px;

text-align:center;

margin-bottom:12px;

background:
var(--blue-dark);

color:#fff;

border-radius:5px;

font-weight:800;

}

.sidebar-btn:hover{

background:
var(--blue);

color:#fff;

}

.sidebar-btn-outline{

background:#fff;

color:var(--blue-dark);

border:
1px solid var(--blue-dark);

}

.sidebar-btn-outline:hover{

background:
var(--blue-dark);

color:#fff;

}


/* ==================================================
   FORMS
================================================== */

.form-group{

margin-bottom:0;

}

form input,
form select,
form textarea{

width:100%;

padding:
14px 15px;

margin-bottom:14px;

border:
1px solid var(--border);

border-radius:5px;

background:#fff;

font:inherit;

color:var(--text);

}

form input:focus,
form select:focus,
form textarea:focus{

outline:none;

border-color:
var(--blue);

box-shadow:
0 0 0 4px
rgba(11,79,138,.10);

}

form textarea{

resize:vertical;

min-height:120px;

}

form button{

width:100%;

padding:15px;

border:none;

border-radius:5px;

background:
var(--gold);

color:
var(--charcoal-dark);

font-weight:800;

font-size:15px;

cursor:pointer;

transition:var(--transition);

}

form button:hover{

background:#E4B83D;

transform:
translateY(-2px);

}

.form-note{

font-size:12px;

line-height:1.8;

color:var(--muted);

margin-top:16px;

}


/* ==================================================
   SECTION EYEBROW
================================================== */

.section-eyebrow{

display:block;

font-size:12px;

font-weight:800;

letter-spacing:2px;

color:var(--gold);

margin-bottom:15px;

}


/* ==================================================
   CARDS
================================================== */

.service-grid,
.feature-grid{

display:grid;

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

gap:25px;

margin:
35px 0;

}

.service,
.feature,
.card{

background:#fff;

padding:32px;

border:
1px solid #E4E9ED;

border-radius:
var(--radius);

box-shadow:
0 8px 25px rgba(16,24,32,.06);

transition:var(--transition);

}

.service:hover,
.feature:hover,
.card:hover{

transform:
translateY(-6px);

box-shadow:
var(--shadow);

border-color:
#D5DDE4;

}

.service h3,
.feature h3{

margin-bottom:12px;

}

.service-icon{

width:58px;

height:58px;

display:flex;

align-items:center;

justify-content:center;

background:
var(--blue-light);

color:
var(--blue);

border-radius:50%;

margin-bottom:20px;

font-size:25px;

}


/* ==================================================
   PROJECT CARDS
================================================== */

.project-grid{

display:grid;

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

gap:25px;

}

.project-card{

background:#fff;

border-radius:
var(--radius);

overflow:hidden;

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

transition:var(--transition);

}

.project-card:hover{

transform:
translateY(-5px);

box-shadow:
var(--shadow-lg);

}

.project-card img{

width:100%;

height:260px;

object-fit:cover;

}

.project-info{

padding:25px;

}

.project-info h3{

margin-bottom:8px;

}

.project-category{

font-size:12px;

font-weight:800;

letter-spacing:1px;

text-transform:uppercase;

color:var(--blue);

}


/* ==================================================
   CALLOUT
================================================== */

.callout{

background:
var(--blue-light);

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

padding:
25px;

border-radius:5px;

margin:
30px 0;

}

.callout strong{

color:
var(--charcoal-dark);

}


/* ==================================================
   TABLES
================================================== */

table{

width:100%;

border-collapse:collapse;

background:#fff;

box-shadow:
var(--shadow);

}

th{

background:
var(--charcoal-dark);

color:#fff;

padding:16px;

text-align:left;

}

td{

padding:15px;

border-bottom:
1px solid var(--border);

}


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

.cta-section{

background:

linear-gradient(
135deg,
var(--charcoal-dark),
var(--blue-dark)
);

text-align:center;

padding:
95px 20px;

color:#fff;

position:relative;

}

.cta-section:before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:4px;

background:
var(--gold);

}

.cta-section h2{

color:#fff;

max-width:800px;

margin:
0 auto 20px;

}

.cta-section p{

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

max-width:700px;

margin:
0 auto 30px;

font-size:17px;

}


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

.site-footer{

background:
#101820;

color:#CBD3DA;

padding:
70px 0 30px;

}

.footer-grid{

display:grid;

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

gap:40px;

}

.footer-column h3{

color:#fff;

font-family:
'Manrope',
Arial,
sans-serif;

font-size:17px;

font-weight:800;

margin-bottom:20px;

}

.footer-column p{

color:#AEB9C3;

font-size:14px;

}

.footer-column ul{

list-style:none;

}

.footer-column li{

margin-bottom:9px;

}

.footer-column a{

color:#CBD3DA;

}

.footer-column a:hover{

color:#fff;

}

.footer-logo{

height:58px;

width:auto;

margin-bottom:20px;

}

.footer-cta{

display:inline-block;

margin-top:10px;

padding:
11px 18px;

border:
1px solid var(--gold);

color:var(--gold) !important;

border-radius:4px;

font-weight:700;

}

.footer-cta:hover{

background:var(--gold);

color:
var(--charcoal-dark) !important;

}

.copyright{

margin-top:45px;

padding-top:22px;

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

text-align:center;

font-size:13px;

color:#8D99A4;

}

.copyright a{

color:#CBD3DA;

}

.copyright-divider{

margin:
0 8px;

color:#56616B;

}


/* ==================================================
   UTILITIES
================================================== */

.hidden{

display:none;

}

.text-center{

text-align:center;

}

.mt-40{

margin-top:40px;

}

.mb-40{

margin-bottom:40px;

}


/* ==================================================
   RESPONSIVE — TABLET
================================================== */

@media(max-width:992px){

.page-layout{

grid-template-columns:1fr;

}

.sidebar-card{

position:static;

}

.service-grid,
.feature-grid{

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

}

.footer-grid{

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

}

.trust-grid{

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

}

}


/* ==================================================
   RESPONSIVE — MOBILE
================================================== */

@media(max-width:768px){

.desktop-nav,
.phone-button{

display:none;

}

.nav-toggle{

display:block;

}

.header-flex{

height:80px;

}

.logo img{

height:58px;

}

.hero{

margin-top:80px;

min-height:520px;

text-align:center;

}

.hero-content{

max-width:100%;

}

.hero h1{

font-size:
clamp(2.6rem,10vw,4rem);

}

.hero p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

gap:12px;

}

.btn-primary,
.btn-secondary{

width:100%;

text-align:center;

}

.trust-grid{

grid-template-columns:1fr;

gap:10px;

}

.page-layout{

padding:
45px 0;

}

.content-area{

padding:28px 22px;

}

.sidebar-card{

padding:25px;

}

.service-grid,
.feature-grid,
.project-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

gap:30px;

}

}
/* ==================================================
   KITCHEN PROJECT GALLERY
================================================== */

.project-gallery-section{
    margin:50px 0;
}

.gallery-header{
    margin-bottom:30px;
}

.gallery-header h2{
    margin-bottom:15px;
}

.gallery-header p{
    max-width:760px;
}


/* GALLERY GRID */

.kitchen-gallery{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
    margin-top:30px;
}


/* INDIVIDUAL IMAGE */

.gallery-item{
    display:block;
    position:relative;
    overflow:hidden;

    aspect-ratio:4 / 3;

    background:#eee;

    border-radius:8px;

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

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.gallery-item img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .4s ease;
}


.gallery-item:hover{
    transform:translateY(-4px);

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


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


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

.gallery-lightbox{
    position:fixed;

    inset:0;

    z-index:5000;

    display:none;

    align-items:center;
    justify-content:center;

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

    padding:40px;
}


.gallery-lightbox.show{
    display:flex;
}


.gallery-lightbox-content{
    max-width:90vw;
    max-height:90vh;

    text-align:center;
}


.gallery-lightbox-content img{
    display:block;

    max-width:90vw;
    max-height:80vh;

    width:auto;
    height:auto;

    object-fit:contain;

    border-radius:5px;
}


.gallery-caption{
    color:#fff;

    margin-top:15px;

    font-size:14px;
}


/* CLOSE */

.gallery-close{
    position:absolute;

    top:20px;
    right:25px;

    width:48px;
    height:48px;

    border:0;

    border-radius:50%;

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

    color:#fff;

    font-size:32px;

    line-height:1;

    cursor:pointer;
}


.gallery-close:hover{
    background:var(--gold);
}


/* PREVIOUS / NEXT */

.gallery-prev,
.gallery-next{
    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:50px;
    height:50px;

    border:0;

    border-radius:50%;

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

    color:#fff;

    font-size:24px;

    cursor:pointer;
}


.gallery-prev{
    left:25px;
}


.gallery-next{
    right:25px;
}


.gallery-prev:hover,
.gallery-next:hover{
    background:var(--gold);
    color:#111;
}


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

@media(max-width:992px){

    .kitchen-gallery{
        grid-template-columns:repeat(2,1fr);
    }

}


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

@media(max-width:600px){

    .kitchen-gallery{
        grid-template-columns:1fr;
        gap:12px;
    }

    .gallery-lightbox{
        padding:20px;
    }

    .gallery-prev{
        left:10px;
    }

    .gallery-next{
        right:10px;
    }

}
.process-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:25px;
    margin:35px 0 50px;
}

.process-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:30px;

    box-shadow:
        0 8px 25px rgba(7,31,74,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.process-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 15px 35px rgba(7,31,74,.14);
}

.process-number{
    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:20px;

    border-radius:50%;

    background:var(--gold);
    color:var(--navy);

    font-weight:800;
    font-size:15px;
}

.process-card h3{
    margin-bottom:12px;
}

.process-card p{
    margin-bottom:0;
}


/* MOBILE */

@media(max-width:600px){

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

}


/* ==================================================
   PRINT
================================================== */

@media print{

.site-header,
.sidebar,
.cta-section,
.site-footer{

display:none;

}

.page-layout{

display:block;

}

body{

background:#fff;

}

.content-area{

box-shadow:none;

border:none;


}


}
/* ==================================================
   HOMEPAGE SPACING FIX
================================================== */

.home-section {
    margin: 0;
    padding: 60px 0;
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.intro-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.intro-content {
    min-width: 0;
}


/* Keep homepage content close to trust bar */
.trust-bar + .page-layout {
    padding-top: 40px;
}


/* MOBILE */
@media(max-width:768px) {

    .home-section {
        padding: 40px 0;
    }

    .intro-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .trust-bar + .page-layout {
        padding-top: 25px;
    }

}
```