/* =========================================================
   Cybertron HVAC Demo — Cybertron Softech
   Static demo stylesheet (no build process, no frameworks)
   Typography scale matches the roofing demo baseline.
   ========================================================= */

html { font-size: 16px; scroll-behavior: smooth; }

:root{
  --navy:#0E2439;
  --navy-deep:#081627;
  --blue:#2E8FDE;
  --blue-dark:#1D6FB3;
  --orange:#E8622C;
  --orange-dark:#C24E20;
  --grey-light:#EEF1F4;
  --charcoal:#232A31;
  --white:#FFFFFF;
  --text-muted:#5A6470;
  --border:#E1E6EB;
  --radius:12px;
  --radius-lg:20px;
  --shadow-sm:0 2px 12px rgba(14,36,57,.10);
  --shadow-md:0 14px 34px rgba(14,36,57,.16);
  --shadow-lg:0 30px 70px rgba(14,36,57,.26);
  --maxw:1200px;
  --font-display:'Poppins','Segoe UI',Arial,sans-serif;
  --font-body:'Inter','Segoe UI',Arial,sans-serif;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-size:16px;
  line-height:1.65;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  font-family:var(--font-body);
  color:var(--charcoal);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.18;margin:0 0 .5em;font-weight:700;color:var(--navy);}
p{margin:0 0 1em;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.section{padding:96px 0;}
.section-tight{padding:64px 0;}
.bg-grey{background:var(--grey-light);}
.bg-navy{background:var(--navy);color:#fff;}
.bg-navy h2, .bg-navy h3{color:#fff;}
.eyebrow{
  display:inline-block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--orange-dark);background:rgba(232,98,44,.12);
  padding:6px 16px;border-radius:999px;margin-bottom:16px;
}
.section-head{max-width:740px;margin:0 auto 52px;text-align:center;}
.section-head h2{font-size:clamp(1.9rem,3vw,2.7rem);}
.section-head p{color:var(--text-muted);font-size:1.05rem;}
.demo-note{font-size:.8rem;color:var(--text-muted);font-style:italic;margin-top:6px;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 28px;border-radius:8px;font-weight:700;font-size:.98rem;
  border:2px solid transparent;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--orange);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--orange-dark);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.btn-blue{background:var(--blue);color:#fff;box-shadow:var(--shadow-sm);}
.btn-blue:hover{background:var(--blue-dark);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.5);color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.12);border-color:#fff;}
.btn-outline-dark{background:transparent;border-color:var(--navy);color:var(--navy);}
.btn-outline-dark:hover{background:var(--navy);color:#fff;}
.btn-block{width:100%;}
.btn-sm{padding:11px 18px;font-size:.98rem;}

/* Emergency bar */
.emergency-bar{position:sticky;top:0;z-index:100;background:var(--orange);color:#fff;padding:10px 0;}
.emergency-bar .container{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;text-align:center;}
.emergency-bar span{font-weight:700;font-size:.9rem;}
.emergency-bar .btn{padding:8px 16px;font-size:.88rem;background:var(--navy-deep);color:#fff;box-shadow:none;}
.emergency-bar .btn:hover{background:var(--navy);}

/* Header */
.site-header{position:sticky;top:41px;z-index:90;background:var(--white);border-bottom:1px solid var(--border);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:var(--maxw);margin:0 auto;gap:20px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.14rem;color:var(--navy);}
.brand .mark{
  width:40px;height:40px;border-radius:9px;background:var(--navy);
  display:flex;align-items:center;justify-content:center;color:var(--orange);font-weight:800;font-size:1.1rem;flex-shrink:0;
}
.main-nav{display:flex;align-items:center;gap:20px;}
.main-nav a{font-weight:600;font-size:.96rem;color:var(--charcoal);opacity:.82;transition:opacity .2s;}
.main-nav a:hover{opacity:1;}
.header-actions{display:flex;align-items:center;gap:12px;}
.call-btn{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--orange-dark);font-size:.96rem;}
.call-btn svg{width:18px;height:18px;flex-shrink:0;color:var(--orange-dark);}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--charcoal);}
.menu-toggle svg{width:28px;height:28px;}

@media (max-width:980px){
  .main-nav{
    position:fixed;inset:0 0 0 auto;width:80%;max-width:320px;background:var(--white);
    flex-direction:column;align-items:flex-start;padding:100px 30px 30px;gap:18px;
    box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .3s ease;z-index:95;overflow-y:auto;
  }
  .main-nav.open{transform:translateX(0);}
  .menu-toggle{display:block;position:relative;z-index:96;}
  .call-btn span{display:none;}
  .header-actions .btn-primary{padding:10px 14px;font-size:.88rem;}
  .emergency-bar span{font-size:.84rem;}
}
.nav-backdrop{position:fixed;inset:0;background:rgba(8,22,39,.6);opacity:0;pointer-events:none;transition:opacity .3s;z-index:65;}
.nav-backdrop.open{opacity:1;pointer-events:auto;}

/* Hero */
.hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;position:relative;overflow:hidden;padding:64px 0 80px;}
.hero-blob{position:absolute;border-radius:50%;filter:blur(80px);z-index:1;}
.hero-blob.b1{width:460px;height:460px;background:var(--orange);opacity:.22;top:-160px;right:-100px;}
.hero-blob.b2{width:340px;height:340px;background:var(--blue);opacity:.22;bottom:-160px;left:-80px;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:2;}
.hero .eyebrow{background:rgba(232,98,44,.18);color:var(--orange);}
.hero h1{color:#fff;font-size:clamp(2.2rem,4.6vw,3.5rem);margin-bottom:20px;}
.hero .lede{opacity:.86;max-width:560px;margin-bottom:28px;font-size:1.06rem;}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:28px;}
.hero-trust{display:flex;flex-wrap:wrap;gap:16px 22px;}
.hero-trust span{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;opacity:.92;}
.hero-trust svg{width:18px;height:18px;color:var(--blue);flex-shrink:0;}
.hero-visual{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);margin-bottom:24px;}
.hero-visual img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;} .hero{padding:48px 0 52px;}}

/* Booking card */
.estimate-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:32px;border:1px solid var(--border);}
.estimate-card h3{font-size:1.3rem;margin-bottom:6px;}
.estimate-card .sub{color:var(--text-muted);font-size:.96rem;margin-bottom:22px;}
.field{margin-bottom:16px;}
.field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px;color:var(--charcoal);}
.field input, .field select, .field textarea{
  width:100%;padding:13px 14px;border-radius:8px;border:1.5px solid var(--border);
  font-family:inherit;font-size:.96rem;background:#fff;color:var(--charcoal);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--orange);}
.form-note{font-size:.9rem;color:var(--text-muted);margin-top:14px;text-align:center;}

/* Trust strip */
.trust-strip{background:var(--grey-light);padding:28px 0;border-bottom:1px solid var(--border);}
.trust-strip .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;}
.trust-item{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.92rem;color:var(--navy);}
.trust-item svg{width:19px;height:19px;color:var(--orange-dark);flex-shrink:0;}

/* Grids */
.grid{display:grid;gap:26px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:960px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

/* Services */
.svc-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 26px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.svc-icon{width:52px;height:52px;border-radius:14px;background:rgba(46,143,222,.12);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--blue-dark);}
.svc-icon svg{width:26px;height:26px;}
.svc-card h3{font-size:1.08rem;}
.svc-card p{color:var(--text-muted);font-size:.96rem;flex-grow:1;}
.svc-card .learn-more{color:var(--orange-dark);font-weight:700;font-size:.94rem;margin-top:10px;}

/* Emergency section */
.emergency-section{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;}
.emergency-section h2{color:#fff;}
.emergency-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);padding:26px;text-align:center;}
.emergency-card .ico{width:48px;height:48px;border-radius:12px;background:rgba(232,98,44,.22);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--orange);}
.emergency-card .ico svg{width:24px;height:24px;}
.emergency-card h3{color:#fff;font-size:1.02rem;margin-bottom:0;}
.safety-note{background:rgba(255,255,255,.07);border-left:3px solid var(--orange);border-radius:var(--radius);padding:18px 22px;font-size:.92rem;color:rgba(255,255,255,.85);margin-top:32px;max-width:820px;margin-left:auto;margin-right:auto;}

/* Feature 2-col */
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
.feature-visual{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.feature-visual img{aspect-ratio:4/4.6;object-fit:cover;}
.checklist{margin:0;}
.checklist li{display:flex;align-items:flex-start;gap:12px;font-size:.98rem;font-weight:600;color:var(--charcoal);margin-bottom:16px;}
.checklist li:last-child{margin-bottom:0;}
.checklist li svg{width:22px;height:22px;color:var(--orange-dark);flex-shrink:0;margin-top:1px;}
.checklist-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow-sm);}
@media (max-width:900px){.feature-grid{grid-template-columns:1fr;}}

/* Repair vs replace comparison */
.compare-cols{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
.compare-col{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-sm);}
.compare-col.replace{border-color:var(--orange);}
.compare-col h3{font-size:1.15rem;margin-bottom:18px;}
.compare-col li{display:flex;align-items:flex-start;gap:10px;font-size:.96rem;color:var(--text-muted);margin-bottom:12px;}
.compare-col li svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--blue-dark);}
.compare-col.replace li svg{color:var(--orange-dark);}
@media (max-width:800px){.compare-cols{grid-template-columns:1fr;}}

/* Plan cards */
.price-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 26px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;}
.price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.price-card h3{font-size:1.1rem;margin-bottom:6px;}
.price-card .best-for{font-size:.9rem;color:var(--blue-dark);font-weight:700;margin-bottom:14px;}
.price-card li{display:flex;align-items:flex-start;gap:8px;font-size:.94rem;color:var(--text-muted);margin-bottom:10px;}
.price-card li svg{width:16px;height:16px;color:var(--orange-dark);flex-shrink:0;margin-top:3px;}

/* Finance cards */
.finance-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-sm);text-align:center;}
.finance-icon{width:48px;height:48px;border-radius:12px;background:rgba(232,98,44,.12);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--orange-dark);}
.finance-icon svg{width:24px;height:24px;}
.finance-card h3{font-size:1.02rem;margin-bottom:0;}

/* Gallery */
.gallery-item{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;position:relative;background:#fff;border:1px solid var(--border);}
.gallery-item img{aspect-ratio:1/.8;object-fit:cover;transition:transform .35s;}
.gallery-item:hover img{transform:scale(1.06);}
.gallery-body{padding:16px 18px;}
.gallery-cat{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--orange-dark);}
.gallery-body h3{font-size:1.02rem;margin:6px 0 4px;}
.gallery-loc{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;color:var(--blue-dark);font-weight:600;margin-bottom:6px;}
.gallery-body p{font-size:.94rem;color:var(--text-muted);margin-bottom:0;}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(6,14,24,.94);display:none;align-items:center;justify-content:center;z-index:200;padding:30px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:min(900px,92vw);max-height:86vh;border-radius:12px;}
.lightbox-close{position:absolute;top:24px;right:28px;color:#fff;font-size:2rem;background:none;border:none;cursor:pointer;line-height:1;}

/* Why choose cards */
.feat-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 26px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;}
.feat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.feat-icon{width:50px;height:50px;border-radius:13px;background:rgba(46,143,222,.12);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--blue-dark);}
.feat-icon svg{width:24px;height:24px;}
.feat-card h3{font-size:1.06rem;}
.feat-card p{color:var(--text-muted);font-size:.96rem;margin-bottom:0;}

/* Process */
.process-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;}
.process-step{text-align:center;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px 20px;box-shadow:var(--shadow-sm);}
.process-step .step-badge{
  width:54px;height:54px;border-radius:50%;border:2px solid var(--orange);color:var(--orange-dark);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;margin:0 auto 14px;background:#fff;
}
.process-step h3{font-size:1rem;}
.process-step p{color:var(--text-muted);font-size:.94rem;}
@media (max-width:1080px){.process-steps{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.process-steps{grid-template-columns:1fr;}}

/* Reviews */
.review-card{background:#fff;border-radius:var(--radius-lg);padding:26px;border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.stars{color:var(--orange-dark);letter-spacing:2px;margin-bottom:10px;font-size:1rem;}
.review-card p.quote{font-style:italic;color:var(--charcoal);font-size:.98rem;}
.review-who{display:flex;align-items:center;gap:12px;margin-top:14px;}
.review-avatar{width:40px;height:40px;border-radius:50%;background:var(--navy);color:var(--orange);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;font-size:.92rem;}
.review-who .name{font-weight:700;font-size:.94rem;}
.review-who .loc{font-size:.9rem;color:var(--text-muted);}

/* Service area */
.area-section{background:var(--navy);color:#fff;}
.area-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:36px 0 40px;}
.area-card{background:rgba(255,255,255,.08);border-radius:var(--radius);padding:18px;text-align:center;font-weight:700;font-size:.94rem;}
@media (max-width:900px){.area-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:600px){.area-grid{grid-template-columns:repeat(2,1fr);}}

/* FAQ */
.faq-list{max-width:840px;margin:0 auto;}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;overflow:hidden;background:#fff;}
.faq-question{
  width:100%;text-align:left;background:none;border:none;padding:20px 24px;display:flex;align-items:center;
  justify-content:space-between;gap:14px;font-weight:700;font-size:1.02rem;color:var(--navy);cursor:pointer;
}
.faq-question .plus{width:22px;height:22px;flex-shrink:0;position:relative;}
.faq-question .plus::before,.faq-question .plus::after{content:'';position:absolute;background:var(--orange-dark);border-radius:2px;transition:transform .25s;}
.faq-question .plus::before{width:100%;height:3px;top:50%;left:0;transform:translateY(-50%);}
.faq-question .plus::after{height:100%;width:3px;left:50%;top:0;transform:translateX(-50%);}
.faq-item.open .plus::after{transform:translateX(-50%) rotate(90deg);opacity:0;}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-answer-inner{padding:0 24px 20px;color:var(--text-muted);font-size:.96rem;}
.faq-item.open .faq-answer{max-height:320px;}

/* Final CTA */
.final-cta{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;text-align:center;}
.final-cta h2{color:#fff;}
.final-cta p{opacity:.86;max-width:620px;margin:0 auto 32px;font-size:1.02rem;}
.final-cta .hero-ctas{justify-content:center;}

/* Contact form */
.form-card{background:#fff;border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow-md);border:1px solid var(--border);max-width:840px;margin:0 auto;}

/* Footer */
.site-footer{background:var(--navy-deep);color:#b6bcc3;padding:64px 0 26px;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:36px;margin-bottom:34px;}
.footer-grid h4{color:#fff;font-size:.98rem;margin-bottom:16px;}
.footer-grid p{font-size:.94rem;color:#8a9099;}
.footer-grid ul li{margin-bottom:11px;font-size:.94rem;}
.footer-grid ul li a:hover{color:#fff;}
.footer-brand .brand{color:#fff;margin-bottom:14px;}
.footer-brand .brand .mark{background:var(--orange);color:#fff;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.9rem;color:#767c84;
}
.footer-bottom a{font-weight:700;color:#fff;}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

.text-center{text-align:center;}

/* =========================================================
   Cybertron demo — common pass additions
   Appended block. No existing rule above was modified.
   Everything here is prefixed `cs-` (except the shared
   .social-links helper) so it cannot collide with this
   site's own theme classes, and it is colour-neutral: it
   inherits currentColor and this site's own CSS variables,
   so it picks up each site's palette automatically.
   ========================================================= */

/* --- Social icons (Facebook / Instagram) -----------------
   Colour-neutral on purpose: the chip borrows currentColor
   for both icon and border, so the same markup works on a
   light card and on a dark footer with no variant class.
   44px on phones keeps it above the minimum tap target. */
.social-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.social-links a{
  width:42px;height:42px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  color:inherit;border:1.5px solid currentColor;background:transparent;
  opacity:.72;flex-shrink:0;
  transition:opacity .2s ease,transform .2s ease;
}
.social-links a:hover,.social-links a:focus-visible{opacity:1;transform:translateY(-2px);}
.social-links svg{width:20px;height:20px;display:block;}
.cs-social-label{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;opacity:.6;margin-bottom:10px;
}
@media (max-width:640px){
  .social-links a{width:44px;height:44px;}
}

/* --- Contact layout --------------------------------------
   Info card and form sit in one row and stretch to the same
   height, so the shorter column can never leave a blank gap
   beneath it. minmax(0,..) lets both columns shrink below
   their content width, which is what prevents a long email
   or select box from forcing horizontal overflow. */
.cs-contact-grid{
  /* Some sites already wrap their contact area in a grid; span every column
     so this row is never squeezed into one cell of the parent grid.
     Harmless when the parent is not a grid. */
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  gap:24px;align-items:stretch;
}
.cs-contact-grid > *{min-width:0;height:100%;}
/* Pin the two columns explicitly. One site's own stylesheet forces a
   full-width grid-column on form elements, which pushed the form onto its
   own row and unbalanced the pair; explicit placement overrides that. */
.cs-contact-grid > .cs-info-card,
.cs-contact-grid > .contact-card,
.cs-contact-grid > .feat-card:not(form){grid-column:1;grid-row:1;}
.cs-contact-grid > form{grid-column:2;grid-row:1;margin:0;height:100%;}

.cs-info-card{
  background:var(--white,#fff);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:30px 26px;
  display:flex;flex-direction:column;
  min-width:0;
}
.cs-info-card h3{margin-bottom:20px;}
/* The rows grow to absorb the height the form column sets and
   spread evenly, instead of bunching at the top and leaving a
   hollow band above the button. */
.cs-info-list{
  list-style:none;margin:0;padding:0;
  flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;
  gap:14px;
}
.cs-info-list li{display:flex;align-items:flex-start;gap:12px;min-width:0;}
.cs-info-list svg{
  width:19px;height:19px;flex-shrink:0;margin-top:3px;opacity:.75;
}
.cs-info-list .cs-lbl{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;opacity:.6;margin-bottom:2px;
}
.cs-info-list .cs-val{
  font-size:.95rem;line-height:1.5;color:var(--text-muted);
  min-width:0;overflow-wrap:anywhere;
}
.cs-info-foot{margin-top:auto;padding-top:22px;}
.cs-info-foot .btn{margin-top:16px;}

/* Social row under the form, separated by a hairline. */
.cs-form-social{
  border-top:1px solid var(--border);
  margin-top:18px;padding-top:18px;text-align:center;
}
.cs-form-social .social-links{justify-content:center;}
.cs-form-social .cs-social-label{margin-bottom:10px;}

@media (max-width:900px){
  .cs-contact-grid{grid-template-columns:1fr;gap:20px;}
  .cs-contact-grid > .cs-info-card,
  .cs-contact-grid > .contact-card,
  .cs-contact-grid > .feat-card:not(form){grid-column:1;grid-row:auto;}
  .cs-contact-grid > form{grid-column:1;grid-row:auto;}
  /* Stacked: the card is sized by its own content again, so the
     rows should sit together rather than stretch apart. */
  .cs-info-list{flex:0 0 auto;justify-content:flex-start;}
  .cs-contact-grid > form{height:auto;}
}

/* --- Footer social --------------------------------------- */
.cs-footer-social{margin-top:18px;}
.cs-footer-social .social-links a{width:38px;height:38px;border-radius:10px;}
@media (max-width:640px){
  .cs-footer-social .social-links a{width:44px;height:44px;}
}

/* --- Image slot safety -----------------------------------
   Keeps every existing image slot from stretching once real
   photos replace the SVG placeholders later. Only sets
   object-fit, which has no effect on how the SVGs render now. */
img{max-width:100%;}
.cs-media-fit{display:block;width:100%;height:100%;object-fit:cover;}

/* --- Mobile header fit ------------------------------------
   PRE-EXISTING BUG (present before this pass): below ~560px the
   brand + call link + CTA + hamburger were wider than the
   viewport. That pushed the hamburger past the right edge, so
   the page scrolled sideways and the mobile menu button could
   end up unreachable. Nothing here changes the header's design
   or markup — it only lets the row shrink to fit. */
@media (max-width:600px){
  .header-inner{gap:10px;padding-left:16px;padding-right:16px;min-width:0;}
  .brand{font-size:1rem;min-width:0;gap:8px;}
  .brand .mark{flex-shrink:0;}
  .header-actions{gap:8px;min-width:0;}
  .header-actions .btn{padding:9px 12px;font-size:.82rem;white-space:nowrap;}
  .menu-toggle{flex-shrink:0;}
  .trust-bar .container{padding-left:16px;padding-right:16px;}
}
@media (max-width:400px){
  .brand{font-size:.94rem;}
  .header-actions .btn{padding:9px 10px;font-size:.78rem;}
}

/* --- Long CTA buttons on small screens --------------------
   PRE-EXISTING BUG: a few inline CTAs carry long labels
   ("Need help choosing? Request ...") and the .btn rule keeps
   them on one line, so at phone widths the button rendered
   ~470px wide inside a 390px viewport and dragged the whole
   page sideways. Letting the label wrap fixes the scroll
   without changing the button's styling anywhere else. */
@media (max-width:600px){
  .btn{max-width:100%;white-space:normal;}
  .header-actions .btn{white-space:nowrap;}
}

@media (max-width:600px){
  /* Brand may ellipsis rather than push the row wide. */
  .brand{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .call-btn{flex-shrink:0;}
  /* The header CTA duplicates CTAs that already appear in the hero and in
     every section below, and its label cannot shrink (nowrap), so on phones
     it was the single element forcing the hamburger off-screen. Hidden here
     only; unchanged from 601px up. */
  .header-actions .btn-primary{display:none;}
}
@media (max-width:420px){
  .header-inner{padding-left:12px;padding-right:12px;gap:8px;}
}

/* --- Mid-width nav crowding -------------------------------
   PRE-EXISTING BUG: between the mobile breakpoint (~980px) and
   roughly 1340px the full desktop nav, brand, call link and CTA
   together were wider than the viewport on the longer-nav demos,
   so laptops and small desktops scrolled sideways. Tightening
   spacing and type slightly in that band makes the row fit; the
   layout is untouched above and below it. */
@media (min-width:981px) and (max-width:1340px){
  .main-nav{gap:16px;min-width:0;}
  .main-nav a{font-size:.88rem;}
  .header-inner{gap:12px;}
  .header-actions{gap:10px;}
  .header-actions .btn{padding:9px 13px;font-size:.85rem;}
  .call-btn span{display:none;}
}

/* =========================================================
   Image integration pass — header nav polish
   Appended block. No existing rule above was modified.
   ========================================================= */

/* PRE-EXISTING BUG found while verifying this build: a nav label
   wrapped onto two lines at 1440px and again at 1000px, and at
   1024px the brand text sat only 13px from the first nav link.
   Cause: nav labels could wrap, and .brand could shrink while
   its text overflowed visibly.
   Measured after this fix, across 1440/1280/1180/1100/1081/1080/
   1024/1000/980/900/768/390: zero wrapped labels, minimum
   brand-to-nav clearance 35px, zero horizontal scroll. */
.main-nav{ flex-wrap:nowrap; }
.main-nav a{ white-space:nowrap; line-height:1.2; }
.brand{ flex-shrink:0; white-space:nowrap; }
.header-actions{ flex-shrink:0; }
.header-inner{ align-items:center; }

@media (min-width:1081px){
  .header-inner{ gap:clamp(16px,1.4vw,32px); }
  .main-nav{ gap:clamp(12px,1.2vw,22px); margin-left:clamp(10px,1vw,26px); }
}
/* Hand off to the hamburger at 1080px instead of 980px — below
   that the full nav plus brand and CTA cannot fit without either
   wrapping or crowding the brand. */
@media (max-width:1080px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:80%; max-width:320px;
    background:var(--white,#fff); flex-direction:column; align-items:flex-start;
    padding:100px 30px 30px; gap:24px; transform:translateX(100%);
    transition:transform .3s ease; z-index:95; box-shadow:var(--shadow-lg);
    overflow-y:auto;
  }
  .main-nav.open{ transform:translateX(0); }
  .menu-toggle{ display:block; position:relative; z-index:96; }
}

/* --- Container width / side gutters ------------------------
   Content was capped at 1200px, leaving 120px blank gutters at
   1440px. Widened to 1320px with a fluid gutter so the page uses
   more of the screen while keeping professional padding. The
   header, hero and footer all read the same --maxw token, so
   they widen together and stay aligned with one another. */
:root{ --maxw:1320px; }
.container,
.hero-grid{ padding-left:clamp(16px,2.2vw,32px); padding-right:clamp(16px,2.2vw,32px); }

/* --- Footer bottom -----------------------------------------
   Copyright left, credit right, both on one baseline; stacks
   centred on small screens rather than half-wrapping. */
.footer-bottom{ align-items:center; row-gap:12px; }
@media (max-width:640px){
  .footer-bottom{ flex-direction:column; align-items:center; text-align:center; }
}

/* =========================================================
   Final QA polish pass
   Appended block. No existing rule above was modified.
   ========================================================= */

/* --- Anchor scroll under the sticky bars -------------------
   The emergency bar is sticky at top:0 (41px) and the header is
   sticky beneath it, so a plain #anchor jump parked each section
   heading behind roughly 118px of fixed chrome. Sections now
   reserve that height when targeted. */
section[id]{ scroll-margin-top:124px; }
@media (max-width:1080px){ section[id]{ scroll-margin-top:112px; } }
@media (max-width:600px){ section[id]{ scroll-margin-top:104px; } }
html{ scroll-behavior:smooth; }

/* --- Non-clickable social icons ----------------------------
   Real profile URLs are not available, so the icons are no longer
   links (dead href="#" on a public site is worse than no link).
   They keep the same look but do not invite a click. */
.social-links .social-icon{
  width:42px; height:42px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  color:inherit; border:1.5px solid currentColor; background:transparent;
  opacity:.62; flex-shrink:0; cursor:default;
}
.social-links .social-icon svg{ width:20px; height:20px; display:block; }
@media (max-width:640px){ .social-links .social-icon{ width:44px; height:44px; } }

/* --- Contact: balance the column ---------------------------
   The info card carries five rows against a long service form.
   Rather than stretching those rows apart, the column gains a
   short "what happens next" sequence, which is also the question
   every HVAC enquiry raises. */
.cs-contact-grid{ align-items:start; }
.cs-contact-grid > .cs-info-card{ grid-column:1; grid-row:1; height:auto; }
.cs-contact-grid > .cs-next-card{ grid-column:1; grid-row:2; height:auto; }
.cs-contact-grid > form{ grid-column:2; grid-row:1 / span 2; height:auto; align-self:start; }
.cs-next-card{
  margin-top:20px; background:var(--cream,#f7f4ef);
  border:1px solid var(--border); border-left:3px solid var(--orange,#e4610f);
  border-radius:var(--radius-lg); padding:clamp(22px,2.4vw,30px);
  box-shadow:var(--shadow-sm);
}
.cs-next-card h3{ margin-bottom:16px; }
.cs-next-list{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.cs-next-list li{ display:flex; gap:14px; align-items:flex-start; min-width:0; }
.cs-next-num{
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  background:var(--orange,#e4610f); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem;
}
.cs-next-list li > span:last-child{ min-width:0; font-size:.94rem; color:var(--text-muted); line-height:1.5; }
.cs-next-list strong{ display:block; color:var(--navy,#12263f); font-size:.98rem; margin-bottom:3px; }
.cs-next-note{
  margin:18px 0 0; padding-top:16px; border-top:1px solid var(--border);
  font-size:.92rem; color:var(--text-muted);
}
.cs-next-note strong{ color:var(--orange,#e4610f); }
@media (max-width:900px){
  .cs-contact-grid > .cs-info-card,
  .cs-contact-grid > .cs-next-card,
  .cs-contact-grid > form{ grid-column:1; grid-row:auto; }
}

/* --- Card variety ------------------------------------------
   Almost every box was the same flat white. Each family now has
   its own identity within one system; all keep dark-on-light
   text so no contrast is lost. */
.svc-card, .feat-card, .price-card, .review-card, .finance-card,
.emergency-card, .checklist-card{
  height:100%;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.svc-card:hover, .feat-card:hover, .price-card:hover,
.finance-card:hover, .review-card:hover{
  transform:translateY(-4px); box-shadow:var(--shadow-lg);
}
/* Service cards: accent rail that fills on hover. */
.svc-card{ position:relative; overflow:hidden; }
.svc-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--orange,#e4610f); transform:scaleY(.25); transform-origin:top;
  opacity:.45; transition:transform .28s ease, opacity .28s ease;
}
.svc-card:hover::before{ transform:scaleY(1); opacity:1; }
/* Emergency cards read as urgent, not as another white box. */
.emergency-card{
  border-left:3px solid var(--orange,#e4610f);
  background:linear-gradient(180deg, rgba(228,97,15,.05) 0%, #fff 60%);
}
/* Pricing, financing and reviews: accent top edge. */
.price-card, .finance-card, .review-card{ border-top:3px solid var(--orange,#e4610f); }
/* Checklists read as supporting detail. */
.checklist-card{
  background:linear-gradient(180deg, var(--cream,#f7f4ef) 0%, #fff 70%);
  border-left:3px solid var(--orange,#e4610f);
}
/* Area chips get definition on the dark band. */
.area-card{
  border:1px solid rgba(255,255,255,.14);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.area-card:hover{
  background:rgba(255,255,255,.13);
  border-color:color-mix(in srgb, var(--orange,#e4610f) 55%, transparent);
  transform:translateY(-2px);
}
.grid > *{ min-width:0; }

/* =========================================================
   Multi-page conversion + contrast/spacing fixes
   Appended block. No existing rule above was modified.
   ========================================================= */

/* --- CONTRAST BUG: white cards inheriting white text --------
   .finance-card and .emergency-card are white cards sitting in a
   dark navy section. The section sets color:#fff, the cards
   inherit it, and the result is white text on a white card —
   invisible until selected. Both now declare their own dark text.
   (The emergency card's near-white gradient came from the previous
   polish pass; it is corrected here rather than left broken.) */
.finance-card, .emergency-card{
  background:#fff;
  color:var(--text,#232a31);
}
.finance-card h3, .finance-card h4, .finance-card strong,
.emergency-card h3, .emergency-card h4, .emergency-card strong{
  color:var(--navy,#0e2439);
}
.finance-card p, .finance-card li, .finance-card span,
.emergency-card p, .emergency-card li, .emergency-card span{
  color:var(--text-muted,#5a6470);
}
.finance-card svg, .emergency-card svg{ color:var(--orange,#e8622c); }

/* --- Header: spacing and single CTA ------------------------
   The brand sat tight against the nav and the CTA button touched
   the right edge. Brand and actions no longer shrink, and the row
   keeps real breathing room at every desktop width. */
.header-inner{ align-items:center; }
.brand{ flex-shrink:0; white-space:nowrap; }
.brand .mark{ flex-shrink:0; }
.header-actions{ flex-shrink:0; display:flex; align-items:center; gap:14px; }
.main-nav{ flex-wrap:nowrap; }
.main-nav a{ white-space:nowrap; line-height:1.2; }
@media (min-width:1181px){
  .header-inner{ max-width:1400px; gap:clamp(18px,2vw,38px); padding-left:clamp(20px,2vw,32px); padding-right:clamp(20px,2vw,32px); }
  .main-nav{ gap:clamp(12px,1.2vw,22px); margin-left:clamp(12px,1.2vw,28px); }
}
@media (min-width:1181px) and (max-width:1520px){
  .main-nav a{ font-size:.88rem; }
  .header-actions .call-btn{ font-size:.86rem; }
}
.main-nav a.active{ color:var(--orange,#e8622c); font-weight:700; position:relative; }
@media (min-width:1181px){
  .main-nav a.active::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
    background:currentColor; border-radius:2px;
  }
}

/* --- Inner page hero ---------------------------------------
   Each inner page opens with its own heading block instead of
   dropping straight into a section, so no page looks headless. */
.page-hero{
  background:linear-gradient(135deg, var(--navy,#0e2439) 0%, #16324f 100%);
  color:#fff; padding:clamp(48px,6vw,86px) 0 clamp(40px,5vw,66px);
}
.page-hero h1{
  color:#fff; font-size:clamp(1.9rem,4vw,3rem); margin:10px 0 14px; line-height:1.1;
  text-wrap:balance;
}
.page-hero p{ color:rgba(255,255,255,.82); max-width:680px; margin:0 0 26px; }
.page-hero .eyebrow{ background:rgba(255,255,255,.14); color:#fff; }
.page-hero .hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; }
.btn-outline-light{
  border:1.5px solid rgba(255,255,255,.5); color:#fff; background:transparent;
}
.btn-outline-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.breadcrumb{
  margin-top:22px; font-size:.86rem; color:rgba(255,255,255,.65);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.breadcrumb a{ color:rgba(255,255,255,.85); }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb span{ opacity:.5; }

/* --- Section spacing ---------------------------------------
   Consistent rhythm now that pages hold fewer sections. */
.page-hero + .section{ padding-top:clamp(44px,5vw,72px); }

/* --- Home hero balance -------------------------------------
   The right hero column stacked the photo ON TOP of the booking
   form, running 750px taller than the left column. Dropping the
   photo would weaken the first impression and shortening the form
   would cost booking fields, so the photo moved to the LEFT column
   under the headline and CTAs. Both sides now carry real weight
   and the booking form starts at the top of the fold. */
.hero-grid{ align-items:stretch; }
.hero-grid > *{ min-width:0; }
.hero-grid > div:first-of-type{ display:flex; flex-direction:column; }
.hero-grid .hero-visual{
  flex:1 1 auto; margin-top:26px; min-height:210px; overflow:hidden;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
}
.hero-grid .hero-visual img{
  width:100%; height:100%; aspect-ratio:auto;
  object-fit:cover; object-position:center center; display:block;
}
@media (max-width:1180px){
  .hero-grid{ align-items:start; }
  .hero-grid > div:first-of-type{ display:block; }
  .hero-grid .hero-visual{ flex:0 0 auto; min-height:0; aspect-ratio:4/3; }
}

/* =========================================================
   Second patch — header spacing, single CTA, brand social
   Appended block. No existing rule above was modified.
   ========================================================= */

/* --- Header breathing room ---------------------------------
   Measured only 16px between the orange emergency bar and the
   brand, which read as cramped in the screenshot. The header row
   now has real vertical padding without becoming oversized, and
   the brand / nav / CTA sit on one centre line. */
.site-header .header-inner{
  padding-top:clamp(14px,1.4vw,20px);
  padding-bottom:clamp(14px,1.4vw,20px);
  align-items:center;
}
.site-header{ box-shadow:0 1px 0 rgba(14,36,57,.06); }
@media (max-width:1080px){
  .site-header .header-inner{ padding-top:12px; padding-bottom:12px; }
}

/* --- Social icons in brand colours -------------------------
   The icons were a flat grey, which read as broken placeholders.
   They now carry recognisable Facebook blue and the Instagram
   gradient, with a white glyph for contrast. They remain
   non-clickable (no real profile URLs), so the cursor still does
   not promise a destination. */
.social-links .social-icon{
  border:none; opacity:1; color:#fff;
  box-shadow:0 2px 8px rgba(14,36,57,.18);
  transition:transform .2s ease, box-shadow .2s ease;
}
.social-links .social-icon svg{ color:#fff; }
.social-links .social-icon[aria-label="Facebook"]{ background:#1877F2; }
.social-links .social-icon[aria-label="Instagram"]{
  background:radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.social-links .social-icon:hover{
  transform:translateY(-2px);
  box-shadow:0 5px 14px rgba(14,36,57,.26);
}
/* Instagram's glyph is stroked, Facebook's is filled — make both
   read as white on their coloured tile. */
.social-links .social-icon[aria-label="Instagram"] svg *{ stroke:#fff; }
.social-links .social-icon[aria-label="Facebook"] svg *{ fill:#fff; }

/* =========================================================
   Final minor QA patch — sticky stacking
   Appended block. No existing rule above was modified.
   ========================================================= */

/* PROBLEM: .site-header was pinned with a hard-coded top:41px while the
   orange .emergency-bar actually measures 63px on desktop and, because its
   row wraps, 101px at 768, 124px at 430/390 and 146px at 360. Once the page
   scrolled, the white header slid up over the bar by 22px on desktop and up
   to 105px on a phone.
   FIX: both bars now live inside one sticky unit, so the header sits after
   the bar in normal flow and can never overlap it, whatever height the bar
   takes. No magic numbers, nothing to re-tune if the bar text changes. */
.sticky-top{
  position:sticky; top:0; z-index:100;
  background:var(--white,#fff);
}
.sticky-top .emergency-bar{ position:static; top:auto; z-index:auto; }
.sticky-top .site-header{ position:static; top:auto; z-index:auto; }

/* Anchor targets clear the whole sticky unit. --topbar-h is kept in sync with
   the unit's real height by hvac.js; these values are the fallback if JS has
   not run yet. */
:root{ --topbar-h:136px; }
section[id]{ scroll-margin-top:calc(var(--topbar-h) + 16px); }
@media (max-width:1080px){ :root{ --topbar-h:150px; } }
@media (max-width:600px){ :root{ --topbar-h:190px; } }

/* --- Home hero form: compact to match the left column -------
   The left column's content ended 299px above the booking form,
   leaving a visible empty block beneath the trust bullets. The
   hero form now pairs its fields two-up and drops the long
   message box, so the two columns finish together — the same
   shape as the Custom Home Builders hero. The full form, message
   box included, is untouched on the contact page. */
.estimate-card .grid-2{ align-items:start; }
.estimate-card .grid-2 > .field{ margin-bottom:14px; min-width:0; }
.hero-form-note{
  margin:14px 0 0; text-align:center;
  font-size:.88rem; color:var(--text-muted,#5a6470);
}
.hero-form-note a{ color:var(--orange,#e8622c); font-weight:700; }
.hero-form-note a:hover{ text-decoration:underline; }
@media (max-width:520px){
  .estimate-card .grid-2{ grid-template-columns:1fr; gap:0 !important; }
}

/* =========================================================
   Image-rich integration — photo banners, home visual tiles,
   service-visit split and section media compositions.
   Appended block; existing rules are only extended.
   ========================================================= */

/* --- Photo page hero (8 inner pages) ---------------------- */
.page-hero--photo{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--navy-deep); display:flex; align-items:center;
  min-height:clamp(440px,40vw,560px);
  padding:clamp(56px,6vw,96px) 0 clamp(48px,5vw,80px);
}
.page-hero-img{
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:var(--pos,70% 50%); z-index:-2;
}
.page-hero--photo::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,
    rgba(8,22,39,.94) 0%, rgba(8,22,39,.88) 34%, rgba(8,22,39,.66) 52%,
    rgba(8,22,39,.22) 72%, rgba(8,22,39,.04) 100%);
}
.page-hero--photo .container{ width:100%; }
.page-hero--photo .container > *{ max-width:600px; }
.page-hero--photo p{ color:rgba(255,255,255,.9); }
.page-hero--photo .breadcrumb{ color:rgba(255,255,255,.75); }
.page-hero--photo .eyebrow{ background:rgba(232,98,44,.9); color:#fff; }
@media (max-width:1100px){
  .page-hero--photo::before{
    background:linear-gradient(90deg, rgba(8,22,39,.95) 0%, rgba(8,22,39,.88) 45%, rgba(8,22,39,.55) 70%, rgba(8,22,39,.18) 100%);
  }
}
/* Tablet/mobile: photo band on top, text on a solid panel below */
@media (max-width:768px){
  .page-hero--photo{ display:block; min-height:0; padding:0; background:var(--navy); }
  .page-hero--photo::before{ display:none; }
  .page-hero-img{
    position:relative; inset:auto; z-index:0; height:auto; aspect-ratio:16/9;
    object-position:var(--pos-m,var(--pos,70% 50%));
  }
  .page-hero--photo .container{ padding-top:28px; padding-bottom:36px; }
  .page-hero--photo h1{ margin-top:12px; }
}
@media (max-width:430px){ .page-hero-img{ aspect-ratio:4/3; } }

/* --- Home: service visit split ---------------------------- */
.visit-section{ background:#fff; }
.visit-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:center; }
.visit-media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.visit-media img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.visit-copy h2{ font-size:clamp(1.7rem,2.8vw,2.4rem); }
.visit-copy > p{ color:var(--text-muted); font-size:1.05rem; margin-bottom:24px; }
.visit-steps{ list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.visit-steps li{ display:flex; gap:16px; align-items:flex-start; position:relative; }
.visit-steps li:not(:last-child)::after{
  content:""; position:absolute; left:17px; top:40px; bottom:-14px; width:2px; background:rgba(232,98,44,.3);
}
.visit-num{
  width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--orange); color:#fff; font-weight:700; position:relative; z-index:1;
}
.visit-steps strong{ display:block; color:var(--navy); font-size:1.02rem; }
.visit-steps span span, .visit-steps div > span{ display:block; color:var(--text-muted); font-size:.98rem; line-height:1.55; }
@media (max-width:900px){ .visit-grid{ grid-template-columns:1fr; gap:36px; } .visit-media{ max-width:640px; } }

/* --- Home: three visual category tiles -------------------- */
.cat-tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-bottom:56px; }
.cat-tile{
  position:relative; display:block; aspect-ratio:5/4; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-md); isolation:isolate; color:#fff; background:var(--navy);
}
.cat-tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%);
  z-index:-2; transition:transform .5s ease;
}
.cat-tile::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,22,39,0) 34%, rgba(8,22,39,.55) 62%, rgba(8,22,39,.92) 100%);
}
.cat-tile-body{ position:absolute; left:0; right:0; bottom:0; padding:22px 22px 20px; display:flex; flex-direction:column; gap:4px; }
.cat-tile-title{ font-family:var(--font-display); font-weight:700; font-size:1.35rem; line-height:1.2; }
.cat-tile-text{ font-size:.96rem; color:rgba(255,255,255,.88); }
.cat-tile-link{ margin-top:6px; font-weight:700; font-size:.95rem; color:#FFB38E; }
.cat-tile:hover img{ transform:scale(1.05); }
.cat-tile:hover{ box-shadow:var(--shadow-lg); }
.cat-tile:focus-visible{ outline:3px solid var(--orange); outline-offset:4px; }
.svc-all-h{ text-align:center; font-size:1.25rem; margin:0 0 28px; color:var(--navy); }
@media (max-width:960px){
  .cat-tiles{ gap:16px; }
  .cat-tile{ aspect-ratio:3/4; }
  .cat-tile-body{ padding:16px; }
  .cat-tile-title{ font-size:1.15rem; }
  .cat-tile-text{ font-size:.9rem; }
}
@media (max-width:640px){
  .cat-tiles{ grid-template-columns:1fr; gap:16px; margin-bottom:44px; }
  .cat-tile{ aspect-ratio:16/10; }
  .cat-tile-title{ font-size:1.25rem; }
}

/* --- Heating: photo + two option cards --------------------- */
.decision-media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.decision-media img{ width:100%; height:auto; aspect-ratio:16/7; object-fit:cover; object-position:50% 32%; }
.decision-cards{ position:relative; z-index:1; margin:-72px 32px 0; }
.decision-cards .compare-col{ box-shadow:var(--shadow-md); }
@media (max-width:900px){
  .decision-media img{ aspect-ratio:3/2; }
  .decision-cards{ margin:-40px 16px 0; }
}
@media (max-width:560px){ .decision-cards{ margin:16px 0 0; } }

/* --- Media split: photo beside card grid ------------------- */
.media-split{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:36px; align-items:stretch; }
.media-split--reverse .media-split-img{ order:2; }
.media-split-img{
  margin:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md);
  position:relative; min-height:340px; background:var(--navy);
}
.media-split-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.media-split-img figcaption{
  position:absolute; left:14px; right:14px; bottom:14px; padding:10px 14px; border-radius:10px;
  background:rgba(8,22,39,.82); color:#fff; font-size:.92rem; line-height:1.4;
}
.media-split-cards{ gap:18px; align-content:start; }
.media-split-cards .svc-card{ padding:22px 20px; }
@media (max-width:960px){
  .media-split{ grid-template-columns:1fr; gap:28px; }
  .media-split--reverse .media-split-img{ order:0; }
  .media-split-img{ min-height:0; }
  .media-split-img img{ position:relative; height:auto; aspect-ratio:3/2; }
}
@media (max-width:640px){ .media-split-cards{ grid-template-columns:1fr 1fr; gap:12px; } .media-split-cards .svc-card{ padding:18px 14px; } }
@media (max-width:400px){ .media-split-cards{ grid-template-columns:1fr; } }

/* --- Head split: photo beside section heading -------------- */
.head-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; margin-bottom:48px; }
.head-split--reverse .head-split-img{ order:2; }
.head-split-img{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.head-split-img img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.section-head--left{ text-align:left; margin:0; max-width:none; }
.bg-navy .head-split-img{ box-shadow:0 20px 50px rgba(0,0,0,.35); }
@media (max-width:900px){
  .head-split{ grid-template-columns:1fr; gap:28px; margin-bottom:36px; }
  .head-split--reverse .head-split-img{ order:0; }
}

/* =========================================================
   CLIMATE FX — HVAC-themed decorative motion (all pages)
   Cooling = snow crystals, heating = embers, heat pumps =
   heat moving (blue → orange), other pages = fresh-air flow.
   All effect layers: aria-hidden, pointer-events:none,
   absolutely positioned inside overflow-clipped hosts (no
   layout shift), transform/opacity animation, paused
   off-screen, and disabled for reduced motion.
   ========================================================= */

/* ---- Layer placement ---------------------------------------------------- */
.fx-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.page-hero--photo > .fx-layer{z-index:-1;}           /* above photo + overlay, behind text */
.hero > .fx-layer{z-index:1;}                          /* with the blobs, behind .hero-grid (2) */
.fx-host{position:relative;isolation:isolate;}
.fx-host > .fx-layer{z-index:-1;}                      /* dark sections: behind all content */
@media (max-width:768px){
  /* photo becomes a band with text below: keep effects on the photo only */
  .page-hero--photo > .fx-layer{inset:0 0 auto 0;aspect-ratio:16/9;z-index:1;}
}
@media (max-width:430px){ .page-hero--photo > .fx-layer{aspect-ratio:4/3;} }

/* ---- Snow crystals (cooling) ------------------------------------------ */
.fx-flake{position:absolute;top:-24px;left:var(--x);width:var(--sz);height:var(--sz);opacity:0;
  animation:fx-snow var(--dur) linear var(--delay) infinite;will-change:transform,opacity;}
.fx-flake i,.fx-flake i::before,.fx-flake i::after{position:absolute;left:50%;top:0;width:2px;height:100%;margin-left:-1px;
  border-radius:2px;background:rgba(225,244,255,.95);box-shadow:0 0 4px rgba(170,220,255,.9);}
.fx-flake i::before,.fx-flake i::after{content:"";left:0;margin:0;}
.fx-flake i::before{transform:rotate(60deg);}
.fx-flake i::after{transform:rotate(-60deg);}
.fx-flake.dot i{width:100%;height:100%;left:0;margin:0;border-radius:50%;background:rgba(235,248,255,.9);}
.fx-flake.dot i::before,.fx-flake.dot i::after{display:none;}
@keyframes fx-snow{
  0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0;}
  8%{opacity:.95;}
  50%{transform:translate3d(var(--dx),calc(var(--h,500px) * .5),0) rotate(180deg);}
  92%{opacity:.85;}
  100%{transform:translate3d(calc(var(--dx) * -.4),calc(var(--h,500px) + 30px),0) rotate(360deg);opacity:0;}
}

/* ---- Embers + warm glow (heating) ------------------------------------- */
.fx-ember{position:absolute;bottom:-12px;left:var(--x);width:var(--sz);height:var(--sz);border-radius:50%;opacity:0;
  background:radial-gradient(circle,#FFF3C4 0 20%,#FFB347 45%,rgba(232,98,44,.9) 70%,rgba(232,98,44,0) 100%);
  box-shadow:0 0 10px 2px rgba(255,140,50,.55);
  animation:fx-ember var(--dur) ease-out var(--delay) infinite;will-change:transform,opacity;}
@keyframes fx-ember{
  0%{transform:translate3d(0,0,0) scale(.6);opacity:0;}
  10%{opacity:1;}
  35%{transform:translate3d(var(--dx),calc(var(--h,500px) * -.35),0) scale(1);opacity:.9;}
  60%{transform:translate3d(calc(var(--dx) * -.6),calc(var(--h,500px) * -.6),0) scale(.85);opacity:.75;}
  100%{transform:translate3d(calc(var(--dx) * .4),calc(var(--h,500px) * -1),0) scale(.4);opacity:0;}
}
.fx-glow{position:absolute;left:10%;right:-10%;bottom:-40%;height:70%;border-radius:50%;
  background:radial-gradient(ellipse at 60% 60%,rgba(255,140,50,.38),rgba(232,98,44,0) 65%);
  animation:fx-glow 3.2s ease-in-out infinite alternate;}
@keyframes fx-glow{from{opacity:.55;transform:scale(1);}to{opacity:1;transform:scale(1.06);}}

/* ---- Heat moving (heat pumps): blue particle turns orange mid-journey -- */
.fx-heat{position:absolute;left:-20px;top:var(--y);width:var(--sz);height:var(--sz);opacity:0;
  animation:fx-carry var(--dur) linear var(--delay) infinite;will-change:transform,opacity;}
.fx-heat::before,.fx-heat::after{content:"";position:absolute;inset:0;border-radius:50%;}
.fx-heat::before{background:radial-gradient(circle,#E9F7FF 0 25%,#5CC8FF 60%,rgba(92,200,255,0) 100%);box-shadow:0 0 8px rgba(92,200,255,.7);
  animation:fx-cool-out var(--dur) linear var(--delay) infinite;}
.fx-heat::after{background:radial-gradient(circle,#FFF3C4 0 25%,#FF9A3C 60%,rgba(255,154,60,0) 100%);box-shadow:0 0 8px rgba(255,140,50,.7);
  opacity:0;animation:fx-warm-in var(--dur) linear var(--delay) infinite;}
@keyframes fx-carry{
  0%{transform:translate3d(0,0,0);opacity:0;}
  6%{opacity:1;}
  30%{transform:translate3d(calc(var(--w,1200px) * var(--span,1) * .3),-14px,0);}
  60%{transform:translate3d(calc(var(--w,1200px) * var(--span,1) * .6),12px,0);}
  94%{opacity:1;}
  100%{transform:translate3d(calc(var(--w,1200px) * var(--span,1) + 40px),0,0);opacity:0;}
}
@keyframes fx-cool-out{0%,40%{opacity:1;}60%,100%{opacity:0;}}
@keyframes fx-warm-in{0%,40%{opacity:0;}60%,100%{opacity:1;}}

/* ---- Airflow streams (SVG strokes sweeping along curves) -------------- */
.fx-air{position:absolute;inset:0;width:100%;height:100%;}
.fx-air path{fill:none;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:90 610;animation:fx-stream var(--dur,6s) linear var(--delay,0s) infinite;}
.fx-air.cool path{stroke:rgba(190,232,255,.55);}
.fx-air.warm path{stroke:rgba(255,190,120,.5);}
.fx-air.fresh path{stroke:rgba(255,255,255,.45);}
@keyframes fx-stream{from{stroke-dashoffset:700;}to{stroke-dashoffset:0;}}

/* ---- Air motes in dark sections --------------------------------------- */
.fx-mote{position:absolute;left:-10px;top:var(--y);width:var(--sz);height:var(--sz);border-radius:50%;opacity:0;
  animation:fx-drift var(--dur) linear var(--delay) infinite;will-change:transform,opacity;}
.fx-mote.cool{background:rgba(170,225,255,.7);box-shadow:0 0 6px rgba(120,200,255,.6);}
.fx-mote.warm{background:rgba(255,190,120,.75);box-shadow:0 0 6px rgba(255,140,50,.55);}
.fx-mote.fresh{background:rgba(255,255,255,.6);box-shadow:0 0 5px rgba(255,255,255,.4);}
@keyframes fx-drift{
  0%{transform:translate3d(0,0,0);opacity:0;}
  8%{opacity:.9;}
  25%{transform:translate3d(calc(var(--w,1200px) * var(--span,1) * .25),-18px,0);}
  50%{transform:translate3d(calc(var(--w,1200px) * var(--span,1) * .5),10px,0);}
  75%{transform:translate3d(calc(var(--w,1200px) * var(--span,1) * .75),-12px,0);}
  92%{opacity:.8;}
  100%{transform:translate3d(calc(var(--w,1200px) * var(--span,1) + 20px),0,0);opacity:0;}
}

/* ---- Thermostat scroll bar (icy blue → warm orange) ------------------- */
.fx-thermo{position:absolute;left:0;right:0;bottom:-2px;height:4px;pointer-events:none;background:rgba(46,143,222,.14);}
.fx-thermo-fill{position:absolute;inset:0;
  background:linear-gradient(90deg,#7FD6FF 0%,#2E8FDE 30%,#9B7FD0 52%,#F3A23B 74%,#E8622C 100%);
  clip-path:inset(0 100% 0 0);}
.fx-thermo-knob{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:#fff;border:2px solid var(--orange);box-shadow:0 1px 4px rgba(8,22,39,.35);transform:translateX(0);}

/* ---- Airflow through numbered steps (sequential pulse) ---------------- */
.process-step .step-badge,.visit-num,.cs-next-num{animation:fx-breathe 3s ease-out infinite;}
.process-step:nth-child(2) .step-badge,.visit-steps li:nth-child(2) .visit-num,.cs-next-list li:nth-child(2) .cs-next-num{animation-delay:.45s;}
.process-step:nth-child(3) .step-badge,.visit-steps li:nth-child(3) .visit-num,.cs-next-list li:nth-child(3) .cs-next-num{animation-delay:.9s;}
.process-step:nth-child(4) .step-badge,.visit-steps li:nth-child(4) .visit-num{animation-delay:1.35s;}
.process-step:nth-child(5) .step-badge{animation-delay:1.8s;}
@keyframes fx-breathe{
  0%{box-shadow:0 0 0 0 rgba(46,143,222,.5);}
  45%{box-shadow:0 0 0 12px rgba(46,143,222,0);}
  100%{box-shadow:0 0 0 0 rgba(46,143,222,0);}
}

/* ---- Breeze puff from icons on card hover ----------------------------- */
.svc-icon,.feat-icon,.finance-icon{position:relative;}
.svc-icon::after,.feat-icon::after,.finance-icon::after{content:"";position:absolute;left:100%;top:50%;width:22px;height:13px;margin:-6px 0 0 4px;
  pointer-events:none;opacity:0;color:var(--blue);
  background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,
             linear-gradient(currentColor,currentColor) 4px 5.5px/70% 2px no-repeat,
             linear-gradient(currentColor,currentColor) 0 11px/85% 2px no-repeat;border-radius:2px;}
.svc-card:hover .svc-icon::after,.feat-card:hover .feat-icon::after,.finance-card:hover .finance-icon::after{animation:fx-puff .8s ease-out 1;}
@keyframes fx-puff{0%{transform:translateX(-6px) scaleX(.4);opacity:0;}35%{opacity:.85;}100%{transform:translateX(14px) scaleX(1);opacity:0;}}

/* ---- Emergency alert ring --------------------------------------------- */
.emergency-card .ico{position:relative;}
.emergency-card .ico::after{content:"";position:absolute;inset:-3px;border-radius:inherit;border:2px solid rgba(255,150,110,.75);
  pointer-events:none;animation:fx-alert 2.4s ease-out infinite;}
.emergency-card:nth-child(2) .ico::after{animation-delay:.6s;}
.emergency-card:nth-child(3) .ico::after{animation-delay:1.2s;}
.emergency-card:nth-child(4) .ico::after{animation-delay:1.8s;}
@keyframes fx-alert{0%{transform:scale(1);opacity:.85;}80%,100%{transform:scale(1.55);opacity:0;}}

/* ---- Air-puff ripple on button press ---------------------------------- */
.btn{position:relative;overflow:hidden;isolation:isolate;}
.fx-puff{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;transform:scale(0);opacity:.9;
  border:2px solid rgba(255,255,255,.75);background:radial-gradient(circle,rgba(255,255,255,.28) 0 45%,transparent 70%);
  animation:fx-puff-ring .6s ease-out forwards;}
.btn-outline-dark .fx-puff{border-color:rgba(46,143,222,.6);background:radial-gradient(circle,rgba(46,143,222,.18) 0 45%,transparent 70%);}
@keyframes fx-puff-ring{to{transform:scale(1);opacity:0;}}

/* ---- Pause off-screen / reduced motion -------------------------------- */
.fx-off .fx-layer *,.fx-off.fx-layer *{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){
  .fx-layer,.fx-puff{display:none !important;}
  .process-step .step-badge,.visit-num,.cs-next-num,.emergency-card .ico::after{animation:none !important;}
  .svc-card:hover .svc-icon::after,.feat-card:hover .feat-icon::after,.finance-card:hover .finance-icon::after{animation:none !important;}
}
/* Photo heroes: heat particles and airflow begin at the measured end of the text block (--start, set by JS) */
.page-hero--photo .fx-heat,.page-hero--photo .fx-mote{left:var(--start,0px);}
.page-hero--photo .fx-air{left:var(--start,0px);right:0;width:auto;}

.fx-thermo-knob{opacity:0;transition:opacity .25s ease;}
/* Phones: the home headline spans the full width, so its climate particles stay softer */
@media (max-width:640px){ .hero > .fx-layer{opacity:.6;} }

/* =========================================================
   Responsive pass — emergency bar scrolls away
   The orange 24/7 bar is visible at the top of every page but is no longer
   pinned: on scroll it moves up out of view and only the white header stays
   sticky. This frees ~40–170px of screen on phones (the bar wraps to 3 lines
   there). --ebar-h is the bar's measured height, set by hvac.js; without JS
   it is 0 and the whole unit stays sticky as before.
   ========================================================= */
.sticky-top{ top:calc(-1 * var(--ebar-h, 0px)); }

/* Responsive pass — readable small labels and long CTAs on the smallest phones */
.cs-social-label,.cs-info-list .cs-lbl{font-size:.8rem;}
@media (max-width:374px){
  .btn{padding:12px 16px;font-size:.9rem;line-height:1.25;}
}
@media (max-width:1024px){.btn.btn-sm{min-height:44px;}}

/* Responsive/a11y pass — accessible brand orange (same hue, deeper shade so
   white text on orange and orange text on light backgrounds meet WCAG AA) */
:root{ --orange:#C24A1C; --orange-dark:#A3401A; }
.eyebrow{ color:var(--orange-dark); }
.footer-bottom span,.cs-social-label{ color:#5d636b; }
.main-nav a.active,.main-nav a[aria-current="page"]{ color:var(--orange-dark); opacity:1; }
/* mobile menu: comfortable tap targets */
@media (max-width:980px){ .main-nav a{ display:flex; align-items:center; min-height:44px; } .main-nav{ gap:6px; } }
.footer-bottom span,.cs-footer-social .cs-social-label{ color:#AEB6C1; }
.cs-form-social .cs-social-label,.cs-info-list .cs-lbl{ color:#5d636b; opacity:1; }
.cs-next-note strong{ color:var(--orange-dark); }
.area-section .eyebrow,.bg-navy .eyebrow,.emergency-section .eyebrow,.final-cta .eyebrow,.hero .eyebrow{ color:#F59A6E; }
.page-hero .eyebrow{ background:rgba(8,22,39,.38); color:#fff; }
.area-section .eyebrow,.bg-navy .eyebrow,.emergency-section .eyebrow,.final-cta .eyebrow,.hero .eyebrow{ color:#F59A6E !important; }
.cs-footer-social .cs-social-label{ opacity:1 !important; color:#AEB6C1 !important; }