/* ==========================================================================
   TABLE OF CONTENTS
   1.  CORE VARIABLES & RESET
   2.  GLOBAL UTILITIES & ANIMATIONS
   3.  NAVIGATION (Desktop & Mobile Liquid Dock)
   4.  HERO SECTION (Luxury Slideshow)
   5.  SELECTED WORKS (Arch Index & Lens Dial)
   6.  DESKTOP SELECTED WORKS & LATEST GALLERY (Console & Mobile Deck)
   7.  MOBILE PREMIIUM EDITING
   7.  TRANSPARENT PRICING & WORKFLOW
   8.  MOBILE LATEST GALLERY (Mind-Boggling 3D)
   9.  FAQ SECTION (The Monolith & Mobile Deck)
   10. FOOTER (Architect Grid & Mobile Dashboard)
   11. SYSTEM & POPUPS (VIP Overlay, Notices)
   12. MOBILE SPECIFIC BACKGROUNDS (TONAL SEPARATION) <--- NEW
   ========================================================================== */

/* ==========================================================================
   1. CORE VARIABLES & RESET
   ========================================================================== */
   :root {
    /* --- GLOBAL BASE PALETTE (Darker & Richer) --- */
    --bg-white: #E6E1DC;        /* Base: Warm Taupe (was White) */
    --text-dark: #2B2420;       /* Deepest Espresso (High Contrast) */
    --text-grey: #5E544F;       /* Dark Stone */
    --accent-gold: #B09B80;     /* Antique Bronze */
  
    /* --- SECTION 2: UTILITIES --- */
    --util-divider: #A38F75;
  
    /* --- SECTION 3: NAVIGATION --- */
    --nav-glass-bg: rgba(230, 225, 220, 0.9); /* Matches Base but frosted */
    --nav-glass-border: rgba(176, 155, 128, 0.4);
    --nav-text: #3D3430;
    --nav-btn-bg: #D1C7BD;
    --nav-btn-text: #2B2420;
  
    /* --- SECTION 4: HERO SECTION (Tone: Cool Stone) --- */
    /* Distinct from body, slightly cooler/greyer to make it stand out */
    --hero-bg:      #D6D0C8;    
    --hero-text:    #3D3430;    
    --hero-gold:    #A38F75;    
    --hero-black:   #FFFFFF;    
    --hero-overlay-grad: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 50%, rgba(190, 180, 170, 0.4) 100%);
    --hero-glass:   rgba(230, 225, 220, 0.5);
    --hero-border:  rgba(163, 143, 117, 0.4);
  
    /* --- SECTION 5: SELECTED WORKS (Tone: Warm Bone) --- */
    /* Lighter than Hero to create a "breathing room" effect */
    --works-bg: #EBE5DE;        
    --works-menu-bg: #DDD5CD;   /* Slightly darker sidebar for contrast */
    --works-item-border: rgba(94, 84, 79, 0.15);
    --works-text-muted: #8C8276;
    --works-stage-bg: #CFC5BC;  /* Darker stage to frame images */
    --works-shutter: #D6CEC5;
  
    /* --- SECTION 6: PREMIUM EDITING (Tone: Deep Clay) --- */
    /* distinctly darker/warmer to feel "technical" and enclosed */
    --edit-bg: #C7beb4;         
    --edit-text: #2B2420;
    --edit-console-bg: #EAE4DD; /* Lighter console to pop against dark bg */
    --edit-glass-nav: rgba(43, 36, 32, 0.08);
  
    /* --- SECTION 7: PRICING (Tone: Gradient Shift) --- */
    /* Subtle gradient to separate it from the previous section */
    --price-card-bg: linear-gradient(145deg, rgba(230, 225, 220, 0.9) 0%, rgba(209, 199, 189, 0.95) 100%);
    --price-text-main: #3D3430;
    --price-text-light: #6E665E;
    --price-gold: #A38F75;
  
    /* --- SECTION 8: GALLERY (Tone: Medium Sand) --- */
    --gallery-bg-card: #E0D8D0;
    --gallery-border: rgba(176, 155, 128, 0.3);
  
    /* --- SECTION 9: FAQ (Tone: Solid Earth) --- */
    /* The "heaviest" section before the footer */
    --faq-bg: #C7beb4;          
    --faq-monolith-bg: #E6E1DC; /* Lighter terminal to read text easily */
    --faq-sidebar-bg: #D9D0C7;
    --faq-text: #2B2420;
    --faq-active-bg: #F7F5F2;
  
    /* --- SECTION 10: FOOTER (Tone: Dark Anchor) --- */
    /* The darkest point of the site */
    --footer-bg: #5E544F;        
    --footer-text: #F2F0ED;      
    --footer-border: rgba(255, 255, 255, 0.15);
  
    /* Fonts */
    --f-serif: "Cormorant Garamond", serif;
    --f-sans:  "Lato", sans-serif;
  }  
  html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
    /* SAFARI FIX: Stops the page from bouncing at top/bottom */
    overscroll-behavior-y: none;
    -webkit-text-size-adjust: 100%;
  }
  
  body {
    margin: 0;
    padding: 0;
    font-family: "Lato", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--text-dark);
    overflow-x: hidden;
    width: 100%;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    background-color: var(--bg-white);
  }
  
  body.no-scroll {
    overflow: hidden !important;
    height: 100vh;
  }
  
  * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Custom Light Scrollbar (Warm) */
  ::-webkit-scrollbar {
    width: 8px;
    background: #EBE5DE;
  }
  ::-webkit-scrollbar-track {
    background: #EBE5DE;
  }
  ::-webkit-scrollbar-thumb {
    background: #C2AF95;
    border: 1px solid #EBE5DE;
    border-radius: 4px;
  }
  
  /* ==========================================================================
      2. GLOBAL UTILITIES & ANIMATIONS
      ========================================================================== */
  .jax-section {
    padding: 100px 20px;
    text-align: center;
    width: 100%;
    position: relative;
    content-visibility: auto;
    contain-intrinsic-size: 1px 800px;
  }
  
  .jax-bg-dark {
    background: var(--hero-bg) !important; /* Replaced Dark with Light Hero BG */
    color: var(--hero-text);
  }
  
/* --- UPDATED TYPOGRAPHY WITH RESPONSIVE SIZING --- */

/* 1. Mobile / Default Sizes (Base) */
.section-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.5rem;        /* Mobile Size */
  margin: 0;
  line-height: 1;
  color: var(--text-dark); 
  font-weight: 400;
  letter-spacing: -0.5px;
  transition: font-size 0.3s ease; /* Smooth scaling when resizing window */
}

.section-subtitle {
  font-family: "Lato", sans-serif;
  font-size: 1.1rem;        /* Mobile Size */
  color: var(--text-grey);
  max-width: 600px;
  margin: 10px auto 0 auto;
  line-height: 1.6;
  font-weight: 300;
  transition: font-size 0.3s ease;
}

/* 2. Desktop Overrides (Screens wider than 900px) */
@media (min-width: 901px) {
  .section-title {
    font-size: 4.5rem;      /* Increased Desktop Size */
    letter-spacing: -1.5px; /* Tighter tracking for large text looks better */
  }

  .section-subtitle {
    font-size: 1.3rem;      /* Increased Desktop Size */
    max-width: 800px;       /* Allow subtitle to be wider on desktop */
  }
}  
  .section-divider {
    width: 60px;
    height: 1px;
    background: var(--util-divider);
    margin: 25px auto 35px auto;
    opacity: 0.7;
  }
  
  .col-label {
    font-family: "Lato", sans-serif;
    font-size: 0.75rem; /* Matches Selected Works Label */
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--accent-gold);
    display: block;
    margin-bottom: 15px;
  }
  
  /* --- Global Animations --- */
  @keyframes fadeDown {
    from { opacity: 0; transform: translateY(-20px); filter: blur(5px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
  }
  @keyframes fadeUpBtn {
    from { opacity: 0; transform: translateY(30px); filter: blur(5px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
  }
  @keyframes etherealEntrance {
    0% { opacity: 0; filter: blur(20px); transform: translateY(40px); }
    100% { opacity: 1; filter: blur(0); transform: translateY(0); }
  }
  
/* ==========================================================================
   3. NAVIGATION (Desktop & Mobile Liquid Dock)
   ========================================================================== */

/* --- 3.1 DESKTOP NAVIGATION (> 901px) --- */
@media (min-width: 901px) {
  /* HIDE Mobile Elements */
  .mobile-top-bar, .liquid-dock-container { display: none !important; }

  /* Main Nav Bar */
  nav {
    position: fixed; top: 30px; left: 50%; transform: translateX(-50%);
    width: auto; min-width: 600px; max-width: 1200px;
    background: var(--nav-glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--nav-glass-border); border-radius: 100px; padding: 15px 40px;
    z-index: 9999; display: flex; justify-content: center; align-items: center; gap: 40px;
    box-shadow: 0 10px 40px rgba(180, 170, 160, 0.2); /* Lighter Shadow */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    animation: slideDownNav 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  }
  nav:hover { background: rgba(255, 252, 247, 0.95); border-color: rgba(94, 84, 79, 0.1); }

  /* Logo */
  .logo img { height: 40px; width: auto; transition: transform 0.3s; filter: brightness(0.2) sepia(0.2); /* Darkened for light BG */ }
  .logo:hover img { transform: scale(1.1); }

  /* Links */
  .nav-links { display: flex; align-items: center; gap: 15px; }
  .nav-links a {
    text-decoration: none; color: var(--nav-text); padding: 10px 20px;
    font-weight: 400; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px;
    transition: 0.3s; border-radius: 30px;
  }
  .nav-links a:hover { color: var(--accent-gold); background: rgba(94, 84, 79, 0.05); }

  /* Call to Action Button */
  .btn-nav {
    background: var(--nav-btn-bg) !important; color: var(--nav-btn-text) !important; padding: 12px 30px !important;
    border-radius: 50px; box-shadow: 0 5px 20px rgba(194, 157, 125, 0.1); font-weight: 800 !important;
  }
  .btn-nav:hover {
    background: var(--accent-gold) !important; transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(194, 157, 125, 0.3);
  }
}

/* Desktop Animation */
@keyframes slideDownNav {
  from { transform: translate(-50%, -150%); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

/* --- 3.2 MOBILE NAVIGATION (<= 900px) --- */
@media (max-width: 900px) {
  /* HIDE Desktop Nav */
  nav { display: none !important; }

  /* Top Logo Bar */
  .mobile-top-bar {
    display: flex; justify-content: center; align-items: center; padding: 15px;
    position: absolute; top: 15px; left: 0; width: 100%; z-index: 100; pointer-events: none;
  }
  .mobile-top-bar img {
    height: 35px; pointer-events: auto;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)) brightness(0.2) sepia(0.2); /* Dark logo */
  }

  /* Liquid Dock Container (Fixed Bottom) */
  .liquid-dock-container {
    display: flex; flex-direction: column; align-items: center;
    position: fixed; bottom: 30px; left: 0; width: 100%; z-index: 2147483647; pointer-events: none;
  }

  /* The Round Button */
  .glass-dock-bar {
    pointer-events: auto; width: 60px; height: 60px; cursor: pointer;
    background: rgba(255, 252, 247, 0.85); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(94, 84, 79, 0.1); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 40px rgba(180, 170, 160, 0.4);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .dock-trigger-btn { background: transparent; border: none; color: var(--nav-text); font-size: 1.4rem; }

  /* Dock Open State */
  .liquid-dock-container.open .glass-dock-bar { background: var(--accent-gold); transform: rotate(90deg); }
  .liquid-dock-container.open .dock-trigger-btn { color: #FFF; }
  .liquid-dock-container.open .dock-trigger-btn i::before { content: "\f00d"; }

  /* Popup Menu */
  .glass-menu-popup {
    width: 85%; max-width: 320px;
    background: rgba(255, 252, 247, 0.95); backdrop-filter: blur(35px); -webkit-backdrop-filter: blur(35px);
    border: 1px solid rgba(94, 84, 79, 0.1); border-radius: 25px;
    padding: 15px; margin-bottom: 20px; pointer-events: auto;
    display: flex; flex-direction: column; gap: 8px;
    box-shadow: 0 25px 60px rgba(180, 170, 160, 0.3);
    opacity: 0; transform: translateY(20px) scale(0.9); transform-origin: bottom center;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); visibility: hidden;
  }
  .glass-menu-popup.active { opacity: 1; transform: translateY(0) scale(1); visibility: visible; }

  /* Menu Items */
  .menu-item {
    display: flex; align-items: center; justify-content: space-between; padding: 15px 20px;
    text-decoration: none; color: var(--nav-text); font-family: "Cormorant Garamond", serif; font-size: 1.4rem;
    border-bottom: 1px solid rgba(94, 84, 79, 0.05); opacity: 0; transform: translateY(10px); transition: all 0.3s ease;
  }
  .menu-item:last-child { color: var(--accent-gold); border-bottom: none; }
  
  /* Staggered Animation */
  .glass-menu-popup.active .menu-item { opacity: 1; transform: translateY(0); }
  .glass-menu-popup.active .menu-item:nth-child(1) { transition-delay: 0.05s; }
  .glass-menu-popup.active .menu-item:nth-child(2) { transition-delay: 0.1s; }
  .glass-menu-popup.active .menu-item:nth-child(3) { transition-delay: 0.15s; }
  .glass-menu-popup.active .menu-item:nth-child(4) { transition-delay: 0.2s; }
  .glass-menu-popup.active .menu-item:nth-child(5) { transition-delay: 0.25s; }
}  

/* ==========================================================================
   SECTION 4: HERO SECTION (Tone: Cool Stone)
   ========================================================================== */

/* 4.1 BASE STYLES & DESKTOP LAYOUT
   ========================================================================== */

/* --- Container & Backgrounds --- */
.jax-hero-new {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96% !important;
  max-width: 1600px !important;
  height: auto !important;
  max-height: 85vh;
  aspect-ratio: 16 / 9;
  margin: 20px auto !important;
  overflow: hidden;
  border-radius: 8px;
  background-color: var(--hero-bg);
  border: 1px solid var(--hero-border);
  box-shadow: 0 30px 80px rgba(61, 52, 48, 0.2);
}

/* Film Grain Texture */
.jax-hero-new::before {
  content: "";
  position: absolute;
  inset: -100%; width: 300%; height: 300%;
  z-index: 7; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
  opacity: 0.3;
  mix-blend-mode: overlay;
  animation: filmGrain 8s steps(10) infinite;
}

/* Global Gradient Overlay */
.jax-hero-new::after {
  content: "";
  position: absolute;
  inset: 0; z-index: 6; pointer-events: none;
  background: var(--hero-overlay-grad);
}

/* --- Slideshow Layers --- */
.hero-slideshow, .hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.hero-slideshow { z-index: 0; }
.hero-slide {
  object-fit: cover; opacity: 0;
  filter: brightness(1.05) contrast(1.05) saturate(0.9);
  transition: opacity 1s ease-in-out; will-change: opacity;
}
.hero-slide.active { opacity: 1; z-index: 1; }
.hero-slide.exit    { opacity: 0; z-index: 0; }

/* --- Content Frame (Glass Oval) --- */
.hero-overlay-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 1200px; 
  padding: 80px 40px; 
  
  /* Glassmorphic Settings */
  background: rgba(61, 52, 48, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2); 
  
  aspect-ratio: auto !important;
  animation: none !important;
}

/* --- Typography --- */
.hero-location-eyebrow, .hero-title-new, .hero-sub-new {
  position: relative; z-index: 2;
}

.hero-location-eyebrow {
  font-family: var(--f-serif);
  color: #EBEAE8; 
  font-style: italic; font-size: 1.25rem; letter-spacing: 4px; 
  text-transform: uppercase; font-weight: 800;
  margin-bottom: 15px; position: relative; padding-bottom: 15px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  opacity: 0; animation: smoothDrop 1s ease-out forwards 0.2s;
}
.hero-location-eyebrow::after {
  content: ""; position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%); width: 60px; height: 3px; border-radius: 2px;
  background: var(--hero-gold); 
  box-shadow: 0 0 15px var(--hero-gold);
}

.hero-title-new {
  font-family: var(--f-serif); font-style: italic; 
  font-size: clamp(4rem, 10vw, 10rem); 
  line-height: 0.9; 
  margin: 0; font-weight: 400; 
  letter-spacing: -3px;
  padding-right: 0.15em; margin-right: -0.15em;

  /* Bright Gold Streak */
  background: linear-gradient(
    120deg, 
    #A38F75 0%,
    #D6D0C8 35%,
    #FFFFFF 50%,
    #D6D0C8 65%,
    #A38F75 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));         
  opacity: 0; 
  animation: 
    slideRightBlur 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.4s,
    streakGoldAnim 5s linear infinite 1.6s;
}

.hero-sub-new {
  font-family: var(--f-serif); font-style: italic;
  font-size: 1.1rem; margin-top: 30px; letter-spacing: 4px;
  text-transform: uppercase; font-weight: 700;
  color: #EBEAE8;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  opacity: 0; animation: fadeUp 1s ease-out forwards 0.8s;
}

/* --- Buttons --- */
.hero-btn-group {
  margin-top: 50px; pointer-events: auto;
  opacity: 0; animation: fadeUp 1s ease-out forwards 1.1s;
}
.btn-hero-solid {
  position: relative; display: inline-block;
  padding: 22px 60px; border-radius: 50px; 
  background: rgba(214, 208, 200, 0.2); 
  border: 1px solid var(--hero-border); 
  color: #FFF; 
  text-transform: uppercase; font-family: var(--f-serif); font-style: italic;
  font-weight: 800; font-size: 0.9rem; letter-spacing: 4px; text-decoration: none;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  overflow: hidden; backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(61, 52, 48, 0.3); 
  z-index: 1;
}
.btn-hero-solid::after {
  content: ""; position: absolute; top: 0; left: -150%; width: 150%; height: 100%;
  background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.8) 50%, transparent 60%);
  transform: skewX(-20deg); transition: none; z-index: -1;
}
.btn-hero-solid:hover {
  background: var(--hero-gold); 
  color: #FFF; 
  border-color: var(--hero-gold);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 50px rgba(61, 52, 48, 0.4), 0 0 30px var(--hero-gold);
}
.btn-hero-solid:hover::after { left: 150%; transition: all 0.6s ease-in-out; }

/* --- Compass & Gyro System (Desktop) --- */
.hero-compass-wrapper {
  position: absolute; z-index: 100; perspective: 800px; transform-style: preserve-3d;
  opacity: 0; bottom: 50px; right: 50px; left: auto;
  animation: fadeUp 1.5s ease-out forwards 1.5s;
}
.hero-compass-wrapper::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%;
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 1px solid var(--hero-border);
  box-shadow: 0 0 30px rgba(163, 143, 117, 0.2); z-index: -1;
  animation: sonarPulseDesktop 3s infinite ease-out;
}
.compass-core-link {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 280px; height: 280px; text-decoration: none; cursor: pointer; transform-style: preserve-3d;
}
.compass-lens {
  width: 180px; height: 180px; border-radius: 50%; overflow: hidden;
  position: relative; z-index: 20; 
  background: var(--hero-bg);
  border: 2px solid rgba(255, 255, 255, 0.8); box-shadow: 0 0 40px rgba(61, 52, 48, 0.3);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.compass-lens img {
  width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) sepia(0.1); transition: all 0.3s ease;
}
.lens-iris {
  position: absolute; inset: 0; 
  background: rgba(163, 143, 117, 0.7);
  backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.8); transition: all 0.3s ease;
}
.lens-iris i { color: #FFF; font-size: 3rem; }

/* Desktop Rings */
.desktop-structure { position: absolute; inset: -20px; pointer-events: none; transform-style: preserve-3d; }
.ring-outer, .ring-middle, .ring-inner-rotate { position: absolute; border-radius: 50%; }

.ring-outer {
  inset: 0; 
  border: 1px solid rgba(255, 255, 255, 0.3); 
  border-left: 2px solid var(--hero-text); 
  border-right: 2px solid var(--hero-text);
  animation: gyroSpinY 12s linear infinite;
}
.ring-middle {
  top: 20px; left: 20px; right: 20px; bottom: 20px;
  border: 1px solid var(--hero-border); 
  border-top: 3px solid var(--hero-gold);
  animation: gyroSpinX 9s linear infinite;
}
.ring-inner-rotate {
  top: 40px; left: 40px; right: 40px; bottom: 40px; border: 1px dotted rgba(255, 255, 255, 0.6);
  animation: rotateFlat 20s linear infinite;
}

/* Desktop Hover Effects */
.hero-compass-wrapper:hover .compass-lens { transform: scale(0.95); border-color: var(--hero-gold); }
.hero-compass-wrapper:hover .lens-iris { opacity: 1; transform: scale(1); }
.hero-compass-wrapper:hover .desktop-click-hint { opacity: 1; top: -60px; color: var(--hero-text); }

/* Desktop Hint */
.desktop-click-hint {
  position: absolute; top: -50px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-serif); font-style: italic; font-weight: 600; font-size: 0.75rem;
  letter-spacing: 1px; text-transform: uppercase; 
  color: var(--hero-text);
  background: var(--hero-glass); 
  backdrop-filter: blur(4px);
  border: 0.5px solid var(--hero-border); 
  padding: 6px 16px; 
  border-radius: 50px; box-shadow: 0 2px 8px rgba(61, 52, 48, 0.2); 
  z-index: 30; white-space: nowrap; opacity: 1; pointer-events: none;
  animation: textBobDesktop 2s ease-in-out infinite;
}
.desktop-click-hint::after {
  content: ""; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid var(--hero-border);
}

/* Hide Mobile Gyro on Desktop */
.mobile-gyro-system { display: none !important; }

/* 4.8 KENNY MODAL (Updated) */
.kenny-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  perspective: 1500px;
}

.kenny-modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-backdrop-blur { position: absolute; inset: 0; background: rgba(214, 208, 200, 0.9); z-index: 0; }

.kenny-modal-card {
  position: relative;
  z-index: 10;
  width: 90%;
  max-width: 500px;
  /* Slightly adjusted padding to fit new content nicely */
  padding: 50px 40px;
  background: linear-gradient(145deg, #FFFCF7, var(--hero-bg));
  border-radius: 20px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 50px 100px rgba(61, 52, 48, 0.4);
  overflow: hidden;
  backface-visibility: hidden;
  opacity: 0;
  transform: rotateX(20deg) translateY(100px) scale(0.8);
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.kenny-modal-overlay.active .kenny-modal-card { transform: rotateX(0deg) translateY(0) scale(1); opacity: 1; }

/* Content Animation (Fades in when switching pages) */
.modal-content-inner {
    animation: fadeContent 0.5s ease-out forwards;
}

@keyframes fadeContent {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.card-glow-border {
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 22px;
  background: linear-gradient(45deg, var(--hero-gold), transparent, #FFFFFF, transparent, var(--hero-gold));
  background-size: 400%;
  opacity: 0.5;
  animation: borderFlow 8s linear infinite;
}

/* Typography */
.modal-title { font-family: var(--f-serif); font-size: 3.5rem; color: var(--hero-text); margin: 0; line-height: 1; text-shadow: 0 5px 15px rgba(255, 255, 255, 0.8); }
.gold-text { color: var(--hero-gold); font-style: italic; }
.modal-divider { width: 60px; height: 2px; background: var(--hero-gold); margin: 20px auto; box-shadow: 0 0 10px var(--hero-gold); }
.modal-text { font-family: var(--f-sans); color: var(--hero-text); font-size: 1rem; line-height: 1.6; margin-bottom: 30px; }

/* Stats */
.modal-stats { display: flex; justify-content: center; gap: 40px; margin-bottom: 35px; }
.stat-box { display: flex; flex-direction: column; }
.stat-num { font-family: var(--f-serif); font-size: 2rem; color: var(--hero-text); }
.stat-label { font-family: var(--f-sans); font-size: 0.6rem; text-transform: uppercase; color: var(--hero-gold); letter-spacing: 2px; }

/* Primary Action Buttons */
.btn-modal-action {
  display: inline-block;
  padding: 15px 40px;
  border: 1px solid var(--hero-gold);
  color: var(--hero-gold);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 2px;
  transition: all 0.3s ease;
  background: transparent;
  cursor: pointer;
}
.btn-modal-action:hover { background: var(--hero-gold); color: #FFF; box-shadow: 0 0 20px rgba(163, 143, 117, 0.4); }

/* 'Read My Story' Button Styling */
#btn-to-bio {
    transition: all 0.3s ease;
}
#btn-to-bio:hover {
    color: var(--hero-text) !important;
    border-bottom-color: var(--hero-text) !important;
    transform: translateY(-2px);
}

/* 'Back to Promise' Button Styling */
#btn-back-home {
    transition: all 0.3s ease;
}
#btn-back-home:hover {
    color: var(--hero-gold) !important;
    transform: translateX(-5px);
}

/* Close Button (Top Right) */
.btn-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 20;
  background: transparent;
  border: none;
  color: rgba(61, 52, 48, 0.5);
  font-size: 2rem;
  cursor: pointer;
  transition: transform 0.3s ease, color 0.3s ease;
}
.btn-modal-close:hover { color: var(--hero-text); transform: rotate(90deg) scale(1.1); }
/* --- Shared Animations (Global) --- */
@keyframes slideRightBlur { 0% { opacity: 0; transform: translateX(-40px) scale(0.98); filter: blur(10px); } 100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); } }
@keyframes smoothDrop { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes gyroSpinX { 0% { transform: rotateX(0deg) rotateY(0deg); } 100% { transform: rotateX(360deg) rotateY(0deg); } }
@keyframes gyroSpinY { 0% { transform: rotateY(0deg) rotateX(25deg); } 100% { transform: rotateY(360deg) rotateX(25deg); } }
@keyframes rotateFlat { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes textBobDesktop { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-8px); } }
@keyframes floatInCorner { 0% { opacity: 0; transform: translateY(50px) translateX(50px) scale(0.8); } 100% { opacity: 1; transform: translateY(0) translateX(0) scale(0.9); } }
@keyframes pointRight { 0%, 100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(-5px); } }
@keyframes sonarPulseDesktop { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; } }
@keyframes sonarPulseMobile { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
@keyframes borderFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes filmGrain { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-5%, -5%); } 20% { transform: translate(-10%, 5%); } 30% { transform: translate(5%, -10%); } 40% { transform: translate(-5%, 15%); } 50% { transform: translate(-10%, 5%); } 60% { transform: translate(15%, 0); } 70% { transform: translate(0, 10%); } 80% { transform: translate(-15%, 0); } 90% { transform: translate(10%, 5%); } }
@keyframes streakGoldAnim { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }


/* 4.2 MOBILE SPECIFIC OVERRIDES
   ========================================================================== */
   @media (max-width: 900px) {

    /* --- Container Adjustments --- */
    .jax-hero-new {
      height: 65dvh !important;
      min-height: 480px !important;
      align-items: center !important;
      display: flex !important;
      width: 94% !important;
      margin: 10px auto !important;
      border-radius: 12px;
      box-shadow: none !important;
      border: none !important;
    }
  
    /* --- Content Overlay (Clearer Glass) --- */
    .hero-overlay-content {
      position: absolute; 
      top: 50%; 
      left: 50%; 
      transform: translate(-50%, -50%);
      z-index: 50; 
      width: 90%; 
      max-width: 400px;
      padding: 40px 25px; 
      aspect-ratio: auto; 
      animation: none;
      
      /* Clearer settings for mobile */
      background: rgba(61, 52, 48, 0.25) !important;
      backdrop-filter: blur(6px) !important;
      -webkit-backdrop-filter: blur(6px) !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      border-radius: 24px !important; 
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important; 
    }
    
    /* --- Typography Adjustments --- */
    .hero-title-new { 
      font-size: 14vw !important; 
      line-height: 0.9 !important; 
      margin-bottom: 5px !important; 
      mix-blend-mode: normal !important; 
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) !important;
    }
    
    .hero-location-eyebrow { 
      margin-bottom: 10px; 
      font-size: 0.75rem !important; 
      max-width: 180px; 
      margin-left: auto; margin-right: auto;
      line-height: 1.4;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
    }
    
    .hero-sub-new {
      margin-top: 15px; white-space: normal !important;
      font-size: 0.65rem !important; line-height: 1.5 !important; letter-spacing: 1px !important;
      width: 90% !important; max-width: 320px !important;
      margin-left: auto !important; margin-right: auto !important;
      text-align: center !important; display: block !important;
      color: #EBEAE8 !important; 
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
    }
  
    .hero-btn-group { margin-top: 20px; }
    .btn-hero-solid { padding: 12px 30px; font-size: 0.65rem; letter-spacing: 2px; border-radius: 50px; }
  
    /* --- Compass (Mobile Corner Float) --- */
    .hero-compass-wrapper {
      right: 1px; bottom: 1px; left: auto; width: 110px; height: 110px;
      transform: scale(0.9); transform-origin: bottom right;
      animation: floatInCorner 1s ease-out forwards 1.2s;
    }
    .hero-compass-wrapper::before { animation: sonarPulseMobile 2.5s infinite ease-out; }
    .compass-core-link { width: 100%; height: 100%; }
    
    /* Hide Desktop Compass Elements */
    .desktop-structure, .desktop-click-hint { display: none !important; }
  
    /* Mobile Gyro System */
    .mobile-gyro-system {
      display: block !important; position: absolute; inset: -15px; pointer-events: none; transform-style: preserve-3d;
    }
    .gyro-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--hero-border); }
    .ring-x { animation: gyroSpinX 7s linear infinite; border-color: rgba(255, 255, 255, 0.3); }
    .ring-y { animation: gyroSpinY 10s linear infinite; border-color: var(--hero-gold); border-width: 2px; }
    .compass-lens { width: 90px; height: 90px; border: 2px solid var(--hero-text); box-shadow: 0 0 20px rgba(61, 52, 48, 0.8); }
  
    /* Mobile Gyro Hint */
    .gyro-hint {
      position: absolute; top: 50%; right: 100%; transform: translateY(-50%);
      margin-right: 10px; font-family: var(--f-serif); font-style: italic; font-weight: 600;
      font-size: 0.65rem; color: var(--hero-text); text-transform: uppercase;
      background: var(--hero-glass); backdrop-filter: blur(4px);
      border: 0.5px solid var(--hero-border); padding: 5px 12px; 
      border-radius: 50px; box-shadow: 0 2px 8px rgba(61, 52, 48, 0.2);
      white-space: nowrap; z-index: 30; animation: pointRight 1.5s ease-in-out infinite;
    }
    .gyro-hint::after {
      content: ""; position: absolute; top: 50%; right: -4px; transform: translateY(-50%);
      border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 4px solid var(--hero-border);
    }
    
/* --- Mobile Modal Sizing (Compact) --- */
.kenny-modal-card { width: 85% !important; max-width: 320px !important; padding: 20px 15px !important; margin: 0 auto; }
    
/* Image stays anchored, bottom space removed to pull text up immediately */
.kenny-modal-card img { width: 100px; height: 100px; margin: -10px auto 0; border-width: 2px; }

/* Title shrunk slightly, margins heavily reduced */
.modal-title { font-size: 1.6rem !important; margin-top: -10px !important; margin-bottom: 4px !important; }

/* Divider tightened */
.modal-divider { margin: 8px auto !important; width: 30px !important; }

/* Text block squeezed */
.modal-text { font-size: 0.8rem !important; line-height: 1.3 !important; margin-bottom: 12px !important; }

/* Stats pushed closer together */
.modal-stats { gap: 10px !important; margin-bottom: 15px !important; }
.stat-num { font-size: 1.1rem !important; }
.stat-label { font-size: 0.5rem !important; }

/* Buttons and close icon scaled down to match */
.btn-modal-action { padding: 8px 20px !important; font-size: 0.6rem !important; }
.btn-modal-close { top: 8px !important; right: 8px !important; font-size: 1.1rem !important; }
} 
  
  /* Animation for swapping modal content */
  .modal-content-inner {
    animation: fadeContent 0.5s ease-out;
  }
  
  @keyframes fadeContent {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  /* Hover effect for the bio back button */
  #btn-back-home:hover {
    color: var(--hero-gold) !important;
  }
  
  /* Luxury Ghost Button */
  .btn-luxury-ghost {
    display: inline-block;
    padding: 14px 40px;
    background: rgba(163, 143, 117, 0.05); /* Very faint gold tint */
    border: 1px solid var(--hero-gold);
    color: var(--hero-gold);
    font-family: var(--f-serif); /* Serif font for elegance */
    font-style: italic;
    font-size: 1.0rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
    max-width: 250px; /* Matches width of other buttons */
    margin-top: 10px;
  }
  
  .btn-luxury-ghost:hover {
    background: var(--hero-gold);
    color: #FFF;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(163, 143, 117, 0.3);
  }
/* ==========================================================================
   5. SELECTED WORKS (Arch Index & Lens Dial)
   ========================================================================== */

/* --- 5.0 GLOBAL / SHARED LAYOUT --- */

/* Main Container */
.arch-index-section {
  background-color: var(--works-bg); /* Light Bone */
  width: 100%;
  position: relative;
  border-bottom: 1px solid rgba(94, 84, 79, 0.05);
  display: flex;
  justify-content: center;
  padding: 80px 0;
}

.index-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr; /* Split roughly 38% / 62% */
  
  width: 95%;
  max-width: 1600px;
  
  /* --- 21:9 ULTRAWIDE RATIO --- */
  /* This dictates the height. Content must fit inside. */
  aspect-ratio: 21 / 9; 
  height: auto;
  
  /* FIXED: Added a min-height so it doesn't crush content on very small screens */
  min-height: 400px; 
  
  margin: 0 auto;
  border: 1px solid rgba(94, 84, 79, 0.08);
  overflow: hidden; 
}

/* --- Menu (Left Column) --- */
.index-menu {
  display: flex;
  flex-direction: column;
  /* Ensures list and button spread out to fill height */
  justify-content: space-between; 
  
  /* FIXED: Reduced padding minimums so it fits in small windows */
  padding: clamp(10px, 2vh, 40px) clamp(10px, 2vw, 40px);
  
  border-right: 1px solid rgba(94, 84, 79, 0.08);
  background: var(--works-menu-bg); 
  height: 100%;
  z-index: 2;
  
  /* FIXED: Allow flex items to shrink without overflowing */
  min-height: 0;
  overflow: hidden; 
}

/* --- LIST ITEMS: The "Evenly Distributed" Engine --- */
.index-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  /* --- FIXED: FLEX COMPRESSION --- */
  /* This allows items to shrink indefinitely if space is tight */
  flex: 1 1 auto; 
  
  /* Prevents them from getting huge on big screens */
  max-height: 80px; 
  /* Allows them to shrink tiny on small screens */
  min-height: 0; 
  
  padding: 0;
  
  border-top: 1px solid var(--works-item-border);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  opacity: 1;
}

/* Ensure the last border exists */
.index-item:last-child {
  border-bottom: 1px solid var(--works-item-border);
}

/* Typography & Elements */
.idx-num {
  font-family: "Cormorant Garamond", serif;
  
  /* --- FIXED: SCALING TEXT --- */
  /* Uses VH so it shrinks when browser gets shorter */
  font-size: clamp(10px, 1.8vh, 18px);
  
  font-weight: 300;
  margin-right: clamp(8px, 1.5vw, 20px);
  color: transparent;
  -webkit-text-stroke: 1px rgba(94, 84, 79, 0.3);
  transition: all 0.4s ease;
  flex-shrink: 0;
}

.idx-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  min-width: 0; 
  height: 100%;
}

.idx-title {
  font-family: "Cormorant Garamond", serif;
  
  /* --- FIXED: SCALING TEXT --- */
  /* Drastically reduces size on small screens so it doesn't cut off */
  font-size: clamp(12px, 3vh, 32px);
  
  line-height: 1;
  color: var(--works-text-muted); 
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.4s ease, transform 0.4s ease;
}

.idx-desc {
  font-family: "Lato", sans-serif;
  
  /* Description scales down to tiny text if needed */
  font-size: clamp(8px, 1vh, 11px);
  
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent-gold);
  margin-top: 3px;
  opacity: 0;
  transform: translateY(5px);
  transition: all 0.4s ease;
  
  /* Hide description on extremely short screens to save space */
  height: 0;
  overflow: hidden;
}

/* Arrow Slide */
.idx-arrow-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateX(-20px);
  opacity: 0;
  transition: all 0.4s ease;
}
.idx-arrow {
  color: var(--accent-gold);
  /* Arrow scales with height */
  font-size: clamp(10px, 2vh, 18px);
}

/* Hover & Active States */
.hover-group:hover .index-item { opacity: 0.3; filter: blur(1px); }
.hover-group .index-item:hover,
.hover-group .index-item.active { opacity: 1; filter: blur(0); }

.index-item:hover .idx-num, .index-item.active .idx-num { color: var(--accent-gold); -webkit-text-stroke: 0px; }
.index-item:hover .idx-title, .index-item.active .idx-title { color: var(--text-dark); transform: translateX(10px); }
/* Only show description if there is enough height (> 600px usually implied by vh) */
.index-item:hover .idx-desc, .index-item.active .idx-desc { opacity: 1; transform: translateY(0); height: auto; }
.index-item:hover .idx-arrow-wrap, .index-item.active .idx-arrow-wrap { transform: translateX(0); opacity: 1; }


/* --- LUXURY BUTTON (Cohesive Distribution) --- */
.luxury-btn-wrap {
  /* Pushes to bottom */
  margin-top: auto; 
  
  /* FIXED: Reduced gap so it doesn't push off screen */
  padding-top: clamp(5px, 2vh, 40px);
  
  width: 100%;
  display: flex;
  justify-content: center;
  
  /* CRITICAL: Allows button container to shrink if needed, but prefers staying */
  flex-shrink: 0; 
}

/* The Container */
.ingot-btn {
  position: relative;
  display: block;
  width: 100%;
  
  /* FIXED: SCALING PADDING */
  /* Padding is now strictly relative to viewport height (vh) */
  /* It will get very thin on short screens */
  padding: 1.5vh 0;
  
  text-decoration: none;
  border: 1px solid rgba(212, 197, 176, 0.4);
  background: rgba(255, 252, 247, 0.5);
  overflow: hidden;
  transition: border-color 0.5s ease;
}

/* The Text */
.ingot-text {
  position: relative;
  z-index: 10;
  display: block;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  
  /* FIXED: SCALING TEXT */
  font-size: clamp(10px, 1.8vh, 18px);
  
  font-style: italic;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--text-grey);
  transition: letter-spacing 0.8s cubic-bezier(0.2, 1, 0.3, 1);
  mix-blend-mode: difference;
}

/* The "Liquid Gold" */
.liquid-gold {
  position: absolute;
  top: 100%;
  left: -50%;
  width: 200%; 
  height: 300%;
  background: radial-gradient(circle, #E6D2B5 0%, #C2AF95 100%);
  border-radius: 40%;
  opacity: 1;
  transform: rotate(0deg);
  transition: top 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  pointer-events: none;
}

/* Interaction */
.ingot-btn:hover .liquid-gold {
  top: -200%;
  animation: liquidSwirl 6s infinite linear;
}
.ingot-btn:hover .ingot-text {
  letter-spacing: 6px;
  color: #FFF;
}
.ingot-btn:hover {
  border-color: var(--accent-gold);
  box-shadow: 0 10px 40px -10px rgba(212, 175, 55, 0.3);
}

.ingot-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, #FFF, transparent);
  transform: scaleX(0);
  transition: transform 0.6s ease;
  z-index: 15;
}
.ingot-btn:hover::after {
  transform: scaleX(1);
  transition-delay: 0.2s;
}

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

/* --- Cinema Stage (Right Column) --- */
.index-gallery {
  position: relative;
  width: 100%;
  height: 100%; 
  padding: 0;
  overflow: hidden;
  background: var(--works-stage-bg);
  display: flex;
}

.cinema-stage {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--works-stage-bg);
  overflow: hidden;
  z-index: 10;
}

/* Image View */
.shutter-view {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 10;
}
.shutter-view img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 2s ease;
}
.cinema-stage.snapping img { transform: scale(1.05); transition: none; }

/* The Shutters */
.c-shutter {
  position: absolute;
  left: 0;
  width: 100%;
  height: 51%;
  background: var(--works-shutter); /* Light Taupe Shutter */
  z-index: 20;
  transition: transform 0.3s cubic-bezier(0.8, 0, 0.2, 1);
  pointer-events: none;
}
.c-shutter.top { top: 0; transform: translateY(-100%); border-bottom: 1px solid rgba(94, 84, 79, 0.1); }
.c-shutter.bottom { bottom: 0; transform: translateY(100%); border-top: 1px solid rgba(94, 84, 79, 0.1); }
.cinema-stage.snapping .c-shutter { transform: translateY(0); }

/* Gold Edges */
.gold-edge {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent-gold);
  box-shadow: 0 0 15px var(--accent-gold);
  opacity: 0;
  transition: opacity 0.1s;
}
.c-shutter.top .gold-edge { bottom: 0; }
.c-shutter.bottom .gold-edge { top: 0; }
.cinema-stage.snapping .gold-edge { opacity: 1; transition-delay: 0.2s; }

/* --- Overlays (Counters & Hints) --- */
.cinema-counter {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255, 252, 247, 0.7);
  color: var(--text-dark);
  font-family: "Lato", monospace;
  font-size: 0.7rem;
  padding: 4px 10px;
  border-radius: 4px;
  z-index: 20;
  border: 1px solid rgba(94, 84, 79, 0.2);
}

.tap-hint-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  background: rgba(235, 229, 222, 0.2);
}
.shutter-view:active .tap-hint-overlay { opacity: 1; }
.tap-hint-overlay i {
  color: var(--text-dark);
  font-size: 2rem;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

/* --- Tour Overlay & Modal (Universal) --- */
.tour-start-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(235, 229, 222, 0.4);
  backdrop-filter: blur(2px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s;
  color: var(--text-dark);
}
.tour-start-overlay:active { background: rgba(235, 229, 222, 0.6); }

/* Visibility Logic */
.cinema-stage.is-tour .tour-start-overlay,
.cinema-stage.show-tour .tour-start-overlay { display: flex !important; }

.cinema-stage.is-tour .cinema-counter,
.cinema-stage.show-tour .cinema-counter,
.cinema-stage.is-tour .tap-hint-overlay { display: none !important; }

/* Play Button */
.play-btn-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(212, 197, 176, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(212, 197, 176, 0.4);
  margin-bottom: 15px;
  transition: transform 0.2s;
}
.tour-start-overlay:active .play-btn-circle { transform: scale(0.9); }
.play-btn-circle i { color: #FFF; font-size: 1.5rem; margin-left: 4px; }
.play-text {
  font-family: "Lato", sans-serif;
  font-weight: 800;
  font-size: 0.7rem;
  color: var(--text-dark);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.8);
}

/* Pop-up Modal */
.iframe-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  background: rgba(235, 229, 222, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.iframe-popup.active { opacity: 1; pointer-events: auto; }

.iframe-wrapper {
  width: 90%;
  max-width: 450px;
  aspect-ratio: 9 / 16;
  max-height: 80vh;
  position: relative;
  background: #EBE5DE;
  border: 1px solid rgba(94, 84, 79, 0.15);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(180, 170, 160, 0.9);
  overflow: hidden;
  transform: scale(0.8);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.iframe-popup.active .iframe-wrapper { transform: scale(1); }
.iframe-wrapper iframe { width: 100%; height: 100%; border: none; }

.close-tour-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  background: rgba(255, 252, 247, 0.6);
  color: var(--text-dark);
  border: 1px solid rgba(94, 84, 79, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  z-index: 100;
}
.close-tour-btn:active { background: var(--accent-gold); color: #FFF; }

/* --- Lens Dial: Magnetic Slider Styles --- */
.lens-dial-wrapper {
  position: relative;
  width: 100%;
  
  /* FIXED: SCALING DIAL */
  height: clamp(50px, 8vh, 90px);
  
  margin-bottom: clamp(10px, 2vh, 20px);
  background: linear-gradient(to bottom, #F2F0ED 0%, #E6E1DC 50%, #F2F0ED 100%);
  border-top: 1px solid #D6CEC5;
  border-bottom: 1px solid #D6CEC5;
  display: flex;
  align-items: center;
  cursor: grab;
  /* Prevent dial from disappearing if space is tight */
  flex-shrink: 0;
}

.lens-dial-wrapper.active {
  cursor: grabbing;
}

.dial-indicator {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent-gold);
  transform: translateX(-50%);
  z-index: 10;
  box-shadow: 0 0 15px var(--accent-gold);
  pointer-events: none;
}
.dial-indicator::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--accent-gold);
}

.lens-dial-track {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  /* Magnetic Scrolling */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scroll-behavior: smooth;
  padding-bottom: 5px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-gold) #E6E1DC;
}

.lens-dial-track.active {
  scroll-behavior: auto;
  scroll-snap-type: none;
}

/* Chrome Scrollbar */
.lens-dial-track::-webkit-scrollbar { height: 4px; display: block; }
.lens-dial-track::-webkit-scrollbar-track { background: #E6E1DC; margin: 0 20px; border-radius: 4px; }
.lens-dial-track::-webkit-scrollbar-thumb { background: var(--accent-gold); border-radius: 4px; }

.dial-spacer {
  flex: 0 0 50vw;
  width: 50vw;
}

.dial-item {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 100px;
  height: 100%;
  gap: 8px;
  transition: all 0.3s ease;
  opacity: 0.3;
  transform: scale(0.8);
  user-select: none;
  -webkit-user-select: none;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.dial-item .tick {
  font-family: monospace;
  font-weight: 300;
  font-size: 1rem;
  color: #8C8276;
  line-height: 1;
  pointer-events: none;
}

.dial-item .label {
  font-family: "Lato", sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-dark);
  white-space: nowrap;
  pointer-events: none;
}

.dial-item.active {
  opacity: 1;
  transform: scale(1.1);
}
.dial-item.active .tick { color: var(--accent-gold); font-weight: 900; }
.dial-item.active .label { color: var(--accent-gold); text-shadow: 0 0 10px rgba(212, 197, 176, 0.5); }


/* ==========================================================================
   5.1 DESKTOP: "THE STABLE MONOLITH" (No Levitation)
   ========================================================================== */

    @media (min-width: 901px) {
    /* Hiding Mobile Elements */
    .mobile-only-deck { display: none; }
    
    /* --- 1. ATMOSPHERE --- */
    .arch-index-section {
      background: radial-gradient(circle at 50% 50%, #FFFCF7 0%, #E6E1DC 80%) !important;
      z-index: 1;
    }
    
    .arch-index-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: 
        radial-gradient(#8C8276 1px, transparent 1px),
        radial-gradient(rgba(140, 130, 118, 0.5) 1px, transparent 1px);
      background-size: 50px 50px, 100px 100px;
      background-position: 0 0, 25px 25px;
      opacity: 0.05;
      animation: cosmicDrift 60s linear infinite;
      z-index: -1;
      pointer-events: none;
    }
    @keyframes cosmicDrift { from { transform: translateY(0); } to { transform: translateY(-50px); } }
    
    /* --- 2. THE CINEMA STAGE (FLATTENED) --- */
    .index-gallery {
      /* REMOVED: perspective: 1500px; -> Removes the 3D space */
      overflow: visible;
      z-index: 10;
    }
    
    .cinema-stage {
      /* REMOVED: transform: perspective(1500px) rotateY(-1deg); -> Removes the tilt */
      /* REMOVED: transform-style: preserve-3d; */
      transform: none; 
      
      /* UPDATED: Symmetrical shadow for a flat look */
      box-shadow: 
        0 10px 40px rgba(180, 170, 160, 0.3),       
        inset 0 0 0 1px rgba(255,255,255,0.4); 
      
      border: none;
      transition: transform 0.5s ease, box-shadow 0.5s ease;
    }
    
    /* Interaction */
    #desktopStage { cursor: pointer; }
    #desktopStage img { transition: transform 0.5s ease; }
    #desktopStage:hover img { transform: scale(1.02); }
    
    .cinema-stage:hover {
      /* UPDATED: Just a simple scale, no rotation */
      transform: scale(1.01);
      box-shadow: 0 15px 50px rgba(180, 170, 160, 0.4);
    }
    
    /* The Anamorphic Flare (Desktop Version) */
    .cinema-stage::after {
      content: '';
      position: absolute;
      top: 0; left: -150%;
      width: 200%; height: 100%;
      background: linear-gradient(
        105deg, 
        transparent 40%, 
        rgba(212, 197, 176, 0.1) 45%, 
        rgba(255, 255, 255, 0.6) 50%, 
        rgba(212, 197, 176, 0.1) 55%, 
        transparent 60%
      );
      transform: skewX(-20deg);
      mix-blend-mode: overlay;
      animation: anamorphicPass 8s infinite ease-in-out;
      pointer-events: none;
      z-index: 20;
    }
    
    @keyframes anamorphicPass {
      0%, 10% { left: -150%; opacity: 0; }
      20% { opacity: 1; }
      50% { left: 150%; opacity: 0; }
      100% { left: 150%; opacity: 0; }
    }
  
    /* Specific Counter Positioning */
    #desktopPhotoCounter {
      top: 20px;
      right: 20px;
      font-size: 0.9rem;
      padding: 6px 14px;
    }
    
    /* --- 3. THE MENU (Holographic) --- */
    .index-menu {
      background: rgba(255, 252, 247, 0.6) !important;
      backdrop-filter: blur(10px);
      border-right: 1px solid rgba(94, 84, 79, 0.05);
      /* REMOVED: perspective: 1000px; */
    }
    
    .index-item {
      /* REMOVED: transform-style: preserve-3d; */
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      border-bottom: 1px solid rgba(94, 84, 79, 0.05);
      /* padding-left moved to flex-gap handling if needed, 
         but keeping simple here */
    }
    
    .index-item:hover,
    .index-item.active {
      /* UPDATED: Removed translateZ (3D lift), kept simple X translation */
      transform: translateX(10px); 
      background: linear-gradient(90deg, rgba(212, 197, 176, 0.1), transparent);
      box-shadow: 
        inset 3px 0 0 var(--accent-gold);
      z-index: 10;
    }
    
    .index-item.active .idx-title,
    .index-item:hover .idx-title {
      color: var(--text-dark);
      text-shadow: 
        0 0 10px rgba(212, 197, 176, 0.5),
        0 0 20px rgba(212, 197, 176, 0.3);
      letter-spacing: 1px;
    }
    
    /* --- 4. THE LENS DIAL OVERRIDES --- */
    .lens-dial-wrapper {
      background: #FFFCF7;
      box-shadow: inset 0 10px 20px rgba(180, 170, 160, 0.1);
      border-top: 1px solid rgba(94, 84, 79, 0.05);
    }
    
    .dial-indicator {
      background: var(--accent-gold);
      box-shadow: 0 0 15px var(--accent-gold);
      width: 2px;
    }
    
    .dial-indicator::after {
      content: '';
      position: absolute;
      bottom: 0; left: 50%;
      width: 40px; height: 150px;
      background: linear-gradient(to top, rgba(212, 197, 176, 0.3), transparent);
      transform: translateX(-50%);
      filter: blur(10px);
      pointer-events: none;
    }
  
    /* --- 5. MODAL TWEAKS --- */
    .iframe-wrapper {
      aspect-ratio: 16 / 9 !important;
      width: 85% !important;
      max-width: 1200px !important;
      max-height: 90vh !important;
      height: auto !important;
    }
    .close-tour-btn {
      width: 45px !important;
      height: 45px !important;
      font-size: 1.2rem !important;
      top: 20px !important;
      right: 20px !important;
    }
  }  
  /* ==========================================================================
      5. SELECTED WORKS (Arch Index & Lens Dial)
      ========================================================================== */
  
  /* --- 5.0 GLOBAL / SHARED LAYOUT --- */
  
  /* Main Container */
  .arch-index-section {
    background-color: var(--works-bg); /* Light Bone */
    width: 100%;
    position: relative;
    border-bottom: 1px solid rgba(94, 84, 79, 0.05);
    display: flex;
    justify-content: center;
    padding: 80px 0;
  }
  
  .index-layout {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    max-width: 1600px;
    width: 95%;
    height: auto;
    margin: 0 auto;
    border: 1px solid rgba(94, 84, 79, 0.08);
  }
  
  /* --- Menu (Left Column Base) --- */
  .index-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 80px 60px;
    border-right: 1px solid rgba(94, 84, 79, 0.08);
    background: var(--works-menu-bg); /* Light Taupe */
    height: 100%;
    z-index: 2;
  }
  
  /* List Item Container */
  .index-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    border-top: 1px solid var(--works-item-border);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    opacity: 1;
  }
  .index-item:last-child {
    border-bottom: 1px solid var(--works-item-border);
  }
  
  /* Typography & Elements */
  .idx-num {
    font-family: "Cormorant Garamond", serif;
    font-size: 1rem;
    font-weight: 300;
    margin-right: 20px;
    color: transparent;
    -webkit-text-stroke: 1px rgba(94, 84, 79, 0.3);
    transition: all 0.4s ease;
  }
  
  .idx-text-col {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
  
  .idx-title {
    font-family: "Cormorant Garamond", serif;
    font-size: 2rem; /* The Benchmark Size */
    line-height: 1;
    color: var(--works-text-muted); /* Warm Gray */
    margin: 0;
    transition: color 0.4s ease, transform 0.4s ease;
  }
  
  .idx-desc {
    font-family: "Lato", sans-serif;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-gold);
    margin-top: 3px;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.4s ease;
    height: 0;
    overflow: hidden;
  }
  
  /* Arrow Slide */
  .idx-arrow-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateX(-20px);
    opacity: 0;
    transition: all 0.4s ease;
  }
  .idx-arrow {
    color: var(--accent-gold);
    font-size: 1.2rem;
  }
  
  /* Hover & Active States (Base) */
  .hover-group:hover .index-item { opacity: 0.3; filter: blur(1px); }
  .hover-group .index-item:hover,
  .hover-group .index-item.active { opacity: 1; filter: blur(0); }
  
  .index-item:hover .idx-num, .index-item.active .idx-num { color: var(--accent-gold); -webkit-text-stroke: 0px; }
  .index-item:hover .idx-title, .index-item.active .idx-title { color: var(--text-dark); transform: translateX(10px); }
  .index-item:hover .idx-desc, .index-item.active .idx-desc { opacity: 1; transform: translateY(0); height: auto; }
  .index-item:hover .idx-arrow-wrap, .index-item.active .idx-arrow-wrap { transform: translateX(0); opacity: 1; }
  
  /* --- Cinema Stage (Base) --- */
  .index-gallery {
    position: relative;
    width: 100%;
    padding: 0;
    overflow: hidden;
    background: var(--works-stage-bg);
    display: flex;
  }
  
  .cinema-stage {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--works-stage-bg);
    overflow: hidden;
    z-index: 10;
  }
  
  /* Image View */
  .shutter-view {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 10;
  }
  .shutter-view img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 2s ease;
  }
  .cinema-stage.snapping img { transform: scale(1.05); transition: none; }
  
  /* The Shutters */
  .c-shutter {
    position: absolute;
    left: 0;
    width: 100%;
    height: 51%;
    background: var(--works-shutter); /* Light Taupe Shutter */
    z-index: 20;
    transition: transform 0.3s cubic-bezier(0.8, 0, 0.2, 1);
    pointer-events: none;
  }
  .c-shutter.top { top: 0; transform: translateY(-100%); border-bottom: 1px solid rgba(94, 84, 79, 0.1); }
  .c-shutter.bottom { bottom: 0; transform: translateY(100%); border-top: 1px solid rgba(94, 84, 79, 0.1); }
  .cinema-stage.snapping .c-shutter { transform: translateY(0); }
  
  /* Gold Edges */
  .gold-edge {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent-gold);
    box-shadow: 0 0 15px var(--accent-gold);
    opacity: 0;
    transition: opacity 0.1s;
  }
  .c-shutter.top .gold-edge { bottom: 0; }
  .c-shutter.bottom .gold-edge { top: 0; }
  .cinema-stage.snapping .gold-edge { opacity: 1; transition-delay: 0.2s; }
  
  /* --- Overlays (Counters & Hints) --- */
  .cinema-counter {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 252, 247, 0.7);
    color: var(--text-dark);
    font-family: "Lato", monospace;
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 4px;
    z-index: 20;
    border: 1px solid rgba(94, 84, 79, 0.2);
  }
  
  .tap-hint-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    background: rgba(235, 229, 222, 0.2);
  }
  .shutter-view:active .tap-hint-overlay { opacity: 1; }
  .tap-hint-overlay i {
    color: var(--text-dark);
    font-size: 2rem;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
  }
  
  /* --- Tour Overlay & Modal (Universal) --- */
  .tour-start-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    background: rgba(235, 229, 222, 0.4);
    backdrop-filter: blur(2px);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s;
    color: var(--text-dark);
  }
  .tour-start-overlay:active { background: rgba(235, 229, 222, 0.6); }
  
  /* Visibility Logic */
  .cinema-stage.is-tour .tour-start-overlay,
  .cinema-stage.show-tour .tour-start-overlay { display: flex !important; }
  
  .cinema-stage.is-tour .cinema-counter,
  .cinema-stage.show-tour .cinema-counter,
  .cinema-stage.is-tour .tap-hint-overlay { display: none !important; }
  
  /* Play Button */
  .play-btn-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(212, 197, 176, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(212, 197, 176, 0.4);
    margin-bottom: 15px;
    transition: transform 0.2s;
  }
  .tour-start-overlay:active .play-btn-circle { transform: scale(0.9); }
  .play-btn-circle i { color: #FFF; font-size: 1.5rem; margin-left: 4px; }
  .play-text {
    font-family: "Lato", sans-serif;
    font-weight: 800;
    font-size: 0.7rem;
    color: var(--text-dark);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.8);
  }
  
  /* Pop-up Modal */
  .iframe-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background: rgba(235, 229, 222, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .iframe-popup.active { opacity: 1; pointer-events: auto; }
  
  .iframe-wrapper {
    width: 90%;
    max-width: 450px;
    aspect-ratio: 9 / 16;
    max-height: 80vh;
    position: relative;
    background: #EBE5DE;
    border: 1px solid rgba(94, 84, 79, 0.15);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(180, 170, 160, 0.9);
    overflow: hidden;
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .iframe-popup.active .iframe-wrapper { transform: scale(1); }
  .iframe-wrapper iframe { width: 100%; height: 100%; border: none; }
  
  .close-tour-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    background: rgba(255, 252, 247, 0.6);
    color: var(--text-dark);
    border: 1px solid rgba(94, 84, 79, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    z-index: 100;
  }
  .close-tour-btn:active { background: var(--accent-gold); color: #FFF; }
  
  /* --- Lens Dial: Magnetic Slider Styles --- */
  .lens-dial-wrapper {
    position: relative;
    width: 100%;
    height: 90px;
    margin-bottom: 20px;
    background: linear-gradient(to bottom, #F2F0ED 0%, #E6E1DC 50%, #F2F0ED 100%);
    border-top: 1px solid #D6CEC5;
    border-bottom: 1px solid #D6CEC5;
    display: flex;
    align-items: center;
    cursor: grab;
  }
  
  .lens-dial-wrapper.active {
    cursor: grabbing;
  }
  
  .dial-indicator {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent-gold);
    transform: translateX(-50%);
    z-index: 10;
    box-shadow: 0 0 15px var(--accent-gold);
    pointer-events: none;
  }
  .dial-indicator::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--accent-gold);
  }
  
  .lens-dial-track {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    /* Magnetic Scrolling */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scroll-behavior: smooth;
    padding-bottom: 5px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-gold) #E6E1DC;
  }
  
  .lens-dial-track.active {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
  
  /* Chrome Scrollbar */
  .lens-dial-track::-webkit-scrollbar { height: 4px; display: block; }
  .lens-dial-track::-webkit-scrollbar-track { background: #E6E1DC; margin: 0 20px; border-radius: 4px; }
  .lens-dial-track::-webkit-scrollbar-thumb { background: var(--accent-gold); border-radius: 4px; }
  
  .dial-spacer {
    flex: 0 0 50vw;
    width: 50vw;
  }
  
  .dial-item {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 100px;
    height: 100%;
    gap: 8px;
    transition: all 0.3s ease;
    opacity: 0.3;
    transform: scale(0.8);
    user-select: none;
    -webkit-user-select: none;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  
  .dial-item .tick {
    font-family: monospace;
    font-weight: 300;
    font-size: 1rem;
    color: #8C8276;
    line-height: 1;
    pointer-events: none;
  }
  
  .dial-item .label {
    font-family: "Lato", sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-dark);
    white-space: nowrap;
    pointer-events: none;
  }
  
  .dial-item.active {
    opacity: 1;
    transform: scale(1.1);
  }
  .dial-item.active .tick { color: var(--accent-gold); font-weight: 900; }
  .dial-item.active .label { color: var(--accent-gold); text-shadow: 0 0 10px rgba(212, 197, 176, 0.5); }
  
  /* --- LUXURY "MOLTEN INGOT" BUTTON (Global) --- */
  .luxury-btn-wrap {
    margin-top: auto; /* Push to bottom */
    padding-top: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  /* The Container (The Mold) */
  .ingot-btn {
    position: relative;
    display: block;
    width: 100%;
    padding: 25px 0;
    text-decoration: none;
    border: 1px solid rgba(212, 197, 176, 0.4); /* Faint gold outline */
    background: rgba(255, 252, 247, 0.5); /* Matte Light base */
    overflow: hidden; /* Trap the liquid */
    transition: border-color 0.5s ease;
  }
  
  /* The Text (The Inversion) */
  .ingot-text {
    position: relative;
    z-index: 10;
    display: block;
    text-align: center;
    font-family: "Cormorant Garamond", serif; /* Switch to Serif for Luxury */
    font-size: 1.1rem;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 2px;
    color: var(--text-grey); /* Warm Grey */
    transition: letter-spacing 0.8s cubic-bezier(0.2, 1, 0.3, 1);
    mix-blend-mode: difference; /* THE MAGIC: Inverts color against gold */
  }
  
  /* The "Liquid Gold" (The Physics) */
  .liquid-gold {
    position: absolute;
    top: 100%; /* Start below visibility */
    left: -50%; /* Center the wave horizontally relative to width */
    width: 200%; 
    height: 300%; /* Huge height for the wave arc */
    background: radial-gradient(circle, #E6D2B5 0%, #C2AF95 100%); /* Lighter Gold Gradient */
    border-radius: 40%; /* Creates the curved liquid surface */
    opacity: 1;
    transform: rotate(0deg);
    transition: top 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth pour */
    z-index: 1;
    pointer-events: none;
  }
  
  /* Interaction */
  .ingot-btn:hover .liquid-gold {
    top: -200%; /* Rises up to cover the button */
    animation: liquidSwirl 6s infinite linear; /* Keeps the liquid moving */
  }
  .ingot-btn:hover .ingot-text {
    letter-spacing: 6px; /* Elegant expansion */
    color: #FFF; /* Blend mode will turn this Dark against the Gold */
  }
  .ingot-btn:hover {
    border-color: var(--accent-gold);
    box-shadow: 0 10px 40px -10px rgba(212, 175, 55, 0.3);
  }
  
  .ingot-btn::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, #FFF, transparent);
    transform: scaleX(0);
    transition: transform 0.6s ease;
    z-index: 15;
  }
  .ingot-btn:hover::after {
    transform: scaleX(1); /* Top edge flashes white */
    transition-delay: 0.2s;
  }
  
  @keyframes liquidSwirl {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  
  /* ==========================================================================
      5.1 DESKTOP: "THE STABLE MONOLITH" (No Levitation)
      ========================================================================== */
  
      @media (min-width: 901px) {
      /* Hiding Mobile Elements */
      .mobile-only-deck { display: none; }
    
      /* --- 1. ATMOSPHERE --- */
      .arch-index-section {
        background: radial-gradient(circle at 50% 50%, #FFFCF7 0%, #E6E1DC 80%) !important;
        z-index: 1;
      }
      
      .arch-index-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: 
          radial-gradient(#8C8276 1px, transparent 1px),
          radial-gradient(rgba(140, 130, 118, 0.5) 1px, transparent 1px);
        background-size: 50px 50px, 100px 100px;
        background-position: 0 0, 25px 25px;
        opacity: 0.05;
        animation: cosmicDrift 60s linear infinite;
        z-index: -1;
        pointer-events: none;
      }
      @keyframes cosmicDrift { from { transform: translateY(0); } to { transform: translateY(-50px); } }
      
      /* --- 2. THE CINEMA STAGE (FLATTENED) --- */
      .index-gallery {
        /* REMOVED: perspective: 1500px; -> Removes the 3D space */
        overflow: visible;
        z-index: 10;
      }
      
      .cinema-stage {
        /* REMOVED: transform: perspective(1500px) rotateY(-1deg); -> Removes the tilt */
        /* REMOVED: transform-style: preserve-3d; */
        transform: none; 
        
        /* UPDATED: Symmetrical shadow for a flat look */
        box-shadow: 
          0 10px 40px rgba(180, 170, 160, 0.3),      
          inset 0 0 0 1px rgba(255,255,255,0.4); 
        
        border: none;
        transition: transform 0.5s ease, box-shadow 0.5s ease;
      }
      
      /* Interaction */
      #desktopStage { cursor: pointer; }
      #desktopStage img { transition: transform 0.5s ease; }
      #desktopStage:hover img { transform: scale(1.02); }
      
      .cinema-stage:hover {
        /* UPDATED: Just a simple scale, no rotation */
        transform: scale(1.01);
        box-shadow: 0 15px 50px rgba(180, 170, 160, 0.4);
      }
      
      /* The Anamorphic Flare (Desktop Version) */
      .cinema-stage::after {
        content: '';
        position: absolute;
        top: 0; left: -150%;
        width: 200%; height: 100%;
        background: linear-gradient(
          105deg, 
          transparent 40%, 
          rgba(212, 197, 176, 0.1) 45%, 
          rgba(255, 255, 255, 0.6) 50%, 
          rgba(212, 197, 176, 0.1) 55%, 
          transparent 60%
        );
        transform: skewX(-20deg);
        mix-blend-mode: overlay;
        animation: anamorphicPass 8s infinite ease-in-out;
        pointer-events: none;
        z-index: 20;
      }
      
      @keyframes anamorphicPass {
        0%, 10% { left: -150%; opacity: 0; }
        20% { opacity: 1; }
        50% { left: 150%; opacity: 0; }
        100% { left: 150%; opacity: 0; }
      }
    
      /* Specific Counter Positioning */
      #desktopPhotoCounter {
        top: 20px;
        right: 20px;
        font-size: 0.9rem;
        padding: 6px 14px;
      }
      
      /* --- 3. THE MENU (Holographic) --- */
      .index-menu {
        background: rgba(255, 252, 247, 0.6) !important;
        backdrop-filter: blur(10px);
        border-right: 1px solid rgba(94, 84, 79, 0.05);
        /* REMOVED: perspective: 1000px; */
      }
      
      .index-item {
        /* REMOVED: transform-style: preserve-3d; */
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border-bottom: 1px solid rgba(94, 84, 79, 0.05);
        padding-left: 20px;
      }
      
      .index-item:hover,
      .index-item.active {
        /* UPDATED: Removed translateZ (3D lift), kept simple X translation */
        transform: translateX(10px); 
        background: linear-gradient(90deg, rgba(212, 197, 176, 0.1), transparent);
        box-shadow: 
          inset 3px 0 0 var(--accent-gold);
        z-index: 10;
      }
      
      .index-item.active .idx-title,
      .index-item:hover .idx-title {
        color: var(--text-dark);
        text-shadow: 
          0 0 10px rgba(212, 197, 176, 0.5),
          0 0 20px rgba(212, 197, 176, 0.3);
        letter-spacing: 1px;
      }
      
      /* --- 4. THE LENS DIAL OVERRIDES --- */
      .lens-dial-wrapper {
        background: #FFFCF7;
        box-shadow: inset 0 10px 20px rgba(180, 170, 160, 0.1);
        border-top: 1px solid rgba(94, 84, 79, 0.05);
      }
      
      .dial-indicator {
        background: var(--accent-gold);
        box-shadow: 0 0 15px var(--accent-gold);
        width: 2px;
      }
      
      .dial-indicator::after {
        content: '';
        position: absolute;
        bottom: 0; left: 50%;
        width: 40px; height: 150px;
        background: linear-gradient(to top, rgba(212, 197, 176, 0.3), transparent);
        transform: translateX(-50%);
        filter: blur(10px);
        pointer-events: none;
      }
    
      /* --- 5. MODAL TWEAKS --- */
      .iframe-wrapper {
        aspect-ratio: 16 / 9 !important;
        width: 85% !important;
        max-width: 1200px !important;
        max-height: 90vh !important;
        height: auto !important;
      }
      .close-tour-btn {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.2rem !important;
        top: 20px !important;
        right: 20px !important;
      }
    }
  /* ==========================================================================
      5.2 MOBILE: "THE DECK" (Levitating & 3D Marquee)
      ========================================================================== */
  
  @media (max-width: 900px) {
    /* Hide Desktop Elements */
    .desktop-only-grid { display: none !important; }
    
    .arch-index-section { padding: 0; border: none; }
    
    /* --- 1. THE DECK LAYOUT --- */
    .mobile-only-deck {
      display: block !important;
      width: 100%;
      padding: 60px 20px;
      background: radial-gradient(circle at center 40%, #FFFCF7 0%, #E6E1DC 100%);
      overflow: hidden;
      position: relative;
      /* Mask the bottom 10% with a gradient fade */
      -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
      mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
      border-bottom: 1px solid rgba(212, 197, 176, 0.2);
      box-shadow: 0 10px 50px -10px rgba(180, 170, 160, 0.3);
    }
  
    /* Headers - MATCHED TO STANDARD */
    .flip-header { text-align: center; margin-bottom: 25px; }
    .flip-header .section-title { font-size: 2.5rem !important; font-family: "Cormorant Garamond", serif; color: var(--text-dark); margin: 0; line-height: 1; }
    .flip-header .col-label { font-size: 0.75rem; letter-spacing: 4px; font-weight: 700; color: var(--accent-gold); display: block; margin-bottom: 10px; }
    .flip-header .section-divider { width: 50px; height: 1px; background: var(--accent-gold); margin: 15px auto 0 auto; opacity: 0.6; }
  
    /* --- 2. THE LEVITATING STAGE --- */
    .mobile-only-deck .cinema-stage {
      width: 100%;
      aspect-ratio: 3 / 2;
      margin: 0 auto 20px auto;
      border: 1px solid rgba(94, 84, 79, 0.1);
      border-radius: 4px;
      height: auto;
      z-index: 10;
      
      /* 3D Levitation Logic */
      transform-style: preserve-3d;
      perspective: 1000px;
      transform: perspective(1000px) rotateX(2deg) scale(0.98); /* Slight backward tilt */
      box-shadow: 
        0 15px 35px rgba(180, 170, 160, 0.4), 
        0 5px 15px rgba(180, 170, 160, 0.2);
      animation: levitate 6s ease-in-out infinite;
      overflow: hidden; /* Keep the flare inside */
    }
    
    @keyframes levitate {
      0%, 100% { transform: perspective(1000px) rotateX(2deg) translateY(0); }
      50% { transform: perspective(1000px) rotateX(4deg) translateY(-8px); } /* Floats up */
    }
  
    .c-shutter { z-index: 10; }
  
    /* --- 3. FLASHBULB & ANAMORPHIC FLARE (Mobile) --- */
    
    /* The Light Streak */
    .mobile-only-deck .cinema-stage::before {
      content: '';
      position: absolute;
      top: 0; left: -150%;
      width: 100%; height: 100%;
      /* A sharp, diagonal beam of light */
      background: linear-gradient(
        105deg, 
        transparent 40%, 
        rgba(212, 197, 176, 0.1) 45%, 
        rgba(255, 255, 255, 0.7) 50%, 
        rgba(212, 197, 176, 0.1) 55%, 
        transparent 60%
      );
      transform: skewX(-20deg);
      mix-blend-mode: overlay;
      animation: anamorphicFlare 7s infinite ease-in-out;
      pointer-events: none;
      z-index: 30;
    }
    
    @keyframes anamorphicFlare {
      0% { left: -150%; opacity: 0; }
      20% { opacity: 1; }
      50% { left: 150%; opacity: 0; }
      100% { left: 150%; opacity: 0; }
    }
  
    /* The Flashbulb Interaction (Tap) */
    .mobile-only-deck .cinema-stage:active::after {
      content: '';
      position: absolute;
      inset: 0;
      background: white;
      opacity: 0.8;
      mix-blend-mode: overlay;
      transition: opacity 0.05s; /* Instant on */
      z-index: 100;
    }
    
    /* Normal state is invisible */
    .mobile-only-deck .cinema-stage::after {
      content: ''; 
      position: absolute;
      inset: 0;
      background: white; 
      opacity: 0;
      mix-blend-mode: overlay;
      transition: opacity 0.6s ease; /* Slow fade out */
      pointer-events: none;
      z-index: 100;
    }
  
    /* --- 4. 3D MARQUEE SCROLLER --- */
    .marquee-container {
      position: relative;
      width: 100%;
      margin-bottom: 25px;
      z-index: 50;
      
      /* 3D Space & Styles */
      perspective: 800px;
      background: transparent !important;
      border: none !important;
      padding: 40px 0 !important;
      mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    }
    
    /* Floor Reflection */
    .marquee-container::after {
      content: '';
      position: absolute;
      bottom: 20px;
      left: 10%; right: 10%;
      height: 20px;
      background: radial-gradient(ellipse at center, rgba(212, 197, 176, 0.3), transparent 70%);
      filter: blur(10px);
      z-index: -1;
      animation: breatheGlow 4s infinite ease-in-out; 
    }
    
    @keyframes breatheGlow {
      0%, 100% { opacity: 0.3; transform: scaleX(0.8); }
      50% { opacity: 0.8; transform: scaleX(1.2); }
    }
  
    .marquee-track {
      display: flex;
      overflow-x: auto;
      padding: 15px 0;
      gap: 20px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch; 
      touch-action: pan-x; 
      cursor: grab;
      
      /* 3D Tilt */
      transform-style: preserve-3d;
      transform: rotateX(20deg); 
    }
    .marquee-track::-webkit-scrollbar { display: none; }
  
    .m-item {
      background: transparent;
      border: none;
      font-family: "Lato", sans-serif;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 1px;
      white-space: nowrap;
      padding: 10px;
      flex-shrink: 0;
      touch-action: manipulation;
      
      /* 3D Item Styles */
      color: #8C8276;
      transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      transform-origin: center bottom;
    }
  
    .m-item.active {
      color: var(--text-dark);
      /* Floats UP and towards the user */
      transform: translateY(-15px) scale(1.5) translateZ(50px);
      text-shadow: 
        0 0 10px rgba(212, 197, 176, 0.5),
        0 0 20px rgba(212, 197, 176, 0.3);
      /* Adds a spotlight glow underneath */
      background: radial-gradient(ellipse at center bottom, rgba(212, 197, 176, 0.4), transparent 70%);
      border-radius: 50%;
    }
  
    .fade-left, .fade-right { position: absolute; top: 0; bottom: 0; pointer-events: none; z-index: 55; }
    .fade-left { left: 0; background: linear-gradient(to right, #E6E1DC 20%, transparent 100%); width: 50px; }
    .fade-right { right: 0; background: linear-gradient(to left, #E6E1DC 20%, transparent 100%); width: 50px; }
  
    /* --- 5. MOBILE BUTTONS (Bouncy Spring) --- */
    .cinema-info { text-align: center; margin-top: 5px; }
    
    .cinema-btn {
      display: inline-block;
      font-family: "Lato", sans-serif;
      font-size: 0.75rem;
      color: var(--accent-gold);
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 800;
      padding: 14px 40px;
      border-radius: 4px;
      
      /* Styles */
      position: relative;
      background: rgba(212, 197, 176, 0.2);
      border: 1px solid rgba(212, 197, 176, 0.3);
      backdrop-filter: blur(5px);
      overflow: hidden;
      box-shadow: 0 10px 20px rgba(180, 170, 160, 0.3);
      transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy spring */
    }
  
    .cinema-btn:active {
      transform: scale(0.92) translateY(2px);
      background: var(--accent-gold);
      color: #FFF;
      box-shadow: 0 0 15px var(--accent-gold);
      border-color: transparent;
    }
  
    /* Sheen Animation */
    .cinema-btn::before {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
      animation: sheenPass 3s infinite;
    }
    @keyframes sheenPass {
      0% { left: -100%; }
      20% { left: 100%; }
      100% { left: 100%; }
    }
  }
  
/* ==========================================================================
   6. PREMIUM EDITING - SEPARATE TONES (Porcelain & Taupe)
   ========================================================================== */
   #premiumSection {
    position: relative; overflow: hidden;
    background: #FFFCF7 !important; 
    color: var(--edit-text, #1a1a1a) !important;
    padding: 100px 20px; 
  }
 
  .premium-column-title {
    font-family: "Cormorant Garamond", serif;
    font-size: 3.5rem; 
    font-weight: 300; 
    font-style: italic;
    color: #1a1a1a; 
    letter-spacing: -2px; 
    line-height: 1.1;
    margin-bottom: 25px; 
    position: relative;
    z-index: 5;
    text-shadow: 2px 2px 0px rgba(255,255,255,0.4); 
    border-bottom: 1px solid rgba(190, 160, 130, 0.4);
    padding-bottom: 15px;
    display: inline-block;
  }

  .sidebar-text-header {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.8rem; 
    font-weight: 300; 
    font-style: italic;
    color: #1a1a1a; 
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(190, 160, 130, 0.4);
    flex-shrink: 0; 

    /* NEW: This balances lines evenly to prevent single words on the last line */
    text-wrap: balance; 
  }

  .premium-sidebar-gallery { display: none; }
  
  @media (min-width: 901px) {
    .premium-split-wrapper {
      display: grid;
      grid-template-columns: 1.8fr 1fr; 
      gap: 60px;
      align-items: start; 
      max-width: 1600px;
      margin: 0 auto;
      padding: 0 40px;
    }
  
    .desktop-premium-console {
      width: 100%; margin: 0; perspective: 2500px;
      padding-right: 20px; 
    }
  
    .premium-sidebar-gallery {
      display: flex;
      flex-direction: column;
      position: relative;
      z-index: 20;
      background: linear-gradient(to bottom, #F2EFE9 0%, #E6E1DC 100%);
      border: 1px solid rgba(255, 255, 255, 0.6);
      box-shadow: inset 0 0 20px rgba(255,255,255,0.5), 0 20px 40px rgba(0,0,0,0.05); 
      border-radius: 20px; 
      padding: 40px 30px; 
    }

    /* --- SCROLL VIEW (RATIO FOR .35 PEEK) --- */
    .gallery-scroll-view {
       width: 100%;
       aspect-ratio: 3 / 4.0; 
       overflow-y: auto; 
       padding: 0 40px; 
       scrollbar-width: thin;
       scrollbar-color: rgba(184, 138, 68, 0.5) transparent; 
    }

    .gallery-scroll-view::-webkit-scrollbar { width: 4px; }
    .gallery-scroll-view::-webkit-scrollbar-track { background: transparent; }
    .gallery-scroll-view::-webkit-scrollbar-thumb { background: rgba(184, 138, 68, 0.5); border-radius: 4px; }

    #sidebar-recent-listings {
       display: flex;
       flex-direction: column;
       gap: 20px; 
       width: 100%;
       padding-bottom: 20px;
    }

/* --- FOOTER BUTTON: EARTHEN BRONZE (Natural Luxury) --- */
.sidebar-footer {
  padding-top: 30px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

.luxe-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 22px 30px;
  
  /* NEW: Deep Earthen Bronze Gradient */
  background: linear-gradient(135deg, #3E3632 0%, #5E544F 100%);
  
  /* Text Color: Soft Cream/White for contrast */
  color: #F2EFE9; 
  
  text-align: center;
  text-decoration: none;
  font-family: "Lato", sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.75rem;
  font-weight: 700; /* Slightly lighter weight for elegance */
  
  border-radius: 4px;
  overflow: hidden;
  
  /* Subtle Gold Border */
  border: 1px solid rgba(184, 138, 68, 0.3);
  
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  
  /* Soft Shadow */
  box-shadow: 0 10px 30px rgba(62, 54, 50, 0.2);
}

/* Optional: Subtle grain texture or shimmer */
.luxe-btn-shimmer {
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(
      90deg, 
      transparent, 
      rgba(255, 255, 255, 0.1), 
      transparent
  );
  transform: skewX(-25deg);
  animation: sharp-shine 6s infinite; /* Slower, more natural shine */
  pointer-events: none;
}

@keyframes sharp-shine {
  0% { left: -100%; }
  15% { left: 200%; } 
  100% { left: 200%; } 
}

/* HOVER STATE */
.luxe-btn:hover {
  transform: translateY(-3px);
  
  /* On hover, it gets slightly lighter/warmer */
  background: linear-gradient(135deg, #4A413C 0%, #6B625D 100%);
  
  border-color: rgba(184, 138, 68, 0.6);
  box-shadow: 0 15px 40px rgba(62, 54, 50, 0.3);
  letter-spacing: 4px;
}

.luxe-btn:hover .luxe-btn-text i {
  transform: translateX(8px);
  color: #F5D585; /* Icon turns gold on hover */
}

.luxe-btn-text i {
  margin-left: 12px;
  transition: transform 0.4s ease, color 0.4s ease;
  color: rgba(255, 255, 255, 0.6); /* Icon starts muted */
}
    /* --- CINEMATIC CARD --- */
    .vertical-card, #sidebar-recent-listings > div:not(:first-child), #sidebar-recent-listings > a {
      position: relative;
      display: block; 
      width: 100%;
      aspect-ratio: 3 / 2;
      border-radius: 6px;
      overflow: hidden;
      background: #000; 
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
      flex-shrink: 0; 
    }

    .vertical-card:hover {
      transform: translateY(-8px) scale(1.02);
      border-color: rgba(184, 138, 68, 0.5);
    }
  }

  /* --- STANDARDS BAR (Glass Style) --- */
  .premium-standards-glass {
      margin-top: 25px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 15px;
      background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 100%);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.8);
      box-shadow: 0 10px 40px -10px rgba(190, 160, 130, 0.2);
      border-radius: 16px;
  }

  .standard-card {
      display: flex;
      align-items: center;
      gap: 16px;
      flex: 1;
      justify-content: center;
      transition: transform 0.3s ease;
  }

  .standard-card:hover { transform: translateY(-3px); }

  .icon-gold-wrapper i {
      font-size: 1.6rem;
      background: linear-gradient(135deg, #B88A44 0%, #F5D585 50%, #B88A44 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 2px 4px rgba(184, 138, 68, 0.2));
  }

  .standard-info h5 {
      font-family: "Lato", sans-serif;
      font-size: 0.75rem;
      font-weight: 900;
      text-transform: uppercase;
      color: #2A2420;
      margin: 0;
  }

  .standard-info p {
      font-family: "Cormorant Garamond", serif;
      font-size: 0.95rem;
      font-style: italic;
      color: #5E544F;
      margin: 0;
  }

  .glass-divider { width: 1px; height: 35px; background: rgba(0,0,0,0.06); }

  /* --- CONSOLE INTERNALS --- */
  .console-viewer {
    width: 100%; aspect-ratio: 3 / 2; position: relative;
    background: #000; border-radius: 8px; overflow: hidden;
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.5); 
  }
  .c-img-base, .c-img-overlay, .c-img-overlay img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .c-img-overlay { z-index: 2; border-right: 1px solid rgba(255, 255, 255, 0.5); }
  .console-range { position: absolute; inset: 0; z-index: 50; opacity: 0; cursor: col-resize; }
  .console-handle-line { position: absolute; top: 0; bottom: 0; width: 1px; background: #fff; z-index: 20; box-shadow: 0 0 20px #fff; }
  .console-handle-orb {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); 
    border: 1px solid #fff; backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; color: #fff;
  }

/* ============================================
   CONSOLE NAVIGATION BAR (Buttons)
   ============================================ */
.console-nav-bar {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40; /* Above everything */
  
  display: flex;
  gap: 10px;
  padding: 8px;
  
  /* Glassmorphism Container */
  background: rgba(20, 20, 20, 0.6); 
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50px; /* Pill shape */
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.nav-tab {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 30px;
  
  font-family: "Lato", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6); /* Default muted text */
  
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-tab i {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

/* Hover State */
.nav-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

/* Active State (Selected Button) */
.nav-tab.active {
  background: #F2EFE9; /* Porcelain White background */
  color: #1a1a1a; /* Dark text for contrast */
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.nav-tab.active i {
  color: #B88A44; /* Gold icon when active */
}

/* Mobile Responsiveness for Nav */
@media (max-width: 600px) {
  .console-hud-text {
    top: 20px;
    left: 20px;
    right: 20px;
  }
  
  #hudTitle { font-size: 1.8rem; }
  
  .console-nav-bar {
    width: 90%;
    bottom: 15px;
    justify-content: space-between;
    padding: 6px;
  }
  
  .nav-tab {
    padding: 8px 12px;
    font-size: 0.65rem;
  }
  
  /* Hide text labels on very small screens, show icons only? 
     Optional: uncomment below if buttons are too wide on mobile */
  /* .nav-tab span { display: none; } */
}
.console-nav-bar {
  /* ... existing styles ... */
  
  /* CHANGE THIS from 40 to 60 */
  z-index: 60; 
}
/* ==========================================================================
   MOBILE PREMIUM SECTION (Optimized)
   ========================================================================== */

/* --- Default State (Hidden on Desktop) --- */
.mobile-premium-wrapper { display: none; }

/* --- Mobile Breakpoint --- */
@media (max-width: 900px) {
  
  /* Hide Desktop Elements */
  .desktop-premium-console, 
  .desktop-only { 
    display: none !important; 
  }

  /* Show Mobile Wrapper */
  .mobile-premium-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
    margin: 20px auto; /* Smaller, even top and bottom spacing */
    padding: 0 20px;
    position: relative;
    z-index: 10;
  }

  /* --- 1. Glass Navigation Tabs --- */
  .mobile-glass-nav {
    display: flex;
    justify-content: center;
    gap: 8px; /* Slightly wider gap for touch targets */
    margin-bottom: 25px;
    background: rgba(255, 255, 255, 0.6);
    padding: 6px;
    border-radius: 50px;
    border: 1px solid rgba(180, 170, 160, 0.2);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  }

  .m-glass-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: #8C8276;
    font-family: "Lato", sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 0;
    border-radius: 40px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .m-glass-tab.active {
    background: #FFF;
    color: #1a1a1a;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transform: scale(1.02);
  }

  /* --- 2. The View Deck (Container) --- */
  .mobile-view-deck {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; /* Standard mobile photo ratio */
    border-radius: 16px;
    overflow: hidden;
    background: #E8E4DF;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
  }

  /* Individual Slides */
  .m-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 1;
  }

  .m-slide.active-slide {
    opacity: 1;
    pointer-events: auto;
    z-index: 10;
  }

  .m-compare-frame {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Images */
  .m-bg, .m-fg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .m-fg {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 100%; /* Initially full width, clipped by parent logic or inline styles */
    z-index: 2;
    border-right: 2px solid #FFF; /* The divider line */
    overflow: hidden;
    will-change: clip-path;
  }

  /* --- 3. The Slider Controls --- */
  /* Invisible Input for Touch Handling */
  .m-slider-input {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    z-index: 50;
    margin: 0;
    cursor: col-resize;
    -webkit-appearance: none; /* Fix for iOS */
  }

  /* Visible Handle Button */
  .m-slider-handle {
    position: absolute;
    top: 50%;
    width: 44px; height: 44px; /* Larger touch target visual */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(5px);
    border: 2px solid #FFF;
    border-radius: 50%;
    z-index: 20;
    pointer-events: none; /* Input controls movement */
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Arrows inside handle */
  .m-slider-handle::after {
    content: '\f337'; /* FontAwesome arrows-left-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.9rem;
    color: #FFF;
  }

  /* --- 4. Caption Overlay --- */
  .m-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 40px 20px 15px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    z-index: 25;
    pointer-events: none;
    text-align: left;
  }

  .m-caption h3 {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.5rem;
    color: #FFF;
    margin: 0 0 5px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  }

  .m-caption p {
    font-family: "Lato", sans-serif;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  }
}    

/* ==========================================================================
      7. TRANSPARENT PRICING & WORKFLOW (FIXED SLIDER)
      ========================================================================== */

  /* --- Intro Text & Contact Reveal (UPGRADED MASTER TITLE) --- */
  .pricing-intro-block {
    text-align: center;
    margin-bottom: 50px;
    padding: 0 15px;
    position: relative;
    z-index: 10;
  }
  .pi-easy-text {
    font-family: "Cormorant Garamond", serif;
    font-size: 3.2rem; /* Massive Title Size */
    font-weight: 500;
    color: var(--text-dark, #2B2420);
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin: 0 auto 15px auto;
    max-width: 900px;
    text-shadow: 0 10px 30px rgba(176, 155, 128, 0.3);
  }
  .pi-easy-text .gold-text {
    background: linear-gradient(135deg, #8C6A36 0%, #C6A664 20%, #F5D585 40%, #FFFFFF 50%, #F5D585 60%, #C6A664 80%, #8C6A36 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    animation: liquidGoldShine 4s linear infinite;
    filter: drop-shadow(0 5px 15px rgba(140, 106, 54, 0.3));
    font-weight: 700;
  }
  .pi-subtitle-text {
    display: block;
    font-size: 1.8rem;
    font-weight: 400;
    text-shadow: none;
    letter-spacing: 0;
    margin-top: 10px;
  }
  .pi-alt-text {
    font-family: "Lato", sans-serif;
    font-size: 0.9rem;
    color: #8C8276;
    margin: 0 auto 25px auto;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 800;
  }
  .pi-contact-docks {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
  }
  .contact-reveal-wrap {
    display: inline-flex;
    align-items: center;
    background: rgba(240, 235, 230, 0.8);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 197, 176, 0.6);
    border-radius: 50px;
    padding: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
  }
  .emoji-reveal-btn {
    background: #FFF;
    border: 1px solid var(--price-gold, #C6A664);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: 0.3s;
    outline: none;
    color: #000;
  }
  @media (hover: hover) {
    .emoji-reveal-btn:hover {
      transform: scale(1.08);
      box-shadow: 0 5px 15px rgba(198, 166, 100, 0.4);
    }
  }
  .reveal-pop {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-family: "Lato", sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--price-gold, #C6A664);
    text-decoration: none;
    pointer-events: none;
    letter-spacing: 0.5px;
  }
  .reveal-pop.active {
    max-width: 300px;
    opacity: 1;
    padding: 0 15px 0 10px;
    pointer-events: auto;
  }
   
  /* --- Wrapper & Glass Layout --- */
  .pricing-interface-wrapper {
    width: 100%; max-width: 1100px; margin: 40px auto; padding: 0 20px;
    z-index: 10; position: relative;
    perspective: 2000px; 
  }
   
  .pricing-interface-glass {
    display: grid; grid-template-columns: 1fr 1.2fr;
    background: linear-gradient(135deg, rgba(255, 252, 247, 0.95) 0%, rgba(240, 235, 230, 0.9) 100%) !important;
    backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.9);
    border-left: 1px solid rgba(255, 255, 255, 0.9);
    border-right: 1px solid rgba(212, 197, 176, 0.4);
    border-bottom: 1px solid rgba(212, 197, 176, 0.4);
    border-radius: 16px; 
    overflow: hidden !important; position: relative !important;
    box-shadow: 
      inset 0 1px 0 0 rgba(255, 255, 255, 1),
      inset 1px 0 0 0 rgba(255, 255, 255, 1),
      inset 0 0 30px rgba(255, 255, 255, 0.5),
      0 25px 50px -12px rgba(62, 54, 50, 0.35), 
      0 0 1px rgba(0,0,0,0.1);
    animation: float3D 6s ease-in-out infinite;
    transform-style: preserve-3d;
  }
   
  .pricing-interface-glass::before {
    content: ""; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    opacity: 0.4; mix-blend-mode: overlay; pointer-events: none; z-index: 0;
  }
   
  /* Utilities */
  .desktop-only-pricing { display: grid; }
  .mobile-only-pricing { display: none; }
   
  /* --- Left Panel (Card) --- */
  .card-style-left {
    padding: 40px 30px; 
    border-right: 1px solid rgba(212, 197, 176, 0.2);
    background: transparent !important; display: flex; flex-direction: column;
    align-items: center; text-align: center; position: relative; overflow: hidden; z-index: 2;
    box-shadow: inset -10px 0 20px -10px rgba(0,0,0,0.02);
  }
   
  .pi-panel-core::after {
    content: ''; position: absolute; top: 0; left: -150%; width: 100%; height: 100%;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.6) 40%, rgba(255, 255, 255, 0.0) 60%);
    transform: skewX(-20deg); animation: glassSheen 6s infinite ease-in-out; pointer-events: none; z-index: 1;
  }
   
  /* Typography */
  .card-tier-name { 
    font-family: "Cormorant Garamond", serif; font-size: 2.2rem; color: var(--price-text-main); margin: 0 0 5px 0; line-height: 1; 
    text-shadow: 0 2px 0 rgba(255,255,255,0.8);
  }
   
  /* --- MIND BOGGLING PRICE (DESKTOP) --- */
  .card-price-wrapper {
    font-family: "Cormorant Garamond", serif; 
    
    /* HUGE VISIBILITY UPGRADE */
    font-size: 5.5rem; 
    font-weight: 600;
    line-height: 0.9; 
    margin: 10px 0 15px 0; 
    letter-spacing: -2px;
    
    /* LIQUID GOLD GRADIENT TEXT */
    background: linear-gradient(
      135deg, 
      #8C6A36 0%,    /* Dark Bronze */
      #C6A664 20%,   /* Deep Gold */
      #F5D585 40%,   /* Bright Gold */
      #FFFFFF 50%,   /* SHINE HIGHLIGHT */
      #F5D585 60%,   /* Bright Gold */
      #C6A664 80%,   /* Deep Gold */
      #8C6A36 100%   /* Dark Bronze */
    );
    background-size: 250% auto;
    
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    
    /* 3D POP FILTER (Separates text from background) */
    filter: drop-shadow(0 15px 15px rgba(140, 106, 54, 0.3));
    
    /* INFINITE SHINE ANIMATION */
    animation: liquidGoldShine 4s linear infinite;
    z-index: 10;

    /* SPEED OPTIMIZATION: NO TRANSITION DELAY */
    transition: none !important;
    will-change: transform; /* Hardware acceleration */
  }
   
  .card-price-wrapper .currency { 
    font-size: 2.8rem; 
    vertical-align: top; 
    margin-right: 4px; 
    font-weight: 400;
    
    /* Keep currency slightly subtler but still gold */
    background: linear-gradient(to bottom, #C6A664, #8C6A36);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
   
  .card-range-display {
    font-family: "Lato", sans-serif; font-size: 0.8rem; letter-spacing: 2px;
    text-transform: uppercase; color: var(--price-text-light); font-weight: 700; margin-bottom: 25px;
  }
   
  /* Features & Buttons */
  .card-feature-list { list-style: none; padding: 0; margin: 0 0 30px 0; display: inline-block; text-align: left; }
  .card-feature-list li { color: var(--price-text-light); font-size: 0.95rem; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
  .card-feature-list i { 
    color: var(--price-gold); font-size: 0.8rem; 
    filter: drop-shadow(0 2px 4px rgba(184, 138, 68, 0.3)); 
  }
  .card-feature-list strong { color: var(--price-text-main); }
   
  .card-book-btn {
    display: block; width: 100%; max-width: 300px; padding: 16px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0)); 
    border: 1px solid var(--price-gold); color: var(--price-gold);
    font-family: "Lato", sans-serif; font-size: 0.9rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 2px; text-decoration: none;
    transition: all 0.3s ease; margin-bottom: 10px; cursor: pointer; text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
  }
  .card-book-btn:hover { 
    background: var(--price-gold); color: #FFF; 
    box-shadow: 0 10px 25px rgba(194, 157, 125, 0.4); 
    transform: translateY(-2px);
  }
   
  .tier-badge {
    position: absolute; top: 0; right: 0; background: var(--price-gold); color: #FFF;
    font-family: "Lato", sans-serif; font-size: 0.65rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: 1px; padding: 8px 15px;
    border-bottom-left-radius: 8px; opacity: 0; transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 20;
    box-shadow: -5px 5px 15px rgba(180, 170, 160, 0.2); pointer-events: none;
  }
  .tier-badge.show { opacity: 1; transform: translateY(0); }
   
  /* --- Slider --- */
  .card-slider-area { width: 100%; text-align: center; border-top: 1px solid rgba(212, 197, 176, 0.2); padding-top: 25px; margin-top: auto; }
  .slider-label { display: block; font-size: 0.75rem; letter-spacing: 3px; color: var(--price-text-light); font-weight: 800; text-transform: uppercase; margin-bottom: 8px; }
  .slider-readout { font-family: "Cormorant Garamond", serif; font-size: 2.5rem; color: var(--price-text-main); line-height: 1; margin-bottom: 5px; }
  .slider-sub { font-size: 0.75rem; color: #9C948C; margin-bottom: 25px; }
  .slider-track-wrapper { position: relative; width: 100%; padding: 0 15px; z-index: 10; }
   
  .lux-range-slider { -webkit-appearance: none; width: 100%; background: transparent; outline: none; margin: 0; cursor: pointer; }
   
  /* Slider Track */
  .lux-range-slider::-webkit-slider-runnable-track {
    width: 100%; height: 8px; 
    background: linear-gradient(to bottom, #D9D2C9, #F0ECE8);
    border-radius: 4px;
    border: 1px solid rgba(212, 197, 176, 0.4); 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); 
  }
  .lux-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none; height: 32px; width: 32px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #FFF, #E8DCC8, #B8A88A);
    margin-top: -13px; border: 1px solid #FFF; position: relative; z-index: 2;
    box-shadow: 0 5px 15px rgba(62, 54, 50, 0.3), inset 0 -2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .lux-range-slider::-moz-range-track {
    width: 100%; height: 8px; background: linear-gradient(to bottom, #D9D2C9, #F0ECE8); border-radius: 4px;
    border: 1px solid rgba(212, 197, 176, 0.4); box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  }
  .lux-range-slider::-moz-range-thumb {
    height: 32px; width: 32px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #FFF, #E8DCC8, #B8A88A);
    border: 1px solid #FFF; cursor: pointer;
    box-shadow: 0 5px 15px rgba(62, 54, 50, 0.3);
  }
   
  .lux-range-slider.teach-me::-webkit-slider-thumb { animation: teachSlide 2s ease-in-out 1s infinite !important; }
  .lux-range-slider.teach-me::-moz-range-thumb { animation: teachSlide 2s ease-in-out 1s infinite !important; }
  .lux-range-slider:hover::-webkit-slider-thumb { transform: scale(1.1); box-shadow: 0 8px 20px rgba(184, 138, 68, 0.4); }
  .lux-range-slider:active::-webkit-slider-thumb { transform: scale(1.15); background: #FFF; cursor: grabbing; box-shadow: 0 0 0 4px rgba(194, 157, 125, 0.2), 0 0 30px rgba(194, 157, 125, 0.6); }
  .range-ticks { display: flex; justify-content: space-between; color: var(--price-text-light); font-size: 0.65rem; margin-top: 15px; font-weight: 700; letter-spacing: 1px; }
   
  /* --- Right Panel (Add-ons) --- */
  .pi-panel-addons { padding: 30px; display: flex; flex-direction: column; background: transparent !important; z-index: 2; position: relative; }
  .pi-header-compact { text-align: left; margin-bottom: 20px; }
  .pi-eyebrow { display: block; color: var(--price-gold); font-size: 0.75rem; letter-spacing: 4px; font-weight: 800; margin-bottom: 5px; text-transform: uppercase; }
  .pi-title { font-family: "Cormorant Garamond", serif; font-size: 2.2rem; color: var(--price-text-main); margin: 0; line-height: 0.9; }
   
  .pi-accordion-wrapper { width: 100%; margin-bottom: 15px; }
  .pi-acc-item { border-bottom: 1px solid rgba(212, 197, 176, 0.2); margin-bottom: 10px; }
  .pi-acc-header { padding: 10px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--price-text-light); font-family: "Cormorant Garamond", serif; font-size: 1.3rem; transition: 0.3s; }
  .pi-acc-header:hover, .pi-acc-item.open .pi-acc-header { color: var(--price-text-main); text-shadow: 0 1px 0 rgba(255,255,255,0.8); }
  .pi-acc-item.open .pi-acc-header i { transform: rotate(180deg); color: var(--price-gold); }
  .pi-acc-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; }
  .pi-acc-inner { padding-bottom: 15px; }
   
  .addon-toggle { 
    display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; 
    margin-bottom: 6px; 
    background: rgba(255, 255, 255, 0.3); border-radius: 6px; 
    cursor: pointer; border: 1px solid rgba(212, 197, 176, 0.2); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.02); transition: 0.2s; 
  }
  .addon-toggle:hover { background: rgba(255, 255, 255, 0.7); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
  .addon-toggle.active { background: #FFF; border-color: var(--price-gold); box-shadow: 0 5px 15px rgba(184, 138, 68, 0.15); }
  .at-name { color: #8C8276; font-size: 0.9rem; transition: color 0.2s; }
  .at-right { display: flex; align-items: center; gap: 10px; }
  .at-price { color: var(--price-text-main); font-weight: 700; font-size: 0.85rem; }
  .addon-toggle.active .at-name, .addon-toggle.active .at-price { color: var(--price-text-main); font-weight: 700; }
  .at-indicator { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(212, 197, 176, 0.6); display: flex; align-items: center; justify-content: center; font-size: 0.6rem; color: rgba(140, 130, 118, 0.5); }
  .addon-toggle.active .at-indicator { background: transparent; border-color: var(--price-gold); color: var(--price-gold); transform: rotate(45deg); }
   
  .pi-booking-note {
    font-family: "Lato", sans-serif; font-size: 0.7rem; color: #9C948C;
    text-align: center; margin: 20px 0 10px 0; font-style: italic; letter-spacing: 0.5px; line-height: 1.4;
  }
  .pi-booking-note i { color: var(--price-gold); margin-right: 6px; }
   
  .pi-total-dock { 
    background: rgba(255, 255, 255, 0.5); border-radius: 4px; padding: 15px; margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.5); display: flex; justify-content: space-between; align-items: center; 
    box-shadow: 0 -10px 30px rgba(180, 170, 160, 0.1); 
  }
  .total-label { color: #9C948C; font-size: 0.65rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 5px; font-weight: 800; }
  .total-amount { font-family: "Cormorant Garamond", serif; font-size: 2.2rem; color: var(--price-text-main); line-height: 1; text-shadow: 0 1px 0 #FFF; }
  .total-col { transition: background 0.3s; border-radius: 4px; }
  .total-col.flash-gold { animation: totalFlash 0.6s ease-out; }
   
  .mind-boggling-wrapper { margin-top: 25px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .mb-hint { font-family: "Lato", sans-serif; font-size: 0.7rem; color: #9C948C; text-transform: uppercase; letter-spacing: 2px; margin: 0; }
  .mind-boggling-btn {
    position: relative; 
    background: linear-gradient(145deg, rgba(255, 252, 247, 1), rgba(240, 235, 230, 0.9));
    border: 1px solid rgba(212, 197, 176, 0.6);
    padding: 12px 40px; color: var(--price-gold); font-family: "Cormorant Garamond", serif; font-size: 1.1rem;
    font-weight: 600; text-transform: uppercase; letter-spacing: 2px; cursor: pointer;
    overflow: hidden; border-radius: 50px; transition: all 0.4s ease; z-index: 1; animation: goldPulse 3s infinite;
    box-shadow: 0 10px 20px -5px rgba(194, 157, 125, 0.3), inset 0 2px 0 rgba(255,255,255,1);
  }
  .mind-boggling-btn:hover { 
    background: var(--price-gold); color: #FFF; border-color: var(--price-gold); 
    transform: translateY(-3px); box-shadow: 0 15px 30px rgba(194, 157, 125, 0.5); 
  }
  .mb-liquid {
    position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 197, 176, 0.2), rgba(212, 197, 176, 0.6), rgba(212, 197, 176, 0.2), transparent);
    transform: skewX(-20deg); z-index: -1; animation: liquidFlow 4s infinite linear;
  }
  .mind-boggling-btn:hover .mb-liquid { display: none; }
   
  /* --- Global Animations --- */
  @keyframes liquidGoldShine { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
  @keyframes float3D { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
  @keyframes teachSlide { 0% { transform: scale(1); } 20% { transform: scale(1.1); box-shadow: 0 0 15px #D4C5B0; } 40% { transform: scale(1.1) translateX(5px); } 60% { transform: scale(1.1) translateX(-5px); } 100% { transform: scale(1); } }
  @keyframes goldPulse { 0% { box-shadow: 0 0 0 0 rgba(212, 197, 176, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(212, 197, 176, 0); } 100% { box-shadow: 0 0 0 0 rgba(212, 197, 176, 0); } }
  @keyframes liquidFlow { 0% { left: -100%; } 20% { left: 100%; } 100% { left: 100%; } }
  @keyframes totalFlash { 0% { background: transparent; } 30% { background: rgba(212, 197, 176, 0.3); } 100% { background: transparent; } }
  @keyframes glassSheen { 0%, 80% { left: -150%; } 100% { left: 150%; } }
   
  /* --- FAST POP ANIMATION (0.15s) --- */
  @keyframes pricePop { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.2); } /* Bigger Pop */
    100% { transform: scale(1); } 
  }
  @keyframes floatCash { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-50px) scale(1.2); opacity: 0; } }
   
  /* Updated to be FAST (0.15s) using a Spring Curve */
  .pop-anim { animation: pricePop 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
   
  #dynamicBookBtn, #dynamicBookBtnMobile1, #dynamicBookBtnMobile2 { animation: goldPulse 2s infinite !important; }
   
  /* Particles & Spotlight */
  .cash-particle {
    position: fixed; color: var(--price-gold); font-family: "Lato", sans-serif; font-weight: 800;
    font-size: 1.2rem; pointer-events: none; z-index: 9999; opacity: 1;
    animation: floatCash 0.8s forwards ease-out; text-shadow: 0 2px 10px rgba(255,255,255,0.5);
  }
  .mouse-spotlight {
    position: absolute; width: 600px; height: 600px;
    background: radial-gradient(circle at center, rgba(212, 197, 176, 0.2) 0%, rgba(212, 197, 176, 0.05) 30%, transparent 70%);
    transform: translate(-50%, -50%); pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.5s ease; mix-blend-mode: multiply; 
  }
   
  /* --- Workflow Modal (FIXED) --- */
  #workflow-modal { 
    display: flex; align-items: center; justify-content: center; position: fixed !important; 
    top: 0; left: 0; width: 100%; height: 100%; z-index: 999999;
    background: rgba(235, 229, 222, 0.8); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.4s ease;
  }
  #workflow-modal.active { opacity: 1; visibility: visible; pointer-events: auto; }
  .workflow-card-wrapper {
    position: relative; width: 95%; max-width: 900px; background: #FFFCF7;
    border: 1px solid rgba(212, 197, 176, 0.4); box-shadow: 0 0 50px rgba(180, 170, 160, 0.6);
    border-radius: 4px; padding: 50px; z-index: 10; transform: scale(0.95);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); max-height: 90vh; overflow-y: auto; 
  }
  #workflow-modal.active .workflow-card-wrapper { transform: scale(1); }
  .btn-modal-close-x { 
    position: absolute; top: 20px; right: 20px; background: none; border: none; color: #8C8276; 
    font-size: 1.5rem; cursor: pointer; z-index: 20; transition: transform 0.3s ease;
  }
  .btn-modal-close-x:hover { transform: rotate(90deg); color: var(--price-gold); }
   
  .workflow-header { text-align: center; margin-bottom: 40px; }
  .wf-title { font-family: "Cormorant Garamond", serif; font-size: 2.2rem; color: var(--price-text-main); margin: 0; line-height: 1; }
  .wf-subtitle { font-family: "Lato", sans-serif; font-size: 0.75rem; letter-spacing: 3px; color: #9C948C; margin-top: 10px; text-transform: uppercase; }
  
  /* --- FIXED KINETIC SECTION --- */
  .wf-kinetic-container { 
    display: flex !important; 
    height: 350px; 
    border: 1px solid rgba(94, 84, 79, 0.1); 
    overflow: hidden; /* Added to prevent spillover */
  }
  .wf-mobile-stack { display: none !important; }
  
  .wf-step { 
    flex: 1 1 0%; /* Changed to strict 1 1 0% to prevent content blowout */
    min-width: 0; /* CRITICAL: Allows flex item to shrink below content size */
    position: relative; 
    border-right: 1px solid rgba(94, 84, 79, 0.1); 
    overflow: hidden; 
    /* Changed transition to 'ease-out' to stop the "bonkers" elastic bounce effect */
    transition: flex 0.5s ease-out; 
    cursor: crosshair; 
    background: #F2F0ED; 
  }
  .wf-step:last-child { border-right: none; }
  .wf-mask { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent, #E6E1DC); opacity: 0.8; transition: 0.5s; }
  .wf-num { position: absolute; top: 20px; left: 20px; font-family: "Cormorant Garamond"; font-size: 2rem; color: #D6CEC5; transition: 0.5s; z-index: 2; }
  .wf-content { position: absolute; bottom: 30px; left: 30px; right: 30px; z-index: 5; }
  .wf-content h3 { font-family: "Cormorant Garamond"; font-size: 2rem; color: var(--price-text-main); margin: 0; transform: translateY(20px); transition: 0.5s; white-space: nowrap; /* Stops text wrap jump */ }
  .wf-content p { font-family: "Lato"; font-size: 0.9rem; color: #8C8276; margin-top: 10px; opacity: 0; transform: translateY(20px); transition: 0.5s 0.1s; }
  
  .wf-step:hover { 
    flex: 3; /* Expands nicely now due to min-width:0 on siblings */
    background: #FFFCF7; 
  }
  .wf-step:hover .wf-mask { opacity: 0; }
  .wf-step:hover .wf-num { color: #D4C5B0; font-size: 4rem; opacity: 0.2; }
  .wf-step:hover .wf-content h3 { transform: translateY(0); color: var(--price-gold); }
  .wf-step:hover .wf-content p { opacity: 1; transform: translateY(0); }
   
  /* --- Pop-up Pricing Modal (Global) --- */
  #pricing-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; pointer-events: none;
    z-index: 9999999; background: rgba(235, 229, 222, 0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; justify-content: center; overflow-y: auto; transition: all 0.4s ease;
  }
  #pricing-modal-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }
  .pricing-modal-scroll-container { width: 100%; min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
  .pricing-modal-content { width: 100%; max-width: 1100px; position: relative; transform: translateY(30px); transition: transform 0.4s ease; }
  #pricing-modal-overlay.active .pricing-modal-content { transform: translateY(0); }
  .modal-close-btn { position: absolute; top: -50px; right: 0; color: var(--price-text-main); font-size: 2rem; cursor: pointer; transition: 0.3s; z-index: 10; }
  .modal-close-btn:hover { color: var(--accent-gold); transform: rotate(90deg); }
  .pricing-interface-wrapper > .section-header, .pricing-interface-wrapper > .pricing-interface-glass, .pricing-interface-wrapper > .mobile-pricing-swipe {
    max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px;
  }

/* ========================================= */
/* HYPER-LUXURIOUS GLASS BUTTON & DOCK       */
/* ========================================= */

/* 1. The Container: Compact & Frosted */
.lux-ultimate-dock {
  background: rgba(240, 235, 230, 0.75) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 
      0 10px 25px -5px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border-radius: 40px !important;
  padding: 6px 6px 6px 20px !important;
  width: 100%;
  transition: transform 0.3s ease;
  gap: 10px;
}

/* 2. The Button: Hyper-Lux Glass (DESKTOP DEFAULT) */
.lux-hyper-glass-btn {
  position: relative;
  /* Deep Espresso/Bronze Gradient */
  background: linear-gradient(
      135deg, 
      rgba(61, 52, 48, 0.95), 
      rgba(43, 36, 32, 1)
  ) !important;
  
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4) !important;
  
  border-radius: 40px !important;
  color: #F2F0ED !important;
  font-family: "Lato", sans-serif;
  font-weight: 800 !important;
  font-size: 0.85rem !important; /* Default Desktop Font Size */
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* DESKTOP SIZING */
  min-width: 180px; 
  height: 54px;
  padding: 0 30px;
  
  box-shadow: 
      0 8px 20px rgba(0, 0, 0, 0.2),
      inset 0 0 15px rgba(255, 255, 255, 0.05);
  
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent; /* FIXED iOS Flash */
}

/* Isolating Hover for Non-Touch Devices to Fix Mobile Glitch */
@media (hover: hover) {
  .lux-hyper-glass-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(176, 155, 128, 0.9), rgba(61, 52, 48, 0.95)) !important;
    box-shadow: 0 12px 25px rgba(176, 155, 128, 0.3);
  }
}

.lux-hyper-glass-btn:active {
  transform: scale(0.98);
  background: linear-gradient(135deg, rgba(43, 36, 32, 1), rgba(61, 52, 48, 0.95)) !important;
}

/* 3. The Shimmer Animation */
.glass-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: glassRefract 3s infinite ease-in-out;
  pointer-events: none;
  z-index: 1;
}

@keyframes glassRefract {
  0% { left: -100%; opacity: 0; }
  50% { opacity: 1; }
  100% { left: 200%; opacity: 0; }
}

/* 4. Mobile Layout Tweaks */
@media (max-width: 900px) {
  .pricing-interface-wrapper { margin: 20px auto !important; } /* Matches the 20px spacing above */
  .pricing-intro-block { margin-bottom: 10px !important; padding: 0 10px; }
  .pi-easy-text { font-size: 2.2rem !important; line-height: 1.1 !important; margin-bottom: 5px !important; }
  .pi-subtitle-text { font-size: 1.1rem !important; line-height: 1.3 !important; margin-top: 5px !important; }
  .pi-alt-text { font-size: 0.7rem !important; margin-bottom: 10px !important; letter-spacing: 1px !important; }
  .pi-contact-docks { gap: 8px; }

  .lux-ultimate-dock {
      flex-direction: row !important;
      align-items: center !important;
  }
  .total-col {
      align-items: flex-start !important;
  }
  
  /* MOBILE SIZING OVERRIDE */
  .lux-hyper-glass-btn {
      font-size: 0.75rem !important; 
      height: 48px !important;        /* Compact height */
      min-width: 150px !important;    /* Mobile Width */
      padding: 0 20px !important;
  }
}
  /* ==========================================================================
        7.2 MOBILE PRICING & WORKFLOW (Consolidated)
        ========================================================================== */
  @media (max-width: 900px) {
    /* Layout Resets */
    .desktop-only-pricing, .wf-kinetic-container { display: none !important; }
    .mobile-only-pricing, .wf-mobile-stack { display: flex !important; flex-direction: column; width: 100%; }
    #pricing.pricing-interface-wrapper, .pricing-interface-wrapper { background-image: none !important; padding: 0; }
    #pricing .section-title { color: var(--text-dark) !important; text-shadow: none !important; }
    #pricing .col-label { color: var(--price-gold) !important; }
   
    /* Swipe Elements */
    .swipe-hint-text {
      color: var(--text-dark) !important; background: rgba(235, 229, 222, 0.85); padding: 8px 16px; border-radius: 50px;
      font-size: 14px; font-weight: 700; text-align: center; width: fit-content; margin: 10px auto 15px auto;
      display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 10px rgba(180, 170, 160, 0.2);
    }
    .swipe-hint-text i { animation: bounceRight 1.5s infinite; }
    @keyframes bounceRight { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
   
    /* TIGHTER VERTICAL PADDING ON MOBILE TRACK */
    .pricing-swipe-track {
      display: block; position: relative;
      padding: 5px 5px 15px 5px !important; 
    }
   
    /* Ghost Hand */
    .lux-ghost-wrapper {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      z-index: 50; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
      opacity: 0; transition: opacity 0.5s ease;
    }
    .lux-hand-container { position: relative; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; animation: luxHandMove 2s infinite cubic-bezier(0.2, 0.8, 0.2, 1); }
    .lux-hand { font-size: 2.5rem; color: var(--price-gold); text-shadow: 0 0 20px rgba(212, 197, 176, 0.6); transform: rotate(-15deg); }
    .lux-ripple {
      position: absolute; top: 5px; right: 10px; width: 10px; height: 10px; border-radius: 50%;
      background: rgba(212, 197, 176, 0.8); box-shadow: 0 0 10px #D4C5B0; opacity: 0; animation: luxRippleFlow 2s infinite;
    }
    .lux-swipe-text {
      margin-top: 15px; background: rgba(255, 252, 247, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      padding: 8px 18px; border-radius: 50px; border: 1px solid rgba(212, 197, 176, 0.4); color: var(--text-dark);
      font-family: "Lato", sans-serif; font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase;
      font-weight: 800; white-space: nowrap; box-shadow: 0 10px 30px rgba(180, 170, 160, 0.2);
    }
    @keyframes luxHandMove { 0% { transform: translateX(30px) scale(0.9); opacity: 0; } 20% { transform: translateX(30px) scale(1); opacity: 1; } 60%, 100% { transform: translateX(-30px) scale(0.9); opacity: 0; } }
    @keyframes luxRippleFlow { 0%, 15% { transform: scale(0); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 60%, 100% { transform: scale(4); opacity: 0; } }
   
/* --- MOBILE CARD: MIND BOGGLING POP --- */
    
    /* 2. The Card Fix: min-height sets the floor, height: auto allows expansion */
    .swipe-card {
      width: 100% !important; 
      height: auto !important; 
      min-height: 450px !important; 
      display: flex !important; flex-direction: column !important; position: relative !important; overflow: hidden !important;
      background: linear-gradient(135deg, #FFFCF7 0%, #EFEBE5 100%) !important;
      backdrop-filter: blur(40px) !important; -webkit-backdrop-filter: blur(40px) !important;
      border-top: 1px solid rgba(255, 255, 255, 0.9) !important;
      border-left: 1px solid rgba(255, 255, 255, 0.9) !important;
      border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
      border-radius: 20px !important;
      box-shadow: 
          inset 0 1px 0 0 rgba(255, 255, 255, 1),
          0 20px 50px -10px rgba(62, 54, 50, 0.3), 
          0 5px 15px rgba(0,0,0,0.05) !important;
      transform: translateZ(0); 
      transition: height 0.3s ease, min-height 0.3s ease !important;
    }
    
    .swipe-card::before {
      content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.1; pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
      mix-blend-mode: overlay;
    }    .card-scroll-area { flex: 1 !important; overflow-y: auto !important; padding-bottom: 0 !important; display: block !important; }
    .swipe-card .pi-panel-core.card-style-left { padding: 25px 20px 5px 20px !important; background: transparent !important; border-right: none !important; border-bottom: 1px solid rgba(212, 197, 176, 0.2) !important; }
    .swipe-card .card-slider-area { padding: 15px !important; margin: 0 !important; background: transparent !important; border-top: none !important; border-bottom: 1px solid rgba(212, 197, 176, 0.2) !important; }
    .swipe-card .pi-panel-addons { padding: 10px 20px !important; background: transparent !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
   
    /* Mobile Typography */
    .card-tier-name { font-size: 1.6rem !important; margin-bottom: 0 !important; color: var(--text-dark) !important; }
    
    /* --- MIND BOGGLING PRICE (MOBILE) --- */
    .card-price-wrapper { 
      /* Make it huge on mobile too */
      font-size: 4.2rem !important; 
      margin: 10px 0 15px 0 !important;
      background-size: 200% auto !important;
      /* Stronger Drop Shadow for small screens */
      filter: drop-shadow(0 5px 10px rgba(184, 138, 68, 0.4)) !important;
      
      /* SPEED OPTIMIZATION: NO TRANSITION DELAY */
      transition: none !important;
      will-change: transform;
    }
    
    .card-price-wrapper .currency { font-size: 2rem !important; }
    .card-range-display { font-size: 0.65rem !important; opacity: 0.7; margin-bottom: 15px !important; }
    .slider-readout { font-size: 2.2rem !important; }
    .pi-title { font-size: 2rem !important; margin-bottom: 10px !important; }
    .card-feature-list { margin: 0 0 15px 0 !important; }
    .card-feature-list li { font-size: 0.8rem !important; margin-bottom: 6px !important; }
    .slider-sub { margin-bottom: 15px !important; }
    .mobile-only-pricing .pi-booking-note { color: #8C8276 !important; margin-top: 25px !important; margin-bottom: 30px !important; display: block !important; position: relative; z-index: 5; }
   
    /* Mobile Add-ons */
    .addon-toggle { 
      flex-direction: row !important; justify-content: space-between !important; align-items: center !important;
      text-align: left !important; padding: 15px !important; height: auto !important; margin-bottom: 0 !important;
      background: linear-gradient(145deg, #FFF, #F9F7F5) !important; 
      border: 1px solid rgba(212, 197, 176, 0.3) !important; border-radius: 8px !important;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    }
    .at-name { font-size: .8rem !important; color: #5E544F !important; margin-bottom: 0 !important; font-weight: 500 !important; }
    .at-right { display: flex !important; align-items: center !important; gap: 10px !important; }
    .at-price { font-size: 0.8rem !important; color: var(--price-gold) !important; font-weight: 700 !important; }
    .at-indicator { display: flex !important; width: 18px !important; height: 18px !important; border: 1px solid rgba(212, 197, 176, 0.4) !important; border-radius: 50% !important; color: transparent !important; }
    .addon-toggle.active { background: linear-gradient(90deg, rgba(212, 197, 176, 0.2), #FFF) !important; border-color: var(--price-gold) !important; transform: translateX(5px) !important; }
    .addon-toggle.active .at-name, .addon-toggle.active .at-price { color: var(--text-dark) !important; }
    .addon-toggle.active .at-indicator { background: var(--price-gold) !important; border-color: var(--price-gold) !important; box-shadow: 0 0 10px rgba(212, 197, 176, 0.5) !important; }
    .mind-boggling-wrapper { margin-top: 15px !important; }
    .mind-boggling-btn { padding: 10px 25px !important; font-size: 0.9rem !important; }
   
    /* Mobile Footer & Button */
    .mobile-card-footer {
      flex-shrink: 0 !important; position: relative !important; width: 100% !important;
      padding: 15px 20px 20px 20px !important; background: transparent !important; border-top: 1px solid rgba(255, 255, 255, 0.5) !important; z-index: 10 !important; margin-top: 0 !important;
    }
    .menu-item.book-now-enhanced {
      width: 100% !important; display: block !important; margin: 0 !important;
      background: linear-gradient(135deg, #FFF, #F0ECE8) !important;
      border: 1px solid rgba(212, 197, 176, 0.4) !important;
      color: var(--price-gold) !important; font-family: "Lato", sans-serif !important; font-weight: 800 !important; font-size: 0.9rem !important;
      letter-spacing: 2px !important; text-transform: uppercase !important; padding: 14px !important;
      border-radius: 4px !important; 
      box-shadow: 0 10px 20px rgba(180, 170, 160, 0.3), inset 0 2px 0 rgba(255,255,255,1) !important; 
      cursor: pointer !important; text-decoration: none !important; text-align: center !important;
    }
    .menu-item.book-now-enhanced i { color: var(--price-gold) !important; margin-right: 10px; }
   
    /* Mobile Workflow */
    .wf-mobile-stack { gap: 10px; }
    .workflow-card-wrapper { padding: 30px 20px; width: 90%; }
    .wf-title { font-size: 2rem; }
    .wf-m-card { background: #E8E4DF; border: 1px solid rgba(212, 197, 176, 0.2); padding: 20px; border-radius: 4px; transition: all 0.3s ease; }
    .wf-m-header { display: flex; align-items: center; justify-content: space-between; }
    .wf-m-num { color: #8C8276; font-family: "Cormorant Garamond"; font-size: 1.2rem; }
    .wf-m-card h3 { color: var(--text-dark); margin: 0; font-family: "Cormorant Garamond"; font-size: 1.5rem; flex-grow: 1; padding-left: 15px; }
    .wf-icon { color: var(--text-dark); transition: 0.3s; }
    .wf-m-card p { max-height: 0; overflow: hidden; margin: 0; font-size: 0.85rem; color: #5E544F; transition: 0.3s; }
    .wf-m-card.active { border-color: var(--price-gold); background: #FFFCF7; }
    .wf-m-card.active .wf-icon { transform: rotate(45deg); color: var(--price-gold); }
    .wf-m-card.active h3 { color: var(--price-gold); }
    .wf-m-card.active p { max-height: 150px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(94, 84, 79, 0.05); }
   
    /* Mobile Modal - OPEN HIGHER UP & FIX CLOSE BUTTON */
    .pricing-modal-scroll-container { align-items: flex-start; padding-top: 15px !important; padding-bottom: 20px !important; padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; overflow-x: hidden !important; }
    .pricing-modal-content { width: 100% !important; max-width: 100% !important; margin: 0 !important; border-radius: 0 !important; }
    .modal-close-btn { top: 15px !important; right: 15px !important; font-size: 1.5rem; background: rgba(255, 252, 247, 0.9); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #D6CEC5; z-index: 9999; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
    
    .mobile-morph-slider .section-title, #pricing .section-title {
      font-family: "Cormorant Garamond", serif !important; font-size: 2.4rem !important; font-weight: 300 !important;           
      letter-spacing: -1px !important; line-height: 1.1 !important; text-transform: capitalize !important; margin-top: 0 !important; text-shadow: none !important; 
    }

    /* NEW LEVITATING ADDONS MODAL (MOBILE ONLY) */
    .swipe-card.addons-main-card {
      position: absolute !important;
      top: 50% !important; left: 50% !important;
      transform: translate(-50%, -50%) scale(0.9) !important; /* Starts smaller */
      width: 92% !important; /* Smaller width than parent */
      height: auto !important; /* Allows auto expansion when accordion opens */
      min-height: 0 !important; 
      max-height: 90vh !important; /* Prevents card from bleeding off screen */
      z-index: 9999999 !important;
      opacity: 0; visibility: hidden; pointer-events: none;
      box-shadow: 0 30px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.8) !important;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    }
    
    /* Make Add-on text and inner spacing tighter */
    .swipe-card.addons-main-card .pi-panel-addons { padding: 15px 15px 5px 15px !important; }
    .swipe-card.addons-main-card .pi-title { font-size: 1.6rem !important; margin-bottom: 5px !important; }
    .swipe-card.addons-main-card .pi-eyebrow { font-size: 0.65rem !important; margin-bottom: 2px !important; }
    .swipe-card.addons-main-card .pi-acc-header { font-size: 1.05rem !important; padding: 6px 0 !important; }
    .swipe-card.addons-main-card .pi-acc-item { margin-bottom: 5px !important; }
    .swipe-card.addons-main-card .addon-toggle { padding: 8px 12px !important; margin-bottom: 4px !important; }
    .swipe-card.addons-main-card .at-name, .swipe-card.addons-main-card .at-price { font-size: 0.7rem !important; }
    .swipe-card.addons-main-card .pi-booking-note { font-size: 0.6rem !important; margin: 10px 0 !important; }
    
    .swipe-card.addons-main-card.levitating {
      opacity: 1; visibility: visible; pointer-events: auto;
      transform: translate(-50%, -50%) scale(1) !important; /* Pops into view over main card */
    }
    .levitating-overlay {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;
      background: rgba(235, 229, 222, 0.85);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      z-index: 9999998; opacity: 0; visibility: hidden; transition: 0.3s ease;
    }
    .levitating-overlay.active { opacity: 1; visibility: visible; }
    .view-addons-btn {
      display: flex; justify-content: center; align-items: center; width: 100%;
      background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4));
      border: 1px solid var(--price-gold, #C6A664); color: var(--price-gold, #C6A664);
      padding: 14px; margin-top: 20px; border-radius: 8px; font-family: "Lato", sans-serif;
      font-size: 0.85rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
      cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: 0.3s ease;
    }

    @media (hover: hover) {
      .view-addons-btn:hover { background: var(--price-gold, #C6A664); color: #FFF; box-shadow: 0 8px 20px rgba(184, 138, 68, 0.3); }
      .close-levitating-btn:hover { transform: rotate(90deg); color: var(--price-gold, #C6A664); }
    }

    .close-levitating-btn {
      position: absolute; top: 15px; right: 15px; width: 36px; height: 36px;
      background: rgba(255, 252, 247, 0.9); border: 1px solid rgba(212, 197, 176, 0.5);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: 1.2rem; color: var(--text-dark, #2B2420); z-index: 50; cursor: pointer;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: 0.3s;
    }
  }
  /* ==========================================================================
   8. LATEST GALLERY (The Minimalist Lens)
   ========================================================================== */

/* --- Container --- */
.recent-grid-layout {
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 30px; 
  max-width: 1600px; 
  width: 95%;
  margin: 40px auto; 
  padding: 20px; 
}

/* --- Typography --- */
#gallerySection .section-title {
  font-size: 4.5rem !important; 
  margin-bottom: 10px;
}
#gallerySection .col-label {
  font-size: 0.85rem !important;
  margin-bottom: 20px;
}

/* --- Card Base --- */
.gallery-3d-card {
  position: relative; 
  display: block; 
  width: 100%; 
  aspect-ratio: 3 / 2;
  border-radius: 6px; 
  overflow: hidden; 
  text-decoration: none;
  background: var(--gallery-bg-card); 
  border: 1px solid var(--gallery-border);
  box-shadow: 0 10px 30px rgba(61, 52, 48, 0.1);
  transition: all 0.5s ease; 
}

/* --- Interaction --- */
.gallery-3d-card:hover {
  transform: translateY(-5px); /* Very slight lift */
  border-color: var(--accent-gold); 
  box-shadow: 0 20px 40px rgba(61, 52, 48, 0.15);
}

/* --- Image Layer (Pure) --- */
.card-img-layer { 
  position: absolute; 
  top: 0; left: 0; 
  width: 100%; height: 100%; 
  overflow: hidden; 
  background: #E6E1DC; 
}

.card-img-layer img {
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  transform: scale(1.01); /* Prevents pixel lines */
}

/* On hover: Just a gentle zoom. No dimming. */
.gallery-3d-card:hover .card-img-layer img { 
  transform: scale(1.08); 
}

/* --- Info Layer (Gradient Fade) --- */
.card-info-layer {
  position: absolute; 
  bottom: 0; left: 0; 
  width: 100%; 
  
  /* Short gradient: Transparent -> Warm White */
  /* This ensures text is readable but doesn't block the image center */
  background: linear-gradient(to top, rgba(230, 225, 220, 0.95) 0%, rgba(230, 225, 220, 0.6) 50%, transparent 100%);
  
  padding: 50px 25px 20px 25px; /* Top padding creates the fade space */
  z-index: 5;
  
  /* Start slightly lower */
  transform: translateY(15px); 
  opacity: 0;
  transition: all 0.4s ease;
}

/* Show details on hover */
.gallery-3d-card:hover .card-info-layer { 
  transform: translateY(0); 
  opacity: 1;
}

/* Typography */
.card-info-layer h4 { 
  font-family: 'Cormorant Garamond', serif; 
  font-size: 1.8rem; 
  color: var(--text-dark) !important; 
  margin: 0; 
  line-height: 1;
  font-weight: 500;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.8); /* Ensures legibility */
}

.card-info-layer p { 
  font-family: 'Lato', sans-serif; 
  font-size: 0.75rem; 
  color: var(--accent-gold) !important; 
  margin: 8px 0 0 0; 
  text-transform: uppercase; 
  letter-spacing: 2px; 
  font-weight: 800; 
}

/* --- Mobile (Netflix Swipe) --- */
@media (max-width: 900px) {
  #gallerySection .section-title { font-size: 2.5rem !important; }
  #gallerySection .col-label { font-size: 0.75rem !important; }

  .recent-grid-layout {
    display: flex; 
    overflow-x: auto; 
    scroll-snap-type: x mandatory;
    gap: 15px; 
    padding: 10px 20px 40px 20px; 
  }
  
  .recent-grid-layout::-webkit-scrollbar { display: none; }

  .gallery-3d-card {
    flex: 0 0 85%; 
    width: 85%; 
    scroll-snap-align: center; 
    transform: none !important;
  }
  
  /* Mobile: Always visible, subtle gradient */
  .card-info-layer {
    transform: translateY(0); 
    opacity: 1;
    background: linear-gradient(to top, rgba(230, 225, 220, 0.95) 0%, transparent 100%);
    padding: 40px 20px 15px 20px;
  }
  
  .card-info-layer h4 { font-size: 1.4rem !important; }
}

/* ==========================================================================
   HIDE RECENT LISTINGS ON DESKTOP
   (Only visible on screens smaller than 901px)
   ========================================================================== */

   @media (min-width: 901px) {
    #recentListings {
      display: none !important;
    }
  }
  /* Hide Premium Section on Mobile (screens smaller than 901px) */
@media (max-width: 900px) {
  #premiumSection {
    display: none !important;
  }
}
/* ==========================================================================
   9. FAQ SECTION (The Monolith & Mobile Chat)
   ========================================================================== */

/* --- Desktop: The Monolith --- */
.lux-faq-section {
  position: relative; 
  background-color: var(--faq-bg, #F2EFE9); 
  padding: 120px 5%;
  overflow: hidden; 
  min-height: 800px; 
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.lux-faq-grid-overlay {
  position: absolute; inset: 0; opacity: 0.3; z-index: 1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.4) 1px, transparent 1px);
  background-size: 60px 60px;
}

.faq-monolith {
  position: relative; z-index: 10; width: 100%; max-width: 1400px; height: 700px;
  display: grid; grid-template-columns: 1fr 1.5fr; 
  background: var(--faq-monolith-bg, #FFFCF7);
  border: 1px solid rgba(255, 255, 255, 0.6); 
  border-radius: 4px; 
  box-shadow: 0 30px 80px rgba(180, 170, 160, 0.6); 
  overflow: hidden;
}

/* --- SIDEBAR (Triggers) --- */
.faq-sidebar {
  border-right: 1px solid rgba(212, 197, 176, 0.3); 
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden; 
  scrollbar-width: thin; scrollbar-color: #D6CEC5 #EBE5DE;
  background: var(--faq-sidebar-bg, #F9F7F2);
}

.faq-header-cell { 
    padding: 40px; 
    border-bottom: 1px solid rgba(212, 197, 176, 0.3); 
    background: var(--faq-sidebar-bg, #F9F7F2); 
    position: sticky; top: 0; z-index: 5; /* Keeps header visible while scrolling questions */
}

.faq-header-cell h2 { 
    font-family: "Cormorant Garamond", serif; 
    font-size: 2.5rem; line-height: 1; margin: 0; 
    color: var(--faq-text, #1a1a1a); 
}

.faq-header-cell span { 
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 3px; 
    color: var(--accent-gold, #B88A44); 
    display: block; margin-bottom: 10px; 
}

.faq-trigger {
  padding: 25px 40px; 
  border-bottom: 1px solid rgba(212, 197, 176, 0.15); 
  color: #8C8276;
  font-size: 1rem; cursor: pointer; transition: all 0.4s; 
  position: relative; display: flex; align-items: center; justify-content: space-between;
}

.faq-trigger:hover { 
    background: rgba(255, 255, 255, 0.5); 
    color: var(--faq-text, #1a1a1a); 
    padding-left: 50px; 
}

.faq-trigger.active { 
    background: #FFFCF7; 
    color: var(--faq-text, #1a1a1a); 
    font-weight: 700; 
    border-color: #FFFCF7; 
    padding-left: 50px; 
}

.faq-trigger i { 
    opacity: 0; transform: translateX(-10px); transition: 0.3s; color: #8C8276; 
}
.faq-trigger:hover i, .faq-trigger.active i { opacity: 1; transform: translateX(0); }
.faq-trigger.active i { color: var(--faq-text, #1a1a1a); }

/* --- TERMINAL (Right Side Display) --- */
.faq-terminal { 
    position: relative; padding: 80px; 
    display: flex; flex-direction: column; justify-content: center; 
    background: #FFFCF7; 
}

/* This ID matches your JS logic */
#desktopAnswer {
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

/* JS adds this class to fade in */
#desktopAnswer.show {
    opacity: 1; 
    transform: translateY(0); 
    pointer-events: all;
}

#ansNum {
  font-family: "Cormorant Garamond", serif; font-size: 8rem; position: absolute;
  top: -90px; left: -20px; opacity: 1; color: rgba(212, 197, 176, 0.15); line-height: 1; z-index: 0;
}

.answer-content { position: relative; z-index: 2; }

#ansTitle {
  font-size: 1.8rem; color: var(--faq-text, #1a1a1a); margin-bottom: 30px; display: block;
  font-family: "Cormorant Garamond", serif; font-weight: 400; font-style: italic;
}

#ansText {
  font-size: 1.4rem; line-height: 1.6; color: #5E544F; 
  max-width: 650px; font-weight: 300;
}

#ansText strong { color: var(--accent-gold, #B88A44); font-weight: 600; }

/* Ensure Mobile elements are hidden on Desktop */
.mobile-chat-faq { display: none; }


/* ============================================
   MOBILE: Chat Interface (Matches JS Generator)
   ============================================ */
@media (max-width: 900px) {
  .lux-faq-section { 
    padding: 40px 0 30px 0 !important; 
    min-height: auto;
    display: block; 
  }
  .faq-monolith { display: none !important; }
  
  .mobile-chat-faq {
    display: flex !important;
    flex-direction: column;
    padding: 0 15px !important; 
    background: var(--faq-bg, #F2EFE9);
    width: 100%;
    overflow: visible;
    position: relative;
  }
  
  /* Header matches your "Deck" style */
  .deck-header { text-align: center; margin-bottom: 25px; width: 100%; }
  .deck-header span { font-family: "Lato", sans-serif; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; color: var(--accent-gold, #B88A44); display: block; margin-bottom: 8px; font-weight: 700; }
  .deck-header h3 { font-family: "Cormorant Garamond", serif; font-size: 2.2rem; line-height: 1; color: var(--faq-text, #1a1a1a); margin: 0; }
  
  /* The Wrapper your JS swipes through */
  #chatSwipeWrapper {
    display: flex; 
    overflow-x: auto; 
    scroll-snap-type: x mandatory; 
    width: 100%; 
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
    padding-bottom: 10px; 
  }
  #chatSwipeWrapper::-webkit-scrollbar { display: none; }
  
  /* The Page your JS generates */
  .chat-page { 
    flex: 0 0 100%; 
    width: 100%; 
    scroll-snap-align: center; 
    padding: 5px; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
  }
  
  /* The Bubbles your JS generates */
  .chat-bubble-container { display: flex; flex-direction: column; width: 100%; align-items: flex-end; }
  
  .chat-question { 
    background: transparent; 
    border: 1px solid var(--accent-gold, #B88A44); 
    color: var(--text-dark, #1a1a1a); 
    border-radius: 18px 18px 0 18px; 
    font-family: "Lato", sans-serif; 
    max-width: 90%; 
    cursor: pointer; 
    position: relative; 
    transition: all 0.3s ease; 
    text-align: right; 
    font-size: 0.85rem; 
    line-height: 1.3; 
    font-weight: 700; 
    padding: 12px 18px; 
  }
  
  .chat-question:active { transform: scale(0.98); background: rgba(212, 197, 176, 0.2); }
  
  .chat-answer { 
    background: #FFFCF7; 
    border: 1px solid rgba(212, 197, 176, 0.4); 
    color: #5E544F; 
    border-radius: 18px 18px 18px 0; 
    max-width: 95%; 
    align-self: flex-start; 
    margin-top: 8px; 
    margin-bottom: 8px; 
    text-align: left; 
    font-size: 0.9rem; 
    line-height: 1.4; 
    font-weight: 400; 
    padding: 15px 18px; 
    
    /* Hidden by default, handled by .open class */
    display: none; 
    opacity: 0; 
    transform: translateY(10px); 
  }
  
  .chat-answer strong { color: var(--accent-gold, #B88A44); }
  
  /* Interaction Logic (JS toggles .open) */
  .chat-bubble-container.open .chat-answer { 
    display: block; 
    animation: bubblePop 0.4s forwards; 
  }
  
  .chat-bubble-container.open .chat-question { 
    background: var(--accent-gold, #B88A44); 
    color: #FFF; 
    font-weight: 800; 
  }
  
  @keyframes bubblePop { to { opacity: 1; transform: translateY(0); } }
  
  /* Pagination Dots */
  #chatDots { display: flex; justify-content: center; gap: 7px; margin-top: 20px; }
  .chat-dot { width: 7px; height: 7px; border-radius: 50%; background: #D6CEC5; transition: 0.3s; }
  .chat-dot.active { background: var(--accent-gold, #B88A44); width: 22px; border-radius: 10px; }
}  
  /* ==========================================================================
      10. FOOTER (Architect Grid & Mobile Dashboard)
      ========================================================================== */
  .arch-footer-wrapper { 
    position: relative; 
    background-color: var(--footer-bg); /* Dark Taupe Anchor */
    color: var(--footer-text); 
    font-family: "Lato", sans-serif; 
    overflow: hidden; 
    padding-top: 0; 
    --cursor-x: 50%; 
    --cursor-y: 50%; 
    z-index: 50; 
  }
  
  .arch-footer-wrapper::before { 
    content: ""; 
    position: absolute; 
    inset: 0; 
    pointer-events: none; 
    z-index: 0; 
    mix-blend-mode: soft-light; 
    background: radial-gradient(circle 300px at var(--cursor-x) var(--cursor-y), rgba(255, 255, 255, 0.2) 0%, transparent 100%); 
  }
  
  .arch-content { 
    position: relative; 
    z-index: 2; 
    display: grid; 
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr; 
    border-top: 1px solid var(--footer-border); 
  }
  
  .arch-cell { 
    padding: 60px 40px; 
    border-right: 1px solid var(--footer-border); 
    position: relative; 
    transition: background 0.3s ease; 
  }
  .arch-cell:last-child { border-right: none; }
  .arch-cell:hover { background: rgba(255, 255, 255, 0.05); }
  
  .arch-label { 
    font-size: 0.75rem; 
    text-transform: uppercase; 
    letter-spacing: 4px; 
    color: rgba(255, 255, 255, 0.6); 
    margin-bottom: 30px; 
    display: block; 
    font-weight: 900; 
  }
  
  .arch-brand h2 { 
    font-family: "Cormorant Garamond", serif; 
    font-size: 2.5rem; 
    line-height: 0.9; 
    margin: 0 0 20px 0; 
    color: var(--footer-text); 
  }
  .arch-brand p { font-size: 0.95rem; color: #E6E1DC; line-height: 1.6; max-width: 300px; }
  
  .arch-links ul { list-style: none; padding: 0; margin: 0; }
  .arch-links li { margin-bottom: 15px; }
  .arch-links a { 
    text-decoration: none; 
    color: #E6E1DC; 
    font-size: 1.1rem; 
    position: relative; 
    display: inline-block; 
    transition: 0.3s; 
  }
  .arch-links a::before { 
    content: "→"; 
    position: absolute; 
    left: -20px; 
    opacity: 0; 
    color: var(--accent-gold); 
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
  }
  .arch-links a:hover { color: var(--accent-gold); transform: translateX(20px); }
  .arch-links a:hover::before { opacity: 1; left: -15px; }
  
  .arch-contact p { margin-bottom: 15px; font-size: 1rem; color: var(--footer-text); display: flex; align-items: center; gap: 10px; }
  .arch-contact i { color: var(--accent-gold); }
  
  .arch-btn { 
    display: block; 
    margin-top: 30px; 
    padding: 20px; 
    text-align: center; 
    border: 1px solid rgba(255, 255, 255, 0.3); 
    color: var(--footer-text); 
    text-decoration: none; 
    text-transform: uppercase; 
    font-weight: 700; 
    letter-spacing: 2px; 
    font-size: 0.8rem; 
    transition: 0.4s; 
    background: linear-gradient(45deg, transparent 50%, #FFFCF7 50%); 
    background-size: 250%; 
    background-position: 0%; 
  }
  .arch-btn:hover { background-position: 100%; color: var(--text-dark); border-color: #FFFCF7; }
  
  .arch-sub { 
    display: flex; 
    justify-content: space-between; 
    padding: 20px 40px; 
    border-top: 1px solid var(--footer-border); 
    font-size: 0.75rem; 
    color: #E6E1DC; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
  }
  .arch-sub a { color: #E6E1DC; text-decoration: none; margin-left: 20px; }
  .arch-sub a:hover { color: #FFF; }
  
  .jax-footer { display: none !important; }
  .mobile-footer-dashboard { display: none; }
  
  /* Mobile Footer Overrides */
  @media (max-width: 900px) {
    .arch-footer-wrapper { display: none; }
  }
  
  @media (max-width: 768px) {
    .mobile-footer-dashboard { 
      display: block; 
      background: var(--footer-bg); 
      padding: 40px 20px 120px 20px; 
      color: var(--footer-text); 
      text-align: center; 
      border-top: 1px solid rgba(255, 255, 255, 0.1); 
    }
    .footer-slogan h3 { font-family: "Cormorant Garamond", serif; font-size: 1.8rem; color: var(--footer-text); margin-bottom: 10px; }
    .footer-slogan p { color: #E6E1DC; font-size: 0.95rem; margin-bottom: 30px; }
    .footer-dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 30px; }
    
    .dash-tile { 
      background: rgba(255, 255, 255, 0.05); 
      border: 1px solid rgba(255, 255, 255, 0.1); 
      border-radius: 15px; 
      padding: 20px; 
      text-align: center; 
      text-decoration: none; 
      color: var(--footer-text); 
      display: flex; 
      flex-direction: column; 
      align-items: center; 
      justify-content: center; 
      gap: 10px; 
      transition: transform 0.2s; 
    }
    .dash-tile:active { transform: scale(0.95); background: rgba(255, 255, 255, 0.1); }
    .dash-tile i { font-size: 1.5rem; color: var(--footer-text); }
    .dash-tile span { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
    .dash-tile.full-width { grid-column: span 2; background: #FFFCF7; border: none; color: var(--text-dark); }
    .dash-tile.full-width i { color: var(--text-dark); }
    
    .footer-contact-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; }
    .contact-pill { display: block; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; color: #E6E1DC; text-decoration: none; font-size: 0.9rem; }
    .contact-pill i { color: var(--footer-text); margin-right: 8px; }
    .footer-legal-area { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 20px; font-size: 0.75rem; color: #E6E1DC; }
    .copyright-text { margin-bottom: 10px; line-height: 1.4; }
    .legal-links a { color: #E6E1DC; text-decoration: none; }
  }
  
  @media (max-width: 600px) {
    .vip-card { padding: 20px; aspect-ratio: auto; min-height: 400px; }
    .vip-offer { font-size: 3.5rem; }
  }
  
  /* ==========================================================================
      11. SYSTEM & POPUPS (VIP Overlay, Notices)
      ========================================================================== */
  
  /* --- Back to Top Button --- */
  .back-to-top { 
    pointer-events: none; 
    opacity: 0; 
    width: 60px; 
    height: 60px; 
    background: rgba(255, 252, 247, 0.9); 
    backdrop-filter: blur(10px); 
    border: 1px solid rgba(212, 197, 176, 0.3); 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 10px 40px rgba(180, 170, 160, 0.5); 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    position: fixed; 
    bottom: 30px; 
    left: 20px; 
    z-index: 2147483647; 
    cursor: pointer; 
    color: var(--text-dark); 
    font-size: 1.2rem; 
  }
  .back-to-top.visible { opacity: 1; pointer-events: auto; }
  .back-to-top:active { transform: scale(0.9); }

/* ==========================================================================
   12. MOBILE SPECIFIC BACKGROUNDS (TONAL SEPARATION)
   These rules apply ONLY to screens smaller than 900px
   ========================================================================== */
@media (max-width: 900px) {

    /* 1. Selected Works (Warm Bone) */
    .arch-index-section {
        background-color: #EBE5DE !important; /* Distinct Warmth */
        border-bottom: 1px solid rgba(94, 84, 79, 0.1);
    }

    /* 2. Premium Editing (Clean Porcelain) */
    /* This separates the "Bone" works from the "Clay" pricing */
    #premiumSection {
        background-color: #FFFCF7 !important; /* Very Light */
        border-bottom: 1px solid rgba(94, 84, 79, 0.05);
    }

    /* 3. Pricing Section (Cool Stone Gradient) */
    /* Wraps the mobile pricing stack in a distinct tone */
    .pricing-interface-wrapper {
         /* Force a background on the wrapper for mobile */
         background: linear-gradient(to bottom, #D6D0C8, #E6E1DC) !important;
         margin-top: 0 !important;
         padding-top: 60px !important;
         padding-bottom: 60px !important;
         width: 100% !important;
         max-width: 100% !important;
    }

    /* 4. Latest Gallery (Medium Sand) */
    /* Creates a darker band before the FAQ */
    .recent-grid-layout {
        background-color: #E0D8D0 !important; /* Medium Sand */
        margin: 0 !important; /* Remove margin to make it full bleed */
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    /* 5. FAQ (Solid Earth) */
    .lux-faq-section {
        background-color: #C7beb4 !important; /* Darker Earth */
        border-top: 1px solid rgba(255,255,255,0.2);
    }
}
@media (max-width: 900px) {
  
  .mobile-premium-wrapper {
    /* Creates the line */
    border-bottom: 1px solid #C29D7D; 
    
    /* Adds breathing room above the line */
    padding-bottom: 50px; 
    
    /* Adds breathing room below the line (before Pricing starts) */
    margin-bottom: 50px; 
  }

}