Personal Portfolio Website HTML Template — Free Snippet
Personal Portfolio Website template · 9 website sections · Plain HTML, CSS & JS · Customise it in the Website Builder
CategoryLanding Pages
What's included
Features
9 ready-made website sections assembled into one finished personal portfolio website page: Floating Pill Navbar, Personal Portfolio Hero, Icon Grid Features, Case Study Showcase, Testimonial Carousel, Blog Post Cards, Contact Form With Details, Floating Social Share Bar, Minimal Footer
Every section links to its own page in the Website Section Templates library, where you can edit it on its own
One theme drives the whole page (colours, fonts, corner radius, width), so changing the brand takes a minute
Container-query responsive: each section adapts to the width it is placed in, from phone to desktop
GSAP entrance animations and scroll effects load from a CDN, and switch off for visitors who prefer reduced motion
Also available as a 6-page website in the builder, sharing one navbar, footer and theme
Plain HTML, CSS and JavaScript: copy the code here or export it to React, Vue, Angular or Tailwind
About this UI Snippet
A One-Page Freelancer Portfolio That Answers the Client's Questions in Order
A prospective client scanning a freelancer's site wants three answers fast: who are you, can you do my job, and are you free? This layout is arranged around those. The hero has a real photo and an availability badge, so the "are you free" question is answered before it is asked. Services come next in a short icon grid, then a case study with a result, which is stronger proof than a gallery of screenshots.
Testimonials come after the work, where they confirm what the client has just seen. Writing and contact finish the page: blog cards show you think about your craft in public, and the contact form with details (email, location, response time) makes the final step easy. A floating share bar keeps the page easy to pass between people, which is how freelance work often spreads.
Swap the sample details for yours and keep the order. It is the one-page layout from the Personal Portfolio Website template; open it in the Website Builder to change the theme, add your own images and export.
Built from website section templates
The 9 Sections Behind This Personal Portfolio 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 with short anchor links, enough for a one-page site
- Personal Portfolio Heroa real photo, one sentence on what you do and a badge showing whether you are taking work
- Icon Grid Featureswhat you do in six short blocks, so a client can see at once whether you cover their need
- Case Study Showcaseone project told with its result, the strongest proof a freelancer can show
- Testimonial Carouselclient quotes in a carousel, placed after the work they are vouching for
- Blog Post Cardsrecent writing as cards, which shows you think about your craft outside paid work
- Contact Form With Detailsa contact form beside your email, location and usual response time, so reaching out is easy
- Floating Social Share Bara floating bar that makes the page easy to share between clients and collaborators
- Minimal Footera minimal footer with your social links and a copyright line
Step by step
How to Use
- 1Open the template in the Website BuilderPress "Start using this template" to open the Personal Portfolio Website in the Website Builder. Everything is edited with forms in a side panel; no code is needed.
- 2Set your availability honestlyEdit the badge in the hero to your real status, such as "Booking for March" or "Fully booked, join the waitlist", and update it as it changes.
- 3Pick one case study with a resultRewrite the case study around a single project and one measurable outcome: sales up, time saved, launch on schedule.
- 4Make contact effortlessPoint the form at your email handler or Formspree, and fill in your real email, timezone and typical reply time beside it.
- 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 freelancer's home on the web
Give clients one link that shows who you are, what you do, proof and how to reach you.
A job-hunting portfolio
Present selected projects and writing to employers with a hero that states your role and availability.
Learn container queries in a real layout
See how each section adapts to its own width, so the page works inside any container.
Got questions?
Frequently Asked Questions
Who you are, what you do, one or two projects with results, quotes from clients and a clear way to get in touch, with your availability stated.
One or two well-told ones beat a long list. Tell each as problem, work and result so a client can picture working with you.
The page already shows blog cards. Link each card to your own posts, or to articles you have published elsewhere.
It is assembled from 9 templates in the free Website Section Templates library: Floating Pill Navbar, Personal Portfolio Hero, Icon Grid Features, Case Study Showcase, Testimonial Carousel, Blog Post Cards, Contact Form With Details, Floating Social Share Bar, Minimal Footer. Each one has its own page where you can edit it separately.
It is the same page. Here you read and edit the HTML, CSS and JavaScript directly with a live preview; in the Website Builder you edit it with forms, change the theme once for the whole page, add pages and export a finished site.
Source Code
Requires
<section class="st st-navbar-floating" data-uid="smvnkxd89tjql">
<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"><circle cx="12" cy="8" r="5" /><path d="M20 21a8 8 0 0 0-16 0" /></svg></span><span>Alex Rivera</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="#customers"><span>Reviews</span></a></li>
<li data-menu-item><a class="nf-link" href="#blog"><span>Writing</span></a></li>
<li data-menu-item><a class="nf-link" href="#contact"><span>Contact</span></a></li>
</ul>
<a class="st-btn nf-cta" data-menu-item href="#contact"><span>Hire me</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-portfolio-hero" data-uid="smvnkxd894d0d">
<div class="pf st-wrap">
<div class="pf-copy">
<span class="pf-status" data-anim="item"><i aria-hidden="true"></i><span>Available for freelance work</span></span>
<p class="pf-hello" data-anim="item">Hi, I’m Alex 👋</p>
<h1 class="pf-title" data-anim="item" data-anim-text>I design and build <span class="hl">websites people love to use</span></h1>
<p class="st-lead" data-anim="item">Product designer and front-end developer with 8 years of experience helping startups launch fast, accessible and beautiful products.</p>
<div class="st-btns" data-anim="item">
<a class="st-btn" href="#blog"><span>See my work</span></a>
<a class="st-btn st-btn--ghost" href="mailto:hello@webdevpuneet.com"><span>Get in touch</span></a>
</div>
<nav class="pf-social" data-anim="item" aria-label="Social links">
<a href="https://github.com/yourname"><span>GitHub</span></a>
<a href="https://www.linkedin.com/in/yourname"><span>LinkedIn</span></a>
<a href="https://dribbble.com/yourname"><span>Dribbble</span></a>
</nav>
</div>
<div class="pf-media" data-anim="media">
<div class="pf-ring" aria-hidden="true"></div>
<img class="pf-photo" width="900" height="1000" src="https://webdevpuneet.com/images/section-templates/hero-portrait.jpg" alt="Portrait of Alex">
</div>
</div>
</section>
<section id="features" class="st st-features-icon-grid" data-uid="smvnkxd89tu5t">
<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>How I can <span class="hl">help</span></h2>
<p class="st-lead" data-anim="item">From the first sketch to launch day, I work with small teams who care about the details.</p>
</header>
<div class="fg-grid">
<article class="fg-card" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor" /><circle cx="17.5" cy="10.5" r=".5" fill="currentColor" /><circle cx="8.5" cy="7.5" r=".5" fill="currentColor" /><circle cx="6.5" cy="12.5" r=".5" fill="currentColor" /><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" /></svg></span>
<h3 class="fg-title">Brand & UI design</h3>
<p class="fg-text">Logos, design systems and interfaces that feel like you.</p>
</article>
<article class="fg-card" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" /></svg></span>
<h3 class="fg-title">Web development</h3>
<p class="fg-text">Fast, accessible websites built with modern tools.</p>
</article>
<article class="fg-card" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" /><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" /><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" /><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" /></svg></span>
<h3 class="fg-title">Launch support</h3>
<p class="fg-text">Analytics, SEO basics and a smooth go-live.</p>
</article>
</div>
</div>
</section>
<section id="customers" class="st st-case-study-showcase" data-uid="smvnkxd8938fh">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Case studies</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Projects <span class="hl">and their results</span></h2>
<p class="st-lead" data-anim="item">Two recent projects with the numbers that mattered to the client.</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="A redesigned analytics dashboard on a laptop"></div>
<div class="cs-body">
<p class="cs-meta"><strong class="cs-client">Fieldnote</strong><span class="cs-tag">Product design</span></p>
<h3 class="cs-headline">Redesigning onboarding to <span class="hl">cut drop-off by a third</span></h3>
<p class="cs-summary">Six weeks of research, prototypes and tests to make a notes app’s first ten minutes clearer.</p>
<dl class="cs-stats">
<div class="cs-stat"><dt>drop-off</dt><dd>-34%</dd></div>
<div class="cs-stat"><dt>week-one activation</dt><dd>+22%</dd></div>
</dl>
<figure class="cs-quote">
<blockquote>Alex asked better questions than anyone else we had worked with.</blockquote>
<figcaption><strong>Mina Park</strong><span>CEO, Fieldnote</span></figcaption>
</figure>
<a class="cs-link" href="#"><span>Read the case study</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-course.png" alt="A course website with a lesson list"></div>
<div class="cs-body">
<p class="cs-meta"><strong class="cs-client">Design Academy</strong><span class="cs-tag">Website</span></p>
<h3 class="cs-headline">A course site that <span class="hl">tripled enrolments</span></h3>
<p class="cs-summary">A new structure, clearer pricing and a lighter page for a design school’s main course.</p>
<dl class="cs-stats">
<div class="cs-stat"><dt>enrolments</dt><dd>3×</dd></div>
<div class="cs-stat"><dt>load time</dt><dd>-1.4 s</dd></div>
</dl>
<a class="cs-link" href="#"><span>Read the case study</span> <span aria-hidden="true">→</span></a>
</div>
</li>
</ul>
</div>
</section>
<section id="customers-2" class="st st-testimonials-carousel" data-uid="smvnkxd89xqvj">
<div class="st-wrap">
<div class="tc-top">
<header class="st-head st-head--left tc-head">
<p class="st-eyebrow" data-anim="item">Kind words</p>
<h2 class="st-h2" data-anim="item" data-anim-text>What clients <span class="hl">say</span></h2>
<p class="st-lead" data-anim="item">Thousands of teams plan and ship with us every day. Here is what a few of them say.</p>
</header>
<div class="tc-arrows" data-anim="item">
<button type="button" class="tc-arrow" data-carousel-prev><span class="tc-sr">Previous testimonials</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="tc-arrow" data-carousel-next><span class="tc-sr">Next testimonials</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>
<div class="tc-track" data-carousel tabindex="0" role="region" aria-label="Testimonials">
<figure class="tc-card" data-anim="item">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tc-quote"><p>Our launch checklist used to live in five places. Now it lives in one, and we haven’t missed a step since.</p></blockquote>
<figcaption><div class="st-person">
<img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-5.jpg" alt="">
<div><p class="st-person-name">Priya Raman</p><p class="st-person-role">Product Marketing, Orbit</p></div>
</div></figcaption>
</figure>
<figure class="tc-card" data-anim="item">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tc-quote"><p>The best onboarding I’ve seen. Our whole team was productive on day one without a single training session.</p></blockquote>
<figcaption><div class="st-person">
<img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-4.jpg" alt="">
<div><p class="st-person-name">Marcus Webb</p><p class="st-person-role">COO, Fernhill</p></div>
</div></figcaption>
</figure>
<figure class="tc-card" data-anim="item">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tc-quote"><p>Reports that used to take me Friday afternoon now build themselves. I got my Fridays back.</p></blockquote>
<figcaption><div class="st-person">
<img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-3.jpg" alt="">
<div><p class="st-person-name">Lena Fischer</p><p class="st-person-role">Project Lead, Alder & Co</p></div>
</div></figcaption>
</figure>
<figure class="tc-card" data-anim="item">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tc-quote"><p>It scales with us. Twelve people last year, ninety this year, and it still feels fast and simple.</p></blockquote>
<figcaption><div class="st-person">
<img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-7.jpg" alt="">
<div><p class="st-person-name">Tom Alvarez</p><p class="st-person-role">VP Engineering, Quill</p></div>
</div></figcaption>
</figure>
<figure class="tc-card" data-anim="item">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tc-quote"><p>Clients can follow progress with a view-only link. Fewer status emails, happier clients.</p></blockquote>
<figcaption><div class="st-person">
<img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-8.jpg" alt="">
<div><p class="st-person-name">Grace Kim</p><p class="st-person-role">Agency Owner, Studio Kim</p></div>
</div></figcaption>
</figure>
</div>
</div>
</section>
<section id="blog" class="st st-blog-cards" data-uid="smvnkxd898i71">
<div class="st-wrap">
<div class="bc-top">
<header class="st-head st-head--left bc-head">
<p class="st-eyebrow" data-anim="item">Writing</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Notes on <span class="hl">design and code</span></h2>
</header>
<a class="bc-all" data-anim="item" href="/blog/"><span>View all posts</span> <span aria-hidden="true">→</span></a>
</div>
<ul class="bc-grid">
<li class="bc-card" data-anim="item">
<a class="bc-cover" tabindex="-1" aria-hidden="true" href="/blog/faster-pages/"><img width="1200" height="750" loading="lazy" src="https://webdevpuneet.com/images/section-templates/blog-4.jpg" alt=""></a>
<p class="bc-meta"><span class="bc-cat">Engineering</span><span>Oct 14, 2026</span><span class="bc-sep" aria-hidden="true">·</span><span>8 min read</span></p>
<h3 class="bc-title"><a href="/blog/faster-pages/"><span>How we cut page load time in half</span></a></h3>
<p class="bc-excerpt">Lazy hydration, smarter caching and one surprising database index: the full story of our performance sprint.</p>
<p class="bc-author"><img width="64" height="64" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-1.jpg" alt=""><span>Leo Martins</span></p>
</li>
<li class="bc-card" data-anim="item">
<a class="bc-cover" tabindex="-1" aria-hidden="true" href="/blog/live-reports/"><img width="1200" height="750" loading="lazy" src="https://webdevpuneet.com/images/section-templates/blog-6.jpg" alt=""></a>
<p class="bc-meta"><span class="bc-cat">Product</span><span>Oct 9, 2026</span><span class="bc-sep" aria-hidden="true">·</span><span>5 min read</span></p>
<h3 class="bc-title"><a href="/blog/live-reports/"><span>Introducing live reports</span></a></h3>
<p class="bc-excerpt">Dashboards that update as your team works, with no spreadsheets and no Friday afternoon status updates.</p>
<p class="bc-author"><img width="64" height="64" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-5.jpg" alt=""><span>Nora Quinn</span></p>
</li>
<li class="bc-card" data-anim="item">
<a class="bc-cover" tabindex="-1" aria-hidden="true" href="/blog/four-day-sprints/"><img width="1200" height="750" loading="lazy" src="https://webdevpuneet.com/images/section-templates/blog-1.jpg" alt=""></a>
<p class="bc-meta"><span class="bc-cat">Culture</span><span>Oct 2, 2026</span><span class="bc-sep" aria-hidden="true">·</span><span>6 min read</span></p>
<h3 class="bc-title"><a href="/blog/four-day-sprints/"><span>What four-day sprints taught us</span></a></h3>
<p class="bc-excerpt">A year of shorter weeks: what changed in our output, our planning and how the team feels.</p>
<p class="bc-author"><img width="64" height="64" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-6.jpg" alt=""><span>Aisha Bello</span></p>
</li>
</ul>
</div>
</section>
<section id="contact" class="st st-contact-split-form" data-uid="smvnkxd89iiy4">
<div class="st-wrap cs2">
<div class="cs2-info">
<header class="st-head st-head--left cs2-head">
<p class="st-eyebrow" data-anim="item">Contact</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Let’s work <span class="hl">together</span></h2>
<p class="st-lead" data-anim="item">Tell me about your project and timeline. I reply within one working day.</p>
</header>
<ul class="cs2-methods">
<li class="cs2-method" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="16" x="2" y="4" rx="2" /><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /></svg></span>
<div><p class="cs2-label">Email us</p><a class="cs2-value" href="mailto:hello@northstar.studio"><span>hello@northstar.studio</span></a></div>
</li>
<li class="cs2-method" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" /></svg></span>
<div><p class="cs2-label">Call us</p><a class="cs2-value" href="tel:+442079460958"><span>+44 20 7946 0958</span></a></div>
</li>
<li class="cs2-method" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" /><circle cx="12" cy="10" r="3" /></svg></span>
<div><p class="cs2-label">Visit us</p><a class="cs2-value" href="https://www.openstreetmap.org/search?query=Clerkenwell%20Road%20London"><span>12 Clerkenwell Road, London</span></a></div>
</li>
<li class="cs2-method" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></svg></span>
<div><p class="cs2-label">Office hours</p><p class="cs2-value">Mon–Fri, 9am–6pm GMT</p></div>
</li>
</ul>
</div>
<div class="cs2-card" data-anim="media">
<form class="st-form" method="post" data-form action="https://formspree.io/f/your-form-id">
<div class="st-form-fields" data-form-fields>
<div class="st-form-row">
<label class="st-field"><span>Your name</span><input name="name" type="text" required autocomplete="name"></label>
<label class="st-field"><span>Email</span><input name="email" type="email" required autocomplete="email"></label>
</div>
<label class="st-field"><span>How can we help?</span><textarea name="message" rows="5" required></textarea></label>
<input class="st-hp" type="text" name="_gotcha" tabindex="-1" autocomplete="off" aria-hidden="true">
<button class="st-btn st-form-btn" type="submit"><span>Send message</span></button>
<p class="st-form-note">We reply within one business day.</p>
<p class="st-form-error" data-form-error hidden role="alert">Sorry, something went wrong. Please try again or email us directly.</p>
</div>
<div class="st-form-success" data-form-success hidden tabindex="-1" role="status">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span>
<h3>Thanks, message sent!</h3>
<p>We’ll get back to you within one business day.</p>
</div>
</form>
</div>
</div>
</section>
<section class="st st-floating-social-share" data-uid="smvnkxd89j2n3">
<div class="ss" data-ss data-side="right" data-align="center" style="--ss-top:50%" data-mobile="bar" data-look="network" data-shape="attached" data-size="default" data-tips="on" data-start="open" data-copied="Link copied">
<div class="ss-panel" role="group" aria-label="Share this page">
<ul class="ss-list"><li class="ss-item"><a class="ss-btn" data-net="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="email" data-share="mailto:?subject={title}&body={text}" href="mailto:" style="--c:#6B7280" aria-label="Share on Email"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.970 5.700a1.940 1.940 0 0 1-2.060 0L2 7"/></svg><span class="ss-tip" aria-hidden="true">Email</span></a></li><li class="ss-item"><button type="button" class="ss-btn" data-net="copy" style="--c:#0F7B3F" aria-label="Copy link"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="13" height="13" x="8" y="8" rx="2.500"/><path d="M16 8V6.500A2.500 2.500 0 0 0 13.500 4h-7A2.500 2.500 0 0 0 4 6.500v7A2.500 2.500 0 0 0 6.500 16H8"/></svg><svg class="ss-ic ss-ic--done" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><span class="ss-tip" aria-hidden="true">Copy link</span></button></li><li class="ss-item ss-item--hide"><button type="button" class="ss-hide" data-ss-hide aria-expanded="true" aria-label="Hide share buttons"><svg class="ss-ic ss-ic--hide" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg></button></li></ul>
</div>
<button type="button" class="ss-tab" data-ss-show aria-expanded="true" aria-label="Show share buttons"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.600 13.500 6.800 4M15.400 6.500l-6.800 4"/></svg><span class="ss-tab-text" aria-hidden="true">Share</span></button>
<span class="ss-live" role="status" aria-live="polite"></span>
</div>
</section>
<section class="st st-footer-minimal" data-uid="smvnkxd89neqf">
<footer class="st-wrap fm">
<div class="fm-row" data-anim="item">
<a class="st-brand" href="#">
<span class="st-brand-mark"><span class="st-brand-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="5" /><path d="M20 21a8 8 0 0 0-16 0" /></svg></span><span>Alex Rivera</span></span>
</a>
<nav aria-label="Footer"><ul class="fm-links"><li><a href="#features">Services</a></li><li><a href="#customers">Reviews</a></li><li><a href="#blog">Writing</a></li><li><a href="#contact">Contact</a></li></ul></nav>
<div><ul class="st-socials">
<li><a class="st-social" href="https://x.com/" aria-label="X (Twitter)"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" /></svg></span></a></li>
<li><a class="st-social" href="https://www.linkedin.com/" aria-label="LinkedIn"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" /><rect width="4" height="12" x="2" y="9" /><circle cx="4" cy="4" r="2" /></svg></span></a></li>
<li><a class="st-social" href="https://github.com/" aria-label="GitHub"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" /><path d="M9 18c-4.51 2-5-2-7-2" /></svg></span></a></li>
</ul></div>
</div>
<p class="fm-copy">© 2026 Alex Rivera</p>
</footer>
</section>@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800;900&display=swap');
body{margin:0;background:#fbf8f1}
html{scroll-behavior:smooth}section[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.st{--st-brand:#a16207;--st-btn-text:#ffffff;--st-bg:#fbf8f1;--st-surface:#f1eadb;--st-text:#2a2110;--st-muted:#6f6450;--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}
}
/* Personal Portfolio Hero */
.st-portfolio-hero{padding:clamp(56px,7cqi,104px) 0}
.pf{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:clamp(32px,5cqi,72px)}
.pf-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.pf-status{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--st-surface);font-size:13.5px;font-weight:700}
.pf-status i{width:9px;height:9px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px color-mix(in srgb,#16a34a 25%,transparent)}
.pf-hello{font-family:var(--st-font-heading);font-size:clamp(20px,1.6cqi + 12px,26px);font-weight:700;color:var(--st-brand)}
.pf-title{font-size:clamp(36px,4.4cqi + 10px,62px)}
.pf-social{display:flex;flex-wrap:wrap;gap:18px;padding-top:8px}
.pf-social a{font-weight:700;font-size:15px;text-decoration:none;color:var(--st-muted);border-bottom:2px solid color-mix(in srgb,var(--st-brand) 35%,transparent);padding-bottom:2px}
.pf-social a:hover{color:var(--st-text);border-color:var(--st-brand)}
.pf-media{position:relative;justify-self:center;width:min(420px,100%)}
.pf-ring{position:absolute;inset:-6%;border-radius:60% 40% 55% 45%/50% 55% 45% 50%;border:2px dashed color-mix(in srgb,var(--st-brand) 55%,transparent)}
.pf-photo{position:relative;width:100%;aspect-ratio:9/10;object-fit:cover;border-radius:58% 42% 50% 50%/48% 52% 48% 52%;box-shadow:0 30px 60px -24px color-mix(in srgb,var(--st-text) 40%,transparent)}
@container st (max-width:760px){.pf{grid-template-columns:1fr}.pf-media{grid-row:1;width:min(260px,70%)}}
/* Icon Grid Features */
.st-features-icon-grid{padding:clamp(64px,8cqi,112px) 0}
.fg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2cqi,24px)}
.fg-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:clamp(22px,2.4cqi,30px);border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 7%,transparent);transition:transform .2s ease,box-shadow .2s ease}
.fg-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px color-mix(in srgb,var(--st-text) 40%,transparent)}
.fg-card .st-icon{margin-bottom:6px}
.fg-title{font-size:19px;letter-spacing:-.01em}
.fg-text{color:var(--st-muted);font-size:16px}
.fg-link{margin-top:auto;padding-top:4px;color:var(--st-brand);font-weight:700;font-size:15px;text-decoration:none}
.fg-link:hover{text-decoration:underline}
@container st (max-width:960px){.fg-grid{grid-template-columns:repeat(2,1fr)}}
@container st (max-width:600px){.fg-grid{grid-template-columns:1fr}}
/* 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}}
/* Testimonial Carousel */
.st-testimonials-carousel{padding:clamp(64px,8cqi,112px) 0}
.st-stars{color:#f59e0b;font-size:16px;letter-spacing:2px;line-height:1}
.st-person{display:flex;align-items:center;gap:12px}
.st-avatar{width:44px;height:44px;flex:none;border-radius:50%;object-fit:cover;background:var(--st-surface)}
.st-person-name{font-weight:700;font-size:15.5px;line-height:1.3}
.st-person-role{color:var(--st-muted);font-size:14px;line-height:1.4}
.st-person-role:empty{display:none}
.tc-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,3.4cqi,44px)}
.tc-head{margin:0}
.tc-arrows{display:flex;gap:10px;flex:none}
.tc-arrow{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid color-mix(in srgb,var(--st-text) 16%,transparent);background:var(--st-bg);color:var(--st-text);cursor:pointer;transition:background .2s ease,color .2s ease,opacity .2s ease}
.tc-arrow:hover:not(:disabled){background:var(--st-brand);border-color:var(--st-brand);color:var(--st-btn-text)}
.tc-arrow:disabled{opacity:.35;cursor:default}
.tc-arrow:focus-visible,.tc-track:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 45%,transparent);outline-offset:3px}
.tc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tc-track{display:flex;gap:clamp(14px,1.8cqi,22px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 16px;margin:0 -2px;overscroll-behavior-x:contain}
.tc-track::-webkit-scrollbar{display:none}
.tc-track.is-draggable{scroll-snap-type:none;cursor:grab}
.tc-track.is-draggable:active{cursor:grabbing}
.tc-card{flex:0 0 clamp(280px,32%,400px);scroll-snap-align:start;display:flex;flex-direction:column;gap:16px;margin:0;padding:clamp(24px,2.6cqi,32px);border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);user-select:none}
.tc-quote{flex:1;font-size:17px;line-height:1.65}
@container st (max-width:700px){.tc-top{flex-direction:column;align-items:flex-start}.tc-card{flex-basis:85%}}
/* Blog Post Cards */
.st-blog-cards{padding:clamp(64px,8cqi,112px) 0}
.bc-top{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:clamp(28px,3.4cqi,44px)}
.bc-head{margin:0}
.bc-all{color:var(--st-brand);font-weight:700;text-decoration:none;white-space:nowrap}
.bc-all:hover{text-decoration:underline}
.bc-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6cqi,32px)}
.bc-card{display:flex;flex-direction:column;gap:10px}
.bc-cover{display:block;overflow:hidden;margin-bottom:8px;border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);aspect-ratio:16/10}
.bc-cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.bc-card:hover .bc-cover img{transform:scale(1.06)}
.bc-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:var(--st-muted);font-size:13.5px}
.bc-cat{padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--st-brand) 11%,transparent);color:var(--st-brand);font-weight:700;font-size:12.5px}
.bc-title{font-size:20px;line-height:1.3;letter-spacing:-.015em}
.bc-title a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .35s ease}
.bc-card:hover .bc-title a{background-size:100% 2px}
.bc-excerpt{color:var(--st-muted);font-size:15.5px}
.bc-author{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:14.5px;font-weight:600}
.bc-author img{width:32px;height:32px;border-radius:50%;object-fit:cover}
@container st (max-width:960px){.bc-grid{grid-template-columns:repeat(2,1fr)}}
@container st (max-width:620px){.bc-grid{grid-template-columns:1fr}}
/* Contact Form With Details */
.st-contact-split-form{padding:clamp(64px,8cqi,112px) 0}
.st-form{display:block}
.st-form-fields{display:flex;flex-direction:column;gap:16px}
.st-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.st-field{display:flex;flex-direction:column;gap:7px;font-size:14.5px;font-weight:600;color:var(--st-text)}
.st-field input,.st-field textarea{width:100%;padding:13px 15px;border-radius:calc(var(--st-radius) * .8px);border:1px solid color-mix(in srgb,var(--st-text) 16%,transparent);background:var(--st-bg);color:var(--st-text);font:400 16px/1.5 var(--st-font-body);outline:none;transition:border-color .2s ease,box-shadow .2s ease;resize:vertical}
.st-field input:focus,.st-field textarea:focus{border-color:var(--st-brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--st-brand) 18%,transparent)}
.st-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.st-form-btn{align-self:flex-start;min-width:180px}
.st-form-btn[aria-busy="true"]{opacity:.7;cursor:progress}
.st-form-note{font-size:13.5px;color:var(--st-muted)}
.st-form-error{padding:12px 14px;border-radius:calc(var(--st-radius) * .8px);background:#fef2f2;color:#b91c1c;font-size:14.5px}
.st-form-success{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:8px 0;outline:none}
.st-form-success[hidden],.st-form-error[hidden]{display:none}
.st-form-success h3{font-size:22px}
.st-form-success p{color:var(--st-muted)}
@container st (max-width:560px){.st-form-row{grid-template-columns:1fr}.st-form-btn{width:100%}}
.cs2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:clamp(36px,5cqi,80px)}
.cs2-info{display:flex;flex-direction:column;gap:32px}
.cs2-head{margin:0}
.cs2-methods{list-style:none;display:flex;flex-direction:column;gap:20px}
.cs2-method{display:flex;align-items:center;gap:16px}
.cs2-label{color:var(--st-muted);font-size:14px}
.cs2-value{display:block;color:var(--st-text);font-weight:700;font-size:16.5px;text-decoration:none}
a.cs2-value:hover{color:var(--st-brand)}
.cs2-card{padding:clamp(24px,3.4cqi,40px);border-radius:calc(var(--st-radius) * 1.3px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 7%,transparent);box-shadow:0 30px 70px -40px color-mix(in srgb,var(--st-brand) 45%,transparent)}
@container st (max-width:860px){.cs2{grid-template-columns:1fr}}
/* 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}}
/* Minimal Footer */
.st-footer-minimal{padding:36px 0 28px;border-top:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.st-brand{display:inline-flex;align-items:center;gap:10px;flex:none;text-decoration:none;color:var(--st-text)}
.st-brand-img{height:32px;width:auto;max-width:180px;object-fit:contain}
.st-brand-mark{display:inline-flex;align-items:center;gap:10px;font:800 21px/1 var(--st-font-heading);letter-spacing:-.03em}
.st-brand-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:calc(var(--st-radius) * .7px);background:var(--st-brand);color:var(--st-btn-text)}
.st-brand-icon svg{width:19px;height:19px}
.st-socials{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.st-social{display:grid;place-items:center;width:40px;height:40px;border-radius:calc(var(--st-radius) * .7px);color:var(--st-muted);background:color-mix(in srgb,var(--st-text) 6%,transparent);transition:color .2s ease,background .2s ease,transform .2s ease}
.st-social:hover{color:var(--st-btn-text);background:var(--st-brand);transform:translateY(-2px)}
.st-social > span{display:block;line-height:0}
.st-social svg{display:block;width:19px;height:19px}
.fm .st-brand-mark{font-size:19px}
.fm .st-brand-icon{width:30px;height:30px}
.fm-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 32px;padding-bottom:24px;border-bottom:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.fm-links{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px}
.fm-links a{color:var(--st-muted);font-size:15px;font-weight:500;text-decoration:none}
.fm-links a:hover{color:var(--st-brand)}
.fm .st-social{width:36px;height:36px;background:none}
.fm .st-social:hover{background:color-mix(in srgb,var(--st-brand) 12%,transparent);color:var(--st-brand)}
.fm-copy{padding-top:20px;color:var(--st-muted);font-size:14px;text-align:center}
@container st (max-width:760px){.fm-row{flex-direction:column;text-align:center}.fm-links{justify-content:center}.fm .st-socials{justify-content:center}}
(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;
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;
document.querySelectorAll('.st form[data-form]').forEach(function (form) {
var ok = form.querySelector('[data-form-success]');
var bad = form.querySelector('[data-form-error]');
var btn = form.querySelector('[type="submit"]');
var done = function () {
var fields = form.querySelectorAll('[data-form-fields]');
var show = function () {
Array.prototype.forEach.call(fields, function (f) { f.hidden = true; });
if (ok) { ok.hidden = false; ok.focus && ok.focus(); if (G && !reduce) G.from(ok, { y: 16, opacity: 0, duration: 0.5, ease: 'power3.out', clearProps: 'transform,opacity' }); }
};
if (G && !reduce && fields.length) G.to(fields, { opacity: 0, y: -10, duration: 0.25, onComplete: show }); else show();
};
form.addEventListener('submit', function (e) {
if (!window.fetch) return;
e.preventDefault();
if (bad) bad.hidden = true;
if (btn) { btn.disabled = true; btn.setAttribute('aria-busy', 'true'); }
var finish = function () { if (btn) { btn.disabled = false; btn.removeAttribute('aria-busy'); } };
if (window.ST_PREVIEW) { setTimeout(function () { finish(); done(); }, 600); return; }
fetch(form.action, { method: 'POST', body: new FormData(form), headers: { Accept: 'application/json' } })
.then(function (r) { finish(); if (r.ok) done(); else if (bad) bad.hidden = false; })
.catch(function () { finish(); if (bad) bad.hidden = false; });
});
});
})();
(function () {
var editing = window.ST_STILL || window.ST_PREVIEW;
var enc = encodeURIComponent;
function meta(sel) { var m = document.querySelector(sel); return m ? (m.getAttribute('content') || m.getAttribute('href') || '') : ''; }
function absolute(u) { try { return new URL(u, location.href).href; } catch (e) { return u; } }
document.querySelectorAll('.st [data-ss]').forEach(function (root) {
if (root.getAttribute('data-ss-ready')) return;
root.setAttribute('data-ss-ready', '1');
function vars() {
var url = root.getAttribute('data-url') || location.href.split('#')[0];
var title = root.getAttribute('data-title') || meta('meta[property="og:title"]') || document.title || '';
return {
url: url, title: title, text: (title ? title + ' ' : '') + url,
image: root.getAttribute('data-pin-image') || meta('meta[property="og:image"]'),
via: root.getAttribute('data-via') || '', tags: root.getAttribute('data-tags') || ''
};
}
function fill(tpl, v) {
var out = tpl.replace(/[{]([a-z]+)[}]/g, function (m, k) { return enc(v[k] || ''); });
var i = out.indexOf('?');
if (i < 1) return out;
var q = out.slice(i + 1).split('&').filter(function (p) { var e = p.indexOf('='); return e < 0 || p.slice(e + 1) !== ''; }).join('&');
return q ? out.slice(0, i) + '?' + q : out.slice(0, i);
}
function update() {
var v = vars();
root.querySelectorAll('a[data-share]').forEach(function (a) { a.href = fill(a.getAttribute('data-share'), v); });
}
update();
['pointerenter', 'focusin', 'touchstart'].forEach(function (ev) { root.addEventListener(ev, update, { passive: true }); });
var live = root.querySelector('.ss-live');
function flash(btn, msg) {
var tip = btn.querySelector('.ss-tip');
if (live) live.textContent = msg;
if (tip && !btn.classList.contains('is-done')) tip.setAttribute('data-was', tip.textContent);
btn.classList.add('is-done');
if (tip) tip.textContent = msg;
clearTimeout(btn._ssTimer);
btn._ssTimer = setTimeout(function () {
btn.classList.remove('is-done');
if (tip) tip.textContent = tip.getAttribute('data-was') || '';
if (live) live.textContent = '';
}, 2000);
}
root.querySelectorAll('[data-net="copy"]').forEach(function (btn) {
btn.addEventListener('click', function () {
var u = vars().url;
var msg = root.getAttribute('data-copied') || 'Link copied';
function fallback() {
var t = document.createElement('textarea');
t.value = u; t.setAttribute('readonly', ''); t.style.cssText = 'position:fixed;top:0;left:0;opacity:0';
document.body.appendChild(t); t.select();
try { if (document.execCommand('copy')) flash(btn, msg); } catch (e) {}
t.remove();
}
if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(u).then(function () { flash(btn, msg); }, fallback);
else fallback();
});
});
var hide = root.querySelector('[data-ss-hide]'), tab = root.querySelector('[data-ss-show]');
if (!hide || !tab) return;
var KEY = 'ss-collapsed';
function store(v) { if (editing) return; try { sessionStorage.setItem(KEY, v ? '1' : '0'); } catch (e) {} }
function read() { if (editing) return null; try { return sessionStorage.getItem(KEY); } catch (e) { return null; } }
function set(collapsed, focus) {
root.classList.toggle('is-collapsed', collapsed);
hide.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
tab.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
if (focus) (collapsed ? tab : root.querySelector('.ss-btn')).focus({ preventScroll: true });
}
var saved = read();
set(saved === null ? root.getAttribute('data-start') === 'collapsed' : saved === '1', false);
hide.addEventListener('click', function () { set(true, true); store(true); });
tab.addEventListener('click', function () { set(false, true); store(false); });
});
})();
(function () {
if (!window.gsap) return;
if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
if (window.ScrollTrigger) gsap.registerPlugin(ScrollTrigger);
var TEXT = window.SplitText ? {"split":"words","part":"words","mask":"words","vars":{"yPercent":110,"stagger":0.06,"duration":0.8}} : null;
if (TEXT) gsap.registerPlugin(SplitText);
function run() {
document.querySelectorAll('.st:not([data-scroll])').forEach(function (section) {
var heads = TEXT ? section.querySelectorAll('[data-anim-text]') : [];
var items = section.querySelectorAll(heads.length ? '[data-anim="item"]:not([data-anim-text])' : '[data-anim="item"]');
var media = section.querySelectorAll('[data-anim="media"]');
var tl = gsap.timeline({
defaults: { ease: 'power3.out', duration: 0.80 },
scrollTrigger: window.ScrollTrigger ? (window.ST_PREVIEW ? { trigger: section, start: 'top 80%', toggleActions: 'play reset play reset' } : { trigger: section, start: 'top 80%', once: true }) : undefined
});
Array.prototype.forEach.call(heads, function (el, i) {
var opts = { type: TEXT.split };
if (TEXT.mask) opts.mask = TEXT.mask;
var parts = SplitText.create(el, opts)[TEXT.part];
// The mask clips each line or word to its line box, which cuts off descenders (g, y, p):
// give the mask a little room below and take it back with a negative margin
if (TEXT.mask) Array.prototype.forEach.call(parts, function (p) { var m = p.parentElement; if (m && m !== el) { m.style.paddingBottom = '.22em'; m.style.marginBottom = '-.22em'; } });
tl.from(parts, Object.assign({}, TEXT.vars), i ? '<0.1' : 0);
});
if (items.length) tl.from(items, {"y":28,"opacity":0,"stagger":0.09,"clearProps":"transform,opacity"}, heads.length ? '<0.2' : 0);
if (media.length) tl.from(media, {"y":40,"opacity":0,"duration":1.1,"clearProps":"transform,opacity"}, items.length || heads.length ? '<0.15' : 0);
});
}
// Split text only after the fonts load, so lines break where they finally will
if (TEXT && document.fonts && document.fonts.ready) document.fonts.ready.then(run); else run();
})();