/* css/styles.css */

:root{
  --bg:#0f1216;
  --panel:#141922;
  --text:#e8eef6;
  --muted:#aab4c0;
  --brand:#e00000;
  --border:rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, #0b0e12 0%, #101521 100%);
  color:var(--text);
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.92}

.container{
  width:min(1100px, calc(100% - 32px));
  margin:0 auto;
}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(10,12,16,.78);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 4px;
  border-radius: 18px;
}

.logo{
  height:80px;
  width:auto;
  display:block;

  padding: 10px 14px;

  background: #ffffff;
  border-radius: 14px;
  border: 2px solid #e5e5e5;

  box-shadow:
    0 6px 18px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.6);
}

.header-contact{
  display:flex;
  align-items:center;
  gap:14px;
}

.header-phone{
  color: var(--text);
  font-weight: 900;
  letter-spacing: .2px;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  white-space: nowrap;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.btn.small{
  padding: 9px 12px;
  border-radius: 12px;
  font-weight: 800;
}

/* Responsive tweaks */
@media (max-width: 720px){
  .header-contact{
    margin-left:auto;
    gap:10px;
  }
  .header-actions{
    display:none;
  }
  .header-phone{
    padding: 9px 10px;
    font-size: .95rem;
  }
  .logo{
    height:60px;
    padding: 8px 12px;
    border-radius: 12px;
  }
}

.site-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:10px;
  align-items:center;
}
.site-nav a{
  display:inline-block;
  padding:10px 12px;
  border-radius: 10px;
  color:var(--muted);
  font-weight:600;
}
.site-nav a.active,
.site-nav a:hover{
  color:var(--text);
  background: rgba(255,255,255,.06);
}

.nav-toggle{
  display:none;
  width:46px;
  height:42px;
  border:1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  padding:10px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  height:2px;
  background: var(--text);
  margin:5px 0;
  border-radius:2px;
}

.site-main{padding: 26px 0 60px}

.hero{
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(224,0,0,.22), transparent 60%),
    radial-gradient(900px 500px at 80% 40%, rgba(255,255,255,.07), transparent 55%),
    rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px;
}

.hero h1{margin:0 0 10px; font-size: clamp(28px, 3.4vw, 44px)}
.hero p{margin:0; color: var(--muted); font-size: 1.05rem; line-height:1.6}

/* Home hero is now just the text hero */
.home-hero{
  display:block;
}

/* Home services: left column stacked cards, right column tall image tile spanning both rows */
.home-services{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  align-items: stretch;

  grid-template-areas:
    "commercial commercial commercial commercial commercial commercial commercial commercial  tile tile tile tile"
    "residential residential residential residential residential residential residential residential  tile tile tile tile";
}

.svc-commercial{ grid-area: commercial; }
.svc-residential{ grid-area: residential; }
.svc-tile{ grid-area: tile; }

/* About page split layout – equal height cards */
.about-split{
  margin-top:22px;
  display:grid;
  grid-template-columns: 2fr 1fr; /* 2/3 text, 1/3 image */
  gap:16px;
  align-items:stretch; /* force equal height columns */
  align-content:start; /* prevents odd vertical distribution */
}

/* Ensure the left .section doesn't get pushed down by the global .section margin */
.about-split .section{
  margin-top: 0 !important;
}


.about-text{
  margin-top:0;
  margin:0;        /* IMPORTANT: remove any margin completely */
  height:100%;
}

.about-image{
  margin:0;        /* ensure no margin on image card */
  height:100%;
  background: rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
}

.about-image img{
  width:100%;
  height:100%;
  object-fit: cover; /* fills full card without distortion */
  display:block;
}

/* Stack on mobile */
@media (max-width: 900px){
  .about-split{
    grid-template-columns: 1fr;
  }
  .about-image{
    min-height:240px;
  }
}



.card{
  background: rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.card h2{margin:0 0 8px; font-size:1.1rem}
.card p{margin:0; color: var(--muted); line-height:1.6}

/* Image tile */
.work-tile{
  border-radius: var(--radius);
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  display:block;
  min-height: 360px;
}

.work-tile img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.01);
}

.work-tile:hover img{
  transform: scale(1.04);
  transition: transform .2s ease;
}

.work-tile::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height: 110px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  pointer-events:none;
}

.work-tile-label{
  position:absolute;
  left: 12px;
  bottom: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.45);
  color: var(--text);
  font-weight: 900;
}

/* Sections */
.section{
  margin-top:22px;
  background: rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}

.section h2{margin:0 0 10px}
.muted{color:var(--muted)}

.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 14px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.05);
  font-weight:700;
  cursor:pointer;
}
.btn.primary{
  background: linear-gradient(180deg, rgba(224,0,0,.95), rgba(170,0,0,.95));
  border-color: rgba(255,255,255,.12);
}

/* Forms */
.form{
  display:grid;
  gap: 12px;
  margin-top: 10px;
}
.field{
  display:grid;
  gap:6px;
}
label{font-weight:700}
input, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  outline:none;
}
textarea{min-height: 140px; resize: vertical}

.notice{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
}
.notice.ok{border-color: rgba(0,255,140,.25)}
.notice.bad{border-color: rgba(255,80,80,.25)}

/* Gallery */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 12px;
}

.thumb{
  position:relative;
  border-radius: 14px;
  overflow:hidden;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  cursor:pointer;
  min-height: 140px;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.01);
}
.thumb:hover img{transform: scale(1.04); transition: transform .2s ease}

.pagination{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top: 14px;
}
.pagination a,
.pagination span{
  padding: 8px 11px;
  border-radius: 10px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-weight:700;
}
.pagination a:hover{color: var(--text)}
.pagination .current{
  color: var(--text);
  background: rgba(255,255,255,.08);
}

/* Modal (fixed for portrait images) */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.72);
  z-index: 999;
  padding: 18px;
  overflow:auto;
}
.modal.open{display:flex}

.modal-inner{
  width:min(1100px, 100%);
  max-height: calc(100vh - 36px);
  background: rgba(15,18,22,.96);
  border:1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow:hidden;

  display:flex;
  flex-direction:column;
}

.modal-bar{
  flex: 0 0 auto;
}

.modal-title{font-weight:800; color:var(--muted); font-size:.95rem}
.modal-actions{display:flex; gap:8px; align-items:center}
.icon-btn{
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
  color: var(--text);
  font-weight: 800;
}

.modal-body{
  flex: 1 1 auto;
  padding: 12px;
  overflow:auto;
}

.modal-body img{
  width:100%;
  height:auto;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  display:block;
  border-radius: 14px;
}

/* Footer */
.site-footer{
  border-top:1px solid var(--border);
  background: rgba(0,0,0,.35);
  padding: 26px 0 18px;
}
.footer-inner{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 16px;
}
.footer-col h3{margin:0 0 8px; font-size:1.05rem}
.footer-links{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.footer-links a{color:var(--muted); font-weight:700}
.footer-links a:hover{color:var(--text)}
.footer-bottom{
  margin-top: 10px;
  padding-top: 12px;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.footer-credit a{
  color: var(--text);
  font-weight:800;
}

.footer-credit a:hover{
  text-decoration: underline;
}

@media (max-width: 720px){
  .footer-bottom{
    flex-direction:column;
    text-align:center;
  }
}


/* Responsive */
@media (max-width: 900px){
  .gallery-grid{grid-template-columns: repeat(2, 1fr)}
  .footer-inner{grid-template-columns: 1fr}

  /* Stack home-services */
  .home-services{
    grid-template-areas:
      "commercial commercial commercial commercial commercial commercial commercial commercial commercial commercial commercial commercial"
      "residential residential residential residential residential residential residential residential residential residential residential residential"
      "tile tile tile tile tile tile tile tile tile tile tile tile";
  }

  .work-tile{min-height: 240px;}
}

@media (max-width: 720px){
  .nav-toggle{display:block}
  .site-nav{
    position:absolute;
    left:0; right:0;
    top: 72px;
    background: rgba(10,12,16,.96);
    border-bottom:1px solid var(--border);
    display:none;
  }
  .site-nav.open{display:block}
  .site-nav ul{
    flex-direction:column;
    align-items:stretch;
    padding: 10px;
  }
  .site-nav a{padding: 12px 12px}
}