/* A centered contact form over dedicated Unbreaded brand artwork. */
.contact-page .about-art{background:linear-gradient(0deg,#03182066,transparent 70%),url('assets/unbreaded-contact-v2.webp') center/cover no-repeat}
.contact-page #main{top:max(calc(var(--top-height) + 36px),26dvh)}
.contact-page .about-sections{grid-template-columns:minmax(0,560px);justify-content:center;gap:0}
.contact-page .about-intro{width:100%;max-width:560px;padding:12px 5px}
.contact-page .about-heading{text-align:center}
.contact-page .about-heading .eyebrow{justify-content:center}
.contact-page .about-heading h1{font-size:clamp(30px,3vw,42px)}
.contact-page .about-story{max-width:100%;margin:0}
.contact-form-note a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.contact-page .about-heading{margin-bottom:24px}
.contact-form{display:grid;gap:16px;text-shadow:none}
.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* Native controls sit within layered metal frames, using the action button's cuts. */
.contact-field{display:grid;gap:8px;min-width:0}
.contact-field label{font:600 10px/1.5 var(--sans);letter-spacing:1px;text-transform:uppercase;color:#c5d4d3;transition:color .2s}
.contact-control{--field-cut:7px;--field-border:linear-gradient(135deg,#789398,#355660 38%,#294753 65%,#69858a);--field-fill:linear-gradient(180deg,#15343fed,#0b2530f2 50%,#09212bf5);position:relative;display:block;isolation:isolate;min-width:0;filter:drop-shadow(0 3px 5px #00131b45);transition:filter .2s}
.contact-control:before,.contact-control:after{content:"";position:absolute;pointer-events:none;z-index:-1;clip-path:polygon(var(--field-cut) 0,calc(100% - var(--field-cut)) 0,100% var(--field-cut),100% calc(100% - var(--field-cut)),calc(100% - var(--field-cut)) 100%,var(--field-cut) 100%,0 calc(100% - var(--field-cut)),0 var(--field-cut))}
.contact-control:before{inset:0;background:var(--field-border)}
.contact-control:after{inset:1px;--field-cut:6.4px;background:var(--field-fill);box-shadow:inset 0 1px #acc6c41a,inset 0 3px 8px #00121d55;transition:box-shadow .2s}
.contact-field input,.contact-field select,.contact-field textarea{display:block;width:100%;min-width:0;min-height:46px;border:0;border-radius:0;background:transparent;color:var(--cream);caret-color:var(--gold);font:14px/1.5 var(--sans);padding:12px 15px;outline:none}
.contact-field textarea{resize:vertical;min-height:118px;max-height:260px}
.contact-control:hover{--field-border:linear-gradient(135deg,#b5c6b9,#69857e 40%,#527079 65%,#b7b890)}
/* Keep untouched fields calm; validate after editing and leaving the field. */
.contact-control{--field-status:#729aa9}
.contact-control.is-dirty.is-touched:not(:focus-within):has(:invalid){--field-status:#e87979}
.contact-control.is-dirty.is-touched:not(:focus-within):has(:valid){--field-status:#83c99b}
.contact-control:focus-within{--field-status:#efc976}
.contact-underline{position:absolute;pointer-events:none;left:0;right:0;bottom:0;height:9px;background:var(--field-status);clip-path:polygon(0 0,7px 7px,calc(100% - 7px) 7px,100% 0,100% 3px,calc(100% - 7px) 100%,7px 100%,0 3px);transition:background .2s}
.contact-control:has(:focus-visible) .contact-underline{height:10px;clip-path:polygon(0 0,7px 7px,calc(100% - 7px) 7px,100% 0,100% 4px,calc(100% - 7px) 100%,7px 100%,0 4px)}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:#91aaae;opacity:1;transition:color .2s}
.contact-field input:focus::placeholder,.contact-field textarea:focus::placeholder{color:#b0c1bd}
.contact-field select{appearance:none;-webkit-appearance:none;padding-right:48px;cursor:pointer}
.contact-select-arrow{position:absolute;right:15px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.7;transition:opacity .2s,filter .2s}
.contact-select:focus-within .contact-select-arrow,.contact-select:hover .contact-select-arrow{opacity:1;filter:drop-shadow(0 0 4px #e4c27c40)}
.contact-field select option{background:#0a2630;color:var(--cream)}
.contact-error{display:none;color:#f3a1a1;font:11px/1.5 var(--sans)}
.contact-field:has(:user-invalid) .contact-error{display:block}
.contact-control:has(:disabled){opacity:.45;filter:none}
.contact-control :disabled{cursor:not-allowed}
.contact-field input:autofill{box-shadow:inset 0 0 0 100px #183741;color:var(--cream)}
.contact-field input:-webkit-autofill{-webkit-box-shadow:inset 0 0 0 100px #183741;-webkit-text-fill-color:var(--cream)}
.contact-form .accent-button{justify-self:start;margin-top:2px}
.contact-form-note,.contact-form-status{font:11px/1.6 var(--sans);color:#bdcece;margin:0;max-width:400px}
.contact-form-note{margin-top:-5px}
.contact-form-status:empty{display:none}
.contact-form-status{color:var(--gold)}
@media(max-width:560px){.contact-fields{grid-template-columns:1fr;gap:16px}.contact-field input,.contact-field select,.contact-field textarea{font-size:16px}}
@media(max-height:650px){.contact-form{gap:12px}.contact-page .about-heading{margin-bottom:18px}}

@media(max-width:700px){.contact-page .about-art{background-color:#071a21;background-image:linear-gradient(0deg,#071a2155,transparent),url('assets/unbreaded-contact-v2.webp');background-size:100% 100%,100% auto;background-position:center,center calc(var(--top-height) + 10px);background-repeat:no-repeat}.contact-page #main{top:calc(var(--top-height) + 95px)}.contact-page .about-sections{min-height:100%}}