/* Tailwind CSS Directives */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Ink Academy Dark Theme System */
@layer base {
  :root {
    /* Core Colors */
    --bg: #0D0F12;
    --card-bg: #14161A;
    --text: #FFFFFF;
    --subtext: #B3B3B3;
    --accent: #00C4FF;
    --border: rgba(255, 255, 255, 0.05);
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --radius: 1rem;
    --transition: all 0.2s ease;
    --navbar-height: 90px;

    /* Legacy variable mapping for compatibility */
    --theme-bg: var(--bg);
    --theme-text: var(--text);
    --theme-navbar: var(--bg);
    --theme-footer: var(--bg);
    --theme-accent: var(--accent);
    --theme-card: var(--card-bg);
    --theme-border: var(--border);
    --theme-text-secondary: var(--subtext);
  }
  
  * {
    @apply transition-colors duration-200;
  }
  
  /* Respect reduced motion for theme transitions */
  @media (prefers-reduced-motion: reduce) {
    * {
      transition-duration: 0.01ms !important;
    }
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    line-height: 1.6;
    padding: 0;
    margin: 0;
    transition: var(--transition);
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
  }
  
  p, span, label {
    color: var(--subtext);
  }
  
  /* Reduced motion support - exclude hero/portfolio marquees so they animate */
  @media (prefers-reduced-motion: reduce) {
    *:not(.hero-marquee-track):not(.portfolio-gallery-marquee-track),
    *:not(.hero-marquee-track):not(.portfolio-gallery-marquee-track)::before,
    *:not(.hero-marquee-track):not(.portfolio-gallery-marquee-track)::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  
  /* Remove global white text override - use theme variables instead */
  /* Global text color now uses theme variable */
  
  /* Restore original colors for error messages only */
  .message.error,
  .message.error * {
    color: #fca5a5 !important; /* original error message color */
  }
  
  #loginError,
  #loginError *,
  .text-red-400 {
    color: #f87171 !important; /* red-400 color */
  }
  
  .text-red-500 {
    color: #ef4444 !important; /* red-500 color */
  }
  
  .text-red-600 {
    color: #dc2626 !important; /* red-600 color */
  }
}

/* Custom Luxury Components */
@layer components {
  /* Display font for headings */
  .font-display {
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
  }
  
  /* Luxury Button */
  /* Button Base Style */
  .btn-luxury,
  .btn {
    background-color: var(--accent);
    color: #FFFFFF !important;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
  }
  
  .btn-luxury:hover,
  .btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 196, 255, 0.3);
    color: #FFFFFF !important;
  }
  
  .btn-luxury span,
  .btn-luxury i {
    color: #FFFFFF !important;
  }
  
  .btn-luxury:active,
  .btn:active {
    transform: scale(0.98);
  }
  
  /* Hero Button Variant */
  .btn-luxury-hero {
    background-color: var(--accent);
    color: #FFFFFF !important;
    border: none;
    padding: 1rem 2rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
  }
  
  .btn-luxury-hero:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 196, 255, 0.3);
    color: #FFFFFF !important;
  }
  
  .btn-luxury-hero span,
  .btn-luxury-hero i {
    color: #FFFFFF !important;
  }
  
  /* Navigation Link - Liquid style underline */
  .nav-link-luxury {
    color: var(--subtext);
    padding: 0.25rem 0.5rem;
    position: relative;
    transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .nav-link-luxury::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), rgba(0, 196, 255, 0.8));
    transform: translateX(-50%);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .nav-link-luxury:hover {
    color: var(--accent);
  }
  
  .nav-link-luxury:hover::after {
    width: 100%;
  }
  
  .nav-link-luxury[aria-current="page"] {
    color: var(--accent);
  }
  
  .nav-link-luxury[aria-current="page"]::after {
    width: 100%;
  }
  
  /* Luxury Card */
  .card-luxury {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-out, background-color 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  
  .card-luxury::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-out;
  }
  
  .card-luxury:hover {
    @apply shadow-luxury-hover;
    @apply border-luxury-accent/50;
    transform: translateY(-6px) scale(1.02);
  }
  
  .card-luxury:hover::before {
    transform: scaleX(1);
  }
  
  /* Luxury Input with Floating Label Effect */
  .input-luxury {
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    background-color: var(--card-bg);
    border: 2px solid var(--border);
    color: var(--text);
    transition: all 0.3s ease-out, background-color 0.3s ease, border-color 0.3s ease;
    position: relative;
  }
  
  .input-luxury::placeholder {
    color: var(--subtext);
    transition: opacity 0.3s;
  }
  
  .input-luxury:focus {
    background-color: var(--card-bg);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(0, 196, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
    outline: none;
  }
  
  .input-luxury::placeholder {
    transition: opacity 0.3s;
  }
  
  .input-luxury:focus::placeholder {
    opacity: 0.5;
  }
  
  /* Date input - White color styling */
  .input-luxury[type="date"],
  input[type="date"].input-luxury {
    color: #FFFFFF !important;
    background-color: var(--card-bg);
    color-scheme: dark;
  }
  
  .input-luxury[type="date"]::-webkit-calendar-picker-indicator,
  input[type="date"].input-luxury::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
    opacity: 0.9;
  }
  
  .input-luxury[type="date"]::-webkit-calendar-picker-indicator:hover,
  input[type="date"].input-luxury::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
  }
  
  /* Firefox date input styling */
  .input-luxury[type="date"]::-moz-calendar-picker-indicator,
  input[type="date"].input-luxury::-moz-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
    opacity: 0.9;
  }
  
  /* Edge/IE date input styling */
  .input-luxury[type="date"]::-ms-clear,
  input[type="date"].input-luxury::-ms-clear {
    filter: invert(1);
  }
  
  .input-luxury[type="date"]::-ms-reveal,
  input[type="date"].input-luxury::-ms-reveal {
    filter: invert(1);
  }
  
  /* Ensure date input text is white */
  .input-luxury[type="date"]::-webkit-datetime-edit,
  .input-luxury[type="date"]::-webkit-datetime-edit-fields-wrapper,
  .input-luxury[type="date"]::-webkit-datetime-edit-text,
  .input-luxury[type="date"]::-webkit-datetime-edit-month-field,
  .input-luxury[type="date"]::-webkit-datetime-edit-day-field,
  .input-luxury[type="date"]::-webkit-datetime-edit-year-field {
    color: #FFFFFF !important;
  }
  
  /* Firefox date input text color */
  .input-luxury[type="date"] {
    color: #FFFFFF !important;
  }
  
  /* Navigation - Liquid style */
  .nav-luxury {
    background: linear-gradient(180deg, rgba(0, 196, 255, 0.03) 0%, rgba(15, 23, 42, 0.98) 20%, rgba(15, 23, 42, 0.95) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0, 196, 255, 0.12);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(0, 196, 255, 0.03);
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .nav-luxury.scrolled {
    background: linear-gradient(180deg, rgba(0, 196, 255, 0.02) 0%, rgba(15, 23, 42, 0.98) 15%, rgba(15, 23, 42, 0.97) 100%);
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(0, 196, 255, 0.04);
  }

  /* Nav Book Appointment button - liquid */
  .nav-luxury .btn-luxury {
    background: linear-gradient(135deg, rgba(0, 196, 255, 0.9) 0%, rgba(0, 153, 204, 0.95) 100%);
    border: 1px solid rgba(0, 196, 255, 0.4);
    box-shadow: 0 0 20px rgba(0, 196, 255, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .nav-luxury .btn-luxury:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.95) 0%, rgba(0, 196, 255, 0.9) 100%);
    box-shadow: 0 0 28px rgba(0, 196, 255, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: scale(1.02);
  }

  /* More menu button - liquid pill */
  .nav-luxury #moreMenuBtn {
    background: linear-gradient(135deg, rgba(0, 196, 255, 0.08) 0%, transparent 100%);
    border: 1px solid rgba(0, 196, 255, 0.15);
    border-radius: 12px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .nav-luxury #moreMenuBtn:hover {
    background: linear-gradient(135deg, rgba(0, 196, 255, 0.2) 0%, rgba(0, 196, 255, 0.08) 100%);
    border-color: rgba(0, 196, 255, 0.3);
    box-shadow: 0 0 16px rgba(0, 196, 255, 0.15);
  }

  /* Logo link - liquid hover */
  .nav-luxury a[aria-label*="Home"]:first-child {
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .nav-luxury a[aria-label*="Home"]:first-child:hover {
    transform: scale(1.02);
  }
  
  /* Luxury Section */
  .section-luxury {
    background-color: var(--card-bg);
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }
}

/* Animations */
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-fade-in {
    animation: fade-in 0.8s ease-out;
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out;
}

.animate-fade-in-delay {
    animation: fade-in-up 0.8s ease-out 0.2s both;
}

/* Scroll-aware fade-in sections */
.scroll-fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero Section Styles - fluid responsive, vertical layout (text first, image strip below) */
#first-page,
.hero-section,
.hero-section-modern,
.hero {
    min-height: clamp(650px, 92vh, 100vh);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Hero: fluid vertical spacing for navbar overlap */
.hero,
.hero-section-modern,
#first-page.hero {
    padding-top: clamp(var(--navbar-height, 90px), 10vh, 140px);
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: clamp(60px, 8vh, 120px);
}

.hero-background {
    will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
    .hero-background {
        animation: parallax 20s ease-in-out infinite;
    }
}

@keyframes parallax {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-20px) scale(1.05);
    }
}

/* Modern Hero Section with Bokeh Lights */
.hero-section-modern {
    position: relative;
    z-index: 2;
    min-height: clamp(650px, 92vh, 100vh);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #0A0B0E;
    overflow: hidden;
}
@media (min-width: 768px) {
    .hero-section-modern {
        padding-bottom: 2rem;
    }
}
/* Desktop: hero uses flow layout so images sit clearly BELOW content */
@media (min-width: 1024px) {
    .hero {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .hero-section-modern {
        padding-bottom: 2.5rem;
    }
    /* Large clear spacing between hero content and tattoo images */
    .hero-content {
        margin-bottom: 120px;
        z-index: 2;
    }
    /* Image container in flow - moves down, appears clearly below button */
    .hero-images.hero-marquee-container {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        margin-top: 80px;
        height: 280px !important;
        min-height: 280px !important;
    }
}

/* Hero canvas background - fill hero, no fixed dimensions */
#hero-cyberpunk-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.bokeh-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 2;
}

.bokeh {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.6;
    animation: float 15s ease-in-out infinite;
}

.bokeh-1 {
    width: 300px;
    height: 300px;
    background: rgba(0, 196, 255, 0.4);
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.bokeh-2 {
    width: 250px;
    height: 250px;
    background: rgba(138, 43, 226, 0.4);
    top: 20%;
    right: 15%;
    animation-delay: 2s;
}

.bokeh-3 {
    width: 200px;
    height: 200px;
    background: rgba(0, 196, 255, 0.3);
    bottom: 20%;
    left: 20%;
    animation-delay: 4s;
}

.bokeh-4 {
    width: 350px;
    height: 350px;
    background: rgba(138, 43, 226, 0.3);
    bottom: 15%;
    right: 10%;
    animation-delay: 1s;
}

.bokeh-5 {
    width: 180px;
    height: 180px;
    background: rgba(0, 196, 255, 0.35);
    top: 50%;
    left: 5%;
    animation-delay: 3s;
}

.bokeh-6 {
    width: 220px;
    height: 220px;
    background: rgba(138, 43, 226, 0.35);
    top: 30%;
    left: 50%;
    animation-delay: 5s;
}

.bokeh-7 {
    width: 280px;
    height: 280px;
    background: rgba(0, 196, 255, 0.3);
    bottom: 30%;
    right: 30%;
    animation-delay: 2.5s;
}

.bokeh-8 {
    width: 160px;
    height: 160px;
    background: rgba(138, 43, 226, 0.4);
    top: 60%;
    right: 5%;
    animation-delay: 4.5s;
}

.bokeh-9 {
    width: 240px;
    height: 240px;
    background: rgba(0, 196, 255, 0.35);
    bottom: 40%;
    left: 40%;
    animation-delay: 1.5s;
}

.bokeh-10 {
    width: 200px;
    height: 200px;
    background: rgba(138, 43, 226, 0.3);
    top: 15%;
    left: 60%;
    animation-delay: 3.5s;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(30px, -30px) scale(1.1);
    }
    50% {
        transform: translate(-20px, 20px) scale(0.9);
    }
    75% {
        transform: translate(20px, 30px) scale(1.05);
    }
}

/* Hero Marquee Skeleton - match marquee image sizes and gap per breakpoint */
.hero-marquee-skeleton {
    mask-image: linear-gradient(to right, transparent 2%, black 12%, black 88%, transparent 98%);
    -webkit-mask-image: linear-gradient(to right, transparent 2%, black 12%, black 88%, transparent 98%);
    gap: 1.5rem;
}
.hero-marquee-skeleton-item {
    flex-shrink: 0;
    width: 180px;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
}
@media (max-width: 1024px) {
    .hero-marquee-skeleton { gap: 1rem; }
    .hero-marquee-skeleton-item { width: 155px; }
}
@media (max-width: 767px) {
    .hero-marquee-skeleton { gap: 1.25rem; }
    .hero-marquee-skeleton-item { width: 155px; }
}
@media (max-width: 400px) {
    .hero-marquee-skeleton-item { width: 135px; }
}

/* Hero Marquee (Featured Artworks) - flows below hero text on all screen sizes */
.hero-marquee-container {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
}

/* Image strip in flow - always below hero content */
.hero-images.hero-marquee-container {
    position: relative !important;
    inset: auto;
    bottom: auto;
    left: auto;
    right: auto;
    top: auto;
    order: 2;
    margin-top: 40px;
    width: 100%;
    height: clamp(90px, 12vw, 160px);
    min-height: 90px;
    overflow: hidden;
    flex-shrink: 0;
}

/* Apply to hero images except marquee - marquee has its own portrait rules */
.hero-images:not(.hero-marquee-container) img {
    height: 100%;
    object-fit: cover;
}

.hero-marquee-mask {
    position: absolute;
    inset: 0;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 2%, black 12%, black 88%, transparent 98%);
    -webkit-mask-image: linear-gradient(to right, transparent 2%, black 12%, black 88%, transparent 98%);
}

.hero-marquee-track {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 100%;
    width: max-content;
    animation: none;
    will-change: transform;
    backface-visibility: hidden;
}

/* Marquee animates only after user makes cookie choice */
body.consent-given .hero-marquee-track {
    animation: hero-marquee-scroll 20s linear infinite;
}

/* Desktop only: portrait 2:3 (taller) - same style as mobile, scaled for wide screen */
@media (min-width: 1025px) {
    .hero-marquee-track img {
        flex-shrink: 0;
        width: 180px;
        height: auto;
        aspect-ratio: 2 / 3;
        max-height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }
}

.hero-marquee-track img:nth-child(odd) {
    transform: rotate(-2deg);
}

.hero-marquee-track img:nth-child(even) {
    transform: rotate(2deg);
}

@keyframes hero-marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-33.333%); }
}

/* Hero content - Centered layout, fluid vertical spacing, always first */
.hero-content {
    order: 1;
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    min-height: 0;
    padding-top: clamp(80px, 10vh, 140px);
    padding-bottom: clamp(60px, 8vh, 120px);
}

/* Hero typography - fluid scaling with clamp(), no mid-width compression */
.hero h1,
.hero-content h1 {
    font-size: clamp(2.4rem, 4vw, 4rem);
    line-height: 1.1;
}

.hero p,
.hero-content p {
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
}

.hero-content-padding {
    /* Fluid padding inherited from .hero-content; this class kept for structure */
}

/* Hero marquee - Mobile */
@media (max-width: 767px) {
    .hero-section-modern {
        padding-bottom: 1.25rem;
    }
    /* Reduce hero text size on mobile */
    .hero-content h1 {
        font-size: 1.875rem !important;
        line-height: 2.25rem !important;
    }
    .hero-content p {
        font-size: 1rem !important;
    }
    .hero-content .btn-modern-cta {
        align-self: center;
    }
    /* Hero marquee sizing handled by 1024px/768px responsive block below */
    .hero-marquee-mask {
        mask-image: linear-gradient(to right, transparent 2%, black 15%, black 85%, transparent 98%);
        -webkit-mask-image: linear-gradient(to right, transparent 2%, black 15%, black 85%, transparent 98%);
    }
}

@media (max-width: 400px) {
    /* Hero marquee sizing handled by 480px responsive block below */
}

/* Hero responsive - mobile (fluid base handles 768-1024px) */
@media (max-width: 767px) {
    #first-page,
    .hero-section-modern {
        min-height: 90vh;
        padding: 100px 20px 80px;
    }
    #first-page .hero-content,
    .hero .hero-content {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

/* Hero tablet fix - prevent compression at 900px–1024px viewport */
@media (min-width: 850px) and (max-width: 1050px) {
    #first-page,
    .hero-section,
    .hero-section-modern,
    .hero {
        min-height: 95vh;
    }
}

/* Hero marquee - responsive for screens < 1024px (portrait 2:3, taller) */
@media (max-width: 1024px) {
    .hero-images.hero-marquee-container {
        --hero-marquee-img-width: 155px;
        --hero-marquee-gap: 1rem;
        height: min(280px, 55vh);
        min-height: 250px;
        max-height: 55vh;
        touch-action: pan-y pinch-zoom;
    }

    .hero-marquee-mask {
        position: absolute;
        inset: 0;
        overflow: hidden;
        mask-image: linear-gradient(to right, transparent 2%, black 10%, black 90%, transparent 98%);
        -webkit-mask-image: linear-gradient(to right, transparent 2%, black 10%, black 90%, transparent 98%);
    }

    .hero-marquee-track {
        display: flex;
        align-items: center;
        gap: var(--hero-marquee-gap);
        height: 100%;
        width: max-content;
        flex-shrink: 0;
    }

    body.consent-given .hero-marquee-track {
        animation: hero-marquee-scroll 22s linear infinite;
    }

    .hero-images img,
    .hero-marquee-track img {
        width: var(--hero-marquee-img-width);
        height: auto;
        aspect-ratio: 2 / 3;
        max-height: 100%;
        min-width: var(--hero-marquee-img-width);
        object-fit: cover;
        object-position: center;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        flex-shrink: 0;
    }
}

/* Hero marquee - 768px and below (portrait 2:3, taller) */
@media (max-width: 768px) {
    .hero-images.hero-marquee-container {
        --hero-marquee-img-width: 155px;
        --hero-marquee-gap: 1.25rem;
        height: min(280px, 55vh);
        min-height: 250px;
        max-height: 55vh;
    }

    .hero-marquee-track img {
        width: 155px !important;
        height: auto !important;
        aspect-ratio: 2 / 3 !important;
        max-height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        flex-shrink: 0;
    }

    body.consent-given .hero-marquee-track {
        animation-duration: 20s;
    }
}

/* Hero marquee - 767px and below: explicit override for screens under 768 */
@media (max-width: 767px) {
    .hero-images.hero-marquee-container {
        --hero-marquee-img-width: 155px;
        --hero-marquee-gap: 1.25rem;
        height: min(280px, 55vh) !important;
        min-height: 250px !important;
        max-height: 55vh !important;
    }

    .hero-marquee-track img {
        width: 155px !important;
        height: auto !important;
        aspect-ratio: 2 / 3 !important;
        max-height: 100% !important;
        object-fit: cover;
        object-position: center;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        flex-shrink: 0;
    }
}

/* Hero marquee - 480px and smaller (portrait 2:3, taller) */
@media (max-width: 480px) {
    .hero-images.hero-marquee-container {
        --hero-marquee-img-width: 155px;
        --hero-marquee-gap: 1.25rem;
        height: min(280px, 55vh);
        min-height: 250px;
        max-height: 55vh;
    }

    .hero-marquee-track img {
        width: 155px !important;
        height: auto !important;
        aspect-ratio: 2 / 3 !important;
        max-height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        flex-shrink: 0;
    }

    body.consent-given .hero-marquee-track {
        animation-duration: 18s;
    }
}

/* Hero marquee - 400px very small (portrait 2:3, taller) */
@media (max-width: 400px) {
    .hero-images.hero-marquee-container {
        --hero-marquee-img-width: 135px;
        --hero-marquee-gap: 1.25rem;
        height: min(260px, 55vh);
        min-height: 230px;
        max-height: 55vh;
    }

    .hero-marquee-track img {
        width: 135px !important;
        height: auto !important;
        aspect-ratio: 2 / 3 !important;
        max-height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        flex-shrink: 0;
    }

    body.consent-given .hero-marquee-track {
        animation-duration: 16s;
    }
}

/* Distorted Gallery - 3D carousel (vanilla clone of Framer DistortedGallery) */
.distorted-gallery-container {
    width: 100%;
    max-width: 900px;
    height: 520px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
}
@media (max-width: 768px) {
    .distorted-gallery-container {
        height: 420px;
        margin: 0 auto;
        padding: 0 0.5rem;
        border-radius: 12px;
        max-width: 100%;
    }
    .distorted-gallery-container .dg-image {
        width: 260px !important;
        height: 340px !important;
        margin-left: -130px !important;
        margin-top: -170px !important;
    }
    .distorted-gallery-container .dg-control {
        width: 44px !important;
        height: 44px !important;
        margin-top: -22px !important;
        left: 12px !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .distorted-gallery-container .dg-control:last-of-type {
        right: 12px !important;
        left: auto !important;
    }
}
@media (max-width: 400px) {
    .distorted-gallery-container {
        height: 360px;
    }
    .distorted-gallery-container .dg-image {
        width: 220px !important;
        height: 300px !important;
        margin-left: -110px !important;
        margin-top: -150px !important;
    }
    .distorted-gallery-container .dg-control {
        width: 44px !important;
        height: 44px !important;
        left: 8px !important;
        display: flex !important;
    }
    .distorted-gallery-container .dg-control:last-of-type {
        right: 8px !important;
        left: auto !important;
    }
}
.distorted-gallery-container .dg-image {
    box-sizing: border-box;
}
.distorted-gallery-container .dg-image:hover {
    box-shadow: 0 16px 70px rgba(0,0,0,0.32), 0 6px 24px rgba(0,0,0,0.19) !important;
    filter: brightness(1.09) saturate(1.07) contrast(1.04);
    z-index: 40 !important;
    transition: box-shadow 0.25s cubic-bezier(.47,.21,.79,.88), filter 0.2s cubic-bezier(.47,.21,.79,.88);
}
.distorted-gallery-container .dg-control {
    color: #111;
}
.distorted-gallery-container .dg-control:hover {
    background: #fff !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.13) !important;
    color: #2563eb !important;
    transform: scale(1.07) !important;
}
.distorted-gallery-container .dg-control:hover svg {
    stroke: #2563eb !important;
}
.distorted-gallery-container .dg-control:active {
    transform: scale(0.95) !important;
}
.distorted-gallery-skeleton {
    width: 100%;
    max-width: 900px;
    height: 520px;
    margin: 0 auto;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}
.distorted-gallery-skeleton.hidden {
    display: none !important;
}
/* Artists skeleton: must override .cards-wrapper display:flex when hidden */
#artistsSkeleton.hidden {
    display: none !important;
}
@media (max-width: 768px) {
    .distorted-gallery-skeleton {
        height: 420px;
        max-width: 100%;
    }
}
@media (max-width: 400px) {
    .distorted-gallery-skeleton {
        height: 360px;
    }
}

/* Gallery Card Carousel - matches Artists section design */
.gallery-card-carousel-container {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
    position: relative;
    padding-bottom: 4rem;
}
.gallery-card-carousel-container .gallery-carousel-track {
    display: flex;
    gap: 2%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    height: 380px;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}
.gallery-card-carousel-container .gallery-carousel-slide {
    flex: 0 0 54%;
    width: 54%;
    min-width: 260px;
    height: 100%;
}
.gallery-card-carousel-container .gallery-carousel-controls {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}
.gallery-card-carousel-container .gallery-carousel-controls button {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.6);
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s ease;
}
.gallery-card-carousel-container .gallery-carousel-controls button:hover {
    background: rgba(0,196,255,0.3);
    color: var(--accent);
}
@media (max-width: 768px) {
    .gallery-card-carousel-container .gallery-carousel-track {
        height: 320px;
    }
    .gallery-card-carousel-container .gallery-carousel-slide {
        flex: 0 0 65%;
        width: 65%;
    }
}
@media (max-width: 640px) {
    .gallery-card-carousel-container .gallery-carousel-track {
        height: 300px;
    }
    .gallery-card-carousel-container .gallery-carousel-slide {
        flex: 0 0 78%;
        width: 78%;
        min-width: 240px;
    }
}
@media (max-width: 400px) {
    .gallery-card-carousel-container .gallery-carousel-track {
        height: 280px;
    }
    .gallery-card-carousel-container .gallery-carousel-slide {
        flex: 0 0 85%;
        width: 85%;
        min-width: 200px;
    }
}

/* Bento Gallery - homepage portfolio section */
.gallery-bento-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
}
.gallery-bento-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: 140px;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 640px) {
    .gallery-bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 768px) {
    .gallery-bento-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.bento-card {
    position: relative;
    min-height: 140px;
    cursor: pointer;
    border-radius: 0.75rem;
}
.bento-cell {
    grid-column: span 1;
    grid-row: span 1;
}
.bento-cell-featured {
    grid-column: span 1;
    grid-row: span 2;
}
@media (min-width: 768px) {
    .bento-cell-featured {
        grid-column: span 2;
        grid-row: span 2;
    }
}
.bento-card-inner {
    transition: opacity 0.3s ease;
}
.bento-card-overlay {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}
.bento-card-content {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* Desktop: hover shows overlay */
@media (min-width: 768px) {
    .gallery-bento-container .bento-card:hover .bento-card-overlay {
        opacity: 1;
    }
    .gallery-bento-container .bento-card:hover .bento-card-content {
        opacity: 1;
        visibility: visible;
    }
}
/* Mobile: tap adds bento-overlay-visible, then overlay/content shown */
@media (max-width: 767px) {
    .gallery-bento-container .bento-card.bento-overlay-visible .bento-card-overlay {
        opacity: 1;
    }
    .gallery-bento-container .bento-card.bento-overlay-visible .bento-card-content {
        opacity: 1;
        visibility: visible;
    }
}
/* Bento card scroll reveal - small screens: each card (image + overlay) fades in when scrolling */
@media (max-width: 767px) {
    .bento-card-reveal {
        opacity: 0;
        transform: translateY(32px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .bento-card-reveal.bento-revealed {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (min-width: 768px) {
    .bento-card-reveal.bento-revealed,
    .bento-card-reveal { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .bento-card-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* 3D Gallery Carousel - portfolio section */
.gallery-3d-carousel {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem 0 4rem;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}
.gallery-3d-carousel-wrap {
    position: relative;
    width: 100%;
}
.gallery-3d-carousel-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    perspective: 1200px;
}
@media (max-width: 767px) {
    .gallery-3d-carousel-track {
        min-height: 380px;
        perspective: none;
    }
}
.gallery-3d-card {
    position: absolute;
    border-radius: 1rem;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}
@media (max-width: 767px) {
    .gallery-3d-card {
        left: 50%;
        transform-origin: center center;
    }
}
.gallery-3d-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gallery-3d-card.gallery-3d-card-flipped .gallery-3d-card-inner {
    transform: rotateY(180deg);
}
.gallery-3d-card-front,
.gallery-3d-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: inherit;
    overflow: hidden;
}
.gallery-3d-card-front {
    background: var(--card-bg, #0d0f12);
}
.gallery-3d-card-back {
    transform: rotateY(180deg);
    background: linear-gradient(135deg, var(--card-bg, #14161a) 0%, rgba(20, 22, 26, 0.98) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 196, 255, 0.2);
}
.gallery-3d-card-back-content {
    padding: 1.25rem;
    text-align: center;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
}
.gallery-3d-card-back-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.gallery-3d-card-back-header .gallery-artist-profile {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.gallery-3d-card-back-header .gallery-artist-name {
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
}
.gallery-3d-card-back .gallery-artwork-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.gallery-3d-card-back .gallery-artwork-desc {
    font-size: 0.85rem;
    color: var(--subtext);
    line-height: 1.4;
    margin-bottom: 0.75rem;
}
.gallery-3d-card-back-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}
.gallery-3d-card-back .gallery-flip-back-btn {
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.gallery-3d-card-back .gallery-flip-back-btn:hover {
    background: rgba(0, 196, 255, 0.15);
}
.gallery-3d-book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}
.gallery-3d-book-btn:hover {
    background: #00d4ff;
}
.gallery-3d-card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gallery-3d-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.gallery-3d-card:hover .gallery-3d-card-overlay,
.gallery-3d-card.gallery-3d-card-active .gallery-3d-card-overlay {
    opacity: 1;
}
@media (max-width: 767px) {
    .gallery-3d-card-overlay {
        opacity: 1;
    }
}
.gallery-3d-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.75rem;
    line-height: 1.3;
}
.gallery-3d-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #000;
    background: #fff;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.gallery-3d-card-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.gallery-3d-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 0;
    margin-top: 1rem;
}
.gallery-3d-nav-btn {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
}
.gallery-3d-nav-btn:hover {
    background: rgba(255,255,255,0.25);
}
.gallery-3d-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.gallery-3d-dots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.gallery-3d-dot {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}
.gallery-3d-dot:hover {
    background: rgba(255,255,255,0.6);
}
.gallery-3d-dot-active {
    width: 1.5rem;
    border-radius: 9999px;
    background: #fff;
}
@media (prefers-reduced-motion: reduce) {
    .gallery-3d-card {
        transition: none;
    }
    .gallery-3d-card-inner {
        transition: none;
    }
}

/* Legacy portfolio gallery (kept for any fallback) */
.portfolio-gallery-wrapper {
    --pg-card-w: 18rem;
    --pg-gap: -14rem;
}
@media (min-width: 768px) {
    .portfolio-gallery-wrapper {
        --pg-card-w: 20rem;
        --pg-gap: -16rem;
    }
}
@media (min-width: 1024px) {
    .portfolio-gallery-wrapper {
        --pg-card-w: 22rem;
        --pg-gap: -18rem;
    }
}

/* Desktop: overlapping 3D cards (fixed stagger, lifted, no hover) */
.portfolio-gallery-desktop-strip {
    gap: var(--pg-gap);
    align-items: flex-end;
}
.portfolio-gallery-card {
    width: var(--pg-card-w);
    flex-shrink: 0;
    aspect-ratio: 4/3;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5),
                0 12px 32px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: none;
    transform-origin: bottom center;
}
.portfolio-gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.portfolio-gallery-card a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Skeleton strip - match desktop layout */
.portfolio-gallery-skeleton-strip {
    gap: var(--pg-gap);
}
.portfolio-gallery-skeleton-card {
    width: var(--pg-card-w);
}
.portfolio-gallery-skeleton-marquee {
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

/* Mobile: vertical stack - images touching, full width, lifted up */
.portfolio-gallery-mobile-vertical {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
}
.portfolio-gallery-mobile-vertical .portfolio-gallery-mobile-card {
    width: 100%;
    aspect-ratio: 4/3;
    flex-shrink: 0;
    overflow: hidden;
}
.portfolio-gallery-mobile-vertical .portfolio-gallery-mobile-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.portfolio-gallery-mobile-vertical .portfolio-gallery-mobile-card a {
    display: block;
    width: 100%;
    height: 100%;
}

.portfolio-gallery-marquee-group {
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.portfolio-gallery-marquee-track {
    width: max-content;
    will-change: transform;
    animation: none;
}
body.consent-given .portfolio-gallery-marquee-track {
    animation: portfolio-marquee-scroll 35s linear infinite;
}
.portfolio-gallery-marquee-card {
    width: 16rem;
    flex-shrink: 0;
    aspect-ratio: 4/3;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.portfolio-gallery-marquee-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.portfolio-gallery-marquee-card a {
    display: block;
    width: 100%;
    height: 100%;
}

@keyframes portfolio-marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Modern CTA Button */
.btn-modern-cta {
    background: linear-gradient(135deg, #00C4FF 0%, #0099CC 100%);
    color: #FFFFFF !important;
    border: none;
    box-shadow: 0 8px 24px rgba(0, 196, 255, 0.4),
                0 4px 12px rgba(0, 196, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.btn-modern-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.btn-modern-cta:hover::before {
    left: 100%;
}

.btn-modern-cta:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 196, 255, 0.5),
                0 6px 16px rgba(0, 196, 255, 0.3);
}

.btn-modern-cta:active {
    transform: translateY(0) scale(0.98);
}

.btn-modern-cta span,
.btn-modern-cta i {
    color: #FFFFFF !important;
    position: relative;
    z-index: 1;
}

/* Responsive adjustments for bokeh */
@media (max-width: 768px) {
    .bokeh {
        filter: blur(40px);
    }
    
    .bokeh-1, .bokeh-4 {
        width: 200px;
        height: 200px;
    }
    
    .bokeh-2, .bokeh-3, .bokeh-6, .bokeh-7, .bokeh-9 {
        width: 150px;
        height: 150px;
    }
    
    .bokeh-5, .bokeh-8, .bokeh-10 {
        width: 120px;
        height: 120px;
    }
}

/* ============================================
   GALLERY - Modern Premium Art Portfolio
   Grid layout, scroll reveal, 3D hover (desktop)
   ============================================ */

.gallery-grid.gallery-no-items {
    display: none !important;
}

:root {
    --gallery-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --gallery-transition: 0.45s var(--gallery-ease);
}

/* Responsive CSS Grid - centered alignment */
.gallery-grid {
    display: grid;
    gap: 1.25rem;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    place-items: center;
    justify-content: center;
}
.gallery-skeleton-grid {
    display: grid;
    gap: 1.25rem;
    width: 100%;
    margin-inline: auto;
    place-items: center;
}
.gallery-skeleton-grid.hidden {
    display: none !important;
}
.gallery-skeleton-grid > * {
    width: 100%;
}

@media (max-width: 639px) {
    .gallery-grid, .gallery-skeleton-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}
@media (min-width: 640px) and (max-width: 1023px) {
    .gallery-grid, .gallery-skeleton-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    .gallery-grid, .gallery-skeleton-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1280px) {
    .gallery-grid, .gallery-skeleton-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}

/* Scroll reveal - GPU-friendly (opacity + transform only), fade + slide up */
.gallery-grid-item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s var(--gallery-ease), transform 0.5s var(--gallery-ease);
    will-change: opacity, transform;
}
.gallery-grid-item.gallery-revealed {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

/* Infinite scroll - sentinel, loading indicator, end message */
.gallery-sentinel {
    height: 1px;
    width: 100%;
    visibility: hidden;
    pointer-events: none;
}
.gallery-load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--subtext);
}
.gallery-load-more-spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(0, 196, 255, 0.3);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: gallery-spin 0.8s linear infinite;
}
@keyframes gallery-spin {
    to { transform: rotate(360deg); }
}
.gallery-end {
    text-align: center;
    padding: 2rem;
    color: var(--subtext);
    font-size: 0.875rem;
}

/* Gallery Flip Card - aspect-ratio prevents layout shift, contain for GPU isolation */
.gallery-flip-card {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 3 / 4;
    min-height: 220px;
    perspective: 1200px;
    border-radius: 8px;
    overflow: hidden;
    contain: layout paint;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 196, 255, 0.15);
    transition: box-shadow var(--gallery-transition);
    cursor: pointer;
}

/* 3D hover effect - desktop only (scale + shadow, no auto-flip) */
@media (min-width: 1024px) and (hover: hover) {
    .gallery-flip-card:hover {
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 196, 255, 0.25);
    }
    .gallery-flip-card:hover:not(.flipped) .gallery-flip-inner {
        transform: perspective(1200px) rotateX(2deg) rotateY(-2deg) scale(1.02);
        transform-origin: center center;
    }
    .gallery-flip-card:hover .gallery-flip-front img {
        transform: scale(1.08); /* Premium zoom (1.05–1.08) */
    }
}

.gallery-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.55s var(--gallery-ease);
    transform-style: preserve-3d;
}

.gallery-flip-card.flipped .gallery-flip-inner {
    transform: rotateY(180deg);
}

.gallery-flip-front,
.gallery-flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
}

.gallery-flip-front {
    background: var(--card-bg);
}

.gallery-flip-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-width: 100%;
    cursor: pointer;
    transition: transform var(--gallery-transition);
}

.gallery-flip-front-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: none;
    transition: opacity var(--gallery-transition);
    opacity: 0.35;
}

@media (min-width: 1024px) and (hover: hover) {
    .gallery-flip-card:hover .gallery-flip-front-overlay {
        opacity: 0.15;
    }
}

.gallery-see-more {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-height: 3.5rem;
    min-width: 8rem;
    background: rgba(0, 196, 255, 0.08);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.3s, filter 0.2s;
    overflow: hidden;
}

/* Liquid-glass shadow layer */
.gallery-see-more-glass-shadow {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        0 0 6px rgba(0, 0, 0, 0.03),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 3px 3px 0.5px -3px rgba(0, 0, 0, 0.9),
        inset -3px -3px 0.5px -3px rgba(0, 0, 0, 0.85),
        inset 1px 1px 1px -0.5px rgba(0, 0, 0, 0.6),
        inset -1px -1px 1px -0.5px rgba(0, 0, 0, 0.6),
        inset 0 0 6px 6px rgba(0, 0, 0, 0.12),
        inset 0 0 2px 2px rgba(0, 0, 0, 0.06),
        0 0 12px rgba(255, 255, 255, 0.15);
}

/* Liquid-glass distortion layer (backdrop filter – distorts view behind button) */
.gallery-see-more-glass-filter {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    overflow: hidden;
    -webkit-backdrop-filter: url("#container-glass");
    backdrop-filter: url("#container-glass");
}

.gallery-see-more-text {
    position: relative;
    z-index: 10;
    pointer-events: none;
    padding: 0.75rem 1.5rem;
}

.gallery-see-more:hover,
.gallery-see-more:focus {
    transform: translateX(-50%) scale(1.05);
    background: rgba(0, 196, 255, 0.25);
    outline: 2px solid rgba(255, 255, 255, 0.4);
    outline-offset: 2px;
}

.gallery-see-more:hover .gallery-see-more-glass-shadow,
.gallery-see-more:focus .gallery-see-more-glass-shadow {
    filter: brightness(1.08);
}

.gallery-see-more:active {
    transform: translateX(-50%) scale(0.98);
}

/* Mobile: keep scroll reveal animation (fade in one by one as items enter view) */

.gallery-flip-back {
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(20, 22, 26, 0.98) 100%);
    transform: rotateY(180deg);
    border: 1px solid rgba(0, 196, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-flip-back-content {
    padding: 1.25rem;
    text-align: center;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
}

.gallery-flip-back-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.gallery-artist-profile {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.gallery-artist-name {
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
}

.gallery-artwork-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.gallery-artwork-desc {
    font-size: 0.85rem;
    color: var(--subtext);
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

.gallery-flip-back-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.gallery-flip-back-btn,
.gallery-view-full {
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.gallery-flip-back-btn:hover,
.gallery-flip-back-btn:focus,
.gallery-view-full:hover,
.gallery-view-full:focus {
    background: rgba(0, 196, 255, 0.15);
}

/* Mobile tap feedback */
@media (hover: none) {
    .gallery-flip-card:active .gallery-flip-inner {
        transform: scale(0.98);
    }
    .gallery-flip-card.flipped:active .gallery-flip-inner {
        transform: rotateY(180deg) scale(0.98);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-grid-item {
        opacity: 1;
        transform: none;
    }
    .gallery-flip-inner,
    .gallery-flip-front img,
    .gallery-flip-front-overlay {
        transition: none;
    }
    .gallery-flip-card:hover .gallery-flip-front img,
    .gallery-flip-card:hover:not(.flipped) .gallery-flip-inner {
        transform: none;
    }
}

/* Gallery Modal - Prev/Next navigation */
.gallery-modal-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.gallery-modal-nav:hover,
.gallery-modal-nav:focus {
    background: rgba(0, 196, 255, 0.4);
    color: #fff;
    transform: translateY(-50%) scale(1.05);
    outline: 2px solid rgba(0, 196, 255, 0.6);
    outline-offset: 2px;
}

.gallery-modal-prev { left: 1rem; }
.gallery-modal-next { right: 1rem; }

@media (max-width: 767px) {
    .gallery-modal-prev { left: 0.5rem; }
    .gallery-modal-next { right: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-modal-nav {
        transition: none;
    }
}

/* Gallery Grid Item Hover Effect */
.gallery-item {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    @apply rounded-2xl overflow-hidden;
    position: relative;
}

.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    opacity: 0;
    transition: opacity 0.5s ease-out;
    pointer-events: none;
}

.gallery-item:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 25px 70px rgba(0, 196, 255, 0.25), 
                0 10px 30px rgba(0, 0, 0, 0.3);
}

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

.gallery-item img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Artist Card Hover Effect */
.artist-card {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    @apply rounded-2xl overflow-hidden;
    position: relative;
}

.artist-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease-out;
    z-index: 1;
}

.artist-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 25px 70px rgba(0, 196, 255, 0.25), 
                0 10px 30px rgba(0, 0, 0, 0.3);
}

.artist-card:hover::before {
    transform: scaleX(1);
}

.artist-card img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.artist-card:hover img {
    transform: scale(1.1);
}

/* Loading Spinner */
.spinner {
    border: 4px solid rgba(0, 196, 255, 0.2);
    border-top: 4px solid var(--accent);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Form Input Focus */
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 196, 255, 0.15);
}

/* ============================================
   Booking Form - Desktop: spacious, prominent
   Mobile: compact (max-width: 768px)
   ============================================ */
.booking-form-container {
    width: 100%;
    max-width: 100%;
}
@media (min-width: 769px) {
    .booking-form-container {
        max-width: 700px;
    }
    .booking-header-section .booking-header-title {
        font-size: 2.75rem;
    }
    .booking-form-card {
        padding: 2rem 2.5rem !important;
    }
    .booking-form > * + * {
        margin-top: 2rem;
    }
    .booking-form .input-luxury,
    .booking-form select.input-luxury {
        padding: 0.875rem 1rem;
        min-height: 52px;
        font-size: 16px;
    }
    .booking-form textarea.input-luxury {
        padding: 0.875rem 1rem;
        font-size: 16px;
        min-height: 120px;
    }
    .booking-form label {
        font-size: 15px !important;
        margin-bottom: 0.5rem !important;
    }
    .booking-form .btn-luxury {
        min-height: 52px;
        font-size: 16px;
        padding: 0.875rem 1.5rem;
    }
}
@media (min-width: 1024px) {
    .booking-header-section .booking-header-title {
        font-size: 3.25rem;
    }
}
@media (max-width: 768px) {
    .booking-form-container {
        max-width: 100%;
    }
    .booking-form > * + * {
        margin-top: 1.5rem;
    }
}

/* Success/Error Messages with Animation */
.message {
    padding: 1.25rem 1.75rem;
    border-radius: 1rem;
    margin-top: 1rem;
    @apply border-2;
    animation: slide-up 0.4s ease-out;
    position: relative;
    overflow: hidden;
}

.message::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: currentColor;
    opacity: 0.8;
}

.message.success {
    background: rgba(0, 196, 255, 0.15);
    color: #E5C158;
    border-color: var(--accent);
}

.message.error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
    color: #fca5a5;
    border-color: #ef4444;
}

/* Loader before review sheet opens */
.booking-submit-loader {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    transition: opacity 0.2s ease;
}
.booking-submit-loader.hidden {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}
.booking-submit-loader-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(0, 196, 255, 0.3);
    border-top-color: #00C4FF;
    border-radius: 50%;
    animation: booking-submit-spin 0.8s linear infinite;
}
@keyframes booking-submit-spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   Booking Review Modal (Bottom Sheet)
   ============================================ */
.booking-review-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0.3s ease;
}
.booking-review-modal.is-open {
    pointer-events: auto;
    visibility: visible;
}
.booking-review-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.booking-review-modal.is-open .booking-review-overlay {
    opacity: 1;
}
.booking-review-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}
.booking-review-modal.is-open .booking-review-sheet {
    transform: translateY(0);
}
body.booking-modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    pointer-events: none;
}
body.booking-modal-open .booking-review-modal {
    pointer-events: auto;
}
/* Hide bottom nav when booking modal is open */
body.booking-modal-open .menu-bar-pill {
    display: none !important;
}
.booking-review-sheet-inner {
    padding: 1.5rem 1.5rem 2rem;
    overflow-y: auto;
    max-height: 75vh;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.booking-review-sheet-inner.hidden {
    display: none !important;
}
.booking-review-progress-wrap {
    height: 8px;
    min-height: 8px;
    flex-shrink: 0;
    background: rgba(0, 196, 255, 0.4);
    border-radius: 3px;
    margin-bottom: 1rem;
    overflow: hidden;
    opacity: 0;
}
.booking-review-modal.is-open .booking-review-progress-wrap {
    animation: booking-review-progress-fade-in 0.3s ease 0.05s forwards;
}
@keyframes booking-review-progress-fade-in {
    to { opacity: 1; }
}
.booking-review-progress {
    height: 100%;
    width: 100%;
    background: #00C4FF;
    transform-origin: left;
}
.booking-review-progress.animate {
    animation: booking-review-progress-shrink 8s linear forwards;
}
@keyframes booking-review-progress-shrink {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}
/* Countdown removed: progress bar only, no numbers */
.booking-review-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1.25rem;
    text-align: left;
    width: 100%;
    opacity: 0;
    transform: translateY(8px);
}
.booking-review-modal.is-open .booking-review-title {
    animation: booking-review-fade-up 0.35s ease 0.02s forwards;
}
.booking-review-content {
    position: relative;
    width: 100%;
}
/* Structured rows: 2-column layout */
.booking-review-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
.booking-review-row-3,
.booking-review-row-4 {
    grid-template-columns: 1fr;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
    margin-top: 0.5rem;
}
.booking-review-divider {
    height: 1px;
    background: var(--border);
    margin: 1rem 0;
    opacity: 0;
}
.booking-review-modal.is-open .booking-review-divider {
    animation: booking-review-fade-up 0.3s ease 0.35s forwards;
}
.booking-review-modal.is-open .booking-review-divider + .booking-review-divider {
    animation-delay: 0.4s;
}
.booking-review-cell-full {
    grid-column: 1 / -1;
}
.booking-review-cell {
    opacity: 0;
    transform: translateY(8px);
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
}
.booking-review-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--subtext);
    margin-bottom: 0.25rem;
}
.booking-review-value {
    font-size: 0.9375rem;
    color: var(--text);
    word-break: break-word;
}
.booking-review-item {
    opacity: 0;
    transform: translateY(8px);
    padding: 0.5rem 0;
    color: var(--subtext);
}
.booking-review-item strong {
    color: var(--text);
}
.booking-review-photo-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.booking-review-photo-thumbs img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
}
.booking-review-modal.is-open .booking-review-item-1 { animation: booking-review-fade-up 0.35s ease 0.12s forwards; }
.booking-review-modal.is-open .booking-review-item-2 { animation: booking-review-fade-up 0.35s ease 0.2s forwards; }
.booking-review-modal.is-open .booking-review-item-3 { animation: booking-review-fade-up 0.35s ease 0.28s forwards; }
.booking-review-modal.is-open .booking-review-item-4 { animation: booking-review-fade-up 0.35s ease 0.36s forwards; }
.booking-review-modal.is-open .booking-review-item-5 { animation: booking-review-fade-up 0.35s ease 0.44s forwards; }
.booking-review-modal.is-open .booking-review-item-6 { animation: booking-review-fade-up 0.35s ease 0.52s forwards; }
@keyframes booking-review-fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Countdown progress confirm button – design system only, no btn-luxury */
.booking-review-confirm-btn {
    position: relative;
    overflow: hidden;
    background-color: var(--accent);
    color: #FFFFFF !important;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.booking-review-confirm-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 196, 255, 0.3);
}
.booking-review-confirm-btn:active {
    transform: scale(0.98);
}
.booking-review-confirm-btn .booking-review-confirm-progress {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    transform-origin: right;
    pointer-events: none;
}
.booking-review-confirm-btn .booking-review-confirm-progress.animate {
    animation: booking-review-confirm-progress-shrink 8s linear forwards;
}
@keyframes booking-review-confirm-progress-shrink {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}
.booking-review-confirm-btn .booking-review-confirm-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #FFFFFF !important;
}
.booking-review-confirm-btn .booking-review-confirm-content i {
    color: #FFFFFF !important;
}
.booking-review-confirm-countdown {
    font-variant-numeric: tabular-nums;
    min-width: 1.25em;
}
.booking-review-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    align-items: stretch;
}
.booking-review-action-item {
    opacity: 0;
    transform: translateY(12px);
}
.booking-review-modal.is-open .booking-review-action-item:nth-child(1) {
    animation: booking-review-fade-up 0.35s ease 0.4s forwards;
}
.booking-review-modal.is-open .booking-review-action-item:nth-child(2) {
    animation: booking-review-fade-up 0.35s ease 0.5s forwards;
}
.booking-review-modify-btn {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--subtext);
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.booking-review-modify-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
}
.booking-review-success {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2rem;
    padding-bottom: max(2rem, calc(1.5rem + env(safe-area-inset-bottom)));
    text-align: left;
    width: 100%;
}
.booking-review-success.hidden {
    display: none !important;
}
.booking-review-success:not(.hidden) {
    display: flex !important;
}
.booking-review-success-check {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.2);
    border: 3px solid #22c55e;
    color: #22c55e;
    font-size: 2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    animation: booking-review-check-pop 0.4s ease;
}
@keyframes booking-review-check-pop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}
.booking-review-success-text {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 1rem;
}
.booking-review-success-details {
    width: 100%;
    max-width: 100%;
    text-align: left;
    margin-bottom: 1.5rem;
    padding: 1rem 0;
}
.booking-review-success-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.booking-review-success-row-full {
    grid-template-columns: 1fr;
    margin-top: 0.5rem;
}
.booking-review-success-row + .booking-review-success-row:not(.booking-review-success-row-full) {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}
.booking-review-success-row-full + .booking-review-success-row-full {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}
.booking-review-success-cell .booking-review-label {
    font-size: 0.6875rem;
    margin-bottom: 0.125rem;
}
.booking-review-success-cell .booking-review-value {
    font-size: 0.875rem;
}
.booking-review-success-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.booking-review-divider {
    height: 1px;
    background: var(--border);
    margin: 1rem 0;
}
.booking-review-actions {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
}
.booking-review-success-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    margin-top: 0.5rem;
}
.booking-review-success-actions {
    width: 100%;
    align-self: stretch;
    flex-direction: column;
    gap: 0.75rem;
}
.booking-review-success-actions.hidden {
    display: none !important;
}
.booking-review-success-actions:not(.hidden) {
    display: flex !important;
}
.booking-review-success-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}
.booking-review-success-btn:hover {
    background: #00a6e6;
    border-color: #00a6e6;
    box-shadow: 0 8px 16px rgba(0, 196, 255, 0.4);
}
.booking-review-success-btn i {
    opacity: 0.9;
    color: #fff;
}

/* Success sheet loader (while API saves) */
.booking-review-success-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
    width: 100%;
}
.booking-review-success-loader.hidden {
    display: none !important;
}
.booking-review-success-loader-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(0, 196, 255, 0.3);
    border-top-color: #00C4FF;
    border-radius: 50%;
    animation: booking-submit-spin 0.8s linear infinite;
}

/* Mobile Menu Animation */
#mobileMenu {
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(180deg, rgba(0, 196, 255, 0.05) 0%, rgba(20, 22, 26, 0.98) 100%) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0, 196, 255, 0.15) !important;
    box-shadow: inset 0 1px 0 rgba(0, 196, 255, 0.05);
}

#mobileMenu a {
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.25s ease !important;
}

#mobileMenu.hidden {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

#mobileMenu.show {
    max-height: 500px;
}

/* More Menu Dropdown - Liquid style */
#moreMenuDropdown {
    background: linear-gradient(180deg, rgba(0, 196, 255, 0.06) 0%, rgba(20, 22, 26, 0.98) 30%, rgba(15, 23, 42, 0.97) 100%) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 196, 255, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(0, 196, 255, 0.08),
                0 0 24px rgba(0, 196, 255, 0.06);
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.35s ease !important;
}

#moreMenuDropdown a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.2s ease !important;
}

#moreMenuDropdown a i {
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

#moreMenuDropdown a:hover {
    background-color: rgba(0, 196, 255, 0.2) !important;
    color: var(--accent) !important;
}

/* More menu button hover - replaces inline onmouseover/onmouseout for CSP */
#moreMenuBtn:hover {
    color: var(--accent) !important;
}

/* Gallery Image Modal - fixed dimensions, close (X) button */
.gallery-modal {
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.85);
}

.gallery-modal-close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 60;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #dc2626;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.gallery-modal-close:hover,
.gallery-modal-close:focus {
    background: rgba(220, 38, 38, 0.3);
    color: #ef4444;
    transform: scale(1.05);
    outline: none;
}

.gallery-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
}

/* Image container - fixed dimensions */
.gallery-modal-image-wrap {
    width: 90vw;
    max-width: 600px;
    height: 70vh;
    max-height: 500px;
    background: rgba(20, 22, 26, 0.95);
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(0, 196, 255, 0.2);
    box-shadow: 0 0 40px rgba(0, 196, 255, 0.15);
}

.gallery-modal-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.gallery-modal-info {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    text-align: center;
    max-width: 600px;
}

/* Mobile - smaller fixed dimensions */
@media (max-width: 767px) {
    .gallery-modal-image-wrap {
        width: 92vw;
        max-width: 92vw;
        height: 60vh;
        max-height: 400px;
    }

    .gallery-modal-close {
        top: 0.75rem;
        right: 0.75rem;
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }
}

/* ============================================
   Gallery Item Modal (See more - distorted gallery)
   Fully responsive for mobile and desktop
   ============================================ */
.gallery-item-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    background: rgba(0, 0, 0, 0.96) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.gallery-item-modal-content {
    max-width: 540px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--card-bg);
    border-radius: 1rem;
    border: 1px solid rgba(0, 196, 255, 0.2);
    box-shadow: 0 0 40px rgba(0, 196, 255, 0.15);
}

.gallery-item-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 10;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #dc2626;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.gallery-item-modal-close:hover,
.gallery-item-modal-close:focus {
    background: rgba(220, 38, 38, 0.3);
    color: #ef4444;
    transform: scale(1.05);
    outline: none;
}

/* All X (close) buttons - red across entire site - overrides inline/Tailwind */
#artistModalClose,
#artistModalClose i,
#certModalClose,
#certModalClose i,
#adminImageLightboxClose,
#adminImageLightboxClose i,
#artistCropModalClose,
#artistCropModalClose i,
.fluid-nav-container[data-expanded="true"] .fluid-nav-icon-x,
button[data-action="closeAddGalleryModal"] i.fa-times,
button[data-action="closeEditGalleryModal"] i.fa-times,
button[data-action="closeAddArtistModal"] i.fa-times,
button[data-action="closeEditArtistModal"] i.fa-times,
button[data-action="closeCertificationsModal"] i.fa-times,
button[data-action="closeAddCertificationModal"] i.fa-times,
button[data-action="closeEditCertificationModal"] i.fa-times {
    color: #dc2626 !important;
}
#artistModalClose:hover,
#artistModalClose:hover i,
#certModalClose:hover,
#certModalClose:hover i,
#adminImageLightboxClose:hover,
#adminImageLightboxClose:hover i,
#artistCropModalClose:hover,
#artistCropModalClose:hover i,
button[data-action="closeAddGalleryModal"]:hover i.fa-times,
button[data-action="closeEditGalleryModal"]:hover i.fa-times,
button[data-action="closeAddArtistModal"]:hover i.fa-times,
button[data-action="closeEditArtistModal"]:hover i.fa-times,
button[data-action="closeCertificationsModal"]:hover i.fa-times,
button[data-action="closeAddCertificationModal"]:hover i.fa-times,
button[data-action="closeEditCertificationModal"]:hover i.fa-times {
    color: #ef4444 !important;
}

.gallery-item-modal-image-wrap {
    width: 100%;
    max-height: 38vh;
    max-width: 420px;
    margin: 0 auto;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-item-modal-image {
    width: 100%;
    height: 100%;
    max-height: 38vh;
    object-fit: contain;
    object-position: center;
    display: block;
}

.gallery-item-modal-info {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 1.25rem 1.5rem;
    text-align: center;
}

.gallery-item-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--text);
}

.gallery-item-modal-artist {
    font-size: 0.875rem;
    margin-bottom: 1rem;
    color: var(--subtext);
}

.gallery-item-modal-desc {
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    color: var(--subtext);
    text-align: left;
}

.gallery-item-modal-category {
    font-size: 0.75rem;
    margin-bottom: 1.25rem;
    color: var(--accent);
}

.gallery-item-modal-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.5rem;
}

.gallery-item-modal-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    min-height: 36px;
    width: 100%;
    border-radius: 9999px;
    border: none;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.gallery-item-modal-nav-btn:hover {
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.25);
}

.gallery-item-modal-book-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.5rem 1rem;
    min-height: 36px;
    font-size: 0.8125rem;
}

.gallery-item-modal-counter {
    font-size: 0.75rem;
    margin-top: 0.75rem;
    color: var(--subtext);
}

/* Gallery modal - same arrow style as artist carousel, arrows above Book button */
.gallery-item-modal .artist-nav-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
    order: -1; /* Ensure arrows appear above Book Appointment button */
    margin-bottom: 0.5rem;
}

.gallery-item-modal .carousel-arrow {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(145deg, rgba(0, 196, 255, 0.35) 0%, rgba(0, 196, 255, 0.15) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease,
                color 0.2s ease;
}

.gallery-item-modal .carousel-arrow:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        0 4px 16px rgba(0, 196, 255, 0.4),
        0 0 20px rgba(0, 196, 255, 0.25);
    color: #fff;
}

.gallery-item-modal .carousel-arrow:active {
    transform: translateY(0) scale(0.96);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.35),
        0 1px 4px rgba(0, 0, 0, 0.2);
}

.gallery-item-modal .carousel-arrow .artist-nav-chevron svg {
    color: #fff;
}

/* Touch targets: min 44px for carousel arrows on mobile */
@media (max-width: 768px) {
    .gallery-item-modal .carousel-arrow {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }
}

/* Desktop: 768px+ */
@media (min-width: 768px) {
    .gallery-item-modal-image-wrap {
        max-height: 55vh;
        max-width: 480px;
    }

    .gallery-item-modal-image {
        max-height: 55vh;
    }

    .gallery-item-modal-info {
        padding: 1.25rem 1.5rem 1.5rem;
    }

    .gallery-item-modal-actions {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }

    .gallery-item-modal-nav-btn {
        width: auto;
        flex: 0 0 auto;
        min-height: 42px;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .gallery-item-modal-book-btn {
        width: auto;
        flex: 1 1 auto;
        min-width: 140px;
        max-width: 180px;
        min-height: 42px;
        padding: 0.5rem 1.25rem;
        font-size: 0.875rem;
    }
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 14px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 7px;
    border: 3px solid var(--bg);
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* Luxury Badge */
.badge-luxury {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold;
    @apply bg-gradient-to-r from-luxury-accent to-luxury-hover;
    @apply text-white shadow-luxury;
}

/* Luxury Filter Button */
.filter-btn-luxury {
    @apply px-6 py-3 rounded-xl font-medium transition-all duration-300;
    @apply border-2 border-luxury-border/50;
    @apply bg-luxury-card text-gray-200;
}

.filter-btn-luxury:hover,
.filter-btn-luxury.active {
    @apply bg-luxury-accent text-white border-luxury-accent;
    @apply shadow-luxury-hover;
    transform: translateY(-2px);
}

/* Luxury Tab */
.tab-luxury {
    @apply px-6 py-4 border-b-2 transition-all duration-300;
    @apply text-gray-400 border-transparent;
    color: var(--subtext) !important;
}

.tab-luxury:hover {
    @apply text-luxury-hover border-luxury-hover/50;
    color: var(--accent) !important;
}

.tab-luxury.active {
    @apply text-luxury-accent border-luxury-accent font-semibold;
    color: var(--accent) !important;
}

/* Unified Skeleton Loader - used across all pages */
.skeleton-luxury {
    background: linear-gradient(90deg, 
        var(--card-bg) 0%, 
        rgba(0, 196, 255, 0.12) 50%, 
        var(--card-bg) 100%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-card {
    border-radius: 1rem;
    overflow: hidden;
}

.skeleton-line {
    height: 1rem;
    border-radius: 0.5rem;
}

.skeleton-block {
    border-radius: 0.5rem;
}

.skeleton-image {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-luxury {
        animation: none;
        background: var(--card-bg);
    }
}

/* Gallery Skeleton - matches flip card layout */
.gallery-skeleton {
    margin-bottom: 1rem;
}

.gallery-skeleton-strip {
    display: flex;
    gap: 0.5rem;
    height: 24rem;
}

@media (max-width: 767px) {
    .gallery-skeleton-strip {
        flex-direction: column;
        height: auto;
        gap: 1.5rem;
    }
    .gallery-skeleton-item {
        height: 320px !important;
    }
}

.gallery-skeleton-item {
    flex: 1;
    min-width: 0;
    min-height: 20rem;
}

@media (min-width: 768px) {
    .gallery-skeleton-item:nth-child(1) { flex: 1; }
    .gallery-skeleton-item:nth-child(2) { flex: 1.2; }
    .gallery-skeleton-item:nth-child(3) { flex: 1.5; }
    .gallery-skeleton-item:nth-child(4) { flex: 1.2; }
    .gallery-skeleton-item:nth-child(5) { flex: 1; }
}

/* Additional Utility Classes */
.text-luxury-text-secondary {
    color: var(--subtext);
}

.bg-luxury-gold,
.bg-luxury-accent {
    background: var(--accent);
}

.text-luxury-gold,
.text-luxury-accent {
    color: var(--accent);
}

.text-luxury-text {
    color: var(--text);
}

.text-luxury-accent {
    color: var(--accent);
}

.bg-luxury-dark {
    background-color: var(--bg);
}

.bg-luxury-card {
    background-color: var(--card-bg);
}

/* Footer Theme */
footer {
    background-color: var(--bg) !important;
    color: var(--subtext);
    border-top: 1px solid var(--border);
    transition: var(--transition);
}
/* Left-align Contact Us, Location, Working Hours, Follow Us - desktop and mobile */
footer .container .grid,
footer .container .grid > div {
    text-align: left !important;
}
footer .container .grid h3,
footer .container .grid p,
footer .container .grid .text-sm {
    text-align: left !important;
}
footer .container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
/* Footer bottom: copyright + links - centered */
footer .footer-bottom,
footer .border-t.pt-6 {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1.5rem;
    margin-top: 0;
}
footer .footer-bottom p:first-child,
footer .border-t.pt-6 > p:first-child {
    margin-bottom: 0.75rem;
    margin-top: 0;
    text-align: center;
}
footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
footer .footer-links a {
    color: var(--accent);
    text-decoration: none;
}
footer .footer-links a:hover {
    text-decoration: underline;
}
footer .footer-divider {
    margin: 0 0.25rem;
    color: var(--subtext);
    opacity: 0.7;
    user-select: none;
}
@media (max-width: 768px) {
    /* Keep grid columns (Contact Us, Follow Us, Location, Working Hours) left-aligned on mobile */
    footer .container .grid,
    footer .container .grid > div {
        text-align: left !important;
    }
    /* Footer bottom (copyright, Terms, Privacy) stays centered */
    footer .footer-bottom,
    footer .border-t.pt-6 {
        padding-top: 1.25rem;
    }
    footer .footer-bottom p,
    footer .border-t.pt-6 > p {
        font-size: 0.9rem;
    }
    footer .footer-links {
        flex-direction: row;
        gap: 1rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 396px) {
    footer .footer-links {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
    }

    footer .footer-links a {
        white-space: nowrap;
        font-size: 13px;
    }

    .artists-tagline {
        font-size: 13px !important;
    }
}

/* Section Padding */
.section {
    padding: 3rem 1rem;
}

/* Back to home (first page) - matches site design, hidden on first page */
.back-to-home-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 998;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: var(--radius);
    background: rgba(20, 22, 26, 0.9);
    color: var(--accent);
    border: 1px solid var(--border);
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: var(--transition);
    box-shadow: var(--shadow);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.back-to-home-btn:hover {
    color: var(--text);
    background: rgba(0, 196, 255, 0.15);
    border-color: rgba(0, 196, 255, 0.3);
}
.back-to-home-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
@media (max-width: 767px) {
    .back-to-home-btn {
        bottom: 4.5rem;
        right: 1rem;
        padding: 0.45rem 0.65rem;
        font-size: 0.75rem;
    }
    .back-to-home-btn .back-to-home-text {
        display: none;
    }
    /* Prevent scroll-to-top button from overlapping footer copyright on mobile - use equal padding to keep content centered */
    footer .footer-bottom,
    footer .border-t.pt-6,
    footer .container.text-center {
        padding-left: 3.5rem !important;
        padding-right: 3.5rem !important;
    }
    /* Add clearance between footer copyright and bottom nav on mobile */
    footer {
        padding-bottom: 5rem !important;
    }
}
@media (min-width: 768px) {
    .back-to-home-btn .back-to-home-text {
        display: inline;
    }
}

/* Scroll Background Effect - Particle canvas behind content (after hero) */
#scroll-bg-effect {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: var(--bg);
}

#main-content-area {
    position: relative;
    z-index: 1;
}

/* Semi-transparent section backgrounds so particle effect shows through */
#main-content-area > section:not(#artists-section):not(#portfolio-gallery-section) {
    background: rgba(13, 15, 18, 0.92);
}

#main-content-area > section.section-card-bg:not(#artists-section):not(#portfolio-gallery-section) {
    background: rgba(20, 22, 26, 0.92);
}

#artists-section,
#portfolio-gallery-section {
    background: transparent !important;
}

/* Gallery & Artists sections - base (desktop uses this, mobile overrides below) */
#portfolio-gallery-section,
#artists-section {
    margin-top: 0;
}

/* Desktop (769px+): original layout - padding, flex, no aggressive centering */
@media (min-width: 769px) {
    #portfolio-gallery-section,
    #artists-section {
        padding: 60px 20px 60px;
        min-height: auto;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        align-items: stretch;
        justify-content: flex-start;
    }

    #portfolio-gallery-section .section-container,
    #artists-section .section-container {
        max-width: 1280px;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #portfolio-gallery-section .section-title,
    #artists-section .section-title {
        margin-bottom: 10px;
    }

    #portfolio-gallery-section .section-subtitle,
    #artists-section .section-subtitle {
        margin-bottom: 30px;
        opacity: 0.85;
    }

    #portfolio-gallery-section .cards-wrapper,
    #artists-section .cards-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 40px;
        width: 100%;
        flex-direction: row;
    }

    #portfolio-gallery-section .section-cta {
        margin-top: 40px;
        display: flex;
        justify-content: center;
    }
}

/* Mobile only (768px and below): centered layout, card borders, professional spacing */
@media (max-width: 768px) {
    #portfolio-gallery-section,
    #artists-section {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 90px 20px 60px;
        box-sizing: border-box;
        text-align: center;
    }

    #portfolio-gallery-section .section-container,
    #artists-section .section-container {
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #portfolio-gallery-section .section-title,
    #artists-section .section-title {
        margin-bottom: 8px;
    }

    #portfolio-gallery-section .section-subtitle,
    #artists-section .section-subtitle {
        margin-bottom: 25px;
        opacity: 0.85;
    }

    #portfolio-gallery-section .cards-wrapper,
    #artists-section .cards-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 25px;
        width: 100%;
        margin-top: 30px;
    }

    /* Card styling - carousel slides and skeleton */
    #portfolio-gallery-section .artist-carousel-slide-inner,
    #artists-section .artist-carousel-slide-inner,
    #artists-section .skeleton-luxury.skeleton-card {
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,0.08);
        box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    }

    #portfolio-gallery-section .section-cta {
        margin-top: 2rem;
    }
}

/* Enforce no margin between sections */
#main-content-area > section {
    margin-top: 0;
}
#main-content-area > section + section {
    margin-top: 0;
}

/* Responsive: slightly reduced section padding on very small screens */
@media (max-width: 480px) {
    #portfolio-gallery-section,
    #artists-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

/* Gallery page - transparent sections (no dark box) */
body.gallery-page #main-content-area > section {
    background: transparent !important;
}

/* After Care - prevent internal scrollbar on large screens */
@media (min-width: 768px) {
    .after-care-do-avoid-wrapper,
    .after-care-do,
    .after-care-avoid {
        max-height: none !important;
        overflow-y: visible !important;
    }
}

/* After Care page - designed cards */
.after-care-do {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.02) 100%);
    border-color: rgba(16, 185, 129, 0.25);
}
.after-care-avoid {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(249, 115, 22, 0.02) 100%);
    border-color: rgba(249, 115, 22, 0.25);
}
.after-care-timeline-step {
    background: rgba(0, 196, 255, 0.06);
    border: 1px solid rgba(0, 196, 255, 0.2);
}
.after-care-timeline-step:hover {
    border-color: rgba(0, 196, 255, 0.4);
    box-shadow: 0 4px 12px rgba(0, 196, 255, 0.1);
}
.after-care-longterm {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.08) 0%, rgba(138, 43, 226, 0.02) 100%);
    border-color: rgba(138, 43, 226, 0.2);
}
.after-care-first-24 {
    background: rgba(26, 32, 44, 0.6);
    border-color: rgba(0, 196, 255, 0.15);
}
.after-care-list-row {
    padding: 0.65rem 0.85rem;
    background: rgba(20, 26, 34, 0.5);
    border-radius: 0.5rem;
    margin-bottom: 0.35rem;
    border-left: 3px solid transparent;
    transition: background 0.2s ease;
}
.after-care-do .after-care-list-row { border-left-color: rgba(16, 185, 129, 0.5); }
.after-care-avoid .after-care-list-row { border-left-color: rgba(249, 115, 22, 0.5); }
.after-care-first-24 .after-care-list-row { border-left-color: rgba(16, 185, 129, 0.4); }

/* Full width for ALL containers in 1024-1112px (nav, header, content, footer) */
@media (min-width: 1024px) and (max-width: 1112px) {
    .container {
        max-width: 100% !important;
        width: 100%;
        box-sizing: border-box;
    }
}

/* After Care - Do/Avoid table */
.after-care-do-avoid-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--card-bg);
}
.after-care-do-avoid-table th,
.after-care-do-avoid-table td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
.after-care-do-avoid-table th {
    font-weight: 600;
    color: var(--text);
}
.after-care-do-avoid-table th:first-child { background: rgba(16, 185, 129, 0.08); }
.after-care-do-avoid-table th:last-child { background: rgba(249, 115, 22, 0.08); }
.after-care-do-avoid-table td { color: var(--subtext); }
.after-care-th-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.5rem; margin-right: 0.5rem; }
@media (max-width: 640px) {
    .after-care-do-avoid-table { display: block; }
    .after-care-do-avoid-table thead { display: none; }
    .after-care-do-avoid-table tr { display: block; margin-bottom: 0.5rem; border: 1px solid var(--border); border-radius: 0.5rem; overflow: hidden; }
    .after-care-do-avoid-table td { display: block; padding: 0.5rem 0.75rem; border: none; border-bottom: 1px solid var(--border); }
    .after-care-do-avoid-table td:last-child { border-bottom: none; }
    .after-care-do-avoid-table td:first-child::before { content: "Do: "; font-weight: 600; color: #10B981; }
    .after-care-do-avoid-table td:last-child::before { content: "Avoid: "; font-weight: 600; color: #F97316; }
}

#main-content-area > footer {
    background: rgba(13, 15, 18, 0.95) !important;
}

/* Desktop (769px+): restore original section layout - no full-screen, no scroll-snap */
@media (min-width: 769px) {
    section {
        min-height: auto;
        display: block;
        text-align: initial;
    }

    /* Containers control layout on desktop (!important overrides Tailwind's 1024px lg breakpoint) */
    .container {
        max-width: 1200px !important;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* Homepage desktop: normal flow, no scroll-snap */
    html.homepage-three-pages,
    body.homepage-three-pages {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }
    body.homepage-three-pages #first-page,
    body.homepage-three-pages #portfolio-gallery-section,
    body.homepage-three-pages #artists-section {
        min-height: auto;
        scroll-snap-align: none;
    }
}

/* Homepage: full-screen sections with scroll snap - MOBILE ONLY (768px and below) */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    html.homepage-three-pages,
    body.homepage-three-pages {
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }
    body.homepage-three-pages #first-page,
    body.homepage-three-pages #portfolio-gallery-section,
    body.homepage-three-pages #artists-section {
        min-height: 100vh;
        width: 100%;
        scroll-snap-align: start;
    }
    /* Hero: padding for fixed nav */
    body.homepage-three-pages #first-page {
        padding-top: 90px;
        box-sizing: border-box;
    }
    /* Gallery section: prevent title from being hidden behind fixed navbar */
    body.homepage-three-pages #portfolio-gallery-section {
        scroll-margin-top: 90px;
        padding-top: 90px;
    }
    /* Fixed navbar on homepage */
    body.homepage-three-pages .nav-luxury {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1000;
    }
    /* Footer: no snap, appears gradually when scrolling from last section */
    body.homepage-three-pages #main-content-area > footer {
        scroll-snap-align: none;
        scroll-snap-stop: normal;
        min-height: auto;
        padding: 48px 20px;
    }
}

/* ============================================
   MENU BAR (Mobile Bottom Nav - pill only)
   ============================================ */

.menu-bar-pill {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-height: 40px;
    padding: 8px 10px 1rem;
    margin-bottom: 0.5rem;
    border-radius: 9999px;
    opacity: 1;
    visibility: visible;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, rgba(0, 196, 255, 0.08) 0%, rgba(15, 23, 42, 0.95) 50%, rgba(0, 196, 255, 0.05) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 196, 255, 0.2);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05),
                0 0 20px rgba(0, 196, 255, 0.08),
                0 8px 24px -4px rgba(0, 0, 0, 0.25);
    z-index: 1000;
}

.menu-bar-pill.menu-bar-scrolling {
    transform: translateX(-50%) translateY(calc(100% + 2rem));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Menu bar pill hidden on desktop */
@media (min-width: 768px) {
    .menu-bar-pill {
        display: none;
    }
}

/* Reserve space at bottom on mobile so content isn't hidden behind the pill */
@media (max-width: 767px) {
    body {
        padding-bottom: 5rem;
    }
}

.menu-bar-pill:hover {
    border-color: rgba(0, 196, 255, 0.3);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05),
                0 0 24px rgba(0, 196, 255, 0.12),
                0 8px 24px -4px rgba(0, 0, 0, 0.25);
}

.menu-bar-item {
    min-width: 36px;
    padding: 6px 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-shrink: 0;
    border-radius: 9999px;
    color: var(--subtext);
    text-decoration: none;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                gap 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                padding 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-tap-highlight-color: transparent;
}

/* Expanded state - show label with spring-like animation */
.menu-bar-item.menu-bar-item-expanded {
    gap: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    color: var(--accent);
    background: linear-gradient(135deg, rgba(0, 196, 255, 0.2) 0%, rgba(0, 196, 255, 0.1) 100%);
}

.menu-bar-item:hover,
.menu-bar-item:focus {
    color: var(--accent);
    background: linear-gradient(135deg, rgba(0, 196, 255, 0.2) 0%, rgba(0, 196, 255, 0.1) 100%);
    transform: scale(1.02);
}

.menu-bar-item.menu-bar-item-expanded:hover,
.menu-bar-item.menu-bar-item-expanded:focus {
    transform: none;
}

.menu-bar-item:active {
    transform: scale(0.98);
}

.menu-bar-item.active {
    color: var(--accent);
    background: linear-gradient(135deg, rgba(0, 196, 255, 0.15) 0%, rgba(0, 196, 255, 0.08) 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 196, 255, 0.2);
}

.menu-bar-item i {
    font-size: 1.125rem;
    flex-shrink: 0;
}

.menu-bar-label {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    transition: max-width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-bar-item.menu-bar-item-expanded .menu-bar-label {
    max-width: 80px;
    opacity: 1;
}

.menu-bar-item:hover .menu-bar-label,
.menu-bar-item:focus .menu-bar-label,
.menu-bar-item.menu-bar-item-expanded .menu-bar-label {
    color: inherit;
}

.menu-bar-current-page {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent);
    white-space: nowrap;
    padding: 0 0.5rem;
    margin-right: 0.25rem;
    border-right: 1px solid rgba(0, 196, 255, 0.3);
}

.menu-bar-current-page:empty {
    display: none;
}

/* ============================================
   FLUID NAV MENU - Circular expandable menu
   ============================================ */
/* When fluid menu is open, raise above bottom nav (z-index 1000) */
.fluid-nav-open {
    z-index: 1100 !important;
}

.fluid-nav-container {
    position: relative;
    width: 64px;
    min-height: 64px;
    overflow: visible;
}

.fluid-nav-wrapper {
    position: relative;
}

.fluid-nav-backdrop {
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-color: rgba(20, 22, 26, 0.85);
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.3s ease;
}

.fluid-nav-container[data-expanded="true"] .fluid-nav-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}

/* Fluid nav panel - frosted glass menu bar style (around items) */
.fluid-nav-panel {
    position: absolute;
    top: 48px;
    right: 0;
    min-width: 200px;
    padding: 12px 8px 16px 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(0, 196, 255, 0.06) 0%, rgba(20, 22, 26, 0.98) 30%, rgba(15, 23, 42, 0.97) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 196, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(0, 196, 255, 0.08),
                0 0 24px rgba(0, 196, 255, 0.06);
    z-index: 45;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.3s ease;
}

.fluid-nav-container[data-expanded="true"] .fluid-nav-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.fluid-nav-trigger {
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
    color: var(--text);
    background: transparent;
    border: none;
    box-shadow: none;
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
                color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50;
    will-change: transform;
}

.fluid-nav-item {
    position: absolute;
    top: 0;
    right: 0;
    width: 64px;
    min-height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 12px;
    cursor: pointer;
    text-decoration: none;
    color: var(--text);
    background: transparent;
    border: none;
    box-shadow: none;
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
                color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50;
    will-change: transform;
}

.fluid-nav-label {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.fluid-nav-container[data-expanded="true"] .fluid-nav-item {
    width: auto;
    min-width: 64px;
}

.fluid-nav-container[data-expanded="true"] .fluid-nav-item .fluid-nav-label {
    opacity: 1;
    max-width: 140px;
}

.fluid-nav-trigger:hover,
.fluid-nav-item:hover {
    color: var(--accent);
}

.fluid-nav-trigger:focus,
.fluid-nav-trigger:focus-visible,
.fluid-nav-item:focus,
.fluid-nav-item:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.fluid-nav-trigger i,
.fluid-nav-item i {
    font-size: 1.5rem;
    color: inherit;
}

/* Fluid nav tooltip */
.fluid-nav-tooltip {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%) translateY(-8px);
    pointer-events: none;
    z-index: 1100;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    background: linear-gradient(135deg, rgba(0, 196, 255, 0.1) 0%, rgba(20, 22, 26, 0.98) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 196, 255, 0.2);
    color: var(--text);
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.fluid-nav-tooltip.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(-8px);
}

/* Toggle icon - bars visible when closed, X when open */
.fluid-nav-icon-bars {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition: opacity 300ms ease, transform 300ms ease;
}

.fluid-nav-icon-x {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -12px;
    margin-left: -12px;
    opacity: 0;
    transform: scale(0) rotate(-180deg);
    transition: opacity 300ms ease, transform 300ms ease;
}

.fluid-nav-container[data-expanded="true"] .fluid-nav-icon-bars {
    opacity: 0;
    transform: scale(0) rotate(180deg);
}

.fluid-nav-container[data-expanded="true"] .fluid-nav-icon-x {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Expanded items - inside panel, stack vertically */
.fluid-nav-panel > .fluid-nav-item {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    min-width: auto;
    transform: none;
    z-index: 40;
}

.fluid-nav-container[data-expanded="false"] .fluid-nav-panel > .fluid-nav-item {
    opacity: 0;
    pointer-events: none;
}

.fluid-nav-container[data-expanded="true"] .fluid-nav-panel > .fluid-nav-item {
    opacity: 1;
    pointer-events: auto;
}

.fluid-nav-panel > .fluid-nav-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 4px;
    border-radius: 12px;
    transition: background 0.2s ease, color 0.2s ease;
}

.fluid-nav-panel > .fluid-nav-item .fluid-nav-label {
    opacity: 1;
    max-width: 140px;
}

.fluid-nav-panel > .fluid-nav-item:last-child {
    margin-bottom: 0;
}

.fluid-nav-panel > .fluid-nav-item:hover {
    background: rgba(0, 196, 255, 0.12);
}

.fluid-nav-panel > .fluid-nav-item:nth-child(1) {
    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fluid-nav-panel > .fluid-nav-item:nth-child(2) {
    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fluid-nav-panel > .fluid-nav-item:nth-child(3) {
    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fluid-nav-panel > .fluid-nav-item:nth-child(4) {
    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   COMPREHENSIVE MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 767px) {
    /* Logo - 120x120 on mobile */
    nav img[alt*="Logo"] {
        width: 120px !important;
        height: 120px !important;
        max-width: 120px !important;
        max-height: 120px !important;
    }
    
    /* Navigation - Reduced padding */
    .nav-luxury .container > div {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    
    /* Header sections - Reduced padding */
    section.py-16,
    section.py-20 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    /* Main headings - Smaller on mobile */
    h1.text-4xl,
    h1.text-5xl,
    h1.text-6xl {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.75rem !important;
    }
    
    h2.text-3xl,
    h2.text-4xl,
    h2.text-5xl {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Subheadings and paragraphs - Smaller */
    p.text-xl,
    p.text-2xl {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }
    
    /* Featured/Gallery Cards - Smaller on mobile */
    .featured-gallery-item,
    .gallery-item {
        margin-bottom: 1rem;
    }
    
    .featured-gallery-item .relative,
    .gallery-item .relative {
        height: 160px !important;
    }
    
    .featured-gallery-item img,
    .gallery-item img {
        height: 160px !important;
        object-fit: cover;
    }
    
    .featured-gallery-item .h-64,
    .gallery-item .h-64 {
        height: 160px !important;
    }
    
    /* Card content - Reduced padding */
    .featured-gallery-item > div:last-child,
    .gallery-item > div:last-child {
        padding: 0.75rem !important;
    }
    
    .featured-gallery-item h3,
    .gallery-item h3 {
        font-size: 0.875rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .featured-gallery-item p,
    .gallery-item p {
        font-size: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .featured-gallery-item span,
    .gallery-item span {
        font-size: 0.625rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    /* Featured badge - Smaller */
    .featured-gallery-item .absolute.top-3.left-3 {
        top: 0.5rem !important;
        left: 0.5rem !important;
        padding: 0.25rem 0.5rem !important;
        font-size: 0.625rem !important;
    }
    
    /* Filter buttons - Smaller and more compact */
    #filterContainer button,
    #filterContainer .filter-btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    #filterContainer {
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Grid gaps - Reduced */
    .grid.gap-6,
    .grid.gap-8 {
        gap: 1rem !important;
    }
    
    /* Section spacing - Reduced */
    section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .container.mx-auto.px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Gallery header section - More compact */
    section.py-16 .container h1 {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    section.py-16 .container p {
        font-size: 0.8125rem !important;
    }
    
    /* CTA sections - More compact */
    section.py-20 h2,
    section.py-24 h2 {
        font-size: 1.5rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    section.py-20 p,
    section.py-24 p {
        font-size: 0.875rem !important;
        margin-bottom: 1rem !important;
    }
}

/* Extra small devices (phones in portrait, < 400px) */
@media (max-width: 400px) {
    /* Logo remains 120x120 on extra small devices too */
    nav img[alt*="Logo"] {
        width: 120px !important;
        height: 120px !important;
    }
    
    /* Even smaller headings */
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.25rem !important;
    }
    
    /* Even smaller cards */
    .featured-gallery-item .relative,
    .gallery-item .relative {
        height: 140px !important;
    }
    
    .featured-gallery-item img,
    .gallery-item img {
        height: 140px !important;
    }
    
    /* Even smaller filter buttons */
    #filterContainer button {
        padding: 0.375rem 0.5rem !important;
        font-size: 0.6875rem !important;
    }
}

/* ============================================
   PERFECT MOBILE VIEW - All Pages
   ============================================ */
@media (max-width: 767px) {
    /* Prevent horizontal overflow site-wide */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    /* Container never overflows */
    .container {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Nav - compact on mobile */
    .nav-luxury .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Footer - adequate padding above menu bar */
    footer {
        padding-bottom: 5rem !important;
        padding-top: 2rem !important;
    }
    
    /* Touch-friendly minimum sizes (44px) for interactive elements */
    .btn-luxury,
    .menu-bar-item,
    button[type="submit"],
    .artist-carousel-btn {
        min-height: 44px;
        min-width: 44px;
    }
    .dg-control {
        min-width: 40px !important;
        min-height: 40px !important;
    }
    
    /* Form inputs - comfortable tap targets */
    input, select, textarea {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }
    
    /* Section padding consistency */
    main section {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Page headers - compact on mobile */
    .py-8 .container h1,
    .py-10 .container h1 {
        font-size: 1.5rem !important;
    }
    
    /* Cards - prevent overflow */
    .card-luxury {
        max-width: 100%;
    }
}

/* Safe area for notched devices (iPhone X+) */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 767px) {
        .menu-bar-pill {
            padding-bottom: calc(1rem + env(safe-area-inset-bottom));
            margin-bottom: calc(0.5rem + env(safe-area-inset-bottom));
        }
        body {
            padding-bottom: calc(5rem + env(safe-area-inset-bottom));
        }
        footer {
            padding-bottom: calc(5rem + env(safe-area-inset-bottom)) !important;
        }
        .back-to-home-btn {
            bottom: calc(4.5rem + env(safe-area-inset-bottom));
        }
    }
}

@media (max-width: 400px) {
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Focus visible for accessibility */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Visible focus for accessibility - buttons that had outline removed */
#moreMenuBtn:focus-visible,
.fluid-nav-trigger:focus-visible,
.fluid-nav-item:focus-visible,
.gallery-modal-close:focus-visible,
.gallery-item-modal-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============================================
   COMPREHENSIVE DEVICE-SPECIFIC RESPONSIVE CSS
   All Devices - Portrait & Landscape
   ============================================ */

/* iPhone SE, iPhone 5/5S (Portrait: 320px-374px) */
@media (max-width: 374px) and (orientation: portrait) {
    nav img[alt*="Logo"] {
        width: 100px !important;
        height: 100px !important;
    }
    
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }
    
    .container { padding-left: 0.75rem; padding-right: 0.75rem; }
    
    .featured-gallery-item .relative,
    .gallery-item .relative {
        height: 120px !important;
    }
}

/* iPhone 6/7/8, iPhone X/11/12/13/14 (Portrait: 375px-428px) */
@media (min-width: 375px) and (max-width: 428px) and (orientation: portrait) {
    nav img[alt*="Logo"] {
        width: 120px !important;
        height: 120px !important;
    }
    
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    
    .container { padding-left: 1rem; padding-right: 1rem; }
    
    .featured-gallery-item .relative,
    .gallery-item .relative {
        height: 160px !important;
    }
}

/* iPhone Landscape (667px-896px) */
@media (min-width: 667px) and (max-width: 896px) and (orientation: landscape) {
    nav img[alt*="Logo"] {
        width: 100px !important;
        height: 100px !important;
    }
    
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }
    
    .container { padding-left: 1rem; padding-right: 1rem; }
    
    .featured-gallery-item .relative,
    .gallery-item .relative {
        height: 140px !important;
    }
    
    section.py-16,
    section.py-20 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* Samsung Galaxy S20/S21/S22 (Portrait: 360px-412px) */
@media (min-width: 360px) and (max-width: 412px) and (orientation: portrait) {
    nav img[alt*="Logo"] {
        width: 115px !important;
        height: 115px !important;
    }
    
    h1 { font-size: 1.7rem !important; }
    h2 { font-size: 1.4rem !important; }
    
    .container { padding-left: 0.875rem; padding-right: 0.875rem; }
}

/* Samsung Galaxy Landscape (640px-915px) */
@media (min-width: 640px) and (max-width: 915px) and (orientation: landscape) {
    nav img[alt*="Logo"] {
        width: 100px !important;
        height: 100px !important;
    }
    
    .container { padding-left: 1rem; padding-right: 1rem; }
    
    section.py-16,
    section.py-20 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* iPad Mini, iPad (Portrait: 768px-834px) */
@media (min-width: 768px) and (max-width: 834px) and (orientation: portrait) {
    nav img[alt*="Logo"] {
        width: 140px !important;
        height: 140px !important;
    }
    
    h1 { font-size: 2.5rem !important; }
    h2 { font-size: 2rem !important; }
    
    .container { padding-left: 2rem; padding-right: 2rem; }
    
    .grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .featured-gallery-item .relative,
    .gallery-item .relative {
        height: 220px !important;
    }
}

/* iPad Landscape (1024px-1112px) */
@media (min-width: 1024px) and (max-width: 1112px) and (orientation: landscape) {
    nav img[alt*="Logo"] {
        width: 150px !important;
        height: 150px !important;
    }
    
    h1 { font-size: 2.75rem !important; }
    h2 { font-size: 2.25rem !important; }
    
    .container { padding-left: 2.5rem; padding-right: 2.5rem; }
    
    .grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .featured-gallery-item .relative,
    .gallery-item .relative {
        height: 200px !important;
    }
}

/* iPad Pro (Portrait: 1024px) */
@media (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
    nav img[alt*="Logo"] {
        width: 160px !important;
        height: 160px !important;
    }
    
    h1 { font-size: 3rem !important; }
    h2 { font-size: 2.5rem !important; }
    
    .grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .featured-gallery-item .relative,
    .gallery-item .relative {
        height: 240px !important;
    }
}

/* iPad Pro Landscape (1366px) */
@media (min-width: 1366px) and (max-width: 1366px) and (orientation: landscape) {
    nav img[alt*="Logo"] {
        width: 170px !important;
        height: 170px !important;
    }
    
    .container { max-width: 1280px; }
    
    .grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .featured-gallery-item .relative,
    .gallery-item .relative {
        height: 220px !important;
    }
}

/* Android Tablets (600px-767px) */
@media (min-width: 600px) and (max-width: 767px) {
    nav img[alt*="Logo"] {
        width: 130px !important;
        height: 130px !important;
    }
    
    .grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .featured-gallery-item .relative,
    .gallery-item .relative {
        height: 180px !important;
    }
}

/* General Tablet Landscape Optimizations */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    .container { padding-left: 2rem; padding-right: 2rem; }
    
    section.py-16,
    section.py-20 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    /* Better spacing for landscape tablets */
    .grid {
        gap: 1.5rem !important;
    }
}

/* General Mobile Portrait Optimizations */
@media (max-width: 767px) and (orientation: portrait) {
    /* Ensure proper spacing on mobile portrait */
    body {
        padding-bottom: 0;
    }
    
    /* Better button sizes for touch */
    button, a.button, .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1.5rem;
    }
}

/* General Mobile Landscape Optimizations */
@media (max-width: 896px) and (orientation: landscape) {
    /* Reduce vertical padding in landscape */
    section.py-16,
    section.py-20 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    /* Smaller headings in mobile landscape */
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }
}

/* Desktop Large Screens (1920px+) */
@media (min-width: 1920px) {
    .container { max-width: 1400px; }
    
    .grid {
        gap: 2rem !important;
    }
    
    .featured-gallery-item .relative,
    .gallery-item .relative {
        height: 280px !important;
    }
}

/* ========== Admin panel mobile (all admin pages) ========== */
@media (max-width: 767px) {
    /* Header: stack title and email/button to prevent overlap */
    #dashboard .admin-header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    #dashboard .admin-title {
        font-size: 1.25rem;
        line-height: 1.3;
    }
    #dashboard .admin-email {
        font-size: 0.75rem;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }
    #dashboard .admin-header-actions {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Nav tabs: wrap and smaller so "Appointments" / "Gallery" don't merge */
    #dashboard .admin-nav-tabs {
        gap: 0.5rem;
    }
    #dashboard .admin-nav-tabs .tab-luxury {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        white-space: nowrap;
    }

    /* Appointments filter buttons: wrap, no truncation */
    #dashboard .admin-filter-btns .filter-btn-luxury {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        white-space: nowrap;
    }

    /* Table: horizontal scroll and readable cells */
    #dashboard #appointmentsList {
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.5rem;
    }
    #dashboard #appointmentsList table {
        min-width: 640px;
    }
    #dashboard #appointmentsList th,
    #dashboard #appointmentsList td {
        padding: 0.5rem 0.375rem;
        font-size: 0.875rem;
    }

    /* Gallery / Artists / other tabs: stack on mobile */
    #dashboard .flex.justify-between.items-center.mb-6 {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    #dashboard .card-luxury h2 {
        font-size: 1.25rem;
    }
}

/* ============================================
   ADMIN PANEL DESKTOP - Professional layout (joe-panel only)
   Scoped to body.admin-page - does NOT affect public website
   ============================================ */
@media (min-width: 1024px) {
    body.admin-page {
        min-height: 100vh;
    }

    body.admin-page .admin-page {
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px 24px;
        width: 100%;
    }

    body.admin-page #dashboard {
        max-width: 1200px;
        margin: 0 auto;
    }

    body.admin-page #dashboard .admin-header .container,
    body.admin-page #dashboard .bg-luxury-card.border-b .container {
        max-width: 1200px;
    }

    /* More space between header and tabs */
    body.admin-page #dashboard .admin-header {
        padding-bottom: 1.5rem;
    }
    body.admin-page #dashboard .admin-header + div {
        padding-top: 1.5rem;
    }

    body.admin-page .admin-content {
        max-width: 1000px;
        margin: 0 auto;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    body.admin-page #dashboard section,
    body.admin-page .tab-content .card-luxury {
        min-height: auto !important;
        display: block !important;
        align-items: initial !important;
        justify-content: initial !important;
    }

    body.admin-page #dashboard .tab-content {
        margin-bottom: 32px;
    }

    body.admin-page #appointmentsList {
        margin-top: 20px;
        margin-bottom: 30px;
    }

    body.admin-page #dashboard .card-luxury {
        margin-top: 20px;
        margin-bottom: 30px;
    }

    body.admin-page #dashboard table {
        margin-top: 20px;
        margin-bottom: 30px;
    }

    body.admin-page #dashboard .flex.justify-between.items-center.mb-6,
    body.admin-page #dashboard .flex.flex-col.sm\:flex-row.sm\:justify-between.sm\:items-center.gap-4.mb-6 {
        margin-bottom: 24px;
    }

    /* Reset any full-screen section inheritance */
    body.admin-page section {
        min-height: auto !important;
        display: block !important;
        align-items: initial !important;
        justify-content: initial !important;
    }
}

/* ============================================
   ARTIST CIRCULAR CAROUSEL (CircularTestimonials-style)
   ============================================ */
.artist-circular-carousel {
    width: 100%;
    max-width: 56rem;
    margin: 0 auto;
    padding: 2rem 1rem;
}
.artist-circular-container {
    width: 100%;
}
.artist-circular-grid {
    display: grid;
    gap: 3rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .artist-circular-grid {
        grid-template-columns: 1fr 1fr;
        gap: 5rem;
    }
}
.artist-circular-image-container {
    position: relative;
    width: 100%;
    height: 24rem;
    min-height: 280px;
    perspective: 1000px;
}
.artist-circular-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: opacity 0.3s ease, box-shadow 0.3s ease;
}
.artist-circular-image:hover {
    box-shadow: 0 12px 36px rgba(0, 196, 255, 0.2);
}
@media (prefers-reduced-motion: reduce) {
    .artist-circular-image {
        transition: none;
    }
}
.artist-circular-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.artist-circular-name {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    color: var(--text);
    line-height: 1.3;
}
.artist-circular-designation {
    font-size: 0.925rem;
    margin-bottom: 1.5rem;
    color: var(--subtext);
}
.artist-circular-quote {
    line-height: 1.75;
    font-size: 1.125rem;
    color: var(--subtext);
    margin-bottom: 2rem;
}
.artist-circular-actions {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}
.artist-circular-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    min-height: 2.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #000;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.artist-circular-btn:hover {
    box-shadow: 0 8px 16px rgba(0, 196, 255, 0.3);
}
.artist-circular-btn-accent {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 700;
}
.artist-circular-btn-accent,
.artist-circular-btn-accent span,
.artist-circular-btn-accent i {
    color: #fff;
}
.artist-circular-btn-accent:hover {
    background: #00a6e6;
    border-color: #00a6e6;
    box-shadow: 0 8px 16px rgba(0, 196, 255, 0.4);
}
.artist-circular-btn-secondary {
    background: transparent;
    color: var(--accent);
    border-color: rgba(0, 196, 255, 0.5);
}
.artist-circular-btn-secondary:hover {
    background: rgba(0, 196, 255, 0.1);
    border-color: var(--accent);
}
.artist-circular-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}
/* Booking form: artist pre-select highlight when arriving via ?artist=ID */
.artist-select-highlight {
    animation: artistSelectPulse 0.6s ease-in-out 3;
}
@keyframes artistSelectPulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--accent); }
    50% { box-shadow: 0 0 12px 4px rgba(0, 196, 255, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
    .artist-select-highlight {
        animation: none;
        box-shadow: 0 0 0 2px var(--accent);
    }
}
.artist-circular-arrows {
    display: flex;
    gap: 1.5rem;
    flex-direction: row;
    justify-content: center;
}
@media (min-width: 768px) {
    .artist-circular-arrows {
        padding-top: 0;
    }
}
.artist-circular-arrow {
    width: 2.7rem;
    height: 2.7rem;
    min-width: 2.7rem;
    min-height: 2.7rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    background: #141414;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.artist-circular-arrow:hover {
    background: var(--accent);
}
.artist-circular-arrow svg {
    color: #f1f1f7;
}
.artist-circular-arrow:active {
    transform: scale(0.96);
}
@media (prefers-reduced-motion: reduce) {
    .artist-circular-image,
    .artist-circular-arrow {
        transition: none;
    }
}

/* Artist circular carousel - Mobile (≤767px) */
@media (max-width: 767px) {
    .artist-circular-carousel {
        padding: 1rem 0.75rem;
    }
    .artist-circular-grid {
        gap: 1.5rem;
    }
    .artist-circular-image-container {
        height: 12rem;
        min-height: 180px;
    }
    .artist-circular-name {
        font-size: 1.25rem;
    }
    .artist-circular-designation {
        font-size: 0.8125rem;
        margin-bottom: 0.75rem;
    }
    .artist-circular-quote {
        font-size: 0.9375rem;
        line-height: 1.5;
        margin-bottom: 1rem;
    }
    .artist-circular-actions {
        gap: 1rem;
    }
    .artist-circular-btn {
        padding: 0.5rem 1rem;
        min-height: 2.25rem;
        font-size: 0.8125rem;
    }
    .artist-circular-arrows {
        gap: 1rem;
    }
    .artist-circular-arrow {
        width: 2.25rem;
        height: 2.25rem;
        min-width: 2.25rem;
        min-height: 2.25rem;
    }
}

/* ============================================
   ARTIST CAROUSEL (Index page) - Horizontal peeking
   (legacy - gallery-card-carousel uses these)
   ============================================ */
#artistCarouselWrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
}
#artistCarouselContainer {
    position: relative;
    width: 100%;
    padding-bottom: 4rem;
}
#artistCarouselTrack {
    display: flex;
    gap: 2%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    height: 380px;
    align-items: stretch;
}
.artist-carousel-slide {
    flex: 0 0 54%;
    width: 54%;
    min-width: 260px;
    height: 100%;
    position: relative;
    cursor: pointer;
    list-style: none;
    transition: opacity 0.3s ease;
}
.artist-carousel-slide-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1D1F2F;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.artist-carousel-slide:hover .artist-carousel-slide-inner,
.gallery-carousel-slide:hover .artist-carousel-slide-inner {
    transform: translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
    .artist-carousel-slide:hover .artist-carousel-slide-inner,
    .gallery-carousel-slide:hover .artist-carousel-slide-inner {
        transform: none;
    }
}
.artist-carousel-slide-inner img {
    object-fit: cover;
    object-position: center top;
    transition: opacity 0.4s ease;
}
.artist-carousel-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 1.5rem;
    transition: opacity 0.3s ease;
}
.artist-carousel-btn {
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.artist-carousel-btn:hover {
    box-shadow: 0 8px 16px rgba(0,196,255,0.3);
}
/* Artist Carousel - Controls & Indicators (scoped to .artist-carousel) */
.artist-carousel .artist-carousel-controls {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 1.25rem 0 0.5rem 0;
}

/* Buttons row - when controls contains buttons directly, group them */
.artist-carousel .artist-carousel-controls > .artist-nav-btn,
.artist-carousel .artist-carousel-controls .artist-nav-controls {
    display: inline-flex;
}
.artist-carousel .artist-carousel-controls {
    flex-wrap: wrap;
    justify-content: center;
}
.artist-carousel .artist-nav-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

/* Arrow buttons - small circular, 3D/glass style */
.artist-carousel .carousel-arrow {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(145deg, rgba(0, 196, 255, 0.35) 0%, rgba(0, 196, 255, 0.15) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease,
                color 0.2s ease;
}

.artist-carousel .carousel-arrow:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        0 4px 16px rgba(0, 196, 255, 0.4),
        0 0 20px rgba(0, 196, 255, 0.25);
    color: #fff;
}

.artist-carousel .carousel-arrow:active {
    transform: translateY(0) scale(0.96);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.35),
        0 1px 4px rgba(0, 0, 0, 0.2);
}

.artist-carousel .carousel-arrow .artist-nav-chevron svg {
    color: #fff;
}

.artist-nav-line {
    display: none;
}

.artist-nav-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
}
.artist-nav-chevron::before,
.artist-nav-chevron::after {
    display: none !important;
    content: none !important;
}
.artist-nav-prev .artist-nav-chevron svg {
    transform: none;
}
.artist-nav-next .artist-nav-chevron svg {
    transform: none;
}

/* Indicator dots */
.artist-carousel .carousel-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.25rem 0;
}

.artist-carousel .carousel-indicators .carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s ease,
                background 0.25s ease,
                box-shadow 0.25s ease,
                width 0.25s ease,
                height 0.25s ease;
}

.artist-carousel .carousel-indicators .carousel-dot:hover {
    background: rgba(255, 255, 255, 0.4);
}

.artist-carousel .carousel-indicators .carousel-dot.active {
    width: 10px;
    height: 10px;
    background: var(--accent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 10px rgba(0, 196, 255, 0.6),
        0 0 16px rgba(0, 196, 255, 0.35);
    transform: scale(1.15);
}

.artist-carousel .carousel-arrow.animating {
    animation: carouselArrowPress 0.3s ease-out forwards;
}

@keyframes carouselArrowPress {
    0%   { transform: scale(1); }
    50%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}

/* Mobile: 768px and below - consistent carousel layout */
@media (max-width: 768px) {
    #artistCarouselContainer {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 4rem;
    }
    #artistCarouselWrapper {
        max-width: 100%;
        padding: 0 0.5rem;
    }
    #artistCarouselTrack {
        height: 320px;
        gap: 2%;
        justify-content: flex-start;
        align-items: stretch;
    }
    .artist-carousel-slide {
        flex: 0 0 65%;
        width: 65%;
        min-width: 260px;
        max-width: 100%;
        padding: 0;
    }
    .artist-carousel-slide-inner {
        width: 100%;
        height: 100%;
    }
    .artist-carousel-slide-inner img {
        object-fit: cover;
        object-position: center top;
    }
    .artist-carousel-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        text-align: center;
        padding: 1.5rem;
        width: 100%;
    }
    .artist-carousel-content h2 {
        text-align: center;
        width: 100%;
    }
    .artist-carousel-btn {
        margin-left: auto;
        margin-right: auto;
    }
    #artistCarouselControls {
        left: 50%;
        transform: translateX(-50%);
        bottom: 0.5rem;
    }
    .artist-carousel .carousel-arrow {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }
    .artist-carousel .carousel-arrow .artist-nav-chevron svg {
        width: 14px;
        height: 14px;
    }
    .artist-carousel .carousel-indicators .carousel-dot {
        width: 7px;
        height: 7px;
    }
    .artist-carousel .carousel-indicators .carousel-dot.active {
        width: 9px;
        height: 9px;
    }
}

@media (max-width: 640px) {
    #artistCarouselTrack {
        height: 300px;
    }
    .artist-carousel-slide {
        flex: 0 0 78%;
        width: 78%;
        min-width: 240px;
    }
}

@media (max-width: 400px) {
    #artistCarouselTrack {
        height: 280px;
    }
    .artist-carousel-slide {
        flex: 0 0 85%;
        width: 85%;
        min-width: 200px;
    }
}

/* Artist detail modal - centered in viewport */
#artistDetailModal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
}
#artistDetailModal.hidden {
    display: none;
}
#artistDetailModal.flex {
    display: flex;
}
.artist-modal-card {
    max-width: 480px;
    width: 100%;
    max-width: min(480px, 90vw);
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    position: relative;
    margin: auto;
}
.artist-modal-photo {
    width: 100%;
    height: 280px;
    object-fit: cover;
}
#artistModalClose {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    color: #dc2626;
}
#artistModalClose:hover {
    color: #ef4444;
}
@media (max-width: 480px) {
    #artistDetailModal {
        padding: 0.5rem;
        align-items: center;
        justify-content: center;
    }
    .artist-modal-card {
        max-width: min(100%, 90vw);
        max-height: 85vh;
        max-height: 85dvh;
        margin: auto;
    }
    .artist-modal-photo {
        height: 200px;
    }
    .artist-modal-card .p-6 {
        padding: 1rem !important;
    }
    #artistModalClose {
        width: 36px;
        height: 36px;
        top: 0.5rem;
        right: 0.5rem;
    }
}

/* ============================================
   ADMIN MODAL SCROLL LOCK
   ============================================ */
/* Block page scroll when admin modals (Add/Edit Artist, Add/Edit Artwork) are open */
body.modal-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
}

/* ============================================
   COOKIE CONSENT OVERLAY (Blocking modal)
   ============================================ */
/* Block page scroll when cookie consent is visible */
body.cookie-consent-active {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

#cookie-consent-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
}
#cookie-consent-overlay.is-visible {
    display: flex;
}
.cookie-overlay .card,
.cookie-overlay .cookie-card {
    background: var(--card-bg);
    border-radius: 1rem;
    padding: 2rem;
    max-width: 90%;
    width: 380px;
    min-width: 280px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border);
    text-align: center;
}
/* Cookie icon - outlined SVG with bite mark and chips */
.cookie-overlay .cookie-icon {
    width: 50px;
    height: 50px;
    display: block;
    margin: 0 auto 12px;
}
.cookie-overlay .cookie-icon-svg {
    width: 100%;
    height: 100%;
}
.cookie-overlay .cookieHeading {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.5rem;
}
.cookie-overlay .cookieDescription {
    font-size: 0.9375rem;
    color: var(--subtext);
    line-height: 1.5;
    margin: 0 0 1.5rem;
}
.cookie-overlay .buttonContainer,
.cookie-overlay .cookie-button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}
.cookie-overlay .acceptButton {
    padding: 0.625rem 1.5rem;
    background: var(--accent);
    color: #0f172a;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.cookie-overlay .acceptButton:hover {
    background: #00a8e0;
    box-shadow: 0 4px 12px rgba(0, 196, 255, 0.4);
}
.cookie-overlay .declineButton {
    padding: 0.625rem 1.5rem;
    background: transparent;
    color: var(--subtext);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.cookie-overlay .declineButton:hover {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.2);
}
@media (max-width: 480px) {
    .cookie-overlay .card,
    .cookie-overlay .cookie-card {
        width: 100%;
        max-width: 90%;
        padding: 1.5rem;
    }
    .cookie-overlay .cookie-icon {
        width: 40px;
        height: 40px;
    }
    .cookie-overlay .cookieHeading {
        font-size: 1.125rem;
    }
    .cookie-overlay .cookieDescription {
        font-size: 0.875rem;
    }
}

/* ============================================
   Expand Map - Vanilla location card (footer)
   Collapsed: compact card with grid. Expanded: decorative map + coords
   ============================================ */
.expand-map-root {
    position: relative;
    cursor: pointer;
    user-select: none;
}
.expand-map-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    width: 100%;
    max-width: 280px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.expand-map-card.expanded {
    width: 100%;
    max-width: 360px;
    min-height: 280px;
}
.expand-map-inner {
    position: relative;
    min-height: 140px;
    transition: transform 0.2s ease;
    transform-style: preserve-3d;
}
.expand-map-card.expanded .expand-map-inner {
    min-height: 280px;
}
.expand-map-gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(255,255,255,0.05) 0%, transparent 50%, rgba(255,255,255,0.08) 100%);
    pointer-events: none;
}
.expand-map-expanded-content {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease 0.1s;
}
.expand-map-expanded-content:not(.hidden) {
    opacity: 1;
}
.expand-map-expanded-content.hidden {
    display: none !important;
}
.expand-map-map-bg {
    position: absolute;
    inset: 0;
    background: var(--card-bg);
}
.expand-map-roads {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.expand-map-roads .stroke-main {
    stroke: rgba(255,255,255,0.25);
    stroke-width: 4;
}
.expand-map-roads .stroke-v {
    stroke: rgba(255,255,255,0.2);
    stroke-width: 3;
}
.expand-map-roads .stroke-sub {
    stroke: rgba(255,255,255,0.1);
    stroke-width: 1.5;
}
.expand-map-buildings {
    position: absolute;
    inset: 0;
}
.expand-map-b {
    position: absolute;
    border-radius: 2px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.08);
}
.expand-map-b.b1 { top: 40%; left: 10%; width: 15%; height: 20%; }
.expand-map-b.b2 { top: 15%; left: 35%; width: 12%; height: 15%; }
.expand-map-b.b3 { top: 70%; left: 75%; width: 18%; height: 18%; }
.expand-map-b.b4 { top: 20%; right: 10%; width: 10%; height: 25%; }
.expand-map-b.b5 { top: 55%; left: 5%; width: 8%; height: 12%; }
.expand-map-b.b6 { top: 8%; left: 75%; width: 14%; height: 10%; }
.expand-map-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.expand-map-pin svg {
    filter: drop-shadow(0 0 10px rgba(52, 211, 153, 0.5));
}
.expand-map-vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--card-bg) 0%, transparent 40%, transparent 60%, transparent 100%);
    opacity: 0.6;
}
.expand-map-grid-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.03;
}
.expand-map-grid-pattern.hidden {
    opacity: 0;
}
.expand-map-grid-pattern svg {
    color: var(--text);
}
.expand-map-content {
    position: relative;
    z-index: 10;
    height: 100%;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem;
}
.expand-map-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.expand-map-icon {
    color: #00C4FF;
}
a.expand-map-icon-wrap {
    display: inline-flex;
    cursor: pointer;
}
a.expand-map-icon-wrap:hover {
    opacity: 0.8;
}
.expand-map-status {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    background: rgba(255,255,255,0.05);
}
.expand-map-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #EF4444;
}
.expand-map-live {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #EF4444;
}
.expand-map-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.expand-map-location {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
}
.expand-map-coords {
    font-size: 0.75rem;
    font-family: ui-monospace, monospace;
    color: var(--subtext);
}
.expand-map-coords.hidden {
    display: none !important;
}
.expand-map-underline {
    height: 1px;
    width: 100%;
    background: linear-gradient(to right, rgba(52, 211, 153, 0.5), rgba(52, 211, 153, 0.3), transparent);
    transform-origin: left;
    transform: scaleX(0.3);
    transition: transform 0.4s ease;
}
.expand-map-root:hover .expand-map-underline,
.expand-map-card.expanded .expand-map-underline {
    transform: scaleX(1);
}
.expand-map-root:not(:hover) .expand-map-card:not(.expanded) .expand-map-underline {
    transform: scaleX(0.3);
}
/* Centered tooltip inside expanded map - visible only when expanded */
.expand-map-tooltip-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    animation: expand-map-tooltip-fade 0.4s ease 0.3s forwards;
}
.expand-map-tooltip-hint span {
    display: inline-block;
    padding: 6px 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(0, 0, 0, 0.65);
    border-radius: 999px;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.expand-map-expanded-content.hidden .expand-map-tooltip-hint {
    animation: none;
    opacity: 0;
}
.expand-map-always-expanded .expand-map-tooltip-hint {
    display: none;
}
@keyframes expand-map-tooltip-fade {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Flow button - View Gallery (cyan blue bg, white text + animations) */
.flow-button {
    min-height: 44px;
    background: linear-gradient(135deg, #00C4FF 0%, #0099CC 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(0, 196, 255, 0.4),
                0 4px 12px rgba(0, 196, 255, 0.2);
}
.flow-button span,
.flow-button i {
    color: #FFFFFF !important;
}
.flow-button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 196, 255, 0.3),
                0 4px 12px rgba(0, 196, 255, 0.2);
}
.flow-button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 4px 12px rgba(0, 196, 255, 0.2);
}
.flow-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}
.flow-button:hover::before {
    left: 100%;
}
.flow-btn-arrow-left {
    left: -25%;
}
.flow-button:hover .flow-btn-arrow-left {
    left: 1rem;
    color: white;
}
.flow-btn-arrow-right {
    right: 1rem;
}
.flow-button:hover .flow-btn-arrow-right {
    right: -25%;
    color: white;
}

.reveal {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* Section-level scroll reveal - premium animation for index 3 pages + footer */
.reveal-section {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-section.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-section {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}