:root { color-scheme: dark; --blue: #c9e3ed; --coral: #f89a8e; --background: #000; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--blue); font-family: 'Catamaran', sans-serif; font-size: 19px; line-height: 1.5; }
a { color: inherit; text-underline-offset: 6px; }
a:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.skip-link { position: absolute; top: -100px; left: 16px; padding: 12px 20px; background: var(--blue); color: #000; z-index: 10; }
.skip-link:focus { top: 12px; }
.site-header { max-width: 1240px; min-height: 177px; margin: auto; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; gap: 24px; }
.brand { display: block; flex-shrink: 0; }
.brand img { display: block; width: 177px; height: 177px; object-fit: contain; }
.site-header nav { display: flex; gap: 23px; align-items: center; flex-wrap: wrap; }
.site-header nav a { font-size: 18px; text-decoration: none; padding-block: 12px; }
.site-header nav a:hover, .site-header nav a[aria-current] { text-decoration: underline; }
main { padding: 100px 24px 92px; }
.contact-intro { text-align: center; }
h1 { font-family: 'Prosto One', sans-serif; font-size: clamp(32px, 5vw, 64px); line-height: 1.3; font-weight: 400; margin: 0 0 10px; }
.contact-intro p { max-width: 540px; margin: 0 auto; font-size: 24px; line-height: 1.3; }
.phone { display: inline-block; font-family: 'Prosto One', sans-serif; font-size: clamp(25px, 4vw, 48px); font-weight: 400; line-height: 1.2; text-decoration: none; margin: 24px 0 36px; }
.phone:hover { text-decoration: underline; }
.quote-form { max-width: 606px; margin: 0 auto; }
.field { margin-bottom: 13px; }
.field label, legend { display: block; color: var(--coral); font-size: 20px; margin-bottom: 5px; }
.field input, textarea { display: block; width: 100%; min-height: 68px; padding: 15px 16px; background: #000; color: var(--blue); border: 3px solid var(--coral); border-radius: 35px; font: inherit; transition: background-color .15s, color .15s; }
input::placeholder, textarea::placeholder { color: #9da9ad; opacity: 1; }
.field input:hover, textarea:hover { background: #ffeda3; color: #0d141a; }
.field input:hover::placeholder, textarea:hover::placeholder { color: #555; }
textarea { min-height: 150px; resize: vertical; }
fieldset { margin: 18px 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
.choice { display: flex; align-items: center; gap: 12px; min-height: 44px; width: fit-content; cursor: pointer; }
.choice input { width: 22px; height: 22px; margin: 0; accent-color: var(--coral); flex-shrink: 0; }
.submit-button, .return-link { display: block; width: fit-content; max-width: 100%; margin: 28px auto 0; padding: 14px 38px; border: 2px solid #fff; border-radius: 50px; background: var(--coral); color: #171717; font: 700 21px/1.5 'Catamaran', sans-serif; cursor: pointer; text-align: center; text-decoration: none; }
.submit-button:hover, .return-link:hover { background: #ffeda3; }
.site-footer { background: var(--coral); color: #000; min-height: 130px; display: flex; align-items: center; justify-content: center; }
.site-footer nav { display: flex; gap: 14px; }
.site-footer a { display: grid; place-items: center; width: 44px; height: 44px; }
.site-footer svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.site-footer .solid { fill: currentColor; stroke: none; }
.site-footer a:focus-visible { outline-color: #000; }
.thank-you { max-width: 850px; margin: 0 auto; text-align: center; min-height: 70vh; }
.thank-you p { font-size: 24px; }
@media (max-width: 640px) {
  .site-header { flex-direction: column; gap: 6px; padding: 16px; }
  .brand img { width: 150px; height: 150px; }
  .site-header nav { gap: 22px; justify-content: center; }
  main { padding: 42px 20px 64px; }
  .contact-intro p { font-size: 21px; }
  .phone { margin-block: 24px 32px; }
  .field label, legend { font-size: 19px; }
  .field input { min-height: 60px; }
  .submit-button { width: 100%; padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }