/* ============================================================
   live-sections.css — REVIEWS + FINAL CTA, COPIED FROM THE LIVE SITE

   A one-to-one copy of two sections from njindooroutdoor.com's own
   Webflow build: the reviews slider ("What customers say about New
   Jersey Indoor Outdoor Maintenance") and the dark CTA banner
   underneath it. The client likes that UI as it stands, so this is a
   reproduction rather than a redesign.

   IT DOES NOT MATCH v2'S DESIGN SYSTEM AND IT IS NOT SUPPOSED TO.
   Every value below was read off the live stylesheet
   (nj-indoor-outdoor.webflow.shared.5772f32ef.min.css) and is kept
   exactly as found — Poppins / Varela / PT Serif rather than
   Montserrat, #0FA608 green and #00529F blue rather than v2's
   --blue, a fixed 1000px section height, a 380px slider. Do not
   "fix" these to match v2 without being asked; the whole point of
   this file is that it is the live design, unedited.

   The class names are Webflow's too, including .asdasdasdasd, which
   is a real class on the live site carrying the "Or call us
   directly" link. Renamed classes would make the next diff against
   the live site harder to read, so they stay.

   FOUR THINGS CHANGED, all mechanical, none visual:

     1. Webflow CDN URLs -> local /assets/img/. The build already has
        a rule against hotlinking their CDN, and the same rule applies
        here. Eight photographs and two arrow icons were downloaded.

     2. The slider MECHANISM. Webflow's .w-slider moves its slides
        with jQuery; this page loads neither jQuery nor webflow.js, so
        the markup alone would have shown slide one and never moved.
        The mask is a scroll-snap track now, driven by initCarousel in
        v2.js — the same function the home page's reviews row and the
        About page's two carousels use. Identical to look at, and it
        drags and swipes natively, which the Webflow version does not.

     3. .w-slider's grey placeholder background and 300px default
        height are dropped. Both are Webflow defaults that .lynx-slider
        overrides anyway; carrying them over would only mean a grey
        flash before the override applies.

     4. The CSS variables are inlined. --lynx--black #1F2022,
        --lynx--grey #797C83, --lynx--white white. Three values used
        five times between them, against pulling a foreign token
        namespace into this build.

   Loaded only by v2/junk-removal-page/.
   ============================================================ */


/* ============================================================
   REVIEWS — .section-19

   THE HEADING IS LIVE TEXT, NOT THE LIVE SITE'S IMAGE, and this is
   the one place the copy deliberately departs from the original.

   The live site bakes the whole heading — both lines, the Google
   wordmark, the stars and the 5.0 — into a single AVIF at 937x274,
   compressed to 28KB. That is a lossy photograph OF TEXT: the letter
   edges carry compression artifacts, it cannot scale past its native
   width without softening, it is invisible to search engines and to
   screen readers except through alt, and it cannot reflow on a phone.
   It is the literal source of "the text looks grainy".

   Rebuilt below out of real type, so it is crisp at any zoom and on
   any density, selectable, and translatable. Same words, same two
   colours, same white plate, same Google mark and rating. The image
   is still in /assets/img/rev-heading.webp if it is ever wanted back.
   ============================================================ */

/* White plate, matching the one baked into the original image. */
.revhead {
  background: #FFFFFF;
  border-radius: 18px;
  padding: clamp(22px, 2.6vw, 34px) clamp(24px, 3.4vw, 52px);
  text-align: center;
  box-shadow: 0 10px 15px -10px rgba(31, 32, 34, .1);
}

.revhead__line1 {
  margin: 0;
  color: #111111;
  font-family: Poppins, sans-serif;
  font-size: clamp(21px, 2.5vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.revhead__line2 {
  margin: 4px 0 0;
  color: #00529F;
  font-family: Poppins, sans-serif;
  font-size: clamp(17px, 2.1vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.revhead__rating {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 1.4vw, 20px);
  margin-top: clamp(12px, 1.4vw, 18px);
}

/* Google's own four colours, letter by letter, same approach the home
   page's reviews block uses. */
.revhead__g {
  font-family: Poppins, sans-serif;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -.02em;
}
.revhead__g .b { color: #4285F4; }
.revhead__g .r { color: #EA4335; }
.revhead__g .y { color: #FBBC04; }
.revhead__g .g { color: #34A853; }

.revhead__stars { display: flex; gap: 3px; }
.revhead__stars svg { width: clamp(19px, 2vw, 26px); height: auto; fill: #FBBC04; }

.revhead__score {
  color: #111111;
  font-family: Poppins, sans-serif;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
}

@media (max-width: 560px) {
  .revhead__rating { flex-wrap: wrap; gap: 8px; }
}

/* PLAIN, AND NOT THE LIVE SITE'S GREEN. The original is a 50%
   #2BFF00 wash over a photograph, which is where most of the "grainy"
   reading came from: a hard saturated green over photographic detail
   is visual noise, and everything sitting on it picks that up. Swapped
   for the page's own --surface tint, which is what .clears and .haul
   already use, so the section now belongs to the page's light rhythm.

   FIXED HEIGHT DROPPED. It was height: 1000px with the content
   floated inside it, which is what made the section feel enormous —
   most of that height was empty. Padding defines it now, so it is as
   tall as its contents and no taller. */
.section-19 {
  background: var(--surface);
  padding: clamp(48px, 5vw, 72px) 20px clamp(56px, 5.5vw, 80px);
}

.lynx-content {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  /* was 148px; the section's own padding does this now */
  display: flex;
}

.lynx-block-center {
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.lynx-slider {
  position: relative;
  background-color: #FFFFFF;
  border-radius: 30px;
  width: 100%;
  /* 380 -> 340. Not the full 0.75 the section took: the longest
     review needs 340px of copy plus padding, measured on the rendered
     page — at exactly 340 it fits with ZERO margin, which one extra
     word would break. 360 buys a line of headroom. The section's
     height came out of its empty space instead, where there was
     plenty: 1000px down to ~754, which is the 0.75 asked for. */
  height: 360px;
  margin-top: 18px;
  box-shadow: 0 10px 15px -10px rgba(31, 32, 34, .1);
  text-align: center;
}

/* ---- the track ----
   .w-slider-mask verbatim except overflow, which goes from hidden to
   auto so the slides can actually move without Webflow's JS. The
   nowrap + inline-block pairing is Webflow's and is what makes one
   slide fill the frame; scroll-snap makes it land on whole slides. */
.lynx-mask {
  z-index: 1;
  white-space: nowrap;
  height: 100%;
  display: block;
  position: relative;
  left: 0;
  right: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  border-radius: 30px;   /* matches .lynx-slider, or slides square off its corners */
}
.lynx-mask::-webkit-scrollbar { display: none; }
.lynx-mask:focus-visible { outline: 3px solid #1F2022; outline-offset: 3px; }

.lynx-slide-reviews {
  scroll-snap-align: start;
  vertical-align: top;
  white-space: normal;
  text-align: left;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
}

.lynx-block-slide-reviews {
  height: 100%;
  display: flex;
}

/* The bottom-right radius really is 200px on the live site — it is
   the most recognisable thing about this card. */
.lynx-image-slide {
  object-fit: cover;
  border-top-left-radius: 30px;
  border-bottom-right-radius: 200px;
  border-bottom-left-radius: 30px;
  width: 50%;
  height: 100%;
  display: inline-block;
}

.lynx-block-slide {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 50%;
  padding: 38px 7%;
  display: flex;
}

.lynx-paragraph-slide {
  color: #797C83;
  margin-bottom: 36px;
  font-family: Varela, sans-serif;
  font-size: 18px;
  line-height: 165%;
}

.lynx-client {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.lynx-image-client {
  object-fit: cover;
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

.lynx-text-client {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-left: 14px;
  display: flex;
}

.lynx-heading-client {
  color: #1F2022;
  margin-top: 0;
  margin-bottom: 2px;
  font-family: 'PT Serif', serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 132%;
}

.lynx-client-info {
  color: #797C83;
  font-family: Varela, sans-serif;
  font-size: 12px;
  line-height: 140%;
}

/* ---- arrows ----
   Webflow ships these as <div>s; they are <button>s here so they are
   focusable and operable from the keyboard, which the originals are
   not. The geometry is unchanged. */
.lynx-left-arrow,
.lynx-right-arrow {
  position: absolute;
  inset: 0;
  width: 55px;
  height: 55px;
  margin: auto;
  padding: 0;
  border: 0;
  cursor: pointer;
  background-color: #1F2022;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
  border-radius: 50%;
  transition: opacity .2s linear;
}
.lynx-left-arrow  { z-index: 3; right: auto; left: -20px;  background-image: url("/assets/img/rev-arrow-left.svg"); }
.lynx-right-arrow { z-index: 4; left: auto;  right: -20px; background-image: url("/assets/img/rev-arrow-right.svg"); }
.lynx-left-arrow[disabled],
.lynx-right-arrow[disabled] { opacity: .3; pointer-events: none; }
.lynx-left-arrow:focus-visible,
.lynx-right-arrow:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

/* Off on the live site. Kept so the selector still exists if it is
   ever switched back on. */
.lynx-slide-nav { display: none; }


/* ============================================================
   FINAL CTA — .fn-cta-banner-dark

   Two-column grid: copy left, photograph right. The photograph is
   placed with order:-9999 on the live site, which is how it ends up
   on the right despite coming second in the source — reproduced
   below rather than reordered, so the markup still matches theirs.
   ============================================================ */

.fn-cta-banner-dark {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  color: #ECF0EF;
  background-color: #DAD9DA;
  border-radius: 0;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  justify-content: center;
  place-items: center stretch;
  width: 100%;
  display: grid;
  position: relative;
  overflow: hidden;
}

/* THE #w-node- GRID-AREA RULES ARE DELIBERATELY NOT COPIED, and this
   is the one place where copying the live stylesheet verbatim gives
   the WRONG answer. That stylesheet contains

     #w-node-...21b0 { grid-area: span 1/span 2/span 1/span 2 }
     #w-node-...21bc { grid-area: span 1/span 1/span 1/span 1 }

   which would put the copy across both columns and drop it onto a
   second row under a half-width photograph. Measured on the live page
   itself, both children compute to grid-area: AUTO and sit side by
   side at 940.5px each — so those rules are dead there, overridden or
   orphaned from an older node id. Reproducing them faithfully
   reproduced a bug the live site does not have.

   What actually places them is `order: -9999` on the image: auto
   placement then fills column one with the photograph and column two
   with the copy, which is the layout you see. */
.fn-banner-dark-column {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 5vw 80px 80px;
  font-size: 15px;
  display: flex;
}

.fn-cta-banner-dark-image {
  order: -9999;
  align-self: stretch;
  object-fit: cover;
  width: 100%;
}

.fn-heading-18 {
  color: #000;
  text-align: center;
  margin-top: 0;
  margin-bottom: 24px;
  font-family: Poppins, sans-serif;
  font-size: 40px;
  line-height: 1.2em;
}

.fn-paragraph-7 {
  color: #000;
  text-align: center;
  margin-bottom: 32px;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6em;
}

.div-block-6 {
  grid-column-gap: 44px;
  grid-row-gap: 44px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

/* Green. Not v2's --blue, deliberately — this is the live design. */
.fn-button {
  color: #fff;
  text-align: center;
  background-color: #0FA608;
  border: 1px solid #0FA608;
  border-radius: 6px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 259px;
  padding: 12px 24px;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6em;
  text-decoration: none;
  transition: opacity .25s, border-color .25s;
  display: flex;
}
.fn-button:hover { opacity: .9; background-color: #000; border-color: #0F1213; }

.fn-button-copy {
  color: #fff;
  text-align: center;
  background-color: #00529F;
  border: 1px solid #00529F;
  border-radius: 7px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 259px;
  padding: 12px 24px;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6em;
  text-decoration: none;
  transition: opacity .25s, border-color .25s;
  display: flex;
}
.fn-button-copy:hover { opacity: .9; background-color: #000; border-color: #0F1213; }

/* Webflow's own class name for the "Or call us directly" link. */
.asdasdasdasd {
  color: #000;
  text-align: center;
  margin-top: 23px;
  margin-bottom: 18px;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6em;
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .fn-button,
  .fn-button-copy,
  .lynx-left-arrow,
  .lynx-right-arrow { transition: none; }
}


/* ============================================================
   BREAKPOINTS — Webflow's own three, values unchanged
   ============================================================ */

@media screen and (max-width: 991px) {
  .fn-heading-18 { margin-bottom: 12px; font-size: 40px; }
  .fn-button { margin-bottom: 22px; display: block; }
  .fn-banner-dark-column { padding-top: 40px; padding-bottom: 40px; padding-left: 40px; }
  .div-block-6 { justify-content: flex-start; align-items: center; display: block; }
}

@media screen and (max-width: 767px) {
  .fn-heading-18 { font-size: 34px; }
  .fn-paragraph-7 { margin-bottom: 24px; }
  .fn-button { width: 100%; }
  .fn-button-copy { width: 100%; }
  .fn-banner-dark-column { padding: 12px; }
  .fn-cta-banner-dark-image { display: none; }
  .div-block-6 { display: block; }

  .lynx-slider { height: 560px; }
  .lynx-left-arrow  { inset: auto auto -5% 7%; }
  .lynx-right-arrow { inset: auto 7% -5% auto; }
  .lynx-block-slide { width: 100%; height: 100%; padding: 40px 10%; }
  .lynx-image-slide {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    width: 100%;
    height: 250px;
  }
  .lynx-block-slide-reviews { flex-direction: column; }
  .asdasdasdasd { margin-bottom: 24px; }
}

@media screen and (max-width: 479px) {
  .fn-paragraph-7 { font-weight: 400; }
  .fn-button { width: 100%; }
  .fn-button-copy { width: 100%; }
  .div-block-6 { display: block; }
  /* The live site goes flat green here; ours is already plain. */
  .lynx-heading-client { font-size: 16px; }
}