/* Страница консультаций /coach (спека 2026-10-17). Перенос макета
   mockups/sasha/a-kabinet.html один в один: своя палитра и шрифты, отдельно от
   DESIGN.md. Тёмной/светлой пары нет — у макета одна тёмная гамма (color-scheme:dark).
   Файл подключает только эта страница, поэтому селекторы глобальные, как в макете.
   Шрифты самохостятся (CSP font-src 'self'): @fontsource/prata и @fontsource/golos-text,
   лицензия OFL-1.1. */
@font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/prata-cyrillic-400-normal.woff2") format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/prata-latin-400-normal.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/golos-text-cyrillic-400-normal.woff2") format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/golos-text-latin-400-normal.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/golos-text-cyrillic-500-normal.woff2") format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/golos-text-latin-500-normal.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/golos-text-cyrillic-600-normal.woff2") format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/golos-text-latin-600-normal.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── Токены ───────────────────────────────────────────────── */
:root{
  --base:#0B100E;
  --base-2:#0D1512;
  --panel:#0E2A22;
  --panel-2:#10332A;
  --ink:#EFEAE1;
  --ink-70:rgba(239,234,225,.72);
  --ink-55:rgba(239,234,225,.56);
  --gold:#C9A96A;
  --gold-40:rgba(201,169,106,.4);
  --gold-22:rgba(201,169,106,.22);
  --gold-12:rgba(201,169,106,.12);

  --serif:'Prata',Georgia,'Times New Roman',serif;
  --sans:'Golos Text',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  --pad:clamp(1.25rem,5vw,4.5rem);
  --wrap:1180px;
  --sec:clamp(4rem,11vw,8.5rem);
  --bar:0px;              /* высота мобильной панели CTA */

  --z-bar:60;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--base);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.65;
  font-weight:400;
  overflow-x:clip;
  padding-bottom:var(--bar);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.012em;text-wrap:balance}
p{margin:0;text-wrap:pretty;overflow-wrap:break-word}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.wrap{width:min(100%,var(--wrap));margin-inline:auto;padding-inline:var(--pad)}
.lead{font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.62;color:var(--ink-70);max-width:60ch}
.rule{height:1px;background:var(--gold-22);border:0;margin:0}

/* ── Кнопки ───────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:.85rem 1.75rem;border-radius:2px;
  font:inherit;font-size:.9375rem;font-weight:600;letter-spacing:.015em;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background-color .35s cubic-bezier(.16,1,.3,1),color .35s cubic-bezier(.16,1,.3,1),border-color .35s cubic-bezier(.16,1,.3,1);
}
.btn--gold{background:var(--gold);color:#0B100E;border-color:var(--gold)}
.btn--gold:hover{background:#DCC08A;border-color:#DCC08A}
.btn--line{background:transparent;color:var(--ink);border-color:var(--gold-40)}
.btn--line:hover{border-color:var(--gold);color:var(--gold)}

/* ── Метки ────────────────────────────────────────────────── */
.eyebrow{
  font-size:.75rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold);margin:0
}

/* ── Шапка ────────────────────────────────────────────────── */
.top{position:relative;z-index:2}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:1.35rem}
.top__name{font-family:var(--serif);font-size:1.25rem;letter-spacing:.02em}
.top__link{display:none}
@media(min-width:768px){
  .top__link{display:inline-flex;font-size:.875rem;text-decoration:none;color:var(--ink-70);
    border-bottom:1px solid var(--gold-40);padding-bottom:2px;transition:color .3s,border-color .3s}
  .top__link:hover{color:var(--gold);border-color:var(--gold)}
}

/* ── Герой ────────────────────────────────────────────────── */
.hero{position:relative;margin-top:-4.6rem}
.hero__media{position:relative;overflow:hidden}
.hero__img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 42%}
.hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,16,14,.72) 0,rgba(11,16,14,.12) 32%,rgba(11,16,14,.55) 72%,var(--base) 100%);
}
.hero__body{position:relative;margin-top:-3.25rem;padding-bottom:clamp(2.5rem,8vw,4rem)}
.hero h1{
  font-size:clamp(2.9rem,13.5vw,6rem);line-height:.98;margin-top:.75rem;
}
.hero__sub{margin-top:1.4rem;max-width:34ch;font-size:clamp(1rem,3.6vw,1.1875rem);
  line-height:1.6;color:var(--ink-70)}
.hero__cta{display:grid;gap:.75rem;margin-top:2.25rem}
@media(min-width:460px){.hero__cta{grid-auto-flow:column;justify-content:start;gap:.875rem}}

@media(min-width:900px){
  .hero{margin-top:-5.4rem}
  /* Исходник 1707×2560 — кадр идёт во всю ширину и всё равно уменьшается,
     а не растягивается (на 1440 коэффициент 0.84). */
  .hero__media{position:absolute;inset:0}
  .hero__img{height:100%;aspect-ratio:auto;object-position:56% 42%}
  .hero__media::after{
    background:
      linear-gradient(97deg,rgba(11,16,14,.94) 0,rgba(11,16,14,.76) 32%,rgba(11,16,14,.14) 62%,rgba(11,16,14,.3) 100%),
      linear-gradient(180deg,rgba(11,16,14,.7) 0,transparent 26%,rgba(11,16,14,.5) 100%);
  }
  .hero__body{margin-top:0;min-height:min(88vh,820px);display:flex;flex-direction:column;
    justify-content:center;padding-block:8rem 5rem}
  .hero__inner{max-width:min(56%,660px)}
  .hero__sub{max-width:38ch;margin-top:1.75rem}
}

/* ── Секции ───────────────────────────────────────────────── */
.sec{padding-block:var(--sec)}
.sec--line{border-top:1px solid var(--gold-22)}
.sec h2{font-size:clamp(2rem,6.4vw,3.4rem)}

/* Кто я */
.about{display:grid;gap:clamp(2rem,6vw,3rem)}
.about__text p+p{margin-top:1.15rem}
.about__text p{color:var(--ink-70);font-size:clamp(1rem,3.4vw,1.125rem);max-width:56ch}
.about__text h2{margin-bottom:1.75rem}
.about__fig{margin:0}
.about__img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:70% 50%;
  border:1px solid var(--gold-22)}
@media(min-width:900px){
  .about{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2.5rem,5vw,4.5rem)}
  .about__img{aspect-ratio:5/4}
}

/* Полоса-разделитель с деталью */
.detail{position:relative}
.detail__img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 46%;
  filter:saturate(.92)}
.detail::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--base) 0,rgba(11,16,14,.15) 22%,rgba(11,16,14,.2) 78%,var(--base) 100%)}
@media(min-width:900px){.detail__img{aspect-ratio:21/9}}

/* В чём разница */
.diff__sub{margin-top:1.5rem;max-width:62ch;color:var(--ink-70);
  font-size:clamp(1rem,3.4vw,1.1875rem)}
.cmp{margin-top:clamp(2.5rem,7vw,4rem);border-top:1px solid var(--gold-22)}
.cmp__head{display:none}
.cmp__row{border-bottom:1px solid rgba(239,234,225,.1);padding-block:1.6rem;
  display:grid;gap:1.1rem}
.cmp__cell{display:grid;gap:.45rem;min-width:0}
.cmp__tag{font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.cmp__tag--a{color:var(--ink-55)}
.cmp__tag--b{color:var(--gold)}
.cmp__a{color:var(--ink-55);font-size:.9375rem;line-height:1.55}
.cmp__b{color:var(--ink);font-size:1.0625rem;line-height:1.55}
.cmp__close{margin-top:clamp(2rem,5vw,3rem);font-family:var(--serif);
  font-size:clamp(1.25rem,4.4vw,1.75rem);line-height:1.35;max-width:30ch;color:var(--ink)}
@media(min-width:820px){
  .cmp__head{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:clamp(1.5rem,4vw,3.5rem);padding-block:.9rem}
  .cmp__head span{font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
  .cmp__head span:first-child{color:var(--ink-55)}
  .cmp__head span:last-child{color:var(--gold)}
  .cmp__row{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:clamp(1.5rem,4vw,3.5rem);align-items:baseline;padding-block:1.85rem}
  .cmp__tag{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .cmp__b{font-size:1.125rem}
}

/* Форматы */
.formats{display:grid;gap:1rem;margin-top:clamp(2.25rem,6vw,3.25rem)}
.fmt{background:var(--panel);border:1px solid rgba(239,234,225,.09);
  padding:clamp(1.5rem,5vw,2rem);display:flex;flex-direction:column;gap:.65rem}
.fmt--main{background:var(--panel-2);border-color:var(--gold-40)}
.fmt h3{font-size:clamp(1.375rem,5vw,1.75rem);line-height:1.18}
.fmt--main h3{font-size:clamp(1.6rem,6vw,2.25rem)}
.fmt__dur{color:var(--gold);font-size:.875rem;letter-spacing:.03em}
.fmt__desc{color:var(--ink-70);font-size:1rem;max-width:42ch}
.fmt__meta{margin-top:auto;padding-top:1.25rem;border-top:1px solid var(--gold-22);
  display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;
  font-size:.8125rem;letter-spacing:.04em;color:var(--ink-55)}
.fmt__meta b{font-weight:600;color:var(--ink)}
.formats__note{margin-top:clamp(1.75rem,5vw,2.5rem);color:var(--ink-70);max-width:58ch;
  font-size:clamp(1rem,3.4vw,1.0625rem)}
@media(min-width:860px){
  .formats{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:1.25rem}
  .fmt:nth-of-type(1){grid-area:1/1}
  .fmt:nth-of-type(2){grid-area:2/1}
  .fmt--main{grid-area:1/2/3/2;justify-content:center;padding:clamp(2rem,3.5vw,3rem)}
}

/* Кому */
.who{position:relative;isolation:isolate}
.who__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:62% 50%;z-index:-2}
.who::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,16,14,.92) 0,rgba(14,42,34,.7) 45%,rgba(11,16,14,.94) 100%)}
.who__body{padding-block:clamp(4.5rem,13vw,9rem)}
.who p{margin-top:1.5rem;max-width:46ch;color:var(--ink);
  font-size:clamp(1.0625rem,3.8vw,1.3125rem);line-height:1.58}
@media(min-width:900px){
  /* Фон-кадр 1280×854: панель справа, без растяжения на всю ширину */
  .who__img{inset:0 0 0 auto;width:min(58vw,1280px)}
  .who::before{background:linear-gradient(90deg,var(--base) 0,rgba(14,42,34,.86) 34%,rgba(11,16,14,.42) 100%)}
  .who__body{max-width:640px}
}

/* Форма */
.contact{display:grid;gap:clamp(2.25rem,6vw,3.5rem)}
.contact__sub{margin-top:1.35rem;max-width:44ch;color:var(--ink-70);
  font-size:clamp(1rem,3.4vw,1.125rem)}
.contact__fig{margin:0}
.contact__img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 70%;
  border:1px solid var(--gold-22)}
.form{margin-top:clamp(2rem,5vw,2.5rem);display:grid;gap:1.25rem}
.field{display:grid;gap:.5rem;min-width:0}
.field label{font-size:.875rem;font-weight:500;color:var(--ink)}
.field input,.field textarea{
  width:100%;min-width:0;background:var(--panel);color:var(--ink);
  border:1px solid rgba(239,234,225,.16);border-radius:2px;
  padding:.85rem 1rem;font:inherit;font-size:1rem;line-height:1.5;
  transition:border-color .3s,background-color .3s}
.field textarea{resize:vertical;min-height:7.5rem}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:var(--panel-2)}
.form__actions{display:grid;gap:1.5rem;margin-top:.5rem}
.form__submit{width:100%}
.form__alt{display:grid;gap:.75rem;justify-items:start;
  padding-top:1.5rem;border-top:1px solid var(--gold-22)}
.form__alt span{color:var(--ink-70);font-size:.9375rem}
.form__fine{margin-top:1.5rem;font-size:.8125rem;color:var(--ink-55);letter-spacing:.02em}
@media(min-width:520px){
  .form__submit{width:auto;justify-self:start}
  .form__alt{grid-auto-flow:column;align-items:center;justify-content:start;gap:1.25rem}
}
@media(min-width:900px){
  .contact{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
  .contact__fig{position:sticky;top:3rem}
  .contact__img{aspect-ratio:3/4;object-position:50% 55%}
}

/* Подвал */
.foot{border-top:1px solid var(--gold-22);padding-block:2.5rem 3rem}
.foot__in{display:grid;gap:.85rem}
.foot p{color:var(--ink-55);font-size:.875rem}
.foot a{color:var(--ink-70);text-decoration:none;border-bottom:1px solid var(--gold-40);
  padding-bottom:2px;font-size:.875rem;transition:color .3s,border-color .3s}
.foot a:hover{color:var(--gold);border-color:var(--gold)}
@media(min-width:768px){
  .foot__in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
    gap:.85rem 2rem}
  .foot__in>*{min-width:0}
}

/* Мобильная панель CTA */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);
  background:rgba(11,16,14,.94);border-top:1px solid var(--gold-22);
  padding:.75rem var(--pad);
  padding-bottom:max(.75rem,env(safe-area-inset-bottom));
}
.dock .btn{width:100%}
@media(min-width:768px){.dock{display:none}}
@media(max-width:767.98px){:root{--bar:5.5rem}}

/* Движение */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero__inner>*{animation:rise .85s cubic-bezier(.16,1,.3,1) both}
.hero__inner>*:nth-child(1){animation-delay:.05s}
.hero__inner>*:nth-child(2){animation-delay:.14s}
.hero__inner>*:nth-child(3){animation-delay:.23s}
.hero__inner>*:nth-child(4){animation-delay:.32s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}

/* Нижняя панель появляется только после того, как кнопка героя ушла с экрана
   (app/frontend/lib/consultCtaBar.ts) */
.dock{transform:translateY(115%);transition:transform .22s ease}
.dock.is-on{transform:none}
/* Открытый баннер cookie лежит поверх панели: прячем её, пока баннер не принят. */
.dock.is-covered{transform:translateY(115%)}
@media (prefers-reduced-motion:reduce){.dock{transition:none}}

/* ── Сверх макета: состояния формы и экран успеха ─────────────
   В макете их нет. Цвет ошибки — тёплый коралл, читается на --base и --panel
   (контраст больше 7:1), с золотом не спорит. */
:root{--err:#E9A291}
.field__error,.hl__error{margin:0;color:var(--err);font-size:.875rem;font-weight:500}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--err)}
.form__alert{margin:1.75rem 0 0;padding:1rem 1.25rem;border:1px solid var(--gold-40);
  background:var(--panel);color:var(--ink);font-size:.9375rem}
.consent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:start;
  font-size:.875rem;line-height:1.55;color:var(--ink-70);cursor:pointer}
.consent input{width:1.125rem;height:1.125rem;margin:.12rem 0 0;accent-color:var(--gold);cursor:pointer}
.consent input[aria-invalid="true"]{outline:2px solid var(--err);outline-offset:2px}
.consent a{color:var(--ink);text-decoration-color:var(--gold-40);text-underline-offset:3px;
  transition:color .3s}
.consent a:hover{color:var(--gold)}
.consent__error{grid-column:2}
/* Виджет капчи — чужой iframe, внутрь не покрасить: обводим контейнер. */
[data-captcha-field][data-invalid="true"]{outline:2px solid var(--err);outline-offset:4px}
.form__hint{margin:-.75rem 0 0;color:var(--err);font-size:.875rem;font-weight:500}
.form__hint:empty{display:none}
.btn:disabled{opacity:.72;cursor:progress}

/* Экран успеха */
.sent{padding-block:clamp(3rem,10vw,6rem) var(--sec)}
.sent h1{font-size:clamp(2.4rem,9vw,4.25rem)}
.sent__lead{margin-top:1.4rem;max-width:44ch;color:var(--ink-70);
  font-size:clamp(1rem,3.4vw,1.1875rem)}
.sent__code{margin-top:clamp(2rem,6vw,2.75rem);padding:1.25rem 1.5rem;max-width:26rem;
  background:var(--panel);border:1px solid var(--gold-40);display:grid;gap:.4rem}
.sent__code-label{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.sent__code-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.sent__code-value{font-family:var(--serif);font-size:clamp(1.75rem,7vw,2.25rem);letter-spacing:.06em;line-height:1.2}
.sent__copy{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;background:transparent;color:var(--ink-70);
  border:1px solid var(--gold-40);border-radius:2px;cursor:pointer;transition:color .3s,border-color .3s}
.sent__copy:hover{color:var(--gold);border-color:var(--gold)}
.sent__copy svg{width:20px;height:20px}
.sent__status{margin:0;min-height:1.4em;font-size:.875rem;color:var(--ink-55)}
.sent__cta{margin-top:clamp(2rem,6vw,2.75rem)}
.sent__back{margin-top:1.5rem;font-size:.9375rem}
.sent__back a{color:var(--ink-70);text-decoration:none;border-bottom:1px solid var(--gold-40);
  padding-bottom:2px;transition:color .3s,border-color .3s}
.sent__back a:hover{color:var(--gold);border-color:var(--gold)}
/* На экране успеха нижней панели нет — место под неё не держим. */
body:has(.sent){--bar:0px}