Real Estate Agency Website HTML Template — Free Snippet
Real Estate Agency Website template · 11 website sections · Plain HTML, CSS & JS · Customise it in the Website Builder
CategoryLanding Pages
What's included
Features
11 ready-made website sections assembled into one finished real estate agency website page: Simple Sticky Navbar, Image Background Hero, Property Listings, Icon Grid Features, How It Works Steps, Animated Stats Counters, Team Grid, Testimonial Wall, FAQ Accordion, Contact Form With Details, Multi-Column 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 Real Estate Website Built on Trust: Listings, Process, Results and the People Behind Them
Choosing an agent is a trust decision, so this page leads with something tangible: a striking home at dusk and the listings themselves, not a slogan. Property cards give visitors something to do immediately, while the services grid and three-step process explain what you do for buyers and sellers in plain terms, so the unknown becomes manageable. Moving counters (homes sold, years in the area, average days to sell) turn "experienced" into evidence.
The people come next. A team grid with real agent photos gives a nervous seller a face, and the testimonial wall and FAQ answer the questions every client asks before they pick up the phone: fees, timelines, how valuations work. The contact form at the end is built for a valuation request, which is the conversation most agents want to start.
Replace the sample listings and agents with yours. It is the layout of the Real Estate Agency Website template; open it in the Website Builder to edit copy, theme and images and export.
Built from website section templates
The 11 Sections Behind This Real Estate 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.
- Simple Sticky Navbara sticky bar with a valuation button, since seller enquiries are the most valuable ones
- Image Background Heroa home at dusk as the hero, which sells the feeling of the product before a single listing
- Property Listingslive-looking property cards with price, beds and location, giving visitors something to browse at once
- Icon Grid Featureswhat you do for buyers, sellers and landlords, in plain language
- How It Works Stepsthree steps that make selling or buying feel manageable instead of unknown
- Animated Stats Counterscounters for homes sold, years in the area and days to sell: proof a seller can compare
- Team Gridthe agents behind the listings, with photos, because people choose a person before a company
- Testimonial Wallreviews from recent buyers and sellers, placed right after the team they praise
- FAQ Accordionfees, timelines and how valuations work, answered before the first call
- Contact Form With Detailsa form built for the conversation you want most: a free valuation request
- Multi-Column Footera multi-column footer with areas covered, services and legal links
Step by step
How to Use
- 1Open the template in the Website BuilderPress "Start using this template" to open the Real Estate Agency Website in the Website Builder. Everything is edited with forms in a side panel; no code is needed.
- 2Load in your real listingsReplace the sample property cards with your current listings: photo, price, bedrooms and location, and link each card to its full listing page.
- 3Use true numbers in the countersEdit the stats to figures you can back up, such as homes sold last year and average days on market, so sellers can compare you with other agents.
- 4Turn the form into a valuation funnelRename the contact form as a free valuation request, add the property address field and send submissions to the agent responsible for that area.
- 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
An independent agent or small agency site
Show listings, explain your process and win valuation enquiries without a portal.
A neighbourhood specialist page
Focus the page on one area and use the counters and team to prove local expertise.
Learn listing cards and animated counters
See how property cards, count-up numbers and container queries fit one responsive layout.
Got questions?
Frequently Asked Questions
Current listings, a clear explanation of how you work with buyers and sellers, proof of results, the people involved and an easy way to ask for a valuation.
Edit the property cards with your listing details and link each to its page or your listings system. Remove the ones you do not have.
Buying or selling is unfamiliar and stressful. Three clear steps show what happens next and make contacting you feel low-risk.
It is assembled from 11 templates in the free Website Section Templates library: Simple Sticky Navbar, Image Background Hero, Property Listings, Icon Grid Features, How It Works Steps, Animated Stats Counters, Team Grid, Testimonial Wall, FAQ Accordion, Contact Form With Details, Multi-Column 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
<section class="st st-navbar-simple" data-uid="smvnkxd9lhnsw">
<header class="st-wrap nb">
<a class="st-brand" href="#">
<span class="st-brand-mark"><span class="st-brand-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" /><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /></svg></span><span>Harbor Homes</span></span>
</a>
<nav class="nb-nav" data-menu aria-label="Main">
<ul class="nb-links">
<li data-menu-item><a class="nb-link" href="#listings"><span>Homes</span></a></li>
<li data-menu-item><a class="nb-link" href="#features"><span>Services</span></a></li>
<li data-menu-item><a class="nb-link" href="#how-it-works"><span>How it works</span></a></li>
<li data-menu-item><a class="nb-link" href="#team"><span>Agents</span></a></li>
<li data-menu-item><a class="nb-link" href="#faq"><span>FAQ</span></a></li>
</ul>
<div class="nb-actions" data-menu-item>
<a class="st-btn nb-cta" href="#contact"><span>Book a valuation</span></a>
</div>
</nav>
<button type="button" class="st-burger" data-menu-toggle aria-expanded="false" aria-label="Open menu"><span></span><span></span><span></span></button>
</header>
<i hidden data-sticky-flag></i>
</section>
<section class="st st-image-background-hero" data-uid="smvnkxd9l9nqf">
<div class="ib-bg" role="img" aria-label="Background photo" style="background-image:url('https://webdevpuneet.com/images/section-templates/tpl-realestate.jpg')"></div>
<div class="ib-shade" aria-hidden="true"></div>
<div class="ib st-wrap">
<div class="ib-copy">
<span class="st-eyebrow ib-eyebrow" data-anim="item">Buying · Selling · Letting</span>
<h1 class="ib-title" data-anim="item" data-anim-text>Find the home that <span class="hl">fits your life</span></h1>
<p class="st-lead ib-lead" data-anim="item">Local agents, honest advice and a smooth move from first viewing to keys in hand.</p>
<div class="st-btns" data-anim="item">
<a class="st-btn" href="#contact"><span>Book a free valuation</span></a>
<a class="st-btn st-btn--ghost ib-ghost" href="#how-it-works"><span>How it works</span></a>
</div>
</div>
<div class="ib-stats" data-anim="media">
<div><strong>1,200+</strong><span>homes sold</span></div>
<div><strong>21 days</strong><span>average sale</span></div>
<div><strong>98%</strong><span>of asking price</span></div>
</div>
</div>
</section>
<section id="listings" class="st st-property-listings" data-uid="smvnkxd9lzp90">
<div class="st-wrap">
<div class="pl-head">
<div class="pl-titles">
<p class="st-eyebrow" data-anim="item">Featured homes</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Homes <span class="hl">ready to view</span></h2>
</div>
<a class="pl-all" data-anim="item" href="#contact"><span>See all homes</span> <span aria-hidden="true">→</span></a>
</div>
<div class="pl-grid">
<a class="pl-card" data-anim="item" href="#contact">
<span class="pl-media">
<svg class="pl-art" viewBox="0 0 400 260" aria-hidden="true" focusable="false">
<rect class="pa-sky" width="400" height="260"/>
<circle class="pa-sun" cx="318" cy="64" r="26"/>
<path class="pa-hill" d="M0 196 C90 166 180 188 270 172 S372 166 400 178 V260 H0Z"/>
<g class="pa-tree"><rect class="pa-trunk" x="56" y="158" width="9" height="48" rx="3"/><circle class="pa-leaf" cx="60" cy="146" r="25"/></g>
<g class="pa-house">
<rect class="pa-wall" x="112" y="118" width="176" height="92"/>
<path class="pa-roof" d="M98 122 L200 62 L302 122 Z"/>
<rect class="pa-chim" x="248" y="74" width="16" height="30"/>
<rect class="pa-win" x="132" y="138" width="38" height="30" rx="3"/>
<rect class="pa-win" x="230" y="138" width="38" height="30" rx="3"/>
<rect class="pa-door" x="185" y="160" width="30" height="50" rx="3"/>
</g>
<g class="pa-tree"><rect class="pa-trunk" x="333" y="168" width="8" height="40" rx="3"/><circle class="pa-leaf" cx="337" cy="158" r="20"/></g>
<rect class="pa-ground" y="208" width="400" height="52"/>
</svg>
<span class="pl-status">For sale</span>
</span>
<span class="pl-body">
<span class="pl-price">£485,000</span>
<span class="pl-title">Bright family home with garden</span>
<span class="pl-addr">Harbour View</span>
<span class="pl-facts">
<span>4 beds</span>
<span>2 baths</span>
<span>148 m²</span>
</span>
</span>
</a>
<a class="pl-card" data-anim="item" href="#contact">
<span class="pl-media">
<svg class="pl-art" viewBox="0 0 400 260" aria-hidden="true" focusable="false">
<rect class="pa-sky" width="400" height="260"/>
<circle class="pa-sun" cx="318" cy="64" r="26"/>
<path class="pa-hill" d="M0 196 C90 166 180 188 270 172 S372 166 400 178 V260 H0Z"/>
<g class="pa-tree"><rect class="pa-trunk" x="56" y="158" width="9" height="48" rx="3"/><circle class="pa-leaf" cx="60" cy="146" r="25"/></g>
<g class="pa-house">
<rect class="pa-wall" x="112" y="118" width="176" height="92"/>
<path class="pa-roof" d="M98 122 L200 62 L302 122 Z"/>
<rect class="pa-chim" x="248" y="74" width="16" height="30"/>
<rect class="pa-win" x="132" y="138" width="38" height="30" rx="3"/>
<rect class="pa-win" x="230" y="138" width="38" height="30" rx="3"/>
<rect class="pa-door" x="185" y="160" width="30" height="50" rx="3"/>
</g>
<g class="pa-tree"><rect class="pa-trunk" x="333" y="168" width="8" height="40" rx="3"/><circle class="pa-leaf" cx="337" cy="158" r="20"/></g>
<rect class="pa-ground" y="208" width="400" height="52"/>
</svg>
<span class="pl-status">New</span>
</span>
<span class="pl-body">
<span class="pl-price">£325,000</span>
<span class="pl-title">Modern townhouse near the park</span>
<span class="pl-addr">Old Town</span>
<span class="pl-facts">
<span>3 beds</span>
<span>2 baths</span>
<span>112 m²</span>
</span>
</span>
</a>
<a class="pl-card" data-anim="item" href="#contact">
<span class="pl-media">
<svg class="pl-art" viewBox="0 0 400 260" aria-hidden="true" focusable="false">
<rect class="pa-sky" width="400" height="260"/>
<circle class="pa-sun" cx="318" cy="64" r="26"/>
<path class="pa-hill" d="M0 196 C90 166 180 188 270 172 S372 166 400 178 V260 H0Z"/>
<g class="pa-tree"><rect class="pa-trunk" x="56" y="158" width="9" height="48" rx="3"/><circle class="pa-leaf" cx="60" cy="146" r="25"/></g>
<g class="pa-house">
<rect class="pa-wall" x="112" y="118" width="176" height="92"/>
<path class="pa-roof" d="M98 122 L200 62 L302 122 Z"/>
<rect class="pa-chim" x="248" y="74" width="16" height="30"/>
<rect class="pa-win" x="132" y="138" width="38" height="30" rx="3"/>
<rect class="pa-win" x="230" y="138" width="38" height="30" rx="3"/>
<rect class="pa-door" x="185" y="160" width="30" height="50" rx="3"/>
</g>
<g class="pa-tree"><rect class="pa-trunk" x="333" y="168" width="8" height="40" rx="3"/><circle class="pa-leaf" cx="337" cy="158" r="20"/></g>
<rect class="pa-ground" y="208" width="400" height="52"/>
</svg>
<span class="pl-status">Under offer</span>
</span>
<span class="pl-body">
<span class="pl-price">£610,000</span>
<span class="pl-title">Detached house with sea views</span>
<span class="pl-addr">Cliff Road</span>
<span class="pl-facts">
<span>5 beds</span>
<span>3 baths</span>
<span>196 m²</span>
</span>
</span>
</a>
</div>
</div>
</section>
<section id="features" class="st st-features-icon-grid" data-uid="smvnkxd9lr6u9">
<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 for <span class="hl">your next move</span></h2>
<p class="st-lead" data-anim="item">Whether you’re buying, selling or letting, one local team handles it all.</p>
</header>
<div class="fg-grid">
<article class="fg-card" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" /><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /></svg></span>
<h3 class="fg-title">Sell your home</h3>
<p class="fg-text">Pro photos, a 3D tour and marketing that reaches serious buyers.</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"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg></span>
<h3 class="fg-title">Find a home</h3>
<p class="fg-text">Early access to new listings that match what you need.</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="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1" /><path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" /></svg></span>
<h3 class="fg-title">Mortgage advice</h3>
<p class="fg-text">Independent advisers who find the best rate for 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"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /><path d="M10 9H8" /><path d="M16 13H8" /><path d="M16 17H8" /></svg></span>
<h3 class="fg-title">Lettings</h3>
<p class="fg-text">Tenant finding, contracts and full property management.</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="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>
<h3 class="fg-title">Local experts</h3>
<p class="fg-text">Agents who live in the neighbourhoods they sell.</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="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /><path d="m9 12 2 2 4-4" /></svg></span>
<h3 class="fg-title">Fixed fees</h3>
<p class="fg-text">Clear pricing from day one, with no hidden extras.</p>
</article>
</div>
</div>
</section>
<section id="how-it-works" class="st st-features-steps" data-uid="smvnkxd9lvnju">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">How it works</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Selling in <span class="hl">three simple steps</span></h2>
<p class="st-lead" data-anim="item">Most of our homes are under offer within three weeks.</p>
</header>
<ol class="fp-steps">
<li class="fp-step" data-anim="item">
<div class="fp-badge"><span class="fp-num" aria-hidden="true"></span><span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" /></svg></span></div>
<h3 class="fp-title">Free valuation</h3>
<p class="fp-text">We visit, price your home and plan the marketing.</p>
</li>
<li class="fp-step" data-anim="item">
<div class="fp-badge"><span class="fp-num" aria-hidden="true"></span><span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" /><circle cx="12" cy="13" r="3" /></svg></span></div>
<h3 class="fp-title">Launch & viewings</h3>
<p class="fp-text">Pro photos, listing on all portals and accompanied viewings.</p>
</li>
<li class="fp-step" data-anim="item">
<div class="fp-badge"><span class="fp-num" aria-hidden="true"></span><span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" /></svg></span></div>
<h3 class="fp-title">Offer to completion</h3>
<p class="fp-text">We negotiate the best offer and manage the sale to the end.</p>
</li>
</ol>
<div class="fp-cta" data-anim="item">
<a class="st-btn" href="https://webdevpuneet.com/signup"><span>Book a free valuation</span></a>
<p class="fp-note">Free for teams up to 10 people</p>
</div>
</div>
</section>
<section id="results" class="st st-stats-counters" data-uid="smvnkxd9l1mve">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Our results</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Numbers that <span class="hl">speak for us</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">Homes sold</dt>
<dd class="sc-value" data-count>1,200+</dd>
<dd class="sc-note">since 2012</dd>
</div>
<div class="sc-stat" data-anim="item">
<dt class="sc-label">Days to sell</dt>
<dd class="sc-value" data-count>21</dd>
<dd class="sc-note">on average</dd>
</div>
<div class="sc-stat" data-anim="item">
<dt class="sc-label">Of asking price</dt>
<dd class="sc-value" data-count>98%</dd>
<dd class="sc-note">achieved</dd>
</div>
<div class="sc-stat" data-anim="item">
<dt class="sc-label">Client rating</dt>
<dd class="sc-value" data-count>4.9/5</dd>
<dd class="sc-note">from 640 reviews</dd>
</div>
</dl>
</div>
</section>
<section id="team" class="st st-team-grid" data-uid="smvnkxd9lp2f8">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Our agents</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Local people, <span class="hl">local knowledge</span></h2>
<p class="st-lead" data-anim="item">Every agent specialises in a few neighbourhoods, so you get real insight.</p>
</header>
<ul class="tm2-grid">
<li class="tm2-card" data-anim="item">
<div class="tm2-photo">
<img width="400" height="400" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-6.jpg" alt="">
<div class="tm2-social">
</div>
</div>
<h3 class="tm2-name">Grace Okafor</h3>
<p class="tm2-role">Founder & Director</p>
<p class="tm2-bio">15 years selling homes on the coast.</p>
</li>
<li class="tm2-card" data-anim="item">
<div class="tm2-photo">
<img width="400" height="400" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-1.jpg" alt="">
<div class="tm2-social">
</div>
</div>
<h3 class="tm2-name">Daniel Moore</h3>
<p class="tm2-role">Senior Sales Agent</p>
<p class="tm2-bio">Specialist in family homes and new builds.</p>
</li>
<li class="tm2-card" data-anim="item">
<div class="tm2-photo">
<img width="400" height="400" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-5.jpg" alt="">
<div class="tm2-social">
</div>
</div>
<h3 class="tm2-name">Emma Clarke</h3>
<p class="tm2-role">Lettings Manager</p>
<p class="tm2-bio">Looks after 300+ rental homes.</p>
</li>
<li class="tm2-card" data-anim="item">
<div class="tm2-photo">
<img width="400" height="400" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-4.jpg" alt="">
<div class="tm2-social">
</div>
</div>
<h3 class="tm2-name">Raj Patel</h3>
<p class="tm2-role">Mortgage Adviser</p>
<p class="tm2-bio">Finds the right mortgage, fast.</p>
</li>
</ul>
</div>
</section>
<section id="customers" class="st st-testimonials-grid" data-uid="smvnkxd9lyuk9">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Reviews</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Happy <span class="hl">homeowners</span></h2>
<p class="tg-summary" data-anim="item">★ 4.9 from 640+ reviews</p>
</header>
<div class="tg-wall">
<figure class="tg-card" data-anim="item">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tg-quote"><p>Sold in nine days and above asking. Grace kept us updated at every step.</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">The Thompsons</p><p class="st-person-role">Sold in Harbour View</p></div>
</div></figcaption>
</figure>
<figure class="tg-card" data-anim="item">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tg-quote"><p>They found us a home before it even hit the portals.</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">Priya & Sam</p><p class="st-person-role">First-time buyers</p></div>
</div></figcaption>
</figure>
<figure class="tg-card" data-anim="item">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tg-quote"><p>Honest valuation, great photos and no pressure. Exactly what we hoped for.</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">Martin H.</p><p class="st-person-role">Sold in Old Town</p></div>
</div></figcaption>
</figure>
</div>
</div>
</section>
<section id="faq" class="st st-faq-accordion" data-uid="smvnkxd9lfbch">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">FAQ</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Questions <span class="hl">answered</span></h2>
<p class="st-lead" data-anim="item">Everything you need to know before you sell or buy.</p>
</header>
<div class="fq-list" data-accordion="single first">
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>How much does a valuation cost?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>It’s free and comes with no obligation. We visit your home and give you a written price range within 48 hours.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>What are your fees?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>A fixed fee agreed up front, payable only when your sale completes. No sale, no fee.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>How long does it take to sell?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>Our homes are under offer in 21 days on average, and most sales complete within 12 weeks.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>Do you help with mortgages?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>Yes. Our independent mortgage adviser compares the whole market to find the best deal for you.</p></div>
</details>
</div>
<p class="fq-contact" data-anim="item"><span>Still have a question?</span> <a href="mailto:hello@webdevpuneet.com"><span>Talk to our team</span> <span aria-hidden="true">→</span></a></p>
</div>
</section>
<section id="contact" class="st st-contact-split-form" data-uid="smvnkxd9lb9vv">
<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>Book your <span class="hl">free valuation</span></h2>
<p class="st-lead" data-anim="item">Tell us about your home and we’ll arrange a visit at a time that suits you.</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"><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 the office</p><a class="cs2-value" href="tel:+441174960321"><span>0117 496 0321</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"><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</p><a class="cs2-value" href="mailto:hello@webdevpuneet.com"><span>hello@webdevpuneet.com</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">Office</p><a class="cs2-value" href="https://www.openstreetmap.org/"><span>8 Harbour Walk, Bristol</span></a></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>Request a valuation</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-footer-columns" data-uid="smvnkxd9lwhf3">
<footer class="st-wrap fo">
<div class="fo-top">
<div class="fo-brand" data-anim="item">
<a class="st-brand" href="#">
<span class="st-brand-mark"><span class="st-brand-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" /><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /></svg></span><span>Harbor Homes</span></span>
</a>
<p class="fo-tagline">Independent estate agents helping families move since 2012.</p>
<div><ul class="st-socials">
<li><a class="st-social" href="https://x.com/" aria-label="X (Twitter)"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" /></svg></span></a></li>
<li><a class="st-social" href="https://www.linkedin.com/" aria-label="LinkedIn"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" /><rect width="4" height="12" x="2" y="9" /><circle cx="4" cy="4" r="2" /></svg></span></a></li>
<li><a class="st-social" href="https://github.com/" aria-label="GitHub"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" /><path d="M9 18c-4.51 2-5-2-7-2" /></svg></span></a></li>
<li><a class="st-social" href="https://www.youtube.com/" aria-label="YouTube"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" /><path d="m10 15 5-3-5-3z" /></svg></span></a></li>
</ul></div>
</div>
<div class="fo-cols">
<nav class="fo-col" data-anim="item" aria-label="Services">
<h2 class="fo-col-title">Services</h2>
<ul class="fo-links"><li><a href="#features">Sell</a></li><li><a href="#features">Buy</a></li><li><a href="#features">Lettings</a></li><li><a href="#features">Mortgages</a></li></ul>
</nav>
<nav class="fo-col" data-anim="item" aria-label="Company">
<h2 class="fo-col-title">Company</h2>
<ul class="fo-links"><li><a href="#team">Our agents</a></li><li><a href="#customers">Reviews</a></li><li><a href="#contact">Contact</a></li></ul>
</nav>
</div>
</div>
<div class="fo-bottom">
<p class="fo-copy">© 2026 Harbor Homes Ltd.</p>
<ul class="fo-legal"><li><a href="/privacy/">Privacy</a></li><li><a href="/terms/">Terms</a></li><li><a href="/cookies/">Cookies</a></li></ul>
<a class="fo-totop" href="#" data-totop><span>Back to top</span> <span aria-hidden="true">↑</span></a>
</div>
</footer>
</section>@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800;900&display=swap');
body{margin:0;background:#ffffff}
html{scroll-behavior:smooth}section[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.st{--st-brand:#0f766e;--st-btn-text:#ffffff;--st-bg:#ffffff;--st-surface:#f0f7f5;--st-text:#0f1f1c;--st-muted:#4b5f5a;--st-radius:12;--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}}
/* Simple Sticky Navbar */
.st-navbar-simple{overflow:visible;background:color-mix(in srgb,var(--st-bg) 88%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.st-brand{display:inline-flex;align-items:center;gap:10px;flex:none;text-decoration:none;color:var(--st-text)}
.st-brand-img{height:32px;width:auto;max-width:180px;object-fit:contain}
.st-brand-mark{display:inline-flex;align-items:center;gap:10px;font:800 21px/1 var(--st-font-heading);letter-spacing:-.03em}
.st-brand-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:calc(var(--st-radius) * .7px);background:var(--st-brand);color:var(--st-btn-text)}
.st-brand-icon svg{width:19px;height:19px}
.st:has([data-sticky-flag]){position:sticky;top:0;z-index:50;transition:box-shadow .3s ease}
.st.is-scrolled{box-shadow:0 10px 30px -18px rgba(15,23,42,.35)}
.st-burger{display:none;position:relative;flex:none;width:44px;height:44px;border:0;border-radius:calc(var(--st-radius) * .7px);background:color-mix(in srgb,var(--st-text) 7%,transparent);color:var(--st-text);cursor:pointer}
.st-burger span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s ease,opacity .2s ease}
.st-burger span:nth-child(1){top:15px}.st-burger span:nth-child(2){top:21px}.st-burger span:nth-child(3){top:27px}
.st-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.st-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.st-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.st-burger:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 45%,transparent);outline-offset:2px}
.nb{position:relative;display:flex;align-items:center;gap:clamp(20px,3cqi,40px);min-height:72px}
.nb-nav{flex:1;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nb-links{list-style:none;display:flex;align-items:center;gap:4px;margin:0 auto}
.nb-link{display:block;padding:8px 14px;border-radius:calc(var(--st-radius) * .7px);color:var(--st-muted);font-weight:600;font-size:15.5px;text-decoration:none;transition:color .2s ease,background .2s ease}
.nb-link:hover{color:var(--st-text);background:color-mix(in srgb,var(--st-text) 6%,transparent)}
.nb-link[aria-current="page"]{color:var(--st-brand);background:color-mix(in srgb,var(--st-brand) 11%,transparent)}
.nb-actions{display:flex;align-items:center;gap:18px}
.nb-login{color:var(--st-text);font-weight:600;font-size:15.5px;text-decoration:none}
.nb-login:hover{color:var(--st-brand)}
.nb .nb-cta{min-height:44px;padding:0 20px;font-size:15px}
@container st (max-width:900px){
.nb .st-burger{display:inline-block;margin-left:auto}
.nb-nav{position:absolute;left:var(--st-pad);right:var(--st-pad);top:calc(100% + 8px);flex-direction:column;align-items:stretch;gap:8px;padding:10px;border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-bg);border:1px solid color-mix(in srgb,var(--st-text) 9%,transparent);box-shadow:0 24px 60px -24px rgba(15,23,42,.35)}
.nb-links{flex-direction:column;align-items:stretch;gap:2px;margin:0}
.nb-link{padding:12px 14px;font-size:16.5px;color:var(--st-text)}
.nb-actions{flex-direction:column;align-items:stretch;gap:10px;padding:12px 4px 4px;border-top:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.nb-login{padding:8px 10px}
.nb .nb-cta{width:100%;min-height:48px}
.has-menu:not(.menu-open) .nb-nav{display:none}
.st:not(.has-menu) .nb{flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.st:not(.has-menu) .nb-nav{position:static;flex-basis:100%;box-shadow:none}
.st:not(.has-menu) .st-burger{display:none}
}
/* Image Background Hero */
.st-image-background-hero{min-height:min(88vh,760px);display:flex;align-items:stretch;background:var(--st-bg)}
.ib-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.ib-shade{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--st-bg) 88%,transparent) 0%,color-mix(in srgb,var(--st-bg) 55%,transparent) 55%,color-mix(in srgb,var(--st-bg) 15%,transparent) 100%),linear-gradient(0deg,color-mix(in srgb,var(--st-bg) 70%,transparent),transparent 45%)}
.ib{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding-top:clamp(72px,10cqi,140px);padding-bottom:clamp(32px,4cqi,48px)}
.ib-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px;max-width:640px}
.ib-eyebrow{color:var(--st-brand)}
.ib-title{font-size:clamp(42px,5.6cqi + 10px,80px);line-height:1.02}
.ib-lead{color:var(--st-muted);max-width:32em}
.ib-ghost{color:var(--st-text);border-color:color-mix(in srgb,var(--st-text) 55%,transparent);backdrop-filter:blur(6px)}
.ib-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--st-text) 22%,transparent)}
.ib-stats div{display:flex;flex-direction:column;gap:2px}
.ib-stats strong{font-family:var(--st-font-heading);font-size:clamp(26px,2.6cqi + 8px,38px);line-height:1.1;color:var(--st-text)}
.ib-stats span{font-size:14px;color:var(--st-muted)}
@container st (max-width:640px){.ib-stats{grid-template-columns:1fr}.ib-shade{background:color-mix(in srgb,var(--st-bg) 72%,transparent)}}
/* Property Listings */
.st-property-listings{padding:clamp(64px,8cqi,112px) 0}
.pl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;margin-bottom:clamp(28px,4cqi,48px)}
.pl-titles{display:flex;flex-direction:column;gap:12px;max-width:36em}
.pl-all{font-weight:700;color:var(--st-brand);text-decoration:none;white-space:nowrap}
.pl-all:hover{text-decoration:underline}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(18px,2.5cqi,28px)}
.pl-card{display:flex;flex-direction:column;overflow:hidden;border-radius:calc(var(--st-radius) * 1px);background:var(--st-bg);border:1px solid color-mix(in srgb,var(--st-text) 9%,transparent);color:inherit;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.pl-card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px color-mix(in srgb,var(--st-text) 45%,transparent)}
.pl-card:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 50%,transparent);outline-offset:3px}
.pl-media{position:relative;display:block;aspect-ratio:3/2;background:var(--st-surface)}
.pl-photo,.pl-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pl-status{position:absolute;top:12px;left:12px;padding:5px 11px;border-radius:999px;background:var(--st-brand);color:var(--st-btn-text);font-size:12px;font-weight:700;letter-spacing:.03em}
.pl-body{display:flex;flex-direction:column;gap:5px;padding:18px 20px 20px}
.pl-price{font:800 22px/1.2 var(--st-font-heading);color:var(--st-text)}
.pl-title{font-weight:600}
.pl-addr{color:var(--st-muted);font-size:14.5px}
.pl-facts{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--st-text) 8%,transparent);color:var(--st-muted);font-size:14px}
.pl-facts>span{display:inline-flex;align-items:center;gap:6px}
.pl-facts>span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--st-brand)}
.pa-sky{fill:color-mix(in srgb,var(--st-brand) 16%,var(--st-surface))}
.pa-sun{fill:color-mix(in srgb,#fbbf24 72%,var(--st-surface))}
.pa-hill{fill:color-mix(in srgb,var(--st-brand) 30%,var(--st-surface))}
.pa-wall{fill:var(--st-bg)}
.pa-roof,.pa-chim{fill:var(--st-text)}
.pa-win{fill:color-mix(in srgb,var(--st-brand) 22%,var(--st-bg))}
.pa-door{fill:var(--st-brand)}
.pa-trunk{fill:color-mix(in srgb,var(--st-text) 55%,var(--st-surface))}
.pa-leaf{fill:color-mix(in srgb,var(--st-brand) 60%,var(--st-text))}
.pa-ground{fill:color-mix(in srgb,var(--st-brand) 45%,var(--st-text))}
.pl-card:nth-child(3n+2) .pa-sky{fill:color-mix(in srgb,#fb923c 26%,var(--st-surface))}
.pl-card:nth-child(3n+2) .pa-roof,.pl-card:nth-child(3n+2) .pa-chim{fill:var(--st-brand)}
.pl-card:nth-child(3n+2) .pa-door{fill:var(--st-text)}
.pl-card:nth-child(3n) .pa-sky{fill:color-mix(in srgb,var(--st-text) 82%,var(--st-brand))}
.pl-card:nth-child(3n) .pa-sun{fill:color-mix(in srgb,#f8fafc 85%,transparent)}
.pl-card:nth-child(3n) .pa-win{fill:#fcd34d}
.pl-card:nth-child(3n) .pa-hill{fill:color-mix(in srgb,var(--st-text) 70%,var(--st-brand))}
/* 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}}
/* How It Works Steps */
.st-features-steps{padding:clamp(64px,8cqi,112px) 0}
.fp-steps{list-style:none;counter-reset:fp;display:grid;grid-auto-columns:1fr;grid-auto-flow:column;gap:clamp(20px,3cqi,40px);position:relative}
.fp-step{counter-increment:fp;position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:0 6px}
.fp-step:not(:last-child)::after{content:"";position:absolute;top:36px;left:calc(50% + 52px);right:calc(-50% + 52px - clamp(20px,3cqi,40px));border-top:2px dashed color-mix(in srgb,var(--st-brand) 45%,transparent)}
.fp-badge{position:relative;display:grid;place-items:center;width:72px;height:72px;margin-bottom:8px;border-radius:calc(var(--st-radius) * 1.3px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 8%,transparent);box-shadow:0 14px 34px -18px color-mix(in srgb,var(--st-brand) 60%,transparent)}
.fp-badge .st-icon{background:none;width:40px;height:40px}
.fp-badge .st-icon svg{width:28px;height:28px}
.fp-num{position:absolute;top:-10px;right:-10px;display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:999px;background:var(--st-brand);color:var(--st-btn-text);font:800 13px/1 var(--st-font-heading);box-shadow:0 0 0 4px var(--st-bg)}
.fp-num::before{content:counter(fp)}
.fp-title{font-size:20px;letter-spacing:-.01em}
.fp-text{color:var(--st-muted);font-size:16px;max-width:22em}
.fp-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:clamp(40px,5cqi,64px);text-align:center}
.fp-note{font-size:14px;color:var(--st-muted)}
@container st (max-width:760px){.fp-steps{grid-auto-flow:row;gap:36px}.fp-step:not(:last-child)::after{top:auto;bottom:-30px;left:50%;right:auto;height:24px;border-top:0;border-left:2px dashed color-mix(in srgb,var(--st-brand) 45%,transparent)}}
/* 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)}}
/* Team Grid */
.st-team-grid{padding:clamp(64px,8cqi,112px) 0}
.tm2-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4cqi,32px)}
.tm2-card{display:flex;flex-direction:column}
.tm2-photo{position:relative;overflow:hidden;margin-bottom:16px;border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);aspect-ratio:1}
.tm2-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tm2-card:hover .tm2-photo img{transform:scale(1.05)}
.tm2-social{position:absolute;left:12px;bottom:12px;display:flex;gap:8px;transform:translateY(calc(100% + 16px));transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.tm2-card:hover .tm2-social,.tm2-card:focus-within .tm2-social{transform:none}
@media (hover:none){.tm2-social{transform:none}}
.tm2-social a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);color:#0f172a;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.tm2-social a:hover{background:var(--st-brand);color:var(--st-btn-text)}
.tm2-social svg{width:17px;height:17px}
.tm2-name{font-size:18px;letter-spacing:-.01em}
.tm2-role{color:var(--st-brand);font-size:14.5px;font-weight:600;margin-top:2px}
.tm2-bio{color:var(--st-muted);font-size:15px;margin-top:8px}
.tm2-bio:empty{display:none}
@container st (max-width:960px){.tm2-grid{grid-template-columns:repeat(3,1fr)}}
@container st (max-width:700px){.tm2-grid{grid-template-columns:repeat(2,1fr)}}
/* Testimonial Wall */
.st-testimonials-grid{padding:clamp(64px,8cqi,112px) 0}
.st-stars{color:#f59e0b;font-size:16px;letter-spacing:2px;line-height:1}
.st-person{display:flex;align-items:center;gap:12px}
.st-avatar{width:44px;height:44px;flex:none;border-radius:50%;object-fit:cover;background:var(--st-surface)}
.st-person-name{font-weight:700;font-size:15.5px;line-height:1.3}
.st-person-role{color:var(--st-muted);font-size:14px;line-height:1.4}
.st-person-role:empty{display:none}
.tg-summary{padding:6px 14px;border-radius:999px;background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 8%,transparent);color:var(--st-muted);font-size:14.5px;font-weight:600}
.tg-summary:empty{display:none}
.tg-wall{columns:3 300px;column-gap:clamp(16px,2cqi,22px)}
.tg-card{break-inside:avoid;display:flex;flex-direction:column;gap:16px;margin:0 0 clamp(16px,2cqi,22px);padding:clamp(22px,2.4cqi,28px);border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 7%,transparent);box-shadow:0 10px 30px -22px color-mix(in srgb,var(--st-text) 40%,transparent)}
.tg-quote{font-size:16.5px;line-height:1.65}
.tg-card:nth-child(3n+2){background:color-mix(in srgb,var(--st-brand) 6%,var(--st-surface))}
/* FAQ Accordion */
.st-faq-accordion{padding:clamp(64px,8cqi,112px) 0}
.st-acc{border-bottom:1px solid color-mix(in srgb,var(--st-text) 11%,transparent)}
.st-acc-q{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 2px;cursor:pointer;list-style:none;font:700 clamp(17px,.6cqi + 14px,19px)/1.4 var(--st-font-heading);letter-spacing:-.01em}
.st-acc-q::-webkit-details-marker{display:none}
.st-acc-q:hover{color:var(--st-brand)}
.st-acc-q:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 45%,transparent);outline-offset:2px;border-radius:6px}
.st-acc-icon{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--st-brand) 11%,transparent);transition:transform .3s ease,background .3s ease}
.st-acc-icon::before,.st-acc-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:var(--st-brand);transform:translate(-50%,-50%)}
.st-acc-icon::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s ease}
.st-acc[open]:not(.is-closing) .st-acc-icon{transform:rotate(180deg);background:var(--st-brand)}
.st-acc[open]:not(.is-closing) .st-acc-icon::before,.st-acc[open]:not(.is-closing) .st-acc-icon::after{background:var(--st-btn-text)}
.st-acc[open]:not(.is-closing) .st-acc-icon::after{transform:translate(-50%,-50%) rotate(0deg)}
.st-acc-a{overflow:hidden}
.st-acc-a p{padding:0 48px 24px 2px;color:var(--st-muted);font-size:16.5px;line-height:1.7}
.fq-list{max-width:820px;margin:0 auto;border-top:1px solid color-mix(in srgb,var(--st-text) 11%,transparent)}
.fq-contact{max-width:820px;margin:clamp(32px,4cqi,48px) auto 0;padding:20px 24px;border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);text-align:center;color:var(--st-muted)}
.fq-contact a{color:var(--st-brand);font-weight:700;text-decoration:none}
.fq-contact a:hover{text-decoration:underline}
/* 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}}
/* Multi-Column Footer */
.st-footer-columns{padding:clamp(56px,7cqi,88px) 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}
.fo-top{display:grid;grid-template-columns:minmax(220px,1.1fr) 2fr;gap:clamp(36px,5cqi,80px)}
.fo-brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.fo-tagline{color:var(--st-muted);font-size:15.5px;max-width:24em}
.fo-tagline:empty{display:none}
.fo-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:28px}
.fo-col-title{font:700 14px/1.2 var(--st-font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--st-text);margin-bottom:16px}
.fo-links{list-style:none;display:flex;flex-direction:column;gap:11px}
.fo-links a,.fo-legal a{color:var(--st-muted);font-size:15px;text-decoration:none;transition:color .2s ease}
.fo-links a:hover,.fo-legal a:hover{color:var(--st-brand)}
.fo-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px;margin-top:clamp(40px,5cqi,64px);padding-top:24px;border-top:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.fo-copy{color:var(--st-muted);font-size:14px;margin-right:auto}
.fo-legal{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px}
.fo-legal a{font-size:14px}
.fo-totop{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:color-mix(in srgb,var(--st-text) 6%,transparent);color:var(--st-text);font-size:14px;font-weight:600;text-decoration:none}
.fo-totop:hover{background:var(--st-brand);color:var(--st-btn-text)}
@container st (max-width:820px){.fo-top{grid-template-columns:1fr}}
@container st (max-width:520px){.fo-cols{grid-template-columns:1fr 1fr}.fo-copy{margin-right:0;flex-basis:100%}}
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var anim = G && !reduce;
document.querySelectorAll('.st').forEach(function (sec) {
var btn = sec.querySelector('[data-menu-toggle]');
var panel = sec.querySelector('[data-menu]');
if (btn && panel) {
sec.classList.add('has-menu');
var isOpen = false;
var mobile = function () { return getComputedStyle(btn).display !== 'none'; };
// The toggle and the panel's controls, in document order (the toggle may come after the panel)
var focusables = function () {
return Array.prototype.filter.call(sec.querySelectorAll('a[href], button'), function (el) { return el === btn || panel.contains(el); });
};
var open = function () {
isOpen = true;
sec.classList.add('menu-open');
btn.setAttribute('aria-expanded', 'true');
if (anim) {
G.fromTo(panel, { opacity: 0, y: -12 }, { opacity: 1, y: 0, duration: 0.35, ease: 'power3.out', clearProps: 'transform,opacity' });
G.fromTo(panel.querySelectorAll('[data-menu-item]'), { opacity: 0, y: -8 }, { opacity: 1, y: 0, duration: 0.3, stagger: 0.04, delay: 0.05, ease: 'power2.out', clearProps: 'transform,opacity' });
}
var first = panel.querySelector('a[href], button');
if (first) first.focus();
};
var close = function (returnFocus) {
if (!isOpen) return;
isOpen = false;
btn.setAttribute('aria-expanded', 'false');
var done = function () { sec.classList.remove('menu-open'); };
if (anim) G.to(panel, { opacity: 0, y: -8, duration: 0.2, ease: 'power2.in', onComplete: function () { done(); G.set(panel, { clearProps: 'transform,opacity' }); } });
else done();
if (returnFocus) btn.focus();
};
btn.addEventListener('click', function () { if (isOpen) close(false); else open(); });
document.addEventListener('keydown', function (e) {
if (!isOpen) return;
if (e.key === 'Escape') { close(true); return; }
if (e.key === 'Tab') {
var f = focusables(), first = f[0], last = f[f.length - 1];
if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
}
});
document.addEventListener('click', function (e) { if (isOpen && !sec.contains(e.target)) close(false); });
panel.addEventListener('click', function (e) { if (e.target.closest('a')) close(false); });
window.addEventListener('resize', function () { if (isOpen && !mobile()) close(false); });
}
sec.querySelectorAll('[data-dismiss]').forEach(function (x) {
x.addEventListener('click', function () {
var box = x.closest('[data-dismissable]');
if (!box) return;
if (anim) G.to(box, { height: 0, opacity: 0, paddingTop: 0, paddingBottom: 0, duration: 0.35, ease: 'power2.inOut', onComplete: function () { box.remove(); } });
else box.remove();
});
});
if (sec.querySelector('[data-sticky-flag]')) {
var hideOn = !!sec.querySelector('[data-hide-flag]');
var last = window.scrollY, hidden = false;
var onScroll = function () {
var y = window.scrollY;
sec.classList.toggle('is-scrolled', y > 8);
if (hideOn && !sec.classList.contains('menu-open')) {
var down = y > last && y > 120;
if (down !== hidden) {
hidden = down;
if (anim) G.to(sec, { yPercent: down ? -100 : 0, duration: 0.35, ease: 'power2.out' });
else sec.style.transform = down ? 'translateY(-100%)' : '';
}
}
last = y;
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
}
});
})();
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!G || reduce || window.ST_STILL) return;
if (window.ScrollTrigger) G.registerPlugin(ScrollTrigger);
document.querySelectorAll('.st [data-count]').forEach(function (el) {
var host = el.closest('.st');
if (host && /"count":true/.test(host.getAttribute('data-scroll') || '')) return; // counted by its scroll animation
var text = el.textContent;
var m = text.match(/\d[\d,]*(\.\d+)?/);
if (!m) return;
var raw = m[0];
var dec = m[1] ? m[1].length - 1 : 0;
var commas = raw.indexOf(',') > -1;
var target = parseFloat(raw.replace(/,/g, ''));
var pre = text.slice(0, m.index), post = text.slice(m.index + raw.length);
var fmt = function (v) {
var s = v.toFixed(dec);
if (commas) { var p = s.split('.'); p[0] = p[0].replace(/\B(?=(\d{3})+(?!\d))/g, ','); s = p.join('.'); }
return pre + s + post;
};
el.setAttribute('aria-label', text.trim());
var o = { v: 0 };
// The real value stays in place until the count starts (it starts from 0 on enter)
G.fromTo(o, { v: 0 }, {
v: target, duration: 2, ease: 'power2.out', immediateRender: false,
scrollTrigger: window.ScrollTrigger ? { trigger: el, start: 'top 90%', once: true } : undefined,
onUpdate: function () { el.textContent = fmt(o.v); },
onComplete: function () { el.textContent = text; }
});
});
})();
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var anim = G && !reduce;
document.querySelectorAll('.st [data-accordion]').forEach(function (list) {
var mode = list.getAttribute('data-accordion') || '';
var items = Array.prototype.slice.call(list.querySelectorAll('details'));
var body = function (d) { return d.querySelector('.st-acc-a'); };
var close = function (d) {
if (!d.open || d.classList.contains('is-closing')) return;
if (!anim) { d.open = false; return; }
d.classList.add('is-closing');
G.to(body(d), { height: 0, duration: 0.32, ease: 'power2.inOut', onComplete: function () {
d.open = false; d.classList.remove('is-closing'); G.set(body(d), { clearProps: 'height' });
} });
};
var open = function (d) {
d.open = true;
if (!anim) return;
var b = body(d);
G.fromTo(b, { height: 0 }, { height: 'auto', duration: 0.4, ease: 'power2.out', clearProps: 'height' });
G.fromTo(b.children, { y: -8, opacity: 0 }, { y: 0, opacity: 1, duration: 0.35, delay: 0.06, ease: 'power2.out', clearProps: 'transform,opacity' });
};
items.forEach(function (d) {
d.querySelector('summary').addEventListener('click', function (e) {
e.preventDefault();
if (d.open && !d.classList.contains('is-closing')) { close(d); return; }
if (/single/.test(mode)) items.forEach(function (o) { if (o !== d) close(o); });
open(d);
});
});
if (/first/.test(mode) && items[0]) items[0].open = true;
});
})();
(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 G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (G && window.ScrollToPlugin) G.registerPlugin(ScrollToPlugin);
document.querySelectorAll('.st [data-totop]').forEach(function (a) {
a.addEventListener('click', function (e) {
e.preventDefault();
if (G && window.ScrollToPlugin && !reduce) G.to(window, { scrollTo: 0, duration: 1, ease: 'power3.inOut' });
else window.scrollTo({ top: 0, behavior: reduce ? 'auto' : 'smooth' });
});
});
})();
(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();
})();