/* Contact block on the light closing panel. Left: the headline, the promise in large type, one sentence and two big contact pills.
   Right: a compact form. Both columns are about equally tall, so the send button is in view together with the headline. */
.contact-layout{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 22px;scroll-margin-top:125px}
.legacy-anchor{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none;scroll-margin-top:125px}
/* The left column is as tall as the form: headline at the top, the pills on the form's bottom line, the words evenly between them. */
.contact-intro{grid-column:1/7;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.contact-words{margin-block:auto}
.contact-promise{max-width:16em;font-size:clamp(24px,2.5vw,38px);font-weight:600;line-height:1.18;letter-spacing:-.035em;text-wrap:balance}
.contact-lead{max-width:31em;margin-top:clamp(14px,1.5vw,22px);font-size:clamp(17px,1.25vw,19px);line-height:1.6;color:#3d3d3d}
/* Phone and mail as large pills, like the buttons elsewhere but dark on light: the wave is black, the label turns light. */
.closing-pills{display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:100%;padding-top:clamp(24px,2.5vw,40px)}
.closing-pills a{display:inline-flex;align-items:center;max-width:100%;min-height:clamp(58px,5.4vw,86px);padding:0 clamp(24px,2.5vw,42px);border:1px solid #0b0b0b;border-radius:999px;font-size:clamp(17px,2vw,30px);line-height:1.3;letter-spacing:-.025em;white-space:nowrap;--wave:#0b0b0b;--ink:var(--fg);--rest:#0b0b0b}

.inquiry-form{grid-column:8/13;align-self:start;min-width:0;padding:clamp(24px,2.5vw,40px);border:1px solid #0b0b0b2e;border-radius:18px;background:#fff}
.inquiry-form h3{font-size:clamp(24px,2vw,30px);font-weight:600;line-height:1.1;letter-spacing:-.035em}
.inquiry-intro{margin-top:6px;font-size:15px;line-height:1.5;color:#4a4a4a}
.inquiry-field{margin-top:16px}
.inquiry-field label{display:block;margin-bottom:6px;font-size:14px;line-height:1.5}
.inquiry-field input,.inquiry-field textarea{display:block;width:100%;max-width:100%;padding:12px 14px;border:1px solid #0b0b0b40;border-radius:10px;background:#f3f2ed;color:#0b0b0b;font:inherit;font-size:16px;line-height:1.5;transition:border-color .25s,background .25s}
.inquiry-field input{min-height:50px}
.inquiry-field textarea{min-height:108px;resize:vertical}
.inquiry-field input::placeholder,.inquiry-field textarea::placeholder{color:#686868}
.inquiry-field input:focus-visible,.inquiry-field textarea:focus-visible{outline:2px solid #0b0b0b;outline-offset:3px;border-color:#0b0b0b;background:#fff}
/* A field that needs attention is marked by more than colour: a heavier frame in warning red and the message directly above the button. */
.inquiry-field [aria-invalid=true],.inquiry-field [aria-invalid=true]:focus-visible{border-color:#a3241b;outline-color:#a3241b;box-shadow:inset 0 0 0 1px #a3241b;background:#fff}
.inquiry-privacy,.inquiry-delivery{font-size:13.5px;line-height:1.6;color:#4a4a4a}
.inquiry-privacy{margin:16px 0}
.inquiry-delivery{margin-top:12px}
.inquiry-privacy a,.inquiry-delivery a{color:#0b0b0b;text-decoration:underline;text-underline-offset:3px}
.pill.inquiry-submit{width:100%;gap:20px;border-color:#0b0b0b;background:#0b0b0b;color:var(--fg);text-align:left;white-space:normal;--wave:var(--accent);--ink:#0b0b0b}
.inquiry-feedback{margin:16px 0;padding:4px 0 4px 16px;border-left:2px solid #0b0b0b;font-size:15px;line-height:1.6;overflow-wrap:anywhere}
#inquiry-error{border-left-color:#a3241b;color:#7a1710;font-weight:500}
.inquiry-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:14px}
.inquiry-actions a,.inquiry-actions button{padding:7px 0;background:none;color:#0b0b0b;font:inherit;font-size:14px;line-height:1.5;text-decoration:underline;text-underline-offset:5px}
.inquiry-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none}
.inquiry-submit:disabled{cursor:wait}
.inquiry-form[aria-busy=true] .inquiry-submit .mag-fill{transform:none}

/* Between tablet and desktop the form takes the full right half; below that the two blocks stack. */
@media(max-width:1100px){.inquiry-form{grid-column:7/13}}
@media(max-width:850px){.contact-layout{grid-template-columns:minmax(0,1fr);gap:34px}
.contact-intro,.inquiry-form{grid-column:auto}
.closing-pills{flex-direction:row;flex-wrap:wrap}
.closing-pills a{font-size:19px}}
@media(max-width:600px){.contact-promise{font-size:22px}
.closing-pills{flex-direction:column;width:100%;padding-top:22px}
.closing-pills a{justify-content:center;width:100%;min-height:56px;padding:0 18px;font-size:15.5px;letter-spacing:-.01em}
.closing-pills .mag-label{justify-content:center}
.inquiry-form{padding:22px 18px 24px}}