/* Contact page, using the site's existing colour, container and type tokens. */
.contact-page { position: relative; isolation: isolate; background: #030d15; }
.contact-atmosphere { position: absolute; z-index: -1; pointer-events: none; inset: 0 0 auto; height: min(1120px, 100%); overflow: hidden; background: radial-gradient(ellipse at 73% 38%,#07385280,transparent 68%); }
.contact-atmosphere::before { content: ''; position: absolute; pointer-events: none; inset: 0 0 auto; height: 620px; background: url('assets/stars.webp') center top / cover no-repeat; opacity: .65; mask-image: linear-gradient(180deg,#0005,#000 20%,#0009 65%,transparent); }
/* Only the upper part of the existing Earth asset is shown. The original
   foreground at its lower left remains outside this decorative crop. */
.contact-atmosphere::after { content: ''; position: absolute; pointer-events: none; top: 220px; left: 50%; width: max(100%, 1100px); height: min(49vw, 800px); min-height: 420px; transform: translateX(-50%); background: url('assets/about/earth.webp') center top / 100% auto no-repeat; opacity: .64; mask-image: linear-gradient(180deg,transparent,#000 9%,#000 46%,transparent 100%); }
.contact-main { padding-block: 30px 46px; }
.contact-intro { text-align: center; margin: 0 auto 30px; }
.contact-eyebrow { color: #9eb5c4; font-size: 11px; letter-spacing: .34em; margin: 0 0 15px; }
.contact-intro h1 { font-size: clamp(42px,5.8vw,76px); line-height: 1.08; letter-spacing: -.045em; }
.contact-intro h1 em { font-style: normal; color: var(--accent); }
.contact-intro > p:last-child { margin: 16px auto 0; color: var(--body); font-size: clamp(16px,1.4vw,19px); line-height: 1.55; }
.contact-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 30px; width: min(100%,1040px); margin: 0 auto; padding: 32px; border: 1px solid #00c8ff; border-radius: 24px; background: linear-gradient(135deg,#0b2030f7,#061522f5 62%,#071d2cf7); box-shadow: 0 0 0 1px #00b9ef22,0 0 26px #00baff42,inset 0 0 30px #00baff14,0 20px 60px #0006; }
.contact-profile { min-width: 0; border-right: 1px solid #7391a32e; padding: 18px 30px 20px 0; }
.contact-portrait { width: 148px; height: 148px; object-fit: cover; object-position: 50% 20%; border-radius: 50%; border: 3px solid #447a91; margin: 0 auto 25px; }
.contact-profile h2 { font-size: 27px; line-height: 1.2; letter-spacing: -.035em; margin: 0 0 8px; font-weight: 600; }
.contact-role { color: #b4c7d4; font-size: 15px; line-height: 1.5; margin: 0; }
.contact-personal { color: #d5e1e9; font-size: 15px; line-height: 1.65; margin: 24px 0 28px; }
.contact-direct { display: flex; align-items: flex-start; gap: 13px; border-top: 1px solid #7391a32e; padding-top: 25px; font-size: 15px; line-height: 1.5; }
.contact-direct p { margin: 0; color: var(--text); }
.contact-direct > .contact-icon { color: var(--accent); margin-top: 3px; width: 25px; height: 25px; }
.contact-direct a { color: var(--accent); overflow-wrap: anywhere; }
.contact-icon { width: 19px; height: 19px; flex: 0 0 auto; }
.contact-fields { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 18px; }
.contact-form-column { min-width: 0; }
.contact-topics { border: 0; margin: 0; padding: 0; min-width: 0; }
.contact-topics legend, .contact-field > label { display: block; margin: 0 0 9px; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.4; }
.contact-topic-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.contact-topic { position: relative; display: flex; justify-content: center; align-items: center; gap: 7px; min-height: 49px; padding: 8px 6px; border: 1px solid #385162; border-radius: 9px; background: #172d3cbd; color: #e4eef5; font-size: 11.5px; cursor: pointer; }
.contact-topic input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.contact-topic .contact-icon { color: #aacbdf; width: 17px; height: 17px; }
.contact-topic:has(input:checked) { border-color: var(--accent); background: #004b70a8; box-shadow: inset 0 0 0 1px #00cce84d; }
.topic-check { position: absolute; top: -7px; right: -3px; color: #04131b; background: var(--accent); border-radius: 50%; width: 16px; height: 16px; text-align: center; font-size: 12px; font-weight: 700; visibility: hidden; }
.contact-topic:has(input:checked) .topic-check { visibility: visible; }
.contact-topic:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
.contact-small-button { border: 0; background: none; padding: 9px 0; min-height: 36px; color: #75d8ed; font-size: 12px; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.contact-field { min-width: 0; }
.contact-field input,.contact-field select,.contact-field textarea { display: block; width: 100%; max-width: 100%; border: 1px solid #395365; border-radius: 8px; padding: 12px; background: linear-gradient(120deg,#1a2d3b,#122839); color: #f4f8fb; font: inherit; font-size: 14px; line-height: 1.5; }
.contact-field input,.contact-field select { min-height: 46px; }
.contact-field select { padding-right: 28px; cursor: pointer; }
.contact-field select option { background: #112433; color: #f4f8fb; }
.contact-field textarea { resize: vertical; min-height: 150px; }
.contact-field :is(input,textarea)::placeholder { color: #a6bbc9; opacity: 1; }
.contact-field :is(input,select,textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.contact-field [aria-invalid=true] { border-color: #ffb4a8; }
.contact-required,.contact-optional { color: #a6bbc9; font-weight: 400; font-size: 11px; }
.contact-message-footer { display: flex; flex-wrap: wrap; gap: 6px 15px; margin-top: 6px; }
#message-counter { margin-left: auto; color: #a6bbc9; font-size: 11px; }
.contact-field-error { color: #ffb4a8; font-size: 12px; line-height: 1.5; margin: 6px 0 0; }
.contact-message-footer .contact-field-error { margin: 0; }
.contact-help { color: #a6bbc9; font-size: 11px; line-height: 1.5; margin: 6px 0 0; }
.contact-support { border-bottom: 1px solid #395365; padding-bottom: 10px; }
.contact-support summary { color: #b8d4e5; font-size: 13px; cursor: pointer; padding: 5px 0; min-height: 36px; }
.contact-support summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 3px; }
.contact-support[open] summary { margin-bottom: 8px; }
.contact-upload-button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 45px; text-align: left; color: #e4eef5; border: 1px solid #385162; border-radius: 8px; padding: 9px 12px; background: #112839b3; font-size: 13px; cursor: pointer; }
.contact-upload-button > span:last-child { margin-left: auto; font-size: 19px; }
.contact-upload-button .contact-icon { color: #b5d4e7; }
.contact-file-preview { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 10px; border: 1px solid #385162; border-radius: 8px; }
.contact-file-preview img { width: 64px; height: 64px; object-fit: contain; border-radius: 5px; background: #030d15; }
.contact-file-preview > div { min-width: 0; display: flex; flex-direction: column; }
#screenshot-name { font-size: 12px; overflow-wrap: anywhere; color: #d5e1e9; }
.contact-email-input { position: relative; }
.contact-email-input .contact-icon { position: absolute; left: 12px; top: 14px; color: #b5d4e7; }
.contact-email-input input { padding-left: 40px; }
.contact-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-submit { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; min-height: 53px; border: 1px solid #00d5f9; border-radius: 11px; padding: 13px 16px; background: linear-gradient(110deg,#008cf5,#0054f4); color: #fff; font-size: 14px; line-height: 1.4; cursor: pointer; box-shadow: 0 0 14px #008bff32,inset 0 1px 0 #8eefff45; }
.contact-submit > span:last-child:not([data-i18n]) { margin-left: auto; }
.contact-submit > .contact-icon { margin-left: auto; }
.contact-submit:hover:enabled { background: linear-gradient(110deg,#0e9cf9,#1468fa); }
.contact-submit:disabled { opacity: .57; cursor: not-allowed; }
.contact-fields:disabled { opacity: .8; }
.contact-fields:disabled input { cursor: wait; }
.contact-privacy { color: #b2c4d1; font-size: 11.5px; line-height: 1.55; margin: -4px 0 0; }
.contact-privacy a { color: #42d5ec; text-decoration: underline; text-underline-offset: 3px; }
.contact-status { margin: 15px 0 0; font-size: 13px; line-height: 1.6; color: #bed5e3; overflow-wrap: anywhere; }
.contact-status:empty { display: none; }
.contact-status.is-error { color: #ffb4a8; }
.contact-success { padding: 75px 12px; text-align: center; }
.contact-success-icon { display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 26px; border: 1px solid var(--accent); color: var(--accent); background: #008fb51c; border-radius: 50%; }
.contact-success-icon .contact-icon { width: 35px; height: 35px; }
.contact-success h2 { font-size: 28px; line-height: 1.2; margin: 0 0 18px; }
.contact-success p { color: var(--body); font-size: 15px; line-height: 1.6; margin: 0 0 28px; }
.contact-page .site-footer { position: relative; }
@media(max-width:1100px) {
 .contact-card { gap: 24px; padding: 28px; grid-template-columns: minmax(0,.85fr) minmax(0,1.75fr); }
 .contact-profile { padding-right: 24px; }
 .contact-topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .contact-topic { font-size: 13px; }
}
@media(max-width:800px) {
 .contact-main { padding-top: 22px; }
 .contact-card { grid-template-columns: 1fr; gap: 25px; max-width: 620px; }
 .contact-profile { display: grid; grid-template-columns: 85px 1fr; gap: 0 20px; border-right: 0; border-bottom: 1px solid #7391a32e; padding: 0 0 22px; }
 .contact-portrait { width: 85px; height: 85px; margin: 0; grid-row: 1 / 3; }
 .contact-profile h2 { font-size: 23px; }
 .contact-personal { margin: 13px 0 0; font-size: 14px; }
 .contact-direct { grid-column: 1 / -1; border: 0; padding: 16px 0 0; font-size: 14px; }
 .contact-intro { margin-bottom: 25px; }
 .contact-atmosphere::after { top: 185px; height: 420px; min-height: 0; }
}
@media(max-width:480px) {
 .contact-card { padding: 22px 18px; border-radius: 20px; }
 .contact-main { width: calc(100% - 28px); padding-top: 25px; }
 .contact-intro { padding-inline: 10px; }
 .contact-intro h1 { font-size: clamp(37px,9.5vw,45px); }
 .contact-intro > p:last-child { font-size: 15px; max-width: 31ch; }
 .contact-profile { grid-template-columns: 64px 1fr; gap: 0 15px; }
 .contact-portrait { width: 64px; height: 64px; }
 .contact-profile h2 { font-size: 21px; }
 .contact-role { font-size: 12px; }
 .contact-personal { font-size: 13px; line-height: 1.6; }
 .contact-fields { gap: 17px; }
 .contact-field input,.contact-field select,.contact-field textarea { font-size: 16px; }
 .contact-topic { font-size: 12px; }
 .contact-required { font-size: 10px; }
 .contact-upload-button { font-size: 12px; }
 .contact-upload-button .contact-optional { font-size: 10px; }
 .contact-submit { font-size: 14px; }
 .contact-success { padding: 40px 0; }
}
@media(prefers-reduced-motion:reduce) { .contact-page { scroll-behavior: auto; } }