:root{
  --bg: #fafafc;
  --panel: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --line: rgba(15,23,42,.08);
  --brandA: #0ea5e9;
  --brandB: #8b5cf6;
  --brandC: #ef4444;
  --radius: 16px;
  --container: 1200px;
  --shadow-1: 0 10px 30px rgba(2,6,23,.08);
  --shadow-2: 0 30px 80px rgba(2,6,23,.12);
  --glowA: 0 0 0 rgba(14,165,233,0);
  --glowB: 0 0 0 rgba(139,92,246,0);
}

* { box-sizing: border-box }
html,body{ height:100%; }
html{ scroll-behavior: smooth; }
body{
  margin:0; background: var(--bg); color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
}
/* fun mode removed */

.skip-link{ position: absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ left:16px; top:16px; width:auto; height:auto; background:#111; color:#fff; padding:.6rem 1rem; border-radius:10px; }

.container{ width: min(100% - 2rem, var(--container)); margin-inline: auto; }

/* Header */
.site-header{
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  z-index: 999999; 
  background: transparent;
  padding: 1rem 0;
  pointer-events: none; /* Allow clicks through header */
}
.site-header .container{ 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  position:relative; 
}
.brand{ display:none; } /* Hide logo completely for clean pill nav */

/* Pure Glass Pill Navigation */
.nav-toggle{ 
  display:none; 
  background:none; 
  border:0; 
  width:48px; 
  height:48px; 
  position:absolute; 
  right:0; 
  cursor:pointer; 
  border-radius:50%; 
  backdrop-filter: blur(16px) saturate(180%);
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 
    0 8px 32px rgba(31,38,135,.37),
    0 0 0 1px rgba(255,255,255,.05),
    inset 0 2px 0 rgba(255,255,255,.2),
    inset 0 -2px 0 rgba(0,0,0,.05);
  z-index: 1000002;
  pointer-events: auto; /* Re-enable clicks for toggle */
}
.nav-toggle:hover{ 
  background: rgba(255,255,255,.9);
  transform: translateY(-1px);
  box-shadow: 
    0 12px 40px rgba(31,38,135,.4),
    0 0 0 1px rgba(255,255,255,.1),
    inset 0 2px 0 rgba(255,255,255,.3);
}
.nav-toggle .bar{ 
  position:absolute; 
  left:14px; 
  right:14px; 
  height:2px; 
  background:#475569; 
  border-radius:1px; 
  transition: all .4s cubic-bezier(.68,-.55,.265,1.55); 
}
.nav-toggle .bar:nth-child(1){ top:18px; }
.nav-toggle .bar:nth-child(2){ top:28px; width:60%; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ 
  transform: rotate(45deg) translate(6px, 6px); 
  background: var(--brandA);
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ 
  transform: rotate(-45deg) translate(4px, -4px); 
  width:100%; 
  background: var(--brandA);
}

.nav-name{
  color: var(--text);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  margin-right: 2rem;
  padding: 12px 20px;
  border-radius: 50px;
  backdrop-filter: blur(16px) saturate(180%);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 
    0 8px 32px rgba(31,38,135,.37),
    0 0 0 1px rgba(255,255,255,.05),
    inset 0 2px 0 rgba(255,255,255,.2),
    inset 0 -2px 0 rgba(0,0,0,.05);
  position: relative;
  transition: all .3s cubic-bezier(.25,.46,.45,.94);
  z-index: 1000001;
  pointer-events: auto; /* Re-enable clicks for name */
}

.nav-name:hover{
  background: rgba(255,255,255,.15);
  transform: translateY(-1px);
  box-shadow: 
    0 12px 40px rgba(31,38,135,.4),
    0 0 0 1px rgba(255,255,255,.1),
    inset 0 2px 0 rgba(255,255,255,.3);
}

.nav-menu{ 
  list-style:none; 
  display:flex; 
  gap:8px; 
  padding:0; 
  margin:0; 
  align-items:center; 
  background: transparent; 
  position:relative;
  z-index: 1000000;
  pointer-events: auto; /* Re-enable clicks for navigation */
  background-color: transparent;
  padding: 1rem;
  border-radius: 1000px;
}

.nav-menu li{ display:block; position:relative; }

.nav-menu a{ 
  color: var(--muted); 
  text-decoration:none; 
  padding:12px 20px; 
  border-radius:50px; 
  display:block;
  font-weight:600; 
  font-size:.9rem;
  line-height:1.2;
  letter-spacing:.01em;
  transition: all .3s cubic-bezier(.25,.46,.45,.94);
  position:relative;
  
  /* Perfect Glassmorphism */
  backdrop-filter: blur(16px) saturate(180%);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 
    0 8px 32px rgba(31,38,135,.37),
    0 0 0 1px rgba(255,255,255,.05),
    inset 0 2px 0 rgba(255,255,255,.2),
    inset 0 -2px 0 rgba(0,0,0,.05);
}

.nav-menu a:hover{ 
  color: var(--text);
  background: rgba(255,255,255,.2);
  transform: translateY(-2px);
  box-shadow: 
    0 12px 40px rgba(31,38,135,.4),
    0 0 0 1px rgba(255,255,255,.1),
    inset 0 2px 0 rgba(255,255,255,.3),
    inset 0 -2px 0 rgba(0,0,0,.1);
}

.nav-menu a:focus-visible{ 
  outline: 2px solid rgba(14,165,233,.6); 
  outline-offset:3px; 
}

.nav-menu a.active{ 
  color:#fff; 
  background: linear-gradient(135deg, 
    rgba(14,165,233,.9) 0%, 
    rgba(139,92,246,.8) 100%
  ); 
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 
    0 8px 32px rgba(14,165,233,.5),
    0 16px 64px rgba(139,92,246,.3),
    0 0 0 1px rgba(255,255,255,.1),
    inset 0 2px 0 rgba(255,255,255,.4),
    inset 0 -2px 0 rgba(0,0,0,.1);
  transform: translateY(-2px);
  backdrop-filter: blur(16px) saturate(180%);
}

.nav-menu a.active:hover{
  background: linear-gradient(135deg, 
    rgba(14,165,233,1) 0%, 
    rgba(139,92,246,.9) 100%
  ); 
  box-shadow: 
    0 12px 40px rgba(14,165,233,.6),
    0 20px 80px rgba(139,92,246,.4),
    0 0 0 1px rgba(255,255,255,.2),
    inset 0 2px 0 rgba(255,255,255,.5);
}

/* Hero */
.section{ position:relative; padding: clamp(56px, 8vw, 112px) 0; }
.section:first-of-type{ padding-top: clamp(120px, 12vw, 180px); } /* Extra space for fixed header */
.hero{ min-height: 78vh; display:grid; place-items:center; overflow:hidden; }
.hero .container{ display:grid; grid-template-columns:1.2fr .8fr; gap: clamp(24px, 5vw, 56px); align-items:center; }
.fx-bg{ position:absolute; inset:0; overflow:hidden; }
.shape-blob{ position:absolute; inset:auto auto -100px -120px; width:58vw; max-width:860px; aspect-ratio: 1.6/1; background:
  radial-gradient(60% 80% at 30% 30%, rgba(14,165,233,.35), transparent 60%),
  radial-gradient(50% 70% at 80% 30%, rgba(139,92,246,.28), transparent 60%),
  radial-gradient(50% 80% at 60% 80%, rgba(239,68,68,.18), transparent 70%);
  filter: blur(30px); transform: rotate(-6deg); }
.grid-overlay{ position:absolute; inset:-20%; background:
  linear-gradient(rgba(2,6,23,.06), transparent 1px) 0 0/100% 36px,
  linear-gradient(90deg, rgba(2,6,23,.06), transparent 1px) 0 0/36px 100%;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 70%);
}

/* Animated gradient halo following the cursor */
.cursor-glow{ position: fixed; inset:auto; width: 28vmax; height: 28vmax; pointer-events:none; z-index: 0; mix-blend-mode: soft-light; opacity:.6; transform: translate(-50%, -50%); border-radius:50%; background:
  radial-gradient(35% 35% at 50% 50%, rgba(14,165,233,.22), transparent 60%),
  radial-gradient(35% 35% at 70% 40%, rgba(139,92,246,.18), transparent 65%),
  radial-gradient(40% 40% at 40% 70%, rgba(239,68,68,.14), transparent 70%);
  filter: blur(30px);
}
@media (hover: none) and (pointer: coarse){ .cursor-glow{ display:none; } }

.eyebrow{ color: var(--brandA); text-transform: uppercase; font-weight:700; letter-spacing: .14em; font-size:.8rem; margin:0 0 .6rem; }
.headline{ font-family: "Space Grotesk", Inter, system-ui; font-size: clamp(1.9rem, 3.6vw, 3.6rem); line-height: 1.1; margin:.2rem 0 1rem; }
.grad-ink{ background: linear-gradient(90deg, var(--brandA), var(--brandB), var(--brandC)); -webkit-background-clip:text; background-clip:text; color: transparent; }
.subhead{ color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.2rem); max-width: 60ch; }
.cta-row{ display:flex; gap:.8rem; margin: 1.2rem 0 1.6rem; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.1rem; border-radius: 12px; text-decoration:none; font-weight:600; letter-spacing:.2px; border:1px solid transparent; transition: transform .18s ease, background .2s ease, box-shadow .2s ease; }
.btn-primary{ background: linear-gradient(135deg, var(--brandA), var(--brandB)); color:#ffffff; box-shadow: 0 10px 30px rgba(139,92,246,.25); }
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 14px 36px rgba(168,85,247,.35); }
.btn-ghost{ background: rgba(255,255,255,.06); color:var(--text); border-color: var(--line); }
.btn-ghost:hover{ background: rgba(255,255,255,.1); }

/* Magnetic hover hint */
.magnetic::after{ content:""; position:absolute; inset:-4px; border-radius:14px; opacity:0; box-shadow: 0 0 0 0 rgba(14,165,233,.0); transition: opacity .2s ease, box-shadow .25s ease; }
.magnetic:hover::after{ opacity:1; box-shadow: 0 0 0 6px rgba(14,165,233,.10); }

.badges{ display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:0; list-style:none; }
.badges li{ padding:.45rem .7rem; border-radius:20px; background: rgba(255,255,255,.06); color:#d1d5db; border:1px solid var(--line); font-size:.85rem; }

/* Better small-screen wrapping */
p, h1, h2, h3, li, a{ hyphens: auto; overflow-wrap: anywhere; word-break: normal; }

.hero-visual{ display:grid; place-items:center; }
.portrait{ width:100%; border-radius: 28px; border:1px solid var(--line); border: none;background: transparent;}
.portrait svg{ width:100%; height:100%; display:block; border-radius: 20px; background: radial-gradient(ellipse at 40% 40%, rgba(255,255,255,.06), transparent 50%); }

/* About */
[data-glass]{ background: linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,.01)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.grid-2{ display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 4vw, 48px); align-items:start; }
.pill-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.6rem; }
.pill-list li{ background: rgba(255,255,255,.06); border:1px solid var(--line); padding:.65rem .8rem; border-radius: 999px; text-align:center; }

/* Work */
.section-head h2{ margin:0 0 .4rem; font-size: clamp(1.4rem, 2.2vw, 2.2rem); }
.section-head p{ margin:0 0 1.2rem; color: var(--muted); }
.work-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px, 2vw, 24px); }
.card{ background: var(--panel); border:1px solid var(--line); border-radius: 18px; overflow:hidden; box-shadow: var(--shadow-1); transform-style: preserve-3d; will-change: transform; }
.card-thumb{ height: 180px; background-size: cover; background-position: center; border-bottom:1px solid var(--line); }
.thumb-1{ background-image: linear-gradient(135deg, rgba(14,165,233,.22), rgba(139,92,246,.22)), url('./img/frontend_stack.jpg'); }
.thumb-2{ background-image: linear-gradient(135deg, rgba(139,92,246,.22), rgba(239,68,68,.22)), url('./img/design_thinking.jpeg'); }
.thumb-3{ background-image: linear-gradient(135deg, rgba(239,68,68,.22), rgba(14,165,233,.22)), url('./img/performance.jpeg'); }
.card-body{ padding: 1.0rem 1rem 1.1rem; }
.card h3{ margin:.1rem 0 .4rem; font-size:1.1rem; }
.card p{ margin:.2rem 0 .8rem; color: var(--muted); }
.tags{ display:flex; gap:.4rem; flex-wrap:wrap; }
.tags span{ font-size:.78rem; color:#cbd5e1; padding:.3rem .55rem; border:1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.04); }

/* Reveal animations */
[data-reveal]{ opacity:0; transform: translateY(18px); }
[data-reveal].is-visible{ opacity:1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
[data-reveal][data-delay="80"].is-visible{ transition-delay: .08s; }
[data-reveal][data-delay="160"].is-visible{ transition-delay: .16s; }

/* Services */
.service-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(16px, 2vw, 24px); }
.service{ background: var(--panel); border:1px solid var(--line); border-radius: 16px; padding: 1.0rem 1rem; }
.service h3{ margin:.2rem 0 .4rem; font-size:1.05rem; }
.service p{ margin:0; color: var(--muted); }

/* Quotes */
.quotes{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(12px, 2vw, 20px); }
.quote{ background: linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,.01)); border:1px solid var(--line); border-radius: 16px; padding: 1.0rem 1rem; font-size: 1rem; box-shadow: var(--shadow-1); }
.quote cite{ display:block; margin-top:.6rem; font-style:normal; color: var(--muted); font-size:.9rem; }

/* Contact */
.contact{ display:grid; grid-template-columns: 1fr; gap: clamp(16px, 3vw, 32px); align-items:start; }
.contact-list{ list-style:none; padding:0; margin:1rem 0 0; display:flex; gap:.6rem; flex-wrap:wrap; }
.contact-link{ color:#0b1220; text-decoration:none; padding:.55rem .8rem; border-radius: 10px; border:1px solid var(--line); background: rgba(2,6,23,.03); }
.contact-link:hover{ background: rgba(2,6,23,.06); }
.contact-form{ background: var(--panel); border:1px solid var(--line); border-radius: 16px; padding: 1rem; box-shadow: var(--shadow-1); }
.field{ display:grid; gap:.35rem; margin:.6rem 0; }
.field input, .field textarea{ width:100%; background: #ffffff; border:1px solid var(--line); color:#0b1220; border-radius:10px; padding:.8rem .9rem; font: inherit; }
.field input:focus, .field textarea:focus{ outline:2px solid rgba(14,165,233,.35); border-color: rgba(14,165,233,.5); }
.form-note{ color: var(--muted); font-size:.9rem; }

/* Footer */
.site-footer{ border-top:1px solid var(--line); padding: 1.2rem 0; background: rgba(255,255,255,.85); }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.site-footer a{ color:#0b1220; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }

/* Center comedy and about sections vertically */
#comedy .container, #about .container{ align-items:center; }

/* Steh Auf brand block */
.brand-block{ display:grid; place-items:center; gap:.6rem; margin-bottom: 1rem; }
.stehauf-logo{ width:min(60%, 320px); height:auto; filter: drop-shadow(0 10px 30px rgba(2,6,23,.08)); }

/* Shows content layout */
.shows-content{ display:grid; grid-template-columns: 1fr auto; gap: clamp(24px, 4vw, 48px); align-items:start; margin-bottom: 1.5rem; }
.shows-story h3{ margin:0 0 .6rem; font-size:1.2rem; }
.shows-story p{ margin:0 0 .8rem; color: var(--muted); }
.shows-story p:last-child{ margin-bottom:0; }

/* Modern Gallery */
.gallery-section{ margin: 2rem 0; }
.gallery-section h3{ margin:0 0 1.5rem; font-size:1.3rem; font-weight:600; text-align:center; }

.modern-gallery{ 
  display:grid; 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  gap: 0; 
  margin: 1.5rem 0;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.gallery-item{ 
  aspect-ratio: 4/3; 
  overflow:hidden; 
  border-radius: 20px; 
  background: #fff; 
  cursor:pointer; 
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid white;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
  border-radius: 0;
  margin: 0;
}




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

.gallery-item:hover{ 
  transform: translateY(-8px) scale(1.02); 
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  border-color: var(--brandA);
}

.gallery-item img{ 
  width:100%; 
  height:100%; 
  object-fit: cover; 
  display:block; 
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.gallery-item::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent, rgba(14,165,233,0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  pointer-events: none;
}

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

.gallery-item::after{
  content: '🔍';
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 14px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease;
  z-index: 2;
}

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

.gallery-controls{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.gallery-nav{ 
  background: linear-gradient(135deg, var(--brandA), var(--brandB));
  color: white;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(14,165,233,0.3);
}

.gallery-nav:hover{ 
  transform: scale(1.1);
  box-shadow: 0 8px 30px rgba(14,165,233,0.4);
}

.gallery-nav:active{
  transform: scale(0.95);
}

.gallery-dots{ 
  display:flex; 
  justify-content:center; 
  gap:.6rem; 
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,0.8);
  border-radius: 25px;
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
}

.gallery-dot{ 
  width: 12px; 
  height: 12px; 
  border-radius: 50%; 
  background: var(--line); 
  cursor: pointer; 
  transition: all 0.3s ease; 
  border: none;
  position: relative;
}

.gallery-dot::before{
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brandA), var(--brandB));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-dot:hover{ 
  transform: scale(1.2);
}

.gallery-dot:hover::before{
  opacity: 0.3;
}

.gallery-dot.active{ 
  background: var(--brandA);
  transform: scale(1.3);
  box-shadow: 0 0 0 3px rgba(14,165,233,0.2);
}

.gallery-dot.active::before{
  opacity: 1;
}

/* Lightbox Modal */
.lightbox-modal::backdrop{ 
  background: rgba(0,0,0,.95); 
  backdrop-filter: blur(8px); 
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox-modal{ 
  border:0; 
  padding:0; 
  border-radius: 0; 
  background: transparent; 
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.lightbox-content{ 
  position:relative; 
  width:100vw; 
  height:100vh; 
  display:grid; 
  place-items:center; 
}

.lightbox-close{ 
  position:absolute; 
  top:30px; 
  right:30px; 
  background:rgba(0,0,0,.8); 
  color:#fff; 
  border:0; 
  border-radius:50%; 
  width:56px; 
  height:56px; 
  font-size:1.8rem; 
  cursor:pointer; 
  z-index:10; 
  display:grid; 
  place-items:center; 
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.lightbox-close:hover{ 
  background:rgba(0,0,0,.9); 
  transform: scale(1.1);
}

.lightbox-nav{ 
  position:absolute; 
  top:50%; 
  transform:translateY(-50%); 
  background:rgba(0,0,0,.8); 
  color:#fff; 
  border:0; 
  border-radius:50%; 
  width:64px; 
  height:64px; 
  font-size:2rem; 
  cursor:pointer; 
  z-index:10; 
  display:grid; 
  place-items:center; 
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.lightbox-prev{ left:30px; }
.lightbox-next{ right:30px; }

.lightbox-nav:hover{ 
  background:rgba(0,0,0,.9); 
  transform: translateY(-50%) scale(1.1);
}

.lightbox-image-container{ 
  max-width:90vw; 
  max-height:85vh; 
  display:grid; 
  place-items:center;
  padding: 20px;
}

#lightboxImage{ 
  max-width:100%; 
  max-height:100%; 
  object-fit:contain; 
  border-radius:12px; 
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: imageZoom 0.3s ease;
}

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

.lightbox-counter{ 
  position:absolute; 
  bottom:30px; 
  left:50%; 
  transform:translateX(-50%); 
  background:rgba(0,0,0,.8); 
  color:#fff; 
  padding:.75rem 1.5rem; 
  border-radius:25px; 
  font-size:1rem; 
  font-weight:500;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
}

@media (max-width: 980px){ 
  .shows-content{ grid-template-columns:1fr; }
  .modern-gallery{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } 
}
@media (max-width: 560px){ 
  .modern-gallery{ grid-template-columns: 1fr; gap: 0.8rem; }
  .gallery-controls{ gap: 0.5rem; }
  .gallery-nav{ width: 40px; height: 40px; }
  .lightbox-nav{ width: 48px; height: 48px; font-size: 1.5rem; }
  .lightbox-close{ width: 48px; height: 48px; font-size: 1.5rem; }
}

/* fun mode removed */

/* Magnetic + tilt effects */
.magnetic{ position:relative; }
.tilt{ transition: transform .2s ease; }
.tilt:hover{ transform: perspective(700px) rotateX(2deg) rotateY(-3deg) translateY(-2px); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .tilt:hover{ transform:none; }
}

/* Responsive */
@media (max-width: 980px){
  .hero .container{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .work-grid{ grid-template-columns: 1fr 1fr; }
  .service-grid{ grid-template-columns: 1fr 1fr; }
  .quotes{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
}

@media (max-width: 720px){
  .nav-toggle{ 
    display: block; 
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
    z-index: 1000003;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(255,255,255,.3);
    box-shadow: 
      0 8px 32px rgba(31,38,135,.25),
      0 4px 16px rgba(0,0,0,.1),
      inset 0 1px 0 rgba(255,255,255,.8);
    transition: all .3s cubic-bezier(.25,.46,.45,.94);
    cursor: pointer;
  }
  
  .nav-toggle:hover,
  .nav-toggle:focus-visible{
    background: rgba(255,255,255,1);
    transform: translateY(-2px);
    box-shadow: 
      0 12px 40px rgba(31,38,135,.35),
      0 6px 20px rgba(0,0,0,.15),
      inset 0 1px 0 rgba(255,255,255,.9);
  }
  
  .nav-toggle .bar{
    position: absolute;
    left: 12px;
    right: 12px;
    height: 2px;
    background: #475569;
    border-radius: 1px;
    transition: all .3s cubic-bezier(.25,.46,.45,.94);
  }
  
  .nav-toggle .bar:nth-child(1){ 
    top: 18px; 
  }
  
  .nav-toggle .bar:nth-child(2){ 
    top: 28px; 
    width: 60%; 
    right: auto;
  }
  
  /* Sauberes X-Design */
  .nav-toggle[aria-expanded="true"] .bar:nth-child(1){ 
    transform: rotate(45deg) translate(6px, 6px); 
    background: var(--brandA);
    width: 24px;
    left: 12px;
    right: auto;
  }
  
  .nav-toggle[aria-expanded="true"] .bar:nth-child(2){ 
    transform: rotate(-45deg) translate(6px, -6px); 
    background: var(--brandA);
    width: 24px;
    left: 12px;
    right: auto;
  }
  
  .nav-name{ display:none; }
  .nav-menu{ 
    position: fixed; 
    right: 1.5rem; 
    top: 6rem; 
    padding: 20px; 
    border-radius: 28px; 
    display: none; 
    flex-direction: column; 
    gap: 12px; 
    min-width: 240px;
    z-index: 1000002;
    
    /* Enhanced Glass Mobile */
    backdrop-filter: blur(24px) saturate(180%);
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: 
      0 25px 100px rgba(31,38,135,.25),
      0 12px 40px rgba(0,0,0,.12),
      inset 0 2px 0 rgba(255,255,255,.6),
      inset 0 -1px 0 rgba(0,0,0,.05);
    
    /* Improved slide animation */
    opacity: 0;
    transform: translateY(-15px) scale(0.92);
    transition: all .4s cubic-bezier(.25,.46,.45,.94);
  }
  .nav-menu.show{ 
    display: flex; 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .nav-menu a{ 
    border-radius: 20px; 
    padding: 18px 24px; 
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
    background: rgba(255,255,255,.4);
    border: 1px solid rgba(255,255,255,.3);
    transition: all .3s cubic-bezier(.25,.46,.45,.94);
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nav-menu a:hover,
  .nav-menu a:focus-visible{
    background: rgba(255,255,255,.6);
    transform: translateY(-2px);
    box-shadow: 
      0 8px 24px rgba(0,0,0,.12),
      0 4px 12px rgba(0,0,0,.08);
  }
  .nav-menu a.active{
    background: linear-gradient(135deg, 
      rgba(14,165,233,.95) 0%, 
      rgba(139,92,246,.9) 100%
    );
    border: 1px solid rgba(255,255,255,.5);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 
      0 12px 40px rgba(14,165,233,.4),
      0 6px 20px rgba(139,92,246,.3),
      inset 0 2px 0 rgba(255,255,255,.5);
  }
  
  /* Better touch targets */
  .nav-menu a:active{
    transform: translateY(0);
    transition: transform .1s ease;
  }
}

/* Nice selection */
::selection{ background: rgba(139,92,246,.25); color:#0b1220; }

/* Modals */
.modal::backdrop{ background: rgba(2,6,23,.35); backdrop-filter: blur(2px); }
.modal{ border:0; padding:0; border-radius: 16px; }
.modal-card{ background: var(--panel); color: var(--text); width:min(92vw, 720px); border:1px solid var(--line); border-radius:16px; box-shadow: var(--shadow-2); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1rem .5rem; border-bottom:1px solid var(--line); }
.modal-content{ padding:1rem; display:grid; gap:.6rem; }
.modal-foot{ padding: .8rem 1rem 1rem; border-top:1px solid var(--line); display:flex; justify-content:flex-end; }
.modal-close{ background:none; border:0; font-size:1.6rem; line-height:1; cursor:pointer; color: var(--muted); }


.hero-image{
  width: 100%;
  max-width: 560px;
  height: auto;
  object-fit: contain;
}

.hero-image-comedy{
  width: 100%;
  max-width: 520px;
  height: auto;
  object-fit: contain;
}

/* Z-index layering */
main, footer{ position: relative; z-index: 1; }
.site-header{ position: fixed; z-index: 999999; }
.nav-menu{ z-index: 1000002; }
.nav-name{ z-index: 1000001; }
.nav-toggle{ z-index: 1000003; }

/* Phone optimizations */
@media (max-width: 560px){
  .headline{ font-size: clamp(1.6rem, 8.5vw, 2.2rem); }
  .subhead{ font-size: 1rem; }
  .cta-row{ flex-direction: column; align-items: stretch; }
  .pill-list{ grid-template-columns: 1fr; }
  .work-grid{ grid-template-columns: 1fr; }
  .service-grid{ grid-template-columns: 1fr; }
  .footer-inner{ flex-direction: column; align-items: flex-start; row-gap: .4rem; }
  .site-header .container{ padding: .7rem 0; }
}