/* ============================================
   CONTACT HERO — dramatic entrance
============================================ */
.contact-hero {
  min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; overflow: hidden; text-align: center; padding-top: 40px;
}

/* Animated moving grid field — more dramatic than homepage's static glow */
.grid-field {
  position: absolute; inset: -50% -20%;
  background-image:
    linear-gradient(rgba(15,31,48,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,31,48,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(600px) rotateX(55deg);
  animation: gridMove 14s linear infinite;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, black 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, black 20%, transparent 75%);
}
@keyframes gridMove { from { background-position: 0 0, 0 0; } to { background-position: 0 46px, 46px 0; } }

.contact-glow {
  position: absolute; width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  top: -280px; left: 50%; transform: translateX(-50%);
  filter: blur(90px); animation: pulseGlow 6s ease-in-out infinite; z-index: 0;
}
@keyframes pulseGlow { 0%,100% { opacity: 0.7; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.12); } }

.contact-hero-wrap { position: relative; z-index: 2; max-width: 720px; }

/* Word cascade for eyebrow */
.word-cascade { opacity: 0; transform: translateY(14px); animation: fadeUp 0.6s var(--ease) forwards; animation-delay: 0.1s; }

/* Letter/word cascade heading — dramatic staggered blur-in */
.cascade-heading {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  overflow: hidden;
}
.cascade-heading .word {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(30px) scale(1.05);
  animation: cascadeIn 0.9s var(--ease) forwards;
}
@keyframes cascadeIn { to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } }

.contact-sub { font-size: 1.1rem; color: var(--ink-muted); margin: 26px auto 0; max-width: 520px; }

.contact-wave { width: 100%; height: 50px; position: relative; z-index: 2; margin-top: 20px; }
.wave-draw { stroke-dasharray: 1600; stroke-dashoffset: 1600; stroke: var(--accent-deep); animation: draw 2.2s var(--ease) 1.1s forwards; }

/* ============================================
   CONTACT BODY
============================================ */
.contact-body { padding: 90px 0 120px; }
.contact-grid { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 50px; position: relative; }

.contact-form {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 42px; display: flex; flex-direction: column; gap: 26px;
}

.field-group { position: relative; }
.field-group input, .field-group select, .field-group textarea {
  width: 100%; border: none; border-bottom: 1.5px solid var(--border); background: transparent;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink); padding: 10px 2px 10px;
  outline: none; resize: none; transition: border-color 0.35s var(--ease);
}
.field-group select { appearance: none; cursor: pointer; }
.field-group label {
  position: absolute; left: 2px; top: 10px; color: var(--ink-muted); font-size: 1rem;
  pointer-events: none; transition: transform 0.3s var(--ease), font-size 0.3s var(--ease), color 0.3s var(--ease);
  transform-origin: left top;
}
.field-group input:focus + label,
.field-group input:not(:placeholder-shown) + label,
.field-group textarea:focus + label,
.field-group textarea:not(:placeholder-shown) + label,
.field-group select:focus + label,
.field-group select:valid + label {
  transform: translateY(-22px) scale(0.8); color: var(--accent-deep);
}
.field-group .field-line { position: absolute; bottom: 0; left: 0; width: 0%; height: 2px; background: var(--accent); transition: width 0.4s var(--ease); }
.field-group input:focus ~ .field-line, .field-group select:focus ~ .field-line, .field-group textarea:focus ~ .field-line { width: 100%; }
.field-group input:focus, .field-group select:focus, .field-group textarea:focus { border-color: transparent; }

.submit-btn { position: relative; margin-top: 6px; overflow: hidden; }
.submit-btn .btn-loader {
  display: none; position: absolute; inset: 0; align-items: center; justify-content: center;
  border-radius: 999px;
}
.submit-btn.loading .btn-text { visibility: hidden; }
.submit-btn.loading .btn-loader { display: flex; }
.submit-btn .btn-loader::after {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(4,34,42,0.25); border-top-color: #04222A;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Success panel */
.success-panel {
  display: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 60px 42px; text-align: center; flex-direction: column; align-items: center; grid-column: 1;
}
.success-panel.show { display: flex; animation: fadeUp 0.6s var(--ease) forwards; }
.success-check { width: 80px; height: 80px; margin-bottom: 20px; }
.check-circle { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 226; stroke-dashoffset: 226; animation: draw 0.7s var(--ease) forwards; }
.check-mark { fill: none; stroke: var(--accent-deep); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 0.4s var(--ease) 0.6s forwards; }
.success-panel p { color: var(--ink-muted); max-width: 340px; }

/* Contact info aside */
.contact-info { display: flex; flex-direction: column; gap: 30px; }
.info-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
.info-line { font-size: 0.96rem; margin-top: 6px; color: var(--ink); }
.mini-wave-block .info-line { color: var(--ink-muted); margin-bottom: 16px; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .success-panel { grid-column: auto; }
}