Creative Agency Website HTML Template — Free Snippet
Creative Agency Website template · 13 website sections · Plain HTML, CSS & JS · Customise it in the Website Builder
CategoryLanding Pages
Copy & paste
Source Code
Requires
<section class="st st-navbar-floating" data-uid="smvw6s7ob2rj7">
<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="smvw6s7ob4bni">
<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="smvw6s7ob7ts1">
<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="smvw6s7obje8z">
<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="smvw6s7obajpx">
<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="showcase" class="st st-scroll-ring" data-uid="smvw6s7obp92t">
<div class="st-wrap rg-head">
<p class="st-eyebrow" data-anim="item">More work</p>
<h2 class="st-h2" data-anim="item" data-anim-text>A few more <span class="hl">projects we love</span></h2>
<p class="st-lead" data-anim="item">Brand, web and product work for founders and growing teams. Click any project to see the story.</p>
</div>
<div class="rg-row" data-style="arc" data-tilt="on" data-reflect="on" data-details="below" data-cta="Read the story" data-ring role="region" aria-roledescription="carousel" aria-label="Featured cards">
<a class="rg-card" href="#results">
<img class="rg-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/hero-dashboard.png" alt="A data product dashboard designed by Northstar">
<span class="rg-body">
<span class="rg-tag">Product</span>
<span class="rg-title">Lumen Analytics</span>
<span class="rg-text">A new brand, site and product tour for a data company.</span>
</span>
</a>
<a class="rg-card" href="#results">
<img class="rg-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-product.jpg" alt="An audio brand product page">
<span class="rg-body">
<span class="rg-tag">E-commerce</span>
<span class="rg-title">Sona Audio</span>
<span class="rg-text">A launch campaign that sold out in nine days.</span>
</span>
</a>
<a class="rg-card" href="#results">
<img class="rg-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-hotel.jpg" alt="A boutique hotel website at dusk">
<span class="rg-body">
<span class="rg-tag">Hospitality</span>
<span class="rg-title">Casa Mar</span>
<span class="rg-text">A booking-first website for a small coastal hotel.</span>
</span>
</a>
<a class="rg-card" href="#results">
<img class="rg-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-podcast.jpg" alt="A podcast studio with two microphones">
<span class="rg-body">
<span class="rg-tag">Brand</span>
<span class="rg-title">Off the Record</span>
<span class="rg-text">Identity, site and artwork for a weekly show.</span>
</span>
</a>
<a class="rg-card" href="#results">
<img class="rg-img" width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-event.jpg" alt="A conference stage with spotlights">
<span class="rg-body">
<span class="rg-tag">Event</span>
<span class="rg-title">Futurelab Summit</span>
<span class="rg-text">Branding and a ticketing site for a two-day event.</span>
</span>
</a>
</div>
</section>
<section id="team" class="st st-team-carousel" data-uid="smvw6s7ob7erd">
<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="smvw6s7objynz">
<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="smvw6s7obw8v8">
<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="smvw6s7ob140f">
<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="smvw6s7ocygpj">
<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:[email protected]"><span>Start a project</span> <span aria-hidden="true">→</span></a>
<p class="fgi-email">[email protected]</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>
<section class="st st-back-to-top" data-uid="smvw6s7oc68l0">
<div class="btt" data-btt data-enabled="on" data-distance="500" data-pos="right" data-appear="fade" data-speed="0.8" data-mobile="on" data-shadow="on" style="--btt-size:52px;--btt-off:24px;--btt-radius:50%;--btt-speed:0.8s">
<div class="btt-demo" aria-hidden="true">
<span class="btt-bar btt-bar--lg"></span><span class="btt-bar"></span><span class="btt-bar btt-bar--md"></span><span class="btt-bar"></span><span class="btt-bar btt-bar--sm"></span>
<span class="btt-note">The button appears here once the page has scrolled</span>
</div><!--/btt-demo-->
<button type="button" class="btt-btn" aria-label="Back to top" title="Back to top"><svg class="btt-svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.400" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button>
</div>
</section>
<section class="st st-cursor-follower" data-uid="smvw6s7oce0gw">
<div class="cf" data-cf data-enabled="on" data-size="80" data-color="#ffffff" data-blend="difference" data-speed="0.18" data-border="0" data-border-style="solid" data-fill="on" data-grow="on" data-hide="off">
<div class="cf-stage" aria-hidden="true">
<p class="cf-word">Cur<b>sors</b></p>
<p class="cf-sub">Move your mouse over this box</p>
<div class="cf-art"></div>
<p class="cf-word cf-word--2">in <b>motion</b></p>
</div><!--/cf-stage-->
<span class="cf-dot" aria-hidden="true"></span>
</div>
</section>@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800;900&display=swap');
body{margin:0;background:#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}}
/* 3D Scroll Carousel */
.st-scroll-ring{padding:clamp(64px,8cqi,112px) 0;overflow:hidden;background:radial-gradient(ellipse 70% 55% at 50% 72%,color-mix(in srgb,var(--st-brand) 20%,var(--st-bg)),var(--st-bg) 72%)}
.rg-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;margin-bottom:clamp(28px,4cqi,52px)}
.rg-head .st-lead{max-width:34em}
.rg-row{display:flex;gap:clamp(16px,2cqi,28px);overflow-x:auto;scroll-snap-type:x mandatory;--rg-in:max(var(--st-pad),calc((100% - var(--st-max) * 1px) / 2 + var(--st-pad)));padding:18px var(--rg-in) 28px;scroll-padding-inline:var(--rg-in);scrollbar-width:none}
.rg-row::-webkit-scrollbar{display:none}
.rg-card{flex:none;width:clamp(240px,72cqi,320px);scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden;color:inherit;text-decoration:none;border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-brand) 35%,transparent);box-shadow:0 0 32px -6px color-mix(in srgb,var(--st-brand) 45%,transparent)}
.rg-img{width:100%;aspect-ratio:4/3;object-fit:cover;background:color-mix(in srgb,var(--st-text) 8%,transparent);-webkit-user-drag:none;user-select:none}
.rg-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 20px}
.rg-tag{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--st-brand)}
.rg-title{font:700 clamp(18px,.7cqi + 14px,21px)/1.25 var(--st-font-heading)}
.rg-text{color:var(--st-muted);font-size:15px;line-height:1.5}
.rg-card:focus-visible{outline:3px solid var(--st-brand);outline-offset:4px}
.st-scroll-ring.is-ring .rg-img{aspect-ratio:3/2}
.st-scroll-ring.is-ring .rg-row{position:relative;display:block;overflow:visible;scroll-snap-type:none;padding:0;height:clamp(330px,64cqi,420px);perspective:1500px;perspective-origin:50% 40%;touch-action:pan-y;cursor:grab}
.st-scroll-ring.is-ring .rg-row.is-drag{cursor:grabbing}
.st-scroll-ring.is-ring .rg-card{position:absolute;left:50%;top:50%;width:clamp(210px,62cqi,320px);will-change:transform,opacity;backface-visibility:hidden;transition:box-shadow .4s}
.st-scroll-ring.is-ring .rg-card.is-active{border-color:var(--st-brand);box-shadow:0 0 0 1px var(--st-brand),0 0 70px -4px color-mix(in srgb,var(--st-brand) 65%,transparent)}
.st-scroll-ring.is-pin{padding-block:clamp(24px,4vh,56px);min-height:calc(100vh - var(--rg-head,0px));box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
.st-scroll-ring.is-pin .rg-head{margin-bottom:clamp(8px,2vh,28px);gap:8px}
.st-scroll-ring.is-pin .rg-row{height:clamp(300px,calc(100vh - var(--rg-head,0px) - 420px),540px)}
.st-scroll-ring.is-pin .rg-card{width:clamp(220px,calc((100vh - var(--rg-head,0px) - 420px) * .85),340px)}
.st-scroll-ring.is-ring .rg-row::after{content:"";position:absolute;left:50%;bottom:-4px;width:min(820px,84%);height:90px;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--st-brand) 50%,transparent),transparent 70%);filter:blur(16px);pointer-events:none;z-index:0}
.st-scroll-ring.rg-reflect .rg-card{-webkit-box-reflect:below 4px linear-gradient(transparent 80%,rgba(255,255,255,.16))}
.st-scroll-ring.rg-reflect .rg-nav{margin-top:clamp(36px,6vh,56px)}
.st-scroll-ring.rg-below .rg-body{display:none}
.st-scroll-ring.rg-below .rg-img{aspect-ratio:16/10}
.st-scroll-ring.rg-below .rg-row{height:clamp(240px,48cqi,340px)}
.st-scroll-ring.rg-below.is-pin .rg-row{height:clamp(220px,calc(100vh - var(--rg-head,0px) - 600px),420px)}
.st-scroll-ring.rg-below.is-pin .rg-card{width:clamp(200px,calc((100vh - var(--rg-head,0px) - 600px) * 1.5),400px)}
.rg-cap{position:relative;z-index:200;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;max-width:34em;margin:clamp(24px,5vh,44px) auto 0;padding:0 24px}
.st-scroll-ring.rg-below .rg-cap{margin-top:clamp(4px,1.5vh,14px)}
.st-scroll-ring.rg-below.rg-reflect .rg-cap{margin-top:clamp(10px,2.5vh,24px)}
.rg-cap-tag{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--st-brand)}
.rg-cap-title{font:700 clamp(22px,1.2cqi + 15px,30px)/1.2 var(--st-font-heading)}
.rg-cap-text{color:var(--st-muted);font-size:16px;line-height:1.5}
.rg-cap-btn{margin-top:8px;display:inline-flex;align-items:center;padding:10px 22px;border-radius:999px;background:var(--st-brand);color:var(--st-brandText);font-weight:700;font-size:15px;text-decoration:none}
.rg-cap-btn:focus-visible{outline:3px solid var(--st-text);outline-offset:3px}
.rg-nav{position:relative;z-index:200;display:flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(16px,2.5cqi,28px)}
.rg-arrow{width:44px;height:44px;border-radius:50%;border:1px solid color-mix(in srgb,var(--st-brand) 55%,transparent);background:transparent;color:var(--st-text);font-size:18px;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.rg-arrow:hover{background:var(--st-brand);color:var(--st-brandText)}
.rg-arrow:focus-visible,.rg-dot:focus-visible{outline:3px solid var(--st-brand);outline-offset:3px}
.rg-dots{display:flex;gap:8px}
.rg-dot{width:10px;height:10px;padding:0;border-radius:50%;border:0;background:color-mix(in srgb,var(--st-text) 28%,transparent);cursor:pointer;transition:background .2s,transform .2s}
.rg-dot[aria-current="true"]{background:var(--st-brand);transform:scale(1.35)}
.rg-progress{position:relative;z-index:200;width:min(180px,40%);height:3px;margin:14px auto 0;border-radius:3px;overflow:hidden;background:color-mix(in srgb,var(--st-text) 16%,transparent)}
.rg-progress i{display:block;height:100%;transform-origin:0 50%;background:var(--st-brand)}
/* 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)}
/* Back to Top Button */
.st-back-to-top{overflow:visible;container-type:normal;height:0;min-height:0;padding:0;background:transparent}
.st-back-to-top:has(.btt.is-preview){height:auto;padding:clamp(20px,3vw,40px) var(--st-pad);background:color-mix(in srgb,var(--st-text) 6%,var(--st-bg))}
.btt{--btt-size:52px;--btt-off:24px;--btt-radius:50%;--btt-speed:.8s;--btt-bg:var(--st-brand);--btt-fg:var(--st-btn-text)}
.btt-btn{position:fixed;bottom:var(--btt-off);z-index:2147482500;display:grid;place-items:center;width:var(--btt-size);height:var(--btt-size);padding:0;border:0;border-radius:var(--btt-radius);background:var(--btt-bg);color:var(--btt-fg);cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,transform .3s ease,visibility 0s .3s,box-shadow .2s ease,background .2s ease}
.btt[data-pos=right] .btt-btn{right:var(--btt-off)}
.btt[data-pos=left] .btt-btn{left:var(--btt-off)}
.btt[data-appear=slide] .btt-btn{transform:translateY(28px)}
.btt[data-appear=zoom] .btt-btn{transform:scale(.5)}
.btt[data-shadow=on] .btt-btn{box-shadow:0 12px 28px -8px rgba(15,23,42,.45)}
.btt.is-visible .btt-btn{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .3s ease,transform .3s ease,visibility 0s,box-shadow .2s ease,background .2s ease}
.btt.is-visible .btt-btn:hover{transform:translateY(-3px)}
.btt.is-visible .btt-btn:active{transform:translateY(0) scale(.96)}
.btt-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--btt-bg) 55%,#fff);outline-offset:3px}
.btt-svg{width:calc(var(--btt-size) * .46);height:calc(var(--btt-size) * .46)}
@media (max-width:899px){.btt[data-mobile=off] .btt-btn{display:none}}
.btt[data-enabled=off] .btt-btn{display:none}
.btt-demo{display:none}
.btt.is-preview .btt-demo{position:relative;display:flex;flex-direction:column;gap:14px;min-height:320px;padding:34px 30px;border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-bg);box-shadow:0 20px 50px -24px color-mix(in srgb,var(--st-text) 40%,transparent)}
.btt-bar{display:block;height:14px;width:100%;border-radius:7px;background:color-mix(in srgb,var(--st-text) 12%,transparent)}
.btt-bar--lg{height:22px;width:62%;background:color-mix(in srgb,var(--st-text) 22%,transparent)}
.btt-bar--md{width:84%}.btt-bar--sm{width:46%}
.btt-note{margin-top:auto;font-size:13px;color:var(--st-muted)}
.btt.is-preview .btt-btn{position:absolute;right:calc(var(--st-pad) + 18px);bottom:calc(clamp(20px,3vw,40px) + 18px);opacity:1;visibility:visible;pointer-events:auto;transform:none}
.btt.is-preview[data-pos=left] .btt-btn{right:auto;left:calc(var(--st-pad) + 18px)}
@media (prefers-reduced-motion:reduce){.btt-btn{transition:none}}
@media print{.btt{display:none}}
/* Cursor Follower (Blend Mode Circle) */
.st-cursor-follower{overflow:visible;container-type:normal;height:0;min-height:0;padding:0;background:transparent}
.st-cursor-follower:has(.cf.is-preview){height:auto;padding:clamp(20px,3vw,40px) var(--st-pad);background:var(--st-bg)}
.cf-stage{display:none}
.cf.is-preview .cf-stage{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;overflow:hidden;min-height:clamp(340px,40cqi,480px);border-radius:calc(var(--st-radius) * 1.2px);background:linear-gradient(135deg,#1f1b3a,#3b1d5a 55%,#0f2a4a);color:#f4f4f6;cursor:none}
.cf-word{margin:0;font:900 clamp(56px,11cqi,128px)/.95 var(--st-font-heading);letter-spacing:-.04em;text-transform:lowercase;color:#f4f4f6}
.cf-word b{font-weight:900;background:linear-gradient(90deg,#f472b6,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
.cf-word--2{color:rgba(244,244,246,.9)}
.cf-sub{margin:0;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,244,246,.7)}
.cf-art{width:min(280px,60%);height:70px;border-radius:999px;background:linear-gradient(90deg,#22d3ee,#f59e0b,#f472b6)}
.cf-dot{position:absolute;left:0;top:0;z-index:5;display:none;box-sizing:border-box;border-radius:50%;pointer-events:none;will-change:transform}
.cf.is-preview .cf-dot{display:block}
@media (hover:none){.cf:not(.is-preview) .cf-dot{display:none}}
@media print{.cf-dot{display:none}}
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var anim = G && !reduce;
document.querySelectorAll('.st').forEach(function (sec) {
var btn = sec.querySelector('[data-menu-toggle]');
var panel = sec.querySelector('[data-menu]');
if (btn && panel) {
sec.classList.add('has-menu');
var isOpen = false;
var mobile = function () { return getComputedStyle(btn).display !== 'none'; };
// The toggle and the panel's controls, in document order (the toggle may come after the panel)
var focusables = function () {
return Array.prototype.filter.call(sec.querySelectorAll('a[href], button'), function (el) { return el === btn || panel.contains(el); });
};
var open = function () {
isOpen = true;
sec.classList.add('menu-open');
btn.setAttribute('aria-expanded', 'true');
if (anim) {
G.fromTo(panel, { opacity: 0, y: -12 }, { opacity: 1, y: 0, duration: 0.35, ease: 'power3.out', clearProps: 'transform,opacity' });
G.fromTo(panel.querySelectorAll('[data-menu-item]'), { opacity: 0, y: -8 }, { opacity: 1, y: 0, duration: 0.3, stagger: 0.04, delay: 0.05, ease: 'power2.out', clearProps: 'transform,opacity' });
}
var first = panel.querySelector('a[href], button');
if (first) first.focus();
};
var close = function (returnFocus) {
if (!isOpen) return;
isOpen = false;
btn.setAttribute('aria-expanded', 'false');
var done = function () { sec.classList.remove('menu-open'); };
if (anim) G.to(panel, { opacity: 0, y: -8, duration: 0.2, ease: 'power2.in', onComplete: function () { done(); G.set(panel, { clearProps: 'transform,opacity' }); } });
else done();
if (returnFocus) btn.focus();
};
btn.addEventListener('click', function () { if (isOpen) close(false); else open(); });
document.addEventListener('keydown', function (e) {
if (!isOpen) return;
if (e.key === 'Escape') { close(true); return; }
if (e.key === 'Tab') {
var f = focusables(), first = f[0], last = f[f.length - 1];
if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
}
});
document.addEventListener('click', function (e) { if (isOpen && !sec.contains(e.target)) close(false); });
panel.addEventListener('click', function (e) { if (e.target.closest('a')) close(false); });
window.addEventListener('resize', function () { if (isOpen && !mobile()) close(false); });
}
sec.querySelectorAll('[data-dismiss]').forEach(function (x) {
x.addEventListener('click', function () {
var box = x.closest('[data-dismissable]');
if (!box) return;
if (anim) G.to(box, { height: 0, opacity: 0, paddingTop: 0, paddingBottom: 0, duration: 0.35, ease: 'power2.inOut', onComplete: function () { box.remove(); } });
else box.remove();
});
});
if (sec.querySelector('[data-sticky-flag]')) {
var hideOn = !!sec.querySelector('[data-hide-flag]');
var last = window.scrollY, hidden = false;
var onScroll = function () {
var y = window.scrollY;
sec.classList.toggle('is-scrolled', y > 8);
if (hideOn && !sec.classList.contains('menu-open')) {
var down = y > last && y > 120;
if (down !== hidden) {
hidden = down;
if (anim) G.to(sec, { yPercent: down ? -100 : 0, duration: 0.35, ease: 'power2.out' });
else sec.style.transform = down ? 'translateY(-100%)' : '';
}
}
last = y;
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
}
});
})();
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!G || reduce || window.ST_STILL) return;
if (window.ScrollTrigger) G.registerPlugin(ScrollTrigger);
document.querySelectorAll('.st [data-count]').forEach(function (el) {
var host = el.closest('.st');
if (host && /"count":true/.test(host.getAttribute('data-scroll') || '')) return; // counted by its scroll animation
var text = el.textContent;
var m = text.match(/\d[\d,]*(\.\d+)?/);
if (!m) return;
var raw = m[0];
var dec = m[1] ? m[1].length - 1 : 0;
var commas = raw.indexOf(',') > -1;
var target = parseFloat(raw.replace(/,/g, ''));
var pre = text.slice(0, m.index), post = text.slice(m.index + raw.length);
var fmt = function (v) {
var s = v.toFixed(dec);
if (commas) { var p = s.split('.'); p[0] = p[0].replace(/\B(?=(\d{3})+(?!\d))/g, ','); s = p.join('.'); }
return pre + s + post;
};
el.setAttribute('aria-label', text.trim());
var o = { v: 0 };
// The real value stays in place until the count starts (it starts from 0 on enter)
G.fromTo(o, { v: 0 }, {
v: target, duration: 2, ease: 'power2.out', immediateRender: false,
scrollTrigger: window.ScrollTrigger ? { trigger: el, start: 'top 90%', once: true } : undefined,
onUpdate: function () { el.textContent = fmt(o.v); },
onComplete: function () { el.textContent = text; }
});
});
})();
(function () {
var G = window.gsap, reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!G || reduce) return;
if (window.ScrollTrigger) G.registerPlugin(ScrollTrigger);
var still = window.ST_STILL && !window.ST_SCROLL_FX;
var hover = window.matchMedia && window.matchMedia('(hover: hover) and (pointer: fine)').matches;
var clamp = function (v, a, b) { return Math.max(a, Math.min(b, v)); };
function build(row, pinned) {
var sec = row.closest('.st');
var cards = Array.prototype.slice.call(row.children).filter(function (c) { return c.classList.contains('rg-card'); });
var n = cards.length;
if (n < 3) return null;
var style = row.getAttribute('data-style') || 'ring';
var tiltOn = hover && row.getAttribute('data-tilt') !== 'off';
var reflect = row.getAttribute('data-reflect') !== 'off';
var below = row.getAttribute('data-details') === 'below';
var ctaText = row.getAttribute('data-cta') || 'View details';
var imgs = cards.map(function (c) { return c.querySelector('.rg-img'); });
var step = Math.min(48, 360 / n), rad = Math.PI / 180, R = 300, W = 300, active = -1, st = null;
var obj = { pos: pinned ? 0 : Math.floor((n - 1) / 2) }; // free mode: a middle card in front, cards on both sides
var T = { nx: 0, ny: 0 };
sec.classList.add('is-ring');
sec.classList.toggle('is-pin', pinned);
sec.classList.toggle('rg-reflect', reflect);
sec.classList.toggle('rg-below', below);
var nav = document.createElement('div');
nav.className = 'rg-nav';
var prev = document.createElement('button'), next = document.createElement('button'), dots = document.createElement('div');
prev.type = next.type = 'button';
prev.className = next.className = 'rg-arrow';
prev.textContent = String.fromCharCode(8592); next.textContent = String.fromCharCode(8594);
prev.setAttribute('aria-label', 'Previous card'); next.setAttribute('aria-label', 'Next card');
dots.className = 'rg-dots';
var dotEls = cards.map(function (c, i) {
var d = document.createElement('button');
d.type = 'button'; d.className = 'rg-dot'; d.setAttribute('aria-label', 'Show card ' + (i + 1) + ' of ' + n);
d.addEventListener('click', function () { go(i); });
dots.appendChild(d);
return d;
});
nav.appendChild(prev); nav.appendChild(dots); nav.appendChild(next);
var bar = document.createElement('div');
bar.className = 'rg-progress'; bar.setAttribute('aria-hidden', 'true');
var fill = document.createElement('i');
bar.appendChild(fill);
var extra = [nav, bar], cap = null, capTag, capTitle, capText, capBtn;
if (below) {
cap = document.createElement('div');
cap.className = 'rg-cap';
cap.setAttribute('aria-live', 'polite');
capTag = document.createElement('span'); capTag.className = 'rg-cap-tag';
capTitle = document.createElement('span'); capTitle.className = 'rg-cap-title';
capText = document.createElement('span'); capText.className = 'rg-cap-text';
capBtn = document.createElement('a'); capBtn.className = 'rg-cap-btn';
cap.appendChild(capTag); cap.appendChild(capTitle); cap.appendChild(capText); cap.appendChild(capBtn);
extra.unshift(cap);
}
var anchor = row;
extra.forEach(function (el) { anchor.insertAdjacentElement('afterend', el); anchor = el; });
var go = function (i) {
i = clamp(i, 0, n - 1);
if (pinned) { if (st) window.scrollTo({ top: st.start + (i / (n - 1)) * (st.end - st.start), behavior: 'smooth' }); }
else G.to(obj, { pos: i, duration: 0.6, ease: 'power2.inOut', overwrite: true, onUpdate: render });
};
prev.addEventListener('click', function () { go(Math.max(0, active) - 1); });
next.addEventListener('click', function () { go(Math.max(0, active) + 1); });
var onClick = [], onFocus = [];
if (!still) cards.forEach(function (c, i) {
var click = function (e) { if (i !== active) { e.preventDefault(); go(i); } };
var focus = function () { if (i !== active) go(i); };
c.addEventListener('click', click); c.addEventListener('focus', focus);
onClick.push(click); onFocus.push(focus);
});
var measure = function () {
W = cards[0].offsetWidth || 300;
R = (W * 1.1) / (2 * Math.sin(step * rad / 2));
};
// Where a card sits when it is "off" places from the front (negative = left)
var place = function (off) {
var abs = Math.abs(off), sg = off < 0 ? -1 : 1, c = Math.min(abs, 1), p;
if (style === 'coverflow') {
p = { x: sg * (c * W * 0.62 + Math.max(0, abs - 1) * W * 0.3), y: 0, z: -c * W * 0.55 - Math.max(0, abs - 1) * W * 0.12, ry: sg * c * 52, rz: 0, o: 1 - Math.max(0, abs - 1.1) * 0.5, s: 1 - Math.min(abs, 2) * 0.05 };
} else if (style === 'stack') {
if (off >= 0) p = { x: off * W * 0.13, y: -off * 12, z: -off * W * 0.35, ry: -Math.min(off, 3) * 5, rz: 0, o: 1 - off * 0.24, s: 1 - off * 0.04 };
else p = { x: off * W * 0.7, y: 0, z: 0, ry: off * 40, rz: off * 4, o: 1 + off * 1.3, s: 1 };
} else if (style === 'arc') {
p = { x: off * W * 0.95, y: off * off * W * 0.07, z: -off * off * W * 0.2, ry: off * 22, rz: off * 2.5, o: 1 - Math.max(0, abs - 1.2) * 0.6, s: 1 - Math.min(abs, 2) * 0.04 };
} else {
var a = off * step, aa = Math.abs(a);
p = { x: Math.sin(a * rad) * R, y: 0, z: Math.cos(a * rad) * R - R, ry: a, rz: 0, o: 1 - Math.max(0, aa - 30) / 75, s: 1 - Math.min(aa, 90) / 450 };
}
p.abs = abs;
return p;
};
var showCaption = function (c) {
var t = function (sel) { var e = c.querySelector(sel); return e ? e.textContent : ''; };
capTag.textContent = t('.rg-tag'); capTitle.textContent = t('.rg-title'); capText.textContent = t('.rg-text');
capBtn.textContent = ctaText; capBtn.setAttribute('href', c.getAttribute('href') || '#');
capBtn.setAttribute('aria-label', ctaText + ': ' + t('.rg-title'));
G.fromTo(cap.children, { autoAlpha: 0, y: 10 }, { autoAlpha: 1, y: 0, duration: 0.45, stagger: 0.05, ease: 'power3.out', overwrite: true });
};
var render = function () {
var pos = obj.pos, near = Math.round(pos);
cards.forEach(function (c, i) {
var p = place(i - pos), w = Math.max(0, 1 - p.abs * 1.6);
var o = clamp(p.o, 0, 1);
G.set(c, {
xPercent: -50, yPercent: reflect ? -58 : -50,
x: p.x, y: p.y, z: p.z,
rotationY: p.ry + (tiltOn ? T.nx * 9 * w : 0), rotationX: tiltOn ? T.ny * -7 * w : 0, rotationZ: p.rz,
scale: p.s,
autoAlpha: o < 0.04 ? 0 : o,
filter: p.abs < 0.17 ? 'none' : 'blur(' + Math.min(3, p.abs * 2 - 0.3).toFixed(2) + 'px)',
zIndex: 100 - Math.round(p.abs * 10)
});
if (tiltOn && imgs[i]) G.set(imgs[i], { x: -T.nx * 10 * w, y: -T.ny * 7 * w, scale: 1 + 0.06 * w });
});
G.set(fill, { scaleX: n > 1 ? clamp(pos / (n - 1), 0, 1) : 1 });
if (near !== active) {
active = near;
cards.forEach(function (c, i) { c.classList.toggle('is-active', i === near); });
dotEls.forEach(function (d, i) { if (i === near) d.setAttribute('aria-current', 'true'); else d.removeAttribute('aria-current'); });
if (cap) showCaption(cards[near]);
}
};
// Mouse tilt
var onMove, onLeave;
if (tiltOn) {
var aim = function (nx, ny) { G.to(T, { nx: nx, ny: ny, duration: 0.6, ease: 'power3.out', overwrite: 'auto', onUpdate: render }); };
onMove = function (e) { var r = row.getBoundingClientRect(); aim(clamp((e.clientX - r.left - r.width / 2) / (r.width / 2), -1, 1), clamp((e.clientY - r.top - r.height / 2) / (r.height / 2), -1, 1)); };
onLeave = function () { aim(0, 0); };
sec.addEventListener('pointermove', onMove); sec.addEventListener('pointerleave', onLeave);
}
// Drag or swipe: free mode follows the finger and settles on a card; pinned mode moves one card per swipe
var drag = null, suppress = false;
var onDown = function (e) { if (e.button > 0) return; drag = { x: e.clientX, y: e.clientY, pos: obj.pos, on: false }; };
var onDrag = function (e) {
if (!drag) return;
var dx = e.clientX - drag.x;
if (!drag.on) {
if (Math.abs(dx) < 10 || Math.abs(dx) < Math.abs(e.clientY - drag.y)) return;
drag.on = true;
try { row.setPointerCapture(e.pointerId); } catch (err) { /* not supported */ }
row.classList.add('is-drag');
if (!pinned) G.killTweensOf(obj);
}
if (!pinned) { obj.pos = clamp(drag.pos - dx / (W * 0.6), 0, n - 1); render(); }
};
var onUp = function (e) {
var d = drag; drag = null;
if (!d || !d.on) return;
row.classList.remove('is-drag');
suppress = true; setTimeout(function () { suppress = false; }, 60);
var dx = e.clientX - d.x;
if (pinned) { if (Math.abs(dx) > 50) go(Math.max(0, active) + (dx < 0 ? 1 : -1)); return; }
var target = Math.round(d.pos - dx / (W * 0.6));
if (target === Math.round(d.pos) && Math.abs(dx) > 40) target += dx < 0 ? 1 : -1;
go(target);
};
var onSwallow = function (e) { if (suppress) { e.preventDefault(); e.stopPropagation(); } };
row.addEventListener('pointerdown', onDown); row.addEventListener('pointermove', onDrag);
row.addEventListener('pointerup', onUp); row.addEventListener('pointercancel', onUp);
row.addEventListener('click', onSwallow, true);
var cleanup = function () {
if (onMove) { sec.removeEventListener('pointermove', onMove); sec.removeEventListener('pointerleave', onLeave); }
row.removeEventListener('pointerdown', onDown); row.removeEventListener('pointermove', onDrag);
row.removeEventListener('pointerup', onUp); row.removeEventListener('pointercancel', onUp);
row.removeEventListener('click', onSwallow, true);
G.killTweensOf(T); G.killTweensOf(obj);
cards.forEach(function (c, i) { c.removeEventListener('click', onClick[i]); c.removeEventListener('focus', onFocus[i]); c.classList.remove('is-active'); G.set(c, { clearProps: 'all' }); if (imgs[i]) G.set(imgs[i], { clearProps: 'all' }); });
extra.forEach(function (el) { el.remove(); });
row.classList.remove('is-drag');
sec.style.removeProperty('--rg-head');
sec.classList.remove('is-ring', 'is-pin', 'rg-reflect', 'rg-below');
};
// A sticky header stays on screen, so the section pins just below it and is that much shorter
var head = function () { var h = 0; document.querySelectorAll('.st').forEach(function (m) { if (m !== sec && m.querySelector('[data-sticky-flag]')) h = Math.max(h, m.offsetHeight); }); return h; };
var setHead = function () { sec.style.setProperty('--rg-head', (pinned ? head() : 0) + 'px'); };
setHead(); measure(); render();
if (!pinned) return cleanup;
var tw = G.to(obj, {
pos: n - 1, ease: 'none', onUpdate: render,
scrollTrigger: {
trigger: sec, start: function () { return 'top ' + head(); }, end: function () { return '+=' + Math.round((n - 1) * window.innerHeight * 0.55); },
pin: true, scrub: 0.5, anticipatePin: 1, invalidateOnRefresh: true,
snap: { snapTo: 1 / (n - 1), inertia: false, duration: { min: 0.2, max: 0.6 }, delay: 0.08, ease: 'power2.inOut' },
onRefresh: function () { setHead(); measure(); render(); }
}
});
st = tw.scrollTrigger;
return function () { st.kill(); tw.kill(); cleanup(); };
}
var mm = G.matchMedia();
var run = function (pinned) {
return function () {
var made = [];
document.querySelectorAll('.st [data-ring]').forEach(function (row) { var c = build(row, pinned); if (c) made.push(c); });
return function () { made.forEach(function (f) { f(); }); };
};
};
mm.add('(min-width: 900px)', run(!still && !!window.ScrollTrigger));
mm.add('(max-width: 899px)', run(false));
})();
(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 () {
var inline = window.ST_STILL || window.ST_PREVIEW || window.ST_POPUP_INLINE;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
document.querySelectorAll('.st [data-btt]').forEach(function (root) {
if (root.getAttribute('data-btt-ready')) return;
root.setAttribute('data-btt-ready', '1');
var btn = root.querySelector('.btt-btn');
var demo = root.querySelector('.btt-demo');
if (!btn || root.getAttribute('data-enabled') === 'off') { if (demo && !inline) demo.parentNode.removeChild(demo); return; }
if (!inline && demo) demo.parentNode.removeChild(demo);
if (inline) {
root.classList.add('is-preview', 'is-visible');
btn.addEventListener('click', function (e) { e.preventDefault(); });
return;
}
var dist = parseFloat(root.getAttribute('data-distance')) || 0;
var secs = parseFloat(root.getAttribute('data-speed'));
if (isNaN(secs)) secs = 0.8;
var ticking = false;
function check() { ticking = false; root.classList.toggle('is-visible', (window.pageYOffset || document.documentElement.scrollTop) > dist); }
window.addEventListener('scroll', function () { if (!ticking) { ticking = true; requestAnimationFrame(check); } }, { passive: true });
check();
var stopped = false;
['wheel', 'touchstart', 'keydown'].forEach(function (ev) { window.addEventListener(ev, function () { stopped = true; }, { passive: true }); });
btn.addEventListener('click', function () {
var from = window.pageYOffset || document.documentElement.scrollTop;
if (reduce || secs <= 0 || from < 2) { window.scrollTo({ top: 0, left: 0, behavior: 'instant' }); return; }
stopped = false;
var t0 = performance.now(), dur = secs * 1000;
(function step(t) {
var p = Math.min(1, (t - t0) / dur);
var e = p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2;
window.scrollTo({ top: from * (1 - e), left: 0, behavior: 'instant' });
if (p < 1 && !stopped) requestAnimationFrame(step);
})(t0);
});
});
})();
(function () {
var inline = window.ST_STILL || window.ST_PREVIEW || window.ST_POPUP_INLINE;
var fine = window.matchMedia && window.matchMedia('(hover: hover) and (pointer: fine)').matches;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var GROW = 'a,button,[role=button],input,select,textarea,label,summary,[data-cursor-grow]';
document.querySelectorAll('.st [data-cf]').forEach(function (root) {
if (root.getAttribute('data-cf-ready')) return;
root.setAttribute('data-cf-ready', '1');
var dot = root.querySelector('.cf-dot');
if (!dot) return;
var stage = root.querySelector('.cf-stage');
var preview = inline && stage;
if (root.getAttribute('data-enabled') === 'off' || (!preview && !fine)) { dot.parentNode.removeChild(dot); return; }
var num = function (name, d) { var v = parseFloat(root.getAttribute(name)); return isNaN(v) ? d : v; };
var size = num('data-size', 80), color = root.getAttribute('data-color') || '#ffffff';
var blend = root.getAttribute('data-blend') || 'difference', speed = reduce ? 1 : Math.min(1, Math.max(0.02, num('data-speed', 0.18)));
var fill = root.getAttribute('data-fill') !== 'off', grow = root.getAttribute('data-grow') !== 'off';
var bw = num('data-border', 0); if (!fill && bw < 2) bw = 2;
var s = dot.style;
s.width = s.height = size + 'px';
s.marginLeft = s.marginTop = (-size / 2) + 'px';
s.background = fill ? color : 'transparent';
s.mixBlendMode = blend;
s.border = bw ? bw + 'px ' + (root.getAttribute('data-border-style') || 'solid') + ' ' + color : '0';
s.opacity = '0';
s.transition = 'opacity .25s ease';
var host = null;
if (preview) { root.classList.add('is-preview'); stage.appendChild(dot); host = stage; }
else {
if (stage) stage.parentNode.removeChild(stage);
document.body.appendChild(dot);
s.position = 'fixed'; s.zIndex = '2147483000'; s.display = 'block';
if (root.getAttribute('data-hide') === 'on') {
var st = document.createElement('style');
st.setAttribute('data-cf-css', '');
st.textContent = 'html,html *{cursor:none!important}';
document.head.appendChild(st);
}
}
var tx = 0, ty = 0, x = 0, y = 0, sc = 1, tsc = 1, raf = 0, seen = false;
function frame() {
x += (tx - x) * speed; y += (ty - y) * speed; sc += (tsc - sc) * 0.2;
s.transform = 'translate3d(' + x.toFixed(2) + 'px,' + y.toFixed(2) + 'px,0) scale(' + sc.toFixed(3) + ')';
raf = (Math.abs(tx - x) > 0.15 || Math.abs(ty - y) > 0.15 || Math.abs(tsc - sc) > 0.004) ? requestAnimationFrame(frame) : 0;
}
function kick() { if (!raf) raf = requestAnimationFrame(frame); }
function move(e) {
var px = e.clientX, py = e.clientY;
if (host) { var r = host.getBoundingClientRect(); px -= r.left; py -= r.top; }
tx = px; ty = py;
if (!seen) { seen = true; x = tx; y = ty; s.opacity = '1'; }
s.opacity = '1';
if (grow && !host) tsc = (e.target && e.target.closest && e.target.closest(GROW)) ? 1.6 : 1;
kick();
}
var area = host || document;
area.addEventListener('mousemove', move, { passive: true });
area.addEventListener('mouseleave', function () { s.opacity = '0'; });
if (!host) { document.documentElement.addEventListener('mouseleave', function () { s.opacity = '0'; }); document.addEventListener('mouseenter', function () { if (seen) s.opacity = '1'; }); }
});
})();
(function () {
if (!window.gsap) return;
if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
if (window.ScrollTrigger) gsap.registerPlugin(ScrollTrigger);
var TEXT = window.SplitText ? {"split":"words","part":"words","mask":"words","vars":{"yPercent":110,"stagger":0.06,"duration":0.8}} : null;
if (TEXT) gsap.registerPlugin(SplitText);
function run() {
document.querySelectorAll('.st:not([data-scroll])').forEach(function (section) {
var heads = TEXT ? section.querySelectorAll('[data-anim-text]') : [];
var items = section.querySelectorAll(heads.length ? '[data-anim="item"]:not([data-anim-text])' : '[data-anim="item"]');
var media = section.querySelectorAll('[data-anim="media"]');
var tl = gsap.timeline({
defaults: { ease: 'power3.out', duration: 0.80 },
scrollTrigger: window.ScrollTrigger ? (window.ST_PREVIEW ? { trigger: section, start: 'top 80%', end: function () { var pin = ScrollTrigger.getAll().filter(function (t) { return t.pin === section; })[0]; return pin ? pin.end + section.offsetHeight : 'bottom top'; }, toggleActions: 'play reset play reset' } : { trigger: section, start: 'top 80%', once: true }) : undefined
});
Array.prototype.forEach.call(heads, function (el, i) {
var opts = { type: TEXT.split };
if (TEXT.mask) opts.mask = TEXT.mask;
var parts = SplitText.create(el, opts)[TEXT.part];
// The mask clips each line or word to its line box, which cuts off descenders (g, y, p):
// give the mask a little room below and take it back with a negative margin
if (TEXT.mask) Array.prototype.forEach.call(parts, function (p) { var m = p.parentElement; if (m && m !== el) { m.style.paddingBottom = '.22em'; m.style.marginBottom = '-.22em'; } });
tl.from(parts, Object.assign({}, TEXT.vars), i ? '<0.1' : 0);
});
if (items.length) tl.from(items, {"y":28,"opacity":0,"stagger":0.09,"clearProps":"transform,opacity"}, heads.length ? '<0.2' : 0);
if (media.length) tl.from(media, {"y":40,"opacity":0,"duration":1.1,"clearProps":"transform,opacity"}, items.length || heads.length ? '<0.15' : 0);
});
}
// Split text only after the fonts load, so lines break where they finally will
if (TEXT && document.fonts && document.fonts.ready) document.fonts.ready.then(run); else run();
})();
Extend with AI
Take This Template Further With AI
Give this prompt to an AI assistant to generate your own version of the Creative Agency Website template: swap in your business name, services and tone, add or remove sections, translate it, or turn the page into a Next.js project or a WordPress theme. Use the template above as the visual reference, so you and the AI start from a design that already works.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
text
Build a complete creative agency website for “Northstar” as clean HTML, CSS and a little JavaScript.
Page structure, top to bottom:
1. Floating Pill Navbar
2. Centred Gradient Hero: “We design brands people remember”
3. Bento Grid Features: “Everything you need to launch”
4. Animated Stats Counters: “Work that moves the numbers”
5. Case Study Showcase: “Work that moved the numbers”
6. 3D Scroll Carousel: “A few more projects we love”
7. Team Carousel: “Small team, big ideas”
8. Testimonial Spotlight: “Aisha Bello”
9. Editorial Post List: “Notes from the studio”
10. Floating Social Share Bar
11. Big Wordmark Footer
12. Back to Top Button
13. Cursor Follower (Blend Mode Circle)
Look and feel:
- Colours as CSS custom properties: brand #818cf8, page background #0b1020, cards #161c33, text #f1f5f9, muted text #94a3b8. Corner radius 14px, content width 1200px.
- Headings in Plus Jakarta Sans, body text in Inter (load both from Google Fonts with display=swap).
- Mobile first. Sections use CSS grid or flexbox and stack cleanly below 700px.
Content:
- Write real, believable creative copy for every section instead of lorem ipsum: specific offers, numbers, names and calls to action.
- One clear primary action in the hero and again near the end.
Quality:
- Semantic HTML (header, main, section, footer) with exactly one h1, the hero headline, and one h2 per section.
- Accessible: alt text on every image, visible focus states, labelled form fields, buttons and links with clear text, and prefers-reduced-motion respected.
- SEO: title “Northstar: Independent Brand, Web and Product Design Studio”, a meta description of 150 to 160 characters, Open Graph tags and JSON-LD that suits a creative business.
- Optional: a subtle GSAP ScrollTrigger fade-up on section headings, with content visible without JavaScript.
Also create these pages with the same navbar, footer and theme, and link them from the menu:
- Services (services.html)
- Work (work.html)
- About (about.html)
- Contact (contact.html)
- Journal (journal.html)
- Article (article.html)
- Privacy (privacy.html)Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
What's included
Features
13 ready-made website sections assembled into one finished creative agency website page: Floating Pill Navbar, Centred Gradient Hero, Bento Grid Features, Animated Stats Counters, Case Study Showcase, 3D Scroll Carousel, Team Carousel, Testimonial Spotlight, Editorial Post List, Floating Social Share Bar, Big Wordmark Footer, Back to Top Button, Cursor Follower (Blend Mode Circle)
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
A floating back to top button that appears as visitors scroll, on every page of the multi-page version
A cursor follower circle that inverts the text and images under it with a blend mode
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.
Interactive extras built in
Beyond the core sections, this template adds a floating back to top button that appears after the visitor scrolls, so a long page is easy to leave and return; a circle that follows the cursor and inverts the page beneath it with a blend mode, adding a bold, playful touch; and an About us section on the About page with the studio's story, headline numbers and values. Each one has its own page in the Website Section Templates library (Back to Top Button, Cursor Follower, About Us & Our Story), where you can try its settings on their own, and you can edit, move or remove any of them in the Website Builder.
Built from website section templates
The 13 Sections Behind This 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
- 3D Scroll Carousela coverflow-style carousel of more projects, so visitors can keep browsing work after the featured case study without leaving the page
- 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"
- Back to Top Buttona floating back to top button that appears after the visitor scrolls, so a long page is easy to leave and return
- Cursor Follower (Blend Mode Circle)a circle that follows the cursor and inverts the page beneath it with a blend mode, adding a bold, playful touch
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 adds a floating back to top button, a cursor follower circle and an About us section with the story, facts and values. Each is a section you can edit, move or remove in the Website Builder, and each has its own page in the Website Section Templates library.
It is assembled from 13 templates in the free Website Section Templates library: Floating Pill Navbar, Centred Gradient Hero, Bento Grid Features, Animated Stats Counters, Case Study Showcase, 3D Scroll Carousel, Team Carousel, Testimonial Spotlight, Editorial Post List, Floating Social Share Bar, Big Wordmark Footer, Back to Top Button, Cursor Follower (Blend Mode Circle). 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.