Related Snippets

23 in Landing Pages category

9–14 of 23

Nonprofit & Charity Website Template

Event & Conference Website Template

Coach & Consultant Website Template

Online Course Website Template

Local Service Business Website Template

Dental Clinic Website Template

Nonprofit & Charity Website HTML Template — Free Snippet

Nonprofit & Charity Website template · 11 website sections · Plain HTML, CSS & JS · Customise it in the Website Builder

CategoryLanding Pages

TagsGSAP Local Storage Clipboard API Touch Gestures Keyboard Navigation

What's included

Features

11 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, Icon Grid Features, Testimonial Wall, Team Grid, Gradient CTA Banner, Popup & Promo Modal, Floating Social Share Bar, Footer With Newsletter

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

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

Screenshot of the Nonprofit & Charity Website Template snippet rendered live

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.

Built from website section templates

The 11 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
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
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

Start using this template About the Nonprofit & Charity Website template All website section templates

Step by step

How to Use

1
Open 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.
2
Make 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.
3
Show 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".
4
Explain 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.
5
Export 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 is assembled from 11 templates in the free Website Section Templates library: Simple Sticky Navbar, Image Background Hero, Animated Stats Counters, How It Works Steps, Icon Grid Features, Testimonial Wall, Team Grid, Gradient CTA Banner, Popup & Promo Modal, Floating Social Share Bar, Footer With Newsletter. 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.

Start using this template About the Nonprofit & Charity Website template All website section templates

Source Code

Requires

JS · gsap.min.js JS · ScrollTrigger.min.js JS · SplitText.min.js


    <section class="st st-navbar-simple" data-uid="smvnkxdc3eiv8">
      <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="smvnkxdc4qrmh">
      <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="smvnkxdc4n38u">
      <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="smvnkxdc4oxkx">
      <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="features" class="st st-features-icon-grid" data-uid="smvnkxdc4vnts">
      <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="smvnkxdc4teo2">
      <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="team" class="st st-team-grid" data-uid="smvnkxdc4kf9t">
      <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 &amp; 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 &amp; 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="smvnkxdc4uh4g">
      <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="smvnkxdc4cxzs">
      <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="smvnkxdc4nobt">
      <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}&amp;text={title}&amp;via={via}&amp;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}&amp;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="smvnkxdc4j1im">
      <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>

@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)}}
/* 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))}
/* 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}}

(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;
  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);
      }
    });
    if (inline) {
      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 (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 = [];
    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');
      if (modal) {
        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) localStorage.setItem(KEY, String(Date.now())); } catch (e) {}
    }
    function hide() {
      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 (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 () {
  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%', 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();
})();

Loading…