/* page-specific styles; base reset/scene/scroll-hint/title/rule come from vision.css */

.contact-container{
  width:calc(100% - 96px);
  max-width:1280px;
  margin:0 auto;
}

.contact-header{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.contact-subtitle{
  font-family:"IBM Plex Sans",sans-serif;
  font-weight:400;
  font-size:clamp(15px,1.1vw,17px);
  line-height:1.65;
  color:#28417c;
  margin-top:.7rem;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s ease .3s, transform .8s ease .3s;
}

.contact-cta{
  align-self:center;
  margin-top:26px;
  padding:13px 34px;
  border:1.5px solid #132a55;
  border-radius:4px;
  background:transparent;
  font-family:"IBM Plex Sans",sans-serif;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#132a55;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, opacity .8s ease .45s, transform .8s ease .45s;
  opacity:0;
  transform:translateY(20px);
}
.contact-cta:hover{background:#132a55;color:#fff;}

.contact-tear{
  height:42px;
  margin:26px 0 22px;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s ease .58s, transform .8s ease .58s;
}
.contact-tear svg{
  width:100%;height:100%;
  filter:drop-shadow(0 10px 12px rgba(20,20,50,.14));
}

.contact-form{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s ease .7s, transform .8s ease .7s;
}

.vision-scene.revealed .contact-subtitle,
.vision-scene.revealed .contact-cta,
.vision-scene.revealed .contact-tear,
.vision-scene.revealed .contact-form{
  opacity:1;
  transform:translateY(0);
}

.contact-row{
  display:flex;
  gap:20px;
  margin-bottom:16px;
}

.contact-field{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.contact-field--full{margin-bottom:16px;}

.contact-field label{
  font-family:"IBM Plex Sans",sans-serif;
  font-weight:600;
  font-size:.78rem;
  color:#132a55;
}

.contact-field input,
.contact-field select,
.contact-field textarea{
  font-family:"IBM Plex Sans",sans-serif;
  font-size:.86rem;
  color:#28417c;
  border:1px solid #b9c3dd;
  border-radius:5px;
  padding:9px 12px;
  background:#fff;
  outline:none;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{
  border-color:#6a63d1;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder{color:#9aa8c7;}
.contact-field textarea{resize:vertical;min-height:56px;}

.contact-submit{
  display:block;
  margin:20px auto 0;
  padding:12px 40px;
  background:#132a55;
  color:#fff;
  border:none;
  border-radius:4px;
  font-family:"IBM Plex Sans",sans-serif;
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s ease;
}
.contact-submit:hover{background:#1c3a73;}