/* ============================================================
   Boston Climate Co. — shared site styles
   Built on the Blue Pill design system (assets/blue-pill.css)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white-canvas); color: var(--text-2); overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 40px; }
.eyebrow { font-size: 12px; font-weight: var(--weight-medium); letter-spacing: 0.16em;
           text-transform: uppercase; color: var(--electric-blue); margin: 0 0 18px; }
.section-h { font-family: var(--font-display); font-weight: var(--weight-medium); color: var(--text-1);
             font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; margin: 0; letter-spacing: -0.01em; }
.lead { font-size: 17px; line-height: 1.6; color: var(--text-2); }

/* reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ============ LOGO ============ */
.logo { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.logo .mark { width: 34px; height: 34px; flex: none; }
.logo .mark .ln, .logo .mark .ring { stroke: var(--electric-blue); }
.logo .word { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.logo .word .name { font-family: var(--font-display); font-weight: var(--weight-medium);
                    font-size: 17px; letter-spacing: 0.04em; color: var(--text-1); white-space: nowrap; }
.logo .word .co { display: flex; align-items: center; gap: 8px; }
.logo .word .co .rule { width: 18px; height: 1px; background: var(--electric-blue); }
.logo .word .co span { font-size: 9px; letter-spacing: 0.34em; text-transform: uppercase;
                       color: var(--electric-blue); font-weight: var(--weight-medium); }
.logo--dark .word .name { color: var(--on-dark); }

/* ============ NAV ============ */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 76px;
       transition: background-color var(--dur), backdrop-filter var(--dur), box-shadow var(--dur); }
.nav-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 40px; height: 100%;
             display: flex; align-items: center; gap: 28px; }
.nav-links { display: flex; gap: 4px; flex: 1; justify-content: center; }
.nav-link { font-size: 13px; letter-spacing: 0.1em; font-weight: var(--weight-medium);
            color: var(--on-dark); padding: 8px 14px; border-radius: var(--radius-control); cursor: pointer;
            transition: background-color var(--dur), color var(--dur); white-space: nowrap; }
.nav-link:hover { background: rgba(255,255,255,0.14); }
.nav-right { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.nav-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--on-dark);
             font-size: 14px; font-weight: var(--weight-medium); letter-spacing: 0.02em; white-space: nowrap; }
.nav-phone svg { width: 16px; height: 16px; stroke-width: 1.8; color: var(--electric-blue); }
.btn { font-family: var(--font-text); font-size: 13px; font-weight: var(--weight-medium);
       letter-spacing: 0.12em; text-transform: uppercase; min-height: 48px; padding: 0 28px;
       border-radius: var(--radius-control); border: 1.5px solid transparent; cursor: pointer;
       display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
       transition: background-color var(--dur), color var(--dur), border-color var(--dur); }
.btn-primary { background: var(--electric-blue); color: var(--on-dark); }
.btn-primary:hover { background: var(--electric-blue-hover); }
.btn-light { background: var(--pure-white); color: var(--text-1); }
.btn-light:hover { background: var(--light-ash); }
.btn-ghost-light { background: rgba(255,255,255,0.10); color: var(--on-dark); border-color: rgba(255,255,255,0.55); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.18); }
.btn-outline { background: transparent; color: var(--text-1); border-color: var(--border); }
.btn-outline:hover { border-color: var(--text-1); }
.btn-outline-light { background: transparent; color: var(--on-dark); border-color: rgba(255,255,255,0.7); }
.btn-outline-light:hover { background: rgba(255,255,255,0.12); border-color: var(--on-dark); }
.btn-sm { min-height: 42px; padding: 0 22px; }

/* solid (scrolled) nav */
.nav.solid { background: var(--frosted-glass); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--border-light); }
.nav.solid .logo .word .name { color: var(--text-1); }
.nav.solid .nav-link { color: var(--text-1); }
.nav.solid .nav-link:hover { background: var(--overlay-hint); }
.nav.solid .nav-phone { color: var(--text-1); }
.nav.solid .btn-ghost-light { background: transparent; color: var(--text-1); border-color: var(--border); }
.nav.solid .btn-ghost-light:hover { border-color: var(--text-1); }
.hamburger { display: none; width: 42px; height: 42px; border: none; background: transparent; cursor: pointer;
             align-items: center; justify-content: center; border-radius: var(--radius-control); }
.hamburger svg { width: 24px; height: 24px; stroke-width: 1.6; color: var(--on-dark); }
.nav.solid .hamburger svg { color: var(--text-1); }

/* ---- nav dropdowns ---- */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-drop-toggle { font-family: var(--font-text); background: transparent; border: none; display: inline-flex;
                   align-items: center; gap: 6px; line-height: 1; }
.nav-drop-toggle i, .nav-drop-toggle svg { width: 15px; height: 15px; stroke-width: 2; transition: transform var(--dur); }
.nav-item:hover .nav-drop-toggle svg, .nav-item.open .nav-drop-toggle svg { transform: rotate(180deg); }
.nav-drop { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); min-width: 232px;
            background: var(--pure-white); border-radius: var(--radius-control); box-shadow: 0 14px 44px rgba(23,26,32,0.16);
            padding: 8px; display: flex; flex-direction: column; opacity: 0; visibility: hidden;
            transition: opacity var(--dur), visibility var(--dur); z-index: 70; }
.nav-drop::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop, .nav-item.open .nav-drop { opacity: 1; visibility: visible; }
.nav-drop a { font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--text-1); padding: 11px 16px;
              border-radius: var(--radius-control); white-space: nowrap; transition: background-color var(--dur), color var(--dur); }
.nav-drop a:hover { background: var(--light-ash); color: var(--electric-blue); }

/* ---- mobile drawer ---- */
.nav-drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.nav-drawer.open { visibility: visible; }
.nav-drawer::before { content: ""; position: absolute; inset: 0; background: rgba(23,26,32,0.55);
                      opacity: 0; transition: opacity var(--dur); }
.nav-drawer.open::before { opacity: 1; }
.nav-drawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(360px, 86vw); background: var(--pure-white);
                    padding: 26px 26px 36px; display: flex; flex-direction: column; transform: translateX(100%);
                    transition: transform var(--dur) var(--ease); overflow-y: auto; }
.nav-drawer.open .nav-drawer-panel { transform: translateX(0); }
.nav-drawer-close { align-self: flex-end; background: transparent; border: none; cursor: pointer; padding: 6px; margin: -6px -6px 6px; }
.nav-drawer-close svg { width: 26px; height: 26px; stroke-width: 1.6; color: var(--text-1); }
.nav-drawer-links { display: flex; flex-direction: column; }
.nav-drawer-links .nd-group { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3);
                              font-weight: var(--weight-medium); margin: 20px 0 2px; }
.nav-drawer-links a { font-size: 16px; color: var(--text-1); padding: 9px 0; transition: color var(--dur); }
.nav-drawer-links a:hover { color: var(--electric-blue); }
.nav-drawer-links .nd-top { font-weight: var(--weight-medium); border-top: 1px solid var(--border); margin-top: 12px; padding-top: 18px; }
.nd-cta { margin-top: 26px; }
.nd-phone { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--text-1); font-weight: var(--weight-medium); font-size: 15px; }
.nd-phone i, .nd-phone svg { width: 16px; height: 16px; color: var(--electric-blue); }
body.nav-open { overflow: hidden; }

/* ============ HERO ============ */
.hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; }
.hero--sub { min-height: 78vh; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-bg::part(frame) { border-radius: 0; }
.hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
              background: linear-gradient(180deg, rgba(10,12,16,0.45) 0%, rgba(10,12,16,0.05) 32%,
                          rgba(10,12,16,0.18) 62%, rgba(10,12,16,0.78) 100%); }
.hero-inner { position: relative; z-index: 2; width: 100%; max-width: var(--container-max);
              margin: 0 auto; padding: 0 40px 132px; display: grid; grid-template-columns: 1.15fr 0.85fr;
              align-items: end; gap: 40px; }
.hero-inner--simple { display: block; padding-bottom: 104px; }
.hero-block { max-width: 800px; }
.hero-block .eyebrow { color: var(--electric-blue); }
.hero-title { font-family: var(--font-display); font-weight: var(--weight-medium); color: var(--on-dark);
              font-size: clamp(46px, 6.6vw, 104px); line-height: 0.98; letter-spacing: -0.02em; margin: 0; }
.hero-block .hero-title { font-size: clamp(38px, 4.8vw, 68px); line-height: 1.02; }
.hero-side { padding-bottom: 10px; }
.hero-sub { color: rgba(255,255,255,0.92); font-size: 18px; line-height: 1.55; margin: 0 0 26px; max-width: 600px; }
.hero-block .hero-sub { margin-top: 20px; }
.hero-cta { display: flex; flex-direction: column; gap: 16px; max-width: 470px; }
.hero-tel { display: inline-flex; align-items: center; gap: 10px; color: var(--on-dark); font-family: var(--font-display);
            font-size: 28px; font-weight: var(--weight-medium); letter-spacing: 0.01em; margin-bottom: 4px; }
.hero-tel svg { width: 22px; height: 22px; stroke-width: 1.8; color: var(--electric-blue); }
.hero-btns { display: flex; flex-direction: column; gap: 14px; max-width: 470px; }
.hero-btns .btn { width: 100%; }
.hero-btns--row { flex-direction: row; flex-wrap: wrap; max-width: none; }
.hero-btns--row .btn { width: auto; }
.scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2;
              color: rgba(255,255,255,0.7); animation: bob 2.4s var(--ease) infinite; }
.scroll-cue svg { width: 26px; height: 26px; stroke-width: 1.5; }
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* urgent hero (emergency page) */
.uhero { text-align: center; align-items: center; }
.uhero .hero-inner { display: block; padding: 120px 40px 96px; text-align: center; }
.uhero-eyebrow { color: var(--electric-blue); font-size: 13px; font-weight: var(--weight-medium);
                 letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 22px; }
.uphone { display: inline-flex; align-items: center; gap: 16px; color: var(--on-dark); font-family: var(--font-display);
          font-weight: var(--weight-medium); font-size: clamp(36px, 6.2vw, 80px); line-height: 1; letter-spacing: -0.01em;
          margin-bottom: 26px; white-space: nowrap; }
.uphone svg { width: 0.7em; height: 0.7em; stroke-width: 1.6; color: var(--electric-blue); }
.uhero h1 { font-family: var(--font-display); font-weight: var(--weight-medium); color: var(--on-dark);
            font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; margin: 0 0 18px; letter-spacing: -0.01em; }
.uhero .uhero-sub { color: rgba(255,255,255,0.86); font-size: 18px; max-width: 600px; margin: 0 auto 34px; line-height: 1.55; }
.uhero .btn { min-width: 320px; }

/* ============ SECTION HELPERS ============ */
.section { padding: 110px 0; }
.section--ash { background: var(--light-ash); }
.sec-head { max-width: 760px; margin-bottom: 56px; }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.measure { max-width: 760px; }
.measure--center { margin: 0 auto; text-align: center; }
.body-lg { font-size: 17px; line-height: 1.78; color: var(--text-2); margin: 0 0 20px; }
.body-lg:last-child { margin-bottom: 0; }

/* ============ SUB-SERVICE CARDS (shared) ============ */
.services { padding: 120px 0 110px; }
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.svc-card { display: flex; flex-direction: column; border-radius: var(--radius-card); overflow: hidden;
            background: var(--pure-white); border: 1px solid var(--border-light);
            transition: border-color var(--dur), box-shadow var(--dur); }
.svc-card:hover { border-color: var(--border); box-shadow: 0 18px 40px -28px rgba(23,26,32,0.4); }
.svc-media { position: relative; aspect-ratio: 4 / 3.2; }
.svc-media image-slot { width: 100%; height: 100%; }
.svc-media image-slot::part(frame) { border-radius: 0; }
.svc-label { position: absolute; left: 18px; top: 16px; z-index: 2; color: var(--on-dark);
             font-size: 15px; font-weight: var(--weight-medium); letter-spacing: 0.02em;
             text-shadow: 0 1px 12px rgba(0,0,0,0.45); }
.svc-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.svc-body p { font-size: 14px; line-height: 1.55; color: var(--text-2); margin: 0; flex: 1; }
.svc-cta { display: inline-flex; align-items: center; gap: 7px; color: var(--electric-blue);
           font-size: 13px; font-weight: var(--weight-medium); letter-spacing: 0.04em; }
.svc-cta svg { width: 15px; height: 15px; stroke-width: 2; transition: transform var(--dur); }
.svc-card:hover .svc-cta svg { transform: translateX(4px); }
.svc-card--em { border-color: var(--electric-blue); }
.svc-card--em:hover { box-shadow: 0 18px 44px -26px rgba(62,106,225,0.55); }
/* icon variant (no images) */
.svc-icon { position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
            background: var(--light-ash); }
.svc-icon svg { width: 60px; height: 60px; stroke-width: 1.25px; color: var(--electric-blue); }
.svc-grid.show-icons .svc-media image-slot { display: none; }
.svc-grid.show-icons .svc-icon { display: flex; }
.svc-grid.show-icons .svc-label { color: var(--text-1); text-shadow: none; }
.svc-card--em .svc-icon { background: rgba(62,106,225,0.07); }

/* ============ TRUST STRIP ============ */
.trust { background: var(--carbon-dark); padding: 30px 0; }
.trust-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 26px; }
.trust-row .t { color: rgba(255,255,255,0.82); font-size: 13px; letter-spacing: 0.04em; }
.trust-row .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--electric-blue); }
.trust-brands { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
                gap: 12px 34px; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.10); }
.trust-brands span { color: rgba(255,255,255,0.5); font-size: 15px; letter-spacing: 0.14em; font-weight: var(--weight-medium); }

/* ============ EQUIPMENT BRANDS (light) ============ */
.brandstrip { padding: 64px 0; }
.brandstrip .lab { text-align: center; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
                   color: var(--text-3); margin: 0 0 30px; font-weight: var(--weight-medium); }
.brand-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px 48px; }
.brand-row span { color: var(--text-2); font-size: 19px; letter-spacing: 0.16em; font-weight: var(--weight-medium); }

/* ============ MASSSAVE / DARK BAND ============ */
.band { position: relative; overflow: hidden; background: var(--carbon-dark); }
.band-bg { position: absolute; inset: 0; z-index: 0; }
.band-bg image-slot { width: 100%; height: 100%; }
.band-bg image-slot::part(frame) { border-radius: 0; }
.masssave { padding: 100px 0; }
.masssave .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center; }
.masssave .eyebrow { color: var(--electric-blue); }
.masssave h2 { font-family: var(--font-display); font-weight: var(--weight-medium); color: var(--on-dark);
               font-size: clamp(34px, 4vw, 52px); line-height: 1.04; margin: 0 0 22px; letter-spacing: -0.015em; }
.masssave h2 .num { color: var(--electric-blue); }
.masssave p { color: rgba(255,255,255,0.78); font-size: 16px; line-height: 1.65; max-width: 640px; }
.masssave p + p { margin-top: 16px; }
.masssave .col-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.link-cta { display: inline-flex; align-items: center; gap: 8px; color: var(--electric-blue);
            font-size: 14px; font-weight: var(--weight-medium); letter-spacing: 0.06em; text-transform: uppercase; }
.link-cta svg { width: 16px; height: 16px; stroke-width: 2; transition: transform var(--dur); }
.link-cta:hover svg { transform: translateX(4px); }
.rebate-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 12px; }
.rebate-list li { color: rgba(255,255,255,0.82); font-size: 15px; line-height: 1.5; padding-left: 26px; position: relative; }
.rebate-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px;
                          border-radius: 50%; background: var(--electric-blue); }

/* ============ PROCESS ============ */
.process { padding: 120px 0; background: var(--light-ash); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 56px; position: relative; }
.step { position: relative; }
.step .n { font-family: var(--font-display); font-size: 64px; font-weight: var(--weight-medium);
           color: var(--electric-blue); line-height: 1; letter-spacing: -0.02em; }
.step h3 { font-family: var(--font-display); font-size: 23px; font-weight: var(--weight-medium);
           color: var(--text-1); margin: 18px 0 12px; }
.step p { font-size: 15px; line-height: 1.6; color: var(--text-2); margin: 0; max-width: 320px; }
.step::after { content: ""; position: absolute; top: 30px; left: calc(100% - 18px); width: 36px; height: 1px; background: var(--border); }
.step:last-child::after { display: none; }

/* ============ MID CTA BAND ============ */
.midcta { padding: 100px 0; text-align: center; }
.midcta .wrap { position: relative; z-index: 2; }
.midcta h2 { font-family: var(--font-display); font-weight: var(--weight-medium); color: var(--on-dark);
             font-size: clamp(32px, 4vw, 52px); line-height: 1.05; margin: 0 0 16px; letter-spacing: -0.015em; }
.midcta p { color: rgba(255,255,255,0.78); font-size: 17px; max-width: 560px; margin: 0 auto 30px; line-height: 1.55; }

/* ============ EMERGENCY BAND ============ */
.emergency { padding: 110px 0; text-align: center; }
.emergency .wrap { position: relative; z-index: 2; }
.emergency h2 { font-family: var(--font-display); font-weight: var(--weight-medium); color: var(--on-dark);
                font-size: clamp(40px, 5.2vw, 72px); line-height: 1; margin: 0 0 14px; letter-spacing: -0.02em; }
.emergency .sub { color: var(--electric-blue); font-size: 19px; font-weight: var(--weight-medium);
                  letter-spacing: 0.02em; margin: 0 0 34px; }

/* ============ WHAT-COUNTS GRID (emergency) ============ */
.egrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ecard { display: flex; align-items: flex-start; gap: 16px; padding: 26px 24px;
         border: 1px solid var(--border-light); border-radius: var(--radius-card); background: var(--pure-white); }
.ecard svg { width: 24px; height: 24px; stroke-width: 1.6; color: var(--electric-blue); flex: none; margin-top: 1px; }
.ecard h3 { font-family: var(--font-text); font-size: 16px; font-weight: var(--weight-medium); color: var(--text-1); margin: 0 0 5px; }
.ecard p { font-size: 14px; line-height: 1.5; color: var(--text-2); margin: 0; }

/* ============ WAIT STEPS (emergency) ============ */
.wait-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 40px; margin-top: 44px; }
.wait-item { display: flex; gap: 16px; align-items: flex-start; padding: 4px 0; }
.wait-item .wn { font-family: var(--font-display); font-size: 22px; font-weight: var(--weight-medium);
                 color: var(--electric-blue); flex: none; width: 34px; }
.wait-item h3 { font-size: 16px; font-weight: var(--weight-medium); color: var(--text-1); margin: 2px 0 6px; }
.wait-item p { font-size: 14px; line-height: 1.6; color: var(--text-2); margin: 0; }

/* ============ ABOUT ============ */
.about { padding: 120px 0; }
.about .wrap { max-width: 880px; text-align: center; }
.about-copy h2 { margin-bottom: 24px; }
.about-copy p { font-size: 17px; line-height: 1.75; color: var(--text-2); max-width: 700px; margin: 0 auto; }

/* ============ SERVICE AREAS ============ */
.areas { padding: 100px 0; }
.area-intro { max-width: 760px; margin: 0 0 64px; }
.area { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 40px; padding: 44px 0;
        border-bottom: 1px solid var(--border-light); scroll-margin-top: 104px; }
.area-intro { scroll-margin-top: 104px; }
.area:last-child { border-bottom: none; }
.area h2 { font-family: var(--font-display); font-size: 27px; font-weight: var(--weight-medium);
           color: var(--text-1); margin: 0; letter-spacing: -0.01em; line-height: 1.15; }
.area-body p { font-size: 15px; line-height: 1.7; color: var(--text-2); margin: 0; }
.area-links { display: flex; gap: 10px 18px; flex-wrap: wrap; margin-top: 18px; }
.area-link { display: inline-flex; align-items: center; gap: 6px; color: var(--electric-blue);
             font-size: 13px; font-weight: var(--weight-medium); letter-spacing: 0.03em; }
.area-link svg { width: 14px; height: 14px; stroke-width: 2; }
.area-intro--group { margin-top: 56px; }

/* ============ LEGAL PAGES (privacy / terms) ============ */
.legal-hero { background: var(--carbon-dark); padding: 142px 0 56px; }
.legal-hero .wrap { max-width: 720px; }
.legal-hero .cat { color: var(--electric-blue); font-size: 12px; letter-spacing: 0.16em;
                   text-transform: uppercase; font-weight: var(--weight-medium); margin: 0 0 18px; }
.legal-hero h1 { font-family: var(--font-display); font-weight: var(--weight-medium); color: var(--on-dark);
                 font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.02em; margin: 0; }
.legal-hero .effective { color: rgba(255,255,255,0.62); font-size: 14px; margin: 20px 0 0; letter-spacing: 0.02em; }
.legal { padding: 64px 0 96px; }
.legal .wrap { max-width: 720px; }
.legal-intro { font-size: 18px; line-height: 1.72; color: var(--text-1); margin: 0 0 14px; }
.legal h2 { font-family: var(--font-display); font-weight: var(--weight-medium); color: var(--text-1);
            font-size: 22px; line-height: 1.25; letter-spacing: -0.005em; margin: 42px 0 14px; }
.legal p { font-size: 16px; line-height: 1.8; color: var(--text-2); margin: 0 0 18px; }
.legal p:last-child { margin-bottom: 0; }
.legal a { color: var(--electric-blue); border-bottom: 1px solid transparent; transition: border-color var(--dur); }
.legal a:hover { border-bottom-color: var(--electric-blue); }
.legal .ph { background: rgba(62,106,225,0.10); color: var(--electric-blue); padding: 1px 8px;
             border-radius: 4px; font-weight: var(--weight-medium); white-space: nowrap; }
.legal .contact-block { margin-top: 6px; }
.legal .contact-block p { margin: 0; line-height: 1.75; color: var(--text-2); }
.legal .contact-block .name { color: var(--text-1); font-weight: var(--weight-medium); }
.legal-divider { height: 1px; background: var(--border-light); margin: 36px 0; border: none; }

/* consent checkbox under lead form */
.consent { display: flex; align-items: flex-start; gap: 12px; max-width: 540px; margin: 2px 0 0; cursor: pointer; }
.consent input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 24px; height: 24px; margin: 1px 0 0; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--pure-white); cursor: pointer; position: relative; transition: border-color var(--dur), background-color var(--dur); }
.consent input[type="checkbox"]:hover { border-color: var(--text-3); }
.consent input[type="checkbox"]:focus-visible { outline: none; border-color: var(--electric-blue); }
.consent input[type="checkbox"]:checked { background: var(--electric-blue); border-color: var(--electric-blue); }
.consent input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border: solid var(--on-dark); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.consent-text { font-size: 13px; line-height: 1.6; color: var(--text-2); }
.consent-text a { color: var(--electric-blue); border-bottom: 1px solid transparent; transition: border-color var(--dur); }
.consent-text a:hover { border-bottom-color: var(--electric-blue); }
.consent.invalid input[type="checkbox"] { border-color: var(--carbon-dark); }
.consent-error { font-size: 13px; line-height: 1.6; font-weight: var(--weight-medium); color: var(--carbon-dark); margin: -10px 0 0; max-width: 540px; }
.consent-error[hidden] { display: none; }
.form .btn.is-disabled { opacity: 0.45; }
.form .btn.is-disabled:hover { background: var(--electric-blue); }

/* ============ AIR QUALITY (supporting service) ============ */
.aq-solutions { padding: 112px 0 96px; }
.aq-solutions .egrid { margin-top: 8px; }
.aq-body { padding: 0 0 112px; }
.aq-body .wrap { max-width: 800px; }
.aq-body h2 { font-family: var(--font-display); font-weight: var(--weight-medium); color: var(--text-1);
              font-size: clamp(23px, 2.5vw, 31px); line-height: 1.2; letter-spacing: -0.01em; margin: 50px 0 16px; }
.aq-body h2:first-child { margin-top: 0; }
.aq-body p { font-size: 17px; line-height: 1.78; color: var(--text-2); margin: 0 0 20px; }
.aq-body a { color: var(--electric-blue); border-bottom: 1px solid transparent; transition: border-color var(--dur); }
.aq-body a:hover { border-bottom-color: var(--electric-blue); }
.article-lead a { color: var(--electric-blue); border-bottom: 1px solid transparent; transition: border-color var(--dur); }
.article-lead a:hover { border-bottom-color: var(--electric-blue); }

/* coverage map */
.coverage { padding: 110px 0; background: var(--light-ash); text-align: center; }
.coverage .map { max-width: 720px; margin: 44px auto 0; }
.coverage .map svg { width: 100%; height: auto; }

/* ============ RESOURCES ============ */
.resources { padding: 0 0 120px; }
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; }
.res-card { cursor: pointer; }
.res-media { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 18px; }
.res-media image-slot { width: 100%; height: 100%; transition: transform var(--dur); }
.res-tag { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--electric-blue); font-weight: var(--weight-medium); }
.res-card h3 { font-family: var(--font-display); font-size: 21px; font-weight: var(--weight-medium);
               color: var(--text-1); line-height: 1.25; margin: 10px 0 0; transition: color var(--dur); }
.res-card:hover h3 { color: var(--electric-blue); }

/* ============ FAQ ============ */
.faq { padding: 120px 0; background: var(--light-ash); }
.faq--white { background: var(--white-canvas); }
.faq .wrap { max-width: 920px; }
.faq-head { text-align: center; margin-bottom: 52px; }
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; background: transparent; border: none; cursor: pointer; text-align: left;
         display: flex; align-items: center; justify-content: space-between; gap: 24px;
         padding: 26px 4px; font-family: var(--font-display); font-size: 19px; font-weight: var(--weight-medium);
         color: var(--text-1); line-height: 1.35; }
.faq-q svg { width: 22px; height: 22px; stroke-width: 1.6; color: var(--electric-blue); flex: none; transition: transform var(--dur); }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.faq-a p { font-size: 15px; line-height: 1.7; color: var(--text-2); padding: 0 4px 28px; margin: 0; max-width: 800px; }

/* ============ FINAL CTA ============ */
.final { padding: 130px 0; text-align: center; }
.final h2 { font-family: var(--font-display); font-weight: var(--weight-medium); color: var(--text-1);
            font-size: clamp(36px, 4.6vw, 60px); line-height: 1.04; margin: 0 0 16px; letter-spacing: -0.02em; }
.final p { font-size: 17px; color: var(--text-2); margin: 0 0 34px; }
.final-btns { display: flex; flex-direction: column; gap: 14px; max-width: 470px; margin: 0 auto; }
.final-btns .btn { width: 100%; }

/* ============ CONTACT ============ */
.contact-hero { padding: 120px 0 44px; }
.contact-hero .contact-lead { color: rgba(255,255,255,0.78); font-size: 18px; line-height: 1.55; margin: 18px 0 0; max-width: 720px; }
.contact-main { padding: 48px 0 110px; }
.contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 72px; align-items: start; }
.form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 13px; font-weight: var(--weight-medium); color: var(--text-1); letter-spacing: 0.02em; }
.field input, .field select, .field textarea { font-family: var(--font-text); font-size: 15px; color: var(--text-1);
            background: var(--pure-white); border: 1px solid var(--border); border-radius: var(--radius-control);
            padding: 13px 14px; width: 100%; transition: border-color var(--dur); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-placeholder); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--electric-blue); }
.field textarea { resize: vertical; min-height: 110px; }
.form .btn { margin-top: 6px; align-self: flex-start; min-width: 260px; }
.contact-aside { padding: 8px 0; }
.contact-aside .ci { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border-light); }
.contact-aside .ci svg { width: 20px; height: 20px; stroke-width: 1.7; color: var(--electric-blue); flex: none; }
.contact-aside .ci a, .contact-aside .ci span { font-size: 16px; color: var(--text-1); }
.contact-aside .areas-served { margin-top: 26px; font-size: 14px; line-height: 1.9; color: var(--text-2); }
.contact-aside .quote { margin-top: 26px; font-size: 15px; line-height: 1.7; color: var(--text-2);
                        padding-left: 18px; border-left: 2px solid var(--electric-blue); }

/* ============ FOOTER ============ */
.footer { background: var(--carbon-dark); color: rgba(255,255,255,0.66); padding: 80px 0 40px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px;
              border-bottom: 1px solid rgba(255,255,255,0.10); }
.footer-brand p { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.6; margin: 22px 0 0; max-width: 280px; }
.footer-col h4 { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5);
                 margin: 0 0 18px; font-weight: var(--weight-medium); }
.footer-col a { display: block; color: rgba(255,255,255,0.78); font-size: 14px; padding: 6px 0; transition: color var(--dur); }
.footer-col a:hover { color: var(--on-dark); }
.footer-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-top: 34px; flex-wrap: wrap; }
.footer-contact { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; color: rgba(255,255,255,0.85); font-size: 14px; }
.footer-contact a { display: inline-flex; align-items: center; gap: 8px; }
.footer-contact a:hover { color: var(--on-dark); }
.footer-contact .fc-ico { width: 16px; height: 16px; flex: 0 0 auto; color: var(--electric-blue); }
.footer-legal { font-size: 12px; line-height: 1.7; color: rgba(255,255,255,0.42); max-width: 560px; text-align: right; text-wrap: pretty; }

/* mobile sticky call */
.mcall { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
         background: var(--electric-blue); color: var(--on-dark); height: 56px; align-items: center;
         justify-content: center; gap: 10px; font-size: 15px; font-weight: var(--weight-medium); letter-spacing: 0.04em; }
.mcall svg { width: 18px; height: 18px; stroke-width: 2; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .hamburger { display: inline-flex; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .hero-side { padding-bottom: 0; }
  .hero-sub { max-width: 560px; }
  .masssave .wrap { grid-template-columns: 1fr; gap: 28px; }
  .res-grid { grid-template-columns: 1fr 1fr; }
  .egrid { grid-template-columns: repeat(2, 1fr); }
  .area { grid-template-columns: 1fr; gap: 14px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-legal { text-align: left; }
}
@media (max-width: 720px) {
  .wrap, .nav-inner, .hero-inner { padding-left: 22px; padding-right: 22px; }
  .nav .btn { display: none; }
  .nav-phone { display: none; }
  .nav { height: 64px; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .step::after { display: none; }
  .svc-grid { grid-template-columns: 1fr; }
  .res-grid { grid-template-columns: 1fr; }
  .egrid { grid-template-columns: 1fr; }
  .wait-grid { grid-template-columns: 1fr; }
  .hero-btns--row .btn { width: 100%; }
  .uhero .btn { min-width: 0; width: 100%; }
  .article-cta .cta-btns .btn { min-width: 0; width: 100%; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .mcall { display: flex; }
  body { padding-bottom: 56px; }
  /* Hero photos are wide/landscape; a full-viewport-height frame on a narrow
     phone forces object-fit:cover to crop away most of the image width.
     Lowering the min-height floor keeps the frame's aspect ratio closer to
     the photo's, so far less of the subject gets cropped off. No max-height
     here — the box must stay free to grow past this floor for longer
     titles, or flex's bottom-alignment pulls the text up underneath the
     fixed nav instead of leaving it clipped. */
  .hero--sub { min-height: 60vh; }
  /* The unconditional 104px reserved for this padding (site.css line ~129)
     is fine on desktop's tall hero but eats into the shorter mobile one for
     no reason — trimming it gives the title/CTA room without needing a
     taller box. Kept at 64px (not lower) so the CTA button clears the
     scroll-cue arrow below it — see .scroll-cue below, same reasoning. */
  .hero-inner--simple { padding-bottom: 64px; }
  /* Guaranteed clearance under the fixed header (64px here) + breathing
     room. This is padding on the flex ITEM itself (.hero-inner), not the
     .hero box, so the eyebrow/title can never start above it — even when
     a long title forces .hero to grow taller than its min-height and
     flex's bottom-alignment would otherwise put content flush with the
     very top of the section. This was the actual cause of the hero text
     rendering underneath the logo on real phones: the previous mobile fix
     was only verified against an artificially tall test viewport, so the
     shorter real-device case (title height + fixed 104px bottom padding
     exceeding min-height) never got caught. */
  .hero-inner { padding-top: 104px; }
  /* Mobile-specific headline size — the desktop clamp's floor (38px) is
     still too large for a 375-390px screen once real (non-flexbox-magic)
     wrapping is accounted for. */
  .hero-block .hero-title { font-size: clamp(26px, 7.5vw, 34px); line-height: 1.15; }
  /* The arrow is pinned a fixed distance from the very bottom of .hero,
     independent of the CTA button above it. Shrinking hero-inner's bottom
     padding (above) to reclaim vertical space also shrank the gap between
     the button and this arrow down to nothing. Pulling the arrow closer to
     the true bottom edge restores a comfortable gap without giving back
     the padding trim. */
  .scroll-cue { bottom: 12px; }
}
/* Landscape / short-height phones (e.g. 844x390): width alone is >720px
   here, so none of the mobile rules above apply and the hero silently
   falls back to desktop spacing on a viewport that's just as short as a
   portrait phone. Same header-clearance + type-scale treatment, keyed off
   height instead of width. */
@media (max-height: 500px) {
  .nav { height: 56px; }
  .hero-inner { padding-top: 88px; }
  .hero-inner--simple { padding-bottom: 56px; }
  .hero-block .hero-title { font-size: clamp(24px, 5.5vw, 32px); line-height: 1.15; }
  .scroll-cue { bottom: 10px; }
}

/* ===== SOFT-LAUNCH: styling for disabled contact controls + Launching Soon panel.
   Delete this whole block to go fully live. ===== */
.soft-soon { cursor: default; pointer-events: none; }
.btn.soft-soon { opacity: 0.5; }
.soft-mail { cursor: default; color: inherit; }
/* mobile sticky call bar is removed during soft-launch — reclaim its reserved space */
@media (max-width: 860px) { body { padding-bottom: 0 !important; } }
.launch-panel { padding: 8px 0; max-width: 560px; }
.launch-panel .launch-h { font-size: 30px; line-height: 1.22; font-weight: var(--weight-medium);
  letter-spacing: -0.01em; color: var(--text-1); margin: 12px 0 18px; text-wrap: balance; }
.launch-panel .launch-p { font-size: 17px; line-height: 1.7; color: var(--text-2); text-wrap: pretty; }
/* ===== END SOFT-LAUNCH ===== */

/* ============ ARTICLE / RESOURCE PAGES ============ */
.article-hero { background: var(--carbon-dark); padding: 142px 0 60px; }
.breadcrumb { display: flex; align-items: center; gap: 9px; font-size: 13px; flex-wrap: wrap;
              color: rgba(255,255,255,0.55); margin-bottom: 28px; }
.breadcrumb a { color: rgba(255,255,255,0.72); transition: color var(--dur); }
.breadcrumb a:hover { color: var(--on-dark); }
.breadcrumb .sep { color: rgba(255,255,255,0.3); }
.article-hero .cat { color: var(--electric-blue); font-size: 12px; letter-spacing: 0.16em;
                     text-transform: uppercase; font-weight: var(--weight-medium); margin: 0 0 18px; }
.article-hero h1 { font-family: var(--font-display); font-weight: var(--weight-medium); color: var(--on-dark);
                   font-size: clamp(34px, 4.4vw, 58px); line-height: 1.06; letter-spacing: -0.02em;
                   margin: 0; max-width: 900px; }
.article-lead { background: var(--light-ash); border-bottom: 1px solid var(--border-light); }
.article-lead .wrap { max-width: 860px; }
.article-lead p { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 27px); line-height: 1.48;
                  color: var(--text-1); margin: 0; padding: 52px 0; font-weight: var(--weight-regular); }
.prose { max-width: 760px; margin: 0 auto; padding: 76px 0 40px; }
.prose h2 { font-family: var(--font-display); font-weight: var(--weight-medium); color: var(--text-1);
            font-size: clamp(24px, 2.6vw, 33px); line-height: 1.18; letter-spacing: -0.01em; margin: 50px 0 18px; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 17px; line-height: 1.78; color: var(--text-2); margin: 0 0 20px; }
.prose a { color: var(--electric-blue); text-decoration: none; border-bottom: 1px solid transparent;
           transition: border-color var(--dur); }
.prose a:hover { border-bottom-color: var(--electric-blue); }
.prose .note { font-size: 14px; line-height: 1.65; color: var(--text-3); border-left: 2px solid var(--electric-blue);
               padding: 6px 0 6px 18px; margin: 34px 0 8px; }
.price-table { width: 100%; border-collapse: collapse; margin: 30px 0 10px; font-size: 15px; }
.price-table th, .price-table td { text-align: left; padding: 15px 8px; border-bottom: 1px solid var(--border-light); }
.price-table th { color: var(--text-3); font-weight: var(--weight-medium); font-size: 12px;
                  letter-spacing: 0.08em; text-transform: uppercase; }
.price-table td:first-child { color: var(--text-2); }
.price-table td:last-child { color: var(--text-1); font-weight: var(--weight-medium); white-space: nowrap; text-align: right; }
.article-cta { padding: 96px 0; text-align: center; }
.article-cta .wrap { position: relative; z-index: 2; }
.article-cta h2 { font-family: var(--font-display); font-weight: var(--weight-medium); color: var(--on-dark);
                  font-size: clamp(30px, 3.8vw, 50px); line-height: 1.06; margin: 0 0 16px; letter-spacing: -0.015em; }
.article-cta p { color: rgba(255,255,255,0.78); font-size: 17px; max-width: 600px; margin: 0 auto 30px; line-height: 1.55; }
.article-cta .cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.article-cta .cta-btns .btn { min-width: 280px; }

/* .prose (the resource-article body: headings, paragraphs, the note
   callout, the price table) isn't wrapped in .wrap like the rest of the
   page — it's a bare max-width:760px block that only gets side margins
   once the viewport is wider than 760px. Below that it has zero
   horizontal padding, so its text runs edge-to-edge while everything else
   on the page (breadcrumb, lead paragraph, FAQ accordion) is correctly
   inset via .wrap. Matching that same 22px here. This has to live after
   the unconditional .prose rule above (not in the earlier RESPONSIVE
   section) since that rule's padding shorthand — appearing later in the
   file — would otherwise win the cascade and silently overwrite it. */
@media (max-width: 720px) {
  .prose { padding-left: 22px; padding-right: 22px; }
}