Local Service Business Website Template — Free Snippet
Local Service Business Website template · 13 website sections · Plain HTML, CSS & JS · Customise it in the Website Builder
CategoryLanding Pages
Copy & paste
Source Code
<section class="st st-navbar-simple" data-uid="smvw6s7sy173f">
<header class="st-wrap nb">
<a class="st-brand" href="#">
<span class="st-brand-mark"><span class="st-brand-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" /><path d="M20 3v4" /><path d="M22 5h-4" /><path d="M4 17v2" /><path d="M5 18H3" /></svg></span><span>Sparkle & Co</span></span>
</a>
<nav class="nb-nav" data-menu aria-label="Main">
<ul class="nb-links">
<li data-menu-item><a class="nb-link" href="#features"><span>Services</span></a></li>
<li data-menu-item><a class="nb-link" href="#how-it-works"><span>How it works</span></a></li>
<li data-menu-item><a class="nb-link" href="#customers"><span>Reviews</span></a></li>
<li data-menu-item><a class="nb-link" href="#faq"><span>FAQ</span></a></li>
</ul>
<div class="nb-actions" data-menu-item>
<a class="st-btn nb-cta" href="#contact"><span>Get a quote</span></a>
</div>
</nav>
<button type="button" class="st-burger" data-menu-toggle aria-expanded="false" aria-label="Open menu"><span></span><span></span><span></span></button>
</header>
<i hidden data-sticky-flag></i>
</section>
<section class="st st-saas-split-hero" data-uid="smvw6s7sy1uwq">
<div class="sh st-wrap">
<div class="sh-copy">
<a class="st-pill sh-badge" data-anim="item" href="#features"><span>Insured & background-checked cleaners</span></a>
<h1 class="sh-title" data-anim="item" data-anim-text>A spotless home, <span class="hl">without lifting a finger</span></h1>
<p class="st-lead sh-lead" data-anim="item">Trusted home and office cleaning across the city. Book in 60 seconds and love the result, or we’ll come back for free.</p>
<div class="st-btns" data-anim="item">
<a class="st-btn" href="#contact"><span>Get a free quote</span></a>
<a class="st-btn st-btn--ghost" href="#features"><span>See services</span></a>
</div>
<p class="sh-proof" data-anim="item">★★★★★ 4.9 from 2,300+ local customers</p>
</div>
<div class="sh-media" data-anim="media">
<div class="sh-frame"><img width="1200" height="820" src="https://webdevpuneet.com/images/section-templates/tpl-booking.png" alt="Booking calendar with an available slot selected"></div>
</div>
</div>
</section>
<section id="features" class="st st-features-icon-grid" data-uid="smvw6s7syt324">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Services</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Cleaning for <span class="hl">every space</span></h2>
<p class="st-lead" data-anim="item">Regular or one-off, homes or offices, always by the same friendly team.</p>
</header>
<div class="fg-grid">
<article class="fg-card" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" /><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /></svg></span>
<h3 class="fg-title">Regular home cleaning</h3>
<p class="fg-text">Weekly or fortnightly visits from your own cleaner.</p>
</article>
<article class="fg-card" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" /><path d="M20 3v4" /><path d="M22 5h-4" /><path d="M4 17v2" /><path d="M5 18H3" /></svg></span>
<h3 class="fg-title">Deep cleaning</h3>
<p class="fg-text">Top-to-bottom cleans for spring or special occasions.</p>
</article>
<article class="fg-card" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2" /><path d="M15 18H9" /><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14" /><circle cx="17" cy="18" r="2" /><circle cx="7" cy="18" r="2" /></svg></span>
<h3 class="fg-title">Move in / move out</h3>
<p class="fg-text">Get your deposit back with an end-of-tenancy clean.</p>
</article>
<article class="fg-card" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" /><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" /><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" /><path d="M10 6h4" /><path d="M10 10h4" /><path d="M10 14h4" /><path d="M10 18h4" /></svg></span>
<h3 class="fg-title">Office cleaning</h3>
<p class="fg-text">Early-morning or evening cleans that fit your hours.</p>
</article>
<article class="fg-card" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z" /><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12" /></svg></span>
<h3 class="fg-title">Eco products</h3>
<p class="fg-text">Non-toxic products, safe for kids and pets.</p>
</article>
<article class="fg-card" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /><path d="m9 12 2 2 4-4" /></svg></span>
<h3 class="fg-title">Happiness guarantee</h3>
<p class="fg-text">Not perfect? We’ll return within 24 hours, free.</p>
</article>
</div>
</div>
</section>
<section id="how-it-works" class="st st-features-steps" data-uid="smvw6s7sy828u">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">How it works</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Booked in <span class="hl">three easy steps</span></h2>
<p class="st-lead" data-anim="item">No phone calls needed, unless you’d like one.</p>
</header>
<ol class="fp-steps">
<li class="fp-step" data-anim="item">
<div class="fp-badge"><span class="fp-num" aria-hidden="true"></span><span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /><path d="M10 9H8" /><path d="M16 13H8" /><path d="M16 17H8" /></svg></span></div>
<h3 class="fp-title">Get a quote</h3>
<p class="fp-text">Tell us about your space and get a fixed price instantly.</p>
</li>
<li class="fp-step" data-anim="item">
<div class="fp-badge"><span class="fp-num" aria-hidden="true"></span><span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" /></svg></span></div>
<h3 class="fp-title">Pick a time</h3>
<p class="fp-text">Choose a day and time that suits you, even weekends.</p>
</li>
<li class="fp-step" data-anim="item">
<div class="fp-badge"><span class="fp-num" aria-hidden="true"></span><span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" /><path d="M20 3v4" /><path d="M22 5h-4" /><path d="M4 17v2" /><path d="M5 18H3" /></svg></span></div>
<h3 class="fp-title">Relax</h3>
<p class="fp-text">Your vetted cleaner arrives with everything needed.</p>
</li>
</ol>
<div class="fp-cta" data-anim="item">
<a class="st-btn" href="https://webdevpuneet.com/signup"><span>Get a free quote</span></a>
<p class="fp-note">Free for teams up to 10 people</p>
</div>
</div>
</section>
<section id="gallery" class="st st-before-after-slider" data-uid="smvw6s7sydv3t">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">The difference</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Spotless, <span class="hl">every time</span></h2>
<p class="st-lead" data-anim="item">Drag the handle to see the same room before and after one of our visits.</p>
</header>
<ul class="ba-grid">
<li class="ba-item" data-anim="item">
<div class="ba-compare" data-compare>
<img class="ba-img ba-after" width="1200" height="800" loading="lazy" src="https://webdevpuneet.com/images/section-templates/room-1.jpg" alt="After photo (sample image)">
<img class="ba-img ba-before" width="1200" height="800" loading="lazy" src="https://webdevpuneet.com/images/section-templates/room-2.jpg" alt="Before photo (sample image)">
<span class="ba-tag ba-tag-before">Before</span>
<span class="ba-tag ba-tag-after">After</span>
<span class="ba-handle" aria-hidden="true"><span class="ba-knob"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m9 7-5 5 5 5M15 7l5 5-5 5"/></svg></span></span>
<input class="ba-range" type="range" min="0" max="100" value="50" aria-label="Drag to compare before and after">
</div>
<h3 class="ba-title">Kitchen deep clean</h3>
<p class="ba-cap">Four hours, two cleaners and an oven made new.</p>
</li>
<li class="ba-item" data-anim="item">
<div class="ba-compare" data-compare>
<img class="ba-img ba-after" width="1200" height="800" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-salon.jpg" alt="After photo (sample image)">
<img class="ba-img ba-before" width="1200" height="800" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-restaurant.jpg" alt="Before photo (sample image)">
<span class="ba-tag ba-tag-before">Before</span>
<span class="ba-tag ba-tag-after">After</span>
<span class="ba-handle" aria-hidden="true"><span class="ba-knob"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m9 7-5 5 5 5M15 7l5 5-5 5"/></svg></span></span>
<input class="ba-range" type="range" min="0" max="100" value="50" aria-label="Drag to compare before and after">
</div>
<h3 class="ba-title">Office, weekly clean</h3>
<p class="ba-cap">Desks, floors and kitchenette ready for Monday.</p>
</li>
</ul>
</div>
</section>
<section id="results" class="st st-stats-counters" data-uid="smvw6s7sy6ipj">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Trusted locally</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Cleaning homes <span class="hl">since 2015</span></h2>
<p class="st-lead" data-anim="item"></p>
</header>
<dl class="sc-grid">
<div class="sc-stat" data-anim="item">
<dt class="sc-label">Cleans completed</dt>
<dd class="sc-value" data-count>18,000+</dd>
<dd class="sc-note">and counting</dd>
</div>
<div class="sc-stat" data-anim="item">
<dt class="sc-label">Average rating</dt>
<dd class="sc-value" data-count>4.9/5</dd>
<dd class="sc-note">2,300+ reviews</dd>
</div>
<div class="sc-stat" data-anim="item">
<dt class="sc-label">To book online</dt>
<dd class="sc-value" data-count>60 sec</dd>
<dd class="sc-note">fixed prices</dd>
</div>
<div class="sc-stat" data-anim="item">
<dt class="sc-label">Insured</dt>
<dd class="sc-value" data-count>100%</dd>
<dd class="sc-note">and vetted staff</dd>
</div>
</dl>
</div>
</section>
<section id="customers" class="st st-reviews-summary" data-uid="smvw6s7syis0j">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Reviews</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Rated <span class="hl">4.9 out of 5</span> by local families</h2>
<p class="st-lead" data-anim="item">Real reviews from customers across the city. Tap a bar to read only the reviews with that rating.</p>
</header>
<div class="rs" data-revfilter data-filter-text="Showing {n} of {t} reviews rated {s} stars" data-clear-label="Show all reviews">
<aside class="rs-sum" data-anim="item">
<p class="rs-score"><span class="rs-avg">4.9</span><span class="rs-of">/5</span></p>
<span class="rs-stars rs-stars--big" style="--r:4.9" role="img" aria-label="Rated 4.9 out of 5">★★★★★</span>
<p class="rs-count"><span>2,300</span> <span>customer reviews</span></p>
<ul class="rs-bars">
<li class="rs-bar">
<button type="button" class="rs-barbtn" data-filter-star aria-pressed="false" data-star="5" aria-label="Show only {s}-star reviews">
<span class="rs-lab"><span>5</span>★</span>
<span class="rs-track"><span class="rs-fill" style="--w:91%"></span></span>
<span class="rs-n">2,100</span>
</button>
</li>
<li class="rs-bar">
<button type="button" class="rs-barbtn" data-filter-star aria-pressed="false" data-star="4" aria-label="Show only {s}-star reviews">
<span class="rs-lab"><span>4</span>★</span>
<span class="rs-track"><span class="rs-fill" style="--w:7%"></span></span>
<span class="rs-n">150</span>
</button>
</li>
<li class="rs-bar">
<button type="button" class="rs-barbtn" data-filter-star aria-pressed="false" data-star="3" aria-label="Show only {s}-star reviews">
<span class="rs-lab"><span>3</span>★</span>
<span class="rs-track"><span class="rs-fill" style="--w:1%"></span></span>
<span class="rs-n">30</span>
</button>
</li>
<li class="rs-bar">
<button type="button" class="rs-barbtn" data-filter-star aria-pressed="false" data-star="2" aria-label="Show only {s}-star reviews">
<span class="rs-lab"><span>2</span>★</span>
<span class="rs-track"><span class="rs-fill" style="--w:1%"></span></span>
<span class="rs-n">12</span>
</button>
</li>
<li class="rs-bar">
<button type="button" class="rs-barbtn" data-filter-star aria-pressed="false" data-star="1" aria-label="Show only {s}-star reviews">
<span class="rs-lab"><span>1</span>★</span>
<span class="rs-track"><span class="rs-fill" style="--w:0%"></span></span>
<span class="rs-n">8</span>
</button>
</li>
</ul>
<a class="st-btn" href="#contact"><span>Leave a review</span></a>
</aside>
<div class="rs-main">
<p class="rs-status" data-filter-status role="status" hidden><span data-filter-message></span> <button type="button" class="rs-clear" data-filter-clear></button></p>
<ul class="rs-list">
<li class="rs-card" data-anim="item" data-rating="5">
<div class="rs-top"><span class="rs-stars" style="--r:5" role="img" aria-label="Rated 5 out of 5">★★★★★</span><span class="rs-date">October 2026</span></div>
<h3 class="rs-title">Like walking into a new home</h3>
<p class="rs-text">The house looked like new when I got back from work. The cleaner was friendly and left everything tidy.</p>
<div class="rs-by">
<img class="rs-av" src="https://webdevpuneet.com/images/section-templates/avatar-3.jpg" alt="">
<span class="rs-name">Rachel S.</span>
<span class="rs-badge"><span aria-hidden="true">✓</span> <span>Verified customer</span></span>
</div>
</li>
<li class="rs-card" data-anim="item" data-rating="5">
<div class="rs-top"><span class="rs-stars" style="--r:5" role="img" aria-label="Rated 5 out of 5">★★★★★</span><span class="rs-date">September 2026</span></div>
<h3 class="rs-title">Fixed price, no surprises</h3>
<p class="rs-text">The quote was fixed, the booking took a minute and the team arrived on time.</p>
<div class="rs-by">
<img class="rs-av" src="https://webdevpuneet.com/images/section-templates/avatar-4.jpg" alt="">
<span class="rs-name">Imran A.</span>
<span class="rs-badge"><span aria-hidden="true">✓</span> <span>Verified customer</span></span>
</div>
</li>
<li class="rs-card" data-anim="item" data-rating="5">
<div class="rs-top"><span class="rs-stars" style="--r:5" role="img" aria-label="Rated 5 out of 5">★★★★★</span><span class="rs-date">September 2026</span></div>
<h3 class="rs-title">Perfect for our office</h3>
<p class="rs-text">We use Sparkle & Co for the whole office every week. It is spotless on Monday mornings.</p>
<div class="rs-by">
<img class="rs-av" src="https://webdevpuneet.com/images/section-templates/avatar-6.jpg" alt="">
<span class="rs-name">Joanne W.</span>
<span class="rs-badge"><span aria-hidden="true">✓</span> <span>Verified customer</span></span>
</div>
</li>
<li class="rs-card" data-anim="item" data-rating="4">
<div class="rs-top"><span class="rs-stars" style="--r:4" role="img" aria-label="Rated 4 out of 5">★★★★★</span><span class="rs-date">August 2026</span></div>
<p class="rs-text">Great clean and polite staff. I would have liked a reminder message the day before.</p>
<div class="rs-by">
<img class="rs-av" src="https://webdevpuneet.com/images/section-templates/avatar-1.jpg" alt="">
<span class="rs-name">Paul G.</span>
<span class="rs-badge"><span aria-hidden="true">✓</span> <span>Verified customer</span></span>
</div>
</li>
<li class="rs-card" data-anim="item" data-rating="5">
<div class="rs-top"><span class="rs-stars" style="--r:5" role="img" aria-label="Rated 5 out of 5">★★★★★</span><span class="rs-date">August 2026</span></div>
<h3 class="rs-title">Eco-friendly and thorough</h3>
<p class="rs-text">I liked that they bring their own eco-friendly products. Nothing was missed, even behind the sofa.</p>
<div class="rs-by">
<img class="rs-av" src="https://webdevpuneet.com/images/section-templates/avatar-5.jpg" alt="">
<span class="rs-name">Maria L.</span>
<span class="rs-badge"><span aria-hidden="true">✓</span> <span>Verified customer</span></span>
</div>
</li>
<li class="rs-card" data-anim="item" data-rating="3">
<div class="rs-top"><span class="rs-stars" style="--r:3" role="img" aria-label="Rated 3 out of 5">★★★★★</span><span class="rs-date">July 2026</span></div>
<h3 class="rs-title">Good, one missed spot</h3>
<p class="rs-text">A good clean overall, and they came back to fix a missed spot the next day without any fuss.</p>
<div class="rs-by">
<img class="rs-av" src="https://webdevpuneet.com/images/section-templates/avatar-8.jpg" alt="">
<span class="rs-name">Dev P.</span>
<span class="rs-badge"><span aria-hidden="true">✓</span> <span>Verified customer</span></span>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section id="faq" class="st st-faq-accordion" data-uid="smvw6s7syskcx">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">FAQ</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Good to <span class="hl">know</span></h2>
<p class="st-lead" data-anim="item">Everything you need to know about plans, billing and getting started.</p>
</header>
<div class="fq-list" data-accordion="single first">
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>Which areas do you cover?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>The whole city and surrounding towns within 15 miles. Enter your postcode in the quote form to check.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>Do I need to provide supplies?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>No. Your cleaner brings eco-friendly products and equipment.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>Are your cleaners insured?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>Yes. Every cleaner is background-checked, trained and fully insured.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>Can I cancel or reschedule?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>Yes, free of charge with 24 hours’ notice.</p></div>
</details>
</div>
<p class="fq-contact" data-anim="item"><span>Still have a question?</span> <a href="mailto:[email protected]"><span>Talk to our team</span> <span aria-hidden="true">→</span></a></p>
</div>
</section>
<section id="contact" class="st st-contact-split-form" data-uid="smvw6s7syd0vz">
<div class="st-wrap cs2">
<div class="cs2-info">
<header class="st-head st-head--left cs2-head">
<p class="st-eyebrow" data-anim="item">Free quote</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Get your <span class="hl">fixed price</span></h2>
<p class="st-lead" data-anim="item">Tell us about your home or office and we’ll reply with a fixed quote within the hour.</p>
</header>
<ul class="cs2-methods">
<li class="cs2-method" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="16" x="2" y="4" rx="2" /><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /></svg></span>
<div><p class="cs2-label">Email us</p><a class="cs2-value" href="mailto:[email protected]"><span>[email protected]</span></a></div>
</li>
<li class="cs2-method" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" /></svg></span>
<div><p class="cs2-label">Call us</p><a class="cs2-value" href="tel:+442079460958"><span>+44 20 7946 0958</span></a></div>
</li>
<li class="cs2-method" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" /><circle cx="12" cy="10" r="3" /></svg></span>
<div><p class="cs2-label">Visit us</p><a class="cs2-value" href="https://www.openstreetmap.org/search?query=Clerkenwell%20Road%20London"><span>12 Clerkenwell Road, London</span></a></div>
</li>
<li class="cs2-method" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></svg></span>
<div><p class="cs2-label">Office hours</p><p class="cs2-value">Mon–Fri, 9am–6pm GMT</p></div>
</li>
</ul>
</div>
<div class="cs2-card" data-anim="media">
<form class="st-form" method="post" data-form action="https://formspree.io/f/your-form-id">
<div class="st-form-fields" data-form-fields>
<div class="st-form-row">
<label class="st-field"><span>Your name</span><input name="name" type="text" required autocomplete="name"></label>
<label class="st-field"><span>Email</span><input name="email" type="email" required autocomplete="email"></label>
</div>
<label class="st-field"><span>Your address and what needs cleaning</span><textarea name="message" rows="5" required></textarea></label>
<input class="st-hp" type="text" name="_gotcha" tabindex="-1" autocomplete="off" aria-hidden="true">
<button class="st-btn st-form-btn" type="submit"><span>Get my quote</span></button>
<p class="st-form-note">We reply within one business day.</p>
<p class="st-form-error" data-form-error hidden role="alert">Sorry, something went wrong. Please try again or email us directly.</p>
</div>
<div class="st-form-success" data-form-success hidden tabindex="-1" role="status">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span>
<h3>Thanks, message sent!</h3>
<p>We’ll get back to you within one business day.</p>
</div>
</form>
</div>
</div>
</section>
<section id="contact-2" class="st st-opening-hours" data-uid="smvw6s7syl3dk">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">When we are here</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Open when <span class="hl">you need us</span></h2>
<p class="st-lead" data-anim="item">Book online at any time. Our team answers calls and messages during these hours.</p>
</header>
<div class="oh" data-opennow data-tz="Europe/London" data-open-label="Open now" data-closes-label="closes at" data-shut-label="Closed now" data-opens-label="opens">
<div class="oh-card oh-hours" data-anim="item">
<div class="oh-top">
<h3 class="oh-title">Opening hours</h3>
<p class="oh-badge" data-open-badge role="status" hidden><span class="oh-dot" aria-hidden="true"></span><span class="oh-badge-text"></span></p>
</div>
<ol class="oh-list">
<li class="oh-row" data-hours-row data-day="Monday" data-open="07:00" data-close="19:00" data-closed="">
<span class="oh-day">Monday</span>
<span class="oh-time"><time>07:00</time> <span aria-hidden="true">–</span> <time>19:00</time></span>
</li>
<li class="oh-row" data-hours-row data-day="Tuesday" data-open="07:00" data-close="19:00" data-closed="">
<span class="oh-day">Tuesday</span>
<span class="oh-time"><time>07:00</time> <span aria-hidden="true">–</span> <time>19:00</time></span>
</li>
<li class="oh-row" data-hours-row data-day="Wednesday" data-open="07:00" data-close="19:00" data-closed="">
<span class="oh-day">Wednesday</span>
<span class="oh-time"><time>07:00</time> <span aria-hidden="true">–</span> <time>19:00</time></span>
</li>
<li class="oh-row" data-hours-row data-day="Thursday" data-open="07:00" data-close="19:00" data-closed="">
<span class="oh-day">Thursday</span>
<span class="oh-time"><time>07:00</time> <span aria-hidden="true">–</span> <time>19:00</time></span>
</li>
<li class="oh-row" data-hours-row data-day="Friday" data-open="07:00" data-close="19:00" data-closed="">
<span class="oh-day">Friday</span>
<span class="oh-time"><time>07:00</time> <span aria-hidden="true">–</span> <time>19:00</time></span>
</li>
<li class="oh-row" data-hours-row data-day="Saturday" data-open="08:00" data-close="16:00" data-closed="">
<span class="oh-day">Saturday</span>
<span class="oh-time"><time>08:00</time> <span aria-hidden="true">–</span> <time>16:00</time></span>
</li>
<li class="oh-row" data-hours-row data-day="Sunday" data-open="09:00" data-close="17:00" data-closed="closed">
<span class="oh-day">Sunday</span>
<span class="oh-shut">Closed</span>
</li>
</ol>
<p class="oh-special">We cover the whole city and towns within 15 miles. Online booking is open 24 hours a day.</p>
</div>
<div class="oh-side">
<div class="oh-card oh-contact" data-anim="item">
<ul class="oh-info">
<li class="oh-item"><span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" /><circle cx="12" cy="10" r="3" /></svg></span>
<address class="oh-addr">
<span class="oh-line oh-name">Sparkle & Co</span>
<span class="oh-line">14 Mill Lane</span>
<span class="oh-line"><span>BA1 1AA</span> <span>Bath</span></span>
<span class="oh-line">United Kingdom</span>
</address>
</li>
<li class="oh-item"><span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" /></svg></span><a class="oh-link" href="tel:+448000001234">0800 000 1234</a></li>
<li class="oh-item"><span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="16" x="2" y="4" rx="2" /><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /></svg></span><a class="oh-link" href="mailto:[email protected]">[email protected]</a></li>
</ul>
<div class="st-btns">
<a class="st-btn st-btn--ghost" href="tel:+448000001234"><span>Call us free</span></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="st st-footer-columns" data-uid="smvw6s7sysukn">
<footer class="st-wrap fo">
<div class="fo-top">
<div class="fo-brand" data-anim="item">
<a class="st-brand" href="#">
<span class="st-brand-mark"><span class="st-brand-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" /><path d="M20 3v4" /><path d="M22 5h-4" /><path d="M4 17v2" /><path d="M5 18H3" /></svg></span><span>Sparkle & Co</span></span>
</a>
<p class="fo-tagline">Friendly, reliable cleaning for homes and offices since 2015.</p>
<div><ul class="st-socials">
<li><a class="st-social" href="https://x.com/" aria-label="X (Twitter)"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" /></svg></span></a></li>
<li><a class="st-social" href="https://www.linkedin.com/" aria-label="LinkedIn"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" /><rect width="4" height="12" x="2" y="9" /><circle cx="4" cy="4" r="2" /></svg></span></a></li>
<li><a class="st-social" href="https://github.com/" aria-label="GitHub"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" /><path d="M9 18c-4.51 2-5-2-7-2" /></svg></span></a></li>
<li><a class="st-social" href="https://www.youtube.com/" aria-label="YouTube"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" /><path d="m10 15 5-3-5-3z" /></svg></span></a></li>
</ul></div>
</div>
<div class="fo-cols">
<nav class="fo-col" data-anim="item" aria-label="Services">
<h2 class="fo-col-title">Services</h2>
<ul class="fo-links"><li><a href="#features">Home cleaning</a></li><li><a href="#features">Deep cleaning</a></li><li><a href="#features">Office cleaning</a></li></ul>
</nav>
<nav class="fo-col" data-anim="item" aria-label="Company">
<h2 class="fo-col-title">Company</h2>
<ul class="fo-links"><li><a href="#how-it-works">How it works</a></li><li><a href="#customers">Reviews</a></li><li><a href="#contact">Contact</a></li></ul>
</nav>
</div>
</div>
<div class="fo-bottom">
<p class="fo-copy">© 2026 Sparkle & Co Cleaning Ltd.</p>
<ul class="fo-legal"><li><a href="/privacy/">Privacy</a></li><li><a href="/terms/">Terms</a></li><li><a href="/cookies/">Cookies</a></li></ul>
<a class="fo-totop" href="#" data-totop><span>Back to top</span> <span aria-hidden="true">↑</span></a>
</div>
</footer>
</section>
<section class="st st-back-to-top" data-uid="smvw6s7sy7vp0">
<div class="btt" data-btt data-enabled="on" data-distance="500" data-pos="right" data-appear="fade" data-speed="0.8" data-mobile="on" data-shadow="on" style="--btt-size:52px;--btt-off:24px;--btt-radius:50%;--btt-speed:0.8s">
<div class="btt-demo" aria-hidden="true">
<span class="btt-bar btt-bar--lg"></span><span class="btt-bar"></span><span class="btt-bar btt-bar--md"></span><span class="btt-bar"></span><span class="btt-bar btt-bar--sm"></span>
<span class="btt-note">The button appears here once the page has scrolled</span>
</div><!--/btt-demo-->
<button type="button" class="btt-btn" aria-label="Back to top" title="Back to top"><svg class="btt-svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.400" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button>
</div>
</section>
<section class="st st-accessibility-toolbar" data-uid="smvw6s7sybncs">
<div class="a11y" data-a11y data-pos="left" data-remember="on">
<button type="button" class="a11y-fab" aria-expanded="false" data-a11y-open aria-label="Open accessibility tools">
<svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="7.500" r="1.200" fill="currentColor"/><path d="M7 10.500l5 1 5-1M12 11.500v3.500M9.500 19l2.500-4 2.500 4"/></svg>
</button>
<div class="a11y-panel" role="dialog" tabindex="-1" hidden aria-label="Accessibility">
<div class="a11y-head">
<h2 class="a11y-title">Accessibility</h2>
<button type="button" class="a11y-icon" data-a11y-reset aria-label="Reset all settings" title="Reset all settings"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.700L3 8"/><path d="M3 3v5h5"/></svg></button>
<button type="button" class="a11y-icon" data-a11y-close aria-label="Close accessibility tools" title="Close accessibility tools"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.400" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
</div>
<div class="a11y-body">
<div class="a11y-sec">
<h3 class="a11y-h">Text</h3>
<div class="a11y-grid">
<button type="button" class="a11y-tile" data-feature="text" aria-pressed="false"><svg class="a11y-ic" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 7V5h10v2M9 5v12M6 17h6"/><path d="M15 12h6M18 12v6"/></svg><span class="a11y-lab">Bigger text</span><span class="a11y-pips" aria-hidden="true"></span></button>
<button type="button" class="a11y-tile" data-feature="lineheight" aria-pressed="false"><svg class="a11y-ic" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M8 6h13M8 12h13M8 18h13"/><path d="M3 8l2-2 2 2M3 16l2 2 2-2"/></svg><span class="a11y-lab">Line height</span><span class="a11y-pips" aria-hidden="true"></span></button>
<button type="button" class="a11y-tile" data-feature="align" aria-pressed="false"><svg class="a11y-ic" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 6h16M4 12h10M4 18h14"/></svg><span class="a11y-lab">Text align</span><span class="a11y-pips" aria-hidden="true"></span></button>
<button type="button" class="a11y-tile" data-feature="font" aria-pressed="false"><svg class="a11y-ic" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 19 10 5l6 14M6.5 14h7"/><path d="M17 11h4M19 11v8"/></svg><span class="a11y-lab">Readable font</span><span class="a11y-pips" aria-hidden="true"></span></button>
</div>
</div>
<div class="a11y-sec">
<h3 class="a11y-h">Visual</h3>
<div class="a11y-grid">
<button type="button" class="a11y-tile" data-feature="contrast" aria-pressed="false"><svg class="a11y-ic" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 3v18" /><path d="M12 3a9 9 0 0 1 0 18z" fill="currentColor"/></svg><span class="a11y-lab">Contrast</span><span class="a11y-pips" aria-hidden="true"></span></button>
<button type="button" class="a11y-tile" data-feature="gray" aria-pressed="false"><svg class="a11y-ic" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 3s6 6.2 6 10.5A6 6 0 0 1 6 13.500C6 9.200 12 3 12 3z"/><path d="M12 3v16.500" /></svg><span class="a11y-lab">Grayscale</span><span class="a11y-pips" aria-hidden="true"></span></button>
<button type="button" class="a11y-tile" data-feature="images" aria-pressed="false"><svg class="a11y-ic" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="10" r="1.500"/><path d="m21 16-5-5-9 8M3 3l18 18"/></svg><span class="a11y-lab">Hide images</span><span class="a11y-pips" aria-hidden="true"></span></button>
<button type="button" class="a11y-tile" data-feature="motion" aria-pressed="false"><svg class="a11y-ic" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M10 9v6M14 9v6"/></svg><span class="a11y-lab">Pause animations</span><span class="a11y-pips" aria-hidden="true"></span></button>
</div>
</div>
<div class="a11y-sec">
<h3 class="a11y-h">Orientation</h3>
<div class="a11y-grid">
<button type="button" class="a11y-tile" data-feature="links" aria-pressed="false"><svg class="a11y-ic" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10 14a4.500 4.500 0 0 0 6.400 0l3-3a4.500 4.500 0 0 0-6.400-6.400l-1 1"/><path d="M14 10a4.500 4.500 0 0 0-6.400 0l-3 3a4.500 4.500 0 0 0 6.400 6.400l1-1"/></svg><span class="a11y-lab">Highlight links</span><span class="a11y-pips" aria-hidden="true"></span></button>
<button type="button" class="a11y-tile" data-feature="mask" aria-pressed="false"><svg class="a11y-ic" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18M3 15h18"/></svg><span class="a11y-lab">Reading mask</span><span class="a11y-pips" aria-hidden="true"></span></button>
</div>
</div>
<p class="a11y-note">Your choices are saved on this device only.</p>
</div>
</div>
</div>
</section>@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800;900&display=swap');
body{margin:0;background:#ffffff}
html{scroll-behavior:smooth}section[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.st{--st-brand:#ea580c;--st-btn-text:#ffffff;--st-bg:#ffffff;--st-surface:#fff6ef;--st-text:#1c1917;--st-muted:#57534e;--st-radius:12;--st-max:1200;--st-font-heading:"Plus Jakarta Sans", sans-serif;--st-font-body:"Inter", sans-serif}
.st{--st-pad:clamp(20px,5cqi,56px);container:st/inline-size;position:relative;overflow:hidden;background:var(--st-bg);color:var(--st-text);font-family:var(--st-font-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
:where(.st) *,:where(.st) *::before,:where(.st) *::after{box-sizing:border-box;margin:0;padding:0}
:where(.st img){display:block;max-width:100%;height:auto}
:where(.st a){color:inherit}
:where(.st h1,.st h2,.st h3){font-family:var(--st-font-heading);line-height:1.08;letter-spacing:-.025em;font-weight:800;color:var(--st-text)}
.st .hl{color:var(--st-brand)}
.st [data-edit]:empty,.st [data-i-edit]:empty{display:none}
.st-wrap{width:100%;max-width:calc(var(--st-max) * 1px);margin:0 auto;padding-left:var(--st-pad);padding-right:var(--st-pad)}
.st-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--st-brand)}
.st-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--st-brand) 12%,transparent);color:var(--st-brand);font-size:13.5px;font-weight:700}
.st-btns{display:flex;flex-wrap:wrap;gap:12px}
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 26px;border-radius:calc(var(--st-radius) * 1px);border:2px solid var(--st-brand);background:var(--st-brand);color:var(--st-btn-text);font:700 16px/1 var(--st-font-body);text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.st-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px color-mix(in srgb,var(--st-brand) 35%,transparent)}
.st-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 45%,transparent);outline-offset:3px}
.st-btn--ghost{background:transparent;color:var(--st-text);border-color:color-mix(in srgb,var(--st-text) 22%,transparent)}
.st-btn--ghost:hover{box-shadow:none;border-color:var(--st-text)}
.st-lead{font-size:clamp(17px,1.2cqi + 12px,20px);line-height:1.65;color:var(--st-muted)}
.st-head{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:46em;margin:0 auto clamp(36px,5cqi,64px);text-align:center}
.st-head--left{align-items:flex-start;margin-left:0;text-align:left}
.st-h2{font-size:clamp(30px,2.6cqi + 16px,48px)}
.st-icon{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border-radius:calc(var(--st-radius) * .85px);background:color-mix(in srgb,var(--st-brand) 12%,transparent);color:var(--st-brand)}
.st-icon svg{width:24px;height:24px}
.st-icon:empty{display:none}
.st-checks{list-style:none;display:flex;flex-direction:column;gap:11px}
.st-checks li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.5}
.st-checks li::before{content:"";position:absolute;left:0;top:.12em;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--st-brand) 15%,transparent)}
.st-checks li::after{content:"";position:absolute;left:5px;top:calc(.12em + 5px);width:10px;height:10px;background:var(--st-brand);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
@media (prefers-reduced-motion:reduce){.st *{transition:none!important;animation:none!important}}
/* Simple Sticky Navbar */
.st-navbar-simple{overflow:visible;background:color-mix(in srgb,var(--st-bg) 88%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.st-brand{display:inline-flex;align-items:center;gap:10px;flex:none;text-decoration:none;color:var(--st-text)}
.st-brand-img{height:32px;width:auto;max-width:180px;object-fit:contain}
.st-brand-mark{display:inline-flex;align-items:center;gap:10px;font:800 21px/1 var(--st-font-heading);letter-spacing:-.03em}
.st-brand-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:calc(var(--st-radius) * .7px);background:var(--st-brand);color:var(--st-btn-text)}
.st-brand-icon svg{width:19px;height:19px}
.st:has([data-sticky-flag]){position:sticky;top:0;z-index:50;transition:box-shadow .3s ease}
.st.is-scrolled{box-shadow:0 10px 30px -18px rgba(15,23,42,.35)}
.st-burger{display:none;position:relative;flex:none;width:44px;height:44px;border:0;border-radius:calc(var(--st-radius) * .7px);background:color-mix(in srgb,var(--st-text) 7%,transparent);color:var(--st-text);cursor:pointer}
.st-burger span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s ease,opacity .2s ease}
.st-burger span:nth-child(1){top:15px}.st-burger span:nth-child(2){top:21px}.st-burger span:nth-child(3){top:27px}
.st-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.st-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.st-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.st-burger:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 45%,transparent);outline-offset:2px}
.nb{position:relative;display:flex;align-items:center;gap:clamp(20px,3cqi,40px);min-height:72px}
.nb-nav{flex:1;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nb-links{list-style:none;display:flex;align-items:center;gap:4px;margin:0 auto}
.nb-link{display:block;padding:8px 14px;border-radius:calc(var(--st-radius) * .7px);color:var(--st-muted);font-weight:600;font-size:15.5px;text-decoration:none;transition:color .2s ease,background .2s ease}
.nb-link:hover{color:var(--st-text);background:color-mix(in srgb,var(--st-text) 6%,transparent)}
.nb-link[aria-current="page"]{color:var(--st-brand);background:color-mix(in srgb,var(--st-brand) 11%,transparent)}
.nb-actions{display:flex;align-items:center;gap:18px}
.nb-login{color:var(--st-text);font-weight:600;font-size:15.5px;text-decoration:none}
.nb-login:hover{color:var(--st-brand)}
.nb .nb-cta{min-height:44px;padding:0 20px;font-size:15px}
@container st (max-width:900px){
.nb .st-burger{display:inline-block;margin-left:auto}
.nb-nav{position:absolute;left:var(--st-pad);right:var(--st-pad);top:calc(100% + 8px);flex-direction:column;align-items:stretch;gap:8px;padding:10px;border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-bg);border:1px solid color-mix(in srgb,var(--st-text) 9%,transparent);box-shadow:0 24px 60px -24px rgba(15,23,42,.35)}
.nb-links{flex-direction:column;align-items:stretch;gap:2px;margin:0}
.nb-link{padding:12px 14px;font-size:16.5px;color:var(--st-text)}
.nb-actions{flex-direction:column;align-items:stretch;gap:10px;padding:12px 4px 4px;border-top:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.nb-login{padding:8px 10px}
.nb .nb-cta{width:100%;min-height:48px}
.has-menu:not(.menu-open) .nb-nav{display:none}
.st:not(.has-menu) .nb{flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.st:not(.has-menu) .nb-nav{position:static;flex-basis:100%;box-shadow:none}
.st:not(.has-menu) .st-burger{display:none}
}
/* SaaS Split Hero */
.st-saas-split-hero{padding:clamp(56px,8cqi,112px) 0}
.sh{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:clamp(32px,5cqi,72px)}
.sh-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.sh-badge{text-decoration:none}
.sh-title{font-size:clamp(38px,4.6cqi + 12px,64px)}
.sh-lead{max-width:34em}
.sh-proof{font-size:14.5px;color:var(--st-muted)}
.sh-media{position:relative}
.sh-media::before{content:"";position:absolute;inset:8% -6% -8% 8%;background:radial-gradient(closest-side,color-mix(in srgb,var(--st-brand) 35%,transparent),transparent);filter:blur(30px)}
.sh-frame{position:relative;padding:10px;border-radius:calc(var(--st-radius) * 1.6px);background:color-mix(in srgb,var(--st-surface) 80%,var(--st-bg));border:1px solid color-mix(in srgb,var(--st-text) 10%,transparent);box-shadow:0 30px 80px -30px color-mix(in srgb,var(--st-text) 35%,transparent)}
.sh-frame img{width:100%;border-radius:calc(var(--st-radius) * 1px)}
@container st (max-width:820px){.sh{grid-template-columns:1fr}.sh-copy{align-items:center;text-align:center}.sh-copy .st-btns{justify-content:center}}
/* Icon Grid Features */
.st-features-icon-grid{padding:clamp(64px,8cqi,112px) 0}
.fg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2cqi,24px)}
.fg-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:clamp(22px,2.4cqi,30px);border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 7%,transparent);transition:transform .2s ease,box-shadow .2s ease}
.fg-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px color-mix(in srgb,var(--st-text) 40%,transparent)}
.fg-card .st-icon{margin-bottom:6px}
.fg-title{font-size:19px;letter-spacing:-.01em}
.fg-text{color:var(--st-muted);font-size:16px}
.fg-link{margin-top:auto;padding-top:4px;color:var(--st-brand);font-weight:700;font-size:15px;text-decoration:none}
.fg-link:hover{text-decoration:underline}
@container st (max-width:960px){.fg-grid{grid-template-columns:repeat(2,1fr)}}
@container st (max-width:600px){.fg-grid{grid-template-columns:1fr}}
/* How It Works Steps */
.st-features-steps{padding:clamp(64px,8cqi,112px) 0}
.fp-steps{list-style:none;counter-reset:fp;display:grid;grid-auto-columns:1fr;grid-auto-flow:column;gap:clamp(20px,3cqi,40px);position:relative}
.fp-step{counter-increment:fp;position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:0 6px}
.fp-step:not(:last-child)::after{content:"";position:absolute;top:36px;left:calc(50% + 52px);right:calc(-50% + 52px - clamp(20px,3cqi,40px));border-top:2px dashed color-mix(in srgb,var(--st-brand) 45%,transparent)}
.fp-badge{position:relative;display:grid;place-items:center;width:72px;height:72px;margin-bottom:8px;border-radius:calc(var(--st-radius) * 1.3px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 8%,transparent);box-shadow:0 14px 34px -18px color-mix(in srgb,var(--st-brand) 60%,transparent)}
.fp-badge .st-icon{background:none;width:40px;height:40px}
.fp-badge .st-icon svg{width:28px;height:28px}
.fp-num{position:absolute;top:-10px;right:-10px;display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:999px;background:var(--st-brand);color:var(--st-btn-text);font:800 13px/1 var(--st-font-heading);box-shadow:0 0 0 4px var(--st-bg)}
.fp-num::before{content:counter(fp)}
.fp-title{font-size:20px;letter-spacing:-.01em}
.fp-text{color:var(--st-muted);font-size:16px;max-width:22em}
.fp-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:clamp(40px,5cqi,64px);text-align:center}
.fp-note{font-size:14px;color:var(--st-muted)}
@container st (max-width:760px){.fp-steps{grid-auto-flow:row;gap:36px}.fp-step:not(:last-child)::after{top:auto;bottom:-30px;left:50%;right:auto;height:24px;border-top:0;border-left:2px dashed color-mix(in srgb,var(--st-brand) 45%,transparent)}}
/* Before & After Slider */
.st-before-after-slider{padding:clamp(56px,7cqi,104px) 0}
.ba-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(24px,3cqi,40px)}
.ba-item{display:flex;flex-direction:column;gap:8px}
.ba-compare{--pos:50%;position:relative;overflow:hidden;aspect-ratio:3/2;margin-bottom:8px;border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);box-shadow:0 30px 60px -36px color-mix(in srgb,var(--st-text) 55%,transparent);touch-action:pan-y;user-select:none}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-tag{position:absolute;top:14px;padding:5px 12px;border-radius:999px;background:rgba(10,12,20,.62);color:#fff;font:700 12.5px/1 var(--st-font-body);letter-spacing:.04em;text-transform:uppercase;backdrop-filter:blur(4px);pointer-events:none}
.ba-tag-before{left:14px}
.ba-tag-after{right:14px}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(10,12,20,.12);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#fff;color:var(--st-brand);box-shadow:0 8px 22px -6px rgba(10,12,20,.5)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.ba-compare:has(.ba-range:focus-visible){outline:3px solid var(--st-brand);outline-offset:3px}
.ba-compare.is-static .ba-range{display:none}
.ba-compare.is-static .ba-handle{pointer-events:auto;cursor:ew-resize;touch-action:none}
.ba-compare.is-static .ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:-18px;right:-18px}
.ba-title{font-size:19px;line-height:1.3;letter-spacing:-.015em}
.ba-cap{color:var(--st-muted);font-size:15.5px}
/* Animated Stats Counters */
.st-stats-counters{padding:clamp(56px,7cqi,96px) 0}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 7%,transparent);overflow:hidden}
.sc-stat{display:flex;flex-direction:column;align-items:center;gap:6px;padding:clamp(28px,3.4cqi,44px) 20px;text-align:center}
.sc-stat + .sc-stat{border-left:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.sc-value{order:-1;margin:0;font:800 clamp(38px,3.4cqi + 16px,58px)/1 var(--st-font-heading);letter-spacing:-.035em;font-variant-numeric:tabular-nums;background:linear-gradient(135deg,var(--st-text),var(--st-brand));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.16em;margin-bottom:-.16em}
.sc-label{font-weight:700;font-size:16.5px}
.sc-note{margin:0;color:var(--st-muted);font-size:14.5px}
.sc-note:empty{display:none}
@container st (max-width:720px){.sc-grid{grid-template-columns:1fr 1fr}.sc-stat + .sc-stat{border-left:0}.sc-stat:nth-child(even){border-left:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}.sc-stat:nth-child(n+3){border-top:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}}
/* Reviews Summary & Rating */
.st-reviews-summary{padding:clamp(64px,8cqi,112px) 0}
.rs{display:grid;grid-template-columns:minmax(260px,.42fr) minmax(0,1fr);gap:clamp(22px,3.4cqi,48px);align-items:start}
.rs-sum{position:sticky;top:24px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:clamp(22px,2.6cqi,32px);border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 9%,transparent)}
.rs-score{display:flex;align-items:baseline;gap:6px}
.rs-avg{font:800 clamp(52px,6cqi,72px)/1 var(--st-font-heading);letter-spacing:-.03em}
.rs-of{color:var(--st-muted);font-size:20px;font-weight:600}
.rs-stars{--star:#f59e0b;--empty:color-mix(in srgb,var(--st-text) 18%,transparent);display:inline-block;font-size:18px;line-height:1;letter-spacing:1px;white-space:nowrap;background:linear-gradient(90deg,var(--star) calc(var(--r,0) / 5 * 100%),var(--empty) 0);-webkit-background-clip:text;background-clip:text;color:transparent}
.rs-stars--big{font-size:26px}
.rs-count{color:var(--st-muted);font-size:15px;margin-bottom:8px}
.rs-count span:first-child{color:var(--st-text);font-weight:700}
.rs-bars{list-style:none;display:grid;gap:4px;width:100%;margin-bottom:12px}
.rs-barbtn{display:grid;grid-template-columns:34px 1fr 44px;align-items:center;gap:10px;width:100%;padding:7px 8px;border:1px solid transparent;border-radius:10px;background:transparent;color:inherit;font:inherit;font-size:14px;text-align:left;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.rs-barbtn:hover{background:color-mix(in srgb,var(--st-text) 6%,transparent)}
.rs-barbtn:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 55%,transparent);outline-offset:1px}
.rs-barbtn[aria-pressed=true]{background:color-mix(in srgb,var(--st-brand) 12%,transparent);border-color:color-mix(in srgb,var(--st-brand) 50%,transparent)}
.rs-lab{font-weight:700;white-space:nowrap}
.rs-lab::after{content:""}
.rs-track{position:relative;height:9px;border-radius:99px;background:color-mix(in srgb,var(--st-text) 11%,transparent);overflow:hidden}
.rs-fill{position:absolute;inset:0 auto 0 0;width:var(--w,0%);border-radius:99px;background:#f59e0b}
.rs-n{color:var(--st-muted);text-align:right;font-variant-numeric:tabular-nums}
.rs-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:14px;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--st-brand) 10%,transparent);font-size:14.5px;font-weight:600}
.rs-status[hidden]{display:none}
.rs-clear{padding:0;border:0;background:none;color:var(--st-brand);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.rs-list{list-style:none;display:grid;gap:clamp(12px,1.6cqi,18px)}
.rs-card[hidden]{display:none}
.rs-card{display:flex;flex-direction:column;gap:8px;padding:clamp(18px,2.2cqi,26px);border-radius:calc(var(--st-radius) * 1.1px);background:var(--st-bg);border:1px solid color-mix(in srgb,var(--st-text) 10%,transparent)}
.rs-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rs-date{color:var(--st-muted);font-size:13.5px}
.rs-title{font-size:17.5px}
.rs-text{color:var(--st-muted);font-size:15.5px;line-height:1.65}
.rs-by{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:4px}
.rs-av{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--st-surface)}
.rs-name{font-weight:700;font-size:15px}
.rs-badge{color:#15803d;font-size:13px;font-weight:600}
@container st (max-width:860px){.rs{grid-template-columns:1fr}.rs-sum{position:static}}
/* FAQ Accordion */
.st-faq-accordion{padding:clamp(64px,8cqi,112px) 0}
.st-acc{border-bottom:1px solid color-mix(in srgb,var(--st-text) 11%,transparent)}
.st-acc-q{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 2px;cursor:pointer;list-style:none;font:700 clamp(17px,.6cqi + 14px,19px)/1.4 var(--st-font-heading);letter-spacing:-.01em}
.st-acc-q::-webkit-details-marker{display:none}
.st-acc-q:hover{color:var(--st-brand)}
.st-acc-q:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 45%,transparent);outline-offset:2px;border-radius:6px}
.st-acc-icon{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--st-brand) 11%,transparent);transition:transform .3s ease,background .3s ease}
.st-acc-icon::before,.st-acc-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:var(--st-brand);transform:translate(-50%,-50%)}
.st-acc-icon::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s ease}
.st-acc[open]:not(.is-closing) .st-acc-icon{transform:rotate(180deg);background:var(--st-brand)}
.st-acc[open]:not(.is-closing) .st-acc-icon::before,.st-acc[open]:not(.is-closing) .st-acc-icon::after{background:var(--st-btn-text)}
.st-acc[open]:not(.is-closing) .st-acc-icon::after{transform:translate(-50%,-50%) rotate(0deg)}
.st-acc-a{overflow:hidden}
.st-acc-a p{padding:0 48px 24px 2px;color:var(--st-muted);font-size:16.5px;line-height:1.7}
.fq-list{max-width:820px;margin:0 auto;border-top:1px solid color-mix(in srgb,var(--st-text) 11%,transparent)}
.fq-contact{max-width:820px;margin:clamp(32px,4cqi,48px) auto 0;padding:20px 24px;border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);text-align:center;color:var(--st-muted)}
.fq-contact a{color:var(--st-brand);font-weight:700;text-decoration:none}
.fq-contact a:hover{text-decoration:underline}
/* Contact Form With Details */
.st-contact-split-form{padding:clamp(64px,8cqi,112px) 0}
.st-form{display:block}
.st-form-fields{display:flex;flex-direction:column;gap:16px}
.st-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.st-field{display:flex;flex-direction:column;gap:7px;font-size:14.5px;font-weight:600;color:var(--st-text)}
.st-field input,.st-field textarea{width:100%;padding:13px 15px;border-radius:calc(var(--st-radius) * .8px);border:1px solid color-mix(in srgb,var(--st-text) 16%,transparent);background:var(--st-bg);color:var(--st-text);font:400 16px/1.5 var(--st-font-body);outline:none;transition:border-color .2s ease,box-shadow .2s ease;resize:vertical}
.st-field input:focus,.st-field textarea:focus{border-color:var(--st-brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--st-brand) 18%,transparent)}
.st-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.st-form-btn{align-self:flex-start;min-width:180px}
.st-form-btn[aria-busy="true"]{opacity:.7;cursor:progress}
.st-form-note{font-size:13.5px;color:var(--st-muted)}
.st-form-error{padding:12px 14px;border-radius:calc(var(--st-radius) * .8px);background:#fef2f2;color:#b91c1c;font-size:14.5px}
.st-form-success{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:8px 0;outline:none}
.st-form-success[hidden],.st-form-error[hidden]{display:none}
.st-form-success h3{font-size:22px}
.st-form-success p{color:var(--st-muted)}
@container st (max-width:560px){.st-form-row{grid-template-columns:1fr}.st-form-btn{width:100%}}
.cs2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:clamp(36px,5cqi,80px)}
.cs2-info{display:flex;flex-direction:column;gap:32px}
.cs2-head{margin:0}
.cs2-methods{list-style:none;display:flex;flex-direction:column;gap:20px}
.cs2-method{display:flex;align-items:center;gap:16px}
.cs2-label{color:var(--st-muted);font-size:14px}
.cs2-value{display:block;color:var(--st-text);font-weight:700;font-size:16.5px;text-decoration:none}
a.cs2-value:hover{color:var(--st-brand)}
.cs2-card{padding:clamp(24px,3.4cqi,40px);border-radius:calc(var(--st-radius) * 1.3px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 7%,transparent);box-shadow:0 30px 70px -40px color-mix(in srgb,var(--st-brand) 45%,transparent)}
@container st (max-width:860px){.cs2{grid-template-columns:1fr}}
/* Opening Hours & Location */
.st-opening-hours{padding:clamp(64px,8cqi,112px) 0}
.oh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(18px,2.6cqi,32px);align-items:stretch}
.oh-card{padding:clamp(22px,2.8cqi,34px);border-radius:calc(var(--st-radius) * 1.1px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 9%,transparent);box-shadow:0 24px 60px -44px color-mix(in srgb,var(--st-text) 55%,transparent)}
.oh-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:6px}
.oh-title{font-size:clamp(21px,2.3cqi,26px)}
.oh-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;background:color-mix(in srgb,var(--st-text) 7%,transparent);color:var(--st-text);font-size:13.5px;font-weight:700}
.oh-badge[hidden]{display:none}
.oh-dot{width:9px;height:9px;border-radius:50%;background:#94a3b8}
.oh-badge.is-open{background:rgba(34,197,94,.15);color:color-mix(in srgb,#16a34a 78%,var(--st-text))}
.oh-badge.is-open .oh-dot{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.25)}
.oh-badge.is-shut{background:rgba(239,68,68,.12);color:color-mix(in srgb,#dc2626 78%,var(--st-text))}
.oh-badge.is-shut .oh-dot{background:#ef4444}
.oh-list{list-style:none;margin:0;padding:0}
.oh-row{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:3px 16px;align-items:baseline;padding:13px 12px;margin:0 -12px;border-bottom:1px dashed color-mix(in srgb,var(--st-text) 14%,transparent);font-size:16px}
.oh-row:last-child{border-bottom:0}
.oh-day{font-weight:700}
.oh-time,.oh-shut{justify-self:end;font-variant-numeric:tabular-nums}
.oh-shut{color:var(--st-muted)}
.oh-note{grid-column:1 / -1;justify-self:end;color:var(--st-muted);font-size:13.5px}
.oh-row.is-today{background:color-mix(in srgb,var(--st-brand) 10%,transparent);border-radius:10px;border-bottom-color:transparent}
.oh-row.is-today .oh-day{color:var(--st-brand)}
.oh-row.is-today .oh-day::before{content:"";display:inline-block;width:8px;height:8px;margin-right:9px;border-radius:50%;background:var(--st-brand)}
.oh-special{margin-top:14px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--st-text) 9%,transparent);color:var(--st-muted);font-size:14.5px}
.oh-side{display:flex;flex-direction:column;gap:clamp(14px,2cqi,20px);min-width:0}
.oh-map{flex:1;min-height:280px;overflow:hidden;border-radius:calc(var(--st-radius) * 1.1px);background:var(--st-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 420' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='600' height='420' fill='%23e9eef0'/%3E%3Cpath d='M0 90H600M0 250H600M0 350H600M110 0V420M300 0V420M470 0V420' stroke='%23ffffff' stroke-width='16'/%3E%3Cpath d='M0 190L600 150M200 0L330 420' stroke='%23ffffff' stroke-width='10'/%3E%3Crect x='330' y='110' width='110' height='80' rx='8' fill='%23d9e6dc'/%3E%3Cpath d='M300 150c-28 0-50 22-50 50 0 36 50 82 50 82s50-46 50-82c0-28-22-50-50-50z' fill='%23ef4444'/%3E%3Ccircle cx='300' cy='200' r='17' fill='%23ffffff'/%3E%3C/svg%3E") center/cover no-repeat;border:1px solid color-mix(in srgb,var(--st-text) 9%,transparent)}
.oh-frame{display:block;width:100%;height:100%;min-height:280px;border:0}
.oh-info{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:14px}
.oh-item{display:flex;align-items:flex-start;gap:14px}
.oh-item .st-icon{width:42px;height:42px;background:color-mix(in srgb,var(--st-brand) 14%,transparent)}
.oh-item .st-icon svg{width:20px;height:20px}
.oh-addr{display:flex;flex-direction:column;font-style:normal;font-size:16px;line-height:1.5;padding-top:2px}
.oh-name{font-weight:700}
.oh-link{align-self:center;color:var(--st-text);font-size:16.5px;font-weight:600;text-decoration:none;word-break:break-word}
.oh-link:hover{color:var(--st-brand);text-decoration:underline}
.oh-contact .st-btns{display:flex;flex-wrap:wrap;gap:12px}
@container st (max-width:860px){.oh{grid-template-columns:1fr}.oh-map,.oh-frame{min-height:260px}}
@media (prefers-reduced-motion:reduce){.oh-dot{box-shadow:none!important}}
/* Multi-Column Footer */
.st-footer-columns{padding:clamp(56px,7cqi,88px) 0 28px;border-top:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.st-brand{display:inline-flex;align-items:center;gap:10px;flex:none;text-decoration:none;color:var(--st-text)}
.st-brand-img{height:32px;width:auto;max-width:180px;object-fit:contain}
.st-brand-mark{display:inline-flex;align-items:center;gap:10px;font:800 21px/1 var(--st-font-heading);letter-spacing:-.03em}
.st-brand-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:calc(var(--st-radius) * .7px);background:var(--st-brand);color:var(--st-btn-text)}
.st-brand-icon svg{width:19px;height:19px}
.st-socials{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.st-social{display:grid;place-items:center;width:40px;height:40px;border-radius:calc(var(--st-radius) * .7px);color:var(--st-muted);background:color-mix(in srgb,var(--st-text) 6%,transparent);transition:color .2s ease,background .2s ease,transform .2s ease}
.st-social:hover{color:var(--st-btn-text);background:var(--st-brand);transform:translateY(-2px)}
.st-social > span{display:block;line-height:0}
.st-social svg{display:block;width:19px;height:19px}
.fo-top{display:grid;grid-template-columns:minmax(220px,1.1fr) 2fr;gap:clamp(36px,5cqi,80px)}
.fo-brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.fo-tagline{color:var(--st-muted);font-size:15.5px;max-width:24em}
.fo-tagline:empty{display:none}
.fo-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:28px}
.fo-col-title{font:700 14px/1.2 var(--st-font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--st-text);margin-bottom:16px}
.fo-links{list-style:none;display:flex;flex-direction:column;gap:11px}
.fo-links a,.fo-legal a{color:var(--st-muted);font-size:15px;text-decoration:none;transition:color .2s ease}
.fo-links a:hover,.fo-legal a:hover{color:var(--st-brand)}
.fo-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px;margin-top:clamp(40px,5cqi,64px);padding-top:24px;border-top:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.fo-copy{color:var(--st-muted);font-size:14px;margin-right:auto}
.fo-legal{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px}
.fo-legal a{font-size:14px}
.fo-totop{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:color-mix(in srgb,var(--st-text) 6%,transparent);color:var(--st-text);font-size:14px;font-weight:600;text-decoration:none}
.fo-totop:hover{background:var(--st-brand);color:var(--st-btn-text)}
@container st (max-width:820px){.fo-top{grid-template-columns:1fr}}
@container st (max-width:520px){.fo-cols{grid-template-columns:1fr 1fr}.fo-copy{margin-right:0;flex-basis:100%}}
/* Back to Top Button */
.st-back-to-top{overflow:visible;container-type:normal;height:0;min-height:0;padding:0;background:transparent}
.st-back-to-top:has(.btt.is-preview){height:auto;padding:clamp(20px,3vw,40px) var(--st-pad);background:color-mix(in srgb,var(--st-text) 6%,var(--st-bg))}
.btt{--btt-size:52px;--btt-off:24px;--btt-radius:50%;--btt-speed:.8s;--btt-bg:var(--st-brand);--btt-fg:var(--st-btn-text)}
.btt-btn{position:fixed;bottom:var(--btt-off);z-index:2147482500;display:grid;place-items:center;width:var(--btt-size);height:var(--btt-size);padding:0;border:0;border-radius:var(--btt-radius);background:var(--btt-bg);color:var(--btt-fg);cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,transform .3s ease,visibility 0s .3s,box-shadow .2s ease,background .2s ease}
.btt[data-pos=right] .btt-btn{right:var(--btt-off)}
.btt[data-pos=left] .btt-btn{left:var(--btt-off)}
.btt[data-appear=slide] .btt-btn{transform:translateY(28px)}
.btt[data-appear=zoom] .btt-btn{transform:scale(.5)}
.btt[data-shadow=on] .btt-btn{box-shadow:0 12px 28px -8px rgba(15,23,42,.45)}
.btt.is-visible .btt-btn{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .3s ease,transform .3s ease,visibility 0s,box-shadow .2s ease,background .2s ease}
.btt.is-visible .btt-btn:hover{transform:translateY(-3px)}
.btt.is-visible .btt-btn:active{transform:translateY(0) scale(.96)}
.btt-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--btt-bg) 55%,#fff);outline-offset:3px}
.btt-svg{width:calc(var(--btt-size) * .46);height:calc(var(--btt-size) * .46)}
@media (max-width:899px){.btt[data-mobile=off] .btt-btn{display:none}}
.btt[data-enabled=off] .btt-btn{display:none}
.btt-demo{display:none}
.btt.is-preview .btt-demo{position:relative;display:flex;flex-direction:column;gap:14px;min-height:320px;padding:34px 30px;border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-bg);box-shadow:0 20px 50px -24px color-mix(in srgb,var(--st-text) 40%,transparent)}
.btt-bar{display:block;height:14px;width:100%;border-radius:7px;background:color-mix(in srgb,var(--st-text) 12%,transparent)}
.btt-bar--lg{height:22px;width:62%;background:color-mix(in srgb,var(--st-text) 22%,transparent)}
.btt-bar--md{width:84%}.btt-bar--sm{width:46%}
.btt-note{margin-top:auto;font-size:13px;color:var(--st-muted)}
.btt.is-preview .btt-btn{position:absolute;right:calc(var(--st-pad) + 18px);bottom:calc(clamp(20px,3vw,40px) + 18px);opacity:1;visibility:visible;pointer-events:auto;transform:none}
.btt.is-preview[data-pos=left] .btt-btn{right:auto;left:calc(var(--st-pad) + 18px)}
@media (prefers-reduced-motion:reduce){.btt-btn{transition:none}}
@media print{.btt{display:none}}
/* Accessibility Toolbar Widget */
.st-accessibility-toolbar{overflow:visible;container-type:normal;height:0;min-height:0;background:transparent}
.st-accessibility-toolbar:has(.a11y.is-preview){height:auto;min-height:680px;padding:clamp(16px,2vw,24px) var(--st-pad);background:color-mix(in srgb,var(--st-text) 8%,var(--st-bg))}
.a11y{--a11y-w:380px}
.a11y-fab{position:fixed;bottom:20px;z-index:2147483000;display:grid;place-items:center;width:58px;height:58px;padding:0;border:3px solid #fff;border-radius:50%;background:var(--st-brand);color:var(--st-btn-text);cursor:pointer;box-shadow:0 10px 28px -6px rgba(15,23,42,.5);transition:transform .2s ease,box-shadow .2s ease}
.a11y[data-pos=right] .a11y-fab{right:20px}
.a11y[data-pos=left] .a11y-fab{left:20px}
.a11y-fab:hover{transform:scale(1.06)}
.a11y-fab:focus-visible,.a11y-tile:focus-visible,.a11y-icon:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 60%,#fff);outline-offset:3px}
.a11y.is-open .a11y-fab{box-shadow:0 0 0 4px color-mix(in srgb,var(--st-brand) 30%,transparent),0 10px 28px -6px rgba(15,23,42,.5)}
.a11y-panel{position:fixed;bottom:92px;z-index:2147483001;display:flex;flex-direction:column;width:min(var(--a11y-w),calc(100vw - 24px));max-height:calc(100vh - 116px);max-height:calc(100dvh - 116px);overflow:hidden;border-radius:calc(var(--st-radius) * 1.3px);background:var(--st-bg);color:var(--st-text);font-family:var(--st-font-body);font-size:15px;line-height:1.4;box-shadow:0 30px 70px -18px rgba(15,23,42,.55),0 0 0 1px color-mix(in srgb,var(--st-text) 8%,transparent);opacity:0;transform:translateY(12px) scale(.98);transition:opacity .2s ease,transform .2s ease}
.a11y-panel[hidden]{display:none}
.a11y[data-pos=right] .a11y-panel{right:20px}
.a11y[data-pos=left] .a11y-panel{left:20px}
.a11y.is-open .a11y-panel{opacity:1;transform:none}
.a11y-head{display:flex;align-items:center;gap:6px;padding:13px 18px;background:linear-gradient(135deg,var(--st-brand),color-mix(in srgb,var(--st-brand) 70%,#000));color:var(--st-btn-text)}
.a11y-title{flex:1;margin:0;font-family:var(--st-font-heading);font-size:21px;font-weight:800;letter-spacing:-.01em;color:inherit}
.a11y-icon{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:inherit;cursor:pointer;transition:background .15s ease}
.a11y-icon:hover{background:rgba(255,255,255,.3)}
.a11y-body{overflow-y:auto;padding:12px 14px 14px;background:var(--st-surface);overscroll-behavior:contain}
.a11y-sec{margin-bottom:10px;padding:12px;border-radius:calc(var(--st-radius) * 1px);background:var(--st-bg)}
.a11y-sec:not(:has(.a11y-tile)){display:none}
.a11y-h{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--st-text)}
.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a11y-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;min-height:70px;padding:10px 12px;border:2px solid transparent;border-radius:calc(var(--st-radius) * .75px);background:var(--st-surface);color:var(--st-text);font:600 14px/1.25 var(--st-font-body);text-align:left;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.a11y-tile:hover{border-color:color-mix(in srgb,var(--st-brand) 35%,transparent)}
.a11y-tile[aria-pressed=true]{border-color:var(--st-brand);background:color-mix(in srgb,var(--st-brand) 12%,var(--st-bg));color:var(--st-brand)}
.a11y-ic{flex:none}
.a11y-lab{display:block}
.a11y-pips{display:flex;gap:4px;min-height:6px}
.a11y-pip{width:16px;height:5px;border-radius:3px;background:color-mix(in srgb,var(--st-text) 18%,transparent)}
.a11y-pip.on{background:var(--st-brand)}
.a11y-note{margin:4px 2px 0;font-size:12.5px;color:var(--st-muted);text-align:center}
.a11y-note:empty{display:none}
.a11y.is-preview .a11y-fab{position:absolute}
.a11y.is-preview .a11y-panel{position:relative;inset:auto;margin:0 auto;opacity:1;transform:none;max-height:none}
.a11y-mask{position:fixed;left:0;right:0;z-index:2147482000;background:rgba(0,0,0,.78);pointer-events:none}
@media (max-width:480px){.a11y-grid{gap:8px}.a11y-tile{min-height:76px;padding:10px}}
@media (prefers-reduced-motion:reduce){.a11y-fab,.a11y-panel{transition:none}}
@media print{.a11y,.a11y-mask{display:none}}
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var anim = G && !reduce;
document.querySelectorAll('.st').forEach(function (sec) {
var btn = sec.querySelector('[data-menu-toggle]');
var panel = sec.querySelector('[data-menu]');
if (btn && panel) {
sec.classList.add('has-menu');
var isOpen = false;
var mobile = function () { return getComputedStyle(btn).display !== 'none'; };
// The toggle and the panel's controls, in document order (the toggle may come after the panel)
var focusables = function () {
return Array.prototype.filter.call(sec.querySelectorAll('a[href], button'), function (el) { return el === btn || panel.contains(el); });
};
var open = function () {
isOpen = true;
sec.classList.add('menu-open');
btn.setAttribute('aria-expanded', 'true');
if (anim) {
G.fromTo(panel, { opacity: 0, y: -12 }, { opacity: 1, y: 0, duration: 0.35, ease: 'power3.out', clearProps: 'transform,opacity' });
G.fromTo(panel.querySelectorAll('[data-menu-item]'), { opacity: 0, y: -8 }, { opacity: 1, y: 0, duration: 0.3, stagger: 0.04, delay: 0.05, ease: 'power2.out', clearProps: 'transform,opacity' });
}
var first = panel.querySelector('a[href], button');
if (first) first.focus();
};
var close = function (returnFocus) {
if (!isOpen) return;
isOpen = false;
btn.setAttribute('aria-expanded', 'false');
var done = function () { sec.classList.remove('menu-open'); };
if (anim) G.to(panel, { opacity: 0, y: -8, duration: 0.2, ease: 'power2.in', onComplete: function () { done(); G.set(panel, { clearProps: 'transform,opacity' }); } });
else done();
if (returnFocus) btn.focus();
};
btn.addEventListener('click', function () { if (isOpen) close(false); else open(); });
document.addEventListener('keydown', function (e) {
if (!isOpen) return;
if (e.key === 'Escape') { close(true); return; }
if (e.key === 'Tab') {
var f = focusables(), first = f[0], last = f[f.length - 1];
if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
}
});
document.addEventListener('click', function (e) { if (isOpen && !sec.contains(e.target)) close(false); });
panel.addEventListener('click', function (e) { if (e.target.closest('a')) close(false); });
window.addEventListener('resize', function () { if (isOpen && !mobile()) close(false); });
}
sec.querySelectorAll('[data-dismiss]').forEach(function (x) {
x.addEventListener('click', function () {
var box = x.closest('[data-dismissable]');
if (!box) return;
if (anim) G.to(box, { height: 0, opacity: 0, paddingTop: 0, paddingBottom: 0, duration: 0.35, ease: 'power2.inOut', onComplete: function () { box.remove(); } });
else box.remove();
});
});
if (sec.querySelector('[data-sticky-flag]')) {
var hideOn = !!sec.querySelector('[data-hide-flag]');
var last = window.scrollY, hidden = false;
var onScroll = function () {
var y = window.scrollY;
sec.classList.toggle('is-scrolled', y > 8);
if (hideOn && !sec.classList.contains('menu-open')) {
var down = y > last && y > 120;
if (down !== hidden) {
hidden = down;
if (anim) G.to(sec, { yPercent: down ? -100 : 0, duration: 0.35, ease: 'power2.out' });
else sec.style.transform = down ? 'translateY(-100%)' : '';
}
}
last = y;
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
}
});
})();
(function () {
document.querySelectorAll('.st [data-compare]').forEach(function (box) {
var input = box.querySelector('.ba-range');
if (!input) return;
if (window.ST_STILL || window.ST_PREVIEW) {
// The editor: clicking a photo edits it, so the full-size input is off; the handle itself
// can still be dragged to try the slider
box.classList.add('is-static');
var handle = box.querySelector('.ba-handle');
if (handle) handle.addEventListener('pointerdown', function (e) {
e.preventDefault();
e.stopPropagation();
var rect = box.getBoundingClientRect();
var move = function (ev) {
var p = Math.max(0, Math.min(100, (ev.clientX - rect.left) / rect.width * 100));
box.style.setProperty('--pos', p + '%');
};
var up = function () { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up); };
window.addEventListener('pointermove', move);
window.addEventListener('pointerup', up);
move(e);
});
return;
}
function set() { box.style.setProperty('--pos', input.value + '%'); }
input.addEventListener('input', set);
set();
});
})();
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!G || reduce || window.ST_STILL) return;
if (window.ScrollTrigger) G.registerPlugin(ScrollTrigger);
document.querySelectorAll('.st [data-count]').forEach(function (el) {
var host = el.closest('.st');
if (host && /"count":true/.test(host.getAttribute('data-scroll') || '')) return; // counted by its scroll animation
var text = el.textContent;
var m = text.match(/\d[\d,]*(\.\d+)?/);
if (!m) return;
var raw = m[0];
var dec = m[1] ? m[1].length - 1 : 0;
var commas = raw.indexOf(',') > -1;
var target = parseFloat(raw.replace(/,/g, ''));
var pre = text.slice(0, m.index), post = text.slice(m.index + raw.length);
var fmt = function (v) {
var s = v.toFixed(dec);
if (commas) { var p = s.split('.'); p[0] = p[0].replace(/\B(?=(\d{3})+(?!\d))/g, ','); s = p.join('.'); }
return pre + s + post;
};
el.setAttribute('aria-label', text.trim());
var o = { v: 0 };
// The real value stays in place until the count starts (it starts from 0 on enter)
G.fromTo(o, { v: 0 }, {
v: target, duration: 2, ease: 'power2.out', immediateRender: false,
scrollTrigger: window.ScrollTrigger ? { trigger: el, start: 'top 90%', once: true } : undefined,
onUpdate: function () { el.textContent = fmt(o.v); },
onComplete: function () { el.textContent = text; }
});
});
})();
(function () {
document.querySelectorAll('.st [data-revfilter]').forEach(function (root) {
var btns = root.querySelectorAll('[data-filter-star]');
var cards = root.querySelectorAll('[data-rating]');
var status = root.querySelector('[data-filter-status]');
var msg = status && status.querySelector('[data-filter-message]');
var clear = status && status.querySelector('[data-filter-clear]');
if (!btns.length || !cards.length) return;
var tpl = root.getAttribute('data-filter-text') || 'Showing {n} of {t} reviews rated {s} stars';
if (clear) clear.textContent = root.getAttribute('data-clear-label') || 'Show all reviews';
Array.prototype.forEach.call(btns, function (b) {
var label = b.getAttribute('aria-label');
if (label) b.setAttribute('aria-label', label.replace('{s}', b.getAttribute('data-star')));
});
var current = '';
function apply(star) {
current = star;
var shown = 0;
Array.prototype.forEach.call(cards, function (c) {
var show = !star || String(Math.round(parseFloat(c.getAttribute('data-rating')) || 0)) === star;
c.hidden = !show;
if (show) shown++;
});
Array.prototype.forEach.call(btns, function (b) { b.setAttribute('aria-pressed', String(b.getAttribute('data-star') === star)); });
if (status) {
status.hidden = !star;
if (msg && star) msg.textContent = tpl.replace('{n}', shown).replace('{t}', cards.length).replace('{s}', star);
}
}
Array.prototype.forEach.call(btns, function (b) {
b.addEventListener('click', function () { var s = b.getAttribute('data-star'); apply(current === s ? '' : s); });
});
if (clear) clear.addEventListener('click', function () { apply(''); });
});
})();
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var anim = G && !reduce;
document.querySelectorAll('.st [data-accordion]').forEach(function (list) {
var mode = list.getAttribute('data-accordion') || '';
var items = Array.prototype.slice.call(list.querySelectorAll('details'));
var body = function (d) { return d.querySelector('.st-acc-a'); };
var close = function (d) {
if (!d.open || d.classList.contains('is-closing')) return;
if (!anim) { d.open = false; return; }
d.classList.add('is-closing');
G.to(body(d), { height: 0, duration: 0.32, ease: 'power2.inOut', onComplete: function () {
d.open = false; d.classList.remove('is-closing'); G.set(body(d), { clearProps: 'height' });
} });
};
var open = function (d) {
d.open = true;
if (!anim) return;
var b = body(d);
G.fromTo(b, { height: 0 }, { height: 'auto', duration: 0.4, ease: 'power2.out', clearProps: 'height' });
G.fromTo(b.children, { y: -8, opacity: 0 }, { y: 0, opacity: 1, duration: 0.35, delay: 0.06, ease: 'power2.out', clearProps: 'transform,opacity' });
};
items.forEach(function (d) {
d.querySelector('summary').addEventListener('click', function (e) {
e.preventDefault();
if (d.open && !d.classList.contains('is-closing')) { close(d); return; }
if (/single/.test(mode)) items.forEach(function (o) { if (o !== d) close(o); });
open(d);
});
});
if (/first/.test(mode) && items[0]) items[0].open = true;
});
})();
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
document.querySelectorAll('.st form[data-form]').forEach(function (form) {
var ok = form.querySelector('[data-form-success]');
var bad = form.querySelector('[data-form-error]');
var btn = form.querySelector('[type="submit"]');
var done = function () {
var fields = form.querySelectorAll('[data-form-fields]');
var show = function () {
Array.prototype.forEach.call(fields, function (f) { f.hidden = true; });
if (ok) { ok.hidden = false; ok.focus && ok.focus(); if (G && !reduce) G.from(ok, { y: 16, opacity: 0, duration: 0.5, ease: 'power3.out', clearProps: 'transform,opacity' }); }
};
if (G && !reduce && fields.length) G.to(fields, { opacity: 0, y: -10, duration: 0.25, onComplete: show }); else show();
};
form.addEventListener('submit', function (e) {
if (!window.fetch) return;
e.preventDefault();
if (bad) bad.hidden = true;
if (btn) { btn.disabled = true; btn.setAttribute('aria-busy', 'true'); }
var finish = function () { if (btn) { btn.disabled = false; btn.removeAttribute('aria-busy'); } };
if (window.ST_PREVIEW) { setTimeout(function () { finish(); done(); }, 600); return; }
fetch(form.action, { method: 'POST', body: new FormData(form), headers: { Accept: 'application/json' } })
.then(function (r) { finish(); if (r.ok) done(); else if (bad) bad.hidden = false; })
.catch(function () { finish(); if (bad) bad.hidden = false; });
});
});
})();
(function () {
var KEYS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
function mins(v) {
var m = String(v || '').trim().toLowerCase().match(/^(\d{1,2})(?::(\d{2}))?\s*(am|pm)?$/);
if (!m) return null;
var h = +m[1], mi = +(m[2] || 0);
if (m[3] === 'pm' && h < 12) h += 12;
if (m[3] === 'am' && h === 12) h = 0;
return h > 24 || mi > 59 ? null : h * 60 + mi;
}
function clock(total) {
var h = Math.floor(total / 60) % 24, mi = total % 60;
return (h < 10 ? '0' : '') + h + ':' + (mi < 10 ? '0' : '') + mi;
}
function nowIn(tz) {
var o = { weekday: 'short', hour: '2-digit', minute: '2-digit', hourCycle: 'h23' };
if (tz) o.timeZone = tz;
var parts;
try { parts = new Intl.DateTimeFormat('en-GB', o).formatToParts(new Date()); }
catch (e) { delete o.timeZone; parts = new Intl.DateTimeFormat('en-GB', o).formatToParts(new Date()); }
var p = {};
parts.forEach(function (x) { p[x.type] = x.value; });
return { day: KEYS.indexOf(String(p.weekday).slice(0, 3).toLowerCase()), min: (parseInt(p.hour, 10) % 24) * 60 + parseInt(p.minute, 10) };
}
document.querySelectorAll('.st').forEach(function (sec) {
var root = sec.querySelector('[data-opennow]');
if (!root) return;
var badge = root.querySelector('[data-open-badge]');
var text = badge && badge.querySelector('.oh-badge-text');
var rows = Array.prototype.map.call(root.querySelectorAll('[data-hours-row]'), function (r) {
var d = KEYS.indexOf(String(r.getAttribute('data-day') || '').slice(0, 3).toLowerCase());
var o = mins(r.getAttribute('data-open')), c = mins(r.getAttribute('data-close'));
var label = r.querySelector('.oh-day');
return { el: r, day: d, open: o, close: c, shut: r.getAttribute('data-closed') === 'closed' || o === null || c === null, name: label ? label.textContent : '' };
});
if (!rows.length) return;
var tz = root.getAttribute('data-tz') || '';
function attr(n, d) { return root.getAttribute(n) || d; }
function update() {
var n = nowIn(tz), prev = (n.day + 6) % 7, open = null;
rows.forEach(function (r) {
r.el.classList.toggle('is-today', r.day === n.day);
if (r.day === n.day) r.el.setAttribute('aria-current', 'date'); else r.el.removeAttribute('aria-current');
if (r.shut) return;
var over = r.close <= r.open;
if (r.day === n.day && n.min >= r.open && (over || n.min < r.close)) open = open || r;
if (r.day === prev && over && n.min < r.close) open = open || r;
});
if (!badge || !text) return;
badge.hidden = false;
badge.classList.toggle('is-open', !!open);
badge.classList.toggle('is-shut', !open);
if (open) { text.textContent = attr('data-open-label', 'Open now') + ' \u00b7 ' + attr('data-closes-label', 'closes at') + ' ' + clock(open.close); return; }
var next = null;
for (var i = 0; i < 8 && !next; i++) {
var dd = (n.day + i) % 7;
rows.forEach(function (r) {
if (r.shut || r.day !== dd || (i === 0 && r.open <= n.min)) return;
if (!next || r.open < next.open) next = r;
});
if (next) next.when = i === 0 ? '' : next.name + ' ';
}
text.textContent = attr('data-shut-label', 'Closed now') + (next ? ' \u00b7 ' + attr('data-opens-label', 'opens') + ' ' + next.when + clock(next.open) : '');
}
update();
setInterval(update, 60000);
});
})();
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (G && window.ScrollToPlugin) G.registerPlugin(ScrollToPlugin);
document.querySelectorAll('.st [data-totop]').forEach(function (a) {
a.addEventListener('click', function (e) {
e.preventDefault();
if (G && window.ScrollToPlugin && !reduce) G.to(window, { scrollTo: 0, duration: 1, ease: 'power3.inOut' });
else window.scrollTo({ top: 0, behavior: reduce ? 'auto' : 'smooth' });
});
});
})();
(function () {
var inline = window.ST_STILL || window.ST_PREVIEW || window.ST_POPUP_INLINE;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
document.querySelectorAll('.st [data-btt]').forEach(function (root) {
if (root.getAttribute('data-btt-ready')) return;
root.setAttribute('data-btt-ready', '1');
var btn = root.querySelector('.btt-btn');
var demo = root.querySelector('.btt-demo');
if (!btn || root.getAttribute('data-enabled') === 'off') { if (demo && !inline) demo.parentNode.removeChild(demo); return; }
if (!inline && demo) demo.parentNode.removeChild(demo);
if (inline) {
root.classList.add('is-preview', 'is-visible');
btn.addEventListener('click', function (e) { e.preventDefault(); });
return;
}
var dist = parseFloat(root.getAttribute('data-distance')) || 0;
var secs = parseFloat(root.getAttribute('data-speed'));
if (isNaN(secs)) secs = 0.8;
var ticking = false;
function check() { ticking = false; root.classList.toggle('is-visible', (window.pageYOffset || document.documentElement.scrollTop) > dist); }
window.addEventListener('scroll', function () { if (!ticking) { ticking = true; requestAnimationFrame(check); } }, { passive: true });
check();
var stopped = false;
['wheel', 'touchstart', 'keydown'].forEach(function (ev) { window.addEventListener(ev, function () { stopped = true; }, { passive: true }); });
btn.addEventListener('click', function () {
var from = window.pageYOffset || document.documentElement.scrollTop;
if (reduce || secs <= 0 || from < 2) { window.scrollTo({ top: 0, left: 0, behavior: 'instant' }); return; }
stopped = false;
var t0 = performance.now(), dur = secs * 1000;
(function step(t) {
var p = Math.min(1, (t - t0) / dur);
var e = p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2;
window.scrollTo({ top: from * (1 - e), left: 0, behavior: 'instant' });
if (p < 1 && !stopped) requestAnimationFrame(step);
})(t0);
});
});
})();
(function () {
var inline = window.ST_STILL || window.ST_PREVIEW || window.ST_POPUP_INLINE;
var btnMode = !!window.ST_POPUP_BUTTON;
var LEVELS = { text: 3, lineheight: 2, align: 3, font: 1, contrast: 2, gray: 1, images: 1, motion: 1, links: 1, mask: 1 };
var SIZES = [1, 1.15, 1.3, 1.5];
var ALIGNS = ['', 'left', 'center', 'right'];
var KEY = 'st-a11y';
var CSS = [
'html[data-a11y-lh="1"] body *:not(.a11y *){line-height:1.7!important}',
'html[data-a11y-lh="2"] body *:not(.a11y *){line-height:2.1!important}',
'html[data-a11y-font] body *:not(.a11y *){font-family:Verdana,Tahoma,Arial,sans-serif!important;letter-spacing:.02em!important}',
'html[data-a11y-align] body *:not(.a11y *){text-align:var(--a11y-align)!important}',
'html[data-a11y-img] body :is(img,picture,video,canvas):not(.a11y *){visibility:hidden!important}',
'html[data-a11y-img] body *:not(.a11y *){background-image:none!important}',
'html[data-a11y-motion] body *:not(.a11y *),html[data-a11y-motion] body *::before,html[data-a11y-motion] body *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}',
'html[data-a11y-links] body a:not(.a11y a){text-decoration:underline!important;text-underline-offset:3px!important;background:#ffe14d!important;color:#111!important;outline:2px solid #111!important;outline-offset:1px!important}',
'.a11y-fx{filter:var(--a11y-filter,none)}',
'html[data-a11y-contrast="2"] .a11y-fx :is(img,video,picture){filter:invert(1) hue-rotate(180deg)}'
].join('\n');
var textBase = new Map();
function load(remember) {
if (!remember) return {};
try { return JSON.parse(localStorage.getItem(KEY) || '{}') || {}; } catch (e) { return {}; }
}
function save(state, remember) {
if (!remember) return;
try {
var any = Object.keys(LEVELS).some(function (k) { return state[k]; });
if (any) localStorage.setItem(KEY, JSON.stringify(state)); else localStorage.removeItem(KEY);
} catch (e) {}
}
document.querySelectorAll('.st [data-a11y]').forEach(function (root) {
if (root.getAttribute('data-a11y-ready')) return;
root.setAttribute('data-a11y-ready', '1');
var fab = root.querySelector('.a11y-fab');
var panel = root.querySelector('.a11y-panel');
if (!fab || !panel) return;
var remember = root.getAttribute('data-remember') !== 'off';
var tiles = root.querySelectorAll('[data-feature]');
var state = {};
Object.keys(LEVELS).forEach(function (k) { state[k] = 0; });
function paint() {
tiles.forEach(function (t) {
var f = t.getAttribute('data-feature');
var lvl = state[f] || 0, max = LEVELS[f] || 1;
t.setAttribute('aria-pressed', lvl > 0 ? 'true' : 'false');
var pips = t.querySelector('.a11y-pips');
if (pips) {
pips.innerHTML = '';
if (max > 1) for (var i = 1; i <= max; i++) { var p = document.createElement('span'); p.className = 'a11y-pip' + (i <= lvl ? ' on' : ''); pips.appendChild(p); }
}
});
}
root.querySelectorAll('[data-a11y-close]').forEach(function (b) { b.addEventListener('click', function (e) { if (inline && !btnMode) { e.preventDefault(); panel.hidden = true; fab.setAttribute('aria-expanded', 'false'); return; } close(true); }); });
if (inline && !btnMode) {
root.classList.add('is-preview');
panel.hidden = false;
fab.setAttribute('aria-expanded', 'true');
fab.addEventListener('click', function () { panel.hidden = !panel.hidden; fab.setAttribute('aria-expanded', String(!panel.hidden)); });
tiles.forEach(function (t) {
t.addEventListener('click', function () { var f = t.getAttribute('data-feature'); state[f] = ((state[f] || 0) + 1) % ((LEVELS[f] || 1) + 1); paint(); });
});
var rs = root.querySelector('[data-a11y-reset]');
if (rs) rs.addEventListener('click', function () { Object.keys(LEVELS).forEach(function (k) { state[k] = 0; }); paint(); });
state.text = 1; state.contrast = 0; state.font = 1; // a sample of switched-on options for the preview
paint();
return;
}
/* ---------- real page ---------- */
var styleEl = document.createElement('style');
styleEl.setAttribute('data-a11y-css', '');
styleEl.textContent = CSS;
document.head.appendChild(styleEl);
var html = document.documentElement;
var maskTop = null, maskBottom = null, maskY = 140;
function markFx() {
(function walk(node) {
Array.prototype.forEach.call(node.children, function (c) {
if (c === root) return;
if (c.contains(root)) { walk(c); return; }
if (/^(SCRIPT|STYLE|LINK|META|NOSCRIPT|TEMPLATE)$/.test(c.tagName) || c.hasAttribute('data-a11y-css')) return;
c.classList.add('a11y-fx');
});
})(document.body);
}
function applyText(level) {
var els = [];
document.body.querySelectorAll('*').forEach(function (el) {
if (el.closest('.a11y') || /^(SCRIPT|STYLE|NOSCRIPT|SVG|PATH|BR|HR|IMG|VIDEO|CANVAS)$/i.test(el.tagName)) return;
for (var n = el.firstChild; n; n = n.nextSibling) { if (n.nodeType === 3 && n.nodeValue.trim()) { els.push(el); break; } }
});
if (level === 0) {
textBase.forEach(function (info, el) { if (info.inline) el.style.setProperty('font-size', info.inline); else el.style.removeProperty('font-size'); });
textBase.clear();
return;
}
els.forEach(function (el) { if (!textBase.has(el)) textBase.set(el, { inline: el.style.getPropertyValue('font-size'), px: parseFloat(getComputedStyle(el).fontSize) || 16 }); });
els.forEach(function (el) { var info = textBase.get(el); el.style.setProperty('font-size', (info.px * SIZES[level]).toFixed(2) + 'px', 'important'); });
}
function setMask(on) {
if (!on) {
document.removeEventListener('mousemove', onMove);
document.removeEventListener('touchmove', onTouch);
document.removeEventListener('focusin', onFocus);
if (maskTop) { maskTop.remove(); maskBottom.remove(); maskTop = maskBottom = null; }
return;
}
if (maskTop) return;
maskTop = document.createElement('div'); maskTop.className = 'a11y-mask'; maskTop.style.top = '0';
maskBottom = document.createElement('div'); maskBottom.className = 'a11y-mask'; maskBottom.style.bottom = '0';
document.body.appendChild(maskTop); document.body.appendChild(maskBottom);
place(maskY);
document.addEventListener('mousemove', onMove);
document.addEventListener('touchmove', onTouch, { passive: true });
document.addEventListener('focusin', onFocus);
}
function place(y) {
maskY = y;
var half = 55;
maskTop.style.height = Math.max(0, y - half) + 'px';
maskBottom.style.height = Math.max(0, window.innerHeight - y - half) + 'px';
}
function onMove(e) { place(e.clientY); }
function onTouch(e) { if (e.touches[0]) place(e.touches[0].clientY); }
function onFocus(e) { if (e.target && e.target.getBoundingClientRect && !root.contains(e.target)) { var r = e.target.getBoundingClientRect(); place(r.top + r.height / 2); } }
function apply() {
var s = state;
function flag(name, on, val) { if (on) html.setAttribute(name, val === undefined ? '' : val); else html.removeAttribute(name); }
flag('data-a11y-lh', s.lineheight > 0, String(s.lineheight));
flag('data-a11y-font', s.font > 0);
flag('data-a11y-align', s.align > 0);
if (s.align > 0) html.style.setProperty('--a11y-align', ALIGNS[s.align]); else html.style.removeProperty('--a11y-align');
flag('data-a11y-img', s.images > 0);
flag('data-a11y-motion', s.motion > 0);
flag('data-a11y-links', s.links > 0);
flag('data-a11y-contrast', s.contrast > 0, String(s.contrast));
var filters = [];
if (s.contrast === 1) filters.push('contrast(1.5)');
if (s.contrast === 2) filters.push('invert(1) hue-rotate(180deg)');
if (s.gray) filters.push('grayscale(1)');
if (filters.length) { markFx(); html.style.setProperty('--a11y-filter', filters.join(' ')); } else html.style.removeProperty('--a11y-filter');
applyText(s.text);
if (s.motion) {
document.querySelectorAll('video').forEach(function (v) { try { v.pause(); } catch (e) {} });
if (window.gsap && gsap.globalTimeline) gsap.globalTimeline.pause();
} else if (window.gsap && gsap.globalTimeline) gsap.globalTimeline.resume();
setMask(s.mask > 0);
paint();
save(s, remember);
}
tiles.forEach(function (t) {
t.addEventListener('click', function () { var f = t.getAttribute('data-feature'); state[f] = ((state[f] || 0) + 1) % ((LEVELS[f] || 1) + 1); apply(); });
});
var reset = root.querySelector('[data-a11y-reset]');
if (reset) reset.addEventListener('click', function () { Object.keys(LEVELS).forEach(function (k) { state[k] = 0; }); apply(); });
function open() {
panel.hidden = false;
requestAnimationFrame(function () { root.classList.add('is-open'); });
fab.setAttribute('aria-expanded', 'true');
panel.focus();
}
function close(refocus) {
root.classList.remove('is-open');
fab.setAttribute('aria-expanded', 'false');
setTimeout(function () { if (!root.classList.contains('is-open')) panel.hidden = true; }, 220);
if (refocus) fab.focus();
}
fab.addEventListener('click', function () { if (root.classList.contains('is-open')) close(true); else open(); });
root.addEventListener('keydown', function (e) { if (e.key === 'Escape' && root.classList.contains('is-open')) { e.stopPropagation(); close(true); } });
document.addEventListener('mousedown', function (e) { if (root.classList.contains('is-open') && !root.contains(e.target)) close(false); });
var saved = load(remember);
var any = false;
Object.keys(LEVELS).forEach(function (k) { var v = parseInt(saved[k], 10); if (v > 0 && v <= LEVELS[k]) { state[k] = v; any = true; } });
paint();
// Restore after the page has finished loading, so text added below this script is found too
if (any) { if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', apply); else apply(); }
});
})();
(function () {
if (!window.gsap) return;
if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
if (window.ScrollTrigger) gsap.registerPlugin(ScrollTrigger);
var TEXT = window.SplitText ? {"split":"words","part":"words","mask":"words","vars":{"yPercent":110,"stagger":0.06,"duration":0.8}} : null;
if (TEXT) gsap.registerPlugin(SplitText);
function run() {
document.querySelectorAll('.st:not([data-scroll])').forEach(function (section) {
var heads = TEXT ? section.querySelectorAll('[data-anim-text]') : [];
var items = section.querySelectorAll(heads.length ? '[data-anim="item"]:not([data-anim-text])' : '[data-anim="item"]');
var media = section.querySelectorAll('[data-anim="media"]');
var tl = gsap.timeline({
defaults: { ease: 'power3.out', duration: 0.80 },
scrollTrigger: window.ScrollTrigger ? (window.ST_PREVIEW ? { trigger: section, start: 'top 80%', end: function () { var pin = ScrollTrigger.getAll().filter(function (t) { return t.pin === section; })[0]; return pin ? pin.end + section.offsetHeight : 'bottom top'; }, toggleActions: 'play reset play reset' } : { trigger: section, start: 'top 80%', once: true }) : undefined
});
Array.prototype.forEach.call(heads, function (el, i) {
var opts = { type: TEXT.split };
if (TEXT.mask) opts.mask = TEXT.mask;
var parts = SplitText.create(el, opts)[TEXT.part];
// The mask clips each line or word to its line box, which cuts off descenders (g, y, p):
// give the mask a little room below and take it back with a negative margin
if (TEXT.mask) Array.prototype.forEach.call(parts, function (p) { var m = p.parentElement; if (m && m !== el) { m.style.paddingBottom = '.22em'; m.style.marginBottom = '-.22em'; } });
tl.from(parts, Object.assign({}, TEXT.vars), i ? '<0.1' : 0);
});
if (items.length) tl.from(items, {"y":28,"opacity":0,"stagger":0.09,"clearProps":"transform,opacity"}, heads.length ? '<0.2' : 0);
if (media.length) tl.from(media, {"y":40,"opacity":0,"duration":1.1,"clearProps":"transform,opacity"}, items.length || heads.length ? '<0.15' : 0);
});
}
// Split text only after the fonts load, so lines break where they finally will
if (TEXT && document.fonts && document.fonts.ready) document.fonts.ready.then(run); else run();
})();
Extend with AI
Take This Template Further With AI
Give this prompt to an AI assistant to generate your own version of the Local Service Business Website template: swap in your business name, services and tone, add or remove sections, translate it, or turn the page into a Next.js project or a WordPress theme. Use the template above as the visual reference, so you and the AI start from a design that already works.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
text
Build a complete local service business website for “Sparkle & Co” as clean HTML, CSS and a little JavaScript.
Page structure, top to bottom:
1. Simple Sticky Navbar
2. SaaS Split Hero: “A spotless home, without lifting a finger”
3. Icon Grid Features: “Cleaning for every space”
4. How It Works Steps: “Booked in three easy steps”
5. Before & After Slider: “Spotless, every time”
6. Animated Stats Counters: “Cleaning homes since 2015”
7. Reviews Summary & Rating: “Rated 4.9 out of 5 by local families”
8. FAQ Accordion: “Good to know”
9. Contact Form With Details: “Get your fixed price”
10. Opening Hours & Location: “Open when you need us”
11. Multi-Column Footer
12. Back to Top Button
13. Accessibility Toolbar Widget
Look and feel:
- Colours as CSS custom properties: brand #ea580c, page background #ffffff, cards #fff6ef, text #1c1917, muted text #57534e. Corner radius 12px, content width 1200px.
- Headings in Plus Jakarta Sans, body text in Inter (load both from Google Fonts with display=swap).
- Mobile first. Sections use CSS grid or flexbox and stack cleanly below 700px.
Content:
- Write real, believable local business copy for every section instead of lorem ipsum: specific offers, numbers, names and calls to action.
- One clear primary action in the hero and again near the end.
Quality:
- Semantic HTML (header, main, section, footer) with exactly one h1, the hero headline, and one h2 per section.
- Accessible: alt text on every image, visible focus states, labelled form fields, buttons and links with clear text, and prefers-reduced-motion respected.
- SEO: title “Local Business Website Template — Free HTML Service Template”, a meta description of 150 to 160 characters, Open Graph tags and JSON-LD that suits a local business business.
- Optional: a subtle GSAP ScrollTrigger fade-up on section headings, with content visible without JavaScript.
Also create these pages with the same navbar, footer and theme, and link them from the menu:
- FAQ (faq.html)
- Contact (contact.html)
- Privacy (privacy.html)Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
What's included
Features
13 ready-made website sections assembled into one finished local service business website page: Simple Sticky Navbar, SaaS Split Hero, Icon Grid Features, How It Works Steps, Before & After Slider, Animated Stats Counters, Reviews Summary & Rating, FAQ Accordion, Contact Form With Details, Opening Hours & Location, Multi-Column Footer, Back to Top Button, Accessibility Toolbar Widget
Every section links to its own page in the Website Section Templates library, where you can edit it on its own
One theme drives the whole page (colours, fonts, corner radius, width), so changing the brand takes a minute
Container-query responsive: each section adapts to the width it is placed in, from phone to desktop
GSAP entrance animations and scroll effects load from a CDN, and switch off for visitors who prefer reduced motion
Also available as a 5-page website in the builder, sharing one navbar, footer and theme
A reviews summary with the average rating and a star breakdown that filters the review cards
Opening hours with a live Open now badge in the business time zone, the address, a map and call buttons, plus LocalBusiness data for search engines
A floating back to top button that appears as visitors scroll, on every page of the multi-page version
A floating accessibility toolbar with bigger text, contrast, grayscale, hide images and pause animations
Plain HTML, CSS and JavaScript: copy the code here or export it to React, Vue, Angular or Tailwind
About this UI Snippet
A Local Service Website That Earns the Phone Call: Trust First, Quote Form Last
Someone looking for a plumber, cleaner or gardener is often in a hurry and wary of strangers. This layout puts trust ahead of design. The hero makes one clear promise with a quote button, the services grid shows what you do, and a "how booking works" step list answers the next question: what happens after I contact you? Before-and-after images prove the quality of the work, and animated counters (jobs done, years trading, average rating) give the numbers a stranger looks for.
Reviews in a carousel and a FAQ remove the last doubts: are you insured, do you give fixed quotes, how quickly can you come? The page ends on a contact form built to get a quote request with enough detail to reply to, plus your phone number and service area.
Replace the sample business with yours and keep the structure. It is the layout of the Local Service Business Website template; open it in the Website Builder to change copy, colours and photos and export.
Interactive extras built in
Beyond the core sections, this template adds a reviews summary with the 4.9 average and a star breakdown that filters the customer reviews; opening hours with a live Open now badge and a free call button, for a business that comes to the customer; a floating back to top button that appears after the visitor scrolls, so a long page is easy to leave and return; and a floating accessibility toolbar where visitors can enlarge text, raise contrast, hide images and pause animations. Each one has its own page in the Website Section Templates library (Reviews Summary & Rating, Opening Hours & Location, Back to Top Button, Accessibility Toolbar Widget), where you can try its settings on their own, and you can edit, move or remove any of them in the Website Builder.
Built from website section templates
The 13 Sections Behind This Local Service Business Website Page
This page is not one big block of code: it is stacked from ready-made sections in the free Website Section Templates library, in this order. Open any of them to edit it on its own, or start with the whole page.
- Simple Sticky Navbara sticky bar with your phone number and a Get a quote button, because many visitors call first
- SaaS Split Heroone clear promise and a quote button, with your service area stated
- Icon Grid Featureswhat you do, in plain terms: the jobs a customer would search for
- How It Works Stepshow booking works in three steps, answering what happens after someone gets in touch
- Before & After Sliderbefore-and-after photos that prove the quality of the work
- Animated Stats Counterscounters for jobs completed, years trading and average rating, the numbers a stranger looks for
- Reviews Summary & Ratinga reviews summary with the 4.9 average and a star breakdown that filters the customer reviews
- FAQ Accordionanswers on insurance, fixed quotes and call-out times, the last doubts before a call
- Contact Form With Detailsa quote form with job details, plus your phone number and service area
- Opening Hours & Locationopening hours with a live Open now badge and a free call button, for a business that comes to the customer
- Multi-Column Footera multi-column footer with areas covered, accreditations and legal links
- Back to Top Buttona floating back to top button that appears after the visitor scrolls, so a long page is easy to leave and return
- Accessibility Toolbar Widgeta floating accessibility toolbar where visitors can enlarge text, raise contrast, hide images and pause animations
Step by step
How to Use
- 1Open the template in the Website BuilderPress "Start using this template" to open the Local Service Business Website in the Website Builder. Everything is edited with forms in a side panel; no code is needed.
- 2Show your service area and phone numberAdd your real phone number to the navbar and hero and list the towns or postcodes you cover so local customers know you work near them.
- 3Use real before-and-after photosReplace the slider images with your own jobs, so the proof is true to your work and matches the services you list.
- 4Write honest answers in the FAQCover insurance, guarantees, how you price jobs and how fast you can attend, with answers that match how you actually work.
- 5Export and publishDownload one HTML file or a ZIP (or one HTML file per page for the multi-page version) and upload it to Netlify, Vercel, Cloudflare Pages, GitHub Pages or your own host. Or copy the code from this page and export it to React, Vue, Angular or Tailwind with the buttons above the editor.
Real-world uses
Common Use Cases
Plumbers, electricians, cleaners and gardeners
Give a local trade a credible web presence that wins calls and quote requests.
A page for one service in one area
Make a focused page for a single service and town, which suits local search and paid ads.
Learn a count-up and a quote form
See how animated counters and a request form with validation are built and made accessible.
Got questions?
Frequently Asked Questions
A phone number, your service area, a list of services, proof of work, reviews and an easy way to request a quote.
Set the contact form to send to Formspree or your own endpoint, which emails each request to you.
It tells customers what to expect after they get in touch, which lowers hesitation, especially for strangers letting someone into their home.
It adds a reviews summary with a star breakdown and filter, an opening hours section with a live Open now badge, a floating back to top button and an accessibility toolbar. Each is a section you can edit, move or remove in the Website Builder, and each has its own page in the Website Section Templates library.
It is assembled from 13 templates in the free Website Section Templates library: Simple Sticky Navbar, SaaS Split Hero, Icon Grid Features, How It Works Steps, Before & After Slider, Animated Stats Counters, Reviews Summary & Rating, FAQ Accordion, Contact Form With Details, Opening Hours & Location, Multi-Column Footer, Back to Top Button, Accessibility Toolbar Widget. Each one has its own page where you can edit it separately.
It is the same page. Here you read and edit the HTML, CSS and JavaScript directly with a live preview; in the Website Builder you edit it with forms, change the theme once for the whole page, add pages and export a finished site.