/* ============================================================
   Smart Home Air & Heat — AI-Search Site Design System
   Brand colors ONLY: #FE4A00 #f04f25 #234190 #0a1628 #3a7bd5
   #fff #f3f3f3 #f0f2f5 #374151 #4b5563
   ============================================================ */
:root{
  --orange:#FE4A00;
  --orange-2:#f04f25;
  --navy:#234190;
  --dark:#0a1628;
  --blue:#3a7bd5;
  --gray-bg:#f3f3f3;
  --gray-bg-2:#f0f2f5;
  --text:#374151;
  --text-2:#4b5563;
  --white:#fff;
  --radius:12px;
  --shadow:0 2px 12px rgba(10,22,40,.08);
  --shadow-lg:0 8px 30px rgba(10,22,40,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text);line-height:1.65;background:var(--white);font-size:17px}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}
h1,h2,h3,h4{font-family:'Oswald',sans-serif;color:var(--dark);line-height:1.2;font-weight:600}
h1{font-size:clamp(1.9rem,4.5vw,3rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:clamp(1.15rem,2.2vw,1.45rem)}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.narrow{max-width:860px}

/* ---------- Skip nav ---------- */
.skip-nav{position:absolute;left:-9999px;background:var(--dark);color:var(--white);padding:10px 18px;z-index:999}
.skip-nav:focus{left:10px;top:10px}

/* ---------- Top bar ---------- */
.topbar{background:var(--dark);color:var(--white);font-size:13px;padding:7px 0;text-align:center}
.topbar strong{color:var(--orange)}
.topbar a{color:var(--white);text-decoration:none;font-weight:700}

/* ---------- Nav ---------- */
.nav{background:var(--white);border-bottom:3px solid var(--navy);position:sticky;top:0;z-index:100;box-shadow:var(--shadow)}
.nav-inner{max-width:1160px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.nav-logo img{width:150px;height:61px}
.nav-links{display:flex;gap:4px;list-style:none;align-items:center;flex-wrap:wrap}
.nav-links a{text-decoration:none;color:var(--dark);font-weight:600;font-size:13.5px;padding:8px 10px;border-radius:6px}
.nav-links a:hover,.nav-links a[aria-current="page"]{background:var(--gray-bg-2);color:var(--navy)}
.nav-call{background:var(--orange);color:var(--white)!important;padding:10px 18px!important;border-radius:8px;font-size:14.5px!important;white-space:nowrap}
.nav-call:hover{background:var(--orange-2)!important;color:var(--white)!important}
.nav-toggle{display:none;background:none;border:2px solid var(--navy);border-radius:8px;padding:6px 12px;font-size:20px;color:var(--navy);cursor:pointer}
@media(max-width:980px){
  .nav-toggle{display:block}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--white);flex-direction:column;align-items:stretch;padding:12px 20px 20px;box-shadow:var(--shadow-lg);max-height:75vh;overflow-y:auto}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 10px;font-size:16px;border-bottom:1px solid var(--gray-bg-2)}
}

/* ---------- Breadcrumbs ---------- */
.crumbs{font-size:13px;color:var(--text-2);padding:14px 0}
.crumbs a{color:var(--text-2);text-decoration:none}
.crumbs a:hover{color:var(--navy);text-decoration:underline}
.crumbs span{color:var(--orange);margin:0 6px}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(135deg,var(--dark) 0%,var(--navy) 70%,var(--blue) 130%);color:var(--white);padding:56px 0 48px}
.hero h1{color:var(--white)}
.hero .eyebrow{display:inline-block;background:var(--orange);color:var(--white);font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;padding:5px 14px;border-radius:20px;margin-bottom:16px;font-weight:600}
.hero p{color:var(--white)}

/* ---------- THE ANSWER BOX (signature element) ---------- */
.answer-box{background:var(--white);border-left:6px solid var(--orange);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:26px 30px;margin:26px 0;color:var(--text)}
.hero .answer-box{margin-bottom:0}
.answer-box .answer-label{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy);font-weight:600;margin-bottom:8px;display:block}
.answer-box p{font-size:1.12rem;color:var(--dark);font-weight:500;line-height:1.6}
.answer-box strong{color:var(--navy)}

/* ---------- Updated stamp ---------- */
.updated{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--text-2);background:var(--gray-bg-2);border-radius:20px;padding:5px 14px;margin:10px 0}
.updated::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);display:inline-block}
.byline{font-size:13.5px;color:var(--text-2);margin:8px 0 0}
.byline strong{color:var(--dark)}

/* ---------- Sections ---------- */
.section{padding:52px 0}
.section-alt{background:var(--gray-bg-2)}
.section-dark{background:var(--dark);color:var(--white)}
.section-dark h2,.section-dark h3{color:var(--white)}
.section-dark p{color:var(--gray-bg-2)}
.kicker{font-family:'Oswald',sans-serif;color:var(--orange);text-transform:uppercase;letter-spacing:2px;font-size:13px;font-weight:600;display:block;margin-bottom:8px}

/* ---------- Q&A blocks: question-styled H2s ---------- */
.qa h2,.q-head{display:flex;align-items:flex-start;gap:12px;margin:44px 0 14px;scroll-margin-top:90px}
.qa h2::before,.q-head::before{content:"Q";flex:none;width:34px;height:34px;border-radius:8px;background:var(--navy);color:var(--white);font-family:'Oswald',sans-serif;display:flex;align-items:center;justify-content:center;font-size:18px;margin-top:2px}
.qa .quick{background:var(--gray-bg-2);border-left:4px solid var(--orange);padding:14px 18px;border-radius:0 8px 8px 0;font-weight:600;color:var(--dark);margin:0 0 14px}
.qa p{margin:0 0 14px}
.qa ul,.qa ol,article ul,article ol{margin:0 0 16px 24px}
.qa li,article li{margin-bottom:7px}

/* ---------- Stat callout / quote ---------- */
.stat-call{background:linear-gradient(135deg,var(--navy),var(--blue));color:var(--white);border-radius:var(--radius);padding:22px 26px;margin:22px 0}
.stat-call .big{font-family:'Oswald',sans-serif;font-size:2rem;color:var(--white);display:block}
.stat-call p{color:var(--gray-bg-2);margin:4px 0 0;font-size:.98rem}
.chris-quote{border-left:4px solid var(--blue);background:var(--gray-bg);padding:18px 22px;border-radius:0 var(--radius) var(--radius) 0;margin:22px 0;font-style:italic;color:var(--dark)}
.chris-quote footer{font-style:normal;font-size:13.5px;color:var(--text-2);margin-top:8px;font-weight:600}

/* ---------- Tables ---------- */
.tbl-wrap{overflow-x:auto;margin:22px 0;border-radius:var(--radius);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;background:var(--white);font-size:15.5px;min-width:520px}
caption{caption-side:top;text-align:left;font-family:'Oswald',sans-serif;font-size:1.05rem;color:var(--dark);padding:14px 16px;background:var(--white);font-weight:600}
th{background:var(--dark);color:var(--white);text-align:left;padding:12px 16px;font-family:'Oswald',sans-serif;font-weight:500;letter-spacing:.5px;font-size:14px}
td{padding:12px 16px;border-bottom:1px solid var(--gray-bg-2);color:var(--text)}
tr:nth-child(even) td{background:var(--gray-bg)}
tr.hl td{background:var(--orange);color:var(--white);font-weight:700}
td strong{color:var(--navy)}

/* ---------- FAQ (visible, CSS-only accordion) ---------- */
.faq{margin:22px 0}
.faq details{background:var(--white);border:1px solid var(--gray-bg-2);border-radius:10px;margin-bottom:10px;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;padding:16px 20px;font-weight:700;color:var(--dark);font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--orange);font-size:1.5rem;font-weight:400;flex:none}
.faq details[open] summary::after{content:"–"}
.faq .faq-a{padding:0 20px 18px;color:var(--text)}
.faq .faq-a p{margin-bottom:10px}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:20px;margin:26px 0}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;border-top:4px solid var(--navy)}
.card.hot{border-top-color:var(--orange)}
.card h3{margin-bottom:8px}
.card p{font-size:.97rem;color:var(--text-2)}
.card a.more{display:inline-block;margin-top:10px;color:var(--orange);font-weight:700;text-decoration:none}
.card a.more:hover{text-decoration:underline}

/* ---------- Trust strip ---------- */
.trust{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;padding:18px 0;font-size:14.5px}
.trust span{background:var(--white);border-radius:20px;padding:8px 16px;box-shadow:var(--shadow);font-weight:600;color:var(--dark)}
.trust span b{color:var(--orange)}

/* ---------- Buttons / CTA ---------- */
.btn{display:inline-block;background:var(--orange);color:var(--white);font-family:'Oswald',sans-serif;font-size:1.05rem;letter-spacing:.5px;padding:14px 30px;border-radius:10px;text-decoration:none;font-weight:600;border:none;cursor:pointer}
.btn:hover{background:var(--orange-2)}
.btn-ghost{background:transparent;border:2px solid var(--white);color:var(--white)}
.btn-ghost:hover{background:var(--white);color:var(--navy)}
.btn-navy{background:var(--navy)}
.btn-navy:hover{background:var(--blue)}
.cta-band{background:linear-gradient(135deg,var(--navy),var(--blue));color:var(--white);border-radius:var(--radius);padding:34px;margin:34px 0;text-align:center}
.cta-band h2,.cta-band h3{color:var(--white);margin-bottom:8px}
.cta-band p{color:var(--gray-bg-2);margin-bottom:18px}
.cta-band .nap{font-size:13.5px;color:var(--gray-bg-2);margin-top:16px;margin-bottom:0}

/* ---------- Video facade ---------- */
.vid-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.yt-facade{position:relative;aspect-ratio:16/9;background:var(--dark) center/cover no-repeat;border-radius:var(--radius);overflow:hidden;cursor:pointer;border:none;width:100%;display:block;box-shadow:var(--shadow)}
.yt-facade::after{content:"";position:absolute;inset:0;margin:auto;width:64px;height:44px;background:var(--orange);border-radius:10px;clip-path:none}
.yt-facade .play{position:absolute;inset:0;margin:auto;width:0;height:0;border-left:22px solid var(--white);border-top:13px solid transparent;border-bottom:13px solid transparent;z-index:2}
.yt-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-card h3{font-size:1.02rem;margin:10px 0 4px}
.vid-card p{font-size:.9rem;color:var(--text-2)}

/* ---------- Review cards ---------- */
.review-card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;border-top:4px solid var(--orange)}
.review-card .stars{color:var(--orange);font-size:1.1rem;letter-spacing:2px}
.review-card p{font-size:.95rem;margin:10px 0}
.review-card footer{font-size:13px;color:var(--text-2);font-weight:600}

/* ---------- Related links band ---------- */
.related{background:var(--gray-bg);border-left:5px solid var(--orange);border-radius:0 var(--radius) var(--radius) 0;padding:20px 24px;margin:28px 0}
.related h3{font-size:1.05rem;margin-bottom:10px}
.related ul{list-style:none;margin:0}
.related li{margin-bottom:8px;padding-left:18px;position:relative}
.related li::before{content:"→";position:absolute;left:0;color:var(--orange);font-weight:700}
.related a{font-weight:600}

/* ---------- Footer ---------- */
footer.site{background:var(--dark);color:var(--gray-bg-2);padding:48px 0 24px;margin-top:56px}
footer.site h3{color:var(--white);font-size:1rem;margin-bottom:14px;letter-spacing:1px;text-transform:uppercase}
footer.site ul{list-style:none}
footer.site li{margin-bottom:8px;font-size:14px}
footer.site a{color:var(--gray-bg-2);text-decoration:none}
footer.site a:hover{color:var(--orange)}
.foot-grid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.foot-bottom{border-top:1px solid var(--navy);margin-top:34px;padding-top:20px;font-size:12.5px;text-align:center;color:var(--text-2)}
.foot-bottom a{color:var(--gray-bg-2)}

@media(max-width:640px){
  body{font-size:16px}
  .section{padding:38px 0}
  .answer-box{padding:20px}
  .hero{padding:40px 0 34px}
}