/* ---------- MODAL ----------
   <dialog> is only given flex once [open]. The closed state is hidden explicitly
   rather than left to the UA stylesheet's dialog:not([open]){display:none},
   because an engine without <dialog> treats the element as unknown and inline,
   which would render the whole form into the page on load. site.js adds
   .is-fallback on that path, since showModal() is what would otherwise do the
   positioning. */
dialog.modal{
  padding:0; border:none; border-radius:var(--r-lg);
  background:var(--paper); color:var(--ink);
  width:calc(100% - 32px); max-width:700px;
  max-height:min(90vh,940px); max-height:min(90dvh,940px);
  overflow:hidden; box-shadow:0 30px 80px rgba(15,28,36,.34);
}
dialog.modal::backdrop{background:rgba(15,28,36,.62); backdrop-filter:blur(3px);}
dialog.modal:not([open]){display:none;}
dialog.modal[open]{display:flex; flex-direction:column;}
dialog.modal.is-fallback{position:fixed; z-index:150; left:50%; top:50%; transform:translate(-50%,-50%);}
.modal-inner{display:flex; flex-direction:column; flex:1 1 auto; min-height:0; max-height:inherit;}
.modal-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:22px;
  padding:30px 32px 24px; background:var(--ink); color:#fff; flex:none;
  border-bottom:4px solid transparent;
  border-image:var(--brand-ramp) 1;
}
.modal-head h2{color:#fff; font-size:25px; max-width:26ch;}
.modal-head p{margin-top:10px; font-size:15px; color:#C3D4DA; max-width:48ch;}
.modal-close{
  background:transparent; border:1px solid rgba(255,255,255,.34); border-radius:var(--r-sm);
  color:#fff; cursor:pointer; padding:0; line-height:1; flex:none;
  min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{border-color:var(--gold); color:var(--gold);}
.modal-body{padding:30px 32px; overflow-y:auto; flex:1 1 auto;}
.modal-foot{padding:20px 32px 26px; border-top:1px solid var(--line); background:var(--paper-dim); flex:none; display:flex; flex-direction:column; gap:14px;}
.modal-foot .fine{font-size:13.5px; color:var(--muted); margin:0;}
@media (max-width:640px){
  .modal-head{padding:22px 22px 18px;}
  .modal-body{padding:22px;}
  .modal-foot{padding:18px 22px 22px;}
}

/* ---------- FORM ---------- */
.pane{display:flex; flex-direction:column; flex:1 1 auto; min-height:0;}
.pane[hidden]{display:none !important;}
#enquiry-form{display:flex; flex-direction:column; flex:1 1 auto; min-height:0;}
.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px 22px;}
@media (max-width:600px){ .field-grid{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:7px;}
.field.span-2{grid-column:1 / -1;}
.field label{font-size:14px; font-weight:600; color:var(--ink);}
.field .req{color:var(--red); margin-left:3px;}
.field .hint{font-size:13px; color:var(--muted); font-weight:400;}
.field input,.field select,.field textarea{
  font-family:inherit; font-size:16px; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--line); border-radius:var(--r-sm); padding:13px 14px; width:100%;
}
.field textarea{resize:vertical; min-height:104px;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cyan-text); outline-offset:1px;}
.field .err{font-size:13.5px; color:var(--red); min-height:0;}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea{border-color:var(--red); background:#FDF6F5;}

/* Off-screen rather than display:none so automated submitters still fill it. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.form-status{font-size:15px; padding:15px 17px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--paper-dim); margin:0 0 22px;}
.form-status[data-tone="error"]{border-color:var(--red); background:#FDF6F5; color:#7F1D18;}

.result{text-align:left;}
.result-mark{width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:22px; flex:none;}
.result-mark.ok{background:var(--green);}
.result-mark.bad{background:var(--red);}
.result h3{font-size:24px; margin-bottom:12px;}
.result p{color:var(--muted); margin:0 0 14px; max-width:50ch;}
.result .ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px; background:var(--paper-dim); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 14px; display:inline-block; color:var(--ink-soft);}
.result-actions{margin-top:26px; display:flex; gap:12px; flex-wrap:wrap;}
#success-heading:focus{outline:none;}

.spinner{
  display:inline-block; width:15px; height:15px;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%;
  animation:spin .7s linear infinite; margin-right:4px;
}
.btn-accent .spinner{border-color:rgba(15,28,36,.3); border-top-color:var(--ink);}
@keyframes spin{to{transform:rotate(360deg);}}