/* Generated by tools/build.py from index.html. Do not edit by hand.
   Blog-only overrides belong in assets/blog.css. */

blocks below. -->
    <meta http-equiv="Content-Security-Policy" content="
        default-src 'self';
        script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.tailwindcss.com https://unpkg.com;
        style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
        font-src 'self' https://fonts.gstatic.com;
        img-src 'self' data: blob: https: http://localhost:8787;
        connect-src 'self' https://icy-glade-3783.anthony81671.workers.dev https://knt-photos.anthony81671.workers.dev http://localhost:8787;
        object-src 'none';
        base-uri 'self';
        form-action 'self';
    ">
    <meta name="referrer" content="strict-origin-when-cross-origin">

    <title>K&T Nails and Spa | Premium Nail Salon in Cypress, CA</title>

    <!-- SEO Meta Tags -->
    <meta name="description" content="Experience luxury nail care at K&T Nails and Spa in Cypress, CA. Expert manicures, pedicures, gel nails, nail art, and waxing services. Walk-ins welcome! Call 714-820-6172">
    <meta name="keywords" content="nail salon Cypress, manicure Cypress CA, pedicure, gel nails, nail art, spa services, waxing, K&T Nails, Katella Ave">
    <meta name="author" content="K&T Nails and Spa">
    <meta name="robots" content="index, follow">
    <meta name="language" content="English">
    <meta name="revisit-after" content="7 days">

    <!-- Open Graph Meta Tags for Social Media -->
    <meta property="og:title" content="K&T Nails and Spa | Premium Nail Salon in Cypress, CA">
    <meta property="og:description" content="Experience luxury nail care at K&T Nails and Spa. Expert manicures, pedicures, gel nails, and spa services in Cypress, CA. Walk-ins welcome!">
    <meta property="og:image" content="https://kandtnailsandspa.com/hero.png">
    <meta property="og:url" content="https://kandtnailsandspa.com">
    <meta property="og:type" content="business.business">
    <meta property="og:site_name" content="K&T Nails and Spa">
    <meta property="og:locale" content="en_US">

    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="K&T Nails and Spa | Premium Nail Salon in Cypress, CA">
    <meta name="twitter:description" content="Experience luxury nail care at K&T Nails and Spa. Expert manicures, pedicures, gel nails, and spa services in Cypress, CA.">
    <meta name="twitter:image" content="https://kandtnailsandspa.com/hero.png">

    <!-- Canonical URL -->
    <link rel="canonical" href="https://kandtnailsandspa.com">

    <!-- FAVICON -->
    <link rel="icon" type="image/png" href="KNTLogo2026.png">
    <link rel="apple-touch-icon" href="KNTLogo2026.png">

    <!-- Preconnect to external resources for performance -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://cdn.tailwindcss.com">
    <link rel="preconnect" href="https://unpkg.com">

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>

    <!-- Google Fonts (Phenix-style): Inter (headings/nav/buttons/UI), Jost (geometric body copy, ~Century Gothic), Italiana (brand accent only) -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Jost:wght@300;400;500;600&family=Italiana&display=swap" rel="stylesheet">
    <style>
        /* --- Glassmorphism Core --- */
        :root {
            --glass-bg: rgba(255, 255, 255, 0.4);
            --glass-border: rgba(255, 255, 255, 0.3);
            --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
            --pink-glow: rgba(122, 1, 54, 0.10);
            --gold-glow: rgba(122, 1, 54, 0.06);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body { 
            font-family: 'Inter', sans-serif;
            background-color: #fcfcfd;
            min-height: 100vh;
            width: 100%;
            overflow-x: clip; /* 'hidden' creates a scroll container and breaks position: sticky */
            position: relative;
            -webkit-text-size-adjust: 100%; /* Prevents iOS font resizing on orientation change */
        }

        .glass-card {
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-radius: 1.5rem;
            box-shadow: var(--glass-shadow);
        }

        /* Single-page flow: section content sits openly on the page — no framed
           boxes. Real panels (modals, chat window) live outside <section>/<header>
           and keep their glass treatment. */
        section .glass-card,
        header .glass-card {
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border: none;
            box-shadow: none;
            border-radius: 0;
        }

        .navbar-glass {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        /* Phenix-style headings: Inter. H1/H2 bold uppercase; H3/H4 medium, normal case.
           .font-serif is folded into Inter so legacy heading markup restyles automatically. */
        h1, h2, h3, h4, .font-serif {
            font-family: 'Inter', sans-serif;
        }
        h1, h2 {
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        h3, h4 {
            font-weight: 500;
            letter-spacing: 0.2px;
        }
        /* Elegant serif reserved ONLY for the brand wordmark */
        .font-logo {
            font-family: 'Italiana', sans-serif;
            font-weight: 400;
            text-transform: none;
            letter-spacing: 0.02em;
        }
        p { font-family: 'Jost', 'Inter', sans-serif; }
        
        /* Phenix-style buttons: flat burgundy pill — no gradient, no shadow, no glow. */
        .glow-button {
            position: relative;
            overflow: hidden;
            transition: background-color 0.25s ease, color 0.25s ease;
            background: #7A0136;
            color: white;
            box-shadow: none;
            border: none;
        }

        .glow-button:hover {
            background: #5c0129; /* darker burgundy */
        }

        /* Secondary/outline variant */
        .btn-outline {
            background: transparent;
            color: #141413;
            border: 2px solid #141413;
            transition: background-color 0.25s ease, color 0.25s ease;
        }
        .btn-outline:hover {
            background: #141413;
            color: #ffffff;
        }

        /* --- Custom Scrollbar --- */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(122, 1, 54, 0.35); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(122, 1, 54, 0.55); }

        /* Accordions as an open, divided list — hairline rules, no boxes. */
        .accordion-item {
            background: transparent;
            border: none;
            border-bottom: 1px solid rgba(31, 41, 55, 0.10);
            border-radius: 0;
            margin-bottom: 0;
            box-shadow: none;
            overflow: hidden;
            transition: none;
        }
        .accordion-item:first-of-type {
            border-top: 1px solid rgba(31, 41, 55, 0.10);
        }
        .accordion-summary {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 0.25rem;
            font-size: 1.5rem; /* text-2xl */
            font-weight: 600;
            cursor: pointer;
            color: #141413; /* near-black */
            transition: color 0.2s ease;
            font-family: 'Inter', sans-serif;
            /* Hide the default drop-down arrow */
            list-style: none;
        }
        .accordion-summary:hover {
            color: #7A0136;
        }
        .accordion-summary::-webkit-details-marker { display: none; }
        .accordion-content {
            padding: 0 1.5rem 1.5rem 1.5rem; 
        }
        
        /* Inner package styling adjustments — soft tints, no hard outlines */
        .package-item {
            border-radius: 0.75rem;
            overflow: hidden;
            border: none !important;
            box-shadow: none !important;
        }
        .package-summary {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem;
            cursor: pointer;
            transition: background-color 0.2s;
            list-style: none; 
        }
        .package-summary::-webkit-details-marker { display: none; }
        .package-content {
            padding: 0 1.5rem 1.5rem 1.5rem;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            margin-top: -1px; 
        }
        
        /* List bullet styling */
        .package-content details ul, .package-content details ol {
            padding-left: 0;
            list-style: none;
        }
        .package-content details ul li:before {
            content: '•';
            display: inline-block;
            margin-right: 0.5em;
            color: #7A0136; 
        }
        .package-content p.font-semibold {
            padding-left: 0;
        }
        
        /* Subheading Consistency Class */
        .section-subheading {
            color: #7A0136; /* text-brand-pink */
            font-weight: 700; /* font-bold */
            text-transform: uppercase;
            letter-spacing: 0.1em; /* tracking-[0.1em] */
            font-size: 1.125rem; /* text-lg */
            display: block;
            margin-bottom: 0.5rem; /* mb-2 */
        }

        /* --- Mobile Responsiveness (5-Step Guide Implementation) --- */
        
        /* 4. Make Images Flexible */
        img {
            max-width: 100%;
            height: auto;
            display: block; /* Prevents tiny gaps under images */
        }

        /* 2. Relative Units for Containers - Reinforced */
        .container {
            width: 100%;
            max-width: 1280px; 
            margin-left: auto;
            margin-right: auto;
            padding-left: clamp(1rem, 5vw, 2rem);
            padding-right: clamp(1rem, 5vw, 2rem);
        }

        /* Fluid Typography and Spacing Normalization.
           `body` prefix raises specificity above Tailwind's preflight (which resets
           bare h1..h4 to font-size:inherit) so headings without an explicit text-size
           utility still scale correctly. */
        body h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: 1.05; }
        body h2 { font-size: clamp(1.875rem, 6vw, 3.75rem); line-height: 1.2; }
        body h3 { font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.3; }
        body p { font-size: clamp(1rem, 1.1vw, 1.125rem); line-height: 1.6; }

        section {
            padding-top: clamp(4rem, 10vh, 8rem);
            padding-bottom: clamp(4rem, 10vh, 8rem);
        }

        /* 3. Implement CSS Media Queries for custom refinements */
        /* Mobile styles (Screens smaller than 768px) */
        @media (max-width: 768px) {
            /* 5. Flexbox/Grid Stacking - ensuring full width on mobile */
            .grid-stack {
                grid-template-columns: 1fr !important;
            }

            /* Touch Target Optimization */
            button, .glow-button, a, .accordion-summary, .package-summary {
                min-height: 44px;
                display: flex;
                align-items: center;
            }

            .glow-button {
                justify-content: center;
            }
        }

        /* Smallest phones (under 375px) */
        @media (max-width: 375px) {
            h1 {
                font-size: 1.875rem !important; /* 30px */
            }
        }