* { box-sizing: border-box; }
body { font-family: "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; font-weight: normal; margin: 0; padding: 0; text-align: center; background: #fff; color: #222; }
#holder { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -150%); width: 116px; height: 57px; background: url('SVG.png') center / 114px 55px no-repeat; opacity: 1; }
@media (max-height: 350px) { #holder { transform: translate(-50%, -50%); } }
#holder.mainActive, #holder.mainInactive { margin-top: 17px; }
#cfContainer { margin: 77px auto 24px; padding: 0 20px; width: min(100%, 678px); text-align: left; display: none; }
#cfContainer.mainActive { display: block; }
#cfContainer.mainInactive { display: none; }
#contactForm { display: grid; gap: 12px; }
#contactForm > div { display: grid; grid-template-columns: 98px minmax(0, 1fr); align-items: start; float: none !important; margin: 0 !important; }
#contactForm span { float: none !important; width: auto !important; margin: 8px 7px 0 0 !important; }
input, textarea { font: inherit; font-size: 16px; min-width: 0; width: 100%; padding: 9px 10px; color: #222; background: #f4f4f4; border: 1px solid #ddd; border-radius: 3px; }
#contactForm textarea { width: 100% !important; resize: vertical; }
#contactForm > div:last-child { display: flex; justify-content: flex-end; gap: 8px; }
input.button { width: auto; min-height: 44px; cursor: pointer; background: #f1f1f1; }
input.button:hover { background: #e2e2e2; }
input:focus-visible, textarea:focus-visible { outline: 2px solid #555; outline-offset: 2px; }
@media (max-width: 520px) { #contactForm > div { grid-template-columns: minmax(0, 1fr); gap: 6px; } #contactForm span { text-align: left !important; } }

body:has(#cfContainer.mainActive) #holder { position: static; transform: none; margin: 32px auto 0; }
body:has(#cfContainer.mainActive) #cfContainer { margin-top: 32px; }