/* Contact form. Uses the site tokens from editorial.css, so it follows light and dark mode. */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);grid-template-rows:1fr auto;column-gap:clamp(40px,6vw,120px);align-items:start;min-height:0;padding-top:clamp(80px,8vw,130px);padding-bottom:clamp(56px,5vw,80px)}
.contact-copy{grid-column:1;grid-row:1}
.contact h2{font-size:clamp(38px,4.2vw,68px);max-width:14ch}
.contact-intro{max-width:36ch;margin-top:28px;font-size:16px;line-height:1.55;color:color-mix(in srgb,var(--ink) 70%,transparent)}
.contact-note{grid-column:1;grid-row:2;align-self:end;margin-top:48px;padding-bottom:0}
.contact-panel{position:relative;z-index:1;grid-column:2;grid-row:1/3;padding:clamp(24px,2.6vw,40px);border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);border-radius:10px;background:color-mix(in srgb,var(--paper) 72%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
:root[data-theme=light] .contact-panel{background:color-mix(in srgb,var(--paper) 90%,transparent);border-color:color-mix(in srgb,var(--ink) 10%,transparent);box-shadow:0 24px 60px -30px rgba(10,10,15,.25)}
:root[data-theme=light] .field input,:root[data-theme=light] .field select,:root[data-theme=light] .field textarea{background:#fff;border-color:color-mix(in srgb,var(--ink) 18%,transparent)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field-wide{grid-column:1/-1}
.field label{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 78%,transparent)}
.field .optional{margin-left:6px;letter-spacing:.08em;text-transform:none;font-weight:400;color:color-mix(in srgb,var(--ink) 50%,transparent)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);border-radius:6px;background:color-mix(in srgb,var(--ink) 4%,transparent);color:var(--ink);font:inherit;font-size:16px;line-height:1.4;transition:border-color .2s,box-shadow .2s,background .2s}
.field textarea{min-height:120px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:color-mix(in srgb,var(--ink) 40%,transparent)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 28%,transparent);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.select-wrap{position:relative}
.select-wrap::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none;opacity:.7}
.field select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
.field select option{background:var(--paper);color:var(--ink)}
.field select:invalid,.field select.is-placeholder{color:color-mix(in srgb,var(--ink) 55%,transparent)}

.field [aria-invalid=true],.field [aria-invalid=true]:hover,.field [aria-invalid=true]:focus-visible{border-color:#FF6B8A}
.field [aria-invalid=true]:focus-visible{box-shadow:0 0 0 3px rgba(255,107,138,.25)}
.field-error{min-height:0;font-size:12px;line-height:1.4;color:#FF8FA6}
.field-error:empty{display:none}
:root[data-theme=light] .field [aria-invalid=true]{border-color:#C8234A}
:root[data-theme=light] .field-error{color:#B01E40}

.form-actions{display:flex;align-items:center;gap:20px 24px;flex-wrap:wrap;margin-top:28px}
.contact .form-actions .button{margin-top:0;min-width:228px;cursor:pointer}
.contact-form .button[disabled]{opacity:.65;cursor:progress;transform:none}
.contact-form.is-sending .button svg{animation:cf-nudge 1s var(--ease) infinite}
.form-privacy{flex:1 1 200px;font-size:12px;line-height:1.5;color:color-mix(in srgb,var(--ink) 58%,transparent)}
.form-status{margin-top:18px;font-size:13px;line-height:1.5}
.form-status:empty{display:none}
.form-status.is-error{padding:12px 14px;border-radius:6px;border:1px solid rgba(255,107,138,.45);background:rgba(255,107,138,.08)}
:root[data-theme=light] .form-status.is-error{border-color:rgba(200,35,74,.4);background:rgba(200,35,74,.06)}

.field-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

.form-success{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-height:360px;justify-content:center;outline:none}
.form-success[hidden]{display:none}
.form-success .micro{color:var(--teal)}
:root[data-theme=light] .form-success .micro{color:#008C72}
.form-success h3{font-size:clamp(30px,3vw,44px);font-weight:500;line-height:1.05;letter-spacing:-.03em}
.form-success p:not(.micro){max-width:34ch;font-size:16px;line-height:1.55;color:color-mix(in srgb,var(--ink) 72%,transparent)}
.form-success .text-link{margin-top:12px;padding:0;background:none;border:0;border-bottom:1px solid currentColor;border-radius:0;color:var(--ink);cursor:pointer}
.form-success:not([hidden]){animation:cf-in .6s var(--ease) both}

@keyframes cf-nudge{50%{transform:translateX(5px)}}
@keyframes cf-in{from{opacity:0;transform:translateY(12px)}}

@media(max-width:1000px){
 .contact{grid-template-columns:1fr;grid-template-rows:none}
 .contact-copy,.contact-panel,.contact-note{grid-column:1;grid-row:auto}
 .contact h2{max-width:16ch}
 .contact-panel{margin-top:40px;max-width:640px}
}
@media(max-width:760px){
 .contact{display:grid;min-height:0;padding:80px 24px 36px}
 .contact h2{font-size:clamp(34px,9.6vw,44px)}
 .contact-intro{font-size:15px;margin-top:20px}
 .contact-panel{margin-top:32px;padding:22px 18px;border-radius:8px}
 .form-grid{grid-template-columns:1fr;gap:18px}
 .contact .form-actions .button{width:100%;min-width:0}
 .contact-note{margin:44px 0 0}
 .form-success{min-height:300px}
}
@media(prefers-reduced-motion:reduce){
 .contact-form.is-sending .button svg,.form-success:not([hidden]){animation:none}
}