/* ============================================================
   NJ INDOOR OUTDOOR — THE SITE FOOTER

   ONE FOOTER, EVERY PAGE. Before this file there were three:

     .foot    on /, /about/, /junk-removal-page/ and
              /dumpster/, styled by v2.css
     .footer  on the 21 blog posts, styled by /assets/site.css
     Webflow's rl_footer1_component-2 on /pricing/,
              /blog-page/, /photos/ and /get-a-free-quote/

   All three are replaced by .sfoot. Treatment B out of
   design-lab/footer.html.

   THE CONTENT IS THE LIVE SITE'S, TO THE CHARACTER, and that was the
   brief: copy njindooroutdoor.com's footer exactly and change only
   how it looks. It was read out of the live DOM on 22 August 2026.

   WHAT THAT DECISION COST, RECORDED HERE SO IT IS NOT A SURPRISE. The
   footers it replaced carried more than the live one does. Gone from
   every page, deliberately and on request:

     · the Services nav and the Company nav
     · the phone number, the email address, the street address
     · the Book Now button
     · "Licensed & insured" and Terms of Service
     · THE WORKING NEWSLETTER FORM that was on the blog posts. It
       posted to FormSpark endpoint 6gRNtSqds. The live copy line
       "Stay updated with the latest news, promotions, and exclusive
       offers" is still in the footer below — it is now a statement
       with nothing behind it, because live has no form either.

   FOUR THINGS COPIED VERBATIM THAT ARE PROBABLY WRONG, all live's,
   none of them touched:

     1. ALL 29 TOWN LINKS POINT AT "#". They go nowhere, and that
        defeats the reason the block exists — a link to "#" passes no
        signal to a search engine, so this list currently does exactly
        what plain text would. Give the towns real destinations and it
        starts earning its keep.
     2. "Belmark" is Belmar. "Bradly Beach" is Bradley Beach.
        "Colt Neck" is Colts Neck.
     3. "Matawan / Aberdeen" is listed twice.
     4. "© 2025" is already stale.

   THIS FILE IS SELF-CONTAINED ON PURPOSE. It loads on v2-built pages
   (which have v2.css) AND on the four Webflow-mirrored pages (which
   cannot load v2.css — it collides with Webflow's reset on *, html,
   body, a and img). So it declares its own tokens as fallbacks and
   carries its own :where()-scoped bridge, the same trick v2-nav.css
   and v2-hero.css use. EVERY RULE IS SCOPED TO .sfoot. Unscoped, the
   bridge would restyle the whole mirrored page.
   ============================================================ */

/* --- bridge: v2's base rules, scoped to the footer subtree --- */
:where(.sfoot) {
  font-family: var(--font, 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif);
  -webkit-font-smoothing: antialiased;
}
:where(.sfoot) h2,
:where(.sfoot) p,
:where(.sfoot) ul   { margin: 0; }
:where(.sfoot) ul   { padding: 0; list-style: none; }
:where(.sfoot) li   { margin: 0; }
:where(.sfoot) a    { color: inherit; text-decoration: none; }
:where(.sfoot) img  { max-width: 100%; height: auto; display: block; }

/* Ink gradient, never a flat fill, with the noise layer over it. The
   standing dark-section rule: a flat dark area is what the display
   pipeline spatial-dithers into a faint diagonal hairline across the
   whole band. The two stops are five luminance steps apart and do not
   read as a gradient. THE NOISE DIV IS LOAD-BEARING — do not drop it.

   Live's ground is a flat #002B54. */
.sfoot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #131B2E 0%, #0F172A 100%);
  color: #FFFFFF;
}

.sfoot__noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* Same rail as the pricing page's sections — padding inside the
   max-width, so the footer's left edge lines up with the content
   above it rather than starting 60px further out. */
.sfoot__inner {
  position: relative;
  z-index: 2;
  max-width: 1800px;
  margin: 0 auto;
  padding: clamp(48px, 5vw, 76px) clamp(20px, 5vw, 110px) 0;
}

/* THE WHOLE POINT OF TREATMENT B. Live stacks this centred, which on
   a wide screen leaves dead ground either side and runs the towns ten
   rows deep. Company block left, towns across the rest of the rail in
   five columns, six rows. About 40% shorter. */
.sfoot__grid {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 90px);
  align-items: start;
}

.sfoot__co {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.35;
  color: #FFFFFF;
}

.sfoot__blurb {
  margin-top: 10px;
  max-width: 46ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .72);
}

.sfoot__hours {
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
}

/* Location + email, restored from the live site's announcement bar.
   The bar drops them below 900px, so this is where they stay reachable
   on a phone. Stacked rather than inline: the address is 39 characters
   and would wrap mid-word beside the location line. */
.sfoot__contact {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.5;
}
.sfoot__contact a {
  color: rgba(255, 255, 255, .82);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: color .2s linear;
}
.sfoot__contact a:hover { color: #FFFFFF; }

/* #71B745 measures 7.0:1 on this ground, so the brand green is safe
   here at any size — it is only on LIGHT grounds that it drops to
   2.45:1 and has to become #49772D. */
.sfoot__head {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #71B745;
}

.sfoot__areas ul {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px 24px;
}

/* rgba(255,255,255,.76) on this ground is 11.4:1, well past the 4.5
   floor for 13.5px copy. It lifts to full white on hover so the 29
   links read as links without being underlined blue. */
.sfoot__areas a {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .76);
  transition: color .15s linear;
}
.sfoot__areas a:hover,
.sfoot__areas a:focus-visible { color: #FFFFFF; }

.sfoot__barwrap {
  margin-top: clamp(40px, 4vw, 60px);
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.sfoot__bar {
  position: relative;
  z-index: 2;
  max-width: 1800px;
  margin: 0 auto;
  padding: 22px clamp(20px, 5vw, 110px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 26px;
  font-size: 13px;
  color: rgba(255, 255, 255, .62);
}
.sfoot__bar a { transition: color .15s linear; }
.sfoot__bar a:hover,
.sfoot__bar a:focus-visible { color: #FFFFFF; }

.sfoot__barlinks {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

@media (max-width: 1080px) {
  .sfoot__grid { grid-template-columns: 1fr; gap: 34px; }
  .sfoot__areas ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .sfoot__areas ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sfoot__bar { justify-content: flex-start; }
}

@media (max-width: 480px) {
  .sfoot__areas ul { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sfoot__areas a,
  .sfoot__bar a { transition: none; }
}