Fix LCP in Squarespace

<!-- Squarespace Hero Image Optimization Checklist -->

<!-- Step 1: Upload correctly-sized source image -->
<!-- Recommended: 2500px wide, JPEG format (not PNG) -->
<!-- Squarespace auto-converts to WebP and generates srcset -->

<!-- Step 2: Set Focal Point (in image block settings) -->
<!-- Edit Page > Click banner image > Edit (pencil icon) -->
<!-- Drag the focal point circle to your key visual area -->

<!-- Squarespace renders this srcset for a banner image: -->
<img
  src="https://images.squarespace-cdn.com/content/.../hero.jpg?format=1500w"
  srcset="
    .../hero.jpg?format=300w 300w,
    .../hero.jpg?format=500w 500w,
    .../hero.jpg?format=750w 750w,
    .../hero.jpg?format=1000w 1000w,
    .../hero.jpg?format=1500w 1500w,
    .../hero.jpg?format=2500w 2500w"
  sizes="100vw"
  alt="Hero banner"
>

<!-- Note: Squarespace controls loading attributes.
     To add fetchpriority=high, use Code Injection (Step 2 below)
     to inject a preload link in the Head section. -->

<!-- HEADER Code Injection (keep minimal, critical items only) -->

<!-- Add hero image preload (get URL from published page source) -->
<link
  rel="preload"
  as="image"
  href="https://images.squarespace-cdn.com/content/[site-id]/[image-id]/hero.jpg?format=1500w"
  imagesrcset="
    .../hero.jpg?format=750w 750w,
    .../hero.jpg?format=1500w 1500w,
    .../hero.jpg?format=2500w 2500w"
  imagesizes="100vw"
  fetchpriority="high"
>

<!-- FOOTER Code Injection (move all analytics here) -->

<!-- Google Analytics 4 with defer -->
<script defer src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"></script>
<script>
  window.addEventListener('load', function() {
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-XXXXXXXX');
  });
</script>

<!-- Load heavyweight tools after LCP -->
<script>
  window.addEventListener('load', function() {
    // Hotjar, Intercom, Drift, or other chat/heatmap tools
    // Place initialization code here
  });
</script>

<!-- Template Performance Evaluation Process -->

<!-- Step 1: Find the template demo URL -->
<!-- Squarespace template gallery: squarespace.com/templates -->
<!-- Each template has a 'Preview' button with a live demo URL -->

<!-- Step 2: Test demo URL in PageSpeed Insights -->
<!-- https://pagespeed.web.dev/ -->
<!-- Run mobile test -- this is the harder target -->
<!-- Look for: LCP under 2.5s, no render-blocking resources -->

<!-- Step 3: Check for animation-heavy defaults -->
<!-- In Chrome DevTools Network tab on the demo: -->
<!-- Filter by JS -- watch for animation library files (gsap, aos, etc.) -->
<!-- Filter by CSS -- total CSS under 100KB is a good sign -->

<!-- Squarespace 7.1 templates recommended for performance: -->
<!-- - Paloma (minimal, editorial) -->
<!-- - Hester (clean grid, portfolio) -->
<!-- - Wells (minimal, business) -->
<!-- - Clay (product-focused, clean) -->
<!-- Avoid: Templates with 'scroll animations' listed as a feature -->

<!-- Squarespace Page Structure: LCP-optimized layout -->

<!-- Section 1 (Above fold): Simple banner with static image -->
<!-- Use: Banner block with focal-point optimized image -->
<!-- Avoid: Video background, parallax scroll, animation entrance -->

<!-- Section 2 (Just below fold): Text + simple layout -->
<!-- Use: Text block, simple two-column layout -->
<!-- Load: Instantly, no images required -->

<!-- Sections 3+ (Below fold): All media-heavy content -->
<!-- Use: Gallery sections, video sections, product grids -->
<!-- Squarespace lazy-loads images in sections below the fold -->

<!-- Squarespace section limit recommendations: -->
<!-- Homepage: 6 to 8 sections maximum -->
<!-- Interior pages: 4 to 6 sections maximum -->
<!-- Every additional full-width media section adds ~200-500ms to LCP -->

<!-- To audit current section count: -->
<!-- Edit page > count sections in left panel sidebar -->
<!-- Combine related content into fewer, richer sections -->

<!-- Squarespace CDN and SSL verification -->

<!-- Step 1: Verify SSL is active -->
<!-- Settings > Domains > Primary Domain -->
<!-- Status should show: SSL Active (green) -->
<!-- If not active: click 'Use a Squarespace domain' or wait for -->
<!-- SSL provisioning to complete after custom domain connection -->

<!-- Step 2: Verify CDN is serving assets -->
<!-- Open Chrome DevTools > Network tab on published site -->
<!-- Images should load from: images.squarespace-cdn.com -->
<!-- CSS/JS from: static1.squarespace.com -->
<!-- If assets load from squarespace.com (without CDN subdomain), -->
<!-- your paid plan CDN may not be fully active -->

<!-- Step 3: Check HTTP/2 is active (requires SSL) -->
<!-- Chrome DevTools > Network tab -->
<!-- Right-click column headers > enable 'Protocol' column -->
<!-- Assets should show 'h2' (HTTP/2) in the Protocol column -->
<!-- 'http/1.1' indicates SSL is not active or CDN is bypassed -->

<!-- Step 4: Squarespace CDN cache headers (automatic) -->
<!-- Static assets: Cache-Control: max-age=31536000 (1 year) -->
<!-- HTML pages: short cache with revalidation -->
<!-- No action required -- Squarespace manages cache headers -->