/* ============================================================
   NJ INDOOR OUTDOOR — v2 HEADER, FOR THE WEBFLOW-MIRRORED PAGES

   /pricing/, /blog-page/, /photos/ and /get-a-free-quote/
   are 1:1 mirrors of the live Webflow pages and are styled by
   Webflow's own stylesheet. They cannot load v2.css: the two
   collide on *, html, body, a and img, and the mirrored look goes
   with it.

   So this file carries the header and nothing else. Every rule below
   is COPIED VERBATIM out of v2.css — do not hand-edit it. When the
   header changes in v2.css, regenerate rather than patch, or the two
   navs drift apart and the whole point of this file is lost.

   Two things are NOT copies, and they are both here in the bridge
   block directly below:

     1. v2's element-level base rules — the ones v2.css sets on bare
        `body`, `a`, `img` and `button`. Those selectors belong to
        Webflow on these pages (its `body` is Arial 14/20, and its
        links underline), so without this the nav renders in Arial
        with every link underlined. The bridge re-states v2's base on
        the header subtree ONLY. It must never lose that scoping —
        unscoped, it would restyle the whole mirrored page.
     2. The :root token block is trimmed to the twelve custom
        properties the header actually reads. Verified: none of those
        names collide with the 56 Webflow defines or the 34 it reads.

   `* { box-sizing: border-box }` is NOT restated — Webflow's
   stylesheet already sets it globally, so the header inherits it.

   EVERY BRIDGE RULE IS WRAPPED IN :where(). That is load-bearing, not
   style. Scoping `a { color: inherit }` to `.site-header a` raises it
   from specificity (0,0,1) to (0,1,1), which then beats
   `.header-cta { color: #FFFFFF }` at (0,1,0) — the Book Now pill and
   the announcement bar lose their white text and inherit body ink.
   :where() contributes nothing, so these land at the same weight the
   bare element selectors carry in v2.css and the cascade below
   behaves exactly as it does there.
   ============================================================ */

/* --- bridge: v2's base rules, scoped to the header subtree --- */
:where(.above-header, .site-header) {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.857;
  color: var(--body-ink);
  -webkit-font-smoothing: antialiased;
}
:where(.above-header, .site-header) a      { color: inherit; text-decoration: none; }
:where(.site-header) img                   { max-width: 100%; height: auto; display: block; }
/* `color: initial` is not in v2.css, and it is here to match it rather
   than to depart from it. v2 leaves .nav-toggle's colour to the UA
   default (black); Webflow's normalize sets `color: inherit` on
   buttons, which would hand it the header's body ink instead. Nothing
   in the toggle draws with currentColor today, so this is belt and
   braces — it keeps the computed styles identical to /about/ so a
   future currentColor bar cannot silently drift. */
:where(.site-header) button                { font: inherit; cursor: pointer; color: initial; }

:root {
  --bar-bg:      #EEEEEE;
  --bar-line:    #EAEAEA;
  --bar-text:    #7D7D7D;
  --nav-text:    #737373;
  --nav-hover:   #424242;
  --header-bg:   #FFFFFF;
  --body-ink:    #4C5265;
  --blue:        #2F6FE5;
  --blue-hover:  #2560CC;
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bar-h:    38px;
  --header-h: 79px;
  --logo-h: 62px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue); color: #fff; padding: 12px 18px; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0;
}
/* ============================================================
   ANNOUNCEMENT BAR — static, NOT sticky

   Sits at the very top of the document in normal flow and scrolls
   away with the page. It never overlays the hero, so it keeps the
   reference's own colours at all times.

   Reference: 51px, #EEEEEE, 1px solid #EAEAEA, holding a pill of
   15px/700 uppercase #7D7D7D at padding 10px 20px, radius 30px.
   Scaled to 38px; the pill's type and padding come down with it so
   it still sits centred in the bar.
   ============================================================ */

.above-header {
  position: relative;
  z-index: 70;                  /* above the hero's negative margin */
  height: var(--bar-h);
  background: var(--bar-bg);
  border-bottom: 1px solid var(--bar-line);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Three items now, not one: location, Call Now, email. The two flanks
   are live's own announcement-bar content, restored. space-between puts
   them on the edges with Call Now held in the middle.

   These live HERE rather than in v2.css because the four Webflow-derived
   pages (pricing, photos, blog-page, get-a-free-quote) load v2-nav.css
   and NOT v2.css. Same rules, two stylesheets — if you change one,
   change the other. */
.above-header { justify-content: space-between; gap: 16px; padding: 0 20px; }

.above-header__side {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--bar-text);
  opacity: .82;
  white-space: nowrap;
  transition: opacity .2s linear, color .2s linear;
}
.above-header__side:hover { opacity: 1; color: var(--nav-hover); }
.above-header__side .above-header__ico { width: 14px; height: 14px; fill: currentColor; }
.above-header__side--mail { text-transform: none; }

/* 38px of bar cannot carry three items on a phone. The flanks drop and
   Call Now re-centres; the footer keeps both links at full size. */
@media (max-width: 900px) {
  .above-header { justify-content: center; }
  .above-header__side { display: none; }
}

.above-header__btn {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 30px;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--bar-text);
  transition: color .2s linear;
}
.above-header__btn:hover { color: var(--nav-hover);
}
.above-header__emoji { margin-right: 6px;
}
/* ============================================================
   NAV BAR — sticky

   position: sticky means it sits in normal flow directly under the
   announcement bar at scroll top, then pins to y=0 on its own once
   the announcement bar has scrolled past. No JS needed for the
   pinning; v2.js only handles the colour state.

   Transparent over the hero at scroll top; .is-solid fades in the
   reference's real colours from the first pixel of scroll.
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  transition: box-shadow .25s ease;
}
.site-header.is-solid { box-shadow: 0 2px 14px rgba(0, 0, 0, .07);
}
/* ============================================================
   HEADER — main bar
   Reference: 105px tall, white, 35px side padding. Scaled to 79px.
   ============================================================ */

.main-header {
  position: relative;
  /* The hero below is a positioned element (it carries the photo
     scrims), so without a z-index here the absolutely-positioned
     mobile nav panel paints underneath it. */
  z-index: 50;
  height: var(--header-h);
  background: transparent;
  padding: 0 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: background .25s ease;
}
.is-solid .main-header { background: var(--header-bg);
}
/* DEVIATION 4 — the reference logo is a 250x35 wordmark (7:1).
   NJ's mark is 800x346 (2.3:1); at 35px tall it would render 81px
   wide and be unreadable. Locked to a height that tracks the bar. */
.brand { position: relative; display: block;
}
.brand img { width: auto; height: var(--logo-h); transition: opacity .25s ease;
}
.brand__dark { position: absolute; inset: 0; opacity: 0;
}
.is-solid .brand__light { opacity: 0;
}
.is-solid .brand__dark { opacity: 1;
}
/* There is no scrim behind the header any more, so the white mark has
   to separate itself. On phones especially it lands on open sky — the
   brightest part of the frame — and a single soft 12px shadow washed
   straight out there. Same structure as the headline: a tight pass to
   cut the edge, a wide pass to lift it off the sky. */
.brand__light {
  filter:
    drop-shadow(0 1px 1px rgba(0, 0, 0, .55))
    drop-shadow(0 2px 16px rgba(0, 0, 0, .65));
}
.is-solid .brand__light { filter: none;
}
.primary-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.primary-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
.primary-nav__list > li { position: relative;
}
.primary-nav__list > li > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 30px;              /* reference nav link padding */
  font-size: 17px;              /* reference nav link size    */
  font-weight: 400;
  text-transform: capitalize;
  color: #FFFFFF;

  /* Two soft passes, up from one at .5. The nav floats over the film in
     its transparent state, and the hero crop was pushed up and in so the
     copy would land on the truck's body — which put CLOUD behind this
     row where there used to be mid-blue sky. Measured on the rendered
     page it fell to 1.06:1, the weakest type on the site.

     No offset on either pass, so this is a glow rather than the tight
     outline the hero headline used to carry: the film immediately
     around each glyph darkens and fades, with no edge to see. It cannot
     make 1.06:1 into a passing number — nothing drawn on the TYPE can,
     WCAG scores the backdrop — but it is the difference between reading
     the nav at a glance and squinting at it.

     Left as a known weak point rather than solved: solving it properly
     means a gradient down from the top of the header, and a tint over
     the film is exactly what this hero is not allowed to have. Zeroed
     in .is-solid below, where the bar has a real background. */
  text-shadow:
    0 0 12px rgba(8, 14, 28, .85),
    0 1px 22px rgba(8, 14, 28, .65);
  line-height: var(--header-h);
  transition: color .25s ease, text-shadow .25s ease;
}
.is-solid .primary-nav__list > li > a { color: var(--nav-text); text-shadow: none;
}
/* Transparent state: the reference's #424242 hover would vanish
   against the photo, so hover reads as a dim instead. Solid state
   uses the reference's own hover colour. */
.primary-nav__list > li > a:hover { opacity: .72;
}
.is-solid .primary-nav__list > li > a:hover { opacity: 1; color: var(--nav-hover);
}
.caret { flex: none; margin-top: 2px; transition: transform .2s ease;
}
.has-sub:hover .caret { transform: rotate(180deg);
}
.sub-menu {
  position: absolute;
  top: 100%;
  left: 20px;
  min-width: 220px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--bar-line);
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 40;
}
.has-sub:hover .sub-menu,
.has-sub:focus-within .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sub-menu a {
  display: block;
  padding: 9px 22px;
  font-size: 16px;
  color: var(--nav-text);
  text-shadow: none;
  transition: color .15s linear, background .15s linear;
}
.sub-menu a:hover { color: var(--nav-hover); background: #F7F7F7;
}
/* BOOK NOW pill — reference values, unscaled: 15px/700 uppercase,
   padding 10px 40px, radius 30px. It reads the same on the photo
   as on white, so it does not change between states. */
.header-cta {
  display: inline-block;
  padding: 10px 40px;
  border-radius: 30px;
  background: var(--blue);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .2s linear;
}
.header-cta:hover { background: var(--blue-hover);
}
.nav-toggle {
  display: none;
  width: 44px; height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 6px;
  /* Reads against open sky, which .18 did not. This is the control's
     own chrome, not an overlay on the film. */
  background: rgba(11, 18, 38, .32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background .25s ease, border-color .25s ease;
}
.is-solid .nav-toggle { background: #fff; border-color: var(--bar-line);
}
.nav-toggle__bar {
  display: block;
  width: 20px; height: 2px;
  background: #FFFFFF;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease, background .25s ease;
}
.is-solid .nav-toggle__bar { background: var(--nav-text);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg);
}
/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
  .primary-nav__list > li > a { padding: 0 18px; font-size: 16px;
  }
  .primary-nav { gap: 18px;
  }
}
@media (max-width: 992px) {
  .main-header { padding: 0 20px;
  }
  .nav-toggle { display: flex;
  }
  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 22px;
    background: #fff;
    border-bottom: 1px solid var(--bar-line);
    box-shadow: 0 14px 26px rgba(0, 0, 0, .10);
    display: none;
  }
  .primary-nav.is-open { display: flex;
  }
  .primary-nav__list { flex-direction: column; align-items: stretch;
  }
  .primary-nav__list > li > a {
    padding: 13px 0;
    line-height: 1.2;
    font-size: 17px;
    color: var(--nav-text);
    text-shadow: none;
    border-bottom: 1px solid #F1F1F1;
  }
  .primary-nav__list > li > a:hover { opacity: 1; color: var(--nav-hover);
  }
  .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 6px 16px;
    min-width: 0;
  }
  .sub-menu a { padding: 10px 0;
  }
  .header-cta { margin-top: 16px; text-align: center;
  }
}
@media (max-width: 768px) {
  :root {
    --logo-h: 52px;
  }
  .above-header__btn { font-size: 12px; padding: 6px 12px;
  }
}
@media (max-width: 480px) {
  :root {
    --logo-h: 44px;
  }
  .above-header__btn { font-size: 11px; letter-spacing: .2px;
  }
  .main-header { padding: 0 16px;
  }
}
/* Short viewports — phones in landscape, small laptops, split
   screens. The bar has to give ground here or the header eats a
   third of the fold; --hero-gap is already tracking vh. The logo
   comes down only as far as the bar forces it to. */
@media (max-height: 620px) {
  :root {
    --bar-h:    30px;
    --header-h: 62px;
    --logo-h:   48px;
  }
  .above-header__btn { font-size: 11px; padding: 5px 12px;
  }
  .primary-nav__list > li > a { font-size: 15px;
  }
  .header-cta { font-size: 13px; padding: 8px 26px;
  }
  .nav-toggle { width: 40px; height: 32px;
  }
}
/* Very short — the announcement bar is the first thing to go, it
   is the least load-bearing element on the page. */
@media (max-height: 460px) {
  :root {
    --bar-h: 0px;
  }
  .above-header { display: none;
  }
}
/* The two buttons. .header-cta stays at 700 — it is the page's
   primary action and the only thing in the bar competing with a
   photograph behind it; the weight is load-bearing there, the caps
   were not. */
.above-header__btn {
  font-weight: 600;
  text-transform: none;
}
.header-cta { text-transform: none;
}
/* ============================================================
   ANNOUNCEMENT BAR — GIVE IT A COLOUR

   The complaint was that the top of the page reads black-and-white
   and dull, and the palette notes at the top of this file explain
   exactly why: --bar-bg #EEEEEE, --bar-line #EAEAEA and --bar-text
   #7D7D7D were all measured off the reference, and the reference's
   bar is deliberately near-invisible furniture. Three greys stacked
   on each other is what "completely grey" means literally.

   Worse, the pill was never finished. .above-header__btn already
   carries padding 6px 16px and border-radius 30px — the whole shape
   of a button — with `background: transparent`, so it draws nothing
   at rest. The bar was a button-shaped hole in a grey strip.

   So the band takes the brand blue and the type goes white. This is
   the page's first paint and the thing it says is "call us", which
   makes it the one strip on the page with a reason to shout.

   THE GRADIENT IS NOT DECORATION, IT IS THE CONTRAST BUDGET.
   White on --blue is 4.64:1 — over AA's 4.5 for normal text, but
   only just, and this is 13px type that drops to 11px in the 480
   block. Running the band DOWN to --blue-hover puts the lower half
   at 5.79:1, so the tightest measurement on the strip is the top
   edge rather than the whole of it. Both stops are existing palette
   values; no new hex was invented for this. Do not flip the stops —
   the lighter end has to be the smaller share of the band, and it
   has to be the end furthest from the type's baseline.

   It also means the band is not a flat fill, which is the standing
   rule for any solid colour block in these builds.

   BORDER-BOTTOM goes to a dark hairline. It was #EAEAEA, chosen to
   separate one near-white from another; under a blue band and above
   the white header that line would read as a light scratch.

   HOVER FILLS THE PILL rather than changing the text colour. The old
   rule moved the type to --nav-hover #424242, which on blue is
   roughly 1.5:1 — the hover state was going to be less readable than
   the rest state. A 16% white wash lights the existing radius
   instead, which is what that radius was always for.

   FOCUS RING GOES WHITE. The global :where() ring is 3px of --blue,
   invisible against a --blue band. :where() has zero specificity so
   a plain class selector overrides it.

   THE EMOJI IS GONE, replaced by an inline SVG in currentColor —
   index.html, about/ and junk-removal-page/ all carry the markup.
   📞 renders as a dark red handset on every platform that has it,
   which was tolerable on grey and clashes badly on blue, and it is
   a different glyph on every OS. .above-header__emoji is left in the
   base rules above; it matches nothing now and deleting it is safe
   whenever someone is in there anyway.

   NOT SCOPED TO A BREAKPOINT. Raised as a phone problem, but the bar
   is one element and it was the same three greys at every width —
   colour on phones and grey on desktop would read as a bug.
   ============================================================ */
.above-header {
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-hover) 100%);
  border-bottom-color: rgba(11, 18, 38, .16);
}
.above-header__btn {
  /* inline-flex so the glyph centres against the cap-height instead
     of sitting on the baseline the way an inline span does. */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #FFFFFF;
  transition: background .2s linear;
}
.above-header__btn:hover { color: #FFFFFF; background: rgba(255, 255, 255, .16);
}
.above-header__btn:focus-visible { outline-color: #FFFFFF;
}

/* THE TWO FLANKS GO WHITE TOO. When the band took the blue the pill
   above was recoloured and these were not, so the location link and
   the email were left on --bar-text #7D7D7D at opacity .82 — a grey
   that was chosen to be near-invisible against #EEEEEE and is close
   to unreadable against blue. They are the first line of the page
   and one of them is the email address; they have to be legible.

   OPACITY GOES TO 1, it does not stay at .82. This is 12.5px type,
   so it needs the full 4.5:1 and white-at-.82 over --blue is roughly
   3.3:1 — the dimming was affordable on a light grey bar and is not
   here. Hierarchy against the Call Now pill is carried by size,
   position and the pill's radius instead, which is enough.

   HOVER UNDERLINES rather than moving the colour. The old rule sent
   these to --nav-hover #424242, dark grey on blue at about 1.5:1,
   which made hovering a link harder to read than leaving it alone —
   the same trap the pill's hover was pulled out of above. The icons
   are fill: currentColor, so they follow the type without a rule.

   Kept byte-identical to the block at the end of v2.css. The two
   files carry the same bar for different sets of pages; if one is
   edited the other has to be. */
.above-header__side {
  color: #FFFFFF;
  opacity: 1;
  transition: text-decoration-color .2s linear;
}
.above-header__side:hover {
  color: #FFFFFF;
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.above-header__side:focus-visible { outline-color: #FFFFFF; }

/* Sized in em so it tracks the type through the 768, 480 and short-
   viewport blocks, all three of which change the bar's font-size and
   none of which should need touching for the icon. */
.above-header__ico {
  width: 1.08em;
  height: 1.08em;
  flex: none;
  fill: currentColor;
}