<?php
// ─── Contact Form Handler ─────────────────────────────────────────────────────
$mail_sent    = false;
$mail_error   = false;
$form_errors  = [];

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['contact_submit'])) {
    $name    = trim(strip_tags($_POST['name']    ?? ''));
    $email   = trim(strip_tags($_POST['email']   ?? ''));
    $phone   = trim(strip_tags($_POST['phone']   ?? ''));
    $subject = trim(strip_tags($_POST['subject'] ?? ''));
    $message = trim(strip_tags($_POST['message'] ?? ''));

    if (empty($name))                        $form_errors[] = 'Name is required.';
    if (empty($email) || !filter_var($email, FILTER_VALIDATE_EMAIL))
                                             $form_errors[] = 'A valid email address is required.';
    if (empty($message))                     $form_errors[] = 'Message is required.';

    if (empty($form_errors)) {
        $to      = 'Jaykusteaux@icloud.com';
        $subj    = $subject ?: 'New Contact Form Message from ' . $name;
        $body    = "Name: $name\nEmail: $email\nPhone: $phone\n\nMessage:\n$message";
        $headers = "From: noreply@jaykusteaux.com\r\nReply-To: $email\r\nX-Mailer: PHP/" . phpversion();

        if (mail($to, $subj, $body, $headers)) {
            $mail_sent = true;
        } else {
            $mail_error = true;
        }
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jaykusteaux Custom Cuisine | Down-South Cajun, BBQ &amp; Soul Food – Arlington, TX</title>
    <meta name="description" content="Jaykusteaux Custom Cuisine brings authentic Down-South Cajun, barbecue, seafood, and soul food to Arlington, Texas. Mobile food truck, catering, and private dining.">

    <!-- Favicon -->
    <link rel="icon" type="image/webp" href="jaykusteaux_logo_banner.webp">
    <link rel="apple-touch-icon" href="jaykusteaux_logo_banner.webp">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Lato:wght@300;400;700&family=Dancing+Script:wght@600&display=swap" rel="stylesheet">

    <!-- Font Awesome (non-blocking) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" media="print" onload="this.media='all'">
    <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"></noscript>

    <!-- Preload hero image -->
    <link rel="preload" as="image" href="image/hero.jpg">

    <style>
        /* ── Reset & Base ─────────────────────────────────────────── */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --gold:        #c8922a;
            --gold-light:  #e6b44a;
            --dark:        #1a1a1a;
            --dark2:       #2c2c2c;
            --charcoal:    #3d3d3d;
            --cream:       #f9f5ef;
            --light-gray:  #f4f4f4;
            --text:        #444444;
            --white:       #ffffff;
            --font-heading: 'Playfair Display', Georgia, serif;
            --font-script:  'Dancing Script', cursive;
            --font-body:    'Lato', sans-serif;
            --transition:   0.35s ease;
            --section-pad:  100px 0;
        }

        html { scroll-behavior: smooth; }

        body {
            font-family: var(--font-body);
            color: var(--text);
            background: var(--white);
            line-height: 1.7;
            overflow-x: hidden;
        }

        img { max-width: 100%; display: block; }
        a   { text-decoration: none; color: inherit; }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 30px;
        }

        /* ── Section Titles ───────────────────────────────────────── */
        .section-label {
            font-family: var(--font-script);
            font-size: 1.25rem;
            color: var(--gold);
            letter-spacing: 1px;
            display: block;
            margin-bottom: 8px;
        }

        .section-title {
            font-family: var(--font-heading);
            font-size: clamp(2rem, 4vw, 2.8rem);
            color: var(--dark);
            line-height: 1.2;
            margin-bottom: 18px;
        }

        .section-divider {
            width: 60px;
            height: 3px;
            background: var(--gold);
            margin: 16px 0 28px;
        }

        .section-divider.centered {
            margin: 16px auto 28px;
        }

        .text-center { text-align: center; }

        /* ── Buttons ──────────────────────────────────────────────── */
        .btn {
            display: inline-block;
            padding: 14px 38px;
            font-family: var(--font-body);
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            border: 2px solid var(--gold);
            color: var(--gold);
            background: transparent;
            cursor: pointer;
            transition: background var(--transition), color var(--transition);
        }

        .btn:hover {
            background: var(--gold);
            color: var(--white);
        }

        .btn-filled {
            background: var(--gold);
            color: var(--white);
        }

        .btn-filled:hover {
            background: var(--gold-light);
            border-color: var(--gold-light);
        }

        .btn-white {
            border-color: var(--white);
            color: var(--white);
        }

        .btn-white:hover {
            background: var(--white);
            color: var(--dark);
        }

        /* ══════════════════════════════════════════════════════════
           HEADER / NAV
        ══════════════════════════════════════════════════════════ */
        #header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            padding: 24px 0;
            transition: background var(--transition), padding var(--transition), box-shadow var(--transition);
        }

        #header.scrolled {
            background: rgba(26, 26, 26, 0.97);
            padding: 14px 0;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        }

        .nav-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .nav-logo img {
            height: 56px;
            width: auto;
            object-fit: contain;
        }

        .nav-logo .logo-text {
            font-family: var(--font-heading);
            font-size: 1.5rem;
            color: var(--white);
            font-style: italic;
            letter-spacing: 1px;
        }

        .nav-logo .logo-sub {
            font-family: var(--font-body);
            font-size: 0.65rem;
            color: var(--gold);
            letter-spacing: 3px;
            text-transform: uppercase;
            display: block;
            margin-top: 2px;
        }

        .nav-menu {
            display: flex;
            align-items: center;
            list-style: none;
            gap: 36px;
        }

        .nav-menu a {
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.88);
            padding-bottom: 4px;
            border-bottom: 2px solid transparent;
            transition: color var(--transition), border-color var(--transition);
        }

        .nav-menu a:hover,
        .nav-menu a.active {
            color: var(--gold);
            border-bottom-color: var(--gold);
        }

        /* Order Now CTA in nav */
        .nav-menu .nav-cta a {
            border: 1.5px solid var(--gold);
            padding: 8px 20px;
            color: var(--gold);
            border-bottom: 1.5px solid var(--gold);
        }

        .nav-menu .nav-cta a:hover {
            background: var(--gold);
            color: var(--white);
        }

        /* Hamburger */
        .nav-toggle {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 4px;
        }

        .nav-toggle span {
            display: block;
            width: 26px;
            height: 2px;
            background: var(--white);
            transition: var(--transition);
        }

        /* ══════════════════════════════════════════════════════════
           HERO SECTION
        ══════════════════════════════════════════════════════════ */
        #hero {
            position: relative;
            height: 100vh;
            min-height: 650px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            background-image: url('image/hero.jpg');
            background-size: cover;
            background-position: center 40%;
            transform: scale(1.05);
            transition: transform 8s ease-out;
        }

        #hero.loaded .hero-bg { transform: scale(1); }

        .hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(
                to bottom,
                rgba(10,10,10,0.55) 0%,
                rgba(10,10,10,0.72) 60%,
                rgba(10,10,10,0.85) 100%
            );
        }

        .hero-content {
            position: relative;
            text-align: center;
            color: var(--white);
            padding: 0 20px;
            animation: fadeUp 1.2s ease both;
        }

        .hero-script {
            font-family: var(--font-script);
            font-size: clamp(1.4rem, 3vw, 2rem);
            color: var(--gold);
            margin-bottom: 16px;
            display: block;
            opacity: 0.9;
        }

        .hero-title {
            font-family: var(--font-heading);
            font-size: clamp(2.8rem, 7vw, 5.5rem);
            font-weight: 700;
            line-height: 1.1;
            margin-bottom: 12px;
            letter-spacing: -1px;
        }

        .hero-title em {
            font-style: italic;
            color: var(--gold-light);
        }

        .hero-tagline {
            font-size: clamp(0.9rem, 2vw, 1.1rem);
            font-weight: 300;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.8);
            margin-bottom: 42px;
        }

        .hero-buttons {
            display: flex;
            gap: 18px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .hero-scroll {
            position: absolute;
            bottom: 36px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255,255,255,0.6);
            font-size: 1.4rem;
            animation: bounce 2s infinite;
            cursor: pointer;
        }

        /* ══════════════════════════════════════════════════════════
           EXPLAINER VIDEO
        ══════════════════════════════════════════════════════════ */
        #explainer {
            background: var(--dark);
            padding: 80px 0;
        }

        #explainer .explainer-inner {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 36px;
        }

        #explainer .explainer-text {
            text-align: center;
            max-width: 620px;
        }

        #explainer .explainer-text .section-label {
            color: var(--gold);
        }

        #explainer .explainer-text .section-title {
            color: var(--white);
        }

        #explainer .explainer-text p {
            color: rgba(255,255,255,.5);
            font-size: .97rem;
            margin-top: 12px;
        }

        .explainer-video-wrap {
            position: relative;
            width: 100%;
            max-width: 860px;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,.55);
            background: #000;
            line-height: 0;
        }

        .explainer-video-wrap video {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Overlay covers video area but doesn't block pointers */
        .exp-overlay {
            position: absolute;
            top: 0; left: 0; right: 0;
            bottom: 0; /* Cover full video area */
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,.28);
            pointer-events: none; /* Let clicks pass through to video */
            transition: opacity .3s;
            z-index: 2;
        }
        .exp-overlay.hidden {
            opacity: 0;
            pointer-events: none;
        }
        .exp-play-btn {
            position: relative;
            z-index: 10;
            width: 84px; height: 84px;
            border-radius: 50%;
            background: var(--gold);
            display: flex; align-items: center; justify-content: center;
            color: #1a1a1a;
            font-size: 2rem;
            padding-left: 7px;
            box-shadow: 0 6px 32px rgba(0,0,0,.55);
            transition: transform .25s, background .25s;
            pointer-events: auto; /* Play button handles the click */
            cursor: pointer;
        }
        .exp-overlay:hover .exp-play-btn {
            transform: scale(1.12);
            background: #e6ba2e;
        }


        /* ══════════════════════════════════════════════════════════
           INTRO STRIP
        ══════════════════════════════════════════════════════════ */
        #intro-strip {
            background: var(--gold);
            padding: 22px 0;
        }

        .intro-strip-inner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 50px;
            flex-wrap: wrap;
        }

        .strip-item {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--white);
        }

        .strip-item i {
            font-size: 1.5rem;
            opacity: 0.85;
        }

        .strip-item span {
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .strip-divider {
            width: 1px;
            height: 28px;
            background: rgba(255,255,255,0.35);
        }

        /* ══════════════════════════════════════════════════════════
           ABOUT / OUR STORY
        ══════════════════════════════════════════════════════════ */
        #about {
            padding: var(--section-pad);
            background: var(--white);
        }

        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }

        .about-text p {
            font-size: 1rem;
            line-height: 1.85;
            color: var(--text);
            margin-bottom: 18px;
        }

        .about-services {
            margin: 28px 0 36px;
            list-style: none;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .about-services li {
            font-size: 0.88rem;
            color: var(--charcoal);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .about-services li::before {
            content: '';
            width: 8px;
            height: 8px;
            background: var(--gold);
            border-radius: 50%;
            flex-shrink: 0;
        }

        .about-images {
            position: relative;
        }

        .about-img-main {
            width: 100%;
            height: 520px;
            object-fit: cover;
        }

        .about-img-badge {
            position: absolute;
            bottom: -28px;
            left: -28px;
            width: 160px;
            height: 160px;
            background: var(--gold);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--white);
            padding: 16px;
        }

        .about-img-badge strong {
            font-family: var(--font-heading);
            font-size: 2.8rem;
            line-height: 1;
        }

        .about-img-badge span {
            font-size: 0.65rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-top: 4px;
            opacity: 0.9;
        }

        /* ══════════════════════════════════════════════════════════
           MENU PREVIEW
        ══════════════════════════════════════════════════════════ */
        #menu {
            padding: var(--section-pad);
            background: var(--cream);
        }

        .menu-header {
            margin-bottom: 60px;
        }

        .menu-tabs {
            display: flex;
            justify-content: center;
            gap: 0;
            margin-top: 30px;
            border-bottom: 2px solid #e0d8ce;
        }

        .menu-tab {
            background: none;
            border: none;
            font-family: var(--font-body);
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--charcoal);
            padding: 12px 30px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
            transition: color var(--transition), border-color var(--transition);
        }

        .menu-tab.active,
        .menu-tab:hover {
            color: var(--gold);
            border-bottom-color: var(--gold);
        }

        .menu-panel { display: none; }
        .menu-panel.active { display: block; }

        .menu-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0;
        }

        .menu-item {
            display: flex;
            gap: 18px;
            padding: 26px 20px;
            border-bottom: 1px solid #e5ddd4;
            transition: background var(--transition);
        }

        .menu-item:hover { background: rgba(200,146,42,0.06); }

        .menu-item:nth-child(odd) { border-right: 1px solid #e5ddd4; }

        .menu-num {
            font-family: var(--font-heading);
            font-size: 1.6rem;
            color: rgba(200,146,42,0.2);
            font-weight: 700;
            line-height: 1;
            flex-shrink: 0;
            width: 28px;
        }

        .menu-details { flex: 1; }

        .menu-name-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 10px;
            margin-bottom: 6px;
        }

        .menu-name {
            font-family: var(--font-heading);
            font-size: 1.1rem;
            color: var(--dark);
            font-weight: 600;
        }

        .menu-dots {
            flex: 1;
            border-bottom: 1px dotted #c5b99a;
            margin: 0 8px;
            margin-bottom: 4px;
        }

        .menu-price {
            font-family: var(--font-heading);
            font-size: 1rem;
            color: var(--gold);
            font-weight: 600;
            white-space: nowrap;
        }

        .menu-desc {
            font-size: 0.85rem;
            color: #888;
            line-height: 1.5;
        }

        .menu-cta {
            text-align: center;
            margin-top: 50px;
        }

        /* ══════════════════════════════════════════════════════════
           FEATURES / WHY US
        ══════════════════════════════════════════════════════════ */
        #features {
            padding: var(--section-pad);
            background: var(--dark);
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 40px;
        }

        .feature-card {
            text-align: center;
            padding: 40px 24px;
            border: 1px solid rgba(255,255,255,0.08);
            transition: border-color var(--transition), transform var(--transition);
        }

        .feature-card:hover {
            border-color: var(--gold);
            transform: translateY(-6px);
        }

        .feature-icon {
            width: 72px;
            height: 72px;
            background: rgba(200,146,42,0.12);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 24px;
            font-size: 1.8rem;
            color: var(--gold);
            transition: background var(--transition);
        }

        .feature-card:hover .feature-icon {
            background: var(--gold);
            color: var(--white);
        }

        .feature-title {
            font-family: var(--font-heading);
            font-size: 1.2rem;
            color: var(--white);
            margin-bottom: 12px;
        }

        .feature-desc {
            font-size: 0.88rem;
            color: rgba(255,255,255,0.5);
            line-height: 1.7;
        }

        /* ══════════════════════════════════════════════════════════
           GALLERY
        ══════════════════════════════════════════════════════════ */
        #gallery {
            padding: var(--section-pad);
            background: var(--white);
        }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
            margin-top: 50px;
        }

        .gallery-item {
            position: relative;
            overflow: hidden;
            aspect-ratio: 4/3;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        .gallery-overlay {
            position: absolute;
            inset: 0;
            background: rgba(200,146,42,0);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.4s ease;
        }

        .gallery-overlay i {
            color: var(--white);
            font-size: 2rem;
            opacity: 0;
            transform: scale(0.5);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .gallery-item:hover img { transform: scale(1.08); }

        .gallery-item:hover .gallery-overlay {
            background: rgba(26,26,26,0.5);
        }

        .gallery-item:hover .gallery-overlay i {
            opacity: 1;
            transform: scale(1);
        }

        /* ══════════════════════════════════════════════════════════
           VIDEOS
        ══════════════════════════════════════════════════════════ */
        #videos {
            padding: var(--section-pad);
            background: var(--dark);
        }

        .videos-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            margin-top: 50px;
        }

        .video-card {
            position: relative;
            background: #111;
            overflow: hidden;
        }

        .video-card video {
            width: 100%;
            display: block;
            aspect-ratio: 9/16;
            object-fit: cover;
            cursor: pointer;
        }

        .video-card-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.35);
            transition: background var(--transition);
            pointer-events: none;
        }

        .video-card.playing .video-card-overlay {
            background: transparent;
        }

        .play-btn {
            width: 64px;
            height: 64px;
            background: var(--gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-size: 1.4rem;
            padding-left: 5px;
            transition: transform var(--transition), opacity var(--transition);
            pointer-events: none;
        }

        .video-card.playing .play-btn {
            opacity: 0;
            transform: scale(0.7);
        }

        .video-card:hover .play-btn {
            transform: scale(1.1);
        }

        .video-card.playing:hover .play-btn {
            opacity: 0;
            transform: scale(0.7);
        }

        @media (max-width: 768px) {
            .videos-grid { grid-template-columns: 1fr; }
        }

        @media (max-width: 1024px) and (min-width: 769px) {
            .videos-grid { grid-template-columns: 1fr 1fr; }
        }

        /* ══════════════════════════════════════════════════════════
           QUOTE / BANNER
        ══════════════════════════════════════════════════════════ */
        #quote-banner {
            padding: 110px 0;
            background-image: url('image/472236587_2345469702518363_23545663185074715_n.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            position: relative;
        }

        #quote-banner::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(10,10,10,0.72);
        }

        .quote-content {
            position: relative;
            text-align: center;
            color: var(--white);
        }

        .quote-mark {
            font-family: var(--font-heading);
            font-size: 5rem;
            color: var(--gold);
            line-height: 0.5;
            display: block;
            margin-bottom: 20px;
        }

        .quote-text {
            font-family: var(--font-heading);
            font-size: clamp(1.4rem, 3vw, 2.2rem);
            font-style: italic;
            line-height: 1.5;
            max-width: 780px;
            margin: 0 auto 22px;
        }

        .quote-author {
            font-size: 0.8rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--gold);
        }

        /* ══════════════════════════════════════════════════════════
           SERVICES
        ══════════════════════════════════════════════════════════ */
        #services {
            padding: var(--section-pad);
            background: var(--cream);
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            margin-top: 50px;
        }

        .service-card {
            background: var(--white);
            padding: 44px 36px;
            display: flex;
            gap: 24px;
            transition: box-shadow var(--transition), transform var(--transition);
        }

        .service-card:hover {
            box-shadow: 0 12px 40px rgba(0,0,0,0.1);
            transform: translateY(-4px);
        }

        .service-icon {
            font-size: 2.2rem;
            color: var(--gold);
            flex-shrink: 0;
            margin-top: 4px;
        }

        .service-info h3 {
            font-family: var(--font-heading);
            font-size: 1.25rem;
            color: var(--dark);
            margin-bottom: 10px;
        }

        .service-info p {
            font-size: 0.9rem;
            color: var(--text);
            line-height: 1.7;
        }

        /* ══════════════════════════════════════════════════════════
           CONTACT
        ══════════════════════════════════════════════════════════ */
        #contact {
            padding: var(--section-pad);
            background: var(--white);
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1.4fr;
            gap: 80px;
            align-items: start;
            margin-top: 60px;
        }

        .contact-info h3 {
            font-family: var(--font-heading);
            font-size: 1.5rem;
            color: var(--dark);
            margin-bottom: 20px;
        }

        .contact-info p {
            font-size: 0.95rem;
            line-height: 1.8;
            color: var(--text);
            margin-bottom: 30px;
        }

        .contact-details {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .contact-details li {
            display: flex;
            gap: 16px;
            align-items: flex-start;
        }

        .contact-details .ci-icon {
            width: 42px;
            height: 42px;
            background: var(--gold);
            color: var(--white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            flex-shrink: 0;
        }

        .contact-details .ci-text {
            padding-top: 4px;
        }

        .contact-details .ci-label {
            font-size: 0.7rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--gold);
            font-weight: 700;
        }

        .contact-details .ci-value {
            font-size: 0.95rem;
            color: var(--dark);
            font-weight: 400;
        }

        .contact-details a.ci-value:hover { color: var(--gold); }

        /* Social icons */
        .social-links {
            display: flex;
            gap: 12px;
            margin-top: 32px;
        }

        .social-links a {
            width: 40px;
            height: 40px;
            border: 1.5px solid #ddd;
            color: var(--charcoal);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            transition: background var(--transition), color var(--transition), border-color var(--transition);
        }

        .social-links a:hover {
            background: var(--gold);
            color: var(--white);
            border-color: var(--gold);
        }

        /* Form */
        .contact-form-wrap h3 {
            font-family: var(--font-heading);
            font-size: 1.5rem;
            color: var(--dark);
            margin-bottom: 24px;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--charcoal);
            margin-bottom: 8px;
        }

        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 14px 16px;
            border: 1.5px solid #e0d8ce;
            background: var(--white);
            font-family: var(--font-body);
            font-size: 0.95rem;
            color: var(--dark);
            outline: none;
            transition: border-color var(--transition);
            -webkit-appearance: none;
        }

        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            border-color: var(--gold);
        }

        .form-group textarea { height: 140px; resize: vertical; }

        .form-notice {
            padding: 14px 18px;
            margin-bottom: 22px;
            font-size: 0.9rem;
            border-left: 4px solid;
        }

        .form-notice.success {
            background: #f0faf0;
            border-color: #4caf50;
            color: #2e7d32;
        }

        .form-notice.error {
            background: #fff5f5;
            border-color: #f44336;
            color: #c62828;
        }

        /* ══════════════════════════════════════════════════════════
           FOOTER
        ══════════════════════════════════════════════════════════ */
        #footer {
            background: var(--dark);
            padding: 70px 0 0;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
            gap: 50px;
            padding-bottom: 50px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }

        .footer-brand .logo-text {
            font-family: var(--font-heading);
            font-size: 1.6rem;
            color: var(--white);
            font-style: italic;
        }

        .footer-brand .logo-sub {
            font-size: 0.6rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--gold);
            display: block;
            margin-top: 3px;
        }

        .footer-brand p {
            font-size: 0.88rem;
            color: rgba(255,255,255,0.45);
            line-height: 1.8;
            margin-top: 18px;
        }

        .footer-social {
            display: flex;
            gap: 10px;
            margin-top: 24px;
        }

        .footer-social a {
            width: 36px;
            height: 36px;
            border: 1px solid rgba(255,255,255,0.18);
            color: rgba(255,255,255,0.55);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            transition: background var(--transition), color var(--transition), border-color var(--transition);
        }

        .footer-social a:hover {
            background: var(--gold);
            color: var(--white);
            border-color: var(--gold);
        }

        .footer-col h4 {
            font-family: var(--font-body);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: var(--white);
            margin-bottom: 22px;
            padding-bottom: 12px;
            border-bottom: 2px solid var(--gold);
            display: inline-block;
        }

        .footer-links {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .footer-links a {
            font-size: 0.88rem;
            color: rgba(255,255,255,0.45);
            display: flex;
            align-items: center;
            gap: 8px;
            transition: color var(--transition);
        }

        .footer-links a::before {
            content: '—';
            font-size: 0.6rem;
            color: var(--gold);
        }

        .footer-links a:hover { color: var(--gold); }

        .footer-hours {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .footer-hours li {
            font-size: 0.85rem;
            color: rgba(255,255,255,0.45);
            display: flex;
            justify-content: space-between;
            gap: 12px;
        }

        .footer-hours .day { color: rgba(255,255,255,0.65); }

        .footer-bottom {
            padding: 22px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
        }

        .footer-bottom p {
            font-size: 0.78rem;
            color: rgba(255,255,255,0.3);
        }

        .footer-bottom a { color: var(--gold); }

        /* ══════════════════════════════════════════════════════════
           ANIMATIONS
        ══════════════════════════════════════════════════════════ */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(30px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        @keyframes bounce {
            0%, 100% { transform: translateX(-50%) translateY(0); }
            50%       { transform: translateX(-50%) translateY(10px); }
        }

        .reveal {
            opacity: 0;
            transform: translateY(28px);
            transition: opacity 0.7s ease, transform 0.7s ease;
        }

        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* ══════════════════════════════════════════════════════════
           RESPONSIVE
        ══════════════════════════════════════════════════════════ */
        @media (max-width: 1024px) {
            .features-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-grid   { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 768px) {
            :root { --section-pad: 70px 0; }

            .nav-menu {
                position: fixed;
                top: 0; left: 0; right: 0; bottom: 0;
                background: rgba(20,20,20,0.97);
                flex-direction: column;
                justify-content: center;
                gap: 28px;
                transform: translateX(100%);
                transition: transform var(--transition);
                z-index: 999;
            }

            .nav-menu.open { transform: translateX(0); }

            .nav-menu a {
                font-size: 1rem;
                letter-spacing: 3px;
            }

            .nav-toggle { display: flex; z-index: 1001; }

            .about-grid,
            .contact-grid    { grid-template-columns: 1fr; gap: 40px; }
            .about-images    { order: -1; }
            .about-img-badge { left: 0; }
            .menu-grid       { grid-template-columns: 1fr; }
            .menu-item:nth-child(odd) { border-right: none; }
            .gallery-grid    { grid-template-columns: 1fr 1fr; }
            .services-grid   { grid-template-columns: 1fr; }
            .features-grid   { grid-template-columns: 1fr 1fr; }
            .footer-grid     { grid-template-columns: 1fr; }
            .form-row        { grid-template-columns: 1fr; }
            .intro-strip-inner .strip-divider { display: none; }
        }

        @media (max-width: 480px) {
            .hero-title { font-size: 2.4rem; }
            .gallery-grid { grid-template-columns: 1fr; }
            .features-grid { grid-template-columns: 1fr; }
            .hero-buttons { flex-direction: column; align-items: center; }
        }
    </style>
</head>
<body>

<!-- ══════════════════════════════════════════════════════════
     HEADER
══════════════════════════════════════════════════════════ -->
<header id="header">
    <div class="container">
        <nav class="nav-inner">

            <a href="#hero" class="nav-logo">
                <span class="logo-text">Jaykusteaux</span>
                <span class="logo-sub">Custom Cuisine</span>
            </a>

            <ul class="nav-menu" id="navMenu">
                <li><a href="#hero"     class="active">Home</a></li>
                <li><a href="#about">Our Story</a></li>
                <li><a href="#menu">Menu</a></li>
                <li><a href="#gallery">Gallery</a></li>
                <li><a href="#videos">Videos</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
                <li class="nav-cta"><a href="tel:4692350950">Order Now</a></li>
            </ul>

            <div class="nav-toggle" id="navToggle" aria-label="Toggle menu">
                <span></span><span></span><span></span>
            </div>

        </nav>
    </div>
</header>


<!-- ══════════════════════════════════════════════════════════
     HERO
══════════════════════════════════════════════════════════ -->
<section id="hero">
    <div class="hero-bg"></div>
    <div class="hero-overlay"></div>

    <div class="hero-content">
        <span class="hero-script">Welcome to</span>
        <h1 class="hero-title">
            Down-South<br><em>Cajun &amp; Soul Food</em>
        </h1>
        <p class="hero-tagline">Arlington, Texas &nbsp;·&nbsp; Mobile Food Truck &nbsp;·&nbsp; Catering</p>
        <div class="hero-buttons">
            <a href="#menu" class="btn btn-filled">View Our Menu</a>
            <a href="#contact" class="btn btn-white">Book an Event</a>
        </div>
    </div>

    <div class="hero-scroll" onclick="document.getElementById('intro-strip').scrollIntoView({behavior:'smooth'})">
        <i class="fas fa-chevron-down"></i>
    </div>
</section>


<!-- ══════════════════════════════════════════════════════════
     EXPLAINER VIDEO
══════════════════════════════════════════════════════════ -->
<section id="explainer">
    <div class="container">
        <div class="explainer-inner">

            <div class="explainer-text reveal">
                <span class="section-label">Watch Our Story</span>
                <h2 class="section-title">Experience Jaykusteaux</h2>
                <div class="section-divider centered"></div>
                <p>A glimpse into the passion, flavors, and culture behind every dish we serve.</p>
            </div>

            <div class="explainer-video-wrap reveal">
                <video id="explainerVideo"
                       src="video/explainer.mp4"
                       poster="image/hero.jpg"
                       preload="metadata"
                       playsinline
                       controls></video>
                <div class="exp-overlay" id="expOverlay">
                    <div class="exp-play-btn">
                        <i class="fas fa-play"></i>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>


<!-- ══════════════════════════════════════════════════════════
     INTRO STRIP
══════════════════════════════════════════════════════════ -->
<div id="intro-strip">
    <div class="container">
        <div class="intro-strip-inner">
            <div class="strip-item">
                <i class="fas fa-fire"></i>
                <span>Authentic Cajun Recipes</span>
            </div>
            <div class="strip-divider"></div>
            <div class="strip-item">
                <i class="fas fa-leaf"></i>
                <span>Freshest Ingredients</span>
            </div>
            <div class="strip-divider"></div>
            <div class="strip-item">
                <i class="fas fa-truck"></i>
                <span>Mobile Food Truck</span>
            </div>
            <div class="strip-divider"></div>
            <div class="strip-item">
                <i class="fas fa-utensils"></i>
                <span>Event Catering</span>
            </div>
        </div>
    </div>
</div>


<!-- ══════════════════════════════════════════════════════════
     ABOUT / OUR STORY
══════════════════════════════════════════════════════════ -->
<section id="about">
    <div class="container">
        <div class="about-grid">

            <!-- Text -->
            <div class="about-text reveal">
                <span class="section-label">Who We Are</span>
                <h2 class="section-title">A Family Tradition<br>on Every Plate</h2>
                <div class="section-divider"></div>

                <p>
                    Jaykusteaux Custom Cuisine is a mobile food unit that brings the authentic flavors of the South
                    straight to Arlington, Texas. Our passion for cooking and dedication to quality ingredients have
                    made us a local favorite for down-south Cajun, barbecue, seafood, and soul food.
                </p>
                <p>
                    We are a family-owned and operated business, and we take pride in sharing our culinary traditions
                    with our community. Every dish is prepared with love, care, and a whole lot of flavor — because
                    food should always be a celebration.
                </p>

                <ul class="about-services">
                    <li>Mobile Food Truck</li>
                    <li>Private Dining</li>
                    <li>Event Catering</li>
                    <li>Meal Prep</li>
                    <li>Corporate Events</li>
                    <li>Birthday Parties</li>
                </ul>

                <a href="#contact" class="btn btn-filled">Get in Touch</a>
            </div>

            <!-- Image -->
            <div class="about-images reveal">
                <img src="image/481904600_2388658978199435_1527514876253270439_n.jpg"
                     alt="Fresh seafood platter from Jaykusteaux"
                     class="about-img-main"
                     loading="lazy">
                <div class="about-img-badge">
                    <strong>#1</strong>
                    <span>In&nbsp;Arlington</span>
                </div>
            </div>

        </div>
    </div>
</section>


<!-- ══════════════════════════════════════════════════════════
     MENU PREVIEW
══════════════════════════════════════════════════════════ -->
<section id="menu">
    <div class="container">
        <div class="menu-header text-center reveal">
            <span class="section-label">What We Serve</span>
            <h2 class="section-title">Our Signature Menu</h2>
            <div class="section-divider centered"></div>
            <p style="max-width:580px;margin:0 auto;color:#888;font-size:.95rem;">
                From smoky BBQ ribs to Cajun seafood platters, every item on our menu is crafted from
                scratch using authentic Southern techniques and the freshest ingredients.
            </p>

            <!-- Tabs -->
            <div class="menu-tabs">
                <button class="menu-tab active" data-tab="starters">Starters</button>
                <button class="menu-tab" data-tab="mains">Main Courses</button>
                <button class="menu-tab" data-tab="sides">Sides &amp; Drinks</button>
            </div>
        </div>

        <!-- Starters -->
        <div class="menu-panel active" id="tab-starters">
            <div class="menu-grid">
                <div class="menu-item reveal">
                    <span class="menu-num">01</span>
                    <div class="menu-details">
                        <div class="menu-name-row">
                            <span class="menu-name">Cajun Fries</span>
                            <span class="menu-dots"></span>
                            <span class="menu-price">Market Price</span>
                        </div>
                        <p class="menu-desc">Crispy golden fries dusted with our secret Cajun spice blend. Bold, smoky, and perfectly seasoned.</p>
                    </div>
                </div>
                <div class="menu-item reveal">
                    <span class="menu-num">02</span>
                    <div class="menu-details">
                        <div class="menu-name-row">
                            <span class="menu-name">Fried Pickles</span>
                            <span class="menu-dots"></span>
                            <span class="menu-price">Market Price</span>
                        </div>
                        <p class="menu-desc">Tangy dill pickles hand-battered and fried to a perfect golden brown. A Southern classic.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Mains -->
        <div class="menu-panel" id="tab-mains">
            <div class="menu-grid">
                <div class="menu-item reveal">
                    <span class="menu-num">01</span>
                    <div class="menu-details">
                        <div class="menu-name-row">
                            <span class="menu-name">Smoked Oxtails</span>
                            <span class="menu-dots"></span>
                            <span class="menu-price">Market Price</span>
                        </div>
                        <p class="menu-desc">Our signature dish. Tender, fall-off-the-bone oxtails slow-smoked to perfection with our house rub.</p>
                    </div>
                </div>
                <div class="menu-item reveal">
                    <span class="menu-num">02</span>
                    <div class="menu-details">
                        <div class="menu-name-row">
                            <span class="menu-name">Seafood Platter</span>
                            <span class="menu-dots"></span>
                            <span class="menu-price">Market Price</span>
                        </div>
                        <p class="menu-desc">Fried shrimp, catfish, and oysters served with your choice of side. Fresh, generous, and unforgettable.</p>
                    </div>
                </div>
                <div class="menu-item reveal">
                    <span class="menu-num">03</span>
                    <div class="menu-details">
                        <div class="menu-name-row">
                            <span class="menu-name">BBQ Ribs</span>
                            <span class="menu-dots"></span>
                            <span class="menu-price">Market Price</span>
                        </div>
                        <p class="menu-desc">Slow-smoked pork ribs smothered in our homemade barbecue sauce. Rich, smoky, and fall-off-the-bone tender.</p>
                    </div>
                </div>
                <div class="menu-item reveal">
                    <span class="menu-num">04</span>
                    <div class="menu-details">
                        <div class="menu-name-row">
                            <span class="menu-name">Jambalaya</span>
                            <span class="menu-dots"></span>
                            <span class="menu-price">Market Price</span>
                        </div>
                        <p class="menu-desc">Classic Louisiana rice dish loaded with chicken, andouille sausage, and plump Gulf shrimp.</p>
                    </div>
                </div>
                <div class="menu-item reveal">
                    <span class="menu-num">05</span>
                    <div class="menu-details">
                        <div class="menu-name-row">
                            <span class="menu-name">Fried Chicken</span>
                            <span class="menu-dots"></span>
                            <span class="menu-price">Market Price</span>
                        </div>
                        <p class="menu-desc">Crispy, juicy Southern-style fried chicken seasoned with our down-south blend. A crowd favorite.</p>
                    </div>
                </div>
                <div class="menu-item reveal">
                    <span class="menu-num">06</span>
                    <div class="menu-details">
                        <div class="menu-name-row">
                            <span class="menu-name">Custom Cajun Creation</span>
                            <span class="menu-dots"></span>
                            <span class="menu-price">Ask Us</span>
                        </div>
                        <p class="menu-desc">Let us build a dish just for you — your choice of protein, spice level, and sides. Truly custom.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sides & Drinks -->
        <div class="menu-panel" id="tab-sides">
            <div class="menu-grid">
                <div class="menu-item reveal">
                    <span class="menu-num">01</span>
                    <div class="menu-details">
                        <div class="menu-name-row">
                            <span class="menu-name">Mac &amp; Cheese</span>
                            <span class="menu-dots"></span>
                            <span class="menu-price">Market Price</span>
                        </div>
                        <p class="menu-desc">Creamy, baked Southern-style macaroni and cheese. Rich and soul-satisfying.</p>
                    </div>
                </div>
                <div class="menu-item reveal">
                    <span class="menu-num">02</span>
                    <div class="menu-details">
                        <div class="menu-name-row">
                            <span class="menu-name">Collard Greens</span>
                            <span class="menu-dots"></span>
                            <span class="menu-price">Market Price</span>
                        </div>
                        <p class="menu-desc">Slow-cooked collard greens seasoned low and slow. A true Southern staple.</p>
                    </div>
                </div>
                <div class="menu-item reveal">
                    <span class="menu-num">03</span>
                    <div class="menu-details">
                        <div class="menu-name-row">
                            <span class="menu-name">Cornbread</span>
                            <span class="menu-dots"></span>
                            <span class="menu-price">Market Price</span>
                        </div>
                        <p class="menu-desc">Fluffy, golden cornbread baked fresh. Perfect with every plate.</p>
                    </div>
                </div>
                <div class="menu-item reveal">
                    <span class="menu-num">04</span>
                    <div class="menu-details">
                        <div class="menu-name-row">
                            <span class="menu-name">Dirty Rice</span>
                            <span class="menu-dots"></span>
                            <span class="menu-price">Market Price</span>
                        </div>
                        <p class="menu-desc">Savory Cajun rice cooked with seasoned ground meat and the holy trinity. Full of flavor.</p>
                    </div>
                </div>
                <div class="menu-item reveal">
                    <span class="menu-num">05</span>
                    <div class="menu-details">
                        <div class="menu-name-row">
                            <span class="menu-name">Sweet Tea &amp; Lemonade</span>
                            <span class="menu-dots"></span>
                            <span class="menu-price">Market Price</span>
                        </div>
                        <p class="menu-desc">House-brewed sweet tea and fresh squeezed lemonade. The perfect Southern pairing.</p>
                    </div>
                </div>
                <div class="menu-item reveal">
                    <span class="menu-num">06</span>
                    <div class="menu-details">
                        <div class="menu-name-row">
                            <span class="menu-name">Soft Drinks</span>
                            <span class="menu-dots"></span>
                            <span class="menu-price">Market Price</span>
                        </div>
                        <p class="menu-desc">Assorted canned and bottled soft drinks available at the truck.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="menu-cta reveal">
            <a href="#contact" class="btn btn-filled">Inquire About Full Menu &amp; Pricing</a>
        </div>
    </div>
</section>


<!-- ══════════════════════════════════════════════════════════
     FEATURES
══════════════════════════════════════════════════════════ -->
<section id="features">
    <div class="container">
        <div class="text-center reveal" style="margin-bottom:60px;">
            <span class="section-label" style="color:var(--gold);">Why Choose Us</span>
            <h2 class="section-title" style="color:var(--white);">The Jaykusteaux Difference</h2>
            <div class="section-divider centered"></div>
        </div>
        <div class="features-grid">
            <div class="feature-card reveal">
                <div class="feature-icon"><i class="fas fa-seedling"></i></div>
                <h3 class="feature-title">Fresh Ingredients</h3>
                <p class="feature-desc">We source only the freshest, highest-quality ingredients to ensure every dish bursts with authentic Southern flavor.</p>
            </div>
            <div class="feature-card reveal">
                <div class="feature-icon"><i class="fas fa-fire-flame-curved"></i></div>
                <h3 class="feature-title">Authentic Cajun</h3>
                <p class="feature-desc">Our recipes are rooted in deep Southern tradition — bold spices, slow smoking, and techniques passed down through generations.</p>
            </div>
            <div class="feature-card reveal">
                <div class="feature-icon"><i class="fas fa-star"></i></div>
                <h3 class="feature-title">Custom Creations</h3>
                <p class="feature-desc">Every order can be personalized to your preferences. Your protein, your spice level, your experience — truly custom cuisine.</p>
            </div>
            <div class="feature-card reveal">
                <div class="feature-icon"><i class="fas fa-heart"></i></div>
                <h3 class="feature-title">Family Owned</h3>
                <p class="feature-desc">We are a family-run business rooted in community. When you eat with us, you're part of the family.</p>
            </div>
        </div>
    </div>
</section>


<!-- ══════════════════════════════════════════════════════════
     GALLERY
══════════════════════════════════════════════════════════ -->
<section id="gallery">
    <div class="container">
        <div class="text-center reveal">
            <span class="section-label">Fresh From the Truck</span>
            <h2 class="section-title">A Taste in Every Photo</h2>
            <div class="section-divider centered"></div>
        </div>
    </div>
    <div class="gallery-grid reveal">
        <div class="gallery-item">
            <img src="image/480774019_2381563298909003_3934850191041575999_n.jpg" alt="Jaykusteaux food" loading="lazy">
            <div class="gallery-overlay"><i class="fas fa-expand"></i></div>
        </div>
        <div class="gallery-item">
            <img src="image/482320636_1191822312943192_452351814879665735_n.jpg" alt="Jaykusteaux food" loading="lazy">
            <div class="gallery-overlay"><i class="fas fa-expand"></i></div>
        </div>
        <div class="gallery-item">
            <img src="image/104200925_1154981781567167_5689110260224503244_n.jpg" alt="Jaykusteaux food" loading="lazy">
            <div class="gallery-overlay"><i class="fas fa-expand"></i></div>
        </div>
    </div>
</section>


<!-- ══════════════════════════════════════════════════════════
     VIDEOS
══════════════════════════════════════════════════════════ -->
<section id="videos">
    <div class="container">
        <div class="text-center reveal">
            <span class="section-label" style="color:var(--gold);">Watch Us Cook</span>
            <h2 class="section-title" style="color:var(--white);">See It. Smell It. Taste It.</h2>
            <div class="section-divider centered"></div>
            <p style="max-width:560px;margin:0 auto;color:rgba(255,255,255,.45);font-size:.95rem;">
                From the smoker to your plate — watch us bring down-south flavors to life, one dish at a time.
            </p>
        </div>

        <div class="videos-grid">

            <div class="video-card reveal" onclick="toggleVideo(this)">
                <video data-src="video/AQMls3mVRHcK2JZ7OOZE2efJehP09bBQNgfHXIP6gl80piFywD6ykhPk99qSYrtq5v91-H89cPWxC8IeMshPQIh7%20(1).mp4"
                       preload="none" playsinline loop muted></video>
                <div class="video-card-overlay">
                    <div class="play-btn"><i class="fas fa-play"></i></div>
                </div>
            </div>

            <div class="video-card reveal" onclick="toggleVideo(this)">
                <video data-src="video/AQOl8MS63VsBCJDO7xfx72aLq3Q2lFAHlrqwD52nrmaRcAhdiZB8H-oMZMs-hv8SJnruES9zuZMQJZuyY6fFnH33%20(1).mp4"
                       preload="none" playsinline loop muted></video>
                <div class="video-card-overlay">
                    <div class="play-btn"><i class="fas fa-play"></i></div>
                </div>
            </div>

            <div class="video-card reveal" onclick="toggleVideo(this)">
                <video data-src="video/AQOEDESRdbdFEOQvr6uQlbOEpnLMW2ngw1e16yRQFrqeWz3wE6wXyAgvhFHyn96sxPVPHxF22Olwdw9eYR3Gynl8%20(1).mp4"
                       preload="none" playsinline loop muted></video>
                <div class="video-card-overlay">
                    <div class="play-btn"><i class="fas fa-play"></i></div>
                </div>
            </div>

        </div>
    </div>
</section>


<!-- ══════════════════════════════════════════════════════════
     QUOTE BANNER
══════════════════════════════════════════════════════════ -->
<section id="quote-banner">
    <div class="container">
        <div class="quote-content reveal">
            <span class="quote-mark">&ldquo;</span>
            <p class="quote-text">
                Food should be more than just sustenance — it should be a celebration of flavor,
                culture, and community.
            </p>
            <span class="quote-author">— Jaykusteaux Custom Cuisine</span>
        </div>
    </div>
</section>


<!-- ══════════════════════════════════════════════════════════
     SERVICES
══════════════════════════════════════════════════════════ -->
<section id="services">
    <div class="container">
        <div class="text-center reveal">
            <span class="section-label">What We Offer</span>
            <h2 class="section-title">Our Services</h2>
            <div class="section-divider centered"></div>
        </div>
        <div class="services-grid">
            <div class="service-card reveal">
                <div class="service-icon"><i class="fas fa-truck"></i></div>
                <div class="service-info">
                    <h3>Mobile Food Truck</h3>
                    <p>Find us rolling through Arlington, TX with a full menu of authentic down-south Cajun, BBQ, seafood, and soul food. Follow our social media for daily locations.</p>
                </div>
            </div>
            <div class="service-card reveal">
                <div class="service-icon"><i class="fas fa-champagne-glasses"></i></div>
                <div class="service-info">
                    <h3>Event Catering</h3>
                    <p>We cater events of all sizes — from intimate family gatherings to large corporate functions. Let us bring the flavor to your next celebration.</p>
                </div>
            </div>
            <div class="service-card reveal">
                <div class="service-icon"><i class="fas fa-utensils"></i></div>
                <div class="service-info">
                    <h3>Private Dining</h3>
                    <p>Enjoy a personalized dining experience with a custom menu crafted just for you. Perfect for date nights, family dinners, and special occasions.</p>
                </div>
            </div>
            <div class="service-card reveal">
                <div class="service-icon"><i class="fas fa-box-open"></i></div>
                <div class="service-info">
                    <h3>Meal Prep</h3>
                    <p>Let us take the hassle out of weeknight cooking. Our convenient and delicious meal prep options keep your fridge stocked with Southern goodness.</p>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- ══════════════════════════════════════════════════════════
     CONTACT
══════════════════════════════════════════════════════════ -->
<section id="contact">
    <div class="container">
        <div class="text-center reveal">
            <span class="section-label">Reach Out</span>
            <h2 class="section-title">Get in Touch</h2>
            <div class="section-divider centered"></div>
        </div>

        <div class="contact-grid">

            <!-- Info -->
            <div class="contact-info reveal">
                <h3>Let's Make It Happen</h3>
                <p>
                    Whether you have a question about our menu, want to book us for an event, or just want to
                    say hello — we'd love to hear from you. Don't hesitate to reach out!
                </p>

                <ul class="contact-details">
                    <li>
                        <div class="ci-icon"><i class="fas fa-phone"></i></div>
                        <div class="ci-text">
                            <span class="ci-label">Phone</span>
                            <a href="tel:4692350950" class="ci-value">(469) 235-0950</a>
                        </div>
                    </li>
                    <li>
                        <div class="ci-icon"><i class="fas fa-envelope"></i></div>
                        <div class="ci-text">
                            <span class="ci-label">Email</span>
                            <a href="mailto:Jaykusteaux@icloud.com" class="ci-value">Jaykusteaux@icloud.com</a>
                        </div>
                    </li>
                    <li>
                        <div class="ci-icon"><i class="fas fa-map-pin"></i></div>
                        <div class="ci-text">
                            <span class="ci-label">Base Location</span>
                            <span class="ci-value">2879 W. Pioneer Pkwy, Arlington, TX</span>
                        </div>
                    </li>
                </ul>

                <div class="social-links">
                    <a href="https://www.facebook.com/JaykusteauxLLC" target="_blank" rel="noopener" aria-label="Facebook">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="https://www.threads.com/@jaykusteaux_cuisine" target="_blank" rel="noopener" aria-label="Threads">
                        <i class="fab fa-threads"></i>
                    </a>
                    <a href="https://www.instagram.com/jaykusteaux_cuisine" target="_blank" rel="noopener" aria-label="Instagram">
                        <i class="fab fa-instagram"></i>
                    </a>
                </div>
            </div>

            <!-- Form -->
            <div class="contact-form-wrap reveal">
                <h3>Send Us a Message</h3>

                <?php if ($mail_sent): ?>
                    <div class="form-notice success">
                        <strong>Message sent!</strong> Thank you for reaching out. We'll get back to you shortly.
                    </div>
                <?php elseif ($mail_error): ?>
                    <div class="form-notice error">
                        Something went wrong sending your message. Please call us directly at (469) 235-0950.
                    </div>
                <?php elseif (!empty($form_errors)): ?>
                    <div class="form-notice error">
                        <?php foreach ($form_errors as $err): ?>
                            <?= htmlspecialchars($err) ?><br>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>

                <form method="POST" action="#contact" novalidate>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="name">Your Name *</label>
                            <input type="text" id="name" name="name" required
                                   placeholder="John Smith"
                                   value="<?= htmlspecialchars($_POST['name'] ?? '') ?>">
                        </div>
                        <div class="form-group">
                            <label for="email">Email Address *</label>
                            <input type="email" id="email" name="email" required
                                   placeholder="you@example.com"
                                   value="<?= htmlspecialchars($_POST['email'] ?? '') ?>">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="phone">Phone Number</label>
                            <input type="tel" id="phone" name="phone"
                                   placeholder="(000) 000-0000"
                                   value="<?= htmlspecialchars($_POST['phone'] ?? '') ?>">
                        </div>
                        <div class="form-group">
                            <label for="subject">Subject</label>
                            <select id="subject" name="subject">
                                <option value="">Select a topic…</option>
                                <option value="Catering Inquiry"   <?= (($_POST['subject'] ?? '') === 'Catering Inquiry')   ? 'selected' : '' ?>>Catering Inquiry</option>
                                <option value="Private Dining"     <?= (($_POST['subject'] ?? '') === 'Private Dining')     ? 'selected' : '' ?>>Private Dining</option>
                                <option value="Menu Question"      <?= (($_POST['subject'] ?? '') === 'Menu Question')      ? 'selected' : '' ?>>Menu Question</option>
                                <option value="Event Booking"      <?= (($_POST['subject'] ?? '') === 'Event Booking')      ? 'selected' : '' ?>>Event Booking</option>
                                <option value="General Inquiry"    <?= (($_POST['subject'] ?? '') === 'General Inquiry')    ? 'selected' : '' ?>>General Inquiry</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="message">Your Message *</label>
                        <textarea id="message" name="message" required
                                  placeholder="Tell us how we can help…"><?= htmlspecialchars($_POST['message'] ?? '') ?></textarea>
                    </div>
                    <button type="submit" name="contact_submit" class="btn btn-filled" style="width:100%;justify-content:center;display:block;font-size:.8rem;">
                        Send Message &nbsp;<i class="fas fa-paper-plane"></i>
                    </button>
                </form>
            </div>

        </div>
    </div>
</section>


<!-- ══════════════════════════════════════════════════════════
     FOOTER
══════════════════════════════════════════════════════════ -->
<footer id="footer">
    <div class="container">
        <div class="footer-grid">

            <!-- Brand -->
            <div class="footer-brand">
                <span class="logo-text">Jaykusteaux</span>
                <span class="logo-sub">Custom Cuisine</span>
                <p>
                    Bringing the authentic flavors of the Dirty South to Arlington, Texas.
                    Mobile food truck · catering · private dining · meal prep.
                </p>
                <div class="footer-social">
                    <a href="https://www.facebook.com/JaykusteauxLLC" target="_blank" rel="noopener" aria-label="Facebook">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="https://www.threads.com/@jaykusteaux_cuisine" target="_blank" rel="noopener" aria-label="Threads">
                        <i class="fab fa-threads"></i>
                    </a>
                    <a href="https://www.instagram.com/jaykusteaux_cuisine" target="_blank" rel="noopener" aria-label="Instagram">
                        <i class="fab fa-instagram"></i>
                    </a>
                </div>
            </div>

            <!-- Quick Links -->
            <div class="footer-col">
                <h4>Quick Links</h4>
                <ul class="footer-links">
                    <li><a href="#hero">Home</a></li>
                    <li><a href="#about">Our Story</a></li>
                    <li><a href="#menu">Menu</a></li>
                    <li><a href="#gallery">Gallery</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>

            <!-- Hours -->
            <div class="footer-col">
                <h4>Hours</h4>
                <ul class="footer-hours">
                    <li><span class="day">Mon – Fri</span><span>11am – 8pm</span></li>
                    <li><span class="day">Saturday</span><span>10am – 9pm</span></li>
                    <li><span class="day">Sunday</span><span>11am – 6pm</span></li>
                    <li style="margin-top:8px;font-size:.8rem;color:rgba(255,255,255,.35);grid-column:1/-1;">
                        * Hours vary by location. Follow us on social media for daily updates.
                    </li>
                </ul>
            </div>

            <!-- Contact -->
            <div class="footer-col">
                <h4>Contact</h4>
                <ul class="footer-links">
                    <li>
                        <a href="tel:4692350950">
                            <i class="fas fa-phone" style="font-size:.7rem;color:var(--gold);margin-right:4px;"></i>
                            (469) 235-0950
                        </a>
                    </li>
                    <li>
                        <a href="mailto:Jaykusteaux@icloud.com">
                            <i class="fas fa-envelope" style="font-size:.7rem;color:var(--gold);margin-right:4px;"></i>
                            Jaykusteaux@icloud.com
                        </a>
                    </li>
                    <li>
                        <a href="https://maps.google.com/?q=2879+W+Pioneer+Pkwy+Arlington+TX" target="_blank" rel="noopener">
                            <i class="fas fa-map-pin" style="font-size:.7rem;color:var(--gold);margin-right:4px;"></i>
                            2879 W. Pioneer Pkwy, Arlington, TX
                        </a>
                    </li>
                </ul>
            </div>

        </div>

        <div class="footer-bottom">
            <p>&copy; <?= date('Y') ?> Jaykusteaux Custom Cuisine. All rights reserved.</p>
            <p>Proudly serving Arlington, TX &amp; surrounding areas.</p>
        </div>
    </div>
</footer>


<!-- ══════════════════════════════════════════════════════════
     JAVASCRIPT
══════════════════════════════════════════════════════════ -->
<script>
(function () {
    'use strict';

    // ── Sticky Header ──────────────────────────────────────
    const header = document.getElementById('header');
    window.addEventListener('scroll', function () {
        header.classList.toggle('scrolled', window.scrollY > 60);
    }, { passive: true });

    // ── Hero Ken-Burns ─────────────────────────────────────
    document.getElementById('hero').classList.add('loaded');

    // ── Explainer Video overlay ──────────────────────────────
    (function () {
        var overlay = document.getElementById('expOverlay');
        var video   = document.getElementById('explainerVideo');
        if (!overlay || !video) return;

        // Clicking on the play button starts the video
        var playBtn = overlay.querySelector('.exp-play-btn');
        if (playBtn) {
            // Prevent the click from propagating just in case
            playBtn.addEventListener('click', function (e) {
                e.stopPropagation();
                video.play();
            });
        }

        // Hide overlay while playing so native controls are fully visible
        video.addEventListener('play', function () {
            overlay.classList.add('hidden');
        });

        // Show overlay when paused or ended
        video.addEventListener('pause', function () {
            overlay.classList.remove('hidden');
        });
        video.addEventListener('ended', function () {
            overlay.classList.remove('hidden');
        });
    })();

    // ── Lazy-load videos when they enter the viewport ────────
    (function () {
        var lazyVideos = document.querySelectorAll('video[data-src]');
        if (!lazyVideos.length) return;

        var observer = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                    var v = entry.target;
                    v.src = v.dataset.src;
                    v.load();
                    observer.unobserve(v);
                }
            });
        }, { rootMargin: '200px' });

        lazyVideos.forEach(function (v) { observer.observe(v); });
    })();



    // ── Mobile Nav ─────────────────────────────────────────
    const toggle = document.getElementById('navToggle');
    const menu   = document.getElementById('navMenu');

    toggle.addEventListener('click', function () {
        menu.classList.toggle('open');
    });

    // Close on link click
    menu.querySelectorAll('a').forEach(function (link) {
        link.addEventListener('click', function () {
            menu.classList.remove('open');
        });
    });

    // ── Active nav on scroll ───────────────────────────────
    const sections = document.querySelectorAll('section[id], #hero');
    const navLinks = document.querySelectorAll('.nav-menu a');

    function setActiveNav() {
        let current = '';
        sections.forEach(function (sec) {
            if (window.scrollY >= sec.offsetTop - 120) {
                current = sec.getAttribute('id');
            }
        });
        navLinks.forEach(function (a) {
            a.classList.remove('active');
            if (a.getAttribute('href') === '#' + current) {
                a.classList.add('active');
            }
        });
    }

    window.addEventListener('scroll', setActiveNav, { passive: true });

    // ── Menu Tabs ──────────────────────────────────────────
    document.querySelectorAll('.menu-tab').forEach(function (btn) {
        btn.addEventListener('click', function () {
            document.querySelectorAll('.menu-tab').forEach(function (b) { b.classList.remove('active'); });
            document.querySelectorAll('.menu-panel').forEach(function (p) { p.classList.remove('active'); });
            btn.classList.add('active');
            var target = document.getElementById('tab-' + btn.dataset.tab);
            if (target) target.classList.add('active');
        });
    });

    // ── Scroll Reveal ──────────────────────────────────────
    var revealEls = document.querySelectorAll('.reveal');

    var observer = new IntersectionObserver(function (entries) {
        entries.forEach(function (entry) {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.12 });

    revealEls.forEach(function (el) { observer.observe(el); });

    // ── Video Toggle ───────────────────────────────────────
    window.toggleVideo = function (card) {
        var video = card.querySelector('video');
        if (video.paused) {
            // Pause all other videos first
            document.querySelectorAll('.video-card video').forEach(function (v) {
                v.pause();
                v.closest('.video-card').classList.remove('playing');
            });
            video.muted = false;
            video.play();
            card.classList.add('playing');
        } else {
            video.pause();
            card.classList.remove('playing');
        }
    };

})();
</script>

</body>
</html>
