Law Firm Website HTML Template — Free CSS & JS Snippet

    <section class="st st-navbar-simple" data-uid="smvw6s7wji5gf">
      <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 &amp; 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="smvw6s7wjl7oh">
      <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="smvw6s7wjt80x">
      <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 &amp; 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="smvw6s7wjrg5t">
      <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-accordion" data-uid="smvw6s7wjqg5h">
      <div class="st-wrap">
        <header class="st-head">
          <p class="st-eyebrow" data-anim="item">Our lawyers</p>
          <h2 class="st-h2" data-anim="item" data-anim-text>The <span class="hl">people</span> you will work with</h2>
          <p class="st-lead" data-anim="item">Click a name to read about their practice area and background.</p>
        </header>
        <div class="ta" data-ta data-open="1" data-gray="on">
          <ul class="ta-strips">
            <li class="ta-item" data-anim="item">
              <button type="button" class="ta-trigger" aria-expanded="false" aria-label="Eleanor Whitmore"></button>
              <div class="ta-info">
                <div class="ta-inner">
                  <h3 class="ta-name">Eleanor Whitmore</h3>
                  <p class="ta-role">Senior Partner · Family law</p>
                  <div class="ta-social">
                  </div>
                  <p class="ta-bio">30 years resolving family matters.</p>
                </div>
              </div>
              <div class="ta-photo"><img width="600" height="800" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-6.jpg" alt="Eleanor Whitmore"></div>
            </li>
            <li class="ta-item" data-anim="item">
              <button type="button" class="ta-trigger" aria-expanded="false" aria-label="James Hale"></button>
              <div class="ta-info">
                <div class="ta-inner">
                  <h3 class="ta-name">James Hale</h3>
                  <p class="ta-role">Partner · Property</p>
                  <div class="ta-social">
                  </div>
                  <p class="ta-bio">Residential and commercial conveyancing.</p>
                </div>
              </div>
              <div class="ta-photo"><img width="600" height="800" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-1.jpg" alt="James Hale"></div>
            </li>
            <li class="ta-item" data-anim="item">
              <button type="button" class="ta-trigger" aria-expanded="false" aria-label="Priya Nair"></button>
              <div class="ta-info">
                <div class="ta-inner">
                  <h3 class="ta-name">Priya Nair</h3>
                  <p class="ta-role">Partner · Employment</p>
                  <div class="ta-social">
                  </div>
                  <p class="ta-bio">Tribunal and settlement specialist.</p>
                </div>
              </div>
              <div class="ta-photo"><img width="600" height="800" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-5.jpg" alt="Priya Nair"></div>
            </li>
            <li class="ta-item" data-anim="item">
              <button type="button" class="ta-trigger" aria-expanded="false" aria-label="David Okoro"></button>
              <div class="ta-info">
                <div class="ta-inner">
                  <h3 class="ta-name">David Okoro</h3>
                  <p class="ta-role">Associate · Wills &amp; probate</p>
                  <div class="ta-social">
                  </div>
                  <p class="ta-bio">Estates handled with care.</p>
                </div>
              </div>
              <div class="ta-photo"><img width="600" height="800" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-4.jpg" alt="David Okoro"></div>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <section id="customers" class="st st-testimonials-grid" data-uid="smvw6s7wjytlf">
      <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 &amp; 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="smvw6s7wjvw34">
      <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="smvw6s7wj21j8">
      <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:[email protected]"><span>[email protected]</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="smvw6s7wjn2sy">
      <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 &amp; 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 &amp; Hale Solicitors LLP</p>
      </footer>
    </section>
    <section class="st st-back-to-top" data-uid="smvw6s7wjhcfl">
      <div class="btt" data-btt data-enabled="on" data-distance="500" data-pos="right" data-appear="fade" data-speed="0.8" data-mobile="on" data-shadow="on" style="--btt-size:52px;--btt-off:24px;--btt-radius:50%;--btt-speed:0.8s">
        <div class="btt-demo" aria-hidden="true">
          <span class="btt-bar btt-bar--lg"></span><span class="btt-bar"></span><span class="btt-bar btt-bar--md"></span><span class="btt-bar"></span><span class="btt-bar btt-bar--sm"></span>
          <span class="btt-note">The button appears here once the page has scrolled</span>
        </div><!--/btt-demo-->
        <button type="button" class="btt-btn" aria-label="Back to top" title="Back to top"><svg class="btt-svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.400" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button>
      </div>
    </section>
    <section class="st st-accessibility-toolbar" data-uid="smvw6s7wkosv2">
      <div class="a11y" data-a11y data-pos="left" data-remember="on">
        <button type="button" class="a11y-fab" aria-expanded="false" data-a11y-open aria-label="Open accessibility tools">
          <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="7.500" r="1.200" fill="currentColor"/><path d="M7 10.500l5 1 5-1M12 11.500v3.500M9.500 19l2.500-4 2.500 4"/></svg>
        </button>
        <div class="a11y-panel" role="dialog" tabindex="-1" hidden aria-label="Accessibility">
          <div class="a11y-head">
            <h2 class="a11y-title">Accessibility</h2>
            <button type="button" class="a11y-icon" data-a11y-reset aria-label="Reset all settings" title="Reset all settings"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.700L3 8"/><path d="M3 3v5h5"/></svg></button>
            <button type="button" class="a11y-icon" data-a11y-close aria-label="Close accessibility tools" title="Close accessibility tools"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.400" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
          </div>
          <div class="a11y-body">
            <div class="a11y-sec">
              <h3 class="a11y-h">Text</h3>
              <div class="a11y-grid">
                <button type="button" class="a11y-tile" data-feature="text" aria-pressed="false"><svg class="a11y-ic" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 7V5h10v2M9 5v12M6 17h6"/><path d="M15 12h6M18 12v6"/></svg><span class="a11y-lab">Bigger text</span><span class="a11y-pips" aria-hidden="true"></span></button>
                <button type="button" class="a11y-tile" data-feature="lineheight" aria-pressed="false"><svg class="a11y-ic" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M8 6h13M8 12h13M8 18h13"/><path d="M3 8l2-2 2 2M3 16l2 2 2-2"/></svg><span class="a11y-lab">Line height</span><span class="a11y-pips" aria-hidden="true"></span></button>
                <button type="button" class="a11y-tile" data-feature="align" aria-pressed="false"><svg class="a11y-ic" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 6h16M4 12h10M4 18h14"/></svg><span class="a11y-lab">Text align</span><span class="a11y-pips" aria-hidden="true"></span></button>
                <button type="button" class="a11y-tile" data-feature="font" aria-pressed="false"><svg class="a11y-ic" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 19 10 5l6 14M6.5 14h7"/><path d="M17 11h4M19 11v8"/></svg><span class="a11y-lab">Readable font</span><span class="a11y-pips" aria-hidden="true"></span></button>
              </div>
            </div>
            <div class="a11y-sec">
              <h3 class="a11y-h">Visual</h3>
              <div class="a11y-grid">
                <button type="button" class="a11y-tile" data-feature="contrast" aria-pressed="false"><svg class="a11y-ic" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 3v18" /><path d="M12 3a9 9 0 0 1 0 18z" fill="currentColor"/></svg><span class="a11y-lab">Contrast</span><span class="a11y-pips" aria-hidden="true"></span></button>
                <button type="button" class="a11y-tile" data-feature="gray" aria-pressed="false"><svg class="a11y-ic" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 3s6 6.2 6 10.5A6 6 0 0 1 6 13.500C6 9.200 12 3 12 3z"/><path d="M12 3v16.500" /></svg><span class="a11y-lab">Grayscale</span><span class="a11y-pips" aria-hidden="true"></span></button>
                <button type="button" class="a11y-tile" data-feature="images" aria-pressed="false"><svg class="a11y-ic" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="10" r="1.500"/><path d="m21 16-5-5-9 8M3 3l18 18"/></svg><span class="a11y-lab">Hide images</span><span class="a11y-pips" aria-hidden="true"></span></button>
                <button type="button" class="a11y-tile" data-feature="motion" aria-pressed="false"><svg class="a11y-ic" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M10 9v6M14 9v6"/></svg><span class="a11y-lab">Pause animations</span><span class="a11y-pips" aria-hidden="true"></span></button>
              </div>
            </div>
            <div class="a11y-sec">
              <h3 class="a11y-h">Orientation</h3>
              <div class="a11y-grid">
                <button type="button" class="a11y-tile" data-feature="links" aria-pressed="false"><svg class="a11y-ic" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10 14a4.500 4.500 0 0 0 6.400 0l3-3a4.500 4.500 0 0 0-6.400-6.400l-1 1"/><path d="M14 10a4.500 4.500 0 0 0-6.400 0l-3 3a4.500 4.500 0 0 0 6.400 6.400l1-1"/></svg><span class="a11y-lab">Highlight links</span><span class="a11y-pips" aria-hidden="true"></span></button>
                <button type="button" class="a11y-tile" data-feature="mask" aria-pressed="false"><svg class="a11y-ic" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18M3 15h18"/></svg><span class="a11y-lab">Reading mask</span><span class="a11y-pips" aria-hidden="true"></span></button>
              </div>
            </div>
            <p class="a11y-note">Your choices are saved on this device only.</p>
          </div>
        </div>
      </div>
    </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}}
/* Interactive Team Accordion */
.st-team-accordion{padding:clamp(64px,8cqi,112px) 0;background:radial-gradient(60% 70% at 15% 20%,color-mix(in srgb,var(--st-brand) 14%,transparent),transparent 70%),radial-gradient(50% 60% at 90% 80%,color-mix(in srgb,#ec4899 12%,transparent),transparent 70%),var(--st-bg)}
.ta-strips{list-style:none;display:flex;gap:clamp(8px,1.2cqi,16px);height:clamp(380px,40cqi,500px);margin:0;padding:clamp(8px,1.2cqi,14px);border-radius:calc(var(--st-radius) * 1.4px);background:color-mix(in srgb,var(--st-surface) 78%,transparent);box-shadow:0 30px 70px -30px color-mix(in srgb,var(--st-text) 35%,transparent),0 0 0 1px color-mix(in srgb,var(--st-text) 6%,transparent)}
.ta-item{position:relative;display:flex;flex:1 1 0;min-width:0;overflow:hidden;border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);transition:flex-grow .65s cubic-bezier(.4,0,.2,1)}
.ta-item.is-open,.ta:not([data-ta-ready]) .ta-item:first-child{flex-grow:7}
.ta-trigger{position:absolute;inset:0;z-index:1;padding:0;border:0;background:transparent;cursor:pointer;border-radius:inherit}
.ta-item.is-open .ta-trigger{cursor:default}
.ta-trigger:focus-visible{outline:3px solid var(--st-brand);outline-offset:-4px}
.ta-info{position:relative;z-index:2;flex:0 1 0;min-width:0;overflow:hidden;visibility:hidden;opacity:0;transition:flex-grow .65s cubic-bezier(.4,0,.2,1),opacity .35s ease,visibility 0s .65s}
.ta-item.is-open .ta-info,.ta:not([data-ta-ready]) .ta-item:first-child .ta-info{flex-grow:1.15;visibility:visible;opacity:1;transition:flex-grow .65s cubic-bezier(.4,0,.2,1),opacity .45s ease .2s,visibility 0s}
.ta-inner{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:10px;width:clamp(260px,26cqi,360px);height:100%;padding:clamp(22px,3cqi,40px)}
.ta-name{font-size:clamp(22px,2cqi + 8px,30px);letter-spacing:-.02em}
.ta-role{color:var(--st-brand);font-size:15px;font-weight:600}
.ta-social{display:flex;gap:8px;margin:4px 0 6px}
.ta-social a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--st-brand) 12%,transparent);color:var(--st-brand);transition:background .2s ease,color .2s ease,transform .2s ease}
.ta-social a:hover{background:var(--st-brand);color:var(--st-btn-text);transform:translateY(-2px)}
.ta-social a:focus-visible{outline:3px solid var(--st-brand);outline-offset:2px}
.ta-social:not(:has(a:not([hidden]))){display:none}
.ta-social .st-icon{display:inline-grid;place-items:center;width:17px;height:17px}
.ta-social svg{width:17px;height:17px}
.ta-bio{color:var(--st-muted);font-size:15.5px;line-height:1.65}
.ta-bio:empty{display:none}
.ta-photo{position:relative;flex:1 1 0;min-width:0;background:var(--st-surface)}
.ta-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;transition:filter .5s ease,transform .8s ease}
.ta[data-gray=on] .ta-item:not(.is-open) .ta-photo img{filter:grayscale(1) contrast(1.05)}
.ta[data-gray=on]:not([data-ta-ready]) .ta-item:not(:first-child) .ta-photo img{filter:grayscale(1) contrast(1.05)}
.ta-item:not(.is-open):hover .ta-photo img{transform:scale(1.05)}
@container st (max-width:760px){
.ta-strips{flex-direction:column;height:clamp(600px,178cqi,830px)}
.ta-item{flex-direction:column;min-height:56px}
.ta-info{flex:0 1 0;width:100%}
.ta-item.is-open .ta-info,.ta:not([data-ta-ready]) .ta-item:first-child .ta-info{flex-grow:2.6}
.ta-inner{width:100%;gap:6px;padding:16px 20px;justify-content:flex-start;overflow-y:auto}
.ta-bio{font-size:14.5px;line-height:1.55}
.ta-photo{flex:1 1 0;min-height:96px}
.ta-photo img{object-position:center 18%}
}
@media (prefers-reduced-motion:reduce){.ta-item,.ta-info,.ta-photo img{transition:none}}
/* 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}}
/* Back to Top Button */
.st-back-to-top{overflow:visible;container-type:normal;height:0;min-height:0;padding:0;background:transparent}
.st-back-to-top:has(.btt.is-preview){height:auto;padding:clamp(20px,3vw,40px) var(--st-pad);background:color-mix(in srgb,var(--st-text) 6%,var(--st-bg))}
.btt{--btt-size:52px;--btt-off:24px;--btt-radius:50%;--btt-speed:.8s;--btt-bg:var(--st-brand);--btt-fg:var(--st-btn-text)}
.btt-btn{position:fixed;bottom:var(--btt-off);z-index:2147482500;display:grid;place-items:center;width:var(--btt-size);height:var(--btt-size);padding:0;border:0;border-radius:var(--btt-radius);background:var(--btt-bg);color:var(--btt-fg);cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,transform .3s ease,visibility 0s .3s,box-shadow .2s ease,background .2s ease}
.btt[data-pos=right] .btt-btn{right:var(--btt-off)}
.btt[data-pos=left] .btt-btn{left:var(--btt-off)}
.btt[data-appear=slide] .btt-btn{transform:translateY(28px)}
.btt[data-appear=zoom] .btt-btn{transform:scale(.5)}
.btt[data-shadow=on] .btt-btn{box-shadow:0 12px 28px -8px rgba(15,23,42,.45)}
.btt.is-visible .btt-btn{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .3s ease,transform .3s ease,visibility 0s,box-shadow .2s ease,background .2s ease}
.btt.is-visible .btt-btn:hover{transform:translateY(-3px)}
.btt.is-visible .btt-btn:active{transform:translateY(0) scale(.96)}
.btt-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--btt-bg) 55%,#fff);outline-offset:3px}
.btt-svg{width:calc(var(--btt-size) * .46);height:calc(var(--btt-size) * .46)}
@media (max-width:899px){.btt[data-mobile=off] .btt-btn{display:none}}
.btt[data-enabled=off] .btt-btn{display:none}
.btt-demo{display:none}
.btt.is-preview .btt-demo{position:relative;display:flex;flex-direction:column;gap:14px;min-height:320px;padding:34px 30px;border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-bg);box-shadow:0 20px 50px -24px color-mix(in srgb,var(--st-text) 40%,transparent)}
.btt-bar{display:block;height:14px;width:100%;border-radius:7px;background:color-mix(in srgb,var(--st-text) 12%,transparent)}
.btt-bar--lg{height:22px;width:62%;background:color-mix(in srgb,var(--st-text) 22%,transparent)}
.btt-bar--md{width:84%}.btt-bar--sm{width:46%}
.btt-note{margin-top:auto;font-size:13px;color:var(--st-muted)}
.btt.is-preview .btt-btn{position:absolute;right:calc(var(--st-pad) + 18px);bottom:calc(clamp(20px,3vw,40px) + 18px);opacity:1;visibility:visible;pointer-events:auto;transform:none}
.btt.is-preview[data-pos=left] .btt-btn{right:auto;left:calc(var(--st-pad) + 18px)}
@media (prefers-reduced-motion:reduce){.btt-btn{transition:none}}
@media print{.btt{display:none}}
/* Accessibility Toolbar Widget */
.st-accessibility-toolbar{overflow:visible;container-type:normal;height:0;min-height:0;background:transparent}
.st-accessibility-toolbar:has(.a11y.is-preview){height:auto;min-height:680px;padding:clamp(16px,2vw,24px) var(--st-pad);background:color-mix(in srgb,var(--st-text) 8%,var(--st-bg))}
.a11y{--a11y-w:380px}
.a11y-fab{position:fixed;bottom:20px;z-index:2147483000;display:grid;place-items:center;width:58px;height:58px;padding:0;border:3px solid #fff;border-radius:50%;background:var(--st-brand);color:var(--st-btn-text);cursor:pointer;box-shadow:0 10px 28px -6px rgba(15,23,42,.5);transition:transform .2s ease,box-shadow .2s ease}
.a11y[data-pos=right] .a11y-fab{right:20px}
.a11y[data-pos=left] .a11y-fab{left:20px}
.a11y-fab:hover{transform:scale(1.06)}
.a11y-fab:focus-visible,.a11y-tile:focus-visible,.a11y-icon:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 60%,#fff);outline-offset:3px}
.a11y.is-open .a11y-fab{box-shadow:0 0 0 4px color-mix(in srgb,var(--st-brand) 30%,transparent),0 10px 28px -6px rgba(15,23,42,.5)}
.a11y-panel{position:fixed;bottom:92px;z-index:2147483001;display:flex;flex-direction:column;width:min(var(--a11y-w),calc(100vw - 24px));max-height:calc(100vh - 116px);max-height:calc(100dvh - 116px);overflow:hidden;border-radius:calc(var(--st-radius) * 1.3px);background:var(--st-bg);color:var(--st-text);font-family:var(--st-font-body);font-size:15px;line-height:1.4;box-shadow:0 30px 70px -18px rgba(15,23,42,.55),0 0 0 1px color-mix(in srgb,var(--st-text) 8%,transparent);opacity:0;transform:translateY(12px) scale(.98);transition:opacity .2s ease,transform .2s ease}
.a11y-panel[hidden]{display:none}
.a11y[data-pos=right] .a11y-panel{right:20px}
.a11y[data-pos=left] .a11y-panel{left:20px}
.a11y.is-open .a11y-panel{opacity:1;transform:none}
.a11y-head{display:flex;align-items:center;gap:6px;padding:13px 18px;background:linear-gradient(135deg,var(--st-brand),color-mix(in srgb,var(--st-brand) 70%,#000));color:var(--st-btn-text)}
.a11y-title{flex:1;margin:0;font-family:var(--st-font-heading);font-size:21px;font-weight:800;letter-spacing:-.01em;color:inherit}
.a11y-icon{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:inherit;cursor:pointer;transition:background .15s ease}
.a11y-icon:hover{background:rgba(255,255,255,.3)}
.a11y-body{overflow-y:auto;padding:12px 14px 14px;background:var(--st-surface);overscroll-behavior:contain}
.a11y-sec{margin-bottom:10px;padding:12px;border-radius:calc(var(--st-radius) * 1px);background:var(--st-bg)}
.a11y-sec:not(:has(.a11y-tile)){display:none}
.a11y-h{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--st-text)}
.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a11y-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;min-height:70px;padding:10px 12px;border:2px solid transparent;border-radius:calc(var(--st-radius) * .75px);background:var(--st-surface);color:var(--st-text);font:600 14px/1.25 var(--st-font-body);text-align:left;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.a11y-tile:hover{border-color:color-mix(in srgb,var(--st-brand) 35%,transparent)}
.a11y-tile[aria-pressed=true]{border-color:var(--st-brand);background:color-mix(in srgb,var(--st-brand) 12%,var(--st-bg));color:var(--st-brand)}
.a11y-ic{flex:none}
.a11y-lab{display:block}
.a11y-pips{display:flex;gap:4px;min-height:6px}
.a11y-pip{width:16px;height:5px;border-radius:3px;background:color-mix(in srgb,var(--st-text) 18%,transparent)}
.a11y-pip.on{background:var(--st-brand)}
.a11y-note{margin:4px 2px 0;font-size:12.5px;color:var(--st-muted);text-align:center}
.a11y-note:empty{display:none}
.a11y.is-preview .a11y-fab{position:absolute}
.a11y.is-preview .a11y-panel{position:relative;inset:auto;margin:0 auto;opacity:1;transform:none;max-height:none}
.a11y-mask{position:fixed;left:0;right:0;z-index:2147482000;background:rgba(0,0,0,.78);pointer-events:none}
@media (max-width:480px){.a11y-grid{gap:8px}.a11y-tile{min-height:76px;padding:10px}}
@media (prefers-reduced-motion:reduce){.a11y-fab,.a11y-panel{transition:none}}
@media print{.a11y,.a11y-mask{display:none}}
.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)}
.st-art[data-pos=top]{inset:0 0 50% 0}
.st-art[data-pos=bottom]{inset:50% 0 0 0}
.st-art[data-pos=left]{inset:0 50% 0 0}
.st-art[data-pos=right]{inset:0 0 0 50%}
.st-art--corner[data-pos=c]>svg{top:var(--art-y,50%);left:var(--art-x,50%);right:auto;bottom:auto;translate:-50% -50%}
.st-art--corner[data-pos=tl]>svg{right:auto;left:-8%}
.st-art--corner[data-pos=br]>svg{top:auto;bottom:-12%}
.st-art--corner[data-pos=bl]>svg{top:auto;right:auto;bottom:-12%;left:-8%}
.st-art--corners[data-pos=tl]>svg{right:auto;left:0;transform:scaleX(-1)}
.st-art--corners[data-pos=tl]>svg+svg{left:auto;right:0;transform:scaleY(-1)}