/* ОБЪЕКТ — «Ориентир за 3 вопроса» (objest-*). Слева вопросы, справа карточка результата (до 3-го ответа — приглушена).
   На телефоне — две рамки друг под другом, карточка результата появляется только после последнего ответа.
   main.css обнуляет рамки и отступы у всего внутри .page — поэтому селекторы из двух классов. */
.objest,
.objest *{box-sizing:border-box;}
.objest{display:block;color:var(--objekt-color-cream);font-family:var(--objekt-font-body);}
.objest .objest-box{
  display:grid;grid-template-columns:minmax(0, 1fr);gap:16px;
}
.objest .objest-q,
.objest .objest-r{border:1px solid rgba(169,150,125,0.45);padding:clamp(24px, 3vw, 56px) clamp(20px, 3vw, 56px);}
.objest .objest-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.objest .objest-eyebrow{display:flex;align-items:center;gap:16px;margin:0 0 clamp(20px, 2vw, 32px);font-size:var(--objekt-fs-caption);letter-spacing:.24em;text-transform:uppercase;color:var(--objekt-color-accent);}
.objest .objest-eyebrow span{flex-shrink:0;}
.objest .objest-eyebrow i{display:block;flex:1 1 auto;max-width:200px;min-width:20px;height:1px;background:var(--objekt-color-line-strong);}
@media (max-width:399px){ .objest .objest-eyebrow{gap:10px;letter-spacing:.16em;} }

.objest .objest-lead{margin:calc(-1 * clamp(8px, 1vw, 16px)) 0 clamp(20px, 2vw, 28px);max-width:34em;font-size:clamp(15px, 1vw, 18px);line-height:1.5;color:rgba(245,242,237,0.7);}

/* ---------- шаги ---------- */
.objest .objest-steps{display:flex;align-items:center;margin:0 0 clamp(20px, 2vw, 28px);padding:0;list-style:none;}
.objest .objest-step{display:flex;align-items:center;margin:0;padding:0;}
.objest .objest-step + .objest-step::before{content:"";display:block;width:clamp(40px, 4vw, 72px);height:1px;margin:0 6px;background:rgba(245,242,237,0.3);transition:background-color .3s ease;}
.objest .objest-step.is-done + .objest-step::before,
.objest .objest-step.is-done + .objest-step.is-current::before{background:var(--objekt-color-accent);}
.objest .objest-step__btn{
  position:relative;display:flex;align-items:center;justify-content:center;width:clamp(34px, 2.3vw, 44px);height:clamp(34px, 2.3vw, 44px);margin:0;padding:0;
  border:1px solid rgba(245,242,237,0.3);border-radius:50%;background:transparent;color:rgba(245,242,237,0.3);
  font-family:var(--objekt-font-heading);font-size:clamp(16px, 1.1vw, 20px);line-height:1;cursor:default;
  -webkit-appearance:none;appearance:none;transition:background-color .3s ease, border-color .3s ease, color .3s ease;
}
.objest .objest-step__ok{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease;}
.objest .objest-step__ok svg{width:60%;height:60%;}
.objest .objest-step.is-current .objest-step__btn{border-color:var(--objekt-color-accent);color:var(--objekt-color-cream);}
.objest .objest-step.is-done .objest-step__btn{background:var(--objekt-color-accent);border-color:var(--objekt-color-accent);color:var(--objekt-color-bg);}
.objest .objest-step.is-done .objest-step__n{opacity:0;}
.objest .objest-step.is-done .objest-step__ok{opacity:1;}
.objest .objest-step__btn:not(:disabled){cursor:pointer;}
.objest .objest-step__btn:not(:disabled):hover{background:var(--objekt-color-accent-hover);border-color:var(--objekt-color-accent-hover);}
.objest .objest-step__btn:focus-visible{outline:2px solid var(--objekt-color-accent) !important;outline-offset:3px;}

/* ---------- вопрос ---------- */
.objest .objest-stage{transition:opacity .2s ease, transform .2s ease;}
.objest .objest-stage.is-leaving{opacity:0;transform:translateX(-12px);}
.objest .objest-stage.is-entering{opacity:0;transform:translateX(12px);transition:none;}
.objest .objest-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(14px, 1.3vw, 20px);}
.objest .objest-chips[hidden]{display:none;}
.objest .objest-chip{display:inline-flex;align-items:center;min-height:32px;padding:4px 16px;border:1px solid rgba(245,242,237,0.3);border-radius:999px;font-size:14px;line-height:1.3;color:rgba(245,242,237,0.85);}
.objest .objest-question{margin:0 0 clamp(18px, 1.6vw, 28px);font-family:var(--objekt-font-heading);font-weight:500;font-size:clamp(24px, 2vw, 40px);line-height:1.15;letter-spacing:var(--objekt-tracking-heading);color:var(--objekt-color-cream);}
.objest .objest-options{display:grid;grid-template-columns:minmax(0, 1fr);gap:10px;}
@media (min-width:600px){ .objest .objest-options.is-many{grid-template-columns:repeat(2, minmax(0, 1fr));} }
.objest .objest-opt{
  display:flex;align-items:center;gap:16px;width:100%;min-height:clamp(56px, 3.4vw, 64px);margin:0;padding:12px clamp(16px, 1.4vw, 24px);
  border:1px solid rgba(245,242,237,0.22);border-radius:0;background:transparent;color:var(--objekt-color-cream);
  font-family:inherit;font-size:clamp(16px, 1vw, 19px);line-height:1.35;text-align:left;cursor:pointer;
  -webkit-appearance:none;appearance:none;transition:border-color .2s ease, background-color .2s ease;
}
.objest .objest-opt:hover{border-color:rgba(169,150,125,0.7);}
.objest .objest-opt:focus-visible{outline:2px solid var(--objekt-color-accent) !important;outline-offset:2px;}
.objest .objest-opt.is-selected{border-color:var(--objekt-color-accent);background:rgba(169,150,125,0.06);}
.objest .objest-opt__radio{position:relative;flex-shrink:0;width:22px;height:22px;border:1px solid rgba(245,242,237,0.5);border-radius:50%;transition:border-color .2s ease;}
.objest .objest-opt__radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--objekt-color-accent);transform:scale(0);transition:transform .2s ease;}
.objest .objest-opt.is-selected .objest-opt__radio{border-color:var(--objekt-color-accent);}
.objest .objest-opt.is-selected .objest-opt__radio::after{transform:scale(1);}
.objest .objest-noscript{margin:0;font-size:16px;color:var(--objekt-color-text-light);}

/* ---------- результат ---------- */
.objest .objest-r{position:relative;overflow:hidden;transition:opacity .5s ease;}
.objest .objest-r.is-idle{display:none;}
.objest .objest-r__head{position:relative;display:flex;align-items:flex-start;min-height:clamp(150px, 11vw, 220px);margin:0 0 clamp(16px, 1.6vw, 24px);}
.objest .objest-r__text{position:relative;z-index:1;flex:1 1 auto;min-width:0;max-width:64%;}
.objest .objest-photo{
  position:absolute;top:calc(-1 * clamp(24px, 3vw, 56px));right:calc(-1 * clamp(20px, 3vw, 56px));width:min(48%, 300px);aspect-ratio:1/1;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 38%), linear-gradient(to bottom, #000 62%, transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right, transparent 0, #000 38%), linear-gradient(to bottom, #000 62%, transparent 100%);mask-composite:intersect;
}
.objest .objest-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;}
.objest .objest-value{
  font-family:var(--objekt-font-heading);font-weight:500;font-size:clamp(40px, 3.6vw, 72px);line-height:1.05;letter-spacing:var(--objekt-tracking-display);
  color:var(--objekt-color-accent);font-variant-numeric:lining-nums;
}
.objest .objest-r.is-long .objest-value{font-size:clamp(36px, 3vw, 60px);}
.objest .objest-r.is-vyach .objest-value{font-size:clamp(28px, 2.2vw, 42px);line-height:1.12;}
.objest .objest-r.is-idle .objest-value{color:rgba(245,242,237,0.6);}
.objest .objest-caption{margin:clamp(10px, 1vw, 16px) 0 0;max-width:22em;font-size:clamp(15px, 0.95vw, 17px);line-height:1.5;color:rgba(245,242,237,0.7);}

.objest .objest-form{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0, 1fr);gap:10px;}
.objest .objest-field{display:block;margin:0;}
.objest .objest-input{
  display:block;width:100%;height:clamp(52px, 3.2vw, 60px);margin:0;padding:0 16px;
  border:1px solid rgba(245,242,237,0.22);border-radius:0;background:var(--objekt-color-field-bg);box-shadow:none;
  color:var(--objekt-color-cream) !important;font-family:inherit;font-size:16px;-webkit-appearance:none;appearance:none;transition:border-color .2s ease;
}
.objest .objest-input::placeholder{color:rgba(245,242,237,0.5) !important;opacity:1;} /* main.css красит плейсхолдеры и текст полей в чёрный с !important */
.objest .objest-input:hover:not(:disabled){border-color:rgba(245,242,237,0.4);}
.objest .objest-input:focus{outline:none;border-color:var(--objekt-color-accent);}
.objest .objest-input.has-error{border-color:var(--objekt-color-error);}
.objest .objest-submit{
  display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:clamp(56px, 3.4vw, 64px);margin:4px 0 0;padding:0 20px;
  border:1px solid var(--objekt-color-accent);border-radius:0;background:var(--objekt-color-accent);color:var(--objekt-color-bg);
  font-family:inherit;font-size:var(--objekt-fs-button);font-weight:500;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.objest .objest-submit svg{width:22px;height:22px;transition:transform .2s ease;}
.objest .objest-submit:hover:not(:disabled){background:var(--objekt-color-accent-hover);border-color:var(--objekt-color-accent-hover);}
.objest .objest-submit:hover:not(:disabled) svg{transform:translateX(3px);}
.objest .objest-submit:focus-visible{outline:2px solid var(--objekt-color-accent) !important;outline-offset:3px;}
.objest .objest-submit:disabled{cursor:default;}
.objest .objest-submit.is-sending{opacity:.6;}

.objest .objest-consents{margin-top:6px;}
.objest .objest-check{position:relative;display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:13px;line-height:1.45;color:rgba(245,242,237,0.7);}
.objest .objest-check + .objest-check{margin-top:8px;}
.objest .objest-check__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.objest .objest-check__box{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;margin-top:1px;border:1px solid rgba(245,242,237,0.4);color:transparent;transition:background-color .2s ease, border-color .2s ease;}
.objest .objest-check__box svg{width:16px;height:16px;}
.objest .objest-check:hover .objest-check__box{border-color:var(--objekt-color-accent);}
.objest .objest-check__input:checked + .objest-check__box{background:var(--objekt-color-accent);border-color:var(--objekt-color-accent);color:var(--objekt-color-bg);}
.objest .objest-check__input:focus-visible + .objest-check__box{outline:2px solid var(--objekt-color-accent) !important;outline-offset:2px;}
.objest .objest-check.has-error .objest-check__box{border-color:var(--objekt-color-error);}
.objest .objest-check__text a{color:inherit;text-decoration:underline;text-decoration-color:rgba(245,242,237,0.35);text-underline-offset:2px;}
.objest .objest-check__text a:hover{color:var(--objekt-color-accent);}
.objest .objest-private{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(245,242,237,0.55);}
.objest .objest-private svg{width:16px;height:16px;flex-shrink:0;}
.objest .objest-error{display:none;font-size:13px;line-height:1.4;color:var(--objekt-color-error);}
.objest .objest-error.is-shown{display:block;}
.objest .objest-error--consent.is-shown{margin-top:8px;}

/* появление карточки */
.objest .objest-r.is-live{animation:objest-in .5s ease both;}
@keyframes objest-in{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* ---------- планшет и компьютер: одна рамка, две части ~55/45 ---------- */
@media (min-width:768px){
  .objest .objest-box{grid-template-columns:minmax(0, 55fr) minmax(0, 45fr);gap:0;border:1px solid rgba(169,150,125,0.45);}
  .objest .objest-q,
  .objest .objest-r{border:none;}
  .objest .objest-r{border-left:1px solid var(--objekt-color-line);}
  .objest .objest-r.is-idle{display:block;opacity:.4;}
  .objest .objest-r.is-idle .objest-photo{filter:grayscale(.4);}
  .objest .objest-r.is-live{animation:none;opacity:1;}
}
@media (min-width:768px) and (max-width:1023px){
  .objest .objest-box{grid-template-columns:minmax(0, 1fr);}
  .objest .objest-r{border-left:none;border-top:1px solid var(--objekt-color-line);}
  .objest .objest-r__text{max-width:62%;}
}
@media (max-width:767px){
  .objest .objest-r__head{min-height:clamp(140px, 42vw, 200px);}
  .objest .objest-photo{width:46%;}
  .objest .objest-value{font-size:clamp(32px, 9vw, 42px);}
  .objest .objest-r.is-long .objest-value{font-size:clamp(28px, 7.6vw, 36px);}
  .objest .objest-r__text{max-width:68%;}
  .objest .objest-r.is-vyach .objest-value{font-size:clamp(26px, 7.4vw, 32px);}
}
@media (prefers-reduced-motion:reduce){
  .objest .objest-stage,
  .objest .objest-r{transition:none;}
  .objest .objest-r.is-live{animation:none;}
}

/* много вариантов (вопрос 1 со всеми направлениями): на телефоне — две колонки с короткими названиями */
.objest .objest-opt__short{display:none;}
@media (max-width:599px){
  .objest .objest-options.is-many{grid-template-columns:repeat(2, minmax(0, 1fr));gap:8px;}
  .objest .objest-options.is-many .objest-opt{gap:10px;min-height:56px;padding:10px 12px;font-size:15px;line-height:1.25;}
  .objest .objest-options.is-many .objest-opt__radio{width:18px;height:18px;}
  .objest .objest-options.is-many .objest-opt__radio::after{inset:3px;}
  .objest .objest-options.is-many .objest-opt__short{display:block;}
  .objest .objest-options.is-many .objest-opt.has-short .objest-opt__label{display:none;}
}