html{scroll-behavior:smooth;}
body{
  margin:0;padding:0;
  font-family:Trajan,'Times New Roman',serif;
  color:#d4af37;
  background:transparent;
  cursor:auto;
}
#bg-video{
  position:fixed;top:0;left:0;
  width:100vw;height:100vh;
  object-fit:cover;z-index:-3;
}
nav{
  position:fixed;top:0;left:0;
  width:100%;height:120px;
  padding:0 60px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(0,0,0,0.12);
  backdrop-filter:blur(4px);
  border-bottom:1px solid rgba(212,175,55,0.45);
  z-index:100;
}
.nav-left img{height:140px;filter:drop-shadow(0 0 14px gold);margin-top:10px;}
nav ul{list-style:none;display:flex;gap:40px;margin:0;margin-right:140px;padding:0;}
nav ul li a{color:#d4af37;font-size:22px;font-weight:bold;text-decoration:none;transition:0.3s;}
nav ul li a:hover{color:white;text-shadow:0 0 12px gold;}
.nav-toggle,.nav-toggle-label{display:none;}
/* hamburger bars */
.nav-toggle-label span,
.nav-toggle-label span:before,
.nav-toggle-label span:after {
  display:block;
  background:#d4af37;
  height:3px;
  width:28px;
  border-radius:2px;
  position:relative;
}
.nav-toggle-label span:before,
.nav-toggle-label span:after {
  content:"";
  position:absolute;
  left:0;
}
.nav-toggle-label span:before { top:-8px; }
.nav-toggle-label span:after { top:8px; }

@media(max-width:900px){
  body{cursor:auto;}
  .nav-toggle-label{display:block;cursor:pointer;}
  nav ul{
    position:fixed;top:120px;right:0;
    background:rgba(0,0,0,0.92);
    width:70%;max-width:260px;padding:25px;
    flex-direction:column;gap:20px;
    border-left:1px solid rgba(212,175,55,0.5);
    transform:translateX(100%);transition:0.3s;
    margin-right:0;
  }
  .nav-toggle:checked + .nav-toggle-label + ul{transform:translateX(0);}
  .nav-left img{height:100px;}
}
section{
  padding:160px 10% 120px;
  color:#d4af37;
  position:relative;z-index:5;
}
.hero{text-align:center;}
.hero-logo{width:520px;display:block;margin:40px auto 10px auto;filter:drop-shadow(0 0 12px gold);}
.hero h1{font-size:38px;margin:10px 0;}
.hero p.subtitle{font-size:22px;margin-top:0;}
.blueprint-bg{position:relative;overflow:hidden;}
.blueprint-bg::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(212,175,55,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,0.09) 1px, transparent 1px);
  background-size:40px 40px;
  opacity:0.45;mix-blend-mode:screen;
  animation:blueprintMove 18s linear infinite;
  z-index:-1;
}
@keyframes blueprintMove{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-80px,-80px,0);}
}
.section-divider{
  height:3px;
  background:linear-gradient(to right,rgba(212,175,55,0.1),rgba(212,175,55,1),rgba(212,175,55,0.1));
  width:60%;margin:40px auto 80px;border-radius:4px;
}
.float-card{
  background:rgba(0,0,0,0.25);
  padding:24px;border-radius:12px;
  border:1px solid rgba(212,175,55,0.35);
  transition:0.3s;margin-bottom:18px;
}
.float-card:hover{
  box-shadow:0 0 22px rgba(212,175,55,0.6);
  transform:translateY(-6px);
}
.project-img{width:100%;border-radius:10px;margin-bottom:14px;}
.btn{
  padding:14px 34px;border:2px solid #d4af37;
  border-radius:6px;color:#d4af37;text-decoration:none;
  font-weight:bold;margin:6px;transition:0.3s;display:inline-block;
}
.btn.primary{background:#d4af37;color:black;}
.btn:hover{box-shadow:0 0 18px gold;}
.timeline{display:grid;gap:18px;}
.timeline-step{
  background:rgba(0,0,0,0.3);
  border-radius:10px;padding:14px 18px;
  border:1px solid rgba(212,175,55,0.35);
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
}
.gallery-grid img{
  width:100%;border-radius:10px;cursor:pointer;transition:0.3s;
}
.gallery-grid img:hover{
  transform:scale(1.02);
  box-shadow:0 0 18px rgba(212,175,55,0.6);
}
#lightbox,#video-modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.92);
  display:none;align-items:center;justify-content:center;
  z-index:998;
}
#lightbox img,#video-modal video{
  max-width:90%;max-height:90%;
  border-radius:12px;box-shadow:0 0 20px black;
}
#lightbox-close,#video-modal-close{
  position:fixed;top:24px;right:34px;
  font-size:32px;color:#d4af37;cursor:pointer;z-index:999;
}
.cursor-halo{
  position:fixed;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(212,175,55,0.7);
  pointer-events:none;mix-blend-mode:screen;
  transform:translate(-50%,-50%);
  z-index:9999;box-shadow:0 0 18px rgba(212,175,55,0.8);
}
form.contact-form{
  max-width:600px;margin:0 auto;
  display:grid;gap:14px;
}
form.contact-form input,form.contact-form textarea{
  padding:10px 12px;border-radius:6px;
  border:1px solid rgba(212,175,55,0.6);
  background:rgba(0,0,0,0.4);
  color:#d4af37;font-size:15px;font-family:inherit;
}
form.contact-form textarea{min-height:120px;resize:vertical;}
form.contact-form input::placeholder,form.contact-form textarea::placeholder{
  color:rgba(212,175,55,0.6);
}
footer{
  text-align:center;padding:30px;
  margin-top:40px;color:#d4af37;
}
@media(max-width:700px){
  section{padding:140px 6% 90px;}
  .hero-logo{width:340px;}
  nav{padding:0 24px;}
}


#lightbox img.fade {
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}
#lightbox img {
  opacity: 1;
  transition: opacity 0.15s ease-in-out;
}

/* Mobile menu visibility override */
.mobile-menu-toggle {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 99999 !important;
    display: block !important;
    color: #ffffff !important;
    font-size: 32px !important;
    cursor: pointer !important;
}

/* Header ensures menu stays on top */
header, .navbar, .mobile-header {
    position: relative !important;
    z-index: 99998 !important;
}

/* Larger contact inputs */
input, textarea {
    font-size: 18px !important;
    padding: 14px !important;
}

/* Gold cursor */
body { cursor: url('images/gold-dot.png'), auto; }


/* === V5 Tuning: Logo & Mobile Layout === */

/* Desktop logo in nav - slightly smaller and constrained */
nav .nav-left img {
  max-width: 170px;
  height: auto;
}

/* Main hero logo sizing */
.hero-logo {
  width: 320px;
  max-width: 70%;
}

/* Tablet & small laptop adjustments */
@media (max-width: 900px) {
  .hero-logo {
    width: 240px;
    max-width: 65%;
  }
}

/* Phone layout tightening */
@media (max-width: 700px) {
  /* Reduce top padding so mobile doesn't feel 'zoomed in' */
  section {
    padding: 110px 6% 80px;
  }

  nav {
    padding: 12px 20px;
  }

  nav .nav-left img {
    max-width: 140px;
  }
}


/* === V6: Hero logo + mobile fit fixes === */

/* Default hero logo (desktop) */
.hero-logo {
  width: 220px;
  max-width: 36%;
  display: block;
  margin: 32px auto 10px auto;
}

/* Tablet */
@media (max-width: 900px) {
  .hero-logo {
    width: 180px;
    max-width: 42%;
  }
}

/* Phone */
@media (max-width: 700px) {
  section {
    padding: 105px 6% 70px;
  }
  .hero-logo {
    width: 140px;
    max-width: 50%;
  }
  .hero h1 {
    font-size: 28px;
  }
  .hero p.subtitle {
    font-size: 16px;
  }
}


/* === V7 Adjustments === */

/* Center logo 30% smaller */
.hero-logo {
    width: 150px !important;   /* smaller */
    max-width: 30% !important;
}

/* Mobile auto-resize reset */
@media (max-width: 900px) {
    .hero-logo {
        width: 120px !important;
        max-width: 40% !important;
    }
}

@media (max-width: 700px) {
    .hero-logo {
        width: 100px !important;
        max-width: 45% !important;
    }
    section {
        padding: 80px 6% 60px !important; /* more natural mobile spacing */
    }
}


/* === V8: Final hero fit & smaller logo === */

/* Smaller center hero logo (30% smaller again) */
.hero-logo {
    width: 90px !important;
    max-width: 22% !important;
    margin-top: 40px !important;
}

/* Reduce hero title size */
.hero h1 {
    font-size: 30px !important;
    margin: 5px 0 !important;
}

/* Subtitle size + spacing */
.hero p.subtitle {
    font-size: 18px !important;
    margin-bottom: 10px !important;
}

/* Reduce hero section height to fit entire hero on screen */
section.hero, .hero {
    padding-top: 60px !important;
    padding-bottom: 20px !important;
}


/* === V9: Full hero fits below nav bar === */

section.hero, .hero {
    padding-top: 20px !important;
    padding-bottom: 10px !important;
    margin-top: 0 !important;
}

.hero-logo {
    width: 70px !important;
    max-width: 18% !important;
    margin: 10px auto !important;
}

.hero h1 {
    font-size: 26px !important;
    margin: 0 !important;
}

.hero p.subtitle {
    font-size: 16px !important;
    margin: 5px 0 0 0 !important;
}

.hero * {
    line-height: 1.1 !important;
}


/* === V10: Final hero shrink + strict mobile fit === */

/* Desktop Hero */
.hero-logo {
    width: 50px !important;          /* ~30% smaller than V9 */
    max-width: 14% !important;
    margin: 6px auto !important;
}

.hero h1 {
    font-size: 20px !important;
    margin: 0 !important;
}

.hero p.subtitle {
    font-size: 14px !important;
    margin: 4px 0 0 0 !important;
}

/* Reduce hero container height */
section.hero, .hero {
    padding-top: 10px !important;
    padding-bottom: 6px !important;
    margin-top: 0 !important;
    line-height: 1.05 !important;
}


/* === MOBILE RESIZE FIX === */

/* Force true mobile scaling */
@media (max-width: 700px) {

    .hero-logo {
        width: 40px !important;
        max-width: 18% !important;
    }

    .hero h1 {
        font-size: 16px !important;
    }

    .hero p.subtitle {
        font-size: 12px !important;
    }

    section.hero, .hero {
        padding-top: 6px !important;
        padding-bottom: 4px !important;
        margin-top: 0 !important;
    }

    .hero * {
        line-height: 1.0 !important;
    }
}


/* === V11: Mobile video fix + proportional hero fit + 30% larger logo from V10 === */

/* Desktop hero tuning */
.hero-logo {
    width: 65px !important;     /* 30% larger than V10 (50px → 65px) */
    max-width: 20% !important;
    margin: 8px auto !important;
}

.hero h1 {
    font-size: 22px !important;
    margin: 2px 0 !important;
}

.hero p.subtitle {
    font-size: 15px !important;
    margin: 4px 0 !important;
}

/* Reduce vertical height so buttons fit on first screen */
section.hero, .hero {
    padding-top: 6px !important;
    padding-bottom: 4px !important;
    margin-top: 0 !important;
    line-height: 1.05 !important;
}

/* Button container adjustments */
.hero-buttons, .button-row, .cta-buttons {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Buttons smaller & tighter for fit */
.hero-buttons a, .button-row a, .cta-buttons a {
    padding: 8px 14px !important;
    font-size: 13px !important;
}


/* === MOBILE FIT FIX === */
@media (max-width: 700px) {

    #bg-video {
        height: 55vh !important;       /* shrink video on mobile */
        object-fit: cover !important;
        top: 0 !important;
    }

    .hero-logo {
        width: 50px !important;        /* scaled proportionally for mobile */
        max-width: 24% !important;
        margin-top: 3px !important;
    }

    .hero h1 {
        font-size: 16px !important;
        line-height: 1.05 !important;
    }

    .hero p.subtitle {
        font-size: 13px !important;
    }

    section.hero, .hero {
        padding-top: 4px !important;
        padding-bottom: 2px !important;
        margin-top: 0 !important;
    }

    /* Buttons must fit in viewport */
    .hero-buttons a, .button-row a, .cta-buttons a {
        padding: 7px 12px !important;
        font-size: 12px !important;
        margin-top: 4px !important;
    }

    .hero-buttons, .button-row, .cta-buttons {
        margin-top: 6px !important;
    }
}


/* === V12: TRUE RESPONSIVE AUTO-FIT MOBILE HERO === */

@media (max-width: 700px) {

    /* Background video height fix */
    #bg-video {
        height: 45vh !important;
        object-fit: cover !important;
        top: 0 !important;
    }

    /* Remove padding & forced height */
    section.hero, .hero {
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
    }

    /* Fully responsive hero logo */
    .hero-logo {
        width: 12vw !important;
        max-width: 50px !important;
        margin: 2vw auto !important;
    }

    /* Auto-scaling hero text */
    .hero h1 {
        font-size: 5.2vw !important;
        line-height: 1.05 !important;
        margin: 0 !important;
    }

    .hero p.subtitle {
        font-size: 3.8vw !important;
        margin: 0.5vw 0 !important;
    }

    /* Shrink gold diagonal element */
    .hero .decorative-angle,
    .angle-graphic {
        transform: scale(0.55) !important;
        top: -10vw !important;
    }

    /* Responsive auto-fit buttons */
    .hero-buttons a, .button-row a, .cta-buttons a {
        font-size: 3.2vw !important;
        padding: 1.8vw 4vw !important;
        margin-top: 2vw !important;
    }

    .hero-buttons, .button-row, .cta-buttons {
        margin-top: 2vw !important;
    }
}


/* === V13: Centered Hero Structure Matching All Other Sections === */

/* Create a centered wrapper for hero content */
.hero-content-wrapper {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* Attach wrapper behavior to existing hero container */
.hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
}

/* Ensure hero elements adopt centered structure */
.hero * {
    text-align: center !important;
}

/* Buttons centered and aligned inside wrapper */
.hero-buttons, .button-row, .cta-buttons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 10px !important;
}

/* Mobile improvements remain aligned */
@media (max-width: 700px) {
    .hero-content-wrapper {
        max-width: 90% !important;
        padding: 0 10px !important;
    }
}


/* === V14: Hero Refinement Upgrade === */

/* Tighter hero vertical spacing */
.hero {
    padding-top: 20px !important;
    padding-bottom: 15px !important;
    margin-top: 0 !important;
}

/* Center + scale gold diagonal accent */
.angle-graphic, .decorative-angle {
    margin: 0 auto !important;
    display: block !important;
    position: relative !important;
    left: 0 !important;
    transform: translateX(0) scale(0.80) !important;
}

/* Logo spacing refinement */
.hero-logo {
    margin-bottom: 8px !important;
}

/* Title + subtitle spacing refinement */
.hero h1 {
    margin-bottom: 6px !important;
}
.hero p.subtitle {
    margin-bottom: 10px !important;
}

/* Button refinement */
.hero-buttons a, .button-row a, .cta-buttons a {
    padding: 8px 16px !important;
    font-size: 14px !important;
    margin: 0 6px !important;
}

/* Mobile refinement */
@media (max-width: 700px) {

    .hero {
        padding-top: 14px !important;
        padding-bottom: 8px !important;
    }

    .hero-logo {
        width: 11vw !important;
        margin-bottom: 6px !important;
    }

    .hero h1 {
        font-size: 5vw !important;
        margin-bottom: 4px !important;
    }

    .hero p.subtitle {
        font-size: 3.6vw !important;
        margin-bottom: 6px !important;
    }

    /* Gold diagonal smaller on mobile */
    .angle-graphic, .decorative-angle {
        transform: translateX(0) scale(0.60) !important;
        top: -4vw !important;
    }

    /* Buttons wrap on very small screens */
    .hero-buttons, .button-row, .cta-buttons {
        flex-wrap: wrap !important;
        justify-content: center !important;
        margin-top: 6px !important;
    }

    .hero-buttons a, .button-row a, .cta-buttons a {
        font-size: 3.4vw !important;
        padding: 2vw 4vw !important;
        margin: 4px !important;
    }
}


/* V14-CENTERED FIX — match Fairfax Estate centering width */
.hero-center {
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}