/* Contact: a readable introduction and one focused form in the shared shell. */
.v-contact{min-height:100svh;background:radial-gradient(ellipse 900px 700px at 80% 30%,#284d712b,transparent),var(--bg)}
.v-contact .contact-header{background:#0c132080}
.v-contact .nav{padding-block:22px}
.v-contact .skip-link{position:fixed;z-index:50;top:12px;left:22px;transform:translateY(-160%);padding:12px 18px;border-radius:12px;background:var(--accent);color:var(--on-action)}
.v-contact .skip-link:focus{transform:none}
.v-contact .cpage{max-width:1440px;margin:auto;padding:0 var(--gutter)}
.v-contact .contact-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:72px;padding:65px 0 72px;align-items:start}
.v-contact .chero{padding-top:38px}
.v-contact .eyebrow{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.v-contact .eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--aqua);box-shadow:0 0 18px #74ddcc40}
.v-contact h1{margin-top:18px;font-size:46px;line-height:1.2;text-wrap:pretty}
.v-contact h1 span{color:var(--accent)}
.v-contact .chero p{max-width:42ch;margin-top:24px;color:var(--muted);font-size:16px;line-height:1.75;overflow-wrap:anywhere}
.v-contact .cform{min-width:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:38px;border:0;border-radius:28px;background:radial-gradient(ellipse at 100% 0,#427eb026,transparent 65%),#19294080;box-shadow:0 18px 44px #00000040,0 4px 14px #00000026}
.v-contact .field{min-width:0;align-self:end}
.v-contact .field label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.v-contact .opt{font-weight:400;color:var(--muted)}
.v-contact .field input,.v-contact .field textarea{display:block;min-width:0;width:100%;min-height:52px;border:1px solid #6a83a3;border-radius:14px;padding:12px 16px;background:#0c1726b3;color:var(--ink);font:400 16px/1.6 var(--body);transition:border-color .18s,box-shadow .18s}
.v-contact .field input::placeholder{color:var(--muted);opacity:1}
.v-contact .field input:hover,.v-contact .field textarea:hover{border-color:var(--accent)}
.v-contact .field input:focus,.v-contact .field textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #8ebaff26}
.v-contact .field input:user-invalid,.v-contact .field textarea:user-invalid{border-color:#e1baa0}
.v-contact .field-message,.v-contact .form-actions{grid-column:1/-1}
.v-contact .field textarea{min-height:180px;resize:vertical}
.v-contact .hp{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.v-contact .form-actions{display:flex;align-items:center;gap:24px}
.v-contact .csub{display:inline-flex;align-items:center;justify-content:center;gap:16px;flex:none;min-height:52px;padding:12px 22px;border:0;border-radius:16px;background:var(--action);color:var(--on-action);font-size:15px;font-weight:600;line-height:1.5}
.v-contact .csub svg{flex:none}
.v-contact .csub:hover{background:var(--action-hover)}
.v-contact .calt{color:var(--muted);font-size:13px;line-height:1.7;overflow-wrap:anywhere}
.v-contact .cfoot{padding:28px 0 38px;border-top:1px solid var(--line);color:#9eadc5;font-size:13px;line-height:1.8;overflow-wrap:anywhere}
.v-contact .cfoot a{color:var(--accent);text-underline-offset:4px}
.v-contact .cfoot a:hover{text-decoration:underline}
@media(max-width:1100px){
  .v-contact .contact-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:38px}
  .v-contact .cform{padding:28px;gap:22px}
  .v-contact .form-actions{flex-direction:column;align-items:stretch;gap:18px}
  .v-contact .calt{text-align:center}
}
@media(max-width:900px){
  .v-contact .contact-layout{grid-template-columns:minmax(0,1fr);gap:38px;padding-top:38px}
  .v-contact .chero{padding-top:0}
  .v-contact .chero p{max-width:65ch}
  .v-contact .form-actions{flex-direction:row;align-items:center;gap:24px}
  .v-contact .calt{text-align:left}
}
@media(max-width:700px){
  .v-contact{--gutter:22px}
  .v-contact .nav{padding-block:20px}
  .v-contact .contact-layout{padding-bottom:38px}
  .v-contact h1{font-size:34px}
  .v-contact .chero p{margin-top:22px}
  .v-contact .cform{grid-template-columns:minmax(0,1fr);padding:24px;border-radius:24px}
  .v-contact .form-actions{flex-direction:column;align-items:stretch;gap:18px}
  .v-contact .calt{text-align:center}
  .v-contact .field textarea{min-height:160px}
}