.elementor-258 .elementor-element.elementor-element-ff80b41{--display:flex;}/* Start custom CSS for html, class: .elementor-element-b5a77d4 *//* =========================================================
   HERO SECTION (3 STACKED IMAGES + GREEN OVERLAY)
========================================================= */

/* HERO GLOW */
.jsl-lawn-hero{
  position:relative;
}

.jsl-lawn-hero:before{
  content:"";
  position:absolute;
  inset:-40px 0 -40px 0;
  background:
    radial-gradient(900px 420px at 15% 10%, rgba(46,125,50,.10), rgba(255,255,255,0) 60%),
    radial-gradient(760px 420px at 85% 30%, rgba(143,188,143,.16), rgba(255,255,255,0) 62%),
    radial-gradient(900px 520px at 45% 95%, rgba(34,139,34,.08), rgba(255,255,255,0) 60%);
  pointer-events:none;
  z-index:0;
}

.jsl-lawn-hero .jsl-container,
.jsl-lawn-hero .jsl-hero-wrap{
  position:relative;
  z-index:1;
}

/* HERO LAYOUT */
.jsl-lawn-hero .jsl-hero-inner{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:28px;
  align-items:start;
}

@media (max-width: 980px){
  .jsl-lawn-hero .jsl-hero-inner{
    grid-template-columns:1fr;
  }
}

/* Remove framed single-image styling */
.jsl-lawn-hero .jsl-hero-media{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
}

/* 3 IMAGE STACK */
.jsl-lawn-hero .jsl-hero-collage{
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
}

.jsl-lawn-hero .jsl-hero-collage figure{
  margin:0 !important;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  background:#ddd;
  box-shadow:0 12px 26px rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.06);
  transition:transform .3s ease, box-shadow .3s ease;
}

.jsl-lawn-hero .jsl-hero-collage figure:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.jsl-lawn-hero .jsl-hero-collage img{
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  display:block;
  transform:scale(1.01);
  filter:saturate(1.06) contrast(1.02);
}

/* GREEN OVERLAY (Hero only) */
.jsl-lawn-hero .jsl-hero-collage figure:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(46,125,50,.25),
    rgba(46,125,50,.15)
  );
  pointer-events:none;
  transition:opacity .3s ease;
}

.jsl-lawn-hero .jsl-hero-collage figure:hover:after{
  opacity:.85;
}

/* =========================================================
   SECTION SPACING
========================================================= */

.jsl-section{
  padding:44px 0;
}

/* =========================================================
   BEFORE & AFTER (WHITE)
========================================================= */

.jsl-before-after{
  border-radius:22px;
  overflow:hidden;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 18px 50px rgba(0,0,0,.06);
}

.jsl-before-after-head{
  padding:30px 30px 18px 30px;
  border-bottom:1px solid rgba(0,0,0,.06);
  background:#ffffff;
}

.jsl-before-after-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  padding:18px 30px 30px 30px;
  align-items:stretch;
}

@media (max-width:900px){
  .jsl-before-after-grid{
    grid-template-columns:1fr;
  }
}

.jsl-ba-card{
  border-radius:20px;
  overflow:hidden;
  background:#ffffff;
  box-shadow:0 14px 34px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}

.jsl-ba-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 55px rgba(0,0,0,.12);
}

.jsl-ba-card img{
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  display:block;
}

.jsl-ba-caption{
  padding:18px 20px 20px 20px;
  border-top:1px solid rgba(0,0,0,.06);
  background:#ffffff;
}

/* =========================================================
   WHITE BOX WRAPPER (Lawn Seeding)
========================================================= */

.jsl-white-box{
  background:#ffffff;
  border-radius:22px;
  padding:40px 44px;
  box-shadow:0 18px 50px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.06);
}

@media (max-width: 980px){
  .jsl-white-box{
    padding:28px 22px;
  }
}

/* =========================================================
   LAWN SEEDING SECTION (keeps your existing structure)
========================================================= */

.jsl-seeding{ position:relative; }

.jsl-seeding-head{
  margin-bottom:18px;
}

.jsl-seeding-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:16px;
  margin-top:16px;
}

@media (max-width: 980px){
  .jsl-seeding-grid{
    grid-template-columns:1fr;
  }
}

.jsl-seeding-card{
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding:22px;
}

.jsl-seeding-cta{
  margin-top:14px;
  border-radius:18px;
  padding:14px 14px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.jsl-seeding-links{
  margin-top:14px;
  padding:14px 16px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.06);
}

/* =========================================================
   BUTTONS
========================================================= */

.jsl-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  text-decoration:none !important;
  font-weight:700;
  transition:all .2s ease;
}

.jsl-btn-primary{
  background:linear-gradient(180deg,#2e7d32,#1b5e20) !important;
  border-color: rgba(27,94,32,.35) !important;
  color:#fff !important;
  box-shadow:0 10px 18px rgba(27,94,32,.18);
}

.jsl-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 26px rgba(27,94,32,.24);
}

.jsl-btn-ghost{
  background: rgba(255,255,255,.85) !important;
  border:1px solid rgba(0,0,0,.12) !important;
  color:#1b5e20 !important;
}

.jsl-btn-ghost:hover{
  background:#f5f5f5 !important;
}

/* =========================================================
   PROJECTS SECTION
========================================================= */

.jsl-project-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:22px;
}

@media (max-width:980px){
  .jsl-project-grid{ grid-template-columns:1fr; }
}

.jsl-project-card{
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.06);
  transition:transform .3s ease, box-shadow .3s ease;
}

.jsl-project-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.jsl-project-image{
  height:260px;
  overflow:hidden;
}

.jsl-project-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.jsl-project-content{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* =========================================================
   GREEN HEADINGS (TEXT ONLY)
========================================================= */

.jsl-site h1,
.jsl-site h2,
.jsl-site h3{
  color:#1b5e20 !important;
}
    <!-- LAWN SEEDING (BOTTOM SECTION) -->
    <section id="lawn-seeding-bottom" class="jsl-section jsl-seeding" aria-label="Lawn seeding in Norwich and Norfolk">
      <div class="jsl-container">

        <div class="jsl-white-box">

          <header class="jsl-seeding-head">
            <p class="jsl-seeding-kicker">Lawn seeding — Norwich &amp; Norfolk</p>
            <h2 class="jsl-h2">Lawn Seeding in Norwich &amp; Norfolk (Fresh Lawns &amp; Patch Repairs)</h2>
            <p class="jsl-lead">
              If your lawn is thin, worn, or you’re starting from bare soil, lawn seeding is a cost-effective way to get a strong, even lawn — as long as the ground is prepared properly.
            </p>
            <p class="jsl-text">
              We rotovate where needed, level and firm the seedbed, apply fertiliser, and sow high-quality grass seed suited to your garden and how you use it.
              If you’re unsure whether seeding or turf is best, send a photo via our <a class="jsl-inline-link" href="/contact/">contact page</a> and we’ll advise.
            </p>
          </header>

          <div class="jsl-seeding-grid">

            <article class="jsl-seeding-card">
              <h3 class="jsl-h3">When lawn seeding is the right choice</h3>
              <ul class="jsl-about-bullets">
                <li><strong>New lawns:</strong> bare soil areas or garden redesigns</li>
                <li><strong>Patch repairs:</strong> pets, kids, wear zones, thin grass</li>
                <li><strong>Overseeding:</strong> to thicken lawns and improve coverage</li>
                <li><strong>Budget-friendly option:</strong> when you can wait for establishment</li>
              </ul>
              <p class="jsl-text" style="margin:10px 0 0 0;">
                If the lawn is badly uneven, muddy, or full of weeds, a
                <a class="jsl-inline-link" href="#main-content">full replacement</a> may be a better long-term fix.
              </p>
            </article>

            <article class="jsl-seeding-card">
              <h3 class="jsl-h3">Our lawn seeding process</h3>
              <p class="jsl-text" style="margin-top:0;">
                Our lawn seeding process begins with a full assessment of the existing ground conditions.
                The area is then professionally rotovated to break up the soil, levelled and firmed to create a stable, even seedbed.
                A pre-seed fertiliser is applied before high-quality grass seed is evenly sown to suit the soil type and intended use of the lawn.
                We complete every lawn seeding project with clear aftercare advice to support strong germination and long-term lawn establishment across Norwich and Norfolk.
              </p>

              <div class="jsl-seeding-cta">
                <div>
                  <p class="jsl-text" style="margin:0;"><strong>Want a seeding quote?</strong></p>
                  <p class="jsl-text" style="margin:4px 0 0 0;">Send a photo and your rough lawn size — we’ll advise.</p>
                </div>
                <div style="display:flex; gap:10px; flex-wrap:wrap;">
                  <a class="jsl-btn jsl-btn-primary" href="/contact/">Get a seeding quote</a>
                  <a class="jsl-btn jsl-btn-ghost" href="/services/">Browse services</a>
                </div>
              </div>
            </article>

          </div>

          <div class="jsl-seeding-links">
            <p class="jsl-text" style="margin:0;">
              Useful links:
              <a class="jsl-inline-link" href="/services/">All services</a> ·
              <a class="jsl-inline-link" href="/about/">About us</a> ·
              <a class="jsl-inline-link" href="/contact/">Request a quote</a>
            </p>
          </div>

        </div><!-- /.jsl-white-box -->

      </div>
    </section>/* End custom CSS */