/* ================================================
   CONTACT PAGE — Zayla-inspired layout
   ================================================ */

/* Override: nav on contact pages doesn't need loading delay */
.contact-nav{
  opacity:1 !important;
  animation:none !important;
}
.dock-contact{
  opacity:1 !important;
  animation:none !important;
}

/* ========== CONTACT HERO ========== */
.ct-hero{
  padding:140px 0 0;
}
.ct-title{
  font-size:clamp(80px,14vw,200px);
  font-weight:900;
  letter-spacing:-.06em;
  line-height:.85;
  text-transform:uppercase;
  color:var(--text);
  opacity:.08;
}

/* ========== CONTACT CONTENT ========== */
.ct-content{
  padding:60px 0 120px;
}

.ct-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
}

/* ========== LEFT — Quote + Profile ========== */
.ct-left{
  padding-top:20px;
}

.ct-quote-mark{
  font-size:48px;
  font-weight:900;
  color:var(--text);
  opacity:.08;
  line-height:1;
  margin-bottom:16px;
}

.ct-quote{
  font-size:clamp(16px,1.8vw,20px);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.5;
  color:var(--text);
  margin-bottom:40px;
  max-width:400px;
}

.ct-profile{
  display:flex;
  align-items:center;
  gap:16px;
}

.ct-avatar{
  width:80px;height:80px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid var(--border);
  flex-shrink:0;
}
.ct-avatar img,
.ct-avatar video{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 15%;
}

.ct-name{
  display:block;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--text);
}
.ct-role{
  display:block;
  font-size:12px;
  color:var(--muted);
  font-family:var(--mono);
  letter-spacing:.02em;
  margin-top:2px;
}

/* ========== RIGHT — Form ========== */
.ct-form{
  display:flex;
  flex-direction:column;
  gap:0;
}

.ct-field{
  position:relative;
  padding:20px 0 12px;
  border-bottom:1px solid var(--border);
}

.ct-field input,
.ct-field textarea{
  width:100%;
  background:transparent;
  border:none;
  outline:none;
  font-family:var(--font);
  font-size:15px;
  color:var(--text);
  padding:8px 0 4px;
  resize:none;
}

.ct-field label{
  position:absolute;
  top:28px;left:0;
  font-size:14px;
  color:var(--muted);
  pointer-events:none;
  transition:all .3s ease;
  font-family:var(--font);
}

/* Float label when input has value or is focused */
.ct-field input:focus ~ label,
.ct-field input:not(:placeholder-shown) ~ label,
.ct-field textarea:focus ~ label,
.ct-field textarea:not(:placeholder-shown) ~ label{
  top:6px;
  font-size:11px;
  color:var(--dim);
  letter-spacing:.04em;
  text-transform:uppercase;
  font-family:var(--mono);
}

/* Bottom line animation */
.ct-field-line{
  position:absolute;
  bottom:0;left:0;
  width:0;height:2px;
  background:#3B82F6;
  transition:width .4s var(--ease);
}
.ct-field input:focus ~ .ct-field-line,
.ct-field textarea:focus ~ .ct-field-line{
  width:100%;
}

/* Textarea specific */
.ct-field--textarea{
  padding-bottom:8px;
}
.ct-field--textarea label{
  top:28px;
}
.ct-field textarea{
  min-height:120px;
  line-height:1.6;
}

/* Character count */
.ct-char-count{
  position:absolute;
  bottom:12px;right:0;
  font-size:11px;
  color:var(--muted);
  font-family:var(--mono);
}

/* Submit button — white on black glass */
.ct-submit{
  margin-top:40px;
  align-self:flex-start;
  padding:16px 40px;
  border-radius:100px;
  background:rgba(255,255,255,.95);
  color:#0e0e0f;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.2);
  cursor:pointer;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  box-shadow:0 2px 16px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.5);
  font-family:var(--font);
  white-space:nowrap;
}
.ct-submit:hover{
  background:#fff;
  border-color:rgba(255,255,255,.4);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.5);
}
.ct-submit:active{
  transform:translateY(0);
}
html.light .ct-submit{
  background:rgba(20,20,24,.9);
  color:#fff;
  border-color:rgba(0,0,0,.1);
  box-shadow:0 2px 16px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.08);
}
html.light .ct-submit:hover{
  background:rgba(10,10,14,.95);
  box-shadow:0 8px 28px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.1);
}

/* Success message */
.ct-success{
  text-align:center;
  padding:80px 0;
}
.ct-success svg{
  margin-bottom:20px;
}
.ct-success h3{
  font-size:24px;
  font-weight:700;
  margin-bottom:8px;
  color:var(--text);
}
.ct-success p{
  font-size:15px;
  color:var(--dim);
}

/* Contact footer */
.ct-footer{
  border-top:1px solid var(--border);
  padding:24px 0;
  padding-bottom:80px; /* space for dock */
}

/* ========== RESPONSIVE — TABLET ========== */
@media(max-width:1024px){
  .ct-grid{
    gap:48px;
  }
}

/* ========== RESPONSIVE — MOBILE ========== */
@media(max-width:810px){
  .ct-hero{padding:120px 0 0}
  .ct-title{font-size:clamp(56px,12vw,100px)}

  .ct-grid{
    grid-template-columns:1fr;
    gap:48px;
  }

  .ct-content{padding:40px 0 80px}
}

@media(max-width:480px){
  .ct-title{font-size:48px}
  .ct-submit{width:100%;text-align:center}
}