/* Ecopass HVAC — eco-leaning modern Barrhaven */
:root{
  --forest:#163D2A; --leaf:#2F7D4A; --sage:#C5D9C0; --mist:#EEF5EC;
  --sand:#F8F6F0; --ink:#1C2B22; --muted:#5A6B60; --line:#D5E3D4;
  --white:#fff; --tbc:#7A8A7E;
  --display:'Fraunces', Georgia, serif;
  --sans:'Outfit', system-ui, sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--sand);line-height:1.55;padding-bottom:78px;overflow-x:hidden}
@media(min-width:900px){body{padding-bottom:0}}
img{max-width:100%;height:auto;display:block} figure{margin:0} a{color:var(--leaf)}
.wrap{width:min(1100px,92%);margin:0 auto}
.tbc,.tbc-in{color:var(--tbc);font-size:.78rem}
.banner{background:var(--forest);color:#d7eadc;text-align:center;font-size:.78rem;padding:.45rem;margin:0}

.top{position:sticky;top:0;z-index:40;background:rgba(248,246,240,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-inner{display:flex;align-items:center;justify-content:space-between;padding:.65rem 0;gap:1rem}
.logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--forest);font-weight:800}
.logo-mark{width:36px;height:36px;border-radius:50%;background:linear-gradient(145deg,#3A9B5C,#1E6B3C);box-shadow:inset 0 0 0 3px #A8D4B4;position:relative}
.logo-mark::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;background:rgba(255,255,255,.85);box-shadow:0 -5px 0 rgba(255,255,255,.7),0 5px 0 rgba(255,255,255,.7)}
.logo span{font-size:1.05rem;letter-spacing:.02em}
.nav{display:none;gap:1rem;font-size:.9rem;font-weight:600}
.nav a{color:var(--forest);text-decoration:none}
.pill-call{background:var(--leaf);color:#fff;text-decoration:none;padding:.55rem 1rem;border-radius:999px;font-weight:700;font-size:.88rem}
@media(min-width:780px){.nav{display:flex}}

.hero{padding:1.5rem 0 0}
.hero-card{display:grid;background:var(--mist);border-radius:28px;overflow:hidden;border:1px solid var(--line)}
@media(min-width:900px){.hero-card{grid-template-columns:1fr 1fr;min-height:480px}}
.hero-text{padding:1.6rem 1.4rem 1.8rem;display:flex;flex-direction:column;justify-content:center}
@media(min-width:900px){.hero-text{padding:2.4rem}}
.kicker{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--sage);color:var(--forest);font-size:.78rem;font-weight:700;padding:.3rem .7rem;border-radius:999px;margin-bottom:1rem}
.hero-text h1{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,4.2vw,2.7rem);line-height:1.12;margin:0 0 .7rem;color:var(--forest)}
.hero-text .lede{margin:0 0 1.2rem;color:var(--muted);font-size:1.05rem;max-width:34ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.55rem}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.15rem;border-radius:999px;font-weight:700;text-decoration:none;font-size:.95rem}
.btn-main{background:var(--forest);color:#fff}
.btn-soft{background:#fff;color:var(--forest);border:1.5px solid var(--leaf)}
.hero-media{position:relative;min-height:260px}
.hero-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
@media(max-width:899px){.hero-media{position:relative;aspect-ratio:4/3}.hero-media img{position:relative}}
.credit{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.62);color:#fff;font-size:.66rem;padding:.15rem .5rem;border-radius:6px;z-index:2;max-width:calc(100% - 16px)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.4rem 0 0;padding:0 0 1.5rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem;text-align:center}
.stat strong{display:block;font-family:var(--display);font-size:1.5rem;color:var(--leaf)}
.stat span{font-size:.78rem;color:var(--muted)}
@media(max-width:560px){.stats{grid-template-columns:1fr}}

section{padding:2.3rem 0}
section h2{font-family:var(--display);font-size:clamp(1.4rem,3vw,1.95rem);color:var(--forest);margin:0 0 .35rem}
.lead{color:var(--muted);margin:0 0 1.2rem;max-width:52ch}

.svc-grid{display:grid;gap:.9rem}
@media(min-width:700px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
.svc{background:#fff;border-radius:20px;padding:1.15rem;border:1px solid var(--line);display:grid;gap:.7rem}
.svc .ico{width:44px;height:44px;border-radius:12px;background:var(--mist);display:grid;place-items:center;color:var(--leaf);font-size:1.3rem}
.svc h3{margin:0;font-size:1.05rem;color:var(--forest)}
.svc p{margin:0;font-size:.92rem;color:var(--muted)}

.split{display:grid;gap:1.2rem}
@media(min-width:860px){.split{grid-template-columns:1.1fr .9fr;align-items:stretch}}
.photo-stack{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.photo-stack figure{margin:0;position:relative;border-radius:16px;overflow:hidden}
.photo-stack img{width:100%;aspect-ratio:3/4;object-fit:cover}
.photo-stack figure:first-child{grid-row:span 2}
.photo-stack figure:first-child img{aspect-ratio:auto;height:100%}
.blurb{background:var(--forest);color:#e5f2e9;border-radius:22px;padding:1.5rem 1.4rem}
.blurb h2{color:#fff}
.blurb p{opacity:.92}
.blurb .note{margin-top:1rem;padding:.7rem .85rem;background:rgba(255,255,255,.08);border-radius:12px;font-size:.9rem}

.rev-band{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.revs{display:grid;gap:.9rem}
@media(min-width:800px){.revs{grid-template-columns:1fr 1fr}}
.rev{background:#fff;border-radius:18px;padding:1.15rem;border:1px solid var(--line)}
.rev .stars{color:#E0A800;margin-bottom:.3rem}
.rev blockquote{margin:0 0 .6rem;font-size:.95rem}
.rev .who{font-size:.82rem;color:var(--muted);font-weight:600}

.contact-grid{display:grid;gap:1rem}
@media(min-width:800px){.contact-grid{grid-template-columns:1fr 1fr}}
.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.2rem}
.hours{width:100%;border-collapse:collapse;font-size:.92rem}
.hours td{padding:.38rem 0;border-bottom:1px dotted var(--line)}
.hours td:last-child{text-align:right;font-weight:600}
.clist{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.clist a{font-weight:700;color:var(--forest);text-decoration:none}

.foot{background:var(--forest);color:#c5d9c8;padding:2rem 0 1.3rem;font-size:.9rem}
.foot a{color:#b7e0c0}
.foot .sample{color:#fff;margin-top:1rem}
.foot .credits{font-size:.78rem;opacity:.85}

.mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;gap:.55rem;padding:.55rem .75rem calc(.55rem + env(safe-area-inset-bottom));background:rgba(248,246,240,.97);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(0,0,0,.08)}
.mbar a{display:flex;align-items:center;justify-content:center;padding:.72rem;border-radius:999px;font-weight:800;text-decoration:none}
.mb-call{background:var(--leaf);color:#fff}
.mb-dir{background:#fff;color:var(--forest);border:1.5px solid var(--leaf)}
@media(min-width:900px){.mbar{display:none}}