Creative Agency Website HTML Template — Free Snippet
Creative Agency Website template · 10 website sections · Plain HTML, CSS & JS · Customise it in the Website Builder
CategoryLanding Pages
What's included
Features
10 ready-made website sections assembled into one finished creative agency website page: Floating Pill Navbar, Centred Gradient Hero, Bento Grid Features, Animated Stats Counters, Case Study Showcase, Team Carousel, Testimonial Spotlight, Editorial Post List, Floating Social Share Bar, Big Wordmark Footer
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 9-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 Creative Agency Website Built Around Proof: Services, Numbers, People and One Case Study
Agency sites fail in one of two ways: they look like every other agency, or they say nothing a buyer can check. This layout sidesteps both by pairing confident visuals with evidence. The centred hero sets the tone, the bento grid explains the services without a wall of text, the animated counters turn "we are experienced" into numbers, and the case study shows one real piece of work end to end, which persuades a prospect more than a gallery of ten thumbnails.
The people matter too. A draggable team carousel puts faces to the studio, and the editorial journal shows how the team thinks, which is what a buyer is really hiring. The footer ends with a giant wordmark and a single line, "Let's talk", so the last thing a visitor sees is the action you want.
Replace the sample studio with yours and keep the proportions: one hero, one case study, real numbers. It is the layout of the Creative Agency Website template; open it in the Website Builder to add the Services, Work, About and Contact pages that share one navbar and theme, then export.
Built from website section templates
The 10 Sections Behind This Creative Agency 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.
- Floating Pill Navbara floating pill navbar that feels like part of the design instead of a bar bolted on top
- Centred Gradient Heroa glowing centred hero that states what the studio does and for whom
- Bento Grid Featuresservices laid out as a bento grid, so a buyer scans capabilities instead of reading a list
- Animated Stats Countersnumbers that count up on scroll: years, projects and clients, so "experienced" becomes checkable
- Case Study Showcaseone featured client story with the problem, the work and the result, more persuasive than ten thumbnails
- Team Carousela draggable carousel of the people a client will actually work with
- Testimonial Spotlighta single large client quote placed after the work, where it carries the most weight
- Editorial Post Listan editorial journal that shows how the team thinks, which is what buyers are really hiring
- Floating Social Share Bara floating share bar for the journal, which keeps articles easy to pass around
- Big Wordmark Footera giant wordmark footer that ends on one line and one action: "Let's talk"
Step by step
How to Use
- 1Open the template in the Website BuilderPress "Start using this template" to open the Creative Agency Website in the Website Builder. Everything is edited with forms in a side panel; no code is needed.
- 2Choose your featured case studyReplace the sample story with your strongest project and write it as problem, work, result. One result with a real number beats a long description.
- 3Set honest countersEdit the animated stats to numbers you can defend: years in business, projects shipped, clients kept. The count-up animation makes them memorable, so they should be true.
- 4Introduce the real teamAdd your own team photos and roles to the carousel, and write the journal posts that show how you think about the work.
- 5Export and publishDownload one HTML file or a ZIP (or one HTML file per page for the multi-page version) and upload it to Netlify, Vercel, Cloudflare Pages, GitHub Pages or your own host. Or copy the code from this page and export it to React, Vue, Angular or Tailwind with the buttons above the editor.
Real-world uses
Common Use Cases
A studio or freelancer collective site
Launch a credible agency site quickly and spend the time on the case study and the copy rather than the layout.
A site for a design, web or marketing agency
Use the services grid and counters to explain what you sell to non-technical buyers.
Study dark UI and GSAP scroll effects
See how counters, carousels and reveals are built on a dark theme with container queries and reduced-motion support.
Got questions?
Frequently Asked Questions
A clear statement of what you do, proof in the form of a real case study and numbers, the people involved and an easy way to start a conversation.
A single detailed story shows how you think and what you deliver, which is what buyers evaluate. A grid of thumbnails shows only that you made things.
Yes. The multi-page version in the Website Builder adds Services, Work, About and Contact pages sharing one navbar, footer and theme.
It is assembled from 10 templates in the free Website Section Templates library: Floating Pill Navbar, Centred Gradient Hero, Bento Grid Features, Animated Stats Counters, Case Study Showcase, Team Carousel, Testimonial Spotlight, Editorial Post List, Floating Social Share Bar, Big Wordmark Footer. 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.
Source Code
Requires
<section class="st st-navbar-floating" data-uid="smvnkxd7sf1yr">
<div class="st-wrap">
<header class="nf">
<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="M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z" /><path d="m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18" /><path d="m2.3 2.3 7.286 7.286" /><circle cx="11" cy="11" r="2" /></svg></span><span>Northstar</span></span>
</a>
<nav class="nf-nav" data-menu aria-label="Main">
<ul class="nf-links">
<li data-menu-item><a class="nf-link" href="#features"><span>Services</span></a></li>
<li data-menu-item><a class="nf-link" href="#results"><span>Work</span></a></li>
<li data-menu-item><a class="nf-link" href="#team"><span>Team</span></a></li>
<li data-menu-item><a class="nf-link" href="#blog"><span>Journal</span></a></li>
</ul>
<a class="st-btn nf-cta" data-menu-item href="#contact"><span>Start a project</span></a>
</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>
</div>
<i hidden data-sticky-flag></i>
</section>
<section class="st st-centered-gradient-hero" data-uid="smvnkxd7s50vm">
<div class="cg-glow" aria-hidden="true"></div>
<div class="cg st-wrap">
<span class="st-eyebrow cg-eyebrow" data-anim="item">Brand, web & product design</span>
<h1 class="cg-title" data-anim="item" data-anim-text>We design brands people <span class="hl">remember</span></h1>
<p class="st-lead cg-lead" data-anim="item">Northstar is an independent studio helping ambitious companies launch websites, products and brands that stand out.</p>
<div class="st-btns cg-btns" data-anim="item">
<a class="st-btn" href="#contact"><span>Start a project</span></a>
<a class="st-btn st-btn--ghost" href="#results"><span>See our work</span></a>
</div>
<p class="cg-note" data-anim="item">Trusted by 120+ teams since 2015</p>
<div class="cg-media" data-anim="media"><img width="1200" height="820" src="https://webdevpuneet.com/images/section-templates/hero-dashboard.png" alt="Acme app dashboard"></div>
</div>
</section>
<section id="features" class="st st-features-bento" data-uid="smvnkxd7se1qq">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Services</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Everything you need to <span class="hl">launch</span></h2>
<p class="st-lead" data-anim="item"></p>
</header>
<div class="fb-grid">
<article class="fb-card" data-anim="item">
<div class="fb-copy">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="8" height="8" x="3" y="3" rx="2" /><path d="M7 11v4a2 2 0 0 0 2 2h4" /><rect width="8" height="8" x="13" y="13" rx="2" /></svg></span>
<h3 class="fb-title">Visual automations</h3>
<p class="fb-text">Drag triggers and actions onto a canvas. No code, no scripts, no waiting on engineering.</p>
</div>
<div class="fb-media"><img loading="lazy" src="https://webdevpuneet.com/images/section-templates/feature-automation.png" alt="Workflow builder with connected trigger and action nodes"></div>
</article>
<article class="fb-card" data-anim="item">
<div class="fb-copy">
<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="M12 8V4H8" /><rect width="16" height="12" x="4" y="8" rx="2" /><path d="M2 14h2" /><path d="M20 14h2" /><path d="M15 13v2" /><path d="M9 13v2" /></svg></span>
<h3 class="fb-title">AI assistant</h3>
<p class="fb-text">Summarise threads, draft updates and triage new requests automatically.</p>
</div>
</article>
<article class="fb-card" data-anim="item">
<div class="fb-copy">
<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="m12 14 4-4" /><path d="M3.34 19a10 10 0 1 1 17.32 0" /></svg></span>
<h3 class="fb-title">Instant search</h3>
<p class="fb-text">Find any task, doc or comment in milliseconds.</p>
</div>
</article>
<article class="fb-card" data-anim="item">
<div class="fb-copy">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg></span>
<h3 class="fb-title">Enterprise security</h3>
<p class="fb-text">SSO, SCIM and granular roles on every workspace.</p>
</div>
</article>
<article class="fb-card" data-anim="item">
<div class="fb-copy">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" /><path d="M2 12h20" /></svg></span>
<h3 class="fb-title">Works everywhere</h3>
<p class="fb-text">Web, desktop and mobile apps that stay in sync offline.</p>
</div>
</article>
</div>
</div>
</section>
<section id="results" class="st st-stats-counters" data-uid="smvnkxd7s7ls2">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Results</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Work that <span class="hl">moves the numbers</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">Teams</dt>
<dd class="sc-value" data-count>12,000+</dd>
<dd class="sc-note">in 90 countries</dd>
</div>
<div class="sc-stat" data-anim="item">
<dt class="sc-label">Tasks shipped</dt>
<dd class="sc-value" data-count>4.2M</dd>
<dd class="sc-note">and counting</dd>
</div>
<div class="sc-stat" data-anim="item">
<dt class="sc-label">Uptime</dt>
<dd class="sc-value" data-count>99.99%</dd>
<dd class="sc-note">over the last 12 months</dd>
</div>
<div class="sc-stat" data-anim="item">
<dt class="sc-label">Average rating</dt>
<dd class="sc-value" data-count>4.9/5</dd>
<dd class="sc-note">from 2,300+ reviews</dd>
</div>
</dl>
</div>
</section>
<section id="customers" class="st st-case-study-showcase" data-uid="smvnkxd7s460o">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Selected work</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Work that <span class="hl">moved the numbers</span></h2>
<p class="st-lead" data-anim="item">Two recent projects, from the first workshop to the results.</p>
</header>
<ul class="cs-list">
<li class="cs-card" data-anim="item">
<div class="cs-media"><img class="cs-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/hero-dashboard.png" alt="The new Lumen website and dashboard on a laptop"></div>
<div class="cs-body">
<p class="cs-meta"><strong class="cs-client">Lumen Analytics</strong><span class="cs-tag">Brand · Website · Product</span></p>
<h3 class="cs-headline">A new brand and site that <span class="hl">doubled demo requests</span></h3>
<p class="cs-summary">We rebuilt the identity, the website and the product tour for a data company that was hard to explain in a sentence.</p>
<dl class="cs-stats">
<div class="cs-stat"><dt>demo requests</dt><dd>+118%</dd></div>
<div class="cs-stat"><dt>time on site</dt><dd>2.4×</dd></div>
<div class="cs-stat"><dt>from kick-off to launch</dt><dd>9 wks</dd></div>
</dl>
<figure class="cs-quote">
<blockquote>Northstar made us look like the company we had become.</blockquote>
<figcaption><strong>Priya Raman</strong><span>Head of Growth, Lumen</span></figcaption>
</figure>
<a class="cs-link" href="#"><span>Read the Lumen story</span> <span aria-hidden="true">→</span></a>
</div>
</li>
<li class="cs-card" data-anim="item">
<div class="cs-media"><img class="cs-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-product.jpg" alt="The Sona Audio product page on a pale blue background"></div>
<div class="cs-body">
<p class="cs-meta"><strong class="cs-client">Sona Audio</strong><span class="cs-tag">E-commerce · Campaign</span></p>
<h3 class="cs-headline">A launch campaign that <span class="hl">sold out in nine days</span></h3>
<p class="cs-summary">Positioning, photography and a one-page store for the first product from a new audio brand.</p>
<dl class="cs-stats">
<div class="cs-stat"><dt>to sell out</dt><dd>9 days</dd></div>
<div class="cs-stat"><dt>first-year revenue</dt><dd>$1.2M</dd></div>
</dl>
<figure class="cs-quote">
<blockquote>We had a waiting list before the first ad ran.</blockquote>
<figcaption><strong>Daniel Okoye</strong><span>Founder, Sona</span></figcaption>
</figure>
<a class="cs-link" href="#"><span>Read the Sona story</span> <span aria-hidden="true">→</span></a>
</div>
</li>
</ul>
</div>
</section>
<section id="team" class="st st-team-carousel" data-uid="smvnkxd7sv4ve">
<div class="st-wrap">
<div class="tc2-top">
<header class="st-head st-head--left tc2-head">
<p class="st-eyebrow" data-anim="item">The studio</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Small team, <span class="hl">big ideas</span></h2>
<p class="st-lead" data-anim="item">Designers, developers and strategists who love hard problems and clean solutions.</p>
</header>
<div class="tc2-arrows" data-anim="item">
<button type="button" class="tc2-arrow" data-carousel-prev><span class="tc2-sr">Previous people</span><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button>
<button type="button" class="tc2-arrow" data-carousel-next><span class="tc2-sr">Next people</span><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button>
</div>
</div>
<ul class="tc2-track" data-carousel tabindex="0" role="region" aria-label="Team">
<li class="tc2-card" data-anim="item">
<img width="420" height="560" loading="lazy" draggable="false" src="https://webdevpuneet.com/images/section-templates/avatar-8.jpg" alt="">
<div class="tc2-info">
<h3 class="tc2-name"><span>Hana Sato</span></h3>
<p class="tc2-role">Creative Director</p>
</div>
</li>
<li class="tc2-card" data-anim="item">
<img width="420" height="560" loading="lazy" draggable="false" src="https://webdevpuneet.com/images/section-templates/avatar-1.jpg" alt="">
<div class="tc2-info">
<h3 class="tc2-name"><span>Marcus Webb</span></h3>
<p class="tc2-role">Technical Lead</p>
</div>
</li>
<li class="tc2-card" data-anim="item">
<img width="420" height="560" loading="lazy" draggable="false" src="https://webdevpuneet.com/images/section-templates/avatar-2.jpg" alt="">
<div class="tc2-info">
<h3 class="tc2-name"><span>Zara Ahmed</span></h3>
<p class="tc2-role">Brand Designer</p>
</div>
</li>
<li class="tc2-card" data-anim="item">
<img width="420" height="560" loading="lazy" draggable="false" src="https://webdevpuneet.com/images/section-templates/avatar-7.jpg" alt="">
<div class="tc2-info">
<h3 class="tc2-name"><span>Ben Carter</span></h3>
<p class="tc2-role">Strategist</p>
</div>
</li>
<li class="tc2-card" data-anim="item">
<img width="420" height="560" loading="lazy" draggable="false" src="https://webdevpuneet.com/images/section-templates/avatar-3.jpg" alt="">
<div class="tc2-info">
<h3 class="tc2-name"><span>Lena Fischer</span></h3>
<p class="tc2-role">Motion Designer</p>
</div>
</li>
<li class="tc2-card" data-anim="item">
<img width="420" height="560" loading="lazy" draggable="false" src="https://webdevpuneet.com/images/section-templates/avatar-4.jpg" alt="">
<div class="tc2-info">
<h3 class="tc2-name"><span>Omar Haddad</span></h3>
<p class="tc2-role">Front-end Developer</p>
</div>
</li>
</ul>
</div>
</section>
<section id="customers-2" class="st st-testimonial-spotlight" data-uid="smvnkxd7sfgxr">
<div class="st-wrap">
<figure class="ts-card">
<span class="ts-mark" aria-hidden="true">“</span>
<p class="ts-company" data-anim="item">NORTHWIND</p>
<blockquote class="ts-quote" data-anim="item" data-anim-text><p>We cut our reporting time by two thirds in the first month. For the first time, everyone from engineering to the board is looking at <span class="hl">the same live numbers</span>.</p></blockquote>
<figcaption class="ts-person" data-anim="item">
<img class="ts-photo" width="160" height="160" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-6.jpg" alt="">
<div><p class="ts-name">Aisha Bello</p><p class="ts-role">Operations Director, Northwind</p></div>
</figcaption>
<dl class="ts-stats">
<div class="ts-stat" data-anim="item"><dt class="ts-label">faster weekly reporting</dt><dd class="ts-value">3×</dd></div>
<div class="ts-stat" data-anim="item"><dt class="ts-label">fewer status meetings</dt><dd class="ts-value">64%</dd></div>
<div class="ts-stat" data-anim="item"><dt class="ts-label">to roll out to 80 people</dt><dd class="ts-value">9 days</dd></div>
</dl>
<a class="ts-link" data-anim="item" href="https://webdevpuneet.com/customers/northwind"><span>Read the full case study</span> <span aria-hidden="true">→</span></a>
</figure>
</div>
</section>
<section id="blog" class="st st-blog-list" data-uid="smvnkxd7s7m2o">
<div class="st-wrap">
<div class="bl-top">
<header class="st-head st-head--left bl-head">
<p class="st-eyebrow" data-anim="item">Journal</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Notes from the <span class="hl">studio</span></h2>
</header>
<a class="bl-all" data-anim="item" href="/journal/"><span>All articles</span> <span aria-hidden="true">→</span></a>
</div>
<ul class="bl-list">
<li class="bl-row" data-anim="item" data-preview>
<a class="bl-link" href="/blog/faster-pages/">
<span class="bl-date">Oct 14, 2026</span>
<span class="bl-cat">Engineering</span>
<span class="bl-title">How we cut page load time in half</span>
<span class="bl-arrow" aria-hidden="true">↗</span>
</a>
<img class="bl-img" data-preview-img width="1200" height="750" loading="lazy" src="https://webdevpuneet.com/images/section-templates/blog-4.jpg" alt="">
</li>
<li class="bl-row" data-anim="item" data-preview>
<a class="bl-link" href="/blog/live-reports/">
<span class="bl-date">Oct 9, 2026</span>
<span class="bl-cat">Product</span>
<span class="bl-title">Introducing live reports</span>
<span class="bl-arrow" aria-hidden="true">↗</span>
</a>
<img class="bl-img" data-preview-img width="1200" height="750" loading="lazy" src="https://webdevpuneet.com/images/section-templates/blog-6.jpg" alt="">
</li>
<li class="bl-row" data-anim="item" data-preview>
<a class="bl-link" href="/blog/four-day-sprints/">
<span class="bl-date">Oct 2, 2026</span>
<span class="bl-cat">Culture</span>
<span class="bl-title">What four-day sprints taught us</span>
<span class="bl-arrow" aria-hidden="true">↗</span>
</a>
<img class="bl-img" data-preview-img width="1200" height="750" loading="lazy" src="https://webdevpuneet.com/images/section-templates/blog-1.jpg" alt="">
</li>
<li class="bl-row" data-anim="item" data-preview>
<a class="bl-link" href="/blog/calm-interfaces/">
<span class="bl-date">Sep 25, 2026</span>
<span class="bl-cat">Design</span>
<span class="bl-title">Designing calm interfaces</span>
<span class="bl-arrow" aria-hidden="true">↗</span>
</a>
<img class="bl-img" data-preview-img width="1200" height="750" loading="lazy" src="https://webdevpuneet.com/images/section-templates/blog-2.jpg" alt="">
</li>
</ul>
</div>
</section>
<section class="st st-floating-social-share" data-uid="smvnkxd7swy4v">
<div class="ss" data-ss data-side="left" 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="linkedin" data-share="https://www.linkedin.com/sharing/share-offsite/?url={url}" href="https://www.linkedin.com/sharing/share-offsite/" target="_blank" rel="noopener noreferrer" style="--c:#0A66C2" aria-label="Share on LinkedIn (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="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 class="ss-tip" aria-hidden="true">LinkedIn</span></a></li><li class="ss-item"><a class="ss-btn" data-net="x" data-share="https://x.com/intent/post?url={url}&text={title}&via={via}&hashtags={tags}" href="https://x.com/intent/post" target="_blank" rel="noopener noreferrer" style="--c:#111111" aria-label="Share on X (opens in a new tab)"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg><span class="ss-tip" aria-hidden="true">X</span></a></li><li class="ss-item"><a class="ss-btn" data-net="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="email" data-share="mailto:?subject={title}&body={text}" href="mailto:" style="--c:#6B7280" aria-label="Share on Email"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.970 5.700a1.940 1.940 0 0 1-2.060 0L2 7"/></svg><span class="ss-tip" aria-hidden="true">Email</span></a></li><li class="ss-item"><button type="button" class="ss-btn" data-net="copy" style="--c:#0F7B3F" aria-label="Copy link"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="13" height="13" x="8" y="8" rx="2.500"/><path d="M16 8V6.500A2.500 2.500 0 0 0 13.500 4h-7A2.500 2.500 0 0 0 4 6.500v7A2.500 2.500 0 0 0 6.500 16H8"/></svg><svg class="ss-ic ss-ic--done" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><span class="ss-tip" aria-hidden="true">Copy link</span></button></li><li class="ss-item ss-item--hide"><button type="button" class="ss-hide" data-ss-hide aria-expanded="true" aria-label="Hide share buttons"><svg class="ss-ic ss-ic--hide" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg></button></li></ul>
</div>
<button type="button" class="ss-tab" data-ss-show aria-expanded="true" aria-label="Show share buttons"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.600 13.500 6.800 4M15.400 6.500l-6.800 4"/></svg><span class="ss-tab-text" aria-hidden="true">Share</span></button>
<span class="ss-live" role="status" aria-live="polite"></span>
</div>
</section>
<section id="contact" class="st st-footer-giant" data-uid="smvnkxd7t176m">
<footer class="fgi">
<div class="st-wrap">
<div class="fgi-cta">
<h2 class="st-h2 fgi-title" data-anim="item">Have a project in mind? <span class="hl">Let’s talk.</span></h2>
<div class="fgi-cta-side" data-anim="item">
<a class="st-btn" href="mailto:hello@yourstudio.com"><span>Start a project</span> <span aria-hidden="true">→</span></a>
<p class="fgi-email">hello@yourstudio.com</p>
</div>
</div>
<div class="fgi-mid" data-anim="item">
<nav aria-label="Footer"><ul class="fgi-links"><li><a href="/work/">Work</a></li><li><a href="/services/">Services</a></li><li><a href="/about/">About</a></li><li><a href="/journal/">Journal</a></li><li><a href="/contact/">Contact</a></li></ul></nav>
<div><ul class="st-socials">
<li><a class="st-social" href="https://www.instagram.com/" aria-label="Instagram"><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"><rect width="20" height="20" x="2" y="2" rx="5" ry="5" /><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /><line x1="17.5" x2="17.51" y1="6.5" y2="6.5" /></svg></span></a></li>
<li><a class="st-social" href="https://dribbble.com/" aria-label="Dribbble"><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"><circle cx="12" cy="12" r="10" /><path d="M19.13 5.09C15.22 9.14 10 10.44 2.25 10.94" /><path d="M21.75 12.84c-6.62-1.41-12.14 1-16.38 6.32" /><path d="M8.56 2.75c4.37 6 6 9.42 8 17.72" /></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>
</ul></div>
</div>
<p class="fgi-word" data-anim-text aria-hidden="true">NORTHSTAR</p>
<div class="fgi-bottom">
<p>© 2026 Northstar Studio</p>
<ul class="fgi-legal"><li><a href="/privacy/">Privacy</a></li><li><a href="/imprint/">Imprint</a></li></ul>
</div>
</div>
</footer>
</section>@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800;900&display=swap');
body{margin:0;background:#0b1020}
html{scroll-behavior:smooth}section[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.st{--st-brand:#818cf8;--st-btn-text:#0b1020;--st-bg:#0b1020;--st-surface:#161c33;--st-text:#f1f5f9;--st-muted:#94a3b8;--st-radius:14;--st-max:1200;--st-font-heading:"Plus Jakarta Sans", sans-serif;--st-font-body:"Inter", sans-serif}
.st{--st-pad:clamp(20px,5cqi,56px);container:st/inline-size;position:relative;overflow:hidden;background:var(--st-bg);color:var(--st-text);font-family:var(--st-font-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
:where(.st) *,:where(.st) *::before,:where(.st) *::after{box-sizing:border-box;margin:0;padding:0}
:where(.st img){display:block;max-width:100%;height:auto}
:where(.st a){color:inherit}
:where(.st h1,.st h2,.st h3){font-family:var(--st-font-heading);line-height:1.08;letter-spacing:-.025em;font-weight:800;color:var(--st-text)}
.st .hl{color:var(--st-brand)}
.st [data-edit]:empty,.st [data-i-edit]:empty{display:none}
.st-wrap{width:100%;max-width:calc(var(--st-max) * 1px);margin:0 auto;padding-left:var(--st-pad);padding-right:var(--st-pad)}
.st-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--st-brand)}
.st-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--st-brand) 12%,transparent);color:var(--st-brand);font-size:13.5px;font-weight:700}
.st-btns{display:flex;flex-wrap:wrap;gap:12px}
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 26px;border-radius:calc(var(--st-radius) * 1px);border:2px solid var(--st-brand);background:var(--st-brand);color:var(--st-btn-text);font:700 16px/1 var(--st-font-body);text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.st-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px color-mix(in srgb,var(--st-brand) 35%,transparent)}
.st-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 45%,transparent);outline-offset:3px}
.st-btn--ghost{background:transparent;color:var(--st-text);border-color:color-mix(in srgb,var(--st-text) 22%,transparent)}
.st-btn--ghost:hover{box-shadow:none;border-color:var(--st-text)}
.st-lead{font-size:clamp(17px,1.2cqi + 12px,20px);line-height:1.65;color:var(--st-muted)}
.st-head{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:46em;margin:0 auto clamp(36px,5cqi,64px);text-align:center}
.st-head--left{align-items:flex-start;margin-left:0;text-align:left}
.st-h2{font-size:clamp(30px,2.6cqi + 16px,48px)}
.st-icon{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border-radius:calc(var(--st-radius) * .85px);background:color-mix(in srgb,var(--st-brand) 12%,transparent);color:var(--st-brand)}
.st-icon svg{width:24px;height:24px}
.st-icon:empty{display:none}
.st-checks{list-style:none;display:flex;flex-direction:column;gap:11px}
.st-checks li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.5}
.st-checks li::before{content:"";position:absolute;left:0;top:.12em;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--st-brand) 15%,transparent)}
.st-checks li::after{content:"";position:absolute;left:5px;top:calc(.12em + 5px);width:10px;height:10px;background:var(--st-brand);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
@media (prefers-reduced-motion:reduce){.st *{transition:none!important;animation:none!important}}
/* Floating Pill Navbar */
.st-navbar-floating{overflow:visible;background:transparent;padding:14px 0}
.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}
.nf{position:relative;display:flex;align-items:center;gap:24px;max-width:1040px;margin:0 auto;padding:8px 8px 8px 18px;border-radius:999px;background:color-mix(in srgb,var(--st-surface) 82%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid color-mix(in srgb,var(--st-text) 12%,transparent);box-shadow:0 20px 50px -24px rgba(0,0,0,.6)}
.nf .st-brand{color:var(--st-text)}
.nf .st-brand-mark{font-size:19px}
.nf .st-brand-icon{width:30px;height:30px}
.nf-nav{flex:1;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nf-links{list-style:none;display:flex;gap:2px;margin:0 auto}
.nf-link{display:block;padding:9px 16px;border-radius:999px;color:var(--st-muted);font-weight:600;font-size:15px;text-decoration:none;transition:color .2s ease,background .2s ease}
.nf-link:hover{color:var(--st-text);background:color-mix(in srgb,var(--st-text) 9%,transparent)}
.nf-link[aria-current="page"]{color:var(--st-brand);background:color-mix(in srgb,var(--st-brand) 13%,transparent)}
.nf .nf-cta{min-height:44px;padding:0 22px;border-radius:999px;font-size:15px}
.nf .st-burger{color:var(--st-text);background:color-mix(in srgb,var(--st-text) 10%,transparent);border-radius:999px}
@container st (max-width:860px){
.nf .st-burger{display:inline-block;margin-left:auto;position:relative;z-index:2}
.nf .st-brand{position:relative;z-index:2}
.nf-nav{position:fixed;inset:0;z-index:1;flex-direction:column;justify-content:center;align-items:flex-start;gap:28px;padding:96px var(--st-pad) 48px;background:color-mix(in srgb,var(--st-surface) 97%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.nf-links{flex-direction:column;align-items:flex-start;gap:6px;margin:0}
.nf-link{padding:6px 0;font:800 clamp(30px,8cqi,44px)/1.15 var(--st-font-heading);letter-spacing:-.03em;color:var(--st-text);background:none!important}
.nf-link:hover{color:var(--st-brand)}
.nf .nf-cta{min-height:54px;padding:0 30px;font-size:17px}
.has-menu:not(.menu-open) .nf-nav{display:none}
.menu-open .nf{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--st-surface)}
.st:not(.has-menu) .nf{flex-wrap:wrap;border-radius:calc(var(--st-radius) * 1.4px)}
.st:not(.has-menu) .nf-nav{position:static;flex-basis:100%;padding:8px;background:none}
.st:not(.has-menu) .nf-link{font-size:18px}
.st:not(.has-menu) .st-burger{display:none}
}
/* Centred Gradient Hero */
.st-centered-gradient-hero{padding:clamp(64px,9cqi,128px) 0 0}
.cg-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 50% 0%,color-mix(in srgb,var(--st-brand) 45%,transparent),transparent 70%),radial-gradient(40% 40% at 15% 30%,color-mix(in srgb,#ec4899 30%,transparent),transparent 70%),radial-gradient(40% 40% at 85% 35%,color-mix(in srgb,#22d3ee 25%,transparent),transparent 70%)}
.cg{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.cg-eyebrow{padding:6px 14px;border:1px solid color-mix(in srgb,var(--st-brand) 45%,transparent);border-radius:999px;background:color-mix(in srgb,var(--st-brand) 12%,transparent)}
.cg-title{max-width:15em;font-size:clamp(40px,5.4cqi + 10px,76px)}
.cg-lead{max-width:36em}
.cg-btns{justify-content:center}
.cg-note{font-size:14px;color:var(--st-muted)}
.cg-media{width:100%;max-width:1040px;margin-top:clamp(24px,4cqi,48px);padding:10px 10px 0;border-radius:calc(var(--st-radius) * 1.6px) calc(var(--st-radius) * 1.6px) 0 0;background:color-mix(in srgb,var(--st-surface) 85%,transparent);border:1px solid color-mix(in srgb,var(--st-text) 14%,transparent);border-bottom:0;box-shadow:0 -20px 80px -20px color-mix(in srgb,var(--st-brand) 45%,transparent)}
.cg-media img{width:100%;border-radius:calc(var(--st-radius) * 1px) calc(var(--st-radius) * 1px) 0 0}
.st-centered-gradient-hero:not(:has(.cg-media)) .cg{padding-bottom:clamp(64px,9cqi,128px)}
/* Bento Grid Features */
.st-features-bento{padding:clamp(64px,8cqi,112px) 0}
.st-features-bento::before{content:"";position:absolute;inset:-20% 10% auto;height:60%;background:radial-gradient(closest-side,color-mix(in srgb,var(--st-brand) 22%,transparent),transparent);pointer-events:none}
.fb-grid{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.6cqi,18px)}
.fb-card{grid-column:span 2;display:flex;flex-direction:column;gap:20px;overflow:hidden;padding:clamp(22px,2.4cqi,30px);border-radius:calc(var(--st-radius) * 1px);background:linear-gradient(160deg,color-mix(in srgb,var(--st-surface) 100%,var(--st-brand) 0%),color-mix(in srgb,var(--st-surface) 82%,var(--st-brand)));border:1px solid color-mix(in srgb,var(--st-text) 10%,transparent)}
.fb-card:nth-child(5n+1){grid-column:span 4}
.fb-card:nth-child(5n+4),.fb-card:nth-child(5n+5){grid-column:span 3}
.fb-card:nth-child(5n+1):has(.fb-media){grid-row:span 2}
.fb-copy{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.fb-card .st-icon{background:color-mix(in srgb,var(--st-brand) 18%,transparent);margin-bottom:4px}
.fb-title{font-size:19px;letter-spacing:-.01em}
.fb-text{color:var(--st-muted);font-size:15.5px;max-width:34em}
.fb-media{margin-top:auto;margin-right:calc(clamp(22px,2.4cqi,30px) * -1);margin-bottom:calc(clamp(22px,2.4cqi,30px) * -1)}
.fb-media img{width:100%;border-top-left-radius:calc(var(--st-radius) * .8px);border:1px solid color-mix(in srgb,var(--st-text) 12%,transparent);border-right:0;border-bottom:0}
@container st (max-width:900px){.fb-grid{grid-template-columns:repeat(2,1fr)}.fb-card,.fb-card:nth-child(n){grid-column:span 1;grid-row:auto}.fb-card:nth-child(5n+1){grid-column:1/-1}}
@container st (max-width:560px){.fb-grid{grid-template-columns:1fr}.fb-card:nth-child(n){grid-column:auto}}
/* 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)}}
/* Case Study Showcase */
.st-case-study-showcase{padding:clamp(56px,7cqi,104px) 0}
.cs-list{list-style:none;display:flex;flex-direction:column;gap:clamp(28px,3.6cqi,48px)}
.cs-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);overflow:hidden;border-radius:calc(var(--st-radius) * 1.4px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 7%,transparent)}
.cs-card:nth-child(even) .cs-media{order:2}
.cs-media{position:relative;min-height:320px;background:color-mix(in srgb,var(--st-brand) 10%,var(--st-surface))}
.cs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-body{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:clamp(24px,3.6cqi,48px)}
.cs-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:14.5px}
.cs-client{font-weight:800}
.cs-tag{padding:4px 11px;border-radius:999px;background:color-mix(in srgb,var(--st-brand) 12%,transparent);color:var(--st-brand);font-weight:700;font-size:12.5px}
.cs-headline{font-size:clamp(24px,1.8cqi + 14px,34px);line-height:1.15;letter-spacing:-.025em}
.cs-summary{color:var(--st-muted);font-size:16.5px;line-height:1.6}
.cs-stats{display:flex;flex-wrap:wrap;gap:12px clamp(20px,3cqi,40px);padding:16px 0;border-block:1px solid color-mix(in srgb,var(--st-text) 10%,transparent);width:100%}
.cs-stat{display:flex;flex-direction:column-reverse;gap:2px}
.cs-stat dd{margin:0;font:800 clamp(26px,2cqi + 14px,36px)/1 var(--st-font-heading);letter-spacing:-.03em;color:var(--st-brand)}
.cs-stat dt{color:var(--st-muted);font-size:14px}
.cs-quote{margin:0;padding-left:16px;border-left:3px solid var(--st-brand)}
.cs-quote blockquote{font-size:16.5px;line-height:1.55;font-style:italic}
.cs-quote figcaption{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:8px;font-size:14px}
.cs-quote figcaption span{color:var(--st-muted)}
.cs-quote figcaption span::before{content:"· "}
.cs-link{color:var(--st-brand);font-weight:700;text-decoration:none}
.cs-link:hover{text-decoration:underline}
@container st (max-width:860px){.cs-card{grid-template-columns:1fr}.cs-card:nth-child(even) .cs-media{order:0}.cs-media{min-height:0;aspect-ratio:16/10}}
/* Team Carousel */
.st-team-carousel{padding:clamp(64px,8cqi,112px) 0}
.tc2-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,3.4cqi,44px)}
.tc2-head{margin:0}
.tc2-arrows{display:flex;gap:10px;flex:none}
.tc2-arrow{position:relative;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;border:1px solid color-mix(in srgb,var(--st-text) 18%,transparent);background:none;color:var(--st-text);cursor:pointer;transition:background .2s ease,color .2s ease,opacity .2s ease}
.tc2-arrow:hover:not(:disabled){background:var(--st-brand);border-color:var(--st-brand);color:var(--st-btn-text)}
.tc2-arrow:disabled{opacity:.3;cursor:default}
.tc2-arrow:focus-visible,.tc2-track:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 50%,transparent);outline-offset:3px}
.tc2-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tc2-track{list-style:none;display:flex;gap:clamp(14px,1.8cqi,20px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 2px 8px;margin:0 -2px}
.tc2-track::-webkit-scrollbar{display:none}
.tc2-track.is-draggable{scroll-snap-type:none;cursor:grab}
.tc2-track.is-draggable:active{cursor:grabbing}
.tc2-card{position:relative;flex:0 0 clamp(220px,24%,300px);aspect-ratio:3/4;overflow:hidden;scroll-snap-align:start;border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);user-select:none}
.tc2-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tc2-card:hover img{transform:scale(1.05)}
.tc2-info{position:absolute;inset:auto 0 0;padding:48px 18px 18px;background:linear-gradient(transparent,rgba(0,0,0,.78))}
.tc2-name{color:#fff;font-size:18px}
.tc2-name a{color:inherit;text-decoration:none}
.tc2-name a:hover{color:var(--st-brand)}
.tc2-role{color:var(--st-brand);font-size:14px;font-weight:600;margin-top:2px}
@container st (max-width:700px){.tc2-top{flex-direction:column;align-items:flex-start}.tc2-card{flex-basis:72%}}
/* Testimonial Spotlight */
.st-testimonial-spotlight{padding:clamp(64px,8cqi,112px) 0}
.ts-card{position:relative;max-width:980px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:28px;padding:clamp(36px,6cqi,72px) clamp(22px,6cqi,80px);text-align:center;border-radius:calc(var(--st-radius) * 1.4px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 6%,transparent);box-shadow:0 40px 90px -50px color-mix(in srgb,var(--st-brand) 50%,transparent)}
.ts-mark{position:absolute;top:-34px;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--st-brand);color:var(--st-btn-text);font:800 64px/1 Georgia,serif;padding-top:22px}
.ts-company{font:800 15px/1 var(--st-font-heading);letter-spacing:.3em;color:var(--st-muted)}
.ts-quote{font:600 clamp(22px,1.6cqi + 14px,32px)/1.45 var(--st-font-heading);letter-spacing:-.01em;max-width:30em}
.ts-person{display:flex;align-items:center;gap:16px;text-align:left}
.ts-photo{width:60px;height:60px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px color-mix(in srgb,var(--st-brand) 18%,transparent)}
.ts-name{font-weight:800;font-size:17px}
.ts-role{color:var(--st-muted);font-size:15px}
.ts-stats{display:flex;flex-wrap:wrap;justify-content:center;width:100%;padding-top:28px;border-top:1px solid color-mix(in srgb,var(--st-text) 9%,transparent)}
.ts-stat{flex:1 1 160px;display:flex;flex-direction:column-reverse;gap:4px;padding:6px 16px}
.ts-stat + .ts-stat{border-left:1px solid color-mix(in srgb,var(--st-text) 9%,transparent)}
.ts-value{font:800 clamp(30px,2.4cqi + 14px,42px)/1.1 var(--st-font-heading);color:var(--st-brand);letter-spacing:-.02em}
.ts-label{color:var(--st-muted);font-size:15px}
.ts-link{color:var(--st-brand);font-weight:700;text-decoration:none}
.ts-link:hover{text-decoration:underline}
@container st (max-width:600px){.ts-stat + .ts-stat{border-left:0;border-top:1px solid color-mix(in srgb,var(--st-text) 9%,transparent);padding-top:14px}.ts-stats{flex-direction:column;gap:10px}.ts-stat{flex:none}}
/* Editorial Post List */
.st-blog-list{padding:clamp(64px,8cqi,112px) 0}
.bl-top{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:clamp(24px,3cqi,40px)}
.bl-head{margin:0}
.bl-all{color:var(--st-brand);font-weight:700;text-decoration:none}
.bl-all:hover{text-decoration:underline}
.bl-list{list-style:none;border-top:1px solid color-mix(in srgb,var(--st-text) 14%,transparent)}
.bl-row{position:relative;border-bottom:1px solid color-mix(in srgb,var(--st-text) 14%,transparent)}
.bl-link{display:grid;grid-template-columns:140px 140px 1fr auto;align-items:center;gap:20px;padding:clamp(22px,2.6cqi,32px) 4px;color:var(--st-text);text-decoration:none;transition:padding .35s cubic-bezier(.2,.8,.2,1),color .25s ease}
.bl-link:hover{padding-left:18px;color:var(--st-brand)}
.bl-date{color:var(--st-muted);font-size:14px;font-variant-numeric:tabular-nums}
.bl-cat{color:var(--st-muted);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.bl-title{font:700 clamp(20px,1.6cqi + 12px,30px)/1.25 var(--st-font-heading);letter-spacing:-.02em}
.bl-arrow{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid color-mix(in srgb,var(--st-text) 20%,transparent);font-size:18px;transition:transform .3s ease,background .3s ease,color .3s ease}
.bl-link:hover .bl-arrow{transform:rotate(45deg);background:var(--st-brand);border-color:var(--st-brand);color:var(--st-btn-text)}
.bl-img{display:none}
.st-hover-card{position:absolute;left:0;top:0;z-index:5;width:300px;aspect-ratio:16/10;border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface) center/cover no-repeat;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);pointer-events:none}
@container st (max-width:760px){.bl-link{grid-template-columns:1fr auto;gap:6px 14px}.bl-date,.bl-cat{grid-column:1;font-size:13px}.bl-date{order:-2}.bl-cat{order:-1}.bl-title{grid-column:1}.bl-arrow{grid-column:2;grid-row:1/span 3;width:38px;height:38px}}
/* 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}}
/* Big Wordmark Footer */
.st-footer-giant{padding:clamp(64px,8cqi,112px) 0 28px}
.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}
.fgi-cta{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:28px;padding-bottom:clamp(36px,5cqi,64px);border-bottom:1px solid color-mix(in srgb,var(--st-text) 12%,transparent)}
.fgi .fgi-title{max-width:14em;font-size:clamp(32px,3.6cqi + 12px,60px)}
.fgi-cta-side{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.fgi-email{color:var(--st-muted);font-size:15px}
.fgi-email:empty{display:none}
.fgi-mid{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;padding:28px 0}
.fgi-links{list-style:none;display:flex;flex-wrap:wrap;gap:8px 28px}
.fgi-links a{color:var(--st-text);font-weight:600;font-size:16px;text-decoration:none}
.fgi-links a:hover{color:var(--st-brand)}
.fgi .st-social{background:color-mix(in srgb,var(--st-text) 9%,transparent);border-radius:50%}
.fgi-word{margin:clamp(8px,2cqi,24px) 0 0;font:800 clamp(34px,14.6cqi,236px)/.82 var(--st-font-heading);letter-spacing:-.06em;text-align:center;white-space:nowrap;color:var(--st-text);-webkit-mask:linear-gradient(180deg,#000 35%,rgba(0,0,0,.08));mask:linear-gradient(180deg,#000 35%,rgba(0,0,0,.08));user-select:none}
.fgi-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;margin-top:24px;color:var(--st-muted);font-size:14px}
.fgi-legal{list-style:none;display:flex;gap:20px}
.fgi-legal a{color:var(--st-muted);text-decoration:none}
.fgi-legal a:hover{color:var(--st-text)}
(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;
if (G && window.Draggable) G.registerPlugin(Draggable);
if (G && window.InertiaPlugin) G.registerPlugin(InertiaPlugin);
if (G && window.ScrollToPlugin) G.registerPlugin(ScrollToPlugin);
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var fine = window.matchMedia && window.matchMedia('(pointer: fine)').matches;
document.querySelectorAll('.st').forEach(function (sec) {
var track = sec.querySelector('[data-carousel]');
if (!track) return;
var prev = sec.querySelector('[data-carousel-prev]');
var next = sec.querySelector('[data-carousel-next]');
var max = function () { return Math.max(0, track.scrollWidth - track.clientWidth); };
var points = function () {
var first = track.children[0];
if (!first) return [0];
return Array.prototype.map.call(track.children, function (c) { return Math.min(max(), c.offsetLeft - first.offsetLeft); });
};
var nearest = function (x) { return points().reduce(function (a, p) { return Math.abs(p - x) < Math.abs(a - x) ? p : a; }, 0); };
var update = function () {
var x = track.scrollLeft;
if (prev) prev.disabled = x <= 2;
if (next) next.disabled = x >= max() - 2;
};
var go = function (dir) {
var ps = points(), x = track.scrollLeft, target = x;
if (dir > 0) { for (var i = 0; i < ps.length; i++) if (ps[i] > x + 4) { target = ps[i]; break; } }
else { for (var j = ps.length - 1; j >= 0; j--) if (ps[j] < x - 4) { target = ps[j]; break; } }
if (G && window.ScrollToPlugin && !reduce) G.to(track, { scrollTo: { x: target }, duration: 0.6, ease: 'power3.out', onUpdate: update });
else track.scrollTo({ left: target, behavior: reduce ? 'auto' : 'smooth' });
};
if (prev) prev.addEventListener('click', function () { go(-1); });
if (next) next.addEventListener('click', function () { go(1); });
track.addEventListener('scroll', update, { passive: true });
window.addEventListener('resize', update);
update();
// Mouse drag with momentum on desktop; touch keeps native scrolling and snap.
// An invisible proxy is dragged and its x is mapped onto the track's native scrollLeft,
// so the slides' markup and layout never change.
if (G && window.Draggable && fine) {
track.classList.add('is-draggable');
var proxy = document.createElement('div');
var start = 0;
var apply = function () { track.scrollLeft = start - this.x; update(); };
Draggable.create(proxy, {
type: 'x',
trigger: track,
inertia: !!window.InertiaPlugin && !reduce,
dragClickables: false,
onPress: function () { G.killTweensOf(track); start = track.scrollLeft; G.set(proxy, { x: 0 }); this.update(); },
onDrag: apply,
onThrowUpdate: apply,
snap: { x: function (v) { return start - nearest(Math.max(0, Math.min(max(), start - v))); } },
onRelease: function () { if (!this.tween) { G.to(track, { scrollTo: window.ScrollToPlugin ? { x: nearest(track.scrollLeft) } : undefined, duration: 0.4, ease: 'power3.out', onUpdate: update }); } }
});
}
});
})();
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var fine = window.matchMedia && window.matchMedia('(pointer: fine)').matches;
if (!G || reduce || !fine) return;
document.querySelectorAll('.st').forEach(function (sec) {
var rows = sec.querySelectorAll('[data-preview]');
if (!rows.length) return;
var card = document.createElement('div');
card.className = 'st-hover-card';
card.setAttribute('aria-hidden', 'true');
sec.appendChild(card);
G.set(card, { xPercent: -50, yPercent: -50, scale: 0.6, opacity: 0 });
var x = G.quickTo(card, 'x', { duration: 0.45, ease: 'power3.out' });
var y = G.quickTo(card, 'y', { duration: 0.45, ease: 'power3.out' });
sec.addEventListener('pointermove', function (e) { var r = sec.getBoundingClientRect(); x(e.clientX - r.left); y(e.clientY - r.top); });
Array.prototype.forEach.call(rows, function (row) {
var img = row.querySelector('[data-preview-img]');
row.addEventListener('pointerenter', function () {
if (!img || !img.getAttribute('src')) return;
card.style.backgroundImage = 'url("' + img.getAttribute('src').replace(/"/g, '%22') + '")';
G.to(card, { opacity: 1, scale: 1, rotate: -4, duration: 0.35, ease: 'power3.out', overwrite: 'auto' });
});
row.addEventListener('pointerleave', function () { G.to(card, { opacity: 0, scale: 0.6, rotate: 0, duration: 0.3, ease: 'power2.in', overwrite: 'auto' }); });
});
});
})();
(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();
})();