/* ==========================================================================
   Root Theme & Contact Section (NO SCROLL DESKTOP)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Inter:wght@300;400;600&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  --ct-primary: #00d4ff; 
  --ct-glow: rgba(0, 212, 255, 0.3);
  --ct-white: #ffffff;
  --ct-bg: #02050a;
  
  --font-main: "Audiowide", cursive, sans-serif;
  --font-sec: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

/* 1. LOCK HTML/BODY SCROLL */
body, html { margin: 0; padding: 0; width: 100vw; height: 100vh; background-color: var(--ct-bg); overflow: hidden; }

/* 2. LOCK MASTER WRAPPER */
.contact-master-wrapper { 
  position: relative; width: 100vw; height: 100vh; overflow: hidden; 
  display: flex; align-items: center; justify-content: center; 
  padding: 90px 5vw 30px 5vw; /* Tightened padding */
  box-sizing: border-box; background-color: var(--ct-bg); 
}

/* ==========================================================================
   Ambient Space Background
   ========================================================================== */
.ct-ambient-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ct-glow-orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.25; }
.orb-1 { width: 40vw; height: 40vw; background: rgba(0, 50, 100, 0.8); top: -5vw; left: -10vw; animation: float 15s infinite alternate ease-in-out; }
.orb-2 { width: 35vw; height: 35vw; background: rgba(0, 212, 255, 0.3); bottom: -5vw; right: -5vw; animation: float 20s infinite alternate-reverse ease-in-out; }
.ct-noise-overlay { 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.04'/%3E%3C/svg%3E"); z-index: 1; }

@keyframes float { 0% { transform: translate(0, 0); } 100% { transform: translate(30px, 30px); } }

/* ==========================================================================
   Header
   ========================================================================== */
.ct-section { 
  position: relative; z-index: 10; width: 100%; max-width: 1300px; height: 100%;
  display: flex; flex-direction: column; gap: 20px; margin: 0 auto; 
}

.ct-header { display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; }
.ct-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 4px; color: var(--ct-primary); display: flex; align-items: center; gap: 15px; margin-bottom: 10px; }
.ct-label .ct-line { width: 40px; height: 2px; background: var(--ct-primary); box-shadow: 0 0 10px var(--ct-glow); }
.ct-title { font-family: var(--font-main); font-size: clamp(32px, 4vw, 48px); color: var(--ct-white); letter-spacing: 2px; line-height: 1.1; margin: 0; text-shadow: 0 5px 20px rgba(0,0,0,0.8); }
.ct-title span { color: var(--ct-primary); }

/* ==========================================================================
   Grid & Glass Panels
   ========================================================================== */
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; flex: 1; min-height: 0; }

.ct-glass-panel {
  background: rgba(5, 10, 15, 0.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 30px 40px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5); display: flex; flex-direction: column;
  transition: border 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
  overflow-y: auto; /* Adds invisible scroll ONLY inside the box if screen is super tiny */
  scrollbar-width: none; /* Firefox */
}
.ct-glass-panel::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.ct-glass-panel:hover { border-color: rgba(0, 212, 255, 0.2); box-shadow: 0 25px 60px rgba(0,0,0,0.7); transform: translateY(-3px); }

.panel-header { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 3px; color: rgba(255,255,255,0.5); display: flex; align-items: center; gap: 12px; margin-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 15px; flex-shrink: 0; }
.panel-dot { width: 6px; height: 6px; background: var(--ct-primary); border-radius: 50%; box-shadow: 0 0 8px var(--ct-primary); animation: blink 2.5s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ==========================================================================
   Form Styling (Tightened for No-Scroll)
   ========================================================================== */
.ct-form { display: flex; flex-direction: column; gap: 20px; flex: 1; }

.input-group { position: relative; width: 100%; flex-shrink: 0; }
.input-group input, .input-group select { padding: 8px 0; }
.input-group textarea { padding: 8px 0; height: 60px; /* Locked height to save space */ }
.input-group input, .input-group textarea, .input-group select {
  width: 100%; background: transparent; border: none; 
  font-family: var(--font-sec); font-size: 14px; color: var(--ct-white); outline: none; resize: none;
}
.input-group select { cursor: pointer; color: rgba(255,255,255,0.8); }
.input-group select option { background: #0a0f16; color: var(--ct-white); }

.input-group label {
  position: absolute; top: 10px; left: 0; font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px;
  color: rgba(255,255,255,0.4); pointer-events: none; transition: all 0.3s ease;
}
.input-group select ~ .select-label { top: -12px; font-size: 7px; color: var(--ct-primary); }

.input-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: rgba(255,255,255,0.1); }
.input-line::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 2px; background: var(--ct-primary); transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); }

.input-group input:focus ~ label, .input-group input:not(:placeholder-shown) ~ label,
.input-group textarea:focus ~ label, .input-group textarea:not(:placeholder-shown) ~ label { top: -12px; font-size: 7px; color: var(--ct-primary); }
.input-group input:focus ~ .input-line::after, .input-group textarea:focus ~ .input-line::after, .input-group select:focus ~ .input-line::after { width: 100%; box-shadow: 0 0 10px var(--ct-glow); }

/* Polished Ghost Button */
.ct-submit-btn {
  position: relative; background: transparent; color: var(--ct-primary); border: 1px solid var(--ct-primary);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 4px;
  padding: 16px 24px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  gap: 12px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); margin-top: auto; flex-shrink: 0; overflow: hidden; z-index: 1;
}
.ct-submit-btn::before {
  content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%;
  background: var(--ct-primary); transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: -1;
}
.ct-submit-btn:hover::before { width: 100%; }
.ct-submit-btn:hover { color: var(--ct-bg); box-shadow: 0 10px 20px rgba(0, 212, 255, 0.2); transform: translateY(-2px); border-color: transparent; }

.ct-submit-btn svg { width: 14px; height: 14px; fill: currentColor; display: block; transition: transform 0.4s ease; }
.ct-submit-btn:hover svg { transform: translateX(6px); }

/* ==========================================================================
   Map & Coordinates
   ========================================================================== */
.ct-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; flex-shrink: 0; }
.info-item { display: flex; flex-direction: column; gap: 5px; }
.info-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.4); letter-spacing: 2px; }
.info-item p { font-family: var(--font-sec); font-size: 13px; color: var(--ct-white); margin: 0; line-height: 1.5; }
.info-item a { color: var(--ct-primary); text-decoration: none; transition: color 0.3s ease; }
.info-item a:hover { color: var(--ct-white); }

/* Map Dynamically Fills Remaining Space */
.ct-map-wrapper { position: relative; width: 100%; flex: 1; min-height: 150px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.ct-map-wrapper iframe { filter: contrast(1.1) saturate(1.2); } 

.map-hud-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; border: 1px solid rgba(0, 212, 255, 0.1); }
.corner { position: absolute; width: 20px; height: 20px; border: 2px solid rgba(0, 212, 255, 0.5); opacity: 0.8; }
.corner.t-l { top: 15px; left: 15px; border-right: none; border-bottom: none; }
.corner.t-r { top: 15px; right: 15px; border-left: none; border-bottom: none; }
.corner.b-l { bottom: 15px; left: 15px; border-right: none; border-top: none; }
.corner.b-r { bottom: 15px; right: 15px; border-left: none; border-top: none; }

/* ==========================================================================
   Responsive Logic (Restores scroll ONLY on Mobile)
   ========================================================================== */
@media (max-width: 1200px) {
  .contact-master-wrapper { padding: 90px 3vw 30px 3vw; }
  .ct-glass-panel { padding: 25px 30px; }
}

@media (max-width: 992px) {
  /* Restore scrolling on Tablets/Phones so form isn't crushed */
  body, html { height: auto; overflow-y: auto; overflow-x: hidden; }
  .contact-master-wrapper { height: auto; padding: 100px 5vw 50px 5vw; overflow-y: auto; }
  
  .ct-section { height: auto; }
  .ct-grid { grid-template-columns: 1fr; gap: 30px; }
  .ct-header { align-items: center; text-align: center; }
  .ct-map-wrapper { min-height: 350px; }
}

@media (max-width: 768px) {
  .contact-master-wrapper { padding: 90px 1.5rem 40px 1.5rem; }
  .ct-title { font-size: 32px; }
  .ct-glass-panel { padding: 25px; border-radius: 12px; }
  .ct-info-grid { grid-template-columns: 1fr; gap: 20px; }
  .ct-map-wrapper { min-height: 250px; }
}