Law Firm Website HTML Template — Free CSS & JS Snippet
Law Firm 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 law firm website page: Simple Sticky Navbar, Image Background Hero, Stacking Cards, Scroll Path Timeline, Team Grid, Testimonial Wall, FAQ Accordion, Contact Form With Details, 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 Law Firm Website That Builds Confidence: Practice Areas, Process and Honest Answers on Fees
People looking for a solicitor are often worried, so authority has to come with clarity. The dark hero states who you help in plain terms, practice areas appear one by one as stacking cards so each gets its own moment and none is lost in a long list, and a timeline that draws itself down the page explains how a case works from first call to resolution, which answers the question that worries clients most: what happens next?
Credibility comes from the partners (photos, qualifications and areas of expertise), client reviews and, importantly, a FAQ that is honest about fees, which is the topic most law firm sites avoid and most clients want answered. A contact form with details closes the page by offering a free first consultation.
Rewrite the sample text in your firm's voice and add your regulator details. It is the layout of the Law Firm Website template, which also comes as a multi-page site with Practice areas, Our team and Contact pages; open it in the Website Builder to edit and export.
Built from website section templates
The 9 Sections Behind This Law Firm Website Page
This page is not one big block of code: it is stacked from ready-made sections in the free Website Section Templates library, in this order. Open any of them to edit it on its own, or start with the whole page.
- Simple Sticky Navbara simple sticky bar with a phone number and a consultation button
- Image Background Heroa dark, authoritative hero that says who you help and offers a free first consultation
- Stacking Cardspractice areas as stacking cards, so each gets its own moment instead of a long list
- Scroll Path Timelinea timeline that draws itself to explain how a case works, from first call to resolution
- Team Gridthe partners, with photos, qualifications and areas of expertise
- Testimonial Wallclient reviews, placed after the team they are about
- FAQ Accordionhonest answers about fees, timelines and what a first consultation involves
- Contact Form With Detailsa contact form with phone, email and office address for the first conversation
- Minimal Footera minimal footer with regulatory details, complaints procedure and legal notices
Step by step
How to Use
- 1Open the template in the Website BuilderPress "Start using this template" to open the Law Firm Website in the Website Builder. Everything is edited with forms in a side panel; no code is needed.
- 2Write practice areas in the client's wordsRename each stacking card to how clients describe their problem ("divorce and separation") and add a short paragraph on how you help.
- 3Explain your process on the timelineRewrite the timeline steps to match how a typical matter runs at your firm, with realistic timescales, so clients know what to expect.
- 4Add regulatory details and fee informationAdd your regulator registration, complaints process and fee approach to the footer and FAQ, as professional rules and client trust require.
- 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
Solicitors, barristers and legal practices
Present practice areas, people and a clear route to a first consultation.
Accountants, consultants and advisers
Swap practice areas for services; the authority-and-process structure suits any professional firm.
Learn stacking cards and a drawn timeline
See how ScrollTrigger pins stacked cards and animates an SVG path as the visitor scrolls.
Got questions?
Frequently Asked Questions
Practice areas, the lawyers and their credentials, how the process works, client reviews, information on fees, regulatory details and a way to contact you.
Yes. Clients worry about cost; honest information on how you charge builds trust and brings better enquiries.
Yes. Add a blog section from the Website Section Templates library and use it to answer common legal questions in plain language.
It is assembled from 9 templates in the free Website Section Templates library: Simple Sticky Navbar, Image Background Hero, Stacking Cards, Scroll Path Timeline, Team Grid, Testimonial Wall, FAQ Accordion, Contact Form With Details, 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
<section class="st st-navbar-simple" data-uid="smvnkxddk8fja">
<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="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><span>Whitmore & Hale</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="#highlights"><span>Practice areas</span></a></li>
<li data-menu-item><a class="nb-link" href="#journey"><span>How we work</span></a></li>
<li data-menu-item><a class="nb-link" href="#team"><span>Our team</span></a></li>
<li data-menu-item><a class="nb-link" href="#contact"><span>Contact</span></a></li>
</ul>
<div class="nb-actions" data-menu-item>
<a class="st-btn nb-cta" href="#contact"><span>Free consultation</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="smvnkxddkx6ex">
<div class="ib-bg" role="img" aria-label="Background photo" style="background-image:url('https://webdevpuneet.com/images/section-templates/tpl-law.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">Solicitors in Manchester since 1998</span>
<h1 class="ib-title" data-anim="item" data-anim-text>Clear advice when <span class="hl">it matters most</span></h1>
<p class="st-lead ib-lead" data-anim="item">Family, property, employment and probate law, explained in plain English with fixed fees agreed up front.</p>
<div class="st-btns" data-anim="item">
<a class="st-btn" href="#contact"><span>Book a free consultation</span></a>
<a class="st-btn st-btn--ghost ib-ghost" href="#highlights"><span>Practice areas</span></a>
</div>
</div>
<div class="ib-stats" data-anim="media">
<div><strong>25+</strong><span>years in practice</span></div>
<div><strong>2,800</strong><span>cases resolved</span></div>
<div><strong>4.9★</strong><span>client rating</span></div>
</div>
</div>
</section>
<section id="highlights" class="st st-scroll-stack" data-uid="smvnkxddkdu7t">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Practice areas</p>
<h2 class="st-h2" data-anim="item" data-anim-text>How we <span class="hl">can help</span></h2>
<p class="st-lead" data-anim="item">Specialist teams for the moments that matter.</p>
</header>
<div class="sk-list" data-stack>
<article class="sk-card">
<div class="sk-inner">
<div class="sk-copy">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg></span>
<span class="sk-label">Family law</span>
<h3 class="sk-title">Divorce, separation and children</h3>
<p class="sk-text">Calm, practical advice to reach fair agreements, with court representation when it is needed.</p>
</div>
</div>
</article>
<article class="sk-card">
<div class="sk-inner">
<div class="sk-copy">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="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 class="sk-label">Property</span>
<h3 class="sk-title">Buying, selling and leases</h3>
<p class="sk-text">Residential and commercial conveyancing with fixed fees and updates at every stage.</p>
</div>
</div>
</article>
<article class="sk-card">
<div class="sk-inner">
<div class="sk-copy">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" /><rect width="20" height="14" x="2" y="6" rx="2" /></svg></span>
<span class="sk-label">Employment</span>
<h3 class="sk-title">Contracts, disputes and settlements</h3>
<p class="sk-text">Advice for employees and employers, from settlement agreements to tribunal claims.</p>
</div>
</div>
</article>
<article class="sk-card">
<div class="sk-inner">
<div class="sk-copy">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="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>
<span class="sk-label">Wills & probate</span>
<h3 class="sk-title">Plan ahead and settle estates</h3>
<p class="sk-text">Wills, lasting powers of attorney and probate handled with care and clear costs.</p>
</div>
</div>
</article>
</div>
</div>
</section>
<section id="journey" class="st st-scroll-path" data-uid="smvnkxddkviez">
<div class="st-art" aria-hidden="true" style="color:var(--st-brand);opacity:0.08" data-art-anim="draw"><svg viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice"><g fill="none" stroke="currentColor" stroke-width="1.6"><path data-draw d="M930 420 L933.9 424 L936.5 428.4 L936.9 432.8 L935 436.9 L930.9 440.5 L925 443.3 L918.1 445.2 L911 446.5 L904.5 447.6 L899 448.8 L894.4 450.5 L890.7 452.9 L887.2 456.1 L883.3 459.8 L878.8 463.5 L873.3 466.7 L866.9 468.8 L860 469.6 L853.1 468.8 L846.7 466.7 L841.2 463.5 L836.7 459.8 L832.8 456.1 L829.3 452.9 L825.6 450.5 L821 448.8 L815.5 447.6 L809 446.5 L801.9 445.2 L795 443.3 L789.1 440.5 L785 436.9 L783.1 432.8 L783.5 428.4 L786.1 424 L790 420 L794.5 416.4 L798.6 413.3 L801.7 410.3 L803.5 407.2 L804 403.8 L803.7 399.9 L803.4 395.4 L803.8 390.7 L805.5 386.2 L809 382.3 L814.1 379.4 L820.7 377.8 L828 377.4 L835.5 378.2 L842.6 379.6 L849 381.2 L854.7 382.4 L860 382.8 L865.3 382.4 L871 381.2 L877.4 379.6 L884.5 378.2 L892 377.4 L899.3 377.8 L905.9 379.4 L911 382.3 L914.5 386.2 L916.2 390.7 L916.6 395.4 L916.3 399.8 L916 403.8 L916.5 407.2 L918.3 410.3 L921.4 413.3 L925.5 416.4 L930 420Z"/><path data-draw d="M998.2 420 L1001.9 427.7 L1002.5 435.6 L999.7 443.2 L993.6 450.1 L984.9 456.1 L974.6 461 L963.9 465.1 L953.6 468.7 L944.5 472.4 L936.6 476.6 L929.5 481.5 L922.6 487.2 L915.2 493.4 L906.6 499.3 L896.5 504.4 L885 508 L872.6 509.5 L860 508.9 L847.8 506.3 L836.6 502.2 L826.6 497.2 L817.6 492.2 L809.1 487.6 L800.5 483.9 L791.1 481 L780.7 478.6 L769.2 476.3 L757.4 473.4 L746 469.5 L736.1 464.4 L728.7 458 L724.4 450.6 L723.4 442.7 L725.3 434.7 L729.3 427.1 L734.2 420 L738.9 413.4 L742.6 407.2 L744.7 400.8 L745.5 394.2 L745.6 386.9 L746 379.2 L747.6 371.2 L751.4 363.5 L757.8 356.7 L766.9 351.2 L778.1 347.5 L790.6 345.5 L803.6 345 L816.3 345.5 L828.2 346.3 L839.2 346.8 L849.6 346.5 L860 345.2 L870.8 343.2 L882.5 341 L895 339.1 L907.9 338.4 L920.7 339.3 L932.5 342.1 L942.5 346.9 L950.4 353.2 L955.9 360.5 L959.6 368.2 L962.2 375.6 L964.7 382.5 L967.9 388.8 L972.5 394.6 L978.4 400.3 L985.3 406.3 L992.3 412.8 L998.2 420Z"/><path data-draw d="M1067.5 420 L1069.1 431.3 L1066.1 442.5 L1058.8 453 L1048.1 462.4 L1035.2 470.7 L1021.7 477.9 L1008.5 484.5 L996.7 491.1 L986.1 498.2 L976.5 506.1 L967 514.7 L956.6 523.8 L944.6 532.4 L930.4 539.9 L914.2 545.3 L896.4 548.1 L878.1 548.2 L860 545.6 L842.9 541.1 L827.1 535.5 L812.6 529.7 L798.7 524.4 L784.8 520 L770.1 516.5 L754.3 513.6 L737.6 510.5 L720.4 506.5 L704 501.2 L689.5 494 L678.2 485.1 L670.8 474.7 L667.5 463.4 L667.9 451.9 L670.9 440.7 L675.3 430 L679.5 420 L682.5 410.4 L684 400.8 L684 390.8 L683.5 380.2 L683.6 369 L685.6 357.6 L690.7 346.5 L699.4 336.5 L711.8 328.1 L727.1 321.8 L744.5 317.7 L762.6 315.4 L780.6 314.4 L797.7 313.8 L813.7 312.9 L829.1 311.2 L844.3 308.5 L860 305.1 L876.7 301.5 L894.5 298.6 L913 297.4 L931.4 298.4 L948.7 302 L964.1 308.2 L976.9 316.5 L987 326.2 L994.8 336.4 L1001.2 346.5 L1007.3 356 L1014.2 364.8 L1022.4 373 L1032.1 381.2 L1042.7 389.7 L1053.1 398.9 L1061.8 409.1 L1067.5 420Z"/><path data-draw d="M1135 420 L1132.7 434.8 L1125.1 449 L1113.3 462.1 L1098.7 473.9 L1083.2 484.5 L1068.1 494.5 L1054.3 504.4 L1042.1 514.7 L1030.9 525.9 L1019.6 537.9 L1007 550.2 L992.2 561.9 L974.4 572.1 L953.9 579.9 L931.1 584.5 L907.1 585.7 L883.1 583.8 L860 579.6 L838.3 573.9 L817.9 568 L798.4 562.6 L778.9 558.1 L758.7 554.7 L737.3 551.7 L714.9 548.5 L692.1 544.1 L670.2 537.7 L650.6 528.9 L634.7 517.8 L623.5 504.7 L617.1 490.2 L615.1 475.3 L616.2 460.5 L618.9 446.4 L621.5 432.9 L623 420 L622.7 407.1 L620.9 393.9 L618.7 379.9 L617.6 365.3 L619.1 350.4 L624.7 335.8 L634.9 322.3 L649.9 310.7 L668.8 301.5 L690.5 294.7 L713.3 290.1 L736.2 287 L758 284.4 L778.7 281.6 L798.6 277.9 L818.2 273.1 L838.5 267.6 L860 262.1 L882.9 257.7 L906.8 255.4 L930.9 255.9 L954 259.8 L975.1 267 L993.3 276.8 L1008.6 288.5 L1021.2 300.9 L1032.2 313.2 L1042.8 324.9 L1054.1 335.7 L1066.9 345.9 L1081.2 356.1 L1096.2 366.7 L1110.8 378.3 L1123.1 391.2 L1131.6 405.3 L1135 420Z"/><path data-draw d="M1198 420 L1191 438 L1178.9 454.9 L1163.6 470.4 L1147.1 484.8 L1131 498.4 L1116.4 511.8 L1103.5 525.7 L1091.6 540.5 L1079.4 556 L1065.5 571.9 L1048.6 587 L1028 600.4 L1003.5 610.8 L976 617.7 L946.7 620.6 L916.9 619.9 L887.7 616.5 L860 611.5 L833.7 606.1 L808.5 601.2 L783.3 597.5 L757.4 594.7 L730.3 592.4 L702 589.6 L673.4 585.3 L645.7 578.4 L620.6 568.5 L599.6 555.5 L583.8 539.9 L573.6 522.5 L568.2 504.4 L566.4 486.3 L566.4 468.8 L566.4 452.1 L565.1 436 L562 420 L557.4 403.6 L552.6 386.4 L549.3 368.4 L549.4 349.9 L554.6 331.7 L565.6 314.6 L582.5 299.5 L604.4 287 L629.7 277.2 L656.7 269.8 L683.8 264 L710 258.9 L734.8 253.5 L758.5 247.1 L782.1 239.7 L806.4 231.6 L832.3 223.7 L860 217.2 L889.2 213.2 L918.9 212.9 L947.9 216.6 L975 224.2 L999.1 235.1 L1020 248.1 L1038.2 262.2 L1054.5 276.3 L1070.3 289.6 L1086.8 302 L1104.8 313.7 L1124.4 325.4 L1144.6 337.7 L1164 351.4 L1180.7 366.7 L1192.7 383.6 L1198.7 401.6 L1198 420Z"/><path data-draw d="M1255 420 L1243.6 440.8 L1228.6 460.3 L1212.1 478.5 L1196.1 495.8 L1181.7 513 L1169.2 530.7 L1157.6 549.2 L1145.6 568.6 L1131.2 588.2 L1113.1 607 L1090.2 623.8 L1062.4 637.4 L1030.6 646.9 L996.2 652 L960.8 653.1 L925.7 651.2 L892.1 647.4 L860 643.2 L829 639.6 L798.2 637.2 L766.7 635.8 L733.9 634.8 L699.7 633.1 L665.1 629.3 L631.3 622.5 L600.4 611.8 L573.8 597.4 L552.9 579.8 L537.9 559.8 L528.4 538.7 L522.7 517.5 L519 496.9 L515.4 477.3 L510.4 458.2 L503.4 439.3 L495 420 L486.5 399.7 L480.1 378.5 L478 356.5 L481.9 334.7 L493 313.9 L511 295.1 L535.1 278.9 L563.4 265.7 L593.8 255 L624.5 246 L654.2 237.8 L682.4 229.3 L709.4 219.8 L736.3 209.2 L764 198 L793.8 187.1 L825.8 178 L860 172 L895.3 170.2 L930.2 173.1 L963.4 180.7 L993.8 192.1 L1020.9 206 L1045.1 221.3 L1067.3 236.5 L1088.9 250.9 L1111.2 264.3 L1135.1 276.9 L1160.5 289.5 L1186.5 303.1 L1211.5 318.4 L1233.2 335.8 L1249.5 355.3 L1258.8 376.4 L1260.5 398.3 L1255 420Z"/><path data-draw d="M1306 420 L1292.2 443.4 L1276.9 465.6 L1262.1 486.8 L1249 507.8 L1238 529.3 L1227.8 551.7 L1216.9 574.9 L1203 598.4 L1184.4 621.1 L1160 641.7 L1129.6 658.7 L1094 671.3 L1054.9 679.1 L1014.2 682.6 L973.5 682.7 L934.2 680.8 L896.5 678.5 L860 676.9 L823.8 676.4 L786.9 677.1 L748.4 678.1 L708.5 678.1 L667.9 675.5 L628 669.2 L590.8 658.3 L558.3 642.9 L531.6 623.6 L511.3 601.4 L496.7 577.7 L486.3 553.8 L477.9 530.5 L469.7 508.1 L459.9 486.5 L448.1 465 L434.9 443.1 L422 420 L411.6 395.7 L406.3 370.4 L408.2 344.9 L418.4 320.3 L436.8 297.6 L462.3 277.6 L492.7 260.6 L525.8 246.1 L559.3 233.6 L591.8 221.8 L622.5 209.7 L652 196.6 L681.3 182.4 L711.8 167.6 L744.7 153.3 L780.7 141.1 L819.4 132.5 L860 128.8 L900.9 130.5 L940.4 137.4 L977.2 148.7 L1010.9 163 L1041.4 178.8 L1070 194.5 L1097.9 209.4 L1126.5 223.1 L1156.7 236 L1188.5 249.1 L1220.8 263.4 L1251.8 279.7 L1279.1 298.8 L1300.4 320.6 L1313.8 344.6 L1318.7 369.9 L1315.6 395.3 L1306 420Z"/><path data-draw d="M1353.1 420 L1340 446 L1327.6 471.1 L1317 495.9 L1308.5 521.2 L1300.9 547.5 L1292.1 574.7 L1279.7 602.2 L1261.5 628.9 L1236.3 653.3 L1203.9 674.1 L1165.1 690.2 L1121.9 701.2 L1076.3 707.6 L1030.4 710.3 L985.8 711 L942.8 711.3 L901.2 712.2 L860 714.5 L818 717.9 L774.3 721.4 L728.8 723.6 L682.2 722.8 L636.2 717.6 L592.7 707 L553.8 691.1 L520.9 670.6 L494.5 646.6 L474.1 620.7 L458.1 594.5 L444.2 568.8 L430.4 544.2 L415 520.4 L397.5 496.8 L378.7 472.6 L360.3 447.1 L345.1 420 L335.9 391.6 L334.9 362.6 L343.4 334.2 L361.3 307.5 L387.3 283.3 L419.1 262.2 L453.9 243.7 L489.3 227.2 L523.6 211.4 L556 195.3 L587 178.2 L617.9 160 L650.3 141.1 L685.7 123.1 L724.9 107.4 L767.8 95.8 L813.4 89.6 L860 89.5 L905.8 95.3 L949.3 106 L989.7 120 L1027 135.5 L1062.2 151.2 L1096.7 165.8 L1132 179.2 L1168.8 191.8 L1207.3 204.7 L1246.3 219 L1283.8 236 L1317.2 256.3 L1344 280.1 L1362.2 306.7 L1371.2 335.1 L1371.4 364.1 L1364.5 392.6 L1353.1 420Z"/><path data-draw d="M200 120 L202.6 122.3 L204.5 124.9 L205.3 127.5 L205 130.2 L203.4 132.5 L200.6 134.5 L197 136.1 L192.7 137 L188.3 137.5 L184 137.7 L180 137.7 L176.5 137.8 L173.6 138 L171 138.7 L168.6 139.8 L166.1 141.3 L163.2 143 L160 144.8 L156.3 146.4 L152.2 147.6 L147.9 148.1 L143.6 147.9 L139.8 146.9 L136.5 145.2 L134.1 142.9 L132.5 140.3 L131.7 137.5 L131.5 134.9 L131.4 132.4 L131.4 130.3 L130.9 128.4 L129.8 126.8 L128.1 125.3 L125.7 123.8 L122.9 122 L120 120 L117.4 117.7 L115.5 115.1 L114.7 112.5 L115 109.8 L116.6 107.5 L119.4 105.5 L123 103.9 L127.3 103 L131.7 102.5 L136 102.3 L140 102.3 L143.5 102.2 L146.4 102 L149 101.3 L151.4 100.2 L153.9 98.7 L156.8 97 L160 95.2 L163.7 93.6 L167.8 92.4 L172.1 91.9 L176.4 92.1 L180.2 93.1 L183.5 94.8 L185.9 97.1 L187.5 99.7 L188.3 102.5 L188.5 105.1 L188.6 107.6 L188.6 109.7 L189.1 111.6 L190.2 113.2 L191.9 114.7 L194.3 116.2 L197.1 118 L200 120Z"/><path data-draw d="M263.4 120 L264.4 125.7 L263.3 131.3 L260.3 136.7 L255.6 141.6 L249.6 145.9 L242.7 149.6 L235.4 152.7 L228.1 155.4 L221.2 158 L214.8 160.5 L208.8 163.2 L203.1 166.2 L197.3 169.6 L191.2 173.1 L184.5 176.6 L177 179.8 L168.8 182.4 L160 184.1 L150.9 184.7 L141.8 184.1 L133.1 182.2 L125.2 179.3 L118.2 175.6 L112.3 171.3 L107.2 166.7 L102.8 162.2 L98.8 158 L94.7 154 L90.3 150.3 L85.4 146.7 L80 143.1 L74.4 139.3 L68.7 135.2 L63.5 130.5 L59.3 125.5 L56.6 120 L55.6 114.3 L56.7 108.7 L59.7 103.3 L64.4 98.4 L70.4 94.1 L77.3 90.4 L84.6 87.3 L91.9 84.6 L98.8 82 L105.2 79.5 L111.2 76.8 L116.9 73.8 L122.7 70.4 L128.8 66.9 L135.5 63.4 L143 60.2 L151.2 57.6 L160 55.9 L169.1 55.3 L178.2 55.9 L186.9 57.8 L194.8 60.7 L201.8 64.4 L207.7 68.7 L212.8 73.3 L217.2 77.8 L221.2 82 L225.3 86 L229.7 89.7 L234.6 93.3 L240 96.9 L245.6 100.7 L251.3 104.8 L256.5 109.5 L260.7 114.5 L263.4 120Z"/><path data-draw d="M320.9 120 L317.9 128.6 L312.8 136.7 L306 144.3 L298.1 151.2 L289.8 157.5 L281.4 163.5 L273.4 169.2 L265.7 175 L258.4 181 L250.9 187.2 L243.1 193.6 L234.4 199.9 L224.7 206 L213.6 211.4 L201.4 215.7 L188.1 218.7 L174.1 220 L160 219.8 L146.2 217.9 L133.1 214.7 L120.9 210.5 L109.7 205.6 L99.5 200.5 L89.9 195.3 L80.6 190.3 L71.3 185.6 L61.6 181 L51.6 176.4 L41.3 171.5 L31.1 166.1 L21.3 160.1 L12.6 153.3 L5.7 145.6 L0.9 137.4 L-1.3 128.8 L-0.9 120 L2.1 111.4 L7.2 103.3 L14 95.7 L21.9 88.8 L30.2 82.5 L38.6 76.5 L46.6 70.8 L54.3 65 L61.6 59 L69.1 52.8 L76.9 46.4 L85.6 40.1 L95.3 34 L106.4 28.6 L118.6 24.3 L131.9 21.3 L145.9 20 L160 20.2 L173.8 22.1 L186.9 25.3 L199.1 29.5 L210.3 34.4 L220.5 39.5 L230.1 44.7 L239.4 49.7 L248.7 54.4 L258.4 59 L268.4 63.6 L278.7 68.5 L288.9 73.9 L298.7 79.9 L307.4 86.7 L314.3 94.4 L319.1 102.6 L321.3 111.2 L320.9 120Z"/><path data-draw d="M367 120 L361.3 130.9 L354.6 141.3 L347.4 151.1 L340.1 160.6 L333.1 170 L326.3 179.5 L319.4 189.2 L312 199.1 L303.6 209 L293.6 218.7 L281.8 227.9 L268 236 L252.3 242.7 L234.9 247.6 L216.4 250.5 L197.4 251.5 L178.4 250.7 L160 248.3 L142.4 244.8 L125.7 240.7 L109.8 236.2 L94.4 231.7 L79.3 227.3 L64 223.1 L48.4 218.8 L32.5 214.2 L16.4 209 L0.8 202.8 L-14 195.5 L-27.1 187 L-37.9 177.2 L-45.8 166.4 L-50.6 155 L-52.1 143.2 L-50.8 131.4 L-47 120 L-41.3 109.1 L-34.6 98.7 L-27.4 88.9 L-20.1 79.4 L-13.1 70 L-6.3 60.5 L0.6 50.8 L8 40.9 L16.4 31 L26.4 21.3 L38.2 12.1 L52 4 L67.7 -2.7 L85.1 -7.6 L103.6 -10.5 L122.6 -11.5 L141.6 -10.7 L160 -8.3 L177.6 -4.8 L194.3 -0.7 L210.2 3.8 L225.6 8.3 L240.7 12.7 L256 16.9 L271.6 21.2 L287.5 25.8 L303.6 31 L319.2 37.2 L334 44.5 L347.1 53 L357.9 62.8 L365.8 73.6 L370.6 85 L372.1 96.8 L370.8 108.6 L367 120Z"/></g></svg></div>
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">How we work</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Your case, <span class="hl">step by step</span></h2>
<p class="st-lead" data-anim="item">No surprises: you always know what happens next and what it costs.</p>
</header>
<div class="sp" data-drawpath>
<svg class="sp-line" viewBox="0 0 40 1000" preserveAspectRatio="none" aria-hidden="true" focusable="false">
<path class="sp-track" d="M20 0 C34 125 6 250 20 375 S34 625 20 750 S6 875 20 1000"/>
<path class="sp-draw" data-draw d="M20 0 C34 125 6 250 20 375 S34 625 20 750 S6 875 20 1000"/>
</svg>
<ol class="sp-list">
<li class="sp-item" data-draw-step>
<span class="sp-dot"><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 class="sp-card">
<span class="sp-date">Step 1</span>
<h3 class="sp-title">Free first call</h3>
<p class="sp-text">A 30-minute call to understand your situation and tell you honestly if we can help.</p>
</div>
</li>
<li class="sp-item" data-draw-step>
<span class="sp-dot"><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>
<div class="sp-card">
<span class="sp-date">Step 2</span>
<h3 class="sp-title">A clear, fixed quote</h3>
<p class="sp-text">A written plan with the steps, the timeline and a fixed fee wherever possible.</p>
</div>
</li>
<li class="sp-item" data-draw-step>
<span class="sp-dot"><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>
<div class="sp-card">
<span class="sp-date">Step 3</span>
<h3 class="sp-title">We handle the detail</h3>
<p class="sp-text">Your solicitor manages the paperwork and negotiations, with updates every week.</p>
</div>
</li>
<li class="sp-item" data-draw-step>
<span class="sp-dot"><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 class="sp-card">
<span class="sp-date">Step 4</span>
<h3 class="sp-title">Resolution</h3>
<p class="sp-text">An agreement, a completed sale or a decision, and advice on what to do next.</p>
</div>
</li>
</ol>
</div>
</div>
</section>
<section id="team" class="st st-team-grid" data-uid="smvnkxddkhl5c">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Our team</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Partners you can <span class="hl">talk to</span></h2>
<p class="st-lead" data-anim="item">Experienced solicitors who explain things plainly.</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">Eleanor Whitmore</h3>
<p class="tm2-role">Senior Partner · Family law</p>
<p class="tm2-bio">30 years resolving family matters.</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">James Hale</h3>
<p class="tm2-role">Partner · Property</p>
<p class="tm2-bio">Residential and commercial conveyancing.</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">Priya Nair</h3>
<p class="tm2-role">Partner · Employment</p>
<p class="tm2-bio">Tribunal and settlement specialist.</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">David Okoro</h3>
<p class="tm2-role">Associate · Wills & probate</p>
<p class="tm2-bio">Estates handled with care.</p>
</li>
</ul>
</div>
</section>
<section id="customers" class="st st-testimonials-grid" data-uid="smvnkxddkq1wu">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Client reviews</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Trusted by <span class="hl">families and businesses</span></h2>
<p class="tg-summary" data-anim="item">★ 4.9 from 380+ 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>Eleanor made the hardest year of my life manageable. Clear, kind and always one step ahead.</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">Rachel S.</p><p class="st-person-role">Family law client</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>Fixed fee, no surprises and our purchase completed a week early.</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 & Aisha</p><p class="st-person-role">Property clients</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>Priya negotiated a settlement I did not think was possible.</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">Marcus L.</p><p class="st-person-role">Employment client</p></div>
</div></figcaption>
</figure>
</div>
</div>
</section>
<section id="faq" class="st st-faq-accordion" data-uid="smvnkxddkfwwi">
<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 about <span class="hl">working with us</span></h2>
<p class="st-lead" data-anim="item">Consultations, fees, appointments and how quickly we reply.</p>
</header>
<div class="fq-list" data-accordion="single first">
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>Is the first consultation really free?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>Yes. The first 30-minute call is free and there is no obligation to instruct us afterwards.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>How much will my case cost?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>We give you a written quote before any work starts, with fixed fees for most property, wills and probate work.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>Do you offer video appointments?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>Yes. Most meetings can be held by video or phone, and our office is open for in-person meetings too.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>How quickly will you reply?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>We reply to every enquiry within one working day, and urgent family matters the same day.</p></div>
</details>
</div>
</div>
</section>
<section id="contact" class="st st-contact-split-form" data-uid="smvnkxddkwg6l">
<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">Free consultation</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Tell us <span class="hl">what happened</span></h2>
<p class="st-lead" data-anim="item">Everything you share is confidential. A solicitor will call you 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"><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:+441614960789"><span>0161 496 0789</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>12 King Street, Manchester M2 4WU</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>A short summary of your situation</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 call back</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>Thank you</h3>
<p>A solicitor will call you within one working day.</p>
</div>
</form>
</div>
</div>
</section>
<section class="st st-footer-minimal" data-uid="smvnkxddk6hjf">
<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"><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><span>Whitmore & Hale</span></span>
</a>
<nav aria-label="Footer"><ul class="fm-links"><li><a href="#highlights">Practice areas</a></li><li><a href="#journey">How we work</a></li><li><a href="#team">Our team</a></li><li><a href="#contact">Contact</a></li></ul></nav>
</div>
<p class="fm-copy">© 2026 Whitmore & Hale Solicitors LLP</p>
</footer>
</section>@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&display=swap');
body{margin:0;background:#0f1626}
html{scroll-behavior:smooth}section[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.st{--st-brand:#c9a96e;--st-btn-text:#141b2d;--st-bg:#0f1626;--st-surface:#172036;--st-text:#f1f5f9;--st-muted:#a3adc2;--st-radius:6;--st-max:1200;--st-font-heading:"Playfair Display", 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)}}
/* Stacking Cards */
.st-scroll-stack{padding:clamp(64px,8cqi,112px) 0}
.sk-list{display:flex;flex-direction:column;gap:clamp(20px,3cqi,32px);max-width:1040px;margin:0 auto}
.sk-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,3cqi,44px);align-items:center;min-height:min(62vh,500px);padding:clamp(24px,3.5cqi,52px);border-radius:calc(var(--st-radius) * 1.3px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 9%,transparent);box-shadow:0 40px 70px -48px rgba(0,0,0,.45);transform-origin:50% 0}
.sk-card:nth-child(3n+2) .sk-inner{background:color-mix(in srgb,var(--st-brand) 9%,var(--st-surface))}
.sk-card:nth-child(3n) .sk-inner{background:color-mix(in srgb,var(--st-text) 92%,var(--st-brand));color:var(--st-bg)}
.sk-card:nth-child(3n) .sk-title{color:var(--st-bg)}
.sk-card:nth-child(3n) .sk-text{color:color-mix(in srgb,var(--st-bg) 72%,transparent)}
.sk-copy{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.sk-label{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--st-brand)}
.sk-title{font-size:clamp(24px,1.6cqi + 14px,36px);line-height:1.1}
.sk-text{color:var(--st-muted);font-size:17px;max-width:30em}
.sk-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--st-radius) * .8px);background:color-mix(in srgb,var(--st-text) 6%,transparent)}
.sk-inner:not(:has(.sk-img)){grid-template-columns:1fr;min-height:0}
@container st (max-width:760px){.sk-inner{grid-template-columns:1fr;min-height:0}}
/* Scroll Path Timeline */
.st-scroll-path{padding:clamp(64px,8cqi,112px) 0}
.sp{position:relative;max-width:760px;margin:0 auto}
.sp-line{position:absolute;left:28px;top:0;bottom:0;width:40px;height:100%;margin-left:-20px;overflow:visible}
.sp-track,.sp-draw{fill:none;stroke-width:4;stroke-linecap:round}
.sp-track{stroke:color-mix(in srgb,var(--st-text) 10%,transparent)}
.sp-draw{stroke:var(--st-brand)}
.sp-list{list-style:none;position:relative;display:flex;flex-direction:column;gap:clamp(36px,6cqi,72px)}
.sp-item{display:grid;grid-template-columns:56px 1fr;gap:clamp(16px,2.5cqi,28px);align-items:start}
.sp-dot{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--st-brand);color:var(--st-btn-text);box-shadow:0 0 0 6px var(--st-bg);transition:background .4s ease,color .4s ease,transform .4s ease}
.sp-dot svg{width:24px;height:24px}
.sp-card{display:flex;flex-direction:column;gap:6px;padding:clamp(18px,2.5cqi,28px);border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 8%,transparent);box-shadow:0 24px 50px -40px rgba(0,0,0,.4);transition:opacity .4s ease,transform .4s ease}
.sp-date{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--st-brand)}
.sp-title{font-size:clamp(20px,1cqi + 14px,26px)}
.sp-text{color:var(--st-muted);font-size:16px}
.sp.is-drawing .sp-item:not(.is-on) .sp-dot{background:var(--st-surface);color:var(--st-muted);transform:scale(.85)}
.sp.is-drawing .sp-item:not(.is-on) .sp-card{opacity:.35;transform:translateY(12px)}
@container st (min-width:900px){.sp{max-width:900px}.sp-line{left:50%}.sp-item{grid-template-columns:1fr 56px 1fr}.sp-item .sp-dot{grid-column:2;grid-row:1}.sp-item:nth-child(odd) .sp-card{grid-column:1;grid-row:1;text-align:right;align-items:flex-end}.sp-item:nth-child(even) .sp-card{grid-column:3}}
/* 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}}
/* 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}}
.st:has(>.st-art){isolation:isolate}
.st-art{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.st-art>svg{position:absolute;top:0;left:0;display:block;width:100%;height:100%}
.st-art--bottom>svg{top:auto;bottom:-1px;height:var(--st-art-h,80px)}
.st-art--top>svg{top:-1px;bottom:auto;height:var(--st-art-h,80px);transform:scaleY(-1)}
.st-art--corner>svg{top:-12%;right:-8%;left:auto;width:min(58%,620px);height:auto}
.st-art--corners>svg{top:0;right:0;left:auto;width:clamp(140px,22cqi,300px);height:auto}
.st-art--corners>svg+svg{top:auto;right:auto;bottom:0;left:0;transform:rotate(180deg)}
(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, reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!G || !window.ScrollTrigger || reduce || (window.ST_STILL && !window.ST_SCROLL_FX)) return;
G.registerPlugin(ScrollTrigger);
G.matchMedia().add('(min-width: 768px)', function () {
var made = [];
document.querySelectorAll('.st [data-stack]').forEach(function (list) {
var cards = Array.prototype.slice.call(list.children);
if (cards.length < 2) return;
var last = cards[cards.length - 1];
cards.forEach(function (card, i) {
var top = 90 + i * 22;
var pin = ScrollTrigger.create({ trigger: card, start: 'top ' + top, endTrigger: last, end: 'top ' + (90 + (cards.length - 1) * 22), pin: true, pinSpacing: false });
made.push(function () { pin.kill(); });
if (card === last) return;
// Scale the card's inner wrapper: the card itself is positioned by its pin
var inner = card.firstElementChild || card;
// fromTo: GSAP can't tween a filter from "none" (it would start at brightness 0)
var tw = G.fromTo(inner, { scale: 1, filter: 'brightness(1)' }, { scale: 1 - (cards.length - 1 - i) * 0.04, filter: 'brightness(.82)', ease: 'none', scrollTrigger: { trigger: cards[i + 1], start: 'top bottom', end: 'top ' + top, scrub: true } });
made.push(function () { tw.scrollTrigger.kill(); tw.kill(); G.set(inner, { clearProps: 'transform,filter' }); });
});
});
return function () { made.forEach(function (f) { f(); }); };
});
})();
(function () {
var G = window.gsap, reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!G || !window.ScrollTrigger || reduce || (window.ST_STILL && !window.ST_SCROLL_FX)) return;
G.registerPlugin(ScrollTrigger);
document.querySelectorAll('.st [data-drawpath]').forEach(function (box) {
box.classList.add('is-drawing');
box.querySelectorAll('[data-draw]').forEach(function (p) {
var len = p.getTotalLength ? p.getTotalLength() : 0;
if (!len) return;
G.set(p, { strokeDasharray: len, strokeDashoffset: len });
G.to(p, { strokeDashoffset: 0, ease: 'none', scrollTrigger: { trigger: box, start: 'top 65%', end: 'bottom 65%', scrub: 0.5 } });
});
box.querySelectorAll('[data-draw-step]').forEach(function (step) {
// Stays lit once reached (only scrolling back up above it turns it off)
ScrollTrigger.create({ trigger: step, start: 'top 65%', onEnter: function () { step.classList.add('is-on'); }, onLeaveBack: function () { step.classList.remove('is-on'); } });
});
});
})();
(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 () {
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();
})();
(function () {
var G = window.gsap, 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-art[data-art-anim]').forEach(function (layer) {
var mode = layer.getAttribute('data-art-anim'), sec = layer.closest('.st'), svg = layer.querySelector('svg');
if (mode === 'float') layer.querySelectorAll('[data-float]').forEach(function (el, i) {
G.to(el, { x: (i % 3 - 1) * 24, y: (i % 2 ? -1 : 1) * 22, duration: 5 + (i % 3), ease: 'sine.inOut', yoyo: true, repeat: -1, delay: i * 0.4 });
});
if (mode === 'spin') layer.querySelectorAll('[data-spin]').forEach(function (el, i) {
G.to(el, { rotation: i % 2 ? -360 : 360, duration: 60 + i * 8, ease: 'none', repeat: -1, transformOrigin: '50% 50%' });
});
if (mode === 'draw' && window.ScrollTrigger) layer.querySelectorAll('[data-draw]').forEach(function (p, i) {
var len = p.getTotalLength ? p.getTotalLength() : 0;
if (!len) return;
G.fromTo(p, { strokeDasharray: len, strokeDashoffset: len }, { strokeDashoffset: 0, ease: 'none', scrollTrigger: { trigger: sec, start: 'top 90%', end: 'bottom 40%', scrub: 0.6 } });
});
if (mode === 'parallax' && window.ScrollTrigger && svg) {
G.set(svg, { scale: 1.15 });
G.fromTo(svg, { yPercent: -6 }, { yPercent: 6, ease: 'none', scrollTrigger: { trigger: sec, start: 'top bottom', end: 'bottom top', scrub: true } });
}
});
})();