*{
    margin: 0;
}
body{

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

background:var(--background);

color:var(--text);

overflow-x:hidden;

line-height:1.6;

font-size:16px;

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

}
body::before{

content:'';

position:fixed;

inset:0;

background-image:
radial-gradient(
rgba(44,86,50,.03) 1px,
transparent 1px);

background-size:30px 30px;

pointer-events:none;

z-index:-1;

}
h1,h2,h3,h4{

font-weight:800;

letter-spacing:-0.04em;

line-height:.95;

}























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

.pavers-hero{

position:relative;
min-height:100vh;

display:flex;
align-items:center;

padding:100px 7%;

background:

linear-gradient(
90deg,
rgba(10,15,12,.88) 0%,
rgba(10,15,12,.55) 45%,
rgba(10,15,12,.25) 100%
),

url("/img/pavers/p\ \(2\).jpg");

background-size:cover;
background-position:center;

overflow:hidden;

}


.artificial-hero
{
   background:

linear-gradient(
90deg,
rgba(10,15,12,.88) 0%,
rgba(10,15,12,.55) 45%,
rgba(10,15,12,.25) 100%
),

url("/img/artificial/a\ \(8\).jpg");
background-size:cover;
background-position:center;

overflow:hidden;
}


.landscaping-hero
{
    background:

linear-gradient(
90deg,
rgba(10,15,12,.88) 0%,
rgba(10,15,12,.55) 45%,
rgba(10,15,12,.25) 100%
),

url("/img/artificial/a\ \(8\).jpg");
background-size:cover;
background-position:center;

overflow:hidden;
}




.hero-overlay{
   
position:absolute;
inset:0;

background:

linear-gradient(
180deg,
rgba(0,0,0,.1) 0%,
rgba(0,0,0,.35) 100%
);

}

.hero-grid{
   
position:relative;


z-index:2;
width:100%;

display:grid;

grid-template-columns:
1.2fr
.6fr;

gap:100px;

align-items:end;

}

.hero-content{
position: relative;
max-width:760px;

}

.hero-tag{

display:inline-block;

margin-bottom:30px;

font-size:.8rem;

letter-spacing:3px;

text-transform:uppercase;

color:#5BA318;

}

.hero-content h1{

font-size:
clamp(4rem,8vw,7rem);

line-height:.92;

font-weight:700;

color:white;

margin-bottom:30px;

}

.hero-content p{

max-width:620px;

font-size:1.1rem;

line-height:1.9;

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

margin-bottom:45px;

}

.hero-actions{

display:flex;
gap:20px;
flex-wrap:wrap;

}

.hero-btn{

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

padding:18px 34px;

background:#5BA318;

color:white;

text-decoration:none;

font-weight:600;

letter-spacing:1px;

transition:.4s;

}

.hero-btn:hover{

transform:translateY(-4px);

background:#4d8b14;

}

.hero-link{

display:flex;
align-items:center;

color:white;

text-decoration:none;

font-weight:600;

letter-spacing:1px;

}

.hero-link::after{

content:'↗';

margin-left:10px;

transition:.4s;

}

.hero-link:hover::after{

transform:
translate(5px,-5px);

}

.hero-side{

display:flex;
flex-direction:column;

gap:25px;

}

.hero-stat{

padding:28px 0;

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

}

.hero-stat span{

display:block;

font-size:.8rem;

letter-spacing:2px;

text-transform:uppercase;

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

margin-bottom:8px;

}

.hero-stat strong{

font-size:1.8rem;

font-weight:600;

color:white;

}

.hero-scroll{

position:absolute;

bottom:35px;
left:7%;

display:flex;
align-items:center;

gap:12px;

color:white;

font-size:.85rem;

letter-spacing:2px;

text-transform:uppercase;

z-index:5;

}

.hero-scroll span{

width:40px;
height:1px;

background:#5BA318;

}

























/* ==================================
   PAVERS INSIGHTS
================================== */

.pavers-insights{

padding:140px 7%;

background:#F7F7F2;

overflow:hidden;

}

.insights-header{

max-width:900px;

margin-bottom:90px;

}

.section-tag{

display:inline-block;

margin-bottom:20px;

font-size:.8rem;

letter-spacing:2px;

color:#5BA318;

text-transform:uppercase;

}

.insights-header h2{

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

line-height:.95;

margin-bottom:30px;

color:#111;

max-width:900px;

}

.insights-header p{

max-width:700px;

line-height:1.9;

font-size:1.05rem;

color:#666;

}

/* ==========================
   GRID
========================== */

.insights-grid{

display:grid;

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

gap:35px;

margin-bottom:120px;

}

.insight-card{

padding:40px;

background:white;

border:
1px solid rgba(0,0,0,.06);

transition:.4s;

}

.insight-card:hover{

transform:translateY(-8px);

}

.insight-card span{

display:block;

margin-bottom:15px;

font-size:.8rem;

font-weight:700;

color:#5BA318;

}

.insight-card h3{

font-size:1.8rem;

margin-bottom:15px;

line-height:1.1;

color:#111;

}

.insight-card p{

line-height:1.8;

color:#666;

}

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

.feature-highlight{

grid-column:span 2;

display:grid;

grid-template-columns:
1fr
1fr;

background:#0E1610;

}

.feature-image img{

width:100%;
height:100%;

object-fit:cover;

display:block;

}

.feature-content{

padding:70px;

display:flex;
flex-direction:column;
justify-content:center;

}

.feature-content span{

color:#5BA318;

font-size:.8rem;

letter-spacing:2px;

margin-bottom:20px;

}

.feature-content h3{

font-size:3rem;

line-height:1;

margin-bottom:25px;

color:white;

}

.feature-content p{

line-height:1.9;

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

}

/* ==========================
   FACTS
========================== */

.facts-section{

display:grid;

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

gap:30px;

}

.fact-item{

padding-top:30px;

border-top:
1px solid rgba(0,0,0,.08);

}

.fact-item span{

display:block;

margin-bottom:15px;

font-size:.8rem;

letter-spacing:2px;

color:#5BA318;

text-transform:uppercase;

}

.fact-item h4{

font-size:1.3rem;

line-height:1.4;

font-weight:500;

color:#111;

}

























/* ==========================
   IMMERSIVE GALLERY
========================== */

.immersive-gallery{

padding:140px 7%;

background:#fff;

overflow:hidden;

}

.gallery-header{

max-width:850px;

margin-bottom:90px;

}

.gallery-header h2{

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

line-height:.95;

margin-bottom:25px;

color:#111;

}

.gallery-header p{

max-width:650px;

line-height:1.9;

color:#666;

}

/* ==========================
   LAYOUT
========================== */

.gallery-layout{

display:grid;

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

grid-auto-rows:90px;

gap:24px;

}

/* ==========================
   ITEMS
========================== */

.gallery-item{

position:relative;

overflow:hidden;

cursor:pointer;

background:#eee;

}

.gallery-item img{

width:100%;
height:100%;

object-fit:cover;

transition:
transform 1.2s cubic-bezier(.22,1,.36,1);

}

/* HERO */

.hero-image{

grid-column:1 / span 12;

grid-row:span 7;

}

/* SQUARE */

.square{

grid-column:span 4;

grid-row:span 4;

}

/* VERTICAL */

.vertical{

grid-column:span 4;

grid-row:span 6;

}

/* WIDE */

.wide{

grid-column:span 8;

grid-row:span 4;

}

/* ==========================
   HOVER
========================== */

.gallery-item::before{

content:'';

position:absolute;

inset:0;

background:

linear-gradient(
180deg,
transparent,
rgba(0,0,0,.25)
);

opacity:0;

transition:.5s;

z-index:2;

}

.gallery-item:hover::before{

opacity:1;

}

.gallery-item:hover img{

transform:scale(1.08);

}
.gallery-item{

position:relative;

overflow:hidden;

cursor:pointer;

}

.gallery-item img{

transition:1.4s cubic-bezier(.22,1,.36,1);

}

.gallery-item:hover img{

transform:scale(1.08);

}

.gallery-item figcaption{

position:absolute;

left:24px;
bottom:24px;

z-index:2;

display:flex;
flex-direction:column;
gap:6px;

}

.gallery-item figcaption span{

background:rgba(91,163,24,.92);

padding:10px 14px;

font-size:.75rem;

letter-spacing:1px;

text-transform:uppercase;

color:white;

backdrop-filter:blur(10px);

}

.gallery-item figcaption h3{

font-size:1.6rem;

color:white;

max-width:300px;

}

.gallery-item::after{

content:'';

position:absolute;

inset:0;

background:
linear-gradient(
180deg,
transparent 35%,
rgba(0,0,0,.75)
);

}

/* =====================
   BOTTOM STRIP
===================== */

.gallery-bottom{

margin-top:80px;

display:grid;

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

gap:30px;

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

padding-top:50px;

}

.gallery-stat{

display:flex;
flex-direction:column;
gap:8px;

}

.gallery-stat strong{

font-size:1.4rem;

color:#fff;

font-weight:600;

}

.gallery-stat span{

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

}
.concrete-hero{
    background:
    linear-gradient(
        90deg,
        rgba(10,15,12,.88) 0%,
        rgba(10,15,12,.56) 45%,
        rgba(10,15,12,.25) 100%
    ),
    url("/img/concrete/c\ \(9\).jpg");

    background-size:cover;
    background-position:center;
}

.concrete-hero .hero-tag{
    color:#5BA318;
}

.concrete-hero .hero-btn{
    background:#5BA318;
}

.concrete-hero .hero-btn:hover{
    background:#477e13;
}





























/* ==========================
   HARDSCAPE SHOWCASE
========================== */

.hardscape-showcase{

padding:140px 7%;

background:#F7F7F2;

overflow:hidden;

}

.hardscape-heading{

max-width:900px;

margin-bottom:90px;

}

.hardscape-heading h2{

font-size:clamp(3rem,6vw,5.5rem);

line-height:.95;

margin:20px 0;

}

.hardscape-heading p{

max-width:700px;

line-height:1.9;

color:#666;

}

/* ==========================
   APPLICATIONS
========================== */

.application-showcase{

display:grid;

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

gap:24px;

margin-bottom:120px;

}

.application-card{

position:relative;

height:320px;

overflow:hidden;

cursor:pointer;

}

.application-card.large{

grid-row:span 2;

height:664px;

}

.application-card img{

width:100%;
height:100%;

object-fit:cover;

transition:1.2s;

}

.application-card:hover img{

transform:scale(1.08);

}

.card-content{

position:absolute;

left:30px;
bottom:30px;

z-index:2;

color:white;

}

.card-content span{

display:block;

margin-bottom:10px;

color:#5BA318;

font-weight:700;

}

.card-content h3{

font-size:1.8rem;

}

.application-card::after{

content:'';

position:absolute;

inset:0;

background:
linear-gradient(
180deg,
transparent,
rgba(0,0,0,.65)
);

}

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

.services-ecosystem{

margin-bottom:120px;

}

.services-title h3{

font-size:2rem;

margin-bottom:40px;

}

.services-grid{

display:flex;

flex-wrap:wrap;

gap:14px;

}

.service-pill{

padding:16px 22px;

background:white;

border:1px solid rgba(0,0,0,.08);

transition:.4s;

cursor:pointer;

}

.service-pill:hover{

transform:translateY(-4px);

border-color:#5BA318;

}

/* ==========================
   FACTS
========================== */

.hardscape-facts{

display:grid;

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

gap:40px;

}

.fact-box{

padding-top:30px;

border-top:1px solid rgba(0,0,0,.08);

}

.fact-box span{

display:block;

margin-bottom:15px;

font-size:.8rem;

letter-spacing:2px;

color:#5BA318;

}

.fact-box h4{

font-size:1.4rem;

line-height:1.5;

font-weight:500;

}


















@media(max-width:1200px){
.application-showcase{

grid-template-columns:1fr 1fr;

}

.application-card.large{

grid-row:auto;

height:450px;

grid-column:span 2;

}

.hardscape-facts{

grid-template-columns:1fr;

}


.solutions-grid{

grid-template-columns:1fr;

}

.showcase-image{

height:550px;

order:-1;

}

}

@media(max-width:992px){
.gallery-layout{

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

grid-auto-rows:250px;

}

.hero-image,
.square,
.vertical,
.wide{

grid-column:auto;
grid-row:auto;

}

.insights-grid{

grid-template-columns:1fr;

}

.feature-highlight{

grid-column:auto;

grid-template-columns:1fr;

}

.facts-section{

grid-template-columns:1fr;

}

.feature-content{

padding:50px;

}

.hero-grid{

grid-template-columns:1fr;

gap:60px;

}

.hero-side{

flex-direction:row;

flex-wrap:wrap;

}

.hero-stat{

flex:1;

min-width:180px;

}

}

@media(max-width:768px){
.hardscape-showcase{

padding:100px 24px;

}

.application-showcase{

grid-template-columns:1fr;

}

.application-card,
.application-card.large{

height:320px;

grid-column:auto;

}

.services-grid{

gap:10px;

}

.service-pill{

width:100%;

text-align:center;

}
.paver-solutions{

padding:100px 24px;

}

.solutions-header h2{

font-size:2.8rem;

}

.showcase-image{

height:420px;

}

.application-item h3{

font-size:1.3rem;

}

.service-tag{

width:100%;

text-align:center;

}
.immersive-gallery{

padding:100px 24px;

}

.gallery-header h2{

font-size:2.8rem;

}

.gallery-layout{

grid-template-columns:1fr;

grid-auto-rows:280px;

}

.pavers-insights{

padding:100px 24px;

}

.insights-header h2{

font-size:2.8rem;

}

.insight-card{

padding:30px;

}

.feature-content h3{

font-size:2.2rem;

}

.pavers-hero{

padding:
0px 24px
;

}

.hero-content h1{

font-size:3.3rem;

}

.hero-content p{

font-size:1rem;

line-height:1.8;

}

.hero-actions{

flex-direction:column;

}


.hero-side{

display:none;

}

.hero-scroll{

left:24px;

}

}