<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Valencia MedSpa, Knoxville, TN</title>
    
    <!-- Preload critical fonts -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@300;400;500;600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    
    <!-- Critical CSS for above-the-fold content -->
    <style>
      /* Critical CSS for immediate rendering */
      :root {
        --color-emerald: #3E666E;
        --color-skin-tone: #FFE0D2;
        --color-vitality-violet: #803766;
        --color-blush: #E7CED0;
        --color-primary: var(--color-vitality-violet);
        --color-secondary: var(--color-emerald);
        --color-background: var(--color-skin-tone);
        --color-accent: var(--color-blush);
        --text-color: #333;
        --text-light: #666;
        --font-primary: 'League Spartan', sans-serif;
        --font-heading: 'League Spartan', sans-serif;
        --font-fancy: 'Cinzel', serif;
        --background-light: #f8f0f3;
        --white: #fff;
      }
      
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      body {
        font-family: var(--font-primary);
        line-height: 1.6;
        color: var(--text-color);
        margin: 0;
        padding: 0;
      }
      
      #app {
        max-width: 1280px;
        margin: 0 auto;
        padding: 2rem;
        font-weight: normal;
      }
      
      /* Loading state */
      .loading {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        font-family: var(--font-primary);
        color: var(--color-primary);
      }
    </style>
    
    <!-- Resource hints for performance -->
    <link rel="dns-prefetch" href="//cdn.sanity.io">
    <link rel="dns-prefetch" href="//fonts.googleapis.com">
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    
    <!-- Preconnect to critical domains -->
    <link rel="preconnect" href="https://cdn.sanity.io" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- Fallback for fonts -->
    <noscript>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@300;400;500;600;700&display=swap">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&display=swap">
    </noscript>
    <script type="module" crossorigin src="/assets/index-C3Oc7sgD.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/sanity-CRpXG1NV.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-DZ1fk7oG.js">
    <link rel="modulepreload" crossorigin href="/assets/ui-Bd-LCERh.js">
    <link rel="stylesheet" crossorigin href="/assets/index-C6NJKegQ.css">
  </head>
  <body>
    <div id="app">
      <div class="loading">Loading Valencia MedSpa...</div>
    </div>
  </body>
</html>
