*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:#111;
  background:#fff;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

/* HEADER */
.site-header{
  min-height:100px;
  background:#050505;
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 34px;
}
.logo,.footer-logo{
  width:125px;
  min-height:78px;
  position:relative;
  color:#fff;
  line-height:.88;
  letter-spacing:2px;
  padding-top:18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  flex:none;
}
.roof{
  position:absolute;
  top:-3px;
  left:0;
  width:78px;
  height:58px;
  border-top:3px solid #fff;
  border-left:3px solid #fff;
  transform:skewY(-43deg);
  transform-origin:left top;
}
.sync{font-size:31px;font-weight:400}
.build{font-size:19px;margin-top:8px}
nav{
  display:flex;
  align-items:center;
  gap:42px;
  text-transform:uppercase;
  font-size:14px;
  font-weight:700;
  letter-spacing:.7px;
}
.nav-button{
  border:2px solid #fff;
  padding:14px 24px;
}

/* HERO */
.hero{
  min-height:350px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:34px;
  padding:45px 38px;
  background:
    linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.98) 45%, rgba(0,0,0,.88) 100%),
    url('assets/hero-bg.jpg') center/cover no-repeat;
}
.hero-left h1{
  margin:0;
  text-transform:uppercase;
  font-size:52px;
  line-height:1.08;
  letter-spacing:-1px;
  font-weight:900;
}
.hero-line{
  width:150px;
  height:3px;
  background:#fff;
  margin:24px 0 20px;
}
.hero-left p{
  margin:0;
  text-transform:uppercase;
  font-size:23px;
  line-height:1.35;
  letter-spacing:.5px;
}
.hero-card{
  width:370px;
  min-height:160px;
  border:2px solid #fff;
  background:#050505;
  display:flex;
  gap:25px;
  align-items:flex-start;
  padding:42px 38px;
  clip-path:polygon(10% 0,100% 0,100% 100%,0 100%,0 20%);
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.play{
  width:33px;height:33px;
  border-radius:50%;
  background:#fff;
  color:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  flex:none;
}
.hero-card h2{
  margin:0 0 14px;
  text-transform:uppercase;
  font-size:26px;
  line-height:1;
}
.hero-card p{
  margin:0;
  color:#eee;
  font-size:16px;
  line-height:1.55;
}

/* QUOTE */
.quote-section{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:58px;
  padding:48px 42px 50px;
  background:#fff;
}
.form-area h2{
  margin:0;
  text-transform:uppercase;
  font-size:42px;
  line-height:1;
  letter-spacing:-.5px;
}
.black-line{
  width:66px;
  height:3px;
  background:#111;
  margin:18px 0 25px;
}
.intro{
  font-size:16px;
  line-height:1.55;
  max-width:560px;
  margin:0 0 28px;
}
label{
  display:block;
  text-transform:uppercase;
  font-size:15px;
  font-weight:900;
  margin:0 0 8px;
}
label span{color:#d81e1e}
input,textarea{
  width:100%;
  max-width:455px;
  padding:16px;
  border:1px solid #cfcfcf;
  border-radius:3px;
  font-family:inherit;
  font-size:15px;
  margin:0 0 25px;
}
textarea{
  height:124px;
  resize:vertical;
}
button{
  display:block;
  width:100%;
  max-width:455px;
  background:#050505;
  color:#fff;
  border:0;
  border-radius:3px;
  padding:18px 20px;
  text-transform:uppercase;
  font-size:17px;
  font-weight:900;
  cursor:pointer;
}
.privacy{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-top:25px;
}
.lock{
  font-size:28px;
  line-height:1;
}
.privacy p{
  margin:0;
  font-size:14px;
  line-height:1.45;
}

/* PROJECT CARDS */
.project-cards{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.project-cards article{
  background:#050505;
}
.project-cards img{
  width:100%;
  height:230px;
  object-fit:cover;
  object-position:center;
}
.project-cards article:nth-child(2) img{
  object-position:center center;
}
.project-cards article:nth-child(3) img{
  object-position:center center;
}
.project-cards article:nth-child(4) img{
  object-position:center center;
}
.project-cards h3{
  margin:0;
  background:#050505;
  color:#fff;
  text-align:center;
  text-transform:uppercase;
  font-size:15px;
  padding:14px 8px;
}

/* FOOTER */
.footer{
  background:#050505;
  color:#fff;
  padding:44px 42px;
}
.footer-inner{
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  gap:55px;
  max-width:900px;
  margin:0 auto;
}
.services-list ul{
  list-style:none;
  padding:0;
  margin:0;
}
.services-list li{
  position:relative;
  padding-left:44px;
  margin:0 0 20px;
  text-transform:uppercase;
  font-size:20px;
  font-weight:700;
}
.services-list li:before{
  content:'✓';
  position:absolute;
  left:0;
  top:-2px;
  width:24px;
  height:24px;
  border:1px solid #fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
}
.divider{
  background:#777;
  opacity:.7;
}
.contact-block{
  padding-left:10px;
}
.footer-logo{
  margin-bottom:22px;
}
.contact-block p{
  margin:0 0 17px;
  font-size:17px;
}
.bottom-strip{
  background:#fff;
  color:#222;
  text-align:center;
  padding:18px 15px 24px;
  text-transform:uppercase;
  letter-spacing:8px;
  font-size:15px;
}

/* MOBILE */
@media(max-width:800px){
  .site-header{
    min-height:92px;
    padding:12px 22px;
    align-items:center;
  }
  nav{display:none}
  .logo{
    transform:none;
    width:120px;
    min-height:70px;
    padding-top:10px;
  }
  .roof{
    top:-4px;
  }
  .sync{font-size:30px}
  .build{font-size:18px}
  .hero{
    min-height:430px;
    padding:44px 28px;
    align-items:flex-start;
    flex-direction:column;
    background:
      linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.98) 55%, rgba(0,0,0,.88) 100%),
      url('assets/hero-bg.jpg') center/cover no-repeat;
  }
  .hero-left h1{
    font-size:42px;
  }
  .hero-left p{
    font-size:19px;
  }
  .hero-card{
    margin-top:28px;
    width:100%;
    padding:32px 26px;
  }
  .quote-section{
    grid-template-columns:1fr;
    gap:35px;
    padding:40px 28px;
  }
  .form-area h2{
    font-size:36px;
  }
  input,textarea,button{
    max-width:none;
  }
  .project-cards img{
    height:220px;
  }
  .footer{
    padding:40px 28px;
  }
  .footer-inner{
    grid-template-columns:1fr;
    gap:30px;
  }
  .divider{display:none}
  .services-list li{
    font-size:16px;
  }
  .bottom-strip{
    letter-spacing:5px;
    font-size:12px;
  }
}


/* === RESTORE + FINAL LOGO / CONTACT FIXES === */
.logo,
.footer-logo{
  width: 138px !important;
  min-height: 92px !important;
  height: 92px !important;
  position: relative !important;
  color: #fff !important;
  line-height: .9 !important;
  letter-spacing: 2px !important;
  padding: 34px 0 0 0 !important;
  display: block !important;
  flex: none !important;
  transform: none !important;
  overflow: visible !important;
}

.logo .roof,
.footer-logo .roof{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 82px !important;
  height: 64px !important;
  border-top: 3px solid #fff !important;
  border-left: 3px solid #fff !important;
  transform: skewY(-43deg) !important;
  transform-origin: left top !important;
  pointer-events: none !important;
}

.logo .sync,
.footer-logo .sync{
  font-size: 31px !important;
  font-weight: 400 !important;
  line-height: .85 !important;
  margin: 0 !important;
  letter-spacing: 3px !important;
}

.logo .build,
.footer-logo .build{
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: .95 !important;
  margin-top: 8px !important;
  letter-spacing: 3px !important;
}

.site-header{
  align-items: center !important;
}

.footer-logo{
  margin-bottom: 28px !important;
}

.contact-block a,
.instagram-link{
  color:#fff !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:12px !important;
}

.contact-icon{
  display:inline-block !important;
  width:28px !important;
  text-align:center !important;
  margin-right:8px !important;
}

.instagram-icon{
  width:24px !important;
  height:24px !important;
  display:inline-block !important;
  border:2px solid #fff !important;
  border-radius:7px !important;
  position:relative !important;
}
.instagram-icon:before{
  content:"" !important;
  position:absolute !important;
  width:8px !important;
  height:8px !important;
  border:2px solid #fff !important;
  border-radius:50% !important;
  left:6px !important;
  top:6px !important;
}
.instagram-icon:after{
  content:"" !important;
  position:absolute !important;
  width:3px !important;
  height:3px !important;
  background:#fff !important;
  border-radius:50% !important;
  right:4px !important;
  top:4px !important;
}

@media(max-width:800px){
  .site-header{
    min-height:112px !important;
    padding:16px 28px !important;
  }
  .logo{
    width:138px !important;
    min-height:92px !important;
    height:92px !important;
    padding-top:34px !important;
  }
  .footer-logo{
    width:138px !important;
    min-height:92px !important;
    height:92px !important;
    padding-top:34px !important;
  }
}


/* === FINAL LOGO FIX: SVG replaces CSS-drawn logo === */
.logo,
.footer-logo,
.roof,
.sync,
.build{
  all: unset;
}

.logo-link{
  display:block !important;
  width:140px !important;
  height:auto !important;
  flex:none !important;
}

.sync-logo{
  display:block !important;
  width:140px !important;
  height:auto !important;
  max-width:140px !important;
}

.footer-logo-wrap{
  display:block !important;
  width:150px !important;
  margin-bottom:26px !important;
}

.footer-sync-logo{
  width:150px !important;
  max-width:150px !important;
}

.site-header{
  align-items:center !important;
}

@media(max-width:800px){
  .site-header{
    min-height:104px !important;
    padding:18px 28px !important;
  }

  .logo-link{
    width:145px !important;
  }

  .sync-logo{
    width:145px !important;
    max-width:145px !important;
  }

  .footer-logo-wrap{
    width:155px !important;
  }

  .footer-sync-logo{
    width:155px !important;
    max-width:155px !important;
  }
}


/* === LOGO FIX V2: house line no longer crosses text; full BUILD LTD visible === */
.logo-link{
  display:block !important;
  width:150px !important;
  height:108px !important;
  overflow:visible !important;
  flex:none !important;
}

.sync-logo{
  display:block !important;
  width:150px !important;
  height:auto !important;
  max-width:none !important;
}

.footer-logo-wrap{
  display:block !important;
  width:190px !important;
  height:auto !important;
  overflow:visible !important;
  margin:0 0 30px 0 !important;
}

.footer-sync-logo{
  display:block !important;
  width:190px !important;
  height:auto !important;
  max-width:none !important;
}

.site-header{
  min-height:115px !important;
  padding-top:12px !important;
  padding-bottom:12px !important;
  overflow:visible !important;
}

.contact-block{
  overflow:visible !important;
}

@media(max-width:800px){
  .site-header{
    min-height:120px !important;
    padding:14px 28px !important;
  }
  .logo-link{
    width:155px !important;
    height:112px !important;
  }
  .sync-logo{
    width:155px !important;
  }
  .footer-logo-wrap{
    width:210px !important;
    margin-left:0 !important;
  }
  .footer-sync-logo{
    width:210px !important;
  }
}


/* === TRUE FINAL FIXES === */

/* Remove old CSS-drawn logo completely */
.logo, .footer-logo, .roof, .sync, .build {
  all: unset !important;
}

/* Header logo: exact supplied logo image, centred and not distorted */
.logo-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 190px !important;
  height: 120px !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}

.sync-logo {
  display: block !important;
  width: 180px !important;
  height: auto !important;
  object-fit: contain !important;
  max-width: none !important;
  border: 0 !important;
}

/* Footer logo centred within contact area */
.footer-logo-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 0 28px 0 !important;
}

.footer-sync-logo {
  width: 230px !important;
  max-width: 230px !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Keep logo area neat */
.site-header {
  align-items: center !important;
  overflow: visible !important;
}

/* Project/service image cards */
.project-cards img {
  width: 100% !important;
  height: 230px !important;
  object-fit: cover !important;
  object-position: center !important;
}

.project-cards article:last-child img {
  object-position: center center !important;
}

.contact-block a {
  color: #fff !important;
  text-decoration: none !important;
}

@media(max-width:800px){
  .site-header {
    min-height: 130px !important;
    padding: 14px 24px !important;
    justify-content: center !important;
  }

  .logo-link {
    width: 210px !important;
    height: 120px !important;
    margin: 0 auto !important;
  }

  .sync-logo {
    width: 205px !important;
  }

  .footer-logo-wrap {
    justify-content: center !important;
    margin-top: 18px !important;
  }

  .footer-sync-logo {
    width: 240px !important;
    max-width: 240px !important;
  }

  .project-cards img {
    height: 245px !important;
  }
}


/* === ABSOLUTE FINAL LOGO VISIBILITY FIX === */
.logo, .footer-logo, .roof, .sync, .build{
  all: unset !important;
}

.site-header{
  min-height: 170px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px 20px !important;
  overflow: visible !important;
}

.logo-link{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 235px !important;
  height: 135px !important;
  margin: 0 auto !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}

.sync-logo{
  display: block !important;
  width: 235px !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  border: 0 !important;
}

.footer-logo-wrap{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  height: auto !important;
  margin: 25px 0 34px 0 !important;
  overflow: visible !important;
}

.footer-sync-logo{
  display: block !important;
  width: 245px !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

@media(max-width:800px){
  .site-header{
    min-height: 170px !important;
    padding: 18px 20px !important;
  }
  .logo-link{
    width: 235px !important;
    height: 135px !important;
  }
  .sync-logo{
    width: 235px !important;
  }
  .footer-sync-logo{
    width: 245px !important;
  }
}


/* === FINAL HEADER LOGO POSITION FIX ===
   Keeps the logo fully visible by reducing its size slightly,
   adding clear top/bottom space, and stopping any cropping. */
.site-header{
  min-height: 210px !important;
  height: auto !important;
  padding: 48px 20px 30px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.logo-link{
  width: 190px !important;
  height: auto !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.sync-logo{
  width: 190px !important;
  height: auto !important;
  max-width: 190px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Footer logo stays centred but not oversized */
.footer-logo-wrap{
  width: 100% !important;
  margin: 10px auto 32px auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: visible !important;
}

.footer-sync-logo{
  width: 210px !important;
  max-width: 210px !important;
  height: auto !important;
  object-fit: contain !important;
}

@media(max-width:800px){
  .site-header{
    min-height: 215px !important;
    padding: 54px 20px 32px 20px !important;
  }

  .logo-link{
    width: 190px !important;
    height: auto !important;
  }

  .sync-logo{
    width: 190px !important;
    max-width: 190px !important;
  }

  .footer-sync-logo{
    width: 215px !important;
    max-width: 215px !important;
  }
}