/* Core palette */
:root{
  --navy: #0B2A3F;
  --teal: #0C8A99;
  --teal-600: #0a7380;
  --warm: #C86D3A;
  --bronze: #6F4C2E;
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --text: #13212B;
  --muted: #6B7C88;
  --border: #E0E6EC;
  --success: #1B8C50;
  --error: #B43230;
}
*{
  box-sizing: border-box;
}
html,body{
  margin: 0;
  padding: 0;
  color: var(--text);
  background: var(--bg);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height: 1.5;
}
img{max-width:100%;height:auto;display:block}
.container{
  max-width: 1100px;
  margin-inline: auto;
  padding: 0 20px;
}
.skip-link{
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus{
  left: 8px;
  top: 8px;
  width: auto;
  height: auto;
  background: #fff;
  color: #000;
  padding: 8px 12px;
  border-radius: 4px;
  z-index: 1000;
}

/* Header */
.site-header{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.header-inner{
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  padding: 14px 0;
}
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  text-decoration: none;
}
.brand-text{
  font-weight: 700;
  letter-spacing: .2px;
}
.site-nav ul{
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a{
  color: var(--text);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 6px;
}
.site-nav a:hover,.site-nav a:focus{
  background: #eef5f8;
}
.site-nav a.active{
  color: var(--navy);
  font-weight: 600;
  border-bottom: 2px solid var(--teal);
}
.header-cta .btn.small{
  padding: 10px 12px;
  font-size: .95rem;
}

/* Buttons */
.btn{
  display: inline-block;
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  transition: .2s ease;
}
.btn:hover,.btn:focus{
  background: #e7f4f6;
  border-color: var(--teal);
  color: var(--teal-600);
}
.btn.primary{
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.btn.primary:hover,.btn.primary:focus{
  background: var(--teal-600);
}

/* Above-cards company badge tightened */
.company-badge{
  margin: 6px 0 8px 0;
}
.company-badge .badge-name{
  font-weight: 700;
  color: var(--navy);
}
.company-badge .badge-meta{
  font-size: .9rem;
  color: var(--muted);
}

/* Hero split */
.split-hero{
  padding: 8px 0;
}
.split-hero-inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}
/* Panels: reduced height so both fit above fold */
.split-panel{
  position: relative;
  display: flex;
  align-items: flex-end;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: #cfd8dc;
  background-size: cover;
  background-position: center;
  min-height: clamp(240px, 32vw, 360px);
  aspect-ratio: 16/9;
}
.split-panel .overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.0) 20%, rgba(0,0,0,.48) 100%);
}
.split-panel .panel-content{
  position: relative;
  padding: 12px;
}
.panel-title{
  margin: 0 0 4px 0;
  font-size: clamp(1.4rem, 4.6vw, 2rem);
}
.panel-sub{
  margin: 0 0 6px 0;
  color: #e6eef2;
  font-size: clamp(.9rem, 2.6vw, 1rem);
}
.panel-cta{
  display: inline-block;
  background: #ffffffcc;
  color: #0B2A3F;
  padding: 7px 10px;
  border-radius: 8px;
  font-weight: 700;
}
.construction-panel{
  background-color: #0d3147;
}
.hvac-panel{
  background-color: #0b2a3f;
}

/* Narrow hero */
.hero.narrow{
  padding: 36px 0;
  border-bottom: 1px solid var(--border);
}
.hero-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.hero-copy h1{
  margin: 0 0 8px 0;
  font-size: 2rem;
  color: var(--navy);
}
.hero-copy p{
  color: var(--muted);
}
.hero-ctas{
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .6rem;
}

/* HVAC hero */
.hero.hvac{
  padding: 36px 0;
  background: linear-gradient(180deg,#f7fbfc 0%, #eef6f7 100%);
  border-bottom: 1px solid var(--border);
}
.warranty-banner{
  display: inline-block;
  background: var(--navy);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  margin-top: 10px;
  font-weight: 700;
}

/* Services */
.services{
  padding: 24px 0;
}
.services h2{
  color: var(--navy);
}
.service-list{
  display: grid;
  gap: 10px;
  margin-top: 8px;
}
.service-list.two-col{
  grid-template-columns: 1fr 1fr;
}
.service-item{
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 10px;
}
.benefits{
  margin: 12px 0 0 0;
  padding-left: 18px;
}
.benefits li{
  margin: 6px 0;
}
.two-col{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 20px;
  align-items: center;
}
.services-media img{border-radius:12px;border:1px solid var(--border);width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}

/* Gallery */
.gallery{
  padding: 24px 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.gallery h2{
  color: var(--navy);
  margin: 0 0 12px 0;
}
.gallery-grid.solo{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.gallery-grid.solo img{border-radius:12px;border:1px solid var(--border);width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
figure{margin:0}
figcaption{
  font-size: .95rem;
  color: var(--muted);
  margin-top: 6px;
}

/* Trust cards */
.trust-cards{
  padding: 20px 0;
}
.cards-grid{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
}
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 12px;
  border-radius: 12px;
}
.card h3{
  margin: 0 0 6px 0;
  color: var(--navy);
}
.card p{
  margin: 0;
  color: var(--muted);
}

/* Cross link */
.xlink{
  padding: 20px 0;
}
.xlink-card{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
}
.xlink-card.alt{
  background: linear-gradient(180deg,#f8fbfd 0%, #ffffff 100%);
}
.xlink-media img{border-radius:12px;border:1px solid var(--border);width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}

/* Forms (generic styles) */
.contact-form{
  padding: 24px 0;
}
.contact-form h2{
  color: var(--navy);
}
.grid{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2,1fr);
}
.grid .full{
  grid-column: 1/-1;
}
label{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
}
input,select,textarea{
  font: inherit;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  min-height: 44px;
}
input:focus,select:focus,textarea:focus{
  outline: 3px solid var(--bronze);
  outline-offset: 2px;
  border-color: var(--bronze);
}
.hp{
  position: absolute;
  left: -4000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-success{
  background: #e8f6ee;
  color: #0b5f30;
  border: 1px solid #bee3cd;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.form-error{
  background: #fdecea;
  color: #7a1f1d;
  border: 1px solid #f6c2bf;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.file-field input[type=file]{
  margin-top: 6px;
}

/* Footer */
.site-footer{
  background: var(--navy);
  color: #fff;
  border-top: none;
  margin-top: 28px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 18px 0;
}
.footer-brand{
  color: #fff;
}
.footer-cta{
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
.footer-contact{
  display: flex;
  gap: 8px;
  align-items: center;
}
.site-footer a{
  color: #d7f0f3;
  text-decoration: underline;
}
.site-footer a:focus-visible{
  outline: 3px solid var(--bronze);
  outline-offset: 2px;
}
.fine{
  color: #b6c6d3;
  margin: .25rem 0 0 0;
}
.sep{
  opacity: .5;
}

/* Responsive */
@media (max-width: 900px){
  .split-hero-inner{
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
  .split-panel{
  aspect-ratio: 16/9;
  min-height: clamp(220px, 40vw, 300px);
}
  .split-panel .panel-content{
  padding: 10px;
}
  .panel-title{
  font-size: clamp(1.3rem, 5vw, 1.8rem);
}
  .panel-sub{
  font-size: .95rem;
}
  .xlink-card,.two-col{
  grid-template-columns: 1fr;
}
  .cards-grid{
  grid-template-columns: repeat(2,1fr);
}
}
@media (max-width: 560px){
  .split-hero-inner{
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
  .split-panel{
  min-height: clamp(200px, 44vw, 280px);
}
  .footer-grid{
  grid-template-columns: 1fr;
}
  .footer-cta{
  align-items: flex-start;
}
}

/* Mobile layout refinement: preserve the existing two-card homepage. */
html { overflow-x: clip; }
body { min-width: 0; }
.header-inner > *, .split-hero-inner > *, .hero-grid > *, .two-col > *, .cards-grid > * { min-width: 0; }
.brand-text { overflow-wrap: anywhere; }
.site-nav a, .header-cta .btn, .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 760px) {
  .container { padding-inline: 14px; }
  .header-inner { flex-wrap: wrap; gap: 8px 12px; padding-block: 10px; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand-text { font-size: clamp(.82rem, 3.5vw, 1rem); }
  .site-nav { order: 3; width: 100%; }
  .site-nav ul { justify-content: space-between; gap: 4px; }
  .site-nav li { min-width: 0; }
  .site-nav a { font-size: clamp(.76rem, 3vw, .95rem); padding: 8px 5px; text-align: center; }
  .header-cta { margin-left: auto; }
  .header-cta .btn.small { font-size: .82rem; padding: 8px 10px; }
  .split-hero-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .split-panel { min-width: 0; min-height: clamp(190px, 48vw, 280px); aspect-ratio: auto; }
  .split-panel .panel-content { padding: 10px; }
  .panel-title { font-size: clamp(1.05rem, 4.4vw, 1.6rem); line-height: 1.15; overflow-wrap: anywhere; }
  .panel-sub { font-size: clamp(.72rem, 2.6vw, .9rem); line-height: 1.3; }
  .hero-grid, .two-col, .xlink-card { grid-template-columns: minmax(0, 1fr); }
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  h1 { font-size: clamp(1.8rem, 7vw, 2.8rem); line-height: 1.13; overflow-wrap: anywhere; }
  h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
  img { max-width: 100%; object-fit: cover; }
}
@media (max-width: 360px) {
  .container { padding-inline: 10px; }
  .header-cta { width: 100%; }
  .header-cta .btn { width: 100%; }
  .split-hero-inner { gap: 6px; }
  .split-panel .panel-content { padding: 8px; }
  .panel-sub { font-size: .72rem; }
}