@font-face { font-family: 'Bricolage Grotesque'; src: url(../fonts/bricolage.woff2) format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url(../fonts/instrument.woff2) format('woff2'); font-weight: 300 700; font-display: swap; }
:root { --paper: #f3f6f6; --card: #fbfcfc; --ink: #0b1a20; --ink-2: #3c5561; --ink-3: #7b939d; --line: rgba(11, 26, 32, .11); --blue: #1a9cbd; --blue-deep: #0d5f75; --blue-ink: #083f4f; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--paper); color: var(--ink); font-family: 'Instrument Sans', 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: var(--blue-deep); }
.bar { display: flex; justify-content: space-between; align-items: center; padding: 20px clamp(16px, 5vw, 64px); max-width: 980px; margin: 0 auto; }
.wordmark { display: inline-flex; align-items: baseline; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.6rem; letter-spacing: -.05em; color: var(--ink); text-decoration: none; }
.wordmark svg { width: .6em; height: .6em; margin: 0 .015em 0 .03em; }
.back { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; text-decoration: none; color: var(--ink); padding: 9px 16px; border: 1px solid rgba(11, 26, 32, .2); border-radius: 99px; }
.back:hover { border-color: var(--blue); }
.back svg { width: 16px; height: 16px; }
main { max-width: 980px; margin: 0 auto; padding: 24px clamp(16px, 5vw, 64px) 80px; }
.doc { background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: clamp(24px, 5vw, 56px); }
h1 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(2rem, 5vw, 3rem); font-weight: 720; letter-spacing: -.035em; line-height: 1.05; margin-bottom: 10px; }
.sub { color: var(--ink-3); margin-bottom: 30px; }
h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.3rem; font-weight: 680; letter-spacing: -.02em; margin: 34px 0 10px; padding-top: 22px; border-top: 1px solid var(--line); }
h3 { font-size: 1rem; font-weight: 700; margin: 20px 0 6px; }
p, li { color: var(--ink-2); }
p + p { margin-top: 10px; }
ul { padding-left: 20px; margin: 8px 0; }
li { margin: 4px 0; }
strong { color: var(--ink); }
.contact-form { margin-top: 16px; display: grid; gap: 10px; max-width: 560px; }
.contact-form label { font-size: .88rem; font-weight: 600; color: var(--ink); }
.contact-form input, .contact-form textarea { width: 100%; font: inherit; padding: 11px 14px; border-radius: 14px; border: 1px solid rgba(11, 26, 32, .22); background: #fff; }
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form button { justify-self: start; font: inherit; font-weight: 600; color: #fff; background: var(--ink); border: 0; border-radius: 99px; padding: 11px 22px; cursor: pointer; }
.contact-form button:hover { background: var(--blue-deep); }
.hp { position: absolute; left: -9999px; }
.sent { display: none; margin-top: 12px; color: var(--blue-deep); font-weight: 600; }
:target.sent { display: block; }
footer { max-width: 980px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 64px) 40px; display: flex; gap: 22px; font-size: .88rem; }