:root {
  --bg: #050505;
  --bg2: #0A0A0A;
  --card: #101010;
  --text: #F5F5F5;
  --muted: #8C8C8C;
  --red: #D6001C;
  --border: rgba(255,255,255,0.08);
  --glow: rgba(214,0,28,0.18);
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Syne', sans-serif;
  --font-text: 'Inter', sans-serif;
  --fs-h1: clamp(26px, 5vw, 60px);
  --fs-h2: clamp(22px, 4vw, 48px);
  --fs-h3: clamp(18px, 3vw, 36px);
  --fs-body: 15px;
  --fs-label: 12px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body:has(.indexx-home) { background: var(--bg); color: var(--text); font-family: var(--font-text); overflow-x: hidden; cursor: none; }

/* NOISE */
body:has(.indexx-home)::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.028; pointer-events: none; z-index: 9000;
  
}

/* SCROLLBAR */
::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--red); }

/* CURSOR */
.cursor { position:fixed; width:10px; height:10px; background:var(--red); border-radius:50%; pointer-events:none; z-index:9999; mix-blend-mode:difference; transition:transform 0.1s ease; }
.cursor-follower { position:fixed; width:38px; height:38px; border:1px solid rgba(214,0,28,0.5); border-radius:50%; pointer-events:none; z-index:9998; transition:all 0.18s cubic-bezier(0.23,1,0.32,1); }
.cursor.active { transform:scale(2.5); }
.cursor-follower.active { transform:scale(2.2); border-color:var(--red); background:rgba(214,0,28,0.06); }

/* NAVBAR */
body:has(.indexx-home) nav {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:90px;
  display:flex;
  align-items:center;
  justify-content:flex-start; /* changed */
  padding:0 48px;
  z-index:1000;
  transition:all 0.5s cubic-bezier(0.23,1,0.32,1);
}

body:has(.indexx-home) nav.scrolled {
  background:rgba(5,5,5,0.82);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  height:72px;
}

.nav-logo {
  font-family:var(--font-display);
  font-size:26px;
  letter-spacing:0.08em;
  color:var(--text);
  text-decoration:none;
  margin-right:auto; /* added */
}

.nav-logo span {
  color:var(--red);
}

.nav-links {
  display:flex;
  align-items:center;
  gap:36px;
  list-style:none;
  margin-left:auto; /* added */
  margin-right:36px; /* added */
}

.nav-links a {
  font-family:var(--font-body);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  position:relative;
  transition:color 0.3s;
}

.nav-links a::after {
  content:'';
  position:absolute;
  bottom:-3px;
  left:0;
  width:0;
  height:1px;
  background:var(--red);
  transition:width 0.35s cubic-bezier(0.23,1,0.32,1);
}

.nav-links a:hover {
  color:var(--text);
}

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

.nav-cta {
  font-family:var(--font-body);
  font-size:11px;
  font-weight:400;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--text);
  text-decoration:none;
  padding:12px 26px;
  border:1px solid rgba(255,255,255,0.18);
  position:relative;
  overflow:hidden;
  transition:all 0.35s cubic-bezier(0.23,1,0.32,1);
}

.nav-cta::before {
  content:'';
  position:absolute;
  inset:0;
  background:var(--red);
  transform:translateX(-101%);
  transition:transform 0.4s cubic-bezier(0.23,1,0.32,1);
}

.nav-cta:hover::before {
  transform:translateX(0);
}

.nav-cta span {
  position:relative;
  z-index:1;
}

.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:none;
  z-index:1001;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid transparent;
  border-radius:0;
  background:transparent;
  appearance:none;
  -webkit-appearance:none;
  color:var(--text);
}

.hamburger span {
  display:block;
  width:24px;
  height:1px;
  background:var(--text);
  transition:all 0.3s;
}

.hamburger.open span:nth-child(1) {
  transform:translateY(6px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity:0;
}

.hamburger.open span:nth-child(3) {
  transform:translateY(-6px) rotate(-45deg);
}

.mobile-menu {
  position:fixed;
  inset:0;
  background:rgba(5,5,5,0.98);
  backdrop-filter:blur(30px);
  z-index:999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:32px;
  min-height:100svh;
  max-height:100svh;
  padding:96px 28px 44px;
  overflow-y:auto;
  overscroll-behavior:contain;
  transform:translateY(-100%);
  transition:
    transform 0.6s cubic-bezier(0.23,1,0.32,1),
    visibility 0s linear 0.6s;
  visibility:hidden;
  pointer-events:none;
}

.mobile-menu.open {
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
  transition:
    transform 0.6s cubic-bezier(0.23,1,0.32,1),
    visibility 0s linear 0s;
}

.mobile-menu a {
  font-family:var(--font-display);
  font-size:48px;
  letter-spacing:0.05em;
  color:var(--text);
  text-decoration:none;
  transition:color 0.3s;
}

.mobile-menu a:hover {
  color:var(--red);
}

body.mobile-menu-open {
  overflow:hidden;
  touch-action:none;
}

/* MOBILE FONT SIZE REDUCED */
@media (max-width:768px) {
  .mobile-menu a {
    font-size:40px;
  }
}

@media (max-width:480px) {
  .mobile-menu a {
    font-size:34px;
  }
}

/* SOCIAL DOCK */
.social-dock { position:fixed; left:32px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:20px; z-index:500; }
.social-dock::before { content:''; display:block; width:1px; height:64px; background:var(--border); margin-bottom:4px; }
.social-dock::after { content:''; display:block; width:1px; height:64px; background:var(--border); margin-top:4px; }
.social-link { position:relative; display:flex; align-items:center; justify-content:center; width:34px; height:34px; transition:all 0.3s cubic-bezier(0.23,1,0.32,1); }
.social-link svg { width:16px; height:16px; fill:var(--muted); transition:fill 0.3s; }
.social-link:hover svg { fill:var(--red); }
.social-link:hover { transform:translateX(4px); }
.social-tooltip { position:absolute; left:calc(100% + 14px); background:var(--card); border:1px solid var(--border); color:var(--text); font-family:var(--font-body); font-size:10px; font-weight:500; letter-spacing:0.15em; text-transform:uppercase; padding:6px 12px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 0.25s; }
.social-link:hover .social-tooltip { opacity:1; }
.social-dock-mobile { display:none; position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:rgba(10,10,10,0.92); backdrop-filter:blur(16px); border:1px solid var(--border); padding:14px 28px; gap:32px; z-index:500; }
.social-dock-mobile a svg { width:18px; height:18px; fill:var(--muted); }
.social-dock-mobile a:hover svg { fill:var(--red); }

/* ===== HERO ===== */
#hero { min-height:76svh; display:grid; grid-template-columns:1fr 1fr; align-items:flex-start; padding:0 80px 0 140px; position:relative; overflow:hidden; gap:60px; }
.hero-bg { position:absolute; inset:0; z-index:0; }
#hero-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0.6; }
.hero-ambient { position:absolute; inset:0; background:radial-gradient(ellipse 60% 70% at 70% 50%, rgba(214,0,28,0.07) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 20% 80%, rgba(214,0,28,0.04) 0%, transparent 60%); }


.hero-left { position:relative; z-index:2; padding-top:160px; }

.hero-label {
  font-family:var(--font-body);
  font-size:14px;
  font-weight:400;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:28px;
  margin-top:0;
  display:flex;
  align-items:center;
  gap:14px;
}

.hero-label::before { 
  content:''; 
  display:block; 
  width:32px; 
  height:1px; 
  background:var(--red); 
}

.hero-headline { 
  font-family:var(--font-display); 
  font-size:clamp(26px, 6vw, 60px); 
  line-height:0.96; 
  letter-spacing:0.06em; 
  color:var(--text); 
  margin-bottom:40px; 
  overflow:visible;
  max-width:760px;
}

.hero-headline .line { 
  display:block; 
  overflow:visible;
  white-space:nowrap;
}

.hero-body:has(.indexx-home) { 
  font-family:var(--font-text); 
  font-size:15px; 
  line-height:1.8; 
  color:var(--muted); 
  max-width:420px; 
  margin-bottom:32px; 
}

.hero-quote { 
  border-left:1px solid var(--red); 
  padding-left:22px; 
  margin-bottom:52px; 
  max-width:580px; 
}

.hero-quote p { 
  font-family:var(--font-body); 
  font-size:13px; 
  font-weight:400; 
  font-style:italic; 
  line-height:1.9; 
  color:rgba(245,245,245,0.55); 
}

.hero-ctas { 
  display:flex; 
  flex-wrap:wrap; 
  gap:14px; 
}






/* ==========================================
   HERO RESPONSIVE FIXES
   ADD AT VERY END OF CSS
   ========================================== */

/* Large Tablets */
@media screen and (max-width: 1024px) {

  .hero-left{
    padding-top:100px;
  }

  .hero-headline{
    font-size:clamp(26px,6vw,60px);
    max-width:100%;
    line-height:1.0;
  }

  .hero-body:has(.indexx-home),
  .hero-quote{
    max-width:100%;
  }
}

/* Tablets & Mobile */
@media screen and (max-width: 768px) {

  .hero-left{
    width:100%;
    padding-top:120px;
  }

  .hero-label{
    font-size:13px;
    letter-spacing:0.2em;
    margin-top:0;
    margin-bottom:18px;
  }

  .hero-label::before{
    width:20px;
  }

  .hero-headline{
    font-size:clamp(26px,6vw,60px);
    line-height:1;
    letter-spacing:0.02em;
    margin-bottom:22px;
    max-width:100%;
  }

  /* allow wrapping on mobile */
  .hero-headline .line{
    white-space:normal !important;
  }

  .hero-body:has(.indexx-home){
    font-size:14px;
    line-height:1.7;
    max-width:100%;
    margin-bottom:24px;
  }

  .hero-quote{
    max-width:100%;
    margin-bottom:28px;
    padding-left:18px;
  }

  .hero-quote p{
    font-size:12px;
    line-height:1.7;
  }

  .hero-ctas{
    width:100%;
    gap:12px;
  }

  .hero-ctas a{
    flex:1;
    text-align:center;
  }
}

/* Small Phones */
@media screen and (max-width: 480px) {

  .hero-left{
    padding-top:105px;
  }

  .hero-headline{
    font-size:26px;
    line-height:1.05;
  }

  .hero-body:has(.indexx-home){
    font-size:13px;
  }

  .hero-label{
    font-size:13px;
  }

  .hero-ctas{
    flex-direction:column;
  }

  .hero-ctas a{
    width:100%;
  }
}


















/* BUTTONS */
.btn-primary { font-family:var(--font-body); font-size:11px; font-weight:400; letter-spacing:0.2em; text-transform:uppercase; color:var(--text); text-decoration:none; padding:16px 32px; background:var(--red); border:1px solid var(--red); position:relative; overflow:hidden; transition:all 0.35s cubic-bezier(0.23,1,0.32,1); display:inline-block; cursor:none; }
.btn-primary::before { content:''; position:absolute; inset:0; background:#fff; transform:translateX(-101%); transition:transform 0.4s cubic-bezier(0.23,1,0.32,1); }
.btn-primary:hover::before { transform:translateX(0); }
.btn-primary:hover { color:#050505; }
.btn-primary span { position:relative; z-index:1; }
.btn-ghost { font-family:var(--font-body); font-size:11px; font-weight:400; letter-spacing:0.2em; text-transform:uppercase; color:var(--text); text-decoration:none; padding:16px 32px; border:1px solid var(--border); position:relative; overflow:hidden; transition:all 0.35s cubic-bezier(0.23,1,0.32,1); display:inline-block; cursor:none; }
.btn-ghost::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,0.05); transform:translateX(-101%); transition:transform 0.4s cubic-bezier(0.23,1,0.32,1); }
.btn-ghost:hover::before { transform:translateX(0); }
.btn-ghost:hover { border-color:rgba(255,255,255,0.35); }
.btn-ghost span { position:relative; z-index:1; }

/* HERO RIGHT */
.hero-right { position:relative; z-index:2; height:76svh; display:flex; align-items:center; justify-content:flex-end; padding-top:0; }
.hero-visual { position:relative; width:100%; height:64svh; overflow:hidden; }
.hero-visual-inner { width:100%; height:100%; background: linear-gradient(180deg, rgba(5,5,5,0.3) 0%, transparent 30%, transparent 70%, rgba(5,5,5,0.8) 100%), linear-gradient(90deg, rgba(5,5,5,0.6) 0%, transparent 40%), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600"><defs><radialGradient id="a" cx="50%25" cy="40%25" r="60%25"><stop offset="0%25" stop-color="%23222"/><stop offset="100%25" stop-color="%23000"/></radialGradient><radialGradient id="b" cx="40%25" cy="60%25" r="40%25"><stop offset="0%25" stop-color="%23D6001C" stop-opacity=".35"/><stop offset="100%25" stop-color="transparent"/></radialGradient></defs><rect width="800" height="600" fill="url(%23a)"/><rect width="800" height="600" fill="url(%23b)"/><g opacity=".12"><rect x="200" y="250" width="2" height="200" fill="%23fff"/><rect x="320" y="180" width="1" height="280" fill="%23fff"/><rect x="450" y="220" width="2" height="240" fill="%23fff"/><rect x="560" y="200" width="1" height="260" fill="%23fff"/></g></svg>') center/cover; filter:grayscale(0.3) contrast(1.1); transform-origin:center; transition:transform 0.8s cubic-bezier(0.23,1,0.32,1); }
.hero-visual:hover .hero-visual-inner { transform:scale(1.04); }
.hero-visual-overlay { position:absolute; inset:0; background:radial-gradient(ellipse 50% 40% at 60% 40%, rgba(214,0,28,0.22) 0%, transparent 60%), radial-gradient(ellipse 30% 50% at 20% 70%, rgba(214,0,28,0.08) 0%, transparent 50%); pointer-events:none; }
.hero-visual-grain { position:absolute; inset:0; opacity:0.08; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23noise)'/%3E%3C/svg%3E"); pointer-events:none; }
.hero-visual-tag { position:absolute; bottom:28px; right:24px; font-family:var(--font-body); font-size:10px; font-weight:400; letter-spacing:0.3em; text-transform:uppercase; color:rgba(245,245,245,0.35); }
.hero-scroll-indicator { position:absolute; bottom:40px; left:0; display:flex; align-items:center; gap:14px; z-index:2; }
.hero-scroll-line { width:1px; height:60px; background:linear-gradient(180deg, var(--red), transparent); animation:scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100%{opacity:0.5} 50%{opacity:1} }
.hero-scroll-text { font-family:var(--font-body); font-size:9px; font-weight:400; letter-spacing:0.35em; text-transform:uppercase; color:var(--muted); writing-mode:vertical-rl; }

/* MARQUEE */
.marquee-section { padding:28px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; background:var(--bg2); }
.marquee-track { display:flex; gap:0; animation:marqueeScroll 25s linear infinite; width:max-content; }
.marquee-track.reverse { animation-direction:reverse; }
@keyframes marqueeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-item { font-family:var(--font-body); font-size:12px; font-weight:400; letter-spacing:0.35em; text-transform:uppercase; color:var(--muted); padding:0 40px; display:flex; align-items:center; gap:40px; white-space:nowrap; }
.marquee-item::after { content:'◆'; color:var(--red); font-size:8px; }

/* SECTION LABEL */
.section-label { font-family:var(--font-body); font-size:11px; font-weight:400; letter-spacing:0.35em; text-transform:uppercase; color:var(--red); margin-bottom:24px; display:flex; align-items:center; gap:16px; }
.section-label::before { content:''; display:block; width:24px; height:1px; background:var(--red); }

/* ABOUT */
#about { padding:160px 80px 160px 140px; display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; overflow:hidden; position:relative; }
.about-visual { position:relative; height:580px; background:var(--card); border:1px solid var(--border); overflow:hidden; }
.about-visual-bg { position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 30% 40%, rgba(214,0,28,0.08) 0%, transparent 60%); }
.about-visual-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(5,5,5,0.95), rgba(5,5,5,0.25)); pointer-events:none; z-index:1; }
.about-static-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(100%) brightness(0.55) contrast(1.1); transform:scale(1.02); transition:transform .7s cubic-bezier(0.23,1,0.32,1), filter .4s ease; }
.about-visual:hover .about-static-img { transform:scale(1.06); filter:grayscale(0) brightness(.82) contrast(1.08); }
.about-visual-lines { position:absolute; inset:0; background:repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(255,255,255,0.018) 60px, rgba(255,255,255,0.018) 61px), repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(255,255,255,0.018) 60px, rgba(255,255,255,0.018) 61px); }
.about-visual-lines { z-index:2; }
.about-glow { z-index:3; }
.about-visual-number { position:absolute; bottom:-20px; right:-10px; font-family:var(--font-display); font-size:180px; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,0.04); line-height:1; pointer-events:none; z-index:4; }
.about-visual-tag { position:absolute; top:32px; left:32px; font-family:var(--font-body); font-size:10px; font-weight:400; letter-spacing:0.3em; text-transform:uppercase; color:var(--muted); border:1px solid var(--border); padding:8px 14px; z-index:4; }
.about-glow { position:absolute; top:50%; left:50%; width:300px; height:300px; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(214,0,28,0.15) 0%, transparent 70%); border-radius:50%; animation:glowPulse 4s ease-in-out infinite; }
@keyframes glowPulse { 0%,100%{transform:translate(-50%,-50%) scale(1); opacity:0.8} 50%{transform:translate(-50%,-50%) scale(1.15); opacity:1} }
.about-text { position:relative; z-index:1; }
.about-heading { font-family:var(--font-display); font-size:clamp(26px, 6vw, 60px); line-height:0.92; letter-spacing:0.01em; margin-bottom:40px; overflow:hidden; }
.about-body:has(.indexx-home) p { font-family:var(--font-text); font-size:15px; line-height:1.9; color:var(--muted); margin-bottom:20px; }
.about-body:has(.indexx-home) p:last-child { color:rgba(245,245,245,0.65); }
.about-highlight { margin-top:36px; padding:24px 28px; border:1px solid var(--border); background:var(--card); position:relative; }
.about-highlight::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--red); }
.about-highlight p { font-family:var(--font-body); font-size:13px; font-weight:500; letter-spacing:0.05em; line-height:1.8; color:rgba(245,245,245,0.7) !important; margin-bottom:0 !important; }

/* SERVICES */
#services { padding:140px 80px 140px 140px; background:var(--bg2); overflow:hidden; }
.services-header { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; margin-bottom:90px; }
.services-heading { font-family:var(--font-display); font-size:clamp(42px, 5vw, 60px); line-height:0.9; letter-spacing:0.01em; }
.services-intro { font-family:var(--font-text); font-size:14px; line-height:1.9; color:var(--muted); max-width:340px; align-self:flex-end; }
.cards-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); }
.service-card { background:var(--bg); padding:52px 36px; position:relative; overflow:hidden; transition:all 0.5s cubic-bezier(0.23,1,0.32,1); cursor:none; }
.service-card::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 80% at 50% 100%, rgba(214,0,28,0.1) 0%, transparent 70%); opacity:0; transition:opacity 0.4s; }
.service-card:hover::before { opacity:1; }
.service-card:hover { transform:translateY(-6px); background:#0d0d0d; }
.service-card-number { font-family:var(--font-display); font-size:11px; letter-spacing:0.3em; color:var(--red); margin-bottom:40px; display:block; }
.service-card-icon { width:48px; height:48px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; margin-bottom:32px; transition:border-color 0.3s, background 0.3s; }
.service-card:hover .service-card-icon { border-color:var(--red); background:rgba(214,0,28,0.08); }
.service-card-icon svg { width:20px; height:20px; stroke:var(--muted); fill:none; transition:stroke 0.3s; }
.service-card:hover .service-card-icon svg { stroke:var(--red); }
.service-card-title { font-family:var(--font-display); font-size:28px; letter-spacing:0.05em; margin-bottom:20px; transition:color 0.3s; }
.service-card:hover .service-card-title { color:var(--red); }
.service-card-text { font-family:var(--font-text); font-size:13px; line-height:1.9; color:var(--muted); }
.service-card-line { position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--red); transition:width 0.5s cubic-bezier(0.23,1,0.32,1); }
.service-card:hover .service-card-line { width:100%; }

/* IPs */
#ips { padding:140px 80px 140px 140px; overflow:hidden; }
.ips-header { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; margin-bottom:90px; }
.ips-heading { font-family:var(--font-display); font-size:clamp(42px, 5vw, 60px); line-height:0.9; letter-spacing:0.01em; }
.ips-intro { font-family:var(--font-text); font-size:14px; line-height:1.9; color:var(--muted); max-width:340px; align-self:flex-end; }



.ips-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; }
.ip-card { position:relative; height:560px; overflow:hidden; cursor:none; color:inherit; text-decoration:none; display:block; }
.ip-card-bg { position:absolute; inset:0; transition:transform 0.8s cubic-bezier(0.23,1,0.32,1); }
.ip-card:hover .ip-card-bg { transform:scale(1.06); }
.ip-card-bg-axis { background:radial-gradient(ellipse 60% 80% at 50% 30%, rgba(60,60,60,0.8) 0%, transparent 70%), radial-gradient(ellipse 80% 60% at 20% 80%, rgba(214,0,28,0.18) 0%, transparent 60%), linear-gradient(160deg, #1a1a1a 0%, #050505 100%); }
.ip-card-bg-bloom { background:radial-gradient(ellipse 70% 60% at 60% 40%, rgba(40,40,50,0.9) 0%, transparent 60%), radial-gradient(ellipse 50% 70% at 30% 70%, rgba(214,0,28,0.12) 0%, transparent 50%), linear-gradient(200deg, #111118 0%, #050505 100%); }
.ip-card-bg-pyramid { background:radial-gradient(ellipse 80% 50% at 50% 60%, rgba(50,30,20,0.9) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 70% 20%, rgba(214,0,28,0.2) 0%, transparent 50%), linear-gradient(180deg, #100808 0%, #050505 100%); }
.ip-card-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(100%) brightness(0.55) contrast(1.1); transition:transform 0.8s cubic-bezier(0.23,1,0.32,1), filter 0.45s ease; }
.ip-card:hover .ip-card-img { transform:scale(1.04); filter:grayscale(0) brightness(.86) contrast(1.08); }
.ip-card-geo { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0.08; transition:opacity 0.5s; }
.ip-card:hover .ip-card-geo { opacity:0.16; }
.ip-card-geo svg { width:70%; height:70%; }
.ip-card-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(5,5,5,0.95), rgba(5,5,5,0.25)); transition:background 0.5s; }
.ip-card:hover .ip-card-overlay { background:linear-gradient(to top, rgba(5,5,5,0.96), rgba(5,5,5,0.34)); }
.ip-card-content { position:absolute; bottom:0; left:0; right:0; padding:40px 36px; }
.ip-card-subtitle { font-family:var(--font-body); font-size:10px; font-weight:400; letter-spacing:0.3em; text-transform:uppercase; color:var(--red); margin-bottom:14px; display:block; }
.ip-card-title { font-family:var(--font-display); font-size:52px; letter-spacing:0.04em; line-height:1; margin-bottom:20px; }
.ip-card-text { font-family:var(--font-text); font-size:13px; line-height:1.8; color:rgba(245,245,245,0.55); transform:translateY(10px); opacity:0; transition:all 0.5s cubic-bezier(0.23,1,0.32,1); max-height:0; overflow:hidden; }
.ip-card:hover .ip-card-text { opacity:1; transform:translateY(0); max-height:200px; }
.ip-card-arrow { position:absolute; top:36px; right:36px; width:40px; height:40px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(-10px); transition:all 0.4s cubic-bezier(0.23,1,0.32,1); }
.ip-card:hover .ip-card-arrow { opacity:1; transform:translateY(0); border-color:var(--red); }
.ip-card-arrow svg { width:14px; height:14px; stroke:var(--red); fill:none; }
.ip-card-border { position:absolute; inset:0; border:1px solid transparent; transition:border-color 0.4s; pointer-events:none; }
.ip-card:hover .ip-card-border { border-color:rgba(214,0,28,0.25); }

/* BRAND */
#brand { padding:160px 80px 160px 140px; background:var(--bg2); overflow:hidden; position:relative; }
.brand-bg { position:absolute; inset:0; background:radial-gradient(ellipse 70% 60% at 80% 50%, rgba(214,0,28,0.06) 0%, transparent 60%), radial-gradient(ellipse 40% 50% at 10% 80%, rgba(214,0,28,0.04) 0%, transparent 50%); }
.brand-lines { position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent, transparent 120px, rgba(255,255,255,0.012) 120px, rgba(255,255,255,0.012) 121px); }
.brand-inner { position:relative; z-index:1; max-width:900px; }
.brand-heading { font-family:var(--font-display); font-size:clamp(38px, 5vw, 60px); line-height:0.9; letter-spacing:0.01em; margin-bottom:60px; }
.brand-body:has(.indexx-home) { display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-bottom:70px; }
.brand-body:has(.indexx-home) p { font-family:var(--font-text); font-size:15px; line-height:1.9; color:var(--muted); }
.brand-stats { display:flex; gap:80px; margin-top:60px; padding-top:60px; border-top:1px solid var(--border); }
.brand-stat-num { font-family:var(--font-display); font-size:60px; line-height:1; color:var(--text); margin-bottom:8px; }
.brand-stat-num span { color:var(--red); }
.brand-stat-label { font-family:var(--font-body); font-size:11px; font-weight:400; letter-spacing:0.25em; text-transform:uppercase; color:var(--muted); }
.brand-visual { position:absolute; right:80px; top:50%; transform:translateY(-50%); width:340px; height:340px; overflow:hidden; border:1px solid rgba(255,255,255,0.08); }
.brand-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(5,5,5,0.95), rgba(5,5,5,0.25)); pointer-events:none; z-index:1; }
.brand-visual-ring { position:absolute; z-index:2; border-radius:50%; border:1px solid rgba(214,0,28,0.12); top:50%; left:50%; transform:translate(-50%,-50%); animation:ringRotate 20s linear infinite; }
.brand-visual-ring:nth-child(1) { width:100%; height:100%; animation-duration:20s; }
.brand-visual-ring:nth-child(2) { width:75%; height:75%; animation-duration:15s; animation-direction:reverse; border-color:rgba(214,0,28,0.2); }
.brand-visual-ring:nth-child(3) { width:50%; height:50%; animation-duration:10s; border-color:rgba(214,0,28,0.35); }
@keyframes ringRotate { from{transform:translate(-50%,-50%) rotate(0deg)} to{transform:translate(-50%,-50%) rotate(360deg)} }
.brand-visual-center { position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; background:var(--red); clip-path:polygon(50% 0%, 100% 100%, 0% 100%); animation:glowPulse 3s ease-in-out infinite; }

/* EVENTS */
#events { padding:140px 0 140px 140px; overflow:hidden; }
.events-header { padding-right:80px; margin-bottom:70px; }
.events-heading { font-family:var(--font-display); font-size:clamp(42px, 5vw, 60px); line-height:0.9; letter-spacing:0.01em; }
.events-scroll-container { display:flex; gap:24px; overflow-x:auto; padding-right:80px; padding-bottom:24px; scrollbar-width:none; }
.events-scroll-container::-webkit-scrollbar { display:none; }
/* Home page event cards inside horizontal scroll — scoped to avoid conflicts with events.css */
.events-scroll-container .event-card { flex:0 0 320px; }
.event-bg-1 { background:radial-gradient(ellipse at 50% 30%, #2a1a1a 0%, #050505 100%); }
.event-bg-2 { background:radial-gradient(ellipse at 50% 40%, #1a1a2a 0%, #050505 100%); }
.event-bg-3 { background:radial-gradient(ellipse at 40% 50%, #1a2a1a 0%, #050505 100%); }
.event-bg-4 { background:radial-gradient(ellipse at 60% 30%, #2a1a2a 0%, #050505 100%); }
.event-bg-5 { background:radial-gradient(ellipse at 30% 40%, #2a2a1a 0%, #050505 100%); }

/* MERCH */
#merch { padding:140px 80px 140px 140px; background:var(--bg2); overflow:hidden; }
.merch-heading { font-family:var(--font-display); font-size:clamp(42px, 5vw, 60px); line-height:0.9; letter-spacing:0.01em; margin-bottom:90px; }
.merch-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:20px; }
.merch-card { position:relative; overflow:hidden; cursor:none; border:1px solid var(--border); transition:border-color 0.4s; }
.merch-card:first-child { grid-column:span 2; grid-row:span 2; }
.merch-card:hover { border-color:rgba(214,0,28,0.25); }
.merch-visual { aspect-ratio:1; background:var(--card); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; transition:all 0.5s cubic-bezier(0.23,1,0.32,1); }
.merch-visual-inner { position:absolute; inset:0; transition:transform 0.6s cubic-bezier(0.23,1,0.32,1); }
.merch-card:hover .merch-visual-inner { transform:scale(1.05); }
.merch-visual-1 { background:radial-gradient(ellipse 70% 60% at 40% 40%, #1a1a1a 0%, #050505 100%); }
.merch-visual-2 { background:radial-gradient(ellipse 70% 60% at 60% 40%, #1a1510 0%, #050505 100%); }
.merch-visual-3 { background:radial-gradient(ellipse 70% 60% at 40% 60%, #101520 0%, #050505 100%); }
.merch-visual-4 { background:radial-gradient(ellipse 70% 60% at 50% 30%, #150f10 0%, #050505 100%); }
.merch-visual-5 { background:radial-gradient(ellipse 70% 60% at 60% 60%, #0d1410 0%, #050505 100%); }
.merch-product-art { position:relative; z-index:2; width:60%; height:60%; display:flex; align-items:center; justify-content:center; }
.merch-product-art svg { width:100%; height:100%; }
.merch-overlay { position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(5,5,5,0.7) 100%); z-index:1; }
.merch-badge { position:absolute; top:16px; right:16px; z-index:3; font-family:var(--font-body); font-size:9px; font-weight:400; letter-spacing:0.25em; text-transform:uppercase; color:var(--text); background:var(--red); padding:6px 12px; }
.merch-info { padding:20px 24px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--border); }
.merch-name { font-family:var(--font-body); font-size:14px; font-weight:400; letter-spacing:0.05em; color:var(--text); margin-bottom:4px; }
.merch-type { font-family:var(--font-text); font-size:11px; color:var(--muted); }
.merch-price { font-family:var(--font-display); font-size:22px; color:var(--text); letter-spacing:0.05em; }

/* CONTACT */
#contact { padding:160px 80px 160px 140px; display:grid; grid-template-columns:1fr 1fr; gap:100px; position:relative; overflow:hidden; }
.contact-heading { font-family:var(--font-display); font-size:clamp(42px, 5vw, 60px); line-height:0.9; letter-spacing:0.01em; margin-bottom:48px; }
.contact-body:has(.indexx-home) { font-family:var(--font-text); font-size:15px; line-height:1.9; color:var(--muted); margin-bottom:52px; }
.contact-info { display:flex; flex-direction:column; gap:24px; }
.contact-info-item { display:flex; align-items:center; gap:20px; }
.contact-info-icon { width:44px; height:44px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-icon svg { width:16px; height:16px; stroke:var(--red); fill:none; }
.contact-info-text { font-family:var(--font-text); font-size:14px; color:var(--muted); }
.contact-info-text a { color:var(--muted); text-decoration:none; transition:color 0.3s; }
.contact-info-text a:hover { color:var(--red); }
.contact-info-text strong { display:block; font-weight:500; color:var(--text); font-size:12px; font-family:var(--font-body); letter-spacing:0.15em; text-transform:uppercase; margin-bottom:2px; }

/* FORM */
.contact-form { display:flex; flex-direction:column; gap:0; }
.form-field { position:relative; border:1px solid var(--border); border-bottom:none; transition:border-color 0.3s, background 0.3s; background:transparent; }
.form-field:last-of-type { border-bottom:1px solid var(--border); }
.form-field::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--red); transition:width 0.4s cubic-bezier(0.23,1,0.32,1); }
.form-field:focus-within { background:rgba(255,255,255,0.015); border-color:rgba(214,0,28,0.3); }
.form-field:focus-within::after { width:100%; }
.form-label { position:absolute; top:18px; left:22px; font-family:var(--font-body); font-size:11px; font-weight:400; letter-spacing:0.25em; text-transform:uppercase; color:var(--muted); transition:all 0.3s cubic-bezier(0.23,1,0.32,1); pointer-events:none; }
.form-field.active .form-label, .form-field:focus-within .form-label { top:10px; font-size:9px; color:var(--red); }
.form-input { width:100%; background:transparent; border:none; outline:none; font-family:var(--font-text); font-size:14px; color:var(--text); padding:30px 22px 14px; }
.form-input::placeholder { color:transparent; }
textarea.form-input { resize:none; height:120px; }
.form-select { width:100%; background:transparent; border:none; outline:none; font-family:var(--font-text); font-size:14px; color:var(--text); padding:30px 22px 14px; appearance:none; cursor:none; }
.form-select option { background:#111; color:var(--text); }
.form-submit { margin-top:28px; font-family:var(--font-body); font-size:12px; font-weight:400; letter-spacing:0.25em; text-transform:uppercase; color:var(--text); background:var(--red); border:none; padding:22px 48px; cursor:none; position:relative; overflow:hidden; transition:all 0.4s cubic-bezier(0.23,1,0.32,1); display:flex; align-items:center; gap:14px; align-self:flex-start; }
.form-submit::before { content:''; position:absolute; inset:0; background:#fff; transform:translateX(-101%); transition:transform 0.4s cubic-bezier(0.23,1,0.32,1); }
.form-submit:hover::before { transform:translateX(0); }
.form-submit:hover { color:#050505; }
.form-submit span { position:relative; z-index:1; }
.form-submit svg { position:relative; z-index:1; width:16px; height:16px; stroke:currentColor; fill:none; transition:transform 0.3s; }
.form-submit:hover svg { transform:translateX(5px); }

/* FOOTER */
footer { background:var(--bg); border-top:1px solid var(--border); position:relative; overflow:hidden; padding-top:0; }
.footer-watermark { font-family:var(--font-display); font-size:clamp(100px, 16vw, 280px); letter-spacing:-0.02em; line-height:0.85; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,0.04); text-align:center; padding:60px 0 0; pointer-events:none; user-select:none; overflow:hidden; position:relative; }
.footer-watermark::after { content:''; position:absolute; bottom:0; left:0; right:0; height:50%; background:linear-gradient(transparent, var(--bg)); }
.footer-main { padding:70px 80px 70px 140px; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:60px; border-top:1px solid var(--border); }
.footer-brand-name { font-family:var(--font-display); font-size:36px; letter-spacing:0.06em; margin-bottom:20px; color:var(--text); }
.footer-brand-name span { color:var(--red); }
.footer-tagline { font-family:var(--font-text); font-size:13px; line-height:1.8; color:var(--muted); max-width:280px; margin-bottom:32px; }
.footer-newsletter { display:flex; gap:0; }
.footer-newsletter input { flex:1; background:var(--card); border:1px solid var(--border); border-right:none; outline:none; padding:14px 18px; font-family:var(--font-text); font-size:13px; color:var(--text); }
.footer-newsletter input::placeholder { color:var(--muted); }
.footer-newsletter button { background:var(--red); border:none; padding:14px 20px; cursor:none; transition:background 0.3s; flex-shrink:0; }
.footer-newsletter button:hover { background:#b8001a; }
.footer-newsletter button svg { width:16px; height:16px; stroke:white; fill:none; display:block; }
.footer-col-title { font-family:var(--font-body); font-size:11px; font-weight:400; letter-spacing:0.3em; text-transform:uppercase; color:var(--text); margin-bottom:28px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.footer-links { display:flex; flex-direction:column; gap:14px; list-style:none; }
.footer-links a { font-family:var(--font-text); font-size:13px; color:var(--muted); text-decoration:none; transition:color 0.3s; position:relative; display:inline-block; }
.footer-links a:hover { color:var(--text); }
.footer-links a::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px; background:var(--red); transition:width 0.3s; }
.footer-links a:hover::after { width:100%; }
.footer-contact-item { display:flex; gap:12px; margin-bottom:18px; align-items:flex-start; }
.footer-contact-item svg { width:14px; height:14px; stroke:var(--red); fill:none; margin-top:2px; flex-shrink:0; }
.footer-contact-item p { font-family:var(--font-text); font-size:13px; color:var(--muted); line-height:1.6; }
.footer-contact-item a { color:var(--muted); text-decoration:none; }
.footer-contact-item a:hover { color:var(--red); }
.footer-bottom { padding:28px 80px; border-top:1px solid var(--border); display:flex; justify-content:center; align-items:center; }
.footer-bottom-center { font-family:var(--font-text); font-size:12px; color:rgba(140,140,140,0.6); letter-spacing:0.05em; text-align:center; }
.footer-socials { display:flex; gap:20px; }
.footer-socials a { display:flex; }
.footer-socials svg { width:16px; height:16px; fill:var(--muted); transition:fill 0.3s; }
.footer-socials a:hover svg { fill:var(--red); }
.footer-bottom-right { font-family:var(--font-body); font-size:11px; font-weight:400; letter-spacing:0.2em; text-transform:uppercase; color:rgba(140,140,140,0.4); }

/* LOADER */
#loader { position:fixed; inset:0; background:var(--bg); z-index:99999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; }
.loader-text { font-family:var(--font-display); font-size:clamp(36px, 5vw, 60px); letter-spacing:0.12em; color:var(--text); overflow:hidden; }
.loader-text span { display:inline-block; }
.loader-bar { width:240px; height:1px; background:rgba(255,255,255,0.08); position:relative; overflow:hidden; }
.loader-bar::after { content:''; position:absolute; left:-100%; top:0; width:100%; height:100%; background:linear-gradient(90deg, transparent, var(--red), transparent); animation:loaderAnim 1.8s cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes loaderAnim { 0%{left:-100%} 100%{left:100%} }
.loader-count { font-family:var(--font-body); font-size:11px; font-weight:400; letter-spacing:0.35em; text-transform:uppercase; color:var(--muted); }

/* SECTION DIVIDER */
.section-divider { width:100%; height:1px; background:var(--border); position:relative; overflow:hidden; }
.section-divider::after { content:''; position:absolute; left:0; top:0; width:0; height:100%; background:var(--red); }

/* ===== REVEAL ANIMATIONS ===== */
/* Hidden by default — transition added via .will-animate so it only fires AFTER JS runs */
.reveal,
.reveal-left,
.reveal-right {
  opacity: 1;
  transform: none;
}

/* JS adds .will-animate BEFORE observing, then .visible triggers the animation */
.reveal.will-animate {
  opacity: 0;
  transform: translateY(52px);
}
.reveal-left.will-animate {
  opacity: 0;
  transform: translateX(-60px);
}
.reveal-right.will-animate {
  opacity: 0;
  transform: translateX(60px);
}

/* Transition only present when animating — prevents jank */
.will-animate {
  transition: opacity 0.85s cubic-bezier(0.23,1,0.32,1),
              transform 0.85s cubic-bezier(0.23,1,0.32,1);
}

/* Visible = fully shown */
.will-animate.visible {
  opacity: 1 !important;
  transform: none !important;
}

/* STAGGER DELAYS */
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }
.reveal-delay-4 { transition-delay: 0.48s; }

/* ===== SVG SCAN LINE EFFECT ===== */
.scan-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:0.04; }

/* ===== FLOATING 3D OBJECT BADGES ===== */


/* ===== GLITCH EFFECT ON HERO TITLE ===== */
@keyframes glitch1 {
  0%, 95%, 100% { clip-path: none; transform: none; }
  96% { clip-path: polygon(0 20%, 100% 20%, 100% 30%, 0 30%); transform: translateX(-4px); }
  97% { clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%); transform: translateX(4px); }
  98% { clip-path: polygon(0 80%, 100% 80%, 100% 90%, 0 90%); transform: translateX(-2px); }
}

/* ===== RESPONSIVE ===== */
@media (max-width:1200px) {
  #hero { padding:0 48px 0 100px; gap:40px; }
  #about, #services, #ips, #brand, #merch, #contact { padding-left:80px; }
  .cards-grid { grid-template-columns:repeat(2,1fr); }
  .ips-grid { grid-template-columns:1fr 1fr; }
  .ips-grid .ip-card:last-child { grid-column:span 2; height:360px; }
  .footer-main { grid-template-columns:1fr 1fr; padding-left:80px; }
  .footer-bottom { padding-left:80px; }
  .social-dock { left:20px; }
  body:has(.indexx-home) nav { padding:0 40px; }
}
@media (max-width:900px) {
  .nav-links, .nav-cta { display:none; }
  .hamburger { display:flex; }
  body:has(.indexx-home) nav { padding:0 28px; height:72px; }
  body:has(.indexx-home) nav.scrolled { height:64px; }
  #hero { grid-template-columns:1fr; padding:100px 28px 60px; min-height:auto; }
  .hero-right { display:none; }
  .hero-left { padding-top:0; text-align:center; }
  .hero-label { justify-content:center; }
  .hero-label::before { display:none; }
  .hero-body:has(.indexx-home) { margin-left:auto; margin-right:auto; }
  .hero-quote { border-left:none; border-top:1px solid var(--red); padding-left:0; padding-top:18px; text-align:center; margin-left:auto; margin-right:auto; }
  .hero-ctas { justify-content:center; }
  .hero-scroll-indicator { left:50%; transform:translateX(-50%); }

  #about { grid-template-columns:1fr; padding:100px 28px; gap:60px; }
  .about-visual { height:320px; }
  .about-text { text-align:center; }
  .section-label { justify-content:center; }
  .section-label::before { display:none; }
  .about-highlight { text-align:center; }
  .about-highlight::before { display:none; }
  .about-highlight { border-left:none; border-top:2px solid var(--red); padding-left:28px; }

  #services { padding:100px 28px; text-align:center; }
  .services-header { grid-template-columns:1fr; gap:24px; margin-bottom:60px; text-align:center; }
  .services-intro { max-width:100%; }
  .cards-grid { grid-template-columns:1fr; }
  .service-card { text-align:center; }
  .service-card-icon { margin-left:auto; margin-right:auto; }
  .service-card-number { text-align:center; }
  
  
  
  
  
  

#ips { padding:100px 28px; text-align:center; }

.ips-header {
  grid-template-columns:1fr;
  gap:24px;
  margin-bottom:60px;
  text-align:center;
}

.ips-intro {
  max-width:100%;
}

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

.ips-grid .ip-card:last-child {
  grid-column:auto;
  height:480px;
}

.ip-card-content { text-align:left; }



  
  
  
  

  #brand { padding:100px 28px; text-align:center; }
  .brand-inner { max-width:100%; }
  .brand-body:has(.indexx-home) { grid-template-columns:1fr; gap:28px; }
  .brand-stats { flex-wrap:wrap; gap:40px; justify-content:center; }
  .brand-visual { display:none; }

  #events { padding:100px 0 100px 28px; }
  .events-header { padding-right:28px; text-align:center; }

  #merch { padding:100px 28px; text-align:center; }
  .merch-heading { text-align:center; }
  .merch-grid { grid-template-columns:1fr 1fr; }
  .merch-card:first-child { grid-column:span 2; grid-row:auto; }
  .merch-info { text-align:left; }

  #contact { grid-template-columns:1fr; padding:100px 28px; gap:60px; }
  .contact-left { text-align:center; }
  .contact-heading { text-align:center; }
  .contact-body:has(.indexx-home) { text-align:center; }
  .contact-info { align-items:center; }
  .contact-info-item { flex-direction:column; align-items:center; text-align:center; gap:10px; }
  .contact-info-text { text-align:center; }

  .footer-main { grid-template-columns:1fr 1fr; padding:60px 28px; gap:40px; }
  .footer-bottom { padding:24px 28px; flex-direction:column; align-items:center; text-align:center; }
  .footer-bottom-left { text-align:center; }
  .footer-watermark { font-size:clamp(72px, 20vw, 160px); }
  .social-dock { display:none; }
  .social-dock-mobile { display:flex; }
}

@media (max-width:600px) {
  .merch-grid { grid-template-columns:1fr; }
  .merch-card:first-child { grid-column:auto; }
  .footer-main { grid-template-columns:1fr; text-align:center; }
  .footer-brand-name { text-align:center; }
  .footer-tagline { text-align:center; margin-left:auto; margin-right:auto; }
  .footer-newsletter { max-width:320px; margin:0 auto; }
  .footer-links { align-items:center; }
  .footer-col-title { text-align:center; }
  .footer-contact-item { justify-content:center; }
  .brand-stats { flex-direction:column; gap:32px; align-items:center; text-align:center; }
  .hero-ctas { flex-direction:column; align-items:center; }
  .hero-ctas .btn-primary, .hero-ctas .btn-ghost { width:100%; text-align:center; justify-content:center; }
  .ips-grid .ip-card:last-child { height:480px; }
  .form-submit { align-self:center; width:100%; justify-content:center; }
}







/* ==================================================
   GLOBAL TYPOGRAPHY OVERRIDE
   HERO MOBILE SCALE APPLIED SITE-WIDE
================================================== */

/* ------------------------------
   MAIN HEADLINES
------------------------------ */

.hero-headline,
.about-heading,
.services-heading,
.ips-heading,
.brand-heading,
.events-heading,
.merch-heading,
.contact-heading{

    font-size:26px !important;
    line-height:1.05 !important;
    letter-spacing:0.02em !important;

}

/* ------------------------------
   H2 / CARD TITLES
------------------------------ */

.service-card-title,
.ip-card-title,
.event-card-name,
.footer-brand-name{

    font-size:25px !important;
    line-height:1.05 !important;
    letter-spacing:0.02em !important;

}

/* ------------------------------
   LABELS
------------------------------ */

.hero-label,
.section-label,
.service-card-number,
.ip-card-subtitle,
.event-card-type,
.event-card-date,
.brand-stat-label,
.footer-col-title,
.form-label{

    font-size:13px !important;
    letter-spacing:0.15em !important;
    line-height:1.4 !important;

}

/* ------------------------------
   PARAGRAPHS
------------------------------ */

.hero-body:has(.indexx-home),
.about-body:has(.indexx-home) p,
.brand-body:has(.indexx-home) p,
.contact-body:has(.indexx-home),
.services-intro,
.service-card-text,
.ip-card-text,
.event-card-venue,
.footer-tagline,
.contact-info-text{

    font-size:15px !important;
    line-height:1.65 !important;
    letter-spacing:0 !important;

}

/* ------------------------------
   FORM FIELDS
------------------------------ */

.form-input,
.form-select{

    font-size:15px !important;
    line-height:1.5 !important;

}

/* ------------------------------
   BUTTONS
------------------------------ */

.btn-primary,
.btn-ghost,
.nav-cta,
.event-card-cta,
.form-submit{

    font-size:11px !important;
    letter-spacing:0.18em !important;

}

/* ------------------------------
   DESKTOP SCALING
------------------------------ */

@media (min-width:769px){

    .hero-headline,
    .about-heading,
    .services-heading,
    .ips-heading,
    .brand-heading,
    .events-heading,
    .merch-heading,
    .contact-heading{

        font-size:clamp(26px,3vw,48px) !important;

    }

    .service-card-title,
    .ip-card-title,
    .event-card-name{

        font-size:clamp(24px,2vw,36px) !important;

    }

    .hero-body:has(.indexx-home),
    .about-body:has(.indexx-home) p,
    .brand-body:has(.indexx-home) p,
    .contact-body:has(.indexx-home),
    .services-intro,
    .service-card-text,
    .ip-card-text,
    .event-card-venue,
    .footer-tagline{

        font-size:15px !important;
        line-height:1.65 !important;

    }

}

/* ------------------------------
   LARGE DESKTOP
------------------------------ */

@media (min-width:1400px){

    .hero-headline,
    .about-heading,
    .services-heading,
    .ips-heading,
    .brand-heading,
    .events-heading,
    .merch-heading,
    .contact-heading{

        font-size:54px !important;

    }

}






/* ==========================================
   GLOBAL MOBILE + TABLET SIDE PADDING
========================================== */

@media (max-width: 1024px){

    body:has(.indexx-home) nav,
    #hero,
    #about,
    #services,
    #ips,
    #brand,
    #merch,
    #contact,
    .events-header,
    .footer-main,
    .footer-bottom{

        padding-left:30px !important;
        padding-right:30px !important;

    }

}


/* ==========================================
   GLOBAL PARAGRAPH SPACING
========================================== */

.hero-body:has(.indexx-home),
.about-body:has(.indexx-home) p,
.brand-body:has(.indexx-home) p,
.contact-body:has(.indexx-home),
.services-intro,
.service-card-text,
.ip-card-text,
.event-card-venue,
.footer-tagline,
.contact-info-text,
.hero-quote p{

    line-height:1.55 !important;

}


/* ==========================================
  Read More PARAGRAPH 
========================================== */
/* DESKTOP */

.mobile-read-more{
    max-height:none;
    overflow:visible;
}

.mobile-read-btn{
    display:none;
}

/* TABLET + MOBILE */

@media (max-width:1024px){

    .mobile-read-more{
        max-height:0;
        overflow:hidden;
        opacity:0;
        transition:all .45s ease;
    }

    .mobile-read-more.active{
        max-height:500px;
        opacity:1;
    }

    .mobile-read-btn{
        display:inline-block;
        margin-top:15px;
        color:var(--red);
        font-size:11px;
        font-family:var(--font-body);
        text-transform:uppercase;
        letter-spacing:.2em;
        cursor:pointer;
    }

}



/* Events card responsive TABLET + MOBILE */

@media (max-width:900px){

    #events{
        padding:100px 27px;
    }

    .events-header{
        padding-right:0;
        text-align:center;
    }

    .events-scroll-container{
        padding:0;
        gap:16px;
    }

    .event-card{
        flex:0 0 300px;
    }

}

@media (max-width:480px){

    .event-card{
        flex:0 0 calc(100% - 2px);
    }

}








/*Pyramid  TABLET + MOBILE */

.hero-visual {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: visible;
}

.hero-pyramid-3d {
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    display: block;
}

.hero-pyramid-3d canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    background: transparent;
}

.hero-visual-tag {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 5;
    max-width: 90%;
    width: max-content;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
}

/* Mobile view */
/* MOBILE FIX */
@media (max-width: 768px) {
    .hero-right {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .hero-visual {
        position: relative;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto 20px !important;
        padding: 0 !important;
        overflow: visible;
    }

    .hero-pyramid-3d {
        width: 100%;
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
        background: transparent;
        pointer-events: none;
        overflow: visible;
    }

    .hero-pyramid-3d canvas {
        width: 100% !important;
        height: 180px !important;
        display: block;
        background: transparent;
    }

    .hero-visual-tag {
        position: static !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;

        display: block;
        width: 86vw;
        max-width: 320px;
        margin: -10px auto 0;

        text-align: center;
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;

        font-size: 10px;
        line-height: 1.4;
        letter-spacing: 4px;
        z-index: 5;
    }
}





/* App integration: homepage uses existing includes instead of duplicated static nav/footer. */
body:has(.indexx-home) #navbar { justify-content: flex-start; }
body:has(.indexx-home) .nav-has-dropdown { position: relative; }
body:has(.indexx-home) .nav-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 180px; padding: 14px; background: rgba(5,5,5,.94); border: 1px solid var(--border); list-style: none; }
body:has(.indexx-home) .nav-dropdown::before { content: ''; position: absolute; top: -12px; left: 0; width: 100%; height: 12px; }
body:has(.indexx-home) .nav-has-dropdown:hover .nav-dropdown { display: block; }
body:has(.indexx-home) .nav-has-dropdown:focus-within .nav-dropdown { display: block; }
body:has(.indexx-home) .nav-dropdown a { display: flex; align-items: center; gap: 8px; padding: 9px 4px; }
body:has(.indexx-home) .nav-dropdown-sep { height: 1px; margin: 8px 0; background: var(--border); }
body:has(.indexx-home) .home-icosahedron { width: 100%; height: 100%; min-height: 420px; }
@media (max-width:768px){ body:has(.indexx-home) .home-icosahedron { height: 180px !important; min-height: 180px !important; max-height: 180px !important; } }

/* Social rail clearance: keep the fixed left icons from covering section content. */
@media (min-width:901px) {
  .social-dock {
    position: fixed;
    left: 34px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 700;
    padding: 8px 0;
    background: linear-gradient(180deg, transparent, rgba(5,5,5,0.18), transparent);
  }

  #hero {
    padding-left: max(150px, 10.5vw) !important;
  }

  #about,
  #services,
  #ips,
  #brand,
  #merch,
  #contact {
    padding-left: max(150px, 10.5vw) !important;
  }

  #events {
    padding-left: max(150px, 10.5vw) !important;
  }

  .footer-main,
  .footer-bottom {
    padding-left: max(150px, 10.5vw) !important;
  }
}

@media (min-width:901px) and (max-width:1200px) {
  .social-dock {
    left: 22px;
  }

  #hero {
    padding-left: 112px !important;
  }

  #about,
  #services,
  #ips,
  #brand,
  #merch,
  #contact,
  #events {
    padding-left: 112px !important;
  }

  .footer-main,
  .footer-bottom {
    padding-left: 112px !important;
  }
}

@media (max-width:900px) {
  .social-dock {
    display: none !important;
  }

  .social-dock-mobile {
    display: flex;
  }
}

/* Responsive stabilization: final overrides for clean laptop/tablet/mobile behavior. */
body:has(.indexx-home) p,
body:has(.indexx-home) .hero-body,
body:has(.indexx-home) .about-body p,
body:has(.indexx-home) .brand-body p,
body:has(.indexx-home) .contact-body,
body:has(.indexx-home) .services-intro,
body:has(.indexx-home) .service-card-text,
body:has(.indexx-home) .ip-card-text,
body:has(.indexx-home) .event-card-venue,
body:has(.indexx-home) .footer-tagline,
body:has(.indexx-home) .contact-info-text {
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.62 !important;
  letter-spacing: 0 !important;
  color: rgba(245,245,245,0.62) !important;
}

body:has(.indexx-home) .hero-quote p,
body:has(.indexx-home) .about-highlight p {
  font-weight: 300 !important;
  color: rgba(245,245,245,0.52) !important;
}

@media (min-width:1201px) {
  #hero {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.78fr);
    gap: clamp(56px, 6vw, 96px);
  }

  .hero-left {
    text-align: left;
  }

  .hero-body:has(.indexx-home) {
    max-width: 430px !important;
  }
}

@media (min-width:901px) and (max-width:1200px) {
  #hero {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr) !important;
    min-height: 720px !important;
    padding-top: 96px !important;
    padding-right: 52px !important;
    padding-bottom: 72px !important;
    gap: 34px !important;
    align-items: center !important;
  }

  .hero-left {
    padding-top: 0 !important;
    text-align: left !important;
  }

  .hero-label {
    justify-content: flex-start !important;
    margin-top: 0 !important;
  }

  .hero-label::before {
    display: block !important;
  }

  .hero-headline {
    max-width: 560px !important;
    margin-bottom: 28px !important;
  }

  .hero-headline .line {
    white-space: normal !important;
  }

  .hero-body:has(.indexx-home) {
    max-width: 390px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    text-align: left !important;
  }

  .hero-quote {
    max-width: 390px !important;
    border-left: 1px solid var(--red) !important;
    border-top: 0 !important;
    padding-left: 20px !important;
    padding-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  .hero-ctas {
    justify-content: flex-start !important;
  }

  .hero-right {
    display: flex !important;
    height: auto !important;
    min-height: 360px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hero-visual {
    width: min(100%, 360px) !important;
    height: 360px !important;
    margin: 0 auto !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .hero-pyramid-3d,
  body:has(.indexx-home) .home-icosahedron {
    height: 320px !important;
    min-height: 320px !important;
  }
}

@media (min-width:769px) and (max-width:900px) {
  #hero {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 0.64fr) !important;
    min-height: 700px !important;
    padding: 104px 42px 64px !important;
    gap: 28px !important;
    align-items: center !important;
  }

  .hero-left {
    padding-top: 0 !important;
    text-align: left !important;
  }

  .hero-label {
    justify-content: flex-start !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    font-size: 12px !important;
  }

  .hero-label::before {
    display: block !important;
    width: 24px !important;
  }

  .hero-headline {
    max-width: 470px !important;
    margin-bottom: 26px !important;
    text-align: left !important;
  }

  .hero-headline .line {
    white-space: normal !important;
  }

  .hero-body:has(.indexx-home) {
    max-width: 390px !important;
    margin: 0 0 24px !important;
    text-align: left !important;
  }

  .hero-quote {
    max-width: 380px !important;
    border-left: 1px solid var(--red) !important;
    border-top: 0 !important;
    padding-left: 18px !important;
    padding-top: 0 !important;
    margin: 0 0 34px !important;
    text-align: left !important;
  }

  .hero-ctas {
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  .hero-ctas .btn-primary,
  .hero-ctas .btn-ghost {
    width: auto !important;
    min-width: 190px;
    padding: 15px 24px !important;
  }

  .hero-right {
    display: flex !important;
    height: auto !important;
    min-height: 300px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hero-visual {
    width: min(100%, 300px) !important;
    height: 300px !important;
    margin: 0 auto !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .hero-pyramid-3d,
  body:has(.indexx-home) .home-icosahedron {
    height: 280px !important;
    min-height: 280px !important;
  }
}

@media (max-width:768px) {
  body:has(.indexx-home) nav,
  #hero,
  #about,
  #services,
  #ips,
  #brand,
  #merch,
  #contact,
  .events-header,
  .footer-main,
  .footer-bottom {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  #hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding-top: 90px !important;
    padding-bottom: 28px !important;
    gap: 20px !important;
    align-items: start !important;
  }

  /* Icosahedron below CTAs on mobile */
  .hero-right { order: 2 !important; }
  .hero-left  { order: 1 !important; }

  .hero-left {
    padding-top: 0 !important;
    text-align: left !important;
  }

  .hero-label {
    justify-content: flex-start !important;
    margin-top: 0 !important;
    letter-spacing: 0.18em !important;
  }

  .hero-label::before {
    display: block !important;
    width: 22px !important;
  }

  .hero-headline {
    max-width: 100% !important;
    margin-bottom: 24px !important;
    text-align: center !important;
  }

  .hero-headline .line {
    white-space: normal !important;
  }

  .hero-body:has(.indexx-home) {
    max-width: 100% !important;
    margin: 0 0 22px !important;
    text-align: left !important;
    font-size: 14px !important;
  }

  .hero-quote {
    max-width: 100% !important;
    border-left: 1px solid var(--red) !important;
    border-top: 0 !important;
    padding-left: 18px !important;
    padding-top: 0 !important;
    margin: 0 0 32px !important;
    text-align: left !important;
  }

  .hero-quote p {
    font-size: 13px !important;
  }

  .hero-ctas {
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  .hero-right {
    display: flex !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 240px !important;
  }

  .hero-visual {
    width: min(100%, 280px) !important;
    height: 200px !important;
    margin: 0 auto !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .hero-pyramid-3d,
  body:has(.indexx-home) .home-icosahedron {
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
  }

  .about-text,
  .services-header,
  .ips-header,
  .brand-inner,
  .contact-left {
    text-align: left !important;
  }

  .section-label {
    justify-content: flex-start !important;
  }

  .section-label::before {
    display: block !important;
  }
}

@media (max-width:560px) {
  #hero {
    padding-top: 84px !important;
    padding-bottom: 20px !important;
    gap: 16px !important;
  }

  .hero-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .hero-ctas .btn-primary,
  .hero-ctas .btn-ghost {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  body:has(.indexx-home) p,
  body:has(.indexx-home) .hero-body,
  body:has(.indexx-home) .about-body p,
  body:has(.indexx-home) .brand-body p,
  body:has(.indexx-home) .contact-body,
  body:has(.indexx-home) .services-intro,
  body:has(.indexx-home) .service-card-text,
  body:has(.indexx-home) .ip-card-text,
  body:has(.indexx-home) .event-card-venue,
  body:has(.indexx-home) .footer-tagline,
  body:has(.indexx-home) .contact-info-text {
    font-size: 13px !important;
    line-height: 1.58 !important;
    padding-left: 25px;
     padding-right: 25px;
  }
}

/* Final viewport polish. */
html,
body:has(.indexx-home) {
  max-width: 100%;
  overflow-x: clip;
}

body:has(.indexx-home) #hero {
  overflow: hidden !important;
}

body:has(.indexx-home) .indexx-home {
  position: relative;
  z-index: 1;
  overflow: clip;
}

body:has(.indexx-home) #navbar {
  z-index: 5000 !important;
  isolation: isolate;
}

body:has(.indexx-home) #navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5,5,5,0.92), rgba(5,5,5,0.38) 72%, transparent);
  opacity: 0.72;
  pointer-events: none;
}

body:has(.indexx-home) .hero-left,
body:has(.indexx-home) .hero-right {
  min-width: 0;
}

body:has(.indexx-home) .hero-headline {
  overflow: visible !important;
}

@media (min-width:561px) {
  body:has(.indexx-home) .hero-left,
  body:has(.indexx-home) .about-text,
  body:has(.indexx-home) .services-header,
  body:has(.indexx-home) .ips-header,
  body:has(.indexx-home) .brand-inner,
  body:has(.indexx-home) .contact-left {
    text-align: left !important;
  }
}

@media (max-width:560px) {
  body:has(.indexx-home) .hero-left,
  body:has(.indexx-home) .about-text,
  body:has(.indexx-home) .services-header,
  body:has(.indexx-home) .ips-header,
  body:has(.indexx-home) .brand-inner,
  body:has(.indexx-home) .contact-left,
  body:has(.indexx-home) .contact-heading,
  body:has(.indexx-home) .contact-body,
  body:has(.indexx-home) .footer-brand-name,
  body:has(.indexx-home) .footer-tagline,
  body:has(.indexx-home) .footer-col-title {
    text-align: center !important;
  }

  body:has(.indexx-home) .hero-label,
  body:has(.indexx-home) .section-label,
  body:has(.indexx-home) .hero-ctas,
  body:has(.indexx-home) .contact-info,
  body:has(.indexx-home) .footer-links {
    justify-content: center !important;
  }

  body:has(.indexx-home) .hero-label::before,
  body:has(.indexx-home) .section-label::before {
    display: none !important;
  }

  body:has(.indexx-home) .hero-body,
  body:has(.indexx-home) .hero-quote,
  body:has(.indexx-home) .services-intro,
  body:has(.indexx-home) .contact-body,
  body:has(.indexx-home) .footer-tagline {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  body:has(.indexx-home) .hero-quote {
    border-left: 0 !important;
    border-top: 1px solid var(--red) !important;
    padding-left: 0 !important;
    padding-top: 18px !important;
  }

  body:has(.indexx-home) .hero-quote p,
  body:has(.indexx-home) .about-body p,
  body:has(.indexx-home) .brand-body p,
  body:has(.indexx-home) .service-card-text,
  body:has(.indexx-home) .ip-card-text {
    text-align: center !important;
  }

  body:has(.indexx-home) .contact-info-item {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* Global navigation stabilization for non-home pages. */
body:not(:has(.indexx-home)) #navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 90px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 48px;
  z-index: 5000;
  background: linear-gradient(180deg, rgba(5,5,5,.96), rgba(5,5,5,.82) 72%, rgba(5,5,5,0));
  box-sizing: border-box;
}

body:not(:has(.indexx-home)) #navbar .nav-logo {
  flex: 0 0 auto;
  margin-right: 36px;
}

body:not(:has(.indexx-home)) #navbar .nav-links {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(18px, 2.2vw, 36px);
  margin: 0;
}

body:not(:has(.indexx-home)) #navbar .nav-links > li {
  position: relative;
  flex: 0 0 auto;
}

body:not(:has(.indexx-home)) #navbar .nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 190px;
  padding: 14px;
  margin: 0;
  list-style: none;
  background: rgba(5,5,5,.96);
  border: 1px solid var(--border);
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}

body:not(:has(.indexx-home)) #navbar .nav-dropdown::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  width: 100%;
  height: 12px;
}

body:not(:has(.indexx-home)) #navbar .nav-has-dropdown:hover .nav-dropdown,
body:not(:has(.indexx-home)) #navbar .nav-has-dropdown:focus-within .nav-dropdown {
  display: block;
}

body:not(:has(.indexx-home)) #navbar .nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 4px;
  white-space: nowrap;
}

body:not(:has(.indexx-home)) #navbar .nav-dropdown-sep {
  height: 1px;
  margin: 8px 0;
  background: var(--border);
}

body:not(:has(.indexx-home)) #navbar .hamburger {
  margin-left: auto;
}

body:not(:has(.indexx-home)) #navbar .hamburger {
  flex:0 0 44px;
}

body:not(:has(.indexx-home)) #navbar .hamburger span {
  width:24px;
}

@media (max-width: 1180px) {
  body:not(:has(.indexx-home)) #navbar {
    padding: 0 34px;
  }

  body:not(:has(.indexx-home)) #navbar .nav-logo {
    margin-right: 22px;
  }

  body:not(:has(.indexx-home)) #navbar .nav-links {
    gap: 18px;
  }

  body:not(:has(.indexx-home)) #navbar .nav-links a {
    font-size: 11px;
    letter-spacing: .14em;
  }
}

@media (max-width: 900px) {
  body:not(:has(.indexx-home)) #navbar {
    min-height: 72px;
    padding: 0 28px;
  }

  body:not(:has(.indexx-home)) #navbar .nav-links,
  body:not(:has(.indexx-home)) #navbar .nav-cta {
    display: none;
  }

  body:not(:has(.indexx-home)) #navbar .hamburger {
    display: flex;
  }
}

@media (max-width: 900px) {
  .mobile-menu {
    gap:18px;
  }

  .mobile-menu a {
    max-width:100%;
    text-align:center;
    overflow-wrap:normal;
    word-break:normal;
  }

  .mobile-menu .mobile-menu-subitem {
    font-family:var(--font-display);
    font-size:32px;
    letter-spacing:.08em;
    color:rgba(245,245,245,.62);
  }
}

@media (max-width: 430px) {
  .mobile-menu {
    padding-left:28px;
    padding-right:28px;
  }

  .mobile-menu a {
    font-size:34px;
    line-height:.95;
  }

  .mobile-menu .mobile-menu-subitem {
    font-size:32px;
  }
}

@media (max-height: 620px) {
  .mobile-menu {
    justify-content:flex-start;
  }
}

@media (hover: none), (pointer: coarse) {
  body:has(.indexx-home),
  body:has(.indexx-home) a,
  body:has(.indexx-home) button,
  body:has(.indexx-home) input,
  body:has(.indexx-home) textarea,
  body:has(.indexx-home) select {
    cursor:auto !important;
  }

  .cursor,
  .cursor-follower {
    display:none !important;
  }

  .btn-primary,
  .btn-ghost,
  .form-submit,
  .event-card-cta,
  .footer-newsletter button {
    min-height:44px;
  }

  .service-card:hover,
  .ip-card:hover,
  .event-card:hover,
  .merch-card:hover,
  .btn-primary:hover,
  .btn-ghost:hover {
    transform:none !important;
  }
}

@media (max-width: 560px) {
  body:has(.indexx-home) nav,
  body:has(.indexx-home) #hero,
  body:has(.indexx-home) #about,
  body:has(.indexx-home) #services,
  body:has(.indexx-home) #ips,
  body:has(.indexx-home) #brand,
  body:has(.indexx-home) #merch,
  body:has(.indexx-home) #contact,
  body:has(.indexx-home) .events-header,
  body:has(.indexx-home) .footer-main,
  body:has(.indexx-home) .footer-bottom {
    padding-left:28px !important;
    padding-right:28px !important;
  }

  body:has(.indexx-home) .hero-headline,
  body:has(.indexx-home) .about-heading,
  body:has(.indexx-home) .services-heading,
  body:has(.indexx-home) .ips-heading,
  body:has(.indexx-home) .brand-heading,
  body:has(.indexx-home) .events-heading,
  body:has(.indexx-home) .merch-heading,
  body:has(.indexx-home) .contact-heading {
    font-size:26px !important;
    padding-left: 25px;
     padding-right: 25px;
  }

  body:has(.indexx-home) .social-dock-mobile {
    bottom:max(18px, env(safe-area-inset-bottom));
    width:min(calc(100% - 56px), 280px);
    justify-content:center;
    padding:12px 22px;
    gap:28px;
  }
}

/* Custom 404 */
.not-found-page {
  min-height:100vh;
  background:
    radial-gradient(circle at 72% 22%, rgba(214,0,28,.14), transparent 34%),
    linear-gradient(180deg, #050505, #0A0A0A);
}

.not-found-section {
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:150px 72px 90px;
  border-bottom:1px solid var(--border);
}

.not-found-shell {
  width:min(720px, 100%);
}

.not-found-label {
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 24px;
  color:var(--red);
  font-family:var(--font-body);
  font-size:12px;
  font-weight:400;
  letter-spacing:.32em;
  text-transform:uppercase;
}

.not-found-label::before {
  content:"";
  width:34px;
  height:1px;
  background:currentColor;
}

.not-found-section h1 {
  margin:0 0 24px;
  font-family:var(--font-display);
  font-size:60px;
  font-weight:400;
  line-height:.95;
  letter-spacing:0;
  text-transform:uppercase;
}

.not-found-section p:not(.not-found-label) {
  max-width:430px;
  margin:0 0 36px;
  color:rgba(245,245,245,.68);
  font-family:var(--font-text);
  font-size:15px;
  font-weight:300;
  line-height:1.75;
}

.not-found-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

@media (max-width:560px) {
  .not-found-section {
    padding:130px 28px 72px;
    text-align:center;
  }

  .not-found-label,
  .not-found-actions {
    justify-content:center;
  }

  .not-found-label::before {
    display:none;
  }

  .not-found-section h1 {
    font-size:26px;
  }

  .not-found-section p:not(.not-found-label) {
    margin-left:auto;
    margin-right:auto;
    font-size:15px;
  }

  .not-found-actions {
    flex-direction:column;
  }
}

/* Site-wide type caps for public pages. */
:where(
  .hero-headline,
  .about-heading,
  .services-heading,
  .ips-heading,
  .brand-heading,
  .events-heading,
  .merch-heading,
  .contact-heading,
  .artists-hero-heading,
  .artist-profile-name,
  .artist-info-heading,
  .artist-section-heading,
  .event-detail-title,
  .event-detail-section-heading,
  .event-detail-ticket-cta h2,
  .event-modal-content h2,
  .ipx-heading,
  .ipx-section-head h2,
  .ipx-cta h2,
  .brandx-heading,
  .brandx-section-heading,
  .brandx-cta-heading,
  .brandx-hero h1,
  .brandx-section h2,
  .brandx-feature h2,
  .brandx-inquiry h2,
  .bxl-hero-title,
  .bx-hero-title,
  .bx-cta-heading,
  .cs-copy h1,
  .not-found-section h1
) {
  font-size: clamp(26px, 5vw, 60px) !important;
}

@media (max-width: 560px) {
  :where(
    .hero-headline,
    .about-heading,
    .services-heading,
    .ips-heading,
    .brand-heading,
    .events-heading,
    .merch-heading,
    .contact-heading,
    .artists-hero-heading,
    .artist-profile-name,
    .artist-info-heading,
    .artist-section-heading,
    .event-detail-title,
    .event-detail-section-heading,
    .event-detail-ticket-cta h2,
    .event-modal-content h2,
    .ipx-heading,
    .ipx-section-head h2,
    .ipx-cta h2,
    .brandx-heading,
    .brandx-section-heading,
    .brandx-cta-heading,
    .brandx-hero h1,
    .brandx-section h2,
    .brandx-feature h2,
    .brandx-inquiry h2,
    .bxl-hero-title,
    .bx-hero-title,
    .bx-cta-heading,
    .cs-copy h1,
    .not-found-section h1
  ) {
    font-size: 26px !important;
  }
}

/* Final shared navigation + compact page rhythm. */
#navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 5000 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 76px !important;
  padding: 0 48px !important;
  background: linear-gradient(180deg, rgba(5,5,5,.94), rgba(5,5,5,.68) 72%, rgba(5,5,5,0)) !important;
  border-bottom: 1px solid transparent !important;
  backdrop-filter: none !important;
  transform: none !important;
}

#navbar.scrolled {
  min-height: 66px !important;
  background: rgba(5,5,5,.86) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(18px) !important;
}

#navbar .nav-logo {
  flex: 0 0 auto !important;
  margin-right: auto !important;
}

#navbar .nav-links {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(18px, 2.4vw, 42px) !important;
  margin: 0 !important;
  padding: 0 !important;
}

#navbar .nav-links a,
#navbar .nav-dropdown-toggle {
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: .28em !important;
  line-height: 1 !important;
}

#navbar .hamburger {
  margin-left: 24px !important;
}

:where(.events-hero, .artists-hero, .ipx-hero, .brandx-hero, .bxl-hero, .cs-hero, .booking-hero, .contact-hero, .not-found-section) {
  min-height: auto !important;
  padding-top: 104px !important;
  padding-bottom: 46px !important;
}

.bx-hero {
  min-height: 70vh !important;
  padding-top: 104px !important;
  padding-bottom: 46px !important;
}

.event-detail-hero {
  min-height: auto !important;
  padding-top: 96px !important;
  padding-bottom: 44px !important;
}

body:has(.indexx-home) #hero {
  min-height: auto !important;
  padding-top: 104px !important;
  padding-bottom: 42px !important;
}

:where(
  .event-detail-section,
  .event-detail-ticket-cta,
  .artist-simple-wrap,
  .artist-info-section,
  .artist-gallery-section,
  .artist-videos-section,
  .artist-downloads-section,
  .artist-related-section,
  .ipx-section,
  .brandx-section,
  .bxl-grid-section,
  .booking-section,
  .contact-section,
  .cs-section
) {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

body:has(.indexx-home) :where(#about, #services, #ips, #brand, #events, #merch, #contact) {
  padding-top: 86px !important;
  padding-bottom: 86px !important;
}

@media (max-width: 900px) {
  #navbar {
    min-height: 72px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  #navbar .nav-links {
    display: none !important;
  }

  #navbar .hamburger {
    display: flex !important;
    margin-left: auto !important;
  }

  :where(.events-hero, .artists-hero, .ipx-hero, .brandx-hero, .bxl-hero, .cs-hero, .booking-hero, .contact-hero, .not-found-section),
  .bx-hero,
  .event-detail-hero,
  body:has(.indexx-home) #hero {
    padding-top: 92px !important;
    padding-bottom: 36px !important;
  }
}

@media (max-width: 560px) {
  #navbar {
    min-height: 68px !important;
  }

  :where(.events-hero, .artists-hero, .ipx-hero, .brandx-hero, .bxl-hero, .cs-hero, .booking-hero, .contact-hero, .not-found-section),
  .bx-hero,
  .event-detail-hero,
  body:has(.indexx-home) #hero {
    padding-left: 28px !important;
    padding-right: 28px !important;
    padding-top: 84px !important;
    padding-bottom: 34px !important;
  }

  .bx-hero {
    min-height: 62vh !important;
  }

  :where(
    .event-detail-section,
    .event-detail-ticket-cta,
    .artist-simple-wrap,
    .artist-info-section,
    .artist-gallery-section,
    .artist-videos-section,
    .artist-downloads-section,
    .artist-related-section,
    .ipx-section,
    .brandx-section,
    .bxl-grid-section,
    .booking-section,
    .contact-section,
    .cs-section
  ),
  body:has(.indexx-home) :where(#about, #services, #ips, #brand, #events, #merch, #contact) {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
}

/* Logo asset + social highlight marquee refinements. */
.nav-logo {
  display:inline-flex !important;
  align-items:center !important;
  width:auto !important;
  line-height:1 !important;
}

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

.loader-logo img {
  display:block;
  width:min(180px, 58vw);
  height:auto;
  object-fit:contain;
}

.footer-brand-name {
  display:flex;
  align-items:center;
}

.footer-brand-name img {
  display:block;
  width:auto;
  height:62px;
  object-fit:contain;
}

.footer-credit {
  font-family:var(--font-text);
  font-size:12px;
  font-weight:300;
  color:rgba(140,140,140,.7);
  letter-spacing:.03em;
}

.footer-credit a {
  color:rgba(245,245,245,.76);
  text-decoration:none;
  border-bottom:1px solid rgba(214,0,28,.45);
}

.footer-credit a:hover {
  color:var(--red);
}

.service-card {
  display:block;
  color:inherit;
  text-decoration:none;
}

.service-card:focus-visible {
  outline:1px solid var(--red);
  outline-offset:4px;
}

.home-highlight-reference {
  overflow:hidden;
}

.home-highlight-reference .merch-marquee,
.sh-track-wrap {
  width:100%;
  overflow:hidden;
  position:relative;
}

.home-highlight-reference .merch-marquee::before,
.home-highlight-reference .merch-marquee::after,
.sh-track-wrap::before,
.sh-track-wrap::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  z-index:3;
  width:min(110px, 14vw);
  pointer-events:none;
}

.home-highlight-reference .merch-marquee::before,
.sh-track-wrap::before {
  left:0;
  background:linear-gradient(90deg, var(--bg), transparent);
}

.home-highlight-reference .merch-marquee::after,
.sh-track-wrap::after {
  right:0;
  background:linear-gradient(270deg, var(--bg), transparent);
}

.home-highlight-reference .merch-grid,
.sh-track.sh-marquee {
  display:flex !important;
  width:max-content;
  grid-template-columns:none !important;
  gap:20px;
  animation:socialMarquee 38s linear infinite;
  will-change:transform;
}

.home-highlight-reference .merch-marquee:hover .merch-grid,
.sh-track-wrap:hover .sh-track.sh-marquee {
  animation-play-state:paused;
}

.home-highlight-reference .merch-card,
.sh-item {
  flex:0 0 clamp(220px, 20vw, 300px) !important;
  width:clamp(220px, 20vw, 300px) !important;
  min-height:0;
}

.home-highlight-reference .merch-card:first-child {
  grid-column:auto !important;
  grid-row:auto !important;
}

.home-highlight-reference .merch-visual,
.sh-item-thumb {
  aspect-ratio:1 / 1 !important;
}

.sh-section {
  padding:86px 0;
  overflow:hidden;
  background:var(--bg);
  border-top:1px solid var(--border);
}

.sh-header {
  padding:0 80px 34px 140px;
}

.sh-heading {
  font-family:var(--font-display);
  font-size:clamp(26px, 5vw, 60px);
  line-height:.95;
  letter-spacing:0;
  text-transform:uppercase;
}

.sh-track-wrap {
  padding:0 0 4px;
}

.sh-track.sh-marquee {
  padding-left:140px;
}

.sh-item {
  display:block;
  border:1px solid var(--border);
  background:var(--card);
  color:inherit;
  text-decoration:none;
  overflow:hidden;
  cursor:pointer;
}

.sh-item-thumb {
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:radial-gradient(circle at 50% 38%, rgba(214,0,28,.14), rgba(255,255,255,.025));
}

.sh-item-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.24) contrast(1.08);
  transition:transform .55s cubic-bezier(.23,1,.32,1), filter .3s ease;
}

.sh-item:hover .sh-item-thumb img {
  transform:scale(1.06);
  filter:grayscale(.05) contrast(1.12);
}

.sh-item-placeholder {
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:rgba(245,245,245,.36);
  font-size:34px;
}

.sh-item-insta-placeholder {
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg,#833ab4 0%,#fd1d1d 50%,#fcb045 100%);
  color:rgba(255,255,255,.9);
}

.sh-item-insta-placeholder svg {
  width:48px;
  height:48px;
  opacity:.85;
}

.sh-item-badge {
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  display:inline-flex;
  gap:7px;
  align-items:center;
  max-width:calc(100% - 28px);
  padding:6px 9px;
  background:rgba(5,5,5,.76);
  border:1px solid rgba(214,0,28,.3);
  color:rgba(245,245,245,.78);
  font-family:var(--font-body);
  font-size:9px;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.sh-item-overlay {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(5,5,5,.18);
  opacity:0;
  transition:opacity .25s ease;
}

.sh-item:hover .sh-item-overlay {
  opacity:1;
}

.sh-play-btn,
.sh-open-btn {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  background:var(--red);
  color:#fff;
  box-shadow:0 16px 42px rgba(214,0,28,.24);
}

.sh-play-btn svg,
.sh-open-btn svg {
  width:18px;
  height:18px;
}

.sh-item-meta {
  padding:16px;
}

.sh-item-title {
  margin-bottom:7px;
  font-family:var(--font-display);
  font-size:22px;
  line-height:.95;
  letter-spacing:0;
  text-transform:uppercase;
}

.sh-item-caption {
  font-family:var(--font-text);
  font-size:12px;
  font-weight:300;
  line-height:1.55;
  color:rgba(245,245,245,.58);
}

@keyframes socialMarquee {
  from { transform:translate3d(0,0,0); }
  to { transform:translate3d(calc(-50% - 10px),0,0); }
}

@media (max-width: 900px) {
  .nav-logo img {
    height:32px;
  }

  .sh-header {
    padding-left:28px;
    padding-right:28px;
    text-align:center;
  }

  .sh-header .section-label {
    justify-content:center;
  }

  .sh-track.sh-marquee {
    padding-left:28px;
  }
}

@media (max-width: 560px) {
  .footer-brand-name {
    justify-content:center;
  }

  .footer-credit {
    width:100%;
    text-align:center;
  }

  .home-highlight-reference .merch-card,
  .sh-item {
    flex-basis:220px !important;
    width:220px !important;
  }
}

/* Final event-card unification for the homepage event rail. */
body:has(.indexx-home) #events .events-scroll-container {
  align-items: stretch;
}

body:has(.indexx-home) #events .event-card {
  flex: 0 0 270px !important;
  width: 270px !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(5,5,5,.92);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

body:has(.indexx-home) #events .event-card:hover {
  transform: translateY(-4px);
  border-color: rgba(214,0,28,.72);
  box-shadow: 0 24px 70px rgba(214,0,28,.16);
}

body:has(.indexx-home) #events .event-card-poster {
  position: relative;
  aspect-ratio: 4 / 4.7;
  overflow: hidden;
  background: radial-gradient(circle at 50% 20%, rgba(214,0,28,.16), rgba(255,255,255,.018) 36%, rgba(0,0,0,.7));
}

body:has(.indexx-home) #events .event-card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.38) contrast(1.08);
  transition: transform .55s cubic-bezier(.23,1,.32,1), filter .3s ease;
}

body:has(.indexx-home) #events .event-card:hover .event-card-poster img {
  transform: scale(1.075);
  filter: grayscale(.16) contrast(1.12);
}

body:has(.indexx-home) #events .event-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: .1em;
  color: rgba(245,245,245,.18);
}

body:has(.indexx-home) #events .event-card-badges {
  position: absolute;
  inset: 10px 10px auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  pointer-events: none;
}

body:has(.indexx-home) #events .event-card-badges span {
  padding: 5px 7px;
  background: rgba(5,5,5,.76);
  border: 1px solid rgba(214,0,28,.28);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .16em;
  color: rgba(245,245,245,.7);
  text-transform: uppercase;
}

body:has(.indexx-home) #events .event-card-body {
  padding: 17px 15px 16px;
}

body:has(.indexx-home) #events .event-card-kicker {
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--red);
  text-transform: uppercase;
}

body:has(.indexx-home) #events .event-card h2 {
  min-height: 42px;
  margin: 0 0 13px;
  font-family: var(--font-display);
  font-size: 22px !important;
  line-height: .96;
  letter-spacing: 0;
  color: var(--text);
  text-transform: uppercase;
}

body:has(.indexx-home) #events .event-card-meta {
  display: grid;
  gap: 7px;
  min-height: 42px;
  margin-bottom: 12px;
}

body:has(.indexx-home) #events .event-card-meta span {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.45;
  color: rgba(245,245,245,.62);
}

body:has(.indexx-home) #events .event-card-actions {
  display: grid;
  gap: 8px;
}

body:has(.indexx-home) #events .event-view-btn,
body:has(.indexx-home) #events .event-ticket-btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: transparent;
  color: rgba(245,245,245,.76);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

body:has(.indexx-home) #events .event-ticket-btn {
  border-color: rgba(214,0,28,.82);
  background: var(--red);
  color: var(--text);
  box-shadow: 0 12px 34px rgba(214,0,28,.16);
}

body:has(.indexx-home) #events .event-ticket-btn:hover,
body:has(.indexx-home) #events .event-view-btn:hover {
  border-color: rgba(214,0,28,.85);
  color: var(--text);
}

body:has(.indexx-home) #events .event-ticket-btn--disabled {
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
  color: rgba(245,245,245,.35);
  pointer-events: none;
}

.merch-thumb-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.18) contrast(1.08);
  transition: transform .6s cubic-bezier(.23,1,.32,1);
}

.merch-card:hover .merch-thumb-img {
  transform: scale(1.05);
}

@media (min-width: 901px) {
  body:has(.indexx-home) #hero {
    min-height: calc(100svh - 76px) !important;
    padding-top: 160px !important;
    padding-bottom: 46px !important;
    align-items: start !important;
  }

  body:has(.indexx-home) .hero-left {
    padding-top: 0 !important;
  }

  body:has(.indexx-home) .hero-right {
    height: auto !important;
    min-height: 520px !important;
    align-items: center !important;
  }

  body:has(.indexx-home) .hero-visual {
    height: 520px !important;
  }

  body:has(.indexx-home) .home-icosahedron {
    min-height: 420px !important;
    height: 420px !important;
  }
}

/* Priority compact hero + card corrections. */
:where(.events-hero, .artists-hero, .ipx-hero, .brandx-hero, .bxl-hero, .cs-hero, .booking-hero, .contact-hero, .not-found-section) {
  padding-top: 96px !important;
  padding-bottom: 34px !important;
  min-height: auto !important;
}

.event-detail-hero {
  padding-top: 90px !important;
  padding-bottom: 34px !important;
  min-height: auto !important;
}

body:has(.indexx-home) #events .event-card {
  flex-basis: 260px !important;
  width: 260px !important;
}

body:has(.indexx-home) #events .event-card-poster {
  aspect-ratio: 1 / .92 !important;
}

body:has(.indexx-home) #events .event-card-body {
  padding: 15px 14px 14px !important;
}

body:has(.indexx-home) #events .event-card h2 {
  min-height: 0 !important;
  font-size: 20px !important;
  margin-bottom: 11px !important;
}

body:has(.indexx-home) #events .event-card-meta {
  min-height: 0 !important;
  gap: 5px !important;
  margin-bottom: 11px !important;
}

body:has(.indexx-home) #events .event-view-btn,
body:has(.indexx-home) #events .event-ticket-btn {
  min-height: 36px !important;
}

@media (max-width: 560px) {
  :where(.events-hero, .artists-hero, .ipx-hero, .brandx-hero, .bxl-hero, .cs-hero, .booking-hero, .contact-hero, .not-found-section),
  .event-detail-hero {
    padding-top: 82px !important;
    padding-bottom: 30px !important;
  }
}

/* ============================================================
   GLOBAL MOBILE RESPONSIVE — all pages, all screen sizes
   28px side padding, centered content on mobile
   ============================================================ */

/* ── 1. Universal 28px side padding on all inner page shells ── */
@media (max-width: 900px) {
  .events-hero,
  .events-filters,
  .events-results,
  .event-detail-hero,
  .event-detail-section,
  .event-detail-ticket-cta {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .artists-hero,
  .artist-roster-panel,
  .artists-grid,
  .artist-roster-cta,
  .artist-empty-state,
  .artist-page-shell {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .ipx-shell {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .brandx-shell,
  .bxl-shell {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .booking-shell,
  .booking-hero,
  .booking-form-wrap {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}

/* ── 2. Center all headings, labels, body text on mobile ── */
@media (max-width: 560px) {
  /* Events page */
  .events-hero-inner {
    text-align: center !important;
  }
  .events-label {
    justify-content: center !important;
    text-align: center !important;
  }
  .events-heading {
    text-align: center !important;
    font-size: 26px !important;
  }
  .events-copy {
    text-align: center !important;
    font-size: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .events-results-head {
    text-align: center !important;
    justify-content: center !important;
  }

  /* Artists page */
  .artists-hero {
    text-align: center !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  .artists-hero-label {
    text-align: center !important;
  }
  .artists-hero-heading {
    text-align: center !important;
    font-size: 36px !important;
  }
  .artists-hero-sub {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .artist-roster-meta {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: center !important;
  }
  .artist-roster-cta {
    text-align: center !important;
  }
  .artist-roster-cta h2 {
    text-align: center !important;
    font-size: 26px !important;
  }
  .artist-roster-cta p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .artist-roster-cta .artist-section-label {
    justify-content: center !important;
  }

  /* Artist profile */
  .artist-profile-name {
    font-size: 36px !important;
    line-height: 1 !important;
  }
  .artist-info-section {
    padding: 48px 28px !important;
  }
  .artist-gallery-section,
  .artist-videos-section,
  .artist-downloads-section,
  .artist-booking-cta {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  .artist-booking-cta {
    text-align: center !important;
  }
  .artist-booking-actions {
    justify-content: center !important;
  }

  /* IP page */
  .ipx-hero {
    text-align: center !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  .ipx-heading {
    font-size: 26px !important;
  }
  .ipx-mini-grid,
  .ipx-event-grid {
    grid-template-columns: 1fr !important;
  }

  /* Brand Experience page */
  .brandx-hero,
  .bxl-hero {
    text-align: center !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  .brandx-heading,
  .bxl-heading {
    font-size: 26px !important;
  }

  /* Booking page */
  .booking-hero {
    text-align: center !important;
  }
  .booking-hero h1 {
    font-size: 26px !important;
  }

  /* Footer */
  .footer-main {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  .footer-col-title { text-align: center !important; }
  .footer-links { align-items: center !important; }
  .footer-contact-item { justify-content: center !important; }
  .footer-newsletter { max-width: 100% !important; }
  .footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    gap: 8px !important;
  }
  .footer-bottom-left { text-align: center !important; }
}

/* ── 3. Artist cards on small mobile: single column ── */
@media (max-width: 480px) {
  .artists-grid {
    grid-template-columns: 1fr !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .artist-card-footer {
    justify-content: center !important;
  }
}

/* ── 4. Event cards on small mobile: single column ── */
@media (max-width: 480px) {
  .events-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ── 5. IP event grid: single column on very small ── */
@media (max-width: 480px) {
  .ipx-event-grid,
  .ipx-mini-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 6. Prevent horizontal overflow globally ── */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  * { box-sizing: border-box; }
}

/* ── 7. Form inputs full-width on mobile ── */
@media (max-width: 560px) {
  .booking-form input,
  .booking-form select,
  .booking-form textarea,
  .artist-booking-form input,
  .artist-booking-form select,
  .artist-booking-form textarea,
  .events-filter-form input,
  .events-filter-form select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .form-row,
  .form-split,
  .booking-form-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Social highlight cards on mobile ── */
@media (max-width: 560px) {
  .sh-item {
    width: 200px !important;
    min-width: 200px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FINAL RESPONSIVE POLISH PASS
   ═══════════════════════════════════════════════════════════════ */

/* 1. Mobile social dock — left vertical rail (not bottom dock) */
@media (max-width: 900px) {
  .social-dock {
    display: flex !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    gap: 10px !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 700 !important;
  }
  .social-dock::before,
  .social-dock::after {
    display: none !important;
  }
  .social-link {
    width: 22px !important;
    height: 22px !important;
  }
  .social-link svg {
    width: 12px !important;
    height: 12px !important;
  }
  .social-link:hover {
    transform: none !important;
  }
  .social-tooltip {
    display: none !important;
  }
  .social-dock-mobile {
    display: none !important;
  }
}

/* 2. Mobile menu — correct Bebas Neue sizing, centered, smooth */
.mobile-menu a {
  font-family: var(--font-display) !important;
  text-align: center;
}

.mobile-menu-subitem {
  font-size: 34px !important;
  opacity: 0.6 !important;
}

@media (max-width: 768px) {
  .mobile-menu a { font-size: 40px !important; }
  .mobile-menu-subitem { font-size: 28px !important; }
}

@media (max-width: 480px) {
  .mobile-menu a { font-size: 34px !important; }
  .mobile-menu-subitem { font-size: 24px !important; }
}

/* 3. Homepage center alignment at ≤768px (single-column stacked layout) */
@media (max-width: 768px) {
  body:has(.indexx-home) .hero-left,
  body:has(.indexx-home) .about-text,
  body:has(.indexx-home) .services-header,
  body:has(.indexx-home) .ips-header,
  body:has(.indexx-home) .brand-inner,
  body:has(.indexx-home) .contact-left,
  body:has(.indexx-home) .contact-heading,
  body:has(.indexx-home) .contact-body {
    text-align: center !important;
  }

  body:has(.indexx-home) .hero-label,
  body:has(.indexx-home) .section-label,
  body:has(.indexx-home) .hero-ctas,
  body:has(.indexx-home) .contact-info {
    justify-content: center !important;
  }

  body:has(.indexx-home) .hero-label::before,
  body:has(.indexx-home) .section-label::before {
    display: none !important;
  }

  body:has(.indexx-home) .hero-body,
  body:has(.indexx-home) .hero-quote,
  body:has(.indexx-home) .services-intro,
  body:has(.indexx-home) .contact-body,
  body:has(.indexx-home) .footer-tagline,
  body:has(.indexx-home) .about-body p,
  body:has(.indexx-home) .brand-body p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body:has(.indexx-home) .hero-quote {
    border-left: 0 !important;
    border-top: 1px solid var(--red) !important;
    padding-left: 0 !important;
    padding-top: 18px !important;
  }

  body:has(.indexx-home) .contact-info-item {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  body:has(.indexx-home) .footer-main {
    text-align: center !important;
  }

  body:has(.indexx-home) .footer-links {
    align-items: center !important;
  }

  body:has(.indexx-home) .footer-contact-item {
    justify-content: center !important;
  }
}

/* 4. Non-home pages: mobile navbar safe padding */
@media (max-width: 768px) {
  body:not(:has(.indexx-home)) #navbar {
    padding: 0 28px !important;
    min-height: 72px !important;
  }
  body:not(:has(.indexx-home)) #navbar .hamburger {
    display: flex !important;
  }
  body:not(:has(.indexx-home)) #navbar .nav-links,
  body:not(:has(.indexx-home)) #navbar .nav-cta {
    display: none !important;
  }
}

/* 5. Global overflow guard */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }

/* 6. Desktop hero: top padding + tighten CTA-to-marquee gap */
@media (min-width: 901px) {
  #hero {
    padding-top: 48px !important;
    min-height: 68svh !important;
  }
  .hero-right {
    height: 68svh !important;
  }
}

/* 7. 1920×1080 / ultra-wide layout */
@media (min-width: 1440px) {
  body:has(.indexx-home) #hero {
    padding-left:  max(140px, calc((100vw - 1400px) / 2 + 80px)) !important;
    padding-right: max(80px,  calc((100vw - 1400px) / 2 + 60px)) !important;
  }
  body:has(.indexx-home) #about,
  body:has(.indexx-home) #services,
  body:has(.indexx-home) #ips,
  body:has(.indexx-home) #brand,
  body:has(.indexx-home) #merch,
  body:has(.indexx-home) #contact {
    padding-left:  max(140px, calc((100vw - 1400px) / 2 + 80px)) !important;
    padding-right: max(80px,  calc((100vw - 1400px) / 2 + 60px)) !important;
  }
  body:has(.indexx-home) .footer-main,
  body:has(.indexx-home) .footer-bottom {
    padding-left:  max(140px, calc((100vw - 1400px) / 2 + 80px)) !important;
    padding-right: max(80px,  calc((100vw - 1400px) / 2 + 60px)) !important;
  }
  body:has(.indexx-home) nav {
    padding-left:  max(48px, calc((100vw - 1400px) / 2 + 48px)) !important;
    padding-right: max(48px, calc((100vw - 1400px) / 2 + 48px)) !important;
  }
  body:not(:has(.indexx-home)) #navbar {
    padding-left:  max(48px, calc((100vw - 1400px) / 2 + 48px)) !important;
    padding-right: max(48px, calc((100vw - 1400px) / 2 + 48px)) !important;
  }
}

/* Universal public chrome: one navbar/footer behavior across every public route. */
#navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 5000 !important;
  width: 100% !important;
  height: 90px !important;
  min-height: 90px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 28px !important;
  padding: 0 48px !important;
  background: linear-gradient(180deg, rgba(5,5,5,.92), rgba(5,5,5,.38) 72%, transparent) !important;
  border-bottom: 1px solid transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  isolation: isolate;
  transition: height .5s cubic-bezier(.23,1,.32,1), min-height .5s cubic-bezier(.23,1,.32,1), background .35s ease, border-color .35s ease, backdrop-filter .35s ease !important;
}

#navbar.scrolled {
  height: 72px !important;
  min-height: 72px !important;
  background: rgba(5,5,5,.86) !important;
  border-bottom-color: var(--border) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

#navbar .nav-logo {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-right: auto !important;
  line-height: 1 !important;
}

#navbar .nav-logo img {
  display: block !important;
  width: auto !important;
  height: 74px !important;
  object-fit: contain !important;
  transition: height .35s ease !important;
}

#navbar.scrolled .nav-logo img {
  height: 58px !important;
}

#navbar .nav-links {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(18px, 2.4vw, 36px) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#navbar .nav-links > li,
#navbar .nav-has-dropdown {
  position: relative !important;
  flex: 0 0 auto !important;
}

#navbar .nav-links a {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  text-decoration: none !important;
  transition: color .3s ease !important;
}

#navbar .nav-links a:hover,
#navbar .nav-links a.is-active,
#navbar .nav-dropdown a.is-active {
  color: var(--text) !important;
}

#navbar .nav-links a.is-active::after {
  width: 100% !important;
}

#navbar .nav-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  min-width: 190px !important;
  display: block !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
  margin: 0 !important;
  padding: 14px !important;
  list-style: none !important;
  background: rgba(5,5,5,.96) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.35) !important;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s !important;
}

#navbar .nav-dropdown::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -14px !important;
  height: 14px !important;
}

#navbar .nav-has-dropdown:hover .nav-dropdown,
#navbar .nav-has-dropdown:focus-within .nav-dropdown {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0s !important;
}

#navbar .nav-dropdown a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 4px !important;
  white-space: nowrap !important;
}

#navbar .nav-dropdown-sep {
  height: 1px !important;
  margin: 8px 0 !important;
  background: var(--border) !important;
}

#navbar .hamburger {
  flex: 0 0 44px !important;
  margin-left: 24px !important;
}

.mobile-menu a.is-active {
  color: var(--red) !important;
}

.mobile-menu .mobile-menu-subitem {
  color: rgba(245,245,245,.62) !important;
}

@media (max-width: 1180px) {
  #navbar {
    padding-left: 34px !important;
    padding-right: 34px !important;
    gap: 18px !important;
  }

  #navbar .nav-links {
    gap: 16px !important;
  }

  #navbar .nav-links a {
    font-size: 10.5px !important;
    letter-spacing: .14em !important;
  }
}

@media (max-width: 900px) {
  #navbar {
    height: 72px !important;
    min-height: 72px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    background: rgba(5,5,5,.9) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom-color: var(--border) !important;
  }

  #navbar .nav-logo img,
  #navbar.scrolled .nav-logo img {
    height: 32px !important;
  }

  #navbar .nav-links,
  #navbar .nav-cta {
    display: none !important;
  }

  #navbar .hamburger {
    display: flex !important;
    margin-left: auto !important;
  }

  .mobile-menu {
    z-index: 4999 !important;
    gap: 18px !important;
    padding: 96px 28px 44px !important;
  }

  .social-dock {
    display: flex !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    gap: 10px !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 700 !important;
  }

  .social-dock::before,
  .social-dock::after,
  .social-tooltip,
  .social-dock-mobile {
    display: none !important;
  }

  .social-link {
    width: 22px !important;
    height: 22px !important;
  }

  .social-link svg {
    width: 12px !important;
    height: 12px !important;
  }
}

@media (min-width: 1440px) {
  #navbar {
    padding-left: max(48px, calc((100vw - 1400px) / 2 + 48px)) !important;
    padding-right: max(48px, calc((100vw - 1400px) / 2 + 48px)) !important;
  }
}

.sh-empty {
  width: min(760px, calc(100% - 56px));
  margin: 0 auto;
  padding: 42px 28px;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 50% 0, rgba(214,0,28,.12), transparent 42%),
    rgba(255,255,255,.025);
  text-align: center;
}

.sh-empty-mark {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 44px;
  letter-spacing: .12em;
  color: rgba(245,245,245,.18);
}

.sh-empty p {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text);
}

.sh-empty span {
  font-family: var(--font-text);
  font-size: 13px;
  color: rgba(245,245,245,.58);
}





















/*===============================Venue timeline code css for additions==================================================*/



.home-proof-section {
  position: relative;
  padding: 120px 80px 120px 140px;
  background: #050505;
  border-top: 1px solid var(--border);
  overflow: hidden;
}

.home-proof-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 78% 20%, rgba(214,0,28,.08), transparent 42%),
    repeating-linear-gradient(90deg, transparent, transparent 120px, rgba(255,255,255,.012) 120px, rgba(255,255,255,.012) 121px);
  pointer-events: none;
}

.home-proof-section--artists {
  padding-top: 80px;
}

.home-proof-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
}

.home-proof-heading {
  margin: 0 0 48px;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 58px);
  line-height: .92;
  letter-spacing: .01em;
  color: var(--text);
}

.home-proof-heading span {
  color: var(--muted);
}

.venue-timeline-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--border);
  background: var(--border);
}

.venue-timeline-item {
  min-height: 150px;
  padding: 24px 18px;
  background: #080808;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.venue-timeline-item span {
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
}

.venue-timeline-item strong {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 30px);
  line-height: .95;
  color: var(--text);
  font-weight: 300;
}

.artist-cloud {
  max-width: 1100px;
  margin: 0;
  font-family: var(--font-text);
  font-size: clamp(17px, 2.1vw, 28px);
  font-weight: 300;
  line-height: 1.75;
  color: rgba(245,245,245,.72);
}

@media (max-width: 1024px) {
  .home-proof-section {
    padding: 100px 52px;
  }

  .venue-timeline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .home-proof-section {
    padding: 80px 28px;
    text-align: center;
  }

  .venue-timeline-grid {
    grid-template-columns: 1fr;
  }

  .venue-timeline-item {
    min-height: 120px;
    align-items: center;
    text-align: center;
  }

  .artist-cloud {
    font-size: 17px;
    line-height: 1.85;
  }
}














#international-artists {
  text-align: center;
}

#international-artists .home-proof-inner {
  margin-left: auto;
  margin-right: auto;
}

.international-artists-card {
  max-width: 1180px;
  margin: 0 auto;
  padding: 58px 64px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 80px rgba(0,0,0,.34);
}

#international-artists .section-label {
  justify-content: center;
}

#international-artists .section-label::before {
  display: none;
}

#international-artists .home-proof-heading {
  text-align: center;
}

#international-artists .artist-cloud {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media (max-width: 560px) {
  .international-artists-card {
    padding: 38px 22px;
  }
}