/* ========================
   RESET / GLOBAL
   ======================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: "Figtree", sans-serif;
 font-optical-sizing: auto;
  scroll-behavior: smooth;
}

body {
  color: #121212;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,h2,h3,h4,h5{
   font-style: italic;
   text-transform: capitalize;
}

p{margin-bottom: 1em;}

/* BUTTONS */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: #528edd;
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
  transition: background 0.2s ease;
}
.btn:hover { background: #16265b; }

.btn.green
{
  background:#231f20;
}


/* ========================
   HEADER
   ======================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  padding:1em 0 0.5em 0;
  border-bottom:solid #528edd 10px;
  text-transform: uppercase;
}

/* TOP BAR */

.top-bar {
  display:flex;
  align-items: center;
  justify-content: center;
  padding: 1em 0;
  font-size: 1rem;
}

.top-bar a {
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 margin:0 2px;
 color:#231f20;
}

.top-bar a:hover {
  text-decoration: underline;
}

/* MAIN NAV CONTAINER */
.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* LOGO */
.logo {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  max-width:110px;
}
.logo img{width:100%; height:auto;}

/* MAIN NAV */
.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.2rem;
}

.main-nav a {
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  color:#231f20;
  transition:color 0.3s ease;
  }

  .main-nav a:hover{
  color:#528edd;
  }

/* ========================
   BURGER BUTTON
   ======================== */
.burger {
  display: none;
  width: 32px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1100;
}

.burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: #000;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 10px; }
.burger span:nth-child(3) { top: 20px; }

.burger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* ========================
   HERO SECTION
   ======================== */
   .hero-slider-holder{
     height: 60vh;
      background:#000;
      border-bottom:solid 10px #528edd;
      padding:0;
   }

   .hero-slider {
   position: relative;
   height: 100%;
   width:100%;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   padding:0;
 }

 .hero-slide {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   opacity: 0;
   transform: scale(1);
   transition:
     opacity 1.5s ease-in-out,
     transform 6s linear; /* smooth zoom */
   will-change: transform, opacity;
 }

 .hero-slide:after{
   content: "";
   top:0;left:0;
   display: block;
   position: absolute;
   width:100%;
   height:100%;
   background:rgba(0,0,0,0.25);
 }

 .hero-slide.active {
   opacity: 1;
   transform: scale(1.2); /* zoom happens only once */
 }



   /* Continuous Ken Burns zoom effect */
   @keyframes zoom {
     0%   { transform: scale(1); }
     100% { transform: scale(1.2); }
   }

   .hero-content-holder{
     width:60%;
     max-width: 1400px;
     margin:auto;
     display: flex;
     align-items:center;
     justify-content: flex-start;
   }
   .hero-content {
     position: relative;
     z-index: 2;
     text-align: left;
     max-width: 840px;
     padding: 2rem;
     color: #fff;
   }

   .hero-content h1 { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; line-height:1.2em; }
   .highlighttext{color:#528edd!important;}
   .hero-content p { font-size: 1.2rem; margin-bottom: 2rem; }


   /* ========================
      HOMEPAGE HIGHLIGHTS
      ======================== */
      .highlights{margin-top:-15vh;position: relative; z-index: 3;}
      .card-link {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        text-decoration: none;
        color: inherit;
      }

      .card-link:focus-visible {
        outline: 2px solid #005fcc;
        outline-offset: 4px;
      }
/* ========================
   SECTIONS
   ======================== */
section {
  padding: 4rem 2rem;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
}

section h2 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2.5rem;
}

.welcome_section
{
  max-width:980px;
  margin:1em auto 3em auto;
  color:#121212;
  font-size: 1.3em;
  text-align: center;
}

.welcome_section h3{color:#528edd; text-transform: uppercase; font-size: 1.2em; margin-bottom:1em; font-weight:bold;}

.welcome_section h2{color:#231f20; font-size: 2em; margin-bottom: 0.2em!important;}
/* ========================
   GRID / CARDS
   ======================== */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.card {
  display: grid;        /* or flex */
  grid-template-rows: auto 1fr;
  text-decoration: none;
  color: inherit;
  height: 100%;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.2s ease;
  position: relative;
}

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

.card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.card-content {
  position: absolute;
  padding: 1.5rem;
  bottom:0; left:0;
  background:rgba(0,0,0,0.5);
  color:#fff;
  text-align: center;
}

.card-content h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.card-content p {
  font-size: 1rem;
}


   /* ========================
      HOMEPAGE CONTENT SECTION
      ======================== */
      /* Base styles */

      .content-section {
        width: 100%;
        padding: 3rem 1rem;
        background: #fff;
        color: var(--primary-black);
      }

      .content-wrapper {
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        display: flex;
        align-items: center;
        gap: 2rem;
        flex-wrap: wrap;
      }

      /* Image wrapper with decorative shape */
      .image-wrapper {
        position: relative;
        flex: 1 1 60%;
        min-width: 300px;
        overflow: visible;
      }

      .image-wrapper img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 4px;
        position: relative;
        z-index: 2;
        box-shadow: 0 6px 15px rgb(0 0 0 / 0.1);
      }

      /* Decorative shapes behind images */

      .decor-shape {
        position: absolute;
        bottom: -40px;
        left: -50px;
        width: 100px;
        height: 100px;
        z-index: 1;
        opacity: 0.8;
        pointer-events: none;
        background-image: url("../images/logo_min.png");
        background-size: contain;      /* keeps proportions */
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 0;              /* remove if you don't want rounded corners */
      }


      /* Text box overlapping image */

      .text-box {
        flex: 1 1 35%;
        background: white;
        padding: 2.5rem 3rem;
        box-shadow: 0 10px 20px rgb(0 0 0 / 0.15);
        border-radius: 4px;
        position: relative;
        z-index: 10;
        max-width: 480px;
        transition: transform 0.3s ease;
        color:#121212;
      }

      /* Positioning text box offset to left or right */

      .left-offset .text-box {
        margin-left: -100px;
      }

      .right-offset {
        flex-direction: row-reverse;
      }

      .right-offset .text-box {
        margin-right: -100px;
        margin-left: 0;
      }

      /* Icon styling */

      .icon {
        font-size: 2rem;
        width: 24px;
        height: 24px;
        line-height: 24px;
        stroke: currentColor;
        text-align: center;
      }

      .uk-icon {
        width: 26px;
        height: 30px;
        background-image: url("../images/logo_min.png");
        background-size: contain;      /* keeps proportions */
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 0;
        display:inline-block;
      }

      .orange-icon {
        background-color: #f48024;
      }

      /* Typography */

      .text-box h3 {
        font-size: 1.7rem;
        font-weight: 900;
        margin-bottom: 1rem;
        color: #111;
        display: inline-block;
        margin-top:-0.5em;
      }

      .text-box p {
        font-size: 1rem;
        line-height: 1.5;
        color: #444;
      }

      /* Responsive */

      @media (max-width: 900px) {
        .content-wrapper {
          flex-direction: column;
          gap: 1.5rem;
        }
        .text-box {
          margin: 0;
          max-width: 100%;
        }
        .right-offset {
          flex-direction: column;
        }
      }


/* TESTIMONIALS *************** */

.testimonials {
  position: relative;
  background: linear-gradient(to bottom, #231f20 0%, #231f20 100%);
  padding: 120px 20px;
  color: #ffffff;
  overflow: hidden;
  border-top:10px solid #528edd;
  border-bottom:10px solid #fff;
}

.wave-top,
.wave-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 80px;
  overflow: hidden;
  line-height: 0;
}

.wave-top {
  top: 0;
}

.wave-bottom {
  bottom: 0;
}

.wave-top svg,
.wave-bottom svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wave-top path,
.wave-bottom path {
  fill: #ffffff;
  opacity: 0.2;
}

.testimonials-container {
  max-width: 1100px;
  margin: auto;
  position: relative;
  z-index: 2;
}

.section-header {
  text-align: center;
  margin-bottom: 70px;
}

.section-tag {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.section-header h2 {
  font-size: 44px;
  margin: 15px 0;
}

.section-header p {
  font-size: 18px;
  opacity: 0.95;
}

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

.testimonial-card {
  position: relative;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  padding: 45px 35px;
  backdrop-filter: blur(8px);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.quote-mark {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 120px;
  color: rgba(255, 255, 255, 0.15);
  line-height: 1;
  pointer-events: none;
}

.stars {
  text-align: center;
  font-size: 30px;
  letter-spacing: 5px;
  margin-bottom: 25px;
  color:#528edd;
}

.testimonial-text {
  font-size: 16px;
  line-height: 1.9;
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .section-header h2 {
    font-size: 32px;
  }

  .testimonials {
    padding: 100px 20px;
  }
}





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

============================= */

.about {
  padding: 100px 0;
  border-bottom:10px solid #fff;
  border-top:10px solid #528edd;
}

.container {
  width: 1200px;
  max-width: 95%;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 80px;
}

/* LEFT IMAGES */
.about-images {
  position: relative;
  flex: 1;
}

.img-large {
  width: 100%;
  border-radius: 4px;
  display: block;
}

.img-small {
  position: absolute;
  bottom: -60px;
  left: -50px;
  width: 200px;
}

/* RIGHT CONTENT */
.about-content {
  flex: 1;
}

.tag {
  display: inline-block;
  background: #528edd;
  color: #fff;
  padding: 8px 22px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 25px;
}

.about-content h2 {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 25px;
}

.about-content p {
  font-size: 18px;
  color: #ababab;
  line-height: 1.7;
  margin-bottom: 30px;
}

/* CUSTOM BULLETS */
section ul {
  list-style: none;
  margin-bottom: 40px;
}

section li {
  position: relative;
  padding-left: 40px;
  margin-bottom: 18px;
  font-weight: 600;
  font-size: 18px;
}

section li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  background: #528edd;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* BUTTON */
.btn {
  display: inline-flex;
  align-items: center;
  background: #231f20;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 18px 30px;
  gap: 25px;
  transition: 0.3s ease;
  text-transform: uppercase;
  border:solid 2px #fff;
}

.btn .arrow {
  background: #fff;
  color: #231f20;
  padding: 8px 14px;
  font-size: 18px;
  font-weight: bold;
}

.btn:hover {
  background: #528edd;
}


.text-box .btn{
  padding: 12px 20px;
}

.btn:hover {
  background: #528edd;
}
.btn:hover .arrow {
  color:#528edd;
}

/* ============================================================
   ABOUT US
   ============================================================ */
   :root {
       --primary-black: #000000;
       --accent-red: #528edd;
       --text-gray: #777777;
       --bg-light: #f9f9f9;
       --container-width: 1140px;
   }

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

   /* --- Helper Classes --- */
   .ccontainer { max-width: var(--container-width); margin: 0 auto; padding: 0 20px;}
   .section-padding { padding: 100px 0; }
   .section-padding-smbot { padding: 50px 0 0px 0; }
   .text-center { text-align: center; }
   .section-sub { font-size: 11px; letter-spacing: 3px; color: #999; margin-bottom: 15px; display: block; text-transform: uppercase; }

   /* --- Animations --- */
   .slide-left { opacity: 0; transform: translateX(-60px); transition: 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
   .slide-right { opacity: 0; transform: translateX(60px); transition: 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
   .active { opacity: 1; transform: translateX(0); }


   /* --- Hero Section --- */
   .hero_sm {
       height: 400px;
       display: flex;
       align-items: center;
       justify-content: center;
       color: #fff;
       text-align: center;
   }
   .hero_nopix{height:200px;}
   .hero_sm h1 { font-size: 54px; letter-spacing: 4px; margin-bottom: 10px; }
   .breadcrumbs { font-size: 14px; font-weight: 400; }
   .breadcrumbs span { color: var(--accent-red); }

   /* --- Intro Section --- */
   .intro-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }
   .intro-content h2 { font-size: 34px; margin-bottom: 25px; position: relative; padding-bottom: 20px; line-height: 1.2; text-align:left;}
   .intro-content h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 50px; height: 2px; background: var(--accent-red); }
   .intro-image img{border-radius: 8px;}

   /* --- OFFSET PHILOSOPHY SECTION --- */
   .offset-wrapper { display: flex; align-items: flex-start; margin-top: 60px; padding:0; }
   .offset-wrapper-half{width:60%; margin:60px auto 0 auto;}

   .philo-black-box {
       background: #fff;
       width: 60%;
       padding: 100px 80px 180px 10%;
       z-index: 1;
       border-radius: 8px;
   }
   .philo-black-box h2 { font-size: 42px; line-height: 1.1; margin-bottom: 20px; color: var(--primary-black) }
   .red-line { width: 40px; height: 2px; background: var(--accent-red); margin-bottom: 45px; }

   .acc-item { margin-bottom: 25px; }
   .acc-trigger { color: var(--accent-red); font-weight: 700; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 10px; margin-bottom: 15px; text-transform: uppercase; }
   .acc-content { padding-left: 25px; max-width: 480px; color:var(--primary-black) }

   .inactive-trigger { color: var(--primary-black)}

   .accomplish-box {
     border-radius: 8px;
       width: 45%;
       margin-left: -10%;
       margin-top: 160px;
       background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.65)),
                   url('../images/ccontainer-bg.jpg') center/cover;
       padding: 80px 60px;
       color: #fff;
       z-index: 2;
       box-shadow: 20px 20px 60px rgba(0,0,0,0.15);
   }
   .accomplish-box h3 { font-size: 30px; line-height: 1.2; margin-bottom: 15px; }
   .white-line { width: 40px; height: 2px; background: #fff; margin-bottom: 50px; }

   .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px 30px; }
   .stat-number { font-size: 48px; display: block; line-height: 1; font-weight: 700; }
   .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.8); margin-top: 5px; display: block; }

   /* --- Team Section --- */
   .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; margin-top: 50px; }
   .team-member { text-align: center; overflow: hidden; }
   .team-img { margin-bottom: 20px; overflow: hidden; border-radius:8px;}
   .team-img img { transition: 0.6s; filter: grayscale(20%); border-radius:8px; }
   .team-member:hover img { transform: scale(1.05); filter: grayscale(0%);border-radius:8px; }
   .team-member h4 { font-size: 16px; margin-bottom: 5px; letter-spacing: 1px; }
   .team-member span { font-size: 12px; color: var(--accent-red); font-weight: 700; text-transform: uppercase; }

   /* --- Responsive Styles --- */
   @media (max-width: 992px) {
       .intro-grid { grid-template-columns: 1fr; }
       .offset-wrapper { flex-direction: column; }
       .philo-black-box, .accomplish-box { width: 100%; margin: 0; padding: 60px 30px; }
       .accomplish-box { margin-top: -60px; }
       .team-grid { grid-template-columns: 1fr 1fr; }
   }
   @media (max-width: 600px) {
       .hero_sm h1 { font-size: 36px; }
       .team-grid { grid-template-columns: 1fr; }
       .stats-grid { grid-template-columns: 1fr; gap: 30px; }
   }


   /* ========================
      PANELLED SECTION
      ======================== */
   /* Container */
   .case-studies_cs {
     position: relative;
     min-height: calc(100dvh - 80px);
     overflow: hidden;
     width:100%;
     margin:2em auto;
     padding:0;
   }

   /* DESKTOP: force full height */
   @media (min-width: 768px) {
     .case-studies_cs {
       min-height: auto;
       height: auto;
       max-width:1400px;
     }
   }


   /* Backgrounds */
   .backgrounds_cs {
     position: absolute;
     inset: 0;
     z-index: 0;
   }

   .bg_cs {
     position: absolute;
     inset: 0;
     background-size: cover;
     background-position: center;
     opacity: 0;
     transform: scale(1.05);
     filter: blur(4px) brightness(0.8);
     transition:
       opacity 0.6s ease,
       transform 1s cubic-bezier(0.22, 1, 0.36, 1),
       filter 0.6s ease;
   }

   .bg-1 { opacity: 1; }

   /* Hover states */
   .case-studies_cs:has(.item-1:hover) .bg-1,
   .case-studies_cs:has(.item-2:hover) .bg-2,
   .case-studies_cs:has(.item-3:hover) .bg-3,
   .case-studies_cs:has(.item-4:hover) .bg-4,
   .case-studies_cs:has(.item-5:hover) .bg-5,
   .case-studies_cs:has(.item-6:hover) .bg-6,
   .case-studies_cs:has(.item-7:hover) .bg-7,
   .case-studies_cs:has(.item-8:hover) .bg-8,
   .case-studies_cs:has(.item-9:hover) .bg-9,
   .case-studies_cs:has(.item-10:hover) .bg-10,
   .case-studies_cs:has(.item-11:hover) .bg-11,
   .case-studies_cs:has(.item-12:hover) .bg-12
    {
     opacity: 1;
     transform: scale(1.12);
     filter: blur(0) brightness(1);
     z-index: 1;
   }

   /* Overlay */
   .case-studies_cs::after {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(0,0,0,0.15);
     z-index: 1;
   }

   /* Grid (3 x 2) */
   .grid_cs {
     position: relative;
     z-index: 2;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(4, 1fr);
   grid-auto-rows: 1fr;
   height: auto;
   }

.grid_3_by_1{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
grid-auto-rows: 1fr;
height: 100%;
}

.grid_2_by_1{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
grid-auto-rows: 1fr;
height: 100%;
}

   /* Items */
   .item_cs {
     display: flex;
     align-items:center;
     padding: 30px;
     color: white;
     cursor: pointer;
     border:6px solid #fff;
   }



   /* Text animation */
   .content_cs {
     transform: translateY(50px);
     transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
   }

   .item_cs:hover .content_cs {
     transform: translateY(0);
   }

   .content_cs h2 {
     margin: 0;
     font-size: 1.8rem;
   }

   .content_cs p {
     margin-top: 10px;
     opacity: 0;
     transform: translateY(10px);
     transition: all 0.3s ease 0.1s;
     text-align: center;
   }

   .item_cs:hover .content_cs p {
     opacity: 1;
     transform: translateY(0);
   }


   /* Tablet */
   @media (max-width: 1024px) {
     .grid_cs {
       grid-template-columns: repeat(2, 1fr);
     }

     .item_cs{border-right:none}
   }

   /* Mobile */
   @media (max-width: 640px) {
     .grid_cs {
       grid-template-columns: 1fr;
     }
   }

   /* Images */

   /* 1. Property Maintenance */
   .bg-1 {
     background-image: url('https://images.unsplash.com/photo-1574780464029-1595c2f25863?w=1920&auto=format&fit=crop');
   }

   /* 2. Refurbishments */
   .bg-2 {
     background-image: url('https://images.unsplash.com/photo-1710883727450-d3a0ab1bbbe3?q=80&w=1920&auto=format&fit=crop');
   }

   /* 3. Extensions */
   .bg-3 {
     background-image: url('https://images.unsplash.com/photo-1710883727434-01c65fc14c76?q=80&w=1920&auto=format&fit=crop');
   }

   /* 4. New Builds  */
   .bg-4 {
     background-image: url('https://images.unsplash.com/photo-1710883734889-5a0b8ab6bfcf?q=80&w=1920&auto=format&fit=crop');
   }

   /* 5. Roofing  */
   .bg-5 {
     background-image: url('https://images.unsplash.com/photo-1755365317466-fe1f84707f37?q=80&w=2670&auto=format&fit=crop');
   }

   /* 6. Loft Conversions  */
   .bg-6 {
     background-image: url('https://images.unsplash.com/photo-1768080315797-892a70ce05ee?q=80&w=1920&auto=format&fit=crop');
   }

   /* 7. Painting & Decorating  */
   .bg-7 {
     background-image: url('https://images.unsplash.com/photo-1639059790587-95625e6b764c?q=80&w=2670&auto=format&fit=crop');
   }

   /* 8. Windows & Doors */
   .bg-8 {
     background-image: url('https://images.unsplash.com/photo-1696814289069-5a0bff66e628?q=80&w=2670&auto=format&fit=crop');
   }

   /* 9. Electrics, plumbing */
   .bg-9 {
     background-image: url('https://images.unsplash.com/photo-1650551182991-b07558247564?w=700&auto=format&fit=crop');
   }

   /* 10. Carpentry */
   .bg-10 {
     background-image: url('https://images.unsplash.com/photo-1645651964715-d200ce0939cc?q=80&w=2670&auto=format&fit=crop');
   }

   /* 11. Bricklaying */
   .bg-11 {
     background-image: url('https://images.unsplash.com/photo-1682960972476-89d8a887e7aa?w=700&auto=format&fit=crop');
   }

   /* 12. Plastering */
   .bg-12 {
     background-image: url('https://plus.unsplash.com/premium_photo-1681589434452-4253e9647569?q=80&w=2670&auto=format&fit=crop');
   }


/* ========================
   CASE STUDY DETAILS
   ======================== */
/* HERO */
.cs-hero {
  position: relative;
  height: 70vh;
  overflow: hidden;
  padding:0!important;
}

.cs-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-hero-content {
  position: absolute;
  bottom: 40px;
  left: 40px;
  color: white;
}

.cs-hero-content h1 {
  margin: 0;
  font-size: 3rem;
}

.cs-hero-content p {
  margin-top: 10px;
  font-size: 1.2rem;
}

/* DETAILS BAR */
.cs-details {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #111;
  color: white;
}

.cs-details div {
  padding: 20px;
  border-right: 1px solid rgba(255,255,255,0.2);
}

.cs-details div:last-child {
  border-right: none;
}

.cs-details strong {
  display: block;
  font-size: 0.8rem;
  opacity: 0.6;
}

.cs-details span {
  font-size: 1rem;
}

/* CONTENT */
.cs-content {
  padding: 80px 20px;
}

.cs-text-box {
    background: #fff;
    width: 70%;
    padding: 40px;
    z-index: 1;
    border-radius: 8px;
    color:#000;
}

.cs-container {
  max-width: 900px;
  margin: auto;
}

.cs-content p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* IMAGE BLOCK */
.cs-image-block {
  margin: 0 40px;
}

.cs-image-block img {
  width: 100%;
  display: block;
  border-radius: 8px;
}

/* FULL WIDTH IMAGE */
.cs-image-full img {
  width: 100%;
  height: 70vh;
  object-fit: cover;
}


.offset-wrapper-half {
  width: 60%;
  margin: 60px auto 0 auto;
}
.offset-wrapper {
  display: flex;
  align-items: flex-start;
  margin-top: 60px;
  padding: 0;
}

/* --- Animations --- */
.slide-left { opacity: 0; transform: translateX(-60px); transition: 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.slide-right { opacity: 0; transform: translateX(60px); transition: 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.active { opacity: 1; transform: translateX(0); }


/* ======= Contact style ======= */
.contact h3 {
    font-size: 24px;
    color: #000;
}
/* contact box */
.contact-box {
    position: relative;
    margin-bottom: 0px;
    margin-top: -100px;
}
.contact-box .container {
    position: relative;
    z-index: 2;
}
.contact-box .item {
    background: #fff;
    padding: 45px 30px;
    -webkit-transition: .5s;
    transition: .5s;
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
    text-align: left;
    overflow: hidden;
    transition: background-color 300ms ease, transform 300ms ease, color 300ms ease;
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 30px rgba(0,0,0,.08);
    box-shadow: 0 0 30px rgba(0,0,0,.08);
    -webkit-transition: all 350ms cubic-bezier(.37,0,.63,1);
}
.contact-box .item.active {
    background: #121212;
}
.contact-box .item:hover {
    background: #528edd;
    transform: translate3d(0px, -15px, 0.01px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
}
.contact-box .item h5 {
    font-size: 20px;
    color: #000;
    margin-bottom: 5px;
}
.contact-box .item.active h5 {
    color: #fff
}
.contact-box .item:hover h5 {
    color: #fff;
    -webkit-transition: .5s;
    transition: .5s;
}
.contact-box .item p {
    color: #484848;
    font-size: 17px;
    font-weight: 300;
    margin-bottom: 0;
}
.contact-box .item.active p {
    color: #fff;
}
.contact-box .item:hover p{
    color: #fff;
}

.contact-box .item:hover .icon {
  color:#fff;
}

.contact-box .item span {
    font-size: 45px;
    color: #528edd;
    margin-bottom: 20px;
    display: inline-block;
    -webkit-transition: .5s;
    transition: .5s;
}
.contact-box .item.active span {
    color: #fff;
}
.contact-box .item:hover span {
    color: #fff;
}
.contact-box .item i.numb {
    font-size: 120px;
    position: absolute;
    bottom: -20px;
    right: -20px;
    color: rgba(0, 0, 0, 0.3);
    opacity: .2;
}
.contact-box .item.active i.numb {
    color: rgba(0, 0, 0, 0.3);
}
.contact-box .item:hover .numb {
    color: rgba(0, 0, 0, 0.3);
}


/* text field */
button,
input,
optgroup,
select,
textarea {

}
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="text"]:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
textarea:focus {
    outline: none;
}
input[type="password"],
input[type="email"],
input[type="number"],
input[type="text"],
input[type="file"],
textarea {
    max-width: 100%;
    margin-bottom: 15px;
    padding: 15px 20px;
    height: auto;
    background-color: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
    display: block;
    width: 100%;
    line-height: 1.5em;

    font-size: 17px;
    font-weight: 300;
    color: #484848;
    background-image: none;
    border: none;
    border-radius: 30px;
    border: 1px solid rgba(91, 154, 66, 0.2);
}
.form-control {
    display: block;
    width: 100%;
    margin-bottom: 15px;
    padding: 15px 20px;
    font-size: 17px;

    font-size: 17px;
    font-weight: 300;
    line-height: 1.5em;
    color: #484848;
    background-color: transparent;
    background-clip: padding-box;
    border: 1px solid rgba(91, 154, 66, 0.2);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 30px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    outline: none;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
    text-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    line-height: 30px;
    -webkit-transition: background-color .15s ease-out;
    transition: background-color .15s ease-out;
    background: #fff;
    border: none;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover {
    color: #484848;
    border: none;
}
select {
    padding: 10px;
    border-radius: 5px;
}
textarea:focus,
textarea:active,
textarea::placeholder {
    color: #484848;
}
table,
th,
tr,
td {
    border: 0px solid #484848;
}
th,
tr,
td {
    padding: 10px;
}
input[type="radio"],
input[type="checkbox"] {
    display: inline;
}
/* submit and alert success  */
button[type="submit"],
input[type="submit"] {
    display: inline-block;
    height: auto;
    padding: 18px 30px;
    border: none;
    border-radius: 0;
    background-color: #528edd;
    -webkit-transition: border-color 400ms ease, color 400ms ease, background-color 400ms ease;
    transition: border-color 400ms ease, color 400ms ease, background-color 400ms ease;
    color: #fff;
    line-height: 20px;
    font-weight: 400;
    text-align: center;

    font-size: 17px;
    border-radius: 30px;
    transition: border-color 300ms ease, transform 300ms ease, background-color 300ms ease, color 300ms ease;
    transform-style: preserve-3d;
}
button[type="submit"]:hover,
input[type="submit"]:hover {
    border: none;
    background-color: #121212;
    color: #fff;
    transform: translate3d(0px, -6px, 0.01px);
}
select {
    max-width: 100%;
}
.form-select {
    display: block;
    width: 100%;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.5;
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23887bb6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
    color: #484848;
    background-repeat: no-repeat;
    background-position: right 0.95rem center;
    background-size: 12px 20px;
    border: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 30px;
    padding-left: 20px;
    padding-top: 14px;
    padding-bottom: 14px;
    margin-bottom: 15px;
    border: 1px solid rgba(91, 154, 66, 0.2);
    outline: none;
}
.form-control:focus,
.form-select:focus,
select:focus {
    outline: none;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border: 1px solid rgba(91, 154, 66, 0.2);
}
input[type=checkbox] {
    position: relative;
    cursor: pointer;
    margin: 5px 30px 15px 0px;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 12px;
}
input[type=checkbox]:before {
    content: '';
    width: 22px;
    height: 22px;
    border: 1px solid rgba(91, 154, 66, 0.2);
    background-color: rgba(91, 154, 66, 0.2);
    position: absolute;
    top: 0px;
    margin-left: -1px;
    border-radius: 3px;
}
input[type=checkbox]:after {
    font-family: "Font Awesome 6 Pro";
    content: '\f00c';
    font-weight: normal;
    color: #484848;
    background: transparent;
    position: absolute;
    top: 1px;
    margin-left: -1px;
    left: 0;
    width: 22px;
    height: 22px;
    border: none;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s cubic-bezier(.64, .09, .08, 1);
    will-change: opacity;
    font-size: 12px;
}
input[type=checkbox]:checked:after {
    opacity: 1
}


/* ========================
   FOOTER
   ======================== */
   /* Base footer */
 footer {
   background-color: #231f20;
   color: white!important;
   font-weight: 400;
   font-size: 0.9rem;
   line-height: 1.5;
   padding: 4rem 2rem 2rem;
   border-top:10px solid #528edd;
 }

 footer *{color:white!important;}

 /* Main grid container */
 .footer-main-container {
   max-width: 1400px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 2fr 2fr 2fr;
   gap: 3rem 2.5rem;
   align-items:flex-start;
 }

 /* Left column */
 .footer-left {
   display: flex;
   flex-direction: column;
 }

 .footer-logo img {
   width: 160px;
   height:auto;
   margin-bottom: 1.5rem;
 }

 .footer-foundation {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.15em;
   margin-bottom: 1.2rem;
 }

 .footer-address {
   font-style: normal;
   line-height: 1.4;
   margin-bottom: 2rem;

 }

 .footer-connect-heading {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.15em;
   margin-bottom: 0.8rem;
 }

 .footer-social-icons {
   display: flex;
   gap: 1.25rem;
 }

 .footer-social-icons .social-icon {
   background: white;
   color: #231f20;
   font-weight: 700;
   font-size: 1.2rem;
   width: 32px;
   height: 32px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 3px;
   text-decoration: none;
 }

 /* Middle link columns */
 .footer-links-column h6 {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.15em;
   margin-bottom: 1.2rem;
 }

 .footer-links-column ul {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 .footer-links-column ul li {
   margin-bottom: 1rem;
 }

 .footer-links-column ul li a {
   color: white;
   text-decoration: none;
   transition: color 0.3s ease;
 }

 .footer-links-column ul li a:hover {
   text-decoration: underline;
   color: #528edd; /* Gold highlight on hover */
 }

 /* Right CTA column */
 .footer-cta-column {
   display: flex;
   flex-direction: column;
   gap: 2rem;
 }


 .footer-cta-box {
   background-color: #231f20;
   padding: 1.5rem 2rem;
   color: white;
   text-decoration: none;
   border-radius: 3px;
   display: flex;
   flex-direction: column;
   gap: 0.3rem;
   max-width: 320px;
   transition: background-color 0.3s ease;
 }

 .footer-cta-box small {
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   opacity: 0.8;
 }

 .footer-cta-box span {
   font-size: 1.3rem;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
 }

 .footer-cta-box:hover, .cta-sticky:hover {

 }

.cta-sticky{position: fixed; bottom:2%; right:0; z-index: 9999;
  padding: 1rem 1.5rem;
  font-weight: bold;
transition: width 0.3s ease;
width: 240px;
border-right:none;
border-radius:0;
}

 .cta-sticky:hover {
    width: 250px;
}

 /* Arrow icon inside CTA */
 .arrow-icon {
   width: 1.2em;
   height: 1.2em;
   stroke-width: 2.5;
   stroke: #f1e05a; /* yellow arrow */
   flex-shrink: 0;
 }

 /* Footer bottom bar */
 .footer-bottom-bar {
  max-width: 1400px;       /* same max width as main footer */
  margin: 3rem auto 0;     /* center horizontally with spacing above */
  padding: 1rem 2rem;      /* same horizontal padding */
  border-top: 1px solid rgba(255 255 255 / 0.15);
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(255 255 255 / 0.85);
}

 .footer-bottom-bar nav ul {
   list-style: none;
   display: flex;
   gap: 2rem;
   padding: 0;
   margin: 0;
 }

 .footer-bottom-bar nav ul li a {
   color: rgba(255 255 255 / 0.85);
   text-decoration: none;
   transition: color 0.3s ease;
 }

 .footer-bottom-bar nav ul li a:hover {
   color: #528edd;
 }

 /* Responsive */

 @media (max-width: 1024px) {
   .footer-main-container {
     grid-template-columns: 1fr 1fr;
     gap: 3rem 3rem;
   }
   .footer-cta-column {
     max-width: 100%;
   }
 }

 @media (max-width: 600px) {
   .footer-main-container {
     grid-template-columns: 1fr;
     gap: 2rem;
   }
   .footer-cta-column {
     max-width: 100%;
   }
   .footer-social-icons {
     gap: 0.8rem;
   }
   .footer-social-icons .social-icon {
     width: 28px;
     height: 28px;
     font-size: 1rem;
   }
   .cta-sticky{width:200px;padding:0.5em 0.5em 0.5em 1em;}
   .cta-sticky small,.cta-sticky span{font-size: 12px!important; text-transform:none;}

   footer{padding-bottom:6em;}
 }




/* ========================
   RESPONSIVE
   ======================== */
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
.site-header{position: fixed; width:100%;}
.hero-content{padding:0.5em 1em;}
.hero-content h1{font-size: 1.4em;}
.hero-content p{font-size: 0.9em; line-height:1.3em;}
.logo a img{height:80px!important;}
.nav-container{width:100%; padding:1rem;}

.right-offset .text-box, .left-offset .text-box{
  margin:auto;
}

.decor-shape{left:0; right:auto;bottom:-55px;}
.hero-content .decor-shape{z-index: -1;}
  /* Show burger */
  .burger { display: block; }

  /* Slide-in mobile menu */
  .main-nav {
    position: fixed;
    inset: 0;
    background: #231f20;
    backdrop-filter: blur(8px);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(.77,0,.18,1);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .main-nav.open {
    transform: translateX(0);
  }

  .main-nav ul {
    flex-direction: column;
    gap: 1.5rem;
    text-align: left;
  }

  .main-nav a {
    font-size: 1.5rem;
    font-weight: 600;
    background:none;
    color:#fff;
    text-align:left;
  }

  .burger.active span{background-color:#fff;}

  /* Make hero text smaller */
  .hero h1 { font-size: 2.3rem; }

  /* Mobile top bar */
  .top-bar { padding: 1rem 0rem; }

  .nav-container { flex-wrap: wrap; gap: 0.75rem; }

  .footer-logo,.footer-links-column,.footer-social-icons,.footer-connect-heading,.footer-address
  {
    text-align:center;
    font-size: 1.3em;
  }
  .footer-social-icons{align-items: center; justify-content: center;}

}

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