/* Дизайн опроса. Мотив — дом (фонд называется «ДОМ»): силуэт дома = маска фото, кнопки с «крышей», прогресс из домиков.
   Палитра оранжевая с чёрно-синим, шрифт Hanken Grotesk 400/500. Без теней, градиентов, линий и эмодзи. */
:root {
  --bg: #ff7a1f; --ink: #050f16; --muted: #4a1e08; --white: #ffffff; --tile: #fff3ea; --dim: rgba(5, 15, 22, .16);
  --margin: clamp(16px, 5vw, 72px);
  --step-small: .875rem; --step-body: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + .7vw, 1.625rem); --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-hero: clamp(2.25rem, 1rem + 4.6vw, 4.5rem);
  --roof: 14px;
  --house: polygon(50% 0, 100% 22%, 100% 100%, 0 100%, 0 22%);
  --roof-cut: polygon(0 var(--roof), var(--roof) 0, calc(100% - var(--roof)) 0, 100% var(--roof), 100% 100%, 0 100%);
}
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--step-body)/1.45 "Hanken Grotesk", system-ui, sans-serif;
  letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.s-head { height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 22px var(--margin); }
.mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 1.25rem; letter-spacing: -.03em; text-decoration: none; }
.mark svg { width: 24px; height: 24px; fill: var(--ink); }
.s-head nav { font-size: var(--step-small); }

.display { font-weight: 500; letter-spacing: -.05em; line-height: .92; font-size: var(--step-hero); }
.head { font-weight: 500; letter-spacing: -.05em; line-height: .96; font-size: var(--step-head); }
.lead { font-size: var(--step-lead); line-height: 1.3; max-width: 34ch; }
.small { font-size: var(--step-small); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border: 0; cursor: pointer;
  background: var(--ink); color: var(--bg); font: 500 1.125rem/1 "Hanken Grotesk", system-ui, sans-serif; letter-spacing: -.01em;
  text-decoration: none; clip-path: var(--roof-cut); transition: transform .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--light { background: var(--white); color: var(--ink); }
.btn--ghost { background: var(--dim); color: var(--ink); }
.btn[disabled] { opacity: .35; cursor: default; transform: none; }

/* ---------- главная ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--margin); align-items: end;
  padding: 24px var(--margin) 0; min-height: min(78vh, 720px); }
.hero__text { padding-bottom: clamp(32px, 6vw, 88px); display: grid; gap: 28px; align-content: end; }
.hero__text .btn { justify-self: start; }
.hero__art { align-self: stretch; display: flex; align-items: flex-end; justify-content: flex-end; }
.house-photo { display: block; width: 100%; aspect-ratio: 1 / 1.08; object-fit: cover; clip-path: var(--house); background: var(--dim); }
.hero .house-photo { width: 100%; max-width: 640px; height: 100%; min-height: 440px; aspect-ratio: auto; margin-right: calc(var(--margin) * -.4); object-position: 38% 40%; }

.field { background: var(--white); padding: clamp(56px, 9vw, 140px) var(--margin); }
.who__lead { display: grid; gap: 28px; align-content: start; }
.who__lead .house-photo { max-width: 360px; aspect-ratio: 1 / 1.1; }
.about__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.about__pics .house-photo { aspect-ratio: 1 / 1.25; }
.about__pics .house-photo:last-child { margin-bottom: 64px; }
.who { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--margin); align-items: start; }
.who__list { display: grid; gap: 12px; }
.who__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--tile);
  padding: 18px 22px; clip-path: var(--roof-cut); }
.who__row h3 { font-size: 1.375rem; font-weight: 500; letter-spacing: -.03em; }
.who__row div { display: flex; gap: 8px; flex-wrap: wrap; }
.who__row .btn { min-height: 44px; padding: 0 18px; font-size: 1rem; }

.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--margin); align-items: center; padding: clamp(56px, 9vw, 140px) var(--margin); }
.about ul { list-style: none; display: grid; gap: 18px; margin-top: 32px; font-size: var(--step-lead); line-height: 1.25; max-width: 32ch; }
.about li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; }
.about li::before { content: ""; width: 22px; height: 22px; margin-top: .12em; background: var(--ink); clip-path: var(--house); }
.credits { padding: 24px var(--margin) 40px; font-size: var(--step-body); line-height: 1.5; max-width: 78ch; }

/* ---------- опрос ---------- */
.s-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--margin); align-items: start; padding: 8px var(--margin) 72px; }
.s-wrap { max-width: 860px; }
.s-side { position: sticky; top: 24px; }
.s-side .house-photo { width: 100%; max-width: 520px; margin-left: auto; aspect-ratio: 1 / 1.1; animation: drift 24s ease-in-out infinite alternate; }
.s-title { font-size: var(--step-head); margin-bottom: 14px; }
.s-intro { font-size: var(--step-lead); line-height: 1.3; max-width: 36ch; margin-bottom: 32px; }
.houses { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px; }
.houses i { width: 22px; height: 24px; background: var(--dim); clip-path: var(--house); transition: background .2s ease; }
.houses i.on { background: var(--ink); }
.q { border: 0; padding: 0; margin: 0 0 40px; min-width: 0; }
.q legend { float: left; width: 100%; padding: 0; margin-bottom: 20px; font-weight: 500; letter-spacing: -.04em; line-height: 1;
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2.25rem); max-width: 36ch; line-height: 1.05; }
.q > legend + * { clear: both; }
.q__hint { font-size: var(--step-small); margin: -4px 0 14px; color: var(--muted); }
.opts { display: grid; gap: 10px; }
.opt { position: relative; display: block; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.opt span { display: block; padding: 20px 24px; background: var(--tile); font-size: 1.25rem; line-height: 1.3; clip-path: var(--roof-cut);
  transition: background .15s ease, color .15s ease; }
.opt input:hover + span { background: var(--white); }
.opt input:checked + span { background: var(--ink); color: var(--bg); }
.opt input:focus-visible + span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.scale .opt span { padding: 22px 0; text-align: center; font-size: 1.75rem; font-weight: 500; letter-spacing: -.04em; }
.scale .opt .face { padding: 14px 0 12px; }
.scale .opt .face svg { display: block; width: 52px; height: 52px; margin: 0 auto 6px; }
.scale .opt .face b { font-weight: 500; font-size: 1.125rem; }
.face-bg { fill: var(--white); } .opt input:checked + .face .face-bg { fill: var(--bg); }
.face-ink { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; } .face-dot { fill: var(--ink); }
.opt input:checked + .face .face-ink { stroke: var(--ink); } .opt input:checked + .face .face-dot { fill: var(--ink); }
.scale-ends { display: flex; justify-content: space-between; gap: 16px; font-size: var(--step-small); margin-top: 12px; }
textarea { width: 100%; min-height: 140px; border: 0; padding: 20px 24px; background: var(--tile); font: 400 1.25rem/1.4 "Hanken Grotesk", system-ui, sans-serif;
  color: var(--ink); resize: vertical; clip-path: var(--roof-cut); }
textarea::placeholder { color: var(--muted); }
.actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.q--error legend::after { content: " — нужен ответ"; color: var(--muted); font-size: .5em; letter-spacing: 0; font-weight: 400; }
.q__error { margin-top: 12px; font-weight: 500; }
.js .q { display: none; } .js .q.is-current { display: block; animation: rise .25s ease both; }
@keyframes rise { from { opacity: 0; } to { opacity: 1; } } .js .submit-all { display: none; }
.step-nav { display: none; } .js .step-nav { display: flex; }
.note { background: var(--white); padding: 24px; margin-bottom: 24px; clip-path: var(--roof-cut); }
.note p { font-size: var(--step-lead); margin-bottom: 16px; max-width: 34ch; line-height: 1.3; }

/* опрос по шагам: экран фиксированной высоты, кнопки не прыгают */
.js .s-layout--steps { height: calc(100dvh - 76px); min-height: 520px; padding-bottom: clamp(12px, 3vh, 32px); align-items: stretch; overflow: hidden; }
.js .s-layout--steps .s-wrap { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.js .s-layout--steps .s-side { position: static; align-self: stretch; min-height: 0; display: flex; align-items: flex-end; }
.js .s-layout--steps .s-side .house-photo { height: 100%; max-height: 100%; aspect-ratio: auto; object-position: 50% 35%; }
.js .s-layout--steps .s-title { font-size: clamp(1.5rem, 1rem + 2.6vh, 2.5rem); margin-bottom: 8px; }
.js .s-layout--steps .s-intro { font-size: 1rem; max-width: 60ch; margin-bottom: clamp(10px, 2vh, 20px); }
.js .s-layout--steps .houses { margin-bottom: clamp(10px, 2vh, 20px); flex-wrap: nowrap; }
.js .s-layout--steps .houses i { width: 18px; height: 20px; flex: none; }
.js .s-layout--steps form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.js .s-layout--steps .q.is-current { flex: 1; min-height: 0; overflow-y: auto; margin-bottom: 12px; }
.js .s-layout--steps .q legend { font-size: clamp(1.25rem, .9rem + 1.5vh, 2rem); margin-bottom: clamp(10px, 2vh, 20px); }
.js .s-layout--steps .opts { gap: clamp(6px, 1.2vh, 10px); }
.js .s-layout--steps .opt span { padding: clamp(11px, 2vh, 20px) 24px; font-size: clamp(1rem, .85rem + .5vh, 1.25rem); }
.js .s-layout--steps .scale .opt span { padding: clamp(12px, 2vh, 22px) 0; }
.js .s-layout--steps textarea { min-height: 110px; height: 30vh; }
.js .s-layout--steps .step-nav { flex: none; }

/* ---------- спасибо ---------- */
.thanks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--margin); align-items: end; padding: 24px var(--margin) 0; min-height: 70vh; }
.thanks__text { display: grid; gap: 24px; padding-bottom: 64px; }
.thanks .house-photo { max-width: 560px; margin-left: auto; object-position: 50% 30%; }

/* появление блоков: без скрипта всё видно */
.reveal [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal [data-reveal].is-in { opacity: 1; transform: none; }
.hero .house-photo { animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.05); } }
@media (max-width: 820px) {
  .s-head nav { display: none; } .mark { white-space: nowrap; }
  .s-title { font-size: 1.75rem; } .s-intro { font-size: 1.125rem; margin-bottom: 20px; }
  .s-layout { grid-template-columns: 1fr; } .s-side, .js .s-layout--steps .s-side { display: none; }
  .js .s-layout--steps { height: calc(100dvh - 64px); min-height: 0; }
  .js .s-layout--steps.is-started .s-intro { display: none; }
  .js .s-layout--steps.is-started .s-title { font-size: 1.25rem; }
  .s-head { padding: 0 var(--margin); height: 64px; }
  .hero, .who, .about, .thanks { grid-template-columns: 1fr; }
  .hero { min-height: 0; } .hero .house-photo { margin-right: 0; max-width: none; aspect-ratio: 1 / .9; }
  .thanks__text { padding-bottom: 8px; } .thanks .house-photo { margin: 0; max-width: none; aspect-ratio: 1 / .9; }
  .about .house-photo { order: -1; }
  .scale .opt .face svg { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .hero .house-photo { animation: none; } .btn, .houses i, .opt span { transition: none; } .btn:hover { transform: none; } }