* { box-sizing: border-box; }
body { margin: 0; background: #f7f7f6; color: #171717; font: 1rem/1.6 system-ui, sans-serif; }
.wrap { max-width: 70rem; margin-inline: auto; padding-inline: clamp(1rem, 5vw, 4rem); }
header { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; border-bottom: 1px solid #ccc; }
header a:first-child { font-weight: 750; }
a { color: inherit; text-underline-offset: .2em; }
.hero { padding-block: clamp(3rem, 12vw, 8rem); }
h1 { max-width: 13ch; font-size: clamp(2.6rem, 8vw, 6rem); line-height: 1; margin: .35em 0; letter-spacing: -.055em; }
h2 { font-size: 2rem; margin-top: 0; }
#contact { max-width: 36rem; padding-block: 2rem 4rem; border-top: 1px solid #ccc; }
form, label { display: grid; gap: .65rem; }
form { gap: 1rem; }
input, textarea, button { font: inherit; border: 1px solid #777; border-radius: .25rem; padding: .65rem; }
textarea { resize: vertical; }
button { justify-self: start; background: #171717; color: white; padding-inline: 1rem; }
button:disabled { opacity: .6; }
:focus-visible { outline: 3px solid #555; outline-offset: 3px; }
#form-status { margin: 0; }