@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
    

    /* ---------- tokens (team-lead design kit) ---------- */
    .rsg-inm-hdr{ --navy-2:#063676;
      --blue:#2E81C1;
      --gold:#D5AD7B;
      /* SHOP FLOOR alignment 2026-07-29: the chrome now shares the pages' warm stock,
         warm ink hairline, warm secondary text and radii. Poppins was already correct. */ --line:rgba(26,28,27,.14);
      --ink:#1A1C1B; --head-ink:#1A1C1B; --muted:#5E5548;
      /* LOGO VIBE 2026-08-01: --polo is the mascot's black t-shirt, measured off the
         finalized logo art (its polo body reads #202326, the ink outline #0F1012). It
         carries the top utility bar so the shirt colour is a real surface in the chrome
         instead of only living inside the logo image. Every top-bar colour gains contrast
         over the navy it replaces: white 11.69 -> 15.79, #C6D4E0 7.73 -> 10.45,
         #ADBFD1 6.20 -> 8.38, gold 6.19 -> 8.36.
         NOTE: the page DARK BANDS stay navy - the client reverted the charcoal band
         experiment on 2026-08-01. This token is chrome only. */
      --polo:#202326;
      --shadow-mega:0 30px 70px -30px rgba(19,37,61,.42),0 12px 30px -18px rgba(19,37,61,.3);

      position:relative; z-index:40;               /* z-index required: this is a dropdown header */
      font-family:var(--font); color:var(--ink);
      background:var(--card); box-shadow:0 1px 0 var(--line);
    }
    .rsg-inm-hdr *,.rsg-inm-hdr *::before,.rsg-inm-hdr *::after{box-sizing:border-box}
    .rsg-inm-hdr a{text-decoration:none;color:inherit}
    .rsg-inm-hdr button{font-family:inherit;background:none;border:none;cursor:pointer;color:inherit}
    .rsg-inm-hdr ul{list-style:none;margin:0;padding:0}
    .rsg-inm-hdr svg{display:block}

    /* ---------- top utility bar ---------- */
    .rsg-hdr-top{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#000 0%,#1C1C1C 45%,#4A4A4A 100%);color:#D7E2EC;font-size:12.5px}
    /* live weather (ported from Precision Air): crisp canvas sky behind a readability scrim; the bar itself stays on the black gradient */
    .rsg-util__sky{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
    .rsg-util__sky canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.28;mix-blend-mode:screen}
    .rsg-util__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.4),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.4))}
    .rsg-wx{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;padding:3px 12px 3px 8px;border-radius:100px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);text-shadow:0 1px 3px rgba(0,0,0,.6)}
    .rsg-wx__glyph{width:22px;height:22px;flex:none;display:grid;place-items:center}
    .rsg-wx__glyph svg{width:22px;height:22px;display:block}
    .rsg-wx__temp{font-family:var(--font-heading,inherit);font-weight:800;font-size:14px;color:#fff;font-variant-numeric:tabular-nums}
    .rsg-wx__sep{color:rgba(255,255,255,.3)}
    .rsg-wx__loc{color:#ADBFD1;font-weight:600}
    .rsg-wx__cond{color:#D7E2EC;font-weight:600;text-transform:capitalize}
    .rsg-wx.is-loading .rsg-wx__temp{color:#7E93B3}
    .rsg-hdr-top-inner{position:relative;z-index:2;max-width:none;margin:0;padding:5px clamp(18px,2.6vw,56px);display:flex;align-items:center;justify-content:space-between;gap:20px}
            /* weather-driven recommendation (rotates) */
            .rsg-rot{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;font-weight:600;color:#D7E2EC;text-decoration:none;opacity:1;transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
            .rsg-rot.out{opacity:0;transform:translateY(-4px)}
            .rsg-rot svg{flex:none}
            .rsg-rot .rtxt{overflow:hidden;text-overflow:ellipsis}
            .rsg-rot .cta{display:inline-flex;align-items:center;gap:4px;color:var(--h2-gold,#E2C6A3);font-weight:800;border-bottom:1px solid transparent;transition:border-color .2s,gap .2s}
            .rsg-rot .cta svg{width:13px;height:13px;transition:transform .2s}
            .rsg-rot:hover .cta{border-color:var(--h2-gold,#E2C6A3);gap:6px}
            .rsg-rot:hover .cta svg{transform:translateX(2px)}
    .rsg-hdr-top-rev{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:#C6D4E0;white-space:nowrap}
    .rsg-hdr-top-rev b{color:#fff;font-weight:700}
    .rsg-hdr-stars{color:var(--gold);letter-spacing:1px;font-size:11.5px}
    .rsg-hdr-g{width:15px;height:15px;flex:0 0 auto}

    /* ---------- main bar ---------- */
    /* padding trimmed 14->11px so the real logo lockup can be tall enough for its
       wordmark to read (64px puts "INNOVATIVE" at a ~10px cap height) without the
       bar growing more than ~14px overall */
    .rsg-hdr-bar{max-width:none;margin:0;padding:10px clamp(18px,2.6vw,56px);display:flex;align-items:center;gap:clamp(14px,1.5vw,28px)}
    .rsg-hdr-nav{min-width:0}
    .rsg-hdr-logo{display:inline-flex;align-items:center;flex:0 0 auto}
    /* client's FINALIZED 2026 logo lockup (mascot + wordmark), transparent PNG — cut from
       logo-innovative-mechanical-2026-final.png (2026-07-31). The FULL-COLOUR variant is used
       here because the main bar is a light surface, and the wordmark's own brand values clear
       AA on white by a wide margin (red #AA182C 7.30:1, blue #002E6D 13.03:1). Aspect 2.170:1,
       so 64px tall = 139px wide (2px narrower than the previous lockup — no layout impact). */
    .rsg-hdr-logo-img{display:block;height:106px;width:auto;max-width:none}

    .rsg-hdr-collapse{display:contents}

    /* nav */
    .rsg-hdr-nav{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:6px}
    .rsg-hdr-item{position:relative}
    .rsg-hdr-navlink{display:inline-flex;align-items:center;gap:6px;padding:10px 11px;border-radius:6px;font-size:16px;font-weight:600;color:var(--head-ink);letter-spacing:.01em;white-space:nowrap;position:relative;transition:color .2s}
    .rsg-hdr-navlink::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:2px;background:var(--gold);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
    .rsg-hdr-navlink:hover{color:var(--blue-deep)}
    .rsg-hdr-navlink:hover::after{transform:scaleX(1)}
    .rsg-hdr-chev{width:13px;height:13px;transition:transform .28s var(--ease)}
    .rsg-inm-hdr.is-mega .rsg-hdr-svc-btn{color:var(--blue-deep)}
    .rsg-inm-hdr.is-mega .rsg-hdr-svc-btn::after{transform:scaleX(1)}
    /* scope to the Services button: the About chevron also carries .rsg-hdr-chev, so an
       unscoped rule here would flip BOTH arrows when only the mega is open */
    .rsg-inm-hdr.is-mega .rsg-hdr-svc-btn .rsg-hdr-chev{transform:rotate(180deg)}

    /* About dropdown (small menu under the About link) */
    .rsg-hdr-has-drop{position:relative}
    .rsg-hdr-chev-sm{width:11px;height:11px;transition:transform .28s var(--ease)}
    .rsg-hdr-drop{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%) translateY(6px);min-width:212px;
      background:var(--card);border:1px solid var(--line);border-top:3px solid var(--red);border-radius:12px;
      box-shadow:var(--shadow-mega);padding:8px;z-index:46;
      opacity:0;visibility:hidden;pointer-events:none;
      transition:opacity .24s var(--ease),transform .24s var(--ease),visibility 0s linear .24s}
    .rsg-inm-hdr.is-drop .rsg-hdr-drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%);
      transition:opacity .24s var(--ease),transform .24s var(--ease)}
    .rsg-inm-hdr.is-drop .rsg-hdr-chev-sm{transform:rotate(180deg)}
    .rsg-hdr-drop a{display:block;padding:10px 14px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--head-ink);white-space:nowrap;
      transition:background .16s var(--ease),color .16s var(--ease)}
    .rsg-hdr-drop a:hover{background:var(--paper);color:var(--blue-deep)}
    .rsg-hdr-drop a.rsg-hdr-drop-self{display:none} /* shown only in the mobile drawer — desktop taps the About link itself */

    /* actions */
    .rsg-hdr-actions{flex:0 0 auto;display:flex;align-items:center;gap:18px;margin-left:auto}
    .rsg-hdr-actions .rsg-inm-btn-primary{font-size:14.5px;padding:15px 22px;white-space:nowrap}
    .rsg-hdr-phone{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px;border-radius:10px;background:#fff;border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
    .rsg-hdr-phone:hover{border-color:rgba(170,24,44,.45);box-shadow:0 8px 18px -12px rgba(8,25,42,.35)}
    .rsg-hdr-phone-ic{width:18px;height:18px;color:var(--red);display:grid;place-items:center;flex:0 0 auto}
    .rsg-hdr-phone-ic svg{width:18px;height:18px}
    .rsg-hdr-phone-txt{display:flex;flex-direction:column;line-height:1.15}
    .rsg-hdr-phone-txt small{display:none;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
    .rsg-hdr-phone-txt b{font-size:15.5px;font-weight:800;color:var(--head-ink);font-variant-numeric:tabular-nums lining-nums}
    .rsg-hdr-phone:hover .rsg-hdr-phone-txt b{color:var(--red)}

    .rsg-inm-hdr .rsg-inm-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 15px;border-radius:var(--r-btn);background:var(--red);color:var(--btn-text);font-weight:700;font-size:14px;letter-spacing:.03em;text-transform:uppercase;line-height:1;box-shadow:0 16px 30px -16px rgba(170,24,44,.55);transition:transform .25s var(--ease),background .2s}
    .rsg-inm-hdr .rsg-inm-btn-primary:hover{background:var(--red-deep);transform:translateY(-2px)}
    .rsg-inm-hdr .rsg-inm-btn-primary svg{width:15px;height:15px}

    /* burger (mobile) */
    .rsg-hdr-burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;border-radius:8px;flex:0 0 auto}
    .rsg-hdr-burger span{width:22px;height:2px;background:var(--head-ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
    .rsg-inm-hdr.is-nav .rsg-hdr-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .rsg-inm-hdr.is-nav .rsg-hdr-burger span:nth-child(2){opacity:0}
    .rsg-inm-hdr.is-nav .rsg-hdr-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

    /* ---------- MEGA MENU ---------- */
    /* mega = contained ~75%-width floating card (not full-bleed) */
    .rsg-hdr-mega{position:absolute;top:calc(100% + 6px);left:50%;width:calc(100% - 36px);max-width:1164px;z-index:45;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 60px -28px rgba(8,25,42,.45),0 4px 12px rgba(8,25,42,.10);overflow:hidden;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(10px);pointer-events:none;transition:opacity .28s var(--ease),transform .28s var(--ease),visibility 0s linear .28s}
    .rsg-inm-hdr.is-mega .rsg-hdr-mega{opacity:1;visibility:visible;transform:translateX(-50%);pointer-events:auto;transition:opacity .28s var(--ease),transform .28s var(--ease)}
    .rsg-hdr-mega-inner{position:relative;padding:30px 30px 26px}
    .rsg-hdr-mega-inner::before{content:"";position:absolute;left:30px;right:30px;top:0;height:3px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,#E2C6A3,rgba(226,198,163,.15))}
    .rsg-hdr-mega-body{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 250px;gap:28px}

    .rsg-hdr-col{min-width:0}
    .rsg-hdr-col-head{position:relative;display:flex;align-items:center;gap:11px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
    .rsg-hdr-col-head::after{content:"";position:absolute;left:0;bottom:-1px;width:34px;height:2px;border-radius:2px;background:var(--cat)}
    .rsg-hdr-tile{width:38px;height:38px;border-radius:10px;background:var(--cat-soft);color:var(--cat-ink);display:grid;place-items:center;flex:0 0 auto}
    .rsg-hdr-col[data-cat="duct"] .rsg-hdr-tile{color:var(--navy)}
    .rsg-hdr-tile svg{width:20px;height:20px}
    .rsg-hdr-col-title{font-size:15.5px;font-weight:800;color:var(--head-ink);margin:0;letter-spacing:-.005em}
    .rsg-hdr-col-title a{transition:color .18s var(--ease)}
    .rsg-hdr-col-title a:hover{color:var(--cat-ink)}
    .rsg-hdr-links a{display:block;position:relative;padding:7px 0 7px 14px;font-size:14px;font-weight:500;color:var(--ink);transition:color .18s var(--ease),transform .18s var(--ease)}
    .rsg-hdr-links a::before{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--cat);opacity:.55;transition:opacity .18s}
    .rsg-hdr-links a:hover::before{opacity:1}
    .rsg-hdr-col[data-cat="duct"] .rsg-hdr-links a::before{background:var(--gold)}
    .rsg-hdr-links a:hover{color:var(--cat-ink);transform:translateX(3px)}

    /* right spotlight — swaps per hovered column */
    .rsg-hdr-spotwrap{position:relative;min-height:308px;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
    /* MASCOT-ONLY SPOTLIGHT (2026-08-08, round 2 — client: "want mascot in whole box,
       remove other things from this box"). The eyebrow / title / blurb / "Explore" link
       are GONE: the panel is now one category-tinted surface carrying the client's own
       running crew figure, one pose per category, and nothing else.
       The spot IS the stage now, so it fills `inset:0` and paints --cat-stage itself; the
       separate figure band and the six text rules that sat beside it were DELETED rather
       than left dead. (Their class names are deliberately not written out anywhere in this
       file any more, so a count of them is a real guard and not a prose false positive.)
       --cat-stage (set per spot) is NOT a reuse of --cat-soft: --cat-soft is an alpha
       tint drawn for white, and over this card's cream --paper the two cool categories
       cancel to a muddy grey while Water & More landed within 2 values of --paper itself.
       The four --cat-stage values are pre-composited and each holds a clear step off it.
       The whole panel is an <a> with an aria-label — invisible, but it keeps the four
       internal per-category services anchors the relink round restored, which the removed
       "Explore" links used to carry. */
    .rsg-hdr-spot{position:absolute;inset:0;padding:4px;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 80% at 50% 100%,var(--cat-stage),#fff 85%);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
    .rsg-hdr-spot.is-shown{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
    /* ⚠ SIZE ON HEIGHT, never on width, and never on `auto`.
       `width:auto` + the intrinsic width/height attributes means max-width only CAPS him —
       it never scales him UP, so he silently rendered at his native size no matter what the
       panel allowed. And `width:100%` would be worse: the four frames differ in width
       (361-409px native), so filling the width would resize the CHARACTER per pose.
       One fixed HEIGHT is the only rule that keeps him identically sized across the swap.
       260px is set by the WIDEST pose (IAQ, 409x434) fitting the 250px content box: it
       lands at 245px, the other three at 213-230px. The assets are native cuts (~440px
       tall), so this renders at ~1.67x density. */
    .rsg-hdr-spot-msc{display:block;width:auto;height:260px;max-width:100%;transform:translateX(-16px) scale(.98);opacity:0;transition:transform .45s var(--ease) .05s,opacity .3s var(--ease) .05s}
    .rsg-hdr-spot.is-shown .rsg-hdr-spot-msc{transform:none;opacity:1}

    /* mega footer */
    .rsg-hdr-mega-foot{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
    .rsg-hdr-foot-msg{display:flex;align-items:center;gap:14px}
    .rsg-hdr-foot-ico{width:40px;height:40px;border-radius:10px;background:rgba(170,24,44,.08);color:var(--red);display:grid;place-items:center;flex:0 0 auto}
    .rsg-hdr-foot-ico svg{width:20px;height:20px}
    .rsg-hdr-foot-msg b{display:block;font-size:15px;font-weight:700;color:var(--head-ink)}
    /* 2026-08-18: the second line of this block was removed, so this text rule went with it.
       It had to go anyway: .rsg-hdr-foot-msg span (0,1,1) out-specified .rsg-hdr-foot-ico
       (0,1,0) and forced display:block onto the icon circle, cancelling its place-items:center
       - which is why the phone glyph sat high and left instead of centred. */
    .rsg-hdr-foot-actions{display:flex;align-items:center;gap:22px}
    .rsg-hdr-foot-actions .rsg-inm-btn-primary{background:#fff;color:var(--head-ink);border:1px solid var(--line);box-shadow:none;font-size:14.5px;letter-spacing:0;text-transform:none;padding:12px 18px;border-radius:10px}
    .rsg-hdr-foot-actions .rsg-inm-btn-primary:hover{border-color:rgba(170,24,44,.45);color:var(--red)}
    .rsg-hdr-foot-all{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--head-ink);white-space:nowrap}
    .rsg-hdr-foot-all svg{width:18px;height:18px;transition:transform .25s var(--ease)}
    .rsg-hdr-foot-all:hover{color:var(--blue-deep)}
    .rsg-hdr-foot-all:hover svg{transform:translateX(4px)}

    .rsg-inm-hdr :focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:3px}

    /* ---------- responsive ---------- */
    @media (max-width:1440px){
      .rsg-hdr-logo-img{height:96px}
      .rsg-hdr-nav{gap:0}
      .rsg-hdr-navlink{font-size:15px;padding:10px 8px;gap:4px}
      .rsg-hdr-actions{gap:10px}
      .rsg-hdr-phone{padding:0 13px;height:44px}
      .rsg-hdr-phone-txt b{font-size:14.5px}
      .rsg-hdr-actions .rsg-inm-btn-primary{font-size:13.5px;padding:14px 16px;letter-spacing:.04em}
    }

    @media (max-width:1340px){
      /* hamburger sits on the LEFT of the logo; negative margin optically lines the bars up
         with the 18px bar padding (the tap box stays a full 44px) */
      .rsg-hdr-burger{display:flex;order:-1;margin-left:-11px}
      .rsg-rot{display:none}
      .rsg-hdr-collapse{display:none;position:absolute;top:100%;left:0;right:0;z-index:45;background:var(--card);border-top:1px solid var(--line);box-shadow:var(--shadow-mega);max-height:calc(100vh - 118px);overflow-y:auto;padding:12px 0}
      .rsg-inm-hdr.is-embedded .rsg-hdr-collapse{max-height:none;overflow:visible}
      .rsg-inm-hdr.is-nav .rsg-hdr-collapse{display:block}
      .rsg-hdr-nav{flex-direction:column;align-items:stretch;gap:0;justify-content:flex-start}
      .rsg-hdr-item{width:100%}
      .rsg-hdr-navlink{width:100%;padding:14px 28px;border-radius:0;justify-content:space-between;font-size:16px}
      .rsg-hdr-navlink::after{display:none}
      .rsg-hdr-has-drop{width:100%}
      /* About = real accordion in the drawer (collapsed until the row is tapped) */
      .rsg-hdr-drop{display:none;position:static;transform:none;left:auto;opacity:1;visibility:visible;pointer-events:auto;min-width:0;
        background:var(--paper);border:none;border-radius:0;box-shadow:none;padding:0 0 6px}
      .rsg-hdr-drop a{padding:12px 28px 12px 46px;font-size:15px;border-radius:0}
      .rsg-hdr-drop a.rsg-hdr-drop-self{display:block} /* mobile-only: keeps the About page reachable when the row toggles */
      /* the two .is-* rules below are more specific than this media block (media queries add no
         specificity), so their desktop translateX(-50%) MUST be cancelled here or the open panel
         renders half off-screen to the left */
      .rsg-inm-hdr.is-drop .rsg-hdr-drop{display:block;transform:none;left:auto}
      .rsg-hdr-about-link .rsg-hdr-chev-sm{width:16px;height:16px;padding:14px 12px;box-sizing:content-box;margin:-14px -12px -14px 0}
      .rsg-hdr-mega{position:static;left:auto;width:auto;max-width:none;border:none;border-radius:0;opacity:1;visibility:visible;transform:none;pointer-events:auto;box-shadow:none;background:var(--paper);display:none}
      .rsg-inm-hdr.is-mega .rsg-hdr-mega{display:block;transform:none;left:auto;width:auto;max-width:none}
      .rsg-hdr-mega-inner{padding:8px 16px 14px}
      .rsg-hdr-mega-body{grid-template-columns:1fr 1fr;gap:18px}
      .rsg-hdr-spotwrap{display:none}
      .rsg-hdr-mega-foot{margin-top:16px}
      .rsg-hdr-actions{flex-direction:column;align-items:stretch;gap:12px;padding:14px 28px 6px}
      .rsg-hdr-phone{justify-content:center}
      .rsg-inm-hdr .rsg-inm-btn-primary{width:100%}
    }
    @media (max-width:767px){
      /* phones show the location line (the desktop left-hand item) instead of the review line,
         and the navy strip sits BELOW the logo/burger bar (vertical swap) */
      .rsg-inm-hdr{display:flex;flex-direction:column}
      .rsg-hdr-bar{order:1;width:100%} /* width:100% — as a flex item its `margin:0 auto` would shrink-wrap the bar */
      /* 2026-09-10 owner: mobile header like Precision Air - weather bar ON TOP with the Google line beside the chip,
         logo LEFT, boxed burger RIGHT, drawer = hairline rows + outlined Call / solid Message side by side */
      .rsg-hdr-top{order:1}
      .rsg-hdr-bar{order:2}
      .rsg-wx{display:inline-flex;padding:3px 10px 3px 6px;gap:7px}
      .rsg-wx__loc,.rsg-wx__loc+.rsg-wx__sep{display:none}
      .rsg-hdr-top-rev{display:inline-flex;gap:6px}
      .rsg-hdr-top-rev b{font-size:12px}
      .rsg-hdr-top-inner{justify-content:space-between;padding:6px 14px}
      .rsg-hdr-bar{padding:10px 14px 10px 14px;gap:12px}
      .rsg-hdr-burger{order:2;margin-left:auto;margin-right:0;width:48px;height:48px;border:1px solid var(--line);border-radius:10px;background:#fff}
      .rsg-hdr-collapse{top:100%}
      .rsg-hdr-nav>*{border-bottom:1px solid var(--line)}
      .rsg-hdr-navlink{padding:16px 20px;font-size:17px;font-weight:700}
      .rsg-hdr-drop a{padding:12px 20px 12px 38px}
      .rsg-hdr-actions{flex-direction:row;gap:12px;padding:16px 14px 18px}
      .rsg-hdr-actions>*{flex:1 1 0;min-width:0}
      .rsg-hdr-phone{justify-content:center;border:1px solid var(--line);border-radius:10px;padding:14px 10px;background:#fff}
      .rsg-hdr-phone-ic{display:none}
      .rsg-hdr-phone-txt small{display:none}
      .rsg-hdr-phone-txt b{font-size:15.5px;color:var(--navy,#063676);white-space:nowrap}
      .rsg-hdr-phone-txt b::before{content:"Call "}
      .rsg-inm-hdr .rsg-inm-btn-primary{width:auto;justify-content:center;padding:14px 10px;font-size:14.5px;white-space:nowrap}
      .rsg-hdr-navlink{padding:14px 18px}
      .rsg-hdr-actions{padding:14px 18px 6px}
      .rsg-hdr-mega-body{grid-template-columns:1fr}
      .rsg-hdr-logo-img{height:80px}
      /* the mega's footer MESSAGE + Call button are dropped on phones — the drawer already
         ends with the phone number + Request a Call Back. The All Services link stays:
         in the drawer the Services row is a panel toggle, so this is the only way in. */
      .rsg-hdr-mega-foot{margin-top:12px;padding-top:12px}
      .rsg-hdr-foot-msg{display:none}
      .rsg-hdr-foot-actions{width:100%}
      .rsg-hdr-foot-actions .rsg-inm-btn-primary{display:none}
      .rsg-hdr-foot-all{width:100%;justify-content:center;padding:12px 0}
    }
    @media (max-width:480px){
      .rsg-hdr-logo-img{height:58px} /* 106px wide — leaves room for the burger + phone at 360px */
      .rsg-hdr-top{font-size:11.5px}
    }
    @media (prefers-reduced-motion:reduce){
      .rsg-inm-hdr *{transition:none!important}
    }
  
/* italic crutch removed 2026-08-20: heading accent words are span elements now; the accent colour and decoration selectors were re-pointed from em to span in the same round. */
  
@media (max-width:360px){.rsg-hdr-top-rev b{display:none}}

/* ===== 2026-09-10 MEGA (final direction, owner: keep the STAGING layout - 4 category columns + mascot spotlight - just more premium) =====
   Premium pass lives in the main rules above (gold hairline top instead of the red bar, radius 18, deeper soft shadow, soft-tint tiles,
   quiet bullets, category bar under each column title). Below: mascot without a box, slightly larger links, calmer footer. */
.rsg-inm-hdr .rsg-hdr-spotwrap{display:none}
.rsg-inm-hdr .rsg-hdr-spot{padding:0;background:radial-gradient(62% 55% at 50% 64%,var(--cat-stage),rgba(255,255,255,0) 78%)}
.rsg-inm-hdr .rsg-hdr-spot-msc{height:290px}
.rsg-inm-hdr .rsg-hdr-links a{font-size:14.5px;padding:8px 0 8px 14px}
.rsg-inm-hdr .rsg-hdr-col-title{font-size:16px}
.rsg-inm-hdr .rsg-hdr-mega-body{gap:34px;grid-template-columns:repeat(4,minmax(0,1fr))}
.rsg-inm-hdr .rsg-hdr-mega-inner{padding:32px 32px 26px}
@media (max-width:1340px){.rsg-inm-hdr .rsg-hdr-spotwrap{display:none}}
/* 2026-09-10: the sticky rule sat on .rsg-inm-hdr, but its containing block is the 120px template-part wrapper, so it never stuck. Stick the wrapper itself. */
header.wp-block-template-part:has(> .rsg-inm-hdr){position:sticky;top:0;z-index:70}

/* ===== Send Us a Message popup (2026-09-10; markup lives in parts/header.html, opened by any [data-rsg-bk]) ===== */
.rsg-bk{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;padding:24px}
.rsg-bk.is-open{display:flex}
.rsg-bk-lock{overflow:hidden}
.rsg-bk-scrim{position:absolute;inset:0;background:rgba(0,13,30,.66);backdrop-filter:blur(2px)}
.rsg-bk-panel{position:relative;z-index:1;width:100%;max-width:560px;max-height:calc(100vh - 48px);overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px 32px 26px;box-shadow:0 30px 60px -28px rgba(8,25,42,.45),0 4px 12px rgba(8,25,42,.10);animation:rsg-bk-in .32s cubic-bezier(.22,.61,.36,1)}
.rsg-bk-panel::before{content:"";position:absolute;left:28px;right:28px;top:0;height:3px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,#E2C6A3,rgba(226,198,163,.15))}
@keyframes rsg-bk-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.rsg-bk-title{font-family:var(--font-heading);font-size:26px;font-weight:800;line-height:1.18;letter-spacing:-.012em;color:var(--ink,#1A1C1B);margin:4px 44px 20px 0;text-wrap:balance}
.rsg-bk-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy,#063676);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s,color .2s}
.rsg-bk-close:hover{background:var(--navy,#063676);border-color:var(--navy,#063676);color:#fff}
.rsg-bk-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rsg-bk-field{display:block;margin-bottom:14px;min-width:0}
.rsg-bk-field label{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink,#1A1C1B);margin-bottom:6px}
.rsg-bk-field input,.rsg-bk-field textarea{width:100%;font-family:inherit;font-size:16px;color:var(--ink,#1A1C1B);background:#fff;border:1.5px solid rgba(26,28,27,.22);border-radius:10px;padding:12px 14px;line-height:1.45}
.rsg-bk-field textarea{min-height:96px;resize:vertical}
.rsg-bk-field input:focus,.rsg-bk-field textarea:focus{outline:none;border-color:var(--navy,#063676);box-shadow:0 0 0 3px rgba(6,54,118,.14)}
.rsg-bk-consent{display:flex;gap:10px;align-items:flex-start;margin:2px 0 16px;font-size:12.5px;line-height:1.45;color:var(--muted,#5E5548)}
.rsg-bk-consent input{margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--red,#AA182C)}
.rsg-bk-submit{width:100%;min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 26px;border:0;border-radius:10px;cursor:pointer;background:var(--red,#AA182C);color:#fff;font-family:var(--font-heading);font-size:14.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 8px 20px -10px rgba(170,24,44,.7);transition:transform .2s,filter .2s}
.rsg-bk-submit:hover{transform:translateY(-1px);filter:brightness(1.06)}
.rsg-bk-ico{width:16px;height:16px;flex:0 0 auto}
.rsg-bk-note{margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--muted,#5E5548);text-align:center}
.rsg-bk-note a{color:var(--red,#AA182C);font-weight:700;text-decoration:none}
.rsg-bk-close:focus-visible,.rsg-bk-submit:focus-visible{outline:3px solid var(--gold,#E2C6A3);outline-offset:2px}
@media (max-width:520px){
  .rsg-bk{padding:12px}
  .rsg-bk-panel{padding:26px 20px 20px;max-height:calc(100vh - 24px)}
  .rsg-bk-row{grid-template-columns:1fr;gap:0}
  .rsg-bk-title{font-size:22px;margin-right:40px}
}
@media (prefers-reduced-motion:reduce){.rsg-bk-panel{animation:none}}
/* popup fixes 2026-09-10: header button reset outranked the submit; the sticky header's z-index:70 capped the modal under the page's fixed bar */
.rsg-inm-hdr .rsg-bk .rsg-bk-submit{background:var(--red,#AA182C);color:#fff;border:0;border-radius:10px}
.rsg-inm-hdr .rsg-bk .rsg-bk-submit:hover{background:var(--red,#AA182C);color:#fff}
.rsg-inm-hdr .rsg-bk .rsg-bk-close{background:#fff;color:var(--navy,#063676)}
.rsg-inm-hdr .rsg-bk .rsg-bk-close:hover{background:var(--navy,#063676);color:#fff}
html.rsg-bk-lock header.wp-block-template-part:has(> .rsg-inm-hdr){z-index:9999}
html.rsg-bk-lock .hp-mobar{display:none!important}
/* 2026-09-10 owner: top bar + header span the FULL width (inner max-width removed); on wide screens the nav gets its comfortable size back */
@media (min-width:1441px){.rsg-hdr-nav{gap:8px}.rsg-hdr-navlink{font-size:16px;padding:10px 13px}.rsg-hdr-logo-img{height:110px}}
@media (min-width:1800px){.rsg-hdr-bar,.rsg-hdr-top-inner{padding-left:64px;padding-right:64px}}

/* ===== 2026-09-11 DRAWER MEGA FIX (mobile + tablet) =====
   The "MEGA FINAL" block above (.rsg-inm-hdr .rsg-hdr-mega-body / -inner / -links a) is specificity (0,2,0) and sits outside
   any media query, so it out-ranked the (0,1,0) drawer overrides in the responsive section: the drawer rendered the mega as
   FOUR 56px columns at 390px (one word per line, ~770px tall). Everything here is written at the same specificity and placed
   after that block. Tablet drawer (768-1340) = two comfortable columns. Phones (<=767) = the Precision Air mobile pattern:
   "All Services" first, then a category row (tile + title) followed by flat hairline sub-rows, no bullets. */
@media (max-width:1340px){
  .rsg-inm-hdr .rsg-hdr-mega-inner{padding:10px 28px 18px}
  .rsg-inm-hdr .rsg-hdr-mega-body{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px}
  .rsg-inm-hdr .rsg-hdr-links a{font-size:15px;padding:9px 0 9px 14px}
}
@media (max-width:767px){
  .rsg-inm-hdr .rsg-hdr-mega-inner{display:flex;flex-direction:column;padding:0 0 4px}
  .rsg-inm-hdr .rsg-hdr-mega-inner::before{display:none}
  .rsg-inm-hdr .rsg-hdr-mega-body{display:block}
  .rsg-inm-hdr .rsg-hdr-col+.rsg-hdr-col{border-top:1px solid var(--line)}
  .rsg-inm-hdr .rsg-hdr-col-head{margin:0;padding:12px 18px 11px;gap:12px;border-bottom:1px solid var(--line)}
  .rsg-inm-hdr .rsg-hdr-col-head::after{display:none}
  .rsg-inm-hdr .rsg-hdr-tile{width:34px;height:34px;border-radius:9px}
  .rsg-inm-hdr .rsg-hdr-tile svg{width:18px;height:18px}
  .rsg-inm-hdr .rsg-hdr-col-title{font-size:15.5px}
  .rsg-inm-hdr .rsg-hdr-links{list-style:none;margin:0;padding:2px 0 4px}
  .rsg-inm-hdr .rsg-hdr-links a{font-size:15px;font-weight:500;padding:11px 18px 11px 64px;border-bottom:1px solid rgba(26,28,27,.07)}
  .rsg-inm-hdr .rsg-hdr-links li:last-child a{border-bottom:0}
  .rsg-inm-hdr .rsg-hdr-links a::before{display:none}
  .rsg-inm-hdr .rsg-hdr-links a:hover{transform:none}
  /* "All Services" moves to the TOP of the list (Precision order) - the footer is a flex sibling of the body, so order:-1 does it */
  .rsg-inm-hdr .rsg-hdr-mega-foot{order:-1;margin:0;padding:0 18px;border-top:0;border-bottom:1px solid var(--line)}
  .rsg-inm-hdr .rsg-hdr-foot-actions{width:100%}
  .rsg-inm-hdr .rsg-hdr-foot-all{width:100%;justify-content:flex-start;padding:13px 0;font-size:15px;color:var(--navy,#063676)}
}

/* 2026-09-11 pm: the GHL popup panel wrapper rules that lived here are SUPERSEDED by the
 * "GHL SURVEY EMBED - ONE CARD" block in assets/inm-site.css (one site-wide treatment, all placements).
 * They padded the card and eased the old ~1040px FORM; the survey needs the card to carry no padding at all. */

/* 2026-09-11 KELLIE LAUNCH REVIEW - mega menu spotlight mascot restored (5th column; swaps per hovered service column via the existing header JS) */
@media (min-width:1341px){
  .rsg-inm-hdr .rsg-hdr-spotwrap{display:block;min-height:0;align-self:stretch}
  .rsg-inm-hdr .rsg-hdr-mega-body{grid-template-columns:repeat(4,minmax(0,1fr)) 220px;gap:28px}
}

/* 2026-09-11 KELLIE LAUNCH REVIEW 2 - mega spotlight, premium: no bordered box; the mascot stands on a soft category-tinted stage
   with a floor shadow + gold hairline, bottom-aligned to the columns. Swap animation unchanged (header JS toggles .is-shown). */
@media (min-width:1341px){
  .rsg-inm-hdr .rsg-hdr-spotwrap{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;min-height:0;align-self:stretch;position:relative}
  .rsg-inm-hdr .rsg-hdr-spotwrap::after{content:"";position:absolute;left:10%;right:10%;bottom:6px;height:1px;background:linear-gradient(90deg,rgba(226,198,163,0),#E2C6A3 30%,#E2C6A3 70%,rgba(226,198,163,0));pointer-events:none}
  .rsg-inm-hdr .rsg-hdr-spot{position:absolute;inset:0;padding:0;display:flex;align-items:flex-end;justify-content:center;background:none}
  .rsg-inm-hdr .rsg-hdr-spot::before{content:"";position:absolute;left:50%;bottom:40px;width:240px;height:240px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 50% 55%,var(--cat-soft),rgba(255,255,255,0) 72%);pointer-events:none}
  .rsg-inm-hdr .rsg-hdr-spot::after{content:"";position:absolute;left:50%;bottom:0;width:180px;height:20px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(8,25,42,.24),rgba(8,25,42,0) 72%);pointer-events:none}
  .rsg-inm-hdr .rsg-hdr-spot-msc{height:300px;max-width:none;position:relative;z-index:1;margin:0 0 10px;filter:drop-shadow(0 12px 16px rgba(8,25,42,.16))}
}

/* 2026-09-11 KELLIE LAUNCH REVIEW 3 - mega spotlight sits UNDER the Indoor Air Quality column (4-col grid, 2 rows:
   the three taller columns span both rows, IAQ takes row 1 of column 4, the spotlight takes row 2 of column 4). */
@media (min-width:1341px){
  .rsg-inm-hdr .rsg-hdr-mega-body{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr);gap:0 28px}
  .rsg-inm-hdr .rsg-hdr-col{grid-row:1 / span 2}
  .rsg-inm-hdr .rsg-hdr-col[data-cat="iaq"]{grid-column:4;grid-row:1}
  .rsg-inm-hdr .rsg-hdr-spotwrap{grid-column:4;grid-row:2;align-self:stretch;min-height:150px;margin-top:8px}
  .rsg-inm-hdr .rsg-hdr-spot-msc{height:min(100%,300px)}
}

/* 2026-09-11 KELLIE LAUNCH REVIEW 4 - mega menu DARK (desktop floating panel only; the phone/tablet drawer stays light).
   Panel = the site's dark band gradient; white heads, ice hairlines, muted-dark links, category colours kept for dots/tiles
   (IAQ navy swapped for the azure eyebrow tone so it reads on dark). */
@media (min-width:1341px){
  .rsg-inm-hdr .rsg-hdr-mega{background:var(--band-grad,linear-gradient(166deg,#252C37 0%,#002A60 100%));border-color:rgba(255,255,255,.08);box-shadow:0 40px 80px -30px rgba(0,0,0,.65),0 6px 18px rgba(0,0,0,.35)}
  .rsg-inm-hdr .rsg-hdr-mega-inner::before{background:linear-gradient(90deg,#E2C6A3,rgba(226,198,163,.12))}
  .rsg-inm-hdr .rsg-hdr-col-head{border-bottom-color:var(--ice-line,rgba(169,211,240,.22))}
  .rsg-inm-hdr .rsg-hdr-col-title,.rsg-inm-hdr .rsg-hdr-col-title a{color:#fff}
  .rsg-inm-hdr .rsg-hdr-col-title a:hover{color:var(--h2-gold,#E2C6A3)}
  .rsg-inm-hdr .rsg-hdr-tile{background:rgba(255,255,255,.08);color:var(--cat);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  .rsg-inm-hdr .rsg-hdr-col[data-cat="iaq"] .rsg-hdr-tile,.rsg-inm-hdr .rsg-hdr-col[data-cat="iaq"] .rsg-hdr-links a::before,.rsg-inm-hdr .rsg-hdr-col[data-cat="iaq"] .rsg-hdr-col-head::after{color:#539DD6;background-color:#539DD6}
  .rsg-inm-hdr .rsg-hdr-col[data-cat="iaq"] .rsg-hdr-tile{background:rgba(83,157,214,.16)}
  .rsg-inm-hdr .rsg-hdr-col[data-cat="duct"] .rsg-hdr-tile{color:#D5AD7B}
  .rsg-inm-hdr .rsg-hdr-links a{color:var(--muted-dark,#C3D4E4)}
  .rsg-inm-hdr .rsg-hdr-links a:hover{color:#fff}
  .rsg-inm-hdr .rsg-hdr-links a::before{opacity:.75}
  .rsg-inm-hdr .rsg-hdr-mega-foot{border-top-color:var(--ice-line,rgba(169,211,240,.22))}
  .rsg-inm-hdr .rsg-hdr-foot-msg b{color:#fff}
  .rsg-inm-hdr .rsg-hdr-foot-ico{background:var(--red,#AA182C);color:#fff}
  .rsg-inm-hdr .rsg-hdr-foot-all{color:#fff}
  .rsg-inm-hdr .rsg-hdr-foot-all:hover{color:var(--h2-gold,#E2C6A3)}
  .rsg-inm-hdr .rsg-hdr-foot-actions .rsg-inm-btn-primary{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.18)}
  .rsg-inm-hdr .rsg-hdr-foot-actions .rsg-inm-btn-primary:hover{background:var(--red,#AA182C);border-color:var(--red,#AA182C);color:#fff}
  .rsg-inm-hdr .rsg-hdr-spot::before{background:radial-gradient(circle at 50% 55%,rgba(255,255,255,.10),rgba(255,255,255,0) 72%)}
  .rsg-inm-hdr .rsg-hdr-spot::after{background:radial-gradient(ellipse at center,rgba(0,0,0,.5),rgba(0,0,0,0) 72%)}
  .rsg-inm-hdr .rsg-hdr-spot-msc{filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}
}

/* ===== 2026-09-12 OWNER: WINE CELLAR as a 5th mega-menu category =========================
   The mega body is a 4-col x 2-row grid at >=1341px: cooling/heating/duct span both rows,
   iaq sits col4/row1 with the mascot (.rsg-hdr-spotwrap) at col4/row2. Ductwork carries only
   three links, so its row-2 cell sat empty - that is the space the owner pointed at.
   Pin Ductwork to row 1 and drop Wine Cellar into column 3 / row 2.
   Desktop-only on purpose: below 1341px the mega is not laid out as a grid at all (the burger
   drawer restyles this same DOM), so the column just flows into the drawer list.            */
@media (min-width:1341px){
  .rsg-inm-hdr .rsg-hdr-col[data-cat="duct"]{grid-column:3;grid-row:1}
  .rsg-inm-hdr .rsg-hdr-col[data-cat="wine"]{grid-column:3;grid-row:2;align-self:start}
}
.rsg-inm-hdr .rsg-hdr-col[data-cat="wine"] .rsg-hdr-tile{color:#D5AD7B}