/* ============================================================
   M G PLASTERING — STATIC SITE STYLESHEET
   Primary:   #022302 / rgba(48,37,7,…)
   Accent:    #ffda66
   Gold:      #826923
   ============================================================ */

/* G L O B A L S */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&display=swap');

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

html{scroll-behavior:smooth;}

body{
  font-family:'Bricolage Grotesque',sans-serif;
  
  margin:0;
  position:relative;
  background:#fff;
}

a{text-decoration:none;color:inherit;}
ul,ol{margin:0;padding:0;list-style:none;}
img{max-width:100%;height:auto;display:block;}

.site-container{overflow-x:hidden;}

/* Skip link — accessibility */
.skip-link{
  position:absolute;
  top:-60px;
  left:0;
  background:#ffda66;
  color:#111;
  padding:8px 16px;
  font-weight:700;
  z-index:9999;
  transition:top .2s;
}
.skip-link:focus{top:0;}

/* Focus indicators — WCAG AA */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid #ffda66;
  outline-offset:2px;
}

/* ============================================================
   G R I D   ( F O U N D A T I O N - S T Y L E   L I G H T )
   ============================================================ */

.row{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}
.row::after{content:'';display:table;clear:both;}

[class*="columns"]{float:left;padding:0 10px; width:100%;}
.small-12{width:100%;}
.small-up-2 .columns{width:50%;}

@media (min-width: 768px) {
  .medium-3{width:25%;}
  .medium-4{width:33.333%;}
  .medium-5{width:41.666%;}
  .medium-6{width:50%;}
  .medium-7{width:58.333%;}
  .medium-8{width:66.666%;}
  .medium-12{width:100%;}
}

@media (min-width: 1024px) {
  .large-up-7 .columns{width:14.2857%;}
}

.no-pad{padding:0!important;margin:0!important;}
.no-mg img{margin:0!important;}

/* ============================================================
   H E A D E R
   ============================================================ */

header{
  height:100vh;
  background-size:cover;
  background-position:center center;
  overflow:hidden;
  position:relative;
}
.other-header,
.other-header .navlogo-container,
.other-header .splash-container{
  height:450px!important;
}

/* ============================================================
   L O G O   S I D E B A R
   ============================================================ */

.navlogo{text-align:center;}
.close-menu{display:none;}

.navlogo-container{
  background-color:rgba(48,37,7,0.9);
  display:table;
  height:100vh;
  top:0;left:0;
  position:absolute;
  width:300px;
  z-index:10;
}
.navlogo-inner{
  display:table-cell;
  vertical-align:middle;
}

.logotext{
  color:#ffda66;
  font-family:'Bricolage Grotesque',sans-serif;
  
  font-weight:600;
  margin:0;
  line-height:30px;
  position:relative;
}
.logotext-split{
  color:#fff!important;
  font-weight:400!important;
  
}

.navlogo hr{margin-top:25px;border-color:rgba(255,255,255,0.2);}

.logo img{width:210px;margin:0 auto;}

.accreditations{margin-top:15px;}
.accreditations a{display:block;}

/* ============================================================
   N A V I G A T I O N
   ============================================================ */

.index-nav{text-align:center;margin-top:20px;}
.index-nav ul li a{
  text-transform:uppercase;
  letter-spacing:3px;
  color:#fff;
  font-weight:600;
  
  font-family:'Bricolage Grotesque',sans-serif;
  line-height:20px;
  display:block;
  transition:color .4s,margin .4s;
}
.index-nav ul li a:hover,
.index-nav ul li a.active{color:#ffda66;}

.toggle-menu{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  position:absolute;
  top:15px;
  left:15px;
  z-index:100;
}
.toggle-menu span {
  font-size: 50px !important;
  color: #ffffff !important;
  line-height: 1 !important;
  display: block !important;
  padding: 5px 10px !important;
}
.toggle-menu p{
  color:#fff;
  
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:2px;
  margin:0;
}

/* ============================================================
   S P L A S H   A R E A
   ============================================================ */

.splash:before{
  -ms-transform:skew(25deg,0deg);
  -webkit-transform:skew(25deg,0deg);
  transform:skew(25deg,0deg);
  position:absolute;
  transform-origin:0% 100%;
  background-color:rgba(48,37,7,0.8);
  content:" ";
  overflow:hidden;
  top:0;right:-1900px;
  width:1900px;height:1800px;
}
.splash-container{
  display:table;
  position:absolute;
  right:0;top:0;
  height:100vh;
  width:42.5%;
}
.splash-inner{
  display:table-cell;
  vertical-align:middle;
  padding:100px 100px 100px 30px;
}
.other-splash-inner p{margin-top:30px;width:65%;}
.other-splash-inner span{display:block;}

.splash{padding:50px 100px;float:right;text-align:right;}
header .splash {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}

.splash h1{
  font-family:'Bricolage Grotesque',sans-serif;
  margin:0;
  font-size:71px;
  color:#fff;
  line-height:69px;
}
.splash h2{
  font-family:'Bricolage Grotesque',sans-serif;
  margin:0;
  text-transform:uppercase;
  
  color:#fff;
  font-weight:500;
  line-height:40px;
}
.splash h3{
  color:#ffda66;
  text-transform:uppercase;
  letter-spacing:3px;
  font-weight:700;
  
  margin:0;padding:0;
}
.splash span {
  font-family: 'Bricolage Grotesque', sans-serif;
  color: #ffda66;
  font-size: 18px;
  letter-spacing: 3px;
  font-weight: 700;
  line-height: 22px;
  margin: 0;
  padding: 0;
}
.splash p{color:#fff;float:right;}

/* D E E T S */

.deets{z-index:10;position:relative;}
.deets p{
  display:block;width:100%;margin:0;
  color:#ffda66;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;
}
.deets a{
  color:#fff;text-transform:uppercase;
  letter-spacing:1px;display:inline-block;
}
.deets a:after{
  content:'/';top:0;left:0;
  color:#ffda66;margin:0 20px;
}
.deets a:last-of-type:after{display:none;}

/* C H E V R O N */

.learn-more{bottom:100px;right:100px;position:absolute;}
.other-learn-more{bottom:50px;}
.learn-more i{color:#ffda66;transition:color .4s;}
.learn-more i:hover{color:#fff;}

/* ============================================================
   S E C T I O N   ( A B O U T )
   ============================================================ */

section{position:relative;background-color:#111;}
section .row{padding:100px 0;}
section img{margin-bottom:20px;}

section h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 33px;
  color: #ffda66;
  margin: 0;
  letter-spacing: 1px;
  line-height: 40px;
  margin-top: 30px;
  position: relative;
  text-transform: none;
}


.about-us p{color:#fff;margin:0;margin-top:30px;padding-right:50px;}
.about-us img{margin-top:30px;}

/* W H Y   C H O O S E */

.why-choose{text-align:center;margin-top:30px;}
.why-choose h5{
  text-transform:none;
  text-decoration:none;
  font-size:19px;
  font-family:'Bricolage Grotesque',sans-serif;
  letter-spacing:1px;color:#ffda66;margin:0;
  font-weight:400;line-height:25px;
}
.why-choose p{margin:0;color:#fff;margin-top:10px;}
.why-choose i{color:#fff;margin-bottom:10px;font-size:2em;}
.top-why{margin-bottom:40px;}

/* ============================================================
   M A I N   C O N T E N T
   ============================================================ */

main{position:relative;z-index:0;padding:4% 0;}

main h2{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size: 38px;
  font-weight: 800;
  color:#826923;margin:0;letter-spacing:1px;
  line-height:0px;
  margin-top:30px;margin-bottom:40px;
  position:relative;text-decoration:none;
}

main h4{
  font-family:'Bricolage Grotesque',sans-serif;
  color:#826923;margin:0;letter-spacing:1px;
  line-height:40px;
  position:relative;text-transform:uppercase;
}

.content-inner{padding:100px 50px 100px 0;}
main p{margin-top:10px;line-height:1.7;}
.main-content{text-align:left;}

main ol{
  margin:30px 0;
  list-style-type:none;
  counter-reset:li-counter;
}
main ol li{
  padding-left:30px;margin-bottom:15px;
  position:relative;
}
main ol>li::before{
  left:0;margin-right:15px;line-height:25px;
  position:absolute;font-weight:700;
  color:#826923;
  content:counter(li-counter);
  counter-increment:li-counter;
}

/* ============================================================
   A S I D E
   ============================================================ */

aside{position:relative;}
aside::before{
  content:'';
  background-image:url('../images/aside.jpg');
  background-size:cover;
  width:200%;height:100%;
  top:0;right:-100%;
  position:absolute;z-index:-1;
}
aside::after{
  content:'';
  background-color:rgba(48,37,7,0.85);
  width:200%;height:100%;
  top:0;right:-100%;
  position:absolute;z-index:-1;
}
.aside-inner{padding:100px 0 100px 50px;}

aside h2{color:#ffda66;margin-bottom:30px;}

aside ul{padding:0;margin:0;margin-top:20px;}
aside ul li{
  padding-left:35px;color:#fff;
  line-height:40px;
  font-style:italic;letter-spacing:1.5px;
  position:relative;
}
aside ul li::before{
  content:'';width:11px;height:11px;
  top:14px;left:0;border:1px solid #fff;
  position:absolute;border-radius:50%;
}
aside ul li::after{
  content:'';width:1px;height:calc(100% - 10px);
  top:24px;left:4.5px;border:1px solid #fff;
  position:absolute;border-radius:50%;
}
aside ul li:last-of-type::after{display:none;}

.company-deets p{color:#fff;}

.accreditations-aside img{margin-bottom:20px;}

/* ============================================================
   P O R T F O L I O
   ============================================================ */

.portfolio{background-color:#111;}
.portfolio .row{text-align:center;padding:100px 0;}

.portfolio h2{
  font-family:'Bricolage Grotesque',sans-serif;
  color:#ffda66;margin:0;letter-spacing:1px;
  line-height:40px;margin-top:30px;
  position:relative;text-transform:uppercase;
}

.portfolio p{color:#fff;}

.portfolio-grid{margin-top:50px!important;}
.portfolio-grid .columns a:first-child{margin-bottom:30px;}
.portfolio-grid a{position:relative;display:inline-block;overflow:hidden;}
.portfolio-grid a::before{
  content:'';
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  background:rgba(255,218,102,0.25);
  opacity:0;
  transition:opacity .3s;
}
.portfolio-grid a:hover::before{opacity:1;}
.portfolio-grid img{width:100%;transition:transform .4s;}
.portfolio-grid a:hover img{transform:scale(1.05);}

.view-more{
  display:inline-block;
  margin-top:50px;
  padding:14px 40px;
  background:#826923;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:3px;
  
  font-weight:700;
  transition:background .3s;
}
.view-more:hover{background:#ffda66;color:#111;}

/* ============================================================
   O T H E R   P A G E S
   ============================================================ */

.services-showcase,.reviews-showcase{margin-top:80px;}
.services-main,.reviews-main{padding-right:40px;}

.enquiries-img{
  background-size:cover;
  background-image:url('../images/enquiries.jpg');
  background-position:center;
}
.findus-img{
  background-size:cover;
  background-image:url('../images/findus.jpg');
  background-position:center;
}
.reviews-img{
  background-size:cover;
  background-image:url('../images/reviews.jpg');
  background-position:center;
}

.services-showcase ul{
  columns:2;-webkit-columns:2;-moz-columns:2;
  margin-top:10px;margin-bottom:20px;
}
.services-showcase ul li{}
.services-showcase ul li::before{
  content:'\f0ad';
  font-family:FontAwesome;
  margin-right:15px;line-height:25px;
}

/* R E V I E W   B O X */

.review-box{margin-bottom:20px;float:left;width:100%;}
.review-box:last-of-type{margin-bottom:0;}
.review-box p{
  background-color:#d8d6d6;
  padding:20px 30px;
  float:left;width:100%;
  margin:0;
}
.review-box p::before{
  content:'\f10d';font-family:FontAwesome;
  margin-right:20px;color:#826923;
}
.review-box p::after{
  content:'\f10e';font-family:FontAwesome;
  margin-left:20px;
}
.review-box .review-heading{
  padding-left:30px;
  letter-spacing:2px;text-transform:uppercase;
  background-color:#826923;font-weight:400;
  color:#fff;margin:0;line-height:30px;
  width:50%;display:inline-block;float:left;
}
.review-box .review-heading + .review-heading{background-color:#222;}

/* C O N T A C T   F O R M */

address {
  font-style: normal;
}

#map{margin-top:30px;width:100%;height:310px;}

.bige-form{margin-top:30px;}
.bige-form input[type="text"], .bige-form input[type="number"], .bige-form input[type="email"], .bige-form input[type="tel"] {
    float: left;
    letter-spacing: 2px;
    width: 100%;
    height: 51px;
    color: #fff;
    background-color: #222;
    border: none;
    border-radius: 17px;
    margin: 0 0 10px 0;
    padding: 10px 12px;
    font-size: 18px;
}
.bige-form textarea{
  height:100px;letter-spacing:2px;
  background-color:#222;
  border:none;border-radius:15px;width:100%;color:#fff;
  padding:8px;
  font-size: 18px;
}
.text-bige{line-height:70px!important;height:70px!important;}

.bige-form input[type="submit"]{
  width:100%;margin-top:10px;
  background-color:#826923;border:0;
  color:#fff;letter-spacing:2px;
  text-transform:uppercase;cursor:pointer;
  padding:10px;transition:background .3s;
  border-radius:15px;
}
.bige-form input[type="submit"]:hover{background:#ffda66;color:#111;}

.bige-form ::-webkit-input-placeholder{color:#777;opacity:1;letter-spacing:2px;}
.bige-form ::-moz-placeholder{color:#777;opacity:1;letter-spacing:2px;}
.bige-form :-ms-input-placeholder{color:#777;opacity:1;letter-spacing:2px;}

/* ============================================================
   F O O T E R
   ============================================================ */

footer{
  position:relative;
  padding:60px 0;
  background-color:#111;
  background-image:url('../images/header.jpg');
  background-size:cover;
  background-position:center;
  z-index:0;
  overflow:hidden;
}

footer::before{
  content:'';
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  background:rgba(30,30,30,0.85);
  z-index:-2;
}

.footer-left { position: relative; }
.footer-left::before {
  content: '';
  position: absolute;
  top: -150px;
  bottom: -150px;
  right: -50px;
  left: -200vw;
  background-color: #826923;
  z-index: -1;
  transform: skewX(-20deg);
  transform-origin: top right;
}

footer .row{padding-top:0;padding-bottom:0;position:relative;z-index:1;}

.footer-inner{padding:30px 0;}
.footer-logo a{text-decoration:none;}
.footer-logo .logotext{}

.footer-about{
  color:#fff;
  font-size:12px;
  margin-top:15px;
  line-height:1.7;
}

footer hr{
  border:none;
  border-top:1px solid rgba(255,255,255,0.3);
  margin:20px 0;
  width:30px;
  margin-left:0;
}

.copyright{
  color:#fff;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  display:block;
  margin-top:10px;
}
.copyright:hover{color:#ffda66;}

.footer-deets-inner{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
  padding:30px 0;
}

footer h5{
  color:#ffda66;text-transform:uppercase;
  letter-spacing:2px;
  font-weight:700;margin-bottom:15px;
  margin-top:10px;
}

.footer-nav ul {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.footer-nav ul li {
  display:inline-block;
}
.footer-nav ul li a{
  color:#fff;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:2px;
  transition:color .3s;
}
.footer-nav ul li::after {
  content: '|';
  color: #ffda66;
  margin-left: 8px;
}
.footer-nav ul li:last-child::after {
  display: none;
}
.footer-nav ul li a:hover{color:#ffda66;}

.footer-deets {
  text-align:right;
}
.footer-deets p, .footer-deets a {
  color:#fff;
  font-size:12px;
  font-style:italic;
  line-height:24px;
  margin:0;
  display:block;
}
.footer-deets p:hover, .footer-deets a:hover{color:#ffda66;}

/* ============================================================
   G A L L E R Y   P A G E
   ============================================================ */

.gallery.portfolio-grid{margin-top:30px!important;}
.gallery .columns{margin-bottom:5px;}
.gallery .columns a{display:block;overflow:hidden;}
.gallery .columns img{width:100%;height:140px;object-fit:cover;transition:transform .4s;}
.gallery .columns a:hover img{transform:scale(1.08);}

/* Gallery Grid Layout (5 per row) */
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
}
.gallery-grid a {
  display: block;
  width: 20%;
  overflow: hidden;
  padding: 10px;
}
.gallery-grid a img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.4s;
  border-radius: 10px;
}
.gallery-grid a:hover img {
  transform: scale(1.05);
}

@media (max-width: 1024px) { .gallery-grid a { width: 25%; } }
@media (max-width: 768px) { .gallery-grid a { width: 33.3333%; } }
@media (max-width: 480px) { .gallery-grid a { width: 50%; } }

/* ============================================================
   B R E A D C R U M B S
   ============================================================ */

.breadcrumbs{
  padding:12px 0;
  
  color:#888;
  letter-spacing:1px;
  text-transform:uppercase;
}
.breadcrumbs a{color:#826923;}
.breadcrumbs a:hover{color:#ffda66;}
.breadcrumbs span{margin:0 8px;color:#555;}

/* ============================================================
   F A Q
   ============================================================ */

.faq-section{margin-top:60px;padding-top:40px;border-top:1px solid #eee;}
.faq-section h2{}
.faq-item{margin-bottom:30px;}
.faq-item h3{
  color:#826923;margin-bottom:8px;font-weight:700;
}
.faq-item p{line-height:1.7;color:#333;}

/* ============================================================
   M O B I L E   N A V
   ============================================================ */

@media (max-width:768px){
  .toggle-menu{display:block;}
  .close-menu{display:block;}

  .navlogo-container{
    width:100%;height:100vh;
    display:none;
    position:fixed;
    top:0;left:0;
    z-index:9999;
    overflow-y:auto;
    background-color:#111;
  }
  .navlogo{position:relative; z-index:9999;}
  .navlogo.visible .navlogo-container{display:table;}

  header{height:100vh;}
  .other-header,
  .other-header .splash-container{height:100vh!important;}
  .other-header .navlogo-container{height:100vh!important;}

  .splash{padding:20px;float:none;}
  header .splash {
    position: relative;
    right: auto;
    top: auto;
  }
  .splash-container{
    width:100%;
    position:relative;
    display:block;
  }
  .splash-inner{
    display:block;
    padding:40px 20px;
    text-align:left;
  }
  .splash h1{font-size:44px;line-height:48px;}
  .splash h2{}
  .splash p {
    float: none;
    width: 100%;
    background-color: #222;
    padding: 4%;
    border-radius: 10px;
  }
  .other-splash-inner p{width:100%;}

  .deets{display:none;}

  .logo{text-align:center;margin-bottom:20px;}
  .logo img{margin:0 auto;}

  [class*="medium-"]{width:100%;float:none;}

  .content-inner{padding:60px 20px;}
  .aside-inner{padding:60px 20px;}

  section .row {
    padding: 60px 30px;
  }

  .portfolio-grid .columns{width:50%;}
  .large-up-7 .columns{width:33.3333%;}
  .small-up-2 .columns{width:50%;}

  .footer-deets-inner{flex-direction:column;gap:20px;}

  .splash:before{display:none;}

  .services-showcase ul{columns:1;}
  .review-box .review-heading{width:100%;}
  .review-box .review-heading + .review-heading{width:100%;}

  .learn-more{bottom:30px;right:30px;}

  main h2{line-height:34px;}
  main .row {
    flex-direction: column;
  }
  .about-us p {
    padding-right: 0;
  }
  section h2 {
    font-size: 25px;
  }
  .services-main, .reviews-main {
    padding-right: 0;
  }
  .content-inner .row {
    padding: 0;
    margin: 0;
  }
  .content-inner [class*="columns"] {
    padding: 0;
  }
}

@media (max-width:480px){
  .portfolio-grid .columns{width:100%;}
  .large-up-7 .columns{width:50%;}
  .splash h1 {
    font-size: 40px;
    line-height: 38px;
    margin-top: 200px;
    background-color: #222;
    padding: 6%;
    border-radius: 10px;
  }
  section h2::before,main h2::before,.portfolio h2::before{display:none;}
}

/* ============================================================
   A R E A S   C O V E R E D
   ============================================================ */
.areas-filter-section {
  margin: 30px 0;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #eee;
}

.search-container {
  position: relative;
  max-width: 500px;
  margin-bottom: 20px;
}
.search-container i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  font-size: 18px;
}
.search-container input {
  width: 100%;
  padding: 12px 15px 12px 45px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  font-family: inherit;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
  transition: border-color 0.3s;
}
.search-container input:focus {
  border-color: #826923;
  outline: none;
}

.az-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.az-btn {
  background: #fff;
  border: 1px solid #ccc;
  color: #555;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
  min-width: 38px;
}
.az-btn:hover:not(:disabled) {
  background: #eee;
}
.az-btn.active {
  background: #826923;
  color: #fff;
  border-color: #826923;
}
.az-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #f1f1f1;
}

.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 20px;
}
.area-item {
  background: #fff;
  border: 1px solid #eaeaea;
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.02);
  display: flex;
  align-items: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.area-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  border-color: #826923;
}
.area-item span {
  font-weight: 500;
  color: #333;
}

.no-results-msg {
  padding: 20px;
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
  border-radius: 4px;
  margin-top: 20px;
}
.no-results-msg a {
  color: #826923;
  font-weight: bold;
  text-decoration: underline;
}