Nonprofit & Charity Website HTML Template — Free Snippet
Nonprofit & Charity Website template · 15 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="smvw6s7upnnag">
<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="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><span>GreenRoots</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>Our work</span></a></li>
<li data-menu-item><a class="nb-link" href="#results"><span>Impact</span></a></li>
<li data-menu-item><a class="nb-link" href="#customers"><span>Stories</span></a></li>
<li data-menu-item><a class="nb-link" href="#team"><span>Team</span></a></li>
</ul>
<div class="nb-actions" data-menu-item>
<a class="st-btn nb-cta" href="#get-started"><span>Donate</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-image-background-hero" data-uid="smvw6s7upulf6">
<div class="ib-bg" role="img" aria-label="Background photo" style="background-image:url('https://webdevpuneet.com/images/section-templates/tpl-nature.jpg')"></div>
<div class="ib-shade" aria-hidden="true"></div>
<div class="ib st-wrap">
<div class="ib-copy">
<span class="st-eyebrow ib-eyebrow" data-anim="item">Planting trees, growing communities</span>
<h1 class="ib-title" data-anim="item" data-anim-text>Every tree is <span class="hl">a fresh start</span></h1>
<p class="st-lead ib-lead" data-anim="item">We restore forests with the communities who live beside them, creating jobs, clean water and hope.</p>
<div class="st-btns" data-anim="item">
<a class="st-btn" href="#get-started"><span>Donate today</span></a>
<a class="st-btn st-btn--ghost ib-ghost" href="#results"><span>See our impact</span></a>
</div>
</div>
<div class="ib-stats" data-anim="media">
<div><strong>2.4M</strong><span>trees planted</span></div>
<div><strong>38</strong><span>villages</span></div>
<div><strong>1,100</strong><span>local jobs</span></div>
</div>
</div>
</section>
<section id="results" class="st st-stats-counters" data-uid="smvw6s7upjd83">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Our impact</p>
<h2 class="st-h2" data-anim="item" data-anim-text>What your support <span class="hl">has done</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">Trees planted</dt>
<dd class="sc-value" data-count>2.4M</dd>
<dd class="sc-note">since 2016</dd>
</div>
<div class="sc-stat" data-anim="item">
<dt class="sc-label">Villages</dt>
<dd class="sc-value" data-count>38</dd>
<dd class="sc-note">in 4 countries</dd>
</div>
<div class="sc-stat" data-anim="item">
<dt class="sc-label">Local jobs</dt>
<dd class="sc-value" data-count>1,100</dd>
<dd class="sc-note">mostly for women</dd>
</div>
<div class="sc-stat" data-anim="item">
<dt class="sc-label">Of every donation</dt>
<dd class="sc-value" data-count>92%</dd>
<dd class="sc-note">goes to projects</dd>
</div>
</dl>
</div>
</section>
<section id="how-it-works" class="st st-features-steps" data-uid="smvw6s7upxqzy">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">How your gift helps</p>
<h2 class="st-h2" data-anim="item" data-anim-text>From donation to <span class="hl">forest</span></h2>
<p class="st-lead" data-anim="item">Transparent from start to finish. Every tree is tracked and reported.</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="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" /></svg></span></div>
<h3 class="fp-title">You give</h3>
<p class="fp-text">£10 plants and protects ten native trees.</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="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg></span></div>
<h3 class="fp-title">Communities plant</h3>
<p class="fp-text">Local teams grow, plant and care for every tree.</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="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></div>
<h3 class="fp-title">Forests return</h3>
<p class="fp-text">Healthy forests bring back water, wildlife and income.</p>
</li>
</ol>
<div class="fp-cta" data-anim="item">
<a class="st-btn" href="https://webdevpuneet.com/signup"><span>Plant trees today</span></a>
<p class="fp-note">Free for teams up to 10 people</p>
</div>
</div>
</section>
<section id="timeline" class="st st-timeline-horizontal" data-uid="smvw6s7upxujk">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Our story</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Ten years of <span class="hl">planting forests</span></h2>
<p class="st-lead" data-anim="item">Keep scrolling to follow GreenRoots from a single village nursery to millions of trees.</p>
</header>
<div class="tlh" data-tlh data-layout="alternate" data-marker="icon" data-width="contained" data-start="1" data-mode="pin">
<button type="button" class="tlh-nav tlh-prev" data-tlh-prev disabled aria-label="Show earlier events"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button>
<div class="tlh-track" data-tlh-track role="region" tabindex="0" aria-label="Company timeline">
<ol class="tlh-list">
<li class="tlh-item" data-anim="item">
<div class="tlh-card">
<p class="tlh-date">2016</p>
<h3 class="tlh-title">The first nursery</h3>
<p class="tlh-text">One village, one nursery and a thousand native seedlings planted by neighbours.</p>
</div>
<button type="button" class="tlh-dot" data-tlh-dot aria-label="The first nursery"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><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></button>
</li>
<li class="tlh-item" data-anim="item">
<div class="tlh-card">
<p class="tlh-date">2018</p>
<h3 class="tlh-title">Local teams grow</h3>
<p class="tlh-text">Women-led planting teams are paid fairly to grow and protect every tree.</p>
</div>
<button type="button" class="tlh-dot" data-tlh-dot aria-label="Local teams grow"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><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 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg></span></button>
</li>
<li class="tlh-item" data-anim="item">
<div class="tlh-card">
<p class="tlh-date">2020</p>
<h3 class="tlh-title">A million trees in sight</h3>
<p class="tlh-text">Ten villages and the first 100,000 trees, with survival checked every season.</p>
</div>
<button type="button" class="tlh-dot" data-tlh-dot aria-label="A million trees in sight"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><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"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17" /><polyline points="16 7 22 7 22 13" /></svg></span></button>
</li>
<li class="tlh-item" data-anim="item">
<div class="tlh-card">
<p class="tlh-date">2022</p>
<h3 class="tlh-title">Schools join in</h3>
<p class="tlh-text">Pupils plant and track trees near their schools, learning how forests return.</p>
</div>
<button type="button" class="tlh-dot" data-tlh-dot aria-label="Schools join in"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><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="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z" /><path d="M22 10v6" /><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5" /></svg></span></button>
</li>
<li class="tlh-item" data-anim="item">
<div class="tlh-card">
<p class="tlh-date">2024</p>
<h3 class="tlh-title">Four countries</h3>
<p class="tlh-text">The programme reaches 38 villages in 4 countries, with 1,100 local jobs.</p>
</div>
<button type="button" class="tlh-dot" data-tlh-dot aria-label="Four countries"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><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" /><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" /><path d="M2 12h20" /></svg></span></button>
</li>
<li class="tlh-item" data-anim="item">
<div class="tlh-card">
<p class="tlh-date">2026</p>
<h3 class="tlh-title">2.4 million trees</h3>
<p class="tlh-text">A decade on, forests are returning and 92% of every donation goes to projects.</p>
</div>
<button type="button" class="tlh-dot" data-tlh-dot aria-label="2.4 million trees"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><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="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" /></svg></span></button>
</li>
</ol>
</div>
<button type="button" class="tlh-nav tlh-next" data-tlh-next aria-label="Show later events"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button>
</div>
</div>
</section>
<section id="features" class="st st-features-icon-grid" data-uid="smvw6s7updxer">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Our work</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Programmes that <span class="hl">last</span></h2>
<p class="st-lead" data-anim="item">We stay for at least ten years in every place we work.</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="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">Reforestation</h3>
<p class="fg-text">Native trees planted and protected for a decade.</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="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z" /><path d="M22 10v6" /><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5" /></svg></span>
<h3 class="fg-title">Education</h3>
<p class="fg-text">Environmental classes in 60 local schools.</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="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" /><rect width="20" height="14" x="2" y="6" rx="2" /></svg></span>
<h3 class="fg-title">Livelihoods</h3>
<p class="fg-text">Fair jobs and training for local families.</p>
</article>
</div>
</div>
</section>
<section id="customers" class="st st-testimonials-grid" data-uid="smvw6s7upi5vo">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Stories</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Voices from <span class="hl">the field</span></h2>
<p class="tg-summary" data-anim="item"></p>
</header>
<div class="tg-wall">
<figure class="tg-card" data-anim="item">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tg-quote"><p>The forest brought the stream back. Our children can drink clean water again.</p></blockquote>
<figcaption><div class="st-person">
<img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-6.jpg" alt="">
<div><p class="st-person-name">Amina K.</p><p class="st-person-role">Community leader, Kenya</p></div>
</div></figcaption>
</figure>
<figure class="tg-card" data-anim="item">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tg-quote"><p>I trained as a nursery manager and now support my whole family.</p></blockquote>
<figcaption><div class="st-person">
<img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-2.jpg" alt="">
<div><p class="st-person-name">Joseph M.</p><p class="st-person-role">Tree nursery manager</p></div>
</div></figcaption>
</figure>
<figure class="tg-card" data-anim="item">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tg-quote"><p>Transparent reports every quarter. I know exactly what my donation did.</p></blockquote>
<figcaption><div class="st-person">
<img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-3.jpg" alt="">
<div><p class="st-person-name">Laura S.</p><p class="st-person-role">Monthly donor</p></div>
</div></figcaption>
</figure>
</div>
</div>
</section>
<section id="about" class="st st-about-story" data-uid="smvw6s7upeu0b">
<div class="st-wrap">
<div class="ab">
<div class="ab-media" data-anim="media">
<img class="ab-img" src="https://webdevpuneet.com/images/section-templates/tpl-nature.jpg" alt="Green hills where GreenRoots trees are growing">
<p class="ab-badge"><strong>10</strong><span>years of planting</span></p>
</div>
<div class="ab-copy">
<p class="st-eyebrow" data-anim="item">About GreenRoots</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Forests grow when <span class="hl">people lead</span></h2>
<p class="ab-story" data-anim="item">GreenRoots began in 2016 with a village nursery and a thousand native seedlings. Today local teams in 38 villages across 4 countries grow, plant and protect trees, and are paid fairly to do it.</p>
<p class="ab-story" data-anim="item">We are a small team in London and Nairobi. We work with local partners, publish our results every year and send 92% of every donation to projects.</p>
<ul class="ab-facts" data-anim="item">
<li class="ab-fact"><strong class="ab-num">2.4M</strong><span class="ab-label">trees planted</span></li>
<li class="ab-fact"><strong class="ab-num">38</strong><span class="ab-label">villages</span></li>
<li class="ab-fact"><strong class="ab-num">1,100</strong><span class="ab-label">local jobs</span></li>
</ul>
<div class="st-btns" data-anim="item">
<a class="st-btn" href="#results"><span>See our impact</span></a>
<a class="st-btn st-btn--ghost" href="#get-started"><span>Donate</span></a>
</div>
</div>
</div>
<ul class="ab-values">
<li class="ab-value" 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="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg></span>
<h3 class="ab-vtitle">Led by communities</h3>
<p class="ab-vtext">Local teams choose the species, plant the trees and look after them for years.</p>
</li>
<li class="ab-value" 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="ab-vtitle">Open about results</h3>
<p class="ab-vtext">We publish survival rates every season, the good news and the bad.</p>
</li>
<li class="ab-value" 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="ab-vtitle">Planted to last</h3>
<p class="ab-vtext">We pay for care after planting, because a tree only counts once it survives.</p>
</li>
</ul>
</div>
</section>
<section id="team" class="st st-team-grid" data-uid="smvw6s7upb1ji">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Our team</p>
<h2 class="st-h2" data-anim="item" data-anim-text>The people <span class="hl">behind the trees</span></h2>
<p class="st-lead" data-anim="item">A small team in London and Nairobi, working with local partners.</p>
</header>
<ul class="tm2-grid">
<li class="tm2-card" data-anim="item">
<div class="tm2-photo">
<img width="400" height="400" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-6.jpg" alt="">
<div class="tm2-social">
<a aria-label="LinkedIn" href="https://www.linkedin.com/"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" 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></a>
</div>
</div>
<h3 class="tm2-name">Aisha Bello</h3>
<p class="tm2-role">Co-founder & CEO</p>
<p class="tm2-bio">Ex-product lead at two scale-ups. Obsessed with calm software.</p>
</li>
<li class="tm2-card" data-anim="item">
<div class="tm2-photo">
<img width="400" height="400" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-1.jpg" alt="">
<div class="tm2-social">
<a aria-label="LinkedIn" href="https://www.linkedin.com/"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" 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></a>
<a aria-label="X (Twitter)" href="https://x.com/"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" 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></a>
</div>
</div>
<h3 class="tm2-name">Leo Martins</h3>
<p class="tm2-role">Co-founder & CTO</p>
<p class="tm2-bio">Builds fast, boring, reliable systems. Coffee-powered.</p>
</li>
<li class="tm2-card" data-anim="item">
<div class="tm2-photo">
<img width="400" height="400" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-5.jpg" alt="">
<div class="tm2-social">
<a aria-label="LinkedIn" href="https://www.linkedin.com/"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" 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></a>
</div>
</div>
<h3 class="tm2-name">Nora Quinn</h3>
<p class="tm2-role">Head of Design</p>
<p class="tm2-bio">Designs for clarity first. Previously at a design studio in Dublin.</p>
</li>
<li class="tm2-card" data-anim="item">
<div class="tm2-photo">
<img width="400" height="400" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-4.jpg" alt="">
<div class="tm2-social">
<a aria-label="LinkedIn" href="https://www.linkedin.com/"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" 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></a>
<a aria-label="X (Twitter)" href="https://x.com/"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" 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></a>
</div>
</div>
<h3 class="tm2-name">Ravi Shah</h3>
<p class="tm2-role">Lead Engineer</p>
<p class="tm2-bio">Performance nerd who makes every click feel instant.</p>
</li>
</ul>
</div>
</section>
<section id="get-started" class="st st-cta-gradient-banner" data-uid="smvw6s7upy70y">
<div class="st-wrap">
<div class="cb" data-spotlight data-anim="media">
<h2 class="st-h2 cb-title" data-anim="item" data-anim-text>Plant trees <span class="hl">today</span></h2>
<p class="cb-lead" data-anim="item">£10 plants and protects ten native trees. Gift Aid adds 25% at no cost to you.</p>
<div class="st-btns cb-btns" data-anim="item">
<a class="st-btn" data-magnetic href="https://webdevpuneet.com/signup"><span>Donate now</span></a>
<a class="st-btn st-btn--ghost" data-magnetic href="https://webdevpuneet.com/contact"><span>Give monthly</span></a>
</div>
<p class="cb-note" data-anim="item">Registered charity no. 1170000</p>
</div>
</div>
</section>
<section class="st st-popup-modal" data-uid="smvw6s7upzs1m">
<div class="pu" data-pu data-trigger="delay" data-delay="14" data-scroll="50" data-days="7" data-pos="center" data-layout="left" data-autoplay="0" data-pu-id="6vd216">
<div class="pu-backdrop" data-pu-close hidden></div>
<div class="pu-dialog" role="dialog" aria-modal="true" aria-labelledby="pu-heading" tabindex="-1" hidden>
<button type="button" class="pu-x" data-pu-close aria-label="Close popup"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
<div class="pu-media">
<img class="pu-img" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-nature.jpg" alt="Young trees in a restored woodland">
</div>
<div class="pu-body">
<p class="st-eyebrow">Plant a tree</p>
<h2 class="pu-h" id="pu-heading">Every <span class="hl">£5</span> plants a tree</h2>
<p class="pu-lead">Join 8,000 supporters helping us restore local woodland this winter.</p>
<div class="pu-ctas">
<a class="st-btn pu-cta" href="#get-started"><span>Donate now</span></a>
<a class="st-btn st-btn--ghost pu-cta" href="#results"><span>See our impact</span></a>
</div>
<button type="button" class="pu-no" data-pu-close><span>No thanks</span></button>
</div>
</div>
</div>
</section>
<section class="st st-floating-social-share" data-uid="smvw6s7upd2rv">
<div class="ss" data-ss data-side="right" data-align="center" style="--ss-top:50%" data-mobile="bar" data-look="network" data-shape="attached" data-size="default" data-tips="on" data-start="open" data-copied="Link copied">
<div class="ss-panel" role="group" aria-label="Share this page">
<ul class="ss-list"><li class="ss-item"><a class="ss-btn" data-net="facebook" data-share="https://www.facebook.com/sharer/sharer.php?u={url}" href="https://www.facebook.com/sharer/sharer.php" target="_blank" rel="noopener noreferrer" style="--c:#1877F2" aria-label="Share on Facebook (opens in a new tab)"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="currentColor"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg><span class="ss-tip" aria-hidden="true">Facebook</span></a></li><li class="ss-item"><a class="ss-btn" data-net="x" data-share="https://x.com/intent/post?url={url}&text={title}&via={via}&hashtags={tags}" href="https://x.com/intent/post" target="_blank" rel="noopener noreferrer" style="--c:#111111" aria-label="Share on X (opens in a new tab)"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg><span class="ss-tip" aria-hidden="true">X</span></a></li><li class="ss-item"><a class="ss-btn" data-net="whatsapp" data-share="https://wa.me/?text={text}" href="https://wa.me/" target="_blank" rel="noopener noreferrer" style="--c:#128C7E" aria-label="Share on WhatsApp (opens in a new tab)"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21l1.7-5.1A9 9 0 1 1 8.1 19.3z"/><path d="M9 8.5c0 3.300 2.700 6 6 6l1.300-1.500-2.200-1.100-.9.900c-.9-.4-1.700-1.200-2.100-2.100l.9-.9-1.100-2.200z"/></svg><span class="ss-tip" aria-hidden="true">WhatsApp</span></a></li><li class="ss-item"><a class="ss-btn" data-net="email" data-share="mailto:?subject={title}&body={text}" href="mailto:" style="--c:#6B7280" aria-label="Share on Email"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.970 5.700a1.940 1.940 0 0 1-2.060 0L2 7"/></svg><span class="ss-tip" aria-hidden="true">Email</span></a></li><li class="ss-item"><button type="button" class="ss-btn" data-net="copy" style="--c:#0F7B3F" aria-label="Copy link"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="13" height="13" x="8" y="8" rx="2.500"/><path d="M16 8V6.500A2.500 2.500 0 0 0 13.500 4h-7A2.500 2.500 0 0 0 4 6.500v7A2.500 2.500 0 0 0 6.500 16H8"/></svg><svg class="ss-ic ss-ic--done" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><span class="ss-tip" aria-hidden="true">Copy link</span></button></li><li class="ss-item ss-item--hide"><button type="button" class="ss-hide" data-ss-hide aria-expanded="true" aria-label="Hide share buttons"><svg class="ss-ic ss-ic--hide" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg></button></li></ul>
</div>
<button type="button" class="ss-tab" data-ss-show aria-expanded="true" aria-label="Show share buttons"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.600 13.500 6.800 4M15.400 6.500l-6.800 4"/></svg><span class="ss-tab-text" aria-hidden="true">Share</span></button>
<span class="ss-live" role="status" aria-live="polite"></span>
</div>
</section>
<section class="st st-footer-newsletter" data-uid="smvw6s7uphqas">
<footer class="st-wrap fn">
<div class="fn-top">
<div class="fn-news" 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="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><span>GreenRoots</span></span>
</a>
<h2 class="fn-title">News from the field</h2>
<p class="fn-text">Stories and impact updates, once a month.</p>
<form class="fn-form" method="post" action="https://webdevpuneet.com/subscribe">
<input class="fn-input" type="email" required autocomplete="email" name="email" placeholder="Your email address" aria-label="Your email address">
<button class="st-btn" type="submit"><span>Subscribe</span></button>
</form>
</div>
<div class="fn-cols">
<nav class="fn-col" data-anim="item" aria-label="Product">
<h2 class="fn-col-title">Product</h2>
<ul class="fn-links"><li><a href="/features/">Features</a></li><li><a href="/pricing/">Pricing</a></li><li><a href="/integrations/">Integrations</a></li><li><a href="/changelog/">Changelog</a></li></ul>
</nav>
<nav class="fn-col" data-anim="item" aria-label="Company">
<h2 class="fn-col-title">Company</h2>
<ul class="fn-links"><li><a href="/about/">About</a></li><li><a href="/careers/">Careers</a></li><li><a href="/customers/">Customers</a></li><li><a href="/contact/">Contact</a></li></ul>
</nav>
<nav class="fn-col" data-anim="item" aria-label="Resources">
<h2 class="fn-col-title">Resources</h2>
<ul class="fn-links"><li><a href="/blog/">Blog</a></li><li><a href="/guides/">Guides</a></li><li><a href="/help/">Help centre</a></li><li><a href="https://status.webdevpuneet.com">Status</a></li></ul>
</nav>
</div>
</div>
<div class="fn-bottom">
<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>
<p class="fn-copy">© 2026 GreenRoots Foundation · Registered charity no. 1170000</p>
<ul class="fn-legal"><li><a href="/privacy/">Privacy</a></li><li><a href="/terms/">Terms</a></li></ul>
</div>
</footer>
</section>
<section class="st st-back-to-top" data-uid="smvw6s7uqi8hm">
<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="smvw6s7uqwn14">
<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=Merriweather:wght@400;700;900&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:#15803d;--st-btn-text:#ffffff;--st-bg:#ffffff;--st-surface:#f0f8f2;--st-text:#0f1f14;--st-muted:#4b5f52;--st-radius:14;--st-max:1200;--st-font-heading:"Merriweather", 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}
}
/* Image Background Hero */
.st-image-background-hero{min-height:min(88vh,760px);display:flex;align-items:stretch;background:var(--st-bg)}
.ib-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.ib-shade{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--st-bg) 88%,transparent) 0%,color-mix(in srgb,var(--st-bg) 55%,transparent) 55%,color-mix(in srgb,var(--st-bg) 15%,transparent) 100%),linear-gradient(0deg,color-mix(in srgb,var(--st-bg) 70%,transparent),transparent 45%)}
.ib{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding-top:clamp(72px,10cqi,140px);padding-bottom:clamp(32px,4cqi,48px)}
.ib-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px;max-width:640px}
.ib-eyebrow{color:var(--st-brand)}
.ib-title{font-size:clamp(42px,5.6cqi + 10px,80px);line-height:1.02}
.ib-lead{color:var(--st-muted);max-width:32em}
.ib-ghost{color:var(--st-text);border-color:color-mix(in srgb,var(--st-text) 55%,transparent);backdrop-filter:blur(6px)}
.ib-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--st-text) 22%,transparent)}
.ib-stats div{display:flex;flex-direction:column;gap:2px}
.ib-stats strong{font-family:var(--st-font-heading);font-size:clamp(26px,2.6cqi + 8px,38px);line-height:1.1;color:var(--st-text)}
.ib-stats span{font-size:14px;color:var(--st-muted)}
@container st (max-width:640px){.ib-stats{grid-template-columns:1fr}.ib-shade{background:color-mix(in srgb,var(--st-bg) 72%,transparent)}}
/* 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)}}
/* 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)}}
/* Horizontal Timeline */
.st-timeline-horizontal{padding:clamp(64px,8cqi,112px) 0}
.tlh{position:relative;display:flex;align-items:center;gap:8px}
.tlh-track{flex:1;min-width:0;padding-block:14px 46px;margin-block:-14px -46px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;outline:none;border-radius:calc(var(--st-radius) * 1px)}
.tlh-track::-webkit-scrollbar{display:none}
.tlh-track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.tlh-track:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--st-brand) 55%,transparent)}
.tlh-list{--tl-card-h:158px;--tl-item-w:240px;position:relative;display:flex;width:max-content;min-width:100%;margin:0;padding:0 28px;list-style:none;counter-reset:tl}
.tlh-list::before{content:"";position:absolute;left:0;right:0;top:calc(var(--tl-card-h) + 22px);height:4px;margin-top:-2px;border-radius:2px;background:color-mix(in srgb,var(--st-text) 14%,transparent)}
.tlh-list::after{content:"";position:absolute;left:0;top:calc(var(--tl-card-h) + 22px);height:4px;margin-top:-2px;border-radius:2px;width:var(--tl-fill,0px);background:linear-gradient(90deg,color-mix(in srgb,var(--st-brand) 55%,transparent),var(--st-brand));transition:width .7s cubic-bezier(.4,0,.2,1)}
.tlh-item{counter-increment:tl;position:relative;display:flex;flex:1 0 var(--tl-item-w);flex-direction:column;align-items:center;justify-content:flex-start;min-width:var(--tl-item-w);height:calc(var(--tl-card-h) * 2 + 44px);scroll-snap-align:center}
.tlh-dot{position:absolute;top:calc(var(--tl-card-h) + 22px);left:50%;z-index:2;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:3px solid var(--st-bg);border-radius:50%;background:var(--st-surface);color:var(--st-brand);font:800 15px/1 var(--st-font-heading);box-shadow:0 0 0 2px color-mix(in srgb,var(--st-brand) 45%,transparent);cursor:pointer;transition:background .3s ease,color .3s ease,transform .3s ease,box-shadow .3s ease}
.tlh-dot:hover{transform:scale(1.1)}
.tlh-dot:focus-visible{outline:3px solid var(--st-brand);outline-offset:3px}
.tlh-num::before{content:counter(tl)}
.tlh-ico{display:none;width:20px;height:20px}
.tlh-dot .tlh-ico{background:none;border-radius:0;color:inherit}
.tlh-ico svg{width:20px;height:20px}
.tlh[data-marker=icon] .tlh-num{display:none}
.tlh[data-marker=icon] .tlh-ico{display:inline-grid}
.tlh-item.is-active .tlh-dot{background:var(--st-brand);color:var(--st-btn-text);transform:scale(1.18);box-shadow:0 0 0 5px color-mix(in srgb,var(--st-brand) 24%,transparent)}
.tlh-card{box-sizing:border-box;position:absolute;left:8px;right:8px;bottom:0;display:flex;flex-direction:column;justify-content:flex-start;gap:4px;height:var(--tl-card-h);padding:14px 16px;border-radius:calc(var(--st-radius) * .8px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 8%,transparent);transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease}
.tlh-card::after{content:"";position:absolute;left:50%;top:-7px;width:12px;height:12px;margin-left:-6px;background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 8%,transparent);border-bottom:0;border-right:0;transform:rotate(45deg);transition:border-color .4s ease}
@container st (min-width:641px){
.tlh[data-layout=alternate] .tlh-item:nth-child(odd) .tlh-card,.tlh[data-layout=above] .tlh-card{top:0;bottom:auto}
.tlh[data-layout=alternate] .tlh-item:nth-child(odd) .tlh-card::after,.tlh[data-layout=above] .tlh-card::after{top:auto;bottom:-7px;border:1px solid color-mix(in srgb,var(--st-text) 8%,transparent);border-top:0;border-left:0}
.tlh[data-layout=alternate] .tlh-item.is-active:nth-child(odd) .tlh-card::after,.tlh[data-layout=above] .tlh-item.is-active .tlh-card::after{border-color:color-mix(in srgb,var(--st-brand) 50%,transparent)}
}
.tlh-item.is-active .tlh-card::after{border-color:color-mix(in srgb,var(--st-brand) 50%,transparent)}
.tlh-item.is-active .tlh-card{transform:translateY(0);border-color:color-mix(in srgb,var(--st-brand) 50%,transparent);box-shadow:0 18px 40px -18px color-mix(in srgb,var(--st-brand) 55%,transparent)}
.tlh-date{color:var(--st-brand);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.tlh-title{font-size:17px;letter-spacing:-.01em}
.tlh-text{color:var(--st-muted);font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.tlh-text:empty{display:none}
.tlh-nav{flex:none;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid color-mix(in srgb,var(--st-text) 14%,transparent);border-radius:50%;background:var(--st-bg);color:var(--st-text);cursor:pointer;box-shadow:0 6px 16px -8px color-mix(in srgb,var(--st-text) 40%,transparent);transition:background .2s ease,color .2s ease,opacity .2s ease}
.tlh-nav:hover:not(:disabled){background:var(--st-brand);color:var(--st-btn-text);border-color:var(--st-brand)}
.tlh-nav:focus-visible{outline:3px solid var(--st-brand);outline-offset:2px}
.tlh-nav:disabled{opacity:.35;cursor:default}
.is-tl-pinned .tlh-track{overflow:hidden;cursor:default}
.is-tl-pinned .tlh-nav{display:none}
.is-tl-pinned .tlh-list{will-change:transform}
.is-tl-pinned .tlh-list::after{transition:none}
.tlh.is-fit .tlh-nav{display:none}
.tlh[data-width=full]{width:100cqi;margin-inline:calc(50% - 50cqi);gap:0}
.tlh[data-width=full] .tlh-track{border-radius:0}
.tlh[data-width=full] .tlh-list{padding-inline:max(28px,var(--st-pad))}
.tlh[data-width=full] .tlh-nav{position:absolute;top:50%;z-index:3;transform:translateY(-50%)}
.tlh[data-width=full] .tlh-prev{left:12px}
.tlh[data-width=full] .tlh-next{right:12px}
@container st (max-width:640px){
.tlh[data-width=full] .tlh-nav{top:22px}
.tlh-list{--tl-item-w:230px;--tl-card-h:172px}
.tlh-list::before,.tlh-list::after{top:22px}
.tlh-item{height:calc(var(--tl-card-h) + 44px)}
.tlh-dot{top:22px}
.tlh-nav{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){.tlh-list::after,.tlh-dot,.tlh-card{transition:none}}
/* 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}}
/* Testimonial Wall */
.st-testimonials-grid{padding:clamp(64px,8cqi,112px) 0}
.st-stars{color:#f59e0b;font-size:16px;letter-spacing:2px;line-height:1}
.st-person{display:flex;align-items:center;gap:12px}
.st-avatar{width:44px;height:44px;flex:none;border-radius:50%;object-fit:cover;background:var(--st-surface)}
.st-person-name{font-weight:700;font-size:15.5px;line-height:1.3}
.st-person-role{color:var(--st-muted);font-size:14px;line-height:1.4}
.st-person-role:empty{display:none}
.tg-summary{padding:6px 14px;border-radius:999px;background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 8%,transparent);color:var(--st-muted);font-size:14.5px;font-weight:600}
.tg-summary:empty{display:none}
.tg-wall{columns:3 300px;column-gap:clamp(16px,2cqi,22px)}
.tg-card{break-inside:avoid;display:flex;flex-direction:column;gap:16px;margin:0 0 clamp(16px,2cqi,22px);padding:clamp(22px,2.4cqi,28px);border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 7%,transparent);box-shadow:0 10px 30px -22px color-mix(in srgb,var(--st-text) 40%,transparent)}
.tg-quote{font-size:16.5px;line-height:1.65}
.tg-card:nth-child(3n+2){background:color-mix(in srgb,var(--st-brand) 6%,var(--st-surface))}
/* About Us & Our Story */
.st-about-story{padding:clamp(64px,8cqi,112px) 0}
.ab{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5cqi,76px);align-items:center}
.ab-media{position:relative}
.ab-img{width:100%;aspect-ratio:4 / 5;object-fit:cover;border-radius:calc(var(--st-radius) * 1.6px);background:var(--st-surface)}
.ab-badge{position:absolute;left:clamp(12px,2cqi,22px);bottom:clamp(12px,2cqi,22px);display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 20px;border-radius:calc(var(--st-radius) * 1px);background:var(--st-brand);color:var(--st-btn-text);box-shadow:0 18px 40px -16px color-mix(in srgb,var(--st-brand) 70%,#000)}
.ab-badge strong{font:700 clamp(30px,3.6cqi,42px)/1 var(--st-font-heading)}
.ab-badge span{font-size:14px;font-weight:600;opacity:.92}
.ab-copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,1.6cqi,18px)}
.ab-copy .st-h2{text-align:left}
.ab-story{color:var(--st-muted);font-size:clamp(16px,1.5cqi,18px);line-height:1.7}
.ab-facts{list-style:none;display:flex;flex-wrap:wrap;gap:16px clamp(24px,4cqi,48px);margin:6px 0;padding:18px 0;width:100%;border-block:1px solid color-mix(in srgb,var(--st-text) 11%,transparent)}
.ab-fact{display:flex;flex-direction:column;gap:2px}
.ab-num{font:700 clamp(28px,3.2cqi,38px)/1.1 var(--st-font-heading);color:var(--st-brand)}
.ab-label{color:var(--st-muted);font-size:14px}
.ab-founder{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 14px;width:100%}
.ab-face{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--st-surface)}
.ab-founder figcaption{display:flex;flex-direction:column}
.ab-who{font-size:16px}
.ab-role{color:var(--st-muted);font-size:14px}
.ab-quote{grid-column:1 / -1;margin-top:8px;padding-left:16px;border-left:3px solid var(--st-brand);color:var(--st-text);font:italic 500 clamp(17px,1.7cqi,20px)/1.5 var(--st-font-heading)}
.ab-values{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(14px,1.8cqi,22px);margin-top:clamp(40px,6cqi,76px)}
.ab-value{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:clamp(22px,2.4cqi,30px);border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.ab-value .st-icon{background:color-mix(in srgb,var(--st-brand) 14%,transparent);margin-bottom:4px}
.ab-vtitle{font-size:19px}
.ab-vtext{color:var(--st-muted);font-size:15.5px}
@container st (max-width:820px){.ab{grid-template-columns:1fr}.ab-img{aspect-ratio:5 / 4}}
/* Team Grid */
.st-team-grid{padding:clamp(64px,8cqi,112px) 0}
.tm2-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4cqi,32px)}
.tm2-card{display:flex;flex-direction:column}
.tm2-photo{position:relative;overflow:hidden;margin-bottom:16px;border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);aspect-ratio:1}
.tm2-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tm2-card:hover .tm2-photo img{transform:scale(1.05)}
.tm2-social{position:absolute;left:12px;bottom:12px;display:flex;gap:8px;transform:translateY(calc(100% + 16px));transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.tm2-card:hover .tm2-social,.tm2-card:focus-within .tm2-social{transform:none}
@media (hover:none){.tm2-social{transform:none}}
.tm2-social a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);color:#0f172a;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.tm2-social a:hover{background:var(--st-brand);color:var(--st-btn-text)}
.tm2-social svg{width:17px;height:17px}
.tm2-name{font-size:18px;letter-spacing:-.01em}
.tm2-role{color:var(--st-brand);font-size:14.5px;font-weight:600;margin-top:2px}
.tm2-bio{color:var(--st-muted);font-size:15px;margin-top:8px}
.tm2-bio:empty{display:none}
@container st (max-width:960px){.tm2-grid{grid-template-columns:repeat(3,1fr)}}
@container st (max-width:700px){.tm2-grid{grid-template-columns:repeat(2,1fr)}}
/* Gradient CTA Banner */
.st-cta-gradient-banner{padding:clamp(48px,7cqi,96px) 0}
.cb{--mx:50%;--my:30%;position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:20px;padding:clamp(48px,7cqi,96px) clamp(24px,5cqi,72px);text-align:center;border-radius:calc(var(--st-radius) * 1px);color:#fff;background:linear-gradient(135deg,var(--st-brand),color-mix(in srgb,var(--st-brand) 55%,#0f172a));box-shadow:0 40px 80px -40px color-mix(in srgb,var(--st-brand) 70%,transparent)}
.cb::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(520px circle at var(--mx) var(--my),rgba(255,255,255,.28),transparent 60%)}
.cb::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:44px 44px;-webkit-mask:radial-gradient(ellipse at center,#000 30%,transparent 75%);mask:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.cb .hl{color:color-mix(in srgb,#fff 72%,var(--st-brand))}
.cb .cb-title{color:#fff;max-width:18em;font-size:clamp(32px,3.2cqi + 14px,54px)}
.cb-lead{max-width:36em;font-size:clamp(17px,1cqi + 13px,20px);color:rgba(255,255,255,.85)}
.cb-btns{justify-content:center;margin-top:8px}
.cb .st-btn{background:#fff;border-color:#fff;color:var(--st-brand)}
.cb .st-btn:hover{box-shadow:0 12px 30px rgba(0,0,0,.25)}
.cb .st-btn--ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45);color:#fff}
.cb .st-btn--ghost:hover{border-color:#fff;box-shadow:none}
.cb-note{font-size:14px;color:rgba(255,255,255,.72)}
/* Popup & Promo Modal */
.st-popup-modal{overflow:visible;container-type:normal;height:0;min-height:0;background:transparent}
.st-popup-modal:has(.pu.is-preview){height:auto;padding:clamp(24px,4vw,48px) var(--st-pad);background:color-mix(in srgb,var(--st-text) 8%,var(--st-bg))}
.pu-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(15,23,42,.58);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .3s ease}
.pu-backdrop[hidden],.pu-dialog[hidden]{display:none}
.pu-dialog{position:fixed;z-index:1001;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);--pu-wd:780px;width:min(var(--pu-w,var(--pu-wd)),calc(100vw - 32px));height:var(--pu-h,auto);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-bg);color:var(--st-text);box-shadow:0 40px 90px -20px rgba(15,23,42,.55);font-family:var(--st-font-body);opacity:0;transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.pu[data-pos=center] .pu-dialog{top:50%;left:50%;transform:translate(-50%,-46%) scale(.97)}
.pu:not([data-pos=center]) .pu-dialog{--pu-wd:400px;grid-template-columns:1fr;box-shadow:0 24px 60px -16px rgba(15,23,42,.5),0 0 0 1px color-mix(in srgb,var(--st-text) 8%,transparent)}
.pu:not([data-pos=center]) .pu-backdrop{display:none}
.pu[data-pos^=bottom] .pu-dialog{bottom:20px;transform:translateY(24px)}
.pu[data-pos^=top] .pu-dialog{top:20px;transform:translateY(-24px)}
.pu[data-pos$=right] .pu-dialog{right:20px}
.pu[data-pos$=left] .pu-dialog{left:20px}
.pu[data-pos=bottom-center] .pu-dialog{left:50%;--pu-wd:460px;transform:translate(-50%,24px)}
.pu.is-open .pu-backdrop{opacity:1}
.pu.is-open .pu-dialog{opacity:1}
.pu[data-pos=center].is-open .pu-dialog{transform:translate(-50%,-50%)}
.pu[data-pos=bottom-center].is-open .pu-dialog{transform:translateX(-50%)}
.pu:not([data-pos=center]):not([data-pos=bottom-center]).is-open .pu-dialog{transform:none}
.pu-media{position:relative;min-height:220px;background:var(--st-surface)}
.pu-media:not(:has(.pu-img,.pu-car,.pu-video)){display:none}
.pu-dialog:not(:has(.pu-img,.pu-car,.pu-video)){grid-template-columns:1fr}
.pu-body:not(:has(.st-eyebrow:not(:empty),.pu-h:not(:empty),.pu-lead:not(:empty),.pu-form,.pu-ctas,.pu-html-wrap,.pu-no span:not(:empty))){display:none}
.pu-dialog:not(:has(.st-eyebrow:not(:empty),.pu-h:not(:empty),.pu-lead:not(:empty),.pu-form,.pu-ctas,.pu-html-wrap,.pu-no span:not(:empty))){grid-template-columns:1fr}
.pu-dialog:not(:has(.st-eyebrow:not(:empty),.pu-h:not(:empty),.pu-lead:not(:empty),.pu-form,.pu-ctas,.pu-html-wrap,.pu-no span:not(:empty))) .pu-media{min-height:clamp(240px,40vw,380px)}
.pu[data-pos=center][data-layout=right] .pu-dialog{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.pu[data-pos=center][data-layout=right] .pu-media{order:2}
.pu[data-pos=center][data-layout=top] .pu-dialog{grid-template-columns:1fr;--pu-wd:520px}
.pu[data-pos=center][data-layout=top] .pu-media{min-height:0;aspect-ratio:16/9}
.pu[data-pos=center][data-layout=bottom] .pu-dialog{grid-template-columns:1fr;--pu-wd:520px}
.pu[data-pos=center][data-layout=bottom] .pu-media{min-height:0;aspect-ratio:16/9}
.pu[data-layout=bottom] .pu-media{order:2}
.pu:not([data-pos=center]) .pu-media{min-height:150px;aspect-ratio:16/9}
.pu-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pu-car{position:absolute;inset:0}
.pu-video{position:absolute;inset:0;z-index:1;background:#0b1020;overflow:hidden}
.pu-video .vs-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pu-video .vs-play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(to top,rgba(8,10,20,.55),rgba(8,10,20,.08) 65%);color:#fff;text-decoration:none}
.pu-video .vs-btn{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--st-brand);color:var(--st-btn-text);box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .2s ease}
.pu-video .vs-btn svg{margin-left:3px}
.pu-video .vs-play:hover .vs-btn{transform:scale(1.08)}
.pu-video .vs-play:focus-visible{outline:4px solid var(--st-brand);outline-offset:-4px}
.pu-video .vs-embed{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.pu-video.is-playing .vs-poster,.pu-video.is-playing .vs-play{display:none}
.pu-html-wrap{width:100%;min-width:0}
.pu-html{min-width:0;color:var(--st-text);font-size:15px;line-height:1.6}
.pu-html iframe,.pu-html img,.pu-html video{max-width:100%}
.pu-track{display:flex;height:100%;margin:0;padding:0;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pu-track::-webkit-scrollbar{display:none}
.pu-slide{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:center}
.pu-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pu-slide-link{position:absolute;inset:0}
.pu-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 38px;background:linear-gradient(to top,rgba(8,10,20,.72),transparent);color:#fff;font-weight:700;font-size:15px;line-height:1.3;pointer-events:none}
.pu-cap:empty{display:none}
.pu-nav{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:34px;height:34px;margin-top:-17px;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:#0f172a;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.3)}
.pu-nav:hover{background:#fff}
.pu-prev{left:10px}
.pu-next{right:10px}
.pu-dots{position:absolute;left:0;right:0;bottom:12px;z-index:2;display:flex;justify-content:center;gap:7px}
.pu-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:background .2s ease,transform .2s ease}
.pu-dot[aria-current=true]{background:#fff;transform:scale(1.25)}
.pu-car.is-single .pu-nav,.pu-car.is-single .pu-dots{display:none}
.pu-body{display:flex;flex-direction:column;align-items:flex-start;gap:12px;justify-content:safe center;padding:clamp(24px,4vw,40px)}
.pu:not([data-pos=center]) .pu-body{padding:20px 22px 22px;gap:10px}
.pu-h{font-size:clamp(24px,2vw + 14px,34px)}
.pu:not([data-pos=center]) .pu-h{font-size:clamp(20px,1vw + 14px,26px)}
.pu-lead{color:var(--st-muted);font-size:16px}
.pu:not([data-pos=center]) .pu-lead{font-size:14.5px}
.pu-form{width:100%}
.pu-row{display:flex;flex-direction:column;gap:10px}
.pu-input{width:100%;min-height:50px;padding:0 16px;border:1.5px solid color-mix(in srgb,var(--st-text) 18%,transparent);border-radius:calc(var(--st-radius) * .7px);background:var(--st-bg);color:var(--st-text);font:500 16px/1 var(--st-font-body);outline:none}
.pu-input:focus{border-color:var(--st-brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--st-brand) 18%,transparent)}
.pu-btn{width:100%}
.pu-ctas{display:flex;flex-wrap:wrap;gap:10px;width:100%}
.pu-ctas .pu-cta{flex:1 1 auto}
.pu-note{margin-top:8px;font-size:13px;color:var(--st-muted)}
.pu-note:empty,.pu-ok:empty,.pu-err:empty{display:none}
.pu-ok{padding:12px 14px;border-radius:calc(var(--st-radius) * .6px);background:color-mix(in srgb,#16a34a 14%,transparent);color:var(--st-text);font-weight:600}
.pu-err{margin-top:8px;color:#b91c1c;font-size:14px;font-weight:600}
.pu-no{align-self:center;padding:6px 10px;border:0;background:none;color:var(--st-muted);font:600 14px/1 var(--st-font-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pu-no:hover{color:var(--st-text)}
.pu-no:has(span:empty){display:none}
.pu-x{position:absolute;top:12px;right:12px;z-index:3;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:color-mix(in srgb,var(--st-bg) 88%,transparent);color:var(--st-text);cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.18);transition:background .2s ease,transform .2s ease}
.pu-x:hover{background:var(--st-bg);transform:scale(1.06)}
.pu-x:focus-visible,.pu-no:focus-visible,.pu-input:focus-visible,.pu-nav:focus-visible,.pu-dot:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 55%,transparent);outline-offset:2px}
.pu.is-preview .pu-backdrop{display:none}
.pu.is-preview .pu-dialog{position:relative;inset:auto;transform:none;margin:0 auto;opacity:1;max-height:none}
@media (max-width:640px){
.pu[data-pos=center] .pu-dialog,.pu[data-pos=center][data-layout=right] .pu-dialog{grid-template-columns:1fr}
.pu[data-pos=center][data-layout=right] .pu-media{order:0}
.pu-media{min-height:150px;max-height:220px}
.pu:not([data-pos=center]) .pu-dialog{left:12px;right:12px;width:auto}
.pu[data-pos=bottom-center] .pu-dialog,.pu[data-pos=bottom-center].is-open .pu-dialog{left:12px;transform:none}
.pu[data-pos^=bottom] .pu-dialog{bottom:12px}
.pu[data-pos^=top] .pu-dialog{top:12px}
.pu-body{padding:22px}
}
@media print{.pu{display:none}}
/* Floating Social Share Bar */
.st-floating-social-share{overflow:visible;container-type:normal;height:0;min-height:0;background:transparent}
.ss{--ss-base:44px;--ss-size:var(--ss-base);--ss-r:min(calc(var(--st-radius) * 1px),14px);--ss-nudge:12px;position:fixed;z-index:900;top:var(--ss-top,50%);display:grid;pointer-events:none;font-family:var(--st-font-body)}
.ss[data-size=compact]{--ss-base:38px}
.ss[data-size=large]{--ss-base:52px}
.ss[data-side=left]{left:0}
.ss[data-side=right]{right:0;--ss-nudge:-12px}
.ss[data-align=center]{top:0;bottom:0;height:max-content;margin:auto 0}
.ss-panel,.ss-tab{grid-area:1/1;pointer-events:auto}
.ss-panel{transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility 0s}
.ss-list{list-style:none;display:flex;flex-direction:column;flex-wrap:wrap;align-items:stretch;align-content:flex-start;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);filter:drop-shadow(0 10px 18px rgba(15,23,42,.22))}
.ss[data-align=custom] .ss-list{max-height:calc(100vh - var(--ss-top) - 12px);max-height:calc(100dvh - var(--ss-top) - 12px)}
.ss-item[hidden]{display:none}
.ss-btn{position:relative;flex:none;display:grid;place-items:center;width:var(--ss-size);height:var(--ss-size);border:0;background:var(--c,var(--st-brand));color:#fff;cursor:pointer;text-decoration:none;font:inherit;transition:width .25s cubic-bezier(.2,.8,.2,1),padding .25s cubic-bezier(.2,.8,.2,1),transform .25s cubic-bezier(.2,.8,.2,1),filter .25s ease,background .25s ease,color .25s ease,border-radius .25s ease}
.ss-item{display:flex;width:var(--ss-size)}
.ss-btn:hover,.ss-btn:focus-visible{filter:brightness(1.1)}
.ss:not([data-shape=attached]) .ss-btn:hover,.ss:not([data-shape=attached]) .ss-btn:focus-visible{transform:translateX(var(--ss-nudge))}
.ss[data-shape=attached] .ss-btn:hover,.ss[data-shape=attached] .ss-btn:focus-visible{width:calc(var(--ss-size) + 12px)}
.ss[data-side=left] .ss-item{justify-content:flex-start}
.ss[data-side=right] .ss-item{justify-content:flex-end}
.ss[data-side=left] .ss-btn:hover,.ss[data-side=left] .ss-btn:focus-visible{border-top-right-radius:var(--ss-r);border-bottom-right-radius:var(--ss-r)}
.ss[data-side=right] .ss-btn:hover,.ss[data-side=right] .ss-btn:focus-visible{border-top-left-radius:var(--ss-r);border-bottom-left-radius:var(--ss-r)}
.ss[data-shape=attached] .ss-list{gap:0}
.ss-btn:focus-visible,.ss-hide:focus-visible,.ss-tab:focus-visible{outline:3px solid var(--st-text);outline-offset:2px;z-index:2}
.ss-ic{display:block;width:calc(var(--ss-size) * .5);height:calc(var(--ss-size) * .5)}
.ss-ic--done{position:absolute;opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .2s ease}
.ss-btn.is-done .ss-ic:not(.ss-ic--done){opacity:0}
.ss-btn.is-done .ss-ic--done{opacity:1;transform:none}
.ss[data-look=theme] .ss-btn{background:var(--st-brand);color:var(--st-btn-text)}
.ss[data-look=subtle] .ss-btn{background:var(--st-bg);color:var(--st-text)}
.ss[data-look=subtle] .ss-btn:hover,.ss[data-look=subtle] .ss-btn:focus-visible{background:var(--c,var(--st-brand));color:#fff;filter:none}
.ss[data-shape=attached][data-side=left] .ss-item:first-child .ss-btn{border-top-right-radius:var(--ss-r)}
.ss[data-shape=attached][data-side=left] .ss-item:last-child .ss-btn{border-bottom-right-radius:var(--ss-r)}
.ss[data-shape=attached][data-side=right] .ss-item:first-child .ss-btn{border-top-left-radius:var(--ss-r)}
.ss[data-shape=attached][data-side=right] .ss-item:last-child .ss-btn{border-bottom-left-radius:var(--ss-r)}
.ss:not([data-shape=attached]) .ss-list{gap:8px;margin:0 8px}
.ss[data-shape=rounded] .ss-btn{border-radius:var(--ss-r)}
.ss[data-shape=circle] .ss-btn{border-radius:50%}
.ss[data-shape=circle] .ss-btn,.ss[data-shape=rounded] .ss-btn{box-shadow:none}
.ss-item--hide{display:block}
.ss-hide{display:grid;place-items:center;width:100%;height:calc(var(--ss-size) - 12px);border:0;background:#d4d7dd;color:#475569;cursor:pointer;transition:filter .2s ease}
.ss-hide:hover{filter:brightness(.94)}
.ss-hide .ss-ic{width:20px;height:20px}
.ss[data-side=right] .ss-ic--hide{transform:scaleX(-1)}
.ss[data-shape=rounded] .ss-hide{border-radius:var(--ss-r)}
.ss[data-shape=circle] .ss-hide{border-radius:999px}
.ss-tip{position:absolute;top:50%;display:block;padding:7px 11px;border-radius:8px;background:var(--st-text);color:var(--st-bg);font:600 13px/1 var(--st-font-body);white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-50%);transition:opacity .15s ease,visibility 0s .15s}
.ss[data-side=left] .ss-tip{left:calc(100% + 10px)}
.ss[data-side=right] .ss-tip{right:calc(100% + 10px)}
.ss-btn.is-done .ss-tip{opacity:1;visibility:visible;transition:opacity .15s ease}
@media (hover:hover){.ss[data-tips=on] .ss-btn:hover .ss-tip,.ss[data-tips=on] .ss-btn:focus-visible .ss-tip{opacity:1;visibility:visible;transition:opacity .15s ease}}
.ss-tab{display:flex;flex-direction:column;align-items:center;gap:8px;align-self:center;width:var(--ss-size);padding:14px 0;border:0;background:var(--st-brand);color:var(--st-btn-text);cursor:pointer;font:700 12.5px/1 var(--st-font-body);letter-spacing:.08em;text-transform:uppercase;filter:drop-shadow(0 10px 18px rgba(15,23,42,.22));opacity:0;visibility:hidden;pointer-events:none;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility 0s .4s}
.ss-tab .ss-ic{width:calc(var(--ss-size) * .46);height:calc(var(--ss-size) * .46)}
.ss-tab-text{writing-mode:vertical-rl}
.ss-tab-text:empty{display:none}
.ss[data-side=left] .ss-tab{justify-self:start;border-radius:0 var(--ss-r) var(--ss-r) 0;transform:translateX(-100%)}
.ss[data-side=right] .ss-tab{justify-self:end;border-radius:var(--ss-r) 0 0 var(--ss-r);transform:translateX(100%)}
.ss.is-collapsed .ss-tab{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:.12s,.12s,0s}
.ss.is-collapsed .ss-panel{opacity:0;visibility:hidden;pointer-events:none;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility 0s .4s}
.ss[data-side=left].is-collapsed .ss-panel{transform:translateX(-110%)}
.ss[data-side=right].is-collapsed .ss-panel{transform:translateX(110%)}
.ss-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:1024px){.ss{--ss-size:min(var(--ss-base),42px)}}
@media (max-width:640px){
.ss[data-mobile=side]{--ss-size:min(var(--ss-base),40px)}
.ss[data-mobile=side] .ss-tip{display:none}
.ss[data-mobile=bar]{top:auto!important;bottom:0;left:0;right:0;display:block;height:0;margin:0;transform:none!important}
.ss[data-mobile=bar] .ss-panel{position:absolute;left:0;right:0;bottom:0;background:var(--st-bg);box-shadow:0 -6px 20px rgba(15,23,42,.18);padding-bottom:env(safe-area-inset-bottom)}
.ss[data-mobile=bar] .ss-list{flex-direction:row;margin:0;gap:0;filter:none}
.ss[data-mobile=bar] .ss-item{flex:1 1 0;min-width:0;width:auto}
.ss[data-mobile=bar] .ss-btn,.ss[data-mobile=bar] .ss-btn:hover,.ss[data-mobile=bar] .ss-btn:focus-visible{width:100%;height:48px;border-radius:0!important;transform:none}
.ss[data-mobile=bar] .ss-item--hide{flex:0 0 48px}
.ss[data-mobile=bar] .ss-hide{height:48px;border-radius:0}
.ss[data-mobile=bar] .ss-ic--hide{transform:rotate(-90deg)!important}
.ss[data-mobile=bar] .ss-tip{display:none}
.ss[data-mobile=bar] .ss-tab{position:absolute;align-self:auto;bottom:calc(16px + env(safe-area-inset-bottom));flex-direction:row;width:auto;height:44px;padding:0 16px;gap:8px;border-radius:999px;transform:translateY(24px)}
.ss[data-mobile=bar][data-side=left] .ss-tab{left:12px;border-radius:999px}
.ss[data-mobile=bar][data-side=right] .ss-tab{right:12px;border-radius:999px}
.ss[data-mobile=bar] .ss-tab-text{writing-mode:horizontal-tb}
.ss[data-mobile=bar].is-collapsed .ss-tab{transform:none}
.ss[data-mobile=bar][data-side=left].is-collapsed .ss-panel,.ss[data-mobile=bar][data-side=right].is-collapsed .ss-panel{transform:translateY(110%)}
}
@media print{.ss{display:none}}
/* Footer With Newsletter */
.st-footer-newsletter{padding:clamp(56px,7cqi,96px) 0 28px}
.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}
.fn-top{display:grid;grid-template-columns:minmax(260px,1.2fr) 2fr;gap:clamp(36px,6cqi,96px)}
.fn-news{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.fn-news .st-brand{margin-bottom:10px}
.fn-title{font-size:21px;letter-spacing:-.01em}
.fn-text{color:var(--st-muted);font-size:15.5px}
.fn-text:empty{display:none}
.fn-form{display:flex;gap:8px;width:100%;max-width:420px;margin-top:4px}
.fn-input{flex:1;min-width:0;min-height:48px;padding:0 16px;border-radius:calc(var(--st-radius) * 1px);border:1px solid color-mix(in srgb,var(--st-text) 16%,transparent);background:var(--st-surface);color:var(--st-text);font:500 15px/1 var(--st-font-body);outline:none}
.fn-input:focus{border-color:var(--st-brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--st-brand) 25%,transparent)}
.fn-input::placeholder{color:var(--st-muted)}
.fn-form .st-btn{min-height:48px;padding:0 20px}
.fn-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:28px}
.fn-col-title{font:700 14px/1.2 var(--st-font-body);letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.fn-links{list-style:none;display:flex;flex-direction:column;gap:11px}
.fn-links a,.fn-legal a{color:var(--st-muted);font-size:15px;text-decoration:none}
.fn-links a:hover,.fn-legal a:hover{color:var(--st-brand)}
.fn-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:14px 28px;margin-top:clamp(40px,5cqi,64px);padding-top:24px;border-top:1px solid color-mix(in srgb,var(--st-text) 10%,transparent)}
.fn-copy{color:var(--st-muted);font-size:14px;margin-left:auto}
.fn-legal{list-style:none;display:flex;gap:20px}
.fn-legal a{font-size:14px}
@container st (max-width:820px){.fn-top{grid-template-columns:1fr}}
@container st (max-width:520px){.fn-form{flex-direction:column}.fn-cols{grid-template-columns:1fr 1fr}.fn-copy{margin-left:0}}
/* 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 () {
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 () {
var G = window.gsap, reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var canPin = !!(G && window.ScrollTrigger && !reduce && !(window.ST_STILL && !window.ST_SCROLL_FX));
if (canPin) G.registerPlugin(ScrollTrigger);
document.querySelectorAll('.st [data-tlh]').forEach(function (root) {
if (root.getAttribute('data-tlh-ready')) return;
root.setAttribute('data-tlh-ready', '1');
var track = root.querySelector('[data-tlh-track]');
var list = root.querySelector('.tlh-list');
var prev = root.querySelector('[data-tlh-prev]'), next = root.querySelector('[data-tlh-next]');
if (!track || !list) return;
var sec = root.closest('.st');
var items = Array.prototype.slice.call(list.children).filter(function (c) { return c.classList.contains('tlh-item'); });
var active = -1, pinned = false, smooth = reduce ? 'auto' : 'smooth';
var mid = function (it) { return it.offsetLeft + it.offsetWidth / 2; };
function mark(i) {
active = i;
items.forEach(function (it, k) {
it.classList.toggle('is-active', k === i);
var d = it.querySelector('[data-tlh-dot]');
if (d) { if (k === i) d.setAttribute('aria-current', 'true'); else d.removeAttribute('aria-current'); }
});
}
function centre(i, behavior) {
var it = items[i]; if (!it) return;
track.scrollTo({ left: Math.max(0, mid(it) - track.clientWidth / 2), behavior: behavior || smooth });
}
function setActive(i, scroll) {
if (!items[i]) return;
mark(i);
list.style.setProperty('--tl-fill', mid(items[i]) + 'px');
if (scroll) centre(i);
}
function update() {
if (pinned) return;
var max = track.scrollWidth - track.clientWidth;
if (prev) prev.disabled = track.scrollLeft <= 2;
if (next) next.disabled = track.scrollLeft >= max - 2;
root.classList.toggle('is-fit', max <= 2);
if (active > -1) list.style.setProperty('--tl-fill', mid(items[active]) + 'px');
}
var ticking = false;
track.addEventListener('scroll', function () { if (ticking) return; ticking = true; requestAnimationFrame(function () { ticking = false; update(); }); }, { passive: true });
if (window.ResizeObserver) new ResizeObserver(update).observe(track); else window.addEventListener('resize', update);
var step = function () { var w = items[0] ? items[0].offsetWidth : 240; return Math.max(w, Math.floor(track.clientWidth * 0.8 / w) * w); };
if (prev) prev.addEventListener('click', function () { track.scrollBy({ left: -step(), behavior: smooth }); });
if (next) next.addEventListener('click', function () { track.scrollBy({ left: step(), behavior: smooth }); });
var trigger = null;
items.forEach(function (it, k) {
var d = it.querySelector('[data-tlh-dot]');
if (!d) return;
d.addEventListener('click', function () {
if (root.getAttribute('data-moved')) return;
if (pinned && trigger) {
var p = items.length > 1 ? k / (items.length - 1) : 0;
window.scrollTo({ top: trigger.start + p * (trigger.end - trigger.start), behavior: smooth });
} else setActive(k, true);
});
});
track.addEventListener('keydown', function (e) {
if (pinned) return;
var w = items[0] ? items[0].offsetWidth : 240;
if (e.key === 'ArrowRight') { e.preventDefault(); track.scrollBy({ left: w, behavior: smooth }); }
else if (e.key === 'ArrowLeft') { e.preventDefault(); track.scrollBy({ left: -w, behavior: smooth }); }
else if (e.key === 'Home') { e.preventDefault(); track.scrollTo({ left: 0, behavior: smooth }); }
else if (e.key === 'End') { e.preventDefault(); track.scrollTo({ left: track.scrollWidth, behavior: smooth }); }
});
var down = false, sx = 0, sl = 0, moved = 0;
track.addEventListener('pointerdown', function (e) {
if (pinned || e.pointerType !== 'mouse' || e.button !== 0) return;
down = true; moved = 0; sx = e.clientX; sl = track.scrollLeft; root.removeAttribute('data-moved');
});
window.addEventListener('pointermove', function (e) {
if (!down) return;
var dx = e.clientX - sx; moved = Math.max(moved, Math.abs(dx));
if (moved > 5) { track.classList.add('is-dragging'); track.scrollLeft = sl - dx; }
});
window.addEventListener('pointerup', function () {
if (!down) return;
down = false; track.classList.remove('is-dragging');
if (moved > 5) { root.setAttribute('data-moved', '1'); setTimeout(function () { root.removeAttribute('data-moved'); }, 0); }
});
var start = parseInt(root.getAttribute('data-start'), 10);
setActive(isNaN(start) ? 0 : Math.min(items.length - 1, Math.max(0, start - 1)), false);
update();
if (canPin && root.getAttribute('data-mode') !== 'free' && sec) {
G.matchMedia().add('(min-width: 768px)', function () {
var dist = function () { return Math.max(0, list.scrollWidth - track.clientWidth); };
if (dist() < 24) return;
// A sticky header stays on screen, so the section pins just below it instead of under it
var head = function () { var h = 0; document.querySelectorAll('.st').forEach(function (n) { if (n !== sec && n.querySelector('[data-sticky-flag]')) h = Math.max(h, n.offsetHeight); }); return h; };
pinned = true;
sec.classList.add('is-tl-pinned');
track.scrollLeft = 0;
var first = function () { return mid(items[0]); }, last = function () { return mid(items[items.length - 1]); };
var tw = G.timeline({
scrollTrigger: {
trigger: sec, start: function () { return 'top ' + head(); }, end: function () { return '+=' + Math.round(Math.max(dist() * 1.1, items.length * 170)); },
pin: true, scrub: 0.6, anticipatePin: 1, invalidateOnRefresh: true,
onUpdate: function (self) {
trigger = self;
var p = Math.min(1, self.progress / 0.91);
var f = first() + (last() - first()) * p;
list.style.setProperty('--tl-fill', f + 'px');
var idx = 0;
for (var k = 0; k < items.length; k++) { if (mid(items[k]) <= f + 2) idx = k; }
if (idx !== active) mark(idx);
}
}
});
// The row travels for 91% of the scroll, then rests on the last event for the last 9%
tw.to(list, { x: function () { return -dist(); }, ease: 'none', duration: 0.91 }).to({}, { duration: 0.09 });
trigger = tw.scrollTrigger;
return function () {
pinned = false; trigger = null;
if (tw.scrollTrigger) tw.scrollTrigger.kill(); tw.kill();
G.set(list, { clearProps: 'transform' });
sec.classList.remove('is-tl-pinned');
setActive(active > -1 ? active : 0, false);
update();
};
});
}
});
})();
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var fine = window.matchMedia && window.matchMedia('(pointer: fine)').matches;
if (!G || reduce || !fine) return;
document.querySelectorAll('.st [data-spotlight]').forEach(function (el) {
el.addEventListener('pointermove', function (e) {
var r = el.getBoundingClientRect();
G.to(el, { '--mx': ((e.clientX - r.left) / r.width * 100) + '%', '--my': ((e.clientY - r.top) / r.height * 100) + '%', duration: 0.6, ease: 'power3.out', overwrite: 'auto' });
});
el.addEventListener('pointerleave', function () {
G.to(el, { '--mx': '50%', '--my': '50%', duration: 1, ease: 'power3.out', overwrite: 'auto' });
});
});
})();
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var fine = window.matchMedia && window.matchMedia('(pointer: fine)').matches;
if (!G || reduce || !fine) return;
document.querySelectorAll('.st [data-magnetic]').forEach(function (el) {
var x = G.quickTo(el, 'x', { duration: 0.5, ease: 'power3.out' });
var y = G.quickTo(el, 'y', { duration: 0.5, ease: 'power3.out' });
el.addEventListener('pointermove', function (e) {
var r = el.getBoundingClientRect();
x((e.clientX - r.left - r.width / 2) * 0.3);
y((e.clientY - r.top - r.height / 2) * 0.4);
});
el.addEventListener('pointerleave', function () { x(0); y(0); });
});
})();
(function () {
var inline = window.ST_STILL || window.ST_PREVIEW || window.ST_POPUP_INLINE;
document.querySelectorAll('.st [data-pu]').forEach(function (root) {
var dlg = root.querySelector('.pu-dialog');
var back = root.querySelector('.pu-backdrop');
if (!dlg || root.getAttribute('data-pu-ready')) return;
root.setAttribute('data-pu-ready', '1');
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
root.querySelectorAll('[data-pu-carousel]').forEach(function (car) {
var track = car.querySelector('.pu-track');
if (!track) return;
var slides = track.children, n = slides.length;
if (n < 2) { car.classList.add('is-single'); return; }
var mk = function (cls, label, svg) { var b = document.createElement('button'); b.type = 'button'; b.className = cls; b.setAttribute('aria-label', label); if (svg) b.innerHTML = svg; return b; };
var arrow = function (d) { return '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="' + d + '"/></svg>'; };
var prev = mk('pu-nav pu-prev', 'Previous slide', arrow('m15 18-6-6 6-6'));
var next = mk('pu-nav pu-next', 'Next slide', arrow('m9 18 6-6-6-6'));
var dots = document.createElement('div'); dots.className = 'pu-dots';
var dotEls = [];
for (var i = 0; i < n; i++) { (function (k) { var d = mk('pu-dot', 'Go to slide ' + (k + 1)); d.addEventListener('click', function () { go(k); stop(); }); dots.appendChild(d); dotEls.push(d); })(i); }
car.appendChild(prev); car.appendChild(next); car.appendChild(dots);
var idx = function () { return Math.round(track.scrollLeft / Math.max(1, track.clientWidth)); };
var mark = function () { var c = idx(); dotEls.forEach(function (d, k) { d.setAttribute('aria-current', k === c ? 'true' : 'false'); }); };
var go = function (k) { k = (k + n) % n; track.scrollTo({ left: k * track.clientWidth, behavior: reduce ? 'auto' : 'smooth' }); };
var ticking = false;
track.addEventListener('scroll', function () { if (ticking) return; ticking = true; requestAnimationFrame(function () { ticking = false; mark(); }); }, { passive: true });
prev.addEventListener('click', function () { go(idx() - 1); stop(); });
next.addEventListener('click', function () { go(idx() + 1); stop(); });
mark();
var secs = parseFloat(root.getAttribute('data-autoplay')) || 0;
var timer = 0, paused = false;
var stop = function () { clearInterval(timer); timer = 0; };
if (secs > 0 && !reduce) {
car.addEventListener('mouseenter', function () { paused = true; });
car.addEventListener('mouseleave', function () { paused = false; });
car.addEventListener('focusin', function () { paused = true; });
car.addEventListener('focusout', function () { paused = false; });
timer = setInterval(function () { var d = root.querySelector('.pu-dialog'); if (!paused && d && !d.hidden && !document.hidden) go(idx() + 1); }, secs * 1000);
}
});
var btnMode = !!window.ST_POPUP_BUTTON; // Website Builder preview: a floating button opens the popup instead of showing it inline
if (inline && !btnMode) {
root.classList.add('is-preview');
dlg.hidden = false;
if (back) back.hidden = true;
root.querySelectorAll('[data-pu-close]').forEach(function (b) { b.addEventListener('click', function (e) { e.preventDefault(); }); });
return;
}
var trigger = root.getAttribute('data-trigger') || 'delay';
var delay = Math.max(0, parseFloat(root.getAttribute('data-delay')) || 0);
var pct = Math.min(100, Math.max(1, parseFloat(root.getAttribute('data-scroll')) || 50));
var days = parseFloat(root.getAttribute('data-days')) || 0;
var KEY = 'pu-' + (root.getAttribute('data-pu-id') || 'x');
try {
var seen = parseInt(localStorage.getItem(KEY), 10);
if (!btnMode && days > 0 && seen && Date.now() - seen < days * 86400000) return;
} catch (e) {}
var modal = (root.getAttribute('data-pos') || 'center') === 'center'; // only the centre popup dims the page and traps focus
dlg.setAttribute('aria-modal', modal ? 'true' : 'false');
var shown = false, last = null, undo = [], quiet = btnMode; // in the builder preview the popup never pulls focus out of the side panel
var setOpenFlag = function (v) { if (!btnMode) return; try { if (v) window.parent.__wbPuOpen = KEY; else if (window.parent.__wbPuOpen === KEY) window.parent.__wbPuOpen = ''; } catch (e) {} };
var focusables = function () { return Array.prototype.filter.call(dlg.querySelectorAll('a[href],button:not([disabled]),input,select,textarea,[tabindex]:not([tabindex="-1"])'), function (el) { return el.offsetParent !== null; }); };
var onKey = function (e) {
if (e.key === 'Escape') { e.preventDefault(); hide(); return; }
if (e.key !== 'Tab' || !modal) return;
var f = focusables();
if (!f.length) return;
var first = f[0], end = f[f.length - 1];
if (e.shiftKey && document.activeElement === first) { e.preventDefault(); end.focus(); }
else if (!e.shiftKey && document.activeElement === end) { e.preventDefault(); first.focus(); }
};
function show() {
if (shown) return;
shown = true;
undo.forEach(function (fn) { fn(); });
last = document.activeElement;
dlg.hidden = false;
if (back) back.hidden = false;
void dlg.offsetWidth;
root.classList.add('is-open');
setOpenFlag(true);
if (modal && !quiet) {
var f = focusables();
var target = dlg.querySelector('input') || f[1] || f[0] || dlg;
try { target.focus({ preventScroll: true }); } catch (e) {}
}
document.addEventListener('keydown', onKey);
try { if (days > 0 && !btnMode) localStorage.setItem(KEY, String(Date.now())); } catch (e) {}
}
function hide() {
setOpenFlag(false);
root.classList.remove('is-open');
root.querySelectorAll('.vs-embed').forEach(function (v) { var box = v.parentNode; v.remove(); if (box) box.classList.remove('is-playing'); });
document.removeEventListener('keydown', onKey);
setTimeout(function () { dlg.hidden = true; if (back) back.hidden = true; }, 320);
if (last && last.focus) { try { last.focus({ preventScroll: true }); } catch (e) {} }
}
root.querySelectorAll('[data-pu-close]').forEach(function (b) { b.addEventListener('click', hide); });
var on = function (target, ev, fn, opts) { target.addEventListener(ev, fn, opts); undo.push(function () { target.removeEventListener(ev, fn, opts); }); };
var started = Date.now();
if (btnMode) {
// The popup follows its own trigger (delay, exit intent, scroll) exactly like the published page; a floating
// button also opens and closes it on demand, and it stays open across preview reloads while it is being edited
var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'wb-pu-btn';
btn.textContent = 'Popup preview';
btn.setAttribute('aria-label', 'Open the popup');
btn.style.cssText = 'position:fixed;left:16px;bottom:' + (16 + document.querySelectorAll('.wb-pu-btn').length * 48) + 'px;z-index:999;padding:0 16px;height:38px;border:0;border-radius:999px;background:#4f46e5;color:#fff;font:700 13px/1 system-ui,sans-serif;box-shadow:0 8px 22px rgba(15,23,42,.35);cursor:pointer';
btn.addEventListener('click', function () { if (root.classList.contains('is-open')) hide(); else { shown = false; show(); } });
document.body.appendChild(btn);
try { if (window.parent.__wbPuOpen === KEY) show(); } catch (e) {}
}
if (trigger === 'scroll') {
var check = function () {
var h = document.documentElement.scrollHeight - window.innerHeight;
var p = h > 0 ? (window.scrollY / h) * 100 : 100;
if (p >= pct) show();
};
on(window, 'scroll', check, { passive: true });
} else if (trigger === 'exit' && window.matchMedia && window.matchMedia('(pointer: fine)').matches) {
on(document, 'mouseout', function (e) { if (!e.relatedTarget && e.clientY <= 0 && Date.now() - started > 2000) show(); });
} else {
var timer = setTimeout(show, Math.max(delay, trigger === 'exit' ? 10 : 0) * 1000);
undo.push(function () { clearTimeout(timer); });
}
});
})();
(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 editing = window.ST_STILL || window.ST_PREVIEW;
function embed(url) {
var m;
// Character classes instead of backslashes: this code lives inside a template literal
if ((m = url.match(/(?:youtube[.]com[/](?:watch[?](?:.*&)?v=|embed[/]|shorts[/])|youtu[.]be[/])([A-Za-z0-9_-]{11})/))) return { type: 'iframe', src: 'https://www.youtube-nocookie.com/embed/' + m[1] + '?autoplay=1&rel=0' };
if ((m = url.match(/vimeo[.]com[/](?:video[/])?([0-9]+)/))) return { type: 'iframe', src: 'https://player.vimeo.com/video/' + m[1] + '?autoplay=1&dnt=1' };
if (/[.](mp4|webm|ogg)([?].*)?$/i.test(url)) return { type: 'video', src: url };
return null;
}
document.querySelectorAll('.st [data-video-box]').forEach(function (box) {
var btn = box.querySelector('[data-video]');
if (!btn) return;
function start(e) {
var info = embed(btn.getAttribute('data-video') || '');
if (!info) return;
e.preventDefault();
// In the editor the click also selects the section, so the editor still gets it
if (!editing) e.stopPropagation();
var title = box.getAttribute('data-title') || 'Video';
var el;
if (info.type === 'iframe') {
el = document.createElement('iframe');
el.src = info.src;
el.title = title;
el.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen';
el.allowFullscreen = true;
el.referrerPolicy = 'strict-origin-when-cross-origin';
} else {
el = document.createElement('video');
el.src = info.src;
el.controls = true;
el.autoplay = true;
el.setAttribute('playsinline', '');
el.setAttribute('aria-label', title);
}
el.className = 'vs-embed';
box.appendChild(el);
box.classList.add('is-playing');
if (el.focus) el.focus();
}
btn.addEventListener('click', start);
});
})();
(function () {
var editing = window.ST_STILL || window.ST_PREVIEW;
var enc = encodeURIComponent;
function meta(sel) { var m = document.querySelector(sel); return m ? (m.getAttribute('content') || m.getAttribute('href') || '') : ''; }
function absolute(u) { try { return new URL(u, location.href).href; } catch (e) { return u; } }
document.querySelectorAll('.st [data-ss]').forEach(function (root) {
if (root.getAttribute('data-ss-ready')) return;
root.setAttribute('data-ss-ready', '1');
function vars() {
var url = root.getAttribute('data-url') || location.href.split('#')[0];
var title = root.getAttribute('data-title') || meta('meta[property="og:title"]') || document.title || '';
return {
url: url, title: title, text: (title ? title + ' ' : '') + url,
image: root.getAttribute('data-pin-image') || meta('meta[property="og:image"]'),
via: root.getAttribute('data-via') || '', tags: root.getAttribute('data-tags') || ''
};
}
function fill(tpl, v) {
var out = tpl.replace(/[{]([a-z]+)[}]/g, function (m, k) { return enc(v[k] || ''); });
var i = out.indexOf('?');
if (i < 1) return out;
var q = out.slice(i + 1).split('&').filter(function (p) { var e = p.indexOf('='); return e < 0 || p.slice(e + 1) !== ''; }).join('&');
return q ? out.slice(0, i) + '?' + q : out.slice(0, i);
}
function update() {
var v = vars();
root.querySelectorAll('a[data-share]').forEach(function (a) { a.href = fill(a.getAttribute('data-share'), v); });
}
update();
['pointerenter', 'focusin', 'touchstart'].forEach(function (ev) { root.addEventListener(ev, update, { passive: true }); });
var live = root.querySelector('.ss-live');
function flash(btn, msg) {
var tip = btn.querySelector('.ss-tip');
if (live) live.textContent = msg;
if (tip && !btn.classList.contains('is-done')) tip.setAttribute('data-was', tip.textContent);
btn.classList.add('is-done');
if (tip) tip.textContent = msg;
clearTimeout(btn._ssTimer);
btn._ssTimer = setTimeout(function () {
btn.classList.remove('is-done');
if (tip) tip.textContent = tip.getAttribute('data-was') || '';
if (live) live.textContent = '';
}, 2000);
}
root.querySelectorAll('[data-net="copy"]').forEach(function (btn) {
btn.addEventListener('click', function () {
var u = vars().url;
var msg = root.getAttribute('data-copied') || 'Link copied';
function fallback() {
var t = document.createElement('textarea');
t.value = u; t.setAttribute('readonly', ''); t.style.cssText = 'position:fixed;top:0;left:0;opacity:0';
document.body.appendChild(t); t.select();
try { if (document.execCommand('copy')) flash(btn, msg); } catch (e) {}
t.remove();
}
if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(u).then(function () { flash(btn, msg); }, fallback);
else fallback();
});
});
var hide = root.querySelector('[data-ss-hide]'), tab = root.querySelector('[data-ss-show]');
if (!hide || !tab) return;
var KEY = 'ss-collapsed';
function store(v) { if (editing) return; try { sessionStorage.setItem(KEY, v ? '1' : '0'); } catch (e) {} }
function read() { if (editing) return null; try { return sessionStorage.getItem(KEY); } catch (e) { return null; } }
function set(collapsed, focus) {
root.classList.toggle('is-collapsed', collapsed);
hide.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
tab.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
if (focus) (collapsed ? tab : root.querySelector('.ss-btn')).focus({ preventScroll: true });
}
var saved = read();
set(saved === null ? root.getAttribute('data-start') === 'collapsed' : saved === '1', false);
hide.addEventListener('click', function () { set(true, true); store(true); });
tab.addEventListener('click', function () { set(false, true); store(false); });
});
})();
(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 Nonprofit & Charity 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 nonprofit & charity website for “GreenRoots” as clean HTML, CSS and a little JavaScript.
Page structure, top to bottom:
1. Simple Sticky Navbar
2. Image Background Hero: “Every tree is a fresh start”
3. Animated Stats Counters: “What your support has done”
4. How It Works Steps: “From donation to forest”
5. Horizontal Timeline: “Ten years of planting forests”
6. Icon Grid Features: “Programmes that last”
7. Testimonial Wall: “Voices from the field”
8. About Us & Our Story: “Forests grow when people lead”
9. Team Grid: “The people behind the trees”
10. Gradient CTA Banner: “Plant trees today”
11. Popup & Promo Modal
12. Floating Social Share Bar
13. Footer With Newsletter
14. Back to Top Button
15. Accessibility Toolbar Widget
Look and feel:
- Colours as CSS custom properties: brand #15803d, page background #ffffff, cards #f0f8f2, text #0f1f14, muted text #4b5f52. Corner radius 14px, content width 1200px.
- Headings in Merriweather, 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 community 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 “Nonprofit Website Template — Free Charity HTML Template”, a meta description of 150 to 160 characters, Open Graph tags and JSON-LD that suits a community 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:
- About (about.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
15 ready-made website sections assembled into one finished nonprofit & charity website page: Simple Sticky Navbar, Image Background Hero, Animated Stats Counters, How It Works Steps, Horizontal Timeline, Icon Grid Features, Testimonial Wall, About Us & Our Story, Team Grid, Gradient CTA Banner, Popup & Promo Modal, Floating Social Share Bar, Footer With Newsletter, 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 4-page website in the builder, sharing one navbar, footer and theme
A pinned horizontal timeline (GSAP ScrollTrigger) that slides along as you scroll, with a growing progress line
An About us section with a picture and badge, the story, the founder, key facts and values, plus Organization 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 Charity Website That Earns Donations: Mission, Impact, Transparency and a Clear Way to Give
Donors give when they believe in the mission, can see the impact and trust how the money is used. The hero states the mission over a hopeful landscape, impact counters show what has been achieved, and a step list explains exactly how a donation becomes help, which is the transparency that distinguishes a trusted charity from an unknown one.
Programmes explain what you do day to day, and stories from the people you support show the human side that statistics cannot. The team grid shows the people accountable for the work, a gradient donate banner makes giving unmistakable and a popup can promote a campaign. Newsletter signup in the footer keeps supporters in touch between appeals, and a floating share bar helps your supporters spread the word.
Use real numbers and a real story. It is the layout of the Nonprofit & Charity Website template; open it in the Website Builder to change copy and colours, link the donate buttons and export.
Interactive extras built in
Beyond the core sections, this template adds a pinned horizontal timeline of the charity's decade of planting, from the first nursery to millions of trees; an About us section with the charity's story, headline numbers and values; 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 (Horizontal Timeline, About Us & Our Story, 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 15 Sections Behind This Nonprofit & Charity 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 simple sticky bar with a Donate button that is always visible
- Image Background Herothe mission in one sentence over an image that conveys hope, with a clear Donate button
- Animated Stats Counterscounters for people helped, funds raised and years active, the impact a donor wants to see
- How It Works Stepsa step list showing how a donation becomes help, which builds the trust giving depends on
- Horizontal Timelinea pinned horizontal timeline of the charity's decade of planting, from the first nursery to millions of trees
- Icon Grid Featuresyour programmes, explained in the terms a supporter would use
- Testimonial Wallstories from the people you support, the human side that statistics cannot give
- About Us & Our Storyan About us section with the charity's story, headline numbers and values
- Team Gridthe people accountable for the work: trustees, staff and volunteers
- Gradient CTA Bannera donate banner that makes giving unmistakable after the story has been told
- Popup & Promo Modalan optional popup for a seasonal appeal or match-funding campaign
- Floating Social Share Bara floating share bar so supporters can spread the word
- Footer With Newslettera footer with newsletter signup and registered charity details
- 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 Nonprofit & Charity Website in the Website Builder. Everything is edited with forms in a side panel; no code is needed.
- 2Make the mission one clear sentenceRewrite the hero headline as who you help and what changes for them, and link the Donate button to your giving page or platform.
- 3Show the impact with real figuresEdit the counters to true numbers (people helped, meals served, funds raised) and add the period they cover, such as "in 2025".
- 4Explain exactly where the money goesRewrite the step list to show how a donation is used, for example "£20 provides a week of meals", and add your registered charity number in the footer.
- 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
Charities, community groups and fundraisers
Give a cause a clear, credible site that tells its story and takes donations.
A campaign or appeal page
Focus the page on a single appeal, using the counters as a fundraising target.
Learn counters and accessible CTAs
See how count-up numbers, reduced-motion handling and high-contrast buttons work together.
Got questions?
Frequently Asked Questions
The mission, the impact so far, how donations are used, programmes, stories, the people involved, charity registration details and an easy way to give.
Link the Donate buttons to your donation platform, such as JustGiving, Stripe, PayPal or GoFundMe; the page presents the cause and the platform handles payment.
Donors give more readily when they can picture the result. Specific examples build trust better than general claims.
It adds a pinned horizontal timeline, an About us section with the story, facts and values, 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 15 templates in the free Website Section Templates library: Simple Sticky Navbar, Image Background Hero, Animated Stats Counters, How It Works Steps, Horizontal Timeline, Icon Grid Features, Testimonial Wall, About Us & Our Story, Team Grid, Gradient CTA Banner, Popup & Promo Modal, Floating Social Share Bar, Footer With Newsletter, 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.