<!DOCTYPE html><html lang="en"><head>
    <!-- Google Tag Manager - Ultra-deferred -->
    <script>
      window.dataLayer = window.dataLayer || [];
      // Defer GTM until 5 seconds after load or user interaction
      var gtmLoaded = false;
      function loadGTM() {
        if (gtmLoaded) return;
        gtmLoaded = true;
        (function(w,d,s,l,i){var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-MFXWLL83');
      }
      window.addEventListener('load', function() {
        setTimeout(loadGTM, 5000);
      });
      // Load on user interaction
      ['scroll', 'click', 'touchstart'].forEach(function(e) {
        window.addEventListener(e, loadGTM, { once: true, passive: true });
      });
    </script>
    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta name="color-scheme" content="light dark">
    <link rel="preload" href="/fonts/inter-400.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="preload" href="/fonts/inter-600.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="preload" href="/fonts/inter-700.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="preload" href="/assets/index-CkkdFeSs.js" as="script">
    <link rel="preload" href="/assets/index-B2ZodBBS.css" as="style">
    <link rel="prefetch" href="/solar-survey" as="document" crossorigin="anonymous">
    <link rel="prefetch" href="/contact-solar" as="document" crossorigin="anonymous">
    
    <!-- Google Analytics loaded dynamically after user consent via cookieConsent.ts -->
    
    <base href="/">
    <title>Install Solar Panels | MCS Certified Solar Installation | Northwest UK</title>
    <meta name="description" content="MCS certified solar installers in Northwest UK. 25-year warranty, 0% VAT, free quotes. Solar panels, batteries &amp; EV chargers.">
    <!-- Default title and description will be overridden by React Helmet on each page -->
    <meta name="author" content="Install Solar Panels">
    <link rel="icon" href="/favicon.png" type="image/png" sizes="32x32">
    <link rel="icon" href="/favicon.png" type="image/png" sizes="16x16">
    <link rel="icon" href="/favicon.png" type="image/png" sizes="48x48">
    <link rel="apple-touch-icon" href="/icons/apple-touch-icon-180x180.png" sizes="180x180">
    <meta name="msapplication-TileImage" content="/icons/pwa-icon-192x192.png">
    <meta name="msapplication-TileColor" content="#f39c12">
    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#f39c12">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="Install Solar">

    <!-- Generated splash screens via https://github.com/onderceylan/pwa-asset-generator -->
    <link rel="apple-touch-startup-image" href="/icons/apple-splash-2048x2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="/icons/apple-splash-2732x2048.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
    <link rel="apple-touch-startup-image" href="/icons/apple-splash-1668x2224.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="/icons/apple-splash-2224x1668.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
    <link rel="apple-touch-startup-image" href="/icons/apple-splash-1536x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="/icons/apple-splash-2048x1536.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
    <link rel="apple-touch-startup-image" href="/icons/apple-splash-1284x2778.png" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="/icons/apple-splash-2778x1284.png" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
    <link rel="apple-touch-startup-image" href="/icons/apple-splash-1170x2532.png" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="/icons/apple-splash-2532x1170.png" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
    <link rel="apple-touch-startup-image" href="/icons/apple-splash-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="/icons/apple-splash-2436x1125.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
    <link rel="apple-touch-startup-image" href="/icons/apple-splash-1242x2688.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="/icons/apple-splash-2688x1242.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
    <link rel="apple-touch-startup-image" href="/icons/apple-splash-828x1792.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="/icons/apple-splash-1792x828.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
    <link rel="apple-touch-startup-image" href="/icons/apple-splash-750x1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="/icons/apple-splash-1334x750.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
    <link rel="apple-touch-startup-image" href="/icons/apple-splash-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="/icons/apple-splash-1136x640.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
    <meta name="keywords" content="solar panels, solar installation, Chorley, Northwest UK, renewable energy, solar battery, MCS certified">

    <!-- Preconnect for critical external domains (faster than dns-prefetch) -->
    <!-- Supabase backend - Highest priority for data fetching -->
    <link rel="preconnect" href="https://qhqpslufarrpazbnanod.supabase.co" crossorigin="">
    
    <!-- Critical preconnect for LCP image CDN - HIGHEST PRIORITY -->
    <link rel="preconnect" href="https://res.cloudinary.com" crossorigin="">
    <link rel="preconnect" href="https://install-solar.co.uk">
    
    <!-- Google Maps API - Critical for solar survey page -->
    <link rel="preconnect" href="https://maps.googleapis.com" crossorigin="">
    <link rel="preconnect" href="https://maps.gstatic.com" crossorigin="">
    
    <!-- DNS prefetch for deferred third-party services (lower priority) -->
    <link rel="dns-prefetch" href="https://www.googletagmanager.com">
    <link rel="dns-prefetch" href="https://region1.analytics.google.com">
    <link rel="dns-prefetch" href="https://www.google-analytics.com">
    <link rel="dns-prefetch" href="https://analytics.google.com">
    <link rel="dns-prefetch" href="https://api.postcodes.io">
    <link rel="dns-prefetch" href="https://api.getaddress.io">
    <link rel="dns-prefetch" href="//res.cloudinary.com">
    
    <!-- Preload critical fonts used above fold with font-display: swap -->
    <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-400.woff2" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-500.woff2" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-600.woff2" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-700.woff2" crossorigin="anonymous">
    <link rel="preload" href="/assets/index-BE-waVsn.js" as="script">
    <link rel="preload" href="/assets/index-B2ZodBBS.css" as="style">
    
    <!-- Preload critical above-the-fold images -->
    <link rel="preload" as="image" href="/company-logo.jpg" fetchpriority="high">
    
    <!-- AVIF Format Preloads - Optimized via Netlify Image CDN -->
    <link rel="preload" as="image" href="/.netlify/images?url=/images/hero/mobile-hero-500x750.jpg&amp;w=480&amp;h=720&amp;fit=cover&amp;fm=avif&amp;q=80" type="image/avif" fetchpriority="high" media="(max-width: 640px)">

    <link rel="preload" as="image" href="/.netlify/images?url=/images/hero/tablet-hero-1536x1024.jpg&amp;w=1024&amp;h=683&amp;fit=cover&amp;fm=avif&amp;q=80" type="image/avif" fetchpriority="high" media="(min-width: 641px) and (max-width: 1024px)">

    <link rel="preload" as="image" href="/.netlify/images?url=/images/hero/desktop-hero-1920x1080.jpg&amp;w=1920&amp;h=1080&amp;fit=cover&amp;fm=avif&amp;q=80" type="image/avif" fetchpriority="high" media="(min-width: 1025px) and (max-width: 1920px)">

    <link rel="preload" as="image" href="/.netlify/images?url=/images/hero/desktop-hero-2560x1440.jpg&amp;w=2560&amp;h=1440&amp;fit=cover&amp;fm=avif&amp;q=80" type="image/avif" fetchpriority="high" media="(min-width: 1921px)">

    <!-- WebP Format Preloads -->
    <link rel="preload" as="image" href="/.netlify/images?url=/images/hero/mobile-hero-500x750.jpg&amp;w=480&amp;h=720&amp;fit=cover&amp;fm=webp&amp;q=82" type="image/webp" fetchpriority="high" media="(max-width: 640px)">

    <link rel="preload" as="image" href="/.netlify/images?url=/images/hero/tablet-hero-1536x1024.jpg&amp;w=1024&amp;h=683&amp;fit=cover&amp;fm=webp&amp;q=82" type="image/webp" fetchpriority="high" media="(min-width: 641px) and (max-width: 1024px)">

    <link rel="preload" as="image" href="/.netlify/images?url=/images/hero/desktop-hero-1920x1080.jpg&amp;w=1920&amp;h=1080&amp;fit=cover&amp;fm=webp&amp;q=82" type="image/webp" fetchpriority="high" media="(min-width: 1025px) and (max-width: 1920px)">

    <link rel="preload" as="image" href="/.netlify/images?url=/images/hero/desktop-hero-2560x1440.jpg&amp;w=2560&amp;h=1440&amp;fit=cover&amp;fm=webp&amp;q=82" type="image/webp" fetchpriority="high" media="(min-width: 1921px)">

    <!-- JPG Format Preloads - Legacy Browsers -->
    <link rel="preload" as="image" href="/.netlify/images?url=/images/hero/mobile-hero-500x750.jpg&amp;w=480&amp;h=720&amp;fit=cover&amp;fm=jpg&amp;q=85" type="image/jpeg" fetchpriority="high" imagesizes="100vw" imagesrcset="/.netlify/images?url=/images/hero/mobile-hero-500x750.jpg&amp;w=480&amp;h=720&amp;fit=cover&amp;fm=jpg&amp;q=85 480w" media="(max-width: 640px)">

    <link rel="preload" as="image" href="/.netlify/images?url=/images/hero/tablet-hero-1536x1024.jpg&amp;w=1024&amp;h=683&amp;fit=cover&amp;fm=jpg&amp;q=85" type="image/jpeg" fetchpriority="high" media="(min-width: 641px) and (max-width: 1024px)">

    <link rel="preload" as="image" href="/.netlify/images?url=/images/hero/desktop-hero-1920x1080.jpg&amp;w=1920&amp;h=1080&amp;fit=cover&amp;fm=jpg&amp;q=85" type="image/jpeg" fetchpriority="high" media="(min-width: 1025px) and (max-width: 1920px)">

    <link rel="preload" as="image" href="/.netlify/images?url=/images/hero/desktop-hero-2560x1440.jpg&amp;w=2560&amp;h=1440&amp;fit=cover&amp;fm=jpg&amp;q=85" type="image/jpeg" fetchpriority="high" media="(min-width: 1921px)">

    <!-- Critical CSS for above-the-fold content - Inlined for immediate FCP -->
    <style>
      /* Critical font-face declarations with swap for optimal CLS/FCP balance */
      @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url('/fonts/inter-400.woff2') format('woff2');
      }
      @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url('/fonts/inter-500.woff2') format('woff2');
      }
      @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url('/fonts/inter-600.woff2') format('woff2');
      }
      @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url('/fonts/inter-700.woff2') format('woff2');
      }
      
      /* Critical base styles - Loaded synchronously to prevent FOUC */
      *,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
      ::before,::after{--tw-content:''}
      html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
      body{margin:0;line-height:inherit;visibility:visible;overflow-x:hidden}
      
      /* Critical CSS variables - Design system tokens */
      :root{
        --background:0 0% 100%;
        --foreground:222 47% 11%;
        --primary:215 28% 17%;
        --primary-foreground:0 0% 98%;
        --secondary:210 40% 96%;
        --accent:43 74% 66%;
        --solar-dark:215 28% 17%;
        --solar-accent:43 74% 66%;
        --solar-text:222 47% 11%;
        --gradient-hero:linear-gradient(135deg,hsl(var(--solar-dark) / 0.85),hsl(215 25% 25% / 0.8));
        --shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);
        --contact-strip-height:80px;
        --primary-nav-height:64px;
        --header-stack-height:calc(var(--contact-strip-height) + var(--primary-nav-height));
        --header-offset:var(--header-stack-height);
        --hero-aspect-ratio:2 / 3;
        --hero-intrinsic-width:500px;
        --hero-intrinsic-height:750px;
      }
      @media (min-width: 641px){
        :root{
          --contact-strip-height:48px;
          --hero-aspect-ratio:3 / 2;
          --hero-intrinsic-width:1536px;
          --hero-intrinsic-height:1024px;
        }
      }
      @media (min-width: 1025px){
        :root{
          --contact-strip-height:40px;
          --hero-aspect-ratio:16 / 9;
          --hero-intrinsic-width:1920px;
          --hero-intrinsic-height:1080px;
        }
      }
      
      /* Critical layout - Core structure with reserved space to prevent CLS */
      body{background-color:hsl(var(--background));color:hsl(var(--foreground));font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif}
      #root{min-height:100vh;display:flex;flex-direction:column}
      #main-content{min-height:100vh;display:flex;flex-direction:column;padding-top:0;scroll-padding-top:var(--header-stack-height)}
      @supports (padding: env(safe-area-inset-top)){.site-header{padding-top:env(safe-area-inset-top,0px)}}
      /* Reserve exact space for hero to prevent layout shift */
      #root:empty{min-height:100vh;content-visibility:auto;contain-intrinsic-size:100vw 100vh}
      .min-h-screen{min-height:100vh}
      .bg-background{background-color:hsl(var(--background))}
      .text-foreground{color:hsl(var(--foreground))}
      .relative{position:relative}
      .absolute{position:absolute}
      .fixed{position:fixed}
      .flex{display:flex}
      .inline-flex{display:inline-flex}
      .grid{display:grid}
      .hidden{display:none}
      .h-full{height:100%}
      .w-full{width:100%}
      .max-w-full{max-width:100%}
      .flex-col{flex-direction:column}
      .items-start{align-items:flex-start}
      .items-center{align-items:center}
      .justify-start{justify-content:flex-start}
      .justify-center{justify-content:center}
      .justify-between{justify-content:space-between}
      .gap-2{gap:0.5rem}
      .gap-4{gap:1rem}
      .overflow-hidden{overflow:hidden}
      .container{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}
      @media(min-width:640px){.container{max-width:640px}}
      @media(min-width:768px){.container{max-width:768px}}
      @media(min-width:1024px){.container{max-width:1024px}}
      @media(min-width:1280px){.container{max-width:1280px}}
      @media(min-width:1536px){.container{max-width:1536px}}
      
      /* Critical header/nav styles - Above fold */
      .sticky{position:sticky}
      .top-0{top:0}
      .z-50{z-index:50}
      .py-2{padding-top:0.5rem;padding-bottom:0.5rem}
      .py-4{padding-top:1rem;padding-bottom:1rem}
      .px-4{padding-left:1rem;padding-right:1rem}
      .mx-auto{margin-left:auto;margin-right:auto}
      .bg-primary{background-color:hsl(var(--primary))}
      .bg-white{background-color:rgb(255 255 255)}
      .text-primary-foreground{color:hsl(var(--primary-foreground))}
      .shadow-sm{box-shadow:var(--shadow-sm)}
      
      /* Critical hero section styles - Largest Contentful Paint optimization */
      .text-white{color:rgb(255 255 255)}
      .text-center{text-align:center}
      .space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}
      .space-y-6>:not([hidden])~:not([hidden]){margin-top:1.5rem}
      .space-y-8>:not([hidden])~:not([hidden]){margin-top:2rem}
      .bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}
      .from-solar-dark\/60{--tw-gradient-from:hsl(var(--solar-dark) / 0.6) var(--tw-gradient-from-position);--tw-gradient-to:hsl(var(--solar-dark) / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
      .via-solar-dark\/65{--tw-gradient-to:hsl(var(--solar-dark) / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),hsl(var(--solar-dark) / 0.65) var(--tw-gradient-via-position),var(--tw-gradient-to)}
      .to-solar-dark\/60{--tw-gradient-to:hsl(var(--solar-dark) / 0.6) var(--tw-gradient-to-position)}
      .inset-0{inset:0}
      .min-h-\[100svh\]{min-height:100svh}
      .text-solar-accent{color:hsl(var(--solar-accent))}
      .text-primary-foreground\/90{color:hsl(var(--primary-foreground) / 0.9)}
      .text-2xl{font-size:1.5rem;line-height:2rem}
      .text-3xl{font-size:1.875rem;line-height:2.25rem}
      .text-4xl{font-size:2.25rem;line-height:2.5rem}
      .text-5xl{font-size:3rem;line-height:1}
      .text-xl{font-size:1.25rem;line-height:1.75rem}
      .text-lg{font-size:1.125rem;line-height:1.75rem}
      .text-sm{font-size:0.875rem;line-height:1.25rem}
      .text-base{font-size:1rem;line-height:1.5rem}
      .font-bold{font-weight:700}
      .font-semibold{font-weight:600}
      .font-medium{font-weight:500}
      .mb-4{margin-bottom:1rem}
      .mb-6{margin-bottom:1.5rem}
      .mb-8{margin-bottom:2rem}
      .mt-8{margin-top:2rem}
      .rounded-lg{border-radius:0.5rem}
      .rounded-full{border-radius:9999px}
      .px-4{padding-left:1rem;padding-right:1rem}
      .px-6{padding-left:1.5rem;padding-right:1.5rem}
      .px-8{padding-left:2rem;padding-right:2rem}
      .py-2{padding-top:0.5rem;padding-bottom:0.5rem}
      .py-3{padding-top:0.75rem;padding-bottom:0.75rem}
      .py-4{padding-top:1rem;padding-bottom:1rem}
      .py-20{padding-top:5rem;padding-bottom:5rem}
      
      /* Hero button critical styles */
      .bg-solar-accent{background-color:hsl(var(--solar-accent))}
      .bg-solar-accent\/20{background-color:hsl(var(--solar-accent) / 0.2)}
      .bg-primary-foreground\/10{background-color:hsl(var(--primary-foreground) / 0.1)}
      .hover\:bg-primary-foreground\/20:hover{background-color:hsl(var(--primary-foreground) / 0.2)}
      .border-primary-foreground\/30{border-color:hsl(var(--primary-foreground) / 0.3)}
      .border{border-width:1px}
      .p-2{padding:0.5rem}
      .p-6{padding:1.5rem}
      .flex-1{flex:1 1 0%}
      .flex-shrink-0{flex-shrink:0}
      .whitespace-nowrap{white-space:nowrap}
      .inline{display:inline}
      
      /* Hero grid and layout */
      .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
      .gap-3{gap:0.75rem}
      .gap-6{gap:1.5rem}
      .gap-12{gap:3rem}
      
      /* Critical animations for hero */
      @keyframes fade-in{from{opacity:0}to{opacity:1}}
      @keyframes scale-in{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
      .animate-fade-in{animation:fade-in 0.6s ease-out forwards}
      .animate-scale-in{animation:scale-in 0.6s ease-out forwards}
      .py-20{padding-top:5rem;padding-bottom:5rem}
      .transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
      .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
      .hover\:opacity-80:hover{opacity:0.8}
      .hover\:opacity-90:hover{opacity:0.9}
      .cursor-pointer{cursor:pointer}
      .leading-tight{line-height:1.25}
      .leading-relaxed{line-height:1.625}
      .gap-3{gap:0.75rem}
      .gap-6{gap:1.5rem}
      .items-start{align-items:flex-start}
      .flex-shrink-0{flex-shrink:0}
      .opacity-90{opacity:0.9}
      .z-10{z-index:10}
      .-z-10{z-index:-10}
      
      /* Responsive utilities for hero section */
      @media(min-width:640px){
        .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
        .sm\:text-5xl{font-size:3rem;line-height:1}
        .sm\:text-xl{font-size:1.25rem;line-height:1.75rem}
        .sm\:text-2xl{font-size:1.5rem;line-height:2rem}
        .sm\:text-base{font-size:1rem;line-height:1.5rem}
        .sm\:text-sm{font-size:0.875rem;line-height:1.25rem}
        .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
        .sm\:px-4{padding-left:1rem;padding-right:1rem}
        .sm\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}
        .sm\:gap-3{gap:0.75rem}
        .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
        .sm\:hidden{display:none}
        .sm\:inline{display:inline}
      }
      
      @media(min-width:768px){
        .md\:text-5xl{font-size:3rem;line-height:1}
        .md\:text-6xl{font-size:3.75rem;line-height:1}
        .md\:text-2xl{font-size:1.5rem;line-height:2rem}
        .md\:text-lg{font-size:1.125rem;line-height:1.75rem}
        .md\:text-base{font-size:1rem;line-height:1.5rem}
        .md\:px-8{padding-left:2rem;padding-right:2rem}
        .md\:px-6{padding-left:1.5rem;padding-right:1.5rem}
        .md\:py-20{padding-top:5rem;padding-bottom:5rem}
        .md\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}
        .md\:gap-6{gap:1.5rem}
        .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
        .md\:flex{display:flex}
        .md\:hidden{display:none}
        .md\:block{display:block}
        .md\:items-center{align-items:center}
        .md\:min-h-\[80vh\]{min-height:80vh}
      }
      
      @media(min-width:1024px){
        .lg\:text-6xl{font-size:3.75rem;line-height:1}
        .lg\:text-7xl{font-size:4.5rem;line-height:1}
        .lg\:text-2xl{font-size:1.5rem;line-height:2rem}
        .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
        .lg\:block{display:block}
      }
      
      /* Mobile-specific hero optimizations (<=640px) */
      @media(max-width:640px){
        [data-testid="home-hero"]{min-height:100vh;display:flex;align-items:flex-start;contain:layout}
        [data-testid="home-hero"] .container{padding-top:1rem;padding-bottom:1rem}
        [data-testid="home-hero"] h1{font-size:1.5rem;line-height:2rem;margin-bottom:1.5rem;min-height:3rem}
        [data-testid="home-hero"] h1+p{font-size:1.125rem;line-height:1.75rem;margin-bottom:2rem;min-height:2.5rem}
        [data-testid="home-hero"] .grid{grid-template-columns:repeat(1,minmax(0,1fr));gap:1rem}
        [data-testid="home-hero"] picture{position:absolute;inset:0;z-index:-10;contain:layout}
        [data-testid="home-hero"] picture img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:top;object-position:top}
        .sm\:grid-cols-2{grid-template-columns:repeat(1,minmax(0,1fr))}
      }
      
      /* Tablet-specific hero optimizations (641px-1024px) */
      @media(min-width:641px) and (max-width:1024px){
        [data-testid="home-hero"]{min-height:80vh}
        [data-testid="home-hero"] h1{font-size:2.25rem;line-height:2.5rem}
        [data-testid="home-hero"] h1+p{font-size:1.25rem;line-height:1.75rem}
      }
      
      /* Critical button styles */
      .bg-accent{background-color:hsl(var(--accent))}
      .text-accent-foreground{color:hsl(var(--foreground))}
      
      /* Responsive utilities for above-fold */
      @media(min-width:640px){.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}
      @media(min-width:768px){.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:flex{display:flex}.md\:hidden{display:none}}
      @media(min-width:1024px){.lg\:text-7xl{font-size:4.5rem;line-height:1}}
      
      /* Image loading optimization and CLS prevention */
      img{max-width:100%;height:auto;display:block}
      img[width][height]{aspect-ratio:attr(width)/attr(height);height:auto}
      picture{display:block;contain:layout}
      .lazy-load{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease,transform 0.6s ease}
      .lazy-load.loaded{opacity:1;transform:translateY(0)}
      
      /* Prevent layout shift from fixed header */
      .fixed-header{position:fixed;top:0;left:0;right:0;z-index:50;contain:layout size}
      
      /* Hero section CLS prevention */
      [data-testid="home-hero"]{contain:layout;position:relative}
      [data-testid="home-hero"]::before{content:"";display:block;position:absolute;inset:0;background:hsl(215 28% 17%);z-index:-20}
      
      /* Format-specific optimizations based on browser support */
      /* AVIF support - Best compression, modern browsers */
      html[data-avif="true"] picture source[type="image/avif"] {
        /* AVIF supported - prioritize AVIF sources */
        display: initial;
      }
      
      html[data-avif="false"] picture source[type="image/avif"] {
        /* AVIF not supported - skip AVIF sources to save bandwidth */
        display: none;
      }
      
      /* WebP support - Widely supported fallback */
      html[data-webp="true"] picture source[type="image/webp"] {
        /* WebP supported - use WebP as fallback */
        display: initial;
      }
      
      html[data-webp="false"] picture source[type="image/webp"] {
        /* WebP not supported - skip WebP sources */
        display: none;
      }
      
      /* Legacy browser optimizations (no AVIF or WebP) */
      html[data-avif="false"][data-webp="false"] img {
        /* Legacy browsers - optimize JPEG/PNG rendering */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
      }
      
      /* Modern browser optimizations (AVIF supported) */
      html[data-avif="true"] img {
        /* AVIF browsers get smooth high-quality rendering */
        image-rendering: auto;
        image-rendering: high-quality;
      }
      
      /* Performance hint: Decode images asynchronously on modern browsers */
      html[data-avif="true"] picture img,
      html[data-webp="true"] picture img {
        /* Async decoding prevents blocking main thread */
        content-visibility: auto;
        contain-intrinsic-size: 100vw 100vh;
      }
      
      /* Prevent layout shift - Hero image specific */
      [data-testid="home-hero"] picture{position:absolute;top:0;right:0;bottom:0;left:0}
      [data-testid="home-hero"] picture img{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
      
      /* General layout shift prevention */
      .aspect-video{aspect-ratio:16/9}
      .object-cover{-o-object-fit:cover;object-fit:cover}
      .inset-0{top:0;right:0;bottom:0;left:0}
    </style>

    <!-- Modern Image Format Detection Script -->
    <!-- Detects AVIF/WebP support and stores in sessionStorage for performance -->
    <script>
      (function() {
        'use strict';
        
        // Check if we've already detected formats in this session
        const cachedSupport = sessionStorage.getItem('imageFormatSupport');
        
        if (cachedSupport) {
          // Use cached results for instant detection
          const formats = JSON.parse(cachedSupport);
          document.documentElement.setAttribute('data-avif', formats.avif);
          document.documentElement.setAttribute('data-webp', formats.webp);
          return;
        }
        
        // Function to test image format support
        function testImageFormat(format, callback) {
          const testImages = {
            avif: 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=',
            webp: 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA'
          };
          
          const img = new Image();
          img.onload = function() {
            callback(img.width > 0 && img.height > 0);
          };
          img.onerror = function() {
            callback(false);
          };
          img.src = testImages[format];
        }
        
        // Detect AVIF support
        testImageFormat('avif', function(avifSupported) {
          // Detect WebP support
          testImageFormat('webp', function(webpSupported) {
            const support = {
              avif: avifSupported,
              webp: webpSupported,
              timestamp: Date.now()
            };
            
            // Store in sessionStorage for fast retrieval on subsequent page loads
            sessionStorage.setItem('imageFormatSupport', JSON.stringify(support));
            
            // Add data attributes to html element for CSS targeting
            document.documentElement.setAttribute('data-avif', avifSupported);
            document.documentElement.setAttribute('data-webp', webpSupported);

            // Track format support in Google Analytics (if available)
            if (window.dataLayer) {
              window.dataLayer.push({
                event: 'image_format_detection',
                avif_supported: avifSupported,
                webp_supported: webpSupported
              });
            }
          });
        });
      })();
    </script>
    <!-- End Image Format Detection -->
    
    <meta property="og:description" content="Cut your energy bills with certified solar panels, battery storage, and EV chargers. Installed in 1 day. No VAT until 2027.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.install-solar.co.uk/">
    <meta property="og:site_name" content="Install Solar Panels">
    <meta property="og:image" content="/favicon.png">

    <meta name="twitter:card" content="summary_large_image">
    
    <meta name="twitter:description" content="Certified solar panel &amp; battery installers. Save money, go green, and take control of your energy. No VAT until 2027.">
    <meta name="twitter:image" content="/favicon.png">

    <!-- JSON-LD LocalBusiness Schema -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "LocalBusiness",
      "name": "Install Solar Panels",
      "description": "Professional solar panel installation in Chorley & Northwest UK. MCS certified, 25-year warranties, free quotes.",
      "url": "https://www.install-solar.co.uk/",
      "telephone": "+44 1772 503 222",
      "email": "info@install-solar.co.uk",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "2 Queens Road",
        "addressLocality": "Chorley",
        "postalCode": "PR7 1JU",
        "addressRegion": "Lancashire",
        "addressCountry": "GB"
      },
      "geo": {
        "@type": "GeoCoordinates",
        "latitude": "53.6530",
        "longitude": "-2.6298"
      },
      "openingHours": "Mo-Fr 09:00-18:00",
      "sameAs": [
        "https://www.linkedin.com/company/install-solar-panels/",
        "https://www.facebook.com/installsolarpanels",
        "https://x.com/InstallPanels",
        "https://uk.pinterest.com/installsolarpanelsuk/",
        "https://www.youtube.com/@installsolarpanels"
      ],
      "serviceArea": {
        "@type": "GeoCircle",
        "geoMidpoint": {
          "@type": "GeoCoordinates",
          "latitude": "53.6530",
          "longitude": "-2.6298"
        },
        "geoRadius": "50000"
      },
      "hasOfferCatalog": {
        "@type": "OfferCatalog",
        "name": "Solar Panel Installation Services",
        "itemListElement": [
          {
            "@type": "Offer",
            "itemOffered": {
              "@type": "Service",
              "name": "Residential Solar Panel Installation",
              "description": "Professional solar panel installation for UK homes with MCS certification"
            }
          },
          {
            "@type": "Offer", 
            "itemOffered": {
              "@type": "Service",
              "name": "Commercial Solar Panel Installation",
              "description": "Large-scale solar installations for businesses and commercial properties"
            }
          },
          {
            "@type": "Offer",
            "itemOffered": {
              "@type": "Service", 
              "name": "Battery Storage Systems",
              "description": "Solar battery storage solutions including Tesla Powerwall and Hanchu systems"
            }
          },
          {
            "@type": "Offer",
            "itemOffered": {
              "@type": "Service",
              "name": "EV Charging Installation", 
              "description": "Electric vehicle charging point installation for homes and businesses"
            }
          }
        ]
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.9",
        "reviewCount": "500",
        "bestRating": "5"
      }
    }
    </script>
    
    <meta property="og:title" content="Install Solar Panels">
  <meta name="twitter:title" content="Install Solar Panels">
  <script type="module" crossorigin="" src="/assets/index-D4sBXyi5.js"></script>
  <link rel="modulepreload" crossorigin="" href="/assets/vendor-DHCOAkNo.js">
  <link rel="modulepreload" crossorigin="" href="/assets/supabase-BRSQ6uBv.js">
  <link rel="modulepreload" crossorigin="" href="/assets/utils-BkLtITBR.js">
  <link rel="modulepreload" crossorigin="" href="/assets/ui-oQEYn9vS.js">
  <link rel="stylesheet" crossorigin="" href="/assets/index-DzkmmK3E.css">
</head>

  <body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MFXWLL83" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    
    <!-- Accessibility: Skip to main content -->
    <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[100] focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
      Skip to main content
    </a>
    
    <div id="root"></div>
    
    <!-- Critical above-fold HTML for immediate LCP - prevents 1.79s render delay -->
    <noscript id="hero-fallback">
      <style>
        .hero-static {
          position: relative;
          min-height: 100vh;
          display: flex;
          align-items: flex-start;
          justify-content: center;
          overflow: hidden;
          background: hsl(215, 28%, 17%);
        }
        .hero-bg-img {
          position: absolute;
          inset: 0;
          z-index: -1;
        }
        .hero-bg-img img {
          width: 100%;
          height: 100%;
          -o-object-fit: cover;
             object-fit: cover;
          -o-object-position: top;
             object-position: top;
        }
        .hero-overlay {
          position: absolute;
          inset: 0;
          background: linear-gradient(to right, 
            hsl(215 28% 17% / 0.6), 
            hsl(215 28% 17% / 0.65), 
            hsl(215 28% 17% / 0.6)
          );
        }
        .hero-content {
          position: relative;
          z-index: 10;
          width: 100%;
          max-width: 1280px;
          margin: 0 auto;
          padding: 1rem;
          padding-top: 1rem;
          padding-bottom: 1rem;
          color: hsl(0, 0%, 98%);
        }
        @media (min-width: 768px) {
          .hero-static {
            align-items: center;
            min-height: 80vh;
          }
          .hero-content {
            padding-top: 5rem;
            padding-bottom: 5rem;
          }
        }
      </style>
      <section class="hero-static">
        <div class="hero-bg-img">
          <picture>
            <source srcset="/images/hero/mobile-hero-500x750.avif?v=2" type="image/avif" media="(max-width: 640px)">
            <source srcset="/images/hero/mobile-hero-500x750.webp?v=2" type="image/webp" media="(max-width: 640px)">
            <source srcset="/images/hero/tablet-hero-1536x1024.avif?v=2" type="image/avif" media="(min-width: 641px) and (max-width: 1024px)">
            <source srcset="/images/hero/tablet-hero-1536x1024.webp?v=2" type="image/webp" media="(min-width: 641px) and (max-width: 1024px)">
            <source srcset="/images/hero/desktop-hero-1920x1080.avif?v=2" type="image/avif" media="(min-width: 1025px)">
            <source srcset="/images/hero/desktop-hero-1920x1080.webp?v=2" type="image/webp" media="(min-width: 1025px)">
            <img src="https://res.cloudinary.com/du9zccuwy/image/fetch/f_auto,q_auto/https://install-solar.co.uk/images/hero/mobile-hero-500x750.jpg%3Fv%3D2?_a=BBFAAAAA0" alt="Professional solar panel installation on UK home" width="500" height="750" fetchpriority="high" loading="lazy">
          </picture>
        </div>
        <div class="hero-overlay"></div>
        <div class="hero-content">
          <h1 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; line-height: 1.25;">
            Install Solar Panels in the UK – <span style="color: hsl(43, 74%, 66%);">Start Saving Today</span>
          </h1>
        </div>
      </section>
    </noscript>
    
    <!-- Main application script - type="module" loads with standard priority -->
    
    <!-- Performance monitoring script - Inline and minimal -->
    <script>
      // Mark the start of the page load for performance monitoring
      if (window.performance && window.performance.mark) {
        window.performance.mark('app-init-start');
      }
    </script>
    
    
  


<script async id="netlify-rum-container" src="/.netlify/scripts/rum" data-netlify-rum-site-id="2554f0ec-04ae-42fe-9582-741ea784c9fb" data-netlify-deploy-branch="main" data-netlify-deploy-context="production" data-netlify-cwv-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaXRlX2lkIjoiMjU1NGYwZWMtMDRhZS00MmZlLTk1ODItNzQxZWE3ODRjOWZiIiwiYWNjb3VudF9pZCI6IjY4ZjE5OTA2NjNlZWM0NDIwY2MwODA2YSIsImRlcGxveV9pZCI6IjY5MmUxOTRkMGNkODNiMDAwODg0MmUyOSIsImlzc3VlciI6Im5mc2VydmVyIn0.Tho1LZIZvDw3eAL78cg3l4qprR8nSyFaxOBXDifD8ew"></script></body></html>