/* Reserve button space so the card stays still as required fields are completed. */
#contact .contact-send-slot{min-height:58px;display:grid;align-items:center}
#contact .contact-submit[hidden]{display:none}
#contact .contact-submit{position:relative;isolation:isolate;overflow:hidden;justify-content:center;gap:12px;min-height:58px;padding:16px 22px;border-radius:999px;background:transparent;color:#10304c}
#contact .contact-submit::before{content:'';position:absolute;inset:0;z-index:-1;background:#8ed9e9;border-radius:999px;pointer-events:none;transition:background .2s}
#contact .contact-submit:hover{background:transparent}
#contact .contact-submit:hover::before{background:#b0e8f2}
#contact .contact-submit-icon{display:block;flex:none;width:23px;height:23px;transform:none}
#contact .contact-submit>span.contact-submit-label{font:500 16px/24px 'Space Grotesk',sans-serif;letter-spacing:0;color:inherit;white-space:nowrap;transform:none;transition:none}
#contact .contact-submit:hover>span.contact-submit-label{transform:none}
#contact .contact-submit.is-revealing:disabled{opacity:1;cursor:default}
#contact .contact-submit.is-revealing::before{animation:contact-send-expand .65s cubic-bezier(.22,.7,.2,1) both}
#contact .contact-submit.is-revealing .contact-submit-icon{animation:contact-mail-reveal .26s .25s ease-out both}
#contact .contact-submit.is-revealing .contact-submit-label{animation:contact-send-label .32s .27s ease-out both}
@keyframes contact-send-expand{
 0%{inset:21px calc(50% - 8px);border-radius:50%}
 18%{inset:0 calc(50% - 29px);border-radius:999px}
 100%{inset:0;border-radius:999px}
}
@keyframes contact-mail-reveal{from{opacity:0;transform:scale(.65)}to{opacity:1;transform:scale(1)}}
@keyframes contact-send-label{from{opacity:0;letter-spacing:4px;transform:translateX(8px)}to{opacity:1;letter-spacing:0;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){
 #contact .contact-submit.is-revealing::before,#contact .contact-submit.is-revealing .contact-submit-icon,#contact .contact-submit.is-revealing .contact-submit-label{animation:none}
 #contact .contact-submit::before{transition:none}
}

/* Compact enquiry layout: keep readable controls and reduce vertical whitespace. */
#contact .contact-form{padding:18px 20px}
#contact .form-eyebrow{margin-bottom:12px}
#contact .contact-fields{gap:10px 14px;margin-bottom:10px}
#contact .contact-field{gap:4px;margin-bottom:10px}
#contact input,#contact select{min-height:42px;padding:9px 11px}
#contact textarea{height:70px;min-height:70px;padding:9px 11px}
#contact .contact-verification{margin-bottom:8px}
#contact .contact-form-note:empty{margin:0}
@media(min-width:701px){#contact .contact-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){#contact .contact-form{padding:18px 16px}}

/* Match the hero CTA with a compact, content-width pill. */
#contact .contact-send-slot{min-height:46px;justify-items:start}
#contact .contact-submit{width:auto;min-height:46px;padding:11px 20px;gap:10px;color:#000;box-shadow:0 10px 30px #00d9ff2a;transition:transform .25s,box-shadow .25s}
#contact .contact-submit::before,#contact .contact-submit:hover::before{background:linear-gradient(135deg,#8cecff 0%,#00d9ff 50%,#00b8db 100%)}
#contact .contact-submit>span.contact-submit-label{font-size:14px;line-height:22px;font-weight:700}
#contact .contact-submit-icon{width:20px;height:20px}
#contact .contact-submit:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 14px 40px #00d9ff50}
@keyframes contact-send-expand{
 0%{inset:15px calc(50% - 8px);border-radius:50%}
 18%{inset:0 calc(50% - 23px);border-radius:999px}
 100%{inset:0;border-radius:999px}
}
@media(prefers-reduced-motion:reduce){#contact .contact-submit{transition:none}#contact .contact-submit:not(:disabled):hover{transform:none}}

#contact .contact-phone-fields{display:grid;grid-template-columns:120px minmax(0,1fr);gap:6px 14px}
#contact .contact-phone-fields .contact-field{margin:0}
#contact #contact-phone-hint{grid-column:1 / -1;font-size:11px;line-height:1.4;color:#acc8de}
@media(max-width:400px){#contact .contact-phone-fields{grid-template-columns:100px minmax(0,1fr);gap:6px 10px}}

#contact .contact-field-error{color:#ffd5c9;font-size:11px;line-height:1.45}
#contact .contact-field-error[hidden]{display:none}
#contact input[aria-invalid="true"]{border-color:#f5a997}

/* Full-width verification with the send button centered underneath. */
#contact .contact-form-actions{display:flex;flex-direction:column;gap:12px}
#contact .contact-form-actions .contact-verification{width:100%;min-width:0;margin:0}
#contact .contact-form-actions .contact-send-slot{width:100%;min-height:46px;justify-items:center;align-items:center}

/* Keep phone details compact beside Company; give the enquiry more writing room. */
#contact .contact-fields .contact-phone-fields{grid-column:auto;grid-template-columns:82px minmax(0,1fr);gap:6px 10px}
#contact .contact-phone-fields input{padding-left:9px;padding-right:9px}
#contact textarea{height:130px;min-height:130px}
@media(max-width:700px){
 #contact .contact-fields .contact-phone-fields{grid-template-columns:100px minmax(0,1fr)}
}

#contact label[for="contact-country-code"]{font-size:11px;white-space:nowrap;min-height:17px}

#contact .contact-fields .contact-phone-fields{grid-template-columns:64px minmax(0,1fr);column-gap:8px}

/* Match the blue service-card labels. */
#contact .form-eyebrow{font:400 18px/1.35 "JetBrains Mono",monospace;letter-spacing:1px;color:#43c9ec}

/* Validation bubbles overlay the form without changing its height. */
#contact .contact-field{position:relative}
#contact .contact-field-error{
 position:absolute;z-index:20;top:calc(100% + 6px);left:0;
 width:max-content;max-width:230px;margin:0;padding:8px 11px;
 border:1px solid #f5a99780;border-radius:8px;background:#102a49;
 color:#ffe2da;font-size:11px;line-height:1.45;
 box-shadow:0 5px 16px #0004;pointer-events:none;
}
#contact .contact-field-error::before{content:'';position:absolute;left:14px;top:-5px;width:8px;height:8px;transform:rotate(45deg);background:#102a49;border-top:1px solid #f5a99780;border-left:1px solid #f5a99780}
#contact .contact-field-error[hidden]{display:none}
#contact #contact-email-error{left:auto;right:0}
#contact #contact-email-error::before{left:auto;right:14px}

/* Extend the existing corner dots across the upper half of the enquiry card. */
#contact .contact-form::before{width:100%;height:55%;right:-14px;top:-15px}

/* Reuse the hiring artwork's irregular, individually shaded dot field. */
#contact .contact-form::before{
 width:100%;height:55%;right:0;top:0;
 background-image:url('assets/contact-service-dots.svg');
 background-size:100% 100%;background-repeat:no-repeat;
 opacity:1;clip-path:none;
}

/* Subtle hiring-style dots tucked into the top-right corner. */
#contact .contact-form::before{
 width:70%;height:auto;aspect-ratio:290 / 240;
 top:-10%;right:-15%;left:auto;opacity:.45;
}

/* A smaller matching dot cluster at the lower-right edge. */
#contact .contact-form::after{
 content:'';position:absolute;z-index:-1;pointer-events:none;
 width:54%;aspect-ratio:290 / 240;right:-14%;bottom:-13%;
 background:url('assets/contact-service-dots.svg') center / 100% 100% no-repeat;
 opacity:.45;transform:rotate(180deg);
}

/* Keep every field opaque, including the browser's autofill highlight. */
#contact input,
#contact select,
#contact textarea,
#contact input:focus,
#contact select:focus,
#contact textarea:focus{
 background-color:#103362;
 opacity:1;
}
#contact input:is(:autofill, :-webkit-autofill),
#contact select:is(:autofill, :-webkit-autofill),
#contact textarea:is(:autofill, :-webkit-autofill){
 -webkit-box-shadow:0 0 0 1000px #103362 inset!important;
 box-shadow:0 0 0 1000px #103362 inset!important;
 -webkit-text-fill-color:#f2f8fc;
 caret-color:#f2f8fc;
}