/* The get-in-touch form (build/templates/ask-form.html): the build's own rules, in the look of the form it replaced
   in maru.css. Same type, same boxes, same button; fields stacked, each under its label. No new colour or font. */
/* The form opens behind its button: a <details>, closed on arrival, whose <summary> is the site's button. Closed, the
   block is its heading, its line and that one button, spaced as the one-field form was. Open, the button steps
   aside so that "Get in touch" is the only button: it is taken out of sight, still there for a screen reader and
   the keyboard, and shows as a quiet line above the fields while the keyboard is on it, so the form can be closed. */
.askd{position:relative;margin-top:24px}
.askd>summary{list-style:none}
.askd>summary::-webkit-details-marker{display:none}
.askd[open]{margin-top:0;padding-top:28px} /* the room between the line and the first label, where the quiet line shows */
.askf .msg:empty+.f{margin-top:0}
.askd[open]>summary{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.askd[open]>summary:focus-visible{width:auto;height:auto;overflow:visible;clip-path:none;background:none;color:var(--soft);font-size:12px;line-height:1.3;letter-spacing:.12em;text-decoration:underline;text-underline-offset:3px}
.ask form.askf{display:block;max-width:560px;margin:0 auto;text-align:left}
.askf .f{margin-top:16px}
.askf label{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-bottom:6px}
.askf .f input,.askf .f select,.askf .f textarea{display:block;width:100%;min-width:0;padding:14px 16px;border:1px solid var(--line);background:var(--paper);border-radius:0;font:inherit;color:inherit;flex:none}
.askf .f select{min-height:52px;padding-left:12px} /* a list's own inset is 4px: its text starts level with a field's */
.askf .f textarea{min-height:96px;resize:vertical}
.askf .f ::placeholder{color:var(--soft);opacity:1}
.askf .send{margin-top:24px;text-align:center}
/* what to fix, when the handler sends the form back: one line above the fields, in the page's ink */
.askf .msg{font-size:15px;color:var(--ink);border:1px solid var(--line);padding:12px 16px;min-height:0}
.askf .msg:empty{border:0;padding:0}
/* the catalogue's hint sits in the field itself; on a phone, where the field is too narrow to show it whole, it
   moves to a line under the label and the field is left empty */
.askf .hint{display:none;font-size:14px;color:var(--soft);margin:0 0 8px}
@media (max-width:760px){
  .askf .send .btn{display:block;width:100%}
}
@media (max-width:520px){
  .askd:not([open])>summary{padding-inline:14px} /* the investment button's words on one line on a 390px phone */
  .askf .hint{display:block}
  .askf .f input::placeholder{color:transparent}
  .askf .f select{padding-right:4px} /* room for the longest choice on a 390px phone */
}

/* a refusal from the handler: unmistakable, and on the field at fault (form.js moves the message there) */
.askf .msg.err{color:#a3180f;border:2px solid #a3180f;background:#fff4f2;font-weight:500}
.askf [aria-invalid="true"]{border-color:#a3180f;outline:2px solid #a3180f;outline-offset:-1px}
.askf .f .msg.err{margin:0 0 8px}