* { box-sizing: border-box; margin: 0; padding: 0; }
a { color: var(--link); }
a, button, input, select, textarea, label { touch-action: manipulation; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 22px; }

.hero::after {
  content: ""; position: absolute; inset: 18px; border: 1px solid rgba(185,154,95,.35);
  pointer-events: none;
}
.hero .wrap { position: relative; }

footer .brand { letter-spacing: .18em; font-weight: 700; color: #fff; font-size: 14px; }

.modal-ov { position: fixed; inset: 0; background: rgba(14,23,38,.55); display: none; align-items: center; justify-content: center; padding: 18px; z-index: 50; }
.modal-ov.open { display: flex; }
.modal { background: var(--white); border-radius: 14px; max-width: 500px; width: 100%; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; padding: 26px 24px 24px; position: relative; }
.modal h3 { font-size: 17px; margin-bottom: 4px; }
.modal .m-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }
.modal .close { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; font-size: 22px; color: var(--muted); cursor: pointer; line-height: 1; }
.modal .close:hover { color: var(--ink); }
.field { margin-bottom: 13px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.purpose { font-size: 12px; color: var(--ink-2); background: var(--paper); border-radius: 8px; padding: 12px 14px; margin: 14px 0; line-height: 1.7; }
.consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin-bottom: 16px; min-height: 44px; padding-block: 6px; }
.consent input { margin-top: 2px; width: 18px; height: 18px; flex: 0 0 auto; }
.submit { width: 100%; background: var(--navy); color: #fff; border: none; border-radius: 999px; padding: 12px; font-weight: 700; font-size: 15px; cursor: pointer; }
.submit:hover:not(:disabled) { opacity: .9; }
.submit:disabled { opacity: .55; cursor: default; }
.submit .spin { display: none; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; margin-right: 8px; vertical-align: -2px; animation: spin .7s linear infinite; }
.submit.is-sending .spin { display: inline-block; }
.form-err { color: #b3453f; font-size: 12.5px; margin: 8px 0 0; display: none; }
.field-err { color: #b3453f; display: none; font-size: 12px; line-height: 1.6; margin-top: 4px; }
.field-err[role="alert"] { display: block; }
[data-form-body] { transition: opacity .35s ease; }
[data-form-body].is-leaving { opacity: 0; }
.form-done { display: none; text-align: center; padding: 18px 0 8px; opacity: 0; transform: translateY(8px); }
.form-done.is-visible { opacity: 1; transform: translateY(0); transition: opacity .5s ease, transform .5s ease; }
.form-done .mark { width: 46px; height: 46px; margin: 0 auto; display: block; }
.form-done .mark circle, .form-done .mark path { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.form-done.is-visible .mark circle { stroke-dasharray: 126; stroke-dashoffset: 126; animation: drawMark .6s ease forwards; }
.form-done.is-visible .mark path { stroke-dasharray: 28; stroke-dashoffset: 28; animation: drawMark .35s ease .45s forwards; }
.form-done p { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.demo-note { font-size: 11px; color: var(--muted); margin-top: 10px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.shake { animation: shake .3s ease; }

.js-anim .reveal, .js-anim .hero [data-hero-reveal] { opacity: 0; transform: translateY(14px); }
.js-anim .reveal.is-visible, .js-anim .hero.is-visible [data-hero-reveal] { opacity: 1; transform: translateY(0); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); transition-delay: var(--delay, 0ms); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drawMark { to { stroke-dashoffset: 0; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
