:root{
  --ec-navy:#03172a;
  --ec-panel:#05233a;
  --ec-panel-2:#062940;
  --ec-white:#f7fbff;
  --ec-muted:#aebdcd;
  --ec-green:#56ef7c;
  --ec-yellow:#f4c52d;
  --ec-orange:#ff8b38;
  --ec-cyan:#55d8ff;
  --ec-line:rgba(172,200,218,.30);
  --ec-soft-line:rgba(255,255,255,.09);
  --ec-header-h:90px;
  --ec-menu-w:1538px;
  --ec-radius:12px;
}
.ec-header,.ec-header *{box-sizing:border-box}
.ec-header{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ec-white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.ec-header a{text-decoration:none;color:inherit}
.ec-header button{font:inherit}
.ec-header{height:var(--ec-header-h);position:sticky;top:0;z-index:1000;background:linear-gradient(180deg,#03172a 0%,#041a2f 100%);border-bottom:1px solid rgba(255,255,255,.11);box-shadow:0 1px 0 rgba(0,0,0,.14);transition:background .2s ease,box-shadow .2s ease}
.ec-header.is-scrolled{background:rgba(3,20,36,.985);box-shadow:0 12px 30px rgba(0,0,0,.22);backdrop-filter:blur(18px)}
.ec-header__inner{height:100%;width:min(1562px,calc(100% - 110px));margin:0 auto;display:grid;grid-template-columns:270px minmax(640px,1fr) 470px;align-items:center;gap:20px}
.ec-logo{display:block;width:252px;height:62px}
.ec-logo img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center}
.ec-nav{display:flex;align-items:center;justify-content:center;height:100%;gap:47px;white-space:nowrap;transform:translateX(-34px)}
.ec-nav>a,.ec-nav__services{height:100%;display:flex;align-items:center;position:relative;border:0;background:none;padding:0;color:#f5f8fb;font-size:14px;font-weight:520;letter-spacing:-.012em;cursor:pointer;transition:color .15s ease}
.ec-nav>a:hover,.ec-nav__services:hover,.ec-nav>a:focus-visible,.ec-nav__services:focus-visible{color:var(--ec-green)}
.ec-nav__services{color:var(--ec-green);font-weight:720}
.ec-nav__services::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,#42df6a,var(--ec-green));box-shadow:0 0 12px rgba(86,239,124,.20)}
.ec-nav__chevron{width:9px;height:9px;margin-left:10px;border-top:2px solid currentColor;border-left:2px solid currentColor;transform:rotate(45deg) translateY(2px);transition:transform .15s ease}
.ec-header:not(.mega-open) .ec-nav__chevron{transform:rotate(225deg) translate(-1px,-2px)}
.ec-header__right{display:flex;align-items:center;justify-content:flex-end;gap:23px;transform:translateX(-26px)}
.ec-location{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:520;white-space:nowrap;color:#f7fbff}
.ec-location svg{width:21px;height:21px;fill:none;stroke:var(--ec-yellow);stroke-width:2.35;stroke-linecap:round;stroke-linejoin:round}
.ec-sep{opacity:.42;margin:0 2px}
.ec-estimate{height:52px;min-width:211px;padding:0 30px;border:2px solid var(--ec-yellow);border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:820;letter-spacing:.15em;text-transform:uppercase;transition:background .16s ease,color .16s ease,transform .16s ease}
.ec-estimate:hover,.ec-estimate:focus-visible{background:var(--ec-yellow);color:#071a2b;transform:translateY(-1px)}
.ec-mega{position:absolute;left:50%;top:calc(var(--ec-header-h) - 3px);width:min(var(--ec-menu-w),calc(100vw - 136px));height:498px;transform:translateX(-50%) translateY(-5px);opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;border:1px solid rgba(176,205,222,.42);border-radius:var(--ec-radius);background:radial-gradient(circle at 78% 14%,rgba(64,147,137,.13),transparent 31%),linear-gradient(180deg,rgba(4,31,52,.996),rgba(5,37,60,.996));box-shadow:0 28px 66px rgba(0,0,0,.28);transition:opacity .16s ease,transform .16s ease,visibility .16s ease}
.ec-header.mega-open .ec-mega,.preview-open .ec-mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.ec-mega::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(100,235,131,.16),rgba(255,255,255,.18),transparent);pointer-events:none}
.ec-mega__grid{height:100%;display:grid;grid-template-columns:359px 358px 357px minmax(0,1fr)}
.ec-service-col{position:relative;padding:41px 46px 29px}
.ec-service-col::after{content:"";position:absolute;right:0;top:31px;bottom:31px;width:1px;background:rgba(255,255,255,.105)}
.ec-service-head{height:83px;display:flex;align-items:center;gap:22px;border-bottom:1px solid rgba(255,255,255,.105)}
.ec-service-icon{width:42px;height:42px;flex:0 0 42px;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.35}
.ec-service-col--heating .ec-service-icon{stroke:var(--ec-orange)}
.ec-service-col--cooling .ec-service-icon{stroke:var(--ec-cyan)}
.ec-service-col--air .ec-service-icon{stroke:var(--ec-green)}
.ec-service-head h2{margin:0;font-size:20px;font-weight:800;line-height:1.05;letter-spacing:-.025em}
.ec-service-head p{margin:8px 0 0;color:#b7c6d5;font-size:10px;font-weight:760;letter-spacing:.17em;text-transform:uppercase}
.ec-links>a{min-height:83px;display:grid;grid-template-columns:1fr 20px;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.083);transition:background .15s ease,padding .15s ease}
.ec-links>a:last-child{border-bottom:0}
.ec-links>a:hover{padding-left:3px;background:linear-gradient(90deg,rgba(86,239,124,.04),transparent)}
.ec-links strong{display:block;font-size:17px;line-height:1.12;font-weight:540;letter-spacing:-.014em}
.ec-links small{display:block;margin-top:7px;color:#b8c5d3;font-size:13px;line-height:1.14}
.ec-links b{font-size:31px;font-weight:250;line-height:1;color:#eef5fb}
.ec-promo{padding:49px 45px 26px;background:radial-gradient(circle at 73% 18%,rgba(60,151,139,.18),transparent 34%),linear-gradient(180deg,rgba(6,39,63,.99),rgba(5,34,56,.995))}
.ec-promo__eyebrow{margin-bottom:13px;color:var(--ec-yellow);font-size:10px;font-weight:850;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.ec-promo h2{margin:0 0 13px;font-size:37px;line-height:1.03;font-weight:850;letter-spacing:-.036em}
.ec-promo>p{margin:0 0 23px;color:#d2dbe6;font-size:16px;line-height:1.48}
.ec-promo__primary{height:54px;border-radius:999px;background:linear-gradient(90deg,#53ec7b,#61ef83);color:#061827;display:flex;align-items:center;justify-content:center;gap:20px;font-size:15px;font-weight:900;letter-spacing:.025em;box-shadow:0 14px 30px rgba(69,225,111,.09);transition:transform .15s ease,filter .15s ease}
.ec-promo__primary span{font-size:28px;line-height:1;font-weight:450}
.ec-promo__primary:hover{transform:translateY(-1px);filter:brightness(1.03)}
.ec-promo__secondary{height:52px;margin-top:13px;border:2px solid var(--ec-yellow);border-radius:999px;display:flex;align-items:center;justify-content:center;gap:14px;font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.ec-promo__secondary svg{width:19px;height:19px;fill:#fff}
.ec-assessment{min-height:107px;margin-top:19px;padding:16px 20px;border:1px solid rgba(247,200,44,.46);border-radius:12px;display:grid;grid-template-columns:52px 1fr 22px;align-items:center;gap:11px;background:linear-gradient(180deg,rgba(255,255,255,.019),rgba(255,255,255,.006))}
.ec-assessment__gear{width:42px;height:42px;fill:none;stroke:var(--ec-yellow);stroke-width:2.35;stroke-linecap:round;stroke-linejoin:round}
.ec-assessment strong{display:block;font-size:14px;line-height:1.2}
.ec-assessment small{display:block;margin-top:6px;color:#d0dae5;font-size:12px;line-height:1.38}
.ec-assessment__arrow{width:22px;height:22px;fill:none;stroke:#eef6fc;stroke-width:1.9}
.ec-header :focus-visible{outline:2px solid rgba(86,239,124,.85);outline-offset:4px}
@media(max-width:1580px){.ec-header__inner{width:calc(100% - 42px);grid-template-columns:225px 1fr 340px;gap:14px}.ec-logo{width:220px}.ec-nav{gap:23px;transform:none}.ec-header__right{gap:12px;transform:none}.ec-location{font-size:12px}.ec-estimate{min-width:166px;padding:0 18px}.ec-mega{width:calc(100vw - 42px)}.ec-mega__grid{grid-template-columns:1fr 1fr 1fr 1.18fr}.ec-service-col{padding-left:28px;padding-right:28px}.ec-promo{padding-left:30px;padding-right:30px}}
@media(max-width:1050px){.ec-header__inner{grid-template-columns:220px 1fr 175px}.ec-location{display:none}.ec-nav{gap:17px}.ec-nav>a,.ec-nav__services{font-size:12px}}


/* ─────────────────────────────────────────────────────────────
   MOBILE GOLDEN MASTER
   Purpose-built mobile header + drawer. No desktop redesign.
   ───────────────────────────────────────────────────────────── */
.ec-burger{
  display:none;
  width:48px;height:48px;
  align-items:center;justify-content:center;
  border:1px solid rgba(185,207,223,.28);
  border-radius:50%;
  background:rgba(255,255,255,.018);
  color:#f6fbff;
  cursor:pointer;padding:0
}
.ec-burger svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.ec-mobile-backdrop{
  position:fixed;inset:0;z-index:1180;
  background:rgba(1,10,20,.62);
  backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease
}
.ec-mobile-panel{
  position:fixed;
  z-index:1190;
  top:0;right:0;bottom:0;
  width:min(360px,92vw);
  padding:18px 16px 16px;
  color:var(--ec-white);
  background:
    radial-gradient(circle at 15% 8%,rgba(68,160,137,.08),transparent 28%),
    linear-gradient(180deg,#03182b 0%,#05233b 100%);
  border-left:1px solid rgba(171,202,221,.20);
  box-shadow:-30px 0 70px rgba(0,0,0,.36);
  transform:translateX(102%);
  transition:transform .24s cubic-bezier(.2,.75,.2,1);
  overflow:auto;
  overscroll-behavior:contain
}
body.ec-mobile-open{overflow:hidden}
body.ec-mobile-open .ec-mobile-backdrop{opacity:1;visibility:visible;pointer-events:auto}
body.ec-mobile-open .ec-mobile-panel{transform:translateX(0)}

.ec-mobile-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:2px 2px 15px;
  border-bottom:1px solid rgba(255,255,255,.08)
}
.ec-mobile-brand{display:block;width:162px}
.ec-mobile-brand img{display:block;width:100%;height:auto}
.ec-mobile-close{
  width:42px;height:42px;border:0;background:transparent;color:#fff;
  display:grid;place-items:center;cursor:pointer;padding:0
}
.ec-mobile-close svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}

.ec-mobile-nav{padding:8px 0 0}
.ec-mobile-link,
.ec-mobile-accordion{
  min-height:46px;width:100%;display:flex;align-items:center;justify-content:space-between;
  border:0;border-bottom:1px solid rgba(255,255,255,.07);
  background:none;color:#f7fbff;padding:0 8px;
  text-align:left;font-size:14px;font-weight:650;cursor:pointer
}
.ec-mobile-link.is-current{position:relative}
.ec-mobile-link.is-current::before{
  content:"";position:absolute;left:-2px;top:12px;bottom:12px;width:2px;background:var(--ec-green)
}
.ec-mobile-accordion svg{
  width:14px;height:14px;stroke:#fff;fill:none;stroke-width:1.7;transition:transform .18s ease
}
.ec-mobile-accordion[aria-expanded="true"] svg{transform:rotate(180deg)}
.ec-mobile-services{
  max-height:0;overflow:hidden;
  transition:max-height .26s ease
}
.ec-mobile-services.is-open{max-height:560px}
.ec-mobile-group{padding:6px 8px 8px 12px;border-bottom:1px solid rgba(255,255,255,.07)}
.ec-mobile-group__head{
  min-height:42px;display:grid;grid-template-columns:24px 1fr 14px;align-items:center;gap:9px;
  color:#fff;font-size:13px;font-weight:700
}
.ec-mobile-group__icon{width:22px;height:22px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ec-mobile-group--heat .ec-mobile-group__icon{stroke:var(--ec-orange)}
.ec-mobile-group--cool .ec-mobile-group__icon{stroke:var(--ec-cyan)}
.ec-mobile-group--air .ec-mobile-group__icon{stroke:var(--ec-green)}
.ec-mobile-group__head>svg:last-child{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:1.6}
.ec-mobile-sub{
  display:none;padding:0 0 4px 33px
}
.ec-mobile-group.is-open .ec-mobile-sub{display:block}
.ec-mobile-sub a{
  display:block;padding:7px 0;color:#bdc9d7;font-size:12px;line-height:1.25
}

.ec-mobile-actions{
  position:sticky;bottom:-16px;
  margin-top:18px;padding:14px 0 2px;
  background:linear-gradient(180deg,rgba(5,35,59,0),#05233b 18%,#05233b 100%)
}
.ec-mobile-call,
.ec-mobile-estimate{
  min-height:44px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:12px;font-weight:800
}
.ec-mobile-call{
  border:1px solid rgba(255,255,255,.78);
  color:#fff
}
.ec-mobile-call svg{width:16px;height:16px;fill:#fff}
.ec-mobile-estimate{
  margin-top:8px;background:linear-gradient(90deg,#55ed7b,#63ef84);
  color:#061827
}
.ec-mobile-estimate svg{width:18px;height:18px;fill:none;stroke:#061827;stroke-width:2}
.ec-mobile-foot{
  display:flex;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-top:16px;color:#9eacbd;font-size:8.5px;letter-spacing:.02em
}
.ec-mobile-foot span+span::before{content:"|";opacity:.42;margin-right:8px}

@media(max-width:900px){
  :root{--ec-header-h:86px}
  .ec-header{height:var(--ec-header-h)}
  .ec-header__inner{
    width:calc(100% - 28px)!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:14px!important
  }
  .ec-nav,.ec-location{display:none!important}
  /* Golden Master mobile header keeps the Get Estimate CTA: logo + CTA + hamburger */
  .ec-header__right{transform:none!important;gap:12px;display:flex;align-items:center}
  .ec-estimate{display:flex!important;height:44px;min-width:0;padding:0 18px;font-size:11px;letter-spacing:.09em;white-space:nowrap}
  .ec-logo{width:200px;height:auto}
  .ec-burger{display:flex}
  .ec-mega{display:none!important}
}
@media(max-width:520px){
  .ec-header__right{gap:9px}
  .ec-estimate{padding:0 13px;font-size:10px;letter-spacing:.06em}
  .ec-logo{width:150px;height:auto}
  .ec-burger{width:44px;height:44px}
}
@media(max-width:380px){
  .ec-logo{width:132px}
  .ec-estimate{padding:0 11px;font-size:9.5px}
  .ec-mobile-panel{width:100vw}
}

/* ═══════════════════════════════════════════════════════════════════════
   FORWARD FIX 01 — staging integration hardening
   ───────────────────────────────────────────────────────────────────────
   ROOT CAUSE B (confirmed on staging ?page_id=467):
   A global reset.css loads AFTER eco-header.css and restyles
   [type="button"], [type="submit"], button  { color:rgb(204,51,102); ... }

   Specificity of reset's [type="button"] is (0,1,0) — IDENTICAL to
   .ec-nav__services and .ec-burger. On a tie, later source order wins,
   so the reset wins. These rules resolve it by raising specificity to
   (0,2,0) with a scope root, plus !important as belt-and-braces.

   SCOPE ROOTS ARE DELIBERATELY TWO:
     .ec-header        — header closes at </header>; contains
                         .ec-nav__services, .ec-burger, .ec-mega
     .ec-mobile-panel  — the drawer is a SIBLING of <header>, NOT a
                         descendant. ".ec-header .ec-mobile-*" matches
                         NOTHING. Do not "simplify" these into one root.

   reset.css is NOT modified. No global button selectors are used.
   ═══════════════════════════════════════════════════════════════════════ */

/* Shared: neutralise only UA/reset chrome that no header component wants.
   Intentionally minimal — font shorthand and border-radius are NOT reset
   here, because .ec-burger needs its own radius and .ec-nav__services its
   own size/weight. Per-component paint is restored explicitly below. */
.ec-header button,
.ec-mobile-panel button{
  -webkit-appearance:none !important;
  appearance:none !important;
  font-family:inherit !important;
  box-shadow:none !important;
  cursor:pointer !important;
}

/* ── Services trigger — must stay EcoComfort green, not reset pink ── */
.ec-header .ec-nav__services{
  background:none !important;
  background-image:none !important;
  border:0 !important;
  padding:0 !important;
  color:var(--ec-green) !important;
  font-weight:720 !important;
}
/* hover/focus restated: the base !important above would otherwise
   defeat the non-important hover rule at line 28. */
.ec-header .ec-nav__services:hover,
.ec-header .ec-nav__services:focus-visible,
.ec-header .ec-nav__services[aria-expanded="true"]{
  color:var(--ec-green) !important;
}

/* ── Hamburger — KEEPS its circular chrome; only reset's paint is undone ── */
.ec-header .ec-burger{
  background:rgba(255,255,255,.018) !important;
  background-image:none !important;
  border:1px solid rgba(185,207,223,.28) !important;
  border-radius:50% !important;
  color:#f6fbff !important;
  padding:0 !important;
  align-items:center !important;
  justify-content:center !important;
}
/* Explicit, breakpoint-symmetric visibility. Mirrors the existing 900px
   breakpoint exactly — desktop hidden, mobile shown. */
@media(min-width:901px){
  .ec-header .ec-burger{display:none !important}
}
@media(max-width:900px){
  .ec-header .ec-burger{display:flex !important}
}

/* ── Drawer buttons — scoped to .ec-mobile-panel (outside .ec-header) ── */
.ec-mobile-panel .ec-mobile-close{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  color:#fff !important;
}
.ec-mobile-panel .ec-mobile-accordion{
  background:none !important;
  background-image:none !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
  border-radius:0 !important;
  color:#f7fbff !important;
  text-align:left !important;
}
.ec-mobile-panel .ec-mobile-group__head{
  background:none !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  color:#fff !important;
  text-align:left !important;
}
