/* ==========================================================================
   CSS SYSTEM - PITA GROUP CREATIVE GLASSMORPHISM (ALA APPLE)
   ========================================================================== */

:root {
  /* Apple Color System */
  --bg-dark: #000000;
  --bg-base: #080a11;
  --text-white: #ffffff;
  --text-gray: rgba(255, 255, 255, 0.65);
  --text-muted: rgba(255, 255, 255, 0.4);
  
  /* Accent Neon (Pita Yellow) */
  --accent-yellow: #ffcc00;
  --accent-yellow-glow: rgba(255, 204, 0, 0.35);

  /* Glassmorphism Variables — Apple-fidelity spec */
  --apple-glass-bg: rgba(255, 255, 255, 0.06);
  --apple-glass-bg-bold: rgba(255, 255, 255, 0.09);
  --apple-glass-border: rgba(255, 255, 255, 0.12);
  --apple-glass-border-bold: rgba(255, 255, 255, 0.24);
  --apple-glass-blur: blur(32px) saturate(180%);    /* saturate adds color refraction depth */
  --apple-glass-shadow: 0 16px 40px 0 rgba(0, 0, 0, 0.40),    /* soft ambient */
                        0 2px 8px 0 rgba(0, 0, 0, 0.50),      /* tight contact */
                        inset 0 1px 0 0 rgba(255, 255, 255, 0.18); /* top highlight */
  --apple-glass-shadow-bold: 0 24px 56px 0 rgba(0, 0, 0, 0.55),
                             0 4px 12px 0 rgba(0, 0, 0, 0.60),
                             inset 0 1px 0 0 rgba(255, 255, 255, 0.35),
                             inset 0 -1px 0 0 rgba(0, 0, 0, 0.40);
  
  --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-x: hidden;
  overflow-y: scroll;
  width: 100%;
  height: 100vh;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  background-color: var(--bg-base);
  color: var(--text-white);
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Custom Scrollbar Kuning Aksen */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--accent-yellow);
  border-radius: 5px;
  border: 2px solid var(--bg-base);
}

::-webkit-scrollbar-thumb:hover {
  background: #e6b800; /* Kuning emas hover */
}

/* Untuk Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-yellow) var(--bg-base);
}

/* ==========================================================================
   CLASS UTAMA: GLASSMORPHISM BUNDLE (ALA APPLE)
   ========================================================================== */
.glass-apple {
  background: var(--apple-glass-bg);
  backdrop-filter: var(--apple-glass-blur);
  -webkit-backdrop-filter: var(--apple-glass-blur);
  border: 1px solid var(--apple-glass-border);
  box-shadow: var(--apple-glass-shadow);
  border-radius: 20px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-apple:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

/* Class Kaca Transparan Terkunci */
.glass-apple-transparent {
  background: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;
}

/* Efek Kaca Tebal Mengkilap Rounded Berisi (Untuk Layer 3D Kaca) */
.glass-apple-bold {
  background: var(--apple-glass-bg-bold);
  backdrop-filter: var(--apple-glass-blur);
  -webkit-backdrop-filter: var(--apple-glass-blur);
  border: 1.5px solid var(--apple-glass-border-bold);
  box-shadow: var(--apple-glass-shadow-bold);
  border-radius: 36px;
  position: relative;
  overflow: hidden;
}

/* Efek Refleksi Cahaya Mengkilap Melengkung */
.glass-apple-bold::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%, transparent 100%);
  border-radius: 36px 36px 0 0;
  pointer-events: none;
}

/* Highlight Sudut Rounded (3D Highlight) */
.glass-apple-bold::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 35px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

/* ==========================================================================
   PRELOADER - SIMPEL KUNING (3 DETIK)
   ========================================================================== */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--bg-dark);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.preloader-box {
  text-align: center;
}

.preloader-count {
  font-size: 5rem;
  font-weight: 800;
  color: var(--accent-yellow);
  text-shadow: 0 0 30px var(--accent-yellow-glow);
  font-family: system-ui, sans-serif;
  letter-spacing: -0.05em;
  line-height: 1;
  margin-bottom: 10px;
}

.preloader-text {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-gray);
  font-weight: 500;
}

/* Transisi fade-out preloader */
#preloader.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Body state while preloader is active ──
   Hide interactive overlays (gyro, WA widget, navbar) and completely disable scroll.
   Class added by JS at page start, removed after preloader fade-out. */
html.preloader-active,
body.preloader-active {
  overflow: hidden !important;
  height: 100svh !important;
  touch-action: none !important;
}

body.preloader-active #enable-gyro,
body.preloader-active #gyro-debug,
body.preloader-active #pgc-wa-widget,
body.preloader-active .navbar-wrapper,
body.preloader-active .btn-hamburger {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* ==========================================================================
   FIXED FLOATING STICKY NAVBAR (APPLE STYLE)
   ========================================================================== */
.navbar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: none;
  z-index: 100;
  opacity: 0;
  transform: translateY(-20px);
  /* Bersih dari background memanjang */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.navbar-wrapper.visible {
  opacity: 1;
  transform: translateY(0);
}

.navbar-main {
  display: flex;
  justify-content: center; /* Merapat ke arah tengah */
  align-items: center;
  gap: 50px; /* Jarak rapat yang elegan */
  width: 100%;
  margin: 0 auto;
  padding: 24px 0px; /* Tebal/besar di home atas */
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Logo & Teks Brand */
.nav-logo-box {
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

.nav-logo-img {
  height: 48px;
  width: auto;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Nama Brand Navbar (i18n ready jika ingin diterjemahkan, tapi default ini teks statis elegan) */
.nav-brand-text {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, #ffffff 40%, rgba(255, 255, 255, 0.7) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

/* Teks Brand Khusus Mobile disembunyikan di Desktop */
.mobile-brand-text {
  display: none;
}

/* Nav Links & Trek Kapsul Panjang Glass Transparant (Tengah) */
.nav-links-outer {
  position: relative;
  /* Kunci style glass transparant */
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;
  border-radius: 40px; /* Rounded penuh */
  padding: 6px;
  max-width: 65%;
  pointer-events: auto;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-links-inner {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 4px;
  position: relative;
  cursor: grab;
  scroll-behavior: auto; /* Menggunakan auto agar momentum script JS bekerja lancar */
  user-select: none;
}

.nav-links-inner::-webkit-scrollbar {
  display: none;
}

/* Styling Desktop Layar Lebar agar tidak terpotong */
@media (min-width: 1025px) {
  .nav-links-outer {
    max-width: none !important;
    overflow: visible !important;
  }
  .nav-links-inner {
    overflow-x: visible !important;
    width: auto !important;
    cursor: default !important;
  }
}

/* Kapsul Gelembung Aktif (3D Rounded Glass) */
.active-indicator {
  position: absolute;
  top: 2px;
  left: 0;
  height: calc(100% - 4px);
  /* Efek 3D Glass Abu-abu Mengkilap */
  background: linear-gradient(to bottom, #4e505a 0%, #292a32 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 30px;
  z-index: 1; /* Di bawah teks tapi di atas track */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5),
              inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* Efek kilau atas melengkung pada kapsul 3D */
.active-indicator::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
  border-radius: 30px 30px 0 0;
}

.nav-link {
  text-decoration: none;
  color: var(--text-gray);
  padding: 8px 22px;
  font-size: 0.9rem;
  font-weight: 700; /* Teks tebal seperti di gambar */
  border-radius: 30px;
  transition: color 0.3s ease;
  z-index: 2; /* Di atas indicator */
  white-space: nowrap;
  position: relative;
}

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

.nav-link.active {
  color: var(--text-white);
}

/* Multi-language Selector (Kanan) */
.nav-lang-container {
  position: relative;
  pointer-events: auto;
}

.btn-lang {
  background: var(--accent-yellow);
  color: #000;
  border: none;
  padding: 10px 24px; /* Lebih lebar/lonjong */
  border-radius: 50px; /* Lonjong penuh */
  font-weight: 800; /* Tebal */
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(255, 204, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-lang:hover {
  transform: scale(1.03) translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 204, 0, 0.45);
}

.lang-flag {
  font-size: 1.1rem;
}

/* Dropdown Pilihan Bahasa */
.lang-dropdown-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 140px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 110;
}

.lang-dropdown-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  background: transparent;
  border: none;
  color: var(--text-gray);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  width: 100%;
  text-align: left;
  transition: background 0.2s, color 0.2s;
}

.lang-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* ==========================================================================
   MOBILE DRAWER & OVERLAY (GLOBAL DEFINITION FOR SAFE LAYOUT)
   ========================================================================== */
.mobile-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  z-index: 140;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: -290px; /* tepat di luar layar kanan */
  width: 290px;
  height: 100vh;
  z-index: 150;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateX(0);
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  /* Kunci style glass apple gelap premium */
  background: rgba(18, 18, 22, 0.65) !important;
  backdrop-filter: blur(35px) !important;
  -webkit-backdrop-filter: blur(35px) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5) !important;
}

.mobile-drawer.open {
  transform: translateX(-290px); /* meluncur masuk ke kiri pas di tepi layar */
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 15px;
}

.drawer-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.btn-close-drawer {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: color 0.2s;
}

.btn-close-drawer:hover {
  color: #fff;
}

.drawer-nav-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.drawer-link {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s, padding-left 0.3s;
  padding: 5px 0;
}

.drawer-link:hover,
.drawer-link.active {
  color: #fff;
  padding-left: 8px;
  border-left: 3px solid var(--accent-yellow);
}

.drawer-lang-section {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 25px;
}

.drawer-lang-container {
  position: relative;
  width: 100%;
}

.btn-lang-mobile {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: var(--accent-yellow);
  color: #000;
  border-radius: 30px;
  padding: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(240, 196, 25, 0.3);
}

.mobile-dropdown-panel {
  bottom: calc(100% + 12px) !important;
  top: auto !important;
  width: 100%;
  left: 0;
}

/* ==========================================================================
   STICKY SCROLL INTERACTION (COMPACT NAVBAR)
   ========================================================================== */
.navbar-wrapper.navbar-compact {
  /* Wrapper tetap transparan tanpa latar memanjang */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.navbar-wrapper.navbar-compact .navbar-main {
  max-width: none;
  gap: 30px; /* Ramping menyusut rapat saat scroll */
  padding: 12px 0px; /* Padding atas bawah menyusut */
}

/* Logo mengecil saat scroll */
.navbar-wrapper.navbar-compact .nav-logo-img {
  height: 36px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Trek tengah menyusut sedikit */
.navbar-wrapper.navbar-compact .nav-links-outer {
  padding: 4px;
  background: rgba(255, 255, 255, 0.05) !important; /* Kaca transparan sedikit lebih solid saat scroll */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
}

.navbar-wrapper.navbar-compact .nav-link {
  padding: 6px 18px;
  font-size: 0.85rem;
}

/* Tombol bahasa menyusut */
.navbar-wrapper.navbar-compact .btn-lang {
  padding: 8px 18px;
  font-size: 0.8rem;
}

/* ==========================================================================
   HAMBURGER BUTTON & MOBILE DRAWER (GLASSMORPHIC)
   ========================================================================== */
/* ── Hamburger SVG icon ── */
.btn-hamburger {
  display: none; /* Tersembunyi di desktop */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 200;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hamburger-svg rect {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease;
  transform-origin: center;
}

/* X state when drawer is open */
.btn-hamburger[aria-expanded="true"] .hamburger-svg rect:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.btn-hamburger[aria-expanded="true"] .hamburger-svg rect:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.btn-hamburger[aria-expanded="true"] .hamburger-svg rect:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ── Backdrop for tap-outside-to-close ── */
.mobile-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9940;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
.mobile-drawer-backdrop.open {
  display: block;
}

/* ── Floating Glass Drawer Card ── */
.mobile-drawer {
  display: none; /* JS shows on mobile only */
  position: fixed;
  top: 80px; /* Just below navbar pill */
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: clamp(260px, 80vw, 320px);
  z-index: 9950;
  padding: 16px 14px 14px;
  border-radius: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-drawer.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Show drawer only on mobile */
@media (max-width: 768px) {
  .mobile-drawer {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

/* Nav pills stack */
.mobile-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Individual glass pill nav item */
.mobile-drawer-link {
  display: block;
  padding: 11px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  /* Staggered entrance */
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}

.mobile-drawer.open .mobile-drawer-link {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delays */
.mobile-drawer.open .mobile-drawer-link:nth-child(1) { transition-delay: 0.04s; }
.mobile-drawer.open .mobile-drawer-link:nth-child(2) { transition-delay: 0.08s; }
.mobile-drawer.open .mobile-drawer-link:nth-child(3) { transition-delay: 0.12s; }
.mobile-drawer.open .mobile-drawer-link:nth-child(4) { transition-delay: 0.16s; }
.mobile-drawer.open .mobile-drawer-link:nth-child(5) { transition-delay: 0.20s; }
.mobile-drawer.open .mobile-drawer-link:nth-child(6) { transition-delay: 0.24s; }
.mobile-drawer.open .mobile-drawer-link:nth-child(7) { transition-delay: 0.28s; }
.mobile-drawer.open .mobile-drawer-link:nth-child(8) { transition-delay: 0.32s; }

.mobile-drawer-link:hover,
.mobile-drawer-link.active {
  background: rgba(255, 204, 0, 0.15);
  border-color: rgba(255, 204, 0, 0.35);
  color: var(--accent-yellow);
}

/* Language pill at bottom */
.mobile-drawer-lang {
  margin-top: 6px;
}

.mobile-drawer-lang-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--accent-yellow);
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  color: #1a1a1a;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease 0.36s, transform 0.3s ease 0.36s, background 0.2s;
}

.mobile-drawer.open .mobile-drawer-lang-pill {
  opacity: 1;
  transform: translateX(0);
}

.mobile-drawer-lang-pill:hover {
  background: #e6b800;
}

/* ==========================================================================
   HERO / HOME SECTION - PARALLAX LAYER SYSTEM & CINEMATIC TRANSITIONS
   ========================================================================== */
.cinematic-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: transparent !important;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.section-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.05s linear;
}

.anim-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  will-change: transform, opacity, filter;
}

/* Matikan transisi CSS bawaan setelah fase intro selesai agar rAF scroll berjalan instan */
.intro-done .anim-layer {
  transition: none !important;
  animation: none !important;
}

#home {
  perspective: 1000px;
}

.parallax-layer {
  transition: filter 1s ease, opacity 1s ease;
  /* Keadaan default (Hidden sebelum intro) */
  opacity: 0;
  filter: blur(40px) brightness(0);
}

/* Keadaan setelah preloader selesai (Masuk) */
.parallax-layer.visible {
  opacity: 1;
  filter: blur(0px) brightness(1);
  animation: glitchBlur 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animasi Glitch Blur Masuk yang Elegan */
@keyframes glitchBlur {
  0% { filter: blur(35px) saturate(0); opacity: 0; }
  40% { filter: blur(10px) saturate(1.8); opacity: 0.8; }
  60% { filter: blur(15px) saturate(0.8); opacity: 0.9; }
  100% { filter: blur(0px) saturate(1); opacity: 1; }
}

/* LAYER 1: Background Utama */
#hero-layer-bg {
  z-index: 1;
  background-image: url('../img/bg/bg-home-pita-group-creative.webp');
}

/* LAYER 2: Scene Layar Belakang Kaca */
#hero-layer-scene {
  z-index: 2;
}

.interactive-scene-img {
  width: 85%;
  height: auto;
  max-width: 1500px;
  object-fit: contain;
  /* Lapisan Kaca Tipis Bersih */
  border-radius: 20px;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* LAYER 3: 3D Glass Box Bold Mengkilap */
#hero-layer-glassbox {
  z-index: 3;
}

.glass-box-container {
  width: 60%;
  max-width: 1000px;
  height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.glass-box-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* LAYER 3.5: Text "Creative Production House" di belakang karakter Melly */
#hero-layer-creativehouse {
  z-index: 4;
}

.creative-house-img {
  width: 78%;
  height: auto;
  max-width: 1300px;
  object-fit: contain;
}

/* LAYER 4: Karakter Cewek Melly */
#hero-layer-melly {
  z-index: 5;
}

.melly-img {
  height: 90vh;
  width: auto;
  object-fit: contain;
  margin-top: 10vh; /* Turunkan ke bawah */
}

/* LAYER 5: Konten Teks depan Melly */
#hero-layer-text {
  z-index: 6;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* H2 Title (Di dahi/atas Melly) */
.hero-subtitle {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--text-white);
  margin-bottom: 22vh;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
  max-width: 80%;
}

/* H1 Title (Di depan tangan Melly) */
.hero-title {
  font-family: system-ui, sans-serif;
  font-size: 5.5rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.9;
  color: var(--text-white);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.9);
  margin-top: 15vh;
  max-width: 90%;
}

/* Footer Teks */
.footer-simple {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: var(--text-muted);
  z-index: 10;
  letter-spacing: 0.05em;
  text-align: center;
  width: 90%;
  pointer-events: none;
}

/* ==========================================================================
   RESPONSIVENESS (MOBILE ACCORDANCE)
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-title {
    font-size: 4rem;
  }
  
  .hero-subtitle {
    font-size: 0.9rem;
  }
}

@media (max-width: 768px) {
  /* 1. DISABLE SCROLL SNAP TRAPS (MOBILE ONLY) */
  html, body, section, container, div, article, main, header, footer, [class*="section"], [class*="container"], [class*="wrapper"], [class*="hero"], [class*="slide"], .cinematic-section, .services-main-panel, .services-sub-card, .pillars-card, .works-card-inner, [id] {
    scroll-snap-type: none !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
    touch-action: pan-y !important; /* Enable Vertical Touch Action for iOS Safari */
  }

  /* Flexible Section Height khusus mobile (iOS Dynamic Viewport DVH Fix) */
  .cinematic-section {
    min-height: 100dvh !important;
    height: auto !important;
    overflow: visible !important;
  }
  #home.cinematic-section {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  /* 2. ALLOW NATIVE TOUCH MOMENTUM / FLICK INERTIA (MOBILE ONLY) */
  html, body {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: static !important; /* Mencegah position fixed menjebak body di iOS Safari */
    scroll-behavior: auto !important; /* Fix: Auto allows native smooth touch momentum instead of CSS enforced smooth snap */
    touch-action: pan-y !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 3. CUSTOM SCROLLBAR MOBILE (SAMAKAN DENGAN DESKTOP) */
  ::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
    display: block !important;
  }

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

  ::-webkit-scrollbar-thumb {
    background: var(--accent-yellow) !important;
    border-radius: 5px !important;
    border: 2px solid var(--bg-base) !important;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #e6b800 !important;
  }

  html, body, * {
    scrollbar-width: thin !important;
    scrollbar-color: var(--accent-yellow) var(--bg-base) !important;
  }

  /* 3. EARLY REVEAL & CLEAR TEXT FINAL STATE CLEANUP (MOBILE ONLY) */
  .glitch-reveal.visible,
  .cinematic-section.in-view .glitch-reveal.visible,
  .cinematic-section.in-view .anim-layer,
  .services-sub-card,
  .services-character-container,
  .services-main-panel {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
  }

  .glitch-reveal.visible {
    transform: translate3d(0, 0, 0) !important;
  }

  /* Cegah gambar menahan sentuhan jari saat user mencoba scroll */
  img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
  }
  
  /* Kembalikan fungsi klik untuk elemen interaktif */
  a img, button img, .nav-logo-img, .btn-lang img {
    pointer-events: auto;
  }

  /* Tampilkan hamburger menu dan sembunyikan link default */
  .btn-hamburger {
    display: flex;
  }

  .nav-links-outer {
    display: none; /* Sembunyikan default nav menu di mobile */
  }

  .navbar-wrapper {
    position: fixed;
    width: 90% !important;
    max-width: 450px !important;
    top: 20px !important;
    left: 50% !important;
    transform: translate(-50%, -20px) !important;
    /* Kapsul 3D Glass tebal mengkilap persis seperti referensi */
    background: linear-gradient(to bottom, rgba(55, 55, 65, 0.82) 0%, rgba(25, 25, 30, 0.92) 100%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), 
                inset 0 1px 1px rgba(255, 255, 255, 0.25), 
                inset 0 -1px 3px rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border-radius: 50px !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .navbar-wrapper.visible {
    transform: translate(-50%, 0) !important;
  }

  .navbar-wrapper.navbar-compact {
    width: 82% !important; /* Ramping sedikit saat scroll ke bawah */
    top: 12px !important;
  }

  .navbar-main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 12px !important; /* Tipis di dalam kapsul */
    margin: 0 !important;
    justify-content: space-between !important;
    gap: 0 !important;
  }

  .navbar-wrapper.navbar-compact .navbar-main {
    padding: 4px 10px !important; /* Lebih ramping saat scroll */
  }

  /* ==========================================================================
     HOME SECTION - MOBILE 1080x1920 PORTRAIT LAYOUT & ASSET REPLACEMENTS
     ========================================================================== */
  #home.cinematic-section {
    position: relative !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* 1. LAYER 2: Interactive Scene Background (Mobile Asset) */
  #hero-layer-scene {
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .interactive-scene-img {
    content: url('../img/interactive/mobile/interactive-mobile-scene-home-pita-group-creative.webp') !important;
    width: 74% !important;
    max-width: 370px !important;
    height: 75vh !important;
    object-fit: cover !important;
    border-radius: 28px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: 40px !important;
  }

  /* 2. LAYER 3: 3D Glass Box (Mobile Asset) */
  #hero-layer-glassbox {
    z-index: 3 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .glass-box-container {
    width: 80% !important;
    max-width: 400px !important;
    height: 79vh !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 40px !important;
  }

  .glass-box-img {
    content: url('../img/interactive/mobile/glass-box-home-mobile.webp') !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.6)) !important;
  }

  /* 3. LAYER 3.5: Creative Production House Overlay (Mobile Asset) */
  #hero-layer-creativehouse {
    z-index: 4 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .creative-house-img {
    content: url('../img/interactive/mobile/creative-production-house-mobile.webp') !important;
    width: 92% !important;      /* Enlarged vs prior 80% for bigger visual impact */
    max-width: 460px !important;
    height: auto !important;
    max-height: 82vh !important;
    object-fit: contain !important;
    margin-top: 30px !important;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.8)) !important;
  }

  /* 4. LAYER 4: Character Melly (Mobile Asset) */
  #hero-layer-melly {
    z-index: 5 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
  }

  .melly-img {
    content: url('../img/interactive/mobile/home-melly-mobile-pita-group-creative.webp') !important;
    width: 100% !important;
    max-width: 490px !important;
    height: 86vh !important;
    object-fit: contain !important;
    object-position: bottom center !important;
    margin-top: 0 !important;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.85)) !important;
  }

  /* 5. LAYER 5: Hero Subtitle & Title Text */
  #hero-layer-text {
    z-index: 6 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    pointer-events: none !important;
  }

  .hero-subtitle {
    position: relative !important;
    /* Account for floating navbar (~70px) + safe-area + a little breathing room */
    padding-top: calc(72px + env(safe-area-inset-top, 0px)) !important;
    top: 0 !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.7) !important;
    margin: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    text-align: center !important;
    width: 100% !important;
  }

  .hero-title {
    display: block !important;
    position: relative !important;
    top: 0 !important;
    margin-top: 12px !important;
    font-size: 2.1rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
    line-height: 1.1 !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.95), 0 0 15px rgba(0, 0, 0, 0.8) !important;
    margin: 0 !important;
    padding: 0 15px !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* Sembunyikan dropdown bahasa default di navbar mobile */
  .nav-lang-container {
    display: none !important;
  }

  /* Tampilkan Teks Brand khusus Mobile */
  .mobile-brand-text {
    display: inline-block !important;
    font-size: 0.92rem !important; /* Pas di dalam kapsul */
    font-weight: 800 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
    text-align: center !important;
    flex-grow: 1 !important;
    margin: 0 10px !important;
  }

  /* Hamburger Menu Box - Style Minimalis Sesuai Gambar */
  .btn-hamburger {
    display: flex !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px !important;
    width: 22px !important;
    height: 16px !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

}

/* ==========================================================================
   GLOBAL GLITCH REVEAL SYSTEM & ABOUT SECTION & INFINITE MARQUEE
   ========================================================================== */

/* Glitch Blur Reveal Global Utility */
.glitch-reveal {
  opacity: 0;
  filter: blur(35px) saturate(0);
  transform: translateY(30px);
  will-change: opacity, filter, transform;
}

.glitch-reveal.visible {
  animation: glitchBlurGlobal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes glitchBlurGlobal {
  0% { 
    filter: blur(35px) saturate(0); 
    opacity: 0; 
    transform: translateY(30px); 
  }
  40% { 
    filter: blur(10px) saturate(1.8); 
    opacity: 0.8; 
    transform: translateY(-5px); 
  }
  60% { 
    filter: blur(15px) saturate(0.8); 
    opacity: 0.9; 
    transform: translateY(2px); 
  }
  100% { 
    filter: blur(0px) saturate(1); 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* About Layout Structure */
.about-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 100px;
  padding-bottom: 40px;
  box-sizing: border-box;
  z-index: 10;
  position: relative;
}

.about-header-wrapper {
  text-align: center;
  max-width: 800px;
  width: 90%;
}

.about-h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--text-white);
  line-height: 1.25;
  margin-bottom: 15px;
}

.about-subtext {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  color: var(--text-gray);
  line-height: 1.6;
}

/* Infinite Marquee Styles */
.about-marquee-wrapper {
  margin: 30px auto;
  text-align: center;
  width: 100%;
}

.marquee-title {
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: 600;
}

.marquee-capsule {
  width: 90%;
  max-width: 750px;
  margin: 0 auto;
  padding: 14px 20px;
  border-radius: 50px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 
              0 8px 32px 0 rgba(0, 0, 0, 0.3);
  position: relative;
  display: flex;
}

/* Masking edges gradient for premium fade look */
.marquee-capsule::before,
.marquee-capsule::after {
  content: '';
  position: absolute;
  top: 0;
  width: 60px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.marquee-capsule::before {
  left: 0;
  background: linear-gradient(to right, #080a11 0%, transparent 100%);
}

.marquee-capsule::after {
  right: 0;
  background: linear-gradient(to left, #080a11 0%, transparent 100%);
}

.marquee-content {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: marquee-scroll 25s linear infinite;
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-white);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.client-logo-icon {
  font-size: 1.15rem;
  opacity: 0.85;
}

/* Logo image inside marquee (dynamic dari backend) */
.client-marquee-logo {
  height: 24px;
  max-width: 60px;
  object-fit: contain;
  opacity: 0.85;
  filter: brightness(1.2);
}

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

/* 3-Column Glass Panel Styles */
.about-panel-wrapper {
  position: relative;
  width: 90%;
  max-width: 1000px;
  margin: 20px auto 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-glow-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.glow-img {
  width: 105%;
  height: 130%;
  object-fit: contain;
  opacity: 0.9;
  pointer-events: none;
}

.about-glass-panel {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 45px 35px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5),
              inset 0 1px 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

/* Diagonal reflection highlight overlay */
.about-glass-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
  pointer-events: none;
}

.about-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.col-title {
  color: var(--accent-yellow);
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 15px;
  text-shadow: 0 2px 10px rgba(255, 204, 0, 0.2);
}

.col-text {
  color: var(--text-white);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  line-height: 1.65;
  font-weight: 400;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .about-container {
    padding-top: 80px;
  }
  .about-h2 {
    font-size: 2rem;
  }
  .about-subtext {
    font-size: 0.95rem;
  }
  .about-glass-panel {
    gap: 20px;
    padding: 35px 25px;
  }
}

@media (max-width: 768px) {
  #about.cinematic-section {
    height: auto !important;
    min-height: 100vh;
    overflow-y: visible !important;
  }
  .about-container {
    height: auto;
    min-height: 100vh;
    padding-top: 80px;
    padding-bottom: 50px;
    justify-content: flex-start;
  }
  .about-h2 {
    font-size: clamp(1.4rem, 6vw, 1.8rem);
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
  .about-subtext {
    font-size: 0.95rem;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
  .about-marquee-wrapper {
    margin: 20px auto;
  }
  .marquee-capsule {
    padding: 10px 16px;
    width: 95%;
  }
  .about-glass-panel {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 25px 20px;
  }
  .about-glow-bg {
    display: none; /* Hide glow on mobile for performance */
  }
}

/* ==========================================================================
   SERVICES SECTION STYLING (3D PARALLAX & GLASS LAYERS)
   ========================================================================== */

/* Layer background absolute positioning */
#services-bg-sky,
#services-bg-grid,
#services-bg-athena,
#services-bg-filter {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.services-sky-img,
.services-grid-img,
.services-athena-img,
.services-filter-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* Specific opacity adjustments for clean backdrop blend */
.services-grid-img {
  opacity: 0.15;
  mix-blend-mode: overlay;
}

.services-athena-img {
  opacity: 0.25;
  object-position: center;
}

.services-filter-img {
  opacity: 0.45;
}

/* Foreground container */
#services-layer-foreground {
  z-index: 40;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}

/* Large Main Glass Panel Box */
.services-main-panel {
  position: relative;
  z-index: 2;
  width: 80%;
  max-width: 1180px;
  height: 84vh;
  padding: 38px 48px 38px 48px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  
  background: rgba(25, 28, 35, 0.4);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 3px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 
              inset 0 1px 2px rgba(255, 255, 255, 0.35),
              inset 0 -2px 6px rgba(0, 0, 0, 0.5);
  border-radius: 40px;
  overflow: visible;
}

/* Absolute beveled glass reflection background image */
.services-panel-bevel-backing {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 1;
  pointer-events: none;
  opacity: 0.85;
  border-radius: 35px;
}

/* ─── HEADER: "WHAT WE DO?" — besar, di dalam box, pojok kiri atas ─── */
.services-header {
  position: relative;
  z-index: 3;
  text-align: left;
  margin-left: 5%; /* Shift right towards center */
  margin-bottom: 16px;
  flex-shrink: 0;
}

.services-what-we-do-img {
  /* Diperbesar sedikit lagi sesuai permintaan user */
  height: 20vh;
  max-height: 180px;
  width: auto;
  max-width: 75%; 
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.7));
}

/* ─── GRID 4 CARDS — 2×2, 58% lebar (kiri), karakter di kanan ─── */
.services-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: 58%;
  margin-left: 5%; /* Shift grid towards center */
  flex-shrink: 0;
  margin-bottom: 18px;
}

.services-sub-card {
  padding: 20px 24px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center; /* DITAMBAHKAN: Rata tengah isi card */
  text-align: center;
  gap: 11px;
  background: rgba(35, 40, 50, 0.5) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.service-item-title {
  color: var(--accent-yellow);
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  margin: 0;
  line-height: 1.25;
}

/* ─── ACTION BUTTONS ─── */
.services-action-buttons {
  width: 58%;
  margin-left: 5%;
}

.yellow-bullet {
  color: var(--accent-yellow);
  font-size: 0.85rem;
  flex-shrink: 0;
  text-shadow: 0 0 8px var(--accent-yellow-glow);
}

/* ─── FOOTER TEXT — centered, di bawah grid, lebar 58% ─── */
.services-footer {
  position: relative;
  z-index: 3;
  margin-top: auto;
  margin-bottom: 32px; /* DITAMBAHKAN: Memberikan jarak dari garis bawah */
  padding-top: 24px;
  text-align: center;
  width: 58%;
  margin-left: 5%; /* Shift to align exactly with grid center */
  font-size: 3rem; /* DITAMBAHKAN: Memperbesar teks (bisa disesuaikan, misal 16px atau 18px) */
  font-weight: 500;   /* DITAMBAHKAN (Opsional): Membuat teks sedikit lebih tebal agar lebih terbaca di atas background gelap */
}

.services-description-text {
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Inter', sans-serif;
  font-size: 1.15rem; /* Diperbesar sedikit sesuai permintaan */
  font-weight: 600;
  line-height: 1.55;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* ─── CHARACTER: robot mecha, sisi kanan, dikembalikan ke ukuran awal ─── */
.services-character-container {
  position: absolute;
  right: 1%; 
  bottom: 0;
  height: 100vh; /* Kembalikan ke 100vh agar proporsi awal terjaga */
  width: 40%;
  z-index: 10;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.girl-mecha-img {
  position: absolute;
  right: 3%;
  bottom: 0;
  height: 90vh; /* Kembalikan ukuran karakter seperti di awal agar tidak terpotong */
  width: auto;
  object-fit: contain;
  pointer-events: auto;
  filter: drop-shadow(-8px 0 20px rgba(0,0,0,0.5));
}

.slogan-badge-img {
  position: absolute;
  right: 12%; /* Digeser ke kiri sesuai permintaan user */
  bottom: 8%;
  width: 320px;
  height: auto;
  object-fit: contain;
  z-index: 11;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
}

/* Services Responsive styles */
@media (max-width: 1024px) {
  .services-main-panel {
    width: 90%;
    padding: 30px;
    height: auto;
    min-height: 75vh;
  }
  .services-grid {
    width: 100%;
    margin-left: 0;
  }
  .services-action-buttons {
    width: 100%;
    margin-left: 0;
  }
  .services-footer {
    width: 100%;
    margin-left: 0;
  }
  .girl-mecha-img {
    height: 70vh;
    right: 0%;
  }
  .slogan-badge-img {
    width: 240px;
    right: 2%;
    bottom: 8%;
  }
}

@media (max-width: 768px) {
  #services.cinematic-section {
    height: auto !important;
    min-height: 100vh;
    overflow-y: visible !important;
    padding-top: 90px;
    padding-bottom: 60px;
  }

  #services-layer-foreground {
    position: relative !important;
    height: auto !important;
    min-height: 100vh;
    padding: 0 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Main Outer Glass Panel Container */
  .services-main-panel {
    position: relative !important;
    width: 94% !important;
    max-width: 440px !important;
    height: auto !important;
    min-height: auto !important;
    margin: 0 auto !important;
    padding: 28px 16px 20px 16px !important;
    border-radius: 36px !important;
    border: 2.5px solid rgba(255, 255, 255, 0.9) !important;
    background: rgba(18, 22, 30, 0.45) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.65),
                inset 0 1px 2px rgba(255, 255, 255, 0.4),
                0 0 20px rgba(255, 255, 255, 0.15) !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .services-panel-bevel-backing {
    display: none !important;
  }

  /* Header Title: "WHAT WE DO?" */
  .services-header {
    width: 100% !important;
    margin-left: 0 !important;
    margin-bottom: 22px !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
  }

  .services-what-we-do-img {
    height: auto !important;
    max-height: 52px !important;
    width: auto !important;
    max-width: 84% !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8)) !important;
  }

  /* Grid of 4 Sub Cards (Reordered to match reference image) */
  .services-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-bottom: 22px !important;
  }

  .services-grid > .services-sub-card:nth-child(1) { order: 2 !important; } /* Brand Identity */
  .services-grid > .services-sub-card:nth-child(2) { order: 1 !important; } /* 2D/3D Animation */
  .services-grid > .services-sub-card:nth-child(3) { order: 4 !important; } /* Custom Website */
  .services-grid > .services-sub-card:nth-child(4) { order: 3 !important; } /* Robotic and IoT */

  .services-sub-card {
    padding: 16px 18px !important;
    border-radius: 16px !important;
    background: rgba(35, 40, 52, 0.5) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45),
                inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    gap: 8px !important;
  }

  .service-item-title {
    color: #FFD700 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9) !important;
  }

  .yellow-bullet {
    color: #FFD700 !important;
    font-size: 0.8rem !important;
    flex-shrink: 0 !important;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.6) !important;
  }

  /* Action Buttons (Stacked Vertically, CREATIVE SERVICES top, WORKFLOW bottom) */
  .services-action-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-bottom: 15px !important;
    position: relative !important;
    z-index: 50 !important;
  }

  .services-action-buttons > a:nth-child(1) { order: 2 !important; } /* WORKFLOW */
  .services-action-buttons > a:nth-child(2) { order: 1 !important; } /* CREATIVE SERVICES */

  .services-action-buttons .btn-glass-primary {
    width: 78% !important;
    max-width: 260px !important;
    padding: 10px 20px !important;
    background: rgba(45, 40, 35, 0.65) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 25px !important;
    color: #FFFFFF !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5),
                inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  }

  /* Footer Description Hidden on Mobile */
  .services-footer {
    display: none !important;
  }

  /* Character Girl-Mecha & Slogan Badge inside frame */
  .services-character-container {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 5px !important;
    margin-bottom: -5px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 10 !important;
    overflow: visible !important;
  }

  .girl-mecha-img {
    display: block !important;
    position: relative !important;
    width: 85% !important;
    max-width: 320px !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    right: auto !important;
    bottom: auto !important;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.8)) !important;
    pointer-events: auto !important;
  }

  .slogan-badge-img {
    display: block !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: -20px auto 10px auto !important; /* Sedikit menimpa robot dari bawah & rata tengah */
    width: 85% !important;
    max-width: 280px !important;
    height: auto !important;
    object-fit: contain !important;
    z-index: 12 !important;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.9)) !important;
  }
}

/* ==========================================================================
   THE PILLARS SECTION STYLING (3D PARALLAX & GLASS LAYERS)
   ========================================================================== */

#pillars-bg-grid,
#pillars-bg-dust {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.pillars-grid-img,
.pillars-dust-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.pillars-grid-img {
  opacity: 0.15;
  mix-blend-mode: overlay;
}

.pillars-dust-img {
  opacity: 0.55;
  mix-blend-mode: screen;
}

#pillars-bg-chess {
  z-index: 15;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

#pillars-bg-chess picture {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.pillars-chess-img {
  display: block;
  margin: 0 auto;
  width: min(80%, 1180px, calc(84vh * 1397 / 825));
  height: auto;
  aspect-ratio: 1397 / 825;
  max-height: 84vh;
  object-fit: contain; /* Protect chess board asset from stretching */
  opacity: 0.85;
  will-change: transform;
}

#pillars-foreground-content {
  z-index: 20;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.pillars-content-container {
  width: min(80%, 1180px, calc(84vh * 1397 / 825));
  height: auto;
  aspect-ratio: 1397 / 825;
  max-height: 84vh;
  padding: 3.5% 4.5%; /* Scale padding proportionally */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  pointer-events: auto;
}

/* Section Specific Entrance Effect: Glitch Blur Glass on chess backing */
#pillars.in-view .pillars-chess-img {
  animation: glitchBlurGlass 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes glitchBlurGlass {
  0% {
    backdrop-filter: blur(50px) saturate(0);
    -webkit-backdrop-filter: blur(50px) saturate(0);
    filter: brightness(0.5) blur(10px);
    opacity: 0;
    transform: scale(0.95);
  }
  30% {
    backdrop-filter: blur(10px) saturate(2);
    -webkit-backdrop-filter: blur(10px) saturate(2);
    filter: brightness(1.2) blur(3px);
    opacity: 0.75;
  }
  60% {
    backdrop-filter: blur(35px) saturate(0.5);
    -webkit-backdrop-filter: blur(35px) saturate(0.5);
    filter: brightness(0.8) blur(5px);
    opacity: 0.9;
    transform: scale(1.02);
  }
  100% {
    backdrop-filter: var(--apple-glass-blur);
    -webkit-backdrop-filter: var(--apple-glass-blur);
    filter: brightness(1) blur(0px);
    opacity: 1;
    transform: scale(1);
  }
}

/* ─── HEADER: Title Graphic & Subtitle ─── */
.pillars-header {
  position: relative;
  z-index: 3;
  text-align: center;
  margin-bottom: 20px;
  flex-shrink: 0;
  padding-top: 10px;
}

.pillars-title-img {
  height: 12vh;
  max-height: 100px;
  width: auto;
  max-width: 85%;
  object-fit: contain;
  display: block;
  margin: 0 auto 5px auto;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.7));
}

.pillars-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.45;
  margin: 0 auto;
  max-width: 750px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  text-align: center;
}

/* ─── GRID 4 CARDS (Row Layout) ─── */
.pillars-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
  margin-top: auto;
  margin-bottom: 10px;
  flex-shrink: 0;
}

/* Card Styling with glass-box-home.webp base asset */
.pillars-card {
  position: relative;
  padding: 24px 20px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-image: url('../img/interactive/glass-box-home.webp');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  height: auto;
  aspect-ratio: 16 / 9;
  pointer-events: auto; /* Ensure cards capture pointer events */
}

/* Sheen reflection overlay inside card */
.pillars-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
  pointer-events: none;
}

/* Hover State Luminous Glow Effect ("menyala") */
.pillars-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 
              0 0 25px rgba(255, 204, 0, 0.45),
              inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 204, 0, 0.7) !important;
}

.pillars-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pillars-card-logo {
  height: 24px;
  width: auto;
  object-fit: contain;
}

.pillars-card-title {
  color: var(--accent-yellow);
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.pillars-card-desc {
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  line-height: 1.45;
  font-weight: 400;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  flex-grow: 1;
}

/* Pill Button */
.pillars-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 100%;
  max-width: 140px;
  padding: 8px 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  margin-top: auto;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  pointer-events: auto; /* Clickable */
}

.pillars-btn:hover {
  background: var(--accent-yellow);
  color: #000000;
  border-color: var(--accent-yellow);
  box-shadow: 0 0 12px var(--accent-yellow-glow);
  transform: scale(1.05);
  text-shadow: none;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .pillars-chess-img {
    width: 90% ; 
    height: auto;
    aspect-ratio: 1397 / 825;
    max-height: 80vh;
    object-fit: contain;
  }
  .pillars-content-container {
    width: 90%;
    padding: 3% 4%;
    height: auto;
    aspect-ratio: 1397 / 825;
    max-height: 80vh;
  }
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 15px;
  }
  .pillars-card {
    min-height: auto;
    padding: 20px;
  }
}

@media (max-width: 768px) {
  #pillars.cinematic-section, #pillars {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100vw * (2850 / 1080)) !important; /* Ratio 1080x2850 per request */
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 90px 12px calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    overflow-y: visible !important;
    touch-action: pan-y !important;
  }

  /* Layer 1: Grid Tornado BG - Full Screen */
  #pillars-bg-grid {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }
  .pillars-grid-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Layer 2: Mobile Dust Tornado BG - Full Screen 1080 x 2500 Cover */
  #pillars-bg-dust {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important;
    pointer-events: none !important;
  }
  .pillars-dust-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }

  /* Layer 3: Mobile Chess Frame BG - Large Centered Uncropped Frame */
  #pillars-bg-chess {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; 
    width: 95% !important;
    max-width: 450px !important;
    aspect-ratio: 1081 / 1921 !important;
    z-index: 15 !important;
    pointer-events: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .pillars-chess-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    opacity: 0.96 !important;
  }

  /* Foreground Content - Restored exact aspect-ratio layout */
  #pillars-foreground-content {
    position: relative !important;
    z-index: 30 !important; /* Higher than bg-chess (15) so cards & Load More are NEVER submerged */
    width: 95% !important;
    max-width: 450px !important;
    aspect-ratio: 1080 / 2850 !important; /* Updated to new taller 1080x2850 ratio */
    margin: 0 auto !important;
    padding: 8% 4% 10% 4% !important; /* Increased top/bottom padding slightly to balance the taller ratio */
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .pillars-content-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .pillars-header {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 0 !important;
    padding-top: 2% !important;
  }

  .pillars-title-img {
    height: auto !important;
    max-height: 40px !important;
    width: 72% !important;
    max-width: 240px !important;
    object-fit: contain !important;
    margin: 0 auto 3px auto !important;
    display: block !important;
  }

  .pillars-subtitle {
    font-size: 0.65rem !important;
    line-height: 1.25 !important;
    max-width: 88% !important;
    margin: 0 auto !important;
    opacity: 0.88 !important;
    text-align: center !important;
  }

  .pillars-grid {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    flex: 1 !important;
    margin: 3% 0 !important;
    gap: 2.2% !important;
    justify-content: space-evenly !important;
    align-items: center !important;
  }

  .pillars-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 80% !important;
    max-width: 320px !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    transform: none !important;
    z-index: 1 !important;
    opacity: 1 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
    background-image: url('../img/interactive/mobile/glass-box-home-mobile.webp') !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: space-between !important;
  }

  .pillars-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-bottom: 1px !important;
  }

  .pillars-card-logo {
    height: 20px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .pillars-card-title {
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    color: var(--accent-yellow) !important;
  }

  .pillars-card-desc {
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    max-width: 95% !important;
  }

  .pillars-btn {
    display: inline-block !important;
    padding: 4px 16px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    max-width: 105px !important;
    border-radius: 50px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(4px) !important;
    text-decoration: none !important;
    margin-top: auto !important;
  }

  #pillars-load-more-container {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding-bottom: calc(15% + env(safe-area-inset-bottom, 16px)) !important;
  }

  /* ── MEDIA SECTION MOBILE: allow content to grow instead of clip ── */
  #media.cinematic-section {
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
  }

  /* BG layers on Media: must be absolute (not fixed) on mobile so they don't escape the section */
  #media .ms-bg-layer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
  }
}


/* ==========================================================================
   WORKS SECTION STYLING (GLASSMORPHIC SYSTEM & GRID)
   ========================================================================== */
#works .section-bg {
  z-index: 1;
}

.works-layout-wrapper {
  display: flex;
  width: 96%;
  max-width: 1520px;
  height: 78vh;
  gap: 25px;
  z-index: 20;
  align-items: center;
  box-sizing: border-box;
}

/* ─── SIDEBAR: Infinite Vertical Logo Slider ─── */
.works-slider-container {
  height: 78vh;
  width: 90px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--apple-glass-bg-bold);
  backdrop-filter: var(--apple-glass-blur);
  -webkit-backdrop-filter: var(--apple-glass-blur);
  border: 1.5px solid var(--apple-glass-border-bold);
  box-shadow: var(--apple-glass-shadow-bold);
  border-radius: 30px;
  box-sizing: border-box;
}

/* Reflective overlay inside slider */
.works-slider-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.works-slider-track {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px 0;
  align-items: center;
  cursor: grab;
  user-select: none;
  will-change: transform;
  transition: transform 0.1s ease-out;
}

.works-slider-track.dragging {
  cursor: grabbing;
  transition: none;
}

.works-logo-item {
  height: 60px;
  width: 60px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 10px;
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.works-logo-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(0.85); /* Clean light grey silhouette */
  transition: all 0.3s ease;
}

.works-logo-item:hover,
.works-logo-item.active {
  background: rgba(255, 204, 0, 0.15) !important;
  border-color: var(--accent-yellow) !important;
  transform: scale(1.08);
  box-shadow: 0 0 15px rgba(255, 204, 0, 0.45);
}

.works-logo-item:hover img,
.works-logo-item.active img {
  filter: grayscale(0) brightness(1.1) drop-shadow(0 0 4px rgba(255, 204, 0, 0.6)); /* Reveal color with custom drop glow */
}

/* ─── MAIN BOX CONTAINER ─── */
.works-main-container {
  flex-grow: 1;
  height: 78vh;
  padding: 25px 35px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

.works-title-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  flex-shrink: 0;
  width: 100%;
}

.works-title-img {
  height: clamp(55px, 8.5vh, 90px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
}

.works-grid-content {
  display: grid;
  grid-template-columns: 36% 64%;
  gap: 30px;
  flex-grow: 1;
  align-items: stretch;
  min-height: 0;
}

/* Showcase Column (Middle) */
.works-showcase-column {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  min-height: 0;
}

.works-showcase-box {
  border: 3px solid var(--accent-yellow); /* Thicker border like mockup */
  border-radius: 24px;
  padding: 0; /* Full bleed image footprint */
  height: 100%;
  background: #000;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.75), 
              0 0 30px rgba(255, 204, 0, 0.15),
              inset 0 0 20px rgba(255, 204, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.works-showcase-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.85), 0 0 35px rgba(255, 204, 0, 0.35), inset 0 0 30px rgba(255, 204, 0, 0.2);
}

.works-showcase-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform 0.5s ease;
}

.works-showcase-box:hover .works-showcase-img {
  transform: scale(1.03);
}

/* Tech HUD Overlay elements */
.hud-element {
  position: absolute;
  z-index: 3;
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.05em;
  background: rgba(0, 0, 0, 0.65);
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
  text-transform: uppercase;
}

.hud-wip {
  top: 15px;
  left: 15px;
}

.hud-wireframe {
  top: 15px;
  right: 15px;
}

.hud-model {
  bottom: 55px; /* Placed right above the caption overlay */
  left: 15px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.hud-icon {
  font-size: 0.75rem;
}

.hud-texture {
  bottom: 55px; /* Placed right above the caption overlay */
  right: 15px;
}

.works-showcase-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  padding: 25px 15px 15px 15px;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, transparent 100%);
  box-sizing: border-box;
  margin: 0;
  border-radius: 0 0 20px 20px;
}

/* Info Column (Right) */
.works-info-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
  min-height: 0;
  height: 100%;
}

/* Video Player Box */
.works-video-player-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 12px 36px rgba(0,0,0,0.6);
  border: 1.5px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}

#works-video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.works-video-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s;
}

.works-video-thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.65;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.works-video-cover:hover .works-video-thumbnail {
  opacity: 0.8;
  transform: scale(1.03);
}

.works-video-play-btn {
  position: relative;
  z-index: 6;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255, 204, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  box-shadow: 0 0 30px rgba(255, 204, 0, 0.6);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.works-video-play-btn svg {
  width: 32px;
  height: 32px;
  margin-left: 4px;
}

.works-video-cover:hover .works-video-play-btn {
  transform: scale(1.12);
  background: #ffffff;
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.8);
}

.works-video-cover-text {
  position: relative;
  z-index: 6;
  margin-top: 15px;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.works-video-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.works-video-player-box.playing .works-video-element {
  opacity: 1;
  pointer-events: auto;
}

.works-video-player-box.playing .works-video-cover {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Custom video controls overlay */
.works-video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
  padding: 15px 25px 15px 25px;
  display: flex;
  align-items: center;
  gap: 15px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.works-video-player-box.playing:hover .works-video-controls {
  opacity: 1;
  transform: translateY(0);
}

.works-control-btn {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: color 0.2s, transform 0.2s;
  padding: 0;
}

.works-control-btn:hover {
  color: var(--accent-yellow);
  transform: scale(1.15);
}

.works-control-btn svg {
  width: 22px;
  height: 22px;
}

.works-timeline-container {
  flex-grow: 1;
  height: 6px;
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}

.works-timeline-progress {
  height: 100%;
  width: 0%;
  background: var(--accent-yellow);
  border-radius: 3px;
  position: absolute;
  top: 0;
  left: 0;
}

/* Description Box using background asset */
.works-desc-box {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 25px;
  height: 54px;
  background: var(--apple-glass-bg-bold);
  backdrop-filter: var(--apple-glass-blur);
  -webkit-backdrop-filter: var(--apple-glass-blur);
  border: 1.5px solid var(--apple-glass-border-bold);
  box-shadow: var(--apple-glass-shadow-bold);
  border-radius: 16px;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.works-desc-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.12) 0%, transparent 100%);
  border-radius: 16px 16px 0 0;
  pointer-events: none;
  z-index: 1;
}

.works-desc-box::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 1;
}

.works-client-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.15);
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.works-client-logo-img {
  width: 75%;
  height: 75%;
  object-fit: contain;
}

.works-project-company {
  color: rgba(255,255,255,0.92);
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}

/* ─── RESPONSIVE STYLES ─── */
@media (max-width: 1024px) {
  .works-layout-wrapper {
    flex-direction: column;
    height: auto;
    width: 92%;
    gap: 15px;
    padding-top: 80px;
    padding-bottom: 30px;
    align-items: stretch;
  }

  .works-slider-container {
    height: 75px;
    width: 100%;
    border-radius: 20px;
    padding: 0 20px;
    display: flex;
    justify-content: center;
  }

  .works-slider-track {
    flex-direction: row;
    padding: 0 10px;
    gap: 15px;
    height: 100%;
    align-items: center;
    width: max-content;
  }

  .works-logo-item {
    height: 50px;
    width: 50px;
  }

  .works-slider-track.auto-scroll {
    animation: horizontalInfiniteScroll 20s linear infinite;
  }

  @keyframes horizontalInfiniteScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  .works-main-container {
    height: auto;
    padding: 25px;
  }

  .works-title {
    font-size: 2.2rem;
    margin-bottom: 15px;
  }

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

  .works-showcase-box {
    aspect-ratio: 4 / 3;
  }

  .works-showcase-img {
    height: calc(100% - 35px);
  }

  .works-info-column {
    gap: 15px;
    height: auto;
    justify-content: flex-start;
  }

  .works-desc-box {
    margin-top: 5px;
  }
}

@media (max-width: 768px) {
  .works-layout-wrapper {
    padding-top: 70px;
  }

  .works-title-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 5px !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .works-title-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 12vh !important;
    object-fit: contain !important;
  }

  .works-title {
    font-size: 1.8rem;
  }

  .works-showcase-box {
    padding: 10px;
    gap: 10px;
  }

  .works-showcase-caption {
    font-size: 1rem;
  }

  .works-video-cover-text {
    font-size: 0.95rem;
  }

  .works-video-play-btn {
    width: 55px;
    height: 55px;
  }

  .works-video-play-btn svg {
    width: 26px;
    height: 26px;
  }

  .works-desc-box {
    padding: 10px 20px;
    height: 60px;
  }

  .works-client-logo {
    width: 36px;
    height: 36px;
  }

  .works-project-company {
    font-size: 0.95rem;
  }
}


/* ==========================================================================
   MEDIA SECTION — ms- prefix namespace
   ========================================================================== */

/* The .cinematic-section base already handles: position:relative, width:100%,
   height:100vh, overflow:hidden, scroll-snap-align:start, flexbox centering.
   We only add what's unique to this section. */

/* ── Background layer wrapper: always visible, full section coverage ── */
.ms-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}

/* ── Foreground layer wrapper: full coverage, glitch-reveal managed ── */
.ms-fg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  will-change: transform;
}

/* ── Background images: fixed 1920×1080, never stretched ── */
.ms-bg-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1080px;
  max-width: none;    /* prevent img from being constrained by parent */
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
  will-change: transform;
}

/* ── Collage frame wrapper ── */
/* ── Collage frame wrapper & anchored left slider ── */
.ms-collage-wrap {
  position: relative;
  width: 64%;
  max-width: 1020px;
  margin-bottom: 2vh;
}

.ms-collage-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 40px 120px rgba(0,0,0,0.85);
}

/* ── Left vertical infinity-loop slider (anchored to left edge, 100% height match top-to-bottom with collage img) ── */
.ms-slider-capsule {
  position: absolute;
  left: -68px;
  top: 0;
  bottom: 0;
  height: 100%;
  max-height: none;
  width: 52px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  border-radius: 35px;
  pointer-events: auto;
  z-index: 5;
}

.ms-slider-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: ms-scroll-up 14s linear infinite;
  will-change: transform;
}

/* Each word-set column */
.ms-slider-set {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
}

.ms-slider-set span {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-white);
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.ms-star {
  color: var(--accent-yellow);
  font-size: 0.65rem !important;
  opacity: 0.85;
}

@keyframes ms-scroll-up {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* "Media Evolved" title graphic — centered top area of collage frame with independent parallax */
.ms-title-img {
  position: absolute;
  top: 20vh;
  left: 35%;
  transform: translateX(calc(-50% - 180px));
  width: 44%;
  max-width: 520px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 0 35px rgba(255,204,0,0.45));
}

/* ── Glass boxes row (compact & centered inside collage box) ── */
.ms-glassboxes-row {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  width: 54%;
  max-width: 850px;
  pointer-events: auto;
}

.ms-glassbox {
  flex: 1;
  padding: 16px 22px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition:
    box-shadow 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Neon yellow glow on hover */
.ms-glassbox:hover {
  border-color: var(--accent-yellow) !important;
  box-shadow:
    0 0 0 1px var(--accent-yellow),
    0 0 22px 4px rgba(255,204,0,0.35),
    0 8px 32px 0 rgba(0,0,0,0.4),
    inset 0 1px 1px 0 rgba(255,255,255,0.18) !important;
  background: rgba(255,204,0,0.04) !important;
}

.ms-box-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.05rem, 1.3vw, 1.4rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-white);
  margin-bottom: 6px;
}

.ms-box-body {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.7rem, 0.78vw, 0.82rem);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
}

/* "OPEN PAGE" button inside Box 2 */
.ms-btn-open {
  margin-top: 10px;
  padding: 8px 28px;
  border-radius: 50px;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.28);
  color: var(--text-white);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

.ms-btn-open:hover {
  background: var(--accent-yellow);
  border-color: var(--accent-yellow);
  color: #000;
  box-shadow: 0 0 20px rgba(255,204,0,0.5);
}

/* ── Right character (Melly): positioned & scaled so she does NOT cover glass boxes ── */
.ms-character-wrap {
  position: absolute;
  right: 1vw;
  bottom: 0;
  height: 72vh;
  max-height: 700px;
  width: auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.ms-melly-img {
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(-15px 0 35px rgba(0,0,0,0.8));
}


/* ── Responsive adjustments ── */
@media (max-width: 1400px) {
  .ms-collage-wrap { width: 70%; }
  .ms-glassboxes-row { width: 64%; }
  .ms-slider-capsule { left: calc(50% - 35vw - 60px); width: 48px; height: 50vh; }
  .ms-character-wrap { height: 65vh; right: 0; }
}

@media (max-width: 1024px) {
  .ms-collage-wrap { width: 80%; margin-bottom: 2vh; }
  .ms-glassboxes-row { width: 75%; bottom: 6%; gap: 12px; }
  .ms-title-img { width: 55%; top: 12vh; }
  .ms-slider-capsule { left: 1.5vw; width: 44px; height: 48vh; }
  .ms-character-wrap { height: 58vh; opacity: 0.85; }
}

@media (max-width: 768px) {
  .ms-collage-wrap { width: 92%; margin-bottom: 1vh; }
  .ms-glassboxes-row {
    width: 92%;
    flex-direction: column;
    bottom: 2%;
    gap: 8px;
  }
  .ms-glassbox { padding: 12px 16px; }
  .ms-box-title { font-size: 1.05rem; margin-bottom: 4px; }
  .ms-box-body { font-size: 0.72rem; }
  .ms-slider-capsule { display: none; }
  .ms-character-wrap { height: 45vh; opacity: 0.6; }
  .ms-title-img { width: 75%; top: 8vh; }
}


/* ── 4 Box Counter Interactive ── */
.about-counter-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 60px auto 40px;
  padding: 0 5%;
  position: relative;
  z-index: 10;
}

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

@media (max-width: 900px) {
  .counter-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

@media (max-width: 500px) {
  .counter-grid {
    grid-template-columns: repeat(2, 1fr); /* Keep compact 2x2 layout instead of stretching to 1 column */
    gap: 10px;
  }
  .about-counter-wrapper {
    margin: 30px auto 20px;
  }
  .about-counter-wrapper .ms-glassbox {
    padding: 18px 10px !important;
  }
  .counter-value {
    font-size: 1.8rem !important;
  }
  .counter-label {
    font-size: 0.8rem !important;
  }
}

.counter-value {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  font-weight: 800;
  color: var(--accent-yellow);
  margin-bottom: 5px;
  position: relative;
  display: inline-block;
  line-height: 1;
}

.counter-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--text-white);
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

/* Glitch Text Effect for Counter */
.glitch-text {
  position: relative;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-content);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.glitch-text.is-glitching::before,
.glitch-text.is-glitching::after {
  opacity: 0.8;
}

.glitch-text.is-glitching::before {
  left: 2px;
  text-shadow: -2px 0 red;
  animation: glitch-anim-1 0.2s infinite linear alternate-reverse;
}

.glitch-text.is-glitching::after {
  left: -2px;
  text-shadow: -2px 0 blue;
  animation: glitch-anim-2 0.3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0% { clip-path: inset(20% 0 80% 0); }
  20% { clip-path: inset(60% 0 10% 0); }
  40% { clip-path: inset(40% 0 50% 0); }
  60% { clip-path: inset(80% 0 5% 0); }
  80% { clip-path: inset(10% 0 70% 0); }
  100% { clip-path: inset(30% 0 20% 0); }
}

@keyframes glitch-anim-2 {
  0% { clip-path: inset(10% 0 60% 0); }
  20% { clip-path: inset(30% 0 20% 0); }
  40% { clip-path: inset(70% 0 10% 0); }
  60% { clip-path: inset(20% 0 50% 0); }
  80% { clip-path: inset(50% 0 30% 0); }
  100% { clip-path: inset(5% 0 80% 0); }
}

/* ==========================================================================
   PAGE SECTION — Homepage #page teaser with slide navigation
   ========================================================================== */

/* Background Layer 1 — full-bleed cover */
.page-bg-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.page-bg-img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.95; /* Sharp diagonal grid checkerboard */
}

/* Foreground Layer 2 — flush-bottom, independent parallax */
.page-fg-layer {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: row; /* Override inherited .anim-layer column flow */
  justify-content: center; /* Horizontally center character */
  align-items: flex-end; /* Vertically align to bottom edge */
  pointer-events: none;
}

.page-fg-img {
  max-height: 95vh;
  width: auto;
  max-width: 50%;
  object-fit: contain;
}

/* Glass Card Backing Layer (Floating glassmorphic container panel) */
.page-glass-backing {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 6% 60px; /* Must match .page-content-layer padding exactly */
  pointer-events: none;
}

.page-glass-card {
  width: 100%;
  max-width: 1400px; /* Must match .page-content-inner max-width exactly */
  height: 100%;
  pointer-events: none;
}

/* Content Layer — 2-column layout */
.page-content-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 6% 60px;
  pointer-events: auto !important; /* Force clicks to bypass the parent anim-layer pointer-events none */
}

.page-content-inner {
  display: flex;
  width: 100%;
  max-width: 1400px;
  height: 100%;
  gap: 50px;
  align-items: stretch; /* Stretch to fill full height */
}

/* Left Column — title, subtitle, nav buttons */
.page-left {
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Align elements to the bottom-left */
  align-items: flex-start;
  padding-bottom: 20px;
  z-index: 15;
  pointer-events: auto;
}

.page-title-wrap {
  margin-bottom: 25px;
}

.page-title {
  font-family: 'Outfit', var(--font-primary);
  font-size: clamp(2.8rem, 5.5vw, 4.8rem);
  font-weight: 900;
  color: var(--text-white);
  line-height: 1.0;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}

.page-subtitle {
  font-family: 'Outfit', var(--font-primary);
  font-size: clamp(2.8rem, 5.5vw, 4.8rem);
  font-weight: 900;
  color: var(--accent-yellow);
  line-height: 1.0;
  margin-top: 5px;
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}

.page-nav-buttons-container {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

.page-nav-buttons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0px rgba(255,255,255,0.1);
  pointer-events: auto;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 24px;
  font-family: 'Outfit', var(--font-primary);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-white);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

.page-btn:hover {
  transform: translateY(-1.5px);
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.page-btn:active {
  transform: scale(0.96);
}

/* Right Column — About text, OPEN PAGE, Gallery */
.page-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Right align elements */
  justify-content: space-between; /* Separate About text group (top/middle) & Gallery (bottom) */
  padding-bottom: 20px;
  z-index: 15;
  pointer-events: auto;
}

.page-about-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  margin-top: auto; /* Vertically centers the group above the bottom gallery */
  margin-bottom: auto;
}

.page-about-heading {
  font-family: 'Outfit', var(--font-primary);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 900;
  color: var(--text-white);
  margin-top: 0;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.page-about-text {
  font-family: 'Inter', var(--font-secondary);
  font-size: 1.05rem;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.6;
  white-space: pre-line;
  margin-bottom: 30px;
  max-width: 440px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.page-open-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 38px;
  font-family: 'Outfit', var(--font-primary);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-white);
  cursor: pointer;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 25px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255,255,255,0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

.page-open-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.07));
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255,255,255,0.25);
}

/* Gallery — 3 glass boxes aligned horizontally at bottom-right */
.page-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  width: 100%;
  max-width: 480px;
  margin-top: auto; /* Push gallery flush to the bottom */
}

.page-gallery-box {
  aspect-ratio: 1.05 / 1; /* Portrait / square shape matching mockup */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(35px);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255,255,255,0.15);
  padding: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-gallery-box:hover {
  transform: translateY(-6px) scale(1.03);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

.page-gallery-img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 18.5px; /* Prevent image from bleeding out of box borders */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Slide Transition Animations (Homepage Page Section) */
.page-content-inner.slide-out-left {
  animation: pageSlideOutLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.page-content-inner.slide-in-right {
  animation: pageSlideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.page-content-inner.slide-out-right {
  animation: pageSlideOutRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.page-content-inner.slide-in-left {
  animation: pageSlideInLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pageSlideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-80px); }
}
@keyframes pageSlideInRight {
  from { opacity: 0; transform: translateX(80px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes pageSlideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(80px); }
}
@keyframes pageSlideInLeft {
  from { opacity: 0; transform: translateX(-80px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Mobile Responsive — Page Section */
@media (max-width: 768px) {
  .page-content-inner {
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;
    padding-bottom: 20px;
    align-items: center;
  }
  .page-left {
    flex: none;
    padding-bottom: 0;
    order: 1;
    align-items: center;
    text-align: center;
  }
  .page-right {
    flex: none;
    order: 2;
    align-items: center;
    justify-content: center;
  }
  .page-about-group {
    align-items: center;
    text-align: center;
  }
  .page-title, .page-subtitle {
    font-size: clamp(1.8rem, 8vw, 3rem);
    text-align: center;
  }
  .page-about-heading {
    font-size: 1.8rem;
  }
  .page-gallery {
    max-width: 100%;
    justify-content: center;
  }
  .page-fg-img {
    max-width: 60%;
    max-height: 50vh;
  }
  .page-nav-buttons-container {
    justify-content: center;
  }
  .page-nav-buttons {
    gap: 6px;
  }
  .page-btn {
    padding: 8px 16px;
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   OUR-PAGE TEMPLATE — Floating capsule navbar + section transitions
   ========================================================================== */

/* Floating Capsule Navbar */
.ourpage-navbar {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  z-index: 999;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border-radius: 50px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ourpage-navbar-logo {
  width: 42px; height: 42px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.ourpage-navbar-logo:hover { transform: scale(1.1); }

.ourpage-home-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--text-white);
  font-size: 1.1rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.ourpage-home-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

/* Title capsule — auto-width */
.ourpage-title-capsule {
  padding: 8px 24px;
  background: linear-gradient(to bottom, #4e505a, #292a32);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4),
              inset 0 1px 1px rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}
.ourpage-title-capsule::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.12), transparent);
  border-radius: 30px 30px 0 0;
  pointer-events: none;
}
.ourpage-title-capsule:hover {
  background: linear-gradient(to bottom, #5e606a, #393a42);
}

.ourpage-title-text {
  font-family: 'Outfit', var(--font-primary);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-white);
  white-space: nowrap;
  letter-spacing: 0.5px;
}

/* Language toggle (reuses existing pattern) */
.ourpage-lang-btn {
  padding: 6px 12px;
  background: var(--accent-yellow);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 0.85rem;
  color: #1a1a1a;
  transition: all 0.3s ease;
}
.ourpage-lang-btn:hover { transform: scale(1.05); }

/* Section container */
.ourpage-section-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

/* Individual section wrapper */
.ourpage-section {
  position: absolute;
  top: 0; left: 0;
  width: 100%; min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: visible; /* FIX: was 'auto' — caused double-scroll trap inside page scroll */
  padding: 90px 5% 40px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
}

.ourpage-section.active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

/* 2-Layer Background per section */
.ourpage-layer1 {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
.ourpage-layer1 img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.ourpage-layer2 {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}
.ourpage-layer2 img {
  max-height: 85vh;
  width: auto;
  object-fit: contain;
}

/* Section content area */
.ourpage-section-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.ourpage-section-title {
  font-family: 'Outfit', var(--font-primary);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 15px;
  word-break: break-word;
}

.ourpage-section-desc {
  font-size: 1rem;
  line-height: 1.7;
  max-width: 650px;
  white-space: pre-line;
  margin-bottom: 30px;
}

/* Gallery glass boxes (our-page) */
.ourpage-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  width: 100%;
  max-width: 700px;
  margin-bottom: 30px;
}

.ourpage-gallery-box {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 18px;
  background: var(--apple-glass-bg);
  backdrop-filter: var(--apple-glass-blur);
  border: 1px solid var(--apple-glass-border);
  box-shadow: var(--apple-glass-shadow);
}

.ourpage-gallery-box img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

/* Section nav (Back/Next) for our-page */
.ourpage-nav {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center; /* Center align buttons vertically */
  gap: 12px;
  z-index: 100;
}

.ourpage-nav-btn {
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ourpage-nav-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}
.ourpage-nav-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Section slide transitions (our-page) */
.ourpage-section.slide-in-right {
  animation: ourpageSlideInRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ourpage-section.slide-in-left {
  animation: ourpageSlideInLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ourpage-section.slide-out-left {
  animation: ourpageSlideOutLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ourpage-section.slide-out-right {
  animation: ourpageSlideOutRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ourpageSlideInRight {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes ourpageSlideInLeft {
  from { opacity: 0; transform: translateX(-100%); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes ourpageSlideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-100%); }
}
@keyframes ourpageSlideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(100%); }
}

/* Light theme variant for sections */
.ourpage-section.theme-light {
  background: #f5f5f5;
  color: #1a1a1a;
}
.ourpage-section.theme-light .ourpage-section-desc {
  color: #444;
}

/* Mobile — Our-Page */
@media (max-width: 768px) {
  .ourpage-navbar {
    padding: 5px 8px;
    gap: 5px;
    top: 10px;
  }
  .ourpage-navbar-logo {
    width: 34px; height: 34px;
  }
  .ourpage-home-btn {
    width: 34px; height: 34px;
    font-size: 1rem;
  }
  .ourpage-title-capsule {
    padding: 6px 14px;
  }
  .ourpage-title-text {
    font-size: 0.8rem;
  }
  .ourpage-section {
    padding: 80px 4% 100px;
  }
  .ourpage-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .ourpage-nav {
    bottom: 15px;
    gap: 8px;
  }
  .ourpage-nav-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
}

/* ══════════════════════════════════════════════════════════════ */
/* CREATIVE SERVICES PAGE - STRICT 3 COLUMN GRID                  */
/* ══════════════════════════════════════════════════════════════ */

.creative-services-grid {
  display: grid !important;
  /* Kunci selalu 3 kolom di SEMUA ukuran layar */
  grid-template-columns: repeat(3, 1fr) !important;
  /* Proportional gap scaling */
  gap: clamp(10px, 2vw, 30px);
  width: 100%;
}

.cs-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Border radius yang menyesuaikan ukuran layar */
  border-radius: clamp(10px, 1.5vw, 24px);
  /* Tambahan padding jika diperlukan, tapi kita pakai full width image */
}

.cs-card-img-wrapper {
  width: 100%;
  /* Aspek rasio gambar, misalnya 16:9 atau square */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cs-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

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

.cs-card-content {
  /* Proportional padding */
  padding: clamp(10px, 1.5vw, 25px);
  display: flex;
  flex-direction: column;
  /* Proportional gap */
  gap: clamp(5px, 0.8vw, 12px);
}

.cs-card-title {
  /* Font size scaling */
  font-size: clamp(0.7rem, 1.2vw, 1.5rem);
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

.cs-card-desc {
  /* Font size scaling */
  font-size: clamp(0.55rem, 0.9vw, 1rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.4;
  /* Potong teks jika terlalu panjang (opsional) */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Button style untuk aksi di What We Do */
.btn-glass-primary {
  padding: 10px 24px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  color: #fff;
  font-size: clamp(0.8rem, 1vw, 1rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.btn-glass-primary:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* ==========================================================================
   MEDIA SECTION — MOBILE LAYOUT & ASSET SWAPS OVERRIDES (@media max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. Section Container Adjustment */
  #media {
    position: relative !important;
    height: auto !important;
    min-height: 100vh !important;
    padding-top: 80px !important;
    padding-bottom: 20px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }

  /* 2. Asset Swaps & Layer Stacking (z-index) */
  /* Layer 1: Background Grid (z-index: 1) */
  #media-bg-grid {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
  #media-bg-grid .ms-bg-img {
    content: url('/img/bg/mobile/bg-media-mobile-grid-pita-group-creative.webp') !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    object-fit: cover !important;
  }

  /* Layer 2: Background Earth (z-index: 2) */
  #media-bg-earth {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 65% !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }
  #media-bg-earth .ms-bg-img {
    content: url('/img/bg/mobile/bg-earth-mobile-pita-group-creative.webp') !important;
    width: 100% !important;
    height: 100% !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    transform: none !important;
    object-fit: cover !important;
    object-position: bottom center !important;
  }

  /* Layer 5: Interactive Filter (z-index: 25) */
  #media-bg-filter {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 25 !important;
    pointer-events: none !important;
  }
  #media-bg-filter .ms-bg-img {
    content: url('/img/interactive/mobile/filter-media-mobile-section-pita-group-creative.webp') !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    object-fit: cover !important;
  }

  /* 3. Title Layer ("MEDIA EVOLVED") (Urutan Paling Atas di Mobile - Order 1) */
  #media-title {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 88% !important;
    max-width: 340px !important;
    margin: 0 auto 14px auto !important;
    order: 1 !important;
    z-index: 15 !important;
    display: flex !important;
    justify-content: center !important;
  }
  .ms-title-img {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    filter: drop-shadow(0 0 20px rgba(255, 204, 0, 0.45)) !important;
  }

  /* 4. Horizontal Slider & Collage Card (Urutan Kedua - Order 2) */
  #media-collage {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 90% !important;
    max-width: 360px !important;
    margin: 0 auto 14px auto !important;
    order: 2 !important;
    z-index: 10 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .ms-collage-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Horizontal Slider Capsule */
  .ms-slider-capsule {
    display: flex !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 38px !important;
    margin-bottom: 10px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    align-items: center !important;
    overflow: hidden !important;
    z-index: 12 !important;
  }

  .ms-slider-track {
    display: flex !important;
    flex-direction: row !important;
    animation: ms-scroll-left 15s linear infinite !important;
    width: max-content !important;
    height: 100% !important;
    align-items: center !important;
  }

  .ms-slider-set {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    padding: 0 10px !important;
    height: 100% !important;
    align-items: center !important;
  }

  .ms-slider-set span {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.1em !important;
    display: inline-flex !important;
    align-items: center !important;
  }

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

  /* Main Collage Box */
  .ms-collage-img {
    width: 100% !important;
    height: auto !important;
    border-radius: 24px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
  }

  /* 5. Glassboxes Container (Urutan Ketiga - Order 3) */
  #media-glassboxes {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 90% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    order: 3 !important;
    z-index: 20 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
  }

  .ms-glassboxes-row {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 58% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .ms-glassbox {
    padding: 8px 10px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .ms-box-title {
    font-size: 0.82rem !important;
    margin-bottom: 3px !important;
    letter-spacing: 0.03em !important;
  }

  .ms-box-body {
    font-size: 0.55rem !important;
    line-height: 1.25 !important;
    opacity: 0.9 !important;
  }

  .ms-btn-open {
    margin-top: 4px !important;
    padding: 3px 12px !important;
    font-size: 0.65rem !important;
    border-radius: 20px !important;
  }

  /* 6. Melly Character Cutout (Perbesar Ukuran Aset Melly pada Mobile) */
  #media-character {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 68% !important;
    max-width: 340px !important;
    height: auto !important;
    z-index: 30 !important;
    pointer-events: none !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    top: auto !important;
    left: auto !important;
  }

  .ms-character-wrap {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    opacity: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  .ms-melly-img {
    width: 100% !important;
    height: auto !important;
    max-height: 380px !important;
    object-fit: contain !important;
    object-position: bottom right !important;
    filter: drop-shadow(-5px 0 15px rgba(0, 0, 0, 0.5)) !important;
  }
}

/* ==========================================================================
   CONTACT SECTION STYLING (GLASSMORPHIC SYSTEM & RESPONSIVE LAYOUT)
   ========================================================================== */
#contact {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 30px 0 20px 0;
}

/* Layer Backgrounds (Desktop - Crisp Sharp BG, No Unintended Blur & Non-Blocking Pointer Events) */
#contact-bg-office {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1 !important;
  pointer-events: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#contact-bg-office .contact-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none !important;
  -webkit-filter: none !important;
  pointer-events: none !important;
}

#contact-bg-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2 !important;
  pointer-events: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#contact-bg-office picture,
#contact-bg-grid picture {
  width: 100%;
  height: 100%;
  display: block;
}

#contact-bg-grid .contact-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  pointer-events: none !important;
}

/* Foreground Container (Interactive Pointer Events Enabled) */
#contact-foreground-content {
  position: relative;
  z-index: 10;
  width: 92%;
  max-width: 1380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  pointer-events: auto !important;
}

.contact-header-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  color: #ffffff;
  text-align: center;
  margin-bottom: 16px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.02em;
  pointer-events: auto !important;
  position: relative;
  z-index: 12;
}

/* Main Glass Box Outer Container (Layer 3: glass-box-section-contact-pita-group-creative.webp) */
.contact-main-glass-box {
  position: relative;
  width: 100%;
  background-image: url('../img/interactive/glass-box-section-contact-pita-group-creative.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 30px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  padding: 26px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: stretch; /* Equal height with right card */
  gap: 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  backdrop-filter: none !important; /* Prevents blurring the office background behind */
  -webkit-backdrop-filter: none !important;
  pointer-events: auto !important;
  z-index: 10;
}

/* Left Group (Container 1, 2, 3 wrapped inside inner glass card) */
.contact-left-glass-group {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch; /* Equal height columns */
  gap: 18px;
  padding: 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px); /* Isolated glass blur on inner container */
  -webkit-backdrop-filter: blur(12px);
  box-sizing: border-box;
  pointer-events: auto !important;
  position: relative;
  z-index: 12;
}

/* Enforce Strict Clickability for Form Controls, Buttons, Links, & Inputs */
.contact-box,
.contact-email-form,
.contact-form-group,
.contact-input,
.contact-select,
.contact-textarea,
.contact-submit-btn,
.contact-wa-buttons,
.contact-wa-btn,
.contact-email-badges,
.contact-email-badge,
.contact-social-icons-row,
.social-icon-link,
.contact-btn-download,
#download-company-profile-btn {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 20 !important;
}

/* Individual Card Styling (Containers 1, 2, 3 - Equal Heights) */
.contact-box {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%; /* Equal height */
  color: #111111;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.contact-box-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  text-align: center;
  color: #000000;
  margin: 0 0 14px 0;
  letter-spacing: 0.02em;
}

/* Container 1: Send Email Form */
.contact-email-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
  justify-content: space-between;
}

.contact-form-group {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.contact-form-group label {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: #333333;
  margin-bottom: 3px;
}

.contact-form-group .opt-label {
  font-weight: 400;
  color: #888888;
  font-size: 0.62rem;
}

.contact-input,
.contact-select,
.contact-textarea {
  width: 100%;
  border: 1.5px solid #d0d5dd;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 0.74rem;
  font-family: 'Inter', sans-serif;
  box-sizing: border-box;
  background: #fafafa;
  color: #111111;
  transition: all 0.2s ease;
}

.contact-input:focus,
.contact-select:focus,
.contact-textarea:focus {
  border-color: #0055ff;
  outline: none;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 85, 255, 0.15);
}

.contact-textarea {
  resize: vertical;
  min-height: 60px;
}

.contact-submit-btn {
  width: auto;
  display: inline-block;
  background: #000000;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  border-radius: 3px;
  padding: 7px 18px;
  border: none;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.3s ease, transform 0.2s ease;
}

.contact-submit-btn:hover {
  background: var(--accent-yellow);
  color: #000000;
  transform: translateY(-2px);
}

/* Container 2: Location, WhatsApp, Email */
.contact-detail-group {
  margin-bottom: 14px;
  text-align: center;
}

.contact-detail-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #222222;
  margin: 4px 0 0 0;
}

.contact-wa-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.contact-wa-btn {
  display: block;
  background: #1e7e16;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  border-radius: 20px;
  padding: 9px 10px;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(30, 126, 22, 0.3);
}

.contact-wa-btn:hover {
  background: #25a21a;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(30, 126, 22, 0.4);
}

.contact-email-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.contact-email-badge {
  display: block;
  background: #0055ff;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  border-radius: 20px;
  padding: 8px 10px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 85, 255, 0.3);
}

/* Container 3: Social Media & Download Profile */
.contact-social-grid-wrapper {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
}

.contact-social-grid-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

.contact-social-icons-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 0 4px;
}

.social-icon-link {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #ffffff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.social-icon-link:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.icon-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); }
.icon-yt { background: #ff0000; }
.icon-li { background: #0077b5; }
.icon-tt { background: #000000; }
.icon-pin { background: #bd081c; }
.icon-be { background: #0057ff; }

.contact-btn-download {
  display: block;
  width: 100%;
  background: #ff8800;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  border-radius: 20px;
  padding: 9px 0;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 136, 0, 0.35);
  margin-top: auto;
}

.contact-btn-download:hover {
  background: #ffa024;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 136, 0, 0.5);
}

/* Container 4: About Card (Right Side in Layer 3 - Equal Height) */
.contact-right-about-card {
  width: 32%;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #000000;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.contact-about-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.contact-face-off-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  filter: brightness(0.85);
}

.contact-about-content {
  position: relative;
  z-index: 2;
  padding: 28px 24px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 65%, transparent 100%);
}

.contact-about-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 2.8rem;
  color: #ffffff;
  margin: 0 0 14px 0;
  letter-spacing: 0.04em;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9);
}

.contact-about-title .about-accent {
  color: #ffd700;
  background: linear-gradient(180deg, #ffffff 0%, #ffe600 45%, #ffb700 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(255, 215, 0, 0.6));
}

.contact-about-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}

/* ==========================================================================
   CONTACT SECTION — DESKTOP LAYOUT OVERRIDES (@media (min-width: 769px))
   ========================================================================== */
@media (min-width: 769px) {
  #contact {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 30px 0 20px 0;
  }

  /* 1. BRIGHT, SHARP BACKGROUND & VIGNETTE/BLUR REMOVAL */
  #contact-bg-office .contact-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none !important;
    opacity: 1 !important;
  }

  #contact-bg-grid .contact-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85 !important;
    filter: none !important;
  }

  /* 2. MAIN GLASS BOX & INNER CARDS (EQUAL HEIGHT 100%) */
  .contact-main-glass-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 22px !important;
    padding: 26px !important;
    border-radius: 30px !important;
    background-image: url('../img/interactive/glass-box-section-contact-pita-group-creative.webp') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  .contact-left-glass-group {
    flex: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    align-items: stretch !important;
    gap: 18px !important;
    padding: 20px !important;
    border-radius: 24px !important;
  }

  .contact-box {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    padding: 20px 16px !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  }

  /* Container 1: Send Email Form */
  .contact-box-email .contact-email-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex-grow: 1 !important;
    justify-content: space-between !important;
  }

  .contact-box-email .contact-form-group label {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #333333 !important;
    margin-bottom: 2px !important;
  }

  .contact-box-email .contact-input,
  .contact-box-email .contact-select,
  .contact-box-email .contact-textarea {
    padding: 6px 9px !important;
    font-size: 0.72rem !important;
    border-radius: 10px !important;
    border: 1.5px solid #d0d5dd !important;
    background: #fafafa !important;
  }

  .contact-box-email .contact-textarea {
    min-height: 55px !important;
    resize: vertical !important;
  }

  .contact-box-email .contact-submit-btn {
    padding: 8px 0 !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
    margin-top: 6px !important;
    background: #000000 !important;
    color: #ffffff !important;
  }

  /* Container 2: Location, WhatsApp, Email */
  .contact-box-detail {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    text-align: center !important;
  }

  .contact-box-detail .contact-box-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    margin-bottom: 4px !important;
  }

  .contact-box-detail .contact-detail-group {
    margin-bottom: 6px !important;
  }

  .contact-box-detail .contact-detail-text {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #222222 !important;
    margin: 2px 0 0 0 !important;
  }

  .contact-box-detail .contact-wa-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-top: 4px !important;
  }

  .contact-box-detail .contact-wa-btn {
    padding: 8px 10px !important;
    font-size: 0.68rem !important;
    border-radius: 20px !important;
  }

  .contact-box-detail .contact-email-badges {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-top: 4px !important;
  }

  .contact-box-detail .contact-email-badge {
    padding: 8px 10px !important;
    font-size: 0.63rem !important;
    border-radius: 20px !important;
  }

  /* Container 3: Social Media & Download Profile */
  .contact-box-social {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
  }

  .contact-box-social .contact-social-grid-wrapper {
    margin-bottom: 8px !important;
  }

  .contact-box-social .contact-social-icons-row {
    margin-bottom: 8px !important;
    padding: 0 2px !important;
  }

  .contact-box-social .contact-btn-download {
    padding: 8px 0 !important;
    font-size: 0.7rem !important;
    border-radius: 20px !important;
    margin-top: auto !important;
  }

  /* 3. CONTAINER 4 (TV ROBOT ARTWORK CARD) - CLEAN & UNOBSTRUCTED */
  .contact-right-about-card {
    width: 32% !important;
    position: relative !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: #000000 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  }

  .contact-right-about-card .contact-face-off-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    filter: brightness(1) !important; /* Full bright clean artwork matching UIUX-desktop_2.jpg */
  }

  /* Unobstructed artwork in desktop matching UIUX-desktop_2.jpg */
  .contact-right-about-card .contact-about-content {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%) !important;
    height: 100% !important;
  }
}

/* ==========================================================================
   CONTACT SECTION — MOBILE LAYOUT OVERRIDES (@media max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. CRITICAL VISIBILITY & SECTION CONTAINER FIX */
  #contact {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 100vh !important;
    padding-top: 100px !important; /* Prevents Floating Navbar overlap */
    padding-bottom: 50px !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10 !important;
  }

  /* 2. SWAP & FIX MOBILE BACKGROUND LAYERS */
  /* Layer 1: Office Mobile Background */
  #contact-bg-office {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  #contact-bg-office .contact-bg-img {
    content: url('../img/bg/mobile/bg-office-mobile-section-contact-pita-group-creative.webp') !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
    filter: none !important;
  }

  /* Layer 2: Grid Mobile Background */
  #contact-bg-grid {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
    pointer-events: none !important;
    filter: none !important;
    transform: none !important;
  }

  #contact-bg-grid .contact-bg-img {
    content: url('../img/bg/mobile/bg-grid-mobile-section-contact-pita-group-creative.webp') !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0.85 !important;
    filter: none !important;
  }

  /* Layer 3 / Foreground Content Wrapper */
  #contact-foreground-content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 94% !important;
    max-width: 480px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  /* Ensure all child animation elements inside #contact are strictly visible */
  #contact .glitch-reveal,
  #contact .anim-layer {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
  }

  /* Judul Utama */
  .contact-header-title {
    order: 1 !important;
    font-size: 1.5rem !important;
    margin-bottom: 16px !important;
    color: #ffffff !important;
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* 3. MAIN GLASS OUTER BOX (Layer 3 Mobile Asset) */
  .contact-main-glass-box {
    order: 2 !important;
    background-image: url('../img/interactive/mobile/glass-box-mobile-section-contact-pita-group-creative.webp') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 16px !important;
    gap: 16px !important;
    border-radius: 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 10 !important;
  }

  /* [POSISI 1] CONTAINER ABOUT (Paling Atas, Di Luar Inner Glass Box) */
  .contact-right-about-card {
    width: 100% !important;
    min-height: 330px !important;
    order: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    border-radius: 22px !important;
    position: relative !important;
    overflow: hidden !important;
    background: #000000 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  }

  .contact-about-content {
    position: relative !important;
    z-index: 2 !important;
    padding: 24px 20px !important;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 65%, rgba(0, 0, 0, 0.75) 100%) !important;
  }

  .contact-about-title {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 900 !important;
    font-size: 2.2rem !important;
    color: #ffffff !important;
    margin: 0 0 10px 0 !important;
    letter-spacing: 0.04em !important;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9) !important;
  }

  .contact-about-desc {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    margin: 0 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95) !important;
  }

  .contact-face-off-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    filter: brightness(0.85) !important;
  }

  /* INNER GLASS BOX (Membungkus 3 Kartu Putih di Bawahnya) */
  .contact-left-glass-group {
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 16px !important;
    width: 100% !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* STACKING ORDER DI DALAM INNER GLASS BOX:
     [POSISI 2] Kartu Social Media
     [POSISI 3] Kartu Location & WhatsApp & Email
     [POSISI 4] Kartu Send Email Form
  */
  .contact-box-social {
    order: 1 !important;
  }

  .contact-box-detail {
    order: 2 !important;
  }

  .contact-box-email {
    order: 3 !important;
  }

  .contact-box {
    width: 100% !important;
    padding: 20px 16px !important;
    border-radius: 18px !important;
    height: auto !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-sizing: border-box !important;
  }

  /* Form Fields Hidden on Mobile to match UI/UX Reference */
  .mobile-hidden-field {
    display: none !important;
  }
}

/* ==========================================================================
   GLOBAL BRAND LOGO & B&W GLASS STYLING RULES
   ========================================================================== */
/* EXCLUDE all main brand logos under img/logo/ from B&W filter so they retain 100% original color */
img[src*="img/logo/"],
.navbar-logo-img,
.pillars-card-logo,
.cs-card-img-wrapper img {
  filter: none !important;
}

/* Apply Black & White Glass style ONLY to social media icons, home icons & secondary badges */
.social-icon-link,
.home-icon-bw,
.icon-bw-glass {
  filter: grayscale(100%) contrast(125%) brightness(1.15) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  transition: filter 0.35s ease, transform 0.35s ease;
}

.social-icon-link:hover,
.home-icon-bw:hover,
.icon-bw-glass:hover {
  filter: grayscale(0%) contrast(100%) brightness(1) drop-shadow(0 4px 14px rgba(255, 204, 0, 0.6));
  transform: scale(1.08);
}


/* ==========================================================================
   SERVICES SECTION — MOBILE LAYOUT OVERRIDES (EXACT MATCH TO REFERENCE IMAGE)
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. Mobile Background Layers & Image Asset Swaps */
  #services.cinematic-section {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: visible !important;
    padding-top: 90px !important;
    padding-bottom: 60px !important;
  }

  #services-bg-sky .services-sky-img {
    content: url('../img/bg/mobile/bg-services-mobile-pita-group-creative.webp') !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
  }

  #services-bg-grid .services-grid-img {
    content: url('../img/bg/mobile/bg-grid-mobile-section-pita-group-creative.webp') !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0.85 !important;
    mix-blend-mode: normal !important;
  }

  #services-bg-athena .services-athena-img {
    content: url('../img/interactive/mobile/athena-section-mobile-pita-group-creative.webp') !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0.9 !important;
  }

  #services-layer-foreground {
    position: relative !important;
    height: auto !important;
    min-height: 100vh !important;
    padding: 0 10px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }

  /* 2. Main Outer Glass Panel Frame Box (1080 x 2500 Portrait Ratio Base) */
  .services-main-panel {
    position: relative !important;
    width: 94% !important;
    max-width: 440px !important;
    height: auto !important;
    min-height: auto !important;
    margin: 60px auto 0 auto !important;
    padding: 28px 18px 20px 18px !important;
    border-radius: 36px !important;
    border: 2.5px solid rgba(255, 255, 255, 0.9) !important;
    background: rgba(18, 22, 30, 0.35) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.65),
                inset 0 1px 2px rgba(255, 255, 255, 0.4),
                0 0 20px rgba(255, 255, 255, 0.15) !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Mobile Glass Box Bevel Backing Asset Replacement */
  .services-panel-bevel-backing {
    display: block !important;
    content: url('../img/interactive/mobile/glass-box-home-section-services-pita-group-creative.png.webp') !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 0.9 !important;
    border-radius: 34px !important;
  }

  /* 3. Header Title ("WHAT WE DO?") */
  .services-header {
    width: 100% !important;
    margin-left: 0 !important;
    margin-bottom: 22px !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 5 !important;
  }

  .services-what-we-do-img {
    height: auto !important;
    max-height: 54px !important;
    width: auto !important;
    max-width: 86% !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8)) !important;
  }

  /* 4. Sub Cards Grid: Flex 1-Column Reordered to Match Reference Image */
  .services-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-bottom: 22px !important;
    position: relative !important;
    z-index: 5 !important;
  }

  /* Card 1 in reference: 2D/3D ANIMATION (nth-child 2 in HTML) */
  .services-grid > .services-sub-card:nth-child(2) {
    order: 1 !important;
  }
  /* Card 2 in reference: BRAND IDENTITY (nth-child 1 in HTML) */
  .services-grid > .services-sub-card:nth-child(1) {
    order: 2 !important;
  }
  /* Card 3 in reference: ROBOTIC AND IOT (nth-child 4 in HTML) */
  .services-grid > .services-sub-card:nth-child(4) {
    order: 3 !important;
  }
  /* Card 4 in reference: CUSTOM WEBSITE (nth-child 3 in HTML) */
  .services-grid > .services-sub-card:nth-child(3) {
    order: 4 !important;
  }

  .services-sub-card {
    padding: 16px 18px !important;
    border-radius: 18px !important;
    background: rgba(35, 40, 52, 0.45) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45),
                inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    gap: 8px !important;
  }

  .service-item-title {
    color: #FFD700 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9) !important;
  }

  .yellow-bullet {
    color: #FFD700 !important;
    font-size: 0.8rem !important;
    flex-shrink: 0 !important;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.6) !important;
  }

  /* 5. Action Buttons (Stacked Vertically: CREATIVE SERVICES top, WORKFLOW bottom) */
  .services-action-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-bottom: 15px !important;
    position: relative !important;
    z-index: 50 !important;
  }

  .services-action-buttons > a:nth-child(2) { order: 1 !important; } /* CREATIVE SERVICES */
  .services-action-buttons > a:nth-child(1) { order: 2 !important; } /* WORKFLOW */

  .services-action-buttons .btn-glass-primary {
    width: 82% !important;
    max-width: 270px !important;
    padding: 11px 20px !important;
    background: rgba(45, 40, 35, 0.65) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 25px !important;
    color: #FFFFFF !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5),
                inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  }

  /* 6. Footer Text Hidden on Mobile */
  .services-footer {
    display: none !important;
  }

  /* 7. Character Girl-Mecha & Red Slogan Badge */
  .services-character-container {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 10 !important;
    overflow: visible !important;
  }

  .girl-mecha-img {
    display: block !important;
    position: relative !important;
    width: 88% !important;
    max-width: 320px !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    right: auto !important;
    bottom: auto !important;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.8)) !important;
    pointer-events: auto !important;
  }

  .slogan-badge-img {
    display: block !important;
    position: absolute !important;
    bottom: 10% !important;
    left: 50% !important;
    transform: translateX(-50%) rotate(-12deg) !important;
    width: 95% !important;
    max-width: 340px !important;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.9)) !important;
  }

  /* 8. STRICT MOBILE DOUBLE SCROLLBAR & SNAP FIX (SECTION "WHAT WE DO?") */
  #services,
  #services-layer-background,
  #services-layer-middle,
  #services-layer-foreground,
  #services .services-main-panel,
  #services .services-grid,
  #services .services-sub-card,
  #services .services-character-container,
  #services .services-action-buttons {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    max-height: none !important;
    height: auto !important;
    scroll-snap-type: none !important;
    scroll-snap-align: none !important;
  }

  /* 9. BLURRY TEXT FIX, REVEAL CLEANUP & GLASS ISOLATION (SECTION "WHAT WE DO?") */
  body.intro-done #services .anim-layer,
  body.intro-done #services .glitch-reveal,
  #services .visible,
  #services .active,
  #services .revealed {
    filter: none !important;
  }

  #services,
  #services .service-item-title,
  #services .yellow-bullet,
  #services .btn-glass-primary,
  #services .services-header {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
  }

  #services .service-item-title,
  #services .yellow-bullet,
  #services .services-header,
  #services .btn-glass-primary,
  #services .services-grid,
  #services .services-action-buttons {
    position: relative !important;
    z-index: 10 !important;
    filter: none !important;
    -webkit-filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ==========================================================================
   MOBILE GYROSCOPE FLOATING GLASS BUTTON & SUBTLE DEBUG BADGE
   ========================================================================== */
#enable-gyro {
  position: fixed !important;
  bottom: 20px !important;
  left: 15px !important;
  right: auto !important;
  z-index: 9999 !important;
  padding: 7px 14px !important;
  border-radius: 20px !important;
  background: rgba(25, 30, 40, 0.45) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  cursor: pointer !important;
  opacity: 0.8 !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#enable-gyro.active-gyro {
  background: rgba(255, 204, 0, 0.22) !important;
  border-color: rgba(255, 204, 0, 0.6) !important;
  color: #ffcc00 !important;
  box-shadow: 0 4px 18px rgba(255, 204, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
  opacity: 0.95 !important;
}

#enable-gyro:active {
  transform: scale(0.94) !important;
}

#gyro-debug {
  position: fixed !important;
  bottom: 54px !important;
  left: 15px !important;
  right: auto !important;
  z-index: 9998 !important;
  font-size: 9px !important;
  font-family: monospace !important;
  background: rgba(15, 18, 25, 0.4) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: rgba(255, 204, 0, 0.85) !important;
  padding: 3px 8px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  pointer-events: none !important;
  opacity: 0.7 !important;
}

@media (min-width: 769px) {
  #enable-gyro,
  #gyro-debug {
    display: none !important;
  }
}

/* ==========================================================================
   MOBILE DOUBLE-SCROLL FIX & SMOOTH SCROLL ENFORCEMENT
   ========================================================================== */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    width: 100vw !important;
    min-height: 100vh !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Disable inner scroll on layout containers to prevent nested double scrollbars */
  .main-content, 
  .content-section, 
  .ourpage-section-container,
  .scroll-container,
  main {
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* ==========================================================================
   HIDE GOOGLE TRANSLATE DEFAULT WIDGET & BANNER
   ========================================================================== */
body {
  top: 0px !important; 
}
.goog-te-banner-frame.skiptranslate, 
.goog-te-gadget-icon {
  display: none !important;
}
.skiptranslate iframe {
  display: none !important;
}
#goog-gt-tt {
  display: none !important;
  top: 0px !important;
}
#google_translate_element,
.goog-te-spinner-pos,
.goog-te-spinner-animation {
  display: none !important;
}
.VIpgJd-ZVi9od-ORHb-OEVmcd {
  display: none !important;
}

/* ==========================================================================
   GLOBAL FIXED COPYRIGHT FOOTER
   Single source of truth — replaces the old per-section .footer-simple.
   Desktop shows full text; narrow/mobile shows short text via CSS toggle.
   Height is auto (not fixed px) so text never clips if the font scales.
   z-index 9990: below gyro button (9999) and mobile drawer (10000).
   ========================================================================== */
.pgc-global-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: 36px;
  height: auto; /* lets text wrap gracefully rather than clip */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 10, 17, 0.82);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 9990;
  pointer-events: none; /* pass-through clicks on desktop */
  box-sizing: border-box;
}

/* Desktop: show full text, hide short text */
.footer-text-desktop {
  display: inline;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
  white-space: nowrap; /* prevent mid-word break on desktop */
  text-align: center;
}

.footer-text-mobile {
  display: none;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
  text-align: center;
}

/* Narrow desktop (< 860px): swap to short text before font size needs to wrap */
@media (max-width: 860px) {
  .footer-text-desktop {
    display: none;
  }
  .footer-text-mobile {
    display: inline;
  }
}

/* On mobile: short text always, enable pointer events for gyro area */
@media (max-width: 768px) {
  .pgc-global-footer {
    pointer-events: none; /* still pass-through on mobile content */
    font-size: 0.65rem;
    min-height: 32px;
  }
  .footer-text-desktop {
    display: none !important;
  }
  .footer-text-mobile {
    display: inline !important;
    font-size: 0.65rem;
  }
}

/* ==========================================================================
   BODY BOTTOM PADDING — clear fixed footer so last-section content is
   never hidden behind it. Applied to both desktop and mobile.
   Uses env() for iPhone home-indicator safety.
   ========================================================================== */
body {
  /* Stack: footer height (36px) + safe-area inset (0px on desktop, up to 34px on iPhone) */
  padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px));
}

/* ==========================================================================
   SAFE-AREA INSET — iOS Notch (top) & Home Indicator (bottom)
   Only adds padding where it doesn't already exist. Navbar already uses
   position:fixed with top:20px; we add env() on top of that.
   ========================================================================== */
@supports (padding-top: env(safe-area-inset-top)) {
  .navbar-wrapper {
    /* Push the fixed navbar down past the notch on iPhone */
    top: calc(20px + env(safe-area-inset-top, 0px)) !important;
  }
}

/* ==========================================================================
   DOUBLE-SCROLL FIX — ADD .ourpage-section to overflow-y:visible block
   The L6048 block correctly fixes .ourpage-section-container but missed
   .ourpage-section itself (which has overflow-y: auto), creating a nested
   scroll trap on mobile.
   ========================================================================== */
@media (max-width: 768px) {
  .ourpage-section {
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    position: relative !important; /* keep in normal flow */
  }
}

/* ==========================================================================
   SECTION BOTTOM CLEARANCE — prevent content from hiding under fixed footer
   Sections that are height:auto on mobile need explicit bottom padding that
   accounts for the footer height + safe-area. Targeting the last-child
   content element is fragile, so we pad the section directly.
   
   #contact already has padding-bottom:50px — bump it to include footer clearance.
   Other auto-height sections: #services, #pillars, #works, #media.
   ========================================================================== */
@media (max-width: 768px) {
  /* #contact: SUBMIT button is the last element (order:3 in .contact-box-email).
     Was: 50px. Now: 50px + 36px footer + safe-area. Ensures SUBMIT is always
     fully visible above the fixed footer bar. */
  #contact {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Ensure the SUBMIT button itself gets scroll clearance so it surfaces when
     the user focuses it (keyboard-scroll on iOS) */
  .contact-submit-btn {
    scroll-margin-bottom: calc(50px + env(safe-area-inset-bottom, 20px)) !important;
  }

  /* Other auto-height sections */
  #services.cinematic-section {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #pillars.cinematic-section,
  #pillars {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #works.cinematic-section {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #media.cinematic-section {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #about.cinematic-section {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ==========================================================================
   GYROSCOPE BUTTON REPOSITIONING — directly above fixed footer
   Old position: bottom:20px. New: footer height (32px mobile) + 8px gap
   + safe-area-inset so it stacks above the footer, never overlapping it.
   ========================================================================== */
#enable-gyro {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 44px) !important;
}

#gyro-debug {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 82px) !important;
}

/* ==========================================================================
   GLITCH-REVEAL FILTER CLEANUP — ALL SECTIONS (Mobile)
   
   The existing code has the fix only for #services (L5935) and #contact (L5493).
   Extend the same pattern to #about, #pillars, #works, #media, #page.
   
   Pattern: body.intro-done forces filter:none on ALL .anim-layer / .glitch-reveal
   elements inside each section, regardless of whether .visible has been added.
   This prevents the "stuck blurry mid-animation" bug on slow-render mobile GPUs.
   
   The global @media rule at L990 (`filter: none !important` for .glitch-reveal.visible)
   already covers the post-reveal state. This block covers the stuck-mid-animation case.
   ========================================================================== */
@media (max-width: 768px) {
  /* #about */
  body.intro-done #about .anim-layer,
  body.intro-done #about .glitch-reveal,
  #about .visible,
  #about .revealed {
    filter: none !important;
    -webkit-filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* #pillars */
  body.intro-done #pillars .anim-layer,
  body.intro-done #pillars .glitch-reveal,
  #pillars .visible,
  #pillars .revealed {
    filter: none !important;
    -webkit-filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* #works */
  body.intro-done #works .anim-layer,
  body.intro-done #works .glitch-reveal,
  #works .visible,
  #works .revealed {
    filter: none !important;
    -webkit-filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* #media */
  body.intro-done #media .anim-layer,
  body.intro-done #media .glitch-reveal,
  #media .visible,
  #media .revealed {
    filter: none !important;
    -webkit-filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* #page */
  body.intro-done #page .anim-layer,
  body.intro-done #page .glitch-reveal,
  #page .visible,
  #page .revealed {
    filter: none !important;
    -webkit-filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Text-rendering sharpness for all sections (mirrors the #services fix) */
  #about .about-header-wrapper,
  #about .about-marquee-wrapper,
  #about .about-panel-wrapper,
  #about .about-counter-wrapper,
  #pillars .pillars-header,
  #pillars .pillars-card,
  #works .works-slider-container,
  #works .works-main-container,
  #media .ms-glassbox,
  #media .ms-title-img,
  #page .page-left,
  #page .page-right {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    position: relative !important;
    z-index: 10 !important;
    filter: none !important;
    -webkit-filter: none !important;
  }
}