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

:root{

    /* Brand Colours */
    --brand-primary:#0B6623;
    --brand-primary-dark:#084817;
    --brand-primary-light:#128033;

    --brand-bg:#D9DDDC;
    --brand-white:#ffffff;

    /* Text */
    --text-main:#1E2421;
    --text-muted:#5C6460;
    --text-light:#ffffff;

    /* UI */
    --border-soft:rgba(11,102,35,.14);

    --shadow-sm:
    0 8px 24px rgba(0,0,0,.06);

    --shadow-md:
    0 18px 45px rgba(0,0,0,.10);

    --shadow-lg:
    0 30px 70px rgba(0,0,0,.14);


    /* Shape */
    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:24px;


    /* Layout */
    --container:1200px;


    /* Animation */
    --transition:
    all .25s ease;

}



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

*,
*::before,
*::after{
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    margin:0;

    padding:0;

    background:var(--brand-bg);

    color:var(--text-main);

    font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;

    line-height:1.7;

    -webkit-font-smoothing:antialiased;

}


img{

    max-width:100%;

    display:block;

}


a{

    text-decoration:none;

    color:inherit;

}


button{

    font-family:inherit;

}



/* =========================================================
   GLOBAL CONTAINER
========================================================= */


.container{

    width:min(92%, var(--container));

    margin-inline:auto;

}

/* =========================================================
   TYPOGRAPHY SYSTEM
========================================================= */
h1,
h2,
h3{
    margin-top:0;
    color:var(--text-main);
    line-height:1.15;
    letter-spacing:-0.035em;
}


h1{
    font-size:
    clamp(2.6rem,5vw,4.5rem);
    font-weight:900;
}


h2{
  font-size:
    clamp(2rem,3vw,3rem);
    font-weight:850;
    margin-bottom:28px;
}


h3{
    font-size:1.35rem;
    font-weight:800;
}



p{
    font-size:1.05rem;
    color:var(--text-muted);
    max-width:70ch;
}



/* =========================================================
   SECTIONS
========================================================= */
.section{
    padding:100px 0;
}


.section + .section{
    border-top:
    1px solid rgba(0,0,0,.04);
}



/* =========================================================
   HEADER
========================================================= */
.site-header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:
    22px clamp(20px,5vw,60px);
    background:
    rgba(217,221,220,.85);
    backdrop-filter:
    blur(12px);
    border-bottom:
    1px solid rgba(0,0,0,.08);
}



/* Brand */
.site-brand a{
 font-size:1.15rem;
    font-weight:900;
    letter-spacing:-.02em;
    color:var(--brand-primary);
}



/* =========================================================
   MENU BUTTON
========================================================= */
.menu-toggle{
    width:46px;
    height:46px;
    border-radius:50%;
    border:none;
    background:
    var(--brand-primary);
    color:white;
    font-size:1.4rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:
    var(--transition);
}



.menu-toggle:hover{
background:
    var(--brand-primary-dark);
    transform:
    translateY(-2px);
}



/* =========================================================
   SIDE MENU
========================================================= */


.side-menu{

    position:fixed;
    top:0;
    right:-420px;
    width:min(90%,400px);
    height:100vh;
    background:white;
    z-index:1200;
    padding:90px 35px;
    display:flex;
    flex-direction:column;
    gap:18px;
    box-shadow:
    var(--shadow-lg);
    transition:
    .35s ease;
}



.side-menu.active{

    right:0;

}



.side-menu a,
.side-menu summary{
 font-weight:700;
    font-size:1.05rem;
    cursor:pointer;
}



.side-menu details{

    border-bottom:

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

    padding-bottom:15px;

}



.side-menu details a{

    display:block;

    padding:10px 0 10px 15px;

    font-size:.95rem;

    color:var(--text-muted);

}



/* Close button */


.menu-close{

    position:absolute;

    top:25px;

    right:25px;


    border:none;

    background:none;


    font-size:2rem;

    cursor:pointer;

}



/* =========================================================
   MENU OVERLAY
========================================================= */


.menu-overlay{

    position:fixed;

    inset:0;


    background:

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


    opacity:0;

    pointer-events:none;


    transition:
    .3s ease;


    z-index:1100;

}



.menu-overlay.active{

    opacity:1;

    pointer-events:auto;

}



/* =========================================================
   BUTTON SYSTEM
========================================================= */


.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:
    15px 32px;
    margin-bottom: 75px;

    border-radius:
    999px;

    background:
    var(--brand-primary);
    color:white;
    font-size:1rem;
    font-weight:800;
    letter-spacing:-.01em;
    transition:
    var(--transition);
    box-shadow:
    0 12px 30px rgba(11,102,35,.25);

}



.btn:hover{
    background:
    var(--brand-primary-dark);
    transform:
    translateY(-3px);
    box-shadow:
    0 18px 40px rgba(11,102,35,.35);

}



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

.hero{

    position:relative;
    min-height:900px;
    display:flex;
    align-items:center;
    overflow:hidden;
    isolation:isolate;

}



.hero-bg{

    position:absolute;

    inset:0;


    width:100%;

    height:100%;


    object-fit:cover;


    z-index:-2;

}



.hero-overlay{

    position:absolute;

    inset:0;


    background:

    linear-gradient(

        90deg,

        rgba(0,0,0,.72),

        rgba(0,0,0,.35)

    );


    z-index:-1;

}



.hero-content{


    max-width:760px;


    padding-top:100px;


}



.hero h1{


    color:white;


    margin-bottom:30px;


    text-wrap:balance;


}



.hero p{


    color:

    rgba(255,255,255,.88);


    font-size:

    clamp(1.05rem,2vw,1.25rem);


    max-width:650px;


    margin-bottom:18px;


}



.hero .btn{

    margin-top:25px;

}



/* =========================================================
   TRUST BAR
========================================================= */
.trust-bar{

    width:min(92%,1100px);
    margin:-60px auto 0;

    position:relative;
    z-index:5;
    background:white;
    border-radius:
    var(--radius-lg);
    padding:
    30px 40px;
    display:grid;
    grid-template-columns:
    repeat(4,1fr);
    gap:25px;
    box-shadow:
    var(--shadow-md);
}

@media(max-width:768px) {

 .trust-bar{
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 20px;
   padding-bottom: 20px;
  
 }

}

.trust-item{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-weight:750;
    color:
    var(--text-main);
    font-size:.95rem;
}

@media(max-width: 768px){

    .trust-item{
        font-size: 13px;

    }
}


.trust-item::first-letter{


    color:

    var(--brand-primary);

}



/* =========================================================
   LOCAL TRUST SECTION
========================================================= */


.local-trust-section{


    padding:

    110px 0 80px;


}



.local-trust-section h2{


    text-align:center;


}



.trust-stars{


    text-align:center;


    color:

    #D99A00;


    font-size:2rem;


    letter-spacing:5px;


    margin-bottom:45px;


}



/* Location Grid */


.local-grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:20px;


}



.location-box{


    background:white;


    padding:

    28px 20px;


    border-radius:

    var(--radius-md);


    text-align:center;


    font-weight:800;


    color:

    var(--brand-primary);


    border:

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


    box-shadow:

    var(--shadow-sm);


    transition:

    var(--transition);

}



.location-box:hover{


    transform:

    translateY(-5px);


    box-shadow:

    var(--shadow-md);


}



/* =========================================================
   GENERAL CONTENT SECTIONS
========================================================= */


.section > .container > h2{


    max-width:

    850px;


}



.section > .container > p{


    margin-bottom:22px;


}



.section .btn{


    margin-top:20px;


}



/* =========================================================
   PROCESS  IMAGE GRID
========================================================= */

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



.process-card{
    background:white;
    border-radius:
    var(--radius-lg);
    overflow:hidden;
    box-shadow:
    var(--shadow-sm);
    border:
    1px solid rgba(0,0,0,.06);
    transition:

    var(--transition);

}



.process-card:hover{


    transform:

    translateY(-8px);


    box-shadow:

    var(--shadow-md);


}



.process-card img{


    width:100%;


    height:240px;


    object-fit:cover;


}



.process-card h3{


    padding:

    25px 25px 10px;


}



.process-card p{


    padding:

    0 25px 30px;


}



/* =========================================================
   GENERIC CARD SYSTEM
========================================================= */


.card{


    background:white;


    border-radius:

    var(--radius-lg);


    padding:40px;


    box-shadow:

    var(--shadow-sm);


    border:

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


}



/* =========================================================
   IMAGE FEATURE SECTIONS
========================================================= */


.image-overlay-section{


    position:relative;


    min-height:

    600px;


    display:flex;


    align-items:center;


    overflow:hidden;


}



.section-bg-image{


    position:absolute;


    inset:0;


    width:100%;


    height:100%;


    object-fit:cover;


}



.section-bg-overlay{


    position:absolute;


    inset:0;


    background:

    linear-gradient(

        90deg,

        rgba(0,0,0,.75),

        rgba(0,0,0,.35)

    );


}



.section-overlay-content{
    position:relative;
    z-index:2;

}

.section-overlay-content h2{
    color:white
}

.section-overlay-content h3{
    color: #10a337;
    font-weight: 1000;
    
}

.section-overlay-content p{
    color:
    rgba(255,255,255,.88);

}


/* =========================================================
   WHY US SECTION
========================================================= */


.why-us-section{


    background:

    rgba(255,255,255,.35);


}



.why-us-container{


    background:white;


    padding:

    50px;


    border-radius:

    var(--radius-lg);


    box-shadow:

    var(--shadow-sm);


}



.why-us-list{


    padding:0;


    margin:0;


    list-style:none;


    display:grid;


    grid-template-columns:

    repeat(2,1fr);


    gap:18px;


}



.why-us-list li{


    padding:

    18px;


    background:

    var(--brand-bg);


    border-radius:

    var(--radius-sm);


    font-weight:700;


}


.why-us-list li::before{

    content:"✓";
    color:
    var(--brand-primary);
    margin-right:10px;
    font-weight:900;

}







/* =========================================
SUPPORTED STRUCTURES
========================================= */

.supported-structures-section{

background:#f8fbf8;

}

.supported-intro{

max-width:760px;

margin:0 auto 45px;

text-align:center;

}

.supported-grid{

display:grid;

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

gap:18px;

margin-top:35px;

}

.supported-item{

background:#fff;

border:1px solid rgba(11,102,35,.12);

border-left:5px solid #0B6623;

padding:18px 20px;

border-radius:12px;

font-weight:600;

font-size:1rem;

text-align:left;

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

transition:.25s ease;

}

.supported-item:hover{

transform:translateY(-4px);

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

}


/* =========================================
STRUCTURE GALLERY
========================================= */

.structure-gallery{

display:grid;

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

gap:24px;

}

.structure-gallery img{

width:100%;

height:360px;

object-fit:cover;

border-radius:18px;

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

transition:.3s ease;

}

.structure-gallery img:hover{

transform:scale(1.02);

}


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

@media(max-width:768px){

.supported-grid{

grid-template-columns:1fr;

}

.structure-gallery{

grid-template-columns:1fr;

gap:18px;

}

.structure-gallery img{

height:250px;

}

}

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

.site-footer{
background:#151515;
color:#fff;
margin-top:90px;
padding-top:60px;

}

.footer-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:50px;
padding-bottom:45px;

}

.footer-column h3{
font-size:1rem;
font-weight:700;
color:#ffffff;
margin-bottom:18px;

}

.footer-column a{
display:block;
margin-bottom:12px;
color:rgba(255,255,255,.68);
text-decoration:none;
font-size:.95rem;
transition:.2s ease;

}

.footer-column a:hover{

color:#ffffff;

}

.footer-bottom{
padding:22px 0;
text-align:center;

}

.footer-bottom p{
margin:0;
font-size:.9rem;
color:rgba(255,255,255,.45);

}

/* Mobile */
@media(max-width:768px){
.footer-grid{
grid-template-columns:1fr;
gap:35px;
text-align:center;
}
}

/* =========================================
PROJECT SHOWCASE
========================================= */
.project-showcase{
padding:30px 0 20px;
}

.project-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}

.project-grid img{
width:100%;
aspect-ratio:16/10;
object-fit:cover;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.25s ease;
}

.project-grid img:hover{
transform:translateY(-3px);
box-shadow:0 18px 40px rgba(0,0,0,.12);
}

@media(max-width:768px){
.project-grid{
grid-template-columns:1fr;
gap:14px;
}
}

/* =========================================
AREAS WE COVER
========================================= */

.areas-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin-top:40px;
}

.areas-grid a{
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:22px 18px;
background:#ffffff;
border:1px solid rgba(11,102,35,.12);
border-radius:14px;
box-shadow:0 8px 22px rgba(0,0,0,.05);
font-weight:700;
font-size:1rem;
color:var(--secondary);
text-decoration:none;
transition:.22s ease;
}

.areas-grid a:hover{
background:var(--secondary);
color:#ffffff;
transform:translateY(-3px);
box-shadow:0 16px 35px rgba(0,0,0,.10);
}

@media(max-width:900px){
.areas-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:600px){
.areas-grid{
grid-template-columns:1fr;
gap:14px;

}

.areas-grid a{
padding:18px;
font-size:.95rem;
}
}

/* =========================================
RECENT PROJECT SHOWCASE
========================================= */

.project-showcase-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
margin-top:40px;
}

.project-showcase-grid img{
width:100%;
aspect-ratio:16/10;
object-fit:cover;
display:block;
border-radius:14px;
box-shadow:0 10px 28px rgba(0,0,0,.08);
transition:.25s ease;

}

.project-showcase-grid img:hover{
transform:translateY(-3px);
box-shadow:0 18px 40px rgba(0,0,0,.12);

}

@media(max-width:768px){
.project-showcase-grid{
grid-template-columns:1fr;
gap:16px;
}

.project-showcase-grid img{
aspect-ratio:auto;
height:240px;
border-radius:12px;
}

}

/* =========================
   SIDE MENU
========================= */

.side-menu{
position:fixed;
top:0;
left:-320px;
width:300px;
height:100vh;
padding:28px;
background:#fff;
overflow-y:auto;
z-index:1001;
transition:left .28s ease;
border-right:4px solid #0B6623;
box-shadow:10px 0 30px rgba(0,0,0,.08);
}

.side-menu.active{
left:0;
}

.menu-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
opacity:0;
visibility:hidden;
transition:.25s;
z-index:1000;
}

.menu-overlay.active{
opacity:1;
visibility:visible;
}

.menu-close{
background:none;
border:none;
font-size:34px;
font-weight:300;
color:#0B6623;
cursor:pointer;
padding:0;
margin-bottom:20px;
}

.side-menu::before{
content:"Concrete Base Milton Keynes";
display:block;
font-size:20px;
font-weight:700;
color:#0B6623;
padding-bottom:20px;
margin-bottom:20px;
border-bottom:2px solid #eef3ef;
}

.side-menu a{
display:block;
padding:14px 0;
text-decoration:none;
color:#1f1f1f;
font-weight:600;
border-bottom:1px solid #ececec;
transition:.2s ease;
}

.side-menu a:hover{
color:#0B6623;
padding-left:8px;
}

.side-menu details{
padding:8px 0;
border-bottom:1px solid #ececec;
}

.side-menu summary{
list-style:none;
cursor:pointer;
font-weight:700;
padding:10px 0;
}

.side-menu summary::-webkit-details-marker{
display:none;
}

.side-menu details a{
padding-left:14px;
font-weight:500;
border-bottom:none;
}

.side-menu details a:hover{
padding-left:22px;
}



/* =========================================
FLOATING CALL CTA
========================================= */

.call-cta{
position:fixed;
top:50%;
right:-165px;
transform:translateY(-50%);

z-index:999;

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

width:230px;
height:54px;

background:#0B6623;
color:#fff;

font-weight:700;
font-size:.95rem;

text-decoration:none;

border-radius:12px 0 0 12px;

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

transition:right .25s ease;
}

.call-cta:hover{
right:0;
}

@media (max-width:768px){

.call-cta{

top:auto;
bottom:18px;

left:50%;
right:auto;

transform:translateX(-50%);

width:90%;
max-width:360px;

height:52px;

border-radius:12px;

font-size:.9rem;

}

.call-cta:hover{

right:auto;

}

}

/* Internal linking */
.internal-linking{
    color: #087a08;
    font-weight: 700;
}

.btm-cta{
    text-align: center;
}


.hero{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  overflow:hidden;
  color:#fff;
}

.hero-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.4);
}

.hero-content{
  position:relative;
  z-index:1;
  width:100%;
  max-width:760px;
  margin:0 auto;
  margin-top: 5%;
  padding:70px 20px;
}

@media(max-width:768px){

  .hero{
    min-height:600px;
  }

  .hero-content{
    padding:60px 20px;
    margin-top: 12%;
  }

  .hero-overlay{
    background:rgba(0,0,0,.5);
  }
}




.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
}


.contact-form-box,
.contact-info-box{

background:var(--brand-white);
padding:35px;
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);

}


.contact-form{

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

}


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

padding:14px;
border-radius:var(--radius-sm);
border:1px solid var(--border-soft);
font-family:inherit;
font-size:16px;

}


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

outline:none;
border-color:var(--brand-primary);

}



@media(max-width:768px){

.contact-grid{

grid-template-columns:1fr;

}

}