/* =============================================
   Golden Krust Newburgh Catering - Modern Styles
   ============================================= */

/* =============================================
   Custom Font Faces - Golden Krust Brand Fonts
   ============================================= */

/* Brush Up - Heading Font */
@font-face {
    font-family: 'Brush Up';
    src: url('../fonts/BrushUp.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Colby - Body Font Family */
@font-face {
    font-family: 'Colby';
    src: url('../fonts/Colby-Regular.otf') format('opentype'),
         url('../fonts/Jason%20Vandenberg%20-%20Colby%20Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Colby';
    src: url('../fonts/Colby-RegularItalic.otf') format('opentype'),
         url('../fonts/Jason%20Vandenberg%20-%20Colby%20Regular%20Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Colby';
    src: url('../fonts/Colby-Light.otf') format('opentype'),
         url('../fonts/Jason%20Vandenberg%20-%20Colby%20Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Colby';
    src: url('../fonts/Colby-Medium.otf') format('opentype'),
         url('../fonts/Jason%20Vandenberg%20-%20Colby%20Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Colby';
    src: url('../fonts/Colby-Bold.otf') format('opentype'),
         url('../fonts/Colby-Bold.ttf') format('truetype'),
         url('../fonts/Jason%20Vandenberg%20-%20Colby%20Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Colby';
    src: url('../fonts/Colby-Black.otf') format('opentype'),
         url('../fonts/Jason%20Vandenberg%20-%20Colby%20Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* CSS Variables - Caribbean Island Theme */
:root {
    /* Caribbean Color Palette */
    --caribbean-green: #009b3a;
    --caribbean-green-dark: #007a2e;
    --caribbean-green-light: #00c44a;
    --caribbean-gold: #fed100;
    --caribbean-gold-dark: #e6bc00;
    --caribbean-gold-light: #ffe44d;
    --caribbean-navy: #076423;
    --caribbean-navy-light: #098a2f;
    --caribbean-navy-dark: #054a1a;
    --caribbean-teal: #065c20;

    /* Theme Stripe Colors */
    --stripe-green: #076423;
    --stripe-cream: #f5f0e6;
    --stripe-teal: #106D7C;
    --stripe-navy: #07354F;

    /* Primary & Secondary */
    --primary: var(--caribbean-gold);
    --primary-dark: var(--caribbean-gold-dark);
    --primary-light: var(--caribbean-gold-light);
    --secondary: var(--caribbean-navy);
    --secondary-light: var(--caribbean-navy-light);
    --secondary-dark: var(--caribbean-navy-dark);
    --accent: var(--caribbean-green);
    --accent-dark: var(--caribbean-green-dark);
    --accent-light: var(--caribbean-green-light);
    --teal: var(--caribbean-teal);

    --white: #ffffff;
    --off-white: #faf9f6;
    --cream: #f5f0e6;
    --gray-100: #f1f3f5;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;

    --font-heading: 'Brush Up', Helvetica, Arial, Lucida, sans-serif;
    --font-body: 'Colby', Helvetica, Arial, Lucida, sans-serif;

    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
    --shadow-xl: 0 20px 50px rgba(0,0,0,0.15);
    --shadow-gold: 0 8px 30px rgba(254, 209, 0, 0.3);
    --shadow-green: 0 8px 30px rgba(0, 155, 58, 0.3);

    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--gray-800);
    background-color: var(--cream);
    overflow-x: hidden;
}

/* Artistic Background Pattern */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(0, 155, 58, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(254, 209, 0, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

ul {
    list-style: none;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    color: var(--gray-900);
}

h1 { font-size: clamp(2rem, 4vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: clamp(1.125rem, 2vw, 1.5rem); }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-base);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary {
    background: var(--primary);
    color: var(--secondary);
    border-color: var(--primary);
    font-weight: 600;
}

.btn-primary:hover {
    background: var(--primary-light);
    border-color: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

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

.btn-secondary:hover {
    background: var(--white);
    color: var(--secondary);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
}

.btn-outline:hover {
    background: var(--accent);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-green);
}

.btn-gold {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: var(--secondary);
    border-color: var(--primary);
    font-weight: 600;
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

.btn-green {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
    font-weight: 600;
}

.btn-green:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-green);
}

.btn-full {
    width: 100%;
}

/* =============================================
   Navigation
   ============================================= */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 15px 0;
    transition: all var(--transition-base);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    padding: 10px 0;
    box-shadow: var(--shadow-md);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 40px;
}

.logo {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo img {
    height: 45px;
    width: auto;
    transition: height var(--transition-base);
}

.logo-location {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--secondary);
    margin-top: 2px;
}

.navbar.scrolled .logo img {
    height: 38px;
}

.navbar.scrolled .logo-location {
    font-size: 0.55rem;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-left: 0;
}

.nav-menu a {
    color: var(--secondary);
    font-weight: 500;
    font-size: 0.9rem;
    position: relative;
    padding: 5px 0;
    transition: color var(--transition-fast);
}

.nav-menu a:hover {
    color: var(--accent);
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width var(--transition-base);
}

.nav-menu a:hover::after {
    width: 100%;
}

.nav-cta {
    background: var(--primary);
    color: var(--secondary) !important;
    padding: 10px 20px !important;
    border-radius: var(--radius-md);
    font-weight: 600;
    text-shadow: none !important;
    margin-left: auto;
}

.nav-cta::after {
    display: none !important;
}

.nav-cta:hover {
    background: var(--primary-light);
    box-shadow: var(--shadow-gold);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    margin-left: auto;
}

.nav-toggle span {
    width: 25px;
    height: 2px;
    background: var(--secondary);
    transition: all var(--transition-base);
}

/* =============================================
   Hero Section with Parallax
   ============================================= */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero.parallax {
    background-image: url('../images/Golden-Krust-240.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

@supports (-webkit-touch-callout: none) {
    .hero.parallax {
        background-attachment: scroll;
    }
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Semi-transparent dark overlay */
    background: rgba(0, 0, 0, 0.6);
}

/* Hide diagonal accent lines */
.hero-overlay::before,
.hero-overlay::after {
    display: none;
}

/* Hide animated floating particles */
.hero-particles {
    display: none;
}

.hero-particles span {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    opacity: 0.3;
    animation: floatParticle 15s infinite ease-in-out;
}

.hero-particles span:nth-child(1) {
    left: 10%;
    top: 20%;
    animation-delay: 0s;
    animation-duration: 12s;
}

.hero-particles span:nth-child(2) {
    left: 20%;
    top: 60%;
    width: 6px;
    height: 6px;
    background: var(--accent);
    animation-delay: 2s;
    animation-duration: 18s;
}

.hero-particles span:nth-child(3) {
    left: 35%;
    top: 40%;
    width: 8px;
    height: 8px;
    animation-delay: 4s;
    animation-duration: 14s;
}

.hero-particles span:nth-child(4) {
    left: 5%;
    top: 80%;
    width: 12px;
    height: 12px;
    background: var(--accent);
    animation-delay: 1s;
    animation-duration: 16s;
}

.hero-particles span:nth-child(5) {
    left: 25%;
    top: 30%;
    width: 5px;
    height: 5px;
    animation-delay: 3s;
    animation-duration: 20s;
}

.hero-particles span:nth-child(6) {
    left: 40%;
    top: 70%;
    width: 7px;
    height: 7px;
    background: var(--accent);
    animation-delay: 5s;
    animation-duration: 13s;
}

@keyframes floatParticle {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-30px) translateX(15px) scale(1.1);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-15px) translateX(-10px) scale(0.9);
        opacity: 0.4;
    }
    75% {
        transform: translateY(-40px) translateX(20px) scale(1.05);
        opacity: 0.35;
    }
}

/* Hide shimmer effect */
.hero-shimmer {
    display: none;
}

@keyframes shimmerMove {
    0%, 100% {
        opacity: 0;
        transform: translateX(-5%);
    }
    50% {
        opacity: 1;
        transform: translateX(5%);
    }
}

/* Hide glow effect */
.hero-glow {
    display: none;
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.3;
        filter: blur(8px);
    }
    50% {
        opacity: 0.7;
        filter: blur(15px);
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--white);
    padding: 0 20px;
    animation: fadeInUp 1s ease-out;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 35px;
}

.hero-main {
    display: none;
}

.hero-catering {
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 700;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 10px;
    line-height: 1;
    animation: fadeInUp 1s ease-out 0.4s backwards;
    text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.3);
    position: relative;
}

.hero-catering::after {
    display: none;
}

.hero-slogan {
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(0.85rem, 1.8vw, 1.1rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);
    margin-top: 10px;
    animation: fadeInUp 1s ease-out 0.6s backwards;
    letter-spacing: 0.3px;
    line-height: 1.5;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.price-highlight {
    color: #FFD700;
    font-weight: 700;
    font-style: normal;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease-out 0.8s backwards;
}

/* Hero section button overrides */
.hero-buttons .btn-primary {
    background: var(--primary);
    color: var(--secondary);
    border: 2px solid var(--primary);
}

.hero-buttons .btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.hero-buttons .btn-secondary {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}

.hero-buttons .btn-secondary:hover {
    background: var(--white);
    color: var(--secondary);
}

.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: var(--white);
    opacity: 0.7;
    animation: bounce 2s infinite;
}

.scroll-indicator span {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.scroll-arrow {
    width: 20px;
    height: 20px;
    margin: 0 auto;
    border-right: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    transform: rotate(45deg);
}

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

/* =============================================
   Features Section
   ============================================= */
.features {
    padding: 80px 0;
    background: var(--stripe-cream);
    margin-top: 0;
    position: relative;
    z-index: 10;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    background: var(--white);
    padding: 50px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
}

/* Artistic corner accents */
.features-grid::before,
.features-grid::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border: 4px solid var(--primary);
    opacity: 0.2;
}

.features-grid::before {
    top: -20px;
    left: -20px;
    border-right: none;
    border-bottom: none;
}

.features-grid::after {
    bottom: -20px;
    right: -20px;
    border-left: none;
    border-top: none;
}

.feature-card {
    text-align: center;
    padding: 30px 20px;
    transition: transform var(--transition-base);
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.feature-icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px dashed var(--primary);
    animation: spin 20s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.feature-icon svg {
    width: 32px;
    height: 32px;
    color: var(--white);
}

.feature-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.feature-card p {
    color: var(--gray-600);
    font-size: 0.95rem;
}

/* =============================================
   Visual Menu Showcase Section
   ============================================= */
.menu-showcase-section {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--stripe-cream) 0%, var(--white) 50%, var(--stripe-cream) 100%);
    position: relative;
}

.showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 50px;
}

.showcase-category {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.showcase-category:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.category-header {
    padding: 25px 30px;
    text-align: center;
    position: relative;
}

.category-header.order-online {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: var(--white);
}

.category-header.get-quote {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    color: var(--white);
}

.category-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.2);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.category-badge.premium {
    background: var(--primary);
    color: var(--secondary);
}

.category-badge svg {
    flex-shrink: 0;
}

.category-header h3 {
    font-size: 1.5rem;
    margin-bottom: 5px;
    color: inherit;
}

.category-header p {
    opacity: 0.9;
    font-size: 0.95rem;
    margin: 0;
}

.showcase-dishes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 20px;
}

.showcase-dish-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.showcase-dish-card:hover {
    transform: scale(1.05);
}

.showcase-dish-card .dish-image {
    aspect-ratio: 1;
    overflow: hidden;
}

.showcase-dish-card .dish-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.showcase-dish-card:hover .dish-image img {
    transform: scale(1.1);
}

.dish-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
}

.dish-tag {
    display: inline-block;
    background: var(--primary);
    color: var(--secondary);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dish-tag.premium {
    background: var(--secondary);
    color: var(--primary);
}

.showcase-dish-card .dish-info {
    padding: 10px 8px;
    text-align: center;
    background: var(--gray-100);
}

.showcase-dish-card .dish-info h4 {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--gray-800);
}

.showcase-dish-card .dish-info p {
    font-size: 0.7rem;
    color: var(--gray-600);
    margin: 0;
}

.showcase-packages {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 0 20px 25px;
}

.showcase-packages.premium-packages {
    grid-template-columns: repeat(3, 1fr);
}

.package-card-visual {
    background: var(--gray-100);
    border-radius: var(--radius-lg);
    padding: 20px 15px;
    text-align: center;
    position: relative;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
}

.package-card-visual:hover {
    background: var(--white);
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.package-card-visual.premium:hover {
    border-color: var(--primary);
}

.package-card-visual.featured {
    background: linear-gradient(135deg, #fff9e6 0%, #fff 100%);
    border: 2px solid var(--primary);
}

.package-card-visual .featured-badge,
.package-card-visual .premium-badge,
.package-card-visual .vip-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: var(--secondary);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.package-card-visual .premium-badge {
    background: var(--secondary);
    color: var(--primary);
}

.package-card-visual .vip-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #d4af37 0%, #f4e4bc 50%, #d4af37 100%);
    color: var(--secondary);
}

.package-card-visual.vip {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid #d4af37;
}

.package-card-visual.vip .package-visual-header,
.package-card-visual.vip .package-visual-price {
    color: var(--white);
}

.package-visual-header {
    margin-bottom: 8px;
    margin-top: 5px;
}

.package-visual-header .package-name {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 2px;
}

.package-visual-header .package-guests {
    display: block;
    font-size: 0.8rem;
    color: var(--gray-600);
}

.package-card-visual.vip .package-visual-header .package-guests {
    color: var(--gray-400);
}

.package-visual-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 12px;
}

.package-visual-price small {
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.8;
}

.package-card-visual.vip .package-visual-price {
    color: #d4af37;
}

/* Order Online Button */
.btn-order-online {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent);
    color: var(--white);
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    transition: all var(--transition-fast);
    width: 100%;
}

.btn-order-online:hover {
    background: var(--accent-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-green);
}

.btn-order-online.added {
    background: var(--secondary);
    color: var(--white);
}

/* Get Quote Button */
.btn-get-quote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--secondary);
    color: var(--white);
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    transition: all var(--transition-fast);
    width: 100%;
}

.btn-get-quote:hover {
    background: var(--secondary-light);
    transform: translateY(-2px);
}

.btn-get-quote.btn-vip {
    background: linear-gradient(135deg, #d4af37 0%, #f4e4bc 50%, #d4af37 100%);
    color: var(--secondary);
}

.btn-get-quote.btn-vip:hover {
    background: linear-gradient(135deg, #c9a227 0%, #e8d5a0 50%, #c9a227 100%);
    box-shadow: 0 8px 30px rgba(212, 175, 55, 0.4);
}

.showcase-includes {
    text-align: center;
    margin-top: 40px;
    padding: 20px 30px;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.showcase-includes p {
    margin: 0;
    color: var(--gray-700);
    font-size: 0.95rem;
}

.showcase-includes strong {
    color: var(--secondary);
}

/* Builder CTA Buttons */
.btn-order-online-cta,
.btn-get-quote-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Responsive Showcase */
@media (max-width: 1024px) {
    .showcase-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .showcase-dishes {
        grid-template-columns: repeat(4, 1fr);
    }

    .showcase-packages.premium-packages {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .menu-showcase-section {
        padding: 60px 0;
    }

    .showcase-dishes {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .showcase-packages,
    .showcase-packages.premium-packages {
        grid-template-columns: 1fr;
    }

    .category-header {
        padding: 20px;
    }

    .category-header h3 {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .showcase-dishes {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-badge {
        font-size: 0.75rem;
        padding: 6px 12px;
    }
}

/* =============================================
   Section Headers
   ============================================= */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header.light {
    color: var(--white);
}

.section-header.light h2 {
    color: var(--white);
}

.section-header.light p {
    color: rgba(255,255,255,0.8);
}

.section-tag {
    display: inline-block;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 12px;
    position: relative;
    padding: 0 20px;
}

.section-tag::before,
.section-tag::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
}

.section-tag::before {
    left: -35px;
}

.section-tag::after {
    right: -35px;
}

.section-header.light .section-tag {
    color: var(--primary);
}

.section-header.light .section-tag::before,
.section-header.light .section-tag::after {
    background: linear-gradient(90deg, var(--primary), var(--accent));
}

.section-header h2 {
    margin-bottom: 16px;
}

.section-header p {
    color: var(--gray-600);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* =============================================
   Packages Section
   ============================================= */
.packages-section {
    padding: 100px 0;
    background: var(--stripe-teal);
    position: relative;
}

/* Artistic brush stroke decoration */
.packages-section::before {
    content: '';
    position: absolute;
    top: 50px;
    left: 0;
    width: 200px;
    height: 8px;
    background: linear-gradient(90deg, var(--accent), transparent);
    opacity: 0.3;
}

.packages-section::after {
    content: '';
    position: absolute;
    bottom: 50px;
    right: 0;
    width: 200px;
    height: 8px;
    background: linear-gradient(270deg, var(--primary), transparent);
    opacity: 0.3;
}

/* Light text for dark teal background */
.packages-section .section-header h2,
.packages-section .section-header p {
    color: var(--white);
}

.packages-section .section-tag {
    color: var(--primary);
}

.packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.package-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    position: relative;
}

.package-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl);
}

.package-card.featured {
    border: 3px solid var(--accent);
}

.featured-tag {
    position: absolute;
    top: 15px;
    right: -35px;
    background: var(--accent);
    color: var(--white);
    padding: 5px 40px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    transform: rotate(45deg);
}

.package-header {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-light));
    padding: 30px 20px;
    text-align: center;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

/* Artistic diagonal accent on header */
.package-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: -50px;
    width: 100px;
    height: 100%;
    background: linear-gradient(135deg, transparent 40%, var(--accent) 40%, var(--accent) 45%, transparent 45%);
    opacity: 0.3;
}


.package-size {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 4px 16px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.package-header h3 {
    color: var(--white);
    font-size: 1.25rem;
}

.package-body {
    padding: 30px 20px;
    text-align: center;
}

.serving-badge {
    margin-bottom: 25px;
}

.serving-number {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent);
    font-family: var(--font-heading);
    line-height: 1;
}

.serving-text {
    font-size: 0.9rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.package-features {
    text-align: left;
    margin-bottom: 25px;
}

.package-features li {
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-200);
    color: var(--gray-700);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

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

.package-features li:last-child {
    border-bottom: none;
}

/* =============================================
   Premium Section
   ============================================= */
.premium-section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
}

.premium-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--stripe-cream);
    z-index: -1;
}

.premium-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/compressed/oxtail-gravy.jpg') center/cover;
    opacity: 0.03;
}

/* Artistic pattern overlay */
.premium-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(45deg, transparent 48%, var(--stripe-teal) 49%, var(--stripe-teal) 51%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, var(--stripe-teal) 49%, var(--stripe-teal) 51%, transparent 52%);
    background-size: 60px 60px;
    opacity: 0.03;
}

.premium-dishes {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

/* Premium dishes in showcase section - 2 per row with modal support */
.showcase-dishes.premium-dishes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    max-width: 500px;
    margin: 0 auto;
}

.showcase-dishes.premium-dishes .showcase-dish-card {
    cursor: pointer;
}

.showcase-dishes.premium-dishes .showcase-dish-card .dish-image img {
    transition: transform var(--transition-base);
}

.showcase-dishes.premium-dishes .showcase-dish-card:hover .dish-image img {
    transform: scale(1.1);
}

.premium-dish-card {
    text-align: center;
    transition: transform var(--transition-base);
}

.premium-dish-card:hover {
    transform: scale(1.05);
}

.premium-dish-card img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--stripe-teal);
    margin-bottom: 12px;
    box-shadow: 0 0 20px rgba(16, 109, 124, 0.3);
}

.premium-dish-card span {
    display: block;
    color: var(--secondary);
    font-weight: 500;
    font-size: 0.9rem;
}

.premium-packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.premium-card {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.premium-card:hover {
    transform: translateY(-10px);
    border-color: var(--stripe-teal);
    box-shadow: 0 15px 40px rgba(16, 109, 124, 0.2);
}

.premium-card.highlighted {
    border: 2px solid var(--stripe-teal);
    box-shadow: 0 8px 30px rgba(16, 109, 124, 0.15);
}

.premium-card-inner {
    padding: 40px 30px;
    text-align: center;
}

.premium-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--stripe-teal), #0d5a68);
    color: var(--white);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.premium-card h3 {
    color: var(--secondary);
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.premium-serving {
    margin-bottom: 20px;
}

.premium-serving .number {
    display: block;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--stripe-teal);
    font-family: var(--font-heading);
    line-height: 1;
}

.premium-serving .label {
    font-size: 0.85rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.premium-card p {
    color: var(--gray-600);
    margin-bottom: 25px;
    font-size: 0.95rem;
}

/* Premium section button override */
.premium-card .btn-primary {
    background: var(--stripe-teal);
    border-color: var(--stripe-teal);
    color: var(--white);
}

.premium-card .btn-primary:hover {
    background: #0d5a68;
    border-color: #0d5a68;
    color: var(--white);
}

/* =============================================
   Patty Tabbed Interface
   ============================================= */
.patty-tabbed-interface {
    margin-top: 60px;
}

.patty-tabs-container {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 0;
    background: linear-gradient(135deg, #1a6b3c 0%, #0d4a28 100%);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}

.patty-tabs-image {
    position: relative;
    min-height: 500px;
}

.patty-tabs-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.patty-tabs-content {
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
}

/* Tab Navigation */
.patty-tabs-nav {
    display: flex;
    gap: 5px;
    margin-bottom: 25px;
    background: rgba(0, 0, 0, 0.2);
    padding: 5px;
    border-radius: 12px;
}

.patty-tab {
    flex: 1;
    padding: 12px 15px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.patty-tab:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.1);
}

.patty-tab.active {
    background: #FFD700;
    color: var(--stripe-navy);
}

/* Tab Panels */
.patty-tab-panels {
    flex: 1;
    min-height: 350px;
}

.patty-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.patty-panel.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.panel-tag {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    color: #FFD700;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.panel-tag.gold {
    background: rgba(255, 255, 255, 0.15);
    color: #FFD700;
}

.patty-panel h3 {
    color: var(--white);
    font-size: 1.6rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.patty-panel > p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Panel Flavors */
.panel-flavors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.panel-flavors.small {
    margin-bottom: 12px;
}

.panel-flavors .flavor-tag {
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Panel Pricing */
.panel-pricing {
    list-style: none;
    padding: 0;
    margin: 0;
}

.panel-pricing li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    margin-bottom: 8px;
    color: var(--white);
}

.panel-pricing li span:first-child {
    font-size: 0.95rem;
}

.panel-pricing li .price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gold);
}

/* Selectable Pricing Items */
.panel-pricing.selectable li {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.panel-pricing.selectable li:hover {
    background: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.4);
    transform: translateX(5px);
}

.panel-pricing.selectable li::after {
    content: '→';
    opacity: 0;
    margin-left: 10px;
    transition: opacity 0.2s;
    color: #FFD700;
}

.panel-pricing.selectable li:hover::after {
    opacity: 1;
}

/* Package Style Pricing */
.panel-pricing.packages li {
    flex-wrap: wrap;
    padding: 15px;
}

.panel-pricing.packages .package-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.panel-pricing.packages .package-info strong {
    font-size: 1rem;
    color: var(--white);
}

.panel-pricing.packages .package-info .guests {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.panel-pricing.packages .package-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.panel-pricing.packages .package-price .qty {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.panel-pricing.packages .package-price .price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gold);
}

/* Compact Pricing for Premium */
.panel-pricing.compact li {
    padding: 10px 12px;
    margin-bottom: 6px;
}

.panel-pricing.compact li span:first-child {
    font-size: 0.85rem;
}

.panel-pricing.compact li .price {
    font-size: 1.1rem;
}

/* Guest Badge */
.panel-guest-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 15px;
}

/* Premium Package Groups */
.premium-package-group {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.premium-package-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.premium-package-group h4 {
    color: var(--white);
    font-size: 1.1rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.premium-package-group h4 .guests {
    font-size: 0.8rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
}

.premium-package-group h4 .signature-badge {
    position: static;
    font-size: 0.7rem;
    padding: 3px 10px;
}

.premium-package-group.signature {
    background: rgba(212, 175, 55, 0.1);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

/* CTA Button */
.patty-tabs-content .btn-gold {
    margin-top: auto;
    align-self: flex-start;
}

/* Responsive - Tabbed Interface */
@media (max-width: 900px) {
    .patty-tabs-container {
        grid-template-columns: 1fr;
    }

    .patty-tabs-image {
        min-height: 250px;
    }

    .patty-tabs-content {
        padding: 25px 20px;
    }

    .patty-tabs-nav {
        flex-wrap: wrap;
    }

    .patty-tab {
        flex: 1 1 45%;
        padding: 10px 12px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .patty-tab {
        flex: 1 1 100%;
    }

    .patty-panel h3 {
        font-size: 1.3rem;
    }

    .panel-pricing li {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .panel-pricing li .price {
        align-self: flex-end;
    }
}

/* =============================================
   Corporate VIP Section
   ============================================= */
.corporate-vip-section {
    padding: 100px 0;
    background: var(--stripe-navy);
    position: relative;
    overflow: hidden;
}

/* Subtle gold pattern overlay */
.corporate-vip-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(254, 209, 0, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(254, 209, 0, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

/* Elegant border accents */
.corporate-vip-section::after {
    content: '';
    position: absolute;
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    border: 1px solid rgba(254, 209, 0, 0.2);
    border-radius: var(--radius-xl);
    pointer-events: none;
}

.corporate-vip-section .section-header {
    position: relative;
    z-index: 1;
}

/* Light text for dark navy background */
.corporate-vip-section .section-header h2,
.corporate-vip-section .section-header p {
    color: var(--white);
}

.section-tag.vip-tag {
    background: linear-gradient(135deg, var(--primary), #d4af37);
    color: var(--secondary);
    font-weight: 700;
    letter-spacing: 2px;
}

.corporate-vip-section h2 {
    background: linear-gradient(135deg, var(--secondary) 0%, #d4af37 50%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.corporate-vip-wrapper {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
}

.corporate-vip-card {
    background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
    border-radius: var(--radius-xl);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(254, 209, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    position: relative;
    overflow: hidden;
    padding: 50px;
}

/* Gold shimmer effect on hover */
.corporate-vip-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(254, 209, 0, 0.1),
        transparent
    );
    transition: left 0.8s ease;
}

.corporate-vip-card:hover::before {
    left: 100%;
}

/* VIP Crown Badge */
.vip-crown-badge {
    position: absolute;
    top: -10px;
    right: 30px;
    background: linear-gradient(145deg, var(--primary), #d4af37);
    padding: 15px 25px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    box-shadow:
        0 10px 30px rgba(254, 209, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    z-index: 10;
}

.vip-crown-badge svg {
    width: 28px;
    height: 28px;
    color: var(--secondary);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.vip-crown-badge span {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--secondary);
    letter-spacing: 3px;
}

/* VIP Content Layout */
.corporate-vip-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-bottom: 40px;
}

.corporate-vip-info {
    padding-right: 30px;
}

.vip-header {
    margin-bottom: 30px;
}

.vip-size-tag {
    display: inline-block;
    background: var(--secondary);
    color: var(--primary);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.vip-header h3 {
    font-size: 2rem;
    color: var(--secondary);
    margin-bottom: 8px;
}

.vip-tagline {
    color: #d4af37;
    font-style: italic;
    font-size: 1rem;
    font-weight: 500;
}

.vip-serving {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 25px;
    padding: 20px;
    background: linear-gradient(135deg, var(--secondary), #1a3a2f);
    border-radius: var(--radius-lg);
    display: inline-flex;
}

.vip-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--primary);
    font-family: var(--font-heading);
    line-height: 1;
    text-shadow: 0 0 30px rgba(254, 209, 0, 0.5);
}

.vip-label {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.vip-description {
    color: var(--gray-600);
    line-height: 1.8;
    font-size: 1rem;
}

/* VIP Features */
.corporate-vip-features {
    background: linear-gradient(145deg, #fafafa, #ffffff);
    border-radius: var(--radius-lg);
    padding: 30px;
    border: 1px solid rgba(254, 209, 0, 0.2);
}

.corporate-vip-features h4 {
    font-size: 1.1rem;
    color: var(--secondary);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.vip-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vip-features-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--gray-700);
    font-size: 0.95rem;
}

.vip-features-list li:last-child {
    border-bottom: none;
}

.vip-check {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, var(--primary), #d4af37);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vip-check svg {
    width: 14px;
    height: 14px;
    color: var(--secondary);
}

/* VIP Footer */
.corporate-vip-footer {
    border-top: 1px solid rgba(254, 209, 0, 0.2);
    padding-top: 30px;
    text-align: center;
}

.vip-cta-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-vip {
    background: linear-gradient(135deg, var(--secondary), #1a3a2f);
    color: var(--primary);
    padding: 18px 50px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1px;
    border: 2px solid var(--primary);
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all var(--transition-base);
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-vip:hover {
    background: linear-gradient(135deg, var(--primary), #d4af37);
    color: var(--secondary);
    transform: translateY(-3px);
    box-shadow:
        0 15px 40px rgba(254, 209, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-vip svg {
    width: 20px;
    height: 20px;
    transition: transform var(--transition-base);
}

.btn-vip:hover svg {
    transform: translateX(5px);
}

.btn-vip-outline {
    background: transparent;
    color: var(--primary);
    padding: 18px 40px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: 2px solid var(--primary);
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all var(--transition-base);
    text-decoration: none;
}

.btn-vip-outline:hover {
    background: var(--primary);
    color: var(--secondary);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(254, 209, 0, 0.3);
}

.btn-vip-outline svg {
    width: 18px;
    height: 18px;
    transition: transform var(--transition-base);
}

.btn-vip-outline:hover svg {
    transform: translate(3px, -3px);
}

.vip-contact-note {
    color: var(--gray-500);
    font-size: 0.9rem;
}

/* VIP Corner Decorations */
.vip-corner-decor {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 3px solid var(--primary);
    opacity: 0.3;
}

.vip-corner-decor.top-left {
    top: 20px;
    left: 20px;
    border-right: none;
    border-bottom: none;
}

.vip-corner-decor.top-right {
    top: 20px;
    right: 20px;
    border-left: none;
    border-bottom: none;
}

.vip-corner-decor.bottom-left {
    bottom: 20px;
    left: 20px;
    border-right: none;
    border-top: none;
}

.vip-corner-decor.bottom-right {
    bottom: 20px;
    right: 20px;
    border-left: none;
    border-top: none;
}

/* =============================================
   Corporate VIP Builder
   ============================================= */

.corporate-vip-builder {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
    border-radius: var(--radius-xl);
    padding: 50px 40px;
    margin-top: 40px;
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(254, 209, 0, 0.3);
}

.corporate-vip-builder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(254, 209, 0, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(254, 209, 0, 0.05) 0%, transparent 40%);
    pointer-events: none;
}

.vip-builder-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.vip-builder-crown {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    color: #FED100;
    filter: drop-shadow(0 0 20px rgba(254, 209, 0, 0.5));
}

.vip-builder-crown svg {
    width: 100%;
    height: 100%;
}

.vip-builder-header h3 {
    color: #FED100;
    font-size: 1.8rem;
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.vip-builder-header p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    margin: 0;
}

.vip-builder-step {
    position: relative;
    z-index: 1;
    margin-bottom: 35px;
}

.vip-step-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.vip-step-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #FED100 0%, #d4af37 100%);
    color: #1a1a2e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 0 20px rgba(254, 209, 0, 0.4);
}

.vip-step-header h4 {
    color: #FED100;
    font-size: 1.2rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.vip-multi-tag {
    background: rgba(254, 209, 0, 0.2);
    color: #FED100;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.vip-included-tag {
    background: rgba(7, 100, 35, 0.3);
    color: #4ade80;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* VIP Protein Grid */
.vip-protein-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.vip-protein-option {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(254, 209, 0, 0.2);
    border-radius: var(--radius-lg);
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
}

.vip-protein-option:hover {
    background: rgba(254, 209, 0, 0.08);
    border-color: rgba(254, 209, 0, 0.5);
    transform: translateY(-3px);
}

.vip-protein-option.selected {
    background: rgba(254, 209, 0, 0.12);
    border-color: #FED100;
    box-shadow: 0 0 30px rgba(254, 209, 0, 0.25);
}

.vip-protein-option.selected::after {
    content: '✓';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #FED100, #d4af37);
    color: #1a1a2e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 0 15px rgba(254, 209, 0, 0.5);
}

.vip-protein-img {
    width: 100%;
    height: 100px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid rgba(254, 209, 0, 0.2);
}

.vip-protein-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.vip-protein-option:hover .vip-protein-img img {
    transform: scale(1.08);
}

.vip-protein-name {
    color: #FED100;
    font-weight: 600;
    font-size: 1rem;
}

.vip-protein-tag {
    background: rgba(254, 209, 0, 0.15);
    color: rgba(254, 209, 0, 0.9);
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* VIP Beverage Grid */
.vip-beverage-note {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin-bottom: 15px;
    text-align: center;
}

.vip-beverage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.vip-beverage-option {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(254, 209, 0, 0.15);
    border-radius: var(--radius-md);
    padding: 15px 10px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
}

.vip-beverage-option:hover {
    border-color: rgba(254, 209, 0, 0.4);
    transform: translateY(-2px);
}

.vip-beverage-option.selected {
    border-color: #FED100;
    background: rgba(254, 209, 0, 0.1);
}

.vip-beverage-option.selected::after {
    content: '✓';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    background: #FED100;
    color: #1a1a2e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}

.vip-beverage-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(254, 209, 0, 0.2);
}

.vip-beverage-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vip-beverage-name {
    color: #FED100;
    font-weight: 600;
    font-size: 0.85rem;
}

/* VIP Builder Summary */
.vip-builder-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #FED100 0%, #d4af37 100%);
    border-radius: var(--radius-lg);
    padding: 25px 30px;
    margin-top: 30px;
    position: relative;
    z-index: 1;
}

.vip-summary-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vip-summary-badge {
    background: rgba(26, 26, 46, 0.2);
    color: #1a1a2e;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
    width: fit-content;
}

.vip-summary-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vip-summary-proteins {
    color: #1a1a2e;
    font-weight: 600;
    font-size: 1rem;
}

.vip-summary-beverages {
    color: rgba(26, 26, 46, 0.8);
    font-size: 0.9rem;
}

.vip-summary-beverages::before {
    content: '+ ';
}

.vip-summary-guests {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vip-summary-guests span:first-child {
    color: #1a1a2e;
    font-weight: 600;
}

.vip-summary-note {
    color: rgba(26, 26, 46, 0.7);
    font-size: 0.8rem;
    font-style: italic;
}

.btn-vip-gold {
    background: #1a1a2e;
    color: #FED100;
    border: none;
    padding: 18px 35px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    box-shadow: 0 5px 20px rgba(26, 26, 46, 0.4);
}

.btn-vip-gold:hover {
    background: #0f0f1a;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(26, 26, 46, 0.5);
}

.btn-vip-gold svg {
    stroke: currentColor;
}

/* VIP Builder Includes */
.vip-builder-includes {
    text-align: center;
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid rgba(254, 209, 0, 0.15);
    position: relative;
    z-index: 1;
}

.vip-builder-includes p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin: 0;
}

.vip-builder-includes strong {
    color: #FED100;
}

/* VIP Builder Responsive */
@media (max-width: 992px) {
    .vip-protein-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vip-beverage-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .corporate-vip-builder {
        padding: 30px 20px;
    }

    .vip-builder-header h3 {
        font-size: 1.4rem;
    }

    .vip-builder-summary {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .vip-summary-details {
        justify-content: center;
    }

    .btn-vip-gold {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .vip-protein-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .vip-protein-img {
        height: 80px;
    }

    .vip-beverage-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =============================================
   Gallery Section
   ============================================= */
.gallery-section {
    padding: 100px 0;
    background: var(--stripe-cream);
    position: relative;
}

/* Artistic frame around gallery */
.gallery-section::before {
    content: '';
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 100px);
    max-width: 1300px;
    height: calc(100% - 160px);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-xl);
    pointer-events: none;
}

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

.gallery-item {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    background: transparent;
    aspect-ratio: 3 / 4;
}

/* Artistic corner brackets on gallery items */
.gallery-item::before,
.gallery-item::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border: 3px solid var(--primary);
    z-index: 3;
    opacity: 0;
    transition: all var(--transition-base);
}

.gallery-item::before {
    top: 10px;
    left: 10px;
    border-right: none;
    border-bottom: none;
}

.gallery-item::after {
    bottom: 10px;
    right: 10px;
    border-left: none;
    border-top: none;
}

.gallery-item:hover::before,
.gallery-item:hover::after {
    opacity: 1;
}

/* Wide items for overhead/horizontal images */
.gallery-item.wide {
    grid-column: span 2;
    aspect-ratio: 4 / 3;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--transition-slow);
    background: var(--gray-100);
}

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

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
    color: var(--white);
    transform: translateY(0);
    opacity: 1;
    transition: all var(--transition-base);
}

.gallery-item:hover .gallery-overlay {
    padding: 20px 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 70%, transparent 100%);
}

.gallery-overlay h4 {
    color: var(--white);
    font-size: 1.1rem;
    margin-bottom: 3px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.gallery-overlay p {
    color: rgba(255,255,255,0.9);
    font-size: 0.8rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* =============================================
   Add-ons Section
   ============================================= */
.addons-section {
    padding: 100px 0;
    background: var(--stripe-cream);
}

.addons-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.addons-content h2 {
    margin-bottom: 20px;
}

.addons-content > p {
    color: var(--gray-600);
    margin-bottom: 30px;
}

.addons-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px;
}

.addons-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gray-700);
}

.addons-list li::before {
    content: '';
    width: 20px;
    height: 20px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.addons-image {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.addons-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

/* =============================================
   Contact Section
   ============================================= */
.contact-section {
    padding: 100px 0;
    background: var(--stripe-cream);
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.contact-info h2 {
    margin-bottom: 20px;
}

.contact-info > p {
    color: var(--gray-600);
    margin-bottom: 40px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: var(--accent);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-icon svg {
    width: 24px;
    height: 24px;
    color: var(--white);
}

.contact-item h4 {
    font-size: 1rem;
    margin-bottom: 4px;
    font-family: var(--font-body);
}

.contact-item p {
    color: var(--gray-600);
}

.contact-form-wrapper {
    background: var(--white);
    padding: 40px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

/* Jamaican accent stripe on form */
.contact-form-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg,
        var(--accent) 0%, var(--accent) 33%,
        var(--primary) 33%, var(--primary) 66%,
        var(--accent) 66%, var(--accent) 100%
    );
}

.contact-form h3 {
    text-align: center;
    margin-bottom: 30px;
}

/* Package Selection Banner */
.package-selection-banner {
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, #1a6b3c 0%, #0d4a28 100%);
    color: var(--white);
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 25px;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.banner-icon {
    width: 36px;
    height: 36px;
    background: #FFD700;
    color: #1a6b3c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    flex-shrink: 0;
}

.banner-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.banner-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.banner-package {
    font-size: 1rem;
    font-weight: 700;
    color: #FFD700;
}

.banner-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(--white);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}

.banner-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

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

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

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: border-color var(--transition-fast);
    background: var(--white);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 155, 58, 0.1);
}

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

/* =============================================
   Footer
   ============================================= */
.footer {
    background: var(--secondary);
    color: var(--white);
    padding: 80px 0 30px;
    position: relative;
}

/* Jamaican flag stripe at top of footer */
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg,
        var(--accent) 0%, var(--accent) 33.33%,
        var(--primary) 33.33%, var(--primary) 66.66%,
        var(--accent) 66.66%, var(--accent) 100%
    );
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 50px;
}

.footer-logo {
    height: 50px;
    margin-bottom: 20px;
}

.footer-brand p {
    color: rgba(255,255,255,0.7);
    max-width: 300px;
}

.footer h4 {
    color: var(--white);
    font-size: 1.1rem;
    margin-bottom: 20px;
    font-family: var(--font-body);
}

.footer-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    max-width: 300px;
}

.footer-links li {
    white-space: nowrap;
}

.footer-links a {
    color: rgba(255,255,255,0.7);
    transition: color var(--transition-fast);
}

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

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.social-icons a:hover {
    background: var(--accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-green);
}

.social-icons svg {
    width: 20px;
    height: 20px;
    color: var(--white);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 30px;
    text-align: center;
    color: rgba(255,255,255,0.5);
    font-size: 0.9rem;
}

/* =============================================
   Animations
   ============================================= */
[data-aos="fade-up"] {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

[data-aos="fade-up"].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================
   Responsive Design
   ============================================= */
@media (max-width: 1024px) {
    .packages-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .premium-packages-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .corporate-vip-content {
        gap: 30px;
    }

    .corporate-vip-card {
        padding: 40px;
    }

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .gallery-item.wide {
        grid-column: span 1;
        aspect-ratio: 3 / 4;
    }
}

@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        padding: 40px 30px;
    }

    .contact-wrapper,
    .addons-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .addons-image {
        order: -1;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .nav-container {
        gap: 20px;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 400px;
        height: 100vh;
        background: var(--white);
        flex-direction: column;
        justify-content: center;
        padding: 40px;
        gap: 30px;
        transition: right var(--transition-base);
        box-shadow: -5px 0 30px rgba(0,0,0,0.15);
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-menu a {
        font-size: 1.1rem;
        color: var(--secondary);
    }

    .nav-menu a:hover {
        color: var(--accent);
    }

    .nav-cta {
        margin-left: 0;
    }

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

    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* Hero adjustments for tablet */
    .hero-content {
        padding: 0 20px;
        text-align: center;
    }

    .hero-catering {
        font-size: clamp(3rem, 8vw, 5rem);
        letter-spacing: 6px;
    }

    .hero-slogan {
        font-size: clamp(1.1rem, 2.5vw, 1.6rem);
        margin-top: 15px;
    }

    .logo-location {
        font-size: 0.55rem;
        letter-spacing: 2px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .packages-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .premium-packages-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    /* Corporate VIP Responsive */
    .corporate-vip-section {
        padding: 60px 0;
    }

    .corporate-vip-section::after {
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
    }

    .corporate-vip-card {
        padding: 30px 20px;
    }

    .corporate-vip-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .corporate-vip-info {
        padding-right: 0;
        text-align: center;
    }

    .vip-header h3 {
        font-size: 1.6rem;
    }

    .vip-serving {
        justify-content: center;
    }

    .vip-number {
        font-size: 2.8rem;
    }

    .vip-crown-badge {
        right: 15px;
        padding: 10px 18px;
    }

    .vip-crown-badge svg {
        width: 22px;
        height: 22px;
    }

    .vip-corner-decor {
        width: 40px;
        height: 40px;
    }

    .vip-corner-decor.top-left,
    .vip-corner-decor.top-right,
    .vip-corner-decor.bottom-left,
    .vip-corner-decor.bottom-right {
        top: 10px;
        bottom: 10px;
        left: 10px;
        right: 10px;
    }

    .btn-vip {
        padding: 15px 35px;
        font-size: 1rem;
        width: 100%;
        justify-content: center;
    }

    .btn-vip-outline {
        padding: 14px 30px;
        font-size: 0.95rem;
        width: 100%;
        justify-content: center;
    }

    .vip-cta-wrapper {
        flex-direction: column;
        gap: 15px;
    }

    .premium-dishes {
        gap: 15px;
    }

    .premium-dish-card img {
        width: 80px;
        height: 80px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-item.wide {
        grid-column: span 2;
        aspect-ratio: 4 / 3;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 280px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .footer-brand p {
        margin: 0 auto;
    }

    .footer-logo {
        margin: 0 auto 20px;
    }

    .social-icons {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .logo img {
        height: 38px;
    }

    .navbar.scrolled .logo img {
        height: 32px;
    }

    .hero {
        min-height: 100svh;
    }

    /* Hero adjustments for mobile */
    .hero-content {
        padding: 0 20px;
        text-align: center;
    }

    .hero-catering {
        font-size: clamp(2.5rem, 12vw, 4rem);
        letter-spacing: 4px;
    }

    .logo-location {
        font-size: 0.5rem;
        letter-spacing: 1.5px;
    }

    .hero-slogan {
        font-size: clamp(0.95rem, 4vw, 1.3rem);
        margin-top: 12px;
    }

    .hero-buttons {
        justify-content: center;
        align-items: center;
    }

    .features {
        padding: 60px 0;
        margin-top: 0;
    }

    .features-grid {
        padding: 30px 20px;
    }

    .packages-section,
    .gallery-section,
    .addons-section,
    .contact-section {
        padding: 60px 0;
    }

    .premium-section {
        padding: 80px 0;
    }

    .section-header {
        margin-bottom: 40px;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-item {
        aspect-ratio: 4 / 5;
    }

    .gallery-item.wide {
        aspect-ratio: 4 / 3;
    }

    .contact-form-wrapper {
        padding: 25px 20px;
    }

    .addons-list {
        grid-template-columns: 1fr;
    }
}

/* Smooth reveal animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Loading animation for images */
img {
    opacity: 0;
    transition: opacity 0.5s ease;
}

img.loaded {
    opacity: 1;
}

/* =============================================
   Artistic Jamaican Decorations
   ============================================= */

/* Jamaican flag stripe decoration */
.jamaican-stripe {
    height: 6px;
    background: linear-gradient(90deg,
        var(--accent) 0%, var(--accent) 33.33%,
        var(--primary) 33.33%, var(--primary) 66.66%,
        var(--accent) 66.66%, var(--accent) 100%
    );
}

/* Decorative section divider */
.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 40px 0;
}

.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    max-width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

.section-divider span {
    color: var(--accent);
    font-size: 1.5rem;
}

/* Artistic quote styling */
.jamaican-quote {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--accent);
    text-align: center;
    padding: 40px;
    position: relative;
}

.jamaican-quote::before {
    content: '"';
    font-size: 4rem;
    position: absolute;
    top: 0;
    left: 20px;
    color: var(--primary);
    opacity: 0.3;
    font-family: Georgia, serif;
}

/* Hover glow effect for Jamaican colors */
.glow-gold:hover {
    box-shadow: 0 0 30px rgba(254, 209, 0, 0.4);
}

.glow-green:hover {
    box-shadow: 0 0 30px rgba(0, 155, 58, 0.4);
}

/* Artistic underline */
.artistic-underline {
    position: relative;
    display: inline-block;
}

.artistic-underline::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--primary), var(--accent));
    border-radius: 2px;
}

/* Palm leaf decorative corner (CSS art) */
.palm-corner::before {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    background:
        radial-gradient(ellipse at center, transparent 60%, var(--accent) 61%, var(--accent) 63%, transparent 64%);
    opacity: 0.1;
    transform: rotate(-45deg);
}

/* Reggae stripe accent on cards */
.reggae-accent {
    position: relative;
    overflow: hidden;
}

.reggae-accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--accent) 0%, var(--accent) 33%,
        var(--primary) 33%, var(--primary) 66%,
        var(--secondary) 66%, var(--secondary) 100%
    );
}

/* =============================================
   Lightbox Gallery Modal
   ============================================= */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(7, 100, 35, 0.97);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    background: none;
    border: none;
    color: var(--white);
    font-size: 3rem;
    cursor: pointer;
    z-index: 10001;
    transition: all var(--transition-fast);
    line-height: 1;
    padding: 10px;
}

.lightbox-close:hover {
    color: var(--primary);
    transform: rotate(90deg);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    z-index: 10001;
}

.lightbox-nav:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-nav svg {
    width: 30px;
    height: 30px;
}

.lightbox-prev {
    left: 30px;
}

.lightbox-next {
    right: 30px;
}

.lightbox-content {
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: lightboxZoomIn 0.4s ease-out;
}

@keyframes lightboxZoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.lightbox-image {
    max-width: 100%;
    max-height: 65vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    opacity: 1 !important;
}

.lightbox-info {
    text-align: center;
    color: var(--white);
    margin-top: 25px;
    max-width: 700px;
    padding: 0 20px;
}

.lightbox-title {
    color: var(--primary);
    font-size: 1.75rem;
    margin-bottom: 12px;
    font-family: var(--font-heading);
}

.lightbox-description {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
    line-height: 1.7;
}

.lightbox-counter {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    background: rgba(0, 0, 0, 0.5);
    padding: 8px 20px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.lightbox-counter span:first-child {
    color: var(--primary);
    font-weight: 600;
}

/* Jamaican accent stripe on lightbox */
.lightbox::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg,
        var(--accent) 0%, var(--accent) 33%,
        var(--primary) 33%, var(--primary) 66%,
        var(--accent) 66%, var(--accent) 100%
    );
}

/* Lightbox responsive */
@media (max-width: 768px) {
    .lightbox-nav {
        width: 45px;
        height: 45px;
    }

    .lightbox-nav svg {
        width: 22px;
        height: 22px;
    }

    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }

    .lightbox-close {
        top: 10px;
        right: 15px;
        font-size: 2.5rem;
    }

    .lightbox-title {
        font-size: 1.4rem;
    }

    .lightbox-description {
        font-size: 1rem;
    }

    .lightbox-image {
        max-height: 55vh;
    }
}

@media (max-width: 480px) {
    .lightbox-nav {
        width: 40px;
        height: 40px;
        bottom: 80px;
        top: auto;
        transform: none;
    }

    .lightbox-prev {
        left: 20%;
    }

    .lightbox-next {
        right: 20%;
    }
}

/* =============================================
   Pay It Forward Banner
   ============================================= */
.pay-it-forward-banner {
    background: var(--stripe-green);
    padding: 20px 0;
    position: relative;
    z-index: 15;
}

.pay-it-forward-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--primary), var(--accent));
}

.pif-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.pif-icon {
    width: 45px;
    height: 45px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: heartbeat 2s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.pif-icon svg {
    width: 24px;
    height: 24px;
    color: var(--white);
}

.pif-text {
    color: var(--white);
    font-size: 1rem;
}

.pif-text p {
    margin: 0;
}

.pif-text strong {
    color: var(--primary);
}

.btn-pif {
    background: var(--primary);
    color: var(--secondary);
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all var(--transition-base);
    border: 2px solid var(--primary);
}

.btn-pif:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

/* Nav Donate Link */
.nav-donate {
    color: var(--accent) !important;
    font-weight: 600;
}

.nav-donate:hover {
    color: var(--accent-dark) !important;
}

/* Nav VIP Corporate Link */
.nav-vip {
    background: linear-gradient(135deg, var(--primary), #d4af37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700 !important;
    position: relative;
}

.nav-vip::after {
    content: 'VIP';
    position: absolute;
    top: -8px;
    right: -20px;
    font-size: 0.5rem;
    background: linear-gradient(135deg, var(--primary), #d4af37);
    color: var(--secondary);
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: 700;
    -webkit-text-fill-color: var(--secondary);
}

/* =============================================
   Shopping Cart Sidebar
   ============================================= */
.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

.cart-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cart-sidebar {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    max-width: 90vw;
    height: 100vh;
    background: var(--white);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transition: right var(--transition-base);
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.2);
}

.cart-sidebar.active {
    right: 0;
}

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--gray-200);
    background: var(--secondary);
    color: var(--white);
}

.cart-header h3 {
    margin: 0;
    color: var(--white);
    font-family: var(--font-body);
}

.cart-close {
    background: none;
    border: none;
    color: var(--white);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    transition: color var(--transition-fast);
}

.cart-close:hover {
    color: var(--primary);
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid var(--gray-200);
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item-info {
    flex: 1;
}

.cart-item-name {
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 5px;
}

.cart-item-price {
    color: var(--accent);
    font-weight: 600;
}

.cart-item-meta {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-bottom: 3px;
}

.cart-item-package {
    background: linear-gradient(135deg, #fff9e6 0%, #fff 100%);
    padding: 15px;
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    border: 1px solid var(--primary);
}

.cart-item-package .cart-item-name {
    color: var(--secondary);
}

.estimate-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    font-weight: 400;
}

.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-qty {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-qty button {
    width: 28px;
    height: 28px;
    border: 1px solid var(--gray-300);
    background: var(--white);
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.cart-qty button:hover {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
}

.cart-qty span {
    min-width: 20px;
    text-align: center;
    font-weight: 600;
}

.cart-item-remove {
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    font-size: 1.2rem;
    transition: color var(--transition-fast);
}

.cart-item-remove:hover {
    color: #e74c3c;
}

.cart-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--gray-500);
}

.cart-empty svg {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.cart-footer {
    padding: 20px;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-100);
}

.cart-pif-message {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 155, 58, 0.1);
    padding: 12px;
    border-radius: var(--radius-md);
    margin-bottom: 15px;
    font-size: 0.85rem;
    color: var(--accent-dark);
}

.cart-pif-message svg {
    color: var(--accent);
    flex-shrink: 0;
}

.cart-totals {
    margin-bottom: 15px;
}

.cart-subtotal,
.cart-total {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

.cart-total {
    font-size: 1.2rem;
    font-weight: 700;
    border-top: 2px solid var(--gray-300);
    padding-top: 12px;
    color: var(--secondary);
}

/* Floating Cart Icon */
.cart-icon {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: var(--accent);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-base);
}

.cart-icon:hover {
    background: var(--accent-dark);
    transform: scale(1.1);
}

.cart-icon svg {
    width: 28px;
    height: 28px;
    color: var(--white);
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--primary);
    color: var(--secondary);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =============================================
   Checkout Modal
   ============================================= */
.checkout-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(7, 100, 35, 0.95);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    padding: 20px;
    overflow-y: auto;
}

.checkout-modal.active {
    opacity: 1;
    visibility: visible;
}

.checkout-content {
    background: var(--white);
    border-radius: var(--radius-xl);
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.checkout-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--gray-500);
    z-index: 10;
    transition: color var(--transition-fast);
}

.checkout-close:hover {
    color: var(--gray-800);
}

.checkout-header {
    text-align: center;
    padding: 30px 30px 20px;
    border-bottom: 1px solid var(--gray-200);
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%);
    color: var(--white);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.checkout-header h2 {
    color: var(--white);
    margin-bottom: 5px;
}

.checkout-header p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.checkout-body {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 30px;
    padding: 30px;
}

.checkout-summary {
    background: var(--gray-100);
    padding: 20px;
    border-radius: var(--radius-lg);
}

.checkout-summary h4 {
    margin-bottom: 15px;
    font-family: var(--font-body);
}

.checkout-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.95rem;
}

.checkout-item:last-of-type {
    border-bottom: none;
}

.checkout-item-package {
    background: linear-gradient(135deg, #fff9e6 0%, #fff 100%);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 5px;
    border: 1px solid var(--primary);
}

.checkout-total {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid var(--accent);
    font-size: 1.1rem;
}

.checkout-pif {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(0, 155, 58, 0.1);
    padding: 15px;
    border-radius: var(--radius-md);
    margin-top: 20px;
    font-size: 0.85rem;
    color: var(--accent-dark);
}

.checkout-pif svg {
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 2px;
}

.checkout-form h4 {
    margin-bottom: 15px;
    margin-top: 20px;
    font-family: var(--font-body);
}

.checkout-form h4:first-child {
    margin-top: 0;
}

#card-container {
    min-height: 90px;
    padding: 15px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--white);
}

#payment-status {
    margin-top: 10px;
    padding: 10px;
    border-radius: var(--radius-md);
    text-align: center;
    display: none;
}

#payment-status.success {
    display: block;
    background: rgba(0, 155, 58, 0.1);
    color: var(--accent);
}

#payment-status.error {
    display: block;
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
}

.btn-loader {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--white);
    animation: spin 1s linear infinite;
}

/* Checkout Responsive */
@media (max-width: 768px) {
    .checkout-body {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .checkout-summary {
        order: -1;
    }

    .pif-content {
        flex-direction: column;
        text-align: center;
    }

    .cart-sidebar {
        width: 100%;
        max-width: 100%;
        right: -100%;
    }
}

@media (max-width: 480px) {
    .pay-it-forward-banner {
        padding: 15px 0;
    }

    .pif-text {
        font-size: 0.9rem;
    }

    .btn-pif {
        width: 100%;
        text-align: center;
    }

    .cart-icon {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
    }

    .cart-icon svg {
        width: 24px;
        height: 24px;
    }
}

/* =============================================
   Clients Section - Bulletin Board Style
   ============================================= */
.clients-section {
    padding: 80px 0;
    background: var(--stripe-green);
    position: relative;
    overflow: hidden;
}

.clients-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--primary), var(--accent));
}

.clients-banner-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

/* Eye-catching Accordion Banner */
.clients-banner {
    width: 100%;
    position: relative;
    background: linear-gradient(135deg, var(--secondary) 0%, var(--caribbean-navy-light) 50%, var(--secondary-dark) 100%);
    border: none;
    border-radius: var(--radius-xl);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        0 10px 40px rgba(7, 100, 35, 0.4),
        0 0 0 3px var(--primary),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all var(--transition-base);
}

.clients-banner:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow:
        0 20px 60px rgba(7, 100, 35, 0.5),
        0 0 0 4px var(--primary),
        0 0 30px rgba(254, 209, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.clients-banner.active {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* Banner Glow Effect */
.banner-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(254, 209, 0, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.clients-banner:hover .banner-glow {
    opacity: 1;
}

/* Animated Shimmer */
.banner-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(254, 209, 0, 0.1) 50%,
        transparent 100%
    );
    animation: bannerShimmer 3s ease-in-out infinite;
}

@keyframes bannerShimmer {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

/* Banner Content Layout */
.banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 40px;
    position: relative;
    z-index: 2;
}

.banner-left {
    flex-shrink: 0;
}

.banner-icon-group {
    display: flex;
    gap: 8px;
}

.banner-emoji {
    font-size: 2rem;
    display: inline-block;
    animation: float 3s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.banner-emoji:nth-child(2) {
    animation-delay: 0.3s;
}

.banner-emoji:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.banner-center {
    text-align: center;
    flex: 1;
    padding: 0 20px;
}

.banner-tagline {
    display: block;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 8px;
}

.banner-title {
    color: var(--white);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    margin: 0 0 8px 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.banner-subtitle {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    font-weight: 400;
}

.banner-right {
    flex-shrink: 0;
}

.banner-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cta-text {
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cta-arrow {
    width: 50px;
    height: 50px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    box-shadow: 0 4px 15px rgba(254, 209, 0, 0.4);
}

.cta-arrow svg {
    width: 28px;
    height: 28px;
    color: var(--secondary);
    transition: transform var(--transition-base);
}

.clients-banner:hover .cta-arrow {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(254, 209, 0, 0.6);
}

.clients-banner.active .cta-arrow svg {
    transform: rotate(180deg);
}

/* Pulsing animation for CTA */
.cta-arrow::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Client Board Wrapper - Collapsible */
.clients-board-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    background: #c4a574;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    box-shadow:
        inset 0 5px 15px rgba(0, 0, 0, 0.2),
        0 10px 40px rgba(0, 0, 0, 0.15);
}

.clients-board-wrapper.active {
    max-height: 1200px;
}

/* Cork Board Effect */
.clients-board {
    position: relative;
    padding: 50px 30px 60px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    gap: 25px;
}

.cork-texture {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.15'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #c4a574 0%, #b8956a 50%, #a88860 100%);
    pointer-events: none;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.cork-texture::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg,
        #8B4513 0%, #A0522D 20%, #8B4513 40%,
        #A0522D 60%, #8B4513 80%, #A0522D 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Client Badges - Scattered Pinned Notes */
.client-badge {
    position: relative;
    background: var(--white);
    padding: 15px 20px;
    border-radius: 4px;
    box-shadow:
        4px 4px 12px rgba(0, 0, 0, 0.2),
        -1px -1px 4px rgba(255, 255, 255, 0.5);
    transform: rotate(var(--rotation, 0deg));
    transition: all var(--transition-base);
    animation: dropIn 0.5s ease-out backwards;
    animation-delay: var(--delay, 0s);
    width: 240px;
    height: 140px;
    display: flex;
    align-items: center;
    z-index: 1;
}

@keyframes dropIn {
    0% {
        opacity: 0;
        transform: rotate(var(--rotation, 0deg)) translateY(-30px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: rotate(var(--rotation, 0deg)) translateY(0) scale(1);
    }
}

.client-badge:hover {
    transform: rotate(0deg) scale(1.08) translateY(-5px);
    z-index: 10;
    box-shadow:
        8px 8px 25px rgba(0, 0, 0, 0.25),
        0 0 0 3px var(--primary);
}

/* Push Pin Effect */
.pin {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 30% 30%, #ff6b6b, #c0392b);
    border-radius: 50%;
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.pin::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
}

/* Badge Content */
.badge-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
}

.badge-logo {
    width: 70px;
    height: 70px;
    min-width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.badge-divider {
    width: 2px;
    align-self: stretch;
    background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 50%, var(--primary) 100%);
    margin: 0 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.badge-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    flex: 1;
}

.badge-logo-icon {
    background: var(--secondary);
    border-radius: 8px;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.celebration-icon,
.conference-icon {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary);
    font-family: var(--font-heading);
    line-height: 1;
}

.logo-svg {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    transition: transform var(--transition-fast);
}

.logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    transition: transform var(--transition-fast);
}

.client-badge:hover .logo-img {
    transform: scale(1.05);
}

.client-badge:hover .logo-svg {
    transform: scale(1.1);
}

/* Amazon logo needs different aspect ratio */
.amazon-logo {
    width: 80px;
    height: auto;
}

.amazon-badge .badge-logo {
    width: 90px;
    height: 50px;
}

.badge-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.badge-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #000;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.badge-subtitle {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--gray-600);
    line-height: 1.2;
    margin-bottom: 6px;
}

.btn-feedback {
    display: inline-block;
    background: var(--secondary);
    color: var(--white);
    padding: 4px 10px;
    border: none;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-top: 4px;
}

.btn-feedback:hover {
    background: var(--primary);
    color: var(--secondary);
    transform: scale(1.05);
}

.featured-badge .btn-feedback {
    background: var(--primary);
    color: var(--secondary);
}

.featured-badge .btn-feedback:hover {
    background: var(--secondary);
    color: var(--white);
}

.badge-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-800);
    line-height: 1.3;
    text-align: center;
}

.badge-name small {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--gray-600);
    margin-top: 2px;
}

/* Badge Variants */
.client-badge.featured-badge {
    background: linear-gradient(135deg, #fff9e6 0%, #fff 100%);
    border: 2px solid var(--primary);
}

.client-badge.featured-badge .badge-title {
    font-size: 0.95rem;
    color: #000;
}

.client-badge.featured-badge .pin {
    background: radial-gradient(circle at 30% 30%, var(--primary-light), var(--primary-dark));
}

.client-badge.celebration-badge {
    background: linear-gradient(135deg, #fff0f6 0%, #fff 100%);
    border: 2px solid #e91e63;
}

.client-badge.celebration-badge .pin {
    background: radial-gradient(circle at 30% 30%, #ff4081, #c2185b);
}

.client-badge.nypd-badge {
    background: linear-gradient(135deg, #e8eaf6 0%, #fff 100%);
    border: 2px solid #1a237e;
}

.client-badge.nypd-badge .pin {
    background: radial-gradient(circle at 30% 30%, #ffd700, #c5a000);
}

.client-badge.military-badge {
    background: linear-gradient(135deg, #f1f8e9 0%, #fff 100%);
    border: 2px solid #4b5320;
}

.client-badge.military-badge .pin {
    background: radial-gradient(circle at 30% 30%, #7cb342, #4b5320);
}

.client-badge.amazon-badge {
    background: linear-gradient(135deg, #fff8e1 0%, #fff 100%);
    border: 2px solid #ff9900;
}

.client-badge.amazon-badge .pin {
    background: radial-gradient(circle at 30% 30%, #ffb74d, #ff9900);
}

.client-badge.yelp-badge .pin {
    background: radial-gradient(circle at 30% 30%, #ef5350, #d32323);
}

.client-badge.healthfirst-badge {
    background: linear-gradient(135deg, #e8f5e9 0%, #fff 100%);
    border: 2px solid #00a651;
}

.client-badge.healthfirst-badge .pin {
    background: radial-gradient(circle at 30% 30%, #66bb6a, #00a651);
}

.client-badge.sapphire-badge {
    background: linear-gradient(135deg, #e3f2fd 0%, #fff 100%);
    border: 2px solid #1e3a5f;
}

.client-badge.sapphire-badge .pin {
    background: radial-gradient(circle at 30% 30%, #4fc3f7, #0288d1);
}

.client-badge.hospital-badge {
    background: linear-gradient(135deg, #e3f2fd 0%, #fff 100%);
    border: 2px solid #0066b3;
}

.client-badge.hospital-badge .pin {
    background: radial-gradient(circle at 30% 30%, #42a5f5, #0066b3);
}

.client-badge.target-badge .pin {
    background: radial-gradient(circle at 30% 30%, #ef5350, #cc0000);
}

/* CTA at bottom of board */
.clients-cta {
    text-align: center;
    padding: 30px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.1), transparent);
    position: relative;
    z-index: 5;
}

.clients-cta p {
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 20px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.clients-cta .btn {
    margin: 0 8px;
}

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

.clients-cta .btn-outline:hover {
    background: var(--white);
    color: var(--secondary);
}

/* Google Reviews CTA */
.google-reviews-cta {
    text-align: center;
    padding: 25px 30px 35px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    z-index: 5;
}

.google-reviews-cta .reviews-stars {
    margin-bottom: 10px;
}

.google-reviews-cta .reviews-stars .star {
    color: #FFC107;
    font-size: 1.5rem;
    margin: 0 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.google-reviews-cta .reviews-text {
    color: var(--white);
    font-size: 1rem;
    margin-bottom: 15px;
    opacity: 0.9;
}

.btn-google-review {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    color: var(--gray-800);
    border: 2px solid var(--white);
    padding: 12px 24px;
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.btn-google-review:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--secondary);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.btn-google-review .google-icon {
    flex-shrink: 0;
}

/* Standalone Google Reviews Section (Always Visible) */
.google-reviews-standalone {
    text-align: center;
    padding: 40px 30px;
    background: linear-gradient(135deg, #02344D 0%, #012636 100%);
    border-radius: var(--radius-xl);
    margin: 20px auto 0;
    max-width: 1000px;
    box-shadow: 0 10px 40px rgba(2, 52, 77, 0.4);
}

.google-reviews-standalone .reviews-stars {
    margin-bottom: 12px;
}

.google-reviews-standalone .reviews-stars .star {
    color: #FFC107;
    font-size: 1.8rem;
    margin: 0 3px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.google-reviews-standalone .reviews-text {
    color: var(--white);
    font-size: 1.1rem;
    margin-bottom: 20px;
    opacity: 0.95;
}

@media (max-width: 768px) {
    .google-reviews-standalone {
        padding: 30px 20px;
        margin-top: 20px;
    }

    .google-reviews-standalone .reviews-stars .star {
        font-size: 1.4rem;
    }

    .google-reviews-standalone .reviews-text {
        font-size: 1rem;
    }
}

/* Click hint on badges */
.click-hint {
    display: block;
    font-size: 0.65rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
    opacity: 0;
    transform: translateY(-5px);
    transition: all var(--transition-fast);
}

.client-badge:hover .click-hint {
    opacity: 1;
    transform: translateY(0);
}

.client-badge {
    cursor: pointer;
}

/* Testimonial Modal */
.testimonial-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(7, 100, 35, 0.92);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.testimonial-modal.active {
    opacity: 1;
    visibility: visible;
}

.testimonial-modal-content {
    background: var(--white);
    border-radius: var(--radius-xl);
    max-width: 500px;
    width: 100%;
    padding: 40px;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
}

.testimonial-modal.active .testimonial-modal-content {
    transform: scale(1) translateY(0);
}

.testimonial-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--gray-400);
    transition: color var(--transition-fast);
    line-height: 1;
}

.testimonial-close:hover {
    color: var(--gray-800);
}

.testimonial-header {
    text-align: center;
    margin-bottom: 25px;
}

.testimonial-logo {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-logo svg {
    width: 100%;
    height: 100%;
}

.modal-logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.modal-celebration-icon,
.modal-conference-icon {
    width: 80px;
    height: 80px;
    background: var(--secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    font-family: var(--font-heading);
}

.testimonial-client {
    font-size: 1.4rem;
    color: var(--secondary);
    margin-bottom: 5px;
}

.testimonial-type {
    display: inline-block;
    background: var(--cream);
    color: var(--gray-700);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.testimonial-body {
    position: relative;
    padding: 20px 0;
}

.quote-mark {
    position: absolute;
    top: 0;
    left: -10px;
    font-size: 5rem;
    font-family: Georgia, serif;
    color: var(--primary);
    opacity: 0.3;
    line-height: 1;
}

.testimonial-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--gray-700);
    font-style: italic;
    text-align: center;
    padding: 0 10px;
    margin-bottom: 20px;
}

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

.testimonial-rating .star {
    color: var(--primary);
    font-size: 1.4rem;
    margin: 0 2px;
}

.testimonial-footer {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid var(--gray-200);
    margin-top: 20px;
}

.testimonial-source {
    font-size: 0.8rem;
    color: var(--gray-500);
    font-style: italic;
}

/* Responsive Design for Clients Section */
@media (max-width: 900px) {
    .banner-content {
        flex-direction: column;
        gap: 20px;
        padding: 25px;
    }

    .banner-left {
        display: none;
    }

    .banner-right {
        order: 3;
    }

    .clients-board {
        padding: 40px 20px;
        gap: 15px;
        grid-template-columns: repeat(2, 1fr);
    }

    .client-badge {
        width: 220px;
        height: 130px;
        padding: 12px 15px;
    }
}

@media (max-width: 600px) {
    .clients-section {
        padding: 50px 0;
    }

    .clients-board {
        grid-template-columns: 1fr;
        padding: 30px 15px;
        gap: 10px;
    }

    .client-badge {
        width: 280px;
        height: 160px;
    }

    .banner-content {
        padding: 20px 15px;
    }

    .banner-title {
        font-size: 1.3rem;
    }

    .banner-subtitle {
        font-size: 0.8rem;
    }

    .cta-arrow {
        width: 45px;
        height: 45px;
    }

    .cta-arrow svg {
        width: 24px;
        height: 24px;
    }

    .clients-cta {
        padding: 25px 15px;
    }

    .clients-cta .btn {
        display: block;
        margin: 10px auto;
        max-width: 200px;
    }

    .google-reviews-cta {
        padding: 20px 15px 25px;
    }

    .google-reviews-cta .reviews-stars .star {
        font-size: 1.2rem;
    }

    .google-reviews-cta .reviews-text {
        font-size: 0.9rem;
    }

    .btn-google-review {
        padding: 10px 20px;
        font-size: 0.85rem;
    }
}

/* =============================================
   Patois Word of the Day Section
   ============================================= */
.patois-section {
    padding: 80px 0;
    background: var(--stripe-teal);
    position: relative;
    overflow: hidden;
}

/* Decorative background pattern */
.patois-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(254, 209, 0, 0.1) 0%, transparent 30%),
        radial-gradient(circle at 90% 80%, rgba(0, 155, 58, 0.1) 0%, transparent 30%);
    pointer-events: none;
}

/* Jamaican flag stripe at top */
.patois-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg,
        var(--accent) 0%, var(--accent) 33%,
        var(--primary) 33%, var(--primary) 66%,
        var(--accent) 66%, var(--accent) 100%);
}

.patois-wrapper {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
}

.patois-header {
    text-align: center;
    margin-bottom: 40px;
}

.patois-tag {
    display: inline-block;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.patois-header h2 {
    color: var(--white);
    margin-bottom: 12px;
}

.patois-header p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
}

/* Flashcard Container */
.patois-card-container {
    perspective: 1000px;
    margin-bottom: 30px;
}

.patois-card {
    position: relative;
    width: 100%;
    height: 320px;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.patois-card.flipped {
    transform: rotateY(180deg);
}

.patois-card-front,
.patois-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 30px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.patois-card-front {
    background: linear-gradient(145deg, var(--primary), var(--primary-light));
    color: var(--secondary);
}

.patois-card-back {
    background: linear-gradient(145deg, var(--white), var(--off-white));
    color: var(--secondary);
    transform: rotateY(180deg);
}

/* Card corner decorations */
.card-decoration {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 0, 0, 0.15);
}

.card-decoration.top-left {
    top: 15px;
    left: 15px;
    border-right: none;
    border-bottom: none;
}

.card-decoration.top-right {
    top: 15px;
    right: 15px;
    border-left: none;
    border-bottom: none;
}

.card-decoration.bottom-left {
    bottom: 15px;
    left: 15px;
    border-right: none;
    border-top: none;
}

.card-decoration.bottom-right {
    bottom: 15px;
    right: 15px;
    border-left: none;
    border-top: none;
}

.patois-card-back .card-decoration {
    border-color: var(--accent);
    opacity: 0.3;
}

/* Tap hint */
.tap-hint {
    position: absolute;
    top: 20px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.6;
    animation: pulseOpacity 2s ease-in-out infinite;
}

@keyframes pulseOpacity {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* Front card content */
.patois-word-display {
    text-align: center;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.patois-word {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: 700;
    color: var(--secondary);
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.3);
    line-height: 1.1;
    text-align: center;
}

.card-footer-front {
    margin-top: auto;
}

.pronunciation {
    font-style: italic;
    font-size: 1.1rem;
    opacity: 0.8;
    color: var(--secondary);
}

/* Back card content */
.meaning-content {
    text-align: center;
    width: 100%;
}

.meaning-label,
.example-label,
.translation-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent);
    margin-bottom: 5px;
    font-weight: 600;
}

.patois-meaning {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--secondary);
    margin-bottom: 25px;
    line-height: 1.3;
}

.patois-example {
    font-size: 1rem;
    color: var(--gray-700);
    font-style: italic;
    margin-bottom: 8px;
    padding: 0 10px;
}

.patois-translation {
    font-size: 0.9rem;
    color: var(--gray-500);
    margin-bottom: 0;
}

/* Controls */
.patois-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 25px;
}

.patois-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.patois-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--secondary);
    transform: scale(1.1);
}

.patois-btn svg {
    width: 24px;
    height: 24px;
}

.word-counter {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.word-counter span:first-child {
    color: var(--primary);
    font-weight: 700;
}

/* Action buttons */
.patois-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.patois-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.patois-actions .btn-outline {
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--white);
}

.patois-actions .btn-outline:hover {
    background: var(--white);
    color: var(--secondary);
    border-color: var(--white);
}

/* Quiz Overlay */
.quiz-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(7, 100, 35, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    padding: 20px;
}

.quiz-overlay.active {
    opacity: 1;
    visibility: visible;
}

.quiz-content {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 40px;
    max-width: 500px;
    width: 100%;
    text-align: center;
    position: relative;
    animation: scaleIn 0.3s ease-out;
}

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.quiz-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--gray-500);
    transition: color var(--transition-fast);
}

.quiz-close:hover {
    color: var(--gray-800);
}

.quiz-content h3 {
    color: var(--secondary);
    margin-bottom: 20px;
}

.quiz-word {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--primary-dark);
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border-radius: var(--radius-lg);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.quiz-option {
    padding: 15px 20px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--white);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 1rem;
    text-align: left;
}

.quiz-option:hover {
    border-color: var(--accent);
    background: rgba(0, 155, 58, 0.05);
}

.quiz-option.correct {
    border-color: var(--accent);
    background: rgba(0, 155, 58, 0.15);
    color: var(--accent-dark);
}

.quiz-option.incorrect {
    border-color: #e74c3c;
    background: rgba(231, 76, 60, 0.15);
    color: #c0392b;
}

.quiz-option.disabled {
    pointer-events: none;
    opacity: 0.7;
}

.quiz-result {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 20px;
    min-height: 30px;
}

.quiz-result.correct {
    color: var(--accent);
}

.quiz-result.incorrect {
    color: #e74c3c;
}

.quiz-next {
    margin-bottom: 20px;
}

.quiz-score {
    font-size: 0.9rem;
    color: var(--gray-600);
    padding-top: 15px;
    border-top: 1px solid var(--gray-200);
}

.quiz-score span {
    color: var(--accent);
    font-weight: 700;
}

/* Responsive */
@media (max-width: 600px) {
    .patois-section {
        padding: 60px 0;
    }

    .patois-card {
        height: 280px;
    }

    .patois-card-front,
    .patois-card-back {
        padding: 30px 20px;
    }

    .patois-word {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .patois-meaning {
        font-size: 1.3rem;
    }

    .patois-controls {
        gap: 20px;
    }

    .patois-btn {
        width: 45px;
        height: 45px;
    }

    .patois-actions {
        flex-direction: column;
        align-items: center;
    }

    .patois-actions .btn {
        width: 100%;
        max-width: 250px;
    }

    .quiz-content {
        padding: 30px 20px;
    }

    .quiz-word {
        font-size: 2rem;
        padding: 15px;
    }
}

/* Compact Patois Section - Reduced Height */
.patois-section.patois-compact {
    padding: 30px 0;
}

.patois-compact .patois-wrapper {
    max-width: 500px;
}

.patois-compact .patois-header {
    margin-bottom: 15px;
}

.patois-compact .patois-header h2 {
    font-size: 1.4rem;
    margin-bottom: 5px;
}

.patois-compact .patois-header p {
    font-size: 0.85rem;
    margin-bottom: 0;
}

.patois-compact .patois-tag {
    font-size: 0.7rem;
    margin-bottom: 5px;
    letter-spacing: 2px;
}

.patois-compact .patois-card-container {
    margin-bottom: 15px;
}

.patois-compact .patois-card {
    height: 120px;
}

.patois-compact .patois-card-front,
.patois-compact .patois-card-back {
    padding: 15px 20px;
}

.patois-compact .patois-word {
    font-size: 1.8rem;
}

.patois-compact .patois-word-display {
    margin-bottom: 5px;
}

.patois-compact .tap-hint {
    font-size: 0.65rem;
    top: 8px;
    right: 12px;
}

.patois-compact .pronunciation {
    font-size: 0.85rem;
}

.patois-compact .card-decoration {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.patois-compact .card-decoration.top-left,
.patois-compact .card-decoration.top-right {
    top: 8px;
}

.patois-compact .card-decoration.bottom-left,
.patois-compact .card-decoration.bottom-right {
    bottom: 8px;
}

.patois-compact .card-decoration.top-left,
.patois-compact .card-decoration.bottom-left {
    left: 8px;
}

.patois-compact .card-decoration.top-right,
.patois-compact .card-decoration.bottom-right {
    right: 8px;
}

.patois-compact .meaning-content {
    padding: 0 5px;
}

.patois-compact .meaning-label,
.patois-compact .example-label,
.patois-compact .translation-label {
    font-size: 0.6rem;
    margin-bottom: 2px;
}

.patois-compact .patois-meaning {
    font-size: 0.95rem;
    margin-bottom: 5px;
}

.patois-compact .patois-example {
    font-size: 0.75rem;
    margin-bottom: 3px;
}

.patois-compact .patois-translation {
    font-size: 0.7rem;
}

.patois-compact .card-footer-front {
    margin-top: 5px;
}

.patois-compact .patois-controls {
    gap: 20px;
    margin-bottom: 12px;
}

.patois-compact .patois-btn {
    width: 36px;
    height: 36px;
}

.patois-compact .patois-btn svg {
    width: 18px;
    height: 18px;
}

.patois-compact .word-counter {
    font-size: 0.8rem;
}

.patois-compact .patois-actions {
    gap: 10px;
}

.patois-compact .patois-actions .btn {
    padding: 8px 16px;
    font-size: 0.8rem;
}

.patois-compact .patois-actions .btn svg {
    width: 14px;
    height: 14px;
}

/* Responsive adjustments for compact patois */
@media (max-width: 600px) {
    .patois-section.patois-compact {
        padding: 25px 0;
    }

    .patois-compact .patois-card {
        height: 110px;
    }

    .patois-compact .patois-word {
        font-size: 1.5rem;
    }

    .patois-compact .patois-actions {
        flex-direction: row;
    }

    .patois-compact .patois-actions .btn {
        width: auto;
        max-width: none;
        padding: 6px 12px;
        font-size: 0.75rem;
    }
}

/* =============================================
   Cookie Consent Banner
   ============================================= */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--secondary);
    color: var(--white);
    padding: 0;
    z-index: 10000;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.cookie-consent.show {
    transform: translateY(0);
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.cookie-content h4 {
    color: var(--primary);
    font-size: 1.1rem;
    margin: 0 0 5px 0;
    font-weight: 700;
}

.cookie-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
    flex: 1;
    min-width: 300px;
}

.cookie-content p a {
    color: var(--primary);
    text-decoration: underline;
}

.cookie-content p a:hover {
    color: var(--primary-light);
}

.cookie-buttons {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.btn-cookie-accept {
    background: var(--primary);
    color: var(--secondary);
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-cookie-accept:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.btn-cookie-necessary {
    background: transparent;
    color: var(--white);
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-cookie-necessary:hover {
    border-color: var(--white);
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        gap: 15px;
    }

    .cookie-content p {
        min-width: auto;
    }

    .cookie-buttons {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .cookie-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-cookie-accept,
    .btn-cookie-necessary {
        width: 100%;
    }
}

/* =============================================
   2026 Corporate Catering Focus - New Styles
   ============================================= */

/* Hero Section Updates */
.hero-main {
    display: block;
    font-family: var(--font-body);
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: 500;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 3px;
    animation: fadeInUp 1s ease-out 0.2s backwards;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
}

.hero-impact {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--primary);
    margin-top: 15px;
    margin-bottom: 25px;
    animation: fadeInUp 1s ease-out 0.7s backwards;
    font-weight: 500;
}

.hero-clients {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    animation: fadeInUp 1s ease-out 0.75s backwards;
}

.hero-clients-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.9;
}

.hero-client-logos {
    display: flex;
    gap: 25px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-client-logo {
    height: 35px;
    width: auto;
    max-width: 70px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.9);
    padding: 5px 10px;
    border-radius: 4px;
    transition: transform var(--transition-base);
}

.hero-client-logo:hover {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .hero-client-logos {
        gap: 15px;
    }

    .hero-client-logo {
        height: 25px;
        max-width: 50px;
    }
}

/* =============================================
   Pay It Forward Section (Tabbed)
   ============================================= */
.pay-it-forward-section {
    padding: 40px 0;
    background: linear-gradient(135deg, var(--secondary), var(--secondary-light));
    position: relative;
}

.pif-tabbed-wrapper {
    max-width: 900px;
    margin: 0 auto;
    background: var(--white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.pif-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    flex-wrap: wrap;
    gap: 15px;
}

.pif-title-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pif-heart-icon {
    width: 28px;
    height: 28px;
    fill: var(--white);
}

.pif-header-bar h2 {
    color: var(--white);
    margin: 0;
    font-size: 1.3rem;
}

.pif-tabs {
    display: flex;
    gap: 5px;
}

.pif-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

.pif-tab:hover {
    background: rgba(255, 255, 255, 0.25);
    color: var(--white);
}

.pif-tab.active {
    background: var(--white);
    color: #c0392b;
}

.pif-tab .tab-icon {
    display: flex;
    align-items: center;
}

.pif-tab .tab-icon svg {
    width: 16px;
    height: 16px;
}

.pif-tab.active .tab-icon svg {
    stroke: #c0392b;
}

.pif-tab-content {
    padding: 30px;
}

.pif-panel {
    display: none;
}

.pif-panel.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.panel-content h3 {
    color: var(--secondary);
    font-size: 1.1rem;
    margin-bottom: 12px;
}

.panel-content p {
    color: var(--gray-700);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.pif-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pif-list li {
    padding: 8px 0;
    padding-left: 20px;
    position: relative;
    color: var(--gray-700);
    font-size: 0.9rem;
}

.pif-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 8px;
    height: 8px;
    background: #e74c3c;
    border-radius: 50%;
}

/* Impact Stats */
.impact-stats {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
}

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

.stat-number {
    display: block;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: #e74c3c;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Get Involved Options */
.involve-options {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.involve-option {
    flex: 1;
    padding: 15px;
    background: var(--cream);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.involve-option:hover {
    border-color: #e74c3c;
    transform: translateY(-2px);
}

.involve-option strong {
    display: block;
    color: var(--secondary);
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.involve-option span {
    color: var(--gray-600);
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .pay-it-forward-section {
        padding: 30px 0;
    }

    .pif-header-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .pif-tabs {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .pif-tab {
        padding: 8px 12px;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .pif-tab .tab-text {
        display: none;
    }

    .pif-tab.active .tab-text {
        display: inline;
    }

    .pif-tab-content {
        padding: 20px;
    }

    .impact-stats {
        flex-direction: column;
        gap: 15px;
    }

    .involve-options {
        flex-direction: column;
    }
}

/* =============================================
   Corporate Wellness Meal Programs Section
   ============================================= */
.corporate-programs-section {
    padding: 100px 0;
    background: var(--cream);
    position: relative;
}

.corporate-programs-content {
    max-width: 1000px;
    margin: 0 auto;
}

.programs-intro {
    text-align: center;
    margin-bottom: 40px;
}

.programs-lead {
    font-size: 1.2rem;
    color: var(--gray-700);
}

.programs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.program-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 35px;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.program-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-color: var(--accent);
}

.program-card.featured {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-light));
    color: var(--white);
}

.program-card.featured h3 {
    color: var(--white);
}

.program-card.featured p {
    color: rgba(255, 255, 255, 0.9);
}

.program-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.program-card.featured .program-icon {
    background: var(--primary);
}

.program-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--white);
    fill: var(--white);
}

.program-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    color: var(--secondary);
}

.program-card p {
    color: var(--gray-600);
    font-size: 0.95rem;
    margin: 0;
}

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

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

    .program-card {
        padding: 25px;
    }
}

/* =============================================
   Caribbean Wellness Juices Section
   ============================================= */
.wellness-juices-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f0f9f4 0%, #e8f5e9 50%, #f1f8e9 100%);
    position: relative;
    overflow: hidden;
}

.wellness-juices-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5c-2 8-8 14-16 16 8 2 14 8 16 16 2-8 8-14 16-16-8-2-14-8-16-16z' fill='%2316a34a' fill-opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
}

.wellness-juices-section .section-header {
    position: relative;
    z-index: 1;
}

.wellness-juices-section .section-tag {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
}

.juices-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 50px;
    position: relative;
    z-index: 1;
}

.juice-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all var(--transition-base);
    border: 1px solid rgba(34, 197, 94, 0.1);
    display: flex;
    flex-direction: column;
}

.juice-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.3);
}

.juice-image {
    position: relative;
    height: 320px;
    overflow: hidden;
    background: #f8f8f8;
}

.juice-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--transition-base);
}

.juice-card:hover .juice-image img {
    transform: scale(1.05);
}

.juice-content {
    padding: 20px;
    text-align: center;
}

.juice-content h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--secondary);
    margin: 0 0 8px 0;
}

.juice-taste {
    display: inline-block;
    font-size: 0.8rem;
    color: #16a34a;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.juice-content p {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

.juices-footer {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.juices-message {
    font-size: 1.1rem;
    color: var(--gray-700);
    line-height: 1.7;
    margin-bottom: 15px;
}

.juices-availability {
    font-size: 0.95rem;
    color: var(--gray-500);
    font-style: italic;
    margin-bottom: 25px;
}

.juices-cta {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    padding: 14px 32px;
    font-size: 1rem;
}

.juices-cta:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4);
}

/* Wellness Juices Responsive */
@media (max-width: 1200px) {
    .juices-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .juice-image {
        height: 280px;
    }
}

@media (max-width: 1024px) {
    .juices-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .juice-image {
        height: 320px;
    }
}

@media (max-width: 600px) {
    .juices-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        max-width: 100%;
    }

    .juice-image {
        height: 220px;
    }

    .juice-content {
        padding: 15px;
    }

    .juice-content h3 {
        font-size: 1.1rem;
    }

    .juice-content p {
        font-size: 0.85rem;
    }

    .wellness-juices-section {
        padding: 70px 0;
    }

    .juices-message {
        font-size: 1rem;
    }
}

@media (max-width: 400px) {
    .juices-grid {
        grid-template-columns: 1fr;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }

    .juice-image {
        height: 300px;
    }
}

/* =============================================
   Why Corporate Partners Choose Golden Krust
   ============================================= */
.why-gk-section {
    padding: 100px 0;
    background: var(--stripe-navy);
    color: var(--white);
}

.why-gk-section .section-header h2,
.why-gk-section .section-header p {
    color: var(--white);
}

.why-gk-section .section-tag {
    color: var(--primary);
}

.why-gk-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.why-gk-content {
    text-align: center;
}

.why-gk-credentials {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    padding: 40px;
    margin: 40px 0;
}

.why-gk-credentials h3 {
    color: var(--primary);
    margin-bottom: 30px;
    font-size: 1.3rem;
}

.credentials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.credential-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
}

.credential-icon {
    width: 60px;
    height: 60px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.credential-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--secondary);
    fill: none;
}

.credential-text strong {
    display: block;
    font-size: 1rem;
    color: var(--white);
    margin-bottom: 5px;
}

.credential-text span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.why-gk-closing {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    margin-bottom: 30px;
}

.why-gk-cta {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.why-gk-cta .btn-outline {
    color: var(--white);
    border-color: var(--white);
}

.why-gk-cta .btn-outline:hover {
    background: var(--white);
    color: var(--secondary);
}

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

    .why-gk-credentials {
        padding: 25px;
    }

    .why-gk-cta {
        flex-direction: column;
        align-items: center;
    }
}

/* =============================================
   Clients Section - Categorized Layout
   ============================================= */
.clients-categorized {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 40px !important;
}

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

.category-title {
    font-size: 1.1rem;
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.category-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}

.category-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.clients-categorized .client-badge {
    position: relative;
    transform: rotate(var(--rotation, 0deg));
}

@media (max-width: 768px) {
    .clients-categorized {
        padding: 25px !important;
        gap: 30px;
    }

    .category-badges {
        gap: 15px;
    }
}

/* =============================================
   Why Premium Button & Modal Styles
   ============================================= */

.btn-why-premium {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--stripe-teal);
    border: 2px solid var(--stripe-teal);
    color: var(--white);
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    margin-top: 15px;
}

.btn-why-premium:hover {
    background: #0d5a68;
    border-color: #0d5a68;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(16, 109, 124, 0.4);
}

.wink-emoji {
    font-size: 1.3em;
    display: inline-block;
    animation: wink 3s ease-in-out infinite;
}

@keyframes wink {
    0%, 85%, 100% {
        transform: scale(1) rotate(0deg);
    }
    88% {
        transform: scale(1.2) rotate(-5deg);
    }
    91% {
        transform: scale(0.9) scaleY(0.3);
    }
    94% {
        transform: scale(1.1) rotate(5deg);
    }
    97% {
        transform: scale(1);
    }
}

/* Why Premium Modal */
.why-premium-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(16, 109, 124, 0.95);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    padding: 20px;
    overflow-y: auto;
}

.why-premium-modal.active {
    opacity: 1;
    visibility: visible;
}

.why-premium-modal-content {
    background: var(--white);
    border-radius: var(--radius-xl);
    max-width: 550px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: slideUp 0.4s ease-out;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.why-premium-modal-content .modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(--white);
    font-size: 1.8rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    z-index: 10;
}

.why-premium-modal-content .modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.why-premium-header {
    text-align: center;
    padding: 40px 30px 30px;
    background: linear-gradient(135deg, var(--stripe-teal) 0%, #0d5a68 100%);
    color: var(--white);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.why-premium-icon {
    font-size: 3.5rem;
    margin-bottom: 15px;
    animation: float 3s ease-in-out infinite;
}

.why-premium-header h2 {
    font-family: var(--font-heading);
    color: var(--white);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin: 0;
}

.why-premium-body {
    padding: 30px;
}

.why-premium-intro {
    font-size: 1.1rem;
    color: var(--gray-800);
    line-height: 1.7;
    margin-bottom: 20px;
}

.why-premium-details {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.7;
    padding-left: 20px;
    border-left: 3px solid var(--stripe-teal);
}

.why-premium-footer {
    padding: 20px 30px 30px;
    text-align: center;
    background: var(--gray-100);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.why-premium-footer .btn-gold {
    padding: 14px 32px;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .btn-why-premium {
        padding: 10px 18px;
        font-size: 0.9rem;
    }

    .why-premium-modal-content {
        margin: 10px;
    }

    .why-premium-header {
        padding: 30px 20px 25px;
    }

    .why-premium-body {
        padding: 20px;
    }

    .why-premium-footer {
        padding: 15px 20px 25px;
    }
}

/* =============================================
   Premium Dish Modal
   ============================================= */

.premium-dish-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(16, 109, 124, 0.95);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 20px;
    overflow-y: auto;
    backdrop-filter: blur(8px);
}

.premium-dish-modal.active {
    opacity: 1;
    visibility: visible;
}

.premium-dish-modal-content {
    background: var(--white);
    border-radius: var(--radius-xl);
    max-width: 420px;
    width: 100%;
    position: relative;
    transform: scale(0.9) translateY(30px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.premium-dish-modal.active .premium-dish-modal-content {
    transform: scale(1) translateY(0);
}

.premium-dish-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: var(--white);
    font-size: 1.8rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    z-index: 10;
    line-height: 1;
}

.premium-dish-modal-close:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: rotate(90deg);
}

.premium-dish-modal-image {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
}

.premium-dish-modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.premium-dish-modal.active .premium-dish-modal-image img {
    transform: scale(1.05);
}

.premium-dish-modal-badge {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: linear-gradient(135deg, var(--gold) 0%, #e6a800 100%);
    color: var(--secondary);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.premium-dish-modal-body {
    padding: 28px;
    text-align: center;
}

.premium-dish-modal-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--secondary);
    margin: 0 0 12px 0;
}

.premium-dish-modal-desc {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.7;
    margin: 0 0 20px 0;
}

.premium-dish-modal-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--stripe-teal);
    margin-bottom: 24px;
}

.premium-dish-modal-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.premium-dish-modal-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4);
}

.premium-dish-modal-cta svg {
    transition: transform var(--transition-fast);
}

.premium-dish-modal-cta:hover svg {
    transform: translateX(4px);
}

/* Premium dish card clickable styles */
.premium-dish-card {
    cursor: pointer;
}

.premium-dish-card::after {
    content: 'Click to view';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: var(--gray-500);
    opacity: 0;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.premium-dish-card {
    position: relative;
    padding-bottom: 25px;
}

.premium-dish-card:hover::after {
    opacity: 1;
    bottom: 0;
}

.premium-dish-card:hover img {
    border-color: var(--gold);
    box-shadow: 0 0 25px rgba(255, 193, 7, 0.5);
}

/* Premium dish modal responsive */
@media (max-width: 768px) {
    .premium-dish-modal-content {
        margin: 10px;
        max-width: 100%;
    }

    .premium-dish-modal-image {
        height: 200px;
    }

    .premium-dish-modal-body {
        padding: 20px;
    }

    .premium-dish-modal-title {
        font-size: 1.5rem;
    }

    .premium-dish-modal-desc {
        font-size: 0.95rem;
    }

    .premium-dish-modal-price {
        font-size: 1.2rem;
    }
}

/* =============================================
   Patty Flavor Selection Modal
   ============================================= */

.patty-flavor-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

.patty-flavor-modal.active {
    opacity: 1;
    visibility: visible;
}

.patty-flavor-modal-content {
    background: linear-gradient(135deg, #fff9e6 0%, #fffef5 100%);
    border-radius: var(--radius-xl);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 30px;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: all var(--transition-base);
    border: 2px solid var(--stripe-teal);
}

.patty-flavor-modal.active .patty-flavor-modal-content {
    transform: scale(1) translateY(0);
}

.patty-flavor-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--stripe-teal);
    color: var(--white);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    z-index: 10;
}

.patty-flavor-modal-close:hover {
    background: #0d5a68;
    transform: rotate(90deg);
}

.patty-flavor-modal-header {
    text-align: center;
    margin-bottom: 25px;
}

.patty-flavor-badge {
    display: inline-block;
    background: var(--stripe-teal);
    color: var(--white);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.patty-flavor-modal-header h3 {
    color: var(--stripe-teal);
    font-size: 1.8rem;
    margin: 10px 0;
}

.patty-flavor-subtitle {
    color: var(--gray-600);
    font-size: 0.95rem;
}

.patty-flavor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.patty-flavor-option {
    cursor: pointer;
}

.patty-flavor-option input[type="checkbox"] {
    display: none;
}

.patty-flavor-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 10px;
    border: 2px solid rgba(16, 109, 124, 0.2);
    border-radius: var(--radius-md);
    background: var(--white);
    transition: all var(--transition-fast);
    text-align: center;
}

.patty-flavor-option:hover .patty-flavor-card {
    border-color: rgba(16, 109, 124, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(16, 109, 124, 0.15);
}

.patty-flavor-option input[type="checkbox"]:checked + .patty-flavor-card {
    border-color: var(--stripe-teal);
    background: rgba(16, 109, 124, 0.08);
    box-shadow: 0 0 20px rgba(16, 109, 124, 0.2);
}

.patty-flavor-option input[type="checkbox"]:checked + .patty-flavor-card::before {
    content: '✓';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background: var(--stripe-teal);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.patty-flavor-card {
    position: relative;
}

.flavor-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.flavor-name {
    color: var(--stripe-teal);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.flavor-desc {
    color: var(--gray-500);
    font-size: 0.75rem;
    font-style: italic;
}

.patty-flavor-summary {
    text-align: center;
    padding: 12px;
    background: rgba(16, 109, 124, 0.08);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.patty-selected-count {
    color: var(--stripe-teal);
    font-weight: 600;
}

.patty-flavor-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.btn-outline-gold {
    background: transparent;
    border: 2px solid var(--stripe-teal);
    color: var(--stripe-teal);
    padding: 12px 25px;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

/* Patty Flavor Modal Responsive */
@media (max-width: 768px) {
    .patty-flavor-modal-content {
        padding: 20px;
    }

    .patty-flavor-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .patty-flavor-modal-header h3 {
        font-size: 1.4rem;
    }
}

@media (max-width: 480px) {
    .patty-flavor-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .patty-flavor-card {
        padding: 12px 8px;
    }

    .flavor-icon {
        font-size: 1.5rem;
    }

    .flavor-name {
        font-size: 0.85rem;
    }

    .patty-flavor-actions {
        flex-direction: column;
    }
}

/* =============================================
   Spotlight Card Styles (Standard Packages)
   ============================================= */

.spotlight-grid {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.spotlight-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    max-width: 500px;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
    transition: all var(--transition-base);
}

.spotlight-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-color: var(--accent);
}

.spotlight-icon {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spotlight-icon svg {
    width: 60px;
    height: 60px;
    color: var(--white);
}

.spotlight-content {
    padding: 30px;
    text-align: center;
}

.spotlight-content h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--secondary);
    margin-bottom: 10px;
}

.spotlight-price {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 5px;
}

.spotlight-price span {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--gray-600);
}

.spotlight-guests {
    font-size: 1.1rem;
    color: var(--gray-600);
    margin-bottom: 20px;
}

.spotlight-options {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.spotlight-options li {
    background: var(--gray-100);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--gray-700);
}

.spotlight-options li span {
    color: var(--gray-500);
    font-size: 0.85em;
}

.spotlight-includes {
    font-size: 0.95rem;
    color: var(--gray-600);
    margin-bottom: 25px;
    line-height: 1.6;
    padding: 15px;
    background: rgba(0, 155, 58, 0.05);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent);
}

/* =============================================
   Package Builder - Interactive Selection
   ============================================= */
.package-builder {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.builder-step {
    margin-bottom: 30px;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.step-header .step-number {
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

.step-header h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--secondary);
    margin: 0;
}

/* Package Options Grid */
.package-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.package-option {
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 16px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.package-option:hover {
    border-color: var(--primary);
    background: rgba(7, 100, 35, 0.03);
    transform: translateY(-2px);
}

.package-option.selected {
    border-color: var(--primary);
    background: rgba(7, 100, 35, 0.08);
    box-shadow: 0 4px 12px rgba(7, 100, 35, 0.15);
}

.package-option.selected::after {
    content: '✓';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.package-option {
    position: relative;
}

.package-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--secondary);
}

.package-guests {
    font-size: 0.8rem;
    color: var(--gray-600);
}

.package-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
}

.package-price small {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--gray-600);
}

/* Protein Options Grid */
.protein-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.protein-option {
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.protein-option:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.protein-option.selected {
    border-color: var(--primary);
    border-width: 3px;
    box-shadow: 0 4px 16px rgba(7, 100, 35, 0.2);
}

.protein-option.selected::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    z-index: 10;
}

.protein-option.premium {
    border-color: var(--accent);
}

.protein-option.premium:hover {
    border-color: #d4a849;
}

.protein-option.premium.selected {
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(198, 169, 95, 0.3);
}

.protein-option.premium.selected::after {
    background: var(--accent);
    color: var(--secondary);
}

.protein-img {
    height: 90px;
    overflow: hidden;
    position: relative;
}

.protein-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.protein-option:hover .protein-img img {
    transform: scale(1.05);
}

.premium-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, var(--accent) 0%, #d4a849 100%);
    color: var(--secondary);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
}

.protein-option .protein-name {
    display: block;
    padding: 10px 8px 4px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--secondary);
    text-align: center;
}

.protein-option .protein-price {
    display: block;
    padding: 0 8px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

.protein-option .protein-price.included {
    color: var(--accent);
}

.protein-option .protein-price.premium {
    color: #c69a2f;
}

/* Builder Summary */
.builder-summary {
    background: linear-gradient(135deg, var(--accent) 0%, #054d1a 100%);
    border-radius: var(--radius-lg);
    padding: 20px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 25px;
    animation: slideDown 0.3s ease-out;
}

.summary-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.summary-selection {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--white);
}

.summary-label {
    font-size: 0.85rem;
    opacity: 0.8;
}

.summary-package,
.summary-protein {
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary);
}

.summary-divider {
    font-size: 0.85rem;
    opacity: 0.6;
}

.summary-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--white);
}

.summary-price-label {
    font-size: 0.8rem;
    opacity: 0.8;
}

.summary-price-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
}

.summary-price-per {
    font-size: 0.9rem;
    opacity: 0.8;
}

.btn-order {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}

.btn-order svg {
    transition: transform 0.2s ease;
}

.btn-order:hover svg {
    transform: translateX(4px);
}

/* Builder Includes */
.builder-includes {
    margin-top: 20px;
    padding: 15px;
    background: rgba(7, 100, 35, 0.05);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary);
}

.builder-includes p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--gray-600);
}

.builder-includes strong {
    color: var(--primary);
}

/* Beverage Add-ons Step (Signature Builder) */
.beverage-step {
    background: linear-gradient(135deg, #f0f7f1 0%, #e8f4ea 100%);
    border-radius: var(--radius-lg);
    padding: 25px;
    margin-top: 20px;
    border: 2px solid rgba(7, 100, 35, 0.15);
}

.beverage-intro {
    color: var(--gray-600);
    font-size: 0.95rem;
    margin-bottom: 20px;
    text-align: center;
}

.optional-tag {
    color: var(--gray-500);
    font-size: 0.85rem;
    font-weight: 400;
}

.beverage-options-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.beverage-option {
    background: var(--white);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    padding: 15px 10px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}

.beverage-option:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(7, 100, 35, 0.15);
}

.beverage-option.selected {
    border-color: var(--accent);
    background: rgba(7, 100, 35, 0.08);
    box-shadow: 0 0 20px rgba(7, 100, 35, 0.15);
}

.beverage-option.selected::after {
    content: '✓';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background: var(--accent);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.beverage-img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
}

.beverage-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-fast);
}

.beverage-option:hover .beverage-img img {
    transform: scale(1.1);
}

.beverage-name {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.9rem;
}

.beverage-price {
    color: var(--gray-500);
    font-size: 0.8rem;
}

.skip-beverages {
    display: block;
    margin: 0 auto;
    background: transparent;
    border: 2px solid var(--gray-300);
    color: var(--gray-600);
    padding: 10px 25px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.skip-beverages:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.summary-beverages {
    color: var(--primary);
    font-weight: 500;
    margin-left: 10px;
}

.summary-beverages::before {
    content: '+ ';
}

/* Responsive Package Builder */
@media (max-width: 768px) {
    .package-builder {
        padding: 20px 15px;
    }

    .package-options-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .protein-options-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .beverage-options-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .beverage-step {
        padding: 20px 15px;
    }

    .builder-summary {
        flex-direction: column;
        text-align: center;
    }

    .summary-content {
        flex-direction: column;
        gap: 10px;
    }

    .summary-selection {
        justify-content: center;
        flex-wrap: wrap;
    }

    .btn-order {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .package-options-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .package-option {
        padding: 12px 8px;
    }

    .package-name {
        font-size: 0.9rem;
    }

    .package-price {
        font-size: 1rem;
    }

    .protein-options-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .protein-img {
        height: 70px;
    }
}

/* =============================================
   Premium Executive Builder Styles
   ============================================= */

.premium-builder {
    background: linear-gradient(135deg, #2d1810 0%, #1a0f0a 100%);
    border-radius: var(--radius-xl);
    padding: 40px 30px;
    margin-top: 30px;
    position: relative;
    overflow: hidden;
}

.premium-builder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FED100' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.premium-builder-step {
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
}

.premium-step-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.premium-step-number {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #FED100 0%, #d4af37 100%);
    color: #1a0f0a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

.premium-step-header h3 {
    color: #FED100;
    font-size: 1.3rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Premium Package Options */
.premium-package-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.premium-package-option {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(254, 209, 0, 0.3);
    border-radius: var(--radius-lg);
    padding: 25px 20px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.premium-package-option:hover {
    background: rgba(254, 209, 0, 0.1);
    border-color: rgba(254, 209, 0, 0.6);
    transform: translateY(-3px);
}

.premium-package-option.selected {
    background: rgba(254, 209, 0, 0.15);
    border-color: #FED100;
    box-shadow: 0 0 30px rgba(254, 209, 0, 0.3);
}

.premium-package-option.selected::after {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background: #FED100;
    color: #1a0f0a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
}

.premium-package-option {
    position: relative;
}

.premium-option-badge {
    background: linear-gradient(135deg, #FED100 0%, #d4af37 100%);
    color: #1a0f0a;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.premium-option-badge.vip {
    background: linear-gradient(135deg, #8B0000 0%, #dc143c 100%);
    color: #FED100;
}

.premium-option-price {
    color: #FED100;
    font-size: 2rem;
    font-weight: 700;
}

.premium-option-price small {
    font-size: 0.9rem;
    font-weight: 400;
    opacity: 0.8;
}

.premium-option-guests {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.premium-option-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.4;
}

/* Premium Protein Grid */
.premium-protein-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.premium-protein-option {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(254, 209, 0, 0.2);
    border-radius: var(--radius-lg);
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.premium-protein-option:hover {
    background: rgba(254, 209, 0, 0.1);
    border-color: rgba(254, 209, 0, 0.5);
    transform: translateY(-3px);
}

.premium-protein-option.selected {
    background: rgba(254, 209, 0, 0.15);
    border-color: #FED100;
    box-shadow: 0 0 25px rgba(254, 209, 0, 0.25);
}

.premium-protein-img {
    width: 100%;
    height: 100px;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
}

.premium-protein-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.premium-protein-option:hover .premium-protein-img img {
    transform: scale(1.05);
}

.premium-upcharge-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #FED100;
    color: #1a0f0a;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
}

.premium-protein-name {
    color: #FED100;
    font-weight: 600;
    font-size: 1rem;
}

.premium-protein-tag {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-style: italic;
}

/* Premium Builder Summary */
.premium-builder-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #FED100 0%, #d4af37 100%);
    border-radius: var(--radius-lg);
    padding: 20px 25px;
    margin-top: 25px;
    position: relative;
    z-index: 1;
}

.premium-summary-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.premium-summary-selection {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.premium-summary-label {
    color: #1a0f0a;
    font-weight: 500;
}

.premium-summary-package,
.premium-summary-protein {
    color: #1a0f0a;
    font-weight: 700;
    background: rgba(26, 15, 10, 0.15);
    padding: 4px 12px;
    border-radius: 15px;
}

.premium-summary-divider {
    color: rgba(26, 15, 10, 0.7);
    font-style: italic;
}

.premium-summary-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.premium-summary-price-label {
    color: #1a0f0a;
    font-size: 0.85rem;
}

.premium-summary-price-value {
    color: #1a0f0a;
    font-size: 2rem;
    font-weight: 700;
}

.premium-summary-price-per {
    color: rgba(26, 15, 10, 0.7);
    font-size: 0.9rem;
}

.btn-premium-order {
    background: #1a0f0a;
    color: #FED100;
    border: none;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-premium-order:hover {
    background: #2d1810;
    color: #FED100;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(26, 15, 10, 0.4);
}

.btn-premium-order svg {
    stroke: currentColor;
}

/* Premium Builder Includes */
.premium-builder-includes {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(254, 209, 0, 0.2);
    position: relative;
    z-index: 1;
}

.premium-builder-includes p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
}

.premium-builder-includes strong {
    color: #FED100;
}

/* Premium Beverage Add-ons Step */
.premium-beverage-step {
    background: rgba(254, 209, 0, 0.08);
    border-radius: var(--radius-lg);
    padding: 25px;
    margin-top: 20px;
    border: 1px solid rgba(254, 209, 0, 0.2);
}

.premium-beverage-intro {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin-bottom: 20px;
    text-align: center;
}

.premium-optional-tag {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    font-weight: 400;
}

.premium-beverage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.premium-beverage-option {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(254, 209, 0, 0.2);
    border-radius: var(--radius-md);
    padding: 15px 10px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}

.premium-beverage-option:hover {
    border-color: rgba(254, 209, 0, 0.5);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(254, 209, 0, 0.15);
}

.premium-beverage-option.selected {
    border-color: #FED100;
    background: rgba(254, 209, 0, 0.1);
    box-shadow: 0 0 20px rgba(254, 209, 0, 0.2);
}

.premium-beverage-option.selected::after {
    content: '✓';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background: #FED100;
    color: #1a0f0a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.premium-beverage-img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(254, 209, 0, 0.3);
}

.premium-beverage-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-fast);
}

.premium-beverage-option:hover .premium-beverage-img img {
    transform: scale(1.1);
}

.premium-beverage-name {
    color: #FED100;
    font-weight: 600;
    font-size: 0.9rem;
}

.premium-beverage-price {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

.skip-premium-beverages {
    display: block;
    margin: 0 auto;
}

.premium-summary-beverages {
    color: #1a0f0a;
    font-weight: 500;
    margin-left: 10px;
}

.premium-summary-beverages::before {
    content: '+ ';
}

/* Premium Builder Responsive */
@media (max-width: 992px) {
    .premium-protein-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .premium-beverage-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .premium-builder {
        padding: 25px 15px;
    }

    .premium-package-options {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .premium-beverage-step {
        padding: 20px 15px;
    }

    .premium-builder-summary {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .premium-summary-selection {
        justify-content: center;
        flex-wrap: wrap;
    }

    .premium-summary-price {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .premium-protein-grid {
        grid-template-columns: 1fr;
    }

    .premium-beverage-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .premium-option-price {
        font-size: 1.5rem;
    }
}

/* =============================================
   Premium Spotlight Card Styles
   ============================================= */

.premium-spotlight-wrapper {
    display: flex;
    justify-content: center;
    padding: 30px 0 10px;
}

.premium-spotlight-card {
    background: linear-gradient(135deg, var(--stripe-teal) 0%, #0d5a68 100%);
    border: 2px solid var(--stripe-teal);
    border-radius: var(--radius-xl);
    max-width: 550px;
    width: 100%;
    overflow: hidden;
    position: relative;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-lg);
}

.premium-spotlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(16, 109, 124, 0.4);
}

.premium-spotlight-badge {
    position: absolute;
    top: 15px;
    right: -35px;
    background: linear-gradient(135deg, var(--caribbean-gold) 0%, #e6bc00 100%);
    color: var(--secondary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 40px;
    transform: rotate(45deg);
}

.premium-spotlight-content {
    padding: 40px 30px;
    text-align: center;
}

.premium-spotlight-content h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--white);
    margin-bottom: 10px;
}

.premium-spotlight-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--caribbean-gold);
    margin-bottom: 5px;
}

.premium-spotlight-price span {
    font-size: 0.9rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
}

.premium-spotlight-guests {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
}

.premium-spotlight-desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    margin-bottom: 25px;
}

.premium-spotlight-content .btn-gold {
    padding: 14px 32px;
}

@media (max-width: 768px) {
    .spotlight-content {
        padding: 20px;
    }

    .spotlight-price {
        font-size: 1.5rem;
    }

    .spotlight-options {
        gap: 8px;
    }

    .spotlight-options li {
        padding: 6px 12px;
        font-size: 0.85rem;
    }

    .premium-spotlight-content {
        padding: 30px 20px;
    }

    .premium-spotlight-price {
        font-size: 1.6rem;
    }

    .premium-spotlight-badge {
        font-size: 0.65rem;
        padding: 5px 35px;
    }
}

/* =============================================
   Premium Appetizers - Cocktail Patty Trays
   ============================================= */

.premium-appetizers {
    margin-top: 50px;
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--primary);
}

.premium-appetizers-content {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 0;
}

.premium-appetizers-image {
    position: relative;
    overflow: hidden;
}

.premium-appetizers-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 350px;
    transition: transform var(--transition-slow);
}

.premium-appetizers:hover .premium-appetizers-image img {
    transform: scale(1.05);
}

.premium-appetizers-info {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.premium-appetizers-info .section-tag {
    display: inline-block;
    width: fit-content;
    margin-bottom: 15px;
}

.premium-appetizers-info h3 {
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 15px;
    font-family: var(--font-heading);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.premium-appetizers-info > p {
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.appetizer-flavors {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
}

.appetizer-flavors .flavor-tag {
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.appetizer-pricing {
    list-style: none;
    margin-bottom: 25px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
    padding: 20px;
}

.appetizer-pricing li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
}

.appetizer-pricing li:last-child {
    border-bottom: none;
}

.appetizer-pricing li .price {
    font-weight: 700;
    color: #ffdf4d;
    font-size: 1.1rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

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

    .premium-appetizers-image img {
        min-height: 250px;
    }

    .premium-appetizers-info {
        padding: 30px 25px;
    }

    .premium-appetizers-info h3 {
        font-size: 1.5rem;
    }
}

/* =============================================
   Floating Vertical Navigation (Desktop)
   ============================================= */

.floating-nav {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.floating-nav.visible {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    transition: all 0.4s ease;
    min-width: 140px;
}

/* Default mode - for dark backgrounds (light text) */
.floating-nav {
    --nav-text: rgba(255, 255, 255, 0.95);
    --nav-text-hover: #fff;
    --nav-bg-hover: rgba(255, 255, 255, 0.25);
    --nav-indicator: var(--primary);
    --nav-border: rgba(255, 255, 255, 0.25);
    --nav-header-bg: rgba(255, 255, 255, 0.2);
    --nav-header-text: var(--primary);
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Light mode - for light/cream backgrounds (dark text) */
.floating-nav.light-mode {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    --nav-text: rgba(0, 0, 0, 0.75);
    --nav-text-hover: var(--secondary);
    --nav-bg-hover: rgba(0, 0, 0, 0.08);
    --nav-indicator: var(--accent);
    --nav-border: rgba(0, 0, 0, 0.1);
    --nav-header-bg: rgba(0, 0, 0, 0.05);
    --nav-header-text: var(--secondary);
}

.floating-nav-header {
    padding: 12px 16px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--nav-header-text);
    background: var(--nav-header-bg);
    border-bottom: 1px solid var(--nav-border);
    text-align: center;
}

.floating-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--nav-text);
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--nav-border);
    position: relative;
}

.floating-nav-item:last-child {
    border-bottom: none;
}

.floating-nav-item:hover {
    background: var(--nav-bg-hover);
    color: var(--nav-text-hover);
}

.floating-nav-item.active {
    background: var(--nav-bg-hover);
    color: var(--nav-text-hover);
}

.nav-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--nav-text);
    opacity: 0.4;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.floating-nav-item:hover .nav-indicator,
.floating-nav-item.active .nav-indicator {
    background: var(--nav-indicator);
    opacity: 1;
    transform: scale(1.4);
    box-shadow: 0 0 8px var(--nav-indicator);
}

.nav-label {
    white-space: nowrap;
}

/* Hide floating nav on mobile */
@media (max-width: 1024px) {
    .floating-nav {
        display: none;
    }
}

/* Slightly smaller on smaller desktops */
@media (max-width: 1200px) {
    .floating-nav {
        right: 10px;
        min-width: 120px;
    }

    .floating-nav-item {
        padding: 8px 12px;
        font-size: 0.75rem;
    }

    .floating-nav-header {
        padding: 10px 12px;
        font-size: 0.65rem;
    }
}

/* =============================================
   Off-Canvas Mobile Menu
   ============================================= */

.offcanvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.offcanvas-overlay.active {
    opacity: 1;
    visibility: visible;
}

.offcanvas-menu {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100vh;
    background: var(--white);
    z-index: 9999;
    transition: left 0.3s ease;
    overflow-y: auto;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.15);
}

.offcanvas-menu.active {
    left: 0;
}

.offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--gray-200);
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%);
}

.offcanvas-logo {
    height: 40px;
    width: auto;
}

.offcanvas-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(--white);
    font-size: 1.8rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.offcanvas-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.offcanvas-nav {
    padding: 15px 0;
}

.offcanvas-link {
    display: block;
    padding: 15px 25px;
    color: var(--gray-800);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 1px solid var(--gray-100);
    transition: all 0.2s ease;
}

.offcanvas-link:hover {
    background: var(--gray-50);
    color: var(--accent);
    padding-left: 30px;
}

.offcanvas-link.offcanvas-donate {
    color: var(--accent);
}

.offcanvas-link.offcanvas-cta {
    background: var(--accent);
    color: var(--white);
    margin: 15px 20px;
    border-radius: var(--radius-md);
    text-align: center;
    border: none;
}

.offcanvas-link.offcanvas-cta:hover {
    background: var(--accent-dark);
    padding-left: 25px;
}

/* Accordion Styles */
.offcanvas-accordion {
    border-bottom: 1px solid var(--gray-100);
}

.offcanvas-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 25px;
    background: none;
    border: none;
    color: var(--gray-800);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.offcanvas-accordion-trigger:hover {
    background: var(--gray-50);
    color: var(--accent);
}

.offcanvas-accordion-trigger .accordion-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.offcanvas-accordion.open .accordion-icon {
    transform: rotate(180deg);
}

.offcanvas-accordion-content {
    max-height: 0;
    overflow: hidden;
    background: var(--gray-50);
    transition: max-height 0.3s ease;
}

.offcanvas-accordion.open .offcanvas-accordion-content {
    max-height: 300px;
}

.offcanvas-accordion-content a {
    display: block;
    padding: 12px 25px 12px 40px;
    color: var(--gray-600);
    text-decoration: none;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--gray-100);
    transition: all 0.2s ease;
}

.offcanvas-accordion-content a:last-child {
    border-bottom: none;
}

.offcanvas-accordion-content a:hover {
    background: var(--gray-100);
    color: var(--accent);
    padding-left: 45px;
}

/* Hide desktop nav-menu on mobile, show hamburger */
@media (max-width: 1024px) {
    .nav-menu {
        display: none !important;
    }

    .nav-toggle {
        display: flex !important;
    }
}

/* Show desktop nav-menu on large screens */
@media (min-width: 1025px) {
    .offcanvas-overlay,
    .offcanvas-menu {
        display: none !important;
    }
}

/* =============================================
   Corporate Form Fields - Conditional Sections
   ============================================= */
.corporate-fields {
    background: rgba(7, 100, 35, 0.05);
    padding: 20px;
    border-radius: var(--radius-md);
    margin: 15px 0;
    border: 1px dashed var(--accent);
}

.corporate-fields.visible {
    display: block !important;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Section Label */
.form-section-label {
    display: block;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 12px;
    font-size: 0.95rem;
}

/* =============================================
   Protein Selection Section
   ============================================= */
.protein-selection-section {
    background: linear-gradient(135deg, #f8f4e8 0%, #fff9e6 100%);
    padding: 20px;
    border-radius: var(--radius-md);
    margin: 15px 0;
    border: 2px solid var(--accent);
    animation: slideDown 0.3s ease-out;
}

.protein-selection-section.visible {
    display: block !important;
}

.protein-section-subtitle {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-bottom: 16px;
    margin-top: -8px;
}

.protein-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.protein-card {
    cursor: pointer;
    position: relative;
}

.protein-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.protein-card-inner {
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.2s ease;
}

.protein-card:hover .protein-card-inner {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.protein-card input[type="radio"]:checked + .protein-card-inner {
    border-color: var(--primary);
    border-width: 3px;
    box-shadow: 0 4px 16px rgba(7, 100, 35, 0.2);
}

.protein-card input[type="radio"]:checked + .protein-card-inner::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    z-index: 10;
}

.protein-card-inner {
    position: relative;
}

.protein-image {
    position: relative;
    height: 100px;
    overflow: hidden;
}

.protein-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.protein-card:hover .protein-image img {
    transform: scale(1.05);
}

.premium-ribbon {
    position: absolute;
    top: 8px;
    left: -28px;
    background: linear-gradient(135deg, var(--accent) 0%, #d4a849 100%);
    color: var(--secondary);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 30px;
    transform: rotate(-45deg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.protein-info {
    padding: 10px;
    text-align: center;
}

.protein-name {
    display: block;
    font-weight: 600;
    color: var(--secondary);
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.protein-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.protein-badge.included {
    background: var(--accent);
    color: var(--white);
}

.protein-badge.premium {
    background: linear-gradient(135deg, var(--accent) 0%, #d4a849 100%);
    color: var(--secondary);
}

/* Premium protein card styling */
.protein-card.premium .protein-card-inner {
    border-color: var(--accent);
}

.protein-card.premium:hover .protein-card-inner {
    border-color: #d4a849;
}

.protein-card.premium input[type="radio"]:checked + .protein-card-inner {
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(198, 169, 95, 0.3);
}

.protein-card.premium input[type="radio"]:checked + .protein-card-inner::after {
    background: var(--accent);
    color: var(--secondary);
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .protein-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .protein-image {
        height: 80px;
    }

    .protein-name {
        font-size: 0.8rem;
    }

    .protein-badge {
        font-size: 0.65rem;
    }

    .protein-selection-section {
        padding: 15px;
    }
}

@media (max-width: 400px) {
    .protein-cards-grid {
        grid-template-columns: 1fr 1fr;
    }

    .protein-image {
        height: 70px;
    }
}

/* Order Summary Section (from menu selections) */
.order-summary-section {
    background: linear-gradient(135deg, #f8f4e8 0%, #fff9e6 100%);
    padding: 20px;
    border-radius: var(--radius-md);
    margin: 15px 0;
    border: 2px solid var(--accent);
}

.order-summary-box {
    margin-top: 12px;
}

.order-summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.order-item {
    display: flex;
    flex-direction: column;
    padding: 12px 15px;
    background: var(--white);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    border-left: 4px solid var(--accent);
}

.order-item-package {
    background: linear-gradient(135deg, #fff 0%, #fefcf3 100%);
    border-left-color: var(--accent);
}

.order-item-addon {
    border-left-color: var(--primary);
}

.order-item-name {
    font-weight: 600;
    color: var(--secondary);
    font-size: 0.95rem;
}

.order-item-details {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-top: 4px;
}

.order-item-price {
    font-weight: 700;
    color: var(--primary);
    font-size: 0.9rem;
    margin-top: 4px;
}

.order-summary-total {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 15px;
    background: var(--secondary);
    color: var(--white);
    border-radius: var(--radius-sm);
    margin-top: 15px;
    font-weight: 600;
}

.order-summary-total .total-price {
    font-size: 1.2rem;
    color: var(--accent);
}

.order-summary-total small {
    width: 100%;
    font-weight: 400;
    font-size: 0.8rem;
    opacity: 0.8;
}

.btn-clear-selections {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 15px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--gray-400);
    border-radius: var(--radius-sm);
    color: var(--gray-600);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-clear-selections:hover {
    background: var(--gray-200);
    border-color: var(--gray-500);
    color: var(--secondary);
}

/* Beverage checkbox highlighting */
.checkbox-label-beverages {
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
    border-color: rgba(0, 155, 58, 0.3);
}

.checkbox-label-beverages:hover {
    border-color: var(--accent);
}

/* Add-ons Checkboxes */
.addons-checkboxes {
    background: rgba(254, 209, 0, 0.08);
    padding: 20px;
    border-radius: var(--radius-md);
    margin: 15px 0;
    border: 1px dashed var(--primary);
}

.addons-checkboxes.visible {
    display: block !important;
    animation: slideDown 0.3s ease-out;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--gray-700);
    padding: 8px 12px;
    background: var(--white);
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-200);
    transition: all var(--transition-fast);
}

.checkbox-label:hover {
    border-color: var(--accent);
    background: rgba(0, 155, 58, 0.05);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

.checkbox-custom {
    display: none;
}

/* Checkbox label when checked */
.checkbox-label:has(input:checked) {
    border-color: var(--accent);
    background: rgba(0, 155, 58, 0.1);
    color: var(--secondary);
    font-weight: 500;
}

/* Responsive for checkboxes */
@media (max-width: 480px) {
    .checkbox-grid {
        grid-template-columns: 1fr;
    }

    .checkbox-label {
        font-size: 0.85rem;
        padding: 10px 12px;
    }

    .corporate-fields,
    .addons-checkboxes {
        padding: 15px;
    }
}

/* =============================================
   Multi-Step Form Styles
   ============================================= */

/* Form Steps Indicator */
.form-steps-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    padding: 15px 0;
}

.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.step-indicator .step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gray-200);
    color: var(--gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
}

.step-indicator .step-label {
    font-size: 0.8rem;
    color: var(--gray-500);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color var(--transition-fast);
}

.step-indicator.active .step-number {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(0, 155, 58, 0.3);
}

.step-indicator.active .step-label {
    color: var(--accent);
}

.step-indicator.completed .step-number {
    background: var(--secondary);
    color: var(--white);
    border-color: var(--secondary);
}

.step-indicator.completed .step-label {
    color: var(--secondary);
}

.step-indicator.completed:hover .step-number {
    transform: scale(1.05);
}

.step-connector {
    width: 60px;
    height: 3px;
    background: var(--gray-200);
    margin: 0 15px;
    position: relative;
    top: -12px;
    border-radius: 2px;
}

.step-indicator.completed + .step-connector,
.step-indicator.active + .step-connector {
    background: linear-gradient(90deg, var(--secondary) 0%, var(--accent) 100%);
}

/* Form Steps Container */
.multi-step-form {
    overflow: hidden;
}

.form-step {
    display: none;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

.form-step.active {
    display: block;
}

.form-step.slide-in-right {
    animation-name: slideInRight;
}

.form-step.slide-in-left {
    animation-name: slideInLeft;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Step Title */
.step-title {
    font-size: 1.1rem;
    color: var(--secondary);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gray-200);
    font-weight: 600;
}

/* Form Navigation Buttons */
.form-navigation {
    margin-top: 25px;
    display: flex;
    gap: 15px;
}

.form-navigation.two-buttons {
    justify-content: space-between;
}

.form-navigation .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 140px;
}

.form-navigation .btn-next {
    margin-left: auto;
}

.form-navigation .btn-back {
    background: transparent;
    border: 2px solid var(--gray-300);
    color: var(--gray-600);
}

.form-navigation .btn-back:hover {
    border-color: var(--secondary);
    color: var(--secondary);
    background: rgba(7, 100, 35, 0.05);
}

.form-navigation .btn-submit {
    flex: 1;
    max-width: 200px;
}

.form-navigation .btn svg {
    width: 18px;
    height: 18px;
    transition: transform var(--transition-fast);
}

.form-navigation .btn-next:hover svg {
    transform: translateX(3px);
}

.form-navigation .btn-back:hover svg {
    transform: translateX(-3px);
}

/* Responsive Multi-Step Form */
@media (max-width: 600px) {
    .form-steps-indicator {
        margin-bottom: 20px;
    }

    .step-indicator .step-number {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }

    .step-indicator .step-label {
        font-size: 0.7rem;
    }

    .step-connector {
        width: 40px;
        margin: 0 10px;
    }

    .step-title {
        font-size: 1rem;
        margin-bottom: 15px;
    }

    .form-navigation {
        flex-direction: column;
        gap: 12px;
    }

    .form-navigation.two-buttons {
        flex-direction: column-reverse;
    }

    .form-navigation .btn {
        width: 100%;
        min-width: auto;
    }

    .form-navigation .btn-submit {
        max-width: none;
    }
}

@media (max-width: 400px) {
    .step-indicator .step-label {
        display: none;
    }

    .step-connector {
        width: 50px;
        top: 0;
    }
}

/* =============================================
   Guest Count Modal Styles
   ============================================= */

.guest-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.guest-modal.active {
    opacity: 1;
    visibility: visible;
}

.guest-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.guest-modal-content {
    position: relative;
    background: white;
    border-radius: 16px;
    max-width: 420px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.guest-modal.active .guest-modal-content {
    transform: translateY(0);
}

.guest-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    border: none;
    border-radius: 50%;
    font-size: 24px;
    color: var(--gray-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.guest-modal-close:hover {
    background: var(--gray-200);
    color: var(--gray-800);
}

.guest-modal-header {
    padding: 24px 24px 16px;
    text-align: center;
    border-bottom: 1px solid var(--gray-200);
}

.guest-modal-header h3 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    color: var(--secondary);
    margin: 0 0 8px;
}

.guest-modal-subtitle {
    font-size: 0.95rem;
    color: var(--gray-600);
    margin: 0;
}

.guest-modal-body {
    padding: 24px;
}

.guest-modal-package {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border-radius: 12px;
    margin-bottom: 20px;
}

.guest-modal-package-name {
    font-weight: 600;
    color: white;
    font-size: 1.1rem;
}

.guest-modal-package-price {
    font-weight: 700;
    color: white;
    font-size: 1.1rem;
}

.guest-modal-range {
    text-align: center;
    padding: 12px;
    background: var(--gray-100);
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    color: var(--gray-700);
}

.guest-modal-range-value {
    font-weight: 700;
    color: var(--accent);
}

.guest-modal-input-group {
    margin-bottom: 20px;
}

.guest-modal-input-group label {
    display: block;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.guest-modal-input-group input {
    width: 100%;
    padding: 16px;
    font-size: 1.5rem;
    text-align: center;
    border: 2px solid var(--gray-300);
    border-radius: 12px;
    transition: all 0.2s ease;
    font-weight: 600;
}

.guest-modal-input-group input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(0, 155, 58, 0.1);
}

.guest-modal-input-group input::placeholder {
    font-size: 1rem;
    font-weight: 400;
    color: var(--gray-400);
}

.guest-modal-error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 8px;
    display: none;
}

.guest-modal-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--gray-100);
    border-radius: 12px;
    margin-bottom: 20px;
}

.guest-modal-total span:first-child {
    font-weight: 500;
    color: var(--gray-700);
}

.guest-modal-total-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary);
}

.guest-modal-redirect {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(254, 209, 0, 0.1), rgba(254, 209, 0, 0.05));
    border: 2px solid var(--primary);
    border-radius: 12px;
    margin-bottom: 20px;
}

.guest-modal-redirect-icon {
    width: 48px;
    height: 48px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.guest-modal-redirect-icon svg {
    stroke: var(--secondary);
}

.guest-modal-redirect p {
    font-size: 0.95rem;
    color: var(--gray-700);
    margin: 0;
}

.guest-modal-actions {
    display: flex;
    gap: 12px;
    padding: 0 24px 24px;
}

.guest-modal-actions .btn {
    flex: 1;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.guest-modal-actions .btn-outline {
    background: transparent;
    border: 2px solid var(--gray-300);
    color: var(--gray-700);
}

.guest-modal-actions .btn-outline:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

.guest-modal-actions .btn-cart {
    background: var(--accent);
    border: none;
    color: white;
}

.guest-modal-actions .btn-cart:hover {
    background: var(--accent-dark);
    box-shadow: 0 4px 12px rgba(0, 155, 58, 0.3);
}

.guest-modal-actions .btn-gold {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border: none;
    color: var(--secondary);
}

.guest-modal-actions .btn-gold:hover {
    box-shadow: 0 4px 12px rgba(254, 209, 0, 0.4);
    transform: translateY(-1px);
}

/* Cart item edit button */
.cart-item-edit {
    background: transparent;
    border: 1px solid var(--gray-300);
    color: var(--gray-600);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 8px;
}

.cart-item-edit:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Mobile responsiveness for guest modal */
@media (max-width: 480px) {
    .guest-modal-content {
        width: 95%;
        max-height: 95vh;
    }

    .guest-modal-header {
        padding: 20px 20px 12px;
    }

    .guest-modal-header h3 {
        font-size: 1.5rem;
    }

    .guest-modal-body {
        padding: 20px;
    }

    .guest-modal-actions {
        flex-direction: column;
        padding: 0 20px 20px;
    }

    .guest-modal-actions .btn {
        width: 100%;
    }
}

/* =============================================
   Visual Distinction for Cart vs Quote Sections
   ============================================= */

/* Section header for Order Online (Green) */
.section-header--cart .section-tag {
    background: var(--accent);
    color: white;
}

/* Section header for Request Quote (Gold) */
.section-header--quote .section-tag {
    background: var(--primary);
    color: var(--secondary);
}

/* Category badge styling */
.category-header.order-online .category-badge {
    background: var(--accent);
    color: white;
}

.category-header.get-quote .category-badge {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: var(--secondary);
}

/* Package card visual distinction */
.package-card-visual.cart-enabled {
    border: 2px solid var(--accent);
}

.package-card-visual.quote-only {
    border: 2px solid var(--primary);
}

.btn-order-online {
    background: var(--accent) !important;
    color: white !important;
}

.btn-order-online:hover {
    background: var(--accent-dark) !important;
    box-shadow: 0 4px 12px rgba(0, 155, 58, 0.3);
}

.btn-get-quote {
    background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
    color: var(--secondary) !important;
}

.btn-get-quote:hover {
    box-shadow: 0 4px 12px rgba(254, 209, 0, 0.4);
    transform: translateY(-1px);
}

/* Package includes text */
.package-includes {
    font-size: 0.8rem;
    color: var(--gray-600);
    margin: 8px 0 12px;
    line-height: 1.4;
}