/* ========================================
   HOLYSHOT - Futuristic Landing Page Styles
   Design: Apple-like, Dark Mode, Glassmorphism
   ======================================== */

/* ----------------------------------------
   CSS Custom Properties (Design Tokens)
   ---------------------------------------- */
@font-face {
    font-family: 'Beni Bold';
    src: url('fonts/BeniBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Halu';
    src: url('fonts/Halu.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    /* Colors */
    --color-bg: #000000;
    --color-bg-elevated: #0a0a0a;
    --color-surface: rgba(255, 255, 255, 0.05);
    --color-surface-hover: rgba(255, 255, 255, 0.08);
    --color-border: rgba(255, 255, 255, 0.1);
    --color-text-primary: #ffffff;
    --color-text-secondary: #888888;
    --color-text-muted: #555555;
    --color-accent: #f0ff3d;
    --color-accent-rgb: 240, 255, 61;
    
    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.02); /* Made even more transparent (was 0.03) */
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: 30px; /* Increased blur (was 20px) */
    
    /* Glow Effects - Enhanced */
    --glow-accent: 0 0 40px rgba(240, 255, 61, 0.5), 0 0 80px rgba(240, 255, 61, 0.3);
    --glow-accent-strong: 0 0 60px rgba(240, 255, 61, 0.7), 0 0 120px rgba(240, 255, 61, 0.4), 0 0 180px rgba(240, 255, 61, 0.2);
    --glow-white: 0 0 30px rgba(255, 255, 255, 0.3);
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3.5rem;
    --font-size-6xl: 4.5rem;
    
    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-smooth: 600ms cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
}

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

html {
    /* scroll-behavior: smooth; - Removed to use Lenis for inertial scrolling */
    font-size: 16px;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    position: relative; /* Ensure absolute children position relative to body */
}

/* Halftone Dots & Scan Lines Background - REMOVED */
/* body::before and body::after removed */

/* Custom Scrollbar - Dark themed */
::-webkit-scrollbar {
    width: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
    border: 2px solid var(--color-bg);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Selection */
::selection {
    background: var(--color-accent);
    color: var(--color-bg);
}

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

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

/* Lists */
ul {
    list-style: none;
}

/* ----------------------------------------
   Container
   ---------------------------------------- */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* ----------------------------------------
   Section Headers
   ---------------------------------------- */
.section-header {
    text-align: center;
    margin-bottom: var(--space-3xl);
    position: relative;
    z-index: 1; /* Ensure titles are above snake */
}

.section-label {
    display: inline-block;
    font-size: var(--font-size-2xl); /* Increased from lg to 2xl */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
    text-shadow: 
        0 0 20px rgba(240, 255, 61, 0.5),
        0 0 40px rgba(240, 255, 61, 0.3);
}

.section-title {
    font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-5xl));
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* ----------------------------------------
   Buttons
   ---------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 500;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden; /* For loading effect */
}

/* Loading shine effect on hover */
.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transform: skewX(-20deg);
    transition: none;
}

.btn:hover::after {
    animation: shine 0.75s;
}

@keyframes shine {
    100% {
        left: 125%;
    }
}

.btn-primary {
    background: var(--color-accent);
    color: var(--color-bg);
    box-shadow: 
        0 0 30px rgba(240, 255, 61, 0.5),
        0 0 60px rgba(240, 255, 61, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 0 50px rgba(240, 255, 61, 0.7),
        0 0 100px rgba(240, 255, 61, 0.5),
        0 0 150px rgba(240, 255, 61, 0.3);
}

.btn-secondary {
    background: var(--glass-bg);
    color: var(--color-text-primary);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

.btn-secondary:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ----------------------------------------
   NAVIGATION
   ---------------------------------------- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--space-md) 0;
    background: transparent;
    transition: all var(--transition-base);
}

.navbar.scrolled {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--glass-border);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
}

.logo-image {
    height: 56px; /* Increased by 40% (40px * 1.4) */
    width: auto;
    object-fit: contain;
}

.logo-text {
    font-size: var(--font-size-xl);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-text-primary);
    text-shadow: var(--glow-white);
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.nav-link {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

.nav-link:hover {
    color: var(--color-text-primary);
}

/* Mobile Navigation Toggle */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-xs);
}

.hamburger {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text-primary);
    position: relative;
    transition: background var(--transition-fast);
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-text-primary);
    transition: transform var(--transition-base);
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    bottom: -8px;
}

/* Mobile Menu Active State */
.nav-toggle.active .hamburger {
    background: transparent;
}

.nav-toggle.active .hamburger::before {
    transform: translateY(8px) rotate(45deg);
}

.nav-toggle.active .hamburger::after {
    transform: translateY(-8px) rotate(-45deg);
}

/* ----------------------------------------
   HERO SECTION
   ---------------------------------------- */
.hero {
    position: relative;
    width: 100%;
    height: 100vh; /* Restore to viewport height to ensure bottom: 0 works correctly */
    min-height: 800px;
    display: block;
    overflow: hidden; /* This was hiding the overlay when it was inside at the bottom */
    background-color: transparent; /* Changed to transparent to allow mask to reveal global grid */
    /* Mask removed from here to prevent hiding content */
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: -1; /* Moved behind snake (0) */
    background-color: var(--color-bg); /* Solid black - blocks grid lines */
    
    /* Fade out at the bottom to reveal grid lines - Adjusted to hide video behind trust section */
    -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 98%);
    mask-image: linear-gradient(to bottom, black 75%, transparent 98%);
}

.hero-video {
    position: absolute; /* Restored to absolute */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fill the area */
    opacity: 0.2;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Let clicks pass through if needed, but child content will have events */
    z-index: 3;
}

.hero-gradient {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(240, 255, 61, 0.15), transparent),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(240, 255, 61, 0.08), transparent),
        radial-gradient(ellipse 50% 30% at 20% 80%, rgba(255, 255, 255, 0.05), transparent);
}

/* Halftone & Scan Lines Overlay for Hero Video - REMOVED */
/* The video should be clear of these effects */

.hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-content {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    text-align: center;
    padding: var(--space-lg);
    width: 100%;
    max-width: 900px;
    pointer-events: auto; /* Re-enable pointer events for buttons */
}

.hero-title {
    /* font-family: 'Beni Bold', sans-serif; - Removed to use normal font */
    font-size: clamp(var(--font-size-4xl), 7vw, var(--font-size-6xl)); /* Increased size */
    font-weight: 700; /* Bold standard font */
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-lg);
    white-space: nowrap; /* Keep on one line if possible, or wrap normally */
}

.title-line {
    display: inline; /* Back to inline for single sentence flow */
}

/* Wrapper to position the overlay */
.highlight-wrapper {
    position: relative;
    display: inline-block;
    color: transparent; /* Hide the base text "Perfektion" */
    -webkit-text-stroke: 1px transparent;
}

/* Use pseudo-element or the span inside to show the original text space? 
   Actually, the user wants "Wo Kreativität auf Perfektion trifft" but "Perfektion" is the yellow script.
   Wait, the reference image shows "Wo Kreativität auf" [Yellow Script Overlaying nothing?] "trifft".
   No, the image shows "Wo Kreativität auf" then "Perfektion" in yellow script overlaying the gap or placeholders?
   Re-reading image: "Wo Kreativität auf [Yellow Script Perfektion] trifft."
   The base text "Perfektion" seems to be what is being replaced or overlaid.
   
   Let's make the wrapper hold the space, but the content inside is the Halu font.
*/

.highlight-wrapper {
    position: relative;
    display: inline-block;
    color: inherit; /* Show the text normally if we want it underneath, or transparent if replaced */
    /* Based on image "This or That", it overlays. 
       Based on the second image "Wo Kreativität auf Perfektion trifft", "Perfektion" is ONLY yellow script.
       It is NOT overlaying block text "Perfektion". It IS the word "Perfektion".
    */
    color: transparent; /* Hide the block letters "Perfektion" to use as spacer */
    margin-right: 1.8em; /* Add space to prevent overlap with following text */
}

.highlight-text {
    font-family: 'Halu', cursive;
    color: var(--color-accent);
    text-shadow: 
        0 0 30px rgba(240, 255, 61, 0.8),
        0 0 60px rgba(240, 255, 61, 0.5),
        0 0 100px rgba(240, 255, 61, 0.3);
    font-size: 2.8em; /* Adjusted relative to larger header */
    font-weight: normal;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%) rotate(-5deg); /* Center over the gap and tilt */
    white-space: nowrap;
    z-index: 1;
    opacity: 1;
    pointer-events: none;
}

.highlight-text-inline {
    font-family: 'Halu', cursive;
    color: var(--color-accent);
    font-weight: normal;
    font-size: 1.5em; /* Slightly larger than surrounding text */
    text-shadow: 
        0 0 20px rgba(240, 255, 61, 0.7),
        0 0 40px rgba(240, 255, 61, 0.4),
        0 0 60px rgba(240, 255, 61, 0.2);
    margin-left: 0.2em; /* Space before */
    display: inline-block; /* Required for transform */
    transform: rotate(-5deg) translateY(5px) translateX(-5px);
}


.hero-subtitle {
    font-size: clamp(var(--font-size-lg), 2.5vw, var(--font-size-xl));
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4rem; /* Increased space from above (was var(--space-xl) ~ 3rem) */
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
}

/* Hero Scroll Indicator */
.hero-scroll-indicator {
    position: relative;
    margin: 0 auto var(--space-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    opacity: 0.6;
    transition: opacity var(--transition-base);
    z-index: 5;
}

.hero-scroll-indicator:hover {
    opacity: 1;
}

.scroll-text {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-text-secondary);
}

.scroll-line {
    width: 2px;
    height: 60px;
    background: linear-gradient(to bottom, var(--color-accent), transparent);
    animation: scroll-pulse 2s ease-in-out infinite;
    box-shadow: 
        0 0 15px rgba(240, 255, 61, 0.6),
        0 0 30px rgba(240, 255, 61, 0.3);
}

@keyframes scroll-pulse {
    0%, 100% {
        transform: scaleY(1);
        opacity: 1;
    }
    50% {
        transform: scaleY(0.5);
        opacity: 0.5;
    }
}

/* Hero Animations */
.animate-reveal {
    opacity: 0;
    transform: translateY(30px);
    animation: reveal 0.8s ease forwards;
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}

@keyframes reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------
   PARTNERS OVERLAY (New)
   ---------------------------------------- */
.partners-overlay {
    position: relative;
    width: 100%;
    margin-top: -280px; /* Increased pull-up to account for larger height */
    padding: 6rem var(--space-lg) 6rem; /* Much larger padding for bigger fade */
    z-index: 0; /* Reduced from 10 to allow snake (1) to show, but we'll raise content */
    
    /* Black background fading to top and bottom - BIGGER FADE */
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(0,0,0,0.4) 15%, 
        rgba(0,0,0,0.95) 35%, 
        rgba(0,0,0,0.95) 65%, 
        rgba(0,0,0,0.4) 85%, 
        transparent 100%
    );
}

.partners-overlay .partners-label {
    text-align: center;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.partners-overlay .partners-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2xl);
    align-items: center;
    position: relative; /* Create stacking context */
    z-index: 2; /* Ensure logos are above snake (1) */
}

.partners-overlay .partner-logo {
    height: 50px; /* Increased from 30px */
    width: auto;
    max-width: 200px; /* Increased from 150px */
    object-fit: contain;
    /* More visible: higher brightness and opacity */
    filter: grayscale(100%) brightness(200%) opacity(0.9); 
    transition: all var(--transition-base);
}

.partners-overlay .partner-logo:hover {
    filter: grayscale(0%) brightness(100%) opacity(1); /* Reveal original on hover */
    transform: scale(1.05);
}

/* ----------------------------------------
   UNIFIED SECTION BACKGROUND (Moved to body)
   ---------------------------------------- */
/* Wrapper for consistent background lines */
.background-lines {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: 
        /* Fine grid pattern - Increased visibility */
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        /* Yellow highlight gradients - enhanced */
        radial-gradient(ellipse 50% 30% at 20% 30%, rgba(240, 255, 61, 0.05), transparent),
        radial-gradient(ellipse 40% 40% at 80% 70%, rgba(240, 255, 61, 0.04), transparent),
        radial-gradient(ellipse 60% 40% at 50% 50%, rgba(240, 255, 61, 0.02), transparent),
        /* Base color - black */
        var(--color-bg);
    background-size: 
        40px 40px, /* Grid cell size */
        40px 40px,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%;
}

/* Scroll Snake - Behind content but above background */
#scroll-snake-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Fill the body height automatically */
    z-index: 0; /* Keep at 0, ensure cards are higher */
    pointer-events: none; /* Let clicks pass through */
    overflow: hidden;
}

#scroll-snake-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.snake-path {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 12px;
    stroke-linecap: round;
    filter: drop-shadow(0 0 15px rgba(240, 255, 61, 0.6));
    opacity: 0.6;
}

/* ----------------------------------------
   STUDIO SECTION
   ---------------------------------------- */
.studio {
    padding: var(--space-3xl) 0;
}

/* ----------------------------------------
   BENTO GRID LAYOUT
   ---------------------------------------- */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, minmax(180px, auto));
    gap: var(--space-md);
}

/* Base Bento Card */
.bento-card {
    position: relative;
    z-index: 2; /* Ensure cards are above snake (0) */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    transition: transform var(--transition-smooth), background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Bento Card Sizes */
.bento-hero {
    grid-column: span 2;
    grid-row: span 2;
}

.bento-wide {
    grid-column: span 2;
}

.bento-tall {
    grid-row: span 2;
}

/* Specific positioning for 7-item layout 
   Row 1: Hero(2x2), Item 2(1x1), Item 3(1x1) - Handled by Hero span
   Row 2: Hero(cont.), Tall(1x2), Item 5(1x1) - Handled by grid-auto-flow
   Row 3: Wide(2x1), Tall(cont.), Item 7(1x1)
*/

/* Adjust order if needed for mobile/tablet */

/* Decorative Number */
.bento-number {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-accent);
    opacity: 0.5;
    letter-spacing: 0.1em;
}

.bento-hero .bento-number {
    font-size: var(--font-size-6xl);
    top: var(--space-lg);
    right: var(--space-lg);
    opacity: 0.1;
    font-weight: 700;
    line-height: 1;
}

/* Bento Content */
.bento-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
}

.bento-hero .bento-content {
    justify-content: center;
}

/* Feature Icon in Bento */
.feature-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-md);
    color: var(--color-accent);
    filter: drop-shadow(0 0 15px rgba(240, 255, 61, 0.5));
}

.bento-hero .feature-icon {
    width: 64px;
    height: 64px;
    filter: drop-shadow(0 0 25px rgba(240, 255, 61, 0.6));
}

.feature-icon svg {
    width: 100%;
    height: 100%;
}

/* Bento Typography */
.bento-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--color-text-primary);
}

.bento-hero .bento-title {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-sm);
}

.bento-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); /* Added shadow for readability */
}

.bento-hero .bento-text {
    font-size: var(--font-size-base);
    max-width: 85%;
}

/* Moving Glow Border (Pseudo-element) */
.bento-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(240, 255, 61, 1), 
        transparent 40%
    );
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Hover States */
.bento-card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-color: rgba(240, 255, 61, 0.3);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.5), 
        0 0 40px rgba(240, 255, 61, 0.15),
        inset 0 0 30px rgba(255, 255, 255, 0.05);
}

.bento-card:hover::before {
    opacity: 1;
}

.bento-card:hover .bento-number {
    opacity: 1;
}

.bento-card:hover .feature-icon {
    filter: drop-shadow(0 0 30px rgba(240, 255, 61, 0.8));
}

/* Responsive Bento Grid */
@media (max-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
    
    .bento-hero {
        grid-column: span 2;
        grid-row: span 1;
        /* Make hero card smaller on tablet but still span width */
        min-height: 250px;
    }
    
    .bento-tall {
        grid-row: span 1; /* Reset tallness */
        grid-column: span 1;
    }
    
    .bento-wide {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }
    
    .bento-hero,
    .bento-wide,
    .bento-tall {
        grid-column: span 1;
        grid-row: auto;
    }
}

/* Legacy support for feature classes used elsewhere */
.feature-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.feature-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* ----------------------------------------
   GALLERY SECTION
   ---------------------------------------- */
.gallery {
    padding: var(--space-3xl) 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
    margin: 0 auto;
}

.gallery-item {
    position: relative;
    z-index: 2; /* Ensure gallery items are above snake (0) */
    display: block; /* For anchor tags */
    width: 100%;
    height: 550px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none; /* Remove underline from links */
    isolation: isolate; /* Create stacking context for pseudo-elements */
}

/* Removed .gallery-item.large since all are now wide */

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.5s ease, transform 0.7s ease;
}

/* Grain Effect Layer */
.gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Noise pattern via data URI */
    /* background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.5'/%3E%3C/svg%3E"); */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    mix-blend-mode: overlay;
    z-index: 2;
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2); /* Initial light dim */
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    text-align: center;
    opacity: 1; 
    transition: background 0.5s ease;
    z-index: 3;
}

/* Hover Effects */
.gallery-item:hover .gallery-image {
    filter: blur(8px) contrast(1.1); /* Heavy blur */
    transform: scale(1.05);
}

.gallery-item:hover::after {
    opacity: 0; /* Remove grain on hover */
}

.gallery-item:hover .gallery-overlay {
    background: rgba(0, 0, 0, 0.4); /* Darker overlay on hover for text contrast */
}

.gallery-category,
.gallery-title {
    transform: translateY(40px); /* Start lower */
    opacity: 0; /* Start invisible */
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Animate upwards on hover */
.gallery-item:hover .gallery-category,
.gallery-item:hover .gallery-title {
    transform: translateY(0);
    opacity: 1;
}

.gallery-item:hover .gallery-title {
    transition-delay: 0.1s;
}

.gallery-category {
    font-family: var(--font-family); /* Normal font */
    font-size: var(--font-size-sm); /* Smaller size for tag look */
    text-transform: uppercase; /* Uppercase for tag look */
    letter-spacing: 0.15em;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
    font-weight: 600;
}

.gallery-title {
    font-family: var(--font-family); /* Normal font */
    font-size: var(--font-size-4xl); /* Much bigger title */
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.1;
}

/* ----------------------------------------
   TEAM SECTION
   ---------------------------------------- */
.team {
    padding: var(--space-3xl) 0;
    position: relative;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.team-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    position: relative;
    z-index: 1; /* Ensure content is above snake */
}

.team-description {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-lg);
    /* Improved readability against background elements */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
}

.team-stats {
    display: flex;
    gap: var(--space-2xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--glass-border);
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-accent);
}

.stat-desc {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}

/* Image Styling */
.team-image-wrapper {
    position: relative;
    z-index: 2; /* Ensure above snake */
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* Optional: Rotate slightly for dynamic look like the gallery items */
    /* transform: rotate(2deg); */ 
}

.team-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
    /* Filter to match site vibe (slightly desaturated/contrasty) */
    filter: contrast(1.1) saturate(0.9);
    transition: transform var(--transition-slow);
}

/* Glow effect behind/around image */
.image-glow {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 60px rgba(0,0,0,0.5); /* Inner shadow for depth */
    pointer-events: none;
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
}

.team-image-wrapper:hover .team-image {
    transform: scale(1.03);
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .team-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    
    .team-content {
        order: 2; /* Image first on mobile? Or Remove to keep Text first */
        text-align: center;
    }
    
    .team-stats {
        justify-content: center;
    }
}

/* ----------------------------------------
   SERVICES SECTION
   ---------------------------------------- */
.services {
    padding: var(--space-3xl) 0;
    position: relative;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.service-card {
    position: relative;
    z-index: 2; /* Ensure above snake */
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    transition: transform var(--transition-smooth), border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-accent);
    box-shadow: 
        0 0 30px rgba(240, 255, 61, 0.1),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
}

.service-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
    letter-spacing: -0.01em;
}

.service-subtitle {
    font-family: var(--font-family); /* Changed to normal font */
    font-size: var(--font-size-lg); /* Adjusted size for normal font */
    color: var(--color-accent);
    margin-bottom: var(--space-lg);
    opacity: 0.9;
    /* transform removed for normal text */
}

.service-body {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); /* Added shadow for readability */
}

.service-body p {
    margin-bottom: var(--space-md);
}

.service-body p:last-child {
    margin-bottom: 0;
}

/* Services Gallery */
.services-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.service-image-wrapper {
    position: relative;
    z-index: 2; /* Ensure above snake */
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3; /* Consistent aspect ratio */
    border: 1px solid var(--glass-border);
}

.service-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow), filter 0.5s ease;
    filter: contrast(1.1) saturate(0.9);
}

.service-image-wrapper:hover .service-img {
    transform: scale(1.05);
    filter: contrast(1.1) saturate(1.1);
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .services-gallery {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
}

/* ----------------------------------------
   STUDIO PANORAMA
   ---------------------------------------- */
.panorama-section {
    position: relative;
    width: 100%;
    height: 60vh; /* Adjusted height */
    overflow: hidden;
    margin-bottom: var(--space-3xl);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.pano-content {
    position: relative;
    z-index: 10;
    text-align: center;
    pointer-events: none; /* Let clicks pass through */
    text-shadow: 0 4px 20px rgba(0,0,0,0.8);
}

.pano-desc {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.9);
    margin-top: var(--space-sm);
}

/* Parallax Window Effect */
.pano-parallax-bg {
    position: absolute;
    top: -10%; /* Start slightly higher */
    left: 0;
    width: 100%;
    height: 120%; /* Taller than container to allow movement */
    background-size: cover;
    background-position: center;
    /* background-attachment: fixed; - Replaced with JS parallax for smoother feel and mobile support */
    opacity: 0.6;
    will-change: transform;
    pointer-events: none;
}

/* Responsive Overrides */
@media (max-width: 768px) {
    .panorama-section {
        height: 50vh;
    }
    
    .pano-parallax-bg {
        background-attachment: scroll; /* Fixed doesn't work well on mobile */
    }
}

/* ----------------------------------------
   PRICING SECTION
   ---------------------------------------- */
.pricing {
    padding: var(--space-3xl) 0;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--space-lg);
    max-width: 800px;
    margin: 0 auto;
}

.pricing-card {
    position: relative;
    z-index: 2; /* Ensure above snake */
    background: rgba(255, 255, 255, 0.08); /* Brighter glass */
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    transition: all var(--transition-smooth);
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-accent);
    box-shadow: 
        0 0 40px rgba(240, 255, 61, 0.4),
        0 0 80px rgba(240, 255, 61, 0.2),
        inset 0 0 30px rgba(240, 255, 61, 0.05);
}

.pricing-card.featured {
    border-color: var(--color-accent);
}

.pricing-badge {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: var(--color-accent);
    color: var(--color-bg);
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
}

.pricing-header {
    text-align: center;
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: var(--space-lg);
    position: relative;
    z-index: 1; /* Ensure header is above snake */
}

.pricing-label {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
}

.pricing-price {
    margin: var(--space-sm) 0;
}

.pricing-options {
    margin: var(--space-md) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--glass-border);
}

.price-row:last-child {
    border-bottom: none;
}

.price-label {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}

.price-value {
    color: var(--color-accent);
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.price-vat {
    text-align: right;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: -5px;
    margin-bottom: var(--space-sm);
}

.pricing-conditions {
    max-width: 800px;
    margin: var(--space-xl) auto 0;
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.05); /* Increased background visibility */
    border: 1px solid rgba(255, 255, 255, 0.15); /* More visible border */
    border-radius: var(--radius-lg);
    text-align: center;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    /* Subtle accent glow */
    border-color: rgba(240, 255, 61, 0.3);
    box-shadow: 0 0 30px rgba(240, 255, 61, 0.1);
}

.conditions-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.condition-item {
    color: var(--color-text-primary); /* Changed to primary white text */
    font-size: var(--font-size-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--glass-border);
}

.condition-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.price-amount {
    font-size: var(--font-size-5xl);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.pricing-card.featured .price-amount {
    color: var(--color-accent);
    text-shadow: 0 0 30px rgba(240, 255, 61, 0.3);
}

.price-period {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

.pricing-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.pricing-features {
    margin-bottom: var(--space-xl);
}

.feature-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    font-size: var(--font-size-sm);
}

.feature-item.disabled {
    color: var(--color-text-muted);
}

.feature-item.disabled .check-icon {
    opacity: 0.3;
}

.check-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: var(--color-accent);
    stroke-width: 2;
    fill: none;
}

.pricing-cta {
    width: 100%;
    text-align: center;
    margin-top: auto;
}

.pricing-note {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-xl);
}

/* ----------------------------------------
   BOOKING SECTION
   ---------------------------------------- */
.booking {
    padding: var(--space-3xl) 0;
    /* Background removed to show global grid */
}

.booking-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1; /* Ensure booking widget is above snake */
}

.booking-placeholder {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-3xl);
    text-align: center;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

.booking-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-lg);
    color: var(--color-accent);
    filter: drop-shadow(0 0 25px rgba(240, 255, 61, 0.6)) drop-shadow(0 0 50px rgba(240, 255, 61, 0.4));
}

.booking-icon svg {
    width: 100%;
    height: 100%;
}

.booking-title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.booking-text {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
}

.booking-subtext {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ----------------------------------------
   CONTACT SECTION
   ---------------------------------------- */
.contact {
    padding: var(--space-3xl) 0;
}

/* Contact Stat Counter */
.contact-stat {
    text-align: center;
    margin-bottom: var(--space-3xl);
    padding: var(--space-2xl) 0;
    position: relative;
    z-index: 1; /* Ensure stat is above snake */
}

.stat-number {
    font-size: clamp(6rem, 15vw, 12rem);
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
    letter-spacing: -0.05em;
    text-shadow: 
        0 0 60px rgba(240, 255, 61, 0.6),
        0 0 120px rgba(240, 255, 61, 0.4);
    display: inline-block;
}

.stat-unit {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 300;
    color: var(--color-text-primary);
    margin-left: var(--space-sm);
    vertical-align: baseline;
    opacity: 0.8;
}

.stat-label {
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-top: var(--space-md);
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
    position: relative;
    z-index: 1; /* Ensure content is above snake */
}

.contact-info .section-label {
    text-align: left;
}

.contact-info .section-title {
    text-align: left;
    margin-bottom: var(--space-md);
}

.contact-text {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
    line-height: 1.8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); /* Added shadow for readability */
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

.contact-item:hover {
    color: var(--color-text-primary);
}

.contact-item svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--color-accent);
}

/* Contact Form */
.contact-form {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

.form-group {
    margin-bottom: var(--space-md);
}

.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: var(--space-xs);
}

.form-label .optional {
    color: var(--color-text-muted);
    font-weight: 400;
}

.form-input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    outline: none;
    transition: all var(--transition-fast);
}

.form-input::placeholder {
    color: var(--color-text-muted);
}

.form-input:focus {
    border-color: var(--color-accent);
    box-shadow: 
        0 0 0 3px rgba(240, 255, 61, 0.15),
        0 0 30px rgba(240, 255, 61, 0.2);
}

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

.form-submit {
    width: 100%;
    margin-top: var(--space-sm);
}

.form-submit svg {
    width: 18px;
    height: 18px;
}

/* ----------------------------------------
   FOOTER
   ---------------------------------------- */
.footer {
    padding: var(--space-3xl) 0 2rem;
    border-top: none;
    background: linear-gradient(to top, #000000 30%, transparent 100%);
    position: relative;
    z-index: 5;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.footer-brand .logo-text {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-xs);
}

.footer-brand .logo-image {
    height: 40px; /* Slightly smaller than header */
    margin-bottom: var(--space-xs);
}

.footer-tagline {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.footer-links {
    display: flex;
    gap: var(--space-lg);
}

.footer-link {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

.footer-link:hover {
    color: var(--color-text-primary);
}

.footer-social {
    display: flex;
    gap: var(--space-md);
}

.social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    transition: all var(--transition-base);
}

.social-link:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-accent);
    color: var(--color-accent);
    box-shadow: 
        0 0 30px rgba(240, 255, 61, 0.5),
        0 0 60px rgba(240, 255, 61, 0.3);
}

.social-link svg {
    width: 20px;
    height: 20px;
}

.footer-bottom {
    text-align: center;
    padding-top: var(--space-md); /* Reduced from lg */
    border-top: 1px solid var(--glass-border);
    margin-top: var(--space-md); /* Reduced top margin to tighten it up */
}

.copyright {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ----------------------------------------
   PARALLAX EFFECT
   ---------------------------------------- */
[data-parallax] {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* ----------------------------------------
   SCROLL ANIMATIONS
   ---------------------------------------- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: all var(--transition-smooth);
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for grid items */
.bento-grid .animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.bento-grid .animate-on-scroll:nth-child(2) { transition-delay: 100ms; }
.bento-grid .animate-on-scroll:nth-child(3) { transition-delay: 150ms; }
.bento-grid .animate-on-scroll:nth-child(4) { transition-delay: 200ms; }
.bento-grid .animate-on-scroll:nth-child(5) { transition-delay: 250ms; }
.bento-grid .animate-on-scroll:nth-child(6) { transition-delay: 300ms; }
.bento-grid .animate-on-scroll:nth-child(7) { transition-delay: 350ms; }

.gallery-grid .animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.gallery-grid .animate-on-scroll:nth-child(2) { transition-delay: 100ms; }
.gallery-grid .animate-on-scroll:nth-child(3) { transition-delay: 150ms; }
.gallery-grid .animate-on-scroll:nth-child(4) { transition-delay: 200ms; }
.gallery-grid .animate-on-scroll:nth-child(5) { transition-delay: 250ms; }
.gallery-grid .animate-on-scroll:nth-child(6) { transition-delay: 300ms; }

/* ----------------------------------------
   RESPONSIVE DESIGN
   ---------------------------------------- */

/* Tablet */
@media (max-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gallery-item.large {
        grid-column: span 1;
    }
    
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    
    .contact-info .section-label,
    .contact-info .section-title {
        text-align: center;
    }
    
    .contact-text {
        text-align: center;
    }
    
    .contact-details {
        align-items: center;
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --space-3xl: 4rem;
    }
    
    /* Mobile Navigation */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        flex-direction: column;
        justify-content: center;
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        transition: right var(--transition-base);
    }
    
    .nav-menu.active {
        right: 0;
    }
    
    .nav-link {
        font-size: var(--font-size-2xl);
    }
    
    .nav-toggle {
        display: block;
        z-index: 1001;
    }
    
    /* Hero adjustments */
    .hero-title {
        font-size: var(--font-size-4xl); /* Smaller font size */
        margin-bottom: var(--space-md);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .title-line {
        display: block; /* Break lines properly */
    }

    .highlight-wrapper {
        margin-right: 0; /* Remove margin */
        width: 100%;
        height: 1.2em; /* Ensure vertical space */
        margin-top: 0.2em;
        margin-bottom: 0.2em;
    }

    .highlight-text {
        font-size: 2em; /* Smaller script font */
        transform: translate(-50%, -40%) rotate(-5deg);
        white-space: nowrap;
    }

    .hero-subtitle {
        font-size: var(--font-size-base);
        margin-top: 2rem;
        margin-bottom: var(--space-lg);
    }

    .hero-cta {
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
    }

    .hero-cta .btn {
        width: 100%;
        max-width: 280px;
    }
    
    /* Partners Overlay on Mobile */
    .partners-overlay {
        margin-top: -100px; /* Reduced negative margin to avoid overlap with buttons */
        padding-top: 2rem;
        padding-bottom: 4rem;
    }
    
    .partners-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Force 2 columns */
        gap: var(--space-md); /* Reduced gap */
        justify-items: center; /* Center logos in their cells */
        align-items: center;
    }
    
    .partners-overlay .partner-logo {
        height: 40px; /* Slightly larger for visibility */
        max-width: 140px;
        width: 100%; /* Ensure they scale down if needed */
        object-fit: contain;
    }
    
    /* Gallery */
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-item {
        height: 300px; /* Reduce height on mobile */
    }

    .gallery-title {
        font-size: var(--font-size-2xl); /* Smaller title on mobile */
        opacity: 1 !important; /* Always visible */
        transform: translateY(0) !important;
    }

    .gallery-category {
        opacity: 1 !important; /* Always visible */
        transform: translateY(0) !important;
    }

    .gallery-overlay {
        background: rgba(0, 0, 0, 0.4); /* Darker overlay for readability */
    }
    
    /* Pricing */
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    /* Footer */
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-links {
        justify-content: center;
    }
    
    .footer-social {
        justify-content: center;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .container {
        padding: 0 var(--space-md);
    }
    
    .feature-card,
    .pricing-card,
    .contact-form,
    .booking-placeholder {
        padding: var(--space-lg);
    }
}