:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: #fffdfa; color: #20232a; font-family: 'Comic Sans MS', 'Comic Sans', cursive; }
.contact-page { width: 100%; max-width: 1100px; flex: 1; margin: 0 auto; padding: clamp(2.5rem, 7vw, 5rem) clamp(1.25rem, 6vw, 5rem) 3.5rem; }
h1 { margin: 0 0 2rem; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.15; font-weight: 700; }
.line-field { display: flex; flex-direction: column; align-items: flex-start; width: min(100%, 440px); gap: .35rem; margin: 0 0 1.8rem; }
.line-field span { font-size: clamp(1.65rem, 4vw, 3rem); line-height: 1.2; font-weight: 700; }
.line-field input { width: 100%; height: 2.2rem; padding: .1rem .25rem; border: 0; border-bottom: 2px solid #222; border-radius: 0; outline-offset: 4px; background: transparent; color: inherit; font: 400 clamp(1rem, 2vw, 1.35rem)/1.4 'Comic Sans MS', 'Comic Sans', cursive; }
.subject-row { display: grid; grid-template-columns: minmax(240px, 1fr) 70px 100px 70px 115px; align-items: center; gap: .4rem; margin-bottom: 1.5rem; }
.subject-field { width: 100%; margin: 0; }
.arrow { width: 100%; overflow: visible; fill: none; stroke: #20232a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.choice-group { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; min-width: 0; margin: 0; padding: .45rem .25rem; border: 2px solid transparent; border-radius: 8px; }
.choice-group label { display: flex; align-items: center; gap: .35rem; cursor: pointer; font: 700 clamp(.95rem, 1.8vw, 1.3rem)/1.25 'Comic Sans MS', 'Comic Sans', cursive; white-space: nowrap; }
.choice-group input { width: 1rem; height: 1rem; margin: 0; accent-color: #283f62; }
.choice-group.needs-attention { border-color: #be5239; background: #fff3ee; }
.message-label { display: block; margin: .9rem 0 .45rem; font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 700; }
textarea { display: block; width: 100%; min-height: 310px; padding: 1rem; resize: vertical; border: 2px solid #20232a; border-radius: 4px; background: #fff; color: inherit; font: 400 clamp(1rem, 2vw, 1.35rem)/1.5 'Comic Sans MS', 'Comic Sans', cursive; }
.send-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1rem; }
button { padding: .55rem 1.6rem; border: 2px solid #20232a; border-radius: 6px; background: #202832; color: #fff; cursor: pointer; font: 700 clamp(1rem, 2vw, 1.35rem)/1.3 'Comic Sans MS', 'Comic Sans', cursive; }
button:hover { background: #34465b; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #b98d40; outline-offset: 3px; }
.preview-note, .form-status { margin: 0; font-size: .95rem; }
.preview-note { color: #5d6269; }
.form-status { min-height: 1.8rem; margin-top: .9rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.fire-engine { position: fixed; z-index: 9999; left: 0; top: 0; pointer-events: none; font-size: 2rem; line-height: 1; filter: drop-shadow(0 3px 3px #0003); }
@media (max-width: 790px) { .subject-row { grid-template-columns: 1fr 52px 1fr 52px 1fr; gap: .2rem; } .subject-field { grid-column: 1 / -1; margin-bottom: .35rem; } .subject-row .arrow:first-of-type { display: none; } }
@media (max-width: 540px) { .subject-row { grid-template-columns: 1fr 1fr 1fr; gap: .35rem; } .subject-row .arrow { display: none; } .choice-group { padding: .4rem 0; } textarea { min-height: 260px; } }