@font-face { font-family: "MAK"; src: url("assets/fonts/MAK.otf") format("opentype"); font-style: normal; font-weight: 300; font-display: swap; }
:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; color: #1e2930; background: #fff; font-synthesis: none; }
* { box-sizing: border-box; }
body { position: relative; isolation: isolate; margin: 0; min-height: 100vh; background: #d4ccc8; }
body::before { content: ""; position: fixed; z-index: -2; inset: -12px; background: url("assets/images/background-room.jpg") center center / cover no-repeat; filter: blur(7px); }
body::after { content: ""; position: fixed; z-index: -1; inset: 0; background: rgba(255,255,255,.16); }
.preview { position: relative; padding: 9px 18px; background: #31434a; color: white; text-align: center; font-size: 12px; letter-spacing: .02em; }
.layout { width: min(620px, calc(100% - 40px)); margin: 30px auto 72px; padding: 28px 20px 34px; border: 1px solid rgba(255,255,255,.7); border-radius: 24px; background: rgba(255,255,255,.79); box-shadow: 0 16px 50px rgba(43,32,32,.12); text-align: center; }
.brand { display: inline-flex; align-items: center; justify-content: center; gap: 11px; font-size: 16px; font-weight: 650; letter-spacing: .015em; }
.brand-mark { display: inline-grid; place-items: center; width: 37px; height: 37px; border: 1px solid #c4a897; border-radius: 50%; color: #b97058; font-family: Georgia, serif; font-size: 21px; }
.form-panel { padding: 0; }
.eyebrow { max-width: 500px; margin: 48px auto 18px; color: #b97058; font-size: 17px; font-weight: 600; line-height: 1.45; }
h1 { margin: 0 0 14px; font: 400 clamp(40px, 7vw, 57px)/1.06 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
.lead { max-width: 500px; margin: 8px auto 36px; color: #d45a78; font-family: "MAK", Arial, sans-serif; font-size: 28px; font-weight: 300; line-height: 1.13; letter-spacing: -.035em; text-transform: uppercase; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.choice-group { margin: 0 0 28px; }
legend, .field > span { margin-bottom: 12px; font-size: 15px; font-weight: 650; }
.choices { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.choice-group.is-invalid .choices { outline: 2px solid #c73d42; outline-offset: 7px; border-radius: 18px; }
.choice-group.is-invalid legend { color: #a92f38; }
.choice-error { margin: 15px 0 0; color: #a92f38; font-size: 13px; font-weight: 600; }
.choice-error[hidden] { display: none; }
.choice { cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice > span { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 18px; border: 1px solid #d8dcd9; border-radius: 99px; color: #46545b; font-size: 15px; transition: border-color .15s, background-color .15s, color .15s; -webkit-tap-highlight-color: transparent; }
.choice input:checked + span { background: #31434a; border-color: #31434a; color: #fff; }
.choice:has(input[name="intent"], input[name="city"]):hover > span,
.choice input:is([name="intent"], [name="city"]):checked + span,
.choice input:is([name="intent"], [name="city"]):focus-visible + span { box-shadow: 0 0 0 2px rgba(255,255,255,.44), 0 0 16px 6px rgba(255,255,255,.52); }
.choice:has(input[name="property_type"]):hover > span,
.choice input[name="property_type"]:checked + span,
.choice input[name="property_type"]:focus-visible + span { box-shadow: 0 0 0 3px rgba(255, 230, 139, .32), 0 0 18px 7px rgba(255, 220, 108, .44); border-color: #e7ce83; }
.choice input:focus-visible + span, input:focus-visible, textarea:focus-visible, .submit:focus-visible, a:focus-visible { outline: 3px solid #e9ae91; outline-offset: 3px; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 23px; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field > span { display: block; }
.field small { color: #a3a7a5; font-size: 12px; font-weight: 400; }
.field .phone-hint { margin-top: 6px; text-align: center; }
.field input, .field textarea { display: block; width: 100%; padding: 15px 16px; border: 1px solid #d8dcd9; border-radius: 11px; background: #fff; color: #1e2930; font: inherit; font-size: 16px; line-height: 1.4; text-align: center; }
.field input::placeholder, .field textarea::placeholder { color: #a8b0ad; }
.field textarea { resize: vertical; min-height: 106px; }
.comment { margin-top: 23px; }
.consent { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: 9px; margin: 24px 0 20px; color: #6a7579; font-size: 13px; line-height: 1.5; text-align: left; cursor: pointer; }
.consent input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: #a45c49; cursor: pointer; }
.policy-link { margin: -8px 0 20px; font-size: 13px; text-align: center; }
a { color: #31434a; text-underline-offset: 2px; }
.submit { position: relative; isolation: isolate; width: 100%; display: block; text-align: center; border: 0; border-radius: 12px; background: #b97058; color: #fff; padding: 17px 19px; box-shadow: 0 3px 10px rgba(42,43,42,.16); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.submit:hover { filter: brightness(.93); }
.submit:disabled { opacity: .7; cursor: wait; }
.dust-particle { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: var(--size); height: var(--size); border-radius: 50%; background: var(--color); box-shadow: 0 0 5px 2px rgba(255, 242, 218, .75), 0 0 12px 4px rgba(224, 208, 190, .38); pointer-events: none; opacity: 0; animation: dust-drift var(--duration) ease-out forwards; }
.dust-helmet { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: 31px; height: 25px; background: url("assets/images/hard-hat.svg?v=3") center / contain no-repeat; filter: drop-shadow(0 0 5px rgba(255, 255, 255, .9)); pointer-events: none; opacity: 0; animation: helmet-drift var(--duration) ease-out forwards; }
.choice-house { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: 19px; height: 19px; background: url("assets/images/tiny-house.svg") center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(55, 48, 43, .25)); pointer-events: none; opacity: 0; animation: house-drift var(--duration) ease-out forwards; }
.city-effect { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: 24px; height: 24px; pointer-events: none; opacity: 0; animation: house-drift var(--duration) ease-out forwards; }
.city-effect--kremlin { width: 30px; height: 30px; background: url("assets/images/tiny-kremlin.svg?v=2") center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(80, 47, 43, .25)); }
.city-effect--boat { width: 28px; height: 28px; background: url("assets/images/tiny-boat.svg") center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(74, 107, 125, .3)); }
@keyframes dust-drift { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.45); } 15% { opacity: .95; } 55% { opacity: .8; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.9); } }
@keyframes helmet-drift { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7) rotate(0); } 10% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--spin)); } }
@keyframes house-drift { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); } }
@media (prefers-reduced-motion: reduce) { .dust-particle, .dust-helmet, .choice-house, .city-effect { display: none; } }
.form-note { margin: 13px 0 0; color: #a3a7a5; text-align: center; font-size: 12px; }
.form-result { padding: 11px 12px; margin: 13px 0 0; background: #fff6eb; color: #85502d; border-radius: 9px; font-size: 13px; }
.success-dialog { width: min(390px, calc(100% - 36px)); max-width: none; padding: 30px 26px 25px; border: 1px solid #efe7e2; border-radius: 20px; background: #fff; color: #1e2930; box-shadow: 0 20px 60px rgba(30, 41, 48, .2); text-align: center; }
.success-dialog::backdrop { background: rgba(30, 41, 48, .42); }
.success-dialog p { margin: 0 0 22px; font-size: 22px; font-weight: 650; line-height: 1.3; }
.success-dialog button { min-width: 112px; min-height: 46px; padding: 10px 20px; border: 0; border-radius: 11px; background: #b97058; color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.success-dialog button:focus-visible { outline: 3px solid #e9ae91; outline-offset: 3px; }
.legal { width: min(800px, calc(100% - 40px)); margin: 40px auto 80px; padding: clamp(22px, 5vw, 48px); border-radius: 18px; background: rgba(255,255,255,.94); line-height: 1.55; }
.legal h1 { font-size: clamp(36px, 6vw, 54px); }
.legal h2 { margin: 32px 0 12px; font: 400 26px/1.15 Georgia, "Times New Roman", serif; }
.legal p, .legal li { color: #48575e; }
.legal .draft { padding: 15px; border-left: 3px solid #b97058; background: #f7f5f0; }
@media (max-width: 600px) { .layout { width: calc(100% - 24px); margin: 16px auto 42px; padding: 23px 13px 30px; } .eyebrow { margin-top: 34px; } h1 { font-size: clamp(37px, 9vw, 47px); } .lead { margin-top: 8px; margin-bottom: 32px; font-size: 21px; } .choice > span { min-height: 46px; padding-inline: 16px; } }